/* What it is, the player, the words. The root claims its column, or the video's width would follow the
   badge's words and the locale. The video box is 16:9 before metadata, so nothing jumps; the picture
   letterboxes (`MediaPlayer`'s `contain`), since a crop hides evidence. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-recording {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-recording__badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    min-width: 0;
  }

  .lotics-recording__frame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-recording__frame[data-media="video"] {
    aspect-ratio: 16 / 9;
    border-radius: var(--lotics-radius-card);
    overflow: hidden;
  }

  /* The band rides on the button, the press target. */
  .lotics-recording__toggle {
    align-self: flex-start;
    padding-block: var(--lotics-space-4);
  }

  /* Bounded with its own scroll: a three-hour call is ~250k characters. */
  .lotics-recording__transcript {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--lotics-space-12);
    border-radius: var(--lotics-radius-card);
    background: var(--muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}