:root { color-scheme: dark; --bg: #0b1020; --panel: #11182b; --panel2: #18223a; --line: #263451; --text: #f4f6ff; --muted: #a0acc7; --accent: #a891ff; --cyan: #7ee5df; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: radial-gradient(ellipse at 50% -20%, #20254c 0, var(--bg) 56%); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; }
button, textarea, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { min-height: 100dvh; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 22px max(14px, env(safe-area-inset-bottom)); }
.topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(160,172,199,.13); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 600 20px system-ui, sans-serif; letter-spacing: -.04em; }
.brand b { color: var(--cyan); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--cyan); background: #1b3550; font-size: 20px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6f7890; box-shadow: 0 0 10px #6f789055; }
.dot.online { background: var(--cyan); box-shadow: 0 0 12px #7ee5dfaa; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: #11192b; font-size: 19px; }
.live-button { width: auto; min-width: 82px; height: 36px; padding: 0 10px; border-color: #365a67; color: var(--cyan); font-size: 11px; font-weight: 700; }
.live-button.active { color: #fff; border-color: #df6477; background: #5c2636; }
.chat-panel { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 24px 0; }
.welcome { text-align: center; margin: auto; max-width: 480px; padding: 28px 10px; }
.orb { margin: 0 auto 22px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 24px; color: var(--cyan); font-size: 36px; background: radial-gradient(circle at 35% 25%, #3d6276, #242556 70%); box-shadow: 0 0 70px #6765da30; }
.eyebrow { margin: 0 0 11px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
h1, h2 { font-family: system-ui, sans-serif; letter-spacing: -.04em; }
h1 { margin: 0; font-size: clamp(32px, 7vw, 48px); }
.welcome p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.6; }
.connect-cta, .primary-button { border: 0; border-radius: 13px; padding: 12px 18px; color: #101426; background: linear-gradient(110deg, var(--cyan), var(--accent)); font-weight: 700; }
.messages { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.message { display: flex; }
.message.user { justify-content: flex-end; }
.bubble { max-width: min(84%, 680px); padding: 13px 16px; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: var(--panel); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.message.user .bubble { border-color: #7266c8; border-radius: 18px 18px 5px 18px; background: linear-gradient(135deg, #4e4a8d, #393765); }
.typing { display: flex; align-items: center; gap: 5px; padding: 12px 2px; color: var(--muted); font-size: 12px; }
[hidden] { display: none !important; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: pulse 1s infinite alternate; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .25; transform: translateY(-3px); } }
.composer { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 9px; border: 1px solid #34415e; border-radius: 20px; background: rgba(17,24,43,.96); box-shadow: 0 12px 40px #03071299; backdrop-filter: blur(15px); }
.composer textarea { flex: 1; max-height: 180px; resize: none; padding: 12px 10px; border: 0; outline: 0; color: var(--text); background: transparent; line-height: 1.45; }
.composer textarea::placeholder { color: #8490aa; }
.composer button { flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 14px; color: #111426; background: linear-gradient(135deg, var(--cyan), var(--accent)); font-size: 25px; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }
.privacy-note { margin: 10px 4px 0; text-align: center; color: #75819c; font-size: 10px; }
dialog { width: min(460px, calc(100% - 28px)); padding: 0; border: 1px solid #33415f; border-radius: 22px; color: var(--text); background: #11182b; box-shadow: 0 24px 80px #0009; }
dialog::backdrop { background: #050812bb; backdrop-filter: blur(5px); }
dialog form { padding: 24px; }
dialog h2 { margin: 0 0 10px; font-size: 27px; }
.settings-copy, .security-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
dialog label { display: block; margin: 18px 0 7px; font-size: 12px; font-weight: 600; }
dialog input { width: 100%; padding: 12px; border: 1px solid #34415e; border-radius: 12px; outline: none; color: var(--text); background: #0b1020; }
dialog input:focus { border-color: var(--cyan); }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.plain-button { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: transparent; font-size: 12px; }
.form-error { color: #ffaaa9; font-size: 12px; }
.security-note { margin: 17px 0 0; font-size: 11px; }
.live-dialog { width: min(560px, calc(100% - 24px)); max-height: min(92dvh, 850px); overflow-y: auto; }
.live-content { padding: 20px; }
.live-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.live-heading .eyebrow { margin-bottom: 4px; }
.live-heading h2 { margin: 0; font-size: 24px; }
#liveVideo { display: block; width: 100%; max-height: 46dvh; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 16px; background: #050812; }
.live-content label { display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 600; }
.live-content input { width: 100%; padding: 11px; border: 1px solid #34415e; border-radius: 12px; outline: none; color: var(--text); background: #0b1020; }
.live-status { margin: 10px 0; color: var(--cyan); font-size: 12px; }
.live-sources { justify-content: flex-start; margin: 12px 0 4px; }
.live-voice-actions { justify-content: flex-start; margin: 11px 0 4px; }
.live-voice-actions .active { border-color: #df6477; color: #fff; background: #5c2636; }
.voice-status { color: var(--muted); font-size: 11px; }
.live-sources .active { border-color: #df6477; color: #fff; background: #5c2636; }
.live-text-entry { display: flex; align-items: center; gap: 8px; }
.live-text-entry input { min-width: 0; flex: 1; }
.live-text-entry button { flex: 0 0 auto; }
.live-transcript { min-height: 56px; max-height: 150px; overflow-y: auto; padding: 10px; border-radius: 12px; color: var(--text); background: #0b1020; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.live-line { margin: 0 0 8px; }
.live-line:last-child { margin-bottom: 0; }
.live-line b { color: var(--cyan); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 540px) { .app-shell { padding-inline: 13px; } .topbar { height: 52px; } .connection { font-size: 11px; } .chat-panel { padding: 12px 0; } .welcome { padding: 20px 8px; } .bubble { max-width: 90%; font-size: 14px; } .composer { border-radius: 17px; } }