/* R55: fixed reachable controls and the same movable tiles in live and synthetic calls. */
html #call-overlay:not(.is-call-minimized)[data-state="active"] > .call-overlay__panel {
  display:flex!important;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:16px 12px calc(102px + env(safe-area-inset-bottom,0px))!important;
  gap:5px;
}
html #call-overlay:not(.is-call-minimized)[data-state="active"] #call-topbar {margin-top:0;max-width:calc(100% - 112px);min-height:28px}
html #call-overlay:not(.is-call-minimized)[data-state="active"] #call-name {font-size:18px;line-height:24px;max-width:calc(100% - 72px);margin:3px 0 0}
html #call-overlay:not(.is-call-minimized)[data-state="active"] #call-status {font-size:12px;line-height:18px;max-width:calc(100% - 32px);text-align:center;white-space:normal}
html #call-overlay:not(.is-call-minimized) #call-actions {
  position:absolute!important;
  box-sizing:border-box;
  left:12px!important;
  right:12px!important;
  bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
  top:auto!important;
  width:auto!important;
  max-width:440px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:4px!important;
  padding:8px!important;
  border:1px solid rgb(255 255 255 / .14);
  border-radius:24px;
  background:rgb(15 25 42 / .92);
  box-shadow:0 8px 30px rgb(0 0 0 / .2);
  overflow:visible!important;
  touch-action:manipulation;
  z-index:10;
}
html #call-overlay:not(.is-call-minimized) #call-actions:empty {display:none!important}
html #call-overlay #call-actions .call-ctrl {
  flex:1 1 0;
  width:0;
  min-width:44px!important;
  min-height:64px!important;
  max-width:80px!important;
  gap:4px!important;
  padding:0 1px!important;
  border:0!important;
  border-radius:16px;
  box-shadow:none!important;
  color:#eaf0fa!important;
  font-size:10px!important;
  line-height:14px!important;
  font-weight:550;
  transform:none!important;
}
html #call-overlay #call-actions .call-ctrl svg {
  flex:0 0 44px;
  width:44px!important;
  height:44px!important;
  padding:11px!important;
  border-radius:15px!important;
  background:#29384f!important;
  color:inherit!important;
}
html #call-overlay #call-actions .call-ctrl span {max-width:100%;min-width:0;line-height:14px;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-align:center}
html #call-overlay #call-actions .call-ctrl.is-off svg {background:#e6eaf1!important;color:#36455c!important}
html #call-overlay #call-actions .call-ctrl--end {order:10;flex:0 0 58px;min-width:58px!important}
html #call-overlay #call-actions :is(.call-ctrl--end,.call-ctrl--reject) svg {background:#d12f4d!important;color:#fff!important}
html #call-overlay #call-actions .call-ctrl--accept svg {background:#15936b!important;color:#fff!important}
html #call-overlay #call-actions .call-ctrl:disabled {opacity:.55;cursor:wait}
html #call-overlay #call-endcap {display:none!important}
html #call-overlay:not(.is-call-minimized) #call-grid {bottom:112px!important}
html #call-overlay .call-tile--mini {width:112px;height:146px;max-width:35%;border-radius:18px;box-shadow:0 8px 24px rgb(0 0 0 / .28);border:1px solid rgb(255 255 255 / .25);touch-action:none}
html #call-overlay .call-tile--mini.has-call-tile-position {
  left:var(--call-tile-x)!important;
  top:var(--call-tile-y)!important;
  right:auto!important;
  bottom:auto!important;
}
html #call-overlay .call-tile--mini.is-dragging {transition:none!important;cursor:grabbing;box-shadow:0 10px 34px rgb(0 0 0 / .4)}
html #call-overlay .call-tile-drag {
  position:absolute;
  z-index:7;
  top:2px;
  left:2px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:13px;
  color:#fff;
  background:radial-gradient(circle,rgb(8 18 34 / .42) 0 15px,transparent 16px);
  font:600 23px/1 system-ui;
  cursor:grab;
  touch-action:none;
}
html #call-overlay .call-tile--main > .call-tile-drag {display:none!important}
html #call-overlay .call-tile--mini .call-tile__name {left:8px;bottom:7px;max-width:calc(100% - 16px);padding:3px 7px;border-radius:8px;background:rgb(7 17 31 / .5);font-size:11px;line-height:14px;letter-spacing:.01em}
html #call-overlay .call-window-minimize {width:44px;height:44px;right:12px;top:max(12px,env(safe-area-inset-top));border-radius:15px;background:rgb(15 25 42 / .82)}
html #call-overlay.is-call-minimized {max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:22px!important}
html #call-overlay.is-call-minimized .call-window-bar {grid-template-columns:repeat(5,44px);grid-template-rows:44px 44px;gap:0 4px;padding:4px 8px 8px}
html #call-overlay.is-call-minimized .call-window-bar:not(:has(.call-window-settings)) {grid-template-columns:repeat(3,44px)}
html #call-overlay.is-call-minimized .call-window-bar:has(.call-window-flip[hidden]) {grid-template-columns:repeat(4,44px)}
html #call-overlay.is-call-minimized .call-window-drag {grid-column:1/-1;min-height:44px;order:0;gap:2px}
html #call-overlay.is-call-minimized .call-window-action {width:44px;height:44px;border-radius:14px}
html #call-overlay.is-call-minimized .call-window-end {order:10;background:#d12f4d}
html #call-overlay.is-call-minimized .call-window-title {font-size:12px}
html #call-overlay.is-call-minimized .call-window-status {font-size:10px}
html #call-overlay.is-call-minimized .call-tile-drag {width:44px;height:44px;top:0;left:0}
html #call-overlay :is(button,.call-tile-drag):focus-visible {outline:3px solid #a9caff!important;outline-offset:-2px}
.call-device-settings {
  position:absolute;z-index:20;box-sizing:border-box;right:12px;bottom:108px;
  width:min(340px,calc(100% - 24px));max-height:calc(100% - 172px);overflow:auto;overscroll-behavior:contain;
  padding:14px;border:1px solid #ffffff30;border-radius:22px;background:#162237;color:#f0f4fc;box-shadow:0 14px 42px #0005;pointer-events:auto;
}
.call-device-settings__head {display:flex;align-items:center;gap:8px}
.call-device-settings h2 {font-size:17px;line-height:24px;margin:0;flex:1}
.call-device-settings__head button {width:44px;height:44px;border:0;border-radius:14px;background:#29384f;color:inherit;display:grid;place-items:center}
.call-device-settings__status {font-size:12px;line-height:18px;color:#bed0eb;margin:6px 0}
.call-device-settings__status:empty {display:none}
.call-device-settings__toggles,.call-device-settings__devices {display:grid;gap:6px;margin-top:8px}
.call-device-settings :is([data-device-action],[data-camera-device]) {min-height:44px;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid #ffffff1f;border-radius:14px;background:#223149;color:inherit;font:inherit;font-size:13px;text-align:left;overflow-wrap:anywhere}
.call-device-settings [data-camera-device][aria-pressed="true"] {border-color:#a9caff;background:#314967}
.call-device-settings button:disabled {opacity:.65;cursor:wait}
.call-device-settings h3 {font-size:12px;color:#bfd0e8;line-height:18px;margin:14px 4px 4px}
.call-device-settings p {font-size:12px;line-height:18px;color:#bdcbe0}
@media(max-width:359px) {
  html #call-overlay:not(.is-call-minimized) #call-actions {left:8px!important;right:8px!important;padding:6px!important;gap:2px!important;border-radius:21px}
  html #call-overlay #call-actions .call-ctrl {min-width:44px!important;padding:0!important;font-size:9px!important}
  html #call-overlay #call-actions .call-ctrl--end {flex-basis:54px;min-width:54px!important}
  html #call-overlay .call-tile--mini {width:96px;height:124px;border-radius:15px}
}
@media(max-height:440px) and (orientation:landscape) {
  html #call-overlay:not(.is-call-minimized)[data-state="active"] > .call-overlay__panel {padding-top:6px!important;gap:0}
  html #call-overlay:not(.is-call-minimized)[data-state="active"] #call-name {font-size:14px;line-height:20px;margin:0}
  html #call-overlay:not(.is-call-minimized)[data-state="active"] #call-topbar {min-height:24px}
  html #call-overlay:not(.is-call-minimized) #call-actions {bottom:6px!important;padding:6px!important;max-width:360px!important}
  html #call-overlay #call-actions .call-ctrl {min-height:44px!important;height:44px!important;justify-content:center}
  html #call-overlay #call-actions .call-ctrl span {display:none}
  html #call-overlay:not(.is-call-minimized) #call-grid {bottom:68px!important}
  html #call-overlay .call-tile--mini {width:110px;height:92px;top:10px}
  .call-device-settings {bottom:68px;max-height:calc(100% - 80px);width:310px;padding:10px}
}
@media(prefers-reduced-motion:reduce) {html #call-overlay :is(.call-tile,.call-window-action,.call-window-minimize,.call-ctrl,.call-device-settings){animation:none!important;transition:none!important}}
html[data-vy-motion="off"] #call-overlay :is(.call-tile,.call-window-action,.call-window-minimize,.call-ctrl,.call-device-settings){animation:none!important;transition:none!important}
/* One dark call surface in both app themes; metadata stays outside the video. */
html body #call-overlay:not(.is-call-minimized){background:#101a2b!important;color:#f4f7fc!important}
html body #call-overlay:not(.is-call-minimized) > .call-overlay__video{background:#101a2b!important}
html body #call-overlay:not(.is-call-minimized) > .call-overlay__panel{background:transparent!important;backdrop-filter:none!important}
html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-name{position:absolute;left:20px;right:70px;top:18px;margin:0!important;padding:0!important;max-width:none!important;min-height:24px;height:24px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;color:#f4f7fc!important;text-align:left;font-size:17px!important;font-weight:600;line-height:24px!important}
html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-status{position:absolute;left:20px;right:70px;top:45px;margin:0!important;padding:0!important;max-width:none!important;height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#aebdd2!important;font-size:12px!important;line-height:18px!important;text-align:left}
html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-topbar{visibility:hidden}
html body #call-overlay:not(.is-call-minimized) #call-grid{top:76px!important;bottom:104px!important}
html body #call-overlay:not(.is-call-minimized) #call-grid .call-tile--mini:not(.has-call-tile-position){top:16px!important;right:16px!important;left:auto!important}
html body #call-overlay #call-actions .call-ctrl span{color:#eaf0fa!important}
html body #call-overlay:not(.is-call-minimized) #call-actions{background:#1a283d!important;border-color:#354258!important;box-shadow:0 8px 26px #02071133!important}
html body #call-overlay .call-window-minimize{background:#233147!important;border:1px solid #35465e!important;box-shadow:none!important}
@media(max-height:440px) and (orientation:landscape){
  html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-name{top:10px;font-size:14px!important;height:20px!important;line-height:20px!important}
  html body #call-overlay:not(.is-call-minimized)[data-state=active] #call-status{top:32px;font-size:11px!important}
  html body #call-overlay:not(.is-call-minimized) #call-grid{top:56px!important;bottom:68px!important}
}