/* ============================================================================
   Kindred — pages.css
   Page-level layout for: landing, onboarding, find, chats, thoughts, groups,
   wellbeing, settings, admin, legal docs.
   ========================================================================== */

/* ============================================================== LANDING === */
.landing { min-height: 100dvh; display: flex; flex-direction: column; }
.landing-nav {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) clamp(var(--sp-4), 5vw, var(--sp-8));
  max-width: var(--shell-max); margin: 0 auto; width: 100%;
}
.landing-nav .links { display: none; gap: var(--sp-4); margin-left: auto; align-items: center; }
@media (min-width: 760px) { .landing-nav .links { display: flex; } }
.hero {
  max-width: var(--shell-max); margin: 0 auto; width: 100%; padding: clamp(var(--sp-5), 5vw, var(--sp-9)) clamp(var(--sp-4), 5vw, var(--sp-8)) var(--sp-7);
  display: grid; gap: var(--sp-8); align-items: center;
}
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.hero .tagline-hero { font-size: var(--fs-lg); color: var(--text-soft); max-width: 46ch; }
.hero .hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
.hero .hero-art { justify-self: center; width: min(460px, 100%); }
.hero .trust-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); color: var(--text-muted); font-size: var(--fs-sm); }
.landing-section { max-width: var(--shell-max); margin: 0 auto; padding: var(--sp-8) clamp(var(--sp-4), 5vw, var(--sp-8)); width: 100%; }
.landing-section > h2 { font-size: var(--fs-2xl); }
.steps { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.step-card .step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--surface-glass); padding: var(--sp-7) clamp(var(--sp-4), 5vw, var(--sp-8)) var(--sp-8); }
.site-footer .footer-grid { max-width: var(--shell-max); margin: 0 auto; display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.site-footer h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin-bottom: var(--sp-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: var(--text-soft); font-size: var(--fs-sm); }
.site-footer .footer-note { max-width: var(--shell-max); margin: var(--sp-6) auto 0; color: var(--text-muted); font-size: var(--fs-xs); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.ad-slot {
  max-width: var(--shell-max); margin: var(--sp-5) auto; border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg); padding: var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm);
  background: var(--surface-2);
}
.ad-slot .ad-label { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; margin-right: 6px; }

/* =========================================================== ONBOARDING === */
.onboard { min-height: 100dvh; display: flex; flex-direction: column; }
.onboard-top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) clamp(var(--sp-4), 5vw, var(--sp-7)); }
.onboard-wrap { flex: 1; display: flex; justify-content: center; padding: 0 var(--sp-4) var(--sp-7); }
.onboard-card { width: min(620px, 100%); }
.onboard-card h1 { font-size: var(--fs-xl); }
.onboard-question { text-align: center; margin-bottom: var(--sp-5); }
.onboard-question h2 { font-size: var(--fs-lg); }
.onboard-foot { display: flex; gap: var(--sp-3); justify-content: space-between; align-items: center; margin-top: var(--sp-6); flex-wrap: wrap; }
.vibe-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.vibe-card {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-4);
  cursor: pointer; text-align: left; font: inherit; color: var(--text); min-height: 84px;
  display: flex; flex-direction: column; gap: 4px; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vibe-card:hover { transform: translateY(-2px); }
.vibe-card[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.vibe-card .vibe-emoji { font-size: 1.4rem; }
.vibe-card .vibe-title { font-weight: var(--fw-medium); }
.vibe-card .vibe-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.tag-cats { display: flex; flex-direction: column; gap: var(--sp-5); }
.tag-cat > h4 { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.tour-pop {
  position: fixed; z-index: 170; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--sp-4); width: min(320px, 88vw);
}
.tour-pop h4 { margin: 0 0 4px; }
.tour-pop p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); }
.tour-ring { position: fixed; z-index: 165; border-radius: var(--r-lg); box-shadow: 0 0 0 9999px rgba(52,36,30,0.5); pointer-events: none; transition: all var(--dur-slow) var(--ease-out); }

/* ============================================================ AUTH FORM === */
/* The sign-in screen can carry two cards — the first-run claim card above the
   form. Stacking them is not optional: side by side at 390px they crush the copy
   into one-word-per-line. */
.auth-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-4); }
.auth-wrap > * { width: min(520px, 100%); }
.auth-card { width: min(520px, 100%); }
.auth-switch { display: flex; gap: var(--sp-2); background: var(--surface-3); padding: 4px; border-radius: var(--r-pill); margin-bottom: var(--sp-5); }
.auth-switch button { flex: 1; border: 0; background: transparent; font: inherit; font-weight: var(--fw-medium); color: var(--text-soft); padding: 10px; border-radius: var(--r-pill); cursor: pointer; min-height: 42px; }
.auth-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.recovery-code { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.12em; background: var(--surface-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); text-align: center; user-select: all; }

/* ================================================================ FIND === */
.page-head { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head h1 { margin: 0; font-size: var(--fs-xl); }
.page-head .page-sub { color: var(--text-muted); margin: 4px 0 0; font-size: var(--fs-sm); max-width: 60ch; }
.page-head .head-actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.visibility-card { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.visibility-card .vis-copy { flex: 1; min-width: 240px; }
.visibility-card .vis-copy h2 { font-size: var(--fs-md); margin-bottom: 2px; }
.filters-bar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.people-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.person-card { display: flex; gap: var(--sp-4); align-items: flex-start; }
.person-card .person-main { flex: 1; min-width: 0; }
.person-card .person-handle { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.person-card .person-bio { color: var(--text-soft); font-size: var(--fs-sm); margin: 4px 0 var(--sp-3); }
.person-card .person-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.host-card { border: 1.5px solid color-mix(in srgb, var(--secondary) 45%, transparent); background: linear-gradient(150deg, var(--secondary-soft), var(--surface) 65%); }
.active-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-sage-500); display: inline-block; }
.active-dot.today { background: var(--c-amber-500); }
.active-dot.away { background: var(--border-strong); }

/* =============================================================== CHATS === */


/* chat screen */

.emoji-picker button { font-size: 20px; background: none; border: 0; cursor: pointer; border-radius: var(--r-sm); min-height: 40px; }
.emoji-picker button:hover { background: var(--surface-3); }
.starters { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-2) var(--sp-1); scrollbar-width: none; }
.starters::-webkit-scrollbar { display: none; }
.starter {
  flex: 0 0 auto; max-width: 260px; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-sm); color: var(--text-soft);
  cursor: pointer; line-height: 1.4;
}
.starter:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.chat-side { display: none; }
@media (min-width: 1100px) {
  .chat-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); height: calc(100dvh - var(--header-h)); }
  .chat-side { display: block; border-left: 1px solid var(--border); padding: var(--sp-5); overflow-y: auto; }
}
.streak-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--warning-soft); color: var(--c-amber-600); border-radius: var(--r-pill); padding: 4px 12px; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.level-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--c-lav-600); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ============================================================ THOUGHTS === */
.board { display: grid; gap: var(--sp-5); }
@media (min-width: 1000px) { .board { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .board-side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }

.reaction-warm.on { background: var(--secondary-soft) !important; color: var(--secondary) !important; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.comments { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.comment { display: flex; gap: var(--sp-2); padding: var(--sp-2) 0; }
.comment .comment-main { flex: 1; min-width: 0; }
.comment .comment-head { font-size: var(--fs-sm); font-weight: var(--fw-medium); display: flex; gap: 6px; align-items: center; }
.comment .comment-body { font-size: var(--fs-sm); color: var(--text-soft); white-space: pre-wrap; }
.comment .comment-actions { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; flex-wrap: wrap; }
.comment .comment-actions button { border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.comment .comment-actions button:hover { background: var(--surface-3); }
.comment-children { margin-left: var(--sp-6); border-left: 2px solid var(--border); padding-left: var(--sp-3); }
.composer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.image-drop { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer; }
.image-drop:hover, .image-drop.over { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.thumb { position: relative; }
.thumb img { border-radius: var(--r-md); height: 84px; width: 100%; object-fit: cover; border: 1px solid var(--border); }
.thumb .thumb-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; font-size: 12px; }
.rank-note { font-size: var(--fs-xs); color: var(--text-muted); }
.hidden-post { color: var(--text-muted); font-size: var(--fs-sm); }

/* ============================================================== GROUPS === */
.group-card .group-top { display: flex; gap: var(--sp-3); align-items: center; }
.group-room-head { border-bottom: 1px solid var(--border); padding: var(--sp-3) clamp(var(--sp-3), 3vw, var(--sp-5)); }
.member-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.rules-list { margin: 0; padding-left: var(--sp-5); color: var(--text-soft); font-size: var(--fs-sm); }
.rules-list li { margin-bottom: 6px; }
.mention { color: var(--primary-strong); font-weight: var(--fw-medium); background: var(--primary-soft); border-radius: 6px; padding: 0 4px; }

/* =========================================================== WELLBEING === */
.affirmation {
  font-size: var(--fs-lg); line-height: 1.5; text-align: center; padding: var(--sp-6) var(--sp-4);
  background: linear-gradient(150deg, var(--secondary-soft), var(--surface)); border-radius: var(--r-2xl);
  border: 1px solid var(--border);
}
.breath {
  width: 220px; height: 220px; margin: var(--sp-5) auto; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--secondary-strong), var(--secondary) 60%, var(--secondary-strong));
  display: grid; place-items: center; color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-lg);
  box-shadow: 0 12px 40px rgba(78, 158, 146, 0.35); transition: transform 4s var(--ease), box-shadow 4s var(--ease);
  transform: scale(0.7);
}
.breath.inhale { transform: scale(1.12); } .breath.hold { transform: scale(1.12); } .breath.exhale { transform: scale(0.7); }
[data-reduced-motion="1"] .breath { transition-duration: 0.6s; }
.grounding-step { border-left: 3px solid var(--secondary); padding-left: var(--sp-3); margin-bottom: var(--sp-3); }
.grounding-step input { margin-top: var(--sp-2); }
.mood-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mood-btn {
  flex: 1 1 88px; border: 2px solid var(--border); background: var(--surface); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-2); cursor: pointer; font: inherit; color: var(--text); text-align: center; min-height: 82px;
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mood-btn:hover { transform: translateY(-2px); }
.mood-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.mood-btn .mood-face { font-size: 1.6rem; }
.mood-btn .mood-name { font-size: var(--fs-xs); color: var(--text-soft); }
.mood-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: var(--sp-3) 0; }
.mood-bar { flex: 1; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--c-teal-300), var(--c-teal-600)); min-height: 6px; position: relative; }
.mood-bar .mood-tip { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-muted); }
.crisis-card { border-left: 4px solid var(--primary); background: linear-gradient(150deg, var(--primary-soft), var(--surface) 70%); }
.crisis-resource { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.crisis-numbers { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.need-help-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary-strong);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: var(--r-pill);
  padding: 8px 14px; font-size: var(--fs-sm); font-weight: var(--fw-bold); min-height: 40px; cursor: pointer;
}
.need-help-btn:hover { background: var(--primary); color: #fff; }
.need-help-btn:focus-visible { outline: 2px solid var(--primary-strong); outline-offset: 2px; }
/* One line, always. On narrow phones the sentence shortens so the bar stays
   calm; the full wording lives in the aria-label and on the sheet it opens. */
.need-help-btn .help-full { display: none; }
.need-help-btn .help-short { display: inline; }
.need-help-btn { white-space: nowrap; }
@media (min-width: 430px) {
  .need-help-btn .help-full { display: inline; }
  .need-help-btn .help-short { display: none; }
}
.journal-entry { border-left: 3px solid var(--accent); padding-left: var(--sp-3); margin-bottom: var(--sp-3); }

/* =========================================================== SETTINGS === */
.settings-nav { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); scrollbar-width: none; }
.settings-nav::-webkit-scrollbar { display: none; }
.settings-section { margin-bottom: var(--sp-6); }
.settings-section > h3 { font-size: var(--fs-md); }
.profile-banner {
  display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; padding: var(--sp-5);
  border-radius: var(--r-2xl); background: linear-gradient(150deg, var(--primary-soft), var(--surface) 60%);
  border: 1px solid var(--border);
}
.mood-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.mood-cell { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: var(--surface-3); }
.mood-cell.great { background: var(--c-sage-500); color: #fff; }
.mood-cell.good { background: var(--c-teal-300); }
.mood-cell.okay { background: var(--c-amber-500); color: #fff; }
.mood-cell.low { background: var(--c-lav-300); }
.mood-cell.struggling { background: var(--c-rose-500); color: #fff; }

/* ================================================================ ADMIN === */
/* .admin-shell stacks the page heading above the section layout. The columns
   live in .admin-layout: putting the nav in the outer grid pushed the panel into
   the sidebar's track and left the heading stranded in column one. */
.admin-shell { display: grid; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4) 40px; }
.admin-layout { display: grid; gap: var(--sp-5); }
/* Below 1000px the sections are a swipeable strip above the content; above it,
   a column beside the content. Without the wrapper the vertical nav pushed the
   panel down the page and squashed it into the sidebar's width. */
@media (min-width: 1000px) {
  .admin-layout { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); align-items: start; }
}
.admin-nav { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .admin-nav { flex-direction: column; position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.admin-nav a { padding: 10px var(--sp-4); border-radius: var(--r-lg); color: var(--text-soft); font-weight: var(--fw-medium); white-space: nowrap; }
.admin-nav a:hover { background: var(--surface-3); text-decoration: none; }
.admin-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-strong); }
.queue-item { border-left: 4px solid var(--warning); }
.queue-item.serious { border-left-color: var(--danger); }
.queue-item.low { border-left-color: var(--border-strong); }
.context-window { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-3); font-size: var(--fs-sm); max-height: 260px; overflow-y: auto; }
.context-window .ctx-msg { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.context-window .ctx-msg:last-child { border-bottom: 0; }
.context-window .ctx-msg.target { background: var(--warning-soft); border-radius: var(--r-sm); padding: 6px 8px; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { text-align: left; padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
table.data tr:hover td { background: var(--surface-2); }
.audit-row { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* ========================================================== LEGAL / DOCS === */
.doc { max-width: 76ch; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.doc h1 { font-size: var(--fs-2xl); }
.doc h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); }
.doc h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.doc p, .doc li { color: var(--text-soft); }
.doc ul, .doc ol { padding-left: var(--sp-5); }
.doc li { margin-bottom: 6px; }
.doc .doc-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.doc .toc { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-4); font-size: var(--fs-sm); }
.doc .lawyer-note { background: var(--warning-soft); border-left: 4px solid var(--warning); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-sm); }
.doc table.data td, .doc table.data th { font-size: var(--fs-sm); }

/* cookie banner */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; background: var(--surface);
  border-top: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--sp-4) clamp(var(--sp-4), 4vw, var(--sp-7));
}
#cookie-banner .inner { max-width: var(--shell-max); margin: 0 auto; display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }

/* ==========================================================================
   Page-level helpers added with the full page set (home, find, chats, chat,
   groups, group, thoughts, thought, tag, me, support, host, admin).
   ========================================================================== */

/* generic utilities ------------------------------------------------------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row.gap { gap: 12px; }
.stack-loose > * + * { margin-top: 18px; }
.plain-list { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-soft); }
.plain-list li { line-height: 1.5; }
.search-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; }
.search-row .input { flex: 1 1 auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hover { background: var(--surface-2); }
.pinned { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); }
.kv-list { display: grid; gap: 6px; }

/* choice rows (radios in a sheet) ---------------------------------------- */
.choice-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2); cursor: pointer; text-align: left; width: 100%;
  font: inherit; color: inherit;
}
.choice-row:hover { background: var(--surface-3); }
.choice-row.on { border-color: var(--accent); background: var(--accent-soft); }
.choice-row input { width: 18px; height: 18px; accent-color: var(--accent-strong); flex: 0 0 auto; }

/* home ------------------------------------------------------------------- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.quick-tile {
  display: grid; gap: 2px; padding: 14px; text-decoration: none; color: inherit;
  border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.quick-tile:hover { transform: translateY(-1px); }
.quick-ico { font-size: 1.4rem; }

/* find ------------------------------------------------------------------- */
.person-bio { margin: 10px 0 4px; color: var(--ink-soft); }
.people-list { display: grid; gap: 12px; }

/* chat list -------------------------------------------------------------- */
.chat-row .preview-from { color: var(--ink-muted); }
.chat-name { font-weight: 650; }

/* chat view -------------------------------------------------------------- */

.typing { display: flex; align-items: center; gap: 4px; padding: 4px 14px 10px; color: var(--ink-muted); font-size: .9rem; }
.composer { position: sticky; bottom: 0; background: var(--surface-1); border-top: 1px solid var(--line); padding: 10px 12px; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer-field { display: grid; gap: 2px; position: relative; min-width: 0; }
.composer-field .emoji-inline { position: absolute; right: 4px; bottom: 6px; z-index: 2; }
.composer-input {
  width: 100%; resize: none; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px 42px 10px 12px; font: inherit; background: var(--surface-2); color: var(--ink); max-height: 140px;
}
.composer-input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.emoji-picker {
  position: absolute; bottom: 74px; left: 12px; z-index: 12; display: flex; flex-wrap: wrap; gap: 4px;
  max-width: 260px; padding: 8px; background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-strong);
}
.emoji-btn { font-size: 1.2rem; padding: 4px 6px; border-radius: 10px; background: transparent; border: 0; cursor: pointer; }
.emoji-btn:hover, .emoji-btn.on { background: var(--accent-soft); }
.starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.starter {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: .92rem; cursor: pointer; color: var(--ink); text-align: left;
}
.starter:hover { background: var(--accent-soft); }
.starter.ghost { border-style: dashed; color: var(--ink-soft); }
.starter.on { background: var(--accent-soft); border-color: var(--accent); }
.starters-tray { padding: 12px; display: grid; gap: 8px; }

/* thoughts --------------------------------------------------------------- */
.thought-mini { display: flex; align-items: flex-start; gap: 10px; text-decoration: none; color: inherit; padding: 10px 0; }
.thought-mini + .thought-mini { border-top: 1px solid var(--line); }
.thought-mini .thought-body { margin: 0 0 6px; font-size: .92rem; line-height: 1.5; }
.thought-mini .mini-score {
  flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.vote-btn { background: transparent; border: 0; font-size: 1rem; color: var(--ink-muted); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.vote-btn.up.on { color: var(--accent-strong); }
.vote-btn.down.on { color: var(--ink-soft); }
.reactions .reaction-warm { border: 1px solid var(--line); background: var(--surface-1); border-radius: 999px; cursor: pointer; }
.reaction-warm.on { border-color: var(--accent); background: var(--accent-soft); }
.cnote { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px dashed var(--line); }
.hidden-post { opacity: .85; }
.thumb-grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.thumb { position: relative; display: grid; gap: 4px; }
.thumb img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }

/* groups + group room ---------------------------------------------------- */
.group-page { display: grid; gap: 12px; }
.group-desc { margin: 10px 0 6px; color: var(--ink-soft); }
.member-list { display: grid; gap: 4px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: var(--radius-sm); width: 100%; background: transparent; border: 0; font: inherit; color: inherit; text-align: left; }
.member-row:hover { background: var(--surface-2); }
.role-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.queue-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line); }
.queue-item.low { border-left: 3px solid var(--accent); }
.queue-item.serious { border-left: 3px solid var(--warning-strong); }

/* moderation panel ------------------------------------------------------- */
/* .admin-shell itself is defined once, above, next to .admin-layout. */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-nav .chip { text-decoration: none; }
.context-window { display: grid; gap: 4px; padding: 10px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); }
.ctx-line { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; }
.ctx-line.reported { background: var(--accent-soft); outline: 1px solid var(--accent); }
.audit-row { display: grid; gap: 2px; padding: 10px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line); }
.spark-rows { display: grid; gap: 4px; }
.spark-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; }
.spark-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.spark-bar i { display: block; height: 100%; background: var(--accent); }
.spark-day { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table-wrap th, .table-wrap td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table-wrap th { color: var(--ink-muted); font-weight: 600; }

/* support page ----------------------------------------------------------- */
.affirmation { font-size: 1.15rem; line-height: 1.5; margin: 0; }
.grounding-step { display: grid; gap: 2px; justify-items: start; }
.ground-num { font-size: 2rem; font-weight: 700; color: var(--accent-strong); line-height: 1; }
.breath-label { font-size: .95rem; }
.crisis-numbers { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.crisis-resource { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.crisis-resource:last-child { border-bottom: 0; }

/* me / settings ---------------------------------------------------------- */
.mood-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.mood-cell { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: .9rem; }
.level-note { margin-top: 2px; }

/* desktop layout --------------------------------------------------------- */
@media (min-width: 900px) {
  .people-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================================
   CHAT THREAD  —  Messenger on the web, WhatsApp on the phone.

   Layout
     phone    full screen: header (back · avatar · name · icons), the message
              list (scrolls on its own), the composer pinned to the bottom.
     desktop  two panes: chat list on the left, this conversation on the right,
              both filling the window height. The conversation never scrolls
              the page; only its message list scrolls.

   Messages
     yours    right-aligned, brand-coloured bubbles
     theirs   left-aligned, neutral bubbles, avatar on the last of each run
     runs     consecutive messages from one person group together; only the
              last bubble of a run gets the tail, the others stay rounded
   ========================================================================== */

/* the thread itself ----------------------------------------------------------- */
.chat-shell { display: flex; flex-direction: column; height: 100dvh; min-height: 0; background: var(--surface); }
.chat-side { display: none; }
.chat-main {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  position: relative;
  background: var(--surface-2);
}

/* header ---------------------------------------------------------------------- */
.chat-top {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 0 0 auto;
  min-height: 60px; padding: 8px var(--sp-2);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.chat-top .back { display: inline-flex; }
.chat-top .row { min-width: 0; gap: var(--sp-3); }
.chat-top a.row { color: inherit; text-decoration: none; padding: 4px 6px; border-radius: var(--r-md); }
.chat-top a.row:hover { background: var(--surface-3); }
.chat-top .avatar { width: 40px; height: 40px; font-size: 16px; }
.chat-top .chat-name { font-weight: var(--fw-bold); font-size: var(--fs-base); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); min-width: 0; line-height: 1.3; }
.chat-sub-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dot-sep { color: var(--text-muted); }
.active-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
.active-dot.away { background: var(--border-strong); }
.streak-pill { font-size: 12px; }
.role-tag { font-size: 11px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--secondary-soft); color: var(--secondary-strong); font-weight: var(--fw-bold); }

.conn-banner { padding: 6px var(--sp-3); font-size: var(--fs-sm); background: var(--warning-soft); color: var(--warning-strong); text-align: center; flex: 0 0 auto; }
.pinned-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-3); background: var(--surface); border-bottom: 1px solid var(--border); flex: 0 0 auto;
  font-size: var(--fs-sm);
}

/* message list ---------------------------------------------------------------- */
.messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; gap: 2px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  position: relative;
}
.messages > .sk-bubble { margin: 6px 0; }
.day-divider { display: flex; justify-content: center; margin: 14px 0 8px; }
.day-divider span { font-size: 12px; font-weight: var(--fw-bold); color: var(--text-muted); background: var(--surface-3); padding: 3px 10px; border-radius: var(--r-pill); }
.sys-line { text-align: center; font-size: 12.5px; color: var(--text-muted); margin: 8px 16px; }
.sys-line span { background: transparent; }

.msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; margin-top: 2px; }
.msg.first-in-run { margin-top: 10px; }
.msg.me { justify-content: flex-end; }
.msg-av { flex: 0 0 28px; width: 28px; }
.msg-av .avatar { width: 28px; height: 28px; font-size: 12px; }
.msg:not(.last-in-run) .msg-av { visibility: hidden; }
.bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; max-width: min(75%, 520px); min-width: 0; }
.msg.me .bubble-wrap { align-items: flex-end; }
.msg-author { font-size: 12px; color: var(--text-muted); margin: 0 12px 2px; }

.bubble {
  position: relative;
  display: inline-block; max-width: 100%;
  padding: 8px 12px 7px;
  border-radius: 18px;
  background: var(--surface-3); color: var(--text);
  font-size: 15.5px; line-height: 1.38;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.msg.me .bubble { background: var(--primary); color: var(--text-on-brand); }
/* Only the last bubble of a run gets the corner that points at the speaker. */
.msg.last-in-run:not(.me) .bubble { border-bottom-left-radius: 6px; }
.msg.last-in-run.me .bubble { border-bottom-right-radius: 6px; }
.msg.first-in-run:not(.last-in-run):not(.me) .bubble { border-top-left-radius: 18px; }
.msg.me.first-in-run:not(.last-in-run) .bubble { border-top-right-radius: 18px; }
.msg.me:not(.first-in-run) .bubble { border-top-right-radius: 6px; }
.msg:not(.me):not(.first-in-run) .bubble { border-top-left-radius: 6px; }
.msg.me:not(.last-in-run) .bubble { border-bottom-right-radius: 6px; }
.msg:not(.me):not(.last-in-run) .bubble { border-bottom-left-radius: 6px; }

/* time and ticks sit inside the bubble, after the last line */
.bubble-meta { float: right; margin: 6px 0 -3px 10px; font-size: 11px; color: var(--text-muted); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.msg.me .bubble-meta { color: rgba(255, 255, 255, 0.78); }
.ticks { font-size: 11px; letter-spacing: -2px; }
.ticks.read { color: #bfe7ff; }
.msg.me .ticks.read { color: #ffffff; }
.edited { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.msg.me .edited { color: rgba(255,255,255,0.78); }

.msg.tombstone .bubble { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); font-style: italic; box-shadow: none; }
.reply-quote {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px;
  padding: 4px 8px; border-left: 3px solid var(--secondary); border-radius: 6px;
  background: rgba(0, 0, 0, 0.05); font-size: 13px; max-width: 100%;
}
.msg.me .reply-quote { border-left-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.14); }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reactions { display: flex; gap: 4px; margin-top: -8px; margin-left: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.reaction-warm {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill);
  padding: 1px 7px; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-xs);
}
.reaction-warm.on { border-color: var(--primary); background: var(--primary-soft); }
.pill-note { font-size: 12px; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-md); padding: 4px 8px; margin-top: 4px; }

.msg-actions { display: flex; gap: 2px; }
.jump-latest {
  position: absolute; right: 14px; bottom: 12px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); cursor: pointer; color: var(--text);
}
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 10px 14px; margin: 6px 0; background: var(--surface-3); border-radius: 18px; width: max-content; font-size: 13px; color: var(--text-muted); }
.typing .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.2s infinite ease-in-out; }
.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* composer -------------------------------------------------------------------- */
.composer {
  flex: 0 0 auto;
  padding: 8px var(--sp-2) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.reply-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 10px; margin-bottom: 6px; border-radius: var(--r-md);
  background: var(--surface-3); border-left: 3px solid var(--secondary); font-size: var(--fs-sm);
}
.reply-bar .grow { display: flex; flex-direction: column; min-width: 0; }
.reply-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-row { display: flex; align-items: flex-end; gap: 6px; }
.composer-row > .icon-btn { width: 40px; height: 40px; min-width: 40px; color: var(--primary-strong); }
.composer-field {
  position: relative; display: flex; align-items: flex-end; gap: 4px;
  background: var(--surface-3); border-radius: 22px; padding: 4px 6px 4px 14px; min-width: 0;
}
.composer-input {
  flex: 1 1 auto; min-width: 0; resize: none; border: 0; background: transparent; outline: none; box-shadow: none !important;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
  line-height: 1.35; padding: 8px 0; max-height: 140px; color: var(--text);
}
.composer-input::placeholder { color: var(--text-muted); }
.emoji-inline { width: 36px !important; height: 36px !important; min-width: 36px; font-size: 20px; color: var(--text-soft) !important; }
.char-count { position: absolute; right: 52px; bottom: -18px; font-size: 11px; color: var(--text-muted); display: none; }
.char-count.show { display: block; }
.char-count.warn { color: var(--warning); }
.char-count.over { color: var(--danger); }
.composer-row .btn { border-radius: var(--r-pill); min-height: 40px; padding: 0 16px; flex: 0 0 auto; }

/* crisis / nudge cards inside the thread */
.crisis-card, .panel-soft.nudge { margin: 8px 0; }

/* ----------------------------------------------------------- desktop: 2 panes */
@media (min-width: 900px) {
  .chat-shell { flex-direction: row; height: 100dvh; background: var(--surface-2); }
  .chat-side {
    display: flex; flex-direction: column; min-height: 0;
    width: 340px; flex: 0 0 340px;
    background: var(--surface); border-right: 1px solid var(--border);
    overflow: hidden; padding: 0;
  }
  .chat-side .chat-row { border-radius: 0; border: 0; border-bottom: 1px solid var(--border); }
  .chat-main { flex: 1 1 auto; border-left: 0; }
  .chat-top { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .messages { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
  .bubble-wrap { max-width: min(68%, 560px); }
  .composer { padding: var(--sp-3) var(--sp-4); }
  .composer-field { border-radius: 22px; }
  .chat-top .back { display: none; }
}
@media (max-width: 899px) {
  .chat-top .back { display: inline-flex; }
  .chat-side { display: none; }
}

/* ------------------------------------------------------------- the list -- */
/* WhatsApp's list: flat rows, avatar left, name and preview stacked, time and
   unread on the right. The preview truncates with an ellipsis; the time never
   wraps. min-width: 0 on the middle column is what lets the preview shrink
   instead of squeezing the timestamp into a vertical stack of syllables. */
.chatlist { display: flex; flex-direction: column; }
.chat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-1); text-decoration: none; color: inherit;
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.chat-row:hover { background: var(--surface-2); }
.chat-row .chat-main { flex: 1; min-width: 0; }
.chat-row .chat-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: .98rem; color: var(--ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.chat-row.unread .chat-name { font-weight: 700; }
.chat-row .chat-preview {
  display: flex; align-items: baseline; gap: 5px; min-width: 0;
  font-size: .88rem; color: var(--ink-soft);
}
.chat-row .preview-from { flex: 0 0 auto; color: var(--ink-muted); }
.chat-row .preview-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-row.unread .chat-preview { color: var(--ink); }
.chat-row .level-note { font-size: .74rem; color: var(--ink-muted); }
.chat-row .chat-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  flex: 0 0 auto; min-width: 44px;
}
.chat-row .chat-time { font-size: .72rem; color: var(--ink-muted); white-space: nowrap; }
.chat-row .unread { min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px; background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================================
   THOUGHTS BOARD  —  Reddit's anatomy, Kindred's voice.
   A narrow vote rail on the left; one reading column beside it. Reddit gets
   three things right that card-based feeds usually miss: the vote is a big,
   unambiguous target that never competes with the text; the reading column is
   full width so long posts stay comfortable; and the action row is quiet by
   default with counts always visible, so engagement never shouts.
   ========================================================================== */

.thought {
  display: flex; gap: 10px;
  padding: 12px 12px 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-lg, var(--r-lg));
  background: var(--surface-1);
  box-shadow: none;
}
.thought + .thought { margin-top: 10px; }
.thought:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }

/* ------------------------------------------------------------------- rail -- */
.vote-col {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 38px; flex: 0 0 38px; padding-top: 2px;
}
.vote-btn {
  border: 0; background: transparent; cursor: pointer;
  width: 36px; height: 34px; border-radius: 10px;
  font-size: 1rem; line-height: 1; color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vote-btn:hover { background: var(--surface-3); }
.vote-btn.up.on { color: var(--accent-strong); background: var(--accent-soft); }
.vote-btn.down.on { color: var(--ink-soft); background: var(--surface-3); }
.vote-score {
  font-size: .82rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* ------------------------------------------------------------------ column -- */
.thought-main { flex: 1; min-width: 0; }
.thought-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: .78rem; color: var(--ink-muted); margin-bottom: 4px;
}
.thought-meta .avatar { flex: 0 0 auto; }
.thought-who { font-weight: 600; color: var(--ink-soft); }
.thought-when { white-space: nowrap; }
.thought-more { margin-inline-start: auto; flex: 0 0 auto; }

.thought-body {
  margin: 0; font-size: 1rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; word-spacing: 0.015em;
  color: var(--ink);
}
.thought-tags { margin-top: 10px; gap: 6px; }

.thought-images { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 10px; }
.thought-images img { border-radius: 12px; width: 100%; height: 200px; object-fit: cover; cursor: pointer; border: 1px solid var(--line); }
.thought-images.single img { height: auto; max-height: 440px; object-fit: contain; background: var(--surface-2); }

.cnote {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: 12px; padding: 10px 12px; font-size: .9rem;
}

/* -------------------------------------------------------------- action row -- */
.thought-actions {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin-top: 10px; padding-bottom: 6px;
}
.thought-actions .act {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--ink-muted);
  font: inherit; font-size: .82rem; font-weight: 500;
  padding: 6px 9px; border-radius: 999px; cursor: pointer; min-height: 34px;
  text-decoration: none;
}
.thought-actions .act:hover { background: var(--surface-3); color: var(--ink); }
.thought-actions .act.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.thought-actions .act-label { display: none; }
@media (min-width: 520px) { .thought-actions .act-label { display: inline; } }
@media (hover: none) { .thought-actions .act-label { display: none; } }

/* --------------------------------------------------------------- comments -- */
.comment { display: flex; gap: 8px; padding: 8px 0 0; }
.comments { display: flex; flex-direction: column; }
.comment-main { flex: 1; min-width: 0; }
/* Reddit's thread line: a hairline down the indent, so depth reads at a glance
   without eating the narrow width of a phone. */
.comment-children {
  margin-inline-start: 12px; padding-inline-start: 10px;
  border-inline-start: 2px solid var(--line);
}
.comment-children:hover { border-inline-start-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.comment-head { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-muted); min-width: 0; }
.comment-who { font-weight: 600; color: var(--ink-soft); }
.comment-head .avatar, .comment-head .icon-btn { flex: 0 0 auto; }
/* The vote pair sits inline in a comment's action row, so it has to be smaller
   than the rail version without losing its 28px tap area. */
.comment-actions .vote-btn { width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: .78rem; }
.comment-actions .vote-score { font-size: .78rem; margin: 0 2px; color: var(--ink-soft); }
.comment-body { font-size: .95rem; line-height: 1.55; margin: 3px 0 0; overflow-wrap: anywhere; }
.comment-actions { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.comment-actions button, .comment-actions a {
  border: 0; background: transparent; color: var(--ink-muted); font: inherit;
  font-size: .74rem; font-weight: 500; padding: 5px 8px; border-radius: 999px;
  cursor: pointer; min-height: 30px; text-decoration: none;
}
.comment-actions button:hover { background: var(--surface-3); color: var(--ink); }
.comment-actions .on { color: var(--accent-strong); background: var(--accent-soft); }
.comment.collapsed .comment-body, .comment.collapsed .comment-actions { display: none; }
.comment-toggle {
  border: 0; background: transparent; cursor: pointer; padding: 0 4px;
  color: var(--ink-muted); font-size: .74rem; line-height: 1;
}

/* ------------------------------------------------------------------ visits */
.visit-total {
  font-size: 3rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ============================================================================
   MOBILE POLISH — the 360px pass
   Everything below is about how the app feels in a hand: bigger tap targets,
   tab strips that admit they scroll, form fields that don't make iOS zoom the
   whole page, and rows that stop squeezing names into columns of one letter.
   Two rules of engagement: nothing here changes how desktop looks, and the
   numbers come from measurement (server/tests/mobile-audit.mjs), not taste.
   ========================================================================== */

/* ------------------------------------------------------------ tap targets -- */
/* Fingers, not cursors. 44px is the widely used minimum (WCAG 2.5.5 and
   Apple's own guidance both land there); the small controls below were mostly
   built for a mouse and came in at 30–40px. Only applies to touch pointers, so
   the tidier desktop density stays exactly as it was. */
@media (pointer: coarse) {
  /* One sweep, deliberately broad: on a touch screen every control a thumb can
     reach for is at least --tap tall. (It has to be written per-shape rather
     than as a blanket `button` so the pills and icon buttons keep their own
     proportions — only the minimum moves.) */
  button, summary, [role="button"], [role="tab"] { min-height: var(--tap); }
  .icon-btn { min-width: var(--tap); min-height: var(--tap); }
  .btn.sm, .btn.ghost.sm, .btn.secondary.sm, .btn.quiet.sm { min-height: var(--tap); padding-top: 8px; padding-bottom: 8px; }
  .chip, button.chip { min-height: var(--tap); padding-top: 10px; padding-bottom: 10px; }
  .chip.sm { min-height: 38px; }
  .swatch { min-width: var(--tap); min-height: var(--tap); }
  .vote-btn { min-width: var(--tap); min-height: var(--tap); }
  /* These set their own min-height with two-class selectors, so they need
     matching specificity to come back up. Icon-only actions (the Save ribbon
     below 520px, the arrows on a comment) also need the width back. */
  .thought-actions .act, .comment-actions .act, .composer .act {
    min-height: var(--tap); min-width: var(--tap);
    padding-top: 8px; padding-bottom: 8px; justify-content: center;
  }
  .thought-actions .act { min-width: var(--tap); }
  .comment-actions button, .comment-actions a, .comment-actions .act { min-height: var(--tap); }
  .comment-actions .vote-btn { min-width: var(--tap); min-height: var(--tap); }
  .comment-toggle { min-width: 40px; min-height: 40px; }
  .need-help-btn { min-height: var(--tap); }
  .tab-bar a { min-height: var(--tabbar-h); }
  .avatar-btn, .avatar-pick, .avatar-choice, button.avatar { min-width: var(--tap); min-height: var(--tap); }
  /* Checkboxes are 20px of ink inside a row that is the real target. */
  .check-row, label.check, .check { min-height: var(--tap); }
  .check input, .check-row input { width: 22px; height: 22px; }
  .segmented button { min-height: var(--tap); padding-top: 8px; padding-bottom: 8px; }
}

/* A checkbox on its own row is a small target; the row itself is the thing a
   thumb aims at, so make the row properly tall. */
.check { padding: var(--sp-3) 0; min-height: 44px; }
.toggle, .switch { min-height: 44px; }

/* ------------------------------------------------------------ tab strips -- */
/* They scroll sideways on a phone. Without a hint, the last tab just looks
   sliced off at the screen edge — "Archived" read as "Arch…" with no sign that
   anything was there. A soft fade on the side that has more behind it says
   "keep going" without adding a scrollbar. */
.tabs {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--sp-3);
}
.tabs button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.tabs[data-scroll="start"], .tabs[data-scroll="middle"] {
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.tabs[data-scroll="middle"], .tabs[data-scroll="end"] {
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.tabs[data-scroll="end"] {
  mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 100%);
}
.tabs[data-scroll="none"] { mask-image: none; -webkit-mask-image: none; }

/* --------------------------------------------------------------- iOS zoom -- */
/* Safari and Chrome on iOS zoom the entire page when a focused field's text is
   under 16px. Nothing feels more broken on a phone than a page that lurches
   sideways the moment you tap a box, so fields keep 16px here. */
@media (max-width: 480px) {
  .input, .textarea, .select, input[type="text"], input[type="search"],
  input[type="email"], input[type="password"], input[type="url"], input[type="tel"], textarea {
    font-size: 16px;
  }
  .composer-input { font-size: 16px; }
  /* Long unbroken strings (handles, urls) must never push a card wide. */
  .card, .page-pad, .stack > * { min-width: 0; }
  .card p, .card li, .chat-name, .thought-body { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------- identity row (Me) -- */
/* Avatar + handle + two buttons in one non-wrapping row squeezed the handle
   down to one character per line ("K i n d r e d H o s t" reading downwards).
   The name gets a real minimum width, and the buttons move to their own line
   when they can't fit beside it. */
.identity-row { flex-wrap: wrap; row-gap: var(--sp-3); }
.identity-row .identity-name { flex: 1 1 9rem; min-width: 9rem; }
@media (max-width: 430px) {
  .identity-row .identity-name { flex: 1 1 100%; }
  .identity-row > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------ chat header -- */
/* Back + avatar + name + a badge + a heart + an overflow menu is a lot for
   360px; the name was being cut to "Flow…". The badge is decorative (the
   profile and the chat itself both say the same thing), so it steps aside
   first, then the subtitle tightens. */
@media (max-width: 430px) {
  .chat-top { gap: 8px; padding: 8px 10px; }
  .chat-top .row .role-tag { display: none; }
  .chat-top .chat-sub { font-size: .72rem; }
  .chat-top .btn.quiet.sm { min-width: 40px; }
}

/* --------------------------------------------------- the smallest type -- */
/* 10–11px is legible on a desktop monitor at arm's length; in a hand, on a
   bus, it isn't. This is the floor for timestamps, tags and counters — the
   text that tells you *when* and *who*, which is exactly the text you squint
   at on a phone. Body copy is untouched (it is already 16px+). */
@media (max-width: 480px) {
  .chat-time, .chat-sub-text, .chat-day, .bubble-meta, .ticks,
  .pill-note, .role-tag, .level-note, .badge, .badge.soft, .badge.verified,
  .thought-when, .thought-who, .msg-author, .visit-note,
  /* these carry a two-class rule of their own, so they need matching weight */
  .chat-row .chat-time, .chat-row .level-note, .bubble-meta .ticks, .sys-line span {
    font-size: 12px;
  }
  .tab-bar a { font-size: 12px; }
}

/* ------------------------------------------------------------ wide things -- */
/* Tables of numbers (admin panels, visits) get a horizontal scroll rather than
   squashing every column to two characters. */
.table-scroll, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table, .admin-table-wrap table { min-width: 520px; }

/* ------------------------------------------------ desktop chat list pane --- */
.chat-side-head { padding: var(--sp-4) var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border); }
.chat-side-title { margin: 0; font-size: var(--fs-lg); }
.chat-side-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.side-chat { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 0; color: var(--text); border-bottom: 1px solid var(--border); }
.side-chat:hover { background: var(--surface-2); text-decoration: none; }
.side-chat.active { background: var(--primary-soft); }
.side-chat .avatar { width: 46px; height: 46px; font-size: 17px; flex: 0 0 auto; }
.side-chat-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.side-chat-top, .side-chat-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.side-chat-top .chat-name { font-weight: var(--fw-bold); min-width: 0; }
.side-chat-top .chat-time { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.side-chat-bottom .chat-preview { font-size: 13.5px; color: var(--text-muted); min-width: 0; }
.side-chat.unread .chat-name, .side-chat.unread .chat-preview { color: var(--text); font-weight: var(--fw-bold); }
.side-chat-bottom .badge { flex: 0 0 auto; }

/* phone chat header: one clean line. The streak flame lives in the chat list
   (as the thread's own comment says), so the header keeps only the name and
   the one-line status. */
@media (max-width: 599px) {
  .chat-top .streak-pill, .chat-top .dot-sep { display: none; }
  .chat-top { gap: 4px; padding: 6px 4px 6px 2px; }
  .chat-top .icon-btn { width: 40px; height: 40px; min-width: 40px; }
  .chat-top a.row { padding: 4px 4px; }
}
.composer-row .btn { padding: 0 14px; }

/* ----------------------------------------------- find: Facebook-style people */
.page-pad.page-wide { max-width: 1040px; }
.people-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .people-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } }
.person-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.person-card > .row:first-child { align-items: flex-start; }
.person-card .avatar { width: 56px; height: 56px; font-size: 22px; flex: 0 0 auto; }
.person-card .card-title { font-size: var(--fs-md); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-card > .row:first-child .icon-btn { margin-top: -6px; margin-right: -8px; }
.person-card .small.muted { font-size: 13px; margin-top: 2px; line-height: 1.3; }
.person-bio { margin: 0; font-size: 14.5px; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.person-card .chip-row { margin: 0; gap: 6px; }
.person-card .card-actions { margin: auto 0 0; padding-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.person-card .card-actions .btn { width: 100%; justify-content: center; }
.person-card .card-actions .small.muted { font-size: 12.5px; text-align: center; }
.filters-bar { margin: 4px 0 12px; }
.segmented { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.segmented::-webkit-scrollbar { display: none; }
.segmented > * { flex: 0 0 auto; }
.person-card > .row:first-child .icon-btn { margin-right: -2px; }
/* keep the person's name and the ⋯ button inside the card, whatever the width */
.person-card > .row:first-child { min-width: 0; }
.person-card > .row:first-child > .grow { flex: 1 1 0; min-width: 0; }
.person-card > .row:first-child > .icon-btn { flex: 0 0 auto; margin-right: 0; margin-top: -6px; }
.person-card .card-title { display: block; max-width: 100%; }

/* ------------------------------------- conversation look (colour and font) --
   Chosen in Me → Appearance and saved to the account. The default (lamplight)
   is the look the thread already had, so it needs no overrides. Each preset
   sets one muted tint; the page background mixes it into the surface colour,
   so the same preset works in light and dark themes. */
:root[data-chat-color="sage"]     { --chat-me: #3B6E56; --chat-tint: #3B6E56; }
:root[data-chat-color="dusk"]     { --chat-me: #4B6785; --chat-tint: #4B6785; }
:root[data-chat-color="rose"]     { --chat-me: #86475A; --chat-tint: #86475A; }
:root[data-chat-color="graphite"] { --chat-me: #4F4A45; --chat-tint: #4F4A45; }
:root[data-chat-color]:not([data-chat-color="lamplight"]) .msg.me .bubble { background: var(--chat-me); }
:root[data-chat-color]:not([data-chat-color="lamplight"]) .chat-main {
  background: color-mix(in srgb, var(--chat-tint) 7%, var(--surface-2));
}
:root[data-chat-color]:not([data-chat-color="lamplight"]) .composer-field {
  background: color-mix(in srgb, var(--chat-tint) 10%, var(--surface-3));
}

:root[data-chat-font="rounded"] .messages,
:root[data-chat-font="rounded"] .composer-input {
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Segoe UI Variable", system-ui, sans-serif;
}
:root[data-chat-font="serif"] .messages,
:root[data-chat-font="serif"] .composer-input {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

/* ============================================================ notifications inbox */
.inbox-section { margin-bottom: var(--sp-5, 20px); }
.inbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 8px; }
.inbox-title { font-size: 1rem; margin: 0; }
.inbox-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; color: inherit; text-decoration: none;
  border-top: 1px solid var(--border); position: relative;
}
.inbox-section .card.flush > .inbox-row:first-child { border-top: 0; }
a.inbox-row:hover { background: var(--surface-soft, rgba(0,0,0,.03)); }
.inbox-row.unread::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; border-radius: 50%; background: var(--primary);
}
.inbox-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary-soft); font-size: 1rem;
}
.inbox-row-body { flex: 1 1 auto; min-width: 0; }
.inbox-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.inbox-row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-text { color: var(--text-soft); margin-top: 3px; font-size: .95rem; overflow-wrap: anywhere; }
.inbox-row .chat-time { white-space: nowrap; font-size: .8rem; color: var(--text-muted); }
.invite-row { cursor: default; }
@media (min-width: 900px) {
  .inbox-row { padding: 16px 20px; }
}