*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f1117;--surface:#1c1f2a;--border:#2e3347;--text:#e8eaf0;--muted:#7b8099;--accent:#3b7cff;--accept:#22c55e;--decline:#ef4444;--radius:12px}body{background:var(--bg);color:var(--text);justify-content:center;align-items:center;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;display:flex}section{width:100%;height:100dvh;display:flex}section.hidden{display:none}section.centered{justify-content:center;align-items:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:1rem;width:100%;max-width:380px;padding:2rem;display:flex}.card-wide{max-width:440px}.status-row{align-items:center;gap:.5rem;display:flex}.status-label{color:var(--muted);font-size:.85rem}.chip-section{flex-direction:column;gap:.6rem;display:flex}.chip-heading{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}.chip-row{flex-wrap:wrap;align-items:flex-start;gap:.35rem .5rem;display:flex}.chip-label{color:var(--muted);min-width:5.5rem;padding-top:.2rem;font-size:.8rem}.chips{flex-wrap:wrap;flex:1;gap:.35rem;display:flex}.chip{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.2rem .55rem;font-size:.78rem}.meta-list{grid-template-columns:auto 1fr;gap:.25rem .75rem;margin:0;font-size:.85rem;display:grid}.meta-list dt{color:var(--muted);margin:0}.meta-list dd{word-break:break-all;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.transfer-banner{color:var(--text);background:#3b7cff1f;border:1px solid #3b7cff59;border-radius:8px;padding:.75rem;font-size:.9rem}.device-bar{border-radius:var(--radius);border:1px solid var(--border);background:#1c1f2af5;flex-direction:column;gap:.55rem;padding:.85rem 1rem;display:flex}.device-bar-entry{flex-direction:column;gap:.15rem;min-width:0;display:flex}.device-bar-kind{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.75rem;font-weight:600}.device-bar-name{word-break:break-word;font-size:1rem;font-weight:600;line-height:1.3}.waiting-device-bar{width:100%}.call-meta-bar{z-index:15;border:1px solid var(--border);max-width:calc(100% - 1.5rem);color:var(--text);background:#000000a6;border-radius:8px;padding:.45rem .65rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;position:absolute;top:.75rem;left:.75rem}h1{font-size:1.4rem;font-weight:600}h2{font-size:1.2rem;font-weight:600}p{color:var(--muted);font-size:.95rem}.incoming-status{color:var(--accent);align-items:center;gap:.5rem;font-size:.9rem;display:flex}.incoming-status.hidden{display:none}form{flex-direction:column;gap:.75rem;display:flex}label{color:var(--muted);font-size:.85rem}input,select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;width:100%;padding:.6rem .8rem;font-size:1rem;transition:border-color .15s}input:focus,select:focus{border-color:var(--accent)}select:disabled{color:var(--muted)}button{cursor:pointer;border:none;border-radius:8px;padding:.65rem 1.2rem;font-size:.95rem;font-weight:500;transition:opacity .15s}button:hover{opacity:.85}button[type=submit],button:not(.secondary):not(.accept):not(.decline){background:var(--accent);color:#fff}button.secondary{background:var(--border);color:var(--text)}button.accept{background:var(--accept);color:#fff;flex:1}button.decline{background:var(--decline);color:#fff;flex:1}.button-row{gap:.75rem;display:flex}.status-dot{background:var(--muted);border-radius:50%;width:10px;height:10px;margin-bottom:.25rem}.status-dot.connected{background:var(--accept)}.status-dot.disconnected{background:var(--decline)}.error{color:var(--decline);font-size:.85rem}.hidden{display:none!important}#section-call{background:#000;flex-direction:column;position:relative}video-player-container,video-player{display:block}#remote-video-container{flex:1;width:100%}#remote-video-container video-player{width:100%;height:100%}#self-video-container.self-pip{border:2px solid var(--border);z-index:10;border-radius:8px;width:160px;height:90px;position:absolute;bottom:5rem;right:1rem;overflow:hidden}#self-video-container.self-pip video-player{width:100%;height:100%}.pstn-panel{z-index:20;border:1px solid var(--border);border-radius:var(--radius);background:#1c1f2af5;width:min(440px,100% - 2rem);padding:1rem;position:absolute;bottom:5.5rem;left:50%;transform:translate(-50%);box-shadow:0 18px 60px #00000073}.pstn-number-row{grid-template-columns:110px 1fr;gap:.75rem;display:grid}.pstn-status{color:var(--muted);min-height:1.2rem;font-size:.85rem}.pstn-status.error{color:var(--decline)}.pstn-status.active{color:var(--accept)}.media-permission-banner{z-index:200;color:#fecaca;text-align:center;border-bottom:1px solid var(--decline);background:#7f1d1d;padding:.75rem 1rem;font-size:.95rem;position:fixed;top:0;left:0;right:0}.media-permission-banner.hidden{display:none}.call-media-error{z-index:15;color:#fecaca;border-radius:var(--radius);text-align:center;background:#7f1d1deb;max-width:min(520px,100% - 2rem);padding:.6rem 1rem;font-size:.9rem;position:absolute;bottom:5.5rem;left:50%;transform:translate(-50%)}.call-media-error.hidden{display:none}#call-controls{background:#0009;justify-content:center;gap:.75rem;padding:1rem;display:flex}#btn-end-call{min-width:140px}.debug-panel{z-index:100;border:1px solid var(--border);border-radius:var(--radius);background:#0f1117f5;width:min(360px,100vw - 1.5rem);max-height:45vh;font-size:.78rem;position:fixed;bottom:.75rem;right:.75rem;overflow:auto;box-shadow:0 12px 40px #00000080}.debug-panel-header{border-bottom:1px solid var(--border);background:#0f1117fa;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex;position:sticky;top:0}.debug-panel-header button{padding:.25rem .5rem;font-size:.75rem}.debug-panel-body{grid-template-columns:auto 1fr;gap:.25rem .75rem;padding:.6rem .75rem .75rem;display:grid}.debug-panel-body dt{color:var(--muted);white-space:nowrap}.debug-panel-body dd{word-break:break-all;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}