:root {
  --bg: #0F1216;          /* deeper, softer near-black — app, not demo */
  --bg-2: #161C23;
  --card: #1A212A;
  --card-2: #242E3A;
  --ink: #F5F1E8;          /* warm off-white */
  --ink-dim: #8C97A4;      /* softer steel */
  --accent: #F08A1D;       /* warm chain amber */
  --accent-2: #FFC24D;     /* warm gold link */
  --gold: #FFC24D;
  --danger: #FF6B5E;
  --line: rgba(255,255,255,.07);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.22);
  --glow: 0 0 0 2px rgba(240,138,29,.26);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Swipe nav (2026-09-05): app owns horizontal swipes — browser must NOT claim
   them for its own back/forward edge gestures (that was the "opposite" bug). */
html, body {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 60%);
}
.app { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; position: relative; z-index: 1; }
/* Safe-area aware (2026-09-05): keep the app clear of the phone's status bar /
   clock / battery / camera notch on devices that run it full-screen. iOS Safari
   computes env(safe-area-inset-*) (0 when the viewport already sits inside the
   safe area); every other browser drops the declaration and keeps the plain
   16px/40px base padding above. Safe everywhere. */
.app { padding-top: calc(16px + env(safe-area-inset-top)); }
.app { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.hidden { display: none !important; }

/* ---------- theme presets ---------- */
/* gentle · soft salmon/pink, feminine, easy-reading serif */
body.theme-gentle {
  --bg: #FBE9E5;
  --bg-2: #F7DCD6;
  --card: #FFF6F3;
  --card-2: #F9E2DC;
  --ink: #5A3A33;
  --ink-dim: #A08077;
  --accent: #E8845F;
  --accent-2: #F2A68C;
  --gold: #F2A68C;
  --danger: #D95C4E;
  --line: rgba(122,80,70,.14);
  --glow: 0 0 0 2px rgba(232,132,95,.30);
  --shadow: 0 10px 30px rgba(122,80,70,.14), 0 2px 6px rgba(122,80,70,.10);
  background: var(--bg);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}
body.theme-gentle::before {
  background:
    linear-gradient(135deg, rgba(127,217,140,.10), rgba(46,127,209,.12)),
    radial-gradient(900px 500px at 85% -10%, rgba(232,132,95,.10), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(242,166,140,.08), transparent 60%);
}
body.theme-gentle .card {
  background: var(--card);
  border: 1px solid rgba(232,132,95,.18);
}
body.theme-gentle .btn.primary { background: linear-gradient(160deg, #F2A68C, #E57A52); border-color: transparent; color: #fff; }
body.theme-gentle .logo-img { filter: drop-shadow(0 0 14px rgba(232,132,95,.35)); }
body.theme-gentle .opt,
body.theme-gentle .mood,
body.theme-gentle .kind,
body.theme-gentle select,
body.theme-gentle input,
body.theme-gentle textarea,
body.theme-gentle .chip,
body.theme-gentle .ll-chip,
body.theme-gentle .quiz-opt {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
body.theme-gentle .tpick,
body.theme-gentle .theme-pick .tpick {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
body.theme-gentle .tpick.selected,
body.theme-gentle .theme-pick .tpick.selected {
  border-color: var(--accent);
  background: var(--card-2);
  box-shadow: var(--glow);
}

/* solid · grounded, bold, manly — deep evergreen + brass (no blue/black default) */
body.theme-solid {
  --bg: #0C1410;
  --bg-2: #14201A;
  --card: #14201A;
  --card-2: #1C2C22;
  --ink: #F4F0E6;
  --ink-dim: #93A29A;
  --accent: #4FBF6E;
  --accent-2: #F2C057;
  --gold: #F2C057;
  --danger: #E56A57;
  --line: rgba(180,220,190,.10);
  --glow: 0 0 0 2px rgba(79,191,110,.30);
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  background: var(--bg);
}
body.theme-solid::before {
  background:
    linear-gradient(135deg, rgba(127,217,140,.12), rgba(46,127,209,.14)),
    radial-gradient(900px 500px at 85% -10%, rgba(79,191,110,.08), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(242,192,87,.05), transparent 60%);
}
body.theme-solid .card { background: var(--card); border: 1px solid rgba(79,191,110,.18); }
body.theme-solid .logo-img { filter: drop-shadow(0 0 16px rgba(79,191,110,.30)); }
body.theme-solid .btn.primary { background: linear-gradient(135deg, #3FA85C, #287A42); border-color: transparent; }

/* ===== Theme shop (2026-09-05): curated palettes ===== */
/* midnight · deep blue night, calm + sharp */
body.theme-midnight {
  --bg: #0B1023;
  --bg-2: #131A33;
  --card: #16203E;
  --card-2: #1E2B52;
  --ink: #EBF0FF;
  --ink-dim: #8FA0C8;
  --accent: #5B8BC2;
  --accent-2: #9FC0F0;
  --gold: #9FC0F0;
  --danger: #FF7A70;
  --line: rgba(150,175,230,.12);
  --glow: 0 0 0 2px rgba(91,139,194,.32);
  background: var(--bg);
}
body.theme-midnight .card { background: var(--card); border-color: rgba(120,150,220,.18); }
body.theme-midnight .btn.primary { background: linear-gradient(135deg, #6FA3E0, #3E6FAF); color: #fff; border-color: transparent; }

/* rose · soft blush, warm + tender */
body.theme-rose {
  --bg: #1B1016;
  --bg-2: #261721;
  --card: #2E1C28;
  --card-2: #3B2534;
  --ink: #FBEFF4;
  --ink-dim: #C08FA6;
  --accent: #E0799C;
  --accent-2: #F2A9C0;
  --gold: #F2A9C0;
  --danger: #FF8580;
  --line: rgba(240,160,190,.12);
  --glow: 0 0 0 2px rgba(224,121,156,.32);
  background: var(--bg);
}
body.theme-rose .card { background: var(--card); border-color: rgba(230,150,180,.18); }
body.theme-rose .btn.primary { background: linear-gradient(135deg, #EF93B2, #CC5E83); color: #fff; border-color: transparent; }

/* ocean · teal water, fresh + easy */
body.theme-ocean {
  --bg: #0B1618;
  --bg-2: #112126;
  --card: #152B31;
  --card-2: #1C3942;
  --ink: #EAF7F6;
  --ink-dim: #8FBFC2;
  --accent: #3FA9A5;
  --accent-2: #7FD4CF;
  --gold: #7FD4CF;
  --danger: #FF7A6E;
  --line: rgba(140,220,215,.12);
  --glow: 0 0 0 2px rgba(63,169,165,.32);
  background: var(--bg);
}
body.theme-ocean .card { background: var(--card); border-color: rgba(120,210,205,.18); }
body.theme-ocean .btn.primary { background: linear-gradient(135deg, #4FBFBA, #247F7B); color: #fff; border-color: transparent; }

/* forest · moss + fern, grounded */
body.theme-forest {
  --bg: #0D130B;
  --bg-2: #141D11;
  --card: #1A2516;
  --card-2: #23321D;
  --ink: #F0F6E8;
  --ink-dim: #9DB391;
  --accent: #7BA05B;
  --accent-2: #B8D29A;
  --gold: #B8D29A;
  --danger: #F0836E;
  --line: rgba(170,210,140,.12);
  --glow: 0 0 0 2px rgba(123,160,91,.32);
  background: var(--bg);
}
body.theme-forest .card { background: var(--card); border-color: rgba(150,200,120,.16); }
body.theme-forest .btn.primary { background: linear-gradient(135deg, #8FB86C, #54793C); color: #fff; border-color: transparent; }

/* sunset · ember + dusk, dramatic */
body.theme-sunset {
  --bg: #191018;
  --bg-2: #241826;
  --card: #2D1E2C;
  --card-2: #3D2A3A;
  --ink: #FEF1EA;
  --ink-dim: #C79BA5;
  --accent: #F08A1D;
  --accent-2: #FFB36B;
  --gold: #FFB36B;
  --danger: #FF7B6E;
  --line: rgba(255,160,120,.12);
  --glow: 0 0 0 2px rgba(240,138,29,.32);
  background: var(--bg);
}
body.theme-sunset .card { background: var(--card); border-color: rgba(240,160,120,.16); }
body.theme-sunset .btn.primary { background: linear-gradient(135deg, #FF9E2C, #D65A2B); color: #1A0F02; border-color: transparent; }

select {
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 12px; font-size: 16px; font-family: inherit;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus { border-color: var(--accent); box-shadow: var(--glow); }
.opt { color: var(--ink-dim); font-size: 12px; font-weight: 400; }

.member-block {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed var(--ink-dim);
}
.member-block h3 { font-size: 15px; font-weight: 600; color: var(--accent-2); margin-bottom: 4px; }
.member-block h3::before { content: "• "; }

.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpick {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; text-align: left;
  background: var(--bg-2); border: 1px solid transparent; border-radius: 12px;
  color: var(--ink); font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tpick.selected {
  border-color: var(--accent); background: var(--card-2);
  box-shadow: 0 0 0 1px var(--accent);
}
.tpick span:first-child { font-weight: 600; font-size: 15px; }
.tpick .tp-sub { color: var(--ink-dim); font-size: 12px; }

.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Slack-style ergonomic icon buttons (2026-09-05): uniform circular touch
   targets, consistent size everywhere, subtle active state. */
.btn.icon-btn {
  width: 40px; height: 40px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 17px; line-height: 1;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  flex: none;
}
.btn.icon-btn:active { transform: scale(.92); box-shadow: var(--glow); }
.topbar-actions .btn.small {
  height: 40px; display: inline-flex; align-items: center; margin: 0;
}
/* Keep icon circles perfectly round even in the mobile wrap rule */
.topbar-actions .btn.icon-btn { padding: 0; width: 40px; height: 40px; }

/* Chat header actions: soft pill back/new-prompt buttons, not heavy boxes */
#view-chat-group .topbar,
#view-chat-private .topbar {
  background: var(--accent);
  border-bottom: none;
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 0;
}
#view-chat-group .topbar .whoami,
#view-chat-private .topbar .whoami { color: #fff; }
#view-chat-group .topbar .logo,
#view-chat-private .topbar .logo { display: none; }
#view-chat-group .topbar .btn,
#view-chat-private .topbar .btn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
}
/* Chat-header icon circles stay perfectly round (drop the pill padding) */
#view-chat-group .topbar .btn.icon-btn,
#view-chat-private .topbar .btn.icon-btn {
  padding: 0;
  width: 40px;
}
#view-chat-group .topbar .btn:active,
#view-chat-private .topbar .btn:active { background: rgba(255,255,255,.28); color: #fff; box-shadow: none; }

/* ---------- cards ---------- */
/* Tight left rail: Connections + check-in, always stacked as column 1 */
.left-rail { grid-column: 1; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  position: relative;
}
.card.accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 0 24px color-mix(in srgb, var(--accent) 8%, transparent); }
.card.hero { text-align: center; padding: 32px 20px; }

h1 { font-size: 30px; letter-spacing: .5px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; margin-bottom: 12px; letter-spacing: .3px; }
.tagline { color: var(--ink-dim); margin-top: 8px; font-size: 15px; }

.logo {
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.logo-img { width: 200px; height: auto; display: block; }
.logo.small { width: auto; margin: 0; display: inline-flex; vertical-align: middle; }
.logo.small .logo-img { width: 108px; }

/* ---------- forms ---------- */
label { display: block; font-size: 12.5px; color: var(--ink-dim); margin: 12px 0 6px; font-weight: 600; letter-spacing: .2px; }
input, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 12px; font-size: 16px;
  font-family: inherit; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--glow); }
textarea { resize: vertical; min-height: 48px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: block; width: 100%;
  padding: 13px 16px; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 16px; font-weight: 700; font-family: inherit;
  background: var(--bg-2); color: var(--ink);
  cursor: pointer; transition: transform .06s ease, opacity .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn.primary {
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn.ghost { background: transparent; border-color: var(--ink-dim); color: var(--ink); }
.btn.small { width: auto; padding: 8px 14px; font-size: 13.5px; margin-top: 0; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.whoami { display: inline-block; vertical-align: middle; margin-left: 10px; font-weight: 700; font-size: 15px; }

/* ---------- moods ---------- */
.moods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mood {
  padding: 12px 6px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background .15s ease;
}
.mood.selected { border-color: var(--accent); background: var(--card-2); box-shadow: var(--glow); }
.energy-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 14px; color: var(--ink-dim); }
.energy-dots { display: flex; gap: 6px; flex: 1; }
.edot {
  flex: 1; height: 12px; border-radius: 6px;
  background: var(--bg-2); cursor: pointer;
}
.edot.on { background: var(--gold); }

/* ---------- prompt ---------- */
.prompt-q { font-size: 17px; font-weight: 500; margin-bottom: 12px; line-height: 1.45; }

/* ---------- notes ---------- */
.note-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.kind {
  padding: 8px 12px; border-radius: 20px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kind.selected { border-color: var(--accent); background: var(--card-2); box-shadow: var(--glow); }

/* ---------- partner card ---------- */
.partner-card { display: flex; align-items: center; gap: 14px; }
.partner-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.partner-name { font-weight: 600; }
.partner-status { color: var(--ink-dim); font-size: 14px; }

/* ---------- stream ---------- */
.stream { display: flex; flex-direction: column; gap: 10px; }
.s-item {
  background: var(--bg-2); border-radius: 12px; padding: 12px 14px;
  border-left: 3px solid var(--accent-2);
}
.s-item.my { border-left-color: var(--accent); }
.s-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.s-who { font-weight: 600; }
.s-time { color: var(--ink-dim); font-size: 12px; }
.s-body { margin-top: 6px; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.s-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); }

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hint { color: var(--ink-dim); font-size: 13px; margin-top: 10px; }
.error { color: var(--danger); font-size: 14px; margin-top: 10px; }
footer { text-align: center; padding: 24px 0 8px; }

/* ---------- agreement ---------- */
.agreement-box {
  max-height: 46vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--gold);
  border-radius: 12px; padding: 16px 18px;
  font-size: 15px; line-height: 1.6; white-space: pre-wrap;
  color: var(--ink);
}
.agree-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0; font-size: 14px; color: var(--ink); cursor: pointer;
}
.agree-check input {
  width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--accent); background: var(--bg-2);
}

/* ---------- foundation ---------- */
.foundation-cat {
  font-size: 15px; font-weight: 600; color: var(--accent-2);
  margin: 18px 0 10px; letter-spacing: .3px;
}
.progress-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--ink-dim); margin-top: 10px;
}
.progress-bar {
  height: 8px; border-radius: 4px; background: var(--bg-2);
  margin-top: 8px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease;
}
.fq { padding: 16px 18px; }
.fq-q { font-weight: 500; line-height: 1.45; margin-bottom: 10px; }
.fq-partner {
  background: var(--bg-2); border-left: 3px solid var(--accent-2);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.fq-pl { font-size: 12px; color: var(--ink-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.fq-pt { font-size: 14px; margin-top: 4px; white-space: pre-wrap; }
.fq-ta { min-height: 60px; }
.fq-save { margin-top: 10px; padding: 10px 14px; font-size: 14px; }
/* ---------- v0.5 extras ---------- */
.member-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.member-head h3 { margin-bottom: 0; }
.member-head .btn { font-size: 12px; padding: 4px 10px; }
.fq-why {
  font-size: 12.5px; color: var(--ink-dim); font-style: italic;
  margin: -4px 0 10px; line-height: 1.4;
}
.mon-item {
  background: var(--bg-2); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px;
}
.mon-head { margin-bottom: 4px; }
.mon-line {
  font-size: 13px; color: var(--ink-dim);
  margin-top: 3px; line-height: 1.4; white-space: pre-wrap;
}

/* ---------- v0.5.1 love languages ---------- */
.ll-mine { margin-bottom: 12px; }
.ll-label { font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.ll-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ll-chip {
  border: 1px solid var(--border, rgba(255,255,255,.15));
  background: transparent; color: var(--ink);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px;
  cursor: pointer; transition: all .15s ease;
}
.ll-chip.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.ll-chip.sel.top {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 10px rgba(196,101,79,.35);
}
.ll-save-row { display: flex; align-items: center; gap: 12px; }
.ll-save-row .hint { margin: 0; }
#ll-others { margin-top: 6px; }

/* ---------- v0.5.2 love quiz + visibility ---------- */
.quiz-q { padding: 14px 16px; }
.quiz-num { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.quiz-opt {
  display: block; width: 100%; text-align: left;
  background: var(--bg-2); border: 1px solid var(--border, rgba(255,255,255,.12));
  color: var(--ink); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 14px; line-height: 1.4;
  cursor: pointer; transition: all .15s ease;
}
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt.sel {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(196,101,79,.3);
}
.quiz-q.answered { border-left: 3px solid var(--accent-2); }
.quiz-done { margin-top: 14px; text-align: center; }
.quiz-res-head { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.quiz-res-row { margin-bottom: 12px; }
.quiz-res-label { font-size: 13.5px; margin-bottom: 4px; }
.quiz-res-bar {
  height: 10px; border-radius: 5px; background: var(--bg-2);
  overflow: hidden;
}
.quiz-res-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .4s ease;
}
.quiz-res-fill.top {
  background: linear-gradient(90deg, var(--accent), var(--gold, #C2A14F));
  box-shadow: 0 0 10px rgba(196,101,79,.4);
}
.ll-toggle {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 14px; padding: 10px 12px;
  background: var(--bg-2); border-radius: 10px;
}
.ll-toggle .hint { margin: 0; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border, rgba(255,255,255,.2));
  border-radius: 24px; transition: .2s;
}
.slider::before {
  content: ""; position: absolute; height: 18px; width: 18px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------- v0.5.3 QR join ---------- */
.qr-wrap {
  display: flex; justify-content: center;
  margin: 18px auto 10px; padding: 14px;
  background: #fff; border-radius: 14px;
  width: fit-content;
}
.qr-wrap svg { display: block; width: 200px; height: 200px; }
.qr-code {
  font-size: 20px; font-weight: 800; letter-spacing: 4px;
  color: var(--accent); text-align: center;
}
.logo-img.icon-only { width: 72px; height: 72px; }

/* ---------- v0.6 The Coach ---------- */
.tr-target-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tr-target-row select {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 14px;
}
#tr-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px; padding: 10px; font-size: 14px;
  resize: vertical; margin-bottom: 10px;
}
#tr-input:focus, .tr-target-row select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
#tr-result { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.tr-original { color: var(--ink-dim); font-size: 13px; font-style: italic; margin-bottom: 8px; }
.tr-translated {
  font-size: 15px; font-weight: 600; color: var(--gold);
  line-height: 1.45; padding-left: 10px; border-left: 3px solid var(--accent); margin-bottom: 10px;
}
.tr-notes { list-style: none; padding: 0; margin: 0; }
.tr-notes li {
  font-size: 13px; color: var(--ink-dim); padding: 4px 0 4px 16px;
  position: relative; line-height: 1.45;
}
.tr-notes li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.radar-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.radar-item:last-child { border-bottom: 0; }
.radar-item .radar-level {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 20px; text-transform: uppercase;
}
.radar-item .radar-level.watch { background: rgba(255,107,94,.16); color: var(--danger); }
.radar-item .radar-level.gentle { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--gold); }
.radar-item .radar-body { color: var(--ink-dim); }
.radar-item .radar-body b { color: var(--ink); }
.dialect-card { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dialect-card:last-child { border-bottom: 0; }
.dialect-card .d-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.dialect-card .d-name .role-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px; background: var(--card-2); color: var(--ink-dim);
}
.dialect-card .d-summary { color: var(--ink-dim); margin-top: 4px; line-height: 1.45; }
.tip-card {
  padding: 12px 14px; border-radius: 12px; margin-bottom: 10px;
  border: 1px solid var(--line); background: var(--card-2);
}
.tip-card:last-child { margin-bottom: 0; }
.tip-card .tip-title { font-weight: 700; margin-bottom: 4px; }
.tip-card .tip-body { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.tip-card.tone-gold { border-color: rgba(255,194,77,.35); background: rgba(255,194,77,.06); }
.tip-card.tone-gold .tip-title { color: var(--gold); }
.tip-card.tone-good { border-color: rgba(91,184,120,.35); background: rgba(91,184,120,.06); }
.tip-card.tone-good .tip-title { color: #5BB878; }
.tip-card.tone-info { border-color: rgba(91,139,194,.35); background: rgba(91,139,194,.06); }
.tip-card.tone-info .tip-title { color: #5B8BC2; }
.tip-card.tone-accent { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tip-card.tone-accent .tip-title { color: var(--accent-2); }

/* ---------- v0.8 Chats (messenger-style) ---------- */
.chat-list { display: flex; flex-direction: column; gap: 8px; }
.chat-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); padding: 12px 14px; cursor: pointer; transition: .15s;
}
.chat-row:active { transform: scale(.985); box-shadow: var(--glow); }
.chat-ico { font-size: 22px; flex: none; }
.chat-info { flex: 1; text-align: left; min-width: 0; }
.chat-info b { display: block; font-size: 15px; }
.chat-snippet {
  display: block; font-size: 12.5px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.chat-chev { color: var(--ink-dim); font-size: 20px; flex: none; }

/* Group Chat lock (skip/solo until linked) */
.chat-row.locked {
  opacity: .55; filter: saturate(.75); cursor: pointer;
}
.chat-row.locked:active { transform: scale(.985); box-shadow: none; }
.group-lock {
  margin-top: 8px; padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 10px;
}
.group-lock .hint { margin: 0; font-size: 13px; line-height: 1.5; }

/* Foundation MCQ options */
.fq-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fq-opt {
  text-align: left; padding: 12px 14px; font-size: 14.5px; font-family: inherit;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); cursor: pointer; transition: .15s;
}
.fq-opt:hover { border-color: var(--accent); }
.fq-opt.sel {
  border-color: var(--accent); background: var(--accent); color: #fff;
  box-shadow: var(--glow);
}
.fq-clear {
  margin-top: 8px; background: none; border: none;
  color: var(--ink-dim); font-size: 12.5px; font-family: inherit;
  text-decoration: underline; cursor: pointer; padding: 2px 0;
}

/* Pull-to-refresh (David 2026-09-05): drag down at the top of any screen to refresh in place, like a phone app. */
.ptr-indicator {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 0; transform: translateY(-60px);
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--ink) 14%, transparent);
  opacity: 0; will-change: transform, opacity;
  pointer-events: none;
}
.ptr-indicator .ptr-arrow { font-size: 15px; color: var(--ink-dim); transition: transform .18s ease; }
.ptr-indicator .ptr-text { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.ptr-indicator.armed { opacity: 1; }
.ptr-indicator.armed .ptr-arrow { transform: rotate(180deg); color: var(--accent); }

.chat-window {
  display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 340px;
  background: var(--bg); border: none; border-radius: 0; overflow: hidden;
  box-shadow: none;
}
.chat-tabs {
  display: flex; gap: 6px; margin: 0 14px 6px; padding: 3px 0;
}
.chat-tab {
  font-size: 11.5px; font-weight: 600; color: var(--ink-dim); background: none; border: none;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chat-tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chat-body {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  background-image: none;
  overscroll-behavior-y: contain;  /* pull at top stays ours, never chains to the page */
}
.chat-body .hint { text-align: center; margin-top: 24px; }
.chat-msg {
  max-width: 82%; align-self: flex-start;
  background: var(--card-2);
  border-radius: 18px 18px 18px 5px;
  padding: 9px 14px 8px;
  box-shadow: none;
}
.chat-msg.mine {
  align-self: flex-end;
  background: var(--accent);
  border-radius: 18px 18px 5px 18px;
}
.chat-msg.mine .chat-msg-body { color: #fff; }
.chat-msg.mine .chat-msg-time { color: rgba(255,255,255,.75); }
.chat-msg.mine .chat-msg-q { color: rgba(255,255,255,.8); }
.chat-msg.mine .chat-msg-reply {
  background: rgba(255,255,255,.14);
  border-left-color: rgba(255,255,255,.6);
  color: rgba(255,255,255,.9);
}
.chat-msg-time { font-size: 10.5px; color: var(--ink-dim); margin-top: 5px; text-align: right; padding-right: 2px; }
.chat-msg-who { font-size: 11.5px; font-weight: 700; color: var(--accent-2); margin-bottom: 3px; }
.chat-msg.mine .chat-msg-who { color: rgba(255,255,255,.92); }
/* Light themes (Gentle): solid accent bubbles need dark text, not white */
body.theme-gentle .chat-msg.mine .chat-msg-body { color: #5A3A33; }
body.theme-gentle .chat-msg.mine .chat-msg-time { color: rgba(90,58,51,.65); }
body.theme-gentle .chat-msg.mine .chat-msg-who { color: rgba(90,58,51,.85); }
body.theme-gentle .chat-msg.mine .chat-msg-reply {
  background: rgba(255,255,255,.4);
  border-left-color: rgba(90,58,51,.5);
  color: rgba(90,58,51,.75);
}
.chat-msg-q { font-size: 12px; color: var(--ink-dim); font-style: italic; margin-bottom: 4px; }
.chat-msg-body { font-size: 14.5px; line-height: 1.45; word-wrap: break-word; }
.chat-msg-time { font-size: 10.5px; color: var(--ink-dim); margin-top: 4px; text-align: right; }

/* reply-to (Telegram-style, 2026-09-05) */
.chat-msg-reply {
  font-size: 11.5px; color: var(--ink-dim);
  border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding: 2px 8px; margin-bottom: 2px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 6px;
}
.chat-reply-btn {
  font-size: 10.5px; color: var(--ink-dim); background: none; border: none;
  cursor: pointer; padding: 1px 5px; margin-top: 2px;
  -webkit-tap-highlight-color: transparent;
}
.chat-reply-btn:active { color: var(--accent); }
.reply-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 10px; margin-bottom: 6px; font-size: 12px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-bar-x {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font-size: 12px; padding: 0 3px; flex: none; -webkit-tap-highlight-color: transparent;
}

.chat-composer {
  border-top: 1px solid var(--line); background: var(--card);
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
}
.chat-composer select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 13.5px;
}
.chat-composer-row { display: flex; gap: 8px; align-items: stretch; }
.chat-composer-row textarea {
  flex: 1 1 auto; min-height: 44px; max-height: 240px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); caret-color: var(--accent);
  border-radius: 22px; padding: 11px 16px; font-size: 15px; line-height: 1.45;
  resize: none; overflow-y: auto;
  overscroll-behavior: contain;
}
.chat-composer-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.chat-composer-row .btn {
  flex: none; width: auto; min-width: 66px; margin-top: 0;
  padding: 12px 20px; font-size: 14.5px; height: auto;
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* GroupMe-style circular send button (reference, 2026-09-05) */
.chat-composer-row #btn-group-send,
.chat-composer-row #btn-private-send {
  min-width: 48px; width: 48px; padding: 0;
  border-radius: 50%;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.chat-composer-row #btn-group-send:active,
.chat-composer-row #btn-private-send:active { transform: scale(.92); }
/* Spice coach 🌶️: round pepper button, sits between the box and Send */
.chat-composer-row #btn-spice {
  min-width: 44px; width: 44px; padding: 0;
  border-radius: 50%; font-size: 19px;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: none;
}
.chat-composer-row #btn-spice:active { transform: scale(.9); }
.chat-prompt-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card);
}
.chat-prompt-bar .btn { flex: none; }
.chat-prompt-q { flex: 1; font-size: 13px; color: var(--ink-dim); font-style: italic; min-width: 120px; }
.chat-prompt-cat {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 8px; border-radius: 20px;
}

/* ---------- v0.9 avatars + profile ---------- */
/* Profile-settings avatar icon (David 2026-09-06): 20% bigger than the
   standard 42px avatar (→ 50px), so it reads as YOUR icon in settings. */
.pf-avatar-box {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 4px;
}
.pf-avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow); border: 2px solid var(--line);
  overflow: hidden; color: #fff;
}
.pf-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  letter-spacing: 1px;
}
.av-group { background: linear-gradient(135deg, #5B8BC2, #7BA05B); }
.av-agent { background: linear-gradient(135deg, #A78BFA, #8B5CF6); }
.chat-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; margin-right: 7px;
}
.chat-msg-head { display: flex; align-items: center; margin-bottom: 3px; }
.chat-msg-who { font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.chat-msg.mine .chat-msg-who { color: var(--gold); }
.pf-pics { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pf-pic {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line);
  background: var(--card-2); font-size: 20px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: .15s;
  white-space: nowrap; padding: 0 6px;
}
/* Flair pickers: chip labels are text (Round/Sharp/Dots…) — keep them one line */
#pf-accent .pf-pic, #pf-bubble .pf-pic, #pf-wall .pf-pic, #pf-font .pf-pic {
  font-size: 11px; font-weight: 700; width: auto; min-width: 46px; height: 34px;
  border-radius: 17px; padding: 0 10px;
}
.pf-pic.sel { border-color: var(--accent); box-shadow: var(--glow); transform: scale(1.08); }
#view-profile input[type="text"], #view-profile input[type="password"], #view-profile select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 10px; padding: 9px 11px; font-size: 14px;
  margin: 4px 0 10px;
}
#pf-accent .pf-pic.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
#pf-accent .pf-pic.sel::after {
  content: "\2713"; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  right: -4px; top: -4px;
}
#pf-accent .pf-pic { position: relative; }
#view-profile input:focus, #view-profile select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--glow);
}

/* ---------- v1.2 member profile (tap a person) ---------- */
.mp-hero {
  display: flex; align-items: center; gap: 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 16px; margin-bottom: 12px;
}
.mp-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow);
}
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-size: 20px; font-weight: 700; }
.mp-meta { color: var(--ink-dim); font-size: 13px; margin-top: 2px; }
.mp-status { font-size: 14px; margin-top: 6px; color: var(--ink); }
.mp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.mp-row-label { font-size: 12.5px; color: var(--ink-dim); font-weight: 600; letter-spacing: .2px; }
.mp-row-val { font-size: 14.5px; color: var(--ink); text-align: right; }
.mp-section-title { font-size: 13px; font-weight: 800; color: var(--accent-2); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.mp-love { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-love-chip {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 6px 12px; font-size: 13.5px; color: var(--ink);
}
.mp-love-chip.top { border-color: var(--accent); color: var(--accent-2); font-weight: 700; }
.mp-activity {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.mp-activity .act-head { font-size: 12px; color: var(--ink-dim); margin-bottom: 3px; }
.mp-activity .act-body { font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.mp-activity .act-time { font-size: 11.5px; color: var(--ink-dim); }
.person-tap { cursor: pointer; transition: .15s; }
.person-tap:active { transform: scale(.985); box-shadow: var(--glow); }
.avatar.tappable { cursor: pointer; }
.avatar.tappable:active { transform: scale(.94); }

/* v1.4 admin/guest danger buttons */
.btn.danger {
  background: rgba(255,107,94,.12);
  border-color: rgba(255,107,94,.4);
  color: var(--danger);
}
.btn.danger:active { box-shadow: 0 0 0 2px rgba(255,107,94,.3); }

/* ---------- v1.5 FULL-UI / landscape layout ----------
   SameSide grew out of the phone strip: use the whole screen,
   multi-column dashboard, never exceed margins or scroll sideways. */
html, body { overflow-x: hidden; }

/* Wider app shell on big screens */
@media (min-width: 820px) {
  .app { max-width: 1240px; padding: 20px 26px 48px; }
}

/* Dashboard: multi-column full UI */
@media (min-width: 820px) {
  #view-dash {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
  }
  #view-dash .topbar,
  #view-dash footer { grid-column: 1 / -1; }
  #view-dash .card { margin-bottom: 0; }
}
@media (min-width: 1160px) {
  #view-dash { grid-template-columns: repeat(3, 1fr); }
  #love-card { grid-column: span 2; }  /* love languages gets the room it needs */
}

/* Coach: two-pane on wide screens */
@media (min-width: 1100px) {
  #view-coach {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  #view-coach .topbar { grid-column: 1 / -1; }
  #view-coach .card { margin-bottom: 0; }
}

/* Settings: two-pane on wide screens */
@media (min-width: 1100px) {
  #view-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  #view-profile .topbar { grid-column: 1 / -1; }
  #view-profile .card { margin-bottom: 0; }
}

/* Readable, centered column for text-heavy views */
@media (min-width: 900px) {
  #view-foundation .card,
  #view-member .mp-hero,
  #view-member > .card,
  #view-linked .card,
  #view-agreement .card {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  #view-login .card,
  #view-join .card,
  #view-setup .card,
  #view-forgot .card,
  #view-reset .card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Chats: use the height, stay centered, no side-scroll */
@media (min-width: 820px) {
  .chat-window { max-width: 1060px; margin: 0 auto; height: calc(100vh - 130px); }
}

/* ---------- v1.6 iMessage hub ---------- */
/* avatar bubbles row (group chat header, iMessage style) */
.chat-bubbles {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.chat-bubbles .chat-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; margin: 0;
  cursor: pointer; transition: .15s;
}
.chat-bubbles .chat-av:active { transform: scale(.92); box-shadow: var(--glow); }

/* mini avatar stack for group row */
.mini-avatars {
  position: relative; display: inline-flex; flex-direction: row-reverse;
  align-items: center; gap: 0; flex: none; min-width: 52px;
}
.mini-avatars .chat-av {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; margin: 0 -6px 0 0;
}
.av-members { background: linear-gradient(135deg, #93A0AC, #5B8BC2); }

/* contacts page */
.contact-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: .15s;
}
.contact-card:active { transform: scale(.985); box-shadow: var(--glow); }
.contact-card .partner-avatar { width: 46px; height: 46px; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-weight: 600; font-size: 15px; }
.contact-status { color: var(--ink-dim); font-size: 13px; margin-top: 2px; }
.contact-chev { color: var(--ink-dim); font-size: 20px; }

/* ===== Look & feel flair (2026-09-05, David: MySpace-style but curated — no URLs) ===== */
/* Accent swatches */
body.accent-rose { --accent: #E0799C; --accent-2: #F2A9C0; --gold: #F2A9C0; }
body.accent-teal { --accent: #3FA9A5; --accent-2: #7FD4CF; --gold: #7FD4CF; }
body.accent-violet { --accent: #A78BFA; --accent-2: #C4B0FF; --gold: #C4B0FF; }
body.accent-apple { --accent: #7CB342; --accent-2: #AEDC7C; --gold: #AEDC7C; }
body.accent-sky { --accent: #5B8BC2; --accent-2: #9FC0F0; --gold: #9FC0F0; }
body.accent-amber { --accent: #F08A1D; --accent-2: #FFC24D; --gold: #FFC24D; }

/* Bubble shapes */
body.bubble-sharp .chat-msg { border-radius: 8px; }
body.bubble-sharp .chat-msg.mine { border-radius: 8px; }
body.bubble-pill .chat-msg { border-radius: 22px 22px 22px 6px; }
body.bubble-pill .chat-msg.mine { border-radius: 22px 22px 6px 22px; }

/* Chat wallpapers */
body.wall-grid .chat-body {
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 22px 22px;
}
body.wall-waves .chat-body {
  background-image: radial-gradient(rgba(255,255,255,.05) 30%, transparent 31%),
    radial-gradient(rgba(255,255,255,.05) 30%, transparent 31%);
  background-size: 34px 34px;
  background-position: 0 0, 17px 17px;
}
body.wall-plain .chat-body { background-image: none; background-size: auto; }

/* Font vibes */
body.font-serif, body.font-serif body { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
body.font-round, body.font-round body {
  font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
body.font-clean, body.font-clean body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Spice button: gone entirely when a minor is in the space (David, 2026-09-05) */
body.no-spice #btn-spice { display: none !important; }

/* Spice writing indicator (2026-09-05): appears the moment 🌶️ is tapped */
.spice-writing {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; margin-bottom: 6px; width: fit-content;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 12px; font-size: 12.5px; color: var(--ink-dim);
}
.spice-writing .sb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: sb-bounce 1.2s infinite ease-in-out;
}
.spice-writing .sb-dot:nth-child(2) { animation-delay: .15s; }
.spice-writing .sb-dot:nth-child(3) { animation-delay: .3s; }
@keyframes sb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* ---------- v1.6 group-polish (private bot translator) ---------- */
.polish {
  background: rgba(242,192,87,.08);
  border: 1px dashed rgba(242,192,87,.4);
  border-radius: 10px;
  padding: 10px 12px;
}
.polish-msg { font-size: 13.5px; line-height: 1.5; }
.polish-msg b { color: var(--gold); }
.polish-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.polish-actions .btn { margin-top: 0; }
.btn.polish-use { border-color: var(--gold); color: var(--gold); }

/* ---------- foundation results read-back ---------- */
.results-card { border-color: var(--accent-2); }
.results-summary {
  font-size: 15px; line-height: 1.55; font-weight: 500;
  color: var(--ink); background: var(--bg-2);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.results-love {
  font-size: 14.5px; font-weight: 600; color: var(--accent-2);
  margin: 4px 0 10px;
}
.results-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.results-label {
  flex: 0 0 46%; color: var(--ink-dim); font-size: 12.5px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.results-text { flex: 1; color: var(--ink); font-size: 14.5px; line-height: 1.4; }
.results-love-head { font-size: 14px; margin: 12px 0 8px; font-weight: 600; }
.results-love-bar-row { margin-bottom: 8px; }
.results-love-label { font-size: 13.5px; margin-bottom: 3px; display: block; }
.results-love-bar {
  height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden;
}
.results-love-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s ease;
}

/* ---------- show/hide password toggle ---------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 18px; line-height: 1;
  padding: 8px 8px; cursor: pointer; color: var(--ink-dim);
  -webkit-tap-highlight-color: transparent; border-radius: 8px;
}
.pw-toggle:active { background: var(--bg-2); }

/* stay-signed-in row (login screen) */
.stay-row {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 2px; font-size: 13.5px; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.stay-row input { width: 20px; height: 20px; min-width: 20px; accent-color: var(--accent); flex: none; }

/* ============================================================
   Mobile fit guard (2026-09-05)
   Defensive layer so the UI NEVER scrolls sideways on a phone,
   even in iOS Safari or when browser/accessibility zoom nudges
   text wider than the viewport. Complements the existing
   `html, body { overflow-x: hidden }` rule with per-element
   containment. Mobile-only to avoid touching the desktop layout.
============================================================ */
@media (max-width: 767px) {
  /* Never grow wider than the screen */
  html, body { width: 100%; }

  /* iOS: stop the whole page from being pannable/zoomable sideways.
     `touch-action: manipulation` kills double-tap-zoom; overscroll-behavior
     stops the rubber-band pan into black space; fixing the app container
     to the viewport stops Safari from letting it drift. */
  html { touch-action: manipulation; }
  body { overscroll-behavior-x: none; }
  html, body { position: static; overflow-x: hidden; }
  .app {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Long words/codes (invite codes, pasted URLs) must wrap instead
     of pushing the page wide. */
  .app { overflow-wrap: anywhere; word-break: break-word; }
  .qr-code, #qr-code-text, .qr-code-text,
  .chat-msg-body, .chat-msg-q, .chat-snippet,
  .hint, .couple-note, .results-text, .s-body,
  .mp-row-val, .mp-meta, .mp-status, .contact-status,
  .tagline, .whoami, label, input, select, textarea, button {
    overflow-wrap: anywhere;
  }

  /* Let flexible rows shrink instead of forcing a min width wider
     than the viewport. */
  .chat-info { min-width: 0; }
  .chat-prompt-q { min-width: 0; }
  .mp-info { min-width: 0; }
  .contact-info { min-width: 0; }

  /* Center the QR card; keep the SVG from pushing wide. */
  .qr-wrap { max-width: 100%; }
  .qr-wrap svg { max-width: 100%; height: auto; }

  /* Any stray nowrap long text elsewhere must never spill off-screen. */
  body { overflow-x: hidden; }

  /* Topbar: never crush the nav pills. On narrow phones the actions row wraps
     onto its own line instead of squeezing; buttons keep natural width and
     labels stay on one line (no more vertical "Sign out", no warped icons). */
  .topbar { flex-wrap: wrap; }
  .topbar > div { flex: none; }
  .topbar-actions { flex-wrap: wrap; max-width: 100%; }
  .topbar-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
}