/* Transcript recording player (AB#10472).

   Replaces the inline style="width:100%" the two transcript views used to carry, per
   AGENTS.md > Styling (custom styles go in .css files, never inline style= attributes).

   Loaded by both transcript hosts, which share no stylesheet -- the admin view renders under
   _CustomerLayout and the public view under _ProjectFrontLayout -- so each links this file itself. */

.transcript-media-player {
    width: 100%;
    /* The old markup used a trailing <br /> for this. The component owns a stylesheet now. */
    margin-bottom: 12px;
}

/* Two jobs here, and the aspect-ratio does both.

   1. A <video> has NO intrinsic aspect ratio until its `loadedmetadata` event, which arrives after
      $(document).ready -- and seconds after it for the 581MB and 650MB recordings this work item
      cites. The admin view measures #MeetingInfoWrapper once at ready and uses that height to
      absolutely position the scrollable transcript body, so a player that resized itself later
      would leave the transcript positioned hundreds of pixels wrong. Declaring the ratio in CSS
      gives the box a definite height at first layout, before any metadata is fetched.

   2. It caps the height without `vh`. `vh` would have been self-referential here: this page is
      embeddable (the admin share modal emits an embed code for /Transcript/{publicKey}) and the
      embed host sizes its iframe from a content height posted out of the frame, so a viewport-
      relative video height inside that iframe depends on the iframe height that depends on it.

   16/9 is the meeting-recording norm; anything else letterboxes against the black background
   rather than distorting, which is the UA default `object-fit: contain` doing the work. */
.transcript-media-player--video {
    aspect-ratio: 16 / 9;
    max-height: 520px;
    background-color: #000;
}

/* Revealed by the media element's `error` event -- see the comment in _TranscriptMediaPlayer.cshtml
   for why the markup between the tags can never serve this purpose. */
.transcript-media-player__error {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-left: 3px solid #c0392b;
    background-color: #fdf3f2;
    color: #7b241c;
}