/* ==========================================================================
   IRONITT v2 — the voice / call stage
   --------------------------------------------------------------------------
   A nest's voice channel and a whisper call share one stage
   (js/communication.js + js/webrtc.js): a title with its state, the tiles,
   one row of round controls, and the pieces around them — the permission
   card shown before the first join, the music player, the chat that slides
   over the stage, and the small "back to call" chip.

   The stage is in the page, so only what floats over it carries a shadow
   (the chat overlay, the call chip, the jump buttons on video). Speaking is
   a plain accent ring, not a glow; nothing pulses forever.
   Chrome drawn ON video (labels, pin/fullscreen, quality bars) keeps its own
   black plate and white text: the pixels under it are camera content, not a
   themed surface.
   JS contracts kept: .active on .audio-btn and .call-tile-pin; .is-speaking
   on .call-tile; data-layout on .call-stage; .is-open / .is-dragging on the
   chat overlay; .off on .call-perms-toggle; .active on level segments;
   .is-playing / .is-parked on the music player.
   ========================================================================== */

/* ---- Frame --------------------------------------------------------------- */
.voice-channel-area,
.voice-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.voice-stage { overflow: hidden; }
.voice-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 0;
  padding: var(--space-lg);
}
.voice-card .call-stage { flex: 1; min-height: 0; }

.voice-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.voice-card-title h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
.voice-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}
.voice-status-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--text-muted); }
.voice-status-dot--live { background: var(--accent-color); }

.voice-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.voice-chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.voice-chat-toggle:hover { border-color: var(--border-strong); background: var(--bg-hover); color: var(--text-primary); }
.voice-chat-toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* Nobody here yet: an icon and a sentence. */
.voice-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-muted);
  text-align: center;
}
.voice-empty-icon { margin-bottom: var(--space-xs); color: var(--text-muted); font-size: var(--font-size-lg); }
.voice-empty p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.voice-empty p strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.voice-empty span { color: var(--text-muted); font-size: var(--font-size-xs); }

/* Speaking, in the channel list's avatar row. */
.sidebar-voice-avatar.voice-speaking { border-color: var(--accent-color); }

/* ---- Tiles --------------------------------------------------------------- */
.call-stage { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); min-height: 0; }
.call-stage[data-layout="grid"] .call-stage-focus { display: none; }

/* A lone 16:9 tile is wider than the stage is tall: cap it to the stage's
   height (the grid is the size container), or its bottom edge got clipped. */
.call-tile-grid {
  container-type: size;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: center;
  gap: var(--space-sm);
  min-height: 0;
  padding: 4px;
  overflow-y: auto;
}
.call-tile-grid:not(.call-tile-grid--filmstrip) > .call-tile { max-height: 100cqh; }
.call-tile-grid--filmstrip {
  container-type: normal;
  flex: none;
  display: flex;
  align-content: initial;
  height: 104px;
  overflow-x: auto;
  overflow-y: hidden;
}
.call-tile-grid--filmstrip .call-tile { flex: 0 0 auto; width: 170px; min-height: 0; }
.call-tile-grid--filmstrip .call-tile .call-tile-avatar { width: 44px; height: 44px; font-size: var(--font-size-md); }

.call-stage-focus { flex: 1; display: flex; min-height: 0; padding: 4px 4px 0; }
.call-stage-focus .call-tile { flex: 1; aspect-ratio: auto; min-height: 0; max-height: none; }
.call-stage-focus .call-tile .call-tile-actions { opacity: 1; }

.call-tile {
  position: relative;
  min-height: 140px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  transition: border-color 150ms ease;
}
/* Speaking: an accent ring drawn over whatever the tile shows. */
.call-tile.is-speaking { border-color: var(--accent-color); outline: 2px solid var(--accent-color); outline-offset: -2px; }
.call-tile video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.call-tile--local:not(.call-tile--screen) video { transform: scaleX(-1); }
.call-tile--avatar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); }

.call-tile-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

/* Over video: its own plate and white text (see the header note). */
.call-media-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 56px);
  padding: 2px 8px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.call-tile-ptt {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.call-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.call-tile:hover .call-tile-actions,
.call-tile-actions:focus-within { opacity: 1; }
@media (hover: none) { .call-tile-actions { opacity: 1; } }
.call-tile-pin,
.call-media-fullscreen-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.call-tile-pin:hover,
.call-media-fullscreen-btn:hover { background: rgba(0, 0, 0, 0.8); }
.call-tile-pin.active { background: var(--accent-color); color: var(--accent-text); }

.call-tile:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.call-tile:fullscreen video { width: 100%; height: 100%; border-radius: 0; }
.call-tile:fullscreen .call-tile-actions { opacity: 1; }

.call-tile-badges {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.call-tile-state { display: flex; align-items: center; }
.call-tile-status {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-danger);
  font-size: 11px;
}
/* Connection quality: three bars, coloured by level. */
.call-tile-quality {
  box-sizing: content-box;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.6);
}
.call-tile-quality[data-level=""] { display: none; }
.call-tile-quality i { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.3); }
.call-tile-quality i:nth-child(1) { height: 4px; }
.call-tile-quality i:nth-child(2) { height: 8px; }
.call-tile-quality i:nth-child(3) { height: 12px; }
.call-tile-quality[data-level="2"] i { background: var(--color-success); }
.call-tile-quality[data-level="1"] i:nth-child(-n+2) { background: var(--color-warning); }
.call-tile-quality[data-level="0"] i:nth-child(1) { background: var(--color-danger); }

/* ---- Controls: one row of round buttons ------------------------------- */
.call-controls-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 var(--space-xs);
}
.audio-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-round);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.audio-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); color: var(--text-primary); }
.audio-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
/* Muted / deafened: the warning state, filled. */
.audio-btn.active,
.audio-btn.active:hover { border-color: var(--color-danger); background: var(--color-danger); color: var(--text-on-danger); }
/* Camera on, sharing the screen, noise suppression on: good states, accent. */
.audio-btn--video.active,
.audio-btn--video.active:hover,
.audio-btn--screen.active,
.audio-btn--screen.active:hover { border-color: var(--accent-color); background: var(--accent-color); color: var(--accent-text); }
.audio-btn.audio-btn--ns.active,
.audio-btn.audio-btn--ns.active:hover { border-color: var(--accent-color); background: var(--accent-light); color: var(--accent-color); }
.audio-btn--end,
.audio-btn--end:hover { border-color: var(--color-danger); background: var(--color-danger); color: var(--text-on-danger); }
.audio-btn--end:hover { filter: brightness(1.08); }

/* ---- Chat over the stage (floats) -------------------------------------- */
.voice-chat-overlay {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: min(420px, 92%);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: transform 220ms var(--island-ease), opacity 180ms ease;
}
.voice-chat-overlay.is-open { opacity: 1; pointer-events: auto; transform: none; }
.voice-chat-overlay.is-dragging { transition: none; }
.voice-chat-overlay-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 12px var(--space-md);
  border-bottom: 1px solid var(--border-color);
  cursor: grab;
  user-select: none;
}
.voice-chat-overlay.is-dragging .voice-chat-overlay-header { cursor: grabbing; }
.voice-chat-overlay-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.voice-chat-overlay-title i { color: var(--text-muted); }
.voice-chat-overlay-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.voice-chat-overlay-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.voice-chat-overlay > .chat-messages { flex: 1; min-height: 0; }
/* Resize grip: three short diagonal strokes in the corner. */
.voice-chat-overlay-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 18px;
  height: 18px;
  border-bottom-right-radius: var(--radius-lg);
  background: linear-gradient(135deg,
    transparent 0 55%, var(--border-strong) 55% 62%,
    transparent 62% 72%, var(--border-strong) 72% 80%,
    transparent 80% 90%, var(--border-strong) 90% 100%);
  cursor: nwse-resize;
}

/* ---- Music player ------------------------------------------------------ */
.voice-music-player {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 360px);
  align-items: stretch;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}
.voice-music-player__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--text-secondary); }
.voice-music-player__meta strong { overflow: hidden; color: var(--text-primary); font-size: var(--font-size-md); text-overflow: ellipsis; white-space: nowrap; }
.voice-music-player__hint { color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.4; }
.voice-music-player__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  color: var(--accent-color);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.voice-music-player__stage { display: flex; min-width: 0; }
.voice-music-player__frame,
.voice-music-player__noembed {
  flex: 1;
  width: 100%;
  min-height: 118px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.voice-music-player__noembed { display: flex; align-items: center; padding: var(--space-md); color: var(--text-secondary); font-size: var(--font-size-xs); }
.voice-music-player__link { color: var(--accent-color); font-size: var(--font-size-xs); text-decoration: none; }
.voice-music-player__link:hover { text-decoration: underline; }
.voice-music-player__controls { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.voice-music-ctl {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.voice-music-ctl:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.voice-music-ctl.is-playing { border-color: var(--accent-color); background: var(--accent-light); color: var(--accent-color); }
.voice-music-ctl--stop:hover { border-color: var(--color-danger); color: var(--color-danger); }
.voice-music-volume { flex: 1; min-width: 60px; max-width: 120px; accent-color: var(--accent-color); cursor: pointer; }
.voice-music-anchor { min-height: 168px; margin-top: var(--space-md); }
.voice-music-player--portal { z-index: 60; margin: 0; }
.voice-music-player--portal.is-parked { opacity: 0; pointer-events: none; }

/* ---- Before the first join: what the call needs ------------------------ */
.call-perms-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
}
.call-perms-card {
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
}
.call-perms-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  overflow: hidden;
  padding: var(--space-xl) var(--space-md) var(--space-sm);
  text-align: center;
}
.call-perms-brand-icon { color: var(--accent-color); font-size: 24px; }
.call-perms-brand-text { display: grid; gap: 4px; }
.call-perms-title { margin: 0; color: var(--text-primary); font-family: var(--font-display); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: 1.25; }
.call-perms-subtitle { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.45; }
.call-perms-card--cam-active .call-perms-brand { height: 200px; padding: 0; background: #000; }
.call-perms-cam-preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.call-perms-content { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; padding: var(--space-md); }
.call-perms-list { display: flex; flex-direction: column; }
.call-perms-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.call-perms-item + .call-perms-item { border-top: 1px solid var(--border-color); }
.call-perms-item-icon { flex-shrink: 0; width: 20px; color: var(--text-secondary); font-size: 15px; text-align: center; }
.call-perms-icon--mic,
.call-perms-icon--cam,
.call-perms-icon--screen { background: none; }
.call-perms-item-body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.call-perms-item-name { color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.25; }
.call-perms-item-desc { color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.35; }
.call-perms-badge { display: grid; flex-shrink: 0; place-items: center; color: var(--text-muted); font-size: 16px; }

.call-perms-toggle {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.call-perms-toggle.off { background: var(--border-strong); }
.call-perms-toggle-knob {
  position: absolute;
  top: 3px;
  left: 21px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: var(--accent-text);
  transition: transform 150ms ease;
}
.call-perms-toggle.off .call-perms-toggle-knob { background: var(--text-secondary); transform: translateX(-18px); }

.call-perms-tester { display: flex; flex-direction: column; gap: var(--space-sm); padding: 12px 0 0; border-top: 1px solid var(--border-color); }
.call-perms-tester-row { display: flex; align-items: center; gap: var(--space-sm); }
.call-perms-tester-label { display: flex; flex-shrink: 0; align-items: center; gap: 6px; width: 96px; color: var(--text-secondary); font-size: var(--font-size-xs); }
.call-perms-level-bar { display: flex; flex: 1; align-items: center; gap: 3px; height: 14px; }
.call-perms-level-seg { flex: 1; height: 100%; border-radius: 2px; background: var(--border-strong); }
.call-perms-level-seg.active { background: var(--accent-color); }
.call-perms-speaker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.call-perms-speaker-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.call-perms-grant-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color 150ms ease;
}
.call-perms-grant-btn:hover:not(:disabled) { background: var(--accent-hover); }
.call-perms-grant-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.call-perms-grant-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.call-perms-error { margin: 0; color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.4; text-align: center; }
.call-perms-error:empty { display: none; }

/* ---- A whisper call ---------------------------------------------------- */
.dm-call-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dm-call-topbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 var(--space-md);
}
.dm-call-back-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.dm-call-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.dm-call-header-timer { color: var(--text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
/* Who the call is with, beside the back button; the timer keeps the right. */
.dm-call-header-name {
  flex: 1;
  min-width: 0;
  margin-left: var(--space-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.dm-call-stage { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dm-call-view .call-stage { padding: var(--space-md); }
.dm-call-view .call-tile { min-height: 200px; max-height: 420px; }

.dm-call-avatar-area { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-lg); }
.dm-call-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  width: min(100%, 480px);
  padding: var(--space-xl);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
}
.dm-call-avatar-ring {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 3px solid var(--accent-color);
  border-radius: var(--radius-round);
  transition: border-color 200ms ease;
}
.dm-call-avatar-ring--ringing { border-color: var(--border-strong); }
.dm-call-avatar {
  width: 108px;
  height: 108px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}
.dm-call-tile-info { display: grid; justify-items: center; gap: 4px; }
.dm-call-user-name { color: var(--text-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.dm-call-user-status { color: var(--text-muted); font-size: var(--font-size-xs); }

/* Back-to-call chip while browsing elsewhere in the whisper (floats). */
.dm-call-pip {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  animation: v2-pip-in 200ms ease both;
  transition: border-color 150ms ease;
}
.dm-call-pip:hover { border-color: var(--text-muted); }
.dm-call-pip > i:first-of-type { color: var(--accent-color); font-size: 13px; }
.dm-call-pip-info { display: grid; gap: 1px; }
.dm-call-pip-name { color: var(--text-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; }
.dm-call-pip-timer { color: var(--accent-color); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.dm-call-pip-expand { margin-left: 4px; color: var(--text-muted); font-size: 12px; transition: color 150ms ease; }
.dm-call-pip:hover .dm-call-pip-expand { color: var(--text-primary); }
.dm-call-pip-pulse { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--accent-color); }

@keyframes v2-pip-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Phones ------------------------------------------------------------- */
@media (max-width: 760px) {
  .voice-music-player { grid-template-columns: 1fr; }
  .voice-music-anchor { min-height: 300px; }
}
@media (max-width: 640px) {
  .voice-card { padding: var(--space-md); }
  .voice-card-title h2 { font-size: var(--font-size-xl); }
  .audio-btn { width: 42px; height: 42px; font-size: 15px; }
  .call-controls-bar { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-chat-overlay { transition: opacity 120ms ease; transform: none; }
  .dm-call-pip { animation: none; }
}

/* ---- Desktop: the chat docks beside the stage ------------------------- */
/* Floating over the stage it covered the tiles and the call controls. With
   room for both, the chat is a column on the right edge and the stage
   narrows to make space; nothing overlaps. (Dragging and resizing are for
   the floating sheet only, so their grip and any saved layout stand down.) */
@media (min-width: 1001px) {
  .voice-channel-area { flex-direction: row; }
  .voice-channel-area > .voice-stage { min-width: 0; }
  .voice-channel-area > .voice-chat-overlay {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 360px !important;
    height: auto !important;
    flex: none;
    margin: var(--space-md) var(--space-md) var(--space-md) 0;
    box-shadow: none;
    border-color: var(--border-color);
    background: var(--bg-secondary);
  }
  .voice-channel-area > .voice-chat-overlay:not(.is-open) { display: none; }
  .voice-channel-area > .voice-chat-overlay.is-open { animation: voice-chat-dock-in 220ms var(--island-ease); }
  .voice-chat-overlay .voice-chat-overlay-resize { display: none; }
  .voice-chat-overlay .voice-chat-overlay-header { cursor: default; }
}
@keyframes voice-chat-dock-in { from { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
  .voice-channel-area > .voice-chat-overlay.is-open { animation: none; }
}

/* ---- Voice channel, 2026-11-02 rework ------------------------------------
   The channel's name is in the header bar already, so the stage opens with
   one quiet row (state on the left, chat + join on the right), the tiles,
   and one dock of controls. The chat is a plain column on the right on
   desktop: a hairline, no card, no shadow. */
.voice-card { gap: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.voice-card-header { min-height: 40px; flex-wrap: nowrap; }
.voice-card-status {
  margin-top: 0;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.voice-status-sep { width: 3px; height: 3px; border-radius: var(--radius-round); background: var(--border-strong); }
.voice-chat-toggle {
  justify-content: center;
  width: 40px;
  padding: 0;
  border-radius: var(--radius-round);
  font-size: 15px;
}
.voice-chat-toggle.is-on { border-color: var(--border-strong); background: var(--bg-secondary); color: var(--text-primary); }

/* A lone tile is a sensible card in the middle, not the whole stage. */
.call-tile-grid:has(> .call-tile:only-child) { justify-content: center; grid-template-columns: minmax(0, 720px); }

/* Controls: one floating dock (it sits over the stage's edge). */
.call-controls-bar {
  align-self: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}
.call-controls-bar .audio-btn { border-color: transparent; background: transparent; }
.call-controls-bar .audio-btn:hover { border-color: transparent; background: var(--bg-hover); }
.call-controls-bar .audio-btn.active,
.call-controls-bar .audio-btn.active:hover { border-color: var(--color-danger); background: var(--color-danger); color: var(--text-on-danger); }
.call-controls-bar .audio-btn--video.active,
.call-controls-bar .audio-btn--video.active:hover,
.call-controls-bar .audio-btn--screen.active,
.call-controls-bar .audio-btn--screen.active:hover { border-color: var(--accent-color); background: var(--accent-color); color: var(--accent-text); }
.call-controls-bar .audio-btn--end,
.call-controls-bar .audio-btn--end:hover { width: 56px; border-radius: var(--radius-pill); border-color: var(--color-danger); background: var(--color-danger); color: var(--text-on-danger); }
.call-controls-sep { width: 1px; height: 24px; margin: 0 2px; background: var(--border-color); }

.voice-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-round);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: var(--font-size-md);
}
.voice-empty { flex: 1; justify-content: center; }

@media (min-width: 1001px) {
  .voice-channel-area > .voice-chat-overlay {
    margin: 0;
    border: 0;
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
  }
  /* The toggle in the row above opens and closes it; no second close. */
  .voice-chat-overlay .voice-chat-overlay-close { display: none; }
  .voice-chat-overlay .voice-chat-overlay-header { min-height: 56px; padding-top: 0; padding-bottom: 0; }
}
.voice-card-status { min-width: 0; white-space: nowrap; }
.voice-card-actions { flex-wrap: nowrap; flex: none; }
/* Phones and tablets: the chat covers the stage as a plain sheet (its own X
   closes it); no floating card, no drag, no resize grip. */
@media (max-width: 1000px) {
  .voice-chat-overlay {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0;
    border-radius: 0;
    background: var(--bg-primary);
    box-shadow: none;
  }
  .voice-chat-overlay .voice-chat-overlay-resize { display: none; }
  .voice-chat-overlay .voice-chat-overlay-header { cursor: default; }
}
@media (max-width: 640px) {
  .voice-card { padding: var(--space-sm) var(--space-md) var(--space-md); }
}
.voice-status-dot, .voice-status-sep { flex: none; }

/* Icons never change: a microphone stays a microphone, headphones stay
   headphones, the camera stays a camera. Off is the red fill plus one slash
   drawn across the same icon. */
.audio-btn[data-audio-ctl] i { position: relative; }
.audio-btn[data-audio-ctl].active i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 130%;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px var(--color-danger);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* A photo in an audio tile fills its circle. */
.call-tile-avatar { overflow: hidden; }
.call-tile-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.call-tile-grid:has(> .call-tile:only-child) .call-tile-avatar { width: 96px; height: 96px; }
/* One person: a modest card, not most of the screen. */
.call-tile-grid:has(> .call-tile:only-child) { grid-template-columns: minmax(0, 560px); }

/* Another channel's live card in the nest's list: compact. */
.avp-card { gap: 8px; padding: 10px 12px; }
.avp-summary { display: none; }
.avp-btn { height: 32px; font-size: var(--font-size-xs); }