:root { color-scheme: dark; font-family: Roboto, system-ui, sans-serif; background: var(--chrome); color: #e8edf2; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--chrome); }
body { min-height: 100dvh; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

#login-screen { height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
#login-form { width: min(100%, 360px); display: grid; gap: 10px; }
.mark { display: grid; justify-items: center; gap: 2px; margin-bottom: 26px; }
.mark strong { font: 800 32px/1 ui-monospace, monospace; letter-spacing: .18em; }
.mark small, label, output { font: 650 10px/1.3 ui-monospace, monospace; letter-spacing: .08em; color: #a7b2bd; }
#login-form input, #login-form button { min-height: 48px; border: 1px solid var(--line-bright); border-radius: 3px; background: var(--panel); padding: 10px 12px; }
#login-form button { margin-top: 8px; background: var(--button-hover); font-weight: 700; }
#login-status { min-height: 2.6em; padding-top: 8px; text-align: center; overflow-wrap: anywhere; }

main { width: 100%; min-width: 0; min-height: 0; height: 100dvh; max-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; }
header, #transcript, #composer { min-width: 0; }
header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); border-bottom: 1px solid #384551; background: color-mix(in srgb, var(--agent-color, var(--canvas)) 7%, var(--canvas)); }
/* HYP:S01.4 · variantId selects SOIA's visual-tokens.css [data-variant] rule; its --tab-color is the only agent tint. */
#app[data-variant], header[data-variant] { --agent-color: var(--tab-color); }
article[data-kind="dm"][data-variant] { --dm-color: var(--tab-color); }
header[data-working="true"] { border-bottom-color: var(--agent-color, var(--accent)); background: color-mix(in srgb, var(--agent-color, var(--accent)) 14%, var(--canvas)); }
header[data-working="true"] #state { color: var(--agent-color, var(--accent)); }
/* HYP:M3.1 · Presence form per interlocutor.state; transport loss is a separate line with its cause. */
#presence { display: inline-flex; align-items: center; gap: 4px; color: var(--agent-color, var(--accent)); font: 650 10px/1 ui-monospace, monospace; letter-spacing: .06em; white-space: nowrap; }
#presence::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
#presence[data-presence="idle"]::before { opacity: .45; }
#presence[data-presence="listeningUser"]::before { animation: presence-listen 1.2s ease-in-out infinite; }
#presence[data-presence="speakingAgent"]::before { background: currentColor; box-shadow: 0 0 8px currentColor; animation: presence-speak .9s ease-in-out infinite alternate; }
@keyframes presence-listen { 50% { transform: scale(1.35); opacity: .6; } }
@keyframes presence-speak { to { box-shadow: 0 0 2px currentColor; } }
@media (prefers-reduced-motion: reduce) { #presence::before { animation: none; } }
#link { grid-column: 1 / -1; margin: 0; padding: 2px 0 0; color: #ffd4d1; font: 650 10px/1.35 ui-monospace, monospace; letter-spacing: .05em; overflow-wrap: anywhere; }
#panel { min-width: 0; height: 32px; border: 1px solid var(--line-bright); border-radius: 3px; padding: 3px 26px 3px 7px; background: var(--panel); font: 700 12px/1 ui-monospace, monospace; }
.header-actions { display: flex; align-items: center; gap: 5px; }
header output { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header button { min-width: 32px; height: 32px; border: 1px solid var(--line-bright); border-radius: 3px; padding: 0 6px; background: #252d36; font: 700 10px/1 ui-monospace, monospace; }
#interrupt:not(:disabled) { border-color: #f08b87; color: #ffd4d1; }

#transcript article.pending { border-right: 2px dashed currentColor; color: #a7b2bd; }

#transcript { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--agent-color, #13171c) 5%, #13171c); }
#requests { max-height: 40dvh; overflow: auto; overscroll-behavior: contain; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #b7a5ff; background: #1d1b2c; }
#requests[hidden] { display: none; }
#jump-bottom { position: fixed; left: 50%; bottom: calc(var(--composer-height, 0px) + max(8px, env(safe-area-inset-bottom))); transform: translateX(-50%); z-index: 2; min-width: 36px; min-height: 36px; border: 1px solid var(--line-bright); border-radius: 50%; background: #252d36; }
article { max-width: 96%; padding-left: 8px; border-left: 2px solid var(--accent); }
article[data-kind="user"] { align-self: flex-end; padding: 8px; border-left: 0; border-right: 2px solid var(--accent); background: #1d242c; }
article[data-kind="reasoning"], article[data-kind="tool"], article[data-kind="activity"], article[data-kind="request"] { border-color: #b7a5ff; background: #1d1b2c; }
article[data-kind="dm"] { border-color: var(--dm-color, #b7a5ff); background: #1d1b2c; }
article[data-kind="dm"][data-direction="outgoing"] { align-self: flex-end; border-left: 0; border-right: 2px solid var(--dm-color, #b7a5ff); }
article[data-kind="exio"] { border-color: #8f9aa7; color: #a7b2bd; }
article[data-kind="error"], article[data-tone="error"] { border-color: #f08b87; color: #ffd4d1; }
article[data-kind="separator"] { max-width: 100%; padding: 7px 0; border: 0; color: #a7b2bd; text-align: center; }
article small { font: 650 10px/1.3 ui-monospace, monospace; letter-spacing: .06em; color: #a7b2bd; }
article p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.4; }
article details { margin-top: 7px; }
article summary { min-height: 32px; cursor: pointer; color: #a7b2bd; font: 650 10px/32px ui-monospace, monospace; letter-spacing: .06em; }
article form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
article form button { min-height: 36px; border: 1px solid var(--line-bright); border-radius: 2px; padding: 6px 10px; background: var(--button-hover); font: 650 11px/1 ui-monospace, monospace; }
article form label { display: grid; gap: 4px; width: 100%; font: 650 11px/1.35 ui-monospace, monospace; }
article form textarea { min-height: 42px; padding: 7px; border: 1px solid var(--line-bright); border-radius: 2px; background: var(--panel); }
article form small { width: 100%; }
article form[data-reply="refused"] small { color: #ffd4d1; }
article pre { max-height: 13rem; overflow: auto; margin: 0; padding: 7px; background: var(--canvas); color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.45 ui-monospace, monospace; }

#mobile-settings { width: min(calc(100% - 32px), 340px); border: 1px solid var(--line-bright); border-radius: 4px; padding: 16px; color: #e8edf2; background: var(--panel); }
#mobile-settings::backdrop { background: rgb(0 0 0 / .58); }
#mobile-settings form { display: grid; gap: 14px; }
#mobile-settings h2 { margin: 0; font: 700 13px/1 ui-monospace, monospace; letter-spacing: .08em; }
#product-version { display: block; margin-top: 5px; color: #a7b2bd; font: 650 10px/1 ui-monospace, monospace; letter-spacing: .08em; }
#quota-status { display: grid; gap: 7px; color: #a7b2bd; font: 650 10px/1.35 ui-monospace, monospace; letter-spacing: .05em; }
#quota-status section { display: grid; gap: 3px; }
#quota-status b { color: #e8edf2; }
#quota-status p { margin: 0; }
#mobile-settings fieldset { display: grid; gap: 10px; margin: 0; border: 1px solid var(--line-bright); }
#mobile-settings legend, #mobile-settings label { font: 650 11px/1.35 ui-monospace, monospace; letter-spacing: .05em; }
#mobile-settings label { display: flex; align-items: center; min-height: 44px; }
#mobile-settings button { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--line-bright); border-radius: 2px; background: #252d36; }
#mobile-settings #logout { border-color: #f08b87; color: #ffd4d1; }

#composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid #384551; background: color-mix(in srgb, var(--agent-color, var(--chrome)) 5%, var(--chrome)); }
#text-controls { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
#voice-controls { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
textarea, #composer button { min-width: 0; min-height: 42px; border: 1px solid var(--line-bright); border-radius: 2px; color: inherit; }
textarea { resize: none; max-height: calc(1.4em * 6 + 18px); padding: 9px 10px; overflow-wrap: anywhere; background: var(--panel); }
#composer button { padding: 7px 12px; background: var(--button-hover); font-weight: 650; }
button:active { background: var(--accent); color: var(--chrome); }
#voice-auto { width: 58px; font: 650 10px/1 ui-monospace, monospace; letter-spacing: .05em; }
#voice-auto[aria-pressed="true"] { border-color: var(--accent); background: #315b73; color: var(--ink-on-agent); }
#voice { width: 100%; min-height: 48px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; padding: 7px; }
#voice svg { display: block; width: 28px; height: 28px; margin: auto; fill: currentColor; pointer-events: none; }
#voice[aria-pressed="true"] { border-color: #f08b87; background: #6d2929; color: var(--ink-on-agent); }
button:disabled, textarea:disabled, select:disabled { opacity: .42; }

/* HYP:M2.5 · Selected files remain in the current composer until their one native send. */
#file-controls, #selected-files > div, .attachments > div { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
#file-controls { padding-block: .4rem; }
.file-picker { position: relative; overflow: hidden; cursor: pointer; padding: .4rem .7rem; border: 1px solid currentColor; border-radius: .4rem; }
.file-picker input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
#selected-files { display: grid; gap: .4rem; padding-block: .4rem; }
#selected-files[hidden] { display: none; }
#selected-files img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .3rem; }
#file-status, .attachments output { display: block; overflow-wrap: anywhere; font-size: .8rem; }
.attachments { display: grid; gap: .4rem; margin-block-start: .6rem; }
.attachments button, .attachments a { overflow-wrap: anywhere; max-width: 100%; }