:root{
  --yellow:#f6b418; --yellow-soft:#ffd873; --blue:#2f9ce4; --blue-deep:#1b7fc4;
  --navy:#2b2f38; --ink:#3a3f4a; --muted:#7c8496;
  --bg:#f4f8fc; --card:#ffffff; --line:#e6edf5;
  --bubble-you:#2f9ce4; --bubble-b:#fff5da; --bubble-j:#e7f4ff;
  --shadow:0 10px 34px rgba(43,47,56,.12);
  --font:"Nunito", ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(90% 55% at 15% 0%, rgba(246,180,24,.10), transparent 60%),
    radial-gradient(90% 55% at 100% 100%, rgba(47,156,228,.12), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.screen{display:none; min-height:100dvh; flex-direction:column}
.screen.is-active{display:flex}

/* ---------- Landing ---------- */
.landing-wrap{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; gap:18px; max-width:560px; margin:0 auto;
}
.logo{filter:drop-shadow(0 12px 24px rgba(47,156,228,.22))}
h1{
  margin:6px 0 0; font-size:clamp(30px,7vw,46px); line-height:1.08; font-weight:900;
  color:var(--navy); letter-spacing:-.02em; text-wrap:balance;
}
h1 .hl{color:var(--blue-deep)}
.sub{margin:0; font-size:17px; line-height:1.5; color:var(--muted); max-width:38ch}
.disclose-line{margin:14px 0 0; font-size:12.5px; color:var(--muted); max-width:40ch; line-height:1.5}
.disclose-line b{color:var(--blue-deep)}
.foot{padding:16px; text-align:center; font-size:12px; color:var(--muted); letter-spacing:.02em}

/* ---------- Buttons ---------- */
.btn{
  border:0; border-radius:16px; font-family:var(--font); font-weight:800; font-size:17px;
  padding:15px 26px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s;
}
.btn-primary{
  color:#fff; background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  box-shadow:0 10px 24px rgba(31,127,196,.32);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn-ghost{background:transparent; color:var(--muted); font-weight:700; font-size:15px; padding:8px}
.btn-ghost:hover{color:var(--ink)}

/* ---------- Consent ---------- */
#consent{align-items:center; justify-content:center; padding:24px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); padding:30px 26px; max-width:440px; width:100%;
  display:flex; flex-direction:column; gap:16px; text-align:left;
}
.card h2{margin:0; font-size:22px; font-weight:900; color:var(--navy); text-align:center}
.honest{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.honest li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; color:var(--ink)}
.honest li span{font-size:19px; flex:0 0 auto; line-height:1.3}
.honest b{color:var(--navy)}
.agree{display:flex; gap:11px; align-items:flex-start; background:#f7fbff; border:1px solid var(--line);
  border-radius:14px; padding:13px 14px; font-size:14.5px; cursor:pointer}
.agree input{width:20px; height:20px; margin-top:1px; accent-color:var(--blue); flex:0 0 auto}
.agree b{color:var(--navy)}
#enter-btn{width:100%}
.dob-field{display:flex; flex-direction:column; gap:7px; font-size:14.5px; color:var(--ink)}
.dob-field label b{color:var(--navy)}
.dob-field input{border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-family:var(--font); font-size:16px; color:var(--ink); background:#fff; width:100%}
.dob-field input:focus{outline:none; border-color:var(--blue)}
.under18{margin:0; background:#fff4f4; border:1px solid #ffd0d0; border-radius:12px;
  padding:12px 14px; font-size:14px; line-height:1.5; color:#7d2b2b}
.under18 b{color:#b02a2a}
.chip-call{cursor:pointer; font-family:var(--font); font-size:11px; font-weight:800;
  color:var(--blue-deep); background:#e7f4ff; border:1px solid #cfe8fb; padding:4px 10px; border-radius:999px}

/* ---------- Chat ---------- */
#chat{background:var(--bg)}
.chat-top{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.logo-sm{border-radius:9px}
.who{flex:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.switcher{display:inline-flex; background:#eef3f9; border-radius:12px; padding:3px}
.pill{
  border:0; background:transparent; font-family:var(--font); font-weight:800; font-size:14px;
  color:var(--muted); padding:7px 15px; border-radius:10px; cursor:pointer; transition:.14s;
}
.pill.is-on{background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(43,47,56,.12)}
.ai-chip{font-size:11px; font-weight:800; color:var(--muted); background:#eef3f9;
  padding:4px 9px; border-radius:999px; letter-spacing:.02em}
.chip-988{
  margin-left:auto; text-decoration:none; font-size:12.5px; font-weight:900; color:#c23b3b;
  background:#ffe9e9; border:1px solid #ffd0d0; padding:6px 11px; border-radius:999px; white-space:nowrap;
}

.messages{flex:1; overflow-y:auto; padding:20px 16px 8px; display:flex; flex-direction:column; gap:12px;
  max-width:720px; width:100%; margin:0 auto}
.msg{max-width:80%; padding:12px 15px; border-radius:18px; font-size:15.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word}
.msg.you{align-self:flex-end; background:var(--bubble-you); color:#fff; border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start; background:var(--bubble-b); color:var(--ink); border-bottom-left-radius:6px; border:1px solid #f2e6bf}
body[data-agent="jessica"] .msg.bot{background:var(--bubble-j); border-color:#cfe8fb}
.msg.crisis{align-self:stretch; max-width:100%; background:#fff4f4; border:1.5px solid #ffc9c9; color:#7d2b2b}
.msg.crisis b{color:#b02a2a}
.msg a{color:inherit; font-weight:800}
.typing{align-self:flex-start; display:inline-flex; gap:5px; padding:14px 16px; background:var(--bubble-b);
  border:1px solid #f2e6bf; border-radius:18px; border-bottom-left-radius:6px}
body[data-agent="jessica"] .typing{background:var(--bubble-j); border-color:#cfe8fb}
.typing i{width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.5; animation:bob 1s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:.9}}

.composer{display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  max-width:720px; width:100%; margin:0 auto; position:sticky; bottom:0}
#msg{flex:1; border:1.5px solid var(--line); border-radius:14px; padding:13px 15px; font-family:var(--font);
  font-size:16px; color:var(--ink); background:#fff; outline:none; transition:border .14s}
#msg:focus{border-color:var(--blue)}
.send{border:0; width:48px; height:48px; border-radius:14px; flex:0 0 auto; cursor:pointer; color:#fff;
  font-size:18px; background:linear-gradient(180deg,var(--yellow),#e79f0c); box-shadow:0 6px 16px rgba(231,159,12,.3)}
.send:hover{transform:translateY(-1px)}
.send:disabled{opacity:.5; cursor:not-allowed}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}