.asst-fab {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 18px;
    transition: transform .15s, background .15s;
}
.asst-fab:hover { transform: translateY(-2px); background: var(--surface-3); }
.asst-fab { box-shadow: var(--shadow); }
.asst-open .asst-fab { display: none; }

body:has(#card-learn.active) :is(.asst-fab, [data-needs-ai="assistant"]) { display: none; }
.asst {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: var(--asst-w);
    border-left: 1px solid var(--line);
    background: var(--bg-2);
}
.asst-resize { left: -4px; }
.asst-head { display: flex; align-items: center; gap: 4px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.asst-who { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
select.asst-model { width: auto; max-width: 100%; padding: 0 22px 0 0; border: 0; background: transparent var(--chevron) right center / 16px no-repeat; color: var(--muted); font-size: 12.5px; font-weight: 600; box-shadow: none; }
.asst-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); }
.asst-log { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 18px 16px; overflow-y: auto; }
.asst-history { display: grid; flex: 1; align-content: start; gap: 2px; padding: 12px; overflow-y: auto; }
.asst-history-item { display: flex; align-items: center; border-radius: var(--r-sm); }
.asst-history-item:hover { background: var(--surface); }
.asst-history-item.active { background: var(--surface-2); }
.asst-history-open { display: grid; flex: 1; gap: 1px; min-width: 0; padding: 10px 12px; border: 0; background: none; text-align: left; }
.asst-history-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text-2); }
.asst-empty { display: grid; justify-items: center; gap: 10px; margin: auto 0; padding: 12px 4px; text-align: center; }
.asst-empty-title { font-size: 18px; font-weight: 600; color: var(--text); }
.asst-suggest { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.asst-chip { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: none; color: var(--text-2); font-size: 14px; font-weight: 600; text-align: left; transition: background .15s; }
.asst-chip:hover { background: var(--surface-2); }
.turn { display: flex; align-items: flex-end; gap: 10px; }
.turn.is-user { justify-content: flex-end; }
/* The user's words sit in bubbles, like messages; Nemeris answers on the page itself, as plain text. */
.turn-body { display: grid; justify-items: start; gap: 6px; width: 100%; min-width: 0; }
.is-user .turn-body { justify-items: end; width: auto; max-width: 86%; }
.bubble { max-width: 100%; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.is-user .bubble { padding: 10px 16px; border-radius: var(--r-bubble-user); background: var(--surface-2); }
.bubble-error { padding: 11px 15px; border-radius: var(--r-bubble); background: var(--neg-soft); }
.bubble p + p, .bubble p + :is(ul, ol), .bubble :is(ul, ol) + p { margin-top: 8px; }
.bubble :is(ul, ol) { display: grid; gap: 3px; padding-left: 20px; }
.bubble code { padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-3); font: 13px var(--mono); }
.msg-h { font-weight: 600; color: var(--text); }
.msg-table { margin-top: 6px; overflow-x: auto; }
.msg-table table { border-collapse: collapse; font-size: 13px; }
.msg-table :is(th, td) { padding: 5px 8px; border-bottom: 1px solid var(--line-2); text-align: left; }
.tool-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tool-mark { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--pos-fill); }
.tool-line.is-running .tool-mark { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.tool-line.is-failed .tool-mark { background: var(--neg-fill); }
.tool-err { color: var(--neg); }
.msg-rate { display: flex; gap: 2px; }
.rate-btn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-circle); background: none; font-size: 14px; color: var(--muted); }
.rate-btn:hover { background: none; }
.rate-btn[data-rate="up"].active { color: var(--pos); }
.rate-btn[data-rate="down"].active { color: var(--neg); }
.rate-btn:focus-visible { outline: none; }
.msg-copy.is-done { color: var(--pos); }
.correct { display: grid; gap: 8px; width: 100%; }
.correct-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.typing { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.typing-dots { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.asst-compose { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.asst-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s; }
.asst-input-row:focus-within { border-color: var(--line-3); }
textarea.asst-input { flex: 1; max-height: 180px; padding: 8px 0; border: 0; background: none; resize: none; box-shadow: none; }
.asst-send { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--r-circle); background: var(--accent-grad); color: var(--on-accent); font-size: 16px; }
.asst-send.is-stop { background: var(--surface-3); color: var(--text); }
.asst-effort { justify-self: start; }
.ctx-wheel { position: relative; display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-circle); background: none; color: var(--muted); }
.ctx-wheel:hover { background: var(--surface-3); color: var(--text); }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.ctx-ring { --ring: var(--accent); display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-circle); background: conic-gradient(var(--ring) calc(var(--p, 0) * 1turn), var(--surface-3) 0); transition: --p .3s ease; }
.ctx-wheel.is-hot .ctx-ring { --ring: var(--warn); }
.ctx-wheel.is-working { animation: ctxpulse .55s ease; }
@keyframes ctxpulse { 50% { transform: scale(1.3); } }
.ctx-pct { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-circle); background: var(--surface-2); font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.asst-call { flex: none; width: 38px; height: 38px; border-radius: var(--r-circle); }
.asst-call.active { background: var(--surface-2); color: var(--text); }
.asst.in-call .asst-compose { display: none; }
.asst-callbar {
    display: grid;
    flex: none;
    justify-items: center;
    gap: 14px;
    min-height: min(46vh, 380px);
    align-content: end;
    padding: 16px max(20px, env(safe-area-inset-bottom));
    overflow: hidden;
    border-top: 1px solid var(--line);
    background: radial-gradient(ellipse at 50% 40%, var(--accent-soft), transparent 70%), var(--bg-2);
    color: var(--text-2);
}
.asst-voice-summary {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(100%, 560px);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: inherit;
}
.asst-voice-summary:hover { background: none; }
.asst-minimize { display: none; }
.asst-voice-visual { display: grid; justify-items: center }
.asst-call-effort { justify-content: center; }
.asst-call-effort .pill { font-size: 12px; padding: 5px 12px; }
.asst-voice-orb {
    display: grid;
    place-items: center;
    width: 180px;
    height: 180px;
    overflow: visible;
    border: 0;
    border-radius: var(--r-circle);
}

.asst-voice-orb { position: relative; }
.asst-voice-orb canvas { position: absolute; inset: -45%; width: 190%; height: 190%; pointer-events: none; }
.asst-voice-label, .asst-call-text { position: relative; z-index: 1; }
.asst-voice-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.asst-call-text {
    width: min(100%, 560px);
    min-height: 3.2em;
    max-height: min(30vh, 280px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: center;
    overflow-wrap: anywhere;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    transition: max-height .2s ease;
}
.asst-call-text:empty::before { content: '…'; color: var(--faint); }
.asst-call-text[data-kind="user"] { color: var(--muted); }
.asst-call-text[data-kind="action"] { color: var(--accent); }
.asst-call-text[data-kind="error"] { color: var(--neg); }
.asst-call-text.is-fresh { animation: callTextIn .25s ease both; }
@keyframes callTextIn { from { opacity: 0; transform: translateY(6px); } }
.asst-voice-actions { display: flex; justify-content: center; gap: 14px; width: min(100%, 420px); }
.asst-voice-action { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-height: 50px; max-width: 195px; padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; }
.asst-devices-btn { flex: none; width: 50px; height: 50px; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); }
.asst-devices { width: min(100%, 420px); padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.asst-voice-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: inherit; background: var(--scrim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.asst-voice-overlay[hidden] { display: none; }
.asst-voice-overlay.open { opacity: 1; pointer-events: auto; }
.asst-voice-sheet { display: flex; gap: 24px; align-items: center; transform: translateY(8px); transition: transform .22s ease; }
.asst-voice-overlay.open .asst-voice-sheet { transform: none; }
.asst-voice-overlay .asst-voice-circle { width: 56px; height: 56px; transform: scale(.7); opacity: 0; transition: transform .2s cubic-bezier(.2,.8,.2,1.2), opacity .15s ease, background .15s ease; }
.asst-voice-overlay.open .asst-voice-circle { transform: none; opacity: 1; }
.asst-voice-overlay.open .asst-voice-circle + .asst-voice-circle { transition-delay: .05s; }
.asst-voice-sheet { display: flex; gap: 28px; }
.asst-voice-overlay .asst-voice-circle { transform: scale(.7); opacity: 0; transition: transform .2s cubic-bezier(.2,.8,.2,1.2), opacity .15s ease, background .15s ease; }
.asst-voice-overlay.open .asst-voice-circle { transform: none; opacity: 1; }
.asst-voice-overlay.open .asst-voice-circle + .asst-voice-circle { transition-delay: .05s; }
.asst-voice-circle { width: 72px; height: 72px; border-radius: var(--r-circle); font-size: 28px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); display: grid; place-items: center; }
.asst-voice-circle:hover { background: var(--surface-3); }