/* Maya planner page (door 3, v0.3.2): one calm conversation column on the site tokens (site.css). The orange orb is the one bold element; everything else is navy text on the
   warm page background. Phone first (full bleed), centred at 720 px on desktop. The plan and the live call are sheets on the same page. */
.mh{--you:#EDEFF4;--maya:#fff;max-width:720px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100dvh - 120px);font-size:17px}
.sr{position:absolute;left:-9999px}
.fine{font-size:12px;line-height:1.45;color:var(--muted);margin:0}
.fine a{color:var(--muted)}
.noscroll{overflow:hidden}
/* header: orb, name, a quiet state line, the plan pill */
.mh-top{display:flex;align-items:center;gap:12px;padding:4px 0 16px}
.mh-id{display:flex;flex-direction:column;flex:1;min-width:0}
.mh h1{font-size:19px;line-height:1.2;margin:0}
.mh-sub{margin:0;font-size:13px;color:var(--muted)}
.mh-state{margin:0;font-size:13px;color:var(--muted);min-width:0}
.mh-state:empty{display:none}
.pill{min-height:44px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 14px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;touch-action:manipulation}
.pill.ghost{border-color:transparent;background:none;color:var(--muted);font-weight:500;padding:0 10px}
.pill.ghost{white-space:nowrap}@media (max-width:420px){.pill.ghost{padding:0 6px}.mh-top{gap:8px}}
.pill.ghost:hover{color:var(--navy);border-color:var(--line)}
.msg.confirm p{margin:0 0 10px}.msg.confirm .row{display:flex;flex-wrap:wrap;gap:8px}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--navy);color:#fff;font-size:12px;padding:0 6px}
/* the orb: breathes while listening, spins while thinking, pulses while speaking */
.orb{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FFD9A8,var(--orange) 55%,#B9650A)}
.orb span{width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:block}
.orb.big{width:120px;height:120px;margin:12px auto}
.orb.big span{border-width:3px}
.orb[data-s=listening] span,.orb[data-s=connecting] span{animation:breathe 3s ease-in-out infinite}
.orb[data-s=hearing] span{animation:breathe 1s ease-in-out infinite;border-color:#fff}
.orb[data-s=thinking] span,.orb[data-s=checking] span{animation:spin 1.4s linear infinite;border-style:dashed}
.orb[data-s=speaking] span{animation:breathe .7s ease-in-out infinite;border-color:#fff}
.orb[data-s=ended]{filter:grayscale(1) brightness(.75)}
@keyframes breathe{50%{transform:scale(1.12);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.orb span{animation:none!important}}
/* conversation */
.log{flex:1;display:flex;flex-direction:column;gap:12px;padding:0 0 12px}
.msg{max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.msg.maya{align-self:flex-start;background:var(--maya);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 16px}
.msg.you{align-self:flex-end;background:var(--you);border-radius:18px 18px 4px 18px;padding:12px 16px}
.msg.sys{align-self:center;font-size:13px;color:var(--muted);max-width:100%}
.msg.typing{color:var(--muted);letter-spacing:.2em}
.msg.done{border-color:#9CC9AB;background:var(--ok-bg);color:var(--ok-ink)}
.msg .src{font-size:12px;color:var(--muted);margin:8px 0 0;white-space:normal}
.msg .src a{color:var(--muted)}
.msg.agree p{margin:0 0 10px}
.msg.agree .btn{margin:0 0 8px}
.notice{background:var(--amber-bg);color:var(--amber-ink);border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 8px}
.chips,.quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.quick{align-self:flex-start}
.chip{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:0 14px;min-height:44px;cursor:pointer;font-size:15px;touch-action:manipulation}
.chip:hover{border-color:var(--navy)}
/* inline option cards: a few facts and one small action */
.opts{display:grid;gap:8px;align-self:stretch;max-width:88%}
.opt{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 14px;display:grid;gap:2px;font-size:15px}
.opt .t{font-weight:700}
.opt .s{color:var(--muted);font-size:14px}
.opt .p{font-weight:700}
.opt .miss{font-size:13px;color:#8A1424}
.opt .save{justify-self:start;min-height:36px;padding:0 4px;border:0;background:none;color:var(--navy);font-weight:700;text-decoration:underline;cursor:pointer;font-size:14px;touch-action:manipulation}
.opt .save:disabled{text-decoration:none;color:var(--muted);cursor:default}
/* input dock: text, mic, send, then one 'Talk to Maya' button and the small honesty line */
.dock{position:sticky;bottom:0;background:var(--bg);padding:8px 0 4px;display:flex;flex-direction:column;gap:10px}
.composer{display:flex;gap:8px;align-items:center}
.composer input{flex:1;min-width:0;border-radius:999px;padding:10px 16px;border:1px solid #CDBFA9}
.icon{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.icon.send{background:var(--navy);border-color:var(--navy);color:#fff}
.icon[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.icon:disabled{opacity:.5}
.talk-row{display:flex;justify-content:center}
.btn.talk{width:100%;max-width:360px;min-height:48px;font-size:17px}
.voice-off{margin:0;font-size:14px;color:var(--muted);text-align:center}
/* sheets: the plan (bottom sheet) and the live call (full screen) */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(27,42,74,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet-in{background:var(--bg);width:100%;max-width:720px;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0;padding:12px 16px 24px;display:flex;flex-direction:column;gap:12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h2{margin:0;font-size:19px}
.items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.item{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#fff;display:grid;gap:2px;grid-template-columns:1fr auto;align-items:center}
.item .k{font-size:12px;font-weight:700;color:var(--muted);text-transform:capitalize;grid-column:1}
.item .t{font-weight:600;overflow-wrap:anywhere;grid-column:1}
.item .s{font-size:14px;color:var(--muted);grid-column:1}
.item .rm{grid-column:2;grid-row:1/span 3;min-height:44px;border:0;background:none;color:var(--navy);text-decoration:underline;cursor:pointer;font-size:14px;padding:0 8px}
.addnote{display:flex;gap:8px}
.addnote input{flex:1;min-width:0}
.call{position:fixed;inset:0;z-index:50;background:var(--navy);color:#F4F1EA;display:flex;justify-content:center}
.call-in{width:100%;max-width:560px;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain}
.call-in>*{flex-shrink:0}
.call a{color:#FFD9A8}
.call .btn.sec{background:transparent;color:#F4F1EA;border-color:#F4F1EA}
.call .btn.end{background:var(--red);border-color:var(--red);color:#fff}
.call :focus-visible{outline-color:#fff}
.call-timer{margin:0;align-self:flex-end;font-variant-numeric:tabular-nums;font-weight:700;font-size:18px;color:#FFD9A8}.call-timer.low{color:#FF9AA6}
.call-who{margin:0;text-align:center;font-weight:700;font-size:18px}
.call-state{margin:0;text-align:center;color:#C9CFDC;min-height:1.5em}
.call-consent{font-size:15px;display:flex;flex-direction:column;gap:12px;margin-top:12px}
.call-consent p{margin:0}
.call-code{display:flex;flex-direction:column;gap:4px;font-size:14px}
.call-code input{min-height:44px;color:var(--navy)}
.captions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cap{margin:0;overflow-wrap:anywhere;line-height:1.45}
.cap.you{text-align:right;color:#FFD9A8;font-style:italic}
.cap.maya{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;max-height:8.5em;overflow-y:auto}
.cap:empty{display:none}
.call .opts{max-width:100%}
.call .opt{color:var(--ink)}
.call-ctl{display:flex;gap:10px;margin-top:auto;padding:12px 0 4px}
.call-ctl .btn{flex:1;min-height:52px}
@media (min-width:700px){.call{align-items:center;background:rgba(27,42,74,.6)}.call-in{background:var(--navy);border-radius:20px;max-height:92vh;padding:24px}.sheet{align-items:center}.sheet-in{border-radius:20px}}