:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101612;
  color: #e7f0e8;
  --green: #91f9a7;
  --muted: #a7b9ad;
  --line: #304035;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; }
main { width: min(100% - 2.5rem, 43rem); margin: auto; padding: 1.5rem 0 2rem; }
header, .row { display: flex; align-items: center; gap: .65rem; }
header { position: relative; justify-content: center; min-height: 2.6rem; }
.wordmark { margin: 0; letter-spacing: .16em; font-weight: 650; font-size: 1rem; }
#signout { position: absolute; right: 0; font-size: .75rem; min-height: 2rem; padding: .3rem .5rem; }
body.desktop { padding-top: 32px; }
body.desktop::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 32px; -webkit-app-region: drag; }
#login { width: min(15rem, 100%); margin: .75rem auto 0; }
#login button { min-height: 2.3rem; padding: .35rem .65rem; }
#login input { padding: .4rem .65rem; }
.stage { text-align: center; padding-top: clamp(2rem, 10vh, 6rem); }
#status { color: var(--green); text-transform: uppercase; letter-spacing: .22em; font: .76rem ui-monospace, monospace; min-height: 1.4rem; }
canvas { display: block; margin: 0 auto; width: 100%; height: clamp(5rem, 20vw, 9rem); }
#activity { list-style: none; margin: 0 auto .85rem; padding: 0; width: min(100%, 25rem); text-align: left; color: var(--muted); font: .75rem/1.55 ui-monospace, monospace; }
#activity li::before { content: '> '; color: var(--green); }
#activity li:not(:last-child) { opacity: .7; }
button, input { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #1a261e; color: inherit; border-radius: .55rem; padding: .65rem .9rem; min-height: 2.65rem; }
button:disabled { opacity: .48; cursor: default; }
button:not(:disabled):hover { border-color: var(--green); }
button.primary { background: var(--green); color: #102118; font-weight: 650; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
input:not([type="checkbox"]) { border: 1px solid var(--line); border-radius: .55rem; padding: .7rem; background: #171f19; color: inherit; min-width: 0; flex: 1; width: 100%; }
input[type="checkbox"] { accent-color: var(--green); }
.voice-controls, .choices { display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.choices { justify-content: flex-start; margin-top: .7rem; }
label, details p, #transcript { color: var(--muted); font-size: .85rem; }
label:has(+ .row) { display: block; margin-bottom: .35rem; }
#reply { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: .8rem 0 1.2rem; max-height: 45vh; overflow: auto; }
#reply:empty { margin-bottom: 0; }
#sources { font-size: .85rem; line-height: 1.6; overflow-wrap: anywhere; }
#proposals > div { border-left: 2px solid var(--green); padding: .3rem 0 .4rem .8rem; margin: .75rem 0; }
#proposals p { margin: .25rem 0 .65rem; overflow-wrap: anywhere; }
#proposals button { margin-right: .4rem; }
a { color: var(--green); }
details { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
summary { cursor: pointer; color: var(--muted); }
#notes, #preferences { padding: 0; }
#notes li, #preferences li { display: flex; justify-content: space-between; gap: .7rem; align-items: center; overflow-wrap: anywhere; padding: .3rem 0; }
#notes li span, #preferences li span { min-width: 0; }
#vaultItems { list-style: none; padding: 0; }
#vaultItems li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .4rem; margin: .4rem 0; }
#vaultItems output { grid-column: 1 / -1; overflow-wrap: anywhere; white-space: pre-wrap; font-family: ui-monospace, monospace; }
#vaultAdd, #vaultRepeatLabel, #queryLabel, .attachment { display: block; margin: .65rem 0; }
#vaultAdd input { margin: .25rem 0 .5rem; }
.attachment input { max-width: 100%; }
#pcAccess { color: var(--muted); font-size: .76rem; }
#notice { color: #ffc49b; overflow-wrap: anywhere; }
.sr-only { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
body.overlay { background: #101612; overflow: hidden; }
body.overlay main { width: 100%; padding: 0; }
body.overlay header, body.overlay form, body.overlay #assistant, body.overlay #notice { display: none; }
body.overlay #activity { display: none; }
body.overlay .stage { padding: .15rem .35rem 0; }
body.overlay canvas { height: 40px; }