/* ConvoSurge component styles. Everything reads tokens.css custom properties.
   Shared by the static landing page and the React dashboard. The dashboard's
   older class names (.btn, .card, .input, .badge, .nav-item, ...) are listed
   next to their cs-* equivalents so each look is defined exactly once. */
.cs-root, .cs-root * { box-sizing: border-box; }
.cs-root {
  font-family: var(--font-body);
  font-size: 16px; line-height: 25px; font-weight: 450;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.cs-root :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Logo ---------- */
.cs-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.cs-logo img { width: 36px; height: 36px; display: block; }
.cs-logo span { font-family: var(--font-wordmark); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.01em; }
.cs-logo--sm img { width: 28px; height: 28px; }
.cs-logo--sm span { font-size: 18px; }
.cs-logo--on-night { color: var(--on-night); }

/* ---------- Buttons ---------- */
.cs-btn, .btn {
  --_bg: var(--surge); --_fg: var(--on-fill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 750 16px/1 var(--font-body); letter-spacing: -0.005em;
  padding: 14px 22px; min-height: 48px;
  background: var(--_bg); color: var(--_fg);
  border: 2px solid var(--edge); border-radius: var(--r-md);
  box-shadow: var(--pop); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cs-btn:hover, .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--edge); }
.cs-btn:active, .btn:active { transform: translate(2px, 2px); box-shadow: var(--pop-sm); }
.cs-btn--secondary, .btn-secondary { --_bg: var(--paper-raised); --_fg: var(--ink); }
.btn-danger { --_bg: var(--paper-raised); --_fg: var(--danger); }
.cs-btn--gold { --_bg: var(--surge-gold); }
.cs-btn--night { --_bg: var(--night); --_fg: var(--on-night); }
.cs-btn--ghost, .btn-ghost { --_bg: transparent; --_fg: var(--ink); border-color: transparent; box-shadow: none; padding-inline: 12px; }
.cs-btn--ghost:hover, .btn-ghost:hover { transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
/* Dashboard .btn is the small size: the app is dense, the landing is not. */
.cs-btn--sm, .btn { min-height: 38px; padding: 9px 14px; font-size: 14px; border-radius: var(--r-sm); box-shadow: var(--pop-sm); }
.btn:hover { box-shadow: 3px 3px 0 var(--edge); }
.btn:active { box-shadow: none; }
.btn-ghost, .btn-ghost:hover, .btn-ghost:active, .cs-btn--ghost, .cs-btn--ghost:hover, .cs-btn--ghost:active { box-shadow: none; }
.cs-btn--lg { min-height: 60px; padding: 18px 30px; font-size: 18px; border-radius: var(--r-md); box-shadow: var(--pop); }
.cs-btn--block { width: 100%; }
.cs-btn[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Chat bubbles ---------- */
.cs-thread { display: flex; flex-direction: column; gap: 10px; }
.cs-bubble {
  max-width: 340px; padding: 12px 16px;
  font: 500 15px/22px var(--font-body);
  border: 2px solid var(--edge); box-shadow: var(--pop-sm);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-bubble-tail);
  background: var(--mint); color: var(--on-fill);
  align-self: flex-start;
}
.cs-bubble--them { background: var(--mint); color: var(--on-fill); }
.cs-bubble--ai {
  align-self: flex-end; background: var(--paper-raised); color: var(--ink);
  border-radius: var(--r-lg) var(--r-lg) var(--r-bubble-tail) var(--r-lg);
}
.cs-bubble--human {
  align-self: flex-end; background: var(--sky); color: var(--on-fill);
  border-radius: var(--r-lg) var(--r-lg) var(--r-bubble-tail) var(--r-lg);
}
.cs-bubble__who { display: block; font: 800 11px/14px var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; opacity: .8; }
.cs-bubble__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cs-typing { align-self: flex-end; display: inline-flex; gap: 5px; padding: 14px 16px; background: var(--paper-raised); border: 2px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) var(--r-bubble-tail) var(--r-lg); box-shadow: var(--pop-sm); }
.cs-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .35; animation: cs-dot 1.2s infinite ease-in-out; }
.cs-typing i:nth-child(2) { animation-delay: .15s; } .cs-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cs-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }

/* ---------- Stickers, pills, chips ---------- */
.cs-sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font: 800 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  background: var(--surge-gold); color: var(--on-fill);
  border: 2px solid var(--edge); box-shadow: var(--pop-sm);
}
.cs-sticker--tilt { transform: rotate(-4deg); }
.cs-sticker--tilt-r { transform: rotate(3deg); }
.cs-sticker--mint { background: var(--mint); }
.cs-sticker--pink { background: var(--bubblegum); }
.cs-sticker--sky { background: var(--sky); }
.cs-sticker--orange { background: var(--surge); }
.cs-sticker--plain { background: var(--paper-raised); color: var(--ink); }

/* Dashboard badges: a flat, smaller sticker (no shadow, no tilt). */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font: 800 11px/16px var(--font-body); letter-spacing: .04em;
  background: var(--paper-sunk); color: var(--ink);
  border: 2px solid var(--edge);
}
.badge-indigo { background: var(--sky); color: var(--on-fill); }
.badge-green  { background: var(--mint); color: var(--on-fill); }
.badge-amber  { background: var(--surge-gold); color: var(--on-fill); }
.badge-red    { background: var(--paper-raised); color: var(--danger); border-color: var(--danger); }
.badge-muted  { background: var(--paper-sunk); color: var(--ink-muted); border-color: var(--hairline); }

.cs-status { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/18px var(--font-body); color: var(--success); }
.cs-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.cs-status--off { color: var(--danger); }

.cs-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: var(--r-pill);
  background: var(--paper-raised); color: var(--ink);
  border: 2px solid var(--edge); box-shadow: var(--pop-sm);
  font: 700 14px/18px var(--font-body);
}
.cs-chip__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); background: var(--mint); }
.cs-chip--wa .cs-chip__dot { background: var(--mint); }
.cs-chip--ig .cs-chip__dot { background: var(--bubblegum); }
.cs-chip--fb .cs-chip__dot { background: var(--sky); }
.cs-chip--tg .cs-chip__dot { background: var(--surge-gold); }

/* ---------- Cards ---------- */
.cs-card, .card, .stat-card {
  background: var(--paper-raised); color: var(--ink);
  border: 2px solid var(--edge); border-radius: var(--r-md);
  box-shadow: var(--pop); padding: 24px;
}
.cs-card--sunk { background: var(--paper-sunk); box-shadow: none; }
.cs-card--orange { background: var(--surge); color: var(--on-fill); }
.cs-card--gold { background: var(--surge-gold); color: var(--on-fill); }
.cs-card--mint { background: var(--mint); color: var(--on-fill); }
.cs-card--pink { background: var(--bubblegum); color: var(--on-fill); }
.cs-card--sky { background: var(--sky); color: var(--on-fill); }
.cs-card__title { font: 700 20px/25px var(--font-display); margin: 0 0 8px; letter-spacing: -0.01em; }
.cs-card__body { margin: 0; color: inherit; }
.cs-card:not([class*="--orange"]):not([class*="--gold"]):not([class*="--mint"]):not([class*="--pink"]):not([class*="--sky"]) .cs-card__body { color: var(--ink-muted); }
.cs-card__icon {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 16px;
  border: 2px solid var(--edge); border-radius: 12px; background: var(--surge-gold); color: var(--on-fill);
}
.cs-card__icon svg { width: 22px; height: 22px; }

/* ---------- Inputs ---------- */
.cs-field { display: flex; flex-direction: column; gap: 6px; }
.cs-field label, .input-label { font: 700 14px/20px var(--font-body); color: var(--ink); }
.cs-input, .input {
  width: 100%; min-height: 50px; padding: 12px 16px;
  font: 500 16px/24px var(--font-body); color: var(--ink);
  background: var(--paper-raised); border: 2px solid var(--edge); border-radius: var(--r-sm);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.04);
}
.input { min-height: 44px; padding: 9px 14px; font-size: 15px; }
.cs-input::placeholder, .input::placeholder { color: var(--ink-muted); }
.cs-input:focus, .input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs-field__help { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.cs-field--error .cs-input { border-color: var(--danger); }
.cs-field--error .cs-field__help { color: var(--danger); font-weight: 700; }

/* ---------- Dashboard nav ---------- */
.cs-side, .sidebar { background: var(--night); color: var(--on-night); }
.cs-nav-group, .sidebar-section { font: 800 11px/14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-muted); padding: 18px 14px 6px; }
.cs-nav-item, .nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-sm);
  color: var(--on-night); text-decoration: none; font: 600 15px/20px var(--font-body);
  border: 2px solid transparent;
}
.cs-nav-item svg, .nav-item svg { width: 18px; height: 18px; flex: none; }
.cs-nav-item:hover, .nav-item:hover { background: rgba(255,247,234,.08); }
.cs-nav-item[aria-current="page"], .nav-item[aria-current="page"] {
  background: var(--surge); color: var(--on-fill); border-color: #000; box-shadow: 3px 3px 0 #000;
}
.cs-nav-item__count { margin-left: auto; font: 800 12px/16px var(--font-body); padding: 2px 8px; border-radius: var(--r-pill); background: var(--surge-gold); color: var(--on-fill); }

/* ---------- Doodles ---------- */
.cs-hand { font-family: var(--font-hand); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--ink); }
.cs-swash { background: linear-gradient(transparent 58%, var(--surge-gold) 58%, var(--surge-gold) 92%, transparent 92%); padding: 0 .08em; }
[data-theme="dark"] .cs-swash { background: none; color: var(--surge-gold); }

@media (prefers-reduced-motion: reduce) {
  .cs-root *, .cs-root *::before, .cs-root *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   App shell + product primitives (dashboard pages)
   ========================================================= */
.cs-app { display: grid; grid-template-columns: 248px 1fr; height: 900px; background: var(--paper); }
.cs-app > .cs-side { display: flex; flex-direction: column; padding: 18px 12px 12px; border-right: 2px solid var(--edge); min-height: 0; }
.cs-app > .cs-side .cs-logo { padding: 0 8px 10px; }
.cs-side__nav { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.cs-app .cs-nav-group { padding: 14px 12px 4px; }
.cs-app .cs-nav-item { padding: 7px 12px; font-size: 14px; }
.cs-side__me { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid #3A3128; margin-top: 8px; }
.cs-side__av { width: 32px; height: 32px; border-radius: 50%; background: var(--bubblegum); color: #1B1712; border: 2px solid #000; display: grid; place-items: center; font: 800 12px/1 var(--font-display); flex: none; }
.cs-side__me b { display: block; font: 700 13px/17px var(--font-body); color: var(--on-night); }
.cs-side__me small { font: 500 12px/16px var(--font-body); color: var(--on-night-muted); }
.cs-side__me a { margin-left: auto; color: var(--on-night-muted); display: grid; place-items: center; }
.cs-side__me svg { width: 18px; height: 18px; }

.cs-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cs-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-bottom: 2px solid var(--edge); background: var(--paper); flex: none; }
.cs-top h1 { font: 800 26px/1.1 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.cs-top p { margin: 2px 0 0; font: 500 14px/20px var(--font-body); color: var(--ink-muted); }
.cs-top__right { display: flex; align-items: center; gap: 10px; flex: none; }
.cs-switch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; background: var(--paper-raised); border: 2px solid var(--edge); border-radius: var(--r-sm); box-shadow: var(--pop-sm); font: 700 14px/18px var(--font-body); color: var(--ink); cursor: pointer; text-align: left; }
.cs-switch__dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); background: var(--mint); flex: none; }
.cs-switch small { display: block; font: 600 12px/14px var(--font-body); color: var(--success); }
.cs-switch svg { width: 16px; height: 16px; }
.cs-body { padding: 24px 28px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-section-label { font: 800 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 4px 0 -8px; }
.cs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-spacer { flex: 1; }

/* icon */
.cs-ic { width: 18px; height: 18px; flex: none; }
.cs-btn .cs-ic { width: 17px; height: 17px; }
.cs-icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--r-sm); border: 2px solid transparent; background: transparent; color: var(--ink-muted); cursor: pointer; }
.cs-icon-btn:hover { border-color: var(--edge); color: var(--ink); background: var(--paper-raised); }
.cs-icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }

/* tabs / segmented */
.cs-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 2px solid var(--edge); border-radius: var(--r-md); background: var(--paper-raised); box-shadow: var(--pop-sm); flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.cs-tab { white-space: nowrap; padding: 7px 14px; border-radius: 10px; font: 700 14px/18px var(--font-body); color: var(--ink-muted); border: 2px solid transparent; background: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cs-tab:hover { color: var(--ink); }
.cs-tab[aria-selected="true"] { background: var(--surge); color: var(--on-fill); border-color: var(--edge); }
.cs-tab__n { font: 800 11px/14px var(--font-body); padding: 1px 7px; border-radius: 999px; background: var(--paper-sunk); color: var(--ink); }
.cs-tab[aria-selected="true"] .cs-tab__n { background: var(--paper-raised); color: var(--ink); }

/* select, textarea, search */
.cs-select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 10px 40px 10px 14px; font: 600 15px/22px var(--font-body); color: var(--ink); background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6A55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; border: 2px solid var(--edge); border-radius: var(--r-sm); cursor: pointer; }
.cs-textarea { width: 100%; min-height: 120px; padding: 12px 16px; font: 500 15px/23px var(--font-body); color: var(--ink); background: var(--paper-raised); border: 2px solid var(--edge); border-radius: var(--r-sm); resize: vertical; }
.cs-search { position: relative; flex: 1; min-width: 200px; }
.cs-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-muted); }
.cs-search .cs-input { padding-left: 42px; min-height: 44px; }
.cs-input--sm { min-height: 44px; padding: 10px 14px; }

/* toggle + checkbox chip */
.cs-toggle { position: relative; width: 48px; height: 28px; flex: none; }
.cs-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cs-toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--paper-sunk); border: 2px solid var(--edge); transition: background .15s; pointer-events: none; }
.cs-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-muted); transition: transform .15s, background .15s; }
.cs-toggle input:checked + span { background: var(--mint); }
.cs-toggle input:checked + span::after { transform: translateX(20px); background: #1B1712; }
.cs-toggle input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs-check { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 2px solid var(--edge); border-radius: var(--r-pill); background: var(--paper-raised); font: 700 14px/18px var(--font-body); cursor: pointer; }
.cs-check input { width: 18px; height: 18px; accent-color: var(--surge); margin: 0; }
.cs-check:has(input:checked) { background: var(--surge-gold); color: var(--on-fill); box-shadow: var(--pop-sm); }

/* badges (states) */
.cs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font: 800 11px/16px var(--font-body); letter-spacing: .05em; text-transform: uppercase; border: 1.5px solid var(--edge); background: var(--paper-raised); color: var(--ink); white-space: nowrap; }
.cs-badge--new { background: var(--sky); color: var(--on-fill); }
.cs-badge--handoff { background: var(--surge-gold); color: var(--on-fill); }
.cs-badge--ai { background: var(--mint); color: var(--on-fill); }
.cs-badge--closed { background: transparent; color: var(--ink-muted); border-color: var(--hairline); }
.cs-badge--warn { background: var(--surge-gold); color: var(--on-fill); }
.cs-badge--soon { background: var(--bubblegum); color: var(--on-fill); }
.cs-chdot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--edge); display: inline-block; flex: none; }
.cs-chdot--wa { background: var(--mint); } .cs-chdot--ig { background: var(--bubblegum); } .cs-chdot--fb { background: var(--sky); } .cs-chdot--tg { background: var(--surge-gold); }

/* stat tile */
.cs-stat { padding: 18px 20px; border: 2px solid var(--edge); border-radius: var(--r-md); background: var(--paper-raised); box-shadow: var(--pop-sm); }
.cs-stat__label { font: 800 12px/16px var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.cs-stat__value { font: 800 40px/1.05 var(--font-display); letter-spacing: -0.03em; margin-top: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-stat__note { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin-top: 4px; }
.cs-stat__chip { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--edge); margin-right: 8px; vertical-align: -1px; }

/* empty state */
.cs-empty { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: center; padding: 36px 44px; border-radius: var(--r-lg); }
.cs-empty h2 { font: 800 34px/1.05 var(--font-display); letter-spacing: -0.025em; margin: 0 0 10px; }
.cs-empty p { margin: 0 0 22px; max-width: 520px; color: var(--ink-muted); font-size: 16px; line-height: 25px; }
.cs-empty__art { position: relative; height: 200px; }
.cs-empty__art .cs-bubble { position: absolute; font-size: 13px; line-height: 19px; max-width: 210px; }

/* list rows inside a card */
.cs-list { border: 2px solid var(--edge); border-radius: var(--r-md); background: var(--paper-raised); box-shadow: var(--pop-sm); overflow: hidden; }
.cs-list__row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--hairline); }
.cs-list__row:first-child { border-top: 0; }
.cs-list__title { font: 700 15px/20px var(--font-body); }
.cs-list__sub { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }

/* letter tile for third-party apps (no brand logos) */
.cs-tile { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--edge); display: grid; place-items: center; font: 800 18px/1 var(--font-display); color: #1B1712; flex: none; }

/* sticky save bar */
.cs-savebar { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 28px; border-top: 2px solid var(--edge); background: var(--paper); }
.cs-savebar span { margin-right: auto; font: 600 14px/20px var(--font-body); color: var(--ink-muted); }