/* WHY [BOL-COMPOSER-STABLE-DESKTOP-827]: the idle-only BALANCE-003
   rule yields to the old middle-switch/right-Mute grid when Voice starts.
   STABLE-004 already fixes phones, but viewport media queries miss a narrow
   desktop side panel. Reserve the same three slots in this container only.
   Keep desktop's 88px Orb slot, 44px row and existing Orb scale/renderer.
   A conditional Stop/Listen/approval action gets its own reachable row;
   it must not shift the first-row controls. No mobile or loader changes.
   FALSIFIER: first-row control rects move on Voice/Muted/Stop, Mute leaves
   the middle slot, overlap occurs, or a target is smaller than 44px. */
@media (min-width: 761px) {
  @container (max-width: 520px) {
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control {
      width: 100%;
      grid-template-columns: 88px minmax(44px, 1fr) 154px;
      grid-template-rows: 44px;
      grid-auto-rows: auto;
      column-gap: 0;
      /* 48px hit targets overscan the preserved 44px track by2px. A gap
         exists only if an action row is present; do not overlap its target. */
      row-gap: 4px;
    }
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control > .ops-voice-orb {
      grid-column: 1;
      grid-row: 1;
    }
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control > .ops-voice-modes {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      width: 154px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control > .ops-voice-mute {
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
      min-width: 44px;
      min-height: 48px;
    }
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control > .ops-voice-interrupt {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      min-width: 44px;
      min-height: 44px;
      height: auto;
      white-space: normal;
    }
  }
  @container (max-width: 323px) {
    /* Retain the existing narrow-container icon-only labels and names. */
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control {
      grid-template-columns: 88px minmax(44px, 1fr) 98px;
    }
    .app-shell .ops-assistant form.ops-composer > .ops-voice-control.ops-voice-control > .ops-voice-modes { width: 98px; }
  }
}