/* SPDX-License-Identifier: AGPL-3.0-or-later */
:root {
  --bg: #0e0e14;
  --panel: #171722;
  --panel-2: #1f1f2e;
  --ink: #e9e9f2;
  --muted: #9a9ab0;
  --line: #2b2b3d;
  --accent: #c77dff;
  --accent-2: #7dd3fc;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;
  --them: #fb923c;   /* the other person — distinct from you (purple) and your AI (blue) */
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #1b1030 0%, var(--bg) 55%);
  color: var(--ink);
  min-height: 100vh;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(14, 14, 20, 0.85);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.brand { font-size: 18px; letter-spacing: 0.2px; }
.brand.big { font-size: 22px; margin-bottom: 10px; }
#app { min-height: 100vh; }
/* auth / settings / profile cards center themselves; chat goes full-bleed */
#app > .card.narrow { margin: 24px auto; }
.authcard { text-align: left; }

.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card.narrow { max-width: 520px; margin: 20px auto; }
h1 { font-size: 24px; margin: 0 0 10px; line-height: 1.25; }
h2 { font-size: 18px; margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 14px; }
.hidden { display: none !important; }

label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  background: #0f0f18;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

button {
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  padding: 9px 16px;
}
button.primary { background: linear-gradient(180deg, var(--accent), #9d4edd); border: none; color: #fff; font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.link { background: none; border: none; color: var(--accent-2); padding: 4px 0; }
button:disabled { opacity: 0.55; cursor: default; }

.tabs { display: flex; gap: 8px; margin: 16px 0 12px; }
.tab { flex: 1; }
.tab.active { border-color: var(--accent); color: var(--accent); }

.error { color: var(--err); font-size: 13px; margin: 0; }
form { display: grid; gap: 12px; }

.pill { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.pill.sender { color: var(--accent); }
.pill.receiver { color: var(--accent-2); }

.thread-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 8px;
  cursor: pointer;
}
.thread-row:hover { border-color: var(--accent); }
.thread-row .sub { font-weight: 600; }
.empty { color: var(--muted); padding: 12px 2px; }

.block {
  white-space: pre-wrap;
  background: #0d0d16;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  margin: 10px 0;
}
.block.reply { border-left-color: var(--accent-2); }
.stage-label { color: var(--muted); font-size: 13px; margin-top: 18px; }
.notice { color: var(--warn); font-size: 13px; }
.spinner { color: var(--muted); font-size: 14px; }

/* a thread waiting on you */
.thread-row.actionable { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pill.new { color: #fff; background: linear-gradient(180deg, var(--accent), #9d4edd); border: none; }

/* original message, tucked behind a toggle */
details.original { margin: 8px 0 2px; }
details.original > summary {
  cursor: pointer;
  color: var(--accent-2);
  font-size: 13px;
  list-style: none;
  padding: 4px 0;
}
details.original > summary::-webkit-details-marker { display: none; }
details.original > summary::before { content: "▸ "; }
details.original[open] > summary::before { content: "▾ "; }

/* quick-reply buttons */
.quick { margin-top: 12px; }
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.chip {
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--panel-2);
  color: var(--ink);
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
#quick-options { margin-top: 6px; }

/* think-it-through panel — a private chat with your own AI about the message */
.ask {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-2) 5%, transparent);
}
.ask .quick-row { margin-top: 8px; }
.ask-log { display: grid; gap: 8px; margin: 10px 0; max-height: 300px; overflow-y: auto; }
.ask-log:empty { margin: 0; }
.ask-turn { padding: 9px 12px; border-radius: 10px; font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.ask-turn.you { background: var(--panel-2); border: 1px solid var(--line); justify-self: end; max-width: 85%; }
.ask-turn.ai { background: #0d0d16; border: 1px solid var(--line); border-left: 3px solid var(--accent-2); }

/* private relationship notes */
details.notes {
  margin: 4px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  padding: 10px 14px;
}
details.notes > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
details.notes > summary::-webkit-details-marker { display: none; }
details.notes > summary::before { content: "🔒 "; }
.notes-body { display: grid; gap: 8px; margin-top: 10px; font-size: 14px; }
.notes-body ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.notes-k {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-right: 6px;
}

/* connection wizard */
.guide {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent-2) 5%, transparent);
}
.guide-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.guide-link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-2), #38bdf8);
  color: #04222e;
  font-weight: 600;
  text-decoration: none;
}
.guide-link:hover { filter: brightness(1.08); }

/* forgot-password note + reset */
.note-line { color: var(--ok); font-size: 13px; margin: 0; }
#forgot { margin-top: 4px; }

/* flag conversation */
.flag-link { color: var(--warn); margin-top: 8px; }
.flag-box {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--warn) 5%, transparent);
}
.ok-notice { color: var(--ok); }

/* ===================== chat app ===================== */
.chat-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.sidebar {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--line);
}
.icon-btn {
  background: none; border: none; color: var(--muted); font-size: 20px; padding: 4px 8px; border-radius: 8px;
}
.icon-btn:hover { color: var(--ink); background: var(--panel-2); }
.new-chat { display: block; width: calc(100% - 24px); margin: 12px; }
/* sidebar Reflect button — a second, distinct call to action: New chat is purple,
   Reflect is teal, so both invite a tap but read as clearly different things. */
.reflect-btn {
  display: block; width: calc(100% - 24px); margin: 0 12px 8px;
  padding: 11px 12px; border-radius: 10px; font-weight: 700; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--accent-2), #38bdf8); color: #04222e;
}
.reflect-btn:hover { filter: brightness(1.07); }

/* sidebar Compass glance — a couple of confirmed traits, a couple you're aiming
   at, tucked below the chats. A quiet mirror, not a scoreboard. */
.growth-strip { flex: none; margin: 4px 12px 2px; display: grid; gap: 4px; }
.growth-strip:empty { display: none; }
.growth-head {
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.growth-head:hover { color: var(--ink); }
.growth-head .gh-more { font-weight: 500; color: var(--accent-2); }
.growth-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border-radius: 9px; cursor: pointer; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
}
.growth-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.growth-row.green { border-color: color-mix(in srgb, #34d399 40%, var(--line)); }
.growth-row .gr-dot { flex: none; font-size: 13px; }
.growth-row .gr-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-row .gr-tag { flex: none; font-size: 11px; color: var(--muted); }
.growth-nudge {
  display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-2) 10%, var(--panel-2));
  border: 1px dashed color-mix(in srgb, var(--accent-2) 45%, var(--line)); color: var(--ink);
}
.growth-nudge:hover { border-style: solid; }
.growth-nudge .gn-title { font-size: 13px; font-weight: 700; }
.growth-nudge .gn-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* reflect view — a single-pane solo chat */
.reflect { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.reflect-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.reflect-head .pane-label { margin: 0; }
.reflect-head #reflect-feedback { margin-left: auto; }
.reflect-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.reflect .composer { flex: none; }

/* first-run "about me" welcome card in the empty main pane */
.profile-nudge { max-width: 460px; margin: 40px auto; text-align: center; display: grid; gap: 10px; justify-items: center; padding: 0 20px; }
.profile-nudge h3 { margin: 6px 0 0; }
.profile-nudge .row { margin-top: 6px; }

/* API-key input with a show/hide toggle */
.key-input { display: flex; gap: 8px; align-items: stretch; }
.key-input input { flex: 1; min-width: 0; }
.key-toggle {
  flex: none; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
}
.key-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* credit-purchase buttons + toast */
.credit-btns { gap: 8px; margin-top: 6px; }
.credit-btns .primary { padding: 8px 18px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  background: color-mix(in srgb, var(--accent) 92%, #000); color: #fff;
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 100; max-width: 90vw; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* reflect intro card: daily prompt + "last time" memory line */
.reflect-intro .reflect-last { margin: 4px 0 8px; font-style: italic; }
.reflect-intro .reflect-prompt { margin-top: 12px; text-align: left; white-space: normal; }
.reflect-starters-label { margin: 14px 0 8px; }
.reflect-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.reflect-starters .reflect-starter { text-align: left; white-space: normal; }
/* example-answer starters (self-survey + rater questions) */
.survey-eg-label { margin: 10px 0 6px; }
.survey-eg, .rf-eg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.survey-eg .chip, .rf-eg { text-align: left; white-space: normal; }
.rf-eg-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; }
/* "How your key is protected" disclosure on the connect form */
.key-trust { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: color-mix(in srgb, var(--ok) 5%, transparent); }
.key-trust > summary { cursor: pointer; color: var(--ok); font-size: 14px; font-weight: 600; list-style: none; }
.key-trust > summary::-webkit-details-marker { display: none; }
.key-trust > summary::before { content: "▸ "; }
.key-trust[open] > summary::before { content: "▾ "; }
.key-trust ul { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.key-trust b { color: var(--ink); }
/* starter elaboration bubble: tailored follow-up + a box to add a detail */
.reflect-starter-bubble .starter-elab { width: 100%; margin: 10px 0 4px; resize: vertical; }
.reflect-starter-bubble .row { align-items: center; gap: 10px; margin-top: 6px; }
.reflect-fb-box .reflect-fb-note { width: 100%; margin: 8px 0; resize: vertical; }
.reflect-fb-box .row { align-items: center; gap: 10px; }
/* goal-confirm card in the reflection */
.goal-card .goal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.goal-card .goal-text { flex: 1 1 220px; min-width: 0; }
.goal-card .goal-by { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.goal-card .goal-optin { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 4px; cursor: pointer; }
.goal-card .row { align-items: center; gap: 10px; margin-top: 8px; }
/* free-tier chip — "N free messages left" / connect prompt */
.free-chip { display: none; }
.free-chip.show {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  margin: 0 12px 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.free-chip.out { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.free-chip .free-line { color: var(--ink); }
.free-chip .link { padding: 0; font-size: 12px; }

.conv-list { flex: 1; overflow-y: auto; padding: 4px; min-height: 0; }
/* bottom-of-sidebar support block: credits + tip, under all the chats */
.side-support { flex: none; border-top: 1px solid var(--line); padding-top: 8px; }
.side-support-line { margin: 0 12px 6px; }
.side-support .credit-btns { margin: 0 12px 8px; gap: 6px; }
.credit-btns .primary.sm { padding: 6px 0; flex: 1; font-size: 14px; }

/* quiet tip link pinned to the bottom of the sidebar, under all the chats */
.side-tip {
  flex: none; margin: 8px 12px 12px; padding: 9px 12px; border-radius: 10px;
  text-align: center; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--muted); border: 1px solid var(--line); background: var(--panel-2);
  transition: color .15s ease, border-color .15s ease;
}
.side-tip:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.conv-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 12px; border: none; background: none; border-radius: 10px; color: var(--ink); cursor: pointer;
}
.conv-row:hover { background: var(--panel-2); }
.conv-row.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.conv-row.unread .conv-name { font-weight: 700; }
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
}
.conv-meta { display: grid; gap: 2px; min-width: 0; flex: 1; }
.conv-name { font-size: 15px; }
.conv-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  flex: none; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px;
}

.main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.empty-main { flex: 1; display: grid; place-items: center; text-align: center; gap: 10px; color: var(--muted); }
.big-emoji { font-size: 54px; opacity: 0.7; }

.conv-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.conv-head .back-btn { display: none; font-size: 26px; }
.conv-who { display: flex; align-items: center; gap: 10px; font-weight: 600; flex: 1; min-width: 0; }
.conv-who .avatar { width: 34px; height: 34px; font-size: 14px; }
.conv-actions { display: flex; gap: 12px; }

.notes-slot:not(:empty), .flag-slot:not(:empty) { padding: 12px 16px; border-bottom: 1px solid var(--line); }

.stream { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bubble-row { display: flex; flex-direction: column; max-width: 78%; }
.bubble-row.mine { align-self: flex-end; align-items: flex-end; }
.bubble-row.theirs { align-self: flex-start; align-items: flex-start; }
.bubble {
  padding: 10px 14px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.bubble-row.mine .bubble { background: linear-gradient(160deg, var(--accent), #9d4edd); color: #fff; border-bottom-right-radius: 5px; }
.bubble-row.theirs .bubble { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.sig { font-size: 11px; color: var(--muted); margin-top: 3px; }
.orig { margin-top: 8px; }
.orig > summary { cursor: pointer; font-size: 12px; opacity: 0.8; list-style: none; }
.orig > summary::-webkit-details-marker { display: none; }
.orig > summary::before { content: "▸ "; }
.orig[open] > summary::before { content: "▾ "; }
.orig-body {
  margin-top: 6px; padding: 10px; border-radius: 8px; font: 12px/1.5 ui-monospace, Menlo, monospace;
  white-space: pre-wrap; background: rgba(0,0,0,0.25); border: 1px solid var(--line);
}
.bubble-row.mine .orig-body { color: #eee; }

.composer { border-top: 1px solid var(--line); padding: 10px 14px 14px; display: grid; gap: 8px; }
.composer .quick-row { flex-wrap: wrap; }
.chip.ghost { border-style: dashed; }
.compose-row { display: flex; gap: 10px; align-items: flex-end; }
.compose-row textarea {
  flex: 1; resize: none; border-radius: 20px; padding: 11px 16px; max-height: 140px; overflow-y: auto;
}
.send-btn { border-radius: 20px; align-self: stretch; }
/* The suggestions render here, inside the fixed (non-scrolling) composer. Three
   tall options used to push the last one — and the send row — off a phone
   screen. Cap the height and let the options scroll within their own slot so the
   whole list stays reachable and the composer below it never gets clipped. */
.think-slot:not(:empty) { padding: 4px 0; max-height: 42vh; overflow-y: auto; }
.think {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--accent-2) 5%, transparent);
}
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.ask-in { border-radius: 10px; }

/* settings */
.setting-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting-block:last-child { border-bottom: none; }
.setting-block h3 { margin: 0 0 10px; font-size: 15px; }
.row.two { display: flex; gap: 10px; }
.row.two label { flex: 1; }
.danger { color: var(--err); }

/* collapsible settings groups — each area folds away so the page stays short */
.settings-group { border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; background: color-mix(in srgb, var(--panel-2) 40%, transparent); overflow: hidden; }
.settings-group[open] { background: var(--panel-2); }
.sg-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 15px; font-weight: 700; }
.sg-summary::-webkit-details-marker { display: none; }
.sg-summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-weight: 400; transition: transform .15s; }
.settings-group[open] > .sg-summary::after { transform: rotate(90deg); }
.sg-title { font-size: 15px; }
.sg-hint { color: var(--muted); font-weight: 500; font-size: 13px; }
.sg-body { padding: 4px 15px 16px; display: grid; gap: 12px; }
.sg-sub { border-top: 1px solid var(--line); padding-top: 12px; }
.sg-sub h4 { margin: 0 0 6px; font-size: 14px; }
.sg-logout { text-align: center; padding-top: 18px; }

/* friends — compact rows, note folded away until you open it */
.friend-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; display: grid; gap: 8px; }
.fr-head { display: flex; align-items: center; gap: 10px; }
.fr-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: linear-gradient(160deg, var(--accent), #9d4edd); color: #fff; }
.fr-main { flex: 1; min-width: 0; display: grid; }
.fr-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-note-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-note-preview:empty { display: none; }
.fr-actions { flex: none; display: flex; gap: 8px; align-items: center; }
.fr-note-edit[hidden] { display: none; }
.fr-note-edit { display: grid; gap: 6px; }
.fr-rel { display: grid; gap: 4px; }
.fr-rel select { width: auto; min-width: 160px; padding: 6px 10px; }
.fr-rel-note { font-size: 11px; color: var(--muted); }

/* mobile "add to home screen" banner — slides up from the bottom, dismissible */
.install-banner {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: translateY(140%); transition: transform .28s ease;
}
.install-banner.show { transform: translateY(0); }
.install-banner .discoball.mini { width: 28px; height: 28px; }
.install-banner .ib-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.install-banner .ib-ios { vertical-align: -2px; margin: 0 1px; color: var(--accent-2); }
.install-banner .ib-actions { flex: none; }
.install-banner .ib-install { padding: 8px 16px; font-size: 14px; }
.install-banner .ib-x {
  flex: none; width: 28px; height: 28px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; cursor: pointer;
}
.install-banner .ib-x:hover { color: var(--ink); }
.install-banner .nb-bell { flex: none; width: 28px; text-align: center; font-size: 20px; }
.notify-banner { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
@media (min-width: 640px) { .install-banner { left: auto; right: 16px; max-width: 420px; } }

/* "What your AI remembers" — reviewable/correctable memory, badge-styled */
.rel-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--panel-2); display: grid; gap: 8px; }
.rel-head { display: flex; align-items: center; gap: 10px; }
.rel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-actions { flex: none; display: flex; gap: 10px; }
.rel-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-badge { display: inline-block; font-size: 12px; line-height: 1.4; padding: 4px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--line)); background: color-mix(in srgb, var(--accent-2) 8%, transparent); max-width: 100%; }
.rel-k { text-transform: uppercase; letter-spacing: .4px; font-size: 10px; color: var(--muted); margin-right: 5px; }
.rel-edit[hidden] { display: none; }
.rel-edit { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }

/* admin usage dashboard — aggregate tiles + 30-day sparklines */
.metric-range { display: flex; gap: 6px; margin-bottom: 10px; }
.metric-range .chip.active { border-color: var(--accent); color: var(--accent); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.metric-tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); display: grid; gap: 2px; }
.metric-tile .mt-n { font-size: 22px; font-weight: 800; line-height: 1.1; }
.metric-tile .mt-label { font-size: 12px; color: var(--muted); }
.mt-spark { width: 100%; height: 24px; margin-top: 6px; display: block; }
.mt-spark rect { fill: color-mix(in srgb, var(--accent-2) 70%, transparent); }

/* accounts band — headline account counts with a month-over-month delta */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.acct-tile { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 10px; padding: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); }
.acct-n { font-size: 26px; font-weight: 800; line-height: 1; }
.acct-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.acct-sub { font-size: 11px; color: var(--muted); margin-top: 5px; }
.acct-delta { font-weight: 700; }
.acct-delta.up { color: var(--ok); }
.acct-delta.down { color: var(--err); }
.acct-delta.flat { color: var(--muted); }

/* mobile: one pane at a time */
/* ===================== 3-pane conversation ===================== */
.people { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.main { overflow-y: auto; }
.chat-shell { grid-template-columns: 300px 1fr; }

.convo-grid { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.conv-top { flex: none; border-bottom: 1px solid var(--line); }
.conv-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.conv-header .back-btn { display: none; font-size: 26px; }
.conv-header .avatar { width: 34px; height: 34px; font-size: 14px; }
.conv-id { flex: 1; min-width: 0; display: grid; }
.conv-name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-subject[hidden] { display: none; }
.conv-header .conv-actions { flex: none; position: relative; }

/* overflow (⋯) menu: friend / notes / flag / delete */
.conv-menu-btn { font-size: 22px; line-height: 1; }
.conv-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: 6px; display: grid; gap: 2px;
}
.conv-menu[hidden] { display: none; }
.menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--ink); padding: 10px 12px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.menu-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.menu-item.danger { color: var(--err); }
.menu-item.is-friend { color: var(--ok); }

/* dismissable first-run hint in the copilot pane */
.intro-card { position: relative; }
.intro-card .ai-text { padding-right: 22px; }
.intro-x {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12px; cursor: pointer;
}
.intro-x:hover { color: var(--ink); }

.panes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.copilot { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.real { display: flex; flex-direction: column; min-height: 0; position: relative; }

/* "New messages ↓" pill — floats over the messages pane when you're scrolled
   up and something new arrives below. Tap it to drop to the newest message. */
.new-pill {
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%) translateY(8px);
  background: var(--accent); color: #fff; border: none;
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.32); cursor: pointer;
  opacity: 0; pointer-events: none; z-index: 30;
  transition: opacity .2s ease, transform .2s ease;
}
.new-pill.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .new-pill { transition: opacity .2s ease; } }
.pane-label {
  flex: none; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02);
  display: flex; gap: 8px; align-items: baseline;
}
.pane-label .muted { font-weight: 400; }
/* on phones the pane-label subtitle wraps to a second line and wastes height —
   the dismissable intro card already says the same thing. */
@media (max-width: 640px) { .pane-label .muted { display: none; } }
.copilot-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.ai-card {
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
  border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  border-radius: 12px; padding: 12px 14px;
}
.ai-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.ai-text { white-space: pre-wrap; line-height: 1.55; }
/* their message, rebuilt in your world — sits inline in the copilot feed, aligned
   with the AI side and tinted so it reads as "them, translated", not your own AI. */
/* the other person's message in the AI pane — its own colour (orange), so it
   reads as neither you (purple) nor your AI (blue). */
.co-them { align-self: flex-start; max-width: 92%; margin: 0; border-left-color: var(--them); background: color-mix(in srgb, var(--them) 8%, transparent); }
.co-them .ai-label { color: var(--them); font-weight: 600; }
.co-raw { border-left-style: dashed; } /* their real words, not yet translated */

.orig-body.xlat { border-left: 2px solid var(--accent-2); font-family: inherit; font-size: 13px; color: var(--ink); background: rgba(125,211,252,0.06); }

/* the composer sits at the bottom of the copilot pane */
.copilot .composer { flex: none; }

/* mobile: people list, then one conversation with panes stacked (messages on
   top, your-AI + composer below for thumb reach) */
@media (max-width: 900px) {
  .chat-shell { grid-template-columns: 1fr; height: 100dvh; }
  .chat-shell .main { display: none; }
  .chat-shell.showing-conv .people { display: none; }
  .chat-shell.showing-conv .main { display: flex; }
  .conv-header .back-btn { display: block; }
  .pane-tabs { display: flex; }
  /* one pane at a time; swipe (or tap a tab) to move between the AI pane and
     the messages. Each pane is full width and snaps into place. */
  .panes {
    flex-direction: row;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .panes::-webkit-scrollbar { display: none; }
  .copilot, .real {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    border-right: none;
  }
  .bubble-row, .co-turn { max-width: 90%; }
  .topics { padding-left: 0; }
}

/* phone tweaks */
@media (max-width: 560px) {
  /* 16px inputs stop iOS from zooming in on focus */
  input, textarea, select { font-size: 16px; }
  #app > .card.narrow { margin: 14px; }
  .card { padding: 18px; }
  .conv-header { padding: 10px 12px; gap: 8px; }
  .stream, .copilot-body { padding: 12px; }
  .quick-row { gap: 6px; }
  .discoball { width: 128px; height: 128px; }
  .hero .tagline { font-size: 22px; }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* the ball's rotation lives on ::before now; freezing it parks the sprite
     on frame 0, which is a complete, correct ball. */
  .discoball, .discoball::before { animation: none !important; }
}

/* ---- copilot chat turns (you ↔ your AI, in the center pane) ---- */
.co-turn { padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; max-width: 92%; }
.co-turn.you { align-self: flex-end; background: linear-gradient(160deg, var(--accent), #9d4edd); color: #fff; border-bottom-right-radius: 5px; }
.co-turn.ai { align-self: flex-start; background: #0d0d16; border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-bottom-left-radius: 5px; }

/* ---- numbered reply suggestions ---- */
.suggest { display: grid; gap: 8px; margin: 6px 0; }
.suggest-opt { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.sug-text { line-height: 1.5; }
.sug-why { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sug-acts { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.sug-acts .primary { padding: 6px 12px; font-size: 13px; }
/* a clear, tappable dismiss for the whole suggestions block */
.sug-dismiss { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1; padding: 0; cursor: pointer; }
.sug-dismiss:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

/* ---- AI-working indicators ---- */
.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); opacity: .35; animation: typing-bounce 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.spin-wheel { display: inline-block; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-top-color: var(--accent-2); border-radius: 50%; animation: spin-wheel .7s linear infinite; vertical-align: -2px; }
@keyframes spin-wheel { to { transform: rotate(360deg); } }
.loading-card { display: flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .typing i, .spin-wheel { animation-duration: 2.4s; } }

/* ---- send-mode toggle ---- */
.mode-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin: 2px 0; cursor: pointer; }
.mode-toggle input { width: auto; }
.send-btn.ready { background: linear-gradient(180deg, var(--ok), #16a34a); }

/* delete link */
.conv-actions .danger { color: var(--err); }
.conv-actions [data-addfriend].is-friend { color: var(--ok); cursor: default; opacity: .85; }

/* analyze-on-demand action, sitting under the incoming message(s) */
.analyze-card { text-align: center; padding: 4px 0 2px; }
.analyze-card .primary { margin-top: 2px; }
.suggest-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* compass-check nudge in the copilot pane */
.co-turn.compass { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, #0d0d16); }

/* ===================== landing hero + holographic disco ball ===================== */
.authcard { text-align: center; }
.hero { display: grid; justify-items: center; gap: 6px; margin-bottom: 18px; }
.hero .brand.big { margin: 6px 0 2px; }
.hero .tagline {
  font-size: 28px; line-height: 1.15; margin: 0 0 8px;
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 55%, #4ade80);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .muted { max-width: 42ch; }
.authcard .tabs, .authcard form { text-align: left; }

/* The big ball is the real brand mark, actually rotating: /ball-spin.webp is an
   18-frame strip of the sphere turned about its vertical axis. Because the
   facet grid has 24-fold symmetry, one grid cell of rotation reproduces the
   ball exactly — so 18 frames loop forever instead of needing a whole
   revolution's worth. Only a translate animates (GPU-composited, no repaint),
   which matters: an earlier animated `filter: hue-rotate` here pegged the CPU
   on every screen showing a disco ball. */
.discoball {
  position: relative;
  width: 176px; height: 176px; border-radius: 50%;
  overflow: hidden;
  animation: db-glow 4.5s ease-in-out infinite;
}
.discoball::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 1800%; height: 100%;                 /* 18 frames side by side */
  background: url("/ball-spin.webp") 0 0 / 100% 100% no-repeat;
  animation: db-roll 0.55s steps(18) infinite;
  will-change: transform;
}
/* one cell of turn per loop; 24 cells = a full revolution ≈ 13s */
@keyframes db-roll { to { transform: translateX(-100%); } }
@keyframes db-glow {
  0%, 100% { box-shadow: 0 10px 34px rgba(199,125,255,0.40); }
  50%      { box-shadow: 0 16px 56px rgba(125,211,252,0.52); }
}

/* registration extra fields + invite code display */
.register-fields { display: grid; gap: 12px; margin-bottom: 4px; }
.invite-code { margin-top: 10px; }
.invite-code code { background: var(--panel-2); border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px; font-size: 15px; user-select: all; }
.invite-link { display: block; word-break: break-all; margin: 4px 0; }
#delete-account-box:not(:empty) { margin-top: 10px; }

/* referral tally + tip button */
#referral-stats { margin-bottom: 8px; }
#referral-out:not(:empty) { margin-top: 10px; }
.tip-btn { display: inline-block; text-decoration: none; text-align: center; padding: 9px 16px; border-radius: 10px; }
.notes-actions { gap: 14px; margin-top: 6px; }

/* consent checkbox + auth footer */
.consent { grid-template-columns: auto 1fr; display: grid; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
.consent input { width: auto; }
.footer-legal { text-align: center; margin-top: 14px; }

/* Small brand mark. Deliberately a separate, static asset rather than the spin
   sprite: that strip is ~260KB, which is absurd for a 22px mark that never
   moves, and it sits on screen for the whole session. */
.discoball.mini {
  width: 22px; height: 22px;
  display: inline-block; vertical-align: middle; flex: none;
  overflow: visible; animation: none; box-shadow: none;
}
.discoball.mini::before {
  width: 100%; height: 100%;
  background: url("/ball-mini.svg") center / contain no-repeat;
  animation: none; transform: none;
  filter: drop-shadow(0 0 6px rgba(199,125,255,0.5));
}
.brand .discoball.mini, .brand.big .discoball.mini { margin-right: 4px; }
/* the placeholder ball in the main pane before a conversation is open — the
   full spinning mark, just a touch smaller than the login hero */
.discoball.empty-ball { width: 148px; height: 148px; }

/* mobile pane switcher — a bold segmented control so it's unmistakable that
   there are TWO views here, tap to switch. Shown by default; hidden on desktop
   (below), where both panes are visible side by side. NOTE: this default MUST
   be `flex`, not `none` — an earlier `display:none` here (later in the file than
   the ≤900px override) silently won on phones and hid the switcher entirely. */
.pane-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
@media (min-width: 901px) { .pane-tabs { display: none; } }
.pane-tabs button {
  flex: 1; font-size: 14px; font-weight: 700; padding: 11px 6px; border-radius: 10px;
  border: none; background: transparent; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.pane-tabs button.active {
  background: linear-gradient(180deg, var(--accent), #9d4edd);
  color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
/* the not-active tab whispers "there's more this way" with a nudging arrow */
.pane-tabs button:not(.active) .peek { display: inline-block; animation: peekNudge 1.5s ease-in-out infinite; }
.pane-tabs button.active .peek { display: none; }
@keyframes peekNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* one-time "you can swipe" coach mark, floating over the panes on mobile */
.swipe-hint { display: none; }
@media (max-width: 900px) {
  .swipe-hint {
    display: flex; align-items: center; gap: 8px;
    position: absolute; left: 50%; bottom: 92px;
    transform: translateX(-50%) translateY(10px);
    background: color-mix(in srgb, var(--accent) 92%, #000);
    color: #fff; border-radius: 999px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; z-index: 40;
    transition: opacity .3s ease, transform .3s ease;
  }
  .swipe-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .swipe-hint .arrows { letter-spacing: 2px; animation: swipeNudge 1.4s ease-in-out infinite; }
}
@keyframes swipeNudge {
  0%,100% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pane-tabs .peek, .swipe-hint .arrows { animation: none; }
}

/* ===== The Mirror: Reflect hub, Self-survey, the Compass ===== */
.hub-body { padding: 16px; overflow-y: auto; }
.hub-intro { margin: 0 0 14px; }
.hub-cards { display: grid; gap: 12px; }
@media (min-width: 620px) { .hub-cards { grid-template-columns: 1fr 1fr; } }
.hub-card {
  display: block; text-align: left; padding: 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel-2); color: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.hub-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.hub-emoji { font-size: 26px; }
.hub-card-title { font-weight: 700; font-size: 16px; margin-top: 6px; }
.hub-card-desc { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.hub-card .soon {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--line); color: var(--muted); padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

/* the "note this on your Compass?" confirm card */
.trait-confirm .trait-picks { display: grid; gap: 8px; margin: 10px 0; }
.trait-pick { display: flex; align-items: center; gap: 8px; color: inherit; font-size: 14px; cursor: pointer; }
.trait-pick .tp-name { font-weight: 600; }
.trait-confirm .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* trait kind chips */
.trait-kind { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.trait-kind.k-growth { color: var(--accent-2); border-color: var(--accent-2); }
.trait-kind.k-value { color: var(--accent); border-color: var(--accent); }

/* the Compass view */
.compass-note { padding: 0 4px 6px; }
.green-word { color: var(--ok); font-weight: 700; }
.compass-section-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 4px 8px; }
.trait-card { border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.trait-card.green { border-color: var(--ok); box-shadow: 0 0 0 1px rgba(74,222,128,.25) inset; }
.trait-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trait-name { font-weight: 600; }
.trait-standing { font-size: 12px; color: var(--muted); margin-top: 6px; }
.trait-standing.st-confirmed { color: var(--ok); }
.trait-standing.st-witnessed { color: var(--accent-2); }
.trait-aim { font-size: 12px; color: var(--accent); margin-top: 4px; }

/* trait detail + clickable Compass cards */
.trait-card.clickable { cursor: pointer; transition: border-color .15s ease, transform .1s ease; }
.trait-card.clickable:hover { border-color: var(--accent); transform: translateY(-1px); }
.trait-card.clickable::after { content: "›"; float: right; color: var(--muted); font-size: 18px; line-height: 1; margin-top: -2px; }
.trait-detail-head .td-evidence { display: grid; gap: 8px; margin: 12px 0; }
.td-ev { font-size: 14px; line-height: 1.5; }
.td-ev-src { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }
.td-actions { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.td-prompts { margin: 4px 0 12px; }

/* ===== Ask others (person side) + the rater experience ===== */
.ask-rows { display: grid; gap: 8px; margin: 10px 0; }
.ask-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; }
.ask-row input, .ask-row select { padding: 8px 10px; }
@media (max-width: 560px) { .ask-row { grid-template-columns: 1fr 1fr; } .ask-row select { grid-column: 1 / -1; } }
.invite-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; font-size: 14px; }
.ask-tally { margin-top: 10px; }

/* rater flow — full-screen, its own card */
.rater-flow { max-width: 560px; margin: 24px auto; }
.rater-flow .hero { text-align: center; }
.rater-flow .discoball { margin: 0 auto 10px; }
.prebrief { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 12px; }
.prebrief li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); font-size: 14px; line-height: 1.5; }
.rater-flow .rf-begin, .rater-flow .rf-home { width: 100%; }
.rf-head { display: flex; justify-content: space-between; align-items: center; }
.rf-qtitle { margin: 6px 0 12px; font-size: 18px; }
.rf-body { min-height: 120px; max-height: 46vh; overflow-y: auto; }
.mirror-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mirror-card blockquote.mc-text { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: #0d0d16; border-radius: 8px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.mc-editbox { margin: 8px 0; }
.mc-actions { flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* de-emphasized BYO-key disclosure + "get more messages" pulse */
.adv-summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--muted); list-style: none; margin: 0; }
.adv-summary::-webkit-details-marker { display: none; }
.adv-summary::before { content: "▸ "; }
details.adv-key[open] .adv-summary::before { content: "▾ "; }
details.adv-key[open] .adv-summary { color: var(--ink); margin-bottom: 6px; }
#side-credits.flash { animation: sc-flash 1.4s ease; }
@keyframes sc-flash { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 2px var(--accent) inset; border-radius: 10px; } }

/* landing hero: one promise + three quiet pillars */
.hero .lead { max-width: 46ch; margin-left: auto; margin-right: auto; }
.pillars { display: grid; gap: 12px; margin: 20px 0 8px; text-align: left; }
.pillar { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.pillar p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pillar p b { color: var(--ink); }
.pillar-i { font-size: 22px; line-height: 1.3; }
.free-note { margin-top: 6px; }

/* the sting-sort: what came back */
.see-reflections { margin-top: 12px; width: 100%; }
.sting-lens { text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.sting-card blockquote.mc-text { margin: 6px 0 12px; padding: 10px 14px; border-left: 3px solid var(--accent-2); background: #0d0d16; border-radius: 8px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.sting-actions { gap: 8px; }
.sting-actions .chip { flex: 1; text-align: center; font-weight: 600; }
.sting-card.sorted { opacity: .5; }

/* landing: aspirational "what people work on" strip (illustrative, not real data) */
.seed { margin: 22px 0 6px; }
.seed-label { font-size: 13px; color: var(--muted); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .05em; }
.seed-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.seed-chips span {
  font-size: 13px; padding: 6px 12px; border-radius: 999px; color: var(--ink);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line));
}