:root { --holo: #50dcff; --holo-dim: rgba(80, 220, 255, 0.35); --text: #e9fbff; --user: #ffd27a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); font: 18px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
#stage { position: relative; height: 100vh; width: 100vw; }
#avatar { position: absolute; inset: 0 0 34vh 0; width: 100%; height: calc(100vh - 34vh); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }

#signCaption { position: absolute; left: 0; right: 0; top: calc(66vh - 3.2em); text-align: center; font-weight: 700; letter-spacing: 0.08em; text-shadow: 0 0 12px var(--holo); color: var(--holo); font-size: clamp(20px, 3.4vmin, 40px); pointer-events: none; }
#capLetter { margin-left: 0.6em; font-size: 1.4em; }

#status { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: 0.75; }
#statusDot { width: 9px; height: 9px; border-radius: 50%; background: #666; }
#statusDot.ok { background: #4f8; box-shadow: 0 0 8px #4f8; }
#statusDot.warn { background: #fb4; }
#gear { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--text); opacity: 0.35; font-size: 22px; cursor: pointer; }
#gear:hover { opacity: 1; }

#cam { position: absolute; top: 44px; right: 16px; width: clamp(150px, 22vmin, 280px); margin: 0; border: 1px solid var(--holo-dim); border-radius: 10px; overflow: hidden; }
#cam video, #cam canvas { display: block; width: 100%; transform: scaleX(-1); }
#cam canvas { position: absolute; inset: 0; height: 100%; }
#handsBadge { position: absolute; bottom: 4px; left: 6px; font-size: 11px; background: rgba(0,0,0,.6); padding: 1px 6px; border-radius: 6px; }
#handsBadge.on { color: #4f8; }
#cam.hidden { display: none; }

#chat { position: absolute; left: 0; right: 0; bottom: 82px; height: calc(34vh - 82px); overflow-y: auto; padding: 8px max(16px, 6vw); display: flex; flex-direction: column; gap: 8px; mask-image: linear-gradient(to bottom, transparent, #000 30%); scrollbar-width: none; }
.msg { max-width: 78%; padding: 8px 14px; border-radius: 16px; font-size: clamp(16px, 2.3vmin, 26px); }
.msg.user { align-self: flex-end; border: 1px solid rgba(255, 210, 122, 0.5); color: var(--user); }
.msg.bot { align-self: flex-start; border: 1px solid var(--holo-dim); color: var(--text); box-shadow: 0 0 18px rgba(80,220,255,.12) inset; }
.msg .gloss { display: block; font-size: 0.62em; letter-spacing: 0.06em; opacity: 0.6; margin-top: 2px; }
.msg.pending { opacity: 0.6; font-style: italic; }

#composer { position: absolute; left: max(16px, 6vw); right: max(16px, 6vw); bottom: 16px; min-height: 56px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,210,122,.45); border-radius: 28px; padding: 8px 10px 8px 20px; }
#tokens { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; letter-spacing: 0.05em; color: var(--user); font-size: clamp(16px, 2.4vmin, 26px); }
#tokens .tok { padding: 2px 10px; border-radius: 10px; background: rgba(255,210,122,.12); }
#tokens .tok.spell { background: none; border: 1px dashed rgba(255,210,122,.5); }
#tokens .tok.new { animation: pop .35s ease; }
#tokens .hint { opacity: 0.45; font-weight: 400; letter-spacing: 0; }
@keyframes pop { from { transform: scale(1.35); } to { transform: none; } }
#sendRing { width: 36px; height: 36px; flex: none; }
#sendRing circle { fill: none; stroke: var(--user); stroke-width: 3; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; transform: rotate(-90deg); transform-origin: center; }
#typeForm { flex: 1; } #typeForm input { width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; outline: none; }
#composer.typing #tokens { display: none; }

#settings { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: #0b1418; border-left: 1px solid var(--holo-dim); padding: 16px 18px; overflow-y: auto; font-size: 14px; z-index: 5; }
#settings header { display: flex; justify-content: space-between; align-items: center; }
#settings h2 { margin: 0; font-size: 18px; } #settings h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--holo); }
#settings label { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
#settings input[type=range] { flex: 1; }
#settings select, #settings input:not([type]), #settings button, .btn { background: #132229; color: var(--text); border: 1px solid var(--holo-dim); border-radius: 8px; padding: 6px 10px; font: inherit; cursor: pointer; }
#settings input:not([type]) { cursor: text; flex: 1; text-transform: uppercase; }
#settings .row { display: flex; gap: 8px; align-items: center; }
#settings .small { font-size: 12px; opacity: .7; margin: 4px 0; }
#closeSettings { background: none !important; border: 0 !important; font-size: 18px; }
#trainedList { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
#trainedList li { background: #132229; border-radius: 8px; padding: 3px 4px 3px 10px; display: flex; gap: 6px; align-items: center; }
#trainedList button { padding: 0 6px !important; border: 0 !important; background: none !important; }