:root{--bg: #0a0a0f;--surface: #1a1a2e;--surface-2: #252540;--text: #e8e8f0;--text-dim: #8888aa;--accent: #ff6b9d;--accent-glow: rgba(255, 107, 157, .3);--success: #4ecdc4;--danger: #ff6b6b;--radius: 12px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}#app{width:100vw;height:100vh;display:flex;flex-direction:column}.lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem;padding:2rem}.lobby h1{font-size:2.5rem;margin-bottom:0}.lobby-subtitle{color:var(--text-dim);margin-bottom:2rem}.lobby-form{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px}.lobby-form input{padding:.75rem 1rem;border:1px solid var(--surface-2);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}.lobby-form input:focus{border-color:var(--accent)}.lobby-form button{padding:.85rem;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}.lobby-form button:hover{opacity:.9}.lobby-form button:disabled{opacity:.5;cursor:not-allowed}.lobby-error{color:var(--danger);font-size:.875rem}.room-code-banner{position:absolute;top:1rem;left:50%;transform:translate(-50%);background:var(--surface);padding:.5rem 1.25rem;border-radius:var(--radius);font-size:.875rem;z-index:100;transition:opacity .5s}.room-code-banner.fade-out{opacity:0;pointer-events:none}.room-code-banner button{margin-left:.75rem;padding:.25rem .5rem;border:1px solid var(--text-dim);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;font-size:.75rem}.call-screen{height:100vh;display:flex;flex-direction:column}.call-screen.connecting,.call-screen.disconnected,.call-screen.error{align-items:center;justify-content:center;gap:1rem}.video-grid{flex:1;display:grid;grid-template-columns:1fr;position:relative;background:#000}.video-container.remote{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.video-container.local{position:absolute;bottom:5rem;right:1rem;width:180px;height:135px;border-radius:var(--radius);overflow:hidden;border:2px solid var(--surface-2);z-index:10}.video-element{width:100%;height:100%;object-fit:cover}.video-element.local{transform:scaleX(-1)}.video-placeholder{color:var(--text-dim);font-size:1.1rem}.kiss-overlay{position:absolute;top:1.5rem;right:1.5rem;display:flex;align-items:center;gap:.5rem;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.5rem 1rem;border-radius:999px;font-size:1.5rem;z-index:50;transition:transform .3s ease}.kiss-emoji{font-size:1.75rem}.kiss-count{font-weight:700;color:var(--accent)}.kiss-overlay.kiss-flash{transform:scale(1.3);animation:kissFlash .8s ease-out}@keyframes kissFlash{0%{transform:scale(1.3)}50%{transform:scale(1.5)}to{transform:scale(1)}}.call-controls{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;z-index:20}.btn-hangup{padding:.75rem 2rem;border:none;border-radius:999px;background:var(--danger);color:#fff;font-size:1rem;font-weight:600;cursor:pointer}.btn-hangup:hover{opacity:.9}.call-status-bar{position:absolute;top:1.5rem;left:1.5rem;color:var(--text-dim);font-size:.8rem;z-index:50}.transcript-container{position:absolute;bottom:5rem;left:1rem;max-width:40%;max-height:200px;overflow-y:auto;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);padding:.75rem;z-index:20;font-size:.8rem}.transcript-panel h2{display:none}.transcript-segments{list-style:none}.transcript-segments li{margin-bottom:.25rem}.transcript-segments .interim{opacity:.5;font-style:italic}.transcript-segments time{color:var(--accent);margin-right:.5rem}.transcript-empty{color:var(--text-dim);font-style:italic}.transcript-unsupported{color:var(--text-dim)}