/* ============================================================
   HAVEN — token system
   ============================================================ */
:root{
  --ink:        #12141d;
  --dusk:       #191c2a;
  --dusk-2:     #212639;
  --dusk-3:     #2a3049;
  --dusk-line:  #333a59;
  --lantern:    #e8a853;
  --lantern-hi: #f4c179;
  --lantern-dim:#a97b3f;
  --moon:       #f4f1e9;
  --mist:       #a2a9c4;
  --mist-dim:   #6d7492;
  --sage:       #86ab8f;
  --sage-dim:   #5f7d67;
  --rose:       #c9727a;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', 'SFMono-Regular', monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  font-family: var(--sans);
  color: var(--moon);
  background:
    radial-gradient(1100px 700px at 18% -10%, #232a44 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #1c2036 0%, transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, #0e0f16 100%);
  min-height:100dvh;
  overflow-x:hidden;
}
h1,h2,h3{ font-family: var(--serif); font-weight:500; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; }
::selection{ background:var(--lantern); color:var(--ink); }

/* faint grain for tactility, not decoration for its own sake */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:5;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--lantern); outline-offset:3px; border-radius:4px; }

/* ============================================================
   Header
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; height:60px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,32px);
  background:linear-gradient(180deg, rgba(14,15,22,.88), rgba(14,15,22,0));
  backdrop-filter: blur(6px);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em; }
.brand-mark{ width:16px; height:16px; border-radius:50%; background:var(--lantern); box-shadow:0 0 0 4px rgba(232,168,83,.16), 0 0 14px 2px rgba(232,168,83,.55); flex:none; }
.crisis-link{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mist); text-decoration:none; border:1px solid var(--dusk-line);
  padding:7px 12px; border-radius:999px; transition:border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.crisis-link:hover{ color:var(--rose); border-color:var(--rose); }

/* ============================================================
   Screens
   ============================================================ */
main{ position:relative; z-index:1; }
.screen{
  min-height:100dvh;
  display:none;
  padding:88px 20px 40px;
}
.screen.active{ display:flex; flex-direction:column; }
.screen-inner{ width:100%; max-width:640px; margin:0 auto; flex:1; display:flex; flex-direction:column; }

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.screen.active .anim{ animation: rise .6s var(--ease) both; }
.anim-d1{ animation-delay:.05s !important; }
.anim-d2{ animation-delay:.14s !important; }
.anim-d3{ animation-delay:.22s !important; }
.anim-d4{ animation-delay:.3s !important; }

/* ============================================================
   Welcome
   ============================================================ */
#screen-welcome .screen-inner{ justify-content:center; align-items:center; text-align:center; gap:0; max-width:560px; }
.hero-orb{ position:relative; width:64px; height:64px; margin-bottom:30px; }
.hero-orb .core{
  position:absolute; inset:22px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--lantern-hi), var(--lantern) 55%, var(--lantern-dim) 100%);
  box-shadow: 0 0 30px 6px rgba(232,168,83,.45);
}
.hero-orb .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(232,168,83,.28); animation: pulse-ring 3.2s ease-out infinite; }
.hero-orb .ring.r2{ animation-delay:1.1s; }
.hero-orb .ring.r3{ animation-delay:2.2s; }
@keyframes pulse-ring{
  0%{ transform:scale(.45); opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-orb .ring{ animation:none; opacity:.3; }
}

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist-dim); margin-bottom:14px;
}
h1.headline{
  font-size:clamp(2.1rem, 6vw, 3.4rem); line-height:1.06; font-weight:500;
  max-width:14ch;
}
h1.headline em{ font-style:italic; color:var(--lantern-hi); }
.sub{
  margin-top:18px; color:var(--mist); font-size:clamp(1rem,2.4vw,1.12rem); line-height:1.55; max-width:38ch;
}

.role-choices{
  margin-top:38px; display:flex; flex-direction:column; gap:12px; width:100%; max-width:400px;
}
.btn{
  font-size:1rem; font-weight:600; border-radius:999px; padding:15px 26px; border:1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--lantern); color:#221604; box-shadow:0 8px 24px -8px rgba(232,168,83,.55); }
.btn-primary:hover{ box-shadow:0 10px 30px -6px rgba(232,168,83,.7); transform:translateY(-1px); }
.btn-secondary{ background:transparent; border-color:var(--sage-dim); color:var(--sage); }
.btn-secondary:hover{ border-color:var(--sage); background:rgba(134,171,143,.08); }
.btn-ghost{ background:transparent; color:var(--mist); border-color:var(--dusk-line); }
.btn-ghost:hover{ color:var(--moon); border-color:var(--mist-dim); }
.btn:disabled{ opacity:.4; pointer-events:none; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.85rem; border-radius:999px; }

.trust-line{
  margin-top:26px; font-size:.82rem; color:var(--mist-dim); display:flex; align-items:center; gap:8px;
}
.trust-line .dot{ width:3px; height:3px; border-radius:50%; background:var(--mist-dim); }

.foot-note{
  text-align:center; font-size:.78rem; color:var(--mist-dim); line-height:1.6; max-width:46ch;
  margin:44px auto 0;
}
.foot-note a{ color:var(--mist); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   Shared screen chrome (mood / waiting / feedback / listener)
   ============================================================ */
.step-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.back-btn{
  background:none; border:none; color:var(--mist-dim); font-family:var(--mono); font-size:.78rem;
  display:flex; align-items:center; gap:6px; padding:6px 2px;
}
.back-btn:hover{ color:var(--moon); }
h2.q{ font-size:clamp(1.5rem,4.4vw,2.1rem); font-weight:500; max-width:16ch; }
.q-sub{ margin-top:10px; color:var(--mist); font-size:.98rem; max-width:44ch; line-height:1.5; }

/* Mood grid */
.mood-grid{
  margin-top:30px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
}
.mood-chip{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--dusk-2); border:1px solid var(--dusk-line); border-radius:var(--radius);
  padding:13px 14px; color:var(--moon); font-size:.92rem; font-weight:500;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.mood-chip .em{ font-size:1.15rem; line-height:1; }
.mood-chip:hover{ border-color:var(--mist-dim); }
.mood-chip.selected{ background:rgba(232,168,83,.1); border-color:var(--lantern-dim); box-shadow:0 0 0 1px rgba(232,168,83,.25) inset; }

textarea.field{
  margin-top:22px; width:100%; resize:vertical; min-height:88px; background:var(--dusk-2);
  border:1px solid var(--dusk-line); border-radius:var(--radius); color:var(--moon); font-family:var(--sans);
  font-size:.95rem; padding:14px; line-height:1.5;
}
textarea.field::placeholder{ color:var(--mist-dim); }
textarea.field:focus{ border-color:var(--lantern-dim); outline:none; }
.field-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); margin-top:22px; display:block; }

.screen-actions{ margin-top:auto; padding-top:30px; display:flex; gap:12px; }

/* Waiting */
#screen-waiting .screen-inner{ align-items:center; justify-content:center; text-align:center; }
.wait-orb{ position:relative; width:120px; height:120px; margin-bottom:34px; }
.wait-orb .core{
  position:absolute; inset:44px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--lantern-hi), var(--lantern) 55%, var(--lantern-dim) 100%);
  box-shadow:0 0 40px 8px rgba(232,168,83,.5);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.14);} }
.wait-orb .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(232,168,83,.22); animation:pulse-ring 3s ease-out infinite; }
.wait-orb .ring.r2{ animation-delay:1s; } .wait-orb .ring.r3{ animation-delay:2s; }
@media (prefers-reduced-motion: reduce){ .wait-orb .core{ animation:none; } .wait-orb .ring{ animation:none; opacity:.25; } }
.wait-status{ font-size:1.15rem; font-family:var(--serif); color:var(--moon); min-height:1.4em; }
.wait-timer{ margin-top:10px; font-family:var(--mono); font-size:.8rem; color:var(--mist-dim); letter-spacing:.03em; }
.wait-hint{ margin-top:26px; color:var(--mist-dim); font-size:.85rem; max-width:32ch; line-height:1.5; }

/* Match reveal */
.match-card{
  margin-top:6px; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.identity-orb{ width:56px; height:56px; border-radius:50%; flex:none; box-shadow:0 0 22px -2px currentColor; }
.identity-name{ font-family:var(--serif); font-size:1.5rem; }
.identity-meta{ font-family:var(--mono); font-size:.74rem; color:var(--mist-dim); letter-spacing:.05em; text-transform:uppercase; }

/* ============================================================
   Chat
   ============================================================ */
#screen-chat{ padding:0; }
.chat-wrap{ display:flex; flex-direction:column; height:100dvh; }
.chat-header{
  padding:64px 18px 14px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--dusk-line); flex:none;
}
.chat-header .identity-orb{ width:34px; height:34px; }
.chat-id-block{ flex:1; min-width:0; }
.chat-id-name{ font-family:var(--serif); font-size:1.05rem; line-height:1.2; }
.chat-id-status{ font-family:var(--mono); font-size:.7rem; color:var(--sage); letter-spacing:.04em; display:flex; align-items:center; gap:6px; }
.chat-id-status .live-dot{ width:6px; height:6px; border-radius:50%; background:var(--sage); box-shadow:0 0 6px var(--sage); }
.chat-timer{ font-family:var(--mono); font-size:.76rem; color:var(--mist-dim); white-space:nowrap; }
.chat-menu-btn{ background:none; border:1px solid var(--dusk-line); width:34px; height:34px; border-radius:50%; color:var(--mist); display:flex; align-items:center; justify-content:center; flex:none; }
.chat-menu-btn:hover{ border-color:var(--mist-dim); color:var(--moon); }

.chat-body{ flex:1; overflow-y:auto; padding:22px 18px; display:flex; flex-direction:column; gap:12px; }
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background:var(--dusk-line); border-radius:3px; }

.bubble-row{ display:flex; max-width:100%; }
.bubble-row.self{ justify-content:flex-end; }
.bubble{
  max-width:78%; padding:11px 15px; border-radius:16px; font-size:.94rem; line-height:1.48;
  animation: bubble-in .32s var(--ease) both;
}
@keyframes bubble-in{ from{ opacity:0; transform:translateY(6px) scale(.98);} to{ opacity:1; transform:none;} }
.bubble-row:not(.self) .bubble{ background:var(--dusk-2); border:1px solid var(--dusk-line); border-bottom-left-radius:5px; }
.bubble-row.self .bubble{ background:rgba(232,168,83,.14); border:1px solid rgba(232,168,83,.3); border-bottom-right-radius:5px; }
.bubble-meta{ font-family:var(--mono); font-size:.62rem; color:var(--mist-dim); margin-top:5px; padding:0 4px; }
.bubble-row.self .bubble-meta{ text-align:right; }

.sys-line{ align-self:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--mist-dim); text-transform:uppercase; margin:6px 0; }

.typing-row{ display:flex; align-items:center; gap:4px; padding:11px 15px; background:var(--dusk-2); border:1px solid var(--dusk-line); border-radius:16px; border-bottom-left-radius:5px; width:fit-content; }
.typing-row span{ width:6px; height:6px; border-radius:50%; background:var(--mist-dim); animation:typing-bounce 1.2s infinite ease-in-out; }
.typing-row span:nth-child(2){ animation-delay:.15s; } .typing-row span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

.chat-input-bar{
  flex:none; display:flex; gap:10px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--dusk-line); background:rgba(25,28,42,.7); backdrop-filter:blur(8px);
}
.chat-input-bar input[type=text]{
  flex:1; background:var(--dusk-2); border:1px solid var(--dusk-line); border-radius:999px;
  padding:13px 18px; color:var(--moon); font-family:var(--sans); font-size:.95rem;
}
.chat-input-bar input[type=text]::placeholder{ color:var(--mist-dim); }
.chat-input-bar input[type=text]:focus{ outline:none; border-color:var(--lantern-dim); }
.send-btn{
  width:46px; height:46px; border-radius:50%; background:var(--lantern); border:none; flex:none;
  display:flex; align-items:center; justify-content:center; color:#221604; transition:transform .15s var(--ease), opacity .15s;
}
.send-btn:hover{ transform:scale(1.05); }
.send-btn:disabled{ opacity:.35; transform:none; }

/* ============================================================
   Feedback
   ============================================================ */
.stars{ display:flex; gap:8px; margin-top:16px; }
.star-btn{ background:none; border:none; padding:2px; color:var(--dusk-line); transition:color .15s, transform .15s; }
.star-btn.filled{ color:var(--lantern); }
.star-btn:hover{ transform:scale(1.1); }
.yn-group{ display:flex; gap:10px; margin-top:14px; }
.yn-btn{
  flex:1; padding:12px; border-radius:var(--radius); border:1px solid var(--dusk-line); background:var(--dusk-2);
  color:var(--mist); font-weight:600; font-size:.9rem; transition:.18s var(--ease);
}
.yn-btn.chosen{ border-color:var(--sage-dim); background:rgba(134,171,143,.12); color:var(--sage); }
.fb-block{ margin-top:28px; }
.fb-block:first-of-type{ margin-top:34px; }

.thanks-wrap{ text-align:center; }

/* ============================================================
   Listener screens
   ============================================================ */
.avail-card{
  margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--dusk-2); border:1px solid var(--dusk-line); border-radius:var(--radius-lg); padding:20px;
}
.avail-card .lbl{ font-weight:600; font-size:.98rem; }
.avail-card .sub2{ color:var(--mist-dim); font-size:.82rem; margin-top:4px; }
.switch{ position:relative; width:50px; height:29px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background:var(--dusk-3); border:1px solid var(--dusk-line); border-radius:999px; transition:.2s; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:var(--mist); transition:.2s var(--ease); }
.switch input:checked + .track{ background:rgba(134,171,143,.25); border-color:var(--sage-dim); }
.switch input:checked + .track .thumb{ transform:translateX(21px); background:var(--sage); box-shadow:0 0 8px var(--sage); }

.listen-status{ margin-top:26px; display:flex; align-items:center; gap:10px; color:var(--mist); font-family:var(--mono); font-size:.82rem; }
.listen-status .pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 8px var(--sage); animation:breathe 1.8s ease-in-out infinite; }

.incoming-card{
  margin-top:30px; background:var(--dusk-2); border:1px solid var(--dusk-line); border-radius:var(--radius-lg); padding:22px;
  animation: rise .5s var(--ease) both;
}
.incoming-mood{ display:inline-flex; align-items:center; gap:8px; background:var(--dusk-3); padding:7px 13px; border-radius:999px; font-size:.86rem; font-weight:600; }
.incoming-note{ margin-top:16px; color:var(--mist); font-size:.95rem; line-height:1.55; }
.incoming-actions{ margin-top:22px; display:flex; gap:12px; }

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(9,10,15,.72); backdrop-filter:blur(3px);
  display:none; align-items:flex-end; justify-content:center; z-index:100; padding:0;
}
.modal-overlay.open{ display:flex; }
.modal-card{
  width:100%; max-width:480px; background:var(--dusk); border:1px solid var(--dusk-line);
  border-radius:20px 20px 0 0; padding:26px 22px calc(26px + env(safe-area-inset-bottom)); max-height:82vh; overflow-y:auto;
  animation: modal-up .3s var(--ease) both;
}
@keyframes modal-up{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
@media (min-width:640px){
  .modal-overlay{ align-items:center; }
  .modal-card{ border-radius:20px; }
}
.modal-title{ font-family:var(--serif); font-size:1.3rem; margin-bottom:6px; }
.modal-close{ float:right; background:none; border:none; color:var(--mist-dim); font-size:1.3rem; line-height:1; padding:4px; }
.report-reasons{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.report-reason{ display:flex; align-items:center; gap:10px; background:var(--dusk-2); border:1px solid var(--dusk-line); border-radius:var(--radius); padding:12px 14px; font-size:.9rem; }
.report-reason input{ accent-color:var(--lantern); }
.modal-actions{ margin-top:20px; display:flex; gap:10px; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(12px); z-index:200;
  background:var(--moon); color:var(--ink); padding:12px 20px; border-radius:999px; font-size:.88rem; font-weight:600;
  opacity:0; pointer-events:none; transition:.28s var(--ease); box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* crisis modal body copy */
.crisis-body p{ color:var(--mist); font-size:.92rem; line-height:1.6; margin-top:12px; }
.crisis-body strong{ color:var(--moon); }

@media (max-width:420px){
  .role-choices{ max-width:100%; }
  .mood-grid{ grid-template-columns:repeat(2,1fr); }
}