/* Full camera frames in spotlight, group grid and stacked presentation views.
   This stylesheet follows guest/experience/theme CSS; avatars are unaffected. */
body.cl-guest-v2 .cl-call .cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant) video{
 width:100%;height:100%;object-fit:contain!important;object-position:center!important;
}
body.cl-guest-v2 .cl-call .ce-screen>video{
 object-fit:contain!important;object-position:center!important;
}
/* Explicit placements override the legacy last-tile-spans-two group rule. */
body.cl-guest-v2 .cl-call.cl-multi-call[data-layout=grid][data-adaptive-cameras]:not(.cl-presenting) .cl-video-grid{
 display:grid!important;grid-template-columns:var(--camera-columns)!important;grid-template-rows:repeat(var(--camera-rows),var(--camera-row-size,minmax(0,1fr)))!important;grid-auto-rows:minmax(0,1fr);justify-content:var(--camera-justify,start)!important;align-content:var(--camera-align,stretch)!important;
}
body.cl-guest-v2 .cl-call.cl-multi-call[data-layout=grid][data-adaptive-cameras]:not(.cl-presenting) .cl-video-grid>article{
 grid-column:var(--camera-column)!important;grid-row:var(--camera-row)!important;position:relative!important;inset:auto!important;width:var(--camera-width,100%)!important;height:100%!important;min-width:0;min-height:0;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;justify-self:center;
}
/* One dark surface, including letterboxing and disabled camera slots. */
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid,
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant),
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant) video{background:#302f3b!important}
/* The self tile reserves its ratio even when there is no decoded frame. */
body.cl-guest-v2 .cl-call[data-layout=spotlight]:not(.cl-presenting) .cl-video-grid .cl-local:not(.cl-spotlight-focus){aspect-ratio:var(--ce-camera-aspect,16/9)!important;width:clamp(144px,var(--self-width,22%),360px)!important;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden!important;background:#30303e!important;box-sizing:content-box!important;border:0!important}
body.cl-guest-v2 .cl-call[data-layout=spotlight]:not(.cl-presenting) .cl-video-grid .cl-local:not(.cl-spotlight-focus)>video{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;aspect-ratio:auto!important}
body.cl-guest-v2 .cl-call .cl-video-grid .cl-local:not(.ce-pip-placeholder)>.cl-tile-tag{position:absolute!important;inset:8px auto auto 10px!important;margin:0!important;max-width:calc(100% - 58px);padding:0!important;z-index:4;line-height:1.3;background:transparent!important;backdrop-filter:none!important}
/* A Class pair is not an SFU group. Keep the same full primary + self PiP
   before/during/after waiting's fade, independent of roster focus classes.
   User Grid, viewers and real groups (count >2 OR an extra camera) stay owned
   by their existing layout. No participant, stream or camera node is added. */
body.cl-guest-v2 .cl-call[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid{
 display:block!important;position:relative!important;grid-template-columns:none!important;grid-template-rows:none!important;gap:0!important;padding:0!important;
}
body.cl-guest-v2 .cl-call[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-remote{
 display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;grid-column:auto!important;grid-row:auto!important;
}
body.cl-guest-v2 .cl-call[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-local{
 position:absolute!important;inset:14px 14px auto auto!important;width:clamp(104px,var(--self-width,22%),320px)!important;height:auto!important;min-height:0!important;max-width:40%!important;max-height:42%!important;aspect-ratio:var(--ce-camera-aspect,16/9)!important;z-index:6;grid-column:auto!important;grid-row:auto!important;
}
body.cl-guest-v2 .cl-call[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-local>video{
 position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;
}
body.cl-guest-v2 .cl-call.cl-self-left[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-local{left:14px!important;right:auto!important}
body.cl-guest-v2 .cl-call[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-grid-divider{display:none!important}
/* An SFU pair's actual peer stays in its original participant article. The
   empty #remote is only a transparent waiting-scene carrier until fade ends. */
body.cl-guest-v2 .cl-call.cl-call[data-academy-classroom=true][data-academy-pair=participant][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-room-participant{
 display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;grid-column:auto!important;grid-row:auto!important;
}
body.cl-guest-v2 .cl-call.cl-call[data-academy-classroom=true][data-academy-pair=participant][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-remote{display:none!important}
body.cl-guest-v2 .cl-call.cl-call[data-academy-classroom=true][data-academy-pair=participant][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-remote:has(.cl-academy-waiting:not([hidden])){display:block!important;z-index:3;background:transparent!important;box-shadow:none!important;pointer-events:none}
body.cl-guest-v2 .cl-call.cl-call[data-academy-classroom=true][data-academy-pair=participant][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-remote:has(.cl-academy-waiting:not([hidden]))>:not(.cl-academy-waiting){visibility:hidden!important}
/* Only an explicit user camera selection swaps the pair. Roster focus
   bookkeeping alone never flips which side is the main camera. */
body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>.cl-local{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;z-index:1}
body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-academy-classroom=true][data-academy-pair][data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid>:is(.cl-remote,.cl-room-participant){inset:14px 14px auto auto!important;width:clamp(104px,var(--self-width,22%),320px)!important;height:auto!important;max-width:40%!important;max-height:42%!important;aspect-ratio:var(--ce-camera-aspect,16/9)!important;z-index:6}
body.cl-guest-v2 .cl-call .cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant){min-width:0;max-width:100%;box-sizing:border-box}
body.cl-guest-v2 .cl-call .cl-video-grid .ce-camera-disabled video{visibility:hidden!important}
body.cl-guest-v2 .cl-call .cl-video-grid .ce-camera-disabled:not(.ce-pip-placeholder) :is(#peer-label,.cl-tile-tag,.cl-room-participant>span){color:#fff!important;text-shadow:0 1px 3px #0008!important}
body.cl-guest-v2 .cl-call .cl-video-grid .cl-connected-profile-badge{cursor:zoom-in;pointer-events:auto}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid .cl-connected-profile-badge[hidden]{display:none!important}
body.cl-guest-v2 .cl-call .cl-video-grid .cl-tile-tag:has(.cl-connected-profile-badge){pointer-events:auto}
body.cl-guest-v2 .cl-call .cl-video-grid :is(.cl-connected-profile-name,#peer-label,.cl-local .cl-tile-tag,.cl-room-participant>span){color:#fff!important;font-weight:700;text-shadow:0 1px 3px #0008!important}
body.cl-guest-v2 .cl-call .cl-video-grid .ce-camera-disabled:not(.ce-pip-placeholder) :is(.cl-connected-profile-name,#peer-label,.cl-tile-tag,.cl-room-participant>span),
body.cl-guest-v2 .cl-call:not(.ce-workspace-open) .cl-video-grid .ce-pip-placeholder :is(.cl-connected-profile-name,#peer-label,.cl-tile-tag,.cl-room-participant>span){color:#fff!important;font-weight:700;text-shadow:0 1px 3px #0008!important}
body.cl-guest-v2 .cl-call.ce-workspace-open .cl-video-grid .ce-pip-placeholder :is(.cl-connected-profile-name,#peer-label,.cl-tile-tag,.cl-room-participant>span){color:#fff!important}
body.cl-guest-v2 .cl-call .cl-video-grid .cl-connected-profile-badge:focus-visible{outline:3px solid #d8a82e;outline-offset:4px;border-radius:4px}
.ce-camera-badge-viewer{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(1100px,94vw);max-width:94vw;max-height:90dvh;padding:44px 16px 20px;border:0;background:transparent;color:#fff;overflow:visible;outline:none}
.ce-camera-badge-viewer[hidden],.ce-camera-badge-viewer:not([open]){display:none}
.ce-camera-badge-viewer::backdrop{background:#15203270;backdrop-filter:blur(7px)}
.ce-camera-badge-art{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain;filter:drop-shadow(0 12px 30px #0005)}
.ce-camera-badge-close{position:absolute;right:16px;top:0;display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff70;border-radius:50%;background:#273449ba;color:#fff;font:30px/1 sans-serif;cursor:pointer;transition:transform .15s,background .15s}
.ce-camera-badge-close:hover{background:#ae3145;transform:rotate(90deg)}
.ce-camera-badge-close:focus-visible{outline:3px solid #f2bd35;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ce-camera-badge-close{transition:none}}
/* The narrow landscape self preview must not put its badge under the tools. */
@media(max-height:500px) and (orientation:landscape){
 body.cl-guest-v2 .cl-call:not(.ce-workspace-open) .cl-video-grid .cl-local .cl-tile-tag:has(.cl-connected-profile-badge){top:calc(var(--ce-camera-tool-inset,8px) + var(--ce-camera-tool-size,32px) + var(--ce-camera-tool-size,32px) + 16px)!important;left:8px!important;max-width:calc(100% - 16px);display:flex;flex-wrap:wrap;align-items:center;gap:4px}
 body.cl-guest-v2 .cl-call:not(.ce-workspace-open) .cl-video-grid .cl-local .cl-connected-profile-badge{max-width:100%;height:auto}
}
/* Dark camera stage; the bottom call toolbar remains a separate white surface. */
body.cl-guest-v2 .cl-call.cl-call,
body.cl-guest-v2 .cl-call.cl-call #empty-stage,
body.cl-guest-v2 .cl-call.cl-call .cl-grid-divider,
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid,
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant),
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant) video{background:#30303e!important}
body.cl-guest-v2 .cl-call.cl-call .cl-call-actions{background:#fff!important}
/* The presentation rail is a layout box, not a surface: camera tiles animate
   outside its final bounds. Avoid an empty dark slab and square corners behind
   rounded tiles; camera/video and stage surfaces stay dark. */
html body.cl-guest-v2 .cl-call.cl-call.cl-presenting .cl-video-grid.cl-video-grid{background:transparent!important}
body.cl-guest-v2 .cl-call.cl-call .cl-grid-divider{color:#30303e!important}
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid :is(.cl-local,.cl-remote,.cl-room-participant){border:0!important;box-shadow:0 3px 10px #0002!important;overflow:hidden;border-radius:12px;background-clip:padding-box}
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid :is(.cl-connected-profile-name,#peer-label,.cl-tile-tag,.cl-room-participant>span){color:#fff!important;text-shadow:0 1px 3px #0008!important}
body.cl-guest-v2 .cl-call.cl-call .cl-video-grid article.ce-pip-placeholder::before{background:#30303e!important}
/* One anchored volume control. Expanding its slider cannot move the speaker. */
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact{position:absolute;inset:auto 9px 9px auto!important;margin:0;padding:0!important;width:32px!important;height:32px;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible;display:block!important}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-key{display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;padding:5px;border-radius:9px!important;border:1.5px solid #252b33!important;background:#fff9e9!important;box-shadow:0 2px 0 #252b33!important}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-key svg{width:21px;height:21px;display:block;margin:0;pointer-events:none}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-key:hover{background:#ffe59a!important}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-key:active{box-shadow:none!important;transform:none!important}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume{position:absolute;inset:auto 38px 0 auto;height:32px;box-sizing:border-box;border:1px solid #302f3b;border-radius:9px;background:#fff9e9;padding:4px 8px!important;box-shadow:0 2px 6px #0002}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact:not([open])>.ce-volume{display:none!important}
/* A short vertical slider fits even the narrow presentation rail. Its speaker
   stays anchored and the popup remains inside the rounded camera surface. */
body.cl-guest-v2 .cl-call.cl-presenting .ce-volume-pop.ce-volume-compact>.ce-volume{inset:auto 0 38px auto;width:32px;height:clamp(46px,8vh,90px);padding:6px!important}
body.cl-guest-v2 .cl-call.cl-presenting .ce-volume-pop.ce-volume-compact>.ce-volume input{writing-mode:vertical-lr;direction:rtl;width:18px!important;height:100%;min-height:0;margin:0}
/* Top-layer popover prevents a narrow camera's rounded mask clipping volume. */
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-floating:popover-open{position:fixed!important;inset:var(--volume-top) auto auto var(--volume-left)!important;width:var(--volume-width)!important;height:32px!important;margin:0!important;padding:5px 8px!important;display:flex!important}
body.cl-guest-v2 .cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-floating:popover-open input{writing-mode:horizontal-tb;direction:ltr;width:100%!important;height:20px;min-width:0}

/* QA62 camera-only controls. Specificity keeps the later shared theme from
   restoring its large buttons/horizontal slider; the call footer is untouched. */
html body.cl-guest-v2 .cl-call.cl-call{--ce-control-size:28px;--ce-control-inset:8px}
html body.cl-guest-v2 .cl-call.cl-call:is(.cl-presenting,.ce-workspace-open) .cl-video-grid{--ce-control-size:24px;--ce-control-inset:6px}
html body.cl-guest-v2 .cl-call.cl-call :is(.cl-self-tools,.ce-camera-tools){
 position:absolute;top:var(--ce-control-inset)!important;right:var(--ce-control-inset)!important;bottom:auto;left:auto;display:flex!important;flex-direction:row!important;align-items:center;gap:4px!important;opacity:1;pointer-events:auto;z-index:26;
}
html body.cl-guest-v2 .cl-call.cl-call.cl-call.cl-call :is(#layout-toggle,.ce-camera-pip,.ce-volume-key){
 display:grid;place-items:center;box-sizing:border-box;width:var(--ce-control-size)!important;height:var(--ce-control-size)!important;min-width:var(--ce-control-size)!important;min-height:var(--ce-control-size)!important;padding:4px!important;margin:0!important;border:1.5px solid #252b33!important;border-radius:8px 7px 9px 7px!important;background:#fff9e9!important;color:#252b33!important;box-shadow:0 2px 0 #252b33!important;transform:none!important;scale:1!important;
}
html body.cl-guest-v2 .cl-call.cl-call.cl-call.cl-call :is(#layout-toggle,.ce-camera-pip,.ce-volume-key) svg{width:100%!important;height:100%!important;display:block;margin:0;pointer-events:none}
html body.cl-guest-v2 .cl-call.cl-call :is(#layout-toggle,.ce-camera-pip):not(:disabled):hover,
html body.cl-guest-v2 .cl-call.cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-key:hover{background:#ffe59a!important}
html body.cl-guest-v2 .cl-call.cl-call :is(#layout-toggle,.ce-camera-pip):focus-visible,
html body.cl-guest-v2 .cl-call.cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-key:focus-visible{outline:2px solid #ffda70;outline-offset:2px}
html body.cl-guest-v2 .cl-call.cl-call :is(#layout-toggle,.ce-camera-pip)[hidden],
html body.cl-guest-v2 .cl-call.cl-call:is(.cl-presenting,.ce-workspace-open) #layout-toggle{display:none!important}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid .ce-volume-pop.ce-volume-compact{width:var(--ce-control-size)!important;height:var(--ce-control-size)!important}
html body.cl-guest-v2 .cl-call.cl-call:is(.cl-presenting,.ce-workspace-open,.cl-self-main) .cl-video-grid.cl-video-grid .ce-volume-pop.ce-volume-compact{inset:auto var(--ce-control-inset) var(--ce-control-inset) auto!important}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid .cl-connection-quality{inset:auto auto var(--ce-control-inset) var(--ce-control-inset)!important;width:20px;height:18px;padding:3px;gap:1px;border-radius:5px}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid .cl-connection-quality i{width:2.5px}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid .cl-connection-quality i:nth-child(4){height:12px}
html body.cl-guest-v2 .cl-call.cl-call .ce-volume-pop.ce-volume-compact>.ce-volume-floating:popover-open{height:var(--volume-height,32px)!important}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid .ce-volume-pop.ce-volume-compact>.ce-volume[data-orientation=vertical]{
 inset:auto 0 calc(var(--ce-control-size) + 4px) auto;width:24px;height:90px;padding:5px 3px!important;transform-origin:center bottom;
}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid .ce-volume-pop.ce-volume-compact>.ce-volume[data-orientation=vertical] input{writing-mode:vertical-lr!important;direction:rtl!important;width:16px!important;height:100%!important;min-height:0;min-width:0;margin:0}
/* Every participant uses the same top-left anchor as Tú. Long names decrease
   progressively after ten characters, without changing the identity text. */
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid article:not(.ce-pip-placeholder)>:is(#peer-label,.cl-tile-tag,span){
 position:absolute!important;inset:8px auto auto 10px!important;margin:0!important;padding:0!important;transform:none!important;max-width:calc(100% - 48px)!important;width:auto!important;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:transparent!important;line-height:1.3;font-size:calc(14px - var(--ce-name-shrink,0px))!important;
}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid article:not(.ce-pip-placeholder) .cl-connected-profile-name{font-size:calc(14px - var(--ce-name-shrink,0px))!important;line-height:1.3;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Keep main-camera buttons beside the inset, regardless of who is main. */
html body.cl-guest-v2 .cl-call.cl-call>:is(.cl-self-tools,.ce-camera-tools)[data-camera-anchor=peer-outside]{left:var(--ce-peer-tools-x)!important;top:var(--ce-peer-tools-y)!important;right:auto!important;bottom:auto!important;z-index:28;--ce-control-size:28px}
/* An own-main peer badge belongs below its frame, never over the face. Keep
   the original badge node so its existing zoom and accessibility still work. */
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid.cl-video-grid>:is(.cl-remote,.cl-room-participant):not(.ce-pip-placeholder){overflow:visible!important}
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid.cl-video-grid>:is(.cl-remote,.cl-room-participant):not(.ce-pip-placeholder)>video{border-radius:inherit}
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid.cl-video-grid>:is(.cl-remote,.cl-room-participant):not(.ce-pip-placeholder)>:is(#peer-label,.cl-tile-tag,span):has(.cl-connected-profile-badge){position:static!important;display:contents!important}
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid.cl-video-grid>:is(.cl-remote,.cl-room-participant):not(.ce-pip-placeholder)>:is(#peer-label,.cl-tile-tag,span):has(.cl-connected-profile-badge)>.cl-connected-profile-name{position:absolute;top:8px;left:10px;max-width:calc(100% - 48px)}
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid.cl-video-grid>:is(.cl-remote,.cl-room-participant):not(.ce-pip-placeholder) .cl-connected-profile-badge{position:absolute!important;inset:calc(100% + 6px) 0 auto auto!important;width:min(160px,100%)!important;max-width:100%!important;height:auto!important;max-height:54px;object-fit:contain;transform:none!important;margin:0!important}
/* Presentation-owned fullscreen joins the existing rules action in its footer.
   Preserve a 44px tap target while matching the compact 28px rules glyph. */
html body.cl-guest-v2 .cl-call .cl-a-game-footer #fullscreen-toggle.ce-activity-fullscreen{position:static!important;inset:auto!important;display:grid!important;place-items:center;align-self:center;flex:0 0 44px;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:8px!important;margin:0 0 0 auto!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;color:#252b33}
html body.cl-guest-v2 .cl-call .cl-a-game-footer #fullscreen-toggle.ce-activity-fullscreen svg{display:block;width:28px!important;height:28px!important;margin:0}

/* QA69: video fills the self frame; identity and connection remain overlays.
   Remove reserved chrome space, without cropping or moving the media node. */
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid>.cl-local{
 padding:0!important;border:0!important;box-sizing:border-box!important;
}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid>.cl-local>video{
 position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border:0!important;
}
/* The grid already ends above the call toolbar. Do not subtract it again. */
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.cl-multi-call) .cl-video-grid.cl-video-grid>.cl-local{inset:0!important;height:100%!important}
/* Hover belongs to each tools region, including the portalled spotlight tools.
   Opacity keeps keyboard focus and a touch-sized reveal region available. */
html body.cl-guest-v2 .cl-call.cl-call :is(.cl-self-tools,.ce-camera-tools){opacity:0!important;pointer-events:auto!important;transition:opacity .15s}
html body.cl-guest-v2 .cl-call.cl-call :is(.cl-self-tools,.ce-camera-tools):is(:hover,:focus-within){opacity:1!important}
/* QA78: reveal from the entire owning camera, also when its tools are portalled
   beside the spotlight inset. Preserve the existing opacity transition. */
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid>:is(.cl-local,.cl-remote,.cl-room-participant):is(:hover,:focus-within) :is(.cl-self-tools,.ce-camera-tools),
html body.cl-guest-v2 .cl-call.cl-call:has(.cl-local:is(:hover,:focus-within))>.cl-self-tools[data-camera-anchor=peer-outside],
html body.cl-guest-v2 .cl-call.cl-call:has(:is(.cl-remote,.cl-room-participant):is(:hover,:focus-within))>.ce-camera-tools[data-camera-anchor=peer-outside]{opacity:1!important}
@media(hover:none){html body.cl-guest-v2 .cl-call.cl-call :is(.cl-self-tools,.ce-camera-tools){opacity:1!important}}
@media(prefers-reduced-motion:reduce){html body.cl-guest-v2 .cl-call.cl-call :is(.cl-self-tools,.ce-camera-tools){transition:none}}

/* Off/paused uses the exact QA69 camera stage gray, independent of home chrome.
   Container sizing also fits the short board/activity camera rail. */
html body.cl-guest-v2 .cl-call .cl-camera-placeholder{container-type:size;background:#30303e!important;font-family:var(--sketch-font-title,system-ui)!important}
.cl-camera-placeholder-icon{display:block;flex:0 1 auto;width:min(40cqi,112px);height:min(54cqb,88px);min-height:0}
.cl-camera-placeholder-icon svg{display:block;width:100%;height:100%;overflow:visible}
.cl-camera-placeholder-label{flex:none;max-width:100%;font-size:clamp(10px,3.3cqi,14px);line-height:1.25;text-wrap:balance}
.cl-camera-placeholder .cl-camera-status-paused{display:none}
[data-camera-state=paused]>.cl-camera-placeholder .cl-camera-status-off{display:none}
[data-camera-state=paused]>.cl-camera-placeholder .cl-camera-status-paused{display:block}
/* The short rail has room for the drawing between name and connection/tools.
   Keep the translated status available to assistive technology without overlap. */
@container (max-height:110px){
 .cl-camera-placeholder-icon{height:min(75cqb,56px);margin-top:10px}
 .cl-camera-placeholder-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Names follow the badge's painted left edge; absent/hidden badges retain 10px. */
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid article:not(.ce-pip-placeholder)>:is(#peer-label,.cl-tile-tag,span)>.cl-connected-profile-name{margin-left:var(--ce-name-badge-margin,0px);max-width:calc(100% - var(--ce-name-badge-margin,0px))}
html body.cl-guest-v2 .cl-call.cl-call.cl-self-main[data-layout=spotlight]:not(.cl-presenting):not(.ce-workspace-open) .cl-video-grid.cl-video-grid>:is(.cl-remote,.cl-room-participant):not(.ce-pip-placeholder)>:is(#peer-label,.cl-tile-tag,span):has(.cl-connected-profile-badge)>.cl-connected-profile-name{left:var(--ce-name-badge-left,10px);margin-left:0;max-width:calc(min(160px,100%) - 14px)}

/* One compact size and right edge for the camera volume/fullscreen stack. */
html body.cl-guest-v2 .cl-call.cl-call:is(.cl-presenting,.ce-workspace-open){--ce-control-size:24px;--ce-control-inset:6px}
html body.cl-guest-v2 .cl-call.cl-call.cl-call.cl-call #fullscreen-toggle{
 box-sizing:border-box;display:grid!important;place-items:center;width:var(--ce-control-size)!important;height:var(--ce-control-size)!important;min-width:var(--ce-control-size)!important;min-height:var(--ce-control-size)!important;padding:4px!important;margin:0!important;border:1.5px solid #252b33!important;border-radius:8px 7px 9px 7px!important;background:#fff9e9!important;box-shadow:0 2px 0 #252b33!important;
}
html body.cl-guest-v2 .cl-call.cl-call.cl-call.cl-call #fullscreen-toggle>svg{width:100%!important;height:100%!important}
html body.cl-guest-v2 .cl-call.cl-call.cl-call.cl-call #fullscreen-toggle[hidden]{display:none!important}
html body.cl-guest-v2 .cl-call.cl-call.cl-call.cl-call .cl-a-game-footer #fullscreen-toggle{flex:0 0 var(--ce-control-size)!important;margin-left:auto!important}
html body.cl-guest-v2 .cl-call.cl-call.cl-call>.cl-call-view-tools{width:var(--ce-control-size)!important;height:var(--ce-control-size)!important;right:var(--ce-control-inset)!important;bottom:calc(var(--cl-actions,98px) + var(--ce-control-inset))!important}
html body.cl-guest-v2 .cl-call.cl-call .cl-video-grid.cl-video-grid .ce-volume-pop.ce-volume-compact{right:var(--ce-control-inset)!important}
html body.cl-guest-v2 .cl-call.cl-call:not(.cl-presenting):not(.ce-workspace-open):not(.cl-self-main) .cl-video-grid>.cl-remote .ce-volume-pop.ce-volume-compact{bottom:calc(var(--ce-control-inset) + var(--ce-control-size) + 8px)!important}