:root{--bg: #0f1115;--panel: #1a1d24;--panel-2: #232733;--text: #e7eaf0;--muted: #9aa3b2;--accent: #ff5a5f;--accent-2: #4cd964;--border: #2c313c}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;padding:24px 16px 48px}main{width:100%;max-width:720px;transition:max-width .2s}body.session-active main{max-width:1040px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}h1{font-size:22px;margin:0}h2{font-size:16px;margin:0 0 12px;color:var(--accent)}h3{font-size:14px;margin:0 0 8px;color:var(--muted)}.status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.dot{width:10px;height:10px;border-radius:50%;background:#555}.dot.on{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}.battery{margin-left:8px}section{margin-bottom:20px}.connect-row,.run-row{display:flex;gap:12px}button{flex:1;padding:12px 16px;font-size:15px;font-weight:600;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .15s,opacity .15s}button:hover:not(:disabled){background:#2e3442}button:disabled{opacity:.4;cursor:not-allowed}#startBtn{background:var(--accent-2);color:#06210f;border-color:transparent}#stopBtn{background:var(--accent);color:#2a0608;border-color:transparent}.channels{display:grid;grid-template-columns:1fr 1fr;gap:16px}.channel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}.channel label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}.channel label:first-of-type{margin-top:0}output{color:var(--text);font-weight:700}.control{display:flex;flex-direction:column;gap:8px}input[type=range]{width:100%;height:18px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;touch-action:none}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--panel-2)}input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--panel-2)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}.nudge{display:flex;gap:6px}.nudge button{flex:1;padding:6px 0;font-size:13px;font-weight:600;border-radius:8px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);cursor:pointer}.nudge button:hover{background:#2e3442}.nudge button:active{background:var(--accent);color:#2a0608}.log{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 16px}#log{margin:0;max-height:160px;overflow-y:auto;font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);white-space:pre-wrap}.session-layout{display:grid;grid-template-columns:1fr;gap:16px}body.session-active .session-layout{grid-template-columns:2fr 1fr;align-items:start}.controls-col{min-width:0}.controls-col>section:last-child{margin-bottom:0}.side-col{display:flex;flex-direction:column;gap:16px;min-width:0}.video-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-bottom:0}.video{width:100%;border-radius:10px;background:#000;display:block}.video.remote{aspect-ratio:4 / 3;object-fit:contain}body.role-master .controls-col .video-panel{margin-top:0}body.role-master .controls-col .video.remote{aspect-ratio:16 / 9;max-height:70vh}.video.local{margin-top:8px;aspect-ratio:4 / 3;object-fit:contain}.video-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.video-controls button{flex:1 1 auto;padding:8px 12px;font-size:13px}.chat-panel{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-bottom:0;height:100%;max-height:520px}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0;min-height:200px}.chat-msg{max-width:85%;padding:6px 10px;border-radius:10px;background:var(--panel-2);font-size:13px;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere}.chat-msg.mine{align-self:flex-end;background:var(--accent-2);color:#06210f}.chat-msg .chat-meta{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}.chat-msg.mine .chat-meta{color:#0a3a1a}.chat-input-row{display:flex;gap:8px;margin-top:10px}.chat-input-row input{flex:1;min-width:0;padding:10px 12px;font-size:14px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px}.chat-input-row button{flex:0 0 auto;padding:10px 16px}.banner{background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--accent-2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--text)}.banner.warn{border-left-color:var(--accent);background:#ff5a5f1f}.session-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}.session-panel p{margin:6px 0;font-size:13px}.link-row{display:flex;gap:8px;margin-top:6px}.link-row input{flex:1;padding:10px 12px;font-size:13px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;font-family:SF Mono,ui-monospace,Menlo,monospace}.link-row button{flex:0 0 auto;padding:10px 16px}.muted{color:var(--muted)}.overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}.overlay[hidden]{display:none}.modal{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px}.modal h2{color:var(--text);margin-bottom:6px}.modal p{margin:0 0 14px;font-size:13px}.modal input{width:100%;padding:12px;font-size:15px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;margin-bottom:12px}.modal .error{color:var(--accent);font-size:13px;margin:-4px 0 10px}.modal-actions{display:flex;gap:10px}#overlayConfirm{background:var(--accent-2);color:#06210f;border-color:transparent}[hidden]{display:none!important}@media(max-width:720px){body.session-active main{max-width:720px}body.session-active .session-layout{grid-template-columns:1fr}.chat-panel{max-height:360px}}@media(max-width:560px){.channels{grid-template-columns:1fr}}