/* Scoped ecosystem call UI. Token values are copied unchanged from current ecosystem. */
html body #call-overlay:not([hidden]) {
  font-family:var(--vy-font);color:var(--vy-text)!important;background:var(--vy-panel)!important;
  box-sizing:border-box;border:1px solid var(--vy-border)!important;border-radius:var(--vy-r-xl)!important;
  box-shadow:var(--vy-shadow-card)!important;overflow:hidden;
}
html body #call-overlay:not(.is-call-minimized) {
  position:fixed!important;inset:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:min(680px,calc(100vw - 32px))!important;height:min(700px,calc(100dvh - 40px))!important;max-height:calc(100dvh - 24px)!important;min-height:0!important;
}
html body #call-overlay:not(.is-call-minimized).is-call-enlarged {width:calc(100vw - 32px)!important;height:calc(100dvh - 32px)!important;max-width:1440px!important}
html body #call-overlay > .call-overlay__video {background:var(--vy-panel)!important}
html body #call-overlay:not(.is-call-minimized) > .call-overlay__panel {background:transparent!important;backdrop-filter:none!important;padding:0!important;pointer-events:none}
html body #call-overlay .call-overlay__panel :is(button,#call-summary) {pointer-events:auto}
html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-name {left:24px;top:60px;right:24px;font-size:22px!important;line-height:28px!important;height:30px!important;color:var(--vy-text)!important;font-weight:650;text-align:left}
html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-status {left:24px;top:94px;right:24px;color:var(--vy-text-sub)!important;font-size:13px!important;line-height:20px!important;height:20px!important;text-align:left}
html body #call-overlay:not(.is-call-minimized) #call-grid {top:130px!important;bottom:152px!important;left:16px!important;right:16px!important;width:auto!important;height:auto!important;overflow:hidden;border-radius:var(--vy-r-md)}
html body #call-overlay #call-grid .call-tile--main {background:var(--vy-panel-2)!important;box-shadow:none!important}
html body #call-overlay .call-tile__video {object-fit:contain!important;background:var(--vy-panel-2)!important}
html body #call-overlay .call-tile__ph {background:var(--vy-panel-2)!important;color:var(--vy-text)!important}
html body #call-overlay .call-tile__ph-text {color:var(--vy-text-sub)!important}
html body #call-overlay .call-tile--mini {border-color:var(--vy-border)!important;box-shadow:var(--vy-shadow-pop)!important}
html body #call-overlay .call-tile__name {background:var(--vy-glass-strong)!important;color:var(--vy-text)!important;backdrop-filter:none!important}
html body #call-overlay:not(.is-call-minimized) #call-actions {bottom:16px!important;left:12px!important;right:12px!important;max-width:480px!important;border:0!important;border-radius:var(--vy-r-lg)!important;background:var(--vy-panel)!important;box-shadow:none!important;padding:4px!important;gap:6px!important}
html body #call-overlay #call-actions .call-ctrl {color:var(--vy-text)!important;max-width:88px!important;font-size:12px!important;line-height:16px!important;background:transparent!important;min-height:72px!important}
html body #call-overlay #call-actions .call-ctrl span {color:inherit!important;font-size:12px!important}
html body #call-overlay #call-actions .call-ctrl svg {background:var(--vy-panel-2)!important;color:var(--vy-text)!important;border-radius:var(--vy-r-md)!important;width:48px!important;height:48px!important;flex-basis:48px;padding:13px!important}
html body #call-overlay #call-actions .call-ctrl.is-off svg {background:var(--vy-border)!important;color:var(--vy-text-sub)!important}
html body #call-overlay #call-actions :is(.call-ctrl--end,.call-ctrl--reject) svg {background:var(--vy-red)!important;color:var(--vy-text-on-accent)!important}
html body #call-overlay #call-actions .call-ctrl--accept svg {background:var(--vy-green)!important;color:var(--vy-text-on-success)!important}
html body #call-overlay #call-actions .call-ctrl--end {flex-basis:76px;min-width:68px!important}
html body #call-overlay .call-surface-header {position:absolute;z-index:16;top:8px;left:24px;right:12px;height:44px;display:flex;align-items:center;gap:6px;pointer-events:none}
html body #call-overlay .call-surface-header img {width:100px;height:24px;object-fit:contain;margin-right:auto}
html body #call-overlay :is(.call-surface-header button,.call-surface-tools button,.call-window-minimize,.call-window-action) {display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:8px 12px;border:1px solid var(--vy-border)!important;border-radius:var(--vy-r-sm)!important;background:var(--vy-panel)!important;color:var(--vy-text)!important;box-shadow:none!important;font:500 12px/18px var(--vy-font);cursor:pointer;pointer-events:auto;transition:background .16s ease,transform .16s ease}
html body #call-overlay .call-surface-header button span {display:none}
html body #call-overlay .call-surface-header {padding-right:48px}
html body #call-overlay .call-window-minimize {top:8px;right:12px;width:44px;height:44px;z-index:17}
html body #call-overlay :is(.call-surface-header button,.call-surface-tools button,.call-window-minimize,.call-window-action):hover {background:var(--vy-panel-3)!important}
html body #call-overlay .call-surface-tools {position:absolute;z-index:15;bottom:104px;left:16px;right:16px;display:flex;gap:8px;justify-content:center}
html body #call-overlay .call-surface-message {color:var(--vy-accent)!important;background:var(--vy-brand-soft)!important;border-color:transparent!important}
html body #call-overlay .call-surface-notice {position:absolute;z-index:19;top:118px;left:20px;right:20px;margin:0;padding:10px 12px;border:1px solid var(--vy-border);border-radius:12px;background:var(--vy-glass-strong);color:var(--vy-text-sub);font-size:13px;line-height:20px}
html body #call-overlay .call-surface-notice:empty {display:none}
html body #call-overlay :is(button,.call-tile-drag):focus-visible {outline:3px solid var(--vy-accent)!important;outline-offset:2px}
html body #call-overlay.is-call-minimized {transform:none!important;width:280px!important;height:260px!important;background:var(--vy-panel)!important;border:1px solid var(--vy-border)!important}
html body #call-overlay.is-call-minimized .call-surface-header {left:10px;right:6px;top:6px;padding-right:0}
html body #call-overlay.is-call-minimized .call-surface-header img {width:80px;height:20px;padding:4px;background:var(--vy-glass-strong);border-radius:8px;box-sizing:content-box}
html body #call-overlay.is-call-minimized .call-surface-header button {background:var(--vy-glass-strong)!important}
/* M10: старая константа repeat(4,44px)!important убивала адаптивные :has()-правила
   call-polish-r55, и при 3 кнопках группа оставалась смещённой. auto-fit не
   подходит: заголовок-хэндл растянут на 1/-1 и «держит» все треки. Явные
   варианты по фактическому составу панели (flip в мини скрыт всегда). */
html body #call-overlay.is-call-minimized .call-window-bar {background:var(--vy-panel)!important;color:var(--vy-text)!important;border-top:1px solid var(--vy-border);grid-template-columns:repeat(4,44px)!important;justify-content:center;gap:0 8px}
html body #call-overlay.is-call-minimized .call-window-bar:not(:has(.call-window-settings)) {grid-template-columns:repeat(3,44px)!important}
html body #call-overlay.is-call-minimized .call-window-drag {color:var(--vy-text)!important}
html body #call-overlay.is-call-minimized .call-window-status {color:var(--vy-text-sub)!important;font-size:12px}
html body #call-overlay.is-call-minimized .call-window-end {background:var(--vy-red)!important;color:var(--vy-text-on-accent)!important}
html body #call-overlay.is-call-minimized .call-window-flip {display:none!important}
html body #call-overlay.is-call-minimized .call-surface-notice {top:52px;left:8px;right:8px;font-size:12px;line-height:16px}
html body #call-overlay.is-call-dismissed {visibility:hidden!important;pointer-events:none!important}
html body #call-overlay.is-call-dismissed * {pointer-events:none!important}
html body #call-return {position:fixed;z-index:150;right:16px;top:calc(12px + env(safe-area-inset-top,0px));max-width:calc(100vw - 32px);min-height:52px;padding:10px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--vy-border);border-radius:var(--vy-r-full);box-shadow:var(--vy-shadow-pop);background:var(--vy-glass-strong);color:var(--vy-accent);font:600 13px/18px var(--vy-font);text-align:left;cursor:pointer}
html body #call-return strong {display:block;font-size:12px;font-weight:400;color:var(--vy-text-sub);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:230px}
html body #call-return[hidden],html body #call-overlay [hidden] {display:none!important}
html body #call-overlay .call-reconnect {inset:130px 16px 152px;background:var(--vy-glass-strong)!important;color:var(--vy-text)!important;backdrop-filter:none!important;border-radius:var(--vy-r-md)}
html body #call-overlay .call-reconnect__orb {animation:none!important;background:var(--vy-brand-soft)!important;box-shadow:none!important}
html body #call-overlay .call-device-settings {background:var(--vy-panel)!important;color:var(--vy-text)!important;border-color:var(--vy-border);box-shadow:var(--vy-shadow-pop)}
html body #call-overlay .call-device-settings :is(button,[data-device-action],[data-camera-device]) {background:var(--vy-panel-2)!important;color:var(--vy-text)!important;border-color:var(--vy-border)}
html body #call-overlay .call-device-settings :is(p,h3) {color:var(--vy-text-sub)!important}
html body #call-overlay[data-state=prejoin] {max-width:500px!important;}
html body #call-overlay #call-prejoin {background:var(--vy-panel)!important;color:var(--vy-text)!important}
html body #call-overlay #call-prejoin .call-prejoin__title {color:var(--vy-text)!important}
html body #call-overlay #call-prejoin .call-prejoin__join {background:var(--vy-brand)!important;color:var(--vy-text-on-accent)!important}
html[data-theme=dark] #call-overlay .call-surface-header img {background:#fff;border-radius:6px;padding:3px}
@media(max-width:600px) {
 html body #call-overlay:not(.is-call-minimized) {width:calc(100vw - 16px)!important;height:min(640px,calc(100dvh - 24px))!important;max-height:calc(100dvh - 16px)!important}
 html body #call-overlay:not(.is-call-minimized).is-call-enlarged {height:calc(100dvh - 16px)!important}
 html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-name {font-size:20px!important;left:18px}
 html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-status {left:18px}
 html body #call-overlay #call-actions .call-ctrl {min-width:44px!important;font-size:11px!important}
 html body #call-overlay #call-actions .call-ctrl span {font-size:11px!important}
 html body #call-overlay #call-actions {gap:2px!important}
 html body #call-overlay .call-surface-header {left:18px}
 html body #call-overlay .call-tile--mini {width:92px;height:120px}
 html body #call-overlay #call-actions .call-ctrl--end {flex-basis:64px;min-width:60px!important}
}
@media(max-height:500px) {
 html body #call-overlay:not(.is-call-minimized) {width:calc(100vw - 24px)!important;height:calc(100dvh - 16px)!important}
 html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-name {top:50px;font-size:16px!important;line-height:22px!important;height:24px!important}
 html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-status {top:76px;font-size:12px!important}
 html body #call-overlay:not(.is-call-minimized) #call-grid {top:104px!important;bottom:80px!important;right:150px!important}
 html body #call-overlay .call-surface-tools {top:110px;bottom:auto;left:auto;right:16px;flex-direction:column;width:124px}
 html body #call-overlay:not(.is-call-minimized) #call-actions {bottom:8px!important}
 html body #call-overlay #call-actions .call-ctrl {height:60px!important;min-height:60px!important}
 html body #call-overlay #call-actions .call-ctrl svg {width:40px!important;height:40px!important;flex-basis:40px;padding:10px!important}
 html body #call-overlay #call-actions .call-ctrl span {display:block!important;font-size:11px!important}
 html body #call-overlay .call-reconnect {inset:104px 150px 80px 16px}
}
@media(prefers-reduced-motion:reduce) {html body #call-overlay * {animation:none!important;transition:none!important}}
html[data-vy-motion=off] body #call-overlay * {animation:none!important;transition:none!important}
html body #call-overlay:not(.is-call-minimized) > .call-overlay__video {background:var(--vy-panel)!important}
html body #call-overlay .call-reconnect__text {color:var(--vy-text-sub)!important;text-shadow:none!important;font:500 14px/22px var(--vy-font)}
html body #call-overlay .call-reconnect {opacity:1!important}
html body #call-overlay .call-prejoin__media {background:var(--vy-panel-2)!important}
html body #call-overlay .call-prejoin__ava-wrap {background:var(--vy-panel-2)!important}
html body #call-overlay .call-prejoin__conn,html body #call-overlay .call-prejoin__peer {color:var(--vy-text-sub)!important}
html body #call-overlay .call-prejoin__badge {background:var(--vy-glass-strong)!important;color:var(--vy-text)!important;box-shadow:var(--vy-shadow-small)!important}
html body #call-overlay .call-prejoin__err {background:var(--vy-panel-2)!important;color:var(--vy-red)!important}
html[data-theme] body #call-overlay.is-call-minimized {width:280px!important;height:260px!important;border:1px solid var(--vy-border)!important;background:var(--vy-panel)!important;color:var(--vy-text)!important;box-shadow:var(--vy-shadow-pop)!important}
html[data-theme] body #call-overlay.is-call-minimized .call-reconnect {inset:50px 8px 0!important;height:auto!important;min-height:0!important;padding:8px!important;font-size:12px!important}
html[data-theme] body #call-overlay.is-call-minimized .call-reconnect__text {font-size:12px!important;line-height:17px!important}

/* Prejoin content scrolls within the card; Cancel stays reachable at large text sizes. */
html body #call-overlay #call-prejoin {overflow-y:auto!important;overscroll-behavior:contain;padding:16px!important;justify-content:flex-start!important}
html body #call-overlay #call-prejoin .call-prejoin__body {flex-shrink:0!important;padding-bottom:12px!important}
html body #call-overlay #call-prejoin .call-prejoin__media {flex-shrink:0!important;min-height:120px!important;max-height:28dvh!important}
html body #call-overlay #call-prejoin .call-prejoin__join {box-shadow:var(--vy-shadow-small)!important;filter:none!important}
html body #call-prejoin:has(#prejoin-error:not([hidden])) .call-prejoin__media {height:130px!important;min-height:100px!important;max-height:18dvh!important}
html body #call-prejoin:has(#prejoin-error:not([hidden])) .call-prejoin__toggles {display:none!important}
html body #call-prejoin:has(#prejoin-error:not([hidden])) .call-prejoin__ava {width:64px!important;height:64px!important;font-size:24px!important}
/* Recovery status replaces the video area instead of leaving unreadable ghost labels. */
html body #call-overlay .call-reconnect {background:var(--vy-panel-2)!important}