/* Approved call cards and participant actions. Media/audio lifecycle stays in app.js. */
.participant-grid .participant {border-color:rgba(var(--theme-text-primary-rgb,245,245,247),.22);background:linear-gradient(145deg,rgba(var(--theme-surface-base-rgb,7,7,8),.65),rgba(var(--theme-surface-card-rgb,14,14,16),.55));transition:border-color .2s,box-shadow .2s}
.participant-grid .participant:hover {border-color:rgba(var(--theme-text-primary-rgb,245,245,247),.38)}
.participant-grid .participant:has(.participant-more-button[aria-expanded=true]) {border-color:rgba(var(--theme-text-primary-rgb,245,245,247),.5)}
.participant-grid .participant .participant-portrait {--call-avatar-size:104px;position:relative;display:block;flex:none;width:var(--call-avatar-size);height:var(--call-avatar-size);order:1;z-index:2;pointer-events:none}
.participant-grid .participant .participant-portrait .avatar {display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:32px;flex-basis:auto;box-shadow:0 0 0 1px rgba(var(--theme-text-primary-rgb,245,245,247),.1)}
.participant-grid .participant .participant-portrait .participant-media-status {position:absolute;right:-3px;bottom:-3px;display:flex;gap:4px;margin:0;padding:0;min-height:0;z-index:2}
.participant-grid .participant .participant-portrait .participant-microphone-status,
.participant-grid .participant .participant-portrait .participant-headset-status {width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(var(--theme-success-text-rgb,65,207,143),.38);color:var(--theme-success-text,#43d59b);background:var(--theme-surface-base,#09090b);box-shadow:0 2px 6px rgba(var(--theme-shadow-rgb,0,0,0),.22)}
.participant-grid .participant .participant-portrait .is-muted {color:var(--theme-danger-text,#f58ba2);border-color:rgba(var(--theme-danger-text-rgb,245,139,162),.38);background:color-mix(in srgb,var(--theme-danger-text,#f58ba2) 8%,var(--theme-surface-base,#09090b))}
.participant-grid .participant .participant-portrait .participant-microphone-status svg,
.participant-grid .participant .participant-portrait .participant-headset-status svg {width:20px;height:20px}
.participant-grid .participant > .participant-name {margin-top:12px;font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.participant-grid.count-1 .participant .participant-portrait,.participant-grid.count-2 .participant .participant-portrait {--call-avatar-size:112px}
.participant-grid.count-5 .participant .participant-portrait,.participant-grid.count-6 .participant .participant-portrait {--call-avatar-size:82px}
.participant-grid.count-7 .participant .participant-portrait,.participant-grid.count-8 .participant .participant-portrait {--call-avatar-size:64px}
.participant-grid.count-7 .participant > .participant-name,.participant-grid.count-8 .participant > .participant-name {font-size:13px;margin-top:8px}
.participant-grid.count-7 .participant .participant-portrait .participant-microphone-status,
.participant-grid.count-8 .participant .participant-portrait .participant-microphone-status {width:28px;height:28px}
.participant-grid .participant .participant-volume-button,
.participant-grid .participant .participant-more-button {position:absolute;z-index:4;top:14px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid rgba(var(--theme-text-primary-rgb,245,245,247),.18);color:var(--theme-text-primary,#f5f5f7);background:rgba(var(--theme-surface-interactive-rgb,25,25,28),.7);cursor:pointer;transition:background .18s,border-color .18s,scale .15s}
.participant-grid .participant .participant-volume-button {left:14px;border-radius:10px}
.participant-grid .participant .participant-more-button {right:14px;border-radius:50%}
.participant-grid .participant .participant-volume-button svg,.participant-grid .participant .participant-more-button svg {width:18px;height:18px}
.participant-grid .participant .participant-more-button svg {width:20px;height:20px}
.participant-grid .participant :is(.participant-volume-button,.participant-more-button):hover {background:var(--theme-surface-hover,#25252a);border-color:var(--theme-border-strong,#606067)}
.participant-grid .participant :is(.participant-volume-button,.participant-more-button):active {scale:.94}
.participant-grid .participant :is(.participant-volume-button,.participant-more-button):focus-visible {outline:2px solid var(--theme-focus,#88baff);outline-offset:3px}
.participant-grid .participant:has(.participant-more-button) .share-mark {right:54px}
.participant-grid .participant:has(.participant-more-button) .audio-mark {right:80px}
/* Remote menu: generous touch targets with the spacing of the approved mockup. */
.participant-voice-menu {width:min(288px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0 13px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid rgba(var(--theme-text-primary-rgb,245,245,247),.3);border-radius:18px;color:var(--theme-text-primary,#f5f5f7);background:linear-gradient(145deg,rgba(var(--theme-surface-base-rgb,7,7,8),.99),rgba(var(--theme-surface-card-rgb,14,14,16),.97));box-shadow:0 16px 45px rgba(var(--theme-shadow-rgb,0,0,0),.22);animation:participant-menu-in .2s ease both}
.participant-voice-menu-header {min-height:60px;gap:10px;padding:11px 0;border-bottom:1px solid var(--theme-border-subtle,#303036)}
.participant-voice-menu-header .avatar {width:34px;height:34px;flex-basis:34px;font-size:13px}
.participant-voice-identity {display:grid;gap:3px;min-width:0}
.participant-voice-menu-header strong {font-size:14px;font-weight:750;line-height:1.2}
.participant-voice-identity small {color:var(--theme-text-secondary,#a8a8b2);font-size:11px}
.participant-voice-menu-header .popover-close {width:30px;height:30px;flex:none;margin-left:auto;padding:6px;border:1px solid var(--theme-border-strong,#5f6068);border-radius:50%;background:transparent;color:var(--theme-text-primary,#f5f5f7)}
.participant-voice-menu-header .popover-close:hover {background:var(--theme-surface-hover,#202023)}
.participant-voice-controls {padding:11px 2px 12px}
.participant-voice-menu .participant-voice-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;color:var(--theme-text-primary,#f5f5f7);font-size:13px;font-weight:750}
.participant-voice-menu .participant-voice-heading output {min-width:48px;padding:4px 8px;text-align:center;border:1px solid var(--theme-border-subtle,#3b3b42);border-radius:999px;color:inherit;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.participant-voice-controls > p {margin:3px 0 10px;font-size:11px;color:var(--theme-text-secondary,#a8a8b2)}
.participant-voice-menu .participant-voice-slider {display:flex;align-items:center;gap:9px;padding:0;margin:0 0 12px}
.participant-voice-slider > svg {width:18px;height:18px;flex:none;color:var(--theme-text-primary,#f5f5f7)}
.participant-voice-menu .participant-voice-slider input[type=range] {--voice-thumb:16px;--voice-fill:var(--theme-text-primary,#f5f5f7);appearance:none;min-width:0;flex:1;width:100%;height:28px;min-height:28px;margin:0;padding:0;border:0;border-radius:0;outline-offset:5px;background:linear-gradient(to right,var(--voice-fill) 0 var(--voice-volume-fill,50%),var(--theme-surface-interactive,#29292d) var(--voice-volume-fill,50%) 100%) center / calc(100% - var(--voice-thumb)) 6px no-repeat;cursor:pointer}
.participant-voice-slider input::-webkit-slider-runnable-track {height:6px;border:0;border-radius:999px;background:transparent}
.participant-voice-slider input::-webkit-slider-thumb {appearance:none;box-sizing:border-box;width:var(--voice-thumb);height:var(--voice-thumb);margin-top:-5px;border:1px solid var(--theme-border-subtle,#aaa);border-radius:50%;background:var(--theme-text-primary,#f5f5f7);box-shadow:0 1px 4px rgba(var(--theme-shadow-rgb,0,0,0),.25)}
.participant-voice-limit {flex:none;font-size:11px;color:var(--theme-text-secondary,#a8a8b2);font-variant-numeric:tabular-nums}
.participant-voice-mute {width:100%;min-height:34px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 10px;border:1px solid var(--theme-border-strong,#767780);border-radius:12px;color:var(--theme-text-primary,#f5f5f7);background:transparent;font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:background .18s,border-color .18s,scale .15s}
.participant-voice-mute [data-voice-mute-icon] {display:flex}
.participant-voice-mute svg {width:18px;height:18px}
.participant-voice-mute:hover {background:var(--theme-surface-hover,#222226);border-color:var(--theme-text-primary,#f5f5f7)}
.participant-voice-mute:active {scale:.98}
.participant-voice-mute[aria-pressed=true] {color:var(--theme-danger-text,#f58ba2);border-color:rgba(var(--theme-danger-text-rgb,245,139,162),.6);background:rgba(var(--theme-danger-text-rgb,245,139,162),.06)}
.participant-voice-mute:focus-visible,.participant-voice-menu-actions button:focus-visible,.participant-voice-menu-header .popover-close:focus-visible {outline:2px solid var(--theme-focus,#88baff);outline-offset:3px}
.participant-voice-menu :is(button,input):disabled {opacity:.45;cursor:not-allowed}
.participant-voice-unavailable {display:block;margin-top:6px;color:var(--theme-text-secondary,#a8a8b2);font-size:10px}
.participant-voice-menu-actions {display:grid;gap:1px;padding:7px 0 7px;border-top:1px solid var(--theme-border-subtle,#303036)}
.participant-voice-menu-actions button {min-height:34px;gap:10px;padding:7px 5px;border-radius:8px;font-size:12px;font-weight:650;line-height:1.3;transition:background .18s,color .18s}
.participant-voice-menu-actions button > span:not(.host-crown,.social-spinner) {flex:1;min-width:0}
.participant-voice-menu-actions svg {width:18px;height:18px;flex:none;color:inherit}
.participant-voice-menu-actions svg:last-child {width:14px;height:14px;margin-left:auto;color:var(--theme-text-secondary,#a8a8b2);transition:translate .18s}
.participant-voice-menu-actions button:hover > svg:last-child {translate:3px 0}
.participant-voice-menu-actions .participant-social-danger {margin-top:4px;padding-top:10px;min-height:40px;border-top:1px solid var(--theme-border-subtle,#303036);border-radius:0 0 10px 10px;color:var(--theme-danger-text,#f58ba2)}
.participant-voice-menu-actions .device-note {padding:10px 4px;color:var(--theme-text-secondary,#a8a8b2);font-size:12px}
@keyframes participant-menu-in {from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:760px) {
 .participant-grid .participant .participant-portrait {--call-avatar-size:76px}
 .participant-grid.count-1 .participant .participant-portrait,.participant-grid.count-2 .participant .participant-portrait {--call-avatar-size:82px}
 .participant-grid.count-5 .participant .participant-portrait,.participant-grid.count-6 .participant .participant-portrait,.participant-grid.count-7 .participant .participant-portrait,.participant-grid.count-8 .participant .participant-portrait {--call-avatar-size:64px}
 .participant-grid .participant .participant-portrait .participant-microphone-status,.participant-grid .participant .participant-portrait .participant-headset-status {width:28px;height:28px}
 .participant-grid .participant .participant-portrait .participant-microphone-status svg,.participant-grid .participant .participant-portrait .participant-headset-status svg {width:17px;height:17px}
 .participant-grid .participant > .participant-name {font-size:13px;margin-top:10px}
 .participant-grid .participant .participant-more-button,.participant-grid .participant .participant-volume-button {top:9px;width:28px;height:28px}
 .participant-grid .participant .participant-volume-button {left:9px}.participant-grid .participant .participant-more-button {right:9px}
}
@media(prefers-reduced-motion:reduce) {
 .participant-voice-menu {animation:none}
 .participant-grid .participant,.participant-grid .participant :is(.participant-volume-button,.participant-more-button),.participant-voice-mute,.participant-voice-menu-actions button,.participant-voice-menu-actions svg:last-child {transition:none}
 .participant-voice-bars.is-speaking i {animation:none}
}
/* Fit wrapped participant rows inside the actual stage, including short
   desktop windows and the narrower space beside an open sidebar panel. */
.call-main .participant-stage {container-type:size;padding:clamp(16px,3vh,26px) clamp(16px,3vw,52px)}
@media(min-width:761px) {
 .call-main .participant-grid.count-1 .participant {width:min(326px,100cqw);height:min(252px,100cqh)}
 .call-main .participant-grid.count-2 .participant {width:min(326px,calc((100cqw - 13px)/2));height:min(252px,100cqh)}
 .call-main .participant-grid.count-3 .participant,.call-main .participant-grid.count-4 .participant {width:min(326px,calc((100cqw - 13px)/2));height:min(208px,calc((100cqh - 13px)/2))}
 .call-main .participant-grid.count-5 .participant,.call-main .participant-grid.count-6 .participant {width:min(264px,calc((100cqw - 26px)/3));height:min(180px,calc((100cqh - 13px)/2))}
 .call-main .participant-grid.count-7 .participant,.call-main .participant-grid.count-8 .participant {width:min(200px,calc((100cqw - 39px)/4));height:min(154px,calc((100cqh - 13px)/2))}
}
@container(max-height:430px) {
 .participant-grid:not(.count-1,.count-2) .participant {padding:12px;gap:6px}
 .participant-grid:not(.count-1,.count-2) .participant .participant-portrait {--call-avatar-size:76px}
 .participant-grid:not(.count-1,.count-2) .participant > .participant-name {font-size:14px;margin-top:8px}
 .participant-grid:not(.count-1,.count-2) .participant .participant-portrait .participant-microphone-status,.participant-grid:not(.count-1,.count-2) .participant .participant-portrait .participant-headset-status {width:28px;height:28px}
}
@container(max-height:330px) {
 .participant-grid:not(.count-1,.count-2) .participant {padding:8px;gap:4px}
 .participant-grid:not(.count-1,.count-2) .participant .participant-portrait {--call-avatar-size:60px}
 .participant-grid:not(.count-1,.count-2) .participant > .participant-name {font-size:13px;margin-top:6px}
}
/* Streaming card: the thumbnail stays clear; identity lives in the footer. */
.participant-grid .participant.is-streaming {--participant-stream-footer-height:40px;isolation:isolate;}
.participant-grid .participant.is-streaming .participant-share-media {inset:0 0 var(--participant-stream-footer-height);height:auto;border-radius:0;}
.participant-grid .participant.is-streaming .participant-share-media>img {opacity:1;}
.participant-grid .participant.is-streaming .participant-share-media::after {top:10px;left:10px;padding:4px 6px;font-size:9px;line-height:1.25;border-radius:5px;color:#fff;background:var(--theme-danger,#f13758);z-index:2;pointer-events:none;}
.participant-grid .participant.is-streaming .participant-stream-footer {position:absolute;inset:auto 0 0;height:var(--participant-stream-footer-height);display:flex;align-items:center;gap:8px;padding:5px 11px;border-top:1px solid var(--theme-border-subtle,#343439);background:var(--theme-surface-card,#101012);z-index:2;pointer-events:none;}
.participant-grid .participant.is-streaming .participant-stream-footer>.avatar {width:28px;height:28px;flex:0 0 28px;font-size:11px;box-shadow:none;}
.participant-grid .participant.is-streaming .participant-stream-footer>.participant-name {flex:1;min-width:0;width:auto;margin:0;padding:0;color:var(--theme-text-primary,#f4f4f6);font-size:13px;font-weight:720;line-height:1.3;text-align:left;text-shadow:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;}
.participant-grid .participant.is-streaming .participant-stream-footer>.participant-media-status {position:static;margin:0;min-height:0;gap:5px;flex:none;}
.participant-grid .participant.is-streaming .participant-stream-footer .participant-microphone-status,.participant-grid .participant.is-streaming .participant-stream-footer .participant-headset-status {width:19px;height:22px;}
.participant-stream-footer .participant-stream-audio {display:flex;color:var(--theme-text-secondary,#b9b9c1);flex:none;}
.participant-stream-footer .participant-stream-audio svg {width:15px;height:15px;}
.participant-grid .participant.is-streaming .participant-share-media>.participant-stream-watch {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:7px;background:none;color:#fff;opacity:0;translate:0 4px;pointer-events:none;transition:opacity .18s ease,translate .18s ease;}
.participant-grid .participant.is-streaming .participant-stream-watch::before {content:'';position:absolute;inset:0;background:rgba(0,0,0,.1);}
.participant-grid .participant.is-streaming .participant-stream-watch>span {position:relative;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 16px);min-width:0;padding:8px 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(10,10,13,.8);font-size:12px;font-weight:650;line-height:1.2;white-space:nowrap;}
.participant-grid .participant.is-streaming .participant-stream-watch>span>svg {flex:none;width:15px;height:15px;fill:currentColor;stroke-width:1.2;}
.participant-grid .participant.is-streaming:hover .participant-stream-watch,.participant-grid .participant.is-streaming:focus-visible .participant-stream-watch {opacity:1;translate:0 0;}
.participant-grid .participant.is-streaming:has(.participant-more-button:hover) .participant-stream-watch,.participant-grid .participant.is-streaming:has(.participant-more-button[aria-expanded=true]) .participant-stream-watch,.participant-grid .participant.is-streaming:has(.camera-pip:hover) .participant-stream-watch {opacity:0;}
.participant-grid .participant.is-streaming:hover {border-color:rgba(var(--theme-text-primary-rgb,245,245,247),.45);box-shadow:none;}
.participant-grid .participant.is-streaming:focus-visible {outline:2px solid var(--theme-focus,#88baff);outline-offset:3px;box-shadow:none;}
.participant-grid .participant.is-streaming .participant-more-button {top:10px;right:10px;background:rgba(14,14,18,.78);border-color:rgba(255,255,255,.25);color:#fff;}
@media (max-width:760px) {
 .participant-grid .participant.is-streaming {--participant-stream-footer-height:36px;}
 .participant-grid .participant.is-streaming .participant-stream-footer {padding:4px 8px;gap:6px;}
 .participant-grid .participant.is-streaming .participant-stream-footer>.avatar {width:26px;height:26px;flex-basis:26px;}
 .participant-grid .participant.is-streaming .participant-stream-footer>.participant-name {font-size:11px;}
 .participant-grid .participant.is-streaming .participant-share-media::after {top:8px;left:8px;font-size:8px;}
 .participant-grid .participant.is-streaming .participant-more-button {top:8px;right:8px;}
}
@media (hover:none) { .participant-grid .participant.is-streaming .participant-share-media>.participant-stream-watch {opacity:1;translate:none;}}
@media (prefers-reduced-motion:reduce) { .participant-grid .participant.is-streaming .participant-share-media>.participant-stream-watch {transition:none;translate:none;}}

.participant-grid .participant.is-streaming .participant-stream-watch>span>span {min-width:0;overflow:hidden;text-overflow:ellipsis;}
@container (max-width:180px) { .participant-grid .participant.is-streaming .participant-stream-watch>span {padding:7px 9px;gap:5px;font-size:10px;} }

.participant-voice-slider input::-moz-range-track {height:6px;border:0;border-radius:999px;background:transparent}
.participant-voice-slider input::-moz-range-progress {background:transparent}
.participant-voice-slider input::-moz-range-thumb {box-sizing:border-box;width:var(--voice-thumb);height:var(--voice-thumb);border:1px solid var(--theme-border-subtle,#aaa);border-radius:50%;background:var(--theme-text-primary,#f5f5f7)}
/* The grid uses the same available width as the cards, including the old
   two-person panel breakpoint. A panel must never enlarge a participant. */
@media(min-width:761px) {
 .call-workspace.panel-open .call-main .participant-grid.count-2 {width:min(666px,100cqw)}
 .call-main .participant-grid.count-2 .participant {height:min(252px,max(164px,calc((100cqw - 13px) * .39)),100cqh)}
}
@container(max-width:620px) {
 .call-main .participant-grid:is(.count-7,.count-8) .participant {width:min(200px,calc((100cqw - 26px)/3));height:min(154px,calc((100cqh - 26px)/3));padding:8px;gap:4px}
 .call-main .participant-grid:is(.count-7,.count-8) .participant .participant-portrait {--call-avatar-size:48px}
}
@container(max-width:420px) {
 .call-main .participant-grid:is(.count-1,.count-2) .participant {padding:12px;gap:6px}
 .call-main .participant-grid:is(.count-1,.count-2) .participant .participant-portrait {--call-avatar-size:clamp(48px,22cqw,88px)}
 .call-main .participant-grid:is(.count-5,.count-6) .participant {width:min(264px,calc((100cqw - 13px)/2));height:min(180px,calc((100cqh - 26px)/3));padding:8px;gap:4px}
 .call-main .participant-grid:is(.count-7,.count-8) .participant {width:min(200px,calc((100cqw - 13px)/2));height:min(154px,calc((100cqh - 39px)/4));padding:6px;gap:3px}
 .call-main .participant-grid:is(.count-5,.count-6,.count-7,.count-8) .participant .participant-portrait {--call-avatar-size:44px}
 .call-main .participant-grid:is(.count-5,.count-6,.count-7,.count-8) .participant>.participant-name {margin-top:4px;font-size:12px}
 .call-main .participant-grid .participant:not(.is-streaming) {overflow:hidden}
}