:root{color-scheme:dark;--bg:#0d141a;--surface:#141e26;--surface-raised:#1a2630;--surface-soft:#101920;--text:#e2e8ed;--text-strong:#f2f6f8;--muted:#91a0aa;--stroke:#293842;--accent:#67d4dd;--accent-ink:#09282b;--danger:#ef8c8c;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}:root.light{color-scheme:light;--bg:#f4f6f7;--surface:#fff;--surface-raised:#eef2f3;--surface-soft:#f8fafb;--text:#263039;--text-strong:#11181f;--muted:#687680;--stroke:#d8e0e4;--accent:#087f89;--accent-ink:#f4ffff;--danger:#b54747}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text)}body{min-height:100dvh}button,input,select,textarea{font:inherit}button{color:inherit;touch-action:manipulation}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.mobile-app{width:min(100%,520px);height:100svh;min-height:640px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.chat-topbar{position:relative;min-height:68px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke);background:var(--bg)}.icon-button,.composer-icon{width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:999px;background:var(--surface);cursor:pointer;transition:background-color 150ms ease-out,border-color 150ms ease-out,transform 120ms ease-out}.agent-identity{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px}.agent-avatar{width:32px;height:32px;border-radius:var(--radius-sm);background:#11181f;object-fit:cover;-webkit-user-drag:none}.agent-identity strong{color:var(--text-strong);font-size:17px;line-height:1;letter-spacing:-.02em}.status,.badge{border:1px solid var(--stroke);border-radius:999px;color:var(--muted);font-size:10px;line-height:1;padding:6px 8px;white-space:nowrap}.status-live,.badge-live{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 48%,var(--stroke))}
.conversation{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 16px 18px;scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}.welcome{text-align:center;padding:18px 12px 26px}.eyebrow{margin:0;color:var(--accent);font:600 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em}.welcome h1{margin:10px 0 0;color:var(--text-strong);font-size:30px;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}.welcome>p:not(.eyebrow,.connection-detail){max-width:310px;margin:12px auto 18px;color:var(--muted);font-size:14px;line-height:1.55}.connect-cta{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--text-strong);color:var(--bg);font-weight:650;cursor:pointer}.connection-detail{min-height:18px;margin:10px auto 0;color:var(--danger);font-size:12px;line-height:1.45}.gateway-connected .welcome{height:8px;padding:0}.gateway-connected .welcome>*{display:none}.message{width:fit-content;max-width:92%;margin:12px 0;padding:13px 15px;border-radius:var(--radius-lg);font-size:15px;line-height:1.55}.message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.message.assistant{background:var(--surface-raised);border-bottom-left-radius:5px}.message.user{margin-left:auto;background:color-mix(in srgb,var(--accent) 19%,var(--surface));border-bottom-right-radius:5px}.status-card{display:flex;align-items:center;gap:10px;min-width:270px;margin-top:13px;padding:11px 10px;border:1px solid var(--stroke);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-soft) 72%,transparent)}.status-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}.status-card div{flex:1;min-width:0}.status-card strong,.status-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-card strong{color:var(--text-strong);font-size:14px}.status-card small{margin-top:3px;color:var(--muted);font-size:11px}.streaming-label{display:block;margin-top:7px;color:var(--muted);font-size:11px}
.composer-area{padding:9px 14px 7px;border-top:1px solid var(--stroke);background:var(--bg)}.composer{display:flex;align-items:flex-end;gap:7px;padding:5px 6px;border:1px solid var(--stroke);border-radius:22px;background:var(--surface-soft);box-shadow:inset 0 1px 2px rgb(0 0 0 / 10%)}.composer-icon{flex:0 0 36px;width:36px;min-height:36px;border-color:transparent;background:transparent;color:var(--muted)}.composer textarea{flex:1;width:100%;height:36px;min-height:36px;padding:7px 3px;overflow:hidden;resize:none;border:0;outline:0;background:transparent;color:var(--text);font-size:16px;line-height:1.4}.composer textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}.send-button{flex:0 0 36px;width:36px;min-height:36px;height:36px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--text-strong);color:var(--bg);cursor:pointer;transition:background-color 150ms ease-out,transform 120ms ease-out}.send-button .icon{display:none;width:18px;height:18px}.send-button[data-state=idle] .state-idle,.send-button[data-state=draft] .state-idle,.send-button[data-state=running] .state-running,.send-button[data-state=paused] .state-paused{display:block}.send-button[data-state=running]{background:var(--accent);color:var(--accent-ink)}.send-button[data-state=paused]{border:1px solid var(--accent);background:var(--surface-raised);color:var(--accent)}.composer-hint{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.35;text-align:center}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.attachment{position:relative;overflow:hidden;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--surface-raised)}.attachment img,.attachment video{display:block;width:72px;height:72px;object-fit:cover}.attachment span{display:block;max-width:130px;padding:6px 8px;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.attachment button{position:absolute;top:3px;right:3px;width:26px;min-height:26px;padding:0;border:0;border-radius:50%;background:rgb(0 0 0 / 72%);color:#fff}
.bottom-nav{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--stroke);background:var(--surface)}.nav-item{min-height:50px;padding:4px 2px;display:grid;place-items:center;align-content:center;gap:3px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);cursor:pointer}.nav-item .icon{width:21px;height:21px}.nav-item span{font-size:10px;line-height:1}.nav-item.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.drawer-backdrop{position:fixed;z-index:9;inset:0;display:none;width:100%;border:0;background:rgb(4 9 13 / 54%)}.drawer-backdrop.visible{display:block}.drawer{position:fixed;z-index:10;right:0;bottom:0;left:0;width:min(100%,520px);max-height:min(78svh,660px);margin:auto;padding:22px 18px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--stroke);border-bottom:0;border-radius:22px 22px 0 0;background:var(--surface);box-shadow:0 -20px 54px rgb(0 0 0 / 32%);transform:translateY(105%);visibility:hidden;transition:transform 220ms ease-out,visibility 0s linear 220ms}.drawer[aria-hidden=false]{transform:translateY(0);visibility:visible;transition:transform 220ms ease-out}.drawer-close{float:right;width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.drawer h2{margin:7px 0 20px;color:var(--text-strong);font-size:22px;line-height:1.2;letter-spacing:-.025em}.drawer label{display:grid;gap:7px;margin-top:14px;color:var(--muted);font-size:12px}.drawer select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--stroke);border-radius:var(--radius-sm);outline:0;background:var(--surface-soft);color:var(--text);font-size:15px}.drawer-summary{display:grid;gap:5px;padding:14px 13px;border:1px solid var(--stroke);border-radius:var(--radius-md);background:var(--surface-raised)}.drawer-summary strong{color:var(--text-strong)}.drawer-summary small{color:var(--muted);line-height:1.45}.drawer-action{width:100%;min-height:44px;margin-top:12px;padding:9px 14px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text);font-weight:650;cursor:pointer}.primary-action{margin-top:18px;border-color:transparent;background:var(--accent);color:var(--accent-ink)}.secondary-action{background:transparent}.hint,.empty-copy{margin:11px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.library-items{display:grid;gap:8px;max-height:250px;overflow:auto}.library-item,.session-row{width:100%;min-height:48px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text)}.library-item small,.session-row small{color:var(--muted)}.session-row+.session-row{margin-top:8px}.session-row.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--stroke))}
@media(hover:hover) and (pointer:fine){.icon-button:hover,.composer-icon:hover,.drawer-close:hover{background:var(--surface-raised);border-color:color-mix(in srgb,var(--accent) 38%,var(--stroke))}.nav-item:hover{color:var(--text);background:var(--surface-raised)}.drawer-action:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--stroke))}}button:active{transform:scale(.97)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}@media(min-width:700px){html,body{height:100%;overflow:hidden}body{display:grid;place-items:center;padding:32px;background:#202b33}.mobile-app{width:360px;height:min(780px,calc(100dvh - 64px));min-height:0;border:1px solid #3a4a54;border-radius:26px;box-shadow:0 20px 64px rgb(0 0 0 / 38%),0 0 0 7px rgb(255 255 255 / 4%)}.drawer{width:360px;bottom:max(32px,calc((100dvh - 780px)/2));border-bottom:1px solid var(--stroke);border-radius:20px}}
.file-preview{display:block;width:72px;height:72px;padding:29px 6px 0;color:var(--accent);font:700 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center;background:var(--surface-soft)}
.pairing-dialog{position:fixed;z-index:20;inset:0;padding:20px;display:grid;place-items:center;background:rgb(4 9 13 / 72%);visibility:hidden;opacity:0;transition:opacity 160ms ease-out,visibility 0s linear 160ms}.pairing-dialog[aria-hidden=false]{visibility:visible;opacity:1;transition:opacity 160ms ease-out}.pairing-card{width:min(100%,360px);padding:26px 22px;border:1px solid var(--stroke);border-radius:18px;background:var(--surface);box-shadow:0 24px 72px rgb(0 0 0 / 45%)}.pairing-mark{display:block;width:40px;height:40px;margin-bottom:18px;border-radius:10px}.pairing-card h2{margin:8px 0 10px;color:var(--text-strong);font-size:23px;line-height:1.2;letter-spacing:-.025em}.pairing-card>p:not(.eyebrow,.hint){margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.55}.pairing-card label{display:block;margin-bottom:7px;color:var(--muted);font-size:12px}.pairing-card input{width:100%;min-height:48px;padding:8px 14px;border:1px solid var(--stroke);border-radius:8px;outline:0;background:var(--surface-soft);color:var(--text-strong);font:600 22px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;text-align:center}.pairing-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.pairing-card input[aria-invalid=true]{border-color:var(--danger)}.pairing-card .hint{min-height:18px;color:var(--danger)}

.session-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.session-list .session-row+.session-row{margin-top:0}