/* Genie: one panel anatomy everywhere. Desktop and the web from 1100px dock it as the right column (the sidebar collapses to the
   icon rail, .helper-open in app.css); the web from 761 to 1099px shows it as a right-hand sheet over a scrim; phones overlay it. */
#assistant{width:340px;max-width:42vw;flex:0 0 340px;border-left:1px solid var(--border);background:var(--card);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;animation:genie-in var(--motion-fast) var(--ease)}
@keyframes genie-in{from{opacity:0;transform:translateX(12px)}}
@keyframes genie-sheet-in{from{opacity:.3;transform:translateX(16px)}}
.genie-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.genie-mark{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1}
.genie-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.genie-title strong{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.genie-subline{display:flex;flex-wrap:wrap;font-size:12px;line-height:1.4;color:var(--hint)}#assistant-context{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#assistant-mode{white-space:nowrap}.genie-sep{white-space:pre}.genie-subline.wrapped .genie-sep{display:none}.genie-subline.wrapped #assistant-mode{flex-basis:100%}
#assistant-close{min-height:0;padding:6px 10px;border:1px solid var(--input-border);border-radius:8px;background:var(--card);font-size:12px;line-height:1.3;font-weight:400;color:var(--muted)}
#assistant-close:hover{background:var(--accent-tint);color:var(--ink)}
.genie-empty{margin:16px 16px 0;padding:14px;background:var(--sunken);border:1px solid var(--border);border-radius:13px;flex-shrink:0}
.genie-empty p{font-size:13px;line-height:1.6;color:var(--muted)}
.genie-empty .genie-eyebrow{font-family:var(--font-mono);font-size:10px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--hint);margin-bottom:9px}
#assistant-messages{flex:1;min-height:0;overflow:visible;display:flex;flex-direction:column;gap:12px;padding:16px}
.chat-answer,.chat-user{border-radius:13px;padding:10px 13px;max-width:88%;font-size:13px;line-height:1.55;overflow-wrap:anywhere;flex-shrink:0;border:1px solid var(--border)}
.chat-answer{background:var(--sunken);color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.chat-user{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-bottom-right-radius:5px;align-self:flex-end}
.chat-answer p,.chat-user p{white-space:pre-wrap}
.chat-answer button{display:block;text-align:left;color:var(--accent-text);margin-top:10px;max-width:100%;min-height:0;padding:6px 10px;font-size:12.5px;background:var(--card)}
.chat-trail{align-self:flex-start;margin-top:-6px;font-family:var(--font-mono);font-size:10.5px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--signed-text);flex-shrink:0}
.genie-footer{border-top:1px solid var(--border);padding:12px 16px;flex-shrink:0;display:flex;flex-direction:column;gap:11px}
.suggestions{display:flex;flex-wrap:wrap;gap:7px}
.suggestions:empty{display:none}
.suggestions button{min-height:0;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-tint);color:var(--accent-strong);font-size:12px;line-height:1.3;font-weight:400}
.suggestions button:hover{background:var(--accent-tint-hover);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.genie-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:12px;background:var(--review-bg);color:var(--review-text);font-size:12.5px;line-height:1.45}
.genie-notice[hidden]{display:none}
.genie-notice span{flex:1 1 180px}
.genie-notice button{min-height:0;padding:6px 11px;border-radius:9px;font-size:12.5px;background:var(--card);border-color:var(--input-border);color:var(--ink)}
#assistant-form{display:flex;align-items:center;gap:8px}
#assistant-input{width:0;flex:1;height:auto;padding:10px 12px;border-radius:10px;border:1px solid var(--input-border);background:var(--input-bg);font-size:13px;line-height:1.3}
#assistant-mic,#assistant-form .primary{width:38px;height:38px;flex:0 0 38px;min-height:0;padding:0;border-radius:10px}
#assistant-mic{border:1px solid var(--input-border);background:var(--card);color:var(--hint)}
#assistant-mic .icon{width:17px;height:17px}
#assistant-form .primary{font-size:15px;box-shadow:none}
/* Listening bar: replaces the input row while capturing; the mic button stays (red) and stops capture like Stop does. */
.genie-bars,.genie-stop{display:none}
#assistant-form.is-listening{gap:12px;padding:8px 12px;border:1px solid var(--danger-fill);border-radius:12px;background:var(--card)}
#assistant-form.is-listening>#assistant-input,#assistant-form.is-listening>.primary{display:none}
#assistant-form.is-listening #assistant-mic{width:34px;height:34px;flex-basis:34px;background:var(--danger-fill);border-color:var(--danger-fill);color:var(--on-accent)}
#assistant-form.is-listening .genie-bars{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:22px;min-width:0}
.genie-bars i{width:3px;height:3px;border-radius:2px;background:var(--accent);flex:0 0 3px;transition:height 60ms linear}
.genie-bars.still i:not(:first-child){display:none}
.genie-bars.still i{transition:none}
#assistant-form.is-listening .genie-stop{display:inline-flex;gap:8px;min-height:0;padding:7px 12px;border:0;border-radius:9px;background:var(--danger-fill);color:var(--on-accent);font-size:12.5px;line-height:1.3;font-weight:600;white-space:nowrap}
.genie-stop::before{content:'';width:9px;height:9px;border-radius:2px;background:currentColor}
#assistant-voice-hint{font-size:11.5px;line-height:1.45;color:var(--hint);min-height:16px;margin-top:-3px}
#assistant-scrim{display:none}
@media(min-width:761px){
#assistant-open{min-height:0;padding:7px 13px;border-radius:9px;background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);color:var(--accent-strong);font-size:12.5px;line-height:1.3;font-weight:500}
#assistant-open:hover,#assistant-open[aria-expanded=true]{background:var(--accent-tint-hover)}
#assistant-open .icon{display:none}
}
/* Web between the phone and the column breakpoint: a full-height sheet on the right; the note keeps its full width. */
@media(min-width:761px) and (max-width:1099.98px){
:root:not(.desktop) #assistant{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(420px,calc(100vw - 76px));max-width:none;background:var(--popover);box-shadow:var(--shadow-dialog);border-left:1px solid var(--border);animation:genie-sheet-in 180ms var(--ease)}
:root:not(.desktop) #assistant-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:29;background:var(--backdrop)}
}
@media(max-width:760px){#assistant{position:fixed;top:0;bottom:calc(68px + env(safe-area-inset-bottom));left:0;right:0;width:100%;max-width:none;border:none;z-index:8;background:var(--app-bg);animation:none}.genie-header{padding:12px 16px}.genie-title strong{font-size:var(--text-appbar)}#assistant-close{padding:7px 12px;font-size:13px}.chat-answer,.chat-user{max-width:90%;font-size:var(--text-note);border-radius:16px;padding:12px 14px}.chat-answer{background:var(--card)}#assistant-input{font-size:var(--text-patient);padding:10px 12px}#assistant-mic,#assistant-form .primary{width:44px;height:44px;flex-basis:44px;border-radius:12px}#assistant-form:not(.is-listening) #assistant-mic{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}#assistant-voice-hint{text-align:center}#assistant .chat-typing{background:var(--card)}}
@media(prefers-reduced-motion:reduce){#assistant,#assistant *{transition:none;animation:none}}
