/* Shared personal call controls, used by Academy members and link guests. */
.call-audio-playback { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:10px; padding:12px; border:1px solid var(--ui-control-border); border-radius:8px; background:var(--ui-surface-alt); color:var(--ui-text); }
.call-audio-playback[hidden] { display:none; }
.call-audio-playback span { flex:1 1 220px; min-width:0; font-size:14px; line-height:1.5; }
.call-audio-playback button { min-height:44px; padding:10px 14px; border:1px solid var(--ui-accent); border-radius:8px; background:var(--ui-accent-soft); color:var(--ui-text); font:inherit; font-weight:600; cursor:pointer; }
.call-audio-playback button:focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
.call-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.classroom-video-controls .call-leave { width:auto; grid-auto-flow:column; gap:6px; padding:0 10px; margin-left:8px; font-size:12px; }
.classroom-video-controls button { width:auto; min-height:48px; height:auto; padding:7px 10px; gap:4px; font-size:12px; }
.classroom-video-controls .call-control-label { font-size:11px; line-height:1.2; }
.classroom-fullscreen:is(.classroom-video-only,.classroom-webinar-only) .classroom-video-panel-header { cursor:default; touch-action:auto; }
.call-view-toolbar { position:relative; z-index:12; display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--ui-border); background:var(--ui-surface); }
.call-view-modes { display:flex; gap:3px; }
.call-layout-label { color:var(--ui-text-muted); font-size:12px; }
.call-view-popover .call-view-modes { margin-bottom:12px; }
.call-view-toolbar button,.call-view-settings summary { min-height:36px; padding:7px 10px; border:1px solid var(--ui-border); border-radius:7px; color:var(--ui-text-muted); background:var(--ui-input-bg); font:inherit; font-size:12px; cursor:pointer; }
.call-view-toolbar [aria-pressed="true"] { color:var(--ui-accent); border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.call-view-settings { margin-left:auto; }
.call-view-toolbar > .webinar-tools { padding:0; margin:0; border:0; background:transparent; }
.call-view-toolbar.is-in-panel-header { flex:1 1 auto; min-width:0; padding:0; border:0; background:transparent; }
.call-view-toolbar.is-in-panel-header .call-layout-label { display:none; }
.call-view-toolbar.is-in-panel-header .call-view-settings { margin-left:0; }
.call-view-settings summary { list-style:none; }
.call-view-settings summary::-webkit-details-marker { display:none; }
.call-view-popover { position:absolute; right:8px; top:calc(100% + 4px); width:min(280px,calc(100vw - 48px)); padding:12px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); box-shadow:var(--ui-shadow-float); }
.call-view-popover p { margin:0 0 10px; color:var(--ui-text-muted); font-size:12px; }
.call-view-popover label { display:grid; gap:6px; margin:12px 0; color:var(--ui-text); font-size:13px; }
.call-view-popover input { width:100%; min-height:36px; margin:0; accent-color:var(--ui-accent); }
.call-view-toolbar :focus-visible,.call-layout button:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
.call-layout.call-layout.call-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:10px; height: min(52dvh,430px); min-height:0; overflow:hidden; }
.classroom-fullscreen.classroom-video-only .call-layout.call-layout,.classroom-fullscreen.classroom-webinar-only .call-layout.call-layout { height:0; flex:1 1 auto; }
.guest-call-grid.call-layout { height:clamp(280px,62dvh,720px); max-height:none; }
.call-layout > [hidden],.call-view-toolbar [hidden] { display:none !important; }
.call-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--call-tile-size)),1fr)); gap:10px; align-content:start; overflow:auto; min-height:0; }
.call-layout.call-layout[data-call-view="focus"] { grid-template-columns:minmax(0,1fr) minmax(180px,var(--call-tile-size)); }
.call-stage { min-width:0; min-height:0; display:grid; }
.call-filmstrip { display:flex; flex-direction:column; gap:10px; min-height:0; min-width:0; overflow:auto; }
.call-layout .classroom-video-tile,.call-layout .guest-call-tile { position:relative; inset:auto; width:auto; min-width:0; min-height:0; height:auto; aspect-ratio:16 / 10; grid-column:auto; flex:0 0 auto; border-radius:8px; }
.call-layout .call-stage > article { width:100%; height:100%; aspect-ratio:auto; }
.call-layout .call-stage > article:not(.is-screen-share) video { object-fit:cover !important; }
.call-layout.call-layout video,.call-layout .classroom-video-placeholder,.call-layout .guest-call-placeholder { width:100%; height:100%; min-height:0; object-fit:contain; }
.call-layout .is-screen-share { aspect-ratio:16 / 9; }
.call-layout .is-active-speaker { border-color:var(--ui-success-border); box-shadow:inset 0 0 0 1px var(--ui-success-border); }
.call-layout .is-pinned { border-color:var(--ui-accent); }
.call-layout .classroom-video-tile-label { padding:5px 7px; border-radius:4px; background:var(--ui-media-overlay); }
.call-layout .classroom-video-tile-actions,.call-layout .guest-call-tile-actions { top:6px; left:6px; right:6px; flex-wrap:wrap; gap:4px; opacity:0; }
.call-layout article:hover .classroom-video-tile-actions,.call-layout article:focus-within .classroom-video-tile-actions,.call-layout article:hover .guest-call-tile-actions,.call-layout article:focus-within .guest-call-tile-actions { opacity:1; }
.call-layout .classroom-video-tile-action,.call-layout .guest-call-tile-action { position:relative; display:grid; place-items:center; min-width:36px; width:36px; height:36px; padding:0; border:1px solid var(--ui-border); border-radius:7px; background:var(--ui-media-overlay); color:var(--ui-on-media); cursor:pointer; }
.call-layout .classroom-video-tile-action span { display:none; }
.call-layout :is(.classroom-video-tile-action,.guest-call-tile-action)::after { content:attr(data-tooltip); position:absolute; top:42px; left:0; z-index:8; width:max-content; max-width:190px; padding:5px 7px; pointer-events:none; opacity:0; transform:translateY(-3px); border:1px solid color-mix(in srgb,var(--ui-on-media) 20%,transparent); border-radius:6px; color:var(--ui-on-media); background:var(--ui-media-overlay); font-size:12px; font-weight:600; line-height:1.25; transition:opacity .14s ease,transform .14s ease; }
.call-layout :is(.classroom-video-tile-action,.guest-call-tile-action):is(:hover,:focus-visible) { border-color:var(--ui-accent); color:var(--ui-accent); background:color-mix(in srgb,var(--ui-media-overlay) 82%,var(--ui-accent)); }
.call-layout :is(.classroom-video-tile-action,.guest-call-tile-action):is(:hover,:focus-visible)::after { opacity:1; transform:none; }
.call-layout article:hover :is(.classroom-video-tile-indicators,.guest-call-tile-indicators),.call-layout article:focus-within :is(.classroom-video-tile-indicators,.guest-call-tile-indicators) { top:48px; }
.call-layout > :is(.classroom-video-restore-tiles,.guest-call-restore-tiles) { grid-column:1 / -1; grid-row:2; }
.call-layout[data-call-position="bottom"][data-call-view="focus"],.call-layout[data-call-compact="true"][data-call-view="focus"] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 130px; }
.call-layout[data-call-position="bottom"] .call-filmstrip,.call-layout[data-call-compact="true"] .call-filmstrip { flex-direction:row; }
.call-layout[data-call-position="bottom"] .call-filmstrip > article,.call-layout[data-call-compact="true"] .call-filmstrip > article { width:var(--call-tile-size); height:100%; }
.call-layout:is([data-call-position="bottom"],[data-call-compact="true"]) > :is(.classroom-video-restore-tiles,.guest-call-restore-tiles) { grid-row:3; }
.call-layout.call-solo[data-call-view="focus"] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.call-layout.call-solo .call-gallery { grid-template-columns:minmax(0,1fr); }
.call-layout .call-gallery[data-fit="true"] { grid-template-columns:repeat(var(--call-gallery-columns),var(--call-gallery-width)); grid-template-rows:repeat(var(--call-gallery-rows),var(--call-gallery-height)); place-content:center; overflow:hidden; }
.call-layout .call-gallery[data-fit="true"] > article { width:100%; height:100%; aspect-ratio:auto; }
.call-layout [data-tile-key][hidden] { display:none !important; }
.call-layout .call-filmstrip > article { width:var(--call-focus-camera-width,var(--call-tile-size)); height:auto; aspect-ratio:16 / 9; align-self:center; }
.call-layout.call-layout[data-call-view="focus"] { grid-template-columns:minmax(0,1fr) var(--call-focus-camera-width,var(--call-tile-size)); }
.call-layout.call-layout:is([data-call-position="bottom"],[data-call-compact="true"])[data-call-view="focus"] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) var(--call-strip-height,130px); }
.call-layout:is([data-call-position="bottom"],[data-call-compact="true"]) .call-filmstrip { justify-content:center; }
.call-layout:is([data-call-position="bottom"],[data-call-compact="true"]) .call-filmstrip > article { height:var(--call-strip-height,130px); width:var(--call-focus-camera-width,var(--call-tile-size)); }
.call-layout.call-layout.call-layout[data-call-preset="inset"][data-call-view="focus"] { position:relative; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.call-layout[data-call-preset="inset"] .call-filmstrip { position:absolute; z-index:4; right:12px; bottom:12px; width:var(--call-focus-camera-width); height:var(--call-strip-height); overflow:hidden; border-radius:8px; box-shadow:var(--ui-shadow-float); }
.call-layout[data-call-preset="inset"] .call-filmstrip > article { width:100%; height:100%; aspect-ratio:auto; }
.call-layout .is-screen-share :is(.classroom-video-tile-label,.guest-call-tile-label) { top:8px; right:8px; bottom:auto; left:auto; max-width:min(44%,260px); padding:4px 7px; opacity:.82; }
.call-layout[data-call-kind="webinar"] .is-screen-share :is(.classroom-video-tile-label,.guest-call-tile-label) { display:none; }
.call-layout[data-call-preset="inset"][data-call-corner="1"] .call-filmstrip { right:auto; left:12px; }
.call-layout[data-call-preset="inset"][data-call-corner="2"] .call-filmstrip { right:auto; left:12px; bottom:auto; top:12px; }
.call-layout[data-call-preset="inset"][data-call-corner="3"] .call-filmstrip { bottom:auto; top:12px; }
.call-layout.call-layout.call-solo[data-call-view="focus"] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.call-tile-menu-trigger { display:none; }
.call-tile-menu { width:min(320px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; border:1px solid var(--ui-border); border-radius:8px; color:var(--ui-text); background:var(--ui-surface); box-shadow:var(--ui-shadow-float); font:inherit; }
.call-tile-menu::backdrop { background:var(--ui-modal-backdrop); }
.call-tile-menu strong { display:block; margin-bottom:12px; }
.call-tile-menu button { display:block; width:100%; min-height:44px; margin-top:8px; padding:8px 12px; border:1px solid var(--ui-border); border-radius:7px; background:var(--ui-input-bg); color:var(--ui-text); font:inherit; cursor:pointer; }
@media (hover:none) { .call-layout .classroom-video-tile-actions,.call-layout .guest-call-tile-actions { opacity:1; } .call-layout :is(.classroom-video-tile-indicators,.guest-call-tile-indicators) { top:48px; } .call-layout button,.call-view-toolbar button,.call-view-settings summary { min-width:44px; min-height:44px; } }
@media (hover:none) {
    .call-layout .classroom-video-tile-actions,.call-layout .guest-call-tile-actions { display:none; }
    .call-layout .call-tile-menu-trigger { position:absolute; top:4px; right:4px; z-index:3; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:7px; background:var(--ui-media-overlay); color:var(--ui-on-media); font-size:24px; cursor:pointer; }
    .call-layout :is(.classroom-video-tile-indicators,.guest-call-tile-indicators) { top:6px; right:auto; left:6px; }
}
@media (max-width:700px) { .call-view-toolbar { gap:5px; padding:6px; } .call-view-toolbar button,.call-view-settings summary { padding:6px 8px; } .call-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .call-layout .call-gallery > article { aspect-ratio:3 / 4; } }
.call-recording-prompt { box-sizing:border-box; width:min(420px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:22px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); color:var(--ui-text); font-family:var(--font-ui); box-shadow:var(--ui-shadow-float); }
.call-recording-prompt::backdrop { background:var(--ui-modal-backdrop); }
.call-recording-prompt h2 { margin:0 0 12px; font-size:20px; line-height:1.25; }
.call-recording-prompt p { margin:10px 0; font-size:14px; line-height:1.5; }
.call-recording-prompt .call-recording-prompt-note { color:var(--ui-text-muted); font-size:12px; }
.call-recording-prompt>div { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:20px; }
.call-recording-prompt button { min-height:44px; padding:10px 14px; border:1px solid var(--ui-control-border); border-radius:7px; background:var(--ui-input-bg); color:var(--ui-text); font:inherit; font-size:14px; cursor:pointer; }
.call-recording-prompt [data-record-start] { background:var(--ui-accent-soft); color:var(--ui-accent); border-color:var(--ui-accent); }
.call-recording-prompt :focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }