/* Call tiles must shrink names before state icons or neighbouring columns. */
.call-tile { min-width: 0; }
.call-tile .tile-name { flex-shrink: 0; }
.call-tile:not(.screen-tile) video { min-height: 0; flex: 1 1 0; }
.call-tile .tile-uname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.call-tile .tile-name > :is(svg, .tile-icon, .ring-label, .screen-audio-badge) { flex: none; }
.call-tile.screen-tile .tile-name { max-width: calc(100% - 16px); color: #f2f3f5; }

/* Keep keyboard focus inside the grid's clipped edges and distinct from speech. */
.stage-grid .call-tile:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -4px; }
.stage-grid.has-focus .call-tile.focused { display: flex; }

@media (max-width: 800px) {
  /* Large calls scroll rather than shrinking avatars over neighbouring tiles. */
  .call-stage:not(.watching) .stage-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(120px, 1fr); align-content: start; }
  .call-stage:not(.watching) .stage-grid .screen-tile { grid-column: auto; }
  .call-stage.chat-open .call-controls.mobile-call-controls .mcc-label { color: var(--muted); }
  .call-stage .stage-title { flex-wrap: wrap; gap: 2px; }
  .call-stage .stage-title .voice-status:not(.ok):not(.alone) {
    display: block; flex-basis: 100%; min-width: 0; margin-left: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}