:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e9f1f1;background:#101416;letter-spacing:0;font-size:16px}
.model-row{display:flex;align-items:center;gap:8px;flex:none;min-width:0}.model-row label{font-size:13px;color:#acc4c5;flex:none}.model-row select{font:inherit;font-size:13px;min-width:0;width:100%;height:40px;border:1px solid #344348;border-radius:6px;background:#172024;color:#e9f1f1;padding:6px;text-overflow:ellipsis}.model-row .icon{width:40px;min-height:40px;height:40px;padding:8px}.model-row select:focus-visible{outline:2px solid #6ae5df;outline-offset:2px}@media(orientation:landscape) and (max-height:600px){.model-row{grid-column:2;grid-row:1}.header-tools{display:none}}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,label.toggle{touch-action:manipulation}button{border:1px solid #344348;background:#1b2528;color:#e9f1f1;border-radius:8px;cursor:pointer;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px}button:hover{background:#2a383c}button:disabled{opacity:.42;cursor:default}button:focus-visible,input:focus-visible,.toggle:focus-within{outline:2px solid #6ae5df;outline-offset:3px}svg{width:21px;height:21px;flex:none}button.icon{width:46px;padding:10px;flex:none}button.stop{color:#ffb8a5;border-color:#754e43}
main{min-height:100dvh;max-width:1100px;margin:auto;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));gap:14px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}.identity{display:flex;flex-direction:column;gap:5px}.identity strong{font-size:23px}.identity span{font-size:12px;color:#c2a781}.identity span.online{color:#76d6ae}.header-tools{display:flex;gap:6px}.header-tools .icon{border:none;background:transparent;color:#91a6a8}
.presence{position:relative;flex:1;min-height:240px;max-height:560px;display:flex;flex-direction:column;justify-content:center}#face{width:100%;height:100%;min-height:210px;max-height:460px;flex:1;display:block}.state-line{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none}#status{font-size:18px;font-weight:550}#privacy{color:#8caaac;font-size:12px}#cameraPreview{position:absolute;right:0;bottom:50px;width:104px;aspect-ratio:3/4;background:#080c0d;border:1px solid #456263;border-radius:8px;overflow:hidden}#cameraPreview[hidden]{display:none}#cameraVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#flipCamera{position:absolute;right:3px;bottom:3px;width:36px;min-height:36px;height:36px;padding:6px;background:#101416dd}
.conversation{min-height:64px;max-height:160px;overflow:auto;text-align:center;flex:none;max-width:700px;width:100%;margin:auto;overflow-wrap:anywhere}.conversation p{margin:0 0 8px;line-height:1.5}#heard{font-size:13px;color:#89a0a4}#answer{font-size:17px}#notice{margin:0;color:#ffbd9d;font-size:13px;text-align:center;overflow-wrap:anywhere}footer{display:flex;flex-direction:column;gap:14px;flex:none;width:100%;max-width:700px;margin:0 auto}.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid #344348;border-radius:8px;cursor:pointer;background:#1b2528;position:relative}.toggle input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}.toggle:has(input:checked){background:#183932;border-color:#64b79b;color:#a0f3d6}.toggle:has(input:disabled){opacity:.42;cursor:default}#messageForm{display:flex;border-bottom:1px solid #3b5053;padding-bottom:7px;gap:8px}#message{width:100%;min-width:0;background:transparent;border:none;color:#fff;padding:8px 4px}#messageForm button{background:#75d7c9;color:#071f1b;border:none}
dialog{width:min(390px,calc(100% - 32px));border:1px solid #415b60;border-radius:8px;background:#172024;padding:28px;color:#eef6f6}dialog::backdrop{background:#080d10e8}#pairForm{display:flex;flex-direction:column;gap:14px}h1{font-size:28px;margin:0 0 8px}.eyebrow{font-size:11px;color:#77d7cd;margin:0}#pairCode{border:1px solid #496065;background:#101719;padding:12px;color:#fff;border-radius:6px;width:100%;font-size:24px}#pairForm label{font-size:14px}#pairError{font-size:13px;color:#ffb8a5;margin:0;min-height:18px}#pairForm button{background:#75d7c9;color:#0b211e;border:none}
.volume-row{display:flex;align-items:center;gap:12px;min-height:36px;font-size:13px;color:#acc4c5}.volume-row label{display:flex;align-items:center;gap:7px;flex:none}.volume-row input{width:100%;min-width:30px;accent-color:#75d7c9;cursor:pointer;min-height:30px;margin:0}.volume-row output{width:42px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
@media(max-width:480px){main{padding-left:16px;padding-right:16px;gap:12px}.controls{gap:7px}.controls button,.toggle{padding:10px 6px;gap:5px;font-size:13px}.controls svg{width:18px;height:18px}.header-tools{gap:0}.presence{min-height:240px}#cameraPreview{width:82px;bottom:66px}.conversation{max-height:130px}#answer{font-size:16px}}
@media(orientation:landscape) and (max-height:600px){main{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);grid-template-rows:auto 1fr auto;min-height:100dvh;gap:10px 24px}header{grid-column:1/-1}.presence{grid-column:1;grid-row:2/4;min-height:170px}#face{min-height:140px}.conversation{grid-column:2;max-height:100px}footer{grid-column:2}#notice{grid-column:1/-1}#cameraPreview{width:68px}.controls button,.toggle{font-size:12px;padding:8px 4px}.controls{gap:5px}.controls svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(orientation:landscape) and (max-height:600px){header{grid-column:1;grid-row:1}.model-row{grid-column:2;grid-row:1}.header-tools{display:flex}.conversation{grid-row:2}footer{grid-row:3}#notice{grid-row:4}}
.header-tools a.icon{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;height:46px;padding:0 8px;font-size:13px;flex:none;text-decoration:none;border-radius:8px}.header-tools a.icon:focus-visible{outline:2px solid #6ae5df;outline-offset:2px}
#toolApproval{max-width:700px;width:100%;margin:auto;border-top:1px solid #49636a;padding:12px 0;flex:none}#toolApproval[hidden]{display:none}#toolDescription{font-size:14px;line-height:1.5;overflow-wrap:anywhere;margin:0 0 10px}#toolApproval>div{display:flex;gap:10px}#approveTool{border-color:#64b79b;color:#a0f3d6}@media(orientation:landscape) and (max-height:600px){#toolApproval{grid-column:1/-1}}