/* =========================================================
   V24.15 PROMPT - SAFE TARGETED UI ONLY
   No layout shell, Firebase, message, presence or sorting changes.
   ========================================================= */

/* WhatsApp green accent support */
:root{
  --whatsapp-green:#25D366;
  --whatsapp-green-dark:#20BD5A;
  --whatsapp-green-soft:rgba(37,211,102,.16);
}

/* Selected nav: one glass/water-drop surface, driven by existing --active-bg */
.nav-icon.active,
.sidebar-icon .icon-btn.nav-settings-active{
  position:relative !important;
  color:var(--primary-contrast,#fff) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--primary,#25D366) 92%,white 8%),
      color-mix(in srgb,var(--primary,#25D366) 78%,black 22%)) !important;
  border:1px solid color-mix(in srgb,var(--primary,#25D366) 70%,white 30%) !important;
  border-radius:22px !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -7px 14px rgba(0,0,0,.10),
    0 5px 14px color-mix(in srgb,var(--primary,#25D366) 32%,transparent) !important;
}
.nav-icon.active::before,
.sidebar-icon .icon-btn.nav-settings-active::before{
  content:"" !important;
  position:absolute !important;
  left:14% !important; right:14% !important; top:4px !important;
  height:35% !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0)) !important;
  pointer-events:none !important;
}
.nav-icon.active svg,
.sidebar-icon .icon-btn.nav-settings-active svg{
  position:relative !important;
  z-index:1 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12)) !important;
}
.sidebar-icon .icon-btn.nav-settings-active{
  width:44px;
  height:44px;
}

/* WhatsApp green is available everywhere once selected. */
.admin-accent-option[data-color="#25D366"] .admin-accent-swatch{
  background:#25D366 !important;
}

/* Selected accent must control the create-group button and common accent actions. */
.create-btn,
.send-submit-btn,
.v19-btn-primary,
.admin-accent-option.selected{
  background:var(--primary,#25D366) !important;
  border-color:var(--primary,#25D366) !important;
}
.create-btn:hover,
.send-submit-btn:hover,
.v19-btn-primary:hover{
  background:color-mix(in srgb,var(--primary,#25D366) 86%,black 14%) !important;
}
.filter-tab.active,
.search-input:focus,
.v19-input:focus,
.v19-select:focus{
  border-color:var(--primary,#25D366) !important;
}
.filter-tab.active{color:var(--primary,#25D366) !important;}

/* Presence + Chat labels */
.online-name,
.online-text,
.online .chat-label{
  color:#25D366 !important;
}
.chat-label{
  color:var(--primary,#25D366) !important;
  font-weight:700 !important;
}

/* Message composer: deliberately distinct light/dark surfaces/text. */
:root[data-theme="light"] .zalo-input-box{
  background:#fff !important;
  border-color:#d7dde3 !important;
}
:root[data-theme="light"] .chat-input{
  color:#111B21 !important;
  -webkit-text-fill-color:#111B21 !important;
  caret-color:var(--primary,#25D366) !important;
}
:root[data-theme="light"] .chat-input::placeholder{color:#667781 !important;}

:root[data-theme="dark"] .zalo-input-box{
  background:#202C33 !important;
  border-color:#2A3942 !important;
}
:root[data-theme="dark"] .chat-input{
  color:#E9EDEF !important;
  -webkit-text-fill-color:#E9EDEF !important;
  caret-color:var(--primary,#25D366) !important;
}
:root[data-theme="dark"] .chat-input::placeholder{color:#8696A0 !important;}

/* Mobile only: use the existing four controls, in their existing DOM order,
   without moving or resizing the app content shell. */
@media (max-width:767px){
  .sidebar-icon{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:0 !important;
  }
  .sidebar-top,
  .sidebar-bottom,
  .nav-icons{
    display:contents !important;
  }
  .sidebar-icon > .avatar{display:none !important;}
  .sidebar-icon > .nav-icons > .nav-icon,
  .sidebar-icon > .nav-icon,
  .sidebar-icon > .icon-btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:calc(var(--v6m-nav-content,60px) - 8px) !important;
    min-height:calc(var(--v6m-nav-content,60px) - 8px) !important;
    margin:0 3px !important;
    border-radius:22px !important;
  }
  .sidebar-icon > .nav-icon svg,
  .sidebar-icon > .icon-btn svg{
    width:22px !important;height:22px !important;
  }
  .sidebar-icon > .icon-btn{
    background:transparent !important;
    border:1px solid transparent !important;
    color:var(--text-sub) !important;
  }
  .sidebar-icon > .nav-icon.active,
  .sidebar-icon > .icon-btn.nav-settings-active{
    background:
      linear-gradient(145deg,
        color-mix(in srgb,var(--primary,#25D366) 92%,white 8%),
        color-mix(in srgb,var(--primary,#25D366) 78%,black 22%)) !important;
  }
  /* Admin remains visible in the bar when the existing permission logic shows it. */
  #adminPanelBtn[style*="display: none"]{display:none !important;}
  #adminPanelBtn[style*="display: flex"]{display:flex !important;}
}

/* Login follows the stored workspace accent without changing its structure. */
:root.login-accent-ready{
  --primary:#25D366;
  --primary-hover:#20BD5A;
}

/* Admin management surfaces follow the selected accent; destructive actions stay red. */
.admin-tabs .atab-btn.active,
#adminModal .admin-action-edit,
#adminModal .action-btn{
  background:var(--primary,#25D366) !important;
  border-color:var(--primary,#25D366) !important;
}
.admin-tabs .atab-btn.active{color:var(--primary-contrast,#fff) !important;}
.admin-tabs .atab-btn:hover,
#adminModal .admin-action-edit:hover,
#adminModal .action-btn:hover{filter:brightness(.94) !important;}