/* HERA_PREMIUM_DARK_V33_WHATSAPP */


/* ==========================================================
   BRAND SYSTEM
   ========================================================== */

/*
 * Açık moddaki marka mantığını koruyoruz,
 * ancak dark mod için daha güçlü ve premium tonlar.
 */

html.hera-dark #communications
.v10-workspace.brand-hera,
html.hera-dark #communications
.v10-conversation.brand-hera{
  --brand:#24c982;
  --brand-rgb:36,201,130;
  --brand-deep:#153b2d;
  --brand-deep-2:#102c23;
  --brand-text:#79e7b5;
}


html.hera-dark #communications
.v10-workspace.brand-novia,
html.hera-dark #communications
.v10-conversation.brand-novia{
  --brand:#f59a23;
  --brand-rgb:245,154,35;
  --brand-deep:#3b2915;
  --brand-deep-2:#2d2114;
  --brand-text:#ffc46e;
}


html.hera-dark #communications
.v10-workspace.brand-vita,
html.hera-dark #communications
.v10-conversation.brand-vita{
  --brand:#9273ff;
  --brand-rgb:146,115,255;
  --brand-deep:#2c2347;
  --brand-deep-2:#211b37;
  --brand-text:#c4b5ff;
}


/* ==========================================================
   CHAT AREA
   ========================================================== */

html.hera-dark #communications
.v10-chat-column{
  background:#111923 !important;

  border:
    1px solid #2a3949 !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.15)
    !important;
}


html.hera-dark #communications
.v10-message-area{
  background:
    radial-gradient(
      circle at 50% -120px,
      rgba(255,255,255,.025),
      transparent 320px
    ),
    #0f1721 !important;
}


/* ==========================================================
   CUSTOMER HEADER — BRAND MUST BE VISIBLE
   ========================================================== */

html.hera-dark #communications
.v10-workspace
.v10-customer-bar{
  position:relative;

  background:
    linear-gradient(
      180deg,
      #17212d,
      #131c26
    ) !important;

  border-bottom:
    1px solid #2a3949 !important;
}


/* Üst marka çizgisi */

html.hera-dark #communications
.v10-workspace
.v10-customer-bar::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:3px;

  background:
    var(--brand) !important;

  box-shadow:
    0 0 16px
    rgba(
      var(--brand-rgb),
      .30
    );
}


html.hera-dark #communications
.v10-customer-avatar{
  background:
    var(--brand-deep) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid
    rgba(
      var(--brand-rgb),
      .55
    ) !important;

  box-shadow:
    0 0 0 4px
    rgba(
      var(--brand-rgb),
      .08
    ) !important;
}


html.hera-dark #communications
.v10-customer-title>b{
  color:#f4f7fa !important;
}


html.hera-dark #communications
.v10-customer-title>div{
  color:#8f9dad !important;
}


html.hera-dark #communications
.v10-customer-title strong{
  color:
    var(--brand-text) !important;

  font-weight:950 !important;
}


/* ==========================================================
   OUTGOING MESSAGE
   ========================================================== */

/*
 * V31 / V32'nin verdiği açık pastel yeşil sınıfları
 * burada bilinçli şekilde eziyoruz.
 */

html.hera-dark #communications
.v10-workspace
.v10-message-row.out
.v10-message,

html.hera-dark #communications
.v10-workspace
.v10-message-row.out
.v10-message.hera-v32-green,

html.hera-dark #communications
.v10-workspace
.v10-message-row.out
.v10-message.hera-v31-green{

  background:
    linear-gradient(
      145deg,
      var(--brand-deep),
      var(--brand-deep-2)
    ) !important;

  color:#f8fbfd !important;

  border:
    1px solid
    rgba(
      var(--brand-rgb),
      .54
    ) !important;

  border-bottom-right-radius:
    4px !important;

  box-shadow:
    0 5px 15px
    rgba(0,0,0,.18),
    inset 3px 0 0
    var(--brand)
    !important;
}


/* Mesaj metni kesin okunur */

html.hera-dark #communications
.v10-message-row.out
.v10-message-text,

html.hera-dark #communications
.v10-message-row.out
.v10-message
.hera-v32-text,

html.hera-dark #communications
.v10-message-row.out
.v10-message *{
  color:#f7fafc !important;
}


/* ==========================================================
   INCOMING MESSAGE
   ========================================================== */

html.hera-dark #communications
.v10-message-row.in
.v10-message{

  background:
    linear-gradient(
      145deg,
      #202b38,
      #19232f
    ) !important;

  color:#edf2f7 !important;

  border:
    1px solid
    #344353 !important;

  border-bottom-left-radius:
    4px !important;

  box-shadow:
    0 4px 13px
    rgba(0,0,0,.14)
    !important;
}


html.hera-dark #communications
.v10-message-row.in
.v10-message-text,
html.hera-dark #communications
.v10-message-row.in
.v10-message *{
  color:#edf2f7 !important;
}


/* ==========================================================
   MESSAGE TIME
   ========================================================== */

html.hera-dark #communications
.v10-message-time{
  margin-top:3px;

  color:
    rgba(220,229,237,.66)
    !important;

  font-size:8px !important;
}


html.hera-dark #communications
.v10-message-row.out
.v10-message-time{
  color:
    rgba(255,255,255,.64)
    !important;
}


/* ==========================================================
   CONVERSATION LIST — BRAND IDENTITY
   ========================================================== */

html.hera-dark #communications
.v10-conversation{
  border-left:
    3px solid transparent
    !important;

  background:
    #141e29 !important;
}


html.hera-dark #communications
.v10-conversation:hover{
  background:
    #182330 !important;
}


/*
 * Aktif konuşmada markanın rengi net.
 */

html.hera-dark #communications
.v10-conversation.active{
  background:
    linear-gradient(
      90deg,
      rgba(
        var(--brand-rgb),
        .15
      ),
      rgba(
        var(--brand-rgb),
        .025
      ) 55%,
      #151f2a
    ) !important;

  border-left-color:
    var(--brand) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(
      var(--brand-rgb),
      .10
    ) !important;
}


html.hera-dark #communications
.v10-conversation-top b{
  color:#f0f4f8 !important;
}


html.hera-dark #communications
.v10-conversation-preview{
  color:#a6b2bf !important;
}


html.hera-dark #communications
.v10-conversation-top time{
  color:#718094 !important;
}


/* Conversation avatar */

html.hera-dark #communications
.v10-conversation-avatar{
  background:
    rgba(
      var(--brand-rgb),
      .11
    ) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid
    rgba(
      var(--brand-rgb),
      .20
    ) !important;
}


/* ==========================================================
   BRAND PILLS
   ========================================================== */

html.hera-dark #communications
.v10-brand-pill{
  border:
    1px solid transparent !important;

  font-weight:950 !important;
}


/* HERA */

html.hera-dark #communications
.v10-brand-pill.hera{
  background:
    rgba(36,201,130,.13)
    !important;

  color:#5de0a6 !important;

  border-color:
    rgba(36,201,130,.22)
    !important;
}


/* NOVIA */

html.hera-dark #communications
.v10-brand-pill.novia{
  background:
    rgba(245,154,35,.14)
    !important;

  color:#ffb854 !important;

  border-color:
    rgba(245,154,35,.24)
    !important;
}


/* VITA */

html.hera-dark #communications
.v10-brand-pill.vita{
  background:
    rgba(146,115,255,.14)
    !important;

  color:#b7a4ff !important;

  border-color:
    rgba(146,115,255,.25)
    !important;
}


/* WhatsApp etiketi */

html.hera-dark #communications
.v10-mini-pill{
  background:#222d39 !important;

  color:#b4c0cd !important;

  border:
    1px solid #304052
    !important;
}


/* ==========================================================
   FILTER BAR — MARKA BUTONLARI
   ========================================================== */

html.hera-dark #communications
.v8com-filter{
  color:#cbd4de !important;
}


html.hera-dark #communications
.v8com-filter.active{
  background:#263341 !important;

  color:#fff !important;

  border-color:#3a4a5d !important;
}


/*
 * Filtre butonlarının kendisi de marka rengini söylesin.
 */

html.hera-dark #communications
.v8com-filter:nth-of-type(4){
  color:#5de0a6 !important;
}


html.hera-dark #communications
.v8com-filter:nth-of-type(5){
  color:#ffb854 !important;
}


html.hera-dark #communications
.v8com-filter:nth-of-type(6){
  color:#b7a4ff !important;
}


/* ==========================================================
   BOOKING PANEL
   ========================================================== */

html.hera-dark #communications
.v10-booking{
  background:
    linear-gradient(
      180deg,
      #17212c,
      #131c26
    ) !important;

  border:
    1px solid #2c3a49 !important;

  border-top:
    4px solid
    var(--brand) !important;
}


html.hera-dark #communications
.v10-booking-head span{
  color:
    var(--brand-text) !important;
}


html.hera-dark #communications
.v10-booking-head b{
  color:#f2f5f8 !important;
}


/* ==========================================================
   COMPOSER
   ========================================================== */

html.hera-dark #communications
.v10-composer{
  background:#131c26 !important;

  border-top:
    1px solid #2b3949 !important;
}


html.hera-dark #communications
.v10-composer textarea{
  background:#0e1620 !important;

  color:#f0f4f8 !important;

  border-color:#304052 !important;
}


html.hera-dark #communications
.v10-composer textarea:focus{
  background:#101923 !important;

  border-color:
    var(--brand) !important;

  box-shadow:
    0 0 0 3px
    rgba(
      var(--brand-rgb),
      .10
    ) !important;
}


html.hera-dark #communications
.v10-composer button{
  background:
    var(--brand) !important;

  color:#fff !important;

  box-shadow:
    0 5px 16px
    rgba(
      var(--brand-rgb),
      .22
    ) !important;
}


/* ==========================================================
   NOVIA BUTTON CONTRAST
   ========================================================== */

/*
 * Turuncuda beyaz yerine çok koyu yazı
 * daha premium ve okunaklı.
 */

html.hera-dark #communications
.v10-workspace.brand-novia
.v10-composer button{
  color:#241606 !important;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

html.hera-dark #communications
.v10-message-area::-webkit-scrollbar-thumb,
html.hera-dark #communications
.v10-conversation-list::-webkit-scrollbar-thumb{
  background:#3a4858 !important;
}