.video-page{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f6f9fe}.call-header{height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #dee7f2;background:white;gap:15px}.call-header .brand img{width:100px}.room-label{font-size:8px;letter-spacing:2px;color:#8f9eb1}.call-header nav{display:flex;align-items:center;gap:22px}.call-header .live{font-size:11px}.call-header .text-button{font-size:11px;min-height:40px}.home-link{color:#69788d;font-size:11px;text-decoration:none;border-left:1px solid var(--line);padding-left:20px}.home-link span{margin-left:8px}.call-main{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:none;margin:0;padding:0}.call-stage{display:grid;grid-template-columns:1fr 1fr;gap:2px;position:relative;flex:1;min-height:0;background:#d8e2ef;overflow:hidden}.call-stage .video-panel{height:100%;min-height:0;border:0;border-radius:0}.call-stage .remote{background:radial-gradient(ellipse at 20% 15%,#dcecff,transparent 65%),radial-gradient(ellipse at 90% 90%,#d8eee6,transparent 70%),#edf3fb;touch-action:pan-y}.call-stage .remote.has-video{background:#101827}.call-stage .local{background:radial-gradient(ellipse at 70% 20%,#edf2fa,#dce5f1)}.call-stage .local:has(#localEmpty[hidden]){background:#111a29}.call-stage .video-panel video{object-fit:cover}.panel-top,.local-top{left:20px;right:20px;top:18px}.pill{box-shadow:0 2px 10px #142a4a06;font-size:11px}.panel-top .glass-button{min-height:40px}.panel-bottom{left:20px;right:20px;bottom:18px;gap:12px;font-size:11px}.panel-bottom>span:first-child{margin-right:auto}.glass-button{min-height:40px;font-size:11px;padding:8px 12px;backdrop-filter:blur(12px);background:#ffffffd9;border:1px solid #ffffff8c;border-radius:9px;text-shadow:none}.call-timer{font-variant-numeric:tabular-nums;letter-spacing:1px;border-radius:8px;background:#ffffffd9;color:#53657e;padding:10px;text-shadow:none;font-size:11px}.empty-state{padding:80px 25px}.empty-state h2{font-size:clamp(27px,3vw,43px);letter-spacing:-1.3px;line-height:1.15;margin-top:27px}.empty-state p{font-size:13px;line-height:1.85;max-width:340px}.bubble-art{transform:scale(1.1)}.call-stage .local-placeholder{font-size:12px;gap:14px;padding:50px 24px;text-align:center}.local-placeholder strong{font-size:23px;letter-spacing:-.5px}.local-placeholder>span{max-width:260px;line-height:1.7}.local-placeholder svg{width:38px;height:38px;color:#8ea5c2;margin-bottom:5px}.preview-button{border:1px solid #cbd9e9;background:#ffffffc9;color:#4f6b8f;border-radius:12px;padding:13px 20px;font-size:12px;min-height:44px;margin-top:8px}.local-top .pill{padding:9px 12px;font-size:11px}.local-top>span:last-child{font-size:10px;padding:8px 12px}.local-caption{position:absolute;bottom:30px;left:0;right:0;text-align:center;font-size:11px;color:#8798af;pointer-events:none}.local:has(#localEmpty[hidden]) .local-caption{display:none}.call-dock{flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:12px 20px 8px;background:white;border-top:1px solid #e3eaf4}.device-controls{position:static;justify-content:flex-start;display:flex;gap:8px}.device-controls button{min-height:48px;min-width:95px;font-size:12px;background:#f3f7fc;border:1px solid #dfe8f3;border-radius:12px;padding:12px 18px;color:#4d627d}.device-controls button[aria-pressed=true]{background:#fff0f2;color:#b24c60;border-color:#f3d4db}.main-controls{display:flex;gap:10px;align-items:center}.main-controls .primary{min-width:190px;min-height:52px;font-size:15px;border-radius:13px;padding:13px 24px}.main-controls .primary span{margin-left:55px}.main-controls .secondary{min-height:52px;min-width:88px;font-size:13px;padding:13px 20px;background:#fff3f3;color:#af5265;border-color:#f1d9df}.gesture-hint{justify-self:end;text-align:right;font-size:10px;color:#778ba5;line-height:1.8}.gesture-hint>span{display:block}.gesture-hint span span{padding:0 8px;color:#bdcad9}.gesture-hint .session-note{font-size:10px;color:#a0adbe}.touch-hint{display:none!important}.call-info{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:35px;flex-shrink:0;padding:2px 20px 9px;background:white;font-size:10px;color:#8190a5}.call-info p{margin:0;line-height:1.6;max-width:65%}#fullscreen{display:inline-flex;align-items:center;justify-content:center;gap:8px}.video-page:fullscreen{height:100dvh;width:100vw}.swipe-feedback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);z-index:6;display:flex;align-items:center;flex-direction:column;gap:12px;padding:22px 26px;width:200px;border:1px solid #ffffffa0;border-radius:22px;background:#ffffffed;box-shadow:0 15px 60px #1a3c6330;backdrop-filter:blur(15px);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;color:#1777f2}.swipe-feedback.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.swipe-feedback.stop{color:#c2546b}.swipe-feedback>span:first-child{font-size:35px;line-height:1}.swipe-feedback strong{font-size:12px}.swipe-progress{height:4px;width:100%;background:#dfe7f1;border-radius:10px;overflow:hidden}.swipe-progress i{height:100%;display:block;background:currentColor;width:0}.swipe-feedback.ready{border-color:currentColor}@media(pointer:coarse){.desktop-hint{display:none!important}.touch-hint{display:block!important}}@media(max-width:950px){.room-label{display:none}.call-dock{gap:10px;padding-inline:12px}.device-controls button{min-width:75px;padding:12px;font-size:11px}.main-controls .primary{min-width:145px}.main-controls .primary span{margin-left:30px}.gesture-hint{font-size:9px}.call-info{padding-inline:12px}.call-info p{max-width:55%}}@media(max-width:640px){.call-header{height:44px;padding:0 12px}.call-header .brand img{width:86px}.call-header nav{gap:13px}.call-header .live{font-size:10px}.call-header .text-button{font-size:10px}.privacy-link{display:none}.home-link{padding-left:11px;font-size:10px}.home-link span{display:none}.call-stage{display:block}.call-stage .remote{position:absolute;inset:0;width:100%;height:100%}.call-stage .local{position:absolute;right:12px;top:66px;bottom:auto;width:clamp(95px,28vw,130px);height:clamp(130px,21vh,178px);border:2px solid #ffffffc9;border-radius:14px;box-shadow:0 5px 25px #17364b30;z-index:3}.call-stage .local-placeholder{padding:26px 5px 8px;gap:8px}.local-placeholder strong{font-size:11px;letter-spacing:0}.local-placeholder>span,.local-caption{display:none}.local-placeholder svg{width:23px;height:23px;margin:0}.preview-button{font-size:9px;padding:7px 8px;min-height:36px;margin:0;border-radius:8px}.local-top{top:7px;left:7px;right:7px}.local-top .pill{font-size:8px;padding:3px 6px}.local-top>span:last-child{display:none}.panel-top{top:12px;left:12px;right:12px}.panel-top .pill{font-size:10px;padding:9px 10px}.panel-top .glass-button{min-height:36px;padding:8px 10px}#fullscreen span{display:none}.panel-bottom{left:12px;right:12px;bottom:12px;font-size:9px;gap:8px}.panel-bottom>span:first-child{max-width:170px;line-height:1.6}.panel-bottom .glass-button{font-size:10px;min-height:40px;padding:8px 10px}.call-timer{font-size:9px;padding:8px}.empty-state{padding:200px 20px 70px;justify-content:center}.empty-state h2{font-size:28px;letter-spacing:-1px;margin:16px 0 12px}.empty-state p{font-size:12px;max-width:270px;line-height:1.7}.bubble-art{transform:scale(.8);height:80px}.call-dock{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px 10px 4px}.device-controls{gap:6px}.device-controls button{min-width:0;flex:1;min-height:48px;padding:7px 8px;font-size:10px;border-radius:10px}.main-controls{gap:6px}.main-controls .primary{min-width:0;flex:1;min-height:48px;padding:10px 14px;font-size:14px;border-radius:10px}.main-controls .primary span{margin-left:12px}.main-controls .secondary{min-width:48px;min-height:48px;font-size:11px;padding:10px 12px;border-radius:10px}.gesture-hint{grid-column:1/-1;justify-self:center;text-align:center;font-size:9px;line-height:1.4;margin:2px 0}.gesture-hint .session-note{display:none}.desktop-hint{display:none!important}.touch-hint{display:block!important}.call-info{flex-direction:column;gap:5px;align-items:center;text-align:center;padding:3px 12px max(8px,env(safe-area-inset-bottom));min-height:0;font-size:9px}.call-info p{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.call-info input{width:15px;height:15px}}@media(max-width:640px) and (max-height:740px){.empty-state{padding-top:130px;padding-bottom:55px}.empty-state h2{font-size:24px}.empty-state p{font-size:11px}.bubble-art{display:none}.call-stage .local{width:96px;height:128px;top:59px}.empty-state h2{max-width:260px}}@media(max-height:500px) and (orientation:landscape){.call-header{height:38px}.call-header .brand img{width:80px}.call-dock{padding-top:6px;padding-bottom:4px}.device-controls button,.main-controls .primary,.main-controls .secondary{min-height:40px;padding-block:8px}.call-info{min-height:25px;font-size:9px;padding-bottom:4px}.bubble-art{display:none}.empty-state{padding:50px 20px}.empty-state h2{font-size:25px;margin:5px 0 10px}.empty-state p{font-size:11px}.local-placeholder svg,.local-caption{display:none}.call-stage .local-placeholder{gap:7px;padding:35px 15px}.local-placeholder strong{font-size:18px}.local-placeholder>span{display:none}.preview-button{min-height:38px;padding:8px 13px}.panel-top,.local-top{top:9px}.panel-bottom{bottom:8px}.panel-bottom>span:first-child{display:none}.panel-bottom .glass-button{margin-left:auto}.call-stage .glass-button{min-height:32px}.panel-top .pill{padding:7px 9px}}@media(prefers-reduced-motion:reduce){.swipe-feedback{transition:none}}
/* In-video tools stay out of the camera's way. */
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:10px;border-radius:12px;border:1px solid #dbe5f2;background:#ffffffdf;color:#506b8c;cursor:pointer;flex-shrink:0}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.flip-camera{position:absolute;right:18px;bottom:18px;z-index:3;backdrop-filter:blur(12px)}.chat-toggle{position:absolute;left:18px;bottom:72px;z-index:5;box-shadow:0 5px 20px #17375416}.chat-toggle #unreadBadge{position:absolute;right:-4px;top:-5px;background:#1777f2;color:white;border:2px solid white;border-radius:20px;min-width:19px;padding:2px;font-size:9px}.in-call-chat{position:absolute;left:18px;bottom:124px;width:min(350px,calc(100% - 36px));max-height:65%;height:330px;z-index:5;display:flex;flex-direction:column;background:#ffffffed;border:1px solid #ffffffb8;border-radius:18px;box-shadow:0 15px 60px #17354f2b;backdrop-filter:blur(20px);overflow:hidden}.in-call-chat header{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid #e6edf6}.in-call-chat header strong{display:block;font-size:13px}.in-call-chat header small{display:block;color:#8998ab;font-size:9px;margin-top:4px}.in-call-chat header .icon-button{height:32px;width:32px;font-size:22px;border:0;background:none}.in-call-chat #chatMessages{flex:1;min-height:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}.in-call-chat #chatEmpty{font-size:12px;line-height:1.7;color:#8b9ab0;margin:auto;text-align:center;max-width:230px}.chat-message{font-size:12px;line-height:1.5;background:#e9f0f8;border-radius:12px 12px 12px 3px;padding:9px 12px;align-self:flex-start;max-width:90%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message.mine{background:#1777f2;color:#fff;align-self:flex-end;border-radius:12px 12px 3px 12px}.in-call-chat form{display:flex;gap:8px;padding:10px;border-top:1px solid #e6edf6}.in-call-chat input{min-width:0;flex:1;border:1px solid #e2eaf4;border-radius:10px;background:#f6f9fd;padding:10px;font-size:16px;color:#344963}.in-call-chat form button{width:40px;border:0;background:#1777f2;color:white;border-radius:10px;font-size:22px}.settings-dialog{max-height:90dvh;overflow:auto;padding:25px}.settings-dialog header{display:flex;justify-content:space-between;align-items:center}.settings-dialog h2{margin:0;font-size:24px}.settings-dialog #settingsNotice{font-size:12px;line-height:1.6}.setting-field{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#5b718d;margin:18px 0}.setting-field select{width:100%;min-height:44px;border:1px solid #d9e4f2;border-radius:9px;background:#f5f8fc;padding:10px;font-size:14px;color:#465f7e}.setting-field input{accent-color:#1777f2;width:100%;min-height:28px}.setting-toggles,.settings-actions{display:flex;gap:8px;flex-wrap:wrap}.setting-toggles button,.settings-actions button{border:1px solid #dbe5f2;background:#edf4fd;color:#4f698a;padding:11px 12px;border-radius:9px;min-height:44px;font-size:11px;flex:1}.settings-actions{margin-top:22px}.settings-actions #block{background:#fff0f3;color:#ad4560;border-color:#f0dce3}.setting-check{display:flex;gap:9px;align-items:center;font-size:12px;color:#5b718d}.setting-check input{accent-color:#1777f2}.settings-links{display:flex;justify-content:space-between;font-size:11px;margin-top:23px}.mobile-swipe-hint{display:none}.remote.has-video .panel-bottom>span:first-child{display:none}
@media(max-width:640px){.video-page{position:fixed;inset:0;height:var(--visible-height,100dvh);top:var(--visible-top,0px);width:100%;background:#e6effa}.call-header{position:absolute;top:0;left:0;right:0;z-index:4;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;background:linear-gradient(#f6faffdd,#f6faff00);border:0;pointer-events:none}.call-header>*{pointer-events:auto}.call-header .brand img{width:91px}.call-header nav{gap:10px}.call-header .live{padding:7px 9px;border-radius:9px;background:#ffffffc9;font-size:9px}.call-header .text-button,.call-header .home-link{display:none}.call-header #settingsOpen{width:38px;height:38px;backdrop-filter:blur(12px);border:1px solid #ffffffb0}.call-main{height:100%;min-height:0}.call-stage{position:absolute;inset:0;height:100%;width:100%;display:block}.call-stage .remote{inset:0;height:100%;width:100%}.call-stage .local{top:calc(104px + env(safe-area-inset-top));right:12px;height:clamp(130px,20vh,175px);width:clamp(98px,28vw,130px)}.call-dock{display:none}.panel-top{top:calc(61px + env(safe-area-inset-top));left:12px;right:12px}.panel-top #fullscreen{display:none}.panel-top .pill{font-size:9px;padding:7px 9px;background:#ffffffb0}.local-placeholder strong{font-size:10px}.call-stage .local-placeholder{padding:23px 4px 45px;gap:7px}.local-placeholder svg{display:none}.preview-button{font-size:8px;padding:6px;min-height:32px}.flip-camera{width:33px;height:33px;right:7px;bottom:7px;border-radius:9px;padding:7px}.local-top{top:7px}.panel-bottom{bottom:calc(80px + env(safe-area-inset-bottom));left:12px;right:70px}.panel-bottom>span:first-child{display:none}.call-timer{font-size:9px;padding:7px;background:#ffffffa8}.empty-state{padding:240px 24px 150px;justify-content:center}.empty-state h2{font-size:29px}.empty-state p{font-size:12px}.call-info{position:absolute;left:12px;right:65px;bottom:calc(54px + env(safe-area-inset-bottom));z-index:4;background:transparent;padding:0;gap:8px;pointer-events:none}.call-info #notice{display:none;background:#ffffffed;padding:10px 12px;border-radius:11px;color:#4e6681;font-size:10px;box-shadow:0 3px 16px #213a5810;max-height:90px;overflow:auto}.call-info #notice.show-notice{display:block}.mobile-swipe-hint{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;right:70px;z-index:3;display:flex;justify-content:space-between;gap:8px;color:#5d7897;text-shadow:0 1px 8px white;font-size:10px;pointer-events:none}.mobile-swipe-hint .swipe-center-label{opacity:.7;font-size:9px}.remote.has-video~.mobile-swipe-hint{color:white;text-shadow:0 1px 6px #000}.chat-toggle{left:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:42px;height:42px;border:1px solid #ffffffb0;backdrop-filter:blur(15px)}.in-call-chat{left:12px;bottom:calc(64px + env(safe-area-inset-bottom));width:calc(100% - 24px);height:310px;max-height:calc(100% - 135px);border-radius:16px}.chat-open .call-info{display:none}.chat-open .panel-bottom{display:none}.chat-open .empty-state{opacity:.35}.settings-dialog{max-height:calc(var(--visible-height,100dvh) - 28px)}.settings-dialog h2{font-size:22px}}
@media(max-width:640px) and (max-height:740px){.empty-state{padding-top:190px;padding-bottom:130px}.empty-state h2{font-size:25px}.empty-state p{font-size:11px}.call-stage .local{height:130px;width:98px}}@media(max-width:640px) and (max-height:480px){.empty-state{padding:110px 110px 60px 20px}.empty-state h2{font-size:20px}.empty-state p{display:none}.call-stage .local{height:110px;top:95px}.in-call-chat{max-height:calc(100% - 75px);bottom:60px}.in-call-chat header{padding:8px 12px}.mobile-swipe-hint{font-size:9px}}
.call-stage .flip-camera{width:34px;height:34px;padding:8px;border:0;background:#182a4238;color:#fff;border-radius:50%;box-shadow:none;backdrop-filter:blur(5px)}.call-stage .flip-camera svg{width:18px;height:18px}.call-stage .flip-camera::before{content:"";position:absolute;inset:-5px}.call-stage .flip-camera:hover{background:#182a4265}.local-top{justify-content:flex-end}@media(max-width:640px){.call-stage .local{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.call-stage .local.dragging{cursor:grabbing;box-shadow:0 8px 30px #142b4940}.call-stage .local video{pointer-events:none}.call-stage .flip-camera{width:27px;height:27px;padding:6px;right:6px;bottom:6px}.call-stage .flip-camera svg{width:15px;height:15px}.call-stage .flip-camera::before{inset:-8px}}
/* A living lobby; all decorative motion stays behind the conversation. */
.center-brand{position:relative;display:grid;place-items:center;width:290px;height:170px;flex-shrink:0;isolation:isolate;margin:0 0 10px}.center-brand img{width:235px;height:auto;z-index:1;filter:drop-shadow(0 12px 24px #2875c91c);animation:brand-float 6s ease-in-out infinite;pointer-events:none}.brand-orbit{position:absolute;border:1px solid #79a9e230;border-radius:50%;width:290px;height:150px;transform:rotate(-20deg);z-index:-1}.orbit-b{width:245px;height:190px;transform:rotate(22deg);border-color:#78b79b25}.brand-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#4da0ff;box-shadow:0 0 0 6px #4da0ff12;animation:spark-breathe 4s ease-in-out infinite}.spark-one{left:4px;top:70px}.spark-two{right:22px;bottom:24px;background:#5eb394;animation-delay:1.5s}.empty-state{overflow:hidden}.empty-state::before{content:"";position:absolute;inset:10% 3%;background:radial-gradient(ellipse,#c8e4ff65,transparent 65%);z-index:-1;animation:ambient-drift 14s ease-in-out infinite}.empty-state h2{font-size:clamp(26px,2.6vw,38px);margin:13px 0 12px;max-width:500px}.empty-state p{color:#758ba5}.search-beats{height:12px;display:none;align-items:center;justify-content:center;gap:6px;margin:8px 0}.search-beats i{width:6px;height:6px;background:#4a9cfc;border-radius:50%;animation:search-hop 1.2s ease-in-out infinite}.search-beats i:nth-child(2){animation-delay:.15s}.search-beats i:nth-child(3){animation-delay:.3s}[data-call-mood=searching] .search-beats{display:flex}[data-call-mood=searching] .brand-orbit{animation:orbit-breathe 3s ease-in-out infinite}[data-call-mood=searching] #statusDot{background:#4a9cfc;animation:spark-breathe 1.5s ease-in-out infinite}.preview-ready .local{animation:preview-arrive .45s ease-out}.has-video #remoteVideo{animation:video-reveal .5s ease-out}.chat-message{animation:message-arrive .2s ease-out}.in-call-chat:not([hidden]){animation:panel-arrive .22s ease-out}.settings-dialog[open]{animation:panel-arrive .22s ease-out}.icon-button{transition:background .2s,box-shadow .2s}.icon-button:hover{box-shadow:0 3px 14px #2742631a}.devices-off{display:block;width:100%;border:1px solid #e4eaf3;background:#f7f9fd;color:#71839a;font-size:11px;border-radius:10px;padding:12px;margin-top:12px;min-height:42px}.preview-ready .local:has(#localEmpty[hidden]) .local-caption{display:none}@keyframes brand-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes spark-breathe{0%,100%{opacity:.5;box-shadow:0 0 0 4px #4da0ff09}50%{opacity:1;box-shadow:0 0 0 8px #4da0ff13}}@keyframes ambient-drift{0%,100%{transform:translate(-3%,-3%) scale(.95)}50%{transform:translate(3%,3%) scale(1.08)}}@keyframes search-hop{0%,70%,100%{transform:translateY(0);opacity:.4}35%{transform:translateY(-5px);opacity:1}}@keyframes orbit-breathe{0%,100%{opacity:.4}50%{opacity:1}}@keyframes preview-arrive{from{opacity:.4}to{opacity:1}}@keyframes video-reveal{from{opacity:.2}to{opacity:1}}@keyframes message-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes panel-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:640px){.empty-state{padding:210px 22px 90px}.center-brand{width:230px;height:125px;margin-bottom:8px}.center-brand img{width:195px}.brand-orbit{width:230px;height:120px}.orbit-b{width:195px;height:145px}.empty-state h2{font-size:25px;line-height:1.2;margin:15px 0 10px;max-width:320px}.empty-state p{font-size:11px;max-width:260px}.spark-one{left:3px;top:60px}.spark-two{right:5px;bottom:22px}.local-placeholder strong{font-size:10px}}
@media(max-width:640px) and (max-height:740px){.empty-state{padding-top:210px;padding-bottom:65px}.center-brand{height:95px;width:200px}.center-brand img{width:165px}.brand-orbit{width:195px;height:90px}.orbit-b{width:165px;height:120px}.empty-state h2{font-size:22px;margin:9px 0}.empty-state p{font-size:10px}.spark-one{top:30px}.spark-two{bottom:10px}}
@media(max-height:500px) and (orientation:landscape){.center-brand{height:75px;width:175px;margin:0}.center-brand img{width:140px}.brand-orbit{width:170px;height:70px}.orbit-b{width:145px;height:90px}.empty-state{padding:40px 16px}.empty-state h2{font-size:20px;margin:7px 0}.empty-state p{font-size:10px}.search-beats{margin:2px}.spark-one{top:25px}.spark-two{bottom:5px}}
@media(prefers-reduced-motion:reduce){.center-brand img,.brand-spark,.empty-state::before,.search-beats i,[data-call-mood=searching] .brand-orbit,[data-call-mood=searching] #statusDot,.preview-ready .local,.has-video #remoteVideo,.chat-message,.in-call-chat:not([hidden]),.settings-dialog[open]{animation:none!important}}
/* Idle and searching share the same centered logo and message layout. */
.search-copy{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%}
[data-call-mood=searching] #remoteTitle{font-size:clamp(23px,2.3vw,32px);line-height:1.25;margin:0;max-width:100%;text-align:center}
[data-call-mood=searching] .search-beats{display:flex;gap:7px;height:14px;margin:17px auto 12px}
[data-call-mood=searching] .search-beats i{width:7px;height:7px;animation:search-hop 1.2s ease-in-out infinite}
[data-call-mood=searching] .search-beats i:nth-child(2){animation-delay:.18s}
[data-call-mood=searching] .search-beats i:nth-child(3){animation-delay:.36s}
[data-call-mood=searching] #remoteHint{margin:0;max-width:320px}
[data-call-mood=searching] #connectionLabel{visibility:hidden}
@media(max-height:500px){}
@media(prefers-reduced-motion:reduce){[data-call-mood=searching] .search-beats i{animation:none!important}}
[data-call-mood=searching] #remoteTitle{color:#1777f2}
[data-call-mood=searching] .search-beats i{background:#1777f2;box-shadow:0 2px 7px #1777f225}

@media(max-width:640px){.mobile-swipe-hint{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.swipe-next-label{justify-self:start;white-space:nowrap}.swipe-center-label{justify-self:center;white-space:nowrap}.swipe-end-label{justify-self:end;white-space:nowrap}}
/* Status notices share the screen's center, independent of the chat icon. */
.call-info{justify-content:center;text-align:center}
.call-info #notice{max-width:min(520px,100%);margin-inline:auto;text-align:center}
@media(max-width:640px){.call-info{left:12px;right:12px;align-items:center}.call-info #notice{max-width:min(360px,100%)}}
/* Keep elapsed time in the status row, away from transient bottom notices. */
.connection-status{display:flex;align-items:center;gap:8px;min-width:0;max-width:calc(100% - 115px)}
.connection-status>.pill{min-width:0}
.connection-status #statusLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-status .call-timer{flex:0 0 auto;white-space:nowrap;line-height:1.3;padding:9px 10px;margin:0;backdrop-filter:blur(10px)}
@media(max-width:640px){.connection-status{max-width:100%;gap:6px}.connection-status .call-timer{font-size:9px;padding:7px 9px;background:#ffffffb0}}

/* Give gestures a symmetric full-width row, with chat in its own row above. */
@media(max-width:640px){
.mobile-swipe-hint{left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 20px;text-align:center;line-height:1.35}
.mobile-swipe-hint .swipe-center-label{grid-column:1/-1;justify-self:center;font-size:10px;opacity:.8;visibility:visible}
.mobile-swipe-hint .swipe-next-label,.mobile-swipe-hint .swipe-end-label{justify-self:stretch;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
.mobile-swipe-hint .swipe-direction{font-size:10px;opacity:.85}
.mobile-swipe-hint strong{font-size:12px;font-weight:650}
.chat-toggle{right:16px;bottom:calc(94px + env(safe-area-inset-bottom))}
.in-call-chat{bottom:calc(146px + env(safe-area-inset-bottom));max-height:calc(100% - 210px)}
.call-info{bottom:calc(148px + env(safe-area-inset-bottom))}
}
.audio-resume{position:absolute;left:20px;top:70px;z-index:3;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 11px;border:1px solid #ffffff75;border-radius:10px;background:#15243ccb;color:#fff;backdrop-filter:blur(12px);font-size:11px;box-shadow:none}.audio-resume svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.audio-resume{left:12px;top:calc(102px + env(safe-area-inset-top));max-width:calc(100% - 155px);font-size:10px;padding:8px 10px}}
/* Status and timer wrap together; the preview stays below this reserved row. */
.connection-status{flex-wrap:wrap;row-gap:6px;align-items:center}.connection-status>.pill{flex:0 1 auto}.connection-status .call-timer{align-self:center}.mic-state{display:none;padding:7px 9px;font-size:9px;border-radius:8px;background:#fff0f3;color:#a54359;white-space:nowrap}.mic-muted .mic-state{display:inline-block}.setting-toggles button[aria-pressed=true]{background:#fff0f3;color:#a54359;border-color:#edcbd4}
.live-messages{position:absolute;left:18px;bottom:124px;z-index:4;display:flex;flex-direction:column;gap:7px;width:min(340px,calc(50% - 36px));max-height:40%;overflow:hidden;pointer-events:none}.live-message{padding:10px 13px;background:#14263ddb;color:#fff;border:1px solid #ffffff24;border-radius:13px;backdrop-filter:blur(10px);animation:message-arrive .2s ease-out}.live-message>span{display:block;font-size:9px;font-weight:650;color:#95c7ff;margin-bottom:4px}.live-message p{font-size:12px;line-height:1.5;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.chat-open .live-messages{display:none}
@media(max-width:640px){.panel-top{align-items:flex-start}.connection-status{max-width:100%;gap:6px}.connection-status>.pill{max-width:calc(100% - 65px)}.live-messages{left:12px;right:12px;bottom:calc(148px + env(safe-area-inset-bottom));width:auto;max-height:28%}.live-message{padding:9px 12px}.live-message p{font-size:11px}.video-page:has(#notice.show-notice) .live-messages{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.live-message{animation:none}}
.live-messages{justify-content:flex-end}.live-message{flex-shrink:0}
/* All status/audio chips participate in one layout instead of floating over it. */
.panel-top{gap:10px;align-items:flex-start}
.connection-status{flex:1 1 0;max-width:none;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.connection-status>.pill{flex:0 1 auto;max-width:100%;min-width:0}
.connection-status .pill i{flex-shrink:0}
.connection-status .call-timer,.connection-status .mic-state{flex:0 0 auto}
.panel-top #fullscreen{flex:0 0 auto}
.connection-status .audio-resume{position:static;inset:auto;transform:none;max-width:100%;flex:0 0 auto;min-height:30px;padding:6px 9px;margin:0;font-size:10px;white-space:nowrap}
@media(max-width:640px){.connection-status{max-width:100%;gap:6px}.connection-status>.pill{max-width:100%}.connection-status .audio-resume{max-width:100%;min-height:28px;font-size:9px}.connection-status .audio-resume svg{width:14px;height:14px}}

.call-header #settingsOpen{position:relative;width:30px;height:30px;padding:6px;border-radius:9px;background:#ffffffc9;border:1px solid #dbe5f2;box-shadow:none}
.call-header #settingsOpen svg{width:16px;height:16px;stroke-width:1.5}
.call-header #settingsOpen::after{content:"";position:absolute;inset:-7px}
@media(max-width:640px){.call-header #settingsOpen{width:28px;height:28px;padding:5px;border-radius:9px;border-color:#ffffffb0}.call-header #settingsOpen svg{width:15px;height:15px}}
/* Clear overlays, with compact message bubbles instead of a solid chat card. */
.call-header{background:transparent;border-bottom:0;backdrop-filter:none}
.in-call-chat{background:transparent;border:0;box-shadow:none;backdrop-filter:none;border-radius:0;pointer-events:none}
.in-call-chat header{background:transparent;border:0;padding:0 3px 5px;pointer-events:none}
.in-call-chat header strong{font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 5px #142638a0}
.in-call-chat header .icon-button{pointer-events:auto;width:30px;height:30px;border-radius:50%;color:#52647d;background:#f1f3f6d9;font-size:20px}
.in-call-chat #chatMessages{padding:8px 2px;gap:6px;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#ffffff70 transparent}
.in-call-chat #chatEmpty{background:#e9ebefdc;color:#526077;border-radius:18px;padding:9px 14px;font-size:11px}
.chat-message{background:#e9ebefde;color:#1c293b;border-radius:18px 18px 18px 5px;padding:8px 13px;font-size:13px;line-height:1.45;max-width:82%;box-shadow:none}
.chat-message.mine{background:#1683f5e8;color:white;border-radius:18px 18px 5px 18px}
.in-call-chat form{border:0;background:transparent;padding:7px 0 0;gap:7px;pointer-events:auto;align-items:center}
.in-call-chat input{border:1px solid #ffffff70;border-radius:22px;background:#f4f5f8e3;padding:10px 14px;min-height:42px;color:#34435c}
.in-call-chat form button{border-radius:50%;width:34px;height:34px;flex-shrink:0;background:#1683f5;line-height:1}
.live-messages{background:transparent;gap:6px}
.live-message{align-self:flex-start;max-width:82%;width:fit-content;background:#e9ebefde;color:#1c293b;border:0;border-radius:18px 18px 18px 5px;padding:8px 13px;backdrop-filter:none;box-shadow:none}
.live-message>span{display:none}
.live-message p{font-size:13px;line-height:1.45}
.chat-open .empty-state{opacity:1}
@media(max-width:640px){.call-header{background:transparent}.in-call-chat header{padding:0 3px 5px}.live-message{padding:8px 12px}.live-message p{font-size:12px}.in-call-chat{background:transparent;backdrop-filter:none;box-shadow:none}}

/* Ephemeral bubbles stay separate from the saved session history. */
.live-messages{opacity:1;transition:opacity .4s ease,translate .4s ease;translate:0 0}
.live-messages.fading{opacity:0;translate:0 -5px}
.live-message.mine{align-self:flex-end;background:#1683f5e8;color:#fff;border-radius:18px 18px 5px 18px}
.in-call-chat{height:280px}
.in-call-chat header strong{font-size:10px;letter-spacing:.2px}
.in-call-chat form{gap:8px;padding:8px 0 0}
.in-call-chat #chatMessages{mask-image:linear-gradient(transparent,#000 14px);padding-top:16px}
.in-call-chat form button{width:36px;height:36px}
@media(max-width:640px){.in-call-chat{height:260px;max-height:calc(100% - 210px)}}
@media(prefers-reduced-motion:reduce){.live-messages{transition:none}.live-messages.fading{translate:0 0}}

/* Messages live beside Settings, not over the swipe area. */
.call-header #chatToggle{position:relative;inset:auto;transform:none;width:30px;height:30px;padding:6px;border-radius:9px;background:#ffffffc9;border:1px solid #dbe5f2;box-shadow:none;backdrop-filter:none}
.call-header #chatToggle svg{width:16px;height:16px}
.call-header #chatToggle::after{content:"";position:absolute;inset:-7px}
.call-header #chatToggle[aria-expanded=true]{background:#e4f0ff;color:#1777f2;border-color:#bcd9ff}
.call-header #chatToggle #unreadBadge{right:-5px;top:-6px;min-width:16px;font-size:8px}
@media(max-width:640px){.call-header nav{gap:14px}.call-header #chatToggle{width:28px;height:28px;padding:5px;border-color:#ffffffb0}.call-header #chatToggle svg{width:15px;height:15px}}

.call-stage #chatToggle{position:absolute;left:auto;right:18px;bottom:22px;width:36px;height:36px;padding:8px;border-radius:11px;background:#ffffffc9;border:1px solid #ffffffa8;box-shadow:0 3px 12px #18365314;backdrop-filter:blur(8px)}
.call-stage #chatToggle svg{width:18px;height:18px}
.call-stage #chatToggle[aria-expanded=true]{background:#e4f0ff;color:#1777f2}
.call-stage #chatToggle::after{content:"";position:absolute;inset:-4px}
@media(max-width:640px){.call-stage #chatToggle{right:16px;bottom:calc(76px + env(safe-area-inset-bottom))}}
/* Message history opens from the lower-right chat control. */
.in-call-chat{left:auto;right:18px;bottom:70px;width:min(370px,calc(100% - 36px));height:390px;max-height:calc(100% - 130px);gap:8px;overflow:visible;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.in-call-chat header{padding:10px 12px;border:1px solid #ffffff80;border-radius:18px;background:#f6f9fce6;box-shadow:0 3px 14px #1836530b;gap:10px;flex-shrink:0}
.history-heading{display:flex;align-items:center;gap:10px;min-width:0}.history-symbol{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;color:#1777f2;background:#e3efff;flex-shrink:0}.history-symbol svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.in-call-chat header strong{font-size:13px;letter-spacing:0;color:#24354b;text-shadow:none;font-weight:650}.in-call-chat header small{display:block;margin-top:3px;font-size:9px;line-height:1.4;color:#7b8ba1;white-space:nowrap}
.in-call-chat header .icon-button{width:32px;height:32px;padding:8px;background:#e5ebf3b0;color:#657b96}.in-call-chat header .icon-button svg{width:16px;height:16px}
.in-call-chat #chatMessages{padding:10px 3px 5px;gap:7px;mask-image:linear-gradient(transparent,#000 8px);min-height:0;flex:1;scroll-behavior:auto}
.in-call-chat .chat-message{flex-shrink:0;max-width:85%;font-size:13px;line-height:1.5;padding:9px 13px;background:#eef1f5e8;color:#26364c;border-radius:18px 18px 18px 5px;box-shadow:0 2px 8px #0c213409}
.in-call-chat .chat-message.mine{background:#1683f5ed;color:white;border-radius:18px 18px 5px 18px}
.in-call-chat #chatEmpty{max-width:230px;font-size:12px;line-height:1.7;color:#61758e;background:#f4f7fbe0;border-radius:16px;padding:16px 20px}
.in-call-chat form{position:relative;flex-shrink:0;gap:0;padding:0;background:none;border:0}
.in-call-chat input{min-height:49px;padding:12px 53px 12px 17px;border:1px solid #ffffffb8;background:#f6f9fcef;border-radius:26px;font-size:16px;box-shadow:0 3px 15px #17344d0a}
.in-call-chat input::placeholder{color:#9ba8b8}.in-call-chat form button{position:absolute;right:7px;top:7px;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;padding:8px;box-shadow:none}.in-call-chat form button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-jump{position:absolute;bottom:61px;left:50%;transform:translateX(-50%);border:1px solid #d9e8fa;background:#f0f7ff;color:#1777f2;border-radius:20px;padding:8px 12px;font-size:11px;white-space:nowrap;pointer-events:auto;box-shadow:0 3px 15px #15354d20}
@media(max-width:640px){.in-call-chat{left:12px;right:12px;bottom:calc(124px + env(safe-area-inset-bottom));width:auto;height:min(390px,48dvh);max-height:calc(100% - 225px);gap:8px}.in-call-chat header{padding:9px 10px;border-radius:16px}.in-call-chat .chat-message{font-size:12px}.in-call-chat header small{font-size:8px}}
@media(max-height:500px){.in-call-chat{max-height:calc(100% - 130px)}.in-call-chat header{padding:6px 9px}.in-call-chat .history-symbol{width:27px;height:27px}.in-call-chat header small{display:none}.in-call-chat input{min-height:42px;padding-block:8px}.in-call-chat form button{top:4px;width:34px;height:34px}.chat-jump{bottom:50px}}

.chat-toggle:disabled{opacity:.4;cursor:default;box-shadow:none}

/* Reserve the dots' width so the top status stays steady while searching. */
.status-search-dots{display:inline-flex;align-items:center;justify-content:space-between;width:17px;height:12px;margin-left:4px;vertical-align:middle}
.status-search-dots span{display:block;width:3px;height:3px;flex-shrink:0;border-radius:50%;background:#1777f2;font-size:0;animation:status-dot-pulse 1.05s ease-in-out infinite}
.status-search-dots span:nth-child(2){animation-delay:.2s}
.status-search-dots span:nth-child(3){animation-delay:.4s}
@keyframes status-dot-pulse{0%,70%,100%{opacity:.35;transform:translateY(2px)}35%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.status-search-dots span{animation:none}}

/* Compact desktop conversation dock. */
@media(min-width:641px){
  .chat-toggle,#chatClose,.live-messages{display:none!important}
  .call-main>.in-call-chat{position:relative;inset:auto;transform:none;flex:0 0 126px;width:100%;height:auto;max-height:none;display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 36px;gap:6px 14px;padding:10px 20px;border:0;border-top:1px solid #dce7f3;border-radius:0;background:#f7faff;box-shadow:none;overflow:hidden;animation:none}
  .call-main>.in-call-chat header{grid-column:1;grid-row:1 / 3;align-items:flex-start;padding:4px 12px 0 0;border:0;border-right:1px solid #e0e9f3;border-radius:0;background:none;box-shadow:none}
  .call-main>.in-call-chat .history-symbol{display:none}
  .call-main>.in-call-chat header strong{font-size:11px;color:#536b87}
  .call-main>.in-call-chat header small{display:block;font-size:9px;line-height:1.5;margin-top:6px;max-width:78px;color:#8798ad}
  .call-main>.in-call-chat #chatMessages{grid-column:2;grid-row:1;padding:0 4px;gap:4px;scrollbar-width:thin}
  .call-main>.in-call-chat #chatEmpty{background:none;padding:0;max-width:none;margin:auto 0;color:#8495aa;font-size:11px;text-align:left}
  .call-main>.in-call-chat .chat-message{align-self:stretch;max-width:100%;padding:0;background:none;border-radius:0;box-shadow:none;color:#465c76;font-size:12px;line-height:1.55;animation:none}
  .call-main>.in-call-chat .chat-message::before{content:'Partner';display:inline-block;margin-right:9px;color:#687c96;font-size:10px;font-weight:700}
  .call-main>.in-call-chat .chat-message.mine::before{content:'You';color:#1777f2}
  .call-main>.in-call-chat form{grid-column:2;grid-row:2}
  .call-main>.in-call-chat input{min-height:36px;height:36px;background:white;padding:8px 45px 8px 12px;border-radius:10px;box-shadow:none;font-size:13px}
  .call-main>.in-call-chat form button{top:4px;right:4px;width:28px;height:28px;border-radius:7px;padding:6px}
  .call-main>.in-call-chat form button svg{width:16px;height:16px}
  .call-main>.in-call-chat .chat-jump{left:calc(50% + 50px);bottom:51px;padding:4px 10px;font-size:10px}
  .call-dock{grid-template-columns:1fr auto 1fr;padding:8px 20px;gap:12px}
  .call-dock .main-controls{gap:7px}
  .call-dock .main-controls .primary,.call-dock .main-controls .secondary{min-height:36px;height:36px;min-width:72px;border-radius:9px;padding:8px 15px;font-size:12px}
  .call-dock .main-controls .primary{min-width:115px}
  .call-dock .main-controls .primary span{margin-left:22px;font-size:13px}
  .call-dock .device-controls button{min-height:34px;padding:7px 10px;font-size:10px}
  .call-info{min-height:0;padding-block:4px;font-size:10px}
}
@media(min-width:641px) and (max-height:600px){
  .call-main>.in-call-chat{flex-basis:108px;padding-block:7px}
}

/* Desktop chat uses the full dock width without a separate heading column. */
@media(min-width:641px){
  .call-main>.in-call-chat{grid-template-columns:minmax(0,1fr);column-gap:0}
  .call-main>.in-call-chat header{display:none}
  .call-main>.in-call-chat #chatMessages,.call-main>.in-call-chat form{grid-column:1}
  .call-main>.in-call-chat .chat-jump{left:50%}
  .call-dock .device-controls,.call-dock .main-controls,.call-dock .gesture-hint{min-width:0}
}

/* Settings drawer keeps its header fixed while controls scroll independently. */
.settings-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(390px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid #dce7f3;border-radius:0;background:#f8fbff;box-shadow:-12px 0 48px #172e4a24;overflow:hidden}
.settings-dialog[open]{display:flex;flex-direction:column;animation:settings-slide-in .24s ease-out}
.settings-dialog::backdrop{background:#132a4640;backdrop-filter:blur(2px)}
.settings-dialog header{flex-shrink:0;gap:12px;padding:calc(22px + env(safe-area-inset-top)) 22px 18px;border-bottom:1px solid #e2eaf4;background:white}
.settings-dialog h2{font-size:22px;margin:0;letter-spacing:-.6px}
.settings-dialog header .eyebrow{font-size:8px!important;margin-bottom:8px!important}
.settings-dialog #settingsClose{width:36px;height:36px;min-width:36px;border-radius:10px;font-size:24px;padding:0}
.settings-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 22px calc(24px + env(safe-area-inset-bottom));scrollbar-width:thin}
@keyframes settings-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:640px){.settings-dialog{top:var(--visible-top,0px);height:var(--visible-height,100dvh);max-height:var(--visible-height,100dvh);width:min(370px,100%)}}
@media(prefers-reduced-motion:reduce){.settings-dialog[open]{animation:none}}