@font-face{font-family:Nunito;src:url('/static/Nunito-Variable.ttf') format('truetype');font-weight:200 900;font-display:swap}
:root{color-scheme:dark;--bg:#0a1524;--ink:#e9e8df;--muted:#c2cbd1;--edge:#d4ded254;--surface:#1b2b36ed;--action:#34515c}
*{box-sizing:border-box}body{margin:0;background:#070b12;color:var(--ink);font:15px/1.5 Nunito,'Trebuchet MS',sans-serif}.hidden{display:none!important}
.phone{width:min(100vw,390px);height:100dvh;min-height:600px;max-height:1000px;margin:auto;position:relative;overflow:hidden;background:var(--bg) url('/static/night-sky.svg') center/cover no-repeat}
/* On phones the app is the viewport; only its transcript and panels may scroll. */
@media(max-width:600px){html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}.phone{width:100%;height:100vh;height:100dvh;min-height:0;max-height:none;margin:0}.chat-view,.messages{min-height:0}.messages,.drawer,.settings-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}
/* iOS focuses inputs smaller than 16px by zooming even when the viewport is fixed. */
@media(max-width:859px){:root .phone :is(input,select,textarea){font-size:max(16px,var(--text-size))!important}}
button,input{font:inherit}button{cursor:pointer;color:var(--ink)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:1.5px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 4px var(--ring-soft)}
.login-view input:focus-visible,.topic-create input:focus-visible,.settings-dialog input:focus-visible,.settings-dialog select:focus-visible{outline:1.5px solid var(--ring);outline-offset:0;border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-soft)}
.composer:focus-within{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-soft)}
.composer input:focus-visible{outline:0;box-shadow:none}
.topics button:focus-visible{outline-offset:1px}button:disabled,input:disabled{opacity:.5;cursor:wait}
.top{height:72px;border-bottom:1px solid #ffffff1e;background:#0b1429d9;display:flex;align-items:center;gap:13px;padding:15px 18px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.icon{background:none;border:0;font-size:25px;min-width:44px;min-height:44px}.title{font-size:18px;font-weight:600}.sub{font-size:12px;color:var(--muted);max-width:245px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar{margin-left:auto;border:1px solid var(--edge);border-radius:50%;width:34px;height:34px;display:grid;place-items:center}
.login-view{margin:26vh 18px 0;padding:20px;border:1px solid var(--edge);border-radius:18px;background:#142432f2}.login-view h1{font-size:20px;font-weight:600;margin:0 0 4px}.login-view p{font-size:12px;color:var(--muted)}label{display:block;font-size:13px;margin:14px 0 7px}.login-view input,.topic-create input{width:100%;background:#0c1b2b;color:var(--ink);border:1px solid var(--edge);padding:11px 12px;border-radius:11px}.primary{background:var(--action);border:1px solid var(--edge);border-radius:11px;min-height:44px;width:100%;margin-top:18px}
.login-view{overflow-y:auto;max-height:calc(100% - 94px);margin:16px 18px 0;scrollbar-color:#52647a transparent}#transfer-code{display:block;overflow-wrap:anywhere;user-select:text}#recovery-codes{max-width:min(94vw,460px);max-height:90dvh;overflow-y:auto;border:1px solid var(--edge);border-radius:16px;background:#142432;color:var(--ink);padding:18px}#recovery-codes::backdrop{background:#000c}#recovery-code-list{white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}#recovery-codes button{min-height:44px;background:var(--action);border:1px solid var(--edge);border-radius:10px}.drawer{overflow-y:auto}#access-panel{flex-shrink:0}
.chat-view{height:calc(100% - 72px);display:flex;flex-direction:column;padding:0 17px 14px}.transcript-viewport{position:relative;flex:1;min-height:0}.messages{height:100%;overflow-y:auto;padding:22px 0 12px;scrollbar-color:#52647a transparent}.jump-latest{position:absolute;right:14px;bottom:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--note,var(--surface));color:var(--ink);box-shadow:0 4px 18px #0008}.jump-latest svg{pointer-events:none}.empty{color:#c6d1d9;text-align:center;margin:18vh 5px}.bubble{width:max-content;max-width:90%;padding:12px 15px;border-radius:18px;line-height:1.5;margin:8px 0;background:var(--surface);border:1px solid #cad2d021;white-space:pre-wrap;overflow-wrap:anywhere;position:relative}
.bubble .stamp{display:block;margin-top:4px;font-size:9px;letter-spacing:.04em;color:var(--quiet);opacity:.75;text-align:right;font-variant-numeric:tabular-nums}
.bubble.message-pending{opacity:.72}
:root[data-messages="contrast"] .bubble{background:var(--contrast-assistant);border-color:var(--edge)}
:root[data-messages="contrast"] .bubble.mine{background:var(--contrast-mine);border-color:transparent}
:root[data-messages="contrast"] .bubble .label{opacity:.85}
:root[data-messages="minimal"] .bubble{background:none;border:0;border-radius:0;padding:2px 0 2px 12px;max-width:100%;width:auto;margin:16px 0}
:root[data-messages="minimal"] .bubble.mine{background:none;border:0;border-right:2px solid var(--edge);border-radius:0;padding:2px 12px 2px 0;text-align:right;margin-left:auto;max-width:100%;width:auto}
:root[data-messages="minimal"] .bubble:not(.mine){border-left:2px solid var(--edge)}
:root[data-messages="minimal"] .bubble .label{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:3px}
:root[data-messages="minimal"] .bubble .stamp{margin-top:3px}
:root[data-messages="minimal"] .attach-row{margin-top:8px}.mine{margin-left:auto;background:#29404ae8;border-color:#b4c9c955}.label{color:#b7c7c8;font-size:11px;margin-bottom:5px}.work-status{display:flex;gap:9px;align-items:center;font-size:12px;color:#c9d6d4;padding:3px 0 10px}.orb{width:12px;height:12px;flex:0 0 12px;border-radius:50%;background:#d1d8c4;box-shadow:0 0 0 3px #d4dfd432;animation:breathe 2.7s ease-in-out infinite}@keyframes breathe{50%{opacity:.55;transform:scale(.8)}}
.demo-action{align-self:flex-start;min-height:36px;margin:0 0 8px;background:none;border:1px solid #b5c4bd66;border-radius:10px;color:#b8c8ca;font-size:12px;padding:5px 11px}.question{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:10px 13px;margin-bottom:11px}.question p{margin:2px 0 9px}.buttons{display:flex;gap:8px}.buttons button{background:var(--action);border:1px solid var(--edge);border-radius:10px;min-width:70px;min-height:44px}.route{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:10px 13px;margin-bottom:11px}.route p{margin:2px 0 8px}.route-meter{height:3px;border-radius:3px;background:#ffffff1f;overflow:hidden;margin:0 0 8px}.route-meter i{display:block;height:100%;width:100%;background:#9fc4bd;transition:width .25s linear}.route-foot{display:flex;justify-content:space-between;align-items:baseline;gap:9px;margin:0 0 9px}.route .timer{color:#a9bfc2;font-size:12px}.route .reason{color:#8fa3a8;font-size:9px;text-align:right;overflow-wrap:anywhere}.route.done .route-meter{display:none}.route.done .buttons{display:none}.route.done .route-foot{justify-content:flex-start}.bubble{margin:8px 0}.bubble.mine{margin-left:auto}.bubble.note{background:#22323dcc;border-color:#c9d6cf44;color:#c9d6d1;font-size:13px;width:auto;max-width:100%}.feedback{display:flex;flex-direction:column;gap:6px;border-top:1px solid #ffffff1c;padding:9px 0 4px}.feedback-row{display:flex;align-items:center;gap:7px}.feedback-body{flex:1;min-width:0;font-size:11px;color:#a9bcc0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rate{background:none;border:1px solid #ffffff2e;border-radius:9px;min-width:40px;min-height:34px;font-size:15px;line-height:1;opacity:.65}.rate.chosen{border-color:#9fc4bd;background:#29404ae8;opacity:1}.error{color:#ffb0a5;font-size:12px;margin:5px 0}.pending{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 7px}.chip{display:flex;align-items:center;gap:6px;background:#22323dcc;border:1px solid #ffffff26;border-radius:10px;padding:5px 8px;font-size:11px;max-width:100%}.chip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.chip button{background:none;border:0;color:#ffb0a5;min-width:22px;min-height:22px;font-size:13px}.attach-row{display:flex;flex-direction:column;gap:5px;margin:6px 0 0}.attachment{display:flex;align-items:center;gap:7px;font-size:12px;color:#c6d5d6;text-decoration:none;background:#1f2f3acc;border:1px solid #ffffff24;border-radius:11px;padding:7px 9px;min-height:38px}.attachment:hover{border-color:#9fc4bd}.attachment b{font-weight:600;overflow-wrap:anywhere}.attachment span{color:#9fb0b4;font-size:10px}.attachment audio{width:100%;height:34px;margin-top:4px}.attachment-open{display:flex;align-items:center;gap:7px;flex:1;min-width:0;color:inherit;text-decoration:none}.attachment button.detach{background:none;border:0;color:#ffb0a5;min-width:30px;min-height:30px;font-size:13px}.composer{display:flex;align-items:center;background:#172633ed;border:1px solid var(--edge);border-radius:18px;min-height:53px;padding:2px 5px 2px 14px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.composer input{-webkit-user-select:text;user-select:text}.composer input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);outline:0}.composer button,.topic-create button{border:0;background:transparent;font-size:20px;min-width:44px;min-height:44px}
.backdrop{position:absolute;inset:0;background:#0009}.drawer{position:absolute;inset:0 auto 0 0;width:min(82%,295px);background:#132233f9;border-right:1px solid var(--edge);padding:16px;transform:translateX(-104%);transition:transform .18s ease;display:flex;flex-direction:column;z-index:3}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;font-size:18px}.topics{overflow-y:auto;flex:1;padding:8px 0}.topics button{display:block;width:100%;text-align:left;margin:8px 0;background:#263a48;border:1px solid #889da65a;border-radius:10px;padding:12px;min-height:48px;overflow-wrap:anywhere}.topics button.active{border-color:#d2dcd0}.topic-create{display:flex;border:1px solid var(--edge);border-radius:11px;overflow:hidden}.topic-create input{border:0;min-width:0}.logout{background:none;border:0;color:var(--muted);text-align:left;min-height:44px;margin-top:14px}.watermark{position:absolute;right:7px;top:1px;color:#ddd9cc;font-size:8px;letter-spacing:.06em;pointer-events:none;z-index:4}
@media(prefers-reduced-motion:reduce){.orb{animation:none}.drawer{transition:none}}

/* Collapsible extra settings: closed by default, values untouched. */
.extra-settings{margin-top:24px;border-top:1px solid var(--edge);padding-top:4px}
.extra-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;cursor:pointer;font-weight:700;font-size:1.02em;list-style:none}
.extra-settings>summary::-webkit-details-marker{display:none}
.extra-settings>summary::marker{content:''}
.extra-settings .chev{color:var(--muted);transition:transform .18s ease;font-size:.9em}
.extra-settings[open] .chev{transform:rotate(180deg)}
.extra-settings .connections-form{border-top:0;padding-top:0}

/* Compact "possible chats" line under the message it belongs to. */
.suggest-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:9px 0 0;padding-top:8px;border-top:1px solid var(--edge);font-size:.82em}
.suggest-label{color:var(--quiet)}
.suggest-chip{background:none;border:1px solid var(--edge);border-radius:999px;color:var(--ink);font:inherit;font-size:.95em;padding:3px 10px;min-height:28px;cursor:pointer}
.suggest-chip:hover,.suggest-chip:focus-visible{border-color:var(--ring);color:var(--ink)}
.preview-row{display:flex;margin:8px 0}
.preview-row + .preview-row{margin-top:10px}
.appearance-sample .bubble.preview{max-width:100%;width:auto;margin:0;font-size:.94em}
.appearance-sample .bubble.preview.mine{margin-left:auto;max-width:86%}

/* Answer status stays in the lower-left of its user request. */
.answer-status{display:flex;align-items:center;justify-content:flex-start;width:100%;gap:6px;margin-top:7px;font-size:.76em;color:var(--quiet);letter-spacing:.01em;text-align:left;transition:opacity .25s ease}
.answer-status .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.answer-status.working .dot,.answer-status.writing .dot{animation:pulse-soft 1.6s ease-in-out infinite}
.answer-status.working,.answer-status.writing{color:var(--muted)}
.answer-status.done{color:#9fc4bd}
.answer-status.failed{color:#ffb0a5}
.answer-status .retry{background:none;border:1px solid var(--edge);border-radius:999px;color:inherit;font:inherit;padding:1px 9px;min-height:24px;cursor:pointer}
/* A saved rating stays in the lower-left corner of the answer it rates. */
.answer-rating{display:flex;align-items:center;justify-content:flex-start;gap:5px;margin-top:7px;font-size:.74em;color:var(--quiet);opacity:.9;text-align:left}
.answer-rating .rating-note{margin-left:auto}
.answer-rating .rating-icon{font-size:1.05em;line-height:1}
.answer-rating.down{color:#ffb0a5}
@keyframes pulse-soft{50%{opacity:.25}}

/* Service notices above the composer: hidden until there is something to say. */
.service-panel{display:flex;flex-direction:column;gap:6px;margin:0 0 8px;max-height:40vh;overflow:auto}
.service-panel:empty{display:none}
.service-notice{display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 9px;border:1px solid var(--edge);border-radius:12px;background:var(--surface);font-size:.82em;color:var(--ink);animation:notice-in .24s ease both}
.service-notice .notice-glyph{color:var(--quiet);flex:0 0 auto}
.service-notice .notice-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-notice .notice-text b{font-weight:600}
.service-notice .notice-action{background:none;border:1px solid var(--edge);border-radius:999px;color:var(--ink);font:inherit;padding:2px 10px;min-height:26px;cursor:pointer;white-space:nowrap}
.service-notice .notice-action:hover,.service-notice .notice-action:focus-visible{border-color:var(--ring)}
.service-notice .notice-close{background:none;border:0;color:var(--quiet);min-width:26px;min-height:26px;cursor:pointer;font-size:15px;line-height:1}
.service-notice.leaving{animation:notice-out .22s ease both}
@keyframes notice-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes notice-out{from{opacity:1}to{opacity:0;transform:translateY(-3px)}}

/* Feedback: icons instead of words, and it fades rather than jumping. */
.feedback{transition:opacity .25s ease,transform .25s ease;opacity:1;transform:none}
.messages .feedback{width:max-content;max-width:90%;margin:2px 0 12px;padding:0;border:0;border-radius:0;background:none;color:var(--quiet);font-size:.78em}
/* Mirrored request style: the rating card follows my message to the right edge. */
:root[data-messages="minimal"] .messages .feedback{margin:0 0 10px auto}
.messages .feedback .feedback-row{gap:7px}
.messages .feedback .rate,.messages .feedback .notice-close{min-width:30px;min-height:30px;padding:2px 4px;border:0;background:none;border-radius:0}
.messages .feedback .rate{opacity:.6}
.messages .feedback .rate:hover,.messages .feedback .rate:focus-visible{opacity:1}
.messages .feedback .rate[aria-pressed="true"]{border:0;background:none}
.messages .feedback .notice-close{color:var(--quiet);font-size:13px}
.feedback.hidden{display:flex;opacity:0;transform:translateY(3px);pointer-events:none}
.feedback .thanks{font-size:.8em;color:var(--muted);padding:6px 0 4px;animation:thanks-in .24s ease both}
@keyframes thanks-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.rate{font-size:17px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s ease,background .2s ease,opacity .2s ease}
.rate[aria-pressed="true"]{border-color:#9fc4bd;background:#29404ae8;opacity:1}

@media (prefers-reduced-motion: reduce){
  .service-notice,.service-notice.leaving,.feedback,.answer-status,.feedback .thanks{animation:none;transition:none}
  .answer-status.working .dot,.answer-status.writing .dot,.orb{animation:none}
}

/* Voice notes: hold the mic, the draft stays untouched underneath. */
.composer{position:relative}
.composer .record{touch-action:none;-webkit-touch-callout:none;user-select:none}
.composer .record[aria-pressed="true"]{color:#ffb0a5}
.composer.is-recording input[name="message"],.composer.is-recording #attach,.composer.is-recording button[type="submit"]{display:none}
.composer.is-recording .record{order:2}
.composer .recording{order:1;flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:0 2px;border:0;background:transparent;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.composer .recording.hidden{display:none}
.rec-dot{width:6px;height:16px;flex:0 0 6px;border-radius:3px;background:var(--ring);animation:rec-blink 1.1s ease-in-out infinite}
.composer .recording #recording-time{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.9em;color:var(--ink)}
.voice-waveform{width:144px;height:24px;max-width:46%;flex:0 1 144px;color:var(--ring)}
.rec-hint{flex:1;min-width:0;color:var(--quiet);font-size:.76em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer .recording.cancel .rec-hint{color:#ffb0a5}
.composer .recording.cancel .rec-dot{background:#ffb0a5;animation:none}
@keyframes rec-blink{50%{opacity:.35}}
@media (max-width:420px){.rec-hint{font-size:.7em}}
@media (prefers-reduced-motion: reduce){.rec-dot{animation:none}}

/* Service notices above the composer appear only while there is something to say. */
.service-panel:empty{display:none}
.service-panel{display:flex;flex-direction:column;gap:6px;margin:0 0 8px;max-height:32vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;justify-content:flex-end}
.service-panel > .service-notice + .service-notice{margin-top:0}
.service-panel .feedback{min-height:0;flex:0 0 auto;padding:0;box-sizing:border-box;border:0;background:none;color:var(--ink);font-size:.82em}
.service-panel .feedback.hidden{display:none;opacity:0;pointer-events:none}
.service-panel .feedback.closing{opacity:0;transform:translateY(3px);pointer-events:none}
.feedback-row{display:flex;align-items:center;gap:7px;min-width:0;width:100%}
.feedback-title{font-weight:600;white-space:nowrap}
.feedback-body{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--quiet)}
.feedback .rate,.feedback .notice-close{flex:0 0 auto;min-height:30px;min-width:30px;padding:2px 4px}
.service-panel .service-notice{min-height:34px;flex:0 0 auto;box-sizing:border-box}
@media(max-width:420px){.feedback-body{max-width:32%}.feedback-row{gap:4px}.feedback-title{font-size:.92em}}

/* Compact voice attachment: no inner panel, only the clip and a bare triangle. */
.attachment.voice-attachment{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;padding:0;background:none;border:0;border-radius:0;min-height:0;color:var(--ink)}
.attachment.voice-attachment:hover{border-color:transparent}
.voice-info{display:flex;flex:1;flex-direction:column;min-width:0;overflow:hidden}
.voice-title,.voice-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-title{font-weight:600}
.voice-meta{color:var(--quiet);font-size:.8em}
.voice-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.voice-player{display:none}
.voice-play,.voice-actions button{min-width:30px;min-height:30px;padding:0;border:0;background:none;border-radius:0;display:inline-flex;align-items:center;justify-content:center}
.voice-play{color:var(--ring)}
.voice-play svg{display:block;width:16px;height:16px}
.voice-play:disabled{opacity:.4}
.voice-actions button.detach{min-width:26px;min-height:26px;color:var(--quiet);font-size:14px}
.composer .record{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.composer .record svg{pointer-events:none}
.composer .record[aria-pressed="true"]{color:#ffb0a5}

/* Messages and passive service notices have fill, but no outline. */
.bubble,.service-notice{border:0}
:root[data-messages="minimal"] .bubble.mine{border-right:0}
:root[data-messages="minimal"] .bubble:not(.mine){border-left:0}