/* Live wall, session-viewer and playback page layout. Global stylesheet rather than Blazor
   CSS isolation — this app doesn't link a scoped-CSS bundle. The player and timeline are
   styled by StravixVMS.Player's player.css. */

/* ── Page shell ──────────────────────────────────────────────────────────── */

.multiview-content {
    background: transparent; /* let the page's faint wolf logo show through behind the wall */
    /* overflow visible so the drawer-toggle handle can straddle the right edge (overhang
       past this box, over the drawer). The grid is sized to fit, so nothing else spills. */
    overflow: visible;
    display: flex;
    align-items: stretch;
    position: relative; /* anchors the drawer-toggle handle */
}

/* Drawer show/hide handle — small circle that straddles the line between the main
   content area and the open drawer (Jira-style), then sits flush at the page's right
   edge when the drawer is collapsed.

   It's anchored to the right edge of the content area (which, with a persistent drawer
   open, IS the drawer's left edge — the drawer panel is flush, its ml gutter removed),
   then transform: translateX(50%) pushes it out by half its width so its CENTRE lands
   on that line — half on the drawer, half on the page — regardless of the handle's size.
   The content area is overflow:visible so the overhang shows.

   When collapsed the .is-collapsed modifier drops the transform so the handle pulls back
   fully inside the (now full-width) content area — completely off the drawer, flush at
   the page edge, never clipped at the viewport. */
.multiview-drawer-toggle {
    position: absolute;
    top: 20px;
    right: 0;
    /* Above MudBlazor's drawer (z-index 1100) so the handle always sits on top of the
       drawer edge; still below the app bar (1300). */
    z-index: 1200;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Straddle the drawer line (Jira-style: half on the drawer, half on the page). Applied
   while the drawer is OPEN on the MudDrawer pages (Live / Playback list / Cases / Audit),
   whose content area is right at the drawer's flush left edge with no padding clipping it.
   translateX(50%) pushes the handle out by half its width so its centre sits on that line.
   When the drawer collapses the modifier is dropped, so the handle pulls back flush inside
   the now full-width content area (off the drawer, at the page edge). */
.multiview-drawer-toggle--straddle {
    transform: translateX(50%);
}

.multiview-drawer-toggle:hover {
    background: rgba(148, 163, 184, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* A toolbar's right-aligned buttons sit in the same band as the handle, so reserve its
   width on the row. Sized for the collapsed state, where all 28px are inside the content
   area rather than half-straddling the drawer edge. */
.drawer-toggle-inset {
    padding-right: 24px;
}

/* The room rail's list (tick rooms on/off) is now built from MudBlazor components in
   RoomsWidget.razor; its few residual rules live in widgets.css. */

/* ── Grid cells (one per camera tile inside a room card's CameraGrid) ─────── */

.camera-cell {
    position: relative;
    overflow: hidden;
    background: transparent;
}

.camera-cell__empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.camera-cell__empty-hint .mud-button-root {
    pointer-events: auto;
}

.camera-cell__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0d12;
}

/* Shown while a new stream is being fetched for a cell that already has a stream
   rendered (e.g. seek, mode flip). Small corner badge — does not occlude the player
   or timeline underneath. */
.camera-cell__loading-overlay {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ── Room players (the live wall as a grid of room cards) ─────────────────── */
/* Outer wall grid — a CSS grid whose cells are room blocks; each card spans its packed
   rectangle via the inline grid-column/grid-row the page sets from RoomLayout. (This and
   the card's aspect-fit are the bits MudBlazor can't express; everything else is MudBlazor.) */
.live-room-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    width: 100%;
    height: 100%;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
    background: transparent; /* float over the page's wolf-logo background */
}

/* The packed cell: fills its grid area and just centres the card inside it, so the
   leftover space (a card never fills a cell whose aspect differs from the video's)
   falls evenly around the card. Also the query container the card sizes against. */
.room-block {
    --rb-pad: 6px;          /* surface gap between the video and the card border */
    --rb-header-h: 42px;
    --rb-bar-h: 60px;       /* tall enough for the PO's large action buttons */
    --rb-chrome: calc(var(--rb-header-h) + var(--rb-bar-h) + 2 * var(--rb-pad));
    min-width: 0;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* The room card is a MudPaper (so its surface + border come from the theme, matching the
   rail). The only thing CSS adds is the layout MudBlazor can't express: the card is
   shrink-wrapped to the video so the footer bar hugs the streams. Width is the largest
   video-aspect box that fits the cell after the header + bar (height-bound), capped by the
   cell width — carried on the card so the header/bar can't widen it past the video; the
   cameras area fills 100%. Qualified with .mud-paper to win over MudPaper's own rules. */
.room-card.mud-paper {
    --rb-ar: calc((var(--cols) * 16) / (var(--rows) * 9));
    display: flex;
    flex-direction: column;
    width: min(100cqw, calc((100cqh - var(--rb-chrome)) * var(--rb-ar) + 2 * var(--rb-pad)));
    max-width: 100%;
    max-height: 100%;
    padding: var(--rb-pad);
    box-sizing: border-box;
    overflow: hidden;
}

/* Recording: inset error glow inside the padding, so the surface gap shows it around the
   video. No layout shift (border, not size). */
.room-card--recording.mud-paper {
    box-shadow: inset 0 0 0 3px var(--mud-palette-error, #f44336);
    border-color: transparent;
}

/* Header / bar carry only their fixed heights (the chrome the width formula accounts for);
   their layout is the MudStack's. The status chip's runtime is tabular so it doesn't jitter. */
.room-card__header { flex: 0 0 auto; height: var(--rb-header-h); box-sizing: border-box; padding: 0 2px 6px; }
.room-card__bar    { flex: 0 0 auto; height: var(--rb-bar-h);    box-sizing: border-box; padding: 4px 2px 0; }
.room-card__rec    { font-variant-numeric: tabular-nums; }

/* The card is itself a width container so the footer bar can adapt to the card the
   width formula produced (the .room-block container measures the CELL, which can be
   much wider than the card when the cell is height-constrained). On a narrow card
   the Large action buttons + the 130px Record don't fit side by side and the card's
   overflow:hidden clipped Record off the right edge — shrink the bar's buttons
   instead of losing the primary action. */
.room-card.mud-paper { container-type: inline-size; }

/* Continuous instead of the single `@container (max-width: 460px)` breakpoint that used to
   flip the whole bar at once.

   The numbers come off the running page, not MudBlazor's docs: Size.Large computes to a
   36px glyph in 12px of padding. Ceiling is ~90% of that measured size (2.025rem = 32.4px),
   floor is 1.35rem where the old breakpoint sat, both ramping over a 300px→520px card.

   Matching .mud-icon-button rather than the component keeps MudMenu's activator (same
   Size.Large) the same size as its MudIconButton neighbours. Do NOT touch --rb-bar-h: it
   feeds the card's width formula, so changing it resizes every card's video box. */
.room-card__bar .mud-icon-button {
    padding: clamp(5px, calc(2.73cqw - 3.18px), 11px);
}

.room-card__bar .mud-icon-button .mud-svg-icon {
    font-size: clamp(1.35rem, calc(4.91cqw + 6.87px), 2.025rem);
}

/* The card is overflow:hidden, so a min-width that survives onto a narrow card clips the
   primary action off the right edge — the bug the old breakpoint existed to prevent. */
.room-card__record.mud-button-root {
    min-width: min(130px, 28cqw);
    padding-left: clamp(10px, 3cqw, 16px);
    padding-right: clamp(10px, 3cqw, 16px);
}

/* The room's cameras — an inner CSS grid sized to the card's ColSpan×RowSpan; aspect-ratio
   + width:100% make it wrap the video so the bar sits right under it. Assumes ~16:9 tiles
   (the per-camera fit-box letterboxes any odd aspect within its tile — letterbox, not crop). */
.room-block__cameras {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: var(--rb-ar);
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
    gap: 2px;
    background: #000; /* the video area + any letterbox stays black */
}

/* Folder-privacy placeholder: shown instead of the camera grid while a recording is
   being filed into a folder the viewer can't see. Same element slot (and class) as
   the camera grid so the card's aspect-ratio width formula is undisturbed. */
.room-block__restricted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #bbb; /* on the black video slot — #667 fell below WCAG AA for body text */
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.multiview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ── Session-viewer shell (Case view + room playback) ─────────────────────── */
/* Both viewers are a COLUMN: a full-width header band, then a row holding the main
   content and the tools drawer. The header used to live inside the left column, which
   let the drawer run up beside the page title — the drawer belongs to the content
   region, not to the whole page, so the split is header-over-[content | drawer].
   .viewer-header carries the horizontal padding the content columns have, so the title
   still lines up with what's beneath it now that it's no longer inside them. */
.viewer-header {
    flex: 0 0 auto;
    padding: 16px 24px 0;
}

/* The shared .page-header bottom margin (24px) is tuned for a header sitting directly
   above page content; as its own band above a content row it only needs to clear the
   divider, and the content column supplies its own top padding. */
.viewer-header .page-header {
    margin-bottom: 12px;
}

/* The content row. Height math lives HERE rather than on the container so the header
   band can take its natural height first; min-height:0 is what lets an overflowing
   child (the tile grid, the session table) scroll instead of stretching the row. */
.room-playback-body,
.case-view-body {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ── Case view ────────────────────────────────────────────────────────────── */
/* The session table is the main content and the Export/Details tools drawer sits
   beside it. Reuses .playback-side-drawer + .playback-side-tabs for the drawer chrome
   (see below). */
.case-view-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height, 64px));
    box-sizing: border-box;
    overflow: hidden;
}

.case-view-container .case-view-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    /* No top padding: the header band above already spaces the content. */
    padding: 0 24px 24px;
    position: relative; /* anchors the .multiview-drawer-toggle chevron */
}

.case-view-container .playback-side-drawer {
    /* Same width as the Playback drawer — the two carry the same collapsible panels now,
       Audit inline among them. */
    flex: 0 0 525px;
    width: 525px;
    /* Stops 24px short of the row bottom so the drawer ends level with the content area
       beside it, which ends at its own 24px bottom padding. */
    height: calc(100% - 24px);
    overflow: hidden;
    border-left: 1px solid rgba(148, 163, 184, 0.1);
}

/* ── Playback page ────────────────────────────────────────────────────────── */
/* Room playback uses plain flexbox (rather than MudBlazor's drawer) so the right panel
   sits reliably beside the tile grid without fighting MudBlazor's absolute-positioned
   drawer top offset. Column here, row in .room-playback-body — see the viewer-shell
   block above. */
.room-playback-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height, 64px));
    box-sizing: border-box;
    overflow: hidden;
}

.room-playback-container .room-playback {
    flex: 1 1 auto;
    min-width: 0;
    /* Override the standalone height so the flex parent (the body row) controls it. */
    height: 100% !important;
    /* No top padding: the header band above already spaces the content. */
    padding-top: 0;
}

.room-playback-container .playback-side-drawer {
    /* Trimmed a little now that Audit is a header dialog (was 700px). */
    flex: 0 0 525px;
    width: 525px;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid rgba(148, 163, 184, 0.1);
}

/* Header chip strip (Case + Folder + data-field values) — the strip should claim
   the header's free width instead of just hugging its own content. page-header
   is shared by every page (PageHeader.razor); .page-header__text has flex:1 so it
   normally hogs the free space and .page-header__actions only ever hugs its own
   content (flex-shrink:0, no grow) — fine for a couple of buttons, but a chip
   strip needs the opposite: the title/subtitle should stay their natural size and
   the strip should grow AND be allowed to shrink (so it scrolls instead of
   blowing out the row). Scoped to this page's usage only — every other page's
   header is unaffected.
   Still needed after the header moved to full width: widening the band gives the strip
   more room but doesn't change WHO claims the slack, and without this the title still
   takes it all and the strip hugs its chips. The selector keeps matching because the
   header is a descendant of the container either way. */
.room-playback-container .page-header__text {
    flex: 0 1 auto;
}

.playback-side-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Compact the drawer tabs (Export/Details/Transcript/Notes) — smaller label + icon and a
   shorter min-height — so all four fit the narrower drawer without MudTabs' scroll arrows.
   The per-tab 160px floor is removed via MinimumTabWidth on the component (an inline style
   CSS can't override); this just shrinks the type. Shared by the Playback + Case drawers. */
.playback-side-tabs .mud-tab {
    min-height: 40px;
    font-size: 0.75rem;
}

.playback-side-tabs .mud-tab .mud-tab-icon-text {
    margin-right: 4px;
}

.playback-side-tabs .mud-tab .mud-icon-root {
    font-size: 1.1rem;
}

.playback-side-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.playback-side-tabs .mud-tab-panel {
    /* A touch more room than the old flush-ish 16px so the drawer tabs don't feel
       cramped — more at the bottom so the Export button / actions aren't jammed to
       the edge. */
    padding: 20px 20px 24px;
}

/* MudBlazor reuses the "mud-tab-panel" class for both the tab-strip button and
   the content pane below it, with no distinguishing class of its own — the
   content pane is the one that's a direct child of .mud-tabs-panels, the button
   isn't. Giving it an explicit height lets .playback-drawer-content's
   min-height:100% inside it resolve correctly. Scoped to the direct child so
   this doesn't also stretch the tab-strip button. */
.playback-side-tabs .mud-tabs-panels > .mud-tab-panel {
    height: 100%;
    box-sizing: border-box;
}

/* Playback tools drawer as a vertical accordion (MudExpansionPanels), not horizontal tabs —
   6 sections don't fit without scroll arrows. All headers visible; the set scrolls. */
.playback-side-panels {
    height: 100%;
    overflow-y: auto;
}

/* Don't let the old tab pane's min-height:100% stretch each panel — the accordion
   scrolls, not the panel. */
.playback-side-panels .playback-drawer-content {
    min-height: 0;
}

/* MudDivider's default class ("mud-divider-fullwidth") is flex: 1 0 auto, meant
   to grow to fill a flex row (e.g. stretching between icons in a toolbar).
   Inside this flex column, that would make any divider compete with
   .playback-drawer-spacer for vertical space instead. A divider placed directly
   in this column is a plain visual rule, never a spacer. */
.playback-drawer-content > .mud-divider {
    flex: 0 0 auto;
}

/* Bottom-aligns the Details block (Room/Cameras/.../Edit/Delete/Audit) against
   the drawer's bottom edge, with the Export section staying at the top — shared
   by Playback's Details tab (inside .mud-tab-panel, whose own height comes from
   .mud-tabs-panels below) and the Case page's drawer (which has no MudTabs, so
   .playback-drawer-scroll below provides the height itself). min-height:100%
   needs a definite ancestor height to resolve against; both ancestors provide
   one (a flex item's resolved size, or an explicit height:100%). */
.playback-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
}

/* The Case page's drawer has no MudTabs, so this provides its own scroll
   container instead of relying on .mud-tabs-panels. */
.playback-drawer-scroll {
    height: 100%;
    overflow-y: auto;
}

/* The expanding gap itself, shared by both drawers: grows to push the Details
   block down when there's room, shrinks to 0 (not below) once content needs
   more space than the drawer has, at which point the ancestor scroll container
   takes over. */
.playback-drawer-spacer {
    flex: 1 1 auto;
}

/* Transcript: highlight the segment row playing at the current cursor (CrudTable
   RowClassFunc → the <tr>). Re-applied each render as the cursor advances. */
.transcript-row--active {
    background: rgba(var(--mud-palette-primary-rgb), 0.18) !important;
}

/* A line the shown language hasn't translated yet: the original, set apart from translated text. */
/* A transcript line keeps its line breaks and wraps; a long unbroken run (a drawn-out "ohhh", a
   URL) breaks inside the word, or it would set the Text column's minimum width and push the whole
   table into a sideways scroll. */
.transcript-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.transcript-fallback {
    font-style: italic;
}

/* Transcript speaker identity — row chip + legend chip share this palette
   (TranscriptSpeakers.ColorIndex picks the slot; same speaker, same colour
   everywhere). A fixed 8-hue set kept OFF --mud-palette-* on purpose: those already
   carry status meaning here (success/warning/error), so a speaker's colour must
   never look like one. The hues are mid-saturation so they hold their own contrast
   on a light or a dark surface — this app is dark-only today (ThemeDefinitions has
   no PaletteLight yet), but the palette doesn't assume that stays true. */
:root {
    --speaker-color-0-rgb: 57, 135, 229;   /* blue */
    --speaker-color-1-rgb: 217, 89, 38;    /* orange */
    --speaker-color-2-rgb: 25, 158, 112;   /* teal */
    --speaker-color-3-rgb: 201, 133, 0;    /* gold */
    --speaker-color-4-rgb: 213, 81, 129;   /* magenta */
    --speaker-color-5-rgb: 90, 179, 90;    /* green */
    --speaker-color-6-rgb: 144, 133, 233;  /* violet */
    --speaker-color-7-rgb: 230, 103, 103;  /* coral */
}

/* Row chip: a plain span, not a MudChip — one per transcribed line, so it stays
   cheap and out of the tab order. Never clickable on its own: a click plays from the
   line like the rest of the row (naming a speaker is the legend's pencil — see
   Playback.razor's AssignSpeakerAsync). */
.speaker-chip {
    display: inline-block;
    max-width: 11rem;       /* it sits under the time now — a long typed name ellipsizes, not the column */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    margin-top: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
}

/* Colour slot only: .speaker-chip and .legend-chip build their look from --speaker-rgb. */
.speaker-color-0 { --speaker-rgb: var(--speaker-color-0-rgb); }
.speaker-color-1 { --speaker-rgb: var(--speaker-color-1-rgb); }
.speaker-color-2 { --speaker-rgb: var(--speaker-color-2-rgb); }
.speaker-color-3 { --speaker-rgb: var(--speaker-color-3-rgb); }
.speaker-color-4 { --speaker-rgb: var(--speaker-color-4-rgb); }
.speaker-color-5 { --speaker-rgb: var(--speaker-color-5-rgb); }
.speaker-color-6 { --speaker-rgb: var(--speaker-color-6-rgb); }
.speaker-color-7 { --speaker-rgb: var(--speaker-color-7-rgb); }

/* Row chip: tinted, never selectable. !important beats MudBlazor's own chip colour rules
   regardless of load order. */
.speaker-chip {
    color: rgb(var(--speaker-rgb)) !important;
    background: rgba(var(--speaker-rgb), 0.16) !important;
    border: 1px solid rgba(var(--speaker-rgb), 0.4) !important;
}

/* Legend chip (the speaker filter): outlined until selected, then filled in its own hue with
   dark text, so the active filter reads at a glance. */
.legend-chip {
    color: rgb(var(--speaker-rgb)) !important;
    background: transparent !important;
    border: 1px solid rgba(var(--speaker-rgb), 0.6) !important;
}
.legend-chip.mud-chip-selected {
    background: rgb(var(--speaker-rgb)) !important;
    border-color: rgb(var(--speaker-rgb)) !important;
    color: #14171d !important;
    font-weight: 700;
}

/* Language chips: the same outlined-until-selected rule, in the primary colour. */
.transcript-languages .mud-chip.mud-chip-selected {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 700;
}

/* Voice-match proposal pill ("Steve?", pending confirmation) — Playback.razor's own
   row, separate from the legend above. Dashed + warning-toned to read as provisional;
   unlike .speaker-color-N this deliberately DOES use a status colour, since "pending"
   is exactly the status being shown. */
.speaker-chip--proposed {
    border: 1px dashed var(--mud-palette-warning, #ff9800) !important;
    color: var(--mud-palette-warning, #ff9800) !important;
}

/* Details tab's two-column layout: fixed recording facts (Room/Cameras/Date/Duration)
   on the left, Case/Folder/data fields on the right — one shared label/value look, split
   by a vertical rule matching the drawer's own border color. min-width:0 on the columns
   (grid items default to min-width:auto, which ignores wrapping and overflows instead)
   plus overflow-wrap on the values is what actually makes a long camera list or field
   answer wrap inside its own column instead of blowing out the drawer. */
.playback-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
}

.playback-details-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.playback-details-col--right {
    border-left: 1px solid rgba(148, 163, 184, 0.1);
    padding-left: 16px;
}

.playback-details-col .mud-typography-body2 {
    overflow-wrap: break-word;
    word-break: break-word;
}

.playback-details-col .cursor-pointer {
    cursor: pointer;
}

/* Clip-list drag-drop (MudDropZone AllowReorder) feedback. MudBlazor's built-in
   reorder indicator (.mud-drop-item-preview-start) and zone classes ship invisible,
   so the operator gets no sense the drag is working — these make them visible. */
.clip-drop-zone {
    min-height: 44px;
    border: 1px dashed transparent;
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* CanDropClass + ApplyDropClassesOnDragStarted → highlight the zone for the whole drag. */
.clip-drop-zone--active {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.6);
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* The insertion-point indicator drawn where the row will land. */
.clip-drop-zone .mud-drop-item-preview-start {
    height: 3px;
    background: var(--mud-palette-primary);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(var(--mud-palette-primary-rgb), 0.6);
}

/* ── Room (synchronized multi-camera) playback ───────────────────────────── */
/* Full-bleed like the single-camera player: the tile grid fills the viewport and
   the shared transport sits below it. Tile chrome and the timeline are StravixVMS.Player's
   (.stravix-sync*, .stravix-timeline*). */
.room-playback {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 24px;
    height: calc(100vh - var(--mud-appbar-height, 64px));
    box-sizing: border-box;
    position: relative; /* anchors the .multiview-drawer-toggle chevron */
}

/* SyncedPlayback's root fills this box: the tile grid takes the height the transport and
   timeline leave over. */
.room-playback__sync {
    flex: 1 1 auto;
    min-height: 0;
}

.room-playback__transport {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.room-playback__time {
    font-variant-numeric: tabular-nums;
    color: #bbb;
    font-size: 0.85rem;
    white-space: nowrap;
}

.room-playback__timeline {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
}

/* ── Responsive / mobile ─────────────────────────────────────────────────────
   Desktop layout is untouched — these only switch on below the breakpoints. */

/* The room-playback + case viewers put a fixed-width tools drawer beside the main
   content. Below md that drawer can't coexist with the content, so stack them vertically
   and let the page scroll instead of clamping to one viewport height. The chevron toggle
   still hides/shows the drawer, and the header band stays on top either way — it's
   outside the row that restacks. */
@media (max-width: 960px) {
    .room-playback-container,
    .case-view-container {
        height: auto;
        min-height: calc(100vh - var(--mud-appbar-height, 64px));
        overflow: visible;
    }

    /* It's the BODY ROW that flips to a column now (the containers are already columns,
       with the header as their first row). */
    .room-playback-body,
    .case-view-body {
        flex-direction: column;
        overflow: visible;
    }

    .room-playback-container .room-playback {
        height: auto !important;
    }
    /* Give the now-unclamped tile grid a real height to render video into. The package's
       .stravix-sync is height:100% of this wrapper, which is auto here, so the floor goes
       on the grid itself or the container-sized tiles collapse to their borders. */
    .room-playback-container .room-playback__sync .stravix-sync__grid {
        min-height: 56vh;
    }
    .case-view-container .case-view-main {
        height: auto;
        overflow: visible;
    }

    .room-playback-container .playback-side-drawer,
    .case-view-container .playback-side-drawer {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.1);
    }

    /* Stacked, the drawer follows the table card, so it takes the same 24px inset —
       border-box because this app has no global reset and the rule above sets width:100%. */
    .case-view-container .playback-side-drawer {
        padding: 0 24px 24px;
        box-sizing: border-box;
    }
    .playback-side-tabs {
        height: auto;
    }
    .playback-side-tabs .mud-tabs-panels {
        overflow-y: visible;
    }
}

/* On phones the right drawers overlay the content (see app.css) rather than
   pushing it, so the content's right edge IS the viewport edge — the half-pill
   straddle transform would shove the toggle half off-screen. Pin it flush at the
   edge instead, sitting on top of the open drawer. */
@media (max-width: 599.98px) {
    .multiview-drawer-toggle--straddle {
        transform: none;
    }
}


/* The Transcribe split button: MudButtonGroup pads its main button 5px 15px but a menu's icon button
   3px 9px, which would leave the caret shorter. One padding for both. */
.mud-button-group-root.transcribe-split .mud-button-root {
    padding: 3px 9px;
}