/* ═══ RESET ═══ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Original :root removed — superseded by refined block below */

/* Z-INDEX SCALE:
   1    = Within-scroll sticky
   10   = Sticky headers, tab bars
   50   = Dropdowns, popovers, tooltips
   100  = Fixed overlays, sidebars
   500  = Modals, dialogs
   1000 = Toasts, notifications
   9999 = Critical overlays (incoming call, app loader)
*/

html,body{height:100%;height:-webkit-fill-available;overflow:hidden;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

::selection{background:var(--teal);color:var(--white)}

input,textarea,button,select{font-family:inherit;font-size:inherit}

a{text-decoration:none;color:inherit}

.ac-card::-webkit-scrollbar{width:4px}

.ac-card::-webkit-scrollbar-thumb{background:var(--overlay-white-10);border-radius:var(--radius-xs)}

.ep-tabs::-webkit-scrollbar{display:none}

.ep-grid-wrap::-webkit-scrollbar{width:4px}

.ep-grid-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-xs)}

:root{
  /* ═══ CANONICAL DESIGN TOKENS (29) ═══ */
  /* Backgrounds — 3 layers */
  --bg:#0a0c10;
  --bg-2:#0e1117;
  --bg-3:#151a24;
  /* Surfaces — 2 layers */
  --surface:#0e1117;
  --surface-elevated:#161c28;
  /* Text — 4 hierarchy stops */
  --text:#e2e4e8;
  --text-2:#9399a8;
  --text-3:#9ba1ae;
  --text-disabled:rgba(226,228,232,.38);
  /* Borders — 2 stops */
  --border:#181e2a;
  --border-strong:#2a3142;
  /* Brand — WCAG AA: #3b6def (4.6:1, pass). Was #4f7df5 (3.94:1, fail). */
  --brand:#3b6def;
  --brand-hover:#2d5be0;
  --brand-bg:rgba(59,109,239,.10);
  /* Status — 7 (color + bg pair, plus info) */
  --success:#30a46c;
  --success-bg:rgba(48,164,108,.10);
  --warning:#d97706;
  --warning-bg:rgba(217,119,6,.10);
  --danger:#e5484d;
  --danger-bg:rgba(229,72,77,.10);
  --info:#3b82f6;
  /* Overlays — 3 stops (dark theme: white-on-dark; light theme overrides to black-on-light) */
  --overlay-light:rgba(255,255,255,.04);
  --overlay-medium:rgba(255,255,255,.08);
  --overlay-strong:rgba(255,255,255,.16);
  /* Status indicators */
  --status-online:#30a46c;
  --status-away:#d4a043;
  --status-dnd:#c0524b;
  /* Absolutes */
  --white:#fff;
  --black:#000;

  /* ═══ DEPRECATED ALIASES — DO NOT USE IN NEW CODE ═══ */
  /* Background layers (legacy bgN naming) */
  --bg2:var(--bg-2);
  --bg3:var(--bg-3);
  --bg4:var(--surface-elevated);
  /* Panel-specific backgrounds — flatten to canonical layers */
  --panel-sidebar:#0c0f15;
  --panel-list:var(--bg-2);
  --panel-chat:#0b0e14;
  --panel-crm:var(--bg-2);
  --panel-elevated:var(--surface-elevated);
  /* Text legacy */
  --text1:var(--text);
  --text2:var(--text-2);
  --text3:var(--text-3);
  --text4:var(--text-3);
  /* Border legacy */
  --border-light:rgba(255,255,255,.05);
  --border-lighter:rgba(255,255,255,.03);
  --border-dark:var(--border-strong);
  /* Brand legacy aliases */
  --brand-light:var(--brand);
  --brand-hover-bg:var(--brand-bg);
  --nav-active-bg:var(--brand-bg);
  --nav-active-text:#7ba0f7;
  /* Status legacy */
  --warn:var(--warning);
  --danger-light:#fb7185;
  --danger-dark:var(--danger);
  --danger-hover-bg:var(--danger-bg);
  --success-dark:var(--success);
  --success-darker:var(--success);
  /* Teal — kept (used as accent throughout app) */
  --teal:#10b4a2;
  --teal-hover:#0d9a8a;
  --teal-bg:rgba(16,180,162,.06);
  --teal-light:rgba(16,180,162,.10);
  /* Roles */
  --role-admin:#6366f1;
  --role-owner:#f59e0b;
  --internal:#b45309;
  --toggle-off:#d1d5db;
  /* Hue tokens (deprecated — used only in light-mode.css/features.css overrides) */
  --pink:#ec4899;
  --purple:#8b5cf6;
  --orange:#fb923c;
  --orange-dark:#ea580c;
  --blue:#60a5fa;
  --green:#34d399;
  --indigo:#818cf8;
  /* Call-screen backgrounds */
  --call-bg:#0a0a0f;
  --call-video-bg:#000;
  /* Light-theme companions (kept so dark theme still computes) */
  --teal-bg-light:#f0fdfa;
  --warn-light:#fde68a;
  --warn-bg-light:#fef3c7;
  /* Shadows — restrained */
  --shadow-sm:none;
  --shadow-md:0 2px 8px rgba(0,0,0,.18);
  --shadow-lg:0 8px 24px rgba(0,0,0,.25);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.3);
  /* Layout */
  --nav-w:208px;
  --inbox-w:clamp(280px, 25vw, 360px);
  --crm-w:clamp(280px, 22vw, 320px);
  /* Radii — clean 4px-step scale */
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;
  /* Safe areas */
  --safe-t:env(safe-area-inset-top);--safe-b:env(safe-area-inset-bottom);--safe-l:env(safe-area-inset-left);--safe-r:env(safe-area-inset-right);
  /* Typography scale */
  --fs-2xs:10px;--fs-xs:11px;--fs-sm:13px;--fs-base:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:22px;--fs-2xl-plus:24px;--fs-3xl-minus:28px;--fs-3xl:32px;--fs-icon-lg:40px;--fs-icon-xl:48px;
  /* Interaction overlays — alias to canonical */
  --hover-overlay:var(--overlay-light);
  --active-overlay:var(--overlay-medium);
  --overlay-dark:rgba(0,0,0,.6);
  /* Placeholder — WCAG AA: was .3 alpha (2.9:1, fails). Now .55 (4.6:1, pass). */
  --placeholder:rgba(255,255,255,.55);
  /* Focus ring */
  --focus-teal:0 0 0 3px rgba(16,180,162,.15);
  /* Spacing scale (4px grid) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;

  /* ═══ DEPRECATED ALPHA-RAMP ALIASES — collapse to overlay-light/medium/strong ═══ */
  /* White overlays — semantically: subtle <.08, medium .08-.16, strong >.16 */
  --overlay-white-2:var(--overlay-light);
  --overlay-white-3:var(--overlay-light);
  --overlay-white-4:var(--overlay-light);
  --overlay-white-5:var(--overlay-light);
  --overlay-white-6:var(--overlay-light);
  --overlay-white-7:var(--overlay-light);
  --overlay-white-15p:var(--overlay-light);
  --overlay-white-25p:var(--overlay-light);
  --overlay-white-10:var(--overlay-medium);
  --overlay-white-12:var(--overlay-medium);
  --overlay-white-15:var(--overlay-medium);
  --overlay-white-16:var(--overlay-medium);
  --overlay-white-20:var(--overlay-strong);
  --overlay-white-25:var(--overlay-strong);
  --overlay-white-30:var(--overlay-strong);
  --overlay-white-35:var(--overlay-strong);
  /* High-alpha whites are text colors on dark surfaces, not overlays */
  --overlay-white-50:rgba(255,255,255,.5);
  --overlay-white-60:rgba(255,255,255,.6);
  --overlay-white-70:rgba(255,255,255,.7);
  --white-40:rgba(255,255,255,.4);
  --white-45:rgba(255,255,255,.45);
  --white-80:rgba(255,255,255,.8);
  --white-90:rgba(255,255,255,.9);
  /* Dark overlays — light theme uses these as subtle dividers/hovers */
  --overlay-dark-2:rgba(0,0,0,.04);
  --overlay-dark-3:rgba(0,0,0,.04);
  --overlay-dark-4:rgba(0,0,0,.04);
  --overlay-dark-5:rgba(0,0,0,.04);
  --overlay-dark-6:rgba(0,0,0,.08);
  --overlay-dark-7:rgba(0,0,0,.08);
  --overlay-dark-8:rgba(0,0,0,.08);
  --overlay-dark-10:rgba(0,0,0,.10);
  --overlay-dark-20:rgba(0,0,0,.20);
  --overlay-dark-25:rgba(0,0,0,.25);
  --overlay-dark-30:rgba(0,0,0,.30);
  --overlay-dark-35:rgba(0,0,0,.35);
  --overlay-dark-45:rgba(0,0,0,.45);
  --overlay-dark-50:rgba(0,0,0,.50);
  --overlay-dark-55:rgba(0,0,0,.55);
  --overlay-dark-70:rgba(0,0,0,.70);
  --dark-90:rgba(0,0,0,.9);

  /* Brand alpha ramp — collapse to --brand-bg */
  --brand-2p:var(--brand-bg);
  --brand-3:var(--brand-bg);
  --brand-4:var(--brand-bg);
  --brand-5:var(--brand-bg);
  --brand-6:var(--brand-bg);
  --brand-8:var(--brand-bg);
  --brand-10:var(--brand-bg);
  --brand-12:var(--brand-bg);
  --brand-15:var(--brand-bg);
  --brand-18:rgba(59,109,239,.18);
  --brand-20:rgba(59,109,239,.20);
  --brand-25:rgba(59,109,239,.25);
  --brand-30:rgba(59,109,239,.30);
  --brand-40:rgba(59,109,239,.40);
  --brand-50:rgba(59,109,239,.50);
  --brand-65:rgba(59,109,239,.65);
  --brand-90:rgba(59,109,239,.90);

  /* Teal alpha ramp */
  --teal-4:rgba(16,180,162,.04);
  --teal-8:rgba(16,180,162,.08);
  --teal-10:rgba(16,180,162,.10);
  --teal-12:rgba(16,180,162,.12);
  --teal-15:rgba(16,180,162,.15);
  --teal-40:rgba(16,180,162,.40);
  --teal-50:rgba(16,180,162,.50);
  --teal-8-light:rgba(13,148,136,.08);
  --teal-30-light:rgba(13,148,136,.30);
  --teal-40-light:rgba(13,148,136,.40);

  /* Danger alpha ramp — collapse mid alphas to --danger-bg */
  --danger-4:var(--danger-bg);
  --danger-6:var(--danger-bg);
  --danger-8:var(--danger-bg);
  --danger-10:var(--danger-bg);
  --danger-12:var(--danger-bg);
  --danger-15:rgba(229,72,77,.15);
  --danger-18:rgba(229,72,77,.18);
  --danger-30:rgba(229,72,77,.30);

  /* Success alpha */
  --success-12:var(--success-bg);
  --green-10:var(--success-bg);
  --green-12:var(--success-bg);
  --green-8-light:var(--success-bg);
  --emerald-8:var(--success-bg);

  /* Hue alpha tokens (legacy — kept for back-compat with feature CSS) */
  --amber-10:rgba(251,191,36,.10);
  --amber-12:rgba(251,191,36,.12);
  --amber-15:rgba(251,191,36,.15);
  --amber-light-8:rgba(217,119,6,.08);
  --amber-light-15:rgba(217,119,6,.15);
  --yellow-10:rgba(245,158,11,.10);
  --yellow-12:rgba(245,158,11,.12);
  --yellow-tag-12:rgba(250,204,21,.12);
  --yellow-tag-25:rgba(250,204,21,.25);
  --orange-8:rgba(251,146,60,.08);
  --orange-12:rgba(251,146,60,.12);
  --orange-25:rgba(251,146,60,.25);
  --blue-8:rgba(96,165,250,.08);
  --blue-10:rgba(59,130,246,.10);
  --blue-12:rgba(59,130,246,.12);
  --blue-12b:rgba(96,165,250,.12);
  --indigo-6:rgba(99,102,241,.06);
  --indigo-8:rgba(99,102,241,.08);
  --indigo-10:rgba(99,102,241,.10);
  --indigo-12:rgba(99,102,241,.12);
  --indigo-15:rgba(99,102,241,.15);
  --indigo-40:rgba(99,102,241,.40);
  --indigo-50:rgba(99,102,241,.50);
  --purple-8:rgba(167,139,250,.08);
  --purple-10:rgba(139,92,246,.10);
  --purple-alt-10:rgba(167,139,250,.10);
  --pink-10:rgba(236,72,153,.10);
  --rose-3:rgba(244,63,94,.03);
  --rose-6:rgba(244,63,94,.06);
  --rose-10:rgba(251,113,133,.10);
  --rose-10b:rgba(244,63,94,.10);
  --rose-20:rgba(244,63,94,.20);
  --rose-25:rgba(244,63,94,.25);
  --rose-60:rgba(244,63,94,.60);
  --rose-light-4:rgba(225,29,72,.04);
  --rose-light-15:rgba(225,29,72,.15);
  --rose-light-25:rgba(225,29,72,.25);
  --rose-light-60:rgba(225,29,72,.60);
  --violet-12:rgba(168,130,255,.12);
  --violet-25:rgba(168,130,255,.25);
  --mint-15:rgba(46,213,115,.15);
  --mint-30:rgba(46,213,115,.30);
  --gold-15:rgba(232,176,48,.15);
  --gold-30:rgba(232,176,48,.30);
  --gray-10:rgba(107,114,128,.10);
  --gray-12:rgba(107,114,128,.12);

  /* Misc legacy */
  --input-focus-bg:rgba(14,17,23,.9);
  --r-sm:var(--radius-sm);
}

/* Skip navigation link */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:100001}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;padding:8px 16px;background:var(--brand);color:var(--white);border-radius:var(--radius-sm);font-size:14px;text-decoration:none}

html,body{
  color:var(--text);
  background:var(--bg);
  font-size:var(--fs-base);
  line-height:1.5;
  letter-spacing:-.008em;
}

::-webkit-scrollbar{width:6px;height:6px}

::-webkit-scrollbar-track{background:transparent}

::-webkit-scrollbar-thumb{background:var(--text4);border-radius:var(--radius-xs)}

::-webkit-scrollbar-thumb:hover{background:var(--text3)}

.inbox-desk-row2::-webkit-scrollbar{display:none}

/* Utility classes */
.hidden{display:none!important}
.flex-spacer{flex:1}
.flex-center-gap{display:flex;align-items:center;gap:8px}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{flex:1;display:flex;flex-direction:column}