*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--grad-start:#4a5fd4;--grad-end:#5a2d8a;--bg-grad:linear-gradient(135deg, #0f0f1e 0%, #1a0a28 100%);--brand-grad:linear-gradient(135deg, #89f, #c8f);--green-grad:linear-gradient(135deg, #22a550, #178a40);--green-grad-hi:linear-gradient(135deg, #28c060, #1a9e48);--green-grad-remote:linear-gradient(135deg, #28a745, #20c997);--surface:#1a1a2e;--surface2:#13131f;--video-bg:#0b0b16;--placeholder-local:#111124;--placeholder-grad-remote:radial-gradient(circle at 50% 35%, #25234a, #0e0e1b 70%);--controls-bg:#13131ff5;--controls-height:80px;--border:#645ab433;--border-soft:#645ab426;--border-light:#ddd8f02e;--border-label:#7864dc40;--text:#ddd8f0;--text-dim:#7070a0;--white:#fff;--black:#000;--white-dim:#ffffffd9;--label-color:#ffffffc7;--label-bg:#141228bf;--label-local:#9af;--label-remote:#4c8;--green:#22a550;--green-glow:#22a55024;--red:#c93048;--red-hi:#e53935;--red-lo:#a02838;--mic-bg:#c93048d6;--shadow:0 20px 60px #0a051eb3;--shadow-md:0 6px 20px #4a5fd480;--shadow-sm:0 4px 15px #4a5fd459;--shadow-xs:0 2px 12px #0006;--shadow-ctrl:0 4px 15px #4a3cb459;--shadow-green:0 4px 15px #22a55066;--shadow-disabled:0 4px 15px #a0a0a066;--text-shadow-lg:0 4px 18px #0006;--text-shadow-sm:0 2px 8px var(--black);--radius-lg:20px;--radius-md:14px;--radius-pill:50px;--btn-off-bg:#c930481f;--btn-off-border:#c9304847;--btn-off-color:#e05070;--btn-on-bg:#645ac81a;--btn-on-border:#645ac833;--btn-on-color:#89f;--btn-hover-bg:#645ac826;--ctrl-hover-bg:#645ac838;--ctrl-hover-border:#7864dc66;--disabled-bg:#565656;--badge-info:#6478f02e;--badge-warn:#c8a0002e;--badge-error:#c930482e;--scrollbar-thumb:#645ac84d;--sun-color:#fc9601}html,body{background:var(--bg-grad);width:100%;height:100%;color:var(--text);touch-action:none;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#app{height:100%}button{font:inherit}.page{flex-direction:column;width:100%;min-height:100%;display:flex;position:relative;overflow:hidden}.status-bar{z-index:30;background:var(--surface);border-bottom:1px solid var(--border);height:50px;min-height:50px;box-shadow:var(--shadow-xs);align-items:center;gap:1rem;padding:0 1.25rem;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;left:0;right:0}.page.status-hidden .status-bar{visibility:hidden;transform:translateY(-100%)}.brand{background:var(--brand-grad);color:#0000;letter-spacing:.03em;-webkit-background-clip:text;background-clip:text;flex:1;font-size:1.1rem;font-weight:700}.log-btn-label{cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;gap:4px;padding:9px;transition:background .2s;display:flex}.log-btn-label:hover,.log-btn-label:focus-visible{background:var(--btn-hover-bg);outline:none}.log-btn-label span{background:var(--btn-on-color);border-radius:2px;width:20px;height:2px;transition:transform .3s,opacity .3s;display:block}.log-btn-label.open span:first-child{transform:translateY(6px)rotate(45deg)}.log-btn-label.open span:nth-child(2){opacity:0;transform:scaleX(0)}.log-btn-label.open span:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.status-indicator{align-items:center;gap:.65rem;max-width:55%;display:flex}.status-msg{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;overflow:hidden}.dot{background:var(--red);width:9px;height:9px;box-shadow:0 0 0 4px var(--btn-off-bg);border-radius:50%;flex:none;animation:2s ease-in-out infinite pulse}.dot.connected{background:var(--green);box-shadow:0 0 0 4px var(--green-glow)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}.log-panel{z-index:25;border-bottom:1px solid var(--border);background:var(--surface);width:100%;height:calc(100% - 135px);max-height:none;box-shadow:var(--shadow);pointer-events:none;touch-action:auto;padding:1.5rem 1.75rem;transition:transform .38s cubic-bezier(.4,0,.2,1);position:absolute;top:50px;left:0;right:0;overflow:auto;transform:translateY(-105%)}.page.status-hidden .log-panel{top:0}.log-panel.open{pointer-events:auto;transform:translateY(0)}.log-panel h2{background:var(--brand-grad);color:#0000;letter-spacing:.12em;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;margin-bottom:.75rem;font-size:.8rem;font-weight:700}.log-panel h6{color:var(--text-dim);letter-spacing:.08em;margin-bottom:.75rem;font-size:.65rem;font-weight:500}.log-empty,.log-entry{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem}.log-empty{color:var(--text-dim)}.log-entry{border-bottom:1px solid var(--border-soft);grid-template-columns:auto auto 1fr;gap:.55rem;padding:.28rem 0;line-height:1.35;display:grid}.log-entry:last-child{border-bottom:none}.log-time{color:var(--text-dim)}.log-level{border-radius:var(--radius-pill);background:var(--badge-info);min-width:3rem;color:var(--btn-on-color);text-align:center;align-self:center;padding:.12rem .45rem;font-weight:700}.log-level.info{background:var(--badge-info)}.log-level.warn{background:var(--badge-warn)}.log-level.error{background:var(--badge-error)}.log-panel::-webkit-scrollbar{width:4px}.log-panel::-webkit-scrollbar-track{background:0 0}.log-panel::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:2px}.log-msg{overflow-wrap:anywhere;min-width:0}.video-area{background:var(--video-bg);flex:1;min-height:0;position:relative;overflow:hidden}.remote-wrap,.local-wrap{position:absolute}.remote-wrap{z-index:1;opacity:0;pointer-events:none;transition:opacity .45s;inset:0}.remote-wrap.connected{opacity:1;pointer-events:auto}.local-wrap{z-index:2;aspect-ratio:auto;width:auto;box-shadow:none;background:0 0;border:none;border-radius:0;transition:all .3s cubic-bezier(.4,0,.2,1);inset:0;overflow:hidden}.local-wrap.pip-collapsed{visibility:hidden;pointer-events:none}.video-area.pip-collapsed .remote-wrap{opacity:1;pointer-events:auto}.remote-wrap.connected+.local-wrap,.video-area.pip-collapsed .local-wrap{inset:auto auto calc(var(--controls-height) + 1rem) 1rem;z-index:2;width:min(30vw,280px);aspect-ratio:var(--local-pip-aspect-ratio,16 / 10);border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--surface2);box-shadow:var(--shadow-sm)}.page.controls-hidden .remote-wrap.connected+.local-wrap,.page.controls-hidden .video-area.pip-collapsed .local-wrap{inset:auto auto 1rem 1rem}.remote-placeholder,.local-placeholder{background:var(--placeholder-grad-remote);width:100%;height:100%;position:relative;overflow:hidden}.local-placeholder{background:var(--placeholder-local)}#remote-video,#local-video{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .18s;position:absolute;inset:0}#remote-video.has-frame,#local-video.visible{opacity:1}#local-video.mirrored{transform:scaleX(-1)}.avatar{z-index:2;background:linear-gradient(135deg, var(--grad-start), var(--grad-end));width:96px;height:96px;box-shadow:var(--shadow-sm);color:var(--white);letter-spacing:.05em;text-shadow:var(--text-shadow-lg);border-radius:50%;place-items:center;font-size:1.6rem;font-weight:700;transition:opacity .18s,visibility .18s;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.remote-placeholder .avatar.remote{background:var(--green-grad-remote)}.remote-wrap.connected+.local-wrap .avatar{width:46px;height:46px;font-size:1.1rem}.avatar.hidden,.mic-status-icon.hidden{visibility:hidden;opacity:0;pointer-events:none}.video-label{z-index:5;border:1px solid var(--border-label);border-radius:var(--radius-pill);background:var(--label-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--label-color);letter-spacing:.08em;text-transform:uppercase;text-shadow:var(--text-shadow-sm);padding:.25rem .8rem;font-size:.72rem;font-weight:600;position:absolute;top:.7rem;left:.8rem}.local-wrap .video-label{color:var(--label-local)}.remote-wrap .video-label{color:var(--label-remote)}.remote-wrap.connected+.local-wrap .video-label{padding:.2rem .6rem;font-size:.58rem;top:.5rem;left:.5rem}.mic-status-icon{z-index:10;background:var(--mic-bg);width:30px;height:30px;color:var(--white);opacity:1;border-radius:50%;place-items:center;transition:opacity .16s,visibility .16s,bottom .3s cubic-bezier(.4,0,.2,1);display:grid;position:absolute;bottom:.7rem;right:.75rem}.remote-wrap .mic-status-icon{bottom:calc(var(--controls-height) + env(safe-area-inset-bottom) + 1rem)}.page.controls-hidden .remote-wrap .mic-status-icon{bottom:calc(env(safe-area-inset-bottom) + 1rem)}.mic-status-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:17px}.controls{z-index:20;min-height:80px;padding:.75rem 1rem;padding-bottom:max(.75rem, env(safe-area-inset-bottom));background:var(--controls-bg);border-top:1px solid var(--border);justify-content:center;align-items:center;gap:.65rem;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:0;left:0;right:0}.controls.hidden{visibility:hidden;transform:translateY(100%)}.page.cursor-hidden{cursor:none}.ctrl-btn{border:1.5px solid var(--btn-on-border);border-radius:var(--radius-md);width:62px;min-width:62px;height:62px;min-height:62px;color:var(--btn-on-color);background:var(--btn-on-bg);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;transition:all .25s;display:flex;position:relative}.ctrl-btn:hover:not(:disabled){border-color:var(--ctrl-hover-border);background:var(--ctrl-hover-bg);box-shadow:var(--shadow-ctrl);transform:translateY(-2px)}.ctrl-btn:active:not(:disabled){box-shadow:none;transform:translateY(0)}.ctrl-btn svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.ctrl-btn.active{color:var(--btn-on-color);background:var(--btn-on-bg);border-color:var(--btn-on-border)}.ctrl-btn:disabled{cursor:not-allowed;opacity:.42}.btn-label{color:var(--btn-on-color);letter-spacing:.06em;text-align:center;text-transform:uppercase;font-size:9px;font-weight:600}.btn-flip-camera svg{stroke:var(--btn-on-color)}.icon-vid-on,.icon-mic-on,.icon-back-camera,.icon-vid-off,.icon-mic-off,.icon-front-camera{flex-direction:column;align-items:center;gap:.25rem}.icon-vid-on,.icon-mic-on,.icon-back-camera{display:none}.icon-vid-off,.icon-mic-off,.icon-front-camera{display:flex}#videoBtn:not(.active):not(:disabled),#micBtn:not(.active):not(:disabled){background:var(--btn-off-bg);border-color:var(--btn-off-border)}#videoBtn:not(.active):not(:disabled) .btn-label,#micBtn:not(.active):not(:disabled) .btn-label{color:var(--btn-off-color)}#videoBtn:not(.active):not(:disabled) svg,#micBtn:not(.active):not(:disabled) svg{stroke:var(--btn-off-color)}#videoBtn.active,#micBtn.active{background:var(--btn-on-bg);border-color:var(--btn-on-border)}#videoBtn.active .icon-vid-on,#micBtn.active .icon-mic-on,#flip-camera.active .icon-back-camera{display:flex}#videoBtn.active .icon-vid-off,#micBtn.active .icon-mic-off,#flip-camera.active .icon-front-camera{display:none}#videoBtn.active .btn-label,#micBtn.active .btn-label{color:var(--btn-on-color)}.ctrl-btn:disabled:not(.btn-leave){background:var(--disabled-bg);box-shadow:var(--shadow-disabled);cursor:not-allowed;opacity:1}.ctrl-btn:disabled:not(.btn-leave) svg{stroke:var(--black)}.ctrl-btn:disabled:not(.btn-leave) .btn-label{color:var(--black)}.ctrl-btn:disabled:not(.btn-leave):hover{background:var(--disabled-bg);box-shadow:var(--shadow-disabled);transform:none}.btn-call{border-radius:var(--radius-pill);background:var(--green-grad);width:62px;height:62px;box-shadow:var(--shadow-green);color:var(--white);border:none}.btn-call svg{stroke:var(--white)}.btn-call .btn-label{color:var(--white-dim)}.btn-leave{border-radius:var(--radius-pill);background:var(--red-hi);width:62px;height:62px;color:var(--white);border:none}.btn-leave svg{stroke:var(--white)}.btn-leave .btn-label{color:var(--white)}.btn-call:hover:not(:disabled){background:var(--green-grad-hi)}.btn-leave:hover:not(:disabled){background:var(--red-lo)}.ctrl-divider{background:var(--border);width:2px;height:67px;margin:0 5px}.room-error{text-align:center;flex:1;place-content:center;gap:.75rem;min-height:0;padding:2rem;display:grid}.room-error p{color:var(--text-dim)}.room-error .back-home-btn{border-radius:var(--radius-pill);background:linear-gradient(135deg, var(--grad-start), var(--grad-end));box-shadow:var(--shadow-sm);color:var(--white);cursor:pointer;border:none;justify-self:center;margin-top:.5rem;padding:.65rem 1.75rem;font-size:.95rem;font-weight:600;transition:transform .16s,box-shadow .16s,filter .16s}.room-error .back-home-btn:hover{box-shadow:var(--shadow-md);filter:brightness(1.05);transform:translateY(-2px)}.room-error .back-home-btn:focus-visible{box-shadow:var(--shadow-md);outline:none}@media (width<=640px){.status-bar{padding-inline:.75rem}.status-msg{max-width:42vw}.remote-wrap.connected+.local-wrap,.video-area.pip-collapsed .local-wrap{left:.65rem;bottom:calc(var(--controls-height) + env(safe-area-inset-bottom) + 1rem)}@media (orientation:portrait){.remote-wrap.connected+.local-wrap,.video-area.pip-collapsed .local-wrap{width:auto;max-width:45vw;height:min(28vh,220px);aspect-ratio:var(--local-pip-aspect-ratio,16 / 10)}}@media (orientation:landscape){.remote-wrap.connected+.local-wrap,.video-area.pip-collapsed .local-wrap{width:auto;max-width:38vw;height:min(52vh,280px);aspect-ratio:var(--local-pip-aspect-ratio,16 / 10)}}.page.controls-hidden .remote-wrap.connected+.local-wrap,.page.controls-hidden .video-area.pip-collapsed .local-wrap{bottom:calc(env(safe-area-inset-bottom) + .65rem);left:.65rem}.controls{gap:.35rem;padding-inline:.5rem}.ctrl-divider{margin-inline:0}}.landing-page.svelte-18y4z1i{min-height:100%;color:var(--text);touch-action:auto;justify-content:center;align-items:center;padding:2rem 1rem 5.5rem;display:flex;position:relative;overflow:auto}.landing-card.svelte-18y4z1i{border-radius:var(--radius-lg);background:var(--surface);width:min(600px,90%);box-shadow:var(--shadow);text-align:center;padding:3rem}h1.svelte-18y4z1i{color:var(--text);margin-bottom:.75rem;font-size:2rem}.landing-intro.svelte-18y4z1i{color:var(--text-dim);margin-bottom:2rem}.create-room-btn.svelte-18y4z1i,.copy-btn.svelte-18y4z1i,.go-room-btn.svelte-18y4z1i{color:var(--white);cursor:pointer;border:none;font-weight:600;transition:transform .16s,box-shadow .16s,background .16s,filter .16s}.create-room-btn.svelte-18y4z1i{border-radius:var(--radius-pill);background:linear-gradient(135deg, var(--grad-start), var(--grad-end));box-shadow:var(--shadow-sm);letter-spacing:1px;text-transform:uppercase;padding:1rem 2.5rem;font-size:1.1rem}.create-room-btn.svelte-18y4z1i:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-2px)}.create-room-btn.svelte-18y4z1i:disabled{cursor:wait;opacity:.65}.landing-error.svelte-18y4z1i,.share-message.svelte-18y4z1i{color:var(--red);margin-top:1rem;font-size:.9rem}.room-info.svelte-18y4z1i{border-radius:var(--radius-md);background:var(--surface2);margin-top:2rem;padding:1rem;animation:.3s svelte-18y4z1i-fadeIn}.room-id.svelte-18y4z1i{overflow-wrap:anywhere;color:var(--grad-start);margin-top:.5rem;font-size:1rem;font-weight:700}.button-container.svelte-18y4z1i{justify-content:center;gap:.5rem;margin-top:1rem;display:flex}.copy-btn.svelte-18y4z1i,.go-room-btn.svelte-18y4z1i{border-radius:var(--radius-pill);padding:.5rem 1.5rem;font-size:.9rem}.copy-btn.svelte-18y4z1i{background:var(--grad-start)}.copy-btn.svelte-18y4z1i:hover{background:var(--grad-end);transform:translateY(-1px)}.copy-btn.copied.svelte-18y4z1i,.go-room-btn.svelte-18y4z1i{background:var(--green)}.go-room-btn.svelte-18y4z1i:hover{filter:brightness(1.12);transform:translateY(-1px)}.footer-container.svelte-18y4z1i{color:var(--text-dim);justify-content:space-between;font-size:.78rem;display:flex;position:absolute;bottom:1rem;left:1.5rem;right:1.5rem}.email-link.svelte-18y4z1i{color:inherit;text-decoration:none}.email-link.svelte-18y4z1i:hover{text-decoration:underline}@keyframes svelte-18y4z1i-fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (width<=520px){.landing-card.svelte-18y4z1i{width:100%;padding:2rem 1.25rem}.button-container.svelte-18y4z1i{flex-direction:column}.copy-btn.svelte-18y4z1i,.go-room-btn.svelte-18y4z1i{width:100%}.footer-container.svelte-18y4z1i{left:1rem;right:1rem}}
