/* Peakxy — mobile-first, scales up to desktop.
   Tokens: paper #F5F6F4 · surface #FFFFFF · ink #101418 · muted #5C6570
   accent (cobalt) #2743E8 · youtube #E5484D · instagram #D6409F */

:root {
  --paper: #fbfbfa;
  --paper-2: #eef0ec;
  --surface: #ffffff;
  --ink: #101418;
  --muted: #5c6570;
  --line: #e3e6e2;
  --accent: #2743e8;
  --accent-2: #b332dd;
  --accent-ink: #ffffff;
  --avatar-bg: #d9e4ff; /* initials circles: light blue w/ dark blue text */
  --avatar-ink: #23409e;
  --yt: #e5484d;
  --ig: #d6409f;
  --ok: #22c55e; /* "online" green */
  --radius: 16px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --paper: #14161a;
  --paper-2: #0d0f12;
  --surface: #1c1f24;
  --ink: #f1f2f4;
  --muted: #9aa1ab;
  --line: #2c3038;
  --accent: #5b7cff;
  --accent-2: #cf6bff;
  --accent-ink: #ffffff;
  --avatar-bg: #26334f;
  --avatar-ink: #aec4ff;
  --yt: #ff6b70;
  --ig: #ec6bc2;
  --ok: #34d97b;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- layout ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}

.topbar {
  position: relative; /* anchors the dropdown menu panel */
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: calc(22px + env(safe-area-inset-top)) 18px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.menu-btn {
  align-self: center;
  margin-left: auto; /* pushes the menu + profile pic to the right edge */
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.menu-btn:hover { color: var(--ink); }
.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 18px;
  z-index: 30;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(16, 20, 24, 0.14);
}
.menu-panel[hidden] { display: none; }
.menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: var(--paper); }
.back {
  align-self: center;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin: -2px 2px -2px -6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.back:hover { border-color: var(--accent); color: var(--accent); }
.back[hidden] { display: none; }
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.wordmark .caret { color: var(--accent); margin-left: 1px; }
/* the gate wordmark links back to the landing page */
a.wordmark { color: inherit; text-decoration: none; }
/* the app-header wordmark is a button that navigates home */
.wordmark-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.wordmark-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.tagline {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* topbar tier badge (swapped in for the tagline once billing is live) —
   fancier per tier: hairline -> accent outline -> tint + bolt -> gold + crown */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.tier-badge.tier-starter { border-color: var(--accent); color: var(--accent); }
.tier-badge.tier-plus {
  border-color: transparent;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
:root[data-theme="dark"] .tier-badge.tier-plus {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
/* gold pairing matches .x-badge so "premium" reads the same everywhere */
.tier-badge.tier-pro {
  border-color: #d9a514;
  color: #6b4a10;
  background: #f3d9a4;
}
:root[data-theme="dark"] .tier-badge.tier-pro {
  border-color: #b98d1e;
  color: #eccb84;
  background: #4a3a14;
}
/* desktop-only primary nav (Home / Explore / Your Peaks / Chats / Settings / Changelog) */
.top-nav {
  display: none; /* flex on ≥768px */
  align-items: center;
  gap: 4px;
  margin-left: auto; /* takes over right-alignment when the hamburger hides */
  align-self: center;
}
.top-link {
  border: none;
  background: transparent;
  padding: 6px 11px;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.top-link:hover { color: var(--ink); }
.top-link.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--paper-2);
}
.user-btn {
  align-self: center;
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
}

/* ---------- DM-style chat header (who you're messaging) ---------- */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.chat-header[hidden] { display: none; }
.chat-header .avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.chat-header .avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-info { min-width: 0; }
.chat-header-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.chat-header-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.add-peak-btn {
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.add-peak-btn:hover { background: var(--accent); color: var(--accent-ink); }
.chat-menu-wrap { position: relative; }
.chat-gear {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}
.chat-gear:hover { color: var(--ink); }
.chat-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(16, 20, 24, 0.14);
}
.chat-menu[hidden] { display: none; }
.menu-item.danger { color: var(--yt); }

.chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 24px;
  scroll-behavior: smooth;
}
.chat[hidden] { display: none; }

/* ---------- home (Popular Peaks rail + Your Peaks roster) ---------- */
.picker {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 28px;
}
.picker[hidden] { display: none; }
.home-title {
  margin: 6px 2px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.peak-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scrollbar-width: none; /* stories-style rail: scrolls, no visible bar */
}
.peak-rail::-webkit-scrollbar { display: none; }
.peak-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.peak-chip .avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  border: 2px solid var(--line);
}
.peak-chip:hover .avatar { border-color: var(--accent); }
.peak-chip .avatar img { width: 100%; height: 100%; object-fit: cover; }
.peak-chip-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.peak-chip-name { font-size: 12.5px; font-weight: 600; }
/* category tag under the name ("Career" / "Dating") — mini pill so it
   reads as a label, not a subtitle; same recipe as .kind-chip */
.peak-chip-role {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
/* dashed "New" chip at the end of the rail (desktop only) — opens the builder */
.peak-new { display: none; }
.peak-new .avatar {
  background: transparent;
  border: 2px dashed var(--line);
  color: var(--muted);
}
.peak-new:hover .avatar { border-color: var(--accent); color: var(--accent); }
.home-actions {
  display: flex;
  gap: 12px;
  margin: 4px 0 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.home-btn {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.home-btn.ghost {
  background: var(--surface);
  color: var(--ink);
}
.home-btn.ghost:hover { border-color: var(--muted); }
.home-btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.home-btn.primary:hover { opacity: 0.88; }
.home-sub {
  margin: 0 2px 26px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
/* "Start a Chat": plain block in the mobile flow, a sidebar card on desktop */
.chat-title {
  display: none; /* shown on desktop where the block becomes a card */
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
}
.roster {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2-up per the mobile mock */
  gap: 10px;
}
.roster-empty {
  grid-column: 1 / -1; /* spans the full roster grid, 1-col or 2-col */
  padding: 26px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.roster-empty p { margin: 0 0 4px; }
.roster-empty-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.agent-card {
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s;
}
.agent-card:hover { border-color: var(--muted); }
.agent-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-card .avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.agent-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.agent-info { min-width: 0; }
.agent-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.agent-tag {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* compact 2-col cards: don't let taglines run long */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agent-chevron {
  display: none; /* desktop-only affordance on full-width rows */
  margin-left: auto;
  color: var(--muted);
  flex-shrink: 0;
}
.agent-name .badge {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 1px 5px;
  vertical-align: middle;
}
/* ---------- recent activity (desktop sidebar card) ---------- */
.recent-card {
  display: none; /* block on ≥768px */
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  padding: 16px 18px;
}
.recent-card .home-title { margin: 0 0 10px; }
.recent-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.recent-item:hover { background: var(--surface); }
.recent-item svg { color: var(--muted); flex-shrink: 0; }
.recent-item .recent-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-time { color: var(--muted); flex-shrink: 0; }
.recent-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- settings view ---------- */
.settings,
.peaks-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 28px;
}
.settings[hidden],
.peaks-view[hidden] { display: none; }
.settings h2,
.peaks-view h2 {
  margin: 4px 2px 14px;
  font-family: var(--display);
  font-size: 22px;
}
.settings-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
}
.settings-card h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
}
.settings-label { margin: 0; font-size: 14px; font-weight: 600; }
.settings-hint {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.settings-row[hidden], .demo-code-row[hidden] { display: none; }
/* .home-btn stretches (flex: 1) in the Home card's button row — in a
   settings row it should just be a button. Shared min-width keeps stacked
   action buttons (Export / Reset) edge-aligned. */
.settings-row .home-btn,
.settings-row .danger-btn { flex: 0 0 auto; min-width: 104px; padding: 9px 22px; text-align: center; }
/* stacked rows inside one card read as separate rows, not one clump */
.settings-card .settings-row + .settings-row,
.settings-card .settings-row + .settings-row.disabled {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.settings .home-title { margin: 20px 2px 10px; }
.settings-row.disabled .settings-label,
.settings-row.disabled .settings-hint { color: var(--muted); }
/* theme segmented control */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper-2);
  flex-shrink: 0;
}
.seg button {
  padding: 7px 15px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.seg button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(16, 20, 24, 0.12);
}
.soon-pill {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* what's new preview rows */
.wn-row + .wn-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wn-title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 600;
}
.wn-title .nav-new { margin-left: 8px; }
.wn-all {
  margin-top: 14px;
  padding: 12px 0 0;
  border: none;
  border-top: 1px solid var(--line);
  width: 100%;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.wn-all:hover { text-decoration: underline; }
/* data section */
.settings-label.danger { color: var(--yt); }
.danger-btn {
  padding: 9px 22px;
  border: 1px solid color-mix(in srgb, var(--yt) 45%, var(--line));
  border-radius: 10px;
  background: var(--surface);
  color: var(--yt);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.danger-btn:hover { background: color-mix(in srgb, var(--yt) 8%, var(--surface)); }
.settings-foot { margin: 12px 2px 0; color: var(--muted); font-size: 12.5px; }
.settings-card + .settings-card { margin-top: 14px; }
.switch {
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 20, 24, 0.25);
  transition: transform 0.15s ease;
}
.switch.on { background: var(--ink); border-color: var(--ink); }
.switch.on .knob { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-code-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.demo-code-line { display: flex; gap: 8px; }
.demo-code-line input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.demo-code-line input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.demo-code-line .home-btn { flex: 0 0 auto; }
.demo-code-msg { margin: 0; font-size: 12.5px; color: var(--yt); }

/* ---------- demo-mode indicator (tiny divider under the header) ---------- */
.demo-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px;
  background: var(--paper);
  flex-shrink: 0;
}
.demo-divider[hidden] { display: none; }
.demo-divider::before,
.demo-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--ig));
  opacity: 0.35;
}
.demo-divider span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-2); /* fallback if background-clip: text is unsupported */
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--ig), var(--accent));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tagline-flow 5s linear infinite; /* keyframes live in the gate section */
}
@media (prefers-reduced-motion: reduce) {
  .demo-divider span { animation: none; }
}

/* ---------- "coming soon" modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(16, 20, 24, 0.45);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 220px;
  padding: 26px 28px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(16, 20, 24, 0.25);
}
.modal p {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
}
.modal .home-btn { flex: none; min-width: 120px; }

/* ---------- builder (create a custom agent) ---------- */
.builder {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 28px;
}
.builder[hidden] { display: none; }

/* ---------- changelog view ---------- */
.changelog {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 28px;
}
.changelog[hidden] { display: none; }
.changelog h2 {
  margin: 4px 2px 14px;
  font-family: var(--display);
  font-size: 22px;
}
.changelog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.changelog-table th,
.changelog-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.changelog-table th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.changelog-table td:first-child {
  white-space: nowrap;
  color: var(--muted);
}
.build-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.b-head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 4px 0 4px;
}
.b-head p { color: var(--muted); font-size: 14px; margin: 0; }
.b-field { display: flex; flex-direction: column; gap: 7px; }
.b-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
}
.b-field input[type="text"],
.b-field textarea {
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  resize: vertical;
}
.b-field input:focus-visible,
.b-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.b-hint { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin: 0; }
.b-sources { display: flex; flex-direction: column; gap: 8px; }
.b-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
}
.b-check:hover { border-color: var(--accent); }
.b-check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.b-error { color: var(--yt); font-size: 13.5px; margin: 0; }
.b-error[hidden] { display: none; }
.b-actions { display: flex; gap: 10px; margin-top: 2px; }
.b-btn {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  flex: 1;
}
.b-btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.b-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- empty state ---------- */
.empty { padding: 12vh 6px 0; }
.empty h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 9vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 12px;
}
.empty p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 22px;
}
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit;
  font-size: 14px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- messages ---------- */
.msg {
  max-width: 88%;
  margin-bottom: 14px;
  animation: rise 0.25s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .chat { scroll-behavior: auto; }
}

.msg.user {
  margin-left: auto;
  background: var(--ink); /* ink/paper flip in dark mode, like .home-btn.primary */
  color: var(--paper);
  padding: 11px 15px;
  border-radius: var(--radius);
  border-bottom-right-radius: 6px;
  font-size: 15px;
  line-height: 1.5;
}
.msg.bot {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 13px 15px;
  border-radius: var(--radius);
  border-bottom-left-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
}
.msg.bot.error { border-color: var(--yt); color: var(--yt); }

/* photos attached to a message */
.msg-images { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-images img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  display: block;
}
.msg.user .msg-images:not(:only-child) { margin-bottom: 6px; }

/* typing indicator */
.typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); opacity: 0.4;
  animation: blink 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 40% { opacity: 1; } }

/* ---------- source receipts (signature element) ---------- */
.sources { margin-top: 12px; display: grid; gap: 8px; }
.receipt {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  padding: 10px 12px;
}
.receipt:hover { border-color: var(--accent); border-left-width: 4px; }
.receipt.youtube  { border-left-color: var(--yt); }
.receipt.instagram { border-left-color: var(--ig); }
.receipt .meta { min-width: 0; }
.receipt .title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.receipt-thumb {
  width: 64px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff; /* play glyph over the gradient */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ig) 55%, var(--surface)),
    color-mix(in srgb, var(--accent-2) 55%, var(--surface))
  );
}
.receipt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.receipt-line {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.receipt-open {
  margin-left: auto;
  color: var(--muted);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

/* ---------- composer ---------- */
.composer {
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.composer form { display: flex; gap: 8px; }

/* persistent AI / crisis disclosure under the input */
.composer-note {
  margin: 6px 2px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.composer-note a { color: inherit; text-decoration: underline; }

/* pending-attachment preview strip above the input */
.attachments {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
}
.att { position: relative; }
.att img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}
.att .rm {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
#attach {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
#attach:hover { color: var(--accent); border-color: var(--accent); }
#input {
  flex: 1;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
#input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
#mic {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
#mic:hover { color: var(--accent); border-color: var(--accent); }
#send {
  width: 46px; height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
#send:disabled { opacity: 0.5; cursor: default; }
#send:focus-visible, #attach:focus-visible, #mic:focus-visible, .chip:focus-visible,
.receipt:focus-visible, .f-chip:focus-visible, .act-btn:focus-visible, .chat-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Chats experience (list + conversation + session panel) ---------- */
/* Mobile-first: the conversation fills the view; the chats list is a left
   drawer and the session panel a slide-up sheet, both over one scrim. */
.chats-layout {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.chats-layout[hidden] { display: none; }
.chats-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app.chat-open .demo-divider { display: none; } /* per the mockup: no divider bar in chat */
.empty .home-btn { margin-top: 18px; }

/* chats list (drawer <768px) */
.chats-list {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(300px, 85vw);
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 14px;
  overflow-y: auto;
  transform: translateX(-102%);
  transition: transform 220ms ease;
  z-index: 45;
}
.chats-list.open { transform: none; }
.chats-rows { display: flex; flex-direction: column; gap: 2px; }
.chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.chat-row:hover { background: var(--surface); }
.chat-row.active {
  background: var(--surface);
  border-color: var(--line);
}
.chat-row .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
}
.chat-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-row-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row-time {
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}
.chats-empty { color: var(--muted); font-size: 13.5px; padding: 4px 2px; }

/* header extras: drawer/sheet toggles + online status */
.list-toggle,
.session-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.list-toggle:hover,
.session-toggle:hover { color: var(--ink); }
.chat-header-sub.online { color: var(--muted); }
.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 5px;
}

/* date divider pill ("Today, 9:12 AM") */
.day-divider {
  width: fit-content;
  margin: 4px auto 14px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

/* save / thumbs actions under coach messages */
.msg-actions {
  display: flex;
  gap: 6px;
  margin: -8px 0 14px;
}
.act-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.act-btn:hover { color: var(--ink); }
.act-btn.on { color: var(--accent); border-color: var(--accent); }

/* quick-reply chips above the composer */
.followups {
  display: flex;
  gap: 8px;
  padding: 8px 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--paper);
}
.followups::-webkit-scrollbar { display: none; }
.followups[hidden] { display: none; }
.f-chip {
  flex-shrink: 1;
  min-width: 0;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* long suggestions never overflow the pill */
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.f-chip:hover { border-color: var(--accent); color: var(--accent); }

/* per-coach goal: "Working on" panel card + inline thread confirmation */
.goal-card {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.goal-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
}
.goal-label {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.goal-icon { display: grid; place-items: center; flex-shrink: 0; }
.goal-text {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.goal-edit-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.goal-edit-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.goal-input {
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.goal-edit-row { display: flex; gap: 8px; margin-top: 8px; }
.goal-save,
.goal-cancel {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.goal-save {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
}
.goal-cancel {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.goal-empty {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center;
}
.goal-empty p { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.goal-set-btn {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.goal-set-btn:hover { border-color: var(--accent); color: var(--accent); }
/* inline "Goal set: …" confirmation in the thread */
.goal-set-card {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 88%;
  margin: -8px 0 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  animation: rise 0.25s ease both;
}
.goal-set-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* mobile-only hint next to "first session" in the chat header */
.fs-hint { color: var(--muted); }

/* ---------- calendar events: proposal card, check-in actions, win card ---------- */
.kind-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.kind-chip.session {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: color-mix(in srgb, var(--ok) 75%, var(--ink));
}
.proposal-card {
  max-width: 88%;
  margin: -8px 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  animation: rise 0.25s ease both;
}
.p-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.p-title { font-size: 14.5px; line-height: 1.35; }
.p-when {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.p-actions { display: flex; gap: 8px; margin-top: 12px; }
.p-accept {
  flex: 1;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.p-decline {
  flex: 1;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.proposal-card.accepted {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--ok);
}
.p-icon { display: grid; place-items: center; flex-shrink: 0; }
.p-done-text { flex: 1; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.p-view {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.p-view:hover { text-decoration: underline; }
/* Mark done / Reschedule under a coach check-in message */
.checkin-actions { display: flex; gap: 8px; margin: -8px 0 14px; flex-wrap: wrap; }
.ci-done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ci-resched {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.ci-date {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.ci-note { margin: -8px 0 14px; color: var(--muted); font-size: 13px; }
.win-card {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 88%;
  margin: -8px 0 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
  font-size: 13.5px;
  font-weight: 600;
  animation: rise 0.25s ease both;
}
/* "Next up" session-panel card */
.nextup-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nextup-title { margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.nextup-line { margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.nextup-link {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.nextup-link:hover { text-decoration: underline; }
.nextup-empty { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- Calendar view ---------- */
.calendar-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 28px;
}
.calendar-view[hidden] { display: none; }
.calendar-view h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.cal-day {
  margin: 18px 2px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cal-day:first-child { margin-top: 4px; }
.cal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 10px;
}
.cal-row.due { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cal-row .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
}
.cal-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.cal-main { flex: 1; min-width: 0; }
.cal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  min-width: 0;
}
.cal-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-sub { margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.cal-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.cal-open {
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cal-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cal-icon-btn:hover { color: var(--ink); border-color: var(--ink); }
.cal-status { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cal-status.done { color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }
.cal-row.past { opacity: 0.75; }
.cal-past-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  padding: 12px 4px;
  border: none;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.cal-past-sum { font-weight: 500; }
.cal-none { color: var(--muted); font-size: 14px; padding: 4px 2px; }
.cal-empty {
  text-align: center;
  padding: 12vh 16px 0;
}
.cal-empty p {
  max-width: 40ch;
  margin: 0 auto 16px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}
/* Home: next check-in pill (inside the Start a Chat card) */
.checkin-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.checkin-pill[hidden] { display: none; }
.pill-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- streak states, rep ring, resurfacing, peak-card polish ---------- */
.streak-card.broken .streak-flame {
  background: var(--paper-2);
  color: var(--muted);
}
.streak-card.broken .streak-count { color: var(--muted); }
.streak-info { flex: 1; min-width: 0; }
.repaired-chip {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: color-mix(in srgb, var(--ok) 65%, var(--ink));
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}
.repair-btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.repair-btn:hover { border-color: var(--accent); color: var(--accent); }
.rep-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rep-ring { flex-shrink: 0; display: grid; place-items: center; color: var(--ink); }
.rep-body { flex: 1; min-width: 0; }
.rep-body .rep-text { margin: 0 0 6px; }
.rep-done-btn {
  margin-top: 10px;
  padding: 7px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rep-done-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* resurfaced saved advice at the top of a session */
.resurface-card {
  max-width: 88%;
  margin: 0 0 14px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  animation: rise 0.25s ease both;
}
.resurface-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.resurface-head svg { color: var(--accent); }
.resurface-quote {
  margin: 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
}
/* roster cards: streak flame + goal snippet */
.agent-goal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-goal .goal-icon { color: var(--accent); flex-shrink: 0; }
.agent-goal.none { color: var(--muted); font-weight: 500; }
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #f5a623 18%, var(--surface));
  color: color-mix(in srgb, #9a6a00 80%, var(--ink));
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.streak-badge svg { color: var(--yt); }

/* ---------- You view (stats · recap · patterns · wins · goals) ---------- */
.you-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 28px;
}
.you-view[hidden] { display: none; }
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 14px 16px;
}
.stat-label { color: var(--muted); font-size: 12.5px; }
.stat-value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stat-icon { color: var(--yt); display: grid; place-items: center; }
.you-grid { display: grid; gap: 20px; }
.you-section + .you-section { margin-top: 20px; }
/* weekly recap card (accent-tinted, like the rep card) */
.recap-card {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  padding: 16px 18px;
  margin-bottom: 20px;
}
.recap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.recap-title { color: var(--accent); font-size: 13px; font-weight: 700; }
.recap-hint { color: var(--muted); font-size: 11.5px; flex-shrink: 0; }
.recap-text {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
}
.recap-foot { margin-top: 10px; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); font-size: 12.5px; font-weight: 600; }
/* patterns */
.patterns-card { margin-bottom: 0; }
.chip-group + .chip-group { margin-top: 12px; }
.chip-group-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 7px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.insight-chip {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.insight-chip.good {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: color-mix(in srgb, var(--ok) 60%, var(--ink));
}
.insight-chip.warn {
  background: color-mix(in srgb, #f5a623 20%, var(--surface));
  color: color-mix(in srgb, #9a6a00 75%, var(--ink));
}
.insight-chip.flat {
  background: var(--paper-2);
  color: var(--ink);
}
.patterns-card .chip-group-label:not(:first-child),
.patterns-card > .chip-group-label { margin-top: 12px; }
.most-line { margin: 0; font-size: 14px; font-weight: 600; }
.patterns-loading { margin: 0 0 4px; color: var(--muted); font-size: 13.5px; }
.patterns-locked {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 16px;
}
.patterns-locked p { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.unlock-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}
.unlock-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.unlock-count { margin-top: 7px; color: var(--muted); font-size: 12px; }
/* wins */
.wins-card { margin-bottom: 0; }
.wins-card .chip-group-label { margin: 4px 0 6px; }
.wins-card .chip-group-label:not(:first-child) { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.win-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.win-row .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
}
.win-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.win-dot {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
  flex-shrink: 0;
}
.win-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.win-when { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.add-win-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.add-win-btn:hover { border-color: var(--accent); color: var(--accent); }
.add-win-row { display: flex; gap: 8px; margin-top: 12px; }
.add-win-row .goal-input { margin-top: 0; flex: 1; }
/* goals overview */
.goals-card { margin-bottom: 0; padding: 6px 8px; }
.goal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.goal-row:hover { background: var(--paper); }
.goal-row + .goal-row { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.goal-row .avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
}
.goal-row .avatar img { width: 100%; height: 100%; object-fit: cover; }
.goal-row-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.goals-card .saved-empty { padding: 10px; }
/* Home "Your week" card */
.week-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 18px;
}
.week-card .home-title { margin: 0 0 8px; }
.week-headline { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.week-dots-row { display: flex; align-items: center; gap: 10px; }
.week-dots { display: flex; gap: 8px; }
.week-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper-2);
}
.week-dot.on { background: var(--accent); }
.week-dot.today:not(.on) { border: 1.5px dashed var(--muted); background: transparent; }
.week-dot.future:not(.today) { opacity: 0.55; }
.week-range { color: var(--muted); font-size: 11.5px; }
.week-link {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.week-link:hover { text-decoration: underline; }

/* "New" badge on freshly launched nav items */
.nav-new {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* "This session" panel (slide-up sheet <768px) */
.session-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78%;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(102%);
  transition: transform 240ms ease;
  z-index: 45;
}
.session-panel.open { transform: none; }
.session-grabber {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 2px auto 12px;
}
.panel-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.streak-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.streak-flame {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--yt) 12%, var(--surface));
  color: var(--yt);
  flex-shrink: 0;
}
.streak-count {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.panel-sub { color: var(--muted); font-size: 12px; }
.rep-card {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.rep-title {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.rep-text {
  margin: 6px 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.rep-checkin { color: var(--muted); font-size: 12.5px; }
.saved-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}
.saved-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.saved-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.saved-text:hover { color: var(--accent); }
.saved-rm {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.saved-rm:hover { color: var(--yt); }
.saved-empty { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 0 2px; }

/* dims the conversation behind an open drawer/sheet */
.chats-scrim {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(16, 20, 24, 0.35);
  border: none;
}
.chats-scrim[hidden] { display: none; }

/* ---------- desktop ---------- */
@media (min-width: 768px) {
  .app {
    max-width: 1100px;
    height: calc(100dvh - 48px);
    margin: 24px auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--paper);
  }
  /* header: nav links replace the hamburger */
  .menu-btn { display: none; }
  .top-nav { display: flex; }
  /* non-chat views read as the same centered column inside the wider frame
     (the chat now lives in its own three-column grid below) */
  .chat { padding: 24px 28px; }
  .msg { max-width: 76%; }
  .builder, .changelog, .settings, .peaks-view, .explore, .calendar-view { width: 100%; max-width: 780px; margin-inline: auto; }
  .calendar-view { padding: 24px 32px 32px; }
  /* You hub: 4-up stats, then insight column + wins/goals sidebar */
  .you-view { width: 100%; max-width: 900px; margin-inline: auto; padding: 24px 32px 32px; }
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
  .you-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

  /* Chats: three columns — list | conversation | session panel */
  .chats-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
  }
  .chats-layout[hidden] { display: none; }
  .chats-layout.no-chats { grid-template-columns: minmax(0, 1fr); }
  .chats-layout.no-chats .chats-list,
  .chats-layout.no-chats .session-panel { display: none; }
  .chats-main { min-width: 0; }
  .chats-list {
    position: static;
    width: auto;
    transform: none;
    z-index: auto;
    transition: none;
  }
  .session-panel {
    position: static;
    max-height: none;
    transform: none;
    z-index: auto;
    transition: none;
    border: none;
    border-left: 1px solid var(--line);
    border-radius: 0;
    padding: 14px 16px;
  }
  /* mobile chrome disappears on the grid */
  .list-toggle, .session-toggle, .session-grabber, .chats-scrim, .fs-hint { display: none; }
  .chats-main .empty h1 { font-size: clamp(26px, 3.2vw, 34px); }
  .followups { padding-inline: 28px; }
  /* home: two columns — main content left, Start a Chat + Recent sidebar right */
  .picker {
    padding: 28px 32px 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "popular side1"
      "popular week"
      "peaks side2";
    align-content: start;
    align-items: start;
    column-gap: 28px;
    row-gap: 26px;
  }
  .picker[hidden] { display: none; }
  .home-popular { grid-area: popular; }
  .home-peaks { grid-area: peaks; }
  .week-card { grid-area: week; }
  .peak-new { display: flex; }
  .chat-card {
    grid-area: side1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 18px;
  }
  .chat-title { display: block; order: -2; }
  .chat-card .home-sub { order: -1; margin: 0 0 14px; }
  .chat-card .home-actions {
    /* Quick Chat (primary) above Build — DOM order is reversed for mobile */
    flex-direction: column-reverse;
    border-top: none;
    padding-top: 0;
    margin: 0;
    gap: 10px;
  }
  .recent-card { display: block; grid-area: side2; }
  .roster { grid-template-columns: 1fr; }
  .agent-card { padding: 12px 14px; }
  .agent-name { font-size: 15.5px; }
  .agent-chevron { display: grid; place-items: center; }
}

/* ---------- sign-in gate (Clerk renders the card; we render the page) ----------
   Brand row pinned at the top, card (max 400px) centered in the remaining
   space via margin:auto. Spacing scales with the viewport via clamp(). */
.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh; /* body is position:fixed — the gate owns the viewport */
  overflow-y: auto;
  padding: clamp(16px, 3vh, 28px) clamp(16px, 5vw, 28px);
  gap: clamp(12px, 2.5vh, 24px);
  background:
    radial-gradient(900px 460px at 50% -140px, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(720px 420px at 88% 112%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 70%),
    var(--paper);
}
.gate[hidden] { display: none; }
.gate-brand {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.gate-brand .wordmark {
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1.15; /* enough box for ascenders/descenders — no clipping */
}
.gate-form {
  width: 100%;
  max-width: 400px;
  margin: auto 0; /* centers the card in the space below the brand row */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* children span the card's width */
  gap: clamp(20px, 3vh, 28px);
  padding: clamp(24px, 4vh, 32px) clamp(20px, 5vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 24px 48px -16px rgba(16, 20, 24, 0.14),
    0 4px 12px rgba(16, 20, 24, 0.05);
  text-align: center;
}
:root[data-theme="dark"] .gate-form {
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
}
.gate-tagline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--accent); /* fallback if background-clip: text is unsupported */
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-2),
    var(--accent)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tagline-flow 5s linear infinite;
}
@keyframes tagline-flow {
  from { background-position: 0% 50%; }
  to { background-position: -200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-tagline { animation: none; }
}
/* Gate status ("Loading…"/errors) as a small pill badge; hidden once sign-in mounts. */
.gate-sub {
  margin: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#clerkSignIn {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* age + terms attestation under the sign-in card */
.gate-legal {
  margin: 14px auto 0;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.gate-legal a { color: inherit; text-decoration: underline; }

/* first-run AI notice modal */
.ai-notice { max-width: 420px; text-align: left; }
.ai-notice h3 { margin: 0 0 10px; }
.ai-notice p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.ai-notice a { color: inherit; text-decoration: underline; }
.ai-notice-links { color: var(--muted); font-size: 13px; }
/* Blend the Clerk component into our card: kill its own card chrome and
   hide its header/footer link — our tagline and tabs replace them. */
#clerkSignIn .cl-rootBox { width: 100%; }
#clerkSignIn .cl-cardBox {
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* Clerk clips children to its (now-flattened) rounded card; that shaves
     the outer edge off full-width children like the input and Continue. */
  overflow: visible !important;
}
#clerkSignIn .cl-card,
#clerkSignIn .cl-main,
#clerkSignIn .cl-form {
  overflow: visible !important;
}
#clerkSignIn .cl-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 0 !important;
}
/* NOTE: we intentionally do NOT hide .cl-header globally — Clerk reuses that
   same block for later-step status messages (e.g. "check your email, we
   sent you a sign-in link"), and hiding it made those messages invisible
   with no indication anything happened. Instead we blank just the first
   step's title/subtitle via localization (see Clerk.load() in app.js) and
   style the header to match our theme so later steps look intentional. */
#clerkSignIn .cl-header {
  margin-bottom: 4px;
}
#clerkSignIn .cl-headerTitle {
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
#clerkSignIn .cl-headerSubtitle {
  color: var(--muted) !important;
  font-size: 13.5px !important;
}
#clerkSignIn .cl-footerAction { display: none !important; }
#clerkSignIn .cl-footer { background: transparent !important; }
#clerkSignIn .cl-footerItem {
  border-top: none !important;
  margin-top: 30px !important;
}
/* "Secured by Clerk" badge hardcodes a light-mode gray that our theme
   variables don't reach — force it to follow our muted token, kept small
   and faded so it reads as a quiet footnote. */
#clerkSignIn .cl-footer,
#clerkSignIn .cl-footer * {
  color: var(--muted) !important;
  font-size: 12px !important;
}
#clerkSignIn .cl-footer { opacity: 0.75; }
/* Account popover (click the avatar): confirmed via the actual rendered DOM
   that Clerk uses data-color="inherit"/"secondary" here, which resolves to a
   hardcoded light-mode color our theme variables never reach. Force it. */
.cl-userPreviewMainIdentifierText,
.cl-userPreviewMainIdentifier {
  color: var(--ink) !important;
}
.cl-userPreviewSecondaryIdentifier {
  color: var(--muted) !important;
}
[class*="cl-userButtonPopoverFooter" i],
[class*="cl-userButtonPopoverFooter" i] * {
  color: var(--muted) !important;
}
/* "Manage account" modal: same problem, bigger surface — every label,
   heading, and value in there hardcodes light-mode text. Force the whole
   modal to follow the active theme (partial-class match, since Clerk
   hashes these class names and exact matches keep breaking). */
[class*="cl-modal" i] *,
[class*="cl-userProfile" i],
[class*="cl-userProfile" i] *,
[class*="cl-profilePage" i],
[class*="cl-profilePage" i] * {
  color: var(--ink) !important;
}
/* Clerk's "Last used" badge on the most recently used social button —
   overlaps the button and isn't part of the mock, so hide it. */
#clerkSignIn .cl-lastAuthenticationStrategyBadge {
  display: none !important;
}
/* Social buttons: ABOVE the divider (socialButtonsPlacement: "top" in
   app.js), stacked — one full-width row per provider. */
#clerkSignIn .cl-socialButtons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  width: 100%;
}
#clerkSignIn .cl-dividerRow,
#clerkSignIn .cl-divider {
  margin: 16px 0 !important; /* space between socials, divider, and the form */
}
/* The "or" text + line default to a hardcoded gray that vanishes against a
   dark card background — force every descendant to follow our muted token
   regardless of Clerk's exact internal class name. */
#clerkSignIn .cl-dividerRow,
#clerkSignIn .cl-divider,
#clerkSignIn .cl-dividerRow *,
#clerkSignIn .cl-divider * {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  background: none;
}
#clerkSignIn .cl-dividerLine {
  background: var(--line) !important;
}
#clerkSignIn .cl-socialButtonsBlockButton {
  height: 44px;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  transition: background 150ms ease, border-color 150ms ease;
}
#clerkSignIn .cl-socialButtonsBlockButton:hover {
  background: var(--paper) !important;
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line)) !important;
}
#clerkSignIn .cl-socialButtonsBlockButton:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
/* Apple's glyph is black; invert it in dark mode so it stays visible. */
[data-theme="dark"] #clerkSignIn .cl-providerIcon__apple,
[data-theme="dark"] #clerkSignIn .cl-socialButtonsBlockButton__apple img,
[data-theme="dark"] #clerkSignIn img[src*="apple" i] {
  filter: invert(1) !important;
}
/* Form fields: small muted label, bordered input with a clear focus ring,
   gradient Continue button, quiet "Forgot?" link. */
#clerkSignIn .cl-formFieldLabel,
#clerkSignIn .cl-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}
#clerkSignIn .cl-formFieldInput,
#clerkSignIn .cl-input {
  height: 46px;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--paper) !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 14px !important;
  font-size: 16px !important; /* ≥16px so iOS Safari doesn't zoom on focus */
  color: var(--ink) !important;
  text-align: left !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* Password input sits inside a wrapper (for the eye icon) that carries its
   own box chrome — strip it so it matches the borderless email field. */
#clerkSignIn .cl-formFieldInputGroup,
#clerkSignIn .cl-formFieldInputWrapper,
#clerkSignIn [class*="cl-formFieldInput"][class*="password" i],
#clerkSignIn [class*="inputGroup"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Chrome autofill paints its own light-blue fill; repaint with the input bg. */
#clerkSignIn input:-webkit-autofill,
#clerkSignIn input:-webkit-autofill:hover,
#clerkSignIn input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
}
#clerkSignIn .cl-formFieldInput::placeholder,
#clerkSignIn .cl-input::placeholder {
  color: var(--muted) !important;
  opacity: 0.8 !important;
}
#clerkSignIn .cl-formFieldInput:focus,
#clerkSignIn .cl-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
#clerkSignIn .cl-formButtonPrimary {
  height: 46px;
  border: none !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--accent-ink) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 86%, #fff),
    var(--accent)
  ) !important;
  box-shadow:
    0 1px 2px rgba(16, 20, 24, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
#clerkSignIn .cl-formButtonPrimary:hover { filter: brightness(1.06); }
#clerkSignIn .cl-formButtonPrimary:active { transform: translateY(1px); }
#clerkSignIn .cl-formButtonPrimary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
#clerkSignIn .cl-formFieldAction, /* "Forgot password?" link */
#clerkSignIn .cl-formFieldHintText {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Explore view (mobile-first rows; card grid ≥768px) ---------- */
.explore {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 0;
}
.explore[hidden] { display: none; }
.explore-title {
  margin: 4px 2px 14px;
  font-family: var(--display);
  font-size: 24px;
  flex-shrink: 0;
}
.explore-search { position: relative; flex-shrink: 0; }
.explore-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.explore-search input {
  width: 100%;
  padding: 12px 14px 12px 41px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
}
.explore-search input::placeholder { color: var(--muted); }
.explore-search input:focus { outline: none; border-color: var(--accent); }
.explore-chips {
  display: flex;
  gap: 8px;
  margin: 12px 0 2px;
  overflow-x: auto;
  scrollbar-width: none; /* single scrollable row on mobile */
  flex-shrink: 0;
}
.explore-chips::-webkit-scrollbar { display: none; }
.x-chip { /* "x-" prefix — .chip is taken by the chat citation chips */
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.x-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.x-label {
  margin: 18px 2px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.explore-section[hidden] { display: none; }
.x-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* card reads as a horizontal list row on mobile: avatar | name+desc | action */
.x-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar id action"
    "avatar desc action";
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.x-soon { border-style: dashed; }
.x-avatar {
  grid-area: avatar;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}
.x-soon .x-avatar {
  background: var(--paper-2);
  color: var(--muted);
}
.x-id { grid-area: id; align-self: end; min-width: 0; }
.x-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
}
/* category pill next to the name ("Career") — same recipe as .peak-chip-role */
.x-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.x-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3d9a4;
  color: #6b4a10;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
:root[data-theme="dark"] .x-badge { background: #4a3a14; color: #eccb84; }
.x-desc {
  grid-area: desc;
  align-self: start;
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap; /* one line on mobile rows */
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-action { grid-area: action; }
.x-chat {
  border: none;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.x-chat .x-lg { display: none; } /* "Start chat" on desktop, "Chat" on mobile */
.x-notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none; /* mobile: bare bell icon */
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.x-notify.on { color: var(--accent); }
.x-notify .x-notify-label { display: none; } /* label is desktop-only */
.x-extra { display: none; } /* coming-soon rows past the mobile preview */
.x-more {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 4px;
  cursor: pointer;
}
.x-build-card { display: none; } /* desktop-only grid card; mobile uses the footbar */
.x-empty {
  margin: 24px 2px;
  color: var(--muted);
  font-size: 14px;
}
.x-footbar {
  position: sticky;
  bottom: 0;
  margin-top: auto; /* pins to the bottom edge when content runs short */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
.x-footbar span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.x-build-btn {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.x-build-btn:hover { border-color: var(--accent); color: var(--accent); }
.explore-section:last-of-type { padding-bottom: 16px; }

@media (min-width: 768px) {
  .explore { padding: 24px 32px 28px; }
  .explore-title { display: none; } /* desktop leads with the search bar */
  .explore-chips { flex-wrap: wrap; overflow: visible; }
  .x-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  /* cards go vertical: avatar + name header, full description, wide button.
     The 1fr desc row absorbs the height difference so every card in a grid
     row bottom-aligns its action button. */
  .x-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "avatar id"
      "desc desc"
      "action action";
    padding: 18px;
    row-gap: 0;
  }
  .x-id { align-self: center; }
  .x-desc {
    white-space: normal;
    margin: 12px 0 14px;
    font-size: 13.5px;
  }
  .x-action { justify-self: stretch; }
  .x-chat { padding: 11px 16px; }
  .x-chat .x-lg { display: inline; }
  .x-chat .x-sm { display: none; }
  .x-notify {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    padding: 10px 14px;
  }
  .x-notify.on { border-color: var(--accent); color: var(--accent); }
  .x-notify .x-notify-label { display: inline; }
  .x-extra { display: grid; } /* desktop always shows the full coming-soon grid */
  .x-more { display: none; }
  .x-build-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper-2);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
  }
  .x-build-card:hover { color: var(--ink); }
  .x-build-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
  }
  .x-build-sub { font-size: 12.5px; }
  .x-footbar { display: none; }
}

/* ---------- paywall modal (dormant until PAYWALL_ENABLED) ---------- */
.pw-modal {
  align-items: stretch;
  min-width: 280px;
  max-width: 340px;
  gap: 10px;
}
.pw-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.pw-sub {
  margin: -4px 0 4px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--muted);
  text-align: center;
}
.pw-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pw-option:disabled { opacity: 0.6; cursor: wait; }
.pw-option .pw-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
}
.pw-option .pw-price {
  font-size: 12.5px;
  color: var(--muted);
}
.pw-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.pw-primary .pw-price { color: color-mix(in srgb, var(--paper) 75%, transparent); }
.pw-option.busy { opacity: 0.7; }
.pw-msg {
  margin: 0;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  font-family: var(--sans) !important;
  color: var(--yt);
  text-align: center;
}
.pw-later {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 4px;
  cursor: pointer;
}
.pw-later:hover { color: var(--ink); }

/* paywall v2: tier price tag + annual toggle */
.pw-tag {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}
.pw-primary .pw-tag { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.pw-annual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.pw-annual input { accent-color: var(--accent); }

/* Settings footer: legal links */
.legal-foot a { color: var(--muted); text-decoration: underline; }
.legal-foot a:hover { color: var(--ink); }