body {
  font-family: 'Inter', sans-serif;
  background-color: #0e0e0e;
  color: #e7e5e5;
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb { background: #252626; border-radius: 10px; }
textarea::-webkit-scrollbar { width: 3px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { background: #333333; border-radius: 10px; }
/* Donut tooltip */
#donutTooltip { pointer-events: none; transition: opacity .15s; }

/* ─── Account Popup: CSS variables ─── */
:root, html[data-theme="dark"] {
  --accent:       #f59e0b;
  --ap-bg-raised: #141414;
  --ap-bg-elev:   #1a1a1b;
  --ap-bg-elev-2: #202021;
  --ap-border:    #252626;
  --ap-text:      #e7e5e5;
  --ap-text-dim:  #a7a5a5;
  --ap-text-mute: #6f6d6d;
  --ap-hover:     #1c1c1c;
}
html[data-theme="light"] {
  color-scheme: light;
  --ap-bg-raised: #ffffff;
  --ap-bg-elev:   #f6f4f2;
  --ap-bg-elev-2: #ebe7e2;
  --ap-border:    #ded8d1;
  --ap-text:      #191715;
  --ap-text-dim:  #645c55;
  --ap-text-mute: #9a9188;
  --ap-hover:     #f0ebe5;
}

/* ─── Light mode: global overrides ─── */
html[data-theme="light"] body {
  background-color: #f8f6f3;
  color: #191715;
}
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f8f6f3;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb,
html[data-theme="light"] textarea::-webkit-scrollbar-thumb {
  background: #d5cec6;
}
html[data-theme="light"] #sidebar {
  background-color: #fffdf9 !important;
  border-color: rgba(82, 65, 45, 0.12) !important;
}
html[data-theme="light"] main {
  background-color: #f8f6f3 !important;
}
html[data-theme="light"] .bg-background,
html[data-theme="light"] .bg-surface,
html[data-theme="light"] .bg-surface-dim {
  background-color: #f8f6f3 !important;
}
html[data-theme="light"] .bg-surface-container-lowest {
  background-color: #ffffff !important;
}
html[data-theme="light"] .bg-surface-container-low {
  background-color: #fbf9f6 !important;
}
html[data-theme="light"] .bg-surface-container {
  background-color: #f3eee8 !important;
}
html[data-theme="light"] .bg-surface-container-high {
  background-color: #ebe5dc !important;
}
html[data-theme="light"] .bg-surface-container-highest,
html[data-theme="light"] .bg-surface-variant,
html[data-theme="light"] .bg-surface-bright {
  background-color: #e0d8cf !important;
}
html[data-theme="light"] .bg-surface-container\/20 { background-color: rgba(243, 238, 232, 0.55) !important; }
html[data-theme="light"] .bg-surface-container\/30 { background-color: rgba(243, 238, 232, 0.72) !important; }
html[data-theme="light"] .bg-surface-container-low\/30 { background-color: rgba(251, 249, 246, 0.76) !important; }
html[data-theme="light"] .bg-surface-container-low\/50 { background-color: rgba(251, 249, 246, 0.88) !important; }
html[data-theme="light"] .bg-surface-container-high\/80 { background-color: rgba(235, 229, 220, 0.9) !important; }
html[data-theme="light"] .bg-surface-container-highest\/30 { background-color: rgba(224, 216, 207, 0.55) !important; }
html[data-theme="light"] .text-on-surface { color: #191715 !important; }
html[data-theme="light"] .text-on-surface\/50 { color: rgba(25, 23, 21, 0.5) !important; }
html[data-theme="light"] .text-on-surface\/60 { color: rgba(25, 23, 21, 0.6) !important; }
html[data-theme="light"] .text-on-surface\/80 { color: rgba(25, 23, 21, 0.8) !important; }
html[data-theme="light"] .text-on-surface\/90 { color: rgba(25, 23, 21, 0.9) !important; }
html[data-theme="light"] .text-on-surface-variant { color: #645c55 !important; }
html[data-theme="light"] .text-on-surface-variant\/20 { color: rgba(100, 92, 85, 0.2) !important; }
html[data-theme="light"] .text-on-surface-variant\/25 { color: rgba(100, 92, 85, 0.25) !important; }
html[data-theme="light"] .text-on-surface-variant\/30 { color: rgba(100, 92, 85, 0.3) !important; }
html[data-theme="light"] .text-on-surface-variant\/40 { color: rgba(100, 92, 85, 0.4) !important; }
html[data-theme="light"] .text-on-surface-variant\/50 { color: rgba(100, 92, 85, 0.5) !important; }
html[data-theme="light"] .text-on-surface-variant\/60 { color: rgba(100, 92, 85, 0.6) !important; }
html[data-theme="light"] .text-primary { color: #2f2a25 !important; }
html[data-theme="light"] .bg-primary { background-color: #2f2a25 !important; }
html[data-theme="light"] .bg-primary\/10 { background-color: rgba(47, 42, 37, 0.1) !important; }
html[data-theme="light"] .bg-primary\/40 { background-color: rgba(47, 42, 37, 0.4) !important; }
html[data-theme="light"] .text-primary\/60 { color: rgba(47, 42, 37, 0.6) !important; }
html[data-theme="light"] .text-on-primary { color: #ffffff !important; }
html[data-theme="light"] .bg-error-container { background-color: #f8deda !important; }
html[data-theme="light"] .bg-error-container\/20 { background-color: rgba(248, 222, 218, 0.65) !important; }
html[data-theme="light"] .text-on-error-container { color: #8f2f2a !important; }
html[data-theme="light"] .hover\:bg-surface-container:hover { background-color: #f3eee8 !important; }
html[data-theme="light"] .hover\:bg-surface-container-high:hover { background-color: #ebe5dc !important; }
html[data-theme="light"] .hover\:bg-surface-container-highest:hover,
html[data-theme="light"] .hover\:bg-surface-variant:hover {
  background-color: #e0d8cf !important;
}
html[data-theme="light"] .hover\:text-on-surface:hover { color: #191715 !important; }
html[data-theme="light"] .hover\:text-primary:hover { color: #2f2a25 !important; }
html[data-theme="light"] .border-outline-variant\/5 { border-color: rgba(82, 65, 45, 0.08) !important; }
html[data-theme="light"] .border-outline-variant\/10 { border-color: rgba(82, 65, 45, 0.12) !important; }
html[data-theme="light"] .border-outline-variant\/15 { border-color: rgba(82, 65, 45, 0.16) !important; }
html[data-theme="light"] .border-outline-variant\/20 { border-color: rgba(82, 65, 45, 0.2) !important; }
html[data-theme="light"] .border-outline-variant\/30 { border-color: rgba(82, 65, 45, 0.26) !important; }
html[data-theme="light"] .hover\:border-outline-variant\/60:hover { border-color: rgba(82, 65, 45, 0.42) !important; }
html[data-theme="light"] .ring-outline-variant\/10 { --tw-ring-color: rgba(82, 65, 45, 0.12) !important; }
html[data-theme="light"] .ring-outline-variant\/20 { --tw-ring-color: rgba(82, 65, 45, 0.2) !important; }
html[data-theme="light"] .ring-outline-variant\/30 { --tw-ring-color: rgba(82, 65, 45, 0.26) !important; }
html[data-theme="light"] .placeholder-on-surface-variant\/40::placeholder,
html[data-theme="light"] .placeholder\:text-on-surface-variant\/40::placeholder {
  color: rgba(100, 92, 85, 0.45) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color-scheme: light;
}
html[data-theme="light"] .shadow-2xl {
  --tw-shadow-color: rgba(50, 39, 28, 0.16);
}
html[data-theme="light"] .shadow-lg {
  --tw-shadow-color: rgba(50, 39, 28, 0.12);
}

/* ─── Popup ─── */
.ap-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: -8px; right: -8px;
  background: var(--ap-bg-raised);
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.2);
  overflow: hidden;
  z-index: 50;
}
@keyframes ap-popin {
  from { opacity:0; transform:translateY(6px) scale(.98); }
  to   { opacity:1; transform:translateY(0)   scale(1);   }
}
.ap-divider { height: 1px; background: var(--ap-border); }
.ap-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
}
.ap-header-title { font-weight:600; font-size:13px; color:var(--ap-text); }
.ap-header-sub   { font-size:12px; color:var(--ap-text-dim); margin-top:2px; }
.ap-header-actions { display:flex; gap:6px; align-items:center; }
.ap-theme-btn {
  width:34px; height:34px; border-radius:8px;
  background:var(--ap-bg-elev); border:1px solid var(--ap-border);
  color:var(--ap-text); cursor:pointer;
  display:grid; place-items:center;
  transition:background 120ms;
}
.ap-theme-btn:hover { background:var(--ap-bg-elev-2); }
.ap-bot-btn { position:relative; transition:color 160ms, background 160ms; }
.ap-bot-btn.is-on { color:var(--ap-text); background:var(--ap-bg-elev-2); }
.ap-bot-btn.is-on::after {
  content:""; position:absolute; top:6px; right:6px;
  width:6px; height:6px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 2px var(--ap-bg-raised), 0 0 6px rgba(16,185,129,.6);
}
.ap-bot-btn.is-off { color:var(--ap-text-mute); background:var(--ap-bg-elev); opacity:.5; }
.ap-bot-btn.is-off::after {
  content:""; position:absolute; top:6px; right:6px;
  width:6px; height:6px; border-radius:50%;
  background:var(--ap-text-mute);
  box-shadow:0 0 0 2px var(--ap-bg-raised);
}
.ap-bot-btn:hover { opacity:1; }
.ap-menu { display:flex; flex-direction:column; gap:1px; padding:6px; }
.ap-menu-item {
  display:flex; align-items:center;
  padding:8px 10px; width:100%;
  background:transparent; border:0;
  color:var(--ap-text); font-size:13px;
  border-radius:6px; cursor:pointer;
  text-align:left; font-weight:500;
  font-family:inherit; text-decoration:none;
}
.ap-menu-item:hover { background:var(--ap-hover); }
.ap-menu-item.is-danger:hover { background:rgba(239,68,68,.1); color:#f87171; }
.ap-menu-item.is-disabled { opacity:.45; cursor:default; pointer-events:none; }
.ap-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--ap-bg-elev-2); color:var(--ap-text);
  display:grid; place-items:center;
  font-size:11px; font-weight:600;
  flex-shrink:0; overflow:hidden;
  position:relative;
}

/* ─── Chat Panel: push layout (desktop) / fixed overlay (mobile) ─── */
#chat2Panel {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: width 300ms ease-in-out;
  border-left: 1px solid rgba(72,72,72,0.15);
}
.chat-panel-inner {
  width: 340px;
  min-width: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #131313;
}
@media (max-width: 767px) {
  #chat2Panel {
    position: fixed !important;
    right: 0; top: 0; bottom: 0;
    width: 100% !important;
    max-width: 420px;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 300ms ease-in-out !important;
    overflow: visible;
    border-left: none;
    box-shadow: -8px 0 32px rgba(0,0,0,0.5);
  }
  .chat-panel-inner {
    width: 100%;
    min-width: unset;
  }
}
html[data-theme="light"] .chat-panel-inner { background: #f0efef; }
html[data-theme="light"] #chat2Panel {
  border-left-color: rgba(82, 65, 45, 0.14);
}
html[data-theme="light"] [style*="scrollbar-color:#484848"],
html[data-theme="light"] [style*="scrollbar-color:#333333"] {
  scrollbar-color: #d5cec6 transparent !important;
}
html[data-theme="light"] [style*="background:#252626"] {
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(50, 39, 28, 0.16) !important;
}
html[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"] {
  background: rgba(47, 42, 37, 0.06) !important;
}
html[data-theme="light"] .cs-btn + div {
  background: #ffffff !important;
  border: 1px solid rgba(82, 65, 45, 0.14);
  box-shadow: 0 18px 40px rgba(50, 39, 28, 0.16) !important;
}
html[data-theme="light"] .cs-item {
  color: #645c55;
}
html[data-theme="light"] .cs-item:hover {
  background: rgba(253, 192, 3, 0.14);
  color: #191715;
}
html[data-theme="light"] .cs-search {
  background: #fbf9f6;
  border-color: rgba(82, 65, 45, 0.18);
  color: #191715;
}
html[data-theme="light"] .cs-search::placeholder,
html[data-theme="light"] .cs-empty {
  color: rgba(100, 92, 85, 0.56);
}

/* ─── Shared tab bar ─── */
.ptab {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  color: var(--ap-text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms, background 120ms;
}
.ptab.active { color: #18180a; background: #fdc003; }
.ptab:hover:not(.active) { color: var(--ap-text); background: rgba(255,255,255,0.06); }
.ptab-count { display: none; }
html[data-theme="light"] .ptab:hover:not(.active) {
  background: rgba(47, 42, 37, 0.07);
}

/* ─── Avatar gradient backgrounds — shared (sidebar + admin + profile) ─── */
.av-0 { background:linear-gradient(135deg,#3a2e18,#5c4a28) !important; color:#f5d78b !important; }
.av-1 { background:linear-gradient(135deg,#1c3a2e,#2e5c4a) !important; color:#8befc0 !important; }
.av-2 { background:linear-gradient(135deg,#3a1c2e,#5c2e4a) !important; color:#efc0d8 !important; }
.av-3 { background:linear-gradient(135deg,#1c2e3a,#2e4a5c) !important; color:#a7d0ef !important; }
.av-4 { background:linear-gradient(135deg,#2e3a1c,#4a5c2e) !important; color:#c0efa7 !important; }
.av-5 { background:linear-gradient(135deg,#3a1c1c,#5c2929) !important; color:#ffb3ae !important; }
.av-6 { background:linear-gradient(135deg,#3a2618,#5c3c28) !important; color:#ffd4a0 !important; }
.av-7 { background:linear-gradient(135deg,#1e1c3a,#2e2a5c) !important; color:#c4b5fd !important; }
.av-8 { background:linear-gradient(135deg,#1c3438,#2e5054) !important; color:#9ee5ef !important; }
.av-9 { background:linear-gradient(135deg,#282838,#3c3c50) !important; color:#c8c8e0 !important; }
/* Trigger */
.sb-trigger {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:8px 10px;
  background:var(--ap-bg-elev); border:1px solid var(--ap-border);
  border-radius:8px; color:var(--ap-text); cursor:pointer;
  text-align:left; font-family:inherit;
  transition:background 120ms ease, border-color 120ms ease;
}
.sb-trigger:hover { background:var(--ap-bg-elev-2); }
.sb-trigger-text  { flex:1; min-width:0; }
.sb-trigger-title { font-weight:600; font-size:13px; color:var(--ap-text); }
.sb-trigger-sub   { font-size:12px; color:var(--ap-text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-trigger-chev  { color:var(--ap-text-mute); display:inline-grid; place-items:center; }