:root{--ink:#F3F1FF;--muted:#C9C4EE;--dim:#9E99CC;--line:#333B85;--lav:#C4B5FD;--gold:#E6B85C;--gold-hi:#FFE7A8}
*{box-sizing:border-box}
html,body{height:100%}
html{background:#080B24}
body{margin:0;color:var(--ink);font:16px/1.5 Inter,system-ui,sans-serif;background:radial-gradient(140% 50% at 50% 0%,#3A2C86 0%,#1C1F5C 38%,#0E1338 70%,#080B24 100%) fixed;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--lav);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:720px;margin:0 auto}
.head{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid rgba(68,80,168,.45);background:rgba(14,19,56,.75);backdrop-filter:blur(10px)}
.back{display:grid;place-items:center;width:36px;height:40px;color:var(--lav);text-decoration:none;font-size:30px;line-height:1}
.avatar{flex:none;width:42px;border-radius:50%;box-shadow:0 0 0 2px rgba(230,184,92,.7),0 0 18px rgba(56,189,248,.35)}
.who{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.who b{font:600 17px Inter,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{font-size:12px;color:var(--dim)}
.status.live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80;vertical-align:1px}
.chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #4450A8;background:#0F1440;color:var(--ink);font:600 13px Inter,sans-serif;cursor:pointer}
.chip.gold{border-color:rgba(230,184,92,.7);color:var(--gold-hi)}
.chip[hidden]{display:none}
.modes{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;scrollbar-width:none}
.modes button{flex:none;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid #4450A8;background:rgba(15,20,64,.7);color:var(--muted);font:600 14px Inter,sans-serif;cursor:pointer}
.modes button[aria-pressed=true]{background:#2A1F6B;border-color:#8B5CF6;color:#fff}
.thread{flex:1;overflow-y:auto;padding:8px 14px 16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.welcome{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;margin:auto 0;padding:12px 0}
.welcome[hidden]{display:none}
.halo{position:absolute;top:110px;left:50%;width:280px;height:280px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(56,189,248,.32),rgba(139,92,246,.2) 60%,transparent)}
.welcome mj-buddy{position:relative;width:min(230px,58vw)}
.welcome h1{margin:6px 0 0;font:400 30px Fraunces,Georgia,serif;color:#fff;overflow-wrap:anywhere}
.welcome p{margin:6px 0 0;max-width:320px;color:var(--muted)}
.starters{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px;margin-top:16px}
.starters button{min-height:46px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(24,28,78,.72);color:var(--ink);font:500 15px Inter,sans-serif;text-align:left;cursor:pointer}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;word-wrap:break-word;animation:pop .18s ease-out}
.msg.user{align-self:flex-end;background:linear-gradient(180deg,#5B3FD6,#4330B0);border-bottom-right-radius:6px}
.msg.buddy{align-self:flex-start;background:rgba(24,28,78,.9);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.notice{align-self:center;max-width:92%;font-size:13px;color:var(--dim);background:none;border:1px dashed #4450A8}
.msg.crisis{border-color:rgba(230,184,92,.8)}
.typing{display:inline-flex;gap:4px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--lav);animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 6px;border-top:1px solid rgba(68,80,168,.45);background:rgba(14,19,56,.85)}
.composer textarea{flex:1;min-height:46px;max-height:140px;padding:12px 14px;border-radius:22px;border:1px solid #4450A8;background:#0F1440;color:var(--ink);font:16px Inter,sans-serif;resize:none}
.composer textarea::placeholder{color:var(--dim)}
.composer button{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;color:#1B1240;background:linear-gradient(180deg,#FFE7A8,#E6B85C 60%,#C99A3E);cursor:pointer}
.composer button:disabled{opacity:.5;cursor:wait}
.note{margin:0;padding:4px 16px calc(8px + env(safe-area-inset-bottom));font-size:11px;color:var(--dim);text-align:center;background:rgba(14,19,56,.85)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dot{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.msg,.typing i{animation:none}}
.head .chip{padding:0 12px}
@media (max-width:380px){.head .chip[href]{display:none}}
.modebar{display:flex;align-items:center;gap:6px;padding-right:14px}
.modebar .modes{flex:1;min-width:0}
.personalize{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 4px;color:var(--lav);font:600 13px Inter,sans-serif;text-decoration:underline;text-underline-offset:3px}

/* header link chips match the buttons (no underline, vertically centered) */
.head a.chip{display:inline-flex;align-items:center;text-decoration:none}
.modes{scroll-padding-inline:14px}
.modes>a{flex:none}

/* nothing hidden in the mode row on narrow phones: wrap instead of clipping */
.modes{flex-wrap:wrap;overflow-x:visible}
.personalize{margin-left:auto}
/* preview access-code gate: display controlled here so [hidden] works */
.access-gate{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px}
.access-gate[hidden]{display:none}

/* ── Quality audit (Nov 2026) ── */
/* Header face: a true circle (buddy-live.css gives crop=face border-radius:inherit, which out-ranked .avatar) */
.head mj-buddy.avatar{border-radius:50%}
/* Tap targets: every control at least 44px tall */
.chip,.back{min-height:44px}
.back{width:44px}
.modes button{min-height:44px}
/* Mode row: one tidy line on phones (4 equal modes + a compact Personalize), never a ragged wrap */
.modebar{gap:4px;padding-right:10px}
.modes{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:10px 4px 10px 14px}
.modes button{flex:1 0 auto;padding:0 12px}
.personalize{gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:0 8px;text-decoration:none;border-radius:999px}
.personalize span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:480px){.personalize span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.personalize{border:1px solid #4450A8;padding:0}}
/* Live AI off / offline / unreachable: one clear card in the welcome, with somewhere to go */
.availability{position:relative;width:100%;max-width:360px;margin-top:16px;padding:14px 16px;border-radius:16px;border:1px solid rgba(230,184,92,.55);background:rgba(24,28,78,.85);text-align:left}
.availability h2{margin:0;font:600 16px Inter,sans-serif;color:var(--gold-hi)}
.availability h2:focus{outline:none}
.availability p{margin:4px 0 0;max-width:none;font-size:14px;color:var(--muted)}
.availability .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.availability a.chip{display:inline-flex;align-items:center;text-decoration:none}
.availability .chip[hidden]{display:none}
.availability.nudge{animation:nudge .45s ease}
@keyframes nudge{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.starters button:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.availability.nudge{animation:none;box-shadow:0 0 0 2px var(--gold)}}
/* Preview access code: a compact card above the composer */
.access-gate{margin:0 12px 8px;padding:12px 14px;border-radius:16px;border:1px solid rgba(230,184,92,.55);background:rgba(24,28,78,.92)}
.access-gate label{flex:1 0 100%;font-size:14px;font-weight:600;color:var(--gold-hi)}
.access-gate input{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #4450A8;background:#0F1440;color:var(--ink);font:16px Inter,sans-serif}
.access-gate .chip{border-color:rgba(230,184,92,.7);color:var(--gold-hi)}

/* Interactive Companion Selection entry point (/meet) */
.companion-link+.personalize{margin-left:0}
@media (max-width:430px){.personalize span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.personalize{padding:0 6px}}
/* Voice replies (web/app/voice.js): speaker toggle under a Buddy reply */
.mj-say-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.mj-say{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(230,184,92,.55);background:rgba(15,20,64,.7);color:var(--gold-hi,#F7DFA0);font:600 13px Inter,sans-serif;cursor:pointer}
.mj-say.playing{background:rgba(230,184,92,.18)}
.mj-say:disabled{opacity:.6;cursor:progress}
.mj-say-note{font-size:12px;color:var(--muted,#AEAAD8)}
.head a.chip[hidden]{display:none}
/* Buddy Usage Center™ chip (signed-in accounts only): a compact gauge icon, kept on narrow phones */
.head .usage-chip{justify-content:center;width:44px;padding:0;color:var(--gold-hi)}
@media (max-width:380px){.head .usage-chip:not([hidden]){display:inline-flex}.head:has(.usage-chip:not([hidden])) [data-mj-tour-open]{display:none}}