/* Call picture-in-picture and the Pop Out window (client/js/callPip.js). */
.call-pip { position: fixed; z-index: 35; width: 320px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); cursor: pointer; touch-action: none; user-select: none; transition: left 0.2s, top 0.2s, right 0.2s, bottom 0.2s; }
/* Corners of the chat area (callPip.js sets --area-*), clear of its header and the composer. */
.call-pip[data-corner="top-left"] { top: calc(var(--area-top, 0px) + 60px); left: calc(var(--area-left, 0px) + 16px); }
.call-pip[data-corner="top-right"] { top: calc(var(--area-top, 0px) + 60px); right: calc(var(--area-right, 0px) + 16px); }
.call-pip[data-corner="bottom-left"] { bottom: calc(var(--area-bottom, 0px) + var(--composer-height, 68px) + 16px); left: calc(var(--area-left, 0px) + 16px); }
.call-pip[data-corner="bottom-right"] { bottom: calc(var(--area-bottom, 0px) + var(--composer-height, 68px) + 16px); right: calc(var(--area-right, 0px) + 16px); }
.call-pip.dragging { transition: none; cursor: grabbing; right: auto; bottom: auto; }
.call-pip.speaking { box-shadow: 0 0 0 2px var(--online), 0 8px 24px rgba(0, 0, 0, 0.5); }
.call-pip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.call-pip-video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.call-pip-video.mirror, .call-popout-tile video.mirror { transform: scaleX(-1); }
.call-pip-label { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.call-pip-hide { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #fff; opacity: 0; transition: opacity 0.15s; }
.call-pip:hover .call-pip-hide, .call-pip:focus-within .call-pip-hide { opacity: 1; }
.call-pip-hide:hover { background: rgba(0, 0, 0, 0.85); }
@media (max-width: 760px) {
  .call-pip { width: 200px; }
}

/* The call view's Pop Out button sits with the other call controls. */
.call-bar .call-popout-button { margin-left: 8px; }

/* The Pop Out window (an about:blank page the app draws into). */
body.call-popout-body { background: #000; color: #fff; height: 100vh; }
.call-popout { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.call-popout-grid { flex: 1; min-height: 0; display: grid; gap: 6px; padding: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); grid-auto-rows: minmax(0, 1fr); }
.call-popout-tile { position: relative; min-height: 0; border-radius: 6px; overflow: hidden; background: #1b1d23; display: grid; place-items: center; }
.call-popout-tile.speaking { box-shadow: inset 0 0 0 2px var(--online); }
.call-popout-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.call-popout-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 26px; font-weight: 700; }
.call-popout-name { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-popout-bar { flex: none; display: flex; justify-content: center; gap: 12px; padding: 8px 0 12px; }
.call-popout-bar button { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #2b2d31; color: #fff; }
.call-popout-bar button:hover { background: #3a3c42; }
.call-popout-bar button.on { background: #fff; color: #000; }
.call-popout-bar button.active-off, .call-popout-bar button.hangup { background: var(--danger); color: #fff; }