/* ============================================================================
 * FitPhoneAI — platform design system (app.fitphone.ai, logged-in product)
 * Masterbrand comms product. PRIMARY = purple #7B61FF. Teal is COCKPIT-ONLY —
 * never used here. Vanilla CSS, no build step. Pages link this + remap their
 * local :root var values to these tokens; shared structural components below.
 * Source of truth: UI redesign handover (Bricolage/Hanken/JetBrains, paper bg).
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* surfaces */
  --paper:#F4F2EE; --bone:#FAF8F4; --white:#FFFFFF; --ink:#0B1220; --ink-2:#141C2E; --ink-3:#1E2740;
  /* text */
  --quill:#5B6573; --quill-2:#8A93A1; --hairline:#E5E1D8; --hairline-2:#D8D2C5;
  /* brand accents */
  --purple:#7B61FF; --purple-d:#5C3FE8; --amber:#FFCE54; --teal:#1FE0C2; /* cockpit only */
  --green:#2ECC71; --red:#E76F51;
  /* type — namespaced (--pf-*) so pages that define their own --text (as a
     colour) can't collide with the design-system font tokens */
  --pf-display:'Bricolage Grotesque',system-ui,sans-serif;
  --pf-text:'Hanken Grotesk',system-ui,sans-serif;
  --pf-mono:'JetBrains Mono',ui-monospace,monospace;
  /* radius */
  --r-sm:5px; --r:8px; --r-lg:12px; --r-xl:14px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.pf, .pf *, .pf *::before, .pf *::after { box-sizing:border-box; }
.pf-body { font-family:var(--pf-text); background:var(--paper); color:var(--ink); }
.pf-mono { font-family:var(--pf-mono); }
.pf-display { font-family:var(--pf-display); }

/* ── Top nav (§3) ──────────────────────────────────────────────────────── */
.app-nav { background:var(--ink); height:48px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; position:sticky; top:0; z-index:100; font-family:var(--pf-text); }
.app-nav .nav-left { display:flex; align-items:center; gap:22px; min-width:0; }
.app-nav .nav-mark { width:18px; height:18px; flex:none; }
.app-nav .wordmark { font-family:var(--pf-display); font-weight:700; font-size:15px; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.app-nav .wordmark .dot { color:var(--purple); }
.app-nav .nav-tabs { display:flex; gap:2px; }
.nav-tab { background:transparent; border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:500;
  color:rgba(244,242,238,.7); padding:6px 12px; border-radius:6px; }
.nav-tab:hover { background:rgba(244,242,238,.08); color:#fff; }
.nav-tab.active { background:var(--purple); color:#fff; font-weight:600; }
.app-nav .nav-right { display:flex; align-items:center; gap:12px; }
.app-nav .workspace { font-family:var(--pf-mono); font-size:11px; color:var(--quill-2); white-space:nowrap; }
.user-avatar { width:28px; height:28px; border-radius:6px; background:var(--amber); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:var(--pf-display); }

/* ── Buttons (§5) ──────────────────────────────────────────────────────── */
.btn { font-family:var(--pf-text); font-size:12px; font-weight:600; padding:6px 14px; border-radius:6px; border:none;
  cursor:pointer; line-height:1.4; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn-primary { background:var(--purple); color:#fff; }
.btn-primary:hover { background:var(--purple-d); }
.btn-secondary { background:rgba(11,18,32,.07); color:var(--ink); border:1px solid var(--hairline); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--hairline-2); }
.btn-danger-ghost { background:rgba(231,111,81,.1); color:var(--red); border:1px solid rgba(231,111,81,.3); }
.btn-destructive { background:transparent; color:var(--red); border:none; }

/* ── Cards (§4.2) ──────────────────────────────────────────────────────── */
.pf-card { background:var(--white); border:1px solid var(--hairline); border-radius:var(--r); }
.pf-card--accent { border-top:2.5px solid var(--hairline-2); }
.accent-amber  { border-top-color:var(--amber); }
.accent-purple { border-top-color:var(--purple); }
.accent-green  { border-top-color:var(--green); }
.accent-red    { border-top-color:var(--red); }
.accent-mute   { border-top-color:var(--hairline-2); }

/* ── Status pills (§4.2) ───────────────────────────────────────────────── */
.pf-pill { display:inline-block; padding:2px 7px; border-radius:10px; font-family:var(--pf-mono); font-size:10px;
  font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.pill-cut    { background:rgba(231,111,81,.1);  color:#E76F51; }
.pill-vm     { background:rgba(66,134,244,.1);  color:#4286F4; }
.pill-spoke  { background:rgba(46,204,113,.12); color:#2ECC71; }
.pill-reply  { background:rgba(123,97,255,.1);  color:#7B61FF; }
.pill-won    { background:rgba(46,204,113,.12); color:#2ECC71; }
.pill-draft  { background:rgba(255,206,84,.2);  color:#B37F00; }
.pill-wa     { background:rgba(46,204,113,.12); color:#2ECC71; }
.pill-sms    { background:rgba(11,18,32,.06);   color:var(--quill); }
.pill-human  { background:rgba(231,111,81,.1);  color:#E76F51; }

/* ── Sub-header bar (§4.2) ─────────────────────────────────────────────── */
.subheader { height:38px; background:var(--bone); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; gap:16px; padding:0 16px; font-family:var(--pf-mono); font-size:11px; color:var(--quill); }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 3px rgba(46,204,113,.18); }

/* ── Stat tile (§4.4) ──────────────────────────────────────────────────── */
.stat-tile { background:var(--white); border:1px solid var(--hairline); border-radius:var(--r); padding:14px 16px; }
.stat-tile .label { font-family:var(--pf-mono); font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--quill-2); }
.stat-tile .value { font-family:var(--pf-display); font-weight:700; font-size:28px; line-height:1.1; margin-top:4px; }
.stat-tile .value.accent { color:var(--purple); }
.stat-tile .value.amber  { color:#B37F00; }

/* ── Messaging (§4.6) ──────────────────────────────────────────────────── */
.chat-bg { background-color:#EDEAE3; background-image:radial-gradient(rgba(11,18,32,.05) 1px, transparent 1px); background-size:16px 16px; }
.bubble { max-width:80%; padding:8px 11px; border-radius:12px; font-size:13.5px; line-height:1.45; }
.bubble-in   { background:var(--white); border:1px solid var(--hairline); border-bottom-left-radius:3px; align-self:flex-start; }
.bubble-out  { background:var(--purple); color:#fff; border-bottom-right-radius:3px; align-self:flex-end; }
.bubble-draft{ background:rgba(123,97,255,.08); border:1px dashed var(--purple); align-self:flex-start; }
.bubble-meta { font-size:10px; opacity:.6; margin-top:3px; }
.draft-label { font-family:var(--pf-mono); font-size:10px; letter-spacing:.4px; color:var(--purple); text-transform:uppercase; margin-bottom:4px; }
/* 24h-window chips */
.window-banner { font-family:var(--pf-mono); font-size:11px; padding:7px 12px; display:flex; align-items:center; gap:8px; }
.window-open   { background:rgba(255,206,84,.15); color:#8a6d3b; border-bottom:1px solid rgba(255,206,84,.4); }
.window-closed { background:rgba(231,111,81,.1);  color:#a23; border-bottom:1px solid rgba(231,111,81,.3); }
/* segmented switch (Active | Pending) */
.segmented { display:flex; gap:0; border-bottom:1px solid var(--hairline); background:var(--bone); }
.segmented button { flex:1; background:transparent; border:none; cursor:pointer; font-family:var(--pf-text); font-weight:600;
  font-size:13px; color:var(--quill); padding:11px 0; border-bottom:2px solid transparent; display:flex; align-items:center; justify-content:center; gap:6px; }
.segmented button.active { color:var(--ink); }
.segmented button.active.acc-purple { border-bottom-color:var(--purple); }
.segmented button.active.acc-amber  { border-bottom-color:var(--amber); }
.seg-count { font-family:var(--pf-mono); font-size:10px; background:rgba(11,18,32,.08); border-radius:8px; padding:1px 6px; }
.seg-count.purple { background:rgba(123,97,255,.15); color:var(--purple-d); }
.seg-count.amber  { background:rgba(255,206,84,.25); color:#8a6d3b; }

/* ── Slide-over panel (§4.3) ───────────────────────────────────────────── */
.slide-over { background:var(--white); box-shadow:-12px 0 40px -10px rgba(11,18,32,.12); }

/* ── Mobile bottom tab bar (§4.9) ──────────────────────────────────────── */
.bottom-tab { position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--white);
  border-top:1px solid var(--hairline); display:none; justify-content:space-around; align-items:center;
  height:56px; padding-bottom:env(safe-area-inset-bottom,0); }
.bottom-tab a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
  color:#9aa0ab; font-family:var(--pf-text); font-size:10px; font-weight:600; position:relative; }
.bottom-tab a.active { color:var(--purple); }
.bottom-tab .tab-badge { position:absolute; top:-2px; right:50%; transform:translateX(14px);
  background:var(--amber); color:var(--ink); font-family:var(--pf-mono); font-size:9px; font-weight:700;
  min-width:15px; height:15px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* Show the bottom tab bar + add bottom clearance on phones (opt-in via .has-bottom-tab on body) */
@media (max-width:760px) {
  .bottom-tab.enabled { display:flex; }
  body.has-bottom-tab { padding-bottom:calc(56px + env(safe-area-inset-bottom,0)); }
  /* The bottom-tab is the mobile nav, so drop the redundant top tab list
     (keep the logo + workspace + avatar in the top bar). */
  .app-nav .nav-tabs { display:none; }
}

/* Focus ring — purple */
.pf-focus:focus, .app-nav :focus-visible, .btn:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }