:root{--bg: #0f1115;--panel: #171a21;--panel-2: #1f232c;--border: #2a2f3a;--text: #e8eaf0;--muted: #8b93a7;--primary: #4f7cff;--accent: #22c55e;--danger: #ef4444;--warn: #f59e0b;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}.app{display:flex;flex-direction:column;min-height:100%;max-width:1400px;margin:0 auto;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:10px}.topbar{display:flex;align-items:baseline;gap:12px;padding:2px 4px}.logo{font-weight:800;font-size:20px;letter-spacing:.5px}.logo span{color:var(--primary)}.tagline{color:var(--muted);font-size:13px}.layout{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}.stage{display:flex;flex-direction:column;gap:10px}.video-wrap{position:relative;width:100%;aspect-ratio:3 / 4;max-height:62vh;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.remote{width:100%;height:100%;object-fit:cover;background:#000;display:block}.local{position:absolute;right:10px;bottom:10px;width:30%;max-width:220px;aspect-ratio:3 / 4;object-fit:cover;transform:scaleX(-1);border-radius:10px;border:2px solid rgba(255,255,255,.15);background:#111;box-shadow:0 6px 20px #00000080;display:none}body.has-local .local{display:block}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;color:var(--muted);background:radial-gradient(circle at 50% 40%,#1b2030,#0b0d12 70%)}.placeholder[hidden]{display:none}.placeholder-icon{font-size:54px;color:var(--primary);opacity:.8}body[data-phase=searching] .placeholder-icon,body[data-phase=connecting] .placeholder-icon{animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:1}}.status{position:absolute;left:10px;top:10px;max-width:calc(100% - 20px);padding:6px 12px;border-radius:999px;background:#0f1115bf;backdrop-filter:blur(6px);border:1px solid var(--border);font-size:13px}.status:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--muted);vertical-align:middle}.status[data-kind=ok]:before{background:var(--accent)}.status[data-kind=warn]:before{background:var(--warn)}.status[data-kind=error]:before{background:var(--danger)}.status[data-kind=error]{color:#fecaca}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.btn{appearance:none;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:12px 14px;border-radius:12px;font-weight:600;cursor:pointer;transition:background .15s,transform .05s,opacity .15s;min-height:46px}.btn:hover:not(:disabled){background:#272c37}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:#3d6bf0}.btn-accent{background:var(--accent);border-color:var(--accent);color:#06210f}.btn-accent:hover:not(:disabled){background:#1fb556}.btn-danger{background:transparent;border-color:var(--danger);color:#fca5a5}.btn-danger:hover:not(:disabled){background:#ef44441f}.chat{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);min-height:260px;height:38vh;overflow:hidden}.chat-head{padding:10px 14px;border-bottom:1px solid var(--border);font-weight:600;color:var(--muted)}.chat-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}.msg{max-width:85%;padding:7px 11px;border-radius:12px;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}.msg-me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}.msg-peer{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px}.msg-system{align-self:center;color:var(--muted);font-size:12px;background:none}.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}.chat-form input{flex:1;min-width:0;padding:11px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;font-size:16px}.chat-form input:focus{border-color:var(--primary)}.chat-form input:disabled{opacity:.5}.chat-form .btn{min-height:0;padding:10px 14px}@media (min-width: 600px){.controls{grid-template-columns:repeat(4,1fr)}.video-wrap{aspect-ratio:16 / 9;max-height:70vh}.local{aspect-ratio:16 / 9;width:26%}}@media (min-width: 960px){.app{height:100vh}.layout{flex-direction:row}.stage{flex:1;min-width:0}.video-wrap{flex:1;aspect-ratio:auto;max-height:none;min-height:0}.chat{width:340px;height:auto;flex-shrink:0}}