/* ================================================================
   EduDesk Success Center™ — Design System
   "Apple + Linear + Intercom"
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand */
  --gold:         #f5a623;
  --gold-light:   #fbbf24;
  --gold-dim:     rgba(245,166,35,.15);
  --gold-glow:    rgba(245,166,35,.25);

  /* Semantic */
  --success:      #10b981;
  --success-dim:  rgba(16,185,129,.15);
  --warning:      #f59e0b;
  --warning-dim:  rgba(245,158,11,.15);
  --danger:       #f43f5e;
  --danger-dim:   rgba(244,63,94,.15);
  --info:         #3b82f6;
  --info-dim:     rgba(59,130,246,.15);
  --purple:       #8b5cf6;
  --purple-dim:   rgba(139,92,246,.15);
  --cyan:         #06b6d4;
  --cyan-dim:     rgba(6,182,212,.15);

  /* Priority */
  --p-critical:   #f43f5e;
  --p-high:       #f97316;
  --p-medium:     #f59e0b;
  --p-low:        #10b981;

  /* Status */
  --s-open:       #3b82f6;
  --s-progress:   #8b5cf6;
  --s-waiting:    #f59e0b;
  --s-resolved:   #10b981;
  --s-closed:     #6b7280;

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Transitions */
  --t:      .18s cubic-bezier(.4,0,.2,1);
  --t-slow: .35s cubic-bezier(.4,0,.2,1);
  --t-spring: .4s cubic-bezier(.34,1.56,.64,1);

  /* Sidebar width */
  --sidebar-w: 240px;
  --sidebar-collapsed: 64px;
}

/* ── Dark Theme (default) ──────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:           #080d17;
  --bg-2:         #0d1424;
  --bg-3:         #111827;
  --bg-4:         #1a2235;
  --card:         #111827;
  --card-hover:   #1a2235;
  --glass:        rgba(17,24,39,.7);
  --glass-border: rgba(255,255,255,.07);
  --border:       rgba(255,255,255,.07);
  --border-2:     rgba(255,255,255,.12);
  --text:         #f9fafb;
  --text-2:       #e5e7eb;
  --muted:        #9ca3af;
  --muted-2:      #6b7280;
  --sidebar-bg:   #0d1424;
  --topbar-bg:    rgba(8,13,23,.85);
  --input-bg:     rgba(255,255,255,.05);
  --input-border: rgba(255,255,255,.1);
  --sh-sm:        0 1px 3px rgba(0,0,0,.5);
  --sh-md:        0 4px 20px rgba(0,0,0,.6);
  --sh-lg:        0 20px 60px rgba(0,0,0,.7);
  --sh-gold:      0 8px 32px rgba(245,166,35,.2);
}

[data-theme="light"] {
  --bg:           #f0f4f8;
  --bg-2:         #e8edf5;
  --bg-3:         #ffffff;
  --bg-4:         #f8fafc;
  --card:         #ffffff;
  --card-hover:   #f8fafc;
  --glass:        rgba(255,255,255,.8);
  --glass-border: rgba(0,0,0,.07);
  --border:       rgba(0,0,0,.07);
  --border-2:     rgba(0,0,0,.12);
  --text:         #0f172a;
  --text-2:       #1e293b;
  --muted:        #64748b;
  --muted-2:      #94a3b8;
  --sidebar-bg:   #ffffff;
  --topbar-bg:    rgba(240,244,248,.9);
  --input-bg:     rgba(0,0,0,.03);
  --input-border: rgba(0,0,0,.1);
  --sh-sm:        0 1px 3px rgba(0,0,0,.08);
  --sh-md:        0 4px 20px rgba(0,0,0,.1);
  --sh-lg:        0 20px 60px rgba(0,0,0,.15);
  --sh-gold:      0 8px 32px rgba(245,166,35,.25);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; overflow-x:hidden;
  transition:background var(--t-slow),color var(--t-slow);
}
a { color:var(--info); text-decoration:none; transition:color var(--t) }
a:hover { color:var(--gold) }
button { cursor:pointer; font-family:inherit; border:none; background:none }
input,textarea,select { font-family:inherit; outline:none }
img { max-width:100%; display:block }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:99px }
::-webkit-scrollbar-thumb:hover { background:var(--muted-2) }

/* ── Typography ────────────────────────────────────────── */
h1 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.2 }
h2 { font-size:1.4rem; font-weight:700; letter-spacing:-.02em }
h3 { font-size:1.1rem; font-weight:700; letter-spacing:-.01em }
h4 { font-size:.95rem; font-weight:600 }
p  { color:var(--text-2); line-height:1.7 }
code {
  font-family:'JetBrains Mono',monospace; font-size:.8em;
  background:var(--bg-4); border:1px solid var(--border);
  padding:2px 6px; border-radius:var(--r-xs); color:var(--gold);
}

/* ── Layout Shell ──────────────────────────────────────── */
.app-shell { display:flex; min-height:100vh }

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:200; overflow:hidden;
  transition:width var(--t-slow),background var(--t-slow);
}
.sidebar.collapsed { width:var(--sidebar-collapsed) }
.sidebar-brand {
  height:60px; display:flex; align-items:center; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--border);
  flex-shrink:0; overflow:hidden;
}
.brand-logo {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),#d97706);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:900; color:#fff;
  box-shadow:0 4px 12px rgba(245,166,35,.35);
}
.brand-text { white-space:nowrap; overflow:hidden }
.brand-text strong { display:block; font-size:.92rem; font-weight:800; line-height:1.2 }
.brand-text span { font-size:.7rem; color:var(--muted); font-weight:500 }
.sidebar.collapsed .brand-text { display:none }

.sidebar-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0 }
.nav-section-label {
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); padding:16px 16px 6px;
  white-space:nowrap; overflow:hidden;
}
.sidebar.collapsed .nav-section-label { display:none }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; margin:1px 8px;
  border-radius:var(--r-sm); cursor:pointer;
  transition:all var(--t); position:relative;
  white-space:nowrap; overflow:hidden;
  font-size:.85rem; font-weight:500; color:var(--muted);
  text-decoration:none;
}
.nav-item:hover { background:var(--bg-4); color:var(--text) }
.nav-item.active {
  background:var(--gold-dim); color:var(--gold); font-weight:600;
}
.nav-item.active::before {
  content:''; position:absolute; left:-8px; top:6px; bottom:6px;
  width:3px; background:var(--gold); border-radius:0 3px 3px 0;
}
.nav-icon {
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.nav-label { flex:1 }
.nav-badge {
  background:var(--danger); color:#fff;
  font-size:.6rem; font-weight:800;
  padding:2px 6px; border-radius:var(--r-full);
  flex-shrink:0;
}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge { display:none }
.sidebar.collapsed .nav-item { justify-content:center; padding:9px; margin:1px 8px }
.sidebar.collapsed .nav-item.active::before { left:-8px }

/* Sidebar tooltip on collapse */
.sidebar.collapsed .nav-item { position:relative }
.sidebar.collapsed .nav-item::after {
  content:attr(data-tooltip);
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%);
  background:var(--bg-4); border:1px solid var(--border-2);
  color:var(--text); font-size:.78rem; font-weight:600;
  padding:5px 10px; border-radius:var(--r-sm);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity var(--t);
  box-shadow:var(--sh-md); z-index:300;
}
.sidebar.collapsed .nav-item:hover::after { opacity:1 }

.sidebar-footer {
  padding:12px 8px; border-top:1px solid var(--border); flex-shrink:0;
}
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t);
  overflow:hidden;
}
.sidebar-user:hover { background:var(--bg-4) }
.avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--info),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:#fff;
}
.avatar.sm { width:26px; height:26px; font-size:.7rem }
.avatar.lg { width:44px; height:44px; font-size:1rem }
.avatar.xl { width:60px; height:60px; font-size:1.3rem }
.user-info { flex:1; min-width:0 }
.user-info strong { font-size:.82rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-info span { font-size:.72rem; color:var(--muted) }
.sidebar.collapsed .user-info { display:none }
.sidebar-collapse-btn {
  width:100%; padding:8px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.8rem;
  transition:all var(--t); margin-top:4px;
}
.sidebar-collapse-btn:hover { background:var(--bg-4); color:var(--text) }

/* ── Topbar ────────────────────────────────────────────── */
.topbar {
  height:60px; display:flex; align-items:center; gap:12px;
  padding:0 24px;
  background:var(--topbar-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  transition:background var(--t-slow);
}
.topbar-title { font-size:1rem; font-weight:700; flex:1 }
.topbar-search {
  display:flex; align-items:center; gap:8px;
  background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:var(--r-sm); padding:7px 14px;
  font-size:.83rem; color:var(--muted);
  cursor:pointer; transition:all var(--t); max-width:360px; flex:1;
}
.topbar-search:hover { border-color:var(--gold); background:var(--bg-4) }
.topbar-search kbd {
  margin-left:auto; font-family:'JetBrains Mono',monospace;
  font-size:.68rem; background:var(--bg-4);
  border:1px solid var(--border-2); border-bottom-width:2px;
  padding:2px 5px; border-radius:4px; color:var(--muted);
}
.topbar-actions { display:flex; align-items:center; gap:6px }
.icon-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all var(--t); position:relative;
  font-size:.95rem;
}
.icon-btn:hover { background:var(--bg-4); color:var(--text) }
.icon-btn .notif-dot {
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--danger); border:1.5px solid var(--sidebar-bg);
}

/* ── Main Content ──────────────────────────────────────── */
.main-content {
  flex:1; margin-left:var(--sidebar-w);
  min-width:0; display:flex; flex-direction:column;
  transition:margin-left var(--t-slow);
}
.main-content.collapsed { margin-left:var(--sidebar-collapsed) }
.page-content { padding:28px 28px 60px; flex:1 }

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); transition:all var(--t);
}
.card:hover { border-color:var(--border-2) }
.card.glow:hover { box-shadow:0 0 0 1px var(--gold), var(--sh-gold) }
.card-pad { padding:24px }
.card-pad-sm { padding:16px }

/* Glassmorphism card */
.glass-card {
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-lg);
}

/* ── KPI Cards ─────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px }
.kpi-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
  transition:all var(--t); cursor:default;
  position:relative; overflow:hidden;
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--kpi-color,var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow);
}
.kpi-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) }
.kpi-card:hover::before { transform:scaleX(1) }
.kpi-icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; margin-bottom:12px;
  background:color-mix(in srgb,var(--kpi-color,var(--gold)) 12%,transparent);
}
.kpi-value { font-size:1.8rem; font-weight:800; letter-spacing:-.03em; line-height:1 }
.kpi-label { font-size:.75rem; color:var(--muted); font-weight:600; margin-top:4px; text-transform:uppercase; letter-spacing:.04em }
.kpi-change { font-size:.75rem; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:4px }
.kpi-change.up { color:var(--success) }
.kpi-change.down { color:var(--danger) }

/* ── Health Score Ring ─────────────────────────────────── */
.health-ring { position:relative; display:inline-flex; align-items:center; justify-content:center }
.health-ring svg { transform:rotate(-90deg) }
.health-ring .ring-bg { fill:none; stroke:var(--border-2) }
.health-ring .ring-fill { fill:none; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) }
.health-ring .ring-label {
  position:absolute; text-align:center;
  font-weight:800; line-height:1.1;
}
.health-ring .ring-label .score { display:block; font-size:1.5rem }
.health-ring .ring-label .grade { display:block; font-size:.65rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em }

/* ── Pills & Badges ────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-full);
}
.pill-gold   { background:var(--gold-dim);    color:var(--gold);    border:1px solid rgba(245,166,35,.25) }
.pill-green  { background:var(--success-dim); color:var(--success); border:1px solid rgba(16,185,129,.25) }
.pill-blue   { background:var(--info-dim);    color:var(--info);    border:1px solid rgba(59,130,246,.25) }
.pill-red    { background:var(--danger-dim);  color:var(--danger);  border:1px solid rgba(244,63,94,.25) }
.pill-orange { background:rgba(249,115,22,.12); color:#f97316; border:1px solid rgba(249,115,22,.25) }
.pill-purple { background:var(--purple-dim);  color:var(--purple);  border:1px solid rgba(139,92,246,.25) }
.pill-gray   { background:rgba(107,114,128,.12); color:var(--muted); border:1px solid rgba(107,114,128,.2) }

/* Priority pills */
.priority-critical { background:var(--danger-dim);  color:var(--danger);  border:1px solid rgba(244,63,94,.25) }
.priority-high     { background:rgba(249,115,22,.12); color:#f97316; border:1px solid rgba(249,115,22,.25) }
.priority-medium   { background:var(--warning-dim); color:var(--warning); border:1px solid rgba(245,158,11,.25) }
.priority-low      { background:var(--success-dim); color:var(--success); border:1px solid rgba(16,185,129,.25) }

/* Status pills */
.status-open     { background:var(--info-dim);    color:var(--info);    border:1px solid rgba(59,130,246,.25) }
.status-progress { background:var(--purple-dim);  color:var(--purple);  border:1px solid rgba(139,92,246,.25) }
.status-waiting  { background:var(--warning-dim); color:var(--warning); border:1px solid rgba(245,158,11,.25) }
.status-resolved { background:var(--success-dim); color:var(--success); border:1px solid rgba(16,185,129,.25) }
.status-closed   { background:rgba(107,114,128,.12); color:var(--muted); border:1px solid rgba(107,114,128,.2) }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:700;
  transition:all var(--t); cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background var(--t);
}
.btn:hover::after { background:rgba(255,255,255,.06) }
.btn:active { transform:scale(.98) }

.btn-primary { background:var(--gold); color:#fff; border-color:var(--gold) }
.btn-primary:hover { background:var(--gold-light); box-shadow:var(--sh-gold); transform:translateY(-1px) }
.btn-secondary { background:var(--bg-4); color:var(--text); border-color:var(--border-2) }
.btn-secondary:hover { border-color:var(--muted-2) }
.btn-ghost { background:transparent; color:var(--muted); border-color:var(--border) }
.btn-ghost:hover { color:var(--text); background:var(--bg-4) }
.btn-danger { background:var(--danger-dim); color:var(--danger); border-color:rgba(244,63,94,.25) }
.btn-danger:hover { background:var(--danger); color:#fff }
.btn-success { background:var(--success-dim); color:var(--success); border-color:rgba(16,185,129,.25) }
.btn-success:hover { background:var(--success); color:#fff }
.btn-sm { padding:6px 12px; font-size:.78rem }
.btn-lg { padding:12px 24px; font-size:.95rem }
.btn-icon { padding:9px; }
.btn-icon.sm { padding:6px }

/* Magnetic button effect */
.btn-magnetic { transition:transform .3s cubic-bezier(.34,1.56,.64,1) }

/* ── Form Elements ─────────────────────────────────────── */
.input, .select, .textarea {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:var(--r-sm); padding:9px 14px;
  font-size:.87rem; color:var(--text); font-family:inherit;
  transition:all var(--t);
}
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--gold); background:var(--bg-4);
  box-shadow:0 0 0 3px var(--gold-glow);
}
.input::placeholder, .textarea::placeholder { color:var(--muted-2) }
.textarea { resize:vertical; min-height:80px; line-height:1.6 }
.select { cursor:pointer; appearance:none }
.form-label {
  display:block; font-size:.78rem; font-weight:600;
  color:var(--muted); margin-bottom:6px; letter-spacing:.02em;
}
.form-group { margin-bottom:16px }
.input-group { display:flex; gap:0 }
.input-group .input { border-radius:var(--r-sm) 0 0 var(--r-sm) }
.input-group .btn { border-radius:0 var(--r-sm) var(--r-sm) 0; flex-shrink:0 }

/* ── Tabs ──────────────────────────────────────────────── */
.tabs { display:flex; gap:2px; background:var(--bg-2); padding:4px; border-radius:var(--r-sm); width:fit-content }
.tab {
  padding:7px 16px; border-radius:var(--r-xs);
  font-size:.83rem; font-weight:600; color:var(--muted);
  transition:all var(--t); cursor:pointer; white-space:nowrap;
}
.tab.active { background:var(--card); color:var(--text); box-shadow:var(--sh-sm) }
.tab:hover:not(.active) { color:var(--text-2) }

/* Underline tabs variant */
.tabs-underline { display:flex; border-bottom:1px solid var(--border); gap:0; background:none; padding:0; width:100%; border-radius:0 }
.tabs-underline .tab {
  padding:10px 18px; border-radius:0;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  background:none;
}
.tabs-underline .tab.active { color:var(--gold); border-bottom-color:var(--gold); background:none; box-shadow:none }

/* ── Table ─────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border) }
table { width:100%; border-collapse:collapse }
thead th {
  background:var(--bg-2); padding:10px 16px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
tbody td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:.87rem; vertical-align:middle }
tbody tr:last-child td { border-bottom:none }
tbody tr { transition:background var(--t); cursor:pointer }
tbody tr:hover { background:var(--bg-4) }
.table-avatar { display:flex; align-items:center; gap:10px }

/* ── Modals ────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none;
  transition:opacity var(--t);
}
.modal-overlay.open { opacity:1; pointer-events:all }
.modal {
  background:var(--card); border:1px solid var(--border-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  transform:translateY(-20px) scale(.97);
  transition:transform var(--t);
}
.modal-overlay.open .modal { transform:none }
.modal-lg { max-width:760px }
.modal-header {
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--card); z-index:1;
}
.modal-body { padding:24px }
.modal-footer {
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end;
  position:sticky; bottom:0; background:var(--card);
}

/* ── Slide Panel ───────────────────────────────────────── */
.slide-panel {
  position:fixed; top:0; right:0; bottom:0; z-index:300;
  width:480px; background:var(--card);
  border-left:1px solid var(--border);
  box-shadow:var(--sh-lg);
  transform:translateX(100%);
  transition:transform var(--t-slow);
  display:flex; flex-direction:column; overflow:hidden;
}
.slide-panel.open { transform:translateX(0) }
.panel-header {
  padding:18px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.panel-body { flex:1; overflow-y:auto; padding:20px }
.panel-footer { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0 }

/* ── Chat Bubbles ──────────────────────────────────────── */
.chat-wrap { display:flex; flex-direction:column; gap:16px; padding:20px }
.chat-msg { display:flex; gap:10px; max-width:78%; }
.chat-msg.bot { align-self:flex-start }
.chat-msg.user { align-self:flex-end; flex-direction:row-reverse }
.chat-avatar {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  background:linear-gradient(135deg,var(--gold),#d97706);
  margin-top:2px;
}
.chat-msg.user .chat-avatar { background:linear-gradient(135deg,var(--info),var(--purple)) }
.bubble {
  padding:12px 16px; border-radius:var(--r-lg); font-size:.88rem; line-height:1.6;
  max-width:100%;
}
.chat-msg.bot .bubble {
  background:var(--bg-4); border:1px solid var(--border);
  border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);
  color:var(--text-2);
}
.chat-msg.user .bubble {
  background:var(--gold); color:#fff;
  border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);
}
.typing-indicator { display:flex; gap:4px; align-items:center; padding:4px 2px }
.typing-dot {
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.15s }
.typing-dot:nth-child(3) { animation-delay:.3s }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* ── Command Palette ───────────────────────────────────── */
.cmd-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,.65); backdrop-filter:blur(12px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:80px; opacity:0; pointer-events:none;
  transition:opacity var(--t);
}
.cmd-overlay.open { opacity:1; pointer-events:all }
.cmd-box {
  width:100%; max-width:580px;
  background:var(--card); border:1px solid var(--border-2);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  overflow:hidden;
  transform:translateY(-24px) scale(.96);
  transition:transform var(--t);
}
.cmd-overlay.open .cmd-box { transform:none }
.cmd-input-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.cmd-input {
  flex:1; background:none; border:none;
  font-size:1rem; color:var(--text); font-family:inherit;
}
.cmd-input::placeholder { color:var(--muted) }
.cmd-results { max-height:340px; overflow-y:auto; padding:6px }
.cmd-group-label {
  font-size:.65rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
  padding:10px 12px 5px;
}
.cmd-item {
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t);
}
.cmd-item:hover, .cmd-item.focused { background:var(--bg-4) }
.cmd-item-icon {
  width:32px; height:32px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; background:var(--bg-2); flex-shrink:0;
}
.cmd-item-body { flex:1; min-width:0 }
.cmd-item-body strong { font-size:.88rem; display:block }
.cmd-item-body span { font-size:.75rem; color:var(--muted) }
.cmd-item-kbd { display:flex; gap:3px }
.cmd-footer { padding:8px 16px; border-top:1px solid var(--border); display:flex; gap:14px; font-size:.7rem; color:var(--muted) }
.cmd-footer span { display:flex; align-items:center; gap:4px }

/* ── Notification Drawer ───────────────────────────────── */
.notif-drawer {
  position:fixed; top:60px; right:16px; z-index:250;
  width:340px; background:var(--card);
  border:1px solid var(--border-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); overflow:hidden;
  transform:translateY(-10px) scale(.97); opacity:0; pointer-events:none;
  transition:all var(--t-slow);
}
.notif-drawer.open { transform:none; opacity:1; pointer-events:all }
.notif-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.notif-list { max-height:380px; overflow-y:auto }
.notif-item {
  display:flex; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border);
  transition:background var(--t); cursor:pointer;
}
.notif-item:hover { background:var(--bg-4) }
.notif-item:last-child { border-bottom:none }
.notif-item.unread { background:color-mix(in srgb,var(--info) 4%,transparent) }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--info); flex-shrink:0; margin-top:5px }
.notif-text { font-size:.82rem; line-height:1.5; flex:1 }
.notif-text strong { display:block; font-weight:600; margin-bottom:2px }
.notif-text span { color:var(--muted); font-size:.75rem }

/* ── Toast ─────────────────────────────────────────────── */
#toast-rack {
  position:fixed; bottom:24px; right:24px; z-index:999;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.toast {
  background:var(--bg-4); border:1px solid var(--border-2);
  border-radius:var(--r); box-shadow:var(--sh-lg);
  padding:12px 16px; font-size:.85rem;
  display:flex; align-items:center; gap:10px;
  max-width:320px; animation:toastIn .3s var(--t-spring);
}
.toast.leaving { animation:toastOut .25s ease forwards }
.toast.success { border-left:3px solid var(--success) }
.toast.error   { border-left:3px solid var(--danger) }
.toast.warning { border-left:3px solid var(--warning) }
.toast.info    { border-left:3px solid var(--info) }
@keyframes toastIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateX(20px)} }

/* ── Progress bars ─────────────────────────────────────── */
.progress-bar { height:6px; background:var(--bg-2); border-radius:var(--r-full); overflow:hidden }
.progress-fill { height:100%; border-radius:var(--r-full); transition:width 1s cubic-bezier(.4,0,.2,1) }
.progress-bar.thin { height:3px }

/* ── SLA timer ─────────────────────────────────────────── */
.sla-timer { font-size:.75rem; font-weight:700; display:flex; align-items:center; gap:5px }
.sla-timer.ok    { color:var(--success) }
.sla-timer.warn  { color:var(--warning) }
.sla-timer.breach { color:var(--danger) }

/* ── Activity feed ─────────────────────────────────────── */
.activity-feed { display:flex; flex-direction:column }
.activity-item {
  display:flex; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border); font-size:.84rem;
  transition:background var(--t);
}
.activity-item:last-child { border-bottom:none }
.activity-icon {
  width:32px; height:32px; border-radius:var(--r-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  background:var(--bg-2);
}
.activity-body { flex:1 }
.activity-body strong { font-weight:600 }
.activity-time { font-size:.72rem; color:var(--muted); margin-top:2px; display:block }

/* ── Kanban ────────────────────────────────────────────── */
.kanban-board { display:flex; gap:16px; overflow-x:auto; padding-bottom:16px }
.kanban-col {
  width:280px; flex-shrink:0;
  background:var(--bg-2); border-radius:var(--r-lg);
  display:flex; flex-direction:column; max-height:calc(100vh - 200px);
}
.kanban-col-header {
  padding:14px 16px; font-size:.82rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.kanban-col-count {
  background:var(--bg-4); color:var(--muted);
  font-size:.7rem; padding:1px 7px; border-radius:var(--r-full); font-weight:700;
}
.kanban-col-body { flex:1; overflow-y:auto; padding:10px }
.kanban-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:14px; margin-bottom:8px;
  cursor:pointer; transition:all var(--t);
}
.kanban-card:hover { border-color:var(--border-2); box-shadow:var(--sh-sm); transform:translateY(-1px) }
.kanban-card h4 { font-size:.85rem; margin-bottom:8px; line-height:1.4 }
.kanban-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap }

/* ── Chart placeholder ─────────────────────────────────── */
.chart-container { position:relative; width:100% }
.bar-chart { display:flex; align-items:flex-end; gap:6px; height:140px; padding:0 4px }
.bar-group { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 }
.bar { width:100%; border-radius:4px 4px 0 0; transition:height 1s cubic-bezier(.4,0,.2,1); min-height:4px; position:relative }
.bar:hover::after {
  content:attr(data-val); position:absolute; top:-28px; left:50%; transform:translateX(-50%);
  background:var(--bg-4); border:1px solid var(--border-2); padding:3px 8px;
  border-radius:4px; font-size:.7rem; font-weight:700; white-space:nowrap;
}
.bar-label { font-size:.65rem; color:var(--muted); text-align:center; white-space:nowrap }
.line-chart { width:100%; height:100px }

/* ── Empty state ───────────────────────────────────────── */
.empty-state {
  text-align:center; padding:48px 20px; color:var(--muted);
}
.empty-state-icon { font-size:2.5rem; margin-bottom:12px; opacity:.5 }
.empty-state h3 { font-size:1rem; color:var(--text-2); margin-bottom:6px }
.empty-state p { font-size:.85rem; max-width:280px; margin:0 auto }

/* ── Skeleton ──────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--border) 25%,var(--bg-4) 50%,var(--border) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Scrollable area ───────────────────────────────────── */
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:1024px) {
  :root { --sidebar-w:200px }
  .slide-panel { width:420px }
}
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); width:var(--sidebar-w)!important }
  .sidebar.mobile-open { transform:translateX(0) }
  .main-content { margin-left:0!important }
  .page-content { padding:16px 16px 60px }
  .kpi-grid { grid-template-columns:repeat(2,1fr) }
  .slide-panel { width:100%; border-radius:var(--r-xl) var(--r-xl) 0 0; top:auto; height:85vh }
  .kanban-board { flex-direction:column }
  .kanban-col { width:100%; max-height:none }
}
@media(max-width:480px) {
  .kpi-grid { grid-template-columns:1fr 1fr }
  .topbar-search { display:none }
}