:root{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;color:#3d3449;background:#f7f5fa;font-synthesis:none;--purple:#826198;--accent:#a98cbf;--muted:#92829f;--line:#eee7f3;--rose:#b87b99}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}button,input,textarea,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d2bce0;outline-offset:3px}[hidden]{display:none!important}
.shell{display:grid;grid-template-columns:178px minmax(0,1fr);min-height:100dvh}.rail{display:flex;flex-direction:column;padding:30px 15px 18px;border-right:1px solid #ebe4f0;background:#fdfcfe;position:sticky;top:0;height:100dvh}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:650;white-space:nowrap;margin:0 4px 48px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;background:linear-gradient(135deg,#f0dbe8,#d9cbeb);border-radius:15px;color:#88669f;font-size:24px;box-shadow:0 5px 18px #9b6eb414}.brand small{display:block;font-size:7px;letter-spacing:1.1px;color:#a28bae;font-weight:400;margin-top:5px}.rail-caption{font-size:9px;color:#a18eae;letter-spacing:2px;padding:0 12px;margin-bottom:13px}.nav-item{display:flex;align-items:center;gap:12px;text-align:left;border:0;background:transparent;padding:12px;border-radius:11px;font-size:12px;color:#927e9f;margin-bottom:7px}.nav-item>span{font-size:22px;line-height:20px}.nav-item.active{background:#efe7f5;color:#7e5b98;font-weight:600}.nav-item i{margin-left:auto;height:4px;width:4px;border-radius:50%;background:#b28bcb}.rail-note{margin-top:auto;padding:35px 12px;color:#a593b1}.rail-note>span{font-size:31px;color:#b9a1cb}.rail-note p{font-size:12px;line-height:1.9}.rail-note small{font-size:9px;color:#b0a1ba}.rail-bottom{border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;gap:7px;font-size:9px;color:#94819f}.rail-bottom .icon-button{margin-left:auto}
main{min-width:0;padding:27px 27px 12px;max-width:1900px;width:100%;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}.eyebrow{font-size:8px;letter-spacing:2px;color:#a18aaf}.topbar h1{font-size:23px;font-weight:500;letter-spacing:1px;margin:7px 0 0}.topbar h1 span{color:#b99bc9;font-size:25px;margin-left:6px}.topbar-actions{display:flex;gap:12px;align-items:center}.domain{font-size:10px;color:#a18aaf}.connection-badge{font-size:9px;padding:7px 10px;background:#ede8f3;color:#9580a6;border:1px solid #e6ddef;border-radius:30px;white-space:nowrap}.connection-badge.connected{background:#eef4f0;color:#6f927b;border-color:#e0ece4}.status-dot,.mini-dot{height:5px;width:5px;display:inline-block;border-radius:50%;background:#bdafc8;flex-shrink:0}.status-dot.online{background:#84ae93;box-shadow:0 0 0 3px #84ae9314}.mini-dot{background:#b793cd;margin-right:7px}.console-grid{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(340px,1.28fr) 254px;gap:18px;min-height:670px;height:calc(100dvh - 134px);max-height:1100px}.card{background:#fff;border:1px solid #eae3ef;border-radius:19px;box-shadow:0 4px 22px #6d4a8b04;overflow:hidden;min-width:0}.panel-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:17px 18px}.panel-heading h2{font-size:12px;margin:0;font-weight:600;color:#715d80}.tag{font-size:8px;border-radius:5px;padding:4px 7px;background:#f3f0f6;color:#9783a6;white-space:nowrap}.tag.lavender{background:#f0e8f7;color:#9c7db2;font-size:8px;font-weight:400;margin-left:6px}.tag.live{background:#edf5ef;color:#729781}.presence-column{display:grid;grid-template-rows:minmax(390px,1fr) 233px;gap:18px;min-height:0}.presence{display:flex;flex-direction:column;min-height:0;background:#fefcfe}.video-stage{position:relative;min-height:0;flex:1;overflow:hidden;margin:0 11px;border-radius:12px;background:#f3edf7}.video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.video-stage:fullscreen{background:#15111a}.stream-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:15px;background:radial-gradient(ellipse,#faf5fc,#f1ebf6);z-index:1}.orbit{width:94px;height:94px;border:1px solid #e2d2ec;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 11px #e9dcf332,0 0 0 22px #e9dcf318;position:relative}.orbit span{width:61px;height:61px;border-radius:21px;display:grid;place-items:center;background:#e6d6ee;color:#a784bc;font-size:30px}.orbit:after{content:'✧';position:absolute;font-size:19px;right:-1px;top:2px;color:#b89cc9;background:#f7f0fa}.stream-placeholder h2{font-size:18px;color:#8e729f;font-weight:400;margin:26px 0 9px}.stream-placeholder p{font-size:11px;line-height:1.8;color:#ac96ba;margin:0 0 20px}.stream-placeholder small{font-size:8px;line-height:1.7;color:#ad99b9;margin-top:16px;max-width:220px}.subtitle-wrap{padding:15px 18px 3px;min-height:77px}.subtitle-wrap p{font-size:12px;line-height:1.8;color:#7d658c;margin:5px 0;max-height:66px;overflow:auto}.presence-bottom{display:flex;flex-wrap:wrap;gap:6px;padding:8px 13px 13px;align-items:center}.presence-bottom .pill{font-size:9px;padding:7px 9px}.presence-bottom .icon-button{margin-left:auto}.input-card .panel-heading{padding-bottom:10px}.input-controls{display:flex;gap:6px;align-items:center;padding:0 14px 10px}.input-controls select{min-width:0;flex:1;font-size:10px;padding:7px 8px}.input-controls .pill{padding:7px 10px;font-size:10px}.input-controls .icon-button{font-size:18px;min-width:24px}.camera-preview{margin:0 12px;height:107px;border-radius:10px;background:#f7f4fa;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;position:relative}.camera-preview video,.camera-preview img{width:100%;height:100%;object-fit:contain}.camera-preview video.mirrored{transform:scaleX(-1)}#cameraEmpty{color:#a48cb3;font-size:11px;line-height:1.8}#cameraEmpty small{font-size:9px;color:#b8a5c3}.input-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;font-size:8px;color:#9e88ac}.fps-tag{font-size:7px;letter-spacing:.8px;color:#b098bf;white-space:nowrap}
.conversation{display:flex;flex-direction:column;min-height:0}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:20px 21px;border-bottom:1px solid #f1ebf5}.chat-identity{display:flex;align-items:center;gap:11px}.chat-avatar{width:36px;height:36px;display:grid;place-items:center;background:#f0e4f5;color:#a480b9;border-radius:13px;font-size:19px}.chat-head h2{font-size:14px;margin:0 0 5px;font-weight:600}.muted{font-size:10px;line-height:1.7;color:#9c88aa}.chat-head .muted{font-size:9px}.messages{flex:1;min-height:0;overflow:auto;padding:24px 21px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e2d5ec transparent;scroll-behavior:smooth}.welcome{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#a18caf}.welcome>span{font-size:38px;color:#c3aacf}.welcome h2{font-size:18px;font-weight:400;color:#9576a6;margin:17px 0 5px}.welcome p{font-size:12px;line-height:1.9;color:#b19cbd}.suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}.suggestions button{font-size:10px;color:#a78bb8;background:#fcf9fe;border:1px solid #ece2f3;border-radius:9px;padding:9px 12px}.message{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:22px;animation:arrive .2s ease-out}.message.user{align-items:flex-end}.message-label{font-size:8px;letter-spacing:1px;color:#ad96bb;margin:0 2px 7px}.bubble{font-size:13px;line-height:1.9;color:#685176;background:#f6f1fa;border-radius:3px 14px 14px 14px;padding:12px 15px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:95%}.message.user .bubble{background:#f4eaf0;color:#8b647b;border-radius:14px 3px 14px 14px}.pending-message{opacity:.6}.notice{background:#faf2e6;color:#ac8650;padding:10px 18px;font-size:11px;line-height:1.8}.pending{font-size:10px;padding:3px 21px 12px;color:#aa84bc}.composer-area{padding:12px 17px 15px;border-top:1px solid #f3eef7}.input-toolbar{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:9px;color:#a68eb4;font-size:9px}.input-toolbar label{display:flex;gap:7px;align-items:center;white-space:nowrap}.input-toolbar select{padding:3px 4px;border-color:transparent;font-size:9px;color:#9676a9;max-width:125px;background:#faf7fc}.input-toolbar>span{font-size:8px;text-align:right}.composer{display:flex;align-items:flex-end;gap:6px;padding:8px 8px 8px 7px;background:#fdfbfe;border:1px solid #e9dff0;border-radius:13px}.composer:focus-within{border-color:#cdb5dd}.composer textarea{resize:none;outline:none;border:0;flex:1;min-width:0;background:none;color:#674e77;font-size:13px;line-height:1.7;padding:5px 0;max-height:140px}.composer textarea::placeholder{color:#baa5c7}.composer .icon-button{min-width:24px;font-size:21px}.send-button,.mic-button{border:0;border-radius:10px;height:33px;width:33px;flex-shrink:0}.send-button{background:#ac8ec2;color:#fff;font-size:23px}.mic-button{background:#f0e7f6;color:#a183b6;font-size:21px}.mic-button.recording{background:#f6dce7;color:#be6b8f;animation:pulse 1s infinite}.composer-foot{display:flex;justify-content:space-between;gap:6px;font-size:8px;color:#b39fc0;margin:9px 2px 0}.recording-status{font-size:10px;color:#b47191;padding:3px 0 9px}.attachment-chip{display:flex;align-items:center;gap:10px;color:#9271a4;background:#f5effa;border:1px solid #e6d9ef;font-size:10px;border-radius:8px;margin:4px 0 9px;padding:6px 10px}.attachment-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-chip button{border:0;background:none;margin-left:auto;color:#a480b6}
.control-column{display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto;scrollbar-width:thin}.service-card .panel-heading{padding-bottom:7px}.service-row{display:flex;align-items:center;gap:9px;padding:12px 16px}.service-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:#f0e9f7;color:#a587bb;font-size:19px;flex-shrink:0}.service-icon.rose{background:#f6eaf0;color:#bb8aa3}.service-copy{min-width:0;flex:1}.service-copy h3{font-size:11px;font-weight:600;margin:0 0 4px}.service-copy h3 small{font-size:8px;font-weight:400;color:#ac96ba;margin-left:5px}.service-copy>span{font-size:8px;color:#ab94b9}.service-copy>span.ready{color:#74957e}.service-button{border:1px solid #e6d9ef;color:#9774ad;border-radius:8px;background:#faf6fd;font-size:9px;padding:7px 10px;min-width:49px;white-space:nowrap}.service-button.running{background:#fff8fa;border-color:#eddce6;color:#b0829b}.panel-note{font-size:9px;line-height:1.8;color:#ae98bb;padding:0 17px;margin:5px 0 16px}.quick-card{padding-bottom:9px}.text-button{background:none;border:0;padding:0;color:#a382b8;font-size:9px}.compact-field{display:block;margin:0 16px 13px;min-width:0}.compact-field>span{display:flex;justify-content:space-between;font-size:10px;color:#9780a5;margin-bottom:7px}.compact-field select{width:100%;min-width:0;font-size:10px;overflow:hidden;text-overflow:ellipsis}.context-usage{margin:16px}.context-usage>div{display:flex;justify-content:space-between;font-size:8px;color:#a48ab4;margin-bottom:8px}progress{display:block;width:100%;height:5px;border:0;border-radius:5px;background:#f0e9f7;accent-color:#b69bcb}progress::-webkit-progress-bar{background:#f0e9f7;border-radius:5px}progress::-webkit-progress-value{background:#b69bcb;border-radius:5px}.switch-row{display:flex;justify-content:space-between;align-items:center;margin:0 16px;padding:8px 0;font-size:11px;color:#8d729e}.switch-row input,.setting-row input[type=checkbox]{appearance:none;border:0;width:29px;height:17px;border-radius:20px;background:#e7deee;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}.switch-row input:before,.setting-row input[type=checkbox]:before{content:'';position:absolute;background:white;width:13px;height:13px;top:2px;left:2px;border-radius:50%;box-shadow:0 1px 3px #7964821a;transition:transform .2s}.switch-row input:checked,.setting-row input[type=checkbox]:checked{background:#b194c7}.switch-row input:checked:before,.setting-row input[type=checkbox]:checked:before{transform:translateX(12px)}.pipeline{display:flex;justify-content:space-between;gap:4px;margin:0 16px 15px}.pipeline span{padding:5px 7px;background:#f6f2f9;color:#b19bbf;border-radius:6px;font-size:8px}.pipeline span.active{background:#eadff4;color:#9170a5}.hardware{padding:0 16px 9px}.hardware p{font-size:9px}.hardware-row{margin-bottom:11px}.hardware-row>div{display:flex;justify-content:space-between;gap:7px;font-size:8px;color:#a68cb6;margin-bottom:6px}.hardware-row strong{font-size:8px;color:#8f709f;font-weight:500}.page-foot{padding-top:16px;color:#bca8c8;letter-spacing:1px;font-size:7px;display:flex;justify-content:center;gap:9px}
.pill{border:1px solid #e5d9ed;background:#fff;padding:7px 11px;border-radius:8px;color:#9c7caf;font-size:10px;white-space:nowrap}.pill[aria-pressed=true]{background:#eee4f5;color:#8a65a3;border-color:#cfb6de}.icon-button{min-height:29px;min-width:29px;border:0;background:none;color:#ad91bd;font-size:21px;padding:3px;line-height:1}.primary{border:0;background:#a485b8;color:#fff;border-radius:10px;padding:12px 19px;font-size:12px}.primary.small{font-size:10px;padding:10px 15px}.danger-button{background:#fff7fa;border:1px solid #ecd7e2;border-radius:9px;padding:10px 13px;font-size:11px;color:#b77b99}.error{color:#b16b88!important}.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:1000;max-width:90vw;padding:12px 18px;border-radius:11px;color:#fff;background:#604c6ded;box-shadow:0 8px 35px #4d326c25;font-size:12px;line-height:1.8}
select{border:1px solid #e9deef;border-radius:8px;padding:9px 10px;background:#fdfbfe;color:#8d6ba0;min-width:0}dialog{border:1px solid #e8dbf0;box-shadow:0 20px 100px #60447525;border-radius:22px;background:#fefcfe;color:#70537f;padding:28px;max-height:90dvh;max-width:calc(100vw - 28px);scrollbar-width:thin}dialog::backdrop{background:#e8e1efc9;backdrop-filter:blur(8px)}dialog header{display:flex;justify-content:space-between;align-items:center}dialog h2{font-size:20px;font-weight:500;margin:7px 0 10px}.auth-dialog{width:420px}.auth-dialog .brand-mark{margin-bottom:26px}.auth-dialog .eyebrow{display:block}.auth-dialog p{font-size:12px;line-height:1.8;color:#a38aad}.auth-dialog label{display:block;font-size:11px;margin:18px 0 8px}.auth-dialog input{width:100%;border:1px solid #e2d2ec;background:#fff;border-radius:9px;padding:12px;color:#735184}.auth-dialog .primary{width:100%;margin:8px 0 20px}.auth-dialog small{display:block;text-align:center;font-size:9px;color:#b199bd}.auth-dialog .error{font-size:11px;min-height:17px}.settings-dialog{width:550px}.settings-dialog>.muted{margin:0 0 23px}.settings-group{margin-bottom:24px;border-top:1px solid var(--line);padding-top:12px}.settings-group h3{font-size:10px;color:#b08fc2;letter-spacing:1px;margin:5px 0}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:13px 0;border-bottom:1px solid #f4edf8;font-size:12px}.setting-row small{display:block;font-size:9px;color:#ae95bb;margin-top:5px}.setting-row select{font-size:10px;max-width:180px}.setting-row.stacked{display:block}.setting-row.stacked select{max-width:100%;width:100%;margin-top:10px}.settings-group details{padding-top:17px;font-size:10px;color:#a185b2}.settings-group details .compact-field{margin:13px 0}.settings-group details .panel-note{padding:0}.settings-end{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:18px}.settings-end .panel-note{padding:0;margin:0;flex:1}.logs-dialog{width:850px}.logs-dialog pre{height:60dvh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#f7f2fb;border:1px solid #e9def1;border-radius:12px;padding:16px;font:11px/1.9 Consolas,monospace;color:#786287}.confirm-dialog{width:390px}.confirm-dialog p{font-size:12px;color:#a08aaf;line-height:1.9}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}
@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{opacity:.5}}
@media(min-width:1700px){.shell{grid-template-columns:210px minmax(0,1fr)}main{padding:35px 42px 15px}.console-grid{gap:25px;grid-template-columns:minmax(310px,.85fr) minmax(420px,1.35fr) 285px}.topbar{margin-bottom:28px}.rail{padding:35px 21px}.presence-column{gap:25px}.bubble{font-size:14px}.panel-heading h2{font-size:13px}.service-copy h3{font-size:12px}.control-column{gap:20px}}
@media(max-width:1250px){.shell{grid-template-columns:155px minmax(0,1fr)}main{padding:22px 20px 12px}.rail{padding:27px 12px}.brand{font-size:15px;gap:8px}.brand-mark{width:35px;height:35px;font-size:21px;border-radius:12px}.brand small{font-size:6px}.console-grid{height:auto;max-height:none;grid-template-columns:265px minmax(320px,1fr);min-height:0}.presence-column,.conversation{height:740px}.control-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;overflow:visible;align-items:start}.service-card,.system-card{height:auto}.quick-card{grid-column:2;grid-row:1}.domain{display:none}}
@media(max-width:900px){.shell{display:block}.rail{display:none}main{padding:22px 20px 12px}.console-grid{grid-template-columns:minmax(240px,.85fr) minmax(310px,1.15fr);gap:16px}.topbar h1{font-size:22px}.control-column{gap:14px}.topbar-actions{gap:8px}.connection-badge{display:none}.presence-column,.conversation{height:760px}.control-column{grid-template-columns:1fr 1fr}.system-card{grid-column:1/-1}.hardware{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}}
@media(max-width:620px){main{padding:18px 12px 10px}.topbar{margin-bottom:16px;gap:7px;align-items:center}.topbar .eyebrow{font-size:7px;letter-spacing:1.2px}.topbar h1{font-size:19px;white-space:nowrap}.topbar-actions{gap:5px}.topbar-actions .pill{font-size:9px;padding:7px 8px}.console-grid{display:flex;flex-direction:column;gap:15px}.conversation{order:0;height:calc(100dvh - 132px);min-height:520px}.presence-column{order:1;display:grid;grid-template-columns:1fr;grid-template-rows:390px 255px;height:auto;gap:15px}.control-column{order:2;display:grid;grid-template-columns:1fr;gap:15px}.quick-card{grid-column:auto;grid-row:auto}.system-card{grid-column:auto}.chat-head{padding:16px}.messages{padding:22px 16px}.bubble{font-size:13px}.composer-area{padding:10px 11px max(13px,env(safe-area-inset-bottom))}.composer-foot{font-size:7px}.composer .icon-button{min-width:22px}.input-toolbar{font-size:8px}.input-toolbar select{font-size:9px}.input-toolbar>span{font-size:7px}.panel-heading{padding:17px}.presence .video-stage{position:absolute;left:40%;right:0;top:49px;bottom:0;margin:0;border-radius:0}.presence{position:relative}.subtitle-wrap{width:43%;margin-top:auto;z-index:2;padding:18px 15px 0;min-height:50px}.subtitle-wrap p{max-height:155px;font-size:12px}.subtitle-wrap .eyebrow{font-size:7px;letter-spacing:1.2px}.presence-bottom{width:43%;z-index:2;padding:10px 13px 17px;gap:7px}.presence-bottom .pill{font-size:9px;padding:7px 9px}.presence-bottom .icon-button{margin:0}.orbit{width:70px;height:70px}.orbit span{width:45px;height:45px;font-size:25px;border-radius:15px}.stream-placeholder h2{font-size:16px}.stream-placeholder p{font-size:10px}.stream-placeholder small{font-size:8px}.input-card .camera-preview{height:130px}.hardware{display:block}.control-column .panel-heading h2{font-size:13px}.service-row{padding:13px 18px}.service-copy h3{font-size:13px}.service-copy>span{font-size:10px}.service-button{font-size:11px;padding:9px 14px}.compact-field select{font-size:12px}.switch-row{font-size:12px;padding:11px 0}.panel-note{font-size:10px}.context-usage>div,.hardware-row>div,.hardware-row strong{font-size:10px}.pipeline span{font-size:10px}.page-foot{padding:20px 0 6px;font-size:7px;letter-spacing:.5px}.settings-dialog{padding:23px}.setting-row{gap:14px}.setting-row select{max-width:170px}.settings-end{align-items:flex-start;flex-direction:column}.logs-dialog{padding:20px}.logs-dialog pre{font-size:10px}.card{border-radius:17px}}
.mobile-tabs{display:none}
.hardware{display:grid;grid-template-columns:1fr;gap:10px}.hardware-group{min-width:0;border-top:1px solid #f0e9f5;padding-top:10px}.hardware-group:first-child{border-top:0;padding-top:0}.hardware-group h3{font-size:9px;font-weight:600;letter-spacing:.5px;color:#9a7dab;margin:0 0 10px}.hardware-row>div{flex-wrap:wrap;row-gap:3px}.power-row progress{accent-color:#c99cb4}.power-row progress::-webkit-progress-value{background:#c99cb4}
@media(min-width:621px) and (max-width:900px){.hardware{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.hardware-group{border-top:0;padding-top:0}}
.thinking-preview{margin:0 18px 12px;border-left:2px solid #d9c5e5;padding:7px 11px;background:#fbf8fd;border-radius:0 7px 7px 0;color:#9c80ae;font-size:10px}.thinking-preview>span{font-size:8px;letter-spacing:.7px}.thinking-preview p{font-size:11px;line-height:1.8;max-height:70px;overflow:auto;margin:6px 0 0}.subtitle-wrap{border-radius:10px;margin:0 8px}.context-usage progress.high::-webkit-progress-value{background:#d8aa76}
@media(max-width:620px){.mobile-tabs{display:flex;gap:7px;margin:0 0 12px}.mobile-tabs button{flex:1;border:1px solid #e7dcee;background:#fdfbfe;color:#9a7cae;font-size:10px;padding:9px 6px;border-radius:9px}.conversation{height:calc(100dvh - 172px)}.topbar-actions{flex-shrink:0}.topbar>div:first-child{min-width:0}.topbar .eyebrow{letter-spacing:.7px;font-size:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Mobile application shell: tall Pro Max and wider 3:4 portrait displays. */
@media(max-width:900px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
  body{position:fixed;inset:0}
  .shell{display:block;position:fixed;left:0;right:0;top:var(--viewport-top,0px);height:var(--app-height,100dvh);min-height:0;overflow:hidden}
  .rail{display:none}
  main{display:flex;flex-direction:column;height:100%;width:100%;max-width:none;margin:0;min-height:0;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:10px}
  .topbar{order:0;flex:0 0 auto;min-height:48px;margin:0;gap:8px}
  .topbar>div:first-child{min-width:0}.topbar h1{font-size:19px;white-space:nowrap;margin:0;font-weight:550;letter-spacing:.3px}.topbar h1 span{font-size:20px;margin-left:3px}
  .topbar .eyebrow{display:none}.domain{display:none}.topbar-actions{gap:6px;flex-shrink:0}
  .topbar-actions .pill{min-height:44px;padding:8px 10px;font-size:12px;border-radius:12px}
  .connection-badge{display:inline-flex;align-items:center;font-size:9px;padding:6px 8px;max-width:84px;overflow:hidden;text-overflow:ellipsis}
  .console-grid{order:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:auto;min-height:0;max-height:none;flex:1;gap:12px;overflow:hidden}
  .console-grid>.presence-column,.console-grid>.conversation,.console-grid>.control-column{display:none;height:100%;min-height:0;max-height:100%;order:initial;min-width:0}
  #app[data-mobile-tab=chat] .conversation{display:flex}
  #app[data-mobile-tab=view] .presence-column{display:flex;flex-direction:column;overflow-y:auto;gap:12px;padding-bottom:4px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #app[data-mobile-tab=controls] .control-column{display:flex;flex-direction:column;overflow-y:auto;gap:12px;padding-bottom:4px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .control-column>.card{flex-shrink:0;order:initial}
  .control-column .service-card{order:0}.control-column .system-card{order:1}.control-column .quick-card{order:2}
  .mobile-tabs{order:2;flex:0 0 auto;display:flex;gap:7px;margin:0;padding:0 0 max(10px,env(safe-area-inset-bottom));border:0;background:#f7f5fa}
  .mobile-tabs button{position:relative;flex:1;min-height:52px;padding:10px 8px;border:1px solid #e9e0ef;border-radius:14px;background:#fdfbfe;color:#a28aaf;font-size:14px;font-weight:500}
  .mobile-tabs button[aria-selected=true]{background:#eae0f2;border-color:#d5bfe3;color:#7d5a96;box-shadow:0 2px 10px #9d7bad10}
  .mobile-tabs button.has-media:after{content:'';position:absolute;top:9px;right:12px;height:5px;width:5px;border-radius:50%;background:#84a993}
  .page-foot{display:none}
  .conversation{border-radius:18px;overflow:hidden;min-height:0}
  .chat-head{flex-shrink:0;padding:11px 13px;min-height:64px}.chat-avatar{width:35px;height:35px}.chat-head h2{font-size:15px;margin:0 0 4px}.chat-head .muted{font-size:10px}.chat-identity{gap:9px}
  .messages{padding:18px 14px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.bubble{font-size:15px;line-height:1.85;max-width:94%;padding:11px 14px}.message{margin-bottom:20px}.message-label{font-size:10px;margin-bottom:7px}
  .welcome h2{font-size:20px}.welcome p{font-size:14px}.suggestions button{min-height:44px;font-size:12px;padding:10px 12px}
  .notice{flex-shrink:0;font-size:12px;line-height:1.65;padding:9px 13px;max-height:75px;overflow-y:auto}
  .pending{flex-shrink:0;font-size:11px;padding:5px 14px 10px}.thinking-preview{flex-shrink:0;margin:0 12px 10px;padding:6px 9px;max-height:80px}.thinking-preview p{font-size:12px;max-height:45px}
  .composer-area{flex-shrink:0;padding:8px 10px 10px;background:#fff}
  .input-toolbar{gap:8px;margin-bottom:7px;min-height:36px}.input-toolbar label{font-size:11px;gap:6px}.input-toolbar select{font-size:16px;min-height:36px;max-width:190px;padding:4px 6px}.input-toolbar>span{display:none}
  .composer{padding:6px;gap:4px;border-radius:15px;align-items:flex-end}.composer textarea{font-size:16px;min-height:44px;max-height:108px;padding:8px 3px;line-height:1.6}
  .composer .icon-button,.send-button,.mic-button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px}.composer .icon-button{font-size:25px}.send-button{font-size:26px}.mic-button{font-size:25px}
  .composer-foot{display:none}.recording-status{font-size:12px;padding:3px 3px 9px}.attachment-chip{font-size:12px}.attachment-chip button{min-width:36px;min-height:36px}
  .icon-button{min-width:44px;min-height:44px}.pill{min-height:44px;font-size:13px;padding:9px 13px}.primary{min-height:44px;font-size:14px}.primary.small{font-size:13px;padding:10px 15px}
  select{font-size:16px;min-height:44px;padding:9px 10px}input:not([type=checkbox]):not([type=radio]),textarea{font-size:16px}
  .presence-column .presence{position:relative;display:flex;flex-direction:column;flex:0 0 auto;height:calc(var(--app-height,100dvh)*.64);min-height:390px;max-height:680px}
  .presence .panel-heading{padding:14px 16px;min-height:52px;flex-shrink:0}.panel-heading h2{font-size:14px}
  .presence .video-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:1;min-height:130px;margin:0 10px;border-radius:12px}
  .subtitle-wrap{width:auto;min-height:64px;padding:12px 14px 2px;margin:0 8px}.subtitle-wrap p{font-size:13px;line-height:1.7;max-height:65px}.subtitle-wrap .eyebrow{font-size:8px;letter-spacing:1.6px}
  .presence-bottom{width:auto;display:flex;padding:8px 12px 12px;gap:7px;flex-shrink:0}.presence-bottom .pill{min-height:44px;font-size:12px;padding:9px 12px}.presence-bottom .icon-button{margin-left:auto}
  .orbit{width:78px;height:78px}.orbit span{width:50px;height:50px;font-size:26px}.stream-placeholder{padding:18px}.stream-placeholder h2{font-size:18px;margin:22px 0 8px}.stream-placeholder p{font-size:12px;line-height:1.7;margin-bottom:16px}.stream-placeholder small{font-size:10px;margin-top:13px}
  .input-card{display:flex;flex-direction:column;flex:0 0 auto;min-height:300px}.input-card .panel-heading{padding:14px 15px 10px}.input-controls{padding:0 12px 10px;gap:6px}.input-controls select{font-size:16px;min-height:44px;max-width:none}.input-controls .pill{font-size:13px;min-height:44px;padding:8px 12px}.input-controls .icon-button{min-width:44px;font-size:22px}
  .input-card .camera-preview{height:160px;min-height:120px;flex:1;margin:0 12px}.input-foot{font-size:10px;padding:11px 14px}.fps-tag{font-size:9px}#cameraEmpty{font-size:13px}#cameraEmpty small{font-size:11px}
  .service-card .panel-heading,.quick-card .panel-heading,.system-card .panel-heading{padding:16px}.service-row{padding:14px 16px;gap:12px}.service-icon{width:39px;height:39px}.service-copy h3{font-size:15px}.service-copy h3 small{font-size:10px}.service-copy>span{font-size:12px}.service-button{min-height:44px;font-size:13px;min-width:64px;padding:10px 13px}.panel-note{font-size:11px}
  .compact-field>span{font-size:12px;margin-bottom:8px}.compact-field select{font-size:16px;min-height:44px}.text-button{min-height:36px;min-width:36px;font-size:12px}.context-usage>div{font-size:11px}.switch-row{font-size:14px;min-height:48px;padding:10px 0}.switch-row input,.setting-row input[type=checkbox]{width:35px;height:21px}.switch-row input:before,.setting-row input[type=checkbox]:before{width:17px;height:17px}.switch-row input:checked:before,.setting-row input[type=checkbox]:checked:before{transform:translateX(14px)}
  .hardware{display:grid;grid-template-columns:1fr;gap:12px}.hardware-group h3{font-size:12px;margin-bottom:12px}.hardware-row>div,.hardware-row strong{font-size:12px}.hardware-row{margin-bottom:14px}.hardware progress{height:6px}.pipeline span{font-size:11px;padding:7px 9px}.tag{font-size:10px}
  dialog{position:fixed;top:calc(var(--viewport-top,0px) + 12px);left:0;right:0;bottom:auto;margin:0 auto;width:calc(100% - 24px);max-width:560px;max-height:calc(var(--app-height,100dvh) - 24px);padding:22px;overscroll-behavior:contain}
  dialog header{position:sticky;top:-22px;padding-top:8px;padding-bottom:9px;background:#fefcfe;z-index:2}.settings-dialog{width:calc(100% - 20px);max-width:620px}.setting-row{font-size:14px;min-height:58px;gap:14px}.setting-row small{font-size:11px;line-height:1.6}.setting-row select{font-size:16px;max-width:190px;min-height:44px}.setting-row.stacked select{max-width:100%}.settings-group h3{font-size:12px}.settings-dialog>.muted{font-size:12px}.settings-end{gap:14px}.danger-button{min-height:44px;font-size:13px}.logs-dialog pre{height:calc(var(--app-height,100dvh) - 220px);min-height:100px;font-size:12px}.auth-dialog label{font-size:13px}.auth-dialog input{min-height:46px;font-size:16px}.auth-dialog p{font-size:13px}.auth-dialog .primary{font-size:15px}
  .toast{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 66px);font-size:13px;max-width:calc(100vw - 24px);width:max-content;padding:12px 15px}
  .keyboard-open .topbar,.keyboard-open .mobile-tabs{display:none}.keyboard-open main{padding-top:6px;padding-bottom:6px;gap:0}.keyboard-open .chat-head{min-height:44px;padding:5px 10px}.keyboard-open .chat-head .muted{display:none}.keyboard-open .chat-avatar{height:29px;width:29px;font-size:17px}.keyboard-open .composer-area{padding-top:5px}.keyboard-open .input-toolbar{display:none}.keyboard-open .messages{padding:12px}.keyboard-open .toast{bottom:14px}
}
@media(min-width:600px) and (max-width:900px){
  #app[data-mobile-tab=controls] .control-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:min-content;align-items:start}
  .control-column .service-card{grid-column:1;grid-row:1}.control-column .quick-card{grid-column:1;grid-row:2}.control-column .system-card{grid-column:2;grid-row:1 / span 2}.hardware{grid-template-columns:1fr}
  .input-card .camera-preview{min-height:160px}
}
.audio-input-controls{border-top:1px solid var(--line);padding-top:12px}
.voice-control-card,.benchmark-card{min-width:0}
.voice-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px}
.voice-controls-grid .compact-field{margin-left:0;margin-right:0}
.voice-control-actions{display:flex;flex-wrap:wrap;gap:7px;margin:0 16px 12px}
.voice-control-actions .pill{font-size:11px;min-height:36px;padding:7px 9px}
.voice-control-card audio{display:block;width:calc(100% - 32px);height:42px;margin:0 16px 10px}
.voice-control-card select{max-width:100%;text-overflow:ellipsis}
.chat-head-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
#chatVoiceToggle{font-size:11px;padding:6px 8px;min-height:32px;white-space:nowrap}
#chatVoiceToggle[aria-pressed=true]{background:#eee2f6;border-color:#cbb3dc;color:#86629b}
.voice-control-card .panel-note{overflow-wrap:anywhere}
.benchmark-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0 16px 12px}
.benchmark-metric{min-width:0;border:1px solid var(--line);background:#fcf9fe;border-radius:8px;padding:8px}
.benchmark-metric span{display:block;font-size:10px;color:#a08aaa;margin-bottom:4px}
.benchmark-metric strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}
@media(max-width:900px){.control-column .voice-control-card{order:1}.control-column .benchmark-card{order:2}.control-column .system-card{order:3}.control-column .quick-card{order:4}.voice-control-card select{font-size:16px;min-height:36px}.voice-control-actions .pill,#runBenchmark{min-height:40px}.benchmark-metric strong{font-size:13px}}
@media(min-width:600px) and (max-width:900px){.control-column .voice-control-card{grid-column:1;grid-row:3}.control-column .benchmark-card{grid-column:2;grid-row:3}}
.audio-input-controls .compact-field{margin-bottom:7px}
.audio-input-controls .panel-note{margin-bottom:12px;overflow-wrap:anywhere}
.pending.response-progress{flex-shrink:0;margin:0 12px 8px;padding:8px 10px;border:1px solid #eee5f4;border-radius:10px;background:#fcf9fe;color:#9271a6;font-size:11px}
.response-progress-heading{display:flex;align-items:center;gap:7px;min-width:0}
.response-progress-heading strong{font-size:12px;font-weight:500;flex:1;min-width:0;overflow-wrap:anywhere}
.response-progress-heading>span:last-child{font-size:10px;color:#ac96b9;white-space:nowrap}
.response-progress-dot{width:6px;height:6px;border-radius:50%;background:#b39ac7;flex-shrink:0;animation:pulse 1.5s infinite}
.response-progress p{font-size:11px;line-height:1.5;margin:5px 0 0;color:#a38ab2;overflow-wrap:anywhere}
.response-progress small{display:block;font-size:10px;line-height:1.5;margin-top:4px;color:#9675a9;font-variant-numeric:tabular-nums}
.response-progress[data-phase=completed] .response-progress-dot,.response-progress.is-error .response-progress-dot{animation:none}
.response-progress.is-error{border-color:#edddd4;background:#fffaf4}.response-progress.is-error .response-progress-dot{background:#bf936e}
@media(prefers-reduced-motion:reduce){.response-progress-dot{animation:none}}
@media(min-width:600px) and (max-width:900px) and (min-aspect-ratio:2/3){
  #app[data-mobile-tab=chat] .console-grid{grid-template-columns:minmax(190px,.46fr) minmax(0,1fr)}
  #app[data-mobile-tab=chat] .presence-column{display:flex;overflow:hidden}
  #app[data-mobile-tab=chat] .presence-column>.presence{height:100%;min-height:0;max-height:none;flex:1}
  #app[data-mobile-tab=chat] .input-card{display:none}
  #app[data-mobile-tab=chat] .presence-bottom{gap:5px;padding:8px}.presence-bottom .pill{flex:0 1 auto}
  #app[data-mobile-tab=chat] .presence-bottom .pill{font-size:11px;padding:8px}
  .keyboard-open #app[data-mobile-tab=chat] .console-grid{grid-template-columns:minmax(0,1fr)}
  .keyboard-open #app[data-mobile-tab=chat] .presence-column{display:none}
}
@media(max-width:390px){.topbar h1{font-size:17px}.topbar h1 span{display:none}.topbar-actions{gap:4px}.topbar-actions .pill{padding:8px;font-size:11px}.connection-badge{font-size:8px;max-width:73px}.composer textarea{padding-left:0}.composer .icon-button,.send-button,.mic-button{width:42px;min-width:42px}}

/* Compact mobile density: more conversation and telemetry, not page zoom. */
@media(max-width:900px){
  html[data-density=compact] .settings-dialog{padding:17px}
  html[data-density=compact] .settings-dialog header{top:-17px;padding-top:4px;padding-bottom:5px}
  html[data-density=compact] .settings-dialog h2{font-size:17px;margin:5px 0 7px}
  html[data-density=compact] .settings-dialog>.muted{font-size:10px;margin-bottom:15px}
  html[data-density=compact] .settings-group{margin-bottom:16px;padding-top:8px}
  html[data-density=compact] .settings-group h3{font-size:10px;margin:3px 0}
  html[data-density=compact] .setting-row{font-size:12px;min-height:44px;padding:8px 0;gap:10px}
  html[data-density=compact] .setting-row small{font-size:10px;margin-top:3px}
  html[data-density=compact] .setting-row select{font-size:16px;min-height:36px;padding:5px 8px}
  html[data-density=compact] .setting-row.stacked select{margin-top:6px}
  html[data-density=compact] .settings-end{padding-top:12px;gap:9px}
  #app[data-density=compact] main{gap:7px;padding-top:max(7px,env(safe-area-inset-top))}
  #app[data-density=compact] .topbar{min-height:40px}
  #app[data-density=compact] .topbar h1{font-size:17px}
  #app[data-density=compact] .topbar-actions .pill{min-height:36px;font-size:11px;padding:6px 8px;border-radius:9px}
  #app[data-density=compact] .console-grid{gap:8px}
  #app[data-density=compact] .card{border-radius:13px}
  #app[data-density=compact] .chat-head{min-height:49px;padding:6px 11px}
  #app[data-density=compact] .chat-avatar{width:29px;height:29px;font-size:16px;border-radius:10px}
  #app[data-density=compact] .chat-head h2{font-size:13px;margin-bottom:2px}
  #app[data-density=compact] .chat-head .muted{font-size:9px}
  #app[data-density=compact] .messages{padding:12px}
  #app[data-density=compact] .bubble{font-size:13px;line-height:1.7;padding:8px 11px;max-width:96%;border-radius:3px 11px 11px}
  #app[data-density=compact] .message.user .bubble{border-radius:11px 3px 11px 11px}
  #app[data-density=compact] .message{margin-bottom:12px}
  #app[data-density=compact] .message-label{font-size:8px;margin-bottom:4px}
  #app[data-density=compact] .pending{font-size:10px;padding:3px 12px 7px}
  #app[data-density=compact] .notice{font-size:11px;padding:6px 11px;max-height:58px}
  #app[data-density=compact] .thinking-preview{margin:0 10px 7px;max-height:66px;padding:5px 8px}
  #app[data-density=compact] .thinking-preview p{font-size:11px;line-height:1.6;max-height:35px}
  #app[data-density=compact] .composer-area{padding:5px 7px 7px}
  #app[data-density=compact] .input-toolbar{min-height:29px;margin-bottom:3px}
  #app[data-density=compact] .input-toolbar label{font-size:10px}
  #app[data-density=compact] .input-toolbar select{font-size:16px;min-height:29px;padding:2px 5px}
  #app[data-density=compact] .composer{padding:3px;gap:2px;border-radius:11px}
  #app[data-density=compact] .composer textarea{font-size:16px;min-height:44px;line-height:1.5;padding:9px 3px;max-height:90px}
  #app[data-density=compact] .composer .icon-button,#app[data-density=compact] .send-button,#app[data-density=compact] .mic-button{min-width:44px;width:44px;min-height:44px;height:44px;border-radius:9px}
  #app[data-density=compact] .composer .icon-button{font-size:22px}
  #app[data-density=compact] .send-button,#app[data-density=compact] .mic-button{font-size:23px}
  #app[data-density=compact] .mobile-tabs{gap:5px;padding-bottom:max(7px,env(safe-area-inset-bottom))}
  #app[data-density=compact] .mobile-tabs button{min-height:44px;font-size:12px;padding:7px;border-radius:11px}
  #app[data-density=compact] .panel-heading{padding:10px 12px;min-height:38px}
  #app[data-density=compact] .panel-heading h2{font-size:12px}
  #app[data-density=compact] .tag{font-size:9px;padding:3px 6px}
  #app[data-density=compact] .service-row{padding:8px 12px;gap:9px}
  #app[data-density=compact] .service-icon{width:29px;height:29px;font-size:17px;border-radius:9px}
  #app[data-density=compact] .service-copy h3{font-size:12px;margin-bottom:3px}
  #app[data-density=compact] .service-copy h3 small{font-size:9px}
  #app[data-density=compact] .service-copy>span{font-size:10px}
  #app[data-density=compact] .service-button{min-height:36px;min-width:53px;font-size:11px;padding:7px 10px}
  #app[data-density=compact] .panel-note{font-size:10px;line-height:1.6;margin:3px 0 10px;padding:0 12px}
  #app[data-density=compact] .compact-field{margin:0 12px 9px}
  #app[data-density=compact] .compact-field>span{font-size:10px;margin-bottom:5px}
  #app[data-density=compact] .compact-field select{font-size:16px;min-height:36px;padding:5px 8px}
  #app[data-density=compact] .context-usage{margin:10px 12px}
  #app[data-density=compact] .context-usage>div{font-size:10px;margin-bottom:6px}
  #app[data-density=compact] .switch-row{min-height:35px;font-size:12px;padding:6px 0;margin:0 12px}
  #app[data-density=compact] .text-button{min-height:30px;font-size:10px}
  #app[data-density=compact] .control-column{gap:8px}
  #app[data-density=compact] .pipeline{margin:0 12px 10px;gap:3px}
  #app[data-density=compact] .pipeline span{font-size:9px;padding:5px 7px}
  #app[data-density=compact] .hardware{gap:7px;padding:0 12px 5px}
  #app[data-density=compact] .hardware-group{padding-top:7px}
  #app[data-density=compact] .hardware-group:first-child{padding-top:0}
  #app[data-density=compact] .hardware-group h3{font-size:10px;margin:0 0 8px}
  #app[data-density=compact] .hardware-row{margin-bottom:9px}
  #app[data-density=compact] .hardware-row>div,#app[data-density=compact] .hardware-row strong{font-size:10px;margin-bottom:5px}
  #app[data-density=compact] .hardware progress{height:4px}
  #app[data-density=compact] .subtitle-wrap{padding:8px 10px 1px;min-height:52px}
  #app[data-density=compact] .subtitle-wrap p{font-size:12px;line-height:1.6;max-height:56px}
  #app[data-density=compact] .presence-bottom{padding:5px 8px 8px;gap:5px}
  #app[data-density=compact] .presence-bottom .pill{font-size:11px;min-height:36px;padding:7px 9px}
  #app[data-density=compact] .stream-placeholder h2{font-size:16px;margin:15px 0 5px}
  #app[data-density=compact] .stream-placeholder p{font-size:11px;margin-bottom:12px}
  #app[data-density=compact] .stream-placeholder small{font-size:9px;margin-top:10px}
  #app[data-density=compact] .input-controls{padding:0 10px 8px}
  #app[data-density=compact] .input-controls select{font-size:16px;min-height:36px;padding:5px 7px}
  #app[data-density=compact] .input-controls .pill{font-size:11px;min-height:36px;padding:6px 9px}
  #app[data-density=compact] .input-foot{font-size:9px;padding:8px 12px}
  #app[data-density=compact] .input-card{min-height:240px}
}
@media(min-width:600px) and (max-width:900px) and (min-aspect-ratio:2/3){
  #app[data-mobile-tab=chat][data-stream=off] .console-grid{grid-template-columns:minmax(0,1fr)}
  #app[data-mobile-tab=chat][data-stream=off] .presence-column{display:none}
  #app[data-density=compact][data-mobile-tab=chat][data-stream=on] .console-grid{grid-template-columns:minmax(164px,.36fr) minmax(0,1fr)}
  #app[data-density=compact][data-mobile-tab=chat][data-stream=on] .presence-column{display:flex}
  .keyboard-open #app[data-density=compact][data-mobile-tab=chat] .console-grid{grid-template-columns:minmax(0,1fr)}
  .keyboard-open #app[data-density=compact][data-mobile-tab=chat] .presence-column{display:none}
}

/* Notifications stay above the workspace and never intercept controls. */
.toast,.keyboard-open .toast{
  top:calc(var(--viewport-top,0px) + env(safe-area-inset-top,0px) + 12px);
  bottom:auto;
  pointer-events:none;
}

/* Secondary pages keep return buttons outside their scrolling content. */
.settings-help details{padding-top:6px;font-size:12px;line-height:1.7}
.settings-help summary{cursor:pointer;padding:8px 0;color:#80628f}
.settings-help p{margin:8px 0;color:#8b7599;overflow-wrap:anywhere}
.turn-setup-result{margin:12px 0 4px;padding:10px 12px;border:1px solid #e5d9ed;border-radius:8px;background:#f5f0f9;color:#70537f;font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.turn-setup-result[data-state=error]{background:#fff3f5;border-color:#ecc7d1;color:#9c3555}
.turn-setup-result[data-state=success]{background:#edf6ef;border-color:#cce0d2;color:#366c47}
.logs-dialog[open],.settings-dialog[open]{display:flex;flex-direction:column;overflow:hidden;height:min(820px,calc(var(--app-height,100dvh) - 24px))}
.logs-dialog header,.settings-dialog header{position:static;flex-shrink:0;gap:12px}
.logs-dialog pre{flex:1;min-height:100px;height:auto}
.settings-dialog #settingsControls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.settings-dialog .settings-end{flex-shrink:0;padding-top:8px}
.dialog-footer{display:flex;flex-shrink:0;justify-content:flex-start;padding-top:10px;border-top:1px solid var(--line)}
.back-button,.dialog-footer button{min-height:42px;min-width:76px;font-size:13px}
.call-card{flex-shrink:0;padding-bottom:12px;min-width:0}
.presence-column{display:flex;flex-direction:column;overflow-y:auto;gap:12px}
.presence-column>.card{flex-shrink:0}
.presence-column .presence{position:relative;height:clamp(360px,55dvh,620px);min-height:360px}
.presence-column .input-card{min-height:240px}
.call-controls{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px 10px}
.call-controls button,.call-controls select{min-height:42px;font-size:13px}
.call-controls select{font-size:16px;min-width:0;max-width:150px}
.call-camera-switch{display:flex;align-items:center;gap:6px;min-height:42px;font-size:13px;cursor:pointer}
.call-camera-switch input{width:18px;height:18px;accent-color:var(--purple)}
.call-camera-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 14px 8px}
.call-camera-controls select{flex:1 1 145px;min-width:0;max-width:100%;font-size:16px;min-height:42px}
.call-camera-controls #callCameraFormat{flex:1 1 130px}
.call-camera-controls button{font-size:12px;min-height:42px;padding:7px 10px}
.call-camera-controls small{flex-basis:100%;color:var(--muted);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.call-mic-meter{display:flex;align-items:center;gap:9px;min-height:30px;padding:2px 16px 8px;font-size:12px;color:#8d789b;--mic-color:#ac98bd;--mic-scale:1;--mic-glow:0px}
.call-mic-dot{flex-shrink:0;display:inline-block;width:9px;height:9px;margin:0 3px;border-radius:50%;background:var(--mic-color);transform:scale(var(--mic-scale));box-shadow:0 0 var(--mic-glow) var(--mic-color);transition:transform 80ms linear,background-color 80ms linear,box-shadow 80ms linear}
.call-mic-value{margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums;opacity:.7}
.call-mic-meter[data-state=off],.call-mic-meter[data-state=muted]{--mic-color:#b9b4be;color:#a59caa}
.call-mic-meter[data-state=held]{--mic-color:#bc9966;color:#a28b6b}
.call-mic-meter[data-state=live]{--mic-color:#55a890}
@media(prefers-reduced-motion:reduce){.call-mic-dot{transition:none;transform:none}}
.call-transcript{font-size:13px;line-height:1.6;padding:0 16px;color:#886c9a;overflow-wrap:anywhere;max-height:100px;overflow:auto}
.call-frames{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 14px 12px}
.call-frames figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.call-frames img{width:100%;height:100px;object-fit:contain;background:#f6f1fa}
.call-frames figcaption{font-size:10px;color:#a08baa;padding:5px 8px}
#app[data-call=on] #inputVideo{object-fit:contain}
#app[data-call=on] .input-controls{opacity:.6}
#app[data-call=on] .input-card{display:none}
.call-preview-card{padding-bottom:4px;min-width:0}
.call-preview-viewport{position:relative;width:var(--call-preview-width,169px);height:var(--call-preview-height,300px);max-width:calc(100% - 24px);margin:0 auto 10px;overflow:hidden;border-radius:12px;background:#f7f5fa}
.call-preview-viewport #callPreviewCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.call-preview-viewport #callPreviewCanvas.mirrored{transform:scaleX(-1)}
.call-preview-viewport .call-self-preview,#app[data-call=on] #inputVideo.call-self-preview{position:absolute;inset:0;width:1px;height:1px;min-width:0;min-height:0;opacity:0;pointer-events:none;border:0}
@media(max-width:900px){
  #app[data-mobile-tab=view] .presence .video-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:1;min-height:210px;margin:0 10px;border-radius:12px}
  #app[data-mobile-tab=view] .presence .subtitle-wrap{width:100%;min-height:55px;padding:8px 12px 0}
  #app[data-mobile-tab=view] .presence .presence-bottom{width:100%;padding:6px 12px 10px}
}
.fullscreen-back{display:none;position:absolute;top:12px;left:12px;z-index:20;min-height:42px}
.video-stage .role-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f7f5fa}
.role-fps-controls{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;padding:0 12px 10px;font-size:11px;color:var(--muted)}
.role-fps-controls input{width:64px;min-height:36px;font-size:16px;padding:4px 7px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--purple)}
.settings-dialog #roleFps{width:76px;min-width:76px;max-width:76px;min-height:40px;font-size:16px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;color:var(--purple);background:#fff}
.settings-dialog #lipSyncAdvance{width:90px;min-width:80px;min-height:40px;font-size:16px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;color:var(--purple);background:#fff}
.role-fps-controls span{font-size:10px;font-variant-numeric:tabular-nums}
#roleTransportStatus{flex-basis:100%;line-height:1.6}
#video:fullscreen .fullscreen-back{display:block}
.video-stage .role-frame{cursor:zoom-in;touch-action:manipulation}
body.role-fullscreen-open{overflow:hidden}
#video.role-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;min-height:0!important;max-height:none!important;flex:none!important;border-radius:0!important;z-index:10000;background:#15111a}
#video.role-fullscreen .role-frame{object-fit:contain;background:#15111a;cursor:zoom-out}
#video.role-fullscreen .fullscreen-back{display:block;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px)}
.call-frame-details summary{font-size:12px;margin:4px 16px 10px;color:#a08baa;cursor:pointer}
.screen-capture-source{position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
#screenShare[aria-pressed=true]{background:#e4d8ee;border-color:#b899ca;color:#76568d}
#app[data-call-camera=off] .call-frame-details{display:none}
@media(max-width:900px){.presence-column .call-card{order:0}.presence-column .presence{order:1}.presence-column .call-preview-card{order:2}.presence-column .input-card{order:3}}

/* One top navigation row; no bottom tab bar or title block. */
.chat-bottom-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;min-width:0;margin-top:6px;flex:0 0 auto}
.chat-bottom-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}
.chat-bottom-actions #chatVoiceToggle,.chat-bottom-actions .danger-button{min-height:32px;padding:5px 8px;font-size:11px}
.chat-bottom-actions #resetContext{width:32px;min-width:32px;height:32px;min-height:32px;font-size:22px}
/* Compact meter shares the bottom control row, including while typing. */
.chat-context{--context-color:#b194c7;flex:1 1 140px;min-width:0;margin:0}
.chat-context-line{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:5px;color:#9b86a9;font-size:10px;line-height:1.2;font-variant-numeric:tabular-nums}
#chatContextText{white-space:nowrap;color:#80628f}
#chatContextPercent{margin-left:auto;min-width:37px;text-align:right;color:var(--context-color)}
#chatContextProgress{height:3px;min-height:3px;border-radius:2px;accent-color:var(--context-color)}
#chatContextProgress::-webkit-progress-bar{border-radius:2px;background:#f0e9f7}
#chatContextProgress::-webkit-progress-value{border-radius:2px;background:var(--context-color)}
#chatContextProgress::-moz-progress-bar{border-radius:2px;background:var(--context-color)}
.chat-context[data-level=high]{--context-color:#be8a42}
.chat-context[data-level=critical]{--context-color:#c65e7a}
.chat-context[data-level=unknown]{--context-color:#bcb2c3}
#app .topbar{display:flex;align-items:center;gap:6px;min-height:40px;margin:0 0 10px;flex:0 0 auto}
#app .topbar .mobile-tabs{position:static;display:flex;flex:1;min-width:0;gap:4px;padding:0;margin:0;order:initial;background:none;border:0}
#app .topbar .mobile-tabs button{flex:1;min-width:0;min-height:40px;padding:6px 8px;border:1px solid #e7dcee;border-radius:9px;font-size:12px;font-weight:500;white-space:nowrap;background:#fdfbfe;color:#967ba8}
#app .topbar .mobile-tabs button[aria-selected=true]{background:#eae0f2;color:#7d5a96;border-color:#d5bfe3}
#app .topbar-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
#app .topbar-actions .pill{min-height:40px;padding:6px 9px;font-size:12px;white-space:nowrap}
@media(max-width:900px){
  #app main{gap:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  #app .topbar{order:0;margin:0;min-height:40px}
  .keyboard-open #app .topbar{display:flex}
  #app[data-mobile-tab=view] .presence-column{display:flex;flex-direction:column;align-items:stretch;overflow-y:auto}
  #app[data-mobile-tab=view] .presence-column>.presence{flex:0 0 auto;height:clamp(460px,64dvh,720px);min-height:460px;max-height:none}
  #app[data-mobile-tab=view] .presence-column>.call-preview-card{flex:0 0 auto;height:auto;min-height:0;max-height:none}
}
@media(max-width:480px){
  #app .topbar .connection-badge{width:9px;height:9px;min-width:9px;max-width:9px;padding:0;font-size:0;overflow:hidden;border:0;border-radius:50%;background:#b9adc1}
  #app .topbar .connection-badge.connected{background:#78a28a}
}