/*
 * Initio Soft-Dark Theme
 * Lifted from AMOLED to soft dark for readable contrast and depth.
 *
 * Contrast ratios (vs --i-bg-surface #16161a):
 *   --i-text          #f4f4f5  → 15.7:1   AAA
 *   --i-text-2        #c8c8cf  → 10.4:1   AAA
 *   --i-text-muted    #9a9aa3  → 5.6:1    AA  (was #707070, ~3.8:1 — failed)
 *   --i-text-faint    #7c7c85  → 4.7:1    AA  large/secondary only
 *   --i-text-disabled #5a5a62  → 2.9:1    NOT for body text — disabled UI only
 *
 * Tokens for new pages:
 *   --i-bg-app, --i-bg-surface, --i-bg-elevated, --i-bg-input
 *   --i-border, --i-border-strong
 *   --i-text, --i-text-2, --i-text-muted, --i-text-faint
 *   --i-accent (#9fe870), --i-accent-hover, --i-accent-tint, --i-accent-tint-strong
 *   --i-focus-ring (use for :focus-visible)
 *   --i-elev-1 / --i-elev-2 / --i-elev-3 (shadow scale)
 */

/* ── 1. Root variable overrides ──────────────────────────────────────────── */
html[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Initio dark tokens — reference these in any new page CSS */
  --i-bg-app:            #0e0e10;
  --i-bg-surface:        #16161a;   /* cards */
  --i-bg-elevated:       #1f1f24;   /* modals, dropdowns, popovers */
  --i-bg-input:          #131316;
  --i-bg-hover:          rgba(255,255,255,.05);
  --i-border:            #26262c;
  --i-border-strong:     #313137;
  --i-text:              #f4f4f5;
  --i-text-2:            #c8c8cf;
  --i-text-muted:        #9a9aa3;   /* WCAG AA on every dark surface */
  --i-text-faint:        #7c7c85;   /* min for non-essential meta */
  --i-text-disabled:     #5a5a62;   /* visually-disabled UI only */
  --i-accent-tint:       color-mix(in srgb,var(--i-accent,#9fe870) 10%,transparent);
  --i-accent-tint-strong:color-mix(in srgb,var(--i-accent,#9fe870) 18%,transparent);
  --i-focus-ring:        0 0 0 3px color-mix(in srgb,var(--i-accent,#9fe870) 45%,transparent);
  --i-elev-1:            0 1px 2px rgba(0,0,0,.55);
  --i-elev-2:            0 4px 12px rgba(0,0,0,.55);
  --i-elev-3:            0 16px 32px rgba(0,0,0,.65);

  /* UI framework layout vars */
  --bs-paper-bg:            #16161a;
  --bs-paper-bg-rgb:        22, 22, 26;
  --bs-navbar-bg:           #16161a;
  --bs-navbar-box-shadow:   0 1px 0 #26262c;
  --bs-navbar-border-color: #26262c;
  --bs-menu-bg:             #0a0a0c;
  --bs-menu-bg-rgb:         10, 10, 12;
  --bs-menu-color:          #c8c8cf;
  --bs-menu-color-rgb:      200, 200, 207;
  --bs-menu-hover-bg:       rgba(255,255,255,.05);
  --bs-menu-hover-color:    #f5f5f5;
  --bs-menu-sub-active-bg:  color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent);
  --bs-menu-sub-active-color: var(--i-accent,#9fe870);
  --bs-menu-active-color:   var(--i-accent,#9fe870);
  --bs-menu-active-bg:      color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent);
  --bs-menu-active-toggle-bg: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 8%,transparent);
  --bs-menu-header-color:   #9a9aa3;
  --bs-menu-divider-color:  #26262c;
  --bs-box-shadow:          0 .1875rem .5rem 0 rgba(0,0,0,.6);
  --bs-box-shadow-sm:       0 .125rem .375rem 0 rgba(0,0,0,.5);
  --bs-box-shadow-lg:       0 .25rem .75rem 0 rgba(0,0,0,.7);

  /* Per-page chat var overrides */
  --bg-app:        #0e0e10;
  --border:        #26262c;
  --border-xs:     #1f1f24;
  --muted:         #9a9aa3;   /* lifted for AA */
  --muted-lt:      #7c7c85;
  --text:          #f4f4f5;
  --text-2:        #c8c8cf;
  --primary-light: color-mix(in srgb, var(--i-accent,var(--i-accent,#9fe870)) 14%, transparent);

  /* Body */
  background-color: #0e0e10;
  color: #f5f5f5;
}

html[data-bs-theme="dark"] body { background-color: #0e0e10; color: #f5f5f5; }

/* ── 2. Layout shells ────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .layout-wrapper,
html[data-bs-theme="dark"] .content-wrapper,
html[data-bs-theme="dark"] .layout-page,
html[data-bs-theme="dark"] .container-xxl,
html[data-bs-theme="dark"] .container-fluid {
  background-color: #0e0e10;
}
html[data-bs-theme="dark"] .layout-menu-toggle { border-color: #0e0e10; }

/* ── 3. Card ─────────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .card {
  background-color: #16161a;
  border: 1px solid #26262c;
  color: #f5f5f5;
}
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer {
  background-color: transparent;
  border-color: #26262c;
  color: #f5f5f5;
}
html[data-bs-theme="dark"] .card-title,
html[data-bs-theme="dark"] .card-header h4,
html[data-bs-theme="dark"] .card-header h5,
html[data-bs-theme="dark"] .card-header h6 { color: #f5f5f5 !important; }

/* ── 4. Navbar ───────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .layout-navbar {
  background-color: #16161a !important;
  border-bottom: 1px solid #26262c;
}
html[data-bs-theme="dark"] .navbar-nav .nav-link { color: #b8b8b8; }
html[data-bs-theme="dark"] .navbar-nav .nav-link:hover { color: #f5f5f5; }

/* ── 5. Sidebar / menu ───────────────────────────────────────────────────── */

/* Floating sidebar — lifted off top/bottom edges, rounded right corners.
   Applied to both themes so the shape is consistent light and dark.
   No overflow:hidden — the background clips visually at the radius and
   the edge-toggle button stays naturally inside the sidebar. */
.layout-menu {
    top: 12px !important;
    bottom: 12px !important;
    height: auto !important;
    border-radius: 0 20px 20px 0 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.08);
}

html[data-bs-theme="dark"] .menu,
html[data-bs-theme="dark"] .layout-menu {
  background-color: #16161a !important;
  border-right: none;
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
}
html[data-bs-theme="dark"] .menu .app-brand { border-bottom: 1px solid #26262c; }
html[data-bs-theme="dark"] .app-brand-text { color: #f5f5f5 !important; }
html[data-bs-theme="dark"] .menu-item .menu-link { color: #b8b8b8; }
html[data-bs-theme="dark"] .menu-item .menu-link:hover { color: #f5f5f5; background-color: rgba(255,255,255,.05); }
html[data-bs-theme="dark"] .menu-item.active > .menu-link {
  color: #111 !important;
  background-color: var(--i-accent,#9fe870) !important;
  font-weight: 600;
}
html[data-bs-theme="dark"] .menu-item.active > .menu-link i { color: #111 !important; }
html[data-bs-theme="dark"] .menu-item .menu-link i { color: #707070; }
html[data-bs-theme="dark"] .menu-header { color: #4a4a4a !important; }
html[data-bs-theme="dark"] .menu-header::before { background-color: #26262c !important; }
html[data-bs-theme="dark"] .ps__thumb-y,
html[data-bs-theme="dark"] .ps__thumb-x { background-color: #313137 !important; }

/* ── 6. Chat page — container ────────────────────────────────────────────── */
html[data-bs-theme="dark"] .chat-page {
  background: #0a0a0c !important;
  border-color: #26262c !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.6) !important;
}

/* ── 7. Chat sidebar ─────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .chat-sidebar {
  background: #16161a !important;
  border-right-color: #26262c !important;
}
html[data-bs-theme="dark"] .sidebar-head { border-bottom-color: #26262c !important; }
html[data-bs-theme="dark"] .sidebar-search input {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #f5f5f5 !important;
}
html[data-bs-theme="dark"] .sidebar-search input:focus {
  background: #131316 !important;
  border-color: var(--i-accent,#9fe870) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 15%,transparent) !important;
}
html[data-bs-theme="dark"] .filter-chip {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #b8b8b8 !important;
}
html[data-bs-theme="dark"] .filter-chip:hover {
  border-color: var(--i-accent,#9fe870) !important;
  color: var(--i-accent,#9fe870) !important;
}
html[data-bs-theme="dark"] .filter-chip.active {
  background: var(--i-accent,#9fe870) !important;
  border-color: var(--i-accent,#9fe870) !important;
  color: #111 !important;
}
html[data-bs-theme="dark"] .conv-item:hover { background: rgba(255,255,255,.04) !important; }
html[data-bs-theme="dark"] .conv-item.active {
  background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 10%,transparent) !important;
  border-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 45%,transparent) !important;
}

/* ── 8. Chat header ──────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .chat-header {
  background: #16161a !important;
  border-bottom-color: #26262c !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html[data-bs-theme="dark"] .hdr-btn {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #b8b8b8 !important;
}
html[data-bs-theme="dark"] .hdr-btn:hover {
  background: #1f1f24 !important;
  border-color: #313137 !important;
  color: #f5f5f5 !important;
}
html[data-bs-theme="dark"] .hdr-btn.danger { border-color: #5b1414 !important; color: #ff8b77 !important; }
html[data-bs-theme="dark"] .hdr-btn.danger:hover { background: rgba(255,62,29,.12) !important; }
html[data-bs-theme="dark"] .hdr-btn.success-btn { border-color: #2c5e1a !important; color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] .hdr-btn.success-btn:hover { background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 10%,transparent) !important; }
html[data-bs-theme="dark"] .hdr-select {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #b8b8b8 !important;
}

/* ── 9. Messages area ────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .chat-main { background: #0e0e10 !important; }
html[data-bs-theme="dark"] .chat-main-empty-icon { background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 12%,transparent) !important; color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] .chat-messages::-webkit-scrollbar-thumb { background: #313137 !important; }
html[data-bs-theme="dark"] .msg-row.visitor .msg-bubble {
  background: #16161a !important;
  border-color: #26262c !important;
  color: #f5f5f5 !important;
}
html[data-bs-theme="dark"] .msg-row.note .msg-bubble {
  background: rgba(255,171,0,.08) !important;
  border-color: rgba(255,171,0,.3) !important;
  color: #ffcd66 !important;
}
html[data-bs-theme="dark"] .msg-actions {
  background: #1f1f24 !important;
  border-color: #313137 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.6) !important;
}
html[data-bs-theme="dark"] .msg-action-btn:hover {
  background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent) !important;
  color: var(--i-accent,#9fe870) !important;
}

/* ── 10. Input area ──────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .chat-input-area {
  background: #16161a !important;
  border-top-color: #26262c !important;
}
html[data-bs-theme="dark"] .note-mode-bar {
  background: rgba(255,171,0,.08) !important;
  border-color: rgba(255,171,0,.3) !important;
  color: #ffcd66 !important;
}
html[data-bs-theme="dark"] .input-row textarea {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #f5f5f5 !important;
}
html[data-bs-theme="dark"] .input-row textarea:focus {
  background: #131316 !important;
  border-color: var(--i-accent,#9fe870) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 15%,transparent) !important;
}
html[data-bs-theme="dark"] .input-row textarea.note-mode {
  border-color: rgba(255,171,0,.5) !important;
  background: rgba(255,171,0,.06) !important;
}
html[data-bs-theme="dark"] .canned-dropdown {
  background: #1f1f24 !important;
  border-color: #313137 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
html[data-bs-theme="dark"] .canned-item { border-bottom-color: #26262c !important; color: #f5f5f5 !important; }
html[data-bs-theme="dark"] .canned-item:hover,
html[data-bs-theme="dark"] .canned-item.selected { background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 10%,transparent) !important; color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] .emoji-picker {
  background: #1f1f24 !important;
  border-color: #313137 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
html[data-bs-theme="dark"] .emoji-btn:hover { background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 10%,transparent) !important; }

/* ── 11. Right panel ─────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .chat-panel {
  background: #16161a !important;
  border-left-color: #26262c !important;
}
html[data-bs-theme="dark"] .panel-section { border-bottom-color: #26262c !important; }
html[data-bs-theme="dark"] .panel-section-header {
  background: #0a0a0c !important;
  color: #707070 !important;
}
html[data-bs-theme="dark"] .panel-section-header:hover {
  background: #16161a !important;
  color: #b8b8b8 !important;
}
html[data-bs-theme="dark"] .info-input { color: #f5f5f5 !important; }
html[data-bs-theme="dark"] .info-input:hover { border-color: #313137 !important; background: #131316 !important; }
html[data-bs-theme="dark"] .info-input:focus { border-color: var(--i-accent,#9fe870) !important; background: #131316 !important; }
html[data-bs-theme="dark"] .priority-opt[data-p="low"]    { background: #1f1f24 !important; color: #b8b8b8 !important; border-color: #313137 !important; }
html[data-bs-theme="dark"] .priority-opt[data-p="normal"] { background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 12%,transparent) !important; color: var(--i-accent,#9fe870) !important; border-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 30%,transparent) !important; }
html[data-bs-theme="dark"] .priority-opt[data-p="high"]   { background: rgba(255,113,0,.1) !important; color: #fb923c !important; border-color: rgba(255,113,0,.3) !important; }
html[data-bs-theme="dark"] .priority-opt[data-p="urgent"] { background: rgba(255,62,29,.1) !important; color: #ff8b77 !important; border-color: rgba(255,62,29,.3) !important; }
html[data-bs-theme="dark"] .note-item {
  background: rgba(255,171,0,.08) !important;
  border-color: rgba(255,171,0,.25) !important;
  color: #ffcd66 !important;
}
html[data-bs-theme="dark"] .note-author { color: #ffab40 !important; }
html[data-bs-theme="dark"] .presence-offline { background: #313137 !important; }

/* ── 12. Page text — kill all hardcoded light-theme inline colors ────────── */
html[data-bs-theme="dark"] #presence-select {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #b8b8b8 !important;
}
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 { color: #f5f5f5 !important; }

/* Inline color overrides — match every common light-theme dark text value */
html[data-bs-theme="dark"] [style*="color:#111"],
html[data-bs-theme="dark"] [style*="color: #111"],
html[data-bs-theme="dark"] [style*="color:#000"],
html[data-bs-theme="dark"] [style*="color: #000"],
html[data-bs-theme="dark"] [style*="color:#1a1a1a"],
html[data-bs-theme="dark"] [style*="color:#222"],
html[data-bs-theme="dark"] [style*="color:#2d2d2d"],
html[data-bs-theme="dark"] [style*="color: #2d2d2d"],
html[data-bs-theme="dark"] [style*="color:#333"],
html[data-bs-theme="dark"] [style*="color:#374151"],
html[data-bs-theme="dark"] [style*="color: #374151"],
html[data-bs-theme="dark"] [style*="color:#444"],
html[data-bs-theme="dark"] [style*="color:#1f2937"],
html[data-bs-theme="dark"] [style*="color:#0f172a"],
html[data-bs-theme="dark"] [style*="color:#212529"],
html[data-bs-theme="dark"] [style*="color:#111827"] { color: #f5f5f5 !important; }
html[data-bs-theme="dark"] [style*="color:#555"],
html[data-bs-theme="dark"] [style*="color:#666"],
html[data-bs-theme="dark"] [style*="color:#6b7280"],
html[data-bs-theme="dark"] [style*="color: #6b7280"],
html[data-bs-theme="dark"] [style*="color:#6c757d"],
html[data-bs-theme="dark"] [style*="color:#777"],
html[data-bs-theme="dark"] [style*="color:#8592a3"],
html[data-bs-theme="dark"] [style*="color: #8592a3"],
html[data-bs-theme="dark"] [style*="color:#888"],
html[data-bs-theme="dark"] [style*="color:#999"],
html[data-bs-theme="dark"] [style*="color:#aaa"],
html[data-bs-theme="dark"] [style*="color:#adb5bd"],
html[data-bs-theme="dark"] [style*="color:#b0b8c4"],
html[data-bs-theme="dark"] [style*="color:#64748b"],
html[data-bs-theme="dark"] [style*="color: #64748b"],
html[data-bs-theme="dark"] [style*="color:#475569"],
html[data-bs-theme="dark"] [style*="color:#94a3b8"],
html[data-bs-theme="dark"] [style*="color:#9ca3af"] { color: #b8b8b8 !important; }
html[data-bs-theme="dark"] [style*="color:#0f172a"],
html[data-bs-theme="dark"] [style*="color: #0f172a"] { color: #f5f5f5 !important; }

/* Light backgrounds inline → dark surfaces */
html[data-bs-theme="dark"] [style*="background:#fff"],
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background-color:#fff"],
html[data-bs-theme="dark"] [style*="background-color: #fff"],
html[data-bs-theme="dark"] [style*="background:#f8f8ff"],
html[data-bs-theme="dark"] [style*="background:#f4f5f6"],
html[data-bs-theme="dark"] [style*="background:#f0f0f0"],
html[data-bs-theme="dark"] [style*="background-color:#f4f5f6"],
html[data-bs-theme="dark"] [style*="background:#f5f5f5"] { background: #1f1f24 !important; color: #f5f5f5 !important; }

/* Purple eradication — anyone who still ships #696cff inline */
html[data-bs-theme="dark"] [style*="color:#696cff"],
html[data-bs-theme="dark"] [style*="color: #696cff"] { color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] [style*="background:#696cff"],
html[data-bs-theme="dark"] [style*="background: #696cff"],
html[data-bs-theme="dark"] [style*="background-color:#696cff"] { background: var(--i-accent,#9fe870) !important; color: #111 !important; }

/* ── 13. Subscription / plan / locked feature cards ──────────────────────── */
html[data-bs-theme="dark"] .locked-feature-card {
  background: #131316 !important;
  border-color: #26262c !important;
}
html[data-bs-theme="dark"] .locked-feature-card i { color: #4a4a4a !important; }
html[data-bs-theme="dark"] .locked-feature-card .fw-semibold { color: #b8b8b8 !important; }
html[data-bs-theme="dark"] .locked-feature-card small { color: #707070 !important; }
html[data-bs-theme="dark"] .seat-user-chip {
  background: #131316 !important;
  border-color: #26262c !important;
  color: #f5f5f5 !important;
}
html[data-bs-theme="dark"] .seat-bar { background: #131316 !important; }
html[data-bs-theme="dark"] .plan-card {
  border-color: #26262c !important;
  background: #16161a;
  color: #f5f5f5;
}
html[data-bs-theme="dark"] .plan-card:hover {
  border-color: var(--i-accent,#9fe870) !important;
  box-shadow: 0 4px 24px color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 20%,transparent) !important;
}
html[data-bs-theme="dark"] .plan-card.current-plan {
  border-color: var(--i-accent,#9fe870) !important;
  background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 6%,transparent) !important;
}
html[data-bs-theme="dark"] .plan-price { color: #f5f5f5 !important; }
html[data-bs-theme="dark"] .plan-price small { color: #707070 !important; }
html[data-bs-theme="dark"] .plan-price .was { color: #4a4a4a !important; }
html[data-bs-theme="dark"] .feature-row { color: #b8b8b8 !important; }
html[data-bs-theme="dark"] .feature-row.locked { color: #707070 !important; }
html[data-bs-theme="dark"] .feature-row .bx-lock { color: #4a4a4a !important; }
html[data-bs-theme="dark"] .usage-stat .lbl { color: #707070 !important; }

/* ── 14. Bootstrap components ────────────────────────────────────────────── */
html[data-bs-theme="dark"] .table { color: #f5f5f5; border-color: #26262c; --bs-table-bg: transparent; }
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table-light {
  background-color: rgba(255,255,255,.03) !important;
  color: #707070 !important;
  border-color: #26262c !important;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .04em;
}
html[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: #f5f5f5; border-color: #26262c; }
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.04); color: #f5f5f5; }
html[data-bs-theme="dark"] .table-success,
html[data-bs-theme="dark"] .table-success > * { background-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 10%,transparent) !important; color: #f5f5f5 !important; }

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] textarea.form-control {
  background-color: #131316;
  border-color: #26262c;
  color: #f5f5f5;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background-color: #131316;
  border-color: var(--i-accent,#9fe870);
  color: #f5f5f5;
  box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 20%,transparent);
}
html[data-bs-theme="dark"] .form-control::placeholder { color: #4a4a4a; }
html[data-bs-theme="dark"] .input-group-text { background-color: #131316; border-color: #26262c; color: #b8b8b8; }
html[data-bs-theme="dark"] .form-check-input { background-color: #131316; border-color: #313137; }
html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--i-accent,#9fe870); border-color: var(--i-accent,#9fe870); }
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] label { color: #f5f5f5; }

html[data-bs-theme="dark"] .btn-primary {
  background-color: var(--i-accent,#9fe870) !important;
  border-color: var(--i-accent,#9fe870) !important;
  color: #111 !important;
}
html[data-bs-theme="dark"] .btn-primary:hover { background-color: color-mix(in srgb,var(--i-accent,#9fe870) 85%,#000) !important; border-color: color-mix(in srgb,var(--i-accent,#9fe870) 85%,#000) !important; color: #111 !important; }
html[data-bs-theme="dark"] .btn-outline-primary { color: var(--i-accent,#9fe870); border-color: var(--i-accent,#9fe870); }
html[data-bs-theme="dark"] .btn-outline-primary:hover { background-color: var(--i-accent,#9fe870); color: #111; }
html[data-bs-theme="dark"] .btn-outline-secondary { color: #b8b8b8; border-color: #313137; }
html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255,255,255,.06); color: #f5f5f5; border-color: #4a4a4a; }
html[data-bs-theme="dark"] .btn-label-primary { background-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent); color: var(--i-accent,#9fe870); }
html[data-bs-theme="dark"] .btn-label-secondary { background-color: rgba(255,255,255,.06); color: #b8b8b8; }
html[data-bs-theme="dark"] .btn-light { background-color: rgba(255,255,255,.08); border-color: #313137; color: #f5f5f5; }

html[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1f1f24;
  border-color: #313137;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.7);
}
html[data-bs-theme="dark"] .dropdown-item { color: #f5f5f5; }
html[data-bs-theme="dark"] .dropdown-item:hover { background-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 10%,transparent); color: var(--i-accent,#9fe870); }
html[data-bs-theme="dark"] .dropdown-divider { border-color: #313137; }

html[data-bs-theme="dark"] .modal-content { background-color: #16161a; border-color: #26262c; color: #f5f5f5; }
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer { border-color: #26262c; }
html[data-bs-theme="dark"] .modal-title { color: #f5f5f5; }

html[data-bs-theme="dark"] .alert-warning { background-color: rgba(255,171,0,.12); border-color: rgba(255,171,0,.3); color: #ffcd66; }
html[data-bs-theme="dark"] .alert-danger  { background-color: rgba(255,62,29,.12);  border-color: rgba(255,62,29,.3);  color: #ff8b77; }
html[data-bs-theme="dark"] .alert-success { background-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 12%,transparent); border-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 30%,transparent); color: var(--i-accent,#9fe870); }
html[data-bs-theme="dark"] .alert-info    { background-color: rgba(3,195,236,.12);  border-color: rgba(3,195,236,.3);  color: #68dbf4; }

html[data-bs-theme="dark"] .bg-label-primary   { background-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent) !important; color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] .bg-label-success   { background-color: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent) !important; color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] .bg-label-warning   { background-color: rgba(255,171,0,.16)   !important; color: #ffcd66 !important; }
html[data-bs-theme="dark"] .bg-label-danger    { background-color: rgba(255,62,29,.16)   !important; color: #ff8b77 !important; }
html[data-bs-theme="dark"] .bg-label-info      { background-color: rgba(3,195,236,.16)   !important; color: #68dbf4 !important; }
html[data-bs-theme="dark"] .bg-label-secondary { background-color: rgba(255,255,255,.06) !important; color: #b8b8b8 !important; }

/* Solid badges */
html[data-bs-theme="dark"] .badge.bg-success   { background-color: var(--i-accent,#9fe870) !important; color: #111 !important; }
html[data-bs-theme="dark"] .badge.bg-primary   { background-color: var(--i-accent,#9fe870) !important; color: #111 !important; }
html[data-bs-theme="dark"] .badge.bg-info      { color: #fff !important; }
html[data-bs-theme="dark"] .badge.bg-secondary { background-color: rgba(255,255,255,.08) !important; color: #f5f5f5 !important; }
html[data-bs-theme="dark"] .badge.bg-warning   { color: #111 !important; }
html[data-bs-theme="dark"] .badge.bg-danger    { color: #fff !important; }

html[data-bs-theme="dark"] .page-item:not(.active) .page-link { background-color: #16161a; border-color: #26262c; color: #b8b8b8; }
html[data-bs-theme="dark"] .page-item:not(.active) .page-link:hover { background-color: rgba(255,255,255,.06); color: #f5f5f5; }
html[data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--i-accent,#9fe870); border-color: var(--i-accent,#9fe870); color: #111; }

html[data-bs-theme="dark"] .list-group-item { background-color: #16161a; border-color: #26262c; color: #f5f5f5; }
html[data-bs-theme="dark"] .nav-tabs .nav-link { color: #b8b8b8; border-color: transparent; }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: #16161a; border-color: #26262c #26262c #16161a; color: var(--i-accent,#9fe870); }
html[data-bs-theme="dark"] .nav-tabs { border-bottom-color: #26262c; }

html[data-bs-theme="dark"] code,
html[data-bs-theme="dark"] pre { background-color: #131316 !important; color: var(--i-accent,#9fe870) !important; }

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary { color: #707070 !important; }
html[data-bs-theme="dark"] .text-body,
html[data-bs-theme="dark"] .text-dark { color: #f5f5f5 !important; }
html[data-bs-theme="dark"] .text-primary { color: var(--i-accent,#9fe870) !important; }
html[data-bs-theme="dark"] .text-success { color: var(--i-accent,#9fe870) !important; }

html[data-bs-theme="dark"] hr { border-color: #26262c !important; }
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end { border-color: #26262c !important; }
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white { background-color: #16161a !important; color: #f5f5f5 !important; }

/* Progress bars — keep brand green */
html[data-bs-theme="dark"] .progress { background-color: #26262c; }
html[data-bs-theme="dark"] .progress-bar.bg-success { background-color: var(--i-accent,#9fe870) !important; }

/* ── 14b. Quick Action / secondary CTA buttons (used in dashboards) ──────── */
.btn-action {
  background: #fff;
  color: #2d2d2d;
  border: 1.5px solid #e0e3e8;
  border-radius: 10px;
  font-weight: 600;
  padding: 10px 14px;
  transition: all .15s ease;
}
.btn-action:hover,
.btn-action:focus {
  background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 12%,transparent);
  color: #3d8a1c;
  border-color: var(--i-accent,#9fe870);
}
.btn-action i { color: inherit; }

html[data-bs-theme="dark"] .btn-action {
  background: #1f1f24 !important;
  color: #f5f5f5 !important;
  border-color: #313137 !important;
}
html[data-bs-theme="dark"] .btn-action:hover,
html[data-bs-theme="dark"] .btn-action:focus {
  background: color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 14%,transparent) !important;
  color: var(--i-accent,#9fe870) !important;
  border-color: var(--i-accent,#9fe870) !important;
}

/* ── 15. Tooltips / popovers ─────────────────────────────────────────────── */
html[data-bs-theme="dark"] .tooltip-inner { background-color: #1f1f24; color: #f5f5f5; }
html[data-bs-theme="dark"] .tooltip .tooltip-arrow::before { border-color: #1f1f24; }
html[data-bs-theme="dark"] .popover { background-color: #1f1f24; border-color: #313137; }
html[data-bs-theme="dark"] .popover-header { background-color: #16161a; color: #f5f5f5; border-bottom-color: #313137; }
html[data-bs-theme="dark"] .popover-body { color: #b8b8b8; }

/* ── 16. Scrollbars ──────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: content-box; }

/* ── 17. Focus indicators (both themes) ──────────────────────────────────── */
/* Single global :focus-visible for keyboard users. Mouse clicks don't
   trigger it (modern browsers gate the pseudo-class to keyboard nav).
   Components with their own focus styles (like .form-control) can override. */
:root {
  --i-focus-ring: 0 0 0 3px color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 45%,transparent);
}
:focus-visible {
  outline: none;
  box-shadow: var(--i-focus-ring);
  border-radius: 6px;
}
button:focus-visible,
.btn:focus-visible,
.filter-chip:focus-visible,
.conv-item:focus-visible,
.notif-bell-btn:focus-visible,
.theme-toggle-btn:focus-visible,
.layout-menu-toggle .nav-link:focus-visible,
.user-dropdown-wrap > .nav-link:focus-visible,
.menu-link:focus-visible,
.hdr-btn:focus-visible,
.pres-btn:focus-visible,
.pres-opt:focus-visible {
  outline: none;
  box-shadow: var(--i-focus-ring);
}
/* Form fields keep their inset accent border on focus instead of an outer ring. */
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--i-accent,var(--i-accent,#9fe870)) 20%,transparent);
}

/* ── 18. Reduced motion ──────────────────────────────────────────────────── */
/* Honor user accessibility setting. Only the theme-swap fade in the navbar
   is preserved (it gates itself with prefers-reduced-motion, see navbar). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 17. Transitions ─────────────────────────────────────────────────────── */
html { transition: background-color .2s ease, color .2s ease; }

/* ── 19. Icon action buttons ─────────────────────────────────────────────── */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 5px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .13s;
    line-height: 1;
}
.icon-btn img {
    width: 20px;
    height: 20px;
    display: block;
}
.icon-btn:hover { background: rgba(0,0,0,.07); }
html[data-bs-theme="dark"] .icon-btn:hover { background: rgba(255,255,255,.08); }
html[data-bs-theme="dark"] .icon-btn img { filter: invert(1); }


/* ============================================================
   Shared components: cm-toggle checkbox + cr-* data tables
   (promoted from settings page so they're usable app-wide)
   ============================================================ */
/* --- cm-toggle (the standard app checkbox) --- */
.cm-toggle { display: flex; align-items: center; gap: 14px; background: color-mix(in srgb,var(--i-accent,#9fe870) 10%,transparent); border: 1px solid color-mix(in srgb,var(--i-accent,#9fe870) 28%,transparent); border-radius: 14px; padding: 14px 16px; cursor: pointer; user-select: none; }
[data-bs-theme="dark"] .cm-toggle { background: color-mix(in srgb,var(--i-accent,#9fe870) 12%,transparent); }
.cm-check { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--bs-border-color); background: var(--bs-card-bg,#fff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; font-size: 1.05rem; transition: background .15s, border-color .15s, color .15s; }
.cm-toggle input { display: none; }
.cm-toggle input:checked + .cm-check { background: linear-gradient(135deg, var(--i-accent,#9fe870), color-mix(in srgb,var(--i-accent,#9fe870) 78%,#000)); border-color: transparent; color: #fff; }
.cm-toggle-title { font-weight: 700; font-size: .92rem; color: var(--bs-body-color); }
.cm-toggle-desc { font-size: .78rem; color: var(--bs-secondary-color); margin-top: 1px; }
[data-bs-theme="dark"] .cm-toggle-title { color: var(--i-text,#f4f4f5); }
[data-bs-theme="dark"] .cm-toggle-desc { color: var(--i-text-muted,#9a9aa3); }
[data-bs-theme="dark"] .cm-check { background: var(--i-bg-input,#131316); border-color: var(--i-border-strong,#313137); }

/* --- cr-* data table card --- */
.cr-card { background: var(--bs-card-bg,#fff); border: 1px solid var(--bs-border-color); border-radius: 18px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.cr-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; flex-wrap: wrap; }
.cr-folder { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb,var(--i-accent,#9fe870) 16%, #fff); color: #2f8f3e; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
[data-bs-theme="dark"] .cr-folder { background: color-mix(in srgb,var(--i-accent,#9fe870) 18%, #16161a); color: var(--i-accent,#9fe870); }
.cr-head-titles { margin-right: auto; }
.cr-head-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--bs-body-color); }
.cr-head-sub { font-size: .8rem; color: var(--bs-secondary-color); margin-top: 1px; }
.cr-count-pill { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb,var(--i-accent,#9fe870) 16%,transparent); color: #2f8f3e; font-weight: 700; font-size: .8rem; padding: 7px 14px; border-radius: 11px; }
[data-bs-theme="dark"] .cr-count-pill { background: color-mix(in srgb,var(--i-accent,#9fe870) 16%,transparent); color: var(--i-accent,#9fe870); }
.cr-search { position: relative; }
.cr-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); font-size: 1.05rem; }
.cr-search input { width: 240px; max-width: 100%; border: 1px solid var(--bs-border-color); border-radius: 11px; background: var(--bs-body-bg); padding: 9px 12px 9px 38px; font-size: .82rem; color: var(--bs-body-color); outline: none; transition: border-color .15s, box-shadow .15s; }
.cr-search input:focus { border-color: var(--i-accent,#9fe870); box-shadow: 0 0 0 3px color-mix(in srgb,var(--i-accent,#9fe870) 18%,transparent); }
.cr-filter-btn { width: 42px; height: 40px; border: 1px solid var(--bs-border-color); border-radius: 11px; background: var(--bs-card-bg,#fff); color: var(--bs-secondary-color); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: border-color .15s, color .15s; }
.cr-filter-btn:hover { border-color: var(--i-accent,#9fe870); color: #2f8f3e; }

/* table */
.cr-table { width: 100%; border-collapse: collapse; }
.cr-table thead th { background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); padding: 12px 16px; text-align: left; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); white-space: nowrap; }
.cr-table thead th.cr-sortable { cursor: pointer; user-select: none; }
.cr-sort-ico { display: inline-flex; flex-direction: column; line-height: .5; margin-left: 5px; vertical-align: middle; color: var(--bs-secondary-color); opacity: .55; }
.cr-sort-ico i { font-size: .7rem; }
.cr-sortable.cr-asc .cr-sort-ico .bx-chevron-up, .cr-sortable.cr-desc .cr-sort-ico .bx-chevron-down { color: #2f8f3e; opacity: 1; }
.cr-table tbody td { padding: 16px; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; font-size: .84rem; color: var(--bs-body-color); }
.cr-table tbody tr:last-child td { border-bottom: none; }
.cr-table tbody tr:hover { background: color-mix(in srgb,var(--i-accent,#9fe870) 5%, transparent); }

.cr-name-cell { display: flex; align-items: center; gap: 12px; }
.cr-name-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.cr-name-main { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.cr-name-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cr-name-sub { font-size: .74rem; color: var(--bs-secondary-color); margin-top: 1px; text-transform: capitalize; }

.cr-shortcut { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb,var(--i-accent,#9fe870) 12%,transparent); color: #2f8f3e; border-radius: 9px; padding: 5px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 600; }
[data-bs-theme="dark"] .cr-shortcut { background: color-mix(in srgb,var(--i-accent,#9fe870) 16%,transparent); color: var(--i-accent,#9fe870); }
.cr-copy { background: none; border: none; cursor: pointer; color: inherit; opacity: .6; padding: 0; display: inline-flex; font-size: .92rem; transition: opacity .12s; }
.cr-copy:hover { opacity: 1; }
.cr-copy.copied { color: #22c55e; opacity: 1; }
.cr-msg { color: var(--bs-secondary-color); font-size: .82rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 260px; }

.cr-uses { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-uses-num { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--bs-border-color); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; color: var(--bs-body-color); }
.cr-uses-lbl { font-size: .66rem; color: var(--bs-secondary-color); }

.cr-creator { display: flex; align-items: center; gap: 10px; }
.cr-avatar { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.cr-creator-name { font-weight: 600; font-size: .82rem; }
.cr-creator-time { font-size: .72rem; color: var(--bs-secondary-color); }

.cr-vis { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .76rem; padding: 6px 12px; border-radius: 10px; }
.cr-vis.shared { background: color-mix(in srgb,#22c55e 14%,transparent); color: #1f9d4d; }
.cr-vis.private { background: color-mix(in srgb,#5b9bf5 16%,transparent); color: #3b7fe0; }
[data-bs-theme="dark"] .cr-vis.shared { background: rgba(34,197,94,.16); }
[data-bs-theme="dark"] .cr-vis.private { background: rgba(91,155,245,.18); }

.cr-act-btn { width: 36px; height: 34px; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-card-bg,#fff); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.02rem; color: var(--bs-secondary-color); transition: all .14s; }
.cr-act-btn + .cr-act-btn { margin-left: 7px; }
.cr-act-btn.edit:hover { border-color: var(--i-accent,#9fe870); color: #2f8f3e; }
.cr-act-btn.del { color: #ef4444; }
.cr-act-btn.del:hover { border-color: #fca5a5; background: #fef2f2; }

/* footer */
.cr-foot { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-top: 1px solid var(--bs-border-color); flex-wrap: wrap; }
.cr-tip { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.cr-tip-img { width: 92px; height: 78px; flex-shrink: 0; background: url('/assets/img/illustrations/chat.webp') center/contain no-repeat; }
.cr-tip-illus { width: 64px; height: 56px; border-radius: 14px; background: color-mix(in srgb,var(--i-accent,#9fe870) 16%,transparent); display: flex; align-items: center; justify-content: center; color: #2f8f3e; font-size: 1.8rem; }
.cr-tip-title { font-weight: 700; font-size: .84rem; color: var(--bs-body-color); }
.cr-tip-desc { font-size: .76rem; color: var(--bs-secondary-color); max-width: 230px; line-height: 1.4; margin-top: 2px; }
.cr-tip-link { font-size: .76rem; font-weight: 700; color: #2f8f3e; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.cr-tip-link:hover { color: #2f8f3e; gap: 7px; transition: gap .15s; }
.cr-showing { font-size: .8rem; color: var(--bs-secondary-color); }
.cr-pager { display: inline-flex; align-items: center; gap: 6px; }
.cr-page-btn { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-card-bg,#fff); color: var(--bs-body-color); cursor: pointer; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: all .14s; }
.cr-page-btn:hover:not(:disabled) { border-color: var(--i-accent,#9fe870); }
.cr-page-btn.active { border-color: var(--i-accent,#9fe870); color: #2f8f3e; }
.cr-page-btn:disabled { opacity: .4; cursor: default; }
.cr-perpage { border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-card-bg,#fff); color: var(--bs-body-color); padding: 8px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; outline: none; }
.cr-empty-row td { text-align: center; color: var(--bs-secondary-color); padding: 30px; font-size: .85rem; }

/* --- cr-* dark mode --- */
[data-bs-theme="dark"] .cr-card { background: var(--i-bg-surface,#16161a); border-color: var(--i-border,#26262c); box-shadow: var(--i-elev-1, 0 1px 2px rgba(0,0,0,.55)); }
[data-bs-theme="dark"] .cr-table thead th { background: var(--i-bg-elevated,#1f1f24); border-color: var(--i-border,#26262c); color: var(--i-text-muted,#9a9aa3); }
[data-bs-theme="dark"] .cr-table tbody td { border-color: var(--i-border,#26262c); color: var(--i-text,#f4f4f5); }
[data-bs-theme="dark"] .cr-table tbody tr:hover { background: var(--i-accent-tint, color-mix(in srgb,var(--i-accent,#9fe870) 10%,transparent)); }
[data-bs-theme="dark"] .cr-head-title,
[data-bs-theme="dark"] .cr-name-main,
[data-bs-theme="dark"] .cr-creator-name,
[data-bs-theme="dark"] .cr-tip-title { color: var(--i-text,#f4f4f5); }
[data-bs-theme="dark"] .cr-head-sub,
[data-bs-theme="dark"] .cr-name-sub,
[data-bs-theme="dark"] .cr-creator-time,
[data-bs-theme="dark"] .cr-msg,
[data-bs-theme="dark"] .cr-uses-lbl,
[data-bs-theme="dark"] .cr-showing,
[data-bs-theme="dark"] .cr-tip-desc { color: var(--i-text-muted,#9a9aa3); }
[data-bs-theme="dark"] .cr-search input { background: var(--i-bg-input,#131316); border-color: var(--i-border-strong,#313137); color: var(--i-text,#f4f4f5); }
[data-bs-theme="dark"] .cr-search i { color: var(--i-text-muted,#9a9aa3); }
[data-bs-theme="dark"] .cr-filter-btn,
[data-bs-theme="dark"] .cr-act-btn,
[data-bs-theme="dark"] .cr-page-btn,
[data-bs-theme="dark"] .cr-perpage { background: var(--i-bg-elevated,#1f1f24); border-color: var(--i-border-strong,#313137); color: var(--i-text-2,#c8c8cf); }
[data-bs-theme="dark"] .cr-page-btn.active { border-color: var(--i-accent,#9fe870); color: var(--i-accent,#9fe870); }
[data-bs-theme="dark"] .cr-act-btn.del { color: #f87171; }
[data-bs-theme="dark"] .cr-uses-num { border-color: var(--i-border-strong,#313137); color: var(--i-text,#f4f4f5); }
[data-bs-theme="dark"] .cr-foot { border-color: var(--i-border,#26262c); }

/* --- compact cm-check (inline / list checkboxes — same green mark, no card) --- */
.cm-check-wrap { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cm-check-wrap > input[type="checkbox"] { display: none; }
.cm-check-wrap > input[type="checkbox"]:checked + .cm-check { background: linear-gradient(135deg, var(--i-accent,#9fe870), color-mix(in srgb,var(--i-accent,#9fe870) 78%,#000)); border-color: transparent; color: #fff; }
[data-bs-theme="dark"] .cm-check-wrap > input[type="checkbox"]:checked + .cm-check { color: #000; }
.cm-check.cm-check-sm { width: 22px; height: 22px; border-radius: 7px; font-size: .9rem; border-width: 2px; }

/* ============================================================
   Subtle page background image with smooth light/dark crossfade
   ============================================================ */
/* Base colour behind the image (prevents any flash during the fade) */
html { background-color: #f5f5f9; }
html[data-bs-theme="dark"] { background-color: #0e0e10; }

/* Two fixed layers behind all content; crossfade on theme toggle */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
body::before { background-image: url('/assets/img/backgrounds/bg-white.webp'); opacity: 0.35; }   /* light — faint over white */
body::after  { background-image: url('/assets/img/backgrounds/bg-dark.webp'); }                 /* dark  */
html[data-bs-theme="dark"] body::before { opacity: 0; }
html[data-bs-theme="dark"] body::after  { opacity: 1; }

/* Let the background show through the layout shells (they are opaque by default) */
body,
.layout-wrapper,
.layout-page,
.content-wrapper,
.layout-wrapper .container-xxl,
.layout-wrapper .container-fluid,
html[data-bs-theme="dark"] .layout-wrapper,
html[data-bs-theme="dark"] .layout-page,
html[data-bs-theme="dark"] .content-wrapper,
html[data-bs-theme="dark"] .container-xxl,
html[data-bs-theme="dark"] .container-fluid {
  background-color: transparent !important;
}

/* Dim both background images slightly so they're not too bright */
body::before { filter: brightness(0.9); }   /* light */
body::after  { filter: brightness(0.9); }   /* dark  */

/* ============================================================
   Right-click conversation context menu + cm-* confirm/rename modals
   (promoted from the admin chat view so the agent view shares them)
   ============================================================ */
/* ── Right-click conversation context menu ── */
.conv-ctx { position: fixed; z-index: 4000; min-width: 218px; background: var(--bs-card-bg,#fff); border: 1px solid var(--bs-border-color,#e5e7eb); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 6px; font-size: .84rem; user-select: none; transform-origin: top left; animation: convCtxIn .13s cubic-bezier(.16,1,.3,1); }
@keyframes convCtxIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ctxBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctxCardIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
[data-bs-theme="dark"] .conv-ctx { background: #1f1f24; border-color: #313137; }
.conv-ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--bs-body-color,#1a1a1f); cursor: pointer; font-size: .84rem; white-space: nowrap; }
.conv-ctx-item > i { font-size: 1.05rem; color: var(--bs-secondary-color,#6b7280); }
.conv-ctx-item:hover { background: color-mix(in srgb, var(--i-accent,#9fe870) 16%, transparent); }
[data-bs-theme="dark"] .conv-ctx-item { color: #f4f4f5; }
.conv-ctx-item.danger { color: #dc2626; }
.conv-ctx-item.danger > i { color: #dc2626; }
.conv-ctx-item.danger:hover { background: rgba(239,68,68,.12); }
.conv-ctx-divider { height: 1px; background: var(--bs-border-color,#eee); margin: 5px 4px; }
[data-bs-theme="dark"] .conv-ctx-divider { background: #313137; }
.conv-ctx-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color,#9ca3af); padding: 8px 12px 3px; font-weight: 700; }
.conv-ctx-item .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.conv-ctx-taglist { max-height: 196px; overflow-y: auto; }

/* ── Context-menu modals — reuse the "New Canned Response" (cm-*) modal look ── */
.ctx-modal-backdrop { position: fixed; inset: 0; z-index: 4200; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; padding: 16px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ctxBackdropIn .16s ease; }
.cm-modal-card { width: 460px; max-width: 100%; background: var(--bs-card-bg,#fff); border-radius: 24px; overflow: hidden; box-shadow: 0 34px 90px -24px rgba(15,23,42,.5); animation: ctxCardIn .24s cubic-bezier(.16,1,.3,1); }
[data-bs-theme="dark"] .cm-modal-card { background: #1f1f24; box-shadow: 0 34px 90px -24px rgba(0,0,0,.7); }
.cm-head { display: flex; align-items: center; gap: 16px; padding: 24px 26px; border-bottom: 1px solid var(--bs-border-color); position: relative; }
[data-bs-theme="dark"] .cm-head, [data-bs-theme="dark"] .cm-foot { border-color: #26262c; }
.cm-head-ico { width: 54px; height: 54px; border-radius: 15px; background: color-mix(in srgb,var(--i-accent,#9fe870) 16%,transparent); color: #2f8f3e; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; flex-shrink: 0; }
[data-bs-theme="dark"] .cm-head-ico { background: color-mix(in srgb,var(--i-accent,#9fe870) 18%,transparent); color: var(--i-accent,#9fe870); }
.cm-head-ico.danger { background: rgba(220,38,38,.12); color: #dc2626; }
.cm-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--bs-body-color); line-height: 1.1; }
[data-bs-theme="dark"] .cm-title { color: #f4f4f5; }
.cm-sub { font-size: .86rem; color: var(--bs-secondary-color); margin-top: 3px; }
[data-bs-theme="dark"] .cm-sub { color: #9a9aa3; }
.cm-close { position: absolute; top: 22px; right: 24px; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--bs-border-color); background: var(--bs-card-bg,#fff); color: var(--bs-secondary-color); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; transition: background .14s, color .14s; }
.cm-close:hover { background: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .cm-close { background: #1f1f24; border-color: #313137; color: #c8c8cf; }
[data-bs-theme="dark"] .cm-close:hover { background: rgba(255,255,255,.05); color: #f4f4f5; }
.cm-body { padding: 26px; }
.cm-label { font-size: .92rem; font-weight: 700; color: var(--bs-body-color); }
[data-bs-theme="dark"] .cm-label { color: #f4f4f5; }
/* Fields without a cm-help line: don't let the label sit flush on the control */
.cm-label + .cm-input-wrap,
.cm-label + .pf-dd,
.cm-label + .bm-cdrop,
.cm-label + .bm-type-nav { margin-top: 7px; }
.cm-help { font-size: .8rem; color: var(--bs-secondary-color); margin: 2px 0 10px; line-height: 1.5; }
[data-bs-theme="dark"] .cm-help { color: #9a9aa3; }
.cm-input-wrap { display: flex; align-items: center; border: 1.5px solid var(--bs-border-color); border-radius: 14px; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.cm-input-wrap:focus-within { border-color: var(--i-accent,#9fe870); box-shadow: 0 0 0 3px color-mix(in srgb,var(--i-accent,#9fe870) 16%,transparent); }
[data-bs-theme="dark"] .cm-input-wrap { background: #131316; border-color: #313137; }
.cm-input-ico { padding: 0 6px 0 10px; display: flex; align-items: center; flex-shrink: 0; }
.cm-chip { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 700; background: color-mix(in srgb,var(--i-accent,#9fe870) 18%,transparent); color: #2f8f3e; }
[data-bs-theme="dark"] .cm-chip { background: color-mix(in srgb,var(--i-accent,#9fe870) 20%,transparent); color: var(--i-accent,#9fe870); }
.cm-input-wrap input { flex: 1; min-width: 0; border: none; background: transparent; outline: none !important; box-shadow: none !important; padding: 14px 14px 14px 6px; font-size: .95rem; color: var(--bs-body-color); font-family: inherit; }
[data-bs-theme="dark"] .cm-input-wrap input { color: #f4f4f5; }
.cm-input-wrap input::placeholder { color: var(--bs-secondary-color); opacity: .65; }
.cm-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 26px; border-top: 1px solid var(--bs-border-color); }
.cm-btn-cancel { display: inline-flex; align-items: center; gap: 8px; background: var(--bs-card-bg,#fff); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); font-weight: 600; border-radius: 12px; padding: 11px 22px; font-size: .9rem; cursor: pointer; transition: background .14s; }
.cm-btn-cancel:hover { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .cm-btn-cancel { background: #1f1f24; border-color: #313137; color: #c8c8cf; }
[data-bs-theme="dark"] .cm-btn-cancel:hover { background: rgba(255,255,255,.05); color: #f4f4f5; }
.cm-btn-save { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--i-accent,#9fe870), color-mix(in srgb,var(--i-accent,#9fe870) 80%,#000)); color: #fff; border: none; font-weight: 700; border-radius: 12px; padding: 11px 26px; font-size: .9rem; cursor: pointer; box-shadow: 0 8px 20px -6px color-mix(in srgb,var(--i-accent,#9fe870) 50%,transparent); transition: filter .14s, transform .12s; }
.cm-btn-save:hover { filter: brightness(1.04); color: #fff; }
.cm-btn-save:active { transform: scale(.97); }
.cm-btn-save.danger { background: #dc2626; box-shadow: 0 8px 20px -6px rgba(220,38,38,.5); }
.cm-btn-save.danger:hover { background: #b91c1c; filter: none; }

/* Agent unassigned-queue claim pill */
.queue-pill { display:inline-flex; align-items:center; gap:4px; border:none; cursor:pointer; font-size:.58rem; font-weight:800; padding:3px 9px; border-radius:8px; background:color-mix(in srgb,#f59e0b 18%,transparent); color:#b45309; transition:background .14s,color .14s; }
.queue-pill:hover { background:#f59e0b; color:#fff; }
[data-bs-theme="dark"] .queue-pill { background:rgba(245,158,11,.20); color:#fbbf24; }
[data-bs-theme="dark"] .queue-pill:hover { background:#f59e0b; color:#0a0a0a; }

/* Department transfer ("Route to team") modal list */
.tf-dept-list { display:flex; flex-direction:column; gap:6px; }
.tf-dept { display:flex; align-items:center; gap:11px; width:100%; padding:12px 14px; border:1.5px solid var(--bs-border-color,#e5e7eb); border-radius:13px; background:var(--bs-body-bg,#fff); cursor:pointer; transition:border-color .14s, background .14s; text-align:left; }
.tf-dept:hover { border-color:var(--i-accent,#9fe870); background:color-mix(in srgb,var(--i-accent,#9fe870) 8%,transparent); }
.tf-dept:disabled { opacity:.55; cursor:default; }
.tf-dept-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.tf-dept-name { font-weight:700; font-size:.92rem; color:var(--bs-body-color,#1a2e0a); flex:1; }
.tf-dept-arrow { color:#9ca3af; font-size:1.1rem; }
[data-bs-theme="dark"] .tf-dept { background:#1f1f24; border-color:#313137; }
[data-bs-theme="dark"] .tf-dept-name { color:#f4f4f5; }

/* Sticky assignment status bar (chat header) */
.assign-bar { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:.8rem; font-weight:600; border-bottom:1px solid var(--bs-border-color,#eef1ea); flex-shrink:0; position:sticky; top:0; z-index:5; }
.assign-bar-status { display:inline-flex; align-items:center; gap:6px; }
.assign-bar.unassigned { background:rgba(245,158,11,.10); color:#b45309; }
.assign-bar.mine { background:rgba(159,232,112,.16); color:#2f7d32; }
.assign-bar.assigned { background:rgba(2,132,199,.10); color:#0369a1; }
.assign-bar-btn { margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer; background:#0a0a0a; color:#fff; font-weight:700; font-size:.78rem; padding:6px 14px; border-radius:9px; transition:transform .12s, background .15s; }
.assign-bar-btn:hover { background:#9fe870; color:#0a0a0a; transform:translateY(-1px); }
.assign-bar-btn:disabled { opacity:.5; cursor:default; transform:none; }
[data-bs-theme="dark"] .assign-bar { border-color:#26262c; }
[data-bs-theme="dark"] .assign-bar.unassigned { background:rgba(245,158,11,.16); color:#fbbf24; }
[data-bs-theme="dark"] .assign-bar.mine { background:rgba(159,232,112,.16); color:#9fe870; }
[data-bs-theme="dark"] .assign-bar.assigned { background:rgba(56,189,248,.14); color:#7dd3fc; }
[data-bs-theme="dark"] .assign-bar-btn { background:#9fe870; color:#0a0a0a; }

/* Sidebar unassigned badge (informational, non-clickable) */
.queue-badge { display:inline-flex; align-items:center; gap:4px; font-size:.58rem; font-weight:800; padding:2px 8px; border-radius:8px; background:color-mix(in srgb,#f59e0b 16%,transparent); color:#b45309; cursor:default; }
.queue-badge i { font-size:.5rem; }
[data-bs-theme="dark"] .queue-badge { background:rgba(245,158,11,.18); color:#fbbf24; }

/* Invite-team modal role cards (cm-modal) */
.inv-role-grid { display:flex; gap:10px; }
.inv-role { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:14px 10px; border:1.5px solid var(--bs-border-color,#e2e8f0); border-radius:14px; cursor:pointer; text-align:center; transition:border-color .15s, background .15s; }
.inv-role i { font-size:1.4rem; color:#94a3b8; margin-bottom:3px; transition:color .15s; }
.inv-role-title { font-size:.84rem; font-weight:700; color:var(--bs-body-color,#374151); }
.inv-role-sub { font-size:.72rem; color:#94a3b8; }
.inv-role:has(input:checked) { border-color:var(--i-accent,#9fe870); background:color-mix(in srgb,var(--i-accent,#9fe870) 10%,transparent); }
.inv-role:has(input:checked) i, .inv-role:has(input:checked) .inv-role-title { color:#2f8f3e; }
[data-bs-theme="dark"] .inv-role { background:#1f1f24; border-color:#313137; }
[data-bs-theme="dark"] .inv-role-title { color:#f4f4f5; }
[data-bs-theme="dark"] .inv-role:has(input:checked) { background:color-mix(in srgb,var(--i-accent,#9fe870) 14%,transparent); }
[data-bs-theme="dark"] .inv-role:has(input:checked) i, [data-bs-theme="dark"] .inv-role:has(input:checked) .inv-role-title { color:var(--i-accent,#9fe870); }

/* Engaged state of the sidebar status badge (someone is handling the chat) */
.queue-badge.engaged { background:color-mix(in srgb,#9fe870 22%,transparent); color:#2f7d32; }
[data-bs-theme="dark"] .queue-badge.engaged { background:rgba(159,232,112,.20); color:#9fe870; }

/* Composer-level takeover bar (shown instead of the composer on unassigned chats) */
.composer-lock { display:flex; align-items:center; gap:12px; padding:14px 16px; background:rgba(245,158,11,.10); border:1px dashed rgba(245,158,11,.45); border-radius:12px; margin:2px 0; }
.composer-lock-text { display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:600; color:#b45309; }
.composer-lock-btn { margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer; background:#0a0a0a; color:#fff; font-weight:700; font-size:.82rem; padding:9px 17px; border-radius:10px; transition:transform .12s, background .15s; }
.composer-lock-btn:hover { background:#9fe870; color:#0a0a0a; transform:translateY(-1px); }
.composer-lock-btn:disabled { opacity:.5; cursor:default; transform:none; }
[data-bs-theme="dark"] .composer-lock { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); }
[data-bs-theme="dark"] .composer-lock-text { color:#fbbf24; }
[data-bs-theme="dark"] .composer-lock-btn { background:#9fe870; color:#0a0a0a; }