/* =========================================================================
   Trispark Connect — design tokens
   Emerald brand (distinct from WhatsApp's own green), Plus Jakarta Sans,
   data-dense dashboard rhythm on a 4px grid. Light + dark themes.
   ========================================================================= */
:root {
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #F5F7F6;
  --surface: #FFFFFF;
  --surface-2: #F0F4F2;
  --surface-3: #E6ECE9;
  --border: #DFE6E2;
  --border-strong: #C9D3CE;
  --text: #0E1914;
  --text-muted: #55635C;
  --text-faint: #7A8780;

  --primary: #047857;
  --primary-hover: #065F46;
  --primary-soft: #E3F4EC;
  --primary-soft-text: #065F46;
  --on-primary: #FFFFFF;
  --ring: #059669;
  --brand-mark: #047857;

  --info: #1D4ED8;      --info-soft: #E6EEFE;
  --warning: #A15C07;   --warning-soft: #FDF2DC;
  --danger: #C81E1E;    --danger-soft: #FDE8E8;
  --success: #047857;   --success-soft: #E3F4EC;
  --violet: #6D28D9;    --violet-soft: #F0EAFE;
  --neutral: #55635C;   --neutral-soft: #EDF1EF;

  --sidebar-bg: #0B1D16;
  --sidebar-text: #B9CCC2;
  --sidebar-text-strong: #FFFFFF;
  --sidebar-hover: #12302A;
  --sidebar-active: #134034;
  --sidebar-border: #1B3A30;

  --chat-bg: #EFEAE2;
  --chat-pattern: rgba(11, 29, 22, .035);
  --bubble-in: #FFFFFF;
  --bubble-out: #D9FDD3;
  --bubble-text: #111B21;
  --bubble-meta: #667781;
  --tick-read: #1D8CE0;

  --shadow-sm: 0 1px 2px rgba(14, 25, 20, .06);
  --shadow-md: 0 4px 12px rgba(14, 25, 20, .08), 0 1px 3px rgba(14, 25, 20, .06);
  --shadow-lg: 0 20px 40px rgba(14, 25, 20, .16), 0 4px 12px rgba(14, 25, 20, .08);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --sidebar-w: 248px;
  --topbar-h: 60px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  --z-sticky: 10; --z-dropdown: 40; --z-sidebar: 50; --z-modal: 100; --z-toast: 1000;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A100D; --surface: #111A16; --surface-2: #16211C; --surface-3: #1D2A24;
    --border: #23332B; --border-strong: #31463C;
    --text: #E8F0EC; --text-muted: #A3B3AB; --text-faint: #7F9088;
    --primary: #10B981; --primary-hover: #34D399; --primary-soft: #0F2E23; --primary-soft-text: #6EE7B7;
    --on-primary: #04130D; --ring: #34D399; --brand-mark: #059669;
    --info: #7DA7FF; --info-soft: #172442; --warning: #F2B347; --warning-soft: #33250C;
    --danger: #F87171; --danger-soft: #3A1616; --success: #34D399; --success-soft: #0F2E23;
    --violet: #B69CFF; --violet-soft: #251B40; --neutral: #A3B3AB; --neutral-soft: #1D2A24;
    --sidebar-bg: #07100C; --sidebar-hover: #10211A; --sidebar-active: #123227; --sidebar-border: #16271F;
    --chat-bg: #0D1612; --chat-pattern: rgba(255, 255, 255, .025);
    --bubble-in: #1D2A24; --bubble-out: #144D37; --bubble-text: #E8F0EC; --bubble-meta: #9FB2A9; --tick-read: #53BDEB;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A100D; --surface: #111A16; --surface-2: #16211C; --surface-3: #1D2A24;
  --border: #23332B; --border-strong: #31463C;
  --text: #E8F0EC; --text-muted: #A3B3AB; --text-faint: #7F9088;
  --primary: #10B981; --primary-hover: #34D399; --primary-soft: #0F2E23; --primary-soft-text: #6EE7B7;
  --on-primary: #04130D; --ring: #34D399; --brand-mark: #059669;
  --info: #7DA7FF; --info-soft: #172442; --warning: #F2B347; --warning-soft: #33250C;
  --danger: #F87171; --danger-soft: #3A1616; --success: #34D399; --success-soft: #0F2E23;
  --violet: #B69CFF; --violet-soft: #251B40; --neutral: #A3B3AB; --neutral-soft: #1D2A24;
  --sidebar-bg: #07100C; --sidebar-hover: #10211A; --sidebar-active: #123227; --sidebar-border: #16271F;
  --chat-bg: #0D1612; --chat-pattern: rgba(255, 255, 255, .025);
  --bubble-in: #1D2A24; --bubble-out: #144D37; --bubble-text: #E8F0EC; --bubble-meta: #9FB2A9; --tick-read: #53BDEB;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ============================== Base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: 12px; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
kbd { font-family: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; color: var(--text-muted); background: var(--surface); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--primary-soft); }

.icon { width: 18px; height: 18px; flex: none; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success); }
.tnum { font-variant-numeric: tabular-nums; }
.ml-auto { margin-left: auto; }
.relative { position: relative; }
.nowrap { white-space: nowrap; }
.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: 12px; top: -40px; z-index: var(--z-toast); background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.hidden, [hidden] { display: none !important; }

/* ============================== Shell ============================== */
.app-shell { display: flex; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100dvh; width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 12px;
  background: var(--sidebar-bg); color: var(--sidebar-text); overflow-y: auto;
  border-right: 1px solid var(--sidebar-border);
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; color: var(--text); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.sidebar .brand { color: var(--sidebar-text-strong); }
.logo-mark { width: 30px; height: 30px; }
.icon-btn.sidebar-close { display: none; color: var(--sidebar-text); }

.workspace-switch {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--radius); background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border); color: var(--sidebar-text-strong);
  transition: background var(--dur-fast);
}
.workspace-switch:hover { background: var(--sidebar-active); }
.ws-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ws-text strong { font-size: 13px; font-weight: 600; }
.ws-text small { color: var(--sidebar-text); font-size: 11.5px; }
.ws-caret { width: 16px; height: 16px; color: var(--sidebar-text); }
.sidebar .dropdown { left: 12px; right: 12px; top: 106px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7E968A; padding: 14px 10px 6px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px;
  border-radius: var(--radius-sm); color: var(--sidebar-text); font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; }
.nav-link.is-active { background: var(--sidebar-active); color: var(--sidebar-text-strong); box-shadow: inset 3px 0 0 #34D399; }
.nav-link .icon { width: 18px; height: 18px; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: #10B981; color: #04130D; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.sidebar-foot { margin-top: auto; padding-top: 8px; }
.health-card { padding: 12px; border-radius: var(--radius); background: var(--sidebar-hover); border: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.health-card .muted { color: var(--sidebar-text); }
.health-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.health-row strong { color: var(--sidebar-text-strong); font-weight: 600; }
.meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.sidebar .meter { background: var(--sidebar-border); }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.sidebar .meter > span { background: #34D399; }
.sidebar-scrim { display: none; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.icon-btn.menu-btn { display: none; }
.topbar-search {
  position: relative; display: flex; align-items: center; gap: 8px; flex: 1; max-width: 460px;
  height: 38px; padding: 0 10px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid transparent;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.topbar-search:focus-within { border-color: var(--ring); background: var(--surface); }
.topbar-search .icon { color: var(--text-faint); width: 17px; height: 17px; }
.topbar-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; }
.topbar-search { min-width: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.user-btn { border: 0; background: none; padding: 2px; border-radius: 50%; }

.main { flex: 1; padding: 24px; width: 100%; max-width: 1440px; margin: 0 auto; }
.main:focus { outline: none; }
.main-flush { padding: 0; max-width: none; }

/* Page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { color: var(--text-muted); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.breadcrumb .icon { width: 14px; height: 14px; }
.breadcrumb a { color: var(--text-muted); }

/* ============================== Buttons ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn .icon { width: 16px; height: 16px; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-soft { background: var(--primary-soft); border-color: transparent; color: var(--primary-soft-text); }
.btn-soft:hover { background: color-mix(in srgb, var(--primary-soft) 70%, var(--primary) 12%); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-ghost { color: var(--danger); border-color: transparent; background: transparent; }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn-lg { min-height: 46px; padding: 10px 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.has-dot::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-moon { display: none; }
  :root:not([data-theme="light"]) .theme-sun { display: block; }
}

/* ============================== Cards ============================== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-head p { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.card-body { padding: 18px; }
.card-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-link { color: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.card-link:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.grid-side-main { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }

/* KPI */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-soft-text); }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.delta .icon { width: 14px; height: 14px; }
.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }

/* ============================== Badges, chips, avatars ============================== */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-violet { background: var(--violet-soft); color: var(--violet); }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral); }

.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
.chip .icon { width: 12px; height: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.var-chip { display: inline-block; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); font-weight: 600; font-size: .92em; }

.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.avatar-sm { width: 30px; height: 30px; font-size: 11.5px; border-radius: 8px; }
.avatar-xs { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.avatar-t1 { background: #D1FAE5; color: #065F46; } .avatar-t2 { background: #DBEAFE; color: #1E40AF; }
.avatar-t3 { background: #FDE68A; color: #854D0E; } .avatar-t4 { background: #FCE7F3; color: #9D174D; }
.avatar-t5 { background: #E9D5FF; color: #6B21A8; } .avatar-t6 { background: #FFEDD5; color: #9A3412; }
.presence { position: relative; }
.presence::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 2px var(--surface); }
.presence.online::after { background: #10B981; }

/* ============================== Forms ============================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 13px; font-weight: 600; }
.label .req { color: var(--danger); margin-left: 2px; }
.help { font-size: 12.5px; color: var(--text-muted); }
.error-text { font-size: 12.5px; color: var(--danger); display: flex; gap: 4px; align-items: center; }
.input, .select, .textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8780' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.input-icon .input { padding-left: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: span 2; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--border-strong); position: relative; transition: background var(--dur); flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out); }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ring); outline-offset: 2px; }

.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.segmented button, .segmented a { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); min-height: 30px; display: inline-flex; align-items: center; gap: 6px; }
.segmented .is-active, .segmented [aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented .icon { width: 15px; height: 15px; }

.radio-cards { display: grid; gap: 10px; }
.radio-card { position: relative; display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.radio-card:hover { background: var(--surface-2); }
.radio-card input { margin-top: 3px; accent-color: var(--primary); width: 16px; height: 16px; }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.radio-card strong { display: block; font-weight: 600; }
.radio-card span { font-size: 13px; color: var(--text-muted); }

/* ============================== Tables ============================== */
.table-wrap { overflow-x: auto; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .w-check { width: 44px; }
.cell-user { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cell-user strong { display: block; font-weight: 600; }
.cell-user small { color: var(--text-muted); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.th-sort .icon { width: 13px; height: 13px; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.toolbar .input-icon { flex: 1; min-width: 200px; max-width: 360px; }
.bulk-bar { display: none; align-items: center; gap: 8px; padding: 10px 14px; background: var(--primary-soft); color: var(--primary-soft-text); border-bottom: 1px solid var(--border); font-weight: 600; flex-wrap: wrap; }
.bulk-bar.is-visible { display: flex; }
.pagination { display: flex; align-items: center; gap: 4px; }

.progress-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.progress-cell .meter { flex: 1; }

/* ============================== Tabs ============================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 44px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.tab .icon { width: 16px; height: 16px; }
.tab-count { font-size: 11.5px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); }

/* ============================== Dropdown / modal / toast ============================== */
.dropdown {
  position: absolute; z-index: var(--z-dropdown); min-width: 220px; padding: 6px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.dropdown.is-open { opacity: 1; visibility: visible; transform: none; }
.dropdown-right { right: 0; top: calc(100% + 6px); }
.dropdown-wide { width: 340px; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 36px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; font-size: 13.5px; border: 0; background: none; width: 100%; text-align: left; }
.dropdown-item:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-item .icon { width: 16px; height: 16px; color: var(--text-muted); }
.dropdown-item.is-current { background: var(--primary-soft); }
.dropdown-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 8px 10px 6px; }
.dropdown-sep { height: 1px; background: var(--border); margin: 6px 0; }
.dropdown-user { display: flex; flex-direction: column; padding: 8px 10px; }
.notif-item { display: flex; gap: 10px; padding: 10px; border-radius: var(--radius-sm); font-size: 13px; }
.notif-item:hover { background: var(--surface-2); }
.notif-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.notif-icon .icon { width: 16px; height: 16px; }
.tone-success { background: var(--success-soft); color: var(--success); }
.tone-danger { background: var(--danger-soft); color: var(--danger); }
.tone-info { background: var(--info-soft); color: var(--info); }
.tone-warning { background: var(--warning-soft); color: var(--warning); }
.tone-violet { background: var(--violet-soft); color: var(--violet); }
.tone-neutral { background: var(--neutral-soft); color: var(--neutral); }

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal-scrim { position: absolute; inset: 0; background: rgba(5, 12, 9, .55); opacity: 0; transition: opacity var(--dur); }
.modal.is-open .modal-scrim { opacity: 1; }
.modal-dialog { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.modal.is-open .modal-dialog { opacity: 1; transform: none; }
.modal-lg .modal-dialog { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }

.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 12px 14px; border-radius: var(--radius); background: #0E1914; color: #F0F7F3; box-shadow: var(--shadow-lg); font-weight: 500; font-size: 13.5px; animation: toast-in var(--dur) var(--ease-out); }
.toast .icon { color: #34D399; }
.toast.is-leaving { animation: toast-out 140ms ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ============================== Misc components ============================== */
.alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid; font-size: 13.5px; align-items: flex-start; }
.alert .icon { margin-top: 1px; }
.alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--text); }
.alert-info > .icon { color: var(--info); }
.alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert-warning > .icon { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-danger > .icon { color: var(--danger); }
.alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-success > .icon { color: var(--success); }

.empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-soft-text); margin-bottom: 6px; }
.empty-icon .icon { width: 24px; height: 24px; }

.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow strong { display: block; font-weight: 600; }

.stat-inline { display: flex; flex-direction: column; gap: 2px; }
.stat-inline strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.stat-inline span { font-size: 12.5px; color: var(--text-muted); }

.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 200px; }

.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 12px; align-items: center; font-size: 13px; }
.funnel-bar { height: 28px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.funnel-bar span { display: flex; align-items: center; height: 100%; padding-left: 10px; color: #fff; font-weight: 600; font-size: 12px; background: var(--primary); border-radius: 6px; min-width: max-content; padding-right: 8px; white-space: nowrap; }
.funnel-row:nth-child(2) .funnel-bar span { background: #0F766E; }
.funnel-row:nth-child(3) .funnel-bar span { background: #1D4ED8; }
.funnel-row:nth-child(4) .funnel-bar span { background: #7C3AED; }
.funnel-row:nth-child(5) .funnel-bar span { background: #C2410C; }

.steps { display: flex; gap: 0; counter-reset: step; }
.step { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); position: relative; }
.step:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--border); margin: 0 12px; border-radius: 2px; }
.step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-strong); background: var(--surface); font-size: 12.5px; flex: none; }
.step-num .icon { width: 14px; height: 14px; }
.step.is-current { color: var(--text); }
.step.is-current .step-num { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.step.is-done .step-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.step.is-done:not(:last-child)::after { background: var(--primary); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.copy-field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.copy-field code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }

/* ============================== WhatsApp-style chat UI ============================== */
.chat-surface {
  background-color: var(--chat-bg);
  background-image: radial-gradient(var(--chat-pattern) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.bubble { position: relative; max-width: min(78%, 420px); padding: 7px 9px 6px; border-radius: 9px; font-size: 14px; line-height: 1.45; color: var(--bubble-text); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.bubble p { white-space: pre-line; }
.bubble-in { background: var(--bubble-in); align-self: flex-start; border-top-left-radius: 2px; }
.bubble-out { background: var(--bubble-out); align-self: flex-end; border-top-right-radius: 2px; }
.bubble-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 11px; color: var(--bubble-meta); margin-top: 2px; }
.bubble-meta .icon { width: 15px; height: 15px; }
.tick-read { color: var(--tick-read); }
.bubble-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--bubble-meta); margin-bottom: 3px; }
.bubble-tag .icon { width: 12px; height: 12px; }
.bubble p.bubble-btn-reply { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.bubble-btn-reply .icon { width: 15px; height: 15px; color: var(--bubble-meta); }
.bubble-buttons { display: flex; flex-direction: column; margin: 6px -9px -6px; border-top: 1px solid rgba(11, 20, 26, .1); }
.bubble-buttons span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; color: #027EB5; font-weight: 600; font-size: 13.5px; }
:root[data-theme="dark"] .bubble-buttons span { color: #53BDEB; }
.bubble-buttons span + span { border-top: 1px solid rgba(11, 20, 26, .1); }
.bubble-buttons .icon { width: 15px; height: 15px; }
.bubble-media { height: 140px; margin: -3px -5px 6px; border-radius: 6px; background: linear-gradient(135deg, #1FB0F7, #1146D4 55%, #0F7F52); display: grid; place-items: center; color: rgba(255, 255, 255, .85); }
.bubble-media .icon { width: 34px; height: 34px; }
.bubble-header-text { font-weight: 700; margin-bottom: 2px; }
.bubble-footer { font-size: 12.5px; color: var(--bubble-meta); margin-top: 4px; }
.day-sep { align-self: center; font-size: 12px; padding: 4px 10px; border-radius: 8px; background: var(--surface); color: var(--text-muted); box-shadow: var(--shadow-sm); }
.system-note { align-self: center; font-size: 12px; padding: 5px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warning-soft) 85%, transparent); color: var(--text); display: inline-flex; gap: 6px; align-items: center; text-align: center; }
.system-note .icon { width: 14px; height: 14px; color: var(--warning); }

/* Phone preview frame */
.phone { width: 300px; max-width: 100%; margin: 0 auto; border-radius: 34px; padding: 10px; background: #0E1914; box-shadow: var(--shadow-lg); }
.phone-screen { border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; height: 560px; }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 12px; background: #075E54; color: #fff; }
:root[data-theme="dark"] .phone-bar { background: #1F2C33; }
.phone-bar .avatar { width: 32px; height: 32px; }
.phone-bar strong { display: block; font-size: 13.5px; }
.phone-bar small { opacity: .8; font-size: 11px; }
.phone-chat { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.phone-chat .bubble { max-width: 88%; font-size: 13px; }
.phone-input { display: flex; gap: 6px; padding: 8px; background: var(--surface-2); }
.phone-input span { flex: 1; height: 34px; border-radius: 17px; background: var(--surface); }
.phone-input i { width: 34px; height: 34px; border-radius: 50%; background: #00A884; }

/* ============================== Inbox ============================== */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; height: calc(100dvh - var(--topbar-h)); }
.inbox-list { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.inbox-list-head { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border); }
.inbox-items { overflow-y: auto; flex: 1; }
.convo { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; width: 100%; text-align: left; border-left: 3px solid transparent; background: none; border-top: 0; border-right: 0; transition: background var(--dur-fast); }
.convo:hover { background: var(--surface-2); }
.convo.is-active { background: var(--primary-soft); border-left-color: var(--primary); }
.convo-main { flex: 1; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; gap: 8px; }
.convo-top strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-top time { font-size: 11.5px; color: var(--text-faint); flex: none; }
.convo-preview { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.convo-preview span { color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-preview span.unread { color: var(--on-primary); overflow: visible; }
.segmented-fill { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented-fill::-webkit-scrollbar { display: none; }
.segmented-fill > * { flex-shrink: 0; }
.segmented-fill > * { flex: 1; justify-content: center; padding-left: 6px; padding-right: 6px; }
.unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.convo-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; min-width: 0; }
.convo-meta .sla-chip { white-space: nowrap; }

.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); min-height: 62px; }
.chat-head .grow strong { display: block; font-weight: 600; }
.chat-head .grow { min-width: 80px; }
.chat-head .grow strong, .chat-head .grow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A narrow chat column (sidebar + contact pane open) keeps the name readable: the window/SLA chips step aside. */
.chat-pane { container-type: inline-size; }
@container (max-width: 560px) { #chat-window, #chat-sla { display: none; } }
.chat-head .grow small { display: block; color: var(--text-muted); }
.chat-body { flex: 1; overflow-y: auto; padding: 18px 6%; display: flex; flex-direction: column; gap: 8px; }
.composer { background: var(--surface); border-top: 1px solid var(--border); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.composer-tabs { display: flex; gap: 4px; }
.composer-tabs button { border: 0; background: none; padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: 12.5px; color: var(--text-muted); min-height: 28px; }
.composer-tabs button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-soft-text); }
.composer-tabs button[data-mode="note"][aria-pressed="true"] { background: var(--warning-soft); color: var(--warning); }
.composer-row { display: flex; align-items: flex-end; gap: 6px; }
.composer textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); outline: none; }
.composer textarea:focus { border-color: var(--ring); }
.composer.is-note textarea { background: var(--warning-soft); }
.window-closed { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--warning-soft); font-size: 13px; }
.window-closed .icon { color: var(--warning); }
.note-bubble { align-self: flex-end; max-width: min(78%, 420px); padding: 8px 10px; border-radius: 9px; background: var(--warning-soft); border: 1px dashed color-mix(in srgb, var(--warning) 50%, transparent); font-size: 13.5px; }
.note-bubble small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.mention { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-soft-text); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention.is-me { background: var(--primary); color: #fff; }
.presence-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12.5px; background: var(--info-soft); color: var(--info); border-bottom: 1px solid var(--border); }
.presence-bar[hidden] { display: none; }
.presence-bar.is-typing { background: var(--warning-soft); color: var(--warning); }
.presence-bar .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--surface); }
.presence-bar .avatar:last-of-type { margin-right: 2px; }
.typing-dots { display: inline-flex; gap: 2px; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: typing-dot 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: .7; } }
.composer { position: relative; }
.mention-picker { left: 14px; bottom: calc(100% - 6px); top: auto; width: 260px; max-height: 240px; overflow-y: auto; }
.mention-picker .dropdown-item[aria-selected="true"] { background: var(--primary-soft); }
.snooze-custom { display: flex; gap: 6px; padding: 4px 6px; }
.snooze-custom .input { flex: 1; min-width: 0; }
#snooze-menu { width: 260px; }
#snooze-btn.is-on { color: var(--warning); background: var(--warning-soft); }
.chip-snooze { background: var(--warning-soft); color: var(--warning); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.blocked-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: 13px; }

.contact-pane { border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; }
.contact-pane-head { text-align: center; padding: 20px 16px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pane-section { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.pane-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.icon-btn.back-btn { display: none; }

/* ---------- Commerce: catalog and carts ---------- */
.product-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); display: inline-grid; place-items: center; flex: none; color: var(--text-faint); }
.modal-dialog.modal-wide { width: min(920px, 100%); }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cart-results, .cart-lines { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.cart-product { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.cart-product .grow { min-width: 0; }
.cart-product strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-product small { color: var(--text-muted); font-size: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qty button { border: 0; background: none; width: 30px; height: 30px; font-size: 16px; color: var(--text); cursor: pointer; }
.qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.cart-totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 13.5px; }
.cart-totals dt { color: var(--text-muted); }
.cart-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cart-totals .grand { font-weight: 700; color: var(--text); font-size: 15px; }
.cart-modes { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cart-history { border-top: 1px solid var(--border); padding-top: 10px; font-size: 13px; display: grid; gap: 6px; }
.cart-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13.5px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
@media (max-width: 768px) { .cart-grid { grid-template-columns: minmax(0, 1fr); } .cart-results { max-height: 220px; } }

/* ---------- Phase 5: A/B, send time, languages ---------- */
.ab-box { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px; }
.row-winner td { background: color-mix(in srgb, var(--success) 7%, transparent); }
.chip-add { cursor: pointer; border-style: dashed; background: transparent; }
.hour-chart { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 2px; height: 90px; padding-top: 4px; }
.hour-chart span { display: block; background: var(--primary); border-radius: 2px 2px 0 0; opacity: .85; min-height: 2px; }

/* ---------- Reviews & journey library ---------- */
.review-stars { color: #f5a524; letter-spacing: 1px; font-size: 14px; }
.review-stars .faint { color: var(--border-strong); }
.review-item { align-items: flex-start; }
.recipe { min-height: 210px; }
.recipe strong { font-size: 15px; }

/* ---------- Mobile app (PWA) ---------- */
.tabbar { display: none; }
@media (max-width: 768px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sidebar) - 2);
    background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; background: none; color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
  .tabbar-link.is-active { color: var(--primary); }
  .tabbar-link:hover { text-decoration: none; }
  .tabbar-icon { position: relative; display: inline-grid; }
  .tabbar-icon .icon { width: 22px; height: 22px; }
  .tabbar-count { position: absolute; top: -5px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
  .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .main.main-flush { padding: 0; }
  .chat-head { gap: 8px; padding: 8px 10px; }
  .chat-head .grow { min-width: 0; }
  .chat-head .grow strong, .chat-head .grow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head [data-dropdown="assign-menu"] #chat-agent, .chat-head [data-dropdown="assign-menu"] > .icon:last-child { display: none; }
  .inbox { height: calc(100dvh - var(--topbar-h) - 56px - env(safe-area-inset-bottom)); }
  /* An open chat gets the whole screen: the composer sits where the tab bar was. */
  body:has(.inbox.show-chat) .tabbar { display: none; }
  body:has(.inbox.show-chat) .inbox { height: calc(100dvh - var(--topbar-h)); }
  .composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; } /* stops iOS zooming into the field */
}
.list-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); display: inline-grid; place-items: center; flex: none; }
.list-icon .icon { width: 18px; height: 18px; }
@media (display-mode: standalone) {
  /* Installed app: leave room for the phone's status bar / notch. */
  :root { --topbar-h: calc(60px + env(safe-area-inset-top)); }
  html .topbar { padding-top: env(safe-area-inset-top); } /* beats the mobile padding shorthand later in the file */
  .topbar .btn-primary { display: none; }
}

/* ---------- Channels ---------- */
.chip-ig { color: #c13584; border-color: color-mix(in srgb, #c13584 30%, var(--border)); background: color-mix(in srgb, #c13584 8%, var(--surface)); }
.select-sm { height: 32px; padding: 0 28px 0 10px; font-size: 13px; width: auto; }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* ---------- AI copilot ---------- */
.dropdown-up { right: 0; bottom: calc(100% + 6px); top: auto; transform-origin: bottom; transform: translateY(4px) scale(.98); }
.dropdown-up.is-open { transform: none; }
.dropdown-note { font-size: 12.5px; color: var(--text-muted); padding: 2px 10px 8px; max-width: 260px; line-height: 1.45; }
.ai-trigger { color: var(--ai, #7c3aed); }
.ai-panel { border: 1px solid color-mix(in srgb, var(--ai, #7c3aed) 28%, var(--border)); background: color-mix(in srgb, var(--ai, #7c3aed) 5%, var(--surface)); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; animation: fade-up .2s ease-out; }
.ai-panel[hidden] { display: none; }
.ai-panel-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ai-panel-head > .icon { color: var(--ai, #7c3aed); width: 16px; height: 16px; }
.ai-panel-head strong { flex: 1; font-weight: 600; }
.ai-panel-head .icon-btn { width: 28px; height: 28px; min-height: 28px; }
.ai-suggestions { display: grid; gap: 6px; }
.ai-suggestion { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13.5px; line-height: 1.45; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ai-suggestion:hover, .ai-suggestion:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.ai-suggestion small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ai-result { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.ai-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; font-size: 13px; margin: 0; }
.ai-kv dt { color: var(--text-muted); font-weight: 600; }
.ai-kv dd { margin: 0; }
.ai-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ai-error { color: var(--danger); font-size: 13px; }
.ai-loading { display: grid; gap: 6px; }
.ai-loading span:not(.sr-only) { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--ai, #7c3aed) 14%, var(--surface-2)), var(--surface-2)); background-size: 200% 100%; animation: ai-shimmer 1.2s linear infinite; }
.ai-loading span:nth-child(3) { width: 60%; }
@keyframes ai-shimmer { to { background-position: -200% 0; } }
.kpi-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi-mini-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kpi-mini-grid strong { font-size: 18px; }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; color: var(--text-muted); }
.list-check li { padding-left: 20px; position: relative; line-height: 1.45; }
.list-check li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .ai-panel, .ai-loading span { animation: none !important; } }

/* ============================== Templates ============================== */
.tpl-card { display: flex; flex-direction: column; }
.tpl-card .tpl-preview { padding: 14px; height: 190px; overflow: hidden; position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tpl-card .dropdown { min-width: 200px; }
.tpl-card .tpl-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--chat-bg)); }
.tpl-card .bubble { max-width: 100%; font-size: 12.5px; }
.tpl-card-body { padding: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tpl-name { font-weight: 600; font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.builder-preview { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 12px; }
.format-bar { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-2); }
.format-bar + .textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.format-bar button { min-width: 32px; height: 30px; border: 0; background: none; border-radius: 5px; font-weight: 700; color: var(--text-muted); }
.format-bar button:hover { background: var(--surface); color: var(--text); }
.counter { font-size: 12px; color: var(--text-faint); text-align: right; }
.btn-list { display: flex; flex-direction: column; gap: 8px; }
.btn-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: center; }

/* ============================== Flow builder ============================== */
.flow-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; height: calc(100dvh - var(--topbar-h) - 120px); min-height: 560px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.flow-palette { border-right: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 13px; cursor: grab; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); text-align: left; width: 100%; }
.palette-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.palette-item .node-ic { width: 28px; height: 28px; }
.flow-canvas { position: relative; overflow: auto; background-color: var(--surface-2); background-image: radial-gradient(var(--border-strong) 1px, transparent 1px); background-size: 20px 20px; }
.flow-inner { position: relative; width: 1100px; height: 760px; }
.flow-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.flow-edges path { fill: none; stroke: var(--text-faint); stroke-width: 2; }
.flow-node { position: absolute; width: 230px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); cursor: pointer; text-align: left; padding: 0; transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.flow-node:hover { border-color: var(--primary); }
.flow-node.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-md); }
.node-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.node-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.node-ic .icon { width: 15px; height: 15px; }
.node-body { padding: 10px; font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.node-opt { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text); font-weight: 500; }
.node-opt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.flow-props { border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.flow-zoom { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; box-shadow: var(--shadow-sm); }

/* ============================== Automations / integrations ============================== */
.auto-item { display: grid; grid-template-columns: minmax(0, 1fr) 160px 110px auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.auto-item:last-child { border-bottom: 0; }
.auto-item strong { font-weight: 600; display: block; }
.integration { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.integration-logo { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--primary); }
.integration-logo .icon { width: 22px; height: 22px; }

/* ============================== Plan gates, usage, upsells ============================== */
.lock-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent); background: var(--violet-soft); color: var(--violet);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: pointer; vertical-align: middle;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.lock-chip:hover { background: color-mix(in srgb, var(--violet-soft) 70%, var(--violet) 15%); }
.lock-chip .icon { width: 12px; height: 12px; }
.gated-wrap { position: relative; }
.gated-wrap.is-locked { cursor: pointer; }
.gated-wrap.is-locked > .lock-chip { position: absolute; top: 10px; right: 10px; z-index: 2; }
.gated-wrap.is-locked > .gated-inner { opacity: .45; filter: saturate(.6); pointer-events: none; user-select: none; }
.gated-wrap.is-locked:hover > .gated-inner { opacity: .55; }
.nav-link .lock-chip { margin-left: auto; height: 18px; font-size: 10.5px; padding: 0 6px 0 5px; }
.tab .lock-chip, .segmented .lock-chip, .switch .lock-chip, label .lock-chip { margin-left: 4px; }

.usage { display: flex; flex-direction: column; gap: 6px; }
.usage-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.usage-top span { color: var(--text-muted); }
.usage-warning .meter > span { background: var(--warning); }
.usage-danger .meter > span { background: var(--danger); }
.usage-neutral .meter > span { background: var(--border-strong); }
.usage-compact { gap: 4px; }
.usage-compact .usage-top { font-size: 12.5px; }
.usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.cost-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cost-box { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.cost-box small { display: block; color: var(--text-muted); font-size: 12px; }
.cost-box strong { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cost-box.is-meta { border-style: dashed; }

.upsell-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: linear-gradient(90deg, var(--violet-soft), var(--primary-soft)); border: 1px solid color-mix(in srgb, var(--violet) 25%, transparent); }
.upsell-banner .icon { color: var(--violet); }

.addon-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.addon-head { display: flex; align-items: center; gap: 10px; }
.addon-head .notif-icon { width: 36px; height: 36px; }
.addon-head h3 { font-size: 15px; }
.addon-price { font-weight: 700; margin-left: auto; white-space: nowrap; }
.addon-price small { font-weight: 500; color: var(--text-muted); }
.addon-proof { padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.addon-proof small { display: block; color: var(--text-muted); font-size: 12px; }
.addon-proof strong { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.addon-proof em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.addon-card.is-on { border-color: var(--primary); }

.plan-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.plan-mini { padding: 16px 14px; gap: 10px; }
.plan-mini.is-highlight { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), var(--shadow-md); }
.plan-mini h3 { font-size: 15px; }
.plan-mini .plan-price { font-size: 22px; }
.plan-mini ul { font-size: 12.5px; gap: 6px; }
.modal-xl .modal-dialog { width: min(1180px, 100%); }

.referral-code { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--primary-soft); border: 1px dashed var(--primary); }
.referral-code code { font-size: 20px; font-weight: 700; letter-spacing: .08em; color: var(--primary-soft-text); flex: 1; }
.referral-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1024px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cost-split, .referral-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .plan-grid, .usage-grid, .cost-split, .referral-stats { grid-template-columns: minmax(0, 1fr); } }

/* Plans */
.plan { padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
.plan-price { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.plan-price small { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.plan li { display: flex; gap: 8px; }
.plan li .icon { width: 16px; height: 16px; color: var(--primary); margin-top: 2px; }
.plan-flag { position: absolute; top: -11px; left: 20px; }

/* Onboarding */
.focus-body { background: var(--bg); }
.focus-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.focus-main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.focus-main:focus { outline: none; }
.onb { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.onb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 24px; }
.onb-steps button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius); border: 0; background: none; color: var(--text-muted); }
.onb-steps button:hover { background: var(--surface-2); }
.onb-steps .is-current button { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.onb-steps .step-num { margin-top: 1px; }
.onb-steps .is-done .step-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.onb-steps .is-current .step-num { border-color: var(--primary); color: var(--primary); }
.onb-steps strong { display: block; font-weight: 600; font-size: 13.5px; }
.onb-steps small { font-size: 12px; }
.onb-panel { display: none; }
.onb-panel.is-active { display: block; animation: fade-up var(--dur) var(--ease-out); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
.instructions { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.instructions li::marker { color: var(--primary); font-weight: 700; }
.shot { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.shot-bar { display: flex; gap: 5px; }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.shot-line { height: 9px; border-radius: 4px; background: var(--surface-3); }
.shot-hl { padding: 8px 10px; border-radius: 6px; border: 2px dashed var(--primary); background: var(--primary-soft); color: var(--primary-soft-text); font-weight: 600; }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: center; }
.check-list .icon { width: 18px; height: 18px; }
.check-list .ok { color: var(--success); }
.check-list .wait { color: var(--text-faint); }

/* Auth */
.auth-body { background: var(--surface); }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }
.auth-panel { display: flex; flex-direction: column; padding: 28px 40px; }
.auth-form-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin: 0 auto; padding: 32px 0; }
.auth-legal { font-size: 12.5px; text-align: center; }
.auth-showcase { background: radial-gradient(120% 90% at 100% 0%, #1FB0F7 0%, #1146D4 38%, #0A1638 100%); color: #ECFDF5; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; overflow: hidden; }
.showcase-inner { max-width: 460px; display: flex; flex-direction: column; gap: 22px; position: relative; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #A7F3D0; }
.auth-showcase h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.02em; }
.showcase-stats { display: flex; gap: 28px; }
.showcase-stats strong { display: block; font-size: 24px; }
.showcase-stats span { font-size: 13px; color: #A7F3D0; }
.showcase-chat { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(8px); }
.showcase-chat .bubble { --bubble-text: #111B21; --bubble-meta: #667781; }
.showcase-chat .bubble-out { background: #D9FDD3; }
.showcase-chat .bubble-in { background: #fff; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-wrap .icon-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

/* QR */
.qr-box { width: 200px; height: 200px; padding: 12px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); margin: 0 auto; }
.qr-box svg { width: 100%; height: 100%; }
.widget-demo { position: relative; height: 320px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(var(--surface-2), var(--surface)); overflow: hidden; }
.widget-demo .fake-line { height: 10px; border-radius: 5px; background: var(--surface-3); margin: 14px 18px 0; }
.wa-fab { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-pill); background: #128C7E; color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); border: 0; }
.wa-fab .icon { width: 20px; height: 20px; }
.wa-fab.left { right: auto; left: 18px; }

/* ============================== Responsive ============================== */
@media (max-width: 1280px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .contact-pane { display: none; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .flow-props { display: none; }
}
@media (max-width: 1024px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: var(--z-sidebar); transform: translateX(-100%); transition: transform var(--dur) var(--ease-out); box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: none; }
  .icon-btn.sidebar-close, .icon-btn.menu-btn { display: inline-grid; }
  .sidebar-scrim.is-open { display: block; position: fixed; inset: 0; background: rgba(5, 12, 9, .5); z-index: calc(var(--z-sidebar) - 1); }
  .grid-main-side, .grid-side-main, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder-preview { position: static; }
  .onb { grid-template-columns: minmax(0, 1fr); }
  .onb-steps { position: static; flex-direction: row; overflow-x: auto; }
  .onb-steps button { white-space: nowrap; }
  .onb-steps small { display: none; }
  .auto-item { grid-template-columns: minmax(0, 1fr) auto; }
  .auto-item .hide-md { display: none; }
}
@media (max-width: 768px) {
  .main { padding: 16px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar-search kbd { display: none; }
  .hide-sm { display: none !important; }
  .grid-2, .grid-4, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-showcase { display: none; }
  .auth-panel { padding: 20px 16px; }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox .chat-pane { display: none; }
  .inbox.show-chat .inbox-list { display: none; }
  .inbox.show-chat .chat-pane { display: flex; }
  .icon-btn.back-btn { display: inline-grid; }
  .chat-body { padding: 14px 10px; }
  .steps .step-label { display: none; }
  .flow-shell { grid-template-columns: minmax(0, 1fr); }
  .flow-palette { display: none; }
  .btn-row { grid-template-columns: minmax(0, 1fr); }
  .funnel-row { grid-template-columns: 80px 1fr 64px; }
  .focus-main { padding: 20px 16px 48px; }
  .focus-top { padding: 12px 16px; }
  .kpi-value { font-size: 22px; }
}

/* ============================== Motion system ==============================
   Tokens: --dur-fast 120ms (hover/press), --dur 200ms (state), --dur-slow 450ms (reveals).
   Only transform + opacity are animated for layout work; colour transitions are short.
   Everything collapses under prefers-reduced-motion (see bottom of file). */
:root { --dur-slow: 450ms; --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }

/* Reveal on enter / scroll — opacity is only withheld when JS is running (html.js) so
   content never stays hidden if the script fails. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { animation: reveal-up var(--dur-slow) var(--ease-out) forwards; animation-delay: var(--delay, 0ms); }
@keyframes reveal-up { to { opacity: 1; transform: none; } }

/* Tab panels and wizard steps crossfade */
[role=tabpanel]:not([hidden]), .wizard-panel:not(.hidden) { animation: fade-up var(--dur) var(--ease-out); }

/* Meters grow from zero once visible */
.meter > span { transition: width 900ms var(--ease-out); }

/* Interactive polish */
.card-link:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn:active, .icon-btn:active { transform: scale(.97); }
.nav-link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.nav-link:hover .icon { transform: translateX(2px); }
.kpi { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-icon { transition: transform var(--dur) var(--ease-spring); }
.kpi:hover .kpi-icon { transform: scale(1.1) rotate(-6deg); }
.lock-chip:hover { transform: translateY(-1px); }
.switch-track::after { transition: transform var(--dur) var(--ease-spring); }
.addon-card, .integration, .tpl-card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.addon-card:hover, .integration:hover, .tpl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.convo { transition: background var(--dur-fast), transform var(--dur-fast); }
.convo:active { transform: scale(.995); }
.dropdown.is-open .dropdown-item, .dropdown.is-open .notif-item { animation: fade-up var(--dur) var(--ease-out) both; }
.dropdown.is-open .dropdown-item:nth-child(2), .dropdown.is-open .notif-item:nth-child(2) { animation-delay: 30ms; }
.dropdown.is-open .dropdown-item:nth-child(3), .dropdown.is-open .notif-item:nth-child(3) { animation-delay: 60ms; }
.dropdown.is-open .dropdown-item:nth-child(4), .dropdown.is-open .notif-item:nth-child(4) { animation-delay: 90ms; }
.dropdown.is-open .dropdown-item:nth-child(n+5) { animation-delay: 120ms; }
.icon-btn.has-dot::after { animation: dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--surface); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); } }

/* Chat: new bubbles pop in, typing dots */
.bubble.is-new, .note-bubble.is-new { animation: bubble-in 260ms var(--ease-spring); transform-origin: bottom right; }
.bubble-in.is-new { transform-origin: bottom left; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.typing { display: inline-flex; gap: 4px; padding: 10px 12px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bubble-meta); animation: typing 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.tick-read { animation: tick-pop 300ms var(--ease-spring); }
@keyframes tick-pop { from { transform: scale(.6); } }

/* Theme switch: short colour crossfade, only while switching */
html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after { transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, fill 320ms ease !important; }

/* Auth showcase: slow gradient drift + floating chat */
.auth-showcase { background-size: 160% 160%; animation: gradient-drift 18s ease-in-out infinite alternate; }
@keyframes gradient-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.showcase-chat { animation: float 6s ease-in-out infinite; }
.showcase-chat .bubble-in { animation: float 7s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.showcase-stats strong { display: block; }

/* Flow builder edges draw themselves on load */
.flow-edges path { transition: stroke-dashoffset 900ms var(--ease-out); }
.flow-edges path.is-drawn { stroke-dashoffset: 0 !important; }
.flow-node { transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-spring); }
.flow-node.is-selected { transform: scale(1.02); }

/* Empty-state icon breathes */
.empty-icon { animation: float 4s ease-in-out infinite; }

/* Focus ring grows in instead of snapping */
:focus-visible { transition: outline-offset var(--dur-fast); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .meter > span { transition: none; }
  .auth-showcase, .showcase-chat, .showcase-chat .bubble-in, .empty-icon, .icon-btn.has-dot::after { animation: none; }

  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================== SLA & CSAT ============================== */
.sla-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.sla-ok { background: var(--info-soft); color: var(--info); }
.sla-risk { background: var(--warning-soft); color: var(--warning); animation: dot-pulse 1.6s ease-in-out infinite; }
.sla-breached { background: var(--danger-soft); color: var(--danger); }
.sla-met { background: var(--success-soft); color: var(--success); }
.hours-grid { display: grid; grid-template-columns: 90px 1fr 1fr auto; gap: 8px 12px; align-items: center; }
.hours-grid .label { margin: 0; }
.csat-stars { font-size: 20px; letter-spacing: 2px; color: var(--warning); }
@media (max-width: 768px) { .hours-grid { grid-template-columns: 70px 1fr 1fr auto; gap: 6px; } }

/* ---------- Phase 6: ads, forms (Flows), calling, groups ---------- */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: 4px; }
.back-link:hover { color: var(--text); }
.back-link .icon { width: 14px; height: 14px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-btn { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 500; }
.link-like { text-decoration: underline; }
.chip-success { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.toast-error { background: #3B1212; }

.ad-item { align-items: flex-start; }
.ad-thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-soft-text); }
.ad-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-muted); }
.ad-stats strong { color: var(--text); }
.ad-edit { border-top: 1px dashed var(--border); padding-top: 8px; }
.ad-edit > summary { list-style: none; }
.ad-edit > summary::-webkit-details-marker { display: none; }
.ad-edit[open] > summary { margin-bottom: 10px; }

.starter-card { text-decoration: none; color: inherit; transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.starter-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.group-card { text-decoration: none; color: inherit; }
.group-card:hover { border-color: var(--border-strong); }

.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.flow-preview-wrap { position: sticky; top: calc(var(--topbar-h, 56px) + 16px); }
.fb-screen { border-left: 3px solid var(--primary); }
.fb-field { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.flow-phone { background: var(--surface); height: 520px; }
.flow-phone .phone-bar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.flow-pv-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.flow-pv-foot { padding: 10px 14px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flow-pv-foot small { color: var(--text-faint); font-size: 10.5px; }
.flow-pv-btn { width: 100%; text-align: center; padding: 10px; border-radius: var(--radius-pill); background: #00A884; color: #fff; font-weight: 600; font-size: 13px; }
.pv-h { margin: 0; font-size: 17px; }
.pv-p { margin: 0; color: var(--text-muted); white-space: pre-wrap; }
.pv-input { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 8px; }
.pv-area { min-height: 64px; align-items: flex-start; }
.pv-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-group legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.pv-opt { display: flex; align-items: center; gap: 10px; }
.pv-radio, .pv-checkbox { flex: none; width: 18px; height: 18px; border: 2px solid var(--border-strong); }
.pv-radio { border-radius: 50%; }
.pv-checkbox { border-radius: 4px; }

.flow-answers { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; }
.flow-answers dt { color: var(--text-muted); text-transform: capitalize; }
.flow-answers dd { margin: 0; overflow-wrap: anywhere; }
.bubble-call { font-weight: 500; }

.callbar { position: fixed; z-index: var(--z-toast); left: 50%; top: 14px; transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius-lg); background: #0E1914; color: #F0F7F3; box-shadow: var(--shadow-lg); animation: callbar-in var(--dur) var(--ease-out); }
@keyframes callbar-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.callbar-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.callbar-main small { display: block; opacity: .75; font-size: 12px; }
.callbar-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #00A884; font-size: 17px; }
.callbar.is-ringing .callbar-icon { animation: call-pulse 1.2s ease-in-out infinite; }
.callbar-actions { display: flex; gap: 6px; }
@keyframes call-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 132, .6); } 50% { box-shadow: 0 0 0 10px rgba(0, 168, 132, 0); } }

.group-chat { display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
.group-chat .chat-body { flex: 1; max-height: 62vh; overflow-y: auto; }

@media (max-width: 1024px) {
  .flow-layout { grid-template-columns: 1fr; }
  .flow-preview-wrap { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .callbar, .callbar.is-ringing .callbar-icon { animation: none; }
}

/* ---------- Phase 7a: agency, white-label, account security ---------- */
.logo-img { border-radius: 9px; object-fit: cover; background: var(--surface); }
.input-sm { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.input-code { font-variant-numeric: tabular-nums; letter-spacing: .12em; font-size: 18px; }
.btn-google { gap: 10px; background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-google:hover { background: var(--surface-2); }
.disclosure > summary { list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px dashed var(--border-strong); }
.setup-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
.totp-setup { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 10px; }
.qr-box { width: 184px; height: 184px; padding: 8px; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.qr-box img, .qr-box canvas { display: block; width: 168px; height: 168px; }
.audit-filters { padding-top: 0; gap: 8px; }
.domain-item { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.brand-preview { --preview: var(--primary); display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: #0E1914; color: #fff; }
.brand-preview-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--preview); }
.brand-preview .btn-primary { margin-left: auto; background: var(--preview); border-color: var(--preview); color: #fff; pointer-events: none; }
.brand-logo-preview { border-radius: 8px; border: 1px solid var(--border); object-fit: cover; }
input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }

/* ---------- Phase 7b: API reference (/developers) ---------- */
.docs-body { background: var(--bg); color: var(--text); margin: 0; }
.docs { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.docs-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 14px; border-right: 1px solid var(--border); background: var(--surface); }
.docs-nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); text-decoration: none; margin-bottom: 14px; }
.docs-nav nav { display: flex; flex-direction: column; gap: 2px; }
.docs-nav nav a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-size: 13.5px; }
.docs-nav nav a:hover { background: var(--surface-2); color: var(--text); }
.docs-nav-group { margin: 14px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.docs-main { padding: 28px clamp(16px, 4vw, 48px) 80px; max-width: 1280px; }
.docs-main:focus { outline: none; }
.docs-head { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-bottom: 8px; }
.docs-head h1 { margin: 0 0 6px; font-size: 28px; }
.docs-key { position: sticky; top: 12px; z-index: 5; gap: 6px; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.docs-section { max-width: 760px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.docs-section h2, .docs-tag { margin: 0 0 8px; font-size: 20px; }
.docs-tag { margin-top: 36px; }
.docs-section p { line-height: 1.6; }
.docs-sdks { display: grid; gap: 12px; }
.docs-op { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 16px; }
.docs-op h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 16px; }
.docs-op h4 { margin: 16px 0 6px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.docs-table td { padding: 8px 10px 8px 0; border-top: 1px solid var(--border); vertical-align: top; }
.docs-table td:first-child { width: 38%; overflow-wrap: anywhere; }
.req { font-family: var(--font); font-size: 11px; color: var(--danger); }
.docs-responses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.http { display: inline-block; min-width: 54px; padding: 2px 6px; border-radius: 6px; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; color: #fff; }
.http-get { background: #2563eb; } .http-post { background: #047857; } .http-delete { background: #b91c1c; }
.status-2 { color: var(--success); font-weight: 600; } .status-4 { color: var(--warning); font-weight: 600; } .status-5 { color: var(--danger); font-weight: 600; }
.code { margin: 8px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #0E1914; color: #E3F4EC; overflow-x: auto; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.code.small { font-size: 12px; max-height: 360px; }
.docs-op-try { min-width: 0; }
.try { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.try-fields { display: flex; flex-direction: column; gap: 8px; }
.try-body { font-size: 12.5px; }
.try-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.docs-tabs [role="tablist"] { display: flex; gap: 4px; margin-top: 8px; }
.docs-tabs [role="tab"] { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; font: inherit; font-size: 13px; }
.docs-tabs [role="tab"][aria-selected="true"] { background: var(--primary-soft); color: var(--primary-soft-text); border-color: transparent; }
.docs-events summary { cursor: pointer; font-weight: 600; margin-top: 8px; }
.docs-event { margin: 10px 0; font-size: 13.5px; }
@media (max-width: 1100px) { .docs-op { grid-template-columns: 1fr; } .docs-head { grid-template-columns: 1fr; } }
.docs > *, .docs-op > *, .docs-head > *, .docs-sdks > *, .docs-tabs { min-width: 0; }
.docs-section, .docs-main { overflow-wrap: anywhere; }
@media (max-width: 820px) { .docs { grid-template-columns: minmax(0, 1fr); } .docs-nav { position: static; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); } }

/* ---------- Phase 8: AI agent ---------- */
.clamp-1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-test { display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
.agent-test-body { flex: 1; max-height: 60vh; overflow-y: auto; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--bubble-in); margin: 4px 0; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); animation: typing-dot 1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: .6; } }
.trace-list { font-size: 13px; gap: 4px; }
.trace-kv { font-size: 13px; }
.kb-results { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.kb-results p { margin: 2px 0 0; color: var(--text-muted); }
.segmented [aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
#kb-search { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; }
#kb-search .label { margin: 0; }

/* ============================== Smart audience ============================== */
.rfm-card { min-height: 220px; }
.rfm-action { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.rfm-action .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--primary); }
.rfm-count { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.rfm-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.rfm-grid th { font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-align: center; }
.rfm-grid thead th:first-child, .rfm-grid tbody th { width: 22px; }
.rfm-grid td { height: 40px; text-align: center; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--primary) var(--heat, 0%), var(--surface-2)); }
.rfm-grid td.is-empty { color: var(--text-faint); font-weight: 400; }
.rfm-reason-sm { display: none; }
@media (max-width: 640px) { .rfm-reason-sm { display: block; } }
.lookalike-list { display: grid; gap: 6px; margin-top: 8px; }
.lookalike-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lookalike-row .grow { min-width: 0; }
.lookalike-row small { display: block; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================== Lead pipeline ============================== */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; scroll-snap-type: x proximity; }
.kcol { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 160px; max-height: calc(100vh - 260px); scroll-snap-align: start; }
.kcol.is-over { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.kcol-head small { margin-left: auto; }
.kcol-won .kcol-head { border-top: 3px solid var(--success); border-radius: var(--radius) var(--radius) 0 0; }
.kcol-lost .kcol-head { border-top: 3px solid var(--danger); border-radius: var(--radius) var(--radius) 0 0; }
.kcol-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 80px; }
.kcol-empty { text-align: center; font-size: 12.5px; padding: 16px 0; margin: 0; }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; cursor: grab; box-shadow: var(--shadow-sm, none); }
.kcard:hover { border-color: var(--border-strong); }
.kcard:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.kcard.is-dragging { opacity: .45; }
.kcard-top { display: flex; justify-content: space-between; gap: 8px; }
.kcard-top strong { font-weight: 600; overflow-wrap: anywhere; }
.kcard-value { font-weight: 600; color: var(--primary-soft-text); white-space: nowrap; }
.kcard-who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.kcard-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.stage-row .select { width: auto; }
[data-stage-move] .icon { transform: rotate(180deg); }
.drawer { position: fixed; inset: 0; z-index: calc(var(--z-dropdown, 50) + 20); }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .35); }
.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(480px, 100%); background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; box-shadow: var(--shadow-lg); }
.drawer-head { display: flex; align-items: flex-start; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 2px 0 0; overflow-wrap: anywhere; }
.drawer-body { padding: 16px 18px; }
.drawer-section { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline li { display: flex; gap: 10px; font-size: 13.5px; }
.timeline li small { display: block; }
.tl-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; font-size: 12px; }
.map-row { gap: 12px; flex-wrap: wrap; }
.crm-fields[hidden] { display: none; }
@media (max-width: 640px) { .kanban { grid-auto-columns: 85%; } .kcol { max-height: none; } }

/* ============================== Carousel templates ============================== */
.card-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; }
.card-legend { font-weight: 600; font-size: 12.5px; padding: 0 6px; color: var(--text-muted); }
.card-legend::before { content: 'Card '; }
[hidden].card-body, section[hidden] { display: none !important; }
.pv-carousel { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.pv-carousel[hidden] { display: none; }
.pv-card { flex: none; width: 150px; background: #fff; color: #111; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; scroll-snap-align: start; box-shadow: 0 1px 1px rgb(0 0 0 / .12); font-size: 12.5px; }
.pv-card-media { aspect-ratio: 1; background: #e8ecef; display: grid; place-items: center; }
.pv-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pv-card p { margin: 0; padding: 0 8px; }
.pv-card-btn { display: block; margin: 2px 6px 6px; padding: 6px; text-align: center; color: #027eb5; border-top: 1px solid #e8ecef; font-weight: 600; }
.bubble-carousel { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding: 4px 0; }
.bubble-card { flex: none; width: 130px; background: rgb(255 255 255 / .85); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; font-size: 12px; }
.bubble-card .bubble-media { min-height: 70px; }
.bubble-card p { margin: 4px 6px; }
.bubble-card span { text-align: center; padding: 5px; color: #027eb5; border-top: 1px solid rgb(0 0 0 / .08); font-weight: 600; }

/* ============================== Voice messages ============================== */
.recorder { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); }
.recorder[hidden] { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: rec-pulse 1.2s infinite; }
@keyframes rec-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.icon-btn.is-recording { color: var(--danger); background: var(--danger-soft); }
.bubble-voice { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-weight: 600; }
.bubble audio { width: 220px; max-width: 100%; height: 36px; }
[data-standard][hidden] { display: none !important; }
.is-carousel #pv-media, .is-carousel #pv-htext, .is-carousel #pv-footer, .is-carousel #pv-buttons { display: none !important; }
.code-block { margin: 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; }

/* ============================== Status page ============================== */
.status-page { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.status-head { display: flex; flex-direction: column; gap: 4px; }
.status-head h1 { margin: 0; }
.status-brand { font-weight: 600; color: var(--text-muted); }
.status-banner { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius); font-size: 16px; }
.status-banner small { margin-left: auto; opacity: .8; font-weight: 400; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.status-success { background: var(--success-soft); color: var(--success); }
.status-warning { background: var(--warning-soft); color: var(--warning); }
.status-danger { background: var(--danger-soft); color: var(--danger); }
.status-neutral { background: var(--neutral-soft); color: var(--neutral); }
.status-incident { border-left: 4px solid currentColor; }
.status-row { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); }
.status-row:last-child { border-bottom: 0; }
.status-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; height: 28px; }
.status-bars i { border-radius: 2px; background: var(--border); }
.status-bars .bar-up { background: var(--success); }
.status-bars .bar-part { background: var(--warning); }
.status-bars .bar-down { background: var(--danger); }
.status-bars .bar-none { background: var(--border); opacity: .6; }

/* ============================== Costs & limits ============================== */
.meter-warn > span { background: var(--warning); }
.check-item { display: flex; gap: 10px; align-items: flex-start; }
.check-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--neutral-soft); color: var(--neutral); }
.check-mark .icon { width: 14px; height: 14px; }
.check-done .check-mark { background: var(--success-soft); color: var(--success); }
.check-todo .check-mark { background: var(--warning-soft); color: var(--warning); }
.row-total td { border-top: 2px solid var(--border-strong); }
.input-group { display: flex; align-items: stretch; }
.input-group .input-prefix { display: flex; align-items: center; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.input-group .input { border-radius: 0 var(--radius) var(--radius) 0; min-width: 0; }

/* ===================== Chatensy brand palette (from the logo) ===================== */
/* Blue leads (#1146D4, 7.4:1 with white); green stays the success and "ensy" colour. Neutrals shift from green-grey
   to blue-grey so the surfaces sit with the new primary. */
:root {
  --bg: #F5F7FB; --surface: #FFFFFF; --surface-2: #F0F3F9; --surface-3: #E6EBF4;
  --border: #DFE5EF; --border-strong: #C9D2E1;
  --text: #0E1726; --text-muted: #55617A; --text-faint: #7A8599;
  --primary: #1146D4; --primary-hover: #0B36A8; --primary-soft: #EAF0FF; --primary-soft-text: #0B36A8; --on-primary: #FFFFFF;
  --ring: #1146D4; --brand-mark: #1146D4;
  --success: #15803D; --success-soft: #E6F7EC;
  --neutral: #55617A; --neutral-soft: #EDF1F7;
  --sidebar-bg: #0A1638; --sidebar-text: #B8C4E6; --sidebar-text-strong: #FFFFFF;
  --sidebar-hover: #13224D; --sidebar-active: #1A2E66; --sidebar-border: #1B2A5C;
  --wm-a: #0B3BB5; --wm-b: #1FA83C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0F1C; --surface: #111827; --surface-2: #172033; --surface-3: #1E293D;
    --border: #26324A; --border-strong: #34425E;
    --text: #E6ECF5; --text-muted: #A3AFC4; --text-faint: #7F8BA3;
    --primary: #7BA0FF; --primary-hover: #A3BDFF; --primary-soft: #14224A; --primary-soft-text: #A9C0FF; --on-primary: #06102B;
    --ring: #7BA0FF; --brand-mark: #3B6BF0;
    --success: #4ADE80; --success-soft: #0F2E1E; --neutral: #A3AFC4; --neutral-soft: #1E293D;
    --sidebar-bg: #060D24; --sidebar-hover: #0F1A3A; --sidebar-active: #14224A; --sidebar-border: #16224A;
    --chat-bg: #0D1320; --bubble-in: #1E293D;
    --wm-a: #8FB0FF; --wm-b: #4ADE80;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0F1C; --surface: #111827; --surface-2: #172033; --surface-3: #1E293D;
  --border: #26324A; --border-strong: #34425E;
  --text: #E6ECF5; --text-muted: #A3AFC4; --text-faint: #7F8BA3;
  --primary: #7BA0FF; --primary-hover: #A3BDFF; --primary-soft: #14224A; --primary-soft-text: #A9C0FF; --on-primary: #06102B;
  --ring: #7BA0FF; --brand-mark: #3B6BF0;
  --success: #4ADE80; --success-soft: #0F2E1E; --neutral: #A3AFC4; --neutral-soft: #1E293D;
  --sidebar-bg: #060D24; --sidebar-hover: #0F1A3A; --sidebar-active: #14224A; --sidebar-border: #16224A;
  --chat-bg: #0D1320; --bubble-in: #1E293D;
  --wm-a: #8FB0FF; --wm-b: #4ADE80;
}
.brand-name { font-weight: 800; letter-spacing: -.02em; }
.wm-a { color: var(--wm-a); }
.wm-b { color: var(--wm-b); }
.sidebar .wm-a { color: #8FB0FF; }
.sidebar .wm-b { color: #4ADE80; }
.auth-showcase .eyebrow { color: #B9F5C9; }


/* ===================== Help library ===================== */
.help-search { width: min(320px, 100%); }
.help-group { margin-bottom: 28px; }
.help-group-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.help-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer; color: inherit; font: inherit; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.help-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.help-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.help-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.help-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.help-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(120deg, #1146D4, #0F7F52); box-shadow: 0 10px 24px -8px rgba(17, 70, 212, .6); transition: transform var(--dur) var(--ease-out); }
.help-play .icon { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.help-card:hover .help-play { transform: scale(1.08); }
.help-len { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(10, 22, 56, .78); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.help-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.help-body strong { font-size: 15px; }
.help-body .muted { font-size: 13px; line-height: 1.45; }
.help-find { font-size: 12px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.modal-video .modal-dialog { width: min(1040px, 100%); }
#help-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); }
.help-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; margin-top: 16px; }
@media (max-width: 720px) { .help-meta { grid-template-columns: 1fr; } }
.help-chapters { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--primary); font: inherit; font-size: 13px; cursor: pointer; text-align: left; white-space: pre; }
.linkish:hover { text-decoration: underline; }
.help-transcript summary { cursor: pointer; font-weight: 600; }
.help-transcript p { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.topbar-guide .icon { width: 14px; height: 14px; fill: currentColor; }

.help-tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-soft-text); background: var(--primary-soft); border-radius: var(--radius-pill); padding: 2px 8px; }


/* ===================== Super admin console ===================== */
.super-body .row { display: flex; align-items: center; }
.super-body .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; }
.super-body .card-title { font-size: 15px; font-weight: 700; }
.super-body .small { font-size: 12.5px; }
.super-body .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.super-sidebar { background: #060D24; }
.super-badge { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #FDE68A; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .35); }
.super-badge .icon { width: 14px; height: 14px; }
.super-bars { display: grid; gap: 10px; margin-top: 12px; }
.super-bar { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.super-bar .meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: block; }
.super-bar .meter > span { display: block; height: 100%; background: linear-gradient(90deg, #1146D4, #16A34A); border-radius: 999px; }
.impersonation-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #F59E0B; color: #1F1300; font-size: 13.5px; }
.impersonation-bar .icon { width: 16px; height: 16px; flex: none; }
.impersonation-bar span { flex: 1; min-width: 0; }
.impersonation-bar .btn { background: #1F1300; color: #fff; border-color: #1F1300; }
.announce { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13.5px; }
.announce span { flex: 1; }
.announce a { font-weight: 600; text-decoration: underline; color: inherit; }
.announce .icon-btn { color: inherit; }
.announce-info { background: var(--info-soft); color: var(--info); }
.announce-warning { background: var(--warning-soft); color: var(--warning); }
.announce-danger { background: var(--danger-soft); color: var(--danger); }
.super-body form > .select { width: auto; min-width: 150px; }

/* ---------- WhatsApp code sign-up / login ---------- */
.otp-phone { display: flex; align-items: stretch; border-radius: var(--radius); }
.otp-cc { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--surface-2); color: var(--text-muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.otp-phone .input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; min-width: 0; }
.otp-input { font-size: 22px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .5em; }
.otp-code:not([hidden]) { animation: otp-in .25s ease-out; }
@keyframes otp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.seg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--surface-2); }
.seg-tabs a { text-align: center; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: 14px; }
.seg-tabs a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .08)); }
@media (prefers-reduced-motion: reduce) { .otp-code:not([hidden]) { animation: none; } }

/* ---------- Support chat with the Chatensy team ---------- */
.support-btn { position: relative; }
.support-count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.support-count[hidden] { display: none; }
.support-drawer .drawer-panel { width: min(420px, 100%); overflow: hidden; }
.support-widget { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.support-widget .sw-view { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 16px 18px; gap: 12px; overflow-y: auto; }
.support-widget .sw-view[hidden] { display: none; }
.support-page-card { padding: 0; height: min(72vh, 720px); display: flex; overflow: hidden; }
.support-widget.is-wide .sw-view { max-width: 760px; width: 100%; margin: 0 auto; }
.sw-intro { padding: 16px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary-soft), var(--surface-2)); display: flex; flex-direction: column; gap: 10px; }
.sw-hello { font-size: 18px; font-weight: 700; margin: 0; }
.sw-intro p { margin: 0; }
.sw-subhead { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 6px 0 0; }
.sw-threads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-empty { padding: 12px 2px; font-size: 14px; }
.sw-thread-row { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.sw-thread-row:hover { background: var(--surface-2); }
.sw-thread-row.is-unread strong { color: var(--primary); }
.sw-row-top, .sw-row-bottom { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-width: 0; }
.sw-row-top strong, .sw-row-bottom > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sw-row-bottom { font-size: 13px; }
.sw-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.sw-status { flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); }
.sw-status.s-pending { background: var(--primary-soft); color: var(--primary-soft-text); }
.sw-back { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; }
.sw-thread { padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
.sw-thread-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.sw-thread-head strong, .sw-thread-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-thread-head .grow { min-width: 0; }
.sw-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.sw-msg { display: flex; flex-direction: column; gap: 3px; max-width: 85%; }
.sw-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.sw-bubble { padding: 9px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sw-msg.is-mine .sw-bubble { background: var(--primary); color: var(--on-primary, #fff); border-color: transparent; border-bottom-right-radius: 4px; }
.sw-msg.is-team .sw-bubble { border-bottom-left-radius: 4px; }
.sw-msg small { font-size: 11.5px; }
.sw-sys { align-self: center; text-align: center; font-size: 12.5px; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 6px 10px; max-width: 92%; }
.sw-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.sw-composer .textarea { min-height: 44px; max-height: 160px; flex: 1; }

/* ---------- Console support inbox ---------- */
.ss { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 210px); min-height: 520px; }
.ss-list, .ss-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ss-filters { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); }
.ss-tabs { grid-template-columns: repeat(3, 1fr); }
.ss-tabs a { font-size: 12.5px; padding: 7px 4px; }
.ss-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-3, var(--border)); font-size: 11px; }
.super-body .ss-filters .select { width: auto; min-width: 0; flex: none; }
.ss-threads { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ss-row { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.ss-row:hover { background: var(--surface-2); }
.ss-row.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.ss-row.is-unread .ss-row-subject { font-weight: 700; }
.ss-row-subject { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ss-tags .badge { height: 19px; font-size: 11px; }
.ss-placeholder { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--text-muted); }
.ss-placeholder .icon { width: 36px; height: 36px; }
.ss-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ss-thread[hidden] { display: none; }
.ss-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ss-head strong, .ss-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-head .ss-assign { width: auto; min-width: 140px; }
.ss-back { display: none; }
.ss-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; flex: 1; min-height: 0; }
.ss-convo { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.ss-convo .sw-messages { flex: 1; }
.ss-context { padding: 14px; overflow-y: auto; font-size: 13.5px; }
.ss-context h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 14px 0 4px; }
.ss-context h3:first-child { margin-top: 0; }
.ss-context p { margin: 0; overflow-wrap: anywhere; }
.ss-others { margin: 0; padding-left: 16px; }
.ss-context .btn { margin-top: 14px; }
@media (max-width: 1100px) { .ss-body { grid-template-columns: 1fr; } .ss-context { display: none; } .ss-convo { border-right: 0; } }
@media (max-width: 760px) {
  .ss { grid-template-columns: 1fr; height: calc(100vh - 170px); }
  .ss.has-thread .ss-list, .ss:not(.has-thread) .ss-pane { display: none; }
  .ss-back { display: inline-grid; }
}