/* Call chrome inspired by the owner's FaceTime references; keep sensor framing intact. */
.call-contact{display:none}.video-end-icon{display:none}
#call-overlay.video-active:not(.minimized){--call-control-size:clamp(48px,13vw,60px);--call-edge:max(18px,env(safe-area-inset-right));background:#071119;padding:0;isolation:isolate;border-radius:0;overflow:hidden}
#call-overlay.video-active:not(.minimized) .call-video-stage{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:#071119}
#call-overlay.video-active .remote-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;transform:none;border-radius:0;background:transparent}
#call-overlay.video-active.video-fill .remote-video{object-fit:cover}
#call-overlay.video-active:not(.incoming):not(.minimized) .call-contact{position:absolute;z-index:5;left:max(18px,env(safe-area-inset-left));top:calc(env(safe-area-inset-top) + 18px);max-width:calc(100% - 96px);height:48px;padding:5px 13px 5px 5px;display:flex;align-items:center;gap:10px;border-radius:999px;border:1px solid #fff7;color:#fff;background:#ffffff24;box-shadow:inset 0 1px 0 #fff4,0 6px 24px #0002;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);transition:opacity .2s,transform .2s}
#call-overlay .call-contact>.call-avatar{display:flex;width:36px;height:36px;margin:0;border-radius:50%;flex:none;box-shadow:none;background:#ffffff30;overflow:hidden}
#call-overlay .call-contact>.call-avatar img{display:block!important;width:100%!important;height:100%!important;margin:0!important;object-fit:cover}
#call-overlay .call-contact>.call-avatar span{font-size:22px;margin:auto}
#call-overlay .call-contact>span{font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px #0006}
#call-overlay .call-contact>svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;opacity:.75;flex:none}
#call-overlay.video-active:not(.incoming):not(.minimized) .call-minimize{width:42px;height:42px;right:var(--call-edge);top:calc(env(safe-area-inset-top) + 21px);background:#ffffff24;border:1px solid #fff6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:5}
#call-overlay.video-active.remote-visible:not(.incoming):not(.minimized) .call-person{display:none}
#call-overlay.video-active:not(.incoming):not(.minimized) .call-controls{position:absolute;z-index:5;inset:auto var(--call-edge) calc(env(safe-area-inset-bottom) + 24px) auto;display:flex;flex-direction:column;align-items:center;gap:14px;width:var(--call-control-size);max-width:none;padding:0;margin:0;transform:none;direction:ltr;background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .2s,transform .2s}
#call-overlay.video-active .call-controls [data-output]{display:none!important}
#call-overlay:not(.video-active) .call-controls [data-more]{display:none}
#call-overlay.video-active:not(.incoming):not(.minimized) .call-controls button{flex:none;min-width:0;max-width:none;min-height:0;width:var(--call-control-size);height:var(--call-control-size);padding:0;gap:0;border:0;background:transparent;box-shadow:none;border-radius:50%}
#call-overlay.video-active .call-controls [data-camera]{order:0}#call-overlay.video-active .call-controls [data-mute]{order:1}#call-overlay.video-active .call-controls [data-more]{order:2}#call-overlay.video-active .call-controls [data-end]{order:3}
#call-overlay.video-active:not(.incoming) .call-controls .control-icon{position:relative;width:100%;height:100%;border-radius:50%;background:#fff;color:#55c86a;border:1px solid #fff9;box-shadow:0 6px 20px #0002;display:grid;place-items:center}
#call-overlay.video-active .call-controls .control-icon svg{width:27px;height:27px;stroke-width:1.9;fill:none;stroke:currentColor}
#call-overlay.video-active .call-controls [data-mute] .control-icon{color:#f29a3f}
#call-overlay.video-active .call-controls [data-more] .control-icon{background:#ffffff3d;color:#fff;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #fff8,0 6px 20px #0002}
#call-overlay.video-active .call-controls [data-end] .control-icon{background:#ed403b;color:#fff;border-color:#f0645e}
#call-overlay.video-active .call-controls [data-end] .control-icon>svg:not(.video-end-icon){display:none}
#call-overlay.video-active .video-end-icon{display:block;stroke-width:2.6!important}
#call-overlay.video-active .call-controls [aria-pressed=false] .control-icon:after{content:'';position:absolute;width:30px;height:2px;background:currentColor;transform:rotate(-45deg);border:1px solid #fff;box-sizing:content-box}
#call-overlay.video-active .call-controls .control-label{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#call-overlay.video-active:not(.minimized) .self-preview{position:absolute;z-index:4;inset:calc(env(safe-area-inset-top) + 82px) var(--call-edge) auto auto;width:clamp(86px,25vw,116px);height:clamp(116px,21dvh,164px);max-width:36vw;max-height:30dvh;border:1px solid #ffffff8c;border-radius:24px;overflow:hidden;background:#101c25;box-shadow:0 6px 28px #0004;transition:width .22s,height .22s,top .22s,left .22s,right .22s,bottom .22s;touch-action:none}
#call-overlay.video-active:not(.minimized) .self-preview.expanded{width:clamp(118px,35vw,164px);height:clamp(164px,27dvh,230px);max-width:42vw;max-height:34dvh;border-radius:28px}
#call-overlay.video-active .self-preview .local-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:inherit;background:#101c25;transform:none}
#call-overlay.video-active .self-preview .local-video.mirrored{transform:scaleX(-1)}
#call-overlay.video-active:not(.minimized)[data-preview-corner=top-left] .self-preview{left:max(18px,env(safe-area-inset-left));right:auto;top:calc(env(safe-area-inset-top) + 82px);bottom:auto}
#call-overlay.video-active:not(.minimized)[data-preview-corner=top-right] .self-preview{left:auto;right:var(--call-edge);top:calc(env(safe-area-inset-top) + 82px);bottom:auto}
#call-overlay.video-active:not(.minimized)[data-preview-corner=bottom-left] .self-preview{left:max(18px,env(safe-area-inset-left));right:auto;top:auto;bottom:calc(env(safe-area-inset-bottom) + 24px)}
#call-overlay.video-active:not(.minimized)[data-preview-corner=bottom-right] .self-preview{left:auto;right:calc(var(--call-edge) + var(--call-control-size) + 18px);top:auto;bottom:calc(env(safe-area-inset-bottom) + 24px)}
#call-overlay.video-active .self-preview .preview-flip{position:absolute;z-index:2;inset:auto 10px 10px;display:none!important;align-items:center;justify-content:center;gap:5px;min-height:34px;width:calc(100% - 20px);height:34px;min-width:0;padding:5px 9px;border-radius:999px;background:#ffffff2e;border:1px solid #fff8;box-shadow:inset 0 1px 0 #fff5;color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px;font-weight:650}
#call-overlay.video-active .self-preview.expanded .preview-flip:not([hidden]){display:flex!important}
#call-overlay.video-active .preview-flip svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none}
#call-overlay.video-active.controls-hidden:not(.minimized) .call-contact{opacity:0;pointer-events:none;transform:translateY(-5px)}
#call-overlay.video-active.controls-hidden:not(.minimized) .call-controls{opacity:0;pointer-events:none;transform:translateX(8px)}
#call-overlay.video-active .self-preview.dragging{transition:none!important}
#call-overlay.minimized .call-contact{display:none}
@media(orientation:landscape) and (max-height:500px){#call-overlay.video-active:not(.minimized){--call-control-size:44px}#call-overlay.video-active:not(.incoming):not(.minimized) .call-controls{bottom:calc(env(safe-area-inset-bottom) + 12px);gap:8px}#call-overlay.video-active:not(.minimized) .self-preview{top:calc(env(safe-area-inset-top) + 78px);width:90px;height:116px}#call-overlay.video-active:not(.minimized) .self-preview.expanded{width:118px;height:158px;max-height:46dvh}#call-overlay.video-active:not(.minimized)[data-preview-corner=top-right] .self-preview{right:calc(var(--call-edge) + var(--call-control-size) + 16px);top:calc(env(safe-area-inset-top) + 18px)}}
@media(prefers-reduced-motion:reduce){#call-overlay .call-contact,#call-overlay .self-preview,#call-overlay .call-controls{transition:none!important}}
.group-call-symbol{width:32px;height:32px;display:grid;place-items:center}.group-call-symbol svg{width:23px;height:23px}.call-contact small{font-size:11px;color:#fff;white-space:nowrap}
#call-overlay.group-call .group-grid{position:absolute;inset:calc(env(safe-area-inset-top) + 82px) 96px calc(env(safe-area-inset-bottom) + 22px) 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
#call-overlay.group-call .group-grid[data-count="1"]{inset:0;grid-template-columns:1fr}
.group-grid[data-count="0"]{display:none!important}.group-tile{position:relative;min-width:0;min-height:0;overflow:hidden;padding:0;border-radius:18px;background:#173448;display:grid;place-items:center;color:white;border:2px solid transparent}.group-tile[hidden]{display:none!important}.group-tile.speaking{border-color:#57d38a}.group-tile-avatar{font-size:32px;font-weight:650}.remote-group-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b1720}.group-tile-name{position:absolute;bottom:8px;left:8px;right:8px;text-align:start;font-size:11px;background:#07111988;border-radius:10px;padding:5px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-grid[data-count="1"] .group-tile{border-radius:0}.group-grid[data-count="1"] .group-tile-name{left:18px;right:auto;bottom:calc(env(safe-area-inset-bottom) + 24px)}.group-grid[data-focus]:not([data-focus=""]){grid-template-columns:1fr!important;grid-template-rows:1fr!important}
#call-overlay.group-call.video-fill .remote-group-video{object-fit:cover}#call-overlay.group-call.incoming .group-grid{display:none}#call-overlay.group-call.minimized .group-grid,#call-overlay.group-call.minimized .self-preview{display:none}
#call-overlay.group-call:not(.video-active):not(.incoming):not(.minimized) .group-grid{inset:30% 16px 120px}.group-call .group-audio{position:absolute;width:0;height:0;overflow:hidden}
@media(orientation:landscape) and (max-height:500px){#call-overlay.group-call .group-grid:not([data-count="1"]){inset:75px 92px 12px 12px;grid-template-columns:repeat(3,minmax(0,1fr))}}
#call-overlay.group-call .call-controls [data-end] svg{display:block!important}
#call-overlay.group-call.minimized .call-contact{display:flex;align-items:center;gap:10px;width:100%;height:68px;padding:10px 16px;background:transparent;color:inherit;border:0;border-radius:inherit;text-align:start}
#call-overlay.group-call.minimized .call-person{display:none}
#call-overlay.video-active.video-fill .remote-video{object-fit:cover!important}
#call-overlay.group-call .group-tile .remote-group-video{display:block!important;visibility:visible;opacity:1;position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;object-fit:contain;z-index:1;transform:none}
#call-overlay.group-call .group-tile-name{z-index:2}#call-overlay.group-call.video-fill .group-tile .remote-group-video{object-fit:cover}
