/* ============================================================
   DemoPlayer — Component Styles
   Design tokens are defined in src/tokens.css.
   ============================================================ */

.demo-player {
  background-color: var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-lg);
  box-shadow:       var(--shadow-2xs);
  box-sizing:       border-box;
  color:            var(--foreground);
  font-family:      var(--font-family-default);
}

/* ---- Scheme: light-alt ----
   Outer shell becomes white (--card); panels become off-white (--secondary).
   Border uses the page background (#F5F0E7 via --background) instead of --border. */
.demo-player[data-scheme="light-alt"] {
  background-color: var(--card);
  border-color:     var(--background);
}

.demo-player[data-scheme="light-alt"] .audio-bar {
  background-color: var(--secondary);
}

.demo-player[data-scheme="light-alt"] .demo-player-l__features {
  background: var(--secondary);
}



.demo-player[data-scheme="light-alt"] .demo-player-s__transcript::after {
  background: linear-gradient(to bottom, transparent, var(--secondary));
}

/* Dropdown trigger: background (#F5F0E7) → secondary (#FAF6F0) */
.demo-player[data-scheme="light-alt"] .pill-drop__trigger {
  background: var(--card);
}

.demo-player[data-scheme="light-alt"] .pill-drop__trigger:hover {
  background: var(--accent);
}

/* Feature tiles (L): accent hover → popover */
.demo-player[data-scheme="light-alt"] .demo-player-l__features--playing .demo-player-l__feature:not(.is-active):hover {
  background: var(--popover);
}


/* ---- Flat-bottom corners ---- */
/* When data-flat-bottom is present the two bottom radii are zeroed,
   so the player can sit flush against a section below it. */
.demo-player[data-flat-bottom] {
  border-bottom-left-radius:  0;
  border-bottom-right-radius: 0;
}


/* ---- Loading state ---- */
.demo-player--loading {
  align-items:     center;
  display:         flex;
  justify-content: center;
}

.demo-player__spinner {
  animation: demo-player-spin 0.75s linear infinite;
  color:     var(--muted-foreground);
}

@keyframes demo-player-spin {
  to { transform: rotate(360deg); }
}


/* ---- Size: L (960 × 480) ---- */
.demo-player[data-size="l"] {
  display:   flex;
  height:    480px;
  max-width: 1024px;
  padding:   var(--spacing-3);
  width:     100%;
}

/* ---- Size: M (596 × 474) ---- */
.demo-player[data-size="m"] {
  display:   flex;
  height:    474px;
  max-width: 596px;
  padding:   var(--spacing-3);
  width:     100%;
}

/* ---- Size: S (596 × 286) ---- */
.demo-player[data-size="s"] {
  display:   flex;
  height:    286px;
  max-width: 596px;
  padding:   var(--spacing-3);
  width:     100%;
}

/* ---- Size: XS (380 × 132) ---- */
/* Fixed height = playing state: 12px pad + 36px header + 8px gap + 64px audio + 12px pad.
   The idle state fills this height via flex so both states are identical — no jump.
   overflow:visible lets the dropdown menu extend below the card boundary. */
.demo-player[data-size="xs"] {
  display:   flex;
  height:    133px;
  max-width: 380px;
  overflow:  visible;
  padding:   var(--spacing-3);
  width:     100%;
}


/* ============================================================
   Shared Variant Styles
   Rules common to 2 or more size variants; consolidated here
   to avoid repetition in the per-size files.
   ============================================================ */

/* ---- Feature icon — XS / S / M (0.75 rem badge icon) ---- */
.demo-player-xs__feature-icon,
.demo-player-s__feature-icon,
.demo-player-m__feature-icon {
  flex-shrink: 0;
  height:      0.75rem; /* 12px */
  width:       0.75rem;
}

/* ---- Inline SVG feature icons — fill container (all sizes) ---- */
.demo-player-xs__feature-icon svg,
.demo-player-s__feature-icon svg,
.demo-player-m__feature-icon svg,
.demo-player-l__feature-icon svg {
  display: block;
  height:  100%;
  width:   100%;
}

/* ---- Feature text — S / M (identical type scale) ---- */
.demo-player-s__feature-text,
.demo-player-m__feature-text {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
}

/* ---- Idle headline — S / M / L ---- */
.demo-player-s__idle-headline,
.demo-player-m__idle-headline,
.demo-player-l__idle-headline {
  color:       var(--foreground);
  font-size:   1.5rem;              /* 24px — font-size-2xl from Figma */
  font-weight: var(--font-weight-bold);
  line-height: 2rem;                /* 32px */
  margin:      0;
}

/* ---- Idle sub — S / M / L ---- */
.demo-player-s__idle-sub,
.demo-player-m__idle-sub,
.demo-player-l__idle-sub {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  margin:      0;
}

/* ---- Idle copy (positioned for illustration overlay) — M / L ---- */
/* S omitted: no illustration, no z-index needed */
.demo-player-m__idle-copy,
.demo-player-l__idle-copy {
  align-items:    center;
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-1); /* 4px */
  position:       relative;
  text-align:     center;
  z-index:        1;
}

/* ---- Sender column — layout (S / M / L) ---- */
.demo-player-s__sender,
.demo-player-m__sender,
.demo-player-l__sender {
  flex-shrink:    0;
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-regular);
  line-height:    var(--line-height-xs);
  padding:        var(--spacing-4) var(--spacing-3);
  text-transform: capitalize;
  width:          6.75rem; /* ~108px — matches Figma sender column */
  box-sizing:     border-box;
}

/* M / L senders start muted; :has() overrides colour for the active line */
.demo-player-m__sender,
.demo-player-l__sender {
  color: var(--muted-foreground);
}

/* ---- Transcript scrollbar — S / M / L ---- */
.demo-player-s__transcript::-webkit-scrollbar,
.demo-player-m__transcript::-webkit-scrollbar,
.demo-player-l__transcript::-webkit-scrollbar       { width: 3px; }

.demo-player-s__transcript::-webkit-scrollbar-track,
.demo-player-m__transcript::-webkit-scrollbar-track,
.demo-player-l__transcript::-webkit-scrollbar-track  { background: transparent; }

.demo-player-s__transcript::-webkit-scrollbar-thumb,
.demo-player-m__transcript::-webkit-scrollbar-thumb,
.demo-player-l__transcript::-webkit-scrollbar-thumb  {
  background:    var(--border);
  border-radius: var(--radius-full);
}

/* ---- Illustration layers — M / L (identical positions from Figma) ---- */
.demo-player-m__illustration,
.demo-player-l__illustration {
  inset:    0;
  position: absolute;
}

/* Caller silhouette — top-right (Figma: x=330/572, y=25/454, w=217/572) */
.demo-player-m__ill-caller,
.demo-player-l__ill-caller {
  height:    auto;
  max-width: 238px;
  position:  absolute;
  right:     24px;
  top:       24px;
  width:     38%;
}

/* Receptionist silhouette — bottom-left (Figma: x=25/572, y=164/454, w=232/572) */
.demo-player-m__ill-receptionist,
.demo-player-l__ill-receptionist {
  bottom:    24px;
  height:    auto;
  left:      24px;
  max-width: 254px;
  position:  absolute;
  width:     40.5%;
}

/* ============================================================
   AudioBar — Component Styles
   Shared across all DemoPlayer size variants.
   Relies on CSS custom properties defined in src/tokens.css.
   ============================================================ */

/* ---- Container ---- */
.audio-bar {
  background-color: var(--card);
  border:           0.5px solid var(--border);
  border-radius:    var(--radius-md);
  display:          flex;
  align-items:      center;
  gap:              var(--spacing-3);
  height:           64px;
  padding:          var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-3);
  box-sizing:       border-box;
  flex-shrink:      0;
  width:            100%;
}


/* ---- Play / Pause button ---- */
.audio-bar__play-btn {
  background-color: var(--primary);
  border:           none;
  border-radius:    var(--radius-full);
  width:            40px;
  height:           40px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  cursor:           pointer;
  transition:       opacity 0.15s ease;
  padding:          0;
}

.audio-bar__play-btn:hover  { opacity: 0.85; }
.audio-bar__play-btn:active { opacity: 0.75; }


/* ---- Waveform area ---- */
.audio-bar__waves {
  flex:        1;
  min-width:   0;
  height:      40px;
  display:     flex;
  align-items: center;
  gap:         6px;
  overflow:    hidden;
  cursor:      pointer;
}


/* ---- Individual bars ---- */
.audio-bar__bar {
  width:         2px;
  flex-shrink:   0;
  border-radius: 2px;
  transition:    background-color 0.15s ease,
                 height          0.3s  ease;
}

.audio-bar__bar--played        { background-color: var(--ring); }   /* fallback: no transcript */
.audio-bar__bar--played-agent  { background-color: var(--info); }
.audio-bar__bar--played-caller { background-color: var(--opacity-info-40); }
.audio-bar__bar--unplayed      { background-color: var(--muted); }

.audio-bar__bar--loading {
  background-color: var(--muted);
  animation: audio-bar-pulse 1.4s ease-in-out infinite;
}

/* Stagger the pulse so bars animate in a wave pattern */
.audio-bar__bar--loading:nth-child(3n+1) { animation-delay: 0s;    }
.audio-bar__bar--loading:nth-child(3n+2) { animation-delay: 0.15s; }
.audio-bar__bar--loading:nth-child(3n)   { animation-delay: 0.3s;  }

@keyframes audio-bar-pulse {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.3;  }
}


/* ---- Time label ---- */
.audio-bar__time {
  font-family:          var(--font-family-default);
  font-size:            var(--font-size-sm);
  line-height:          var(--line-height-sm);
  color:                var(--extra-muted-foreground);
  white-space:          nowrap;
  flex-shrink:          0;
  font-variant-numeric: tabular-nums; /* equal-width digits — prevents layout shift as time changes */
  min-width:            5rem;         /* safety net if font lacks tabular figures (~80px at 16px root) */
  text-align:           right;
}

/* ============================================================
   Tabs — Segmented pill tab bar
   Design tokens from src/tokens.css.
   ============================================================ */

.seg-tabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        38px;
  background:    var(--muted);
  border-radius: var(--radius-full);
  column-gap:    1px;
}

/* Individual tab — button or anchor */
.seg-tabs__tab {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-1-5);
  height:          100%;
  padding:         var(--spacing-2) var(--spacing-4); /* 8px 16px */
  border:          1px solid transparent; /* size-stable when active border appears */
  border-radius:   var(--radius-full);
  background:      transparent;
  color:           var(--foreground);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  cursor:          pointer;
  text-decoration: none;  /* reset <a> default */
  white-space:     nowrap;
  transition:      background 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

.seg-tabs__tab:hover {
  background: var(--opacity-background-50);
}

/* Active tab — only visible in playing state (.seg-tabs--active) */
.seg-tabs--active .seg-tabs__tab.is-active {
  background: var(--background);
  border:     1px solid var(--border);
}

.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--background);
}

/* Icon slot */
.seg-tabs__tab-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.seg-tabs__tab-icon svg {
  display: block;
  width:   1rem;
  height:  1rem;
}


/* ============================================================
   Light-alt scheme — warm secondary track, card active pill
   Matches the "light 2" DemoPlayer variant.
   ============================================================ */

.seg-tabs--light-alt {
  background: var(--secondary);
}

.seg-tabs--light-alt .seg-tabs__tab:hover {
  background: var(--popover);
}

.seg-tabs--light-alt.seg-tabs--active .seg-tabs__tab.is-active,
.seg-tabs--light-alt.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
}

/* ============================================================
   Dropdown — Pill dropdown with floating menu
   Design tokens from src/tokens.css.
   ============================================================ */

.pill-drop {
  position:      relative;
  display:       block;
  background:    transparent;
  border-radius: var(--radius-full);
}

/* ---- Trigger button ---- */

.pill-drop__trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-1-5); /* 6px */
  width:           100%;
  height:          38px;
  padding:         var(--spacing-2) var(--spacing-4);
  background:      var(--background);
  border:          1px solid var(--border);
  border-radius:   var(--radius-full);
  cursor:          pointer;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px — same as seg-tabs__tab */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--foreground);
  white-space:     nowrap;
  transition:      background 0.2s;
}

.pill-drop__trigger:hover {
  background: var(--accent);
}

/* ---- Chevron ---- */

.pill-drop__chevron {
  flex-shrink: 0;
  color:       var(--muted-foreground);
  transition:  transform 0.2s ease;
}

.pill-drop__chevron.is-open {
  transform: rotate(180deg);
}

/* ---- Backdrop (click-away layer) ---- */
/* position:fixed covers the full viewport and is never clipped by overflow:hidden
   on a parent. Clicking it fires a React synthetic onClick that closes the dropdown
   reliably (unlike document.mousedown which fires before li onClick and can close
   the dropdown before onSelect is called — especially in Webflow's shadow-DOM /
   event-retargeting environment). */

.pill-drop__backdrop {
  position: fixed;
  inset:    0;
  z-index:  199; /* below .pill-drop__menu so items remain clickable */
}

/* ---- Floating menu ---- */

.pill-drop__menu {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       200;
  list-style:    none;
  margin:        0;
  padding:       var(--spacing-1); /* 4px all sides */
  background:    var(--inv-popover);
  border:        1px solid rgba(128, 128, 128, 0.15);
  border-radius: var(--radius-sm);  /* 8px */
  min-width:     max(160px, 100%);
  box-shadow:    0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Portrait mobile — left-align menu to trigger */
@media (max-width: 479px) {
  .pill-drop__menu {
    left:      0;
    transform: none;
  }
}

/* ---- Menu item ---- */

.pill-drop__item {
  padding:       6px var(--spacing-2); /* 6px vertical, 8px horizontal */
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);   /* 14px */
  line-height:   var(--line-height-sm);
  color:         var(--inv-popover-foreground);
  border-radius: 6px;
  cursor:        pointer;
  transition:    background 0.2s;
  white-space:   nowrap;
}

.pill-drop__item:hover {
  background: var(--opacity-inv-accent-50);
}

.pill-drop__item.is-selected {
  background: var(--inv-accent);
}

/* ============================================================
   TabsOrDropdown — Master container styles
   Tab bar styles live in Tabs/Tabs.css.
   Dropdown styles live in Dropdown/Dropdown.css.
   Tokens from src/tokens.css.
   ============================================================ */

/* ---- Outer container ---- */
.tod {
  position:   relative; /* probe anchor */
  width:      100%;
  text-align: center;   /* center inline-flex children in idle (non-playing) state */
}

/* Playing state: left-align the tab bar */
.tod--playing {
  text-align: left;
}


/* ============================================================
   Hidden probe — measures natural tab-bar width without
   affecting document flow (absolutely positioned, invisible).
   Renders seg-tabs__tab buttons so padding/font match exactly.
   ============================================================ */

.tod__probe {
  position:       absolute;
  left:           0;
  top:            0;
  display:        inline-flex;
  align-items:    center;
  height:         36px;
  padding:        1px;
  column-gap:     1px;
  visibility:     hidden;
  pointer-events: none;
  white-space:    nowrap;
}


/* ============================================================
   Optional outer pill — M / L idle only.
   Wraps the tab bar or dropdown over the illustration to
   provide visual contrast.
   ============================================================ */

.tod__filter {
  display:       inline-flex;
  align-items:   center;
  padding:       var(--spacing-3);
  border-radius: var(--radius-full);
}

/* ============================================================
   DemoPlayerL — Large variant styles (960 × 480)
   Tokens from src/tokens.css
   ============================================================ */

/* ---- Shell: horizontal flex — left (3/4) + sidebar (1/4) ---- */
.demo-player-l {
  display:    flex;
  flex:       1;     /* fill the fixed-height .demo-player shell */
  gap:        var(--spacing-3); /* 12px — column gap matching Figma */
  min-height: 0;
  min-width:  0;
}


/* ============================================================
   LEFT PANEL
   ============================================================ */

.demo-player-l__left {
  display:        flex;
  flex:           3;   /* 3/4 of available width */
  flex-direction: column;
  gap:            var(--spacing-2); /* 8px — between audio bar and transcript */
  min-height:     0;
  min-width:      0;
}


/* ============================================================
   IDLE STATE — Inner frame (fills left panel)
   ============================================================ */

.demo-player-l__idle {
  position:        relative;
  display:         flex;
  flex:            1;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2.25rem; /* 36px — spacing-9 from Figma */
  padding:         var(--spacing-4);
  border-radius:   var(--radius-md);
  overflow:        hidden;
}



/* idle-copy → shared in DemoPlayer.css (M+L identical with position/z-index) */

/* idle-headline + idle-sub → shared in DemoPlayer.css */


/* ============================================================
   PLAYING STATE — Transcript
   ============================================================ */

.demo-player-l__transcript {
  display:         flex;
  flex:            1;
  flex-direction:  column;
  gap:             10px; /* matches Figma inter-message gap */
  min-height:      0;
  padding:         var(--spacing-6) var(--spacing-3); /* 24px top/bottom, 12px sides */
  overflow-y:      auto;
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin; /* Firefox thin scrollbar */
}

/* webkit scrollbar → shared in DemoPlayer.css */

/* Each transcript row */
.demo-player-l__line {
  display:     flex;
  align-items: flex-start;
  width:       100%;
}

/* Sender colour — inactive: set by shared rule in DemoPlayer.css */
/* Active sender — elevate to foreground */
.demo-player-l__line:has(.demo-player-l__message.is-active) .demo-player-l__sender {
  color: var(--foreground);
}

/* Message area */
.demo-player-l__message {
  display:        flex;
  flex:           1;
  flex-direction: column;
  min-width:      0;
  padding:        var(--spacing-3);
  border-radius:  var(--radius-md);
}

/* Message text — inactive */
.demo-player-l__text {
  margin:      0;
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Active (most recent visible) line */
.demo-player-l__message.is-active .demo-player-l__text {
  color: var(--foreground);
}


/* ============================================================
   RIGHT PANEL — Feature sidebar (dynamic grid)
   ============================================================ */

/* Outer — visual container + scrollbar anchor (does not scroll) */
.demo-player-l__features {
  position:      relative; /* scrollbar overlay anchor */
  flex:          0 0 241px;
  border:        0.5px solid var(--border);
  border-radius: var(--radius-md);
  box-sizing:    border-box;
  overflow:      hidden; /* clip grid to rounded corners */
  background:    var(--card);
}

/* Inner — scrollable grid (no border/background of its own) */
.demo-player-l__features-grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows:        calc((100% - 30px) / 4);
  align-content:         start;
  gap:                   10px;
  height:                100%;
  padding:               var(--spacing-2); /* symmetric on all sides */
  overflow-y:            auto;
  scrollbar-width:       none; /* Firefox: hide native */
  box-sizing:            border-box;
}

.demo-player-l__features-grid::-webkit-scrollbar { width: 0; } /* WebKit: hide native */

/* Custom overlay scrollbar — absolutely positioned, no layout impact */
.demo-player-l__scrolltrack {
  position:      absolute;
  top:           var(--spacing-2);
  right:         2px;
  bottom:        var(--spacing-2);
  width:         4px;
  border-radius: var(--radius-full);
  cursor:        pointer;
}

.demo-player-l__scrollthumb {
  position:      absolute;
  left:          0;
  width:         100%;
  min-height:    24px;
  border-radius: var(--radius-full);
  background:    var(--border);
  cursor:        grab;
  transition:    background 0.15s;
}

.demo-player-l__scrollthumb.is-dragging {
  cursor: grabbing;
}

.demo-player-l__scrollthumb:hover {
  background: var(--muted-foreground);
}

/* Feature cell */
.demo-player-l__feature {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--spacing-4); /* 16px */
  padding:         var(--spacing-3); /* 12px all sides */
  border-radius:   var(--radius-md);
  overflow:        hidden;
  color:           var(--muted-foreground-card);
  cursor:          default; /* non-interactive until a demo is playing */
  transition:      background 0.2s ease, color 0.2s ease;
}

/* Become interactive only in playing state */
.demo-player-l__features--playing .demo-player-l__feature {
  cursor: pointer;
}

.demo-player-l__features--playing .demo-player-l__feature:not(.is-active):hover {
  background: var(--accent);
  color:      var(--muted-foreground);
}

.demo-player-l__features--playing .demo-player-l__feature:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: -2px;
}

/* Active cell */
.demo-player-l__feature.is-active {
  background: var(--opacity-primary-10);
  color:      var(--primary);
}

/* Feature icon — L uses 24px (XS/S/M 12px icons are in the shared rule) */
.demo-player-l__feature-icon {
  flex-shrink: 0;
  height:      24px;
  width:       24px;
}

/* feature-icon svg → shared in DemoPlayer.css */

/* Feature label — always occupies at least 2 lines so icon positions are consistent */
.demo-player-l__feature-label {
  min-height:    calc(2 * var(--line-height-xs));
  font-size:     var(--font-size-xs);
  line-height:   var(--line-height-xs);
  overflow-wrap: break-word;
  text-align:    center;
  word-break:    break-word;
}

/* ============================================================
   DemoPlayerM — Medium variant styles (596 × 474)
   Tokens from src/tokens.css
   ============================================================ */

/* ---- Shell ---- */
.demo-player-m {
  display:        flex;
  flex:           1;   /* fill the fixed-height .demo-player shell */
  flex-direction: column;
  gap:            var(--spacing-3); /* 12px — gap between tabs and player in playing state */
  width:          100%;
}


/* ============================================================
   IDLE STATE — Inner frame
   ============================================================ */

.demo-player-m__idle-frame {
  position:        relative;
  display:         flex;
  flex:            1;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2.25rem; /* 36px — t--spacing-9 */
  padding:         var(--spacing-3) var(--spacing-4) var(--spacing-6);
  border-radius:   var(--radius-md);
  overflow:        hidden;
}

/* illustration + ill-caller + ill-receptionist → shared in DemoPlayer.css */

/* idle-copy → shared in DemoPlayer.css (M+L identical with position/z-index) */

/* idle-headline + idle-sub → shared in DemoPlayer.css */


/* ============================================================
   PLAYING STATE — Player container (audio + transcript)
   ============================================================ */

.demo-player-m__player {
  display:        flex;
  flex:           1;
  flex-direction: column;
  gap:            var(--spacing-2); /* 8px between audio frame and transcript */
  min-height:     0; /* allow flex child to shrink for overflow to work */
}


/* ============================================================
   PLAYING STATE — Transcript
   ============================================================ */

.demo-player-m__transcript {
  display:         flex;
  flex:            1;
  flex-direction:  column;
  gap:             10px; /* Figma: gap-10px between messages */
  padding:         var(--spacing-6) var(--spacing-3); /* 24px top/bottom, 12px sides */
  overflow-y:      auto;
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin; /* Firefox thin scrollbar */
}

/* webkit scrollbar → shared in DemoPlayer.css */

/* Each transcript row */
.demo-player-m__line {
  display:     flex;
  align-items: flex-start;
}

/* Sender colour — inactive: set by shared rule in DemoPlayer.css */
/* Active sender — elevate to foreground */
.demo-player-m__line .demo-player-m__message.is-active
+ .demo-player-m__sender,
.demo-player-m__line:has(.demo-player-m__message.is-active) .demo-player-m__sender {
  color: var(--foreground);
}

/* Message area */
.demo-player-m__message {
  display:        flex;
  flex:           1;
  flex-direction: column;
  gap:            var(--spacing-2);
  min-width:      0;
  padding:        var(--spacing-3);
  border-radius:  var(--radius-md);
  background:     transparent;
}

/* Message text — inactive */
.demo-player-m__text {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base); /* 16px — matches Figma base */
  line-height: var(--line-height-base);
}

/* Active (last visible) line */
.demo-player-m__message.is-active .demo-player-m__text {
  color: var(--foreground);
}


/* ============================================================
   Feature badge — inside active message
   ============================================================ */

.demo-player-m__feature-badge {
  display:       inline-flex;
  align-items:   center;
  height:        auto;
  gap:           var(--spacing-3);
  width:         fit-content;
  padding:       calc(var(--spacing-2) + 2px) var(--spacing-4) calc(var(--spacing-2) + 2px) var(--spacing-3);
  border-radius: var(--radius-full);
  background:    var(--opacity-primary-10);
  color:         var(--primary);
}

/* feature-icon + feature-icon svg + feature-text → shared in DemoPlayer.css */

/* ============================================================
   DemoPlayerS — Small variant styles (596 × 286)
   Tokens from src/tokens.css
   ============================================================ */

/* ---- Shell ---- */
.demo-player-s {
  display:        flex;
  flex:           1;   /* fill the fixed-height .demo-player shell */
  flex-direction: column;
  gap:            var(--spacing-3); /* 12px — gap between tabs and player in playing state */
  width:          100%;
}


/* ============================================================
   IDLE STATE — Inner frame
   ============================================================ */

.demo-player-s__idle-frame {
  display:         flex;
  flex:            1;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-4); /* 16px */
  padding:         var(--spacing-3) var(--spacing-4) var(--spacing-4);
  border-radius:   var(--radius-md);
}

/* Copy */
.demo-player-s__idle-copy {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--spacing-1); /* 4px */
  text-align:     center;
}

/* idle-headline + idle-sub → shared in DemoPlayer.css */


/* ============================================================
   PLAYING STATE — Player (audio bar + transcript)
   ============================================================ */

.demo-player-s__player {
  display:        flex;
  flex:           1;
  flex-direction: column;
  gap:            var(--spacing-2); /* 8px */
  min-height:     0;
  position:       relative; /* anchor for the scroll-fade overlay */
}

/* Bottom fade — hints at scrollable content below.
   Spans the 14px bottom padding of the transcript plus extra room so the
   gradient has enough travel to look smooth. pointer-events:none lets
   scroll and clicks pass through unobstructed. */
.demo-player-s__transcript::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  height:         calc(var(--spacing-4));
  background:     linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
}


/* ============================================================
   PLAYING STATE — Transcript (single active line)
   ============================================================ */

.demo-player-s__transcript {
  display:         flex;
  flex:            1;
  align-items:     flex-start;
  min-height:      0;           /* allow flex child to shrink below content size */
  padding:         var(--spacing-3);
  overflow-y:      auto;        /* scroll when content exceeds available height */
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin;        /* Firefox thin scrollbar */
}

/* webkit scrollbar → shared in DemoPlayer.css */

/* Sender colour — S always shows one active line so always foreground */
.demo-player-s__sender {
  color: var(--foreground);
}

/* Message area */
.demo-player-s__message {
  display:        flex;
  flex:           1;
  flex-direction: column;
  gap:            var(--spacing-2); /* 8px */
  min-width:      0;
  padding:        var(--spacing-3) var(--spacing-3) 0 var(--spacing-3);
}

.demo-player-s__text {
  color:       var(--foreground);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
}


/* ============================================================
   Feature badge
   ============================================================ */

.demo-player-s__feature-badge {
  display:       inline-flex;
  align-items:   center;
  height:        36px;
  gap:           var(--spacing-3);
  width:         fit-content;
  padding:       var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-full);
  background:    var(--opacity-primary-10);
  color:         var(--primary);
}

/* feature-icon + feature-icon svg + feature-text → shared in DemoPlayer.css */

/* ============================================================
   DemoPlayerXS — Extra-small variant styles (380 × 132)
   Tokens from src/tokens.css
   ============================================================ */

/* ---- Shell ---- */
.demo-player-xs {
  display:        flex;
  flex:           1;    /* fill the .demo-player shell */
  flex-direction: column;
  gap:            var(--spacing-2); /* 8px — between header row and audio bar */
  width:          100%;
}


/* ============================================================
   IDLE STATE
   ============================================================ */

.demo-player-xs__idle {
  display:         flex;
  flex:            1;      /* fill the fixed-height card — keeps idle and playing at identical heights */
  flex-direction:  column;
  align-items:     center;
  justify-content: center; /* vertical centering replaces the old explicit top/bottom padding */
  gap:             var(--spacing-4);   /* matches Figma nav bar column gap */
  min-height:      0;
  text-align:      center;
}

/* Copy block */
.demo-player-xs__idle-copy {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}

.demo-player-xs__idle-headline {
  color:       var(--foreground);
  font-size:   1.125rem;  /* 18px — font-size-lg from Figma */
  font-weight: 700;
  line-height: 1.75rem;   /* 28px — line-height-lg from Figma */
  margin:      0;
}

.demo-player-xs__idle-sub {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-xs);   /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs); /* 16px */
  margin:      0;
}


/* ============================================================
   Tab control sizing wrappers
   The inner TabsOrDropdown (.tod) has width: 100% and fills its
   wrapper; the wrapper sets the context-specific dimensions.
   ============================================================ */

/* Idle: centred pill, 50% of the card inner width minus half the
   gap between it and the feature badge (gap 12px → subtract 6px). */
.demo-player-xs__tabs--idle {
  width: calc(50% - 6px);
}

/* Playing (default): fills its grid column; min-width: 0 prevents
   long labels from blowing out the column. */
.demo-player-xs__tabs {
  min-width: 0;
}

/* XS uses smaller font/weight than the default S/M/L trigger */
.demo-player-xs__tabs .tod__trigger {
  font-size:   var(--font-size-xs);   /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
}


/* ============================================================
   PLAYING STATE — Header row (2-column grid)
   Both columns are always equal width so the dropdown trigger
   and the feature badge each reliably occupy 50% of the space.
   ============================================================ */

.demo-player-xs__header {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  flex-shrink:           0;
  gap:                   var(--spacing-3); /* 12px */
  min-width:             0;
}


/* ============================================================
   Feature badge — playing state only
   ============================================================ */

.demo-player-xs__feature-badge {
  display:       flex;
  align-items:   center;
  height:        36px;
  gap:           var(--spacing-3);
  min-width:     0;        /* prevent grid blowout */
  padding:       var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-full);
  overflow:      hidden;
  background:    var(--opacity-primary-10);
  color:         var(--primary);
}

/* feature-icon + feature-icon svg → shared in DemoPlayer.css */

/* XS truncates the label since it's inside a fixed-width grid column */
.demo-player-xs__feature-text {
  font-size:     var(--font-size-xs);   /* 12px */
  line-height:   var(--line-height-xs);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}