/* ── Dark mode ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0D0D0D;
  --surface: #1C1C1E;
  --border: rgba(255,255,255,0.10);
  --text: #F5F5F7;
  --text-2: #AEAEB2;
  --text-3: #636366;
  --accent: #0A84FF;
  --accent-bg: rgba(10,132,255,0.18);
  --green: #30D158;
  --red: #FF453A;
  --shadow: 0 1px 3px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.25);
}

/* Translucent surfaces */
[data-theme="dark"] .sidebar { background: rgba(28,28,30,0.85); }
[data-theme="dark"] .topbar { background: rgba(28,28,30,0.80); }
[data-theme="dark"] .mobile-nav { background: rgba(28,28,30,0.95); }

/* Chat bubbles & badges */
[data-theme="dark"] .msg-row.assistant .bubble { background: #2C2C2E; }
[data-theme="dark"] .sim-msg.assistant .sim-bubble { background: #2C2C2E; }
[data-theme="dark"] .live-watch-typing-bubble { background: #2C2C2E; }
[data-theme="dark"] .badge-user { background: #2C2C2E; color: var(--text-2); }
[data-theme="dark"] .thinking-body { background: #2C2C2E; }
[data-theme="dark"] .msg-count { background: rgba(255,255,255,0.08); }

/* Table rows */
[data-theme="dark"] tbody td { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] tbody tr:hover td { background: rgba(10,132,255,0.06); }

/* Skeleton shimmer */
[data-theme="dark"] .skeleton { background: linear-gradient(90deg,#2C2C2E 25%,#3A3A3C 50%,#2C2C2E 75%); background-size: 200% 100%; }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* Session rows */
[data-theme="dark"] .session-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .live-sess-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .session-row:hover { background: #2C2C2E; }

/* Escalation float */
[data-theme="dark"] .esc-float { background: #1F1400; border-color: #5C3D00; }
[data-theme="dark"] .esc-float-head { border-bottom-color: #5C3D00; }
[data-theme="dark"] .esc-float-title { color: #FFB340; }
[data-theme="dark"] .esc-float-close { color: #FFB340; }
[data-theme="dark"] .esc-float-update { border-top-color: #5C3D00; }
[data-theme="dark"] .esc-float-update-label { color: #FFB340; }
[data-theme="dark"] .esc-toggle { background: #1F1400; border-color: #5C3D00; color: #FFB340; }
[data-theme="dark"] .ticket-filter-select { background:var(--surface); border-color:rgba(255,255,255,0.12); color:var(--text); }
[data-theme="dark"] .comment-item.internal { background:#2A1C00; border-left-color:#7A5200; }
[data-theme="dark"] .comment-item.external { background:#001B35; border-left-color:#0A84FF; }
[data-theme="dark"] .comment-textarea { background:#2C2C2E; border-color:rgba(255,255,255,0.12); color:var(--text); }

/* Thread panel */
[data-theme="dark"] .thread-col { background: var(--surface); }

/* Theme toggle button */
.theme-toggle { margin-left: 6px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; transition: background .14s, color .14s; }
.theme-toggle:hover { background: rgba(128,128,128,0.12); color: var(--text); }
.theme-toggle svg { width: 15px; height: 15px; }
[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.16); color: #AEAEB2; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.10); color: #F5F5F7; }
[data-theme="dark"] .refresh-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-2); }

/* Agent tags – brighter colors for dark surfaces */
[data-theme="dark"] .agent-tag.product { background: rgba(10,132,255,0.18); color: #0A84FF; }
[data-theme="dark"] .agent-tag.support { background: rgba(255,179,64,0.16); color: #FFB340; }
[data-theme="dark"] .agent-tag.human { background: rgba(48,209,88,0.16); color: #30D158; }

/* Live-agent badges */
[data-theme="dark"] .live-agent-badge.product { background: rgba(10,132,255,0.18); color: #0A84FF; }
[data-theme="dark"] .live-agent-badge.support { background: rgba(255,179,64,0.16); color: #FFB340; }
[data-theme="dark"] .live-agent-badge.human { background: rgba(48,209,88,0.16); color: #30D158; }

/* Green text elements – dark green #1a7a35 is invisible on dark bg */
[data-theme="dark"] .acct-status-badge { background: rgba(48,209,88,0.16); color: #30D158; }
[data-theme="dark"] .acct-wallet-badge { background: rgba(48,209,88,0.16); color: #30D158; }
[data-theme="dark"] .transfer-queue-btn { background: rgba(48,209,88,0.12); color: #30D158; border-color: #30D158; }
[data-theme="dark"] .transfer-queue-btn:hover { background: rgba(48,209,88,0.22); }
[data-theme="dark"] .sess-pill.my-sess { background: rgba(48,209,88,0.12); color: #30D158; border-color: rgba(48,209,88,0.30); }
[data-theme="dark"] .sess-pill.my-sess:hover,
[data-theme="dark"] .sess-pill.my-sess.active { background: rgba(48,209,88,0.24); color: #30D158; border-color: #30D158; }

/* Invisible rgba(0,0,0,0.04) borders on dark */
[data-theme="dark"] .agent-sess-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .live-request-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .live-convo-row { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .rd-row { border-bottom-color: rgba(255,255,255,0.05); }

/* Account avatar – dark navy blends into dark surface */
[data-theme="dark"] .acct-avatar { background: #2A3F6B; }

/* Overview, Audit & Workspace pages – dull --text-3 (#636366) greys are too dim
   on dark; lift them to the legible --text-2 grey used by the sidebar nav labels */
[data-theme="dark"] #page-overview,
[data-theme="dark"] #page-audit,
[data-theme="dark"] #page-live-agents,
[data-theme="dark"] #page-team,
[data-theme="dark"] #page-live,
[data-theme="dark"] #page-flagged,
[data-theme="dark"] #page-escalations { --text-3: var(--text-2); }