/* ============================================================
   Design Tokens
   Global CSS custom properties for color, typography, spacing,
   border-radius, and shadow. Import this file at the app or
   Storybook entry level so all components can consume the vars.
   ============================================================ */


/* ----------------------------------------------------------
   Color Tokens — Light (default)
   ---------------------------------------------------------- */
:host,
[data-scheme="light"] {

  --background:  #F5F0E7;
  --foreground:  #282825;

  --card:        #ffffff;
  --card-foreground: #282825;  

  --popover:     #F7F5E8;
  --popover-foreground: #3A3A36;

  --primary:  #C64110;
  --primary-foreground: #F7F5E8;

  --secondary: #fff;
  --secondary-foreground: #3A3A36;

  --muted:       #E5DFD5;
  --muted-foreground:      #85857A;

  --extra-muted-foreground: #D6CFC2;

  /* Inverse-scheme tokens — exact values from the DARK scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows dark-on-light-card). */
  --inv-popover:            #282825;  /* = dark --popover            */
  --inv-popover-foreground: #FAF9F0;  /* = dark --popover-foreground */
  --inv-accent:             #3A3A36;  /* = dark --accent             */

  --accent: #FAF6F0;
  --accent-foreground:     #282825;

  --destructive: #EF4444;
  --destructive-foreground: #FEF2F2;

   --border:      #D6CFC2;
   --input:       #D6CFC2;

   --ring: #59B7D9;
   --chart-1: #F0612D;
   --chart-2: #59B7D9;
   --chart-3: #6366F1;
   --chart-4: #10B981;
   --chart-5: #EAB308;

   --sidebar: #EDE9D4;
   --sidebar-foreground: #4D4D47;
   --sidebar-primary: #F0612D;
   --sidebar-primary-foreground: #F7F5E8;
   --sidebar-accent: #FAF9F0;
   --sidebar-accent-foreground: #1A1A18;
   --sidebar-border: #D6D0B3;
   --sidebar-ring: #3A3A36;

   --info: #59B7D9;
   --info-foreground: #ECFEFF;
   --success: #16A34A;
   --success-foreground: #F0FDF4;
   --warning: #D97706;
   --warning-foreground: #FFFDF5;

  /* Opacity vars — 10 / 20 / 30 / 40 / 50 % */
  --opacity-primary-10:   #C641101A;
  --opacity-primary-20:   #C6411033;
  --opacity-primary-30:   #C641104D;
  --opacity-primary-40:   #C6411066;
  --opacity-primary-50:   #C6411080;

  --opacity-secondary-10: #FAF9F01A;
  --opacity-secondary-20: #FAF9F033;
  --opacity-secondary-30: #FAF9F04D;
  --opacity-secondary-40: #FAF9F066;
  --opacity-secondary-50: #FAF9F080;

  --opacity-accent-10:    #FFFFFF1A;
  --opacity-accent-20:    #FFFFFF33;
  --opacity-accent-30:    #FFFFFF4D;
  --opacity-accent-40:    #FFFFFF66;
  --opacity-accent-50:    #FFFFFF80;

  --opacity-neutral-10:   #2828251A;
  --opacity-neutral-20:   #28282533;
  --opacity-neutral-30:   #2828254D;
  --opacity-neutral-40:   #28282566;
  --opacity-neutral-50:   #28282580;

  --opacity-info-10:      #59B7D91A;
  --opacity-info-20:      #59B7D933;
  --opacity-info-30:      #59B7D94D;
  --opacity-info-40:      #59B7D966;
  --opacity-info-50:      #59B7D980;

  --opacity-success-10:   #16A34A1A;
  --opacity-success-20:   #16A34A33;
  --opacity-success-30:   #16A34A4D;
  --opacity-success-40:   #16A34A66;
  --opacity-success-50:   #16A34A80;

  --opacity-warning-10:   #D977061A;
  --opacity-warning-20:   #D9770633;
  --opacity-warning-30:   #D977064D;
  --opacity-warning-40:   #D9770666;
  --opacity-warning-50:   #D9770680;

  --opacity-error-10:     #E034341A;
  --opacity-error-20:     #E0343433;
  --opacity-error-30:     #E034344D;
  --opacity-error-40:     #E0343466;
  --opacity-error-50:     #E0343480;

  --opacity-background-10: #F5F0E71A;
  --opacity-background-20: #F5F0E733;
  --opacity-background-30: #F5F0E74D;
  --opacity-background-40: #F5F0E766;
  --opacity-background-50: #F5F0E780;

  --opacity-inv-accent-10: #3A3A361A;
  --opacity-inv-accent-20: #3A3A3633;
  --opacity-inv-accent-30: #3A3A364D;
  --opacity-inv-accent-40: #3A3A3666;
  --opacity-inv-accent-50: #3A3A3680;

}


/* ----------------------------------------------------------
   Color Tokens — Dark
   ---------------------------------------------------------- */
[data-scheme="dark"] {
  
   --background:  #1A1A18;
   --foreground:  #F7F5E8;

   --card:        #282825;
   --card-foreground: #F5F0E7;  

   --popover:     #282825;
   --popover-foreground: #FAF9F0;

   --primary:  #F0612D;
   --primary-foreground: #FAF9F0;

   --secondary: #3A3A36;
   --secondary-foreground: #FAF9F0;

   --muted:       #3A3A36;
   --muted-foreground:      #85857A;

   --extra-muted-foreground: #4D4D47;

  /* Inverse-scheme tokens — exact values from the LIGHT scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows light-on-dark-card). */
  --inv-popover:            #F7F5E8;  /* = light --popover            */
  --inv-popover-foreground: #3A3A36;  /* = light --popover-foreground */
  --inv-accent:             #FAF6F0;  /* = light --accent             */

   --accent: #3A3A36;
   --accent-foreground:     #FAF9F0;

   --destructive: #DC2626;
   --destructive-foreground: #FEF2F2;

   --border:      #3A3A36;
   --input:       #3A3A36;

   --ring: #7ECBE7;
   --chart-1: #C64110;
   --chart-2: #7ECBE7;
   --chart-3: #818CF8;
   --chart-4: #6EE7B7;
   --chart-5: #FACC15;

   --sidebar: #000000;
   --sidebar-foreground: #85857A;
   --sidebar-primary: #C64110;
   --sidebar-primary-foreground: #FAF9F0;
   --sidebar-accent: #282825;
   --sidebar-accent-foreground: #FFFFFF;
   --sidebar-border: #282825;
   --sidebar-ring: #65655D;

   --info: #7ECBE7;
   --info-foreground: #ECFEFF;
   --success: #16A34A;
   --success-foreground: #F0FDF4;
   --warning: #D97706;
   --warning-foreground: #FFFDF5;

  /* Opacity vars — 10 / 20 / 30 / 40 / 50 % */
  --opacity-primary-10:   #F0612D1A;
  --opacity-primary-20:   #F0612D33;
  --opacity-primary-30:   #F0612D4D;
  --opacity-primary-40:   #F0612D66;
  --opacity-primary-50:   #F0612D80;

  --opacity-secondary-10: #FAF9F01A;
  --opacity-secondary-20: #FAF9F033;
  --opacity-secondary-30: #FAF9F04D;
  --opacity-secondary-40: #FAF9F066;
  --opacity-secondary-50: #FAF9F080;

  --opacity-accent-10:    #FFFFFF1A;
  --opacity-accent-20:    #FFFFFF33;
  --opacity-accent-30:    #FFFFFF4D;
  --opacity-accent-40:    #FFFFFF66;
  --opacity-accent-50:    #FFFFFF80;

  --opacity-neutral-10:   #2828251A;
  --opacity-neutral-20:   #28282533;
  --opacity-neutral-30:   #2828254D;
  --opacity-neutral-40:   #28282566;
  --opacity-neutral-50:   #28282580;

  --opacity-info-10:      #59B7D91A;
  --opacity-info-20:      #59B7D933;
  --opacity-info-30:      #59B7D94D;
  --opacity-info-40:      #59B7D966;
  --opacity-info-50:      #59B7D980;

  --opacity-success-10:   #16A34A1A;
  --opacity-success-20:   #16A34A33;
  --opacity-success-30:   #16A34A4D;
  --opacity-success-40:   #16A34A66;
  --opacity-success-50:   #16A34A80;

  --opacity-warning-10:   #D977061A;
  --opacity-warning-20:   #D9770633;
  --opacity-warning-30:   #D977064D;
  --opacity-warning-40:   #D9770666;
  --opacity-warning-50:   #D9770680;

  --opacity-error-10:     #E034341A;
  --opacity-error-20:     #E0343433;
  --opacity-error-30:     #E034344D;
  --opacity-error-40:     #E0343466;
  --opacity-error-50:     #E0343480;

  --opacity-background-10: #1A1A181A;
  --opacity-background-20: #1A1A1833;
  --opacity-background-30: #1A1A184D;
  --opacity-background-40: #1A1A1866;
  --opacity-background-50: #1A1A1880;

  --opacity-inv-accent-10: #FAF6F01A;
  --opacity-inv-accent-20: #FAF6F033;
  --opacity-inv-accent-30: #FAF6F04D;
  --opacity-inv-accent-40: #FAF6F066;
  --opacity-inv-accent-50: #FAF6F080;

}


/* ----------------------------------------------------------
   Typography Tokens
   ---------------------------------------------------------- */
:host {
  --font-family-default:   var(--_typography---fonts--font-main, 'II_Increments_Sans', 'Iiincrementssans', sans-serif);

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-xs:   1rem;     /* 16px */
  --line-height-sm:   1.25rem;  /* 20px */
  --line-height-base: 1.5rem;   /* 24px */
}


/* ----------------------------------------------------------
   Border Radius Tokens
   ---------------------------------------------------------- */
:host {
  --radius-sm:   0.5rem;    /*  8px — rounded-lg  in Figma */
  --radius-md:   1rem;      /* 16px — rounded-2xl in Figma */
  --radius-lg:   1.5rem;    /* 24px — rounded-3xl in Figma */
  --radius-full: 9999px;    /* pill / fully rounded         */
}


/* ----------------------------------------------------------
   Shadow Tokens
   ---------------------------------------------------------- */
:host {
  --shadow-2xs: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
}


/* ----------------------------------------------------------
   Spacing Tokens
   ---------------------------------------------------------- */
:host {
  --spacing-0:   0px;
  --spacing-px:  1px;
  --spacing-1:   0.25rem;   /*  4px */
  --spacing-1-5: 0.375rem;  /*  6px */
  --spacing-2:   0.5rem;    /*  8px */
  --spacing-3:   0.75rem;   /* 12px */
  --spacing-4:   1rem;      /* 16px */
  --spacing-5:   1.25rem;   /* 20px */
  --spacing-6:   1.5rem;    /* 24px */
}

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

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

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

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

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



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

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

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

/* ---- 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;
  width:      100%;
  max-width:  380px;
  height:     133px;
  padding:    var(--spacing-3);
  overflow:   visible;
}

/* ============================================================
   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(--background);
  border:           1px 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;
}

/* ============================================================
   TabsOrDropdown — Shared tabs-or-dropdown component
   Renders a segmented pill-tab bar when tabs fit the container,
   or an inverted-scheme dropdown when they don't.
   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).
   Must share the same padding/font/gap as .tod__segtab so the
   measurement is pixel-accurate.
   ============================================================ */

.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;
}


/* ============================================================
   TAB MODE
   ============================================================ */

/* Optional outer pill — M / L idle only, wraps the segtabs over
   the illustration to provide visual contrast. */
.tod__filter {
  display:       inline-flex;
  align-items:   center;
  padding:       var(--spacing-3); /* 12px — matches Figma filter padding */
  background:    var(--background);
  border-radius: var(--radius-full);
}

/* Segmented tab bar */
.tod__segtabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        36px;
  background:    var(--muted);
  border-radius: var(--radius-full);
  padding:       1px;
  column-gap:    1px;
}

/* Individual tab button */
.tod__segtab {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  padding:         var(--spacing-2) var(--spacing-4); /* 8px 16px */
  border:          none;
  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;
  white-space:     nowrap;
  transition:      background 0.2s;
}

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

/* Active tab — only applied in playing state (tod__segtabs--active) */
.tod__segtabs--active .tod__segtab.is-active {
  background: var(--background);
}

.tod__segtabs--active .tod__segtab.is-active:hover {
  background: var(--background);
}


/* ============================================================
   DROPDOWN MODE
   Uses --inv-* tokens so the popup always contrasts the card:
   dark popup on light card; cream popup on dark card.
   ============================================================ */

.tod__dropdown {
  position:      relative;
  display:       block;       /* fills .tod / .tod__filter so trigger can be width: 100% */
  padding:       1px;         /* mirrors tod__segtabs 1px padding — provides the outline ring */
  background:    var(--muted);
  border-radius: var(--radius-full);
}

/* Pill-shaped trigger button — fills the dropdown container.
   Default style matches the segtabs pill (same muted background, font,
   and hover treatment) so switching feels seamless.
   XS overrides these values back to the inverted-scheme border style
   via .demo-player-xs__tabs .tod__trigger in DemoPlayerXS.css. */
.tod__trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-1-5); /* 6px */
  width:           100%;
  height:          34px; /* 36px total − 2px from tod__dropdown 1px padding on each side */
  padding:         var(--spacing-2) var(--spacing-4); /* matches .tod__segtab */
  background:      transparent; /* tod__dropdown container provides the muted background */
  border:          none;
  border-radius:   var(--radius-full);
  cursor:          pointer;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px — same as segtab */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--foreground);
  white-space:     nowrap;
  transition:      background 0.2s;
}

.tod__trigger:hover {
  background: var(--opacity-background-50); /* same as segtab hover */
}

/* Chevron — rotates 180° when the menu is open */
.tod__chevron {
  flex-shrink: 0;
  color:       var(--muted-foreground);
  transition:  transform 0.2s ease;
}

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

/* Transparent backdrop — rendered behind the menu when the dropdown is open.
   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 handleSelect is ever called — especially
   in Webflow's shadow-DOM / event-retargeting environment). */
.tod__backdrop {
  position: fixed;
  inset:    0;
  z-index:  199; /* below .tod__menu (200) so menu items stay clickable */
}

/* Floating menu panel —
   Default: centred under the trigger (desktop / tablet).
   ≤479px (Webflow landscape mobile + smaller): left-aligned to trigger. */
.tod__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);
}

@media (max-width: 479px) {
  .tod__menu {
    left:      0;
    transform: none;
  }
}

/* Menu item */
.tod__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;
}

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

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

/* ============================================================
   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 {
  flex:           3;   /* 3/4 of available width */
  display:        flex;
  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;
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2.25rem; /* 36px — spacing-9 from Figma */
  background:      var(--background);
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  overflow:        hidden;
  padding: var(--spacing-4);
}

/* Illustration — absolutely fills idle frame, images clip at edges */
.demo-player-l__illustration {
  position: absolute;
  inset:    0;
}

/* Caller silhouette — top-right */
.demo-player-l__ill-caller {
  position: absolute;
  left:     57.7%;
  top:      5.6%;
  width:    38%;
  height:   auto;
}

/* Receptionist silhouette — bottom-left */
.demo-player-l__ill-receptionist {
  position: absolute;
  left:     4.3%;
  bottom:   5.72%;
  width:    40.5%;
  height:   auto;
}

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

.demo-player-l__idle-headline {
  margin:      0;
  font-size:   1.5rem;  /* 24px — t--typography-font-size-2xl from Figma */
  font-weight: 700;
  line-height: 2rem;    /* 32px — t--typography-line-height-2xl from Figma */
  color:       var(--foreground);
}

.demo-player-l__idle-sub {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


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

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

.demo-player-l__transcript::-webkit-scrollbar       { width: 3px; }
.demo-player-l__transcript::-webkit-scrollbar-track  { background: transparent; }
.demo-player-l__transcript::-webkit-scrollbar-thumb  {
  background:    var(--border);
  border-radius: var(--radius-full);
}

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

/* Speaker label column */
.demo-player-l__sender {
  flex-shrink:    0;
  width:          6.75rem;  /* ~108px — matches Figma sender column width */
  padding:        var(--spacing-4) var(--spacing-3);
  font-size:      var(--font-size-xs);
  line-height:    var(--line-height-xs);
  font-weight:    var(--font-weight-regular);
  color:          var(--muted-foreground);
  text-transform: capitalize;
}

/* Elevate sender color for active line */
.demo-player-l__line:has(.demo-player-l__message.is-active) .demo-player-l__sender {
  color: var(--foreground);
}

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

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

/* 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 {
  flex:          0 0 228px;
  position:      relative; /* scrollbar overlay anchor */
  background:    var(--background);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  overflow:      hidden; /* clip grid to rounded corners */
  box-sizing: border-box;
}

/* Inner — scrollable grid (no border/background of its own) */
.demo-player-l__features-grid {
  height:                 100%;
  display:                grid;
  grid-template-columns:  repeat(2, minmax(0, 1fr));
  grid-auto-rows:         calc((100% - 30px) / 4);
  align-content:          start;
  gap:                    10px;
  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);
  bottom:         var(--spacing-2);
  right:          2px;
  width:          4px;
  border-radius:  var(--radius-full);
  cursor:         pointer;
}

.demo-player-l__scrollthumb {
  position:      absolute;
  left:          0;
  width:         100%;
  min-height:    24px;
  background:    var(--border);
  border-radius: var(--radius-full);
  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) var(--spacing-3); /* 12px 12px */
  border-radius:   var(--radius-md);
  overflow:        hidden;
  color:           var(--extra-muted-foreground);
  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(--muted);
  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 */
.demo-player-l__feature-icon {
  width:       24px;
  height:      24px;
  flex-shrink: 0;
}

.demo-player-l__feature-icon svg {
  width:   100%;
  height:  100%;
  display: block;
}

/* 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);
  text-align:     center;
  overflow-wrap:  break-word;
  word-break:     break-word;
}

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

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



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

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

/* Illustration — behind copy, clips images that bleed outside */
.demo-player-m__illustration {
  position: absolute;
  inset:    0;
}

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

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

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

.demo-player-m__idle-headline {
  margin:      0;
  font-size:   1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 2rem;
  color:       var(--foreground);
}

.demo-player-m__idle-sub {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


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

.demo-player-m__player {
  flex:           1;
  display:        flex;
  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 {
  flex:            1;
  overflow-y:      auto;
  display:         flex;
  flex-direction:  column;
  gap:             10px; /* Figma: gap-10px between messages */
  padding:         var(--spacing-6) var(--spacing-3); /* 24px top/bottom, 12px sides */
  /* Thin, pill-shaped scrollbar — matches S variant */
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.demo-player-m__transcript::-webkit-scrollbar       { width: 3px; }
.demo-player-m__transcript::-webkit-scrollbar-track  { background: transparent; }
.demo-player-m__transcript::-webkit-scrollbar-thumb  {
  background:    var(--border);
  border-radius: var(--radius-full);
}

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

/* Speaker label column */
.demo-player-m__sender {
  flex-shrink:    0;
  width:          6.75rem; /* ~108px — matches Figma sender column */
  padding:    var(--spacing-4) var(--spacing-3);
  font-size:      var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight:    var(--font-weight-regular);
  color:          var(--muted-foreground);
  text-transform: capitalize;
}

/* Active sender */
.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 {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-2);
  padding:        var(--spacing-3);
  border-radius:  var(--radius-md);
  background:     transparent;
  min-width:      0;
}

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

/* 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;
  gap:           var(--spacing-3);
  height:        auto;
  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);
  width:         fit-content;
  color:       var(--primary);
}

.demo-player-m__feature-icon {
  width:       0.75rem;
  height:      0.75rem;
  flex-shrink: 0;
}
/* ---- Inline SVG feature icons — fill their container ---- */
.demo-player-m__feature-icon svg {
  width:   100%;
  height:  100%;
  display: block;
}

.demo-player-m__feature-text {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
}

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

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



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

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

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

.demo-player-s__idle-headline {
  margin:      0;
  font-size:   1.5rem;           /* 24px — t--font-size-2xl */
  font-weight: var(--font-weight-bold);
  line-height: 2rem;             /* 32px */
  color:       var(--foreground);
}

.demo-player-s__idle-sub {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


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

.demo-player-s__player {
  flex:           1;
  display:        flex;
  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(--card));
  pointer-events: none;
}


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

.demo-player-s__transcript {
  flex:        1;           /* take all remaining height in the player column  */
  min-height:  0;           /* allow flex child to shrink below content size   */
  overflow-y:  auto;        /* scroll when content exceeds available height    */
  display:     flex;
  align-items: flex-start;
  padding:     var(--spacing-6) var(--spacing-3) var(--spacing-4) var(--spacing-3);
  /* Thin, pill-shaped scrollbar — subtle but visible */
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.demo-player-s__transcript::-webkit-scrollbar       { width: 3px; }
.demo-player-s__transcript::-webkit-scrollbar-track  { background: transparent; }
.demo-player-s__transcript::-webkit-scrollbar-thumb  {
  background:    var(--border);
  border-radius: var(--radius-full);
}

/* Speaker label */
.demo-player-s__sender {
  flex-shrink:    0;
  width:          6.75rem; /* ~108px — matches Figma sender column */
  padding:        var(--spacing-4) var(--spacing-3);
  font-size:      var(--font-size-xs);
  line-height:    var(--line-height-xs);
  font-weight:    var(--font-weight-regular);
  color:          var(--foreground);
  text-transform: capitalize;
}

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

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


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

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

.demo-player-s__feature-icon {
  width:       0.75rem;  
  height:      0.75rem;
  flex-shrink: 0;
}

.demo-player-s__feature-icon svg {
  width:   100%;
  height:  100%;
  display: block;
}

.demo-player-s__feature-text {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
}

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

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


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

.demo-player-xs__idle {
  flex:            1;      /* fill the fixed-height card — keeps idle and playing at identical heights */
  min-height:      0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center; /* vertical centering replaces the old explicit top/bottom padding */
  gap:             10px;   /* matches Figma nav bar column gap */
  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 {
  margin:      0;
  font-size:   1.125rem;  /* 18px — font-size-lg from Figma */
  font-weight: 700;
  line-height: 1.75rem;   /* 28px — line-height-lg from Figma */
  color:       var(--foreground);
}

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


/* ============================================================
   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;
}

/* Keep the inverted-scheme border look for XS — override the default
   tab-matching styles set in TabsOrDropdown.css. */
.demo-player-xs__tabs .tod__dropdown {
  background: transparent; /* no muted ring for XS — border on trigger handles the outline */
  padding:    0;
}

.demo-player-xs__tabs .tod__trigger {
  background:  transparent;
  border:      1px solid var(--border);
  height:      36px; /* restore full height since tod__dropdown padding is 0 */
  font-size:   var(--font-size-xs);   /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
}

.demo-player-xs__tabs .tod__trigger:hover {
  background: var(--accent);
}


/* ============================================================
   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;
  gap:                   var(--spacing-3); /* 12px */
  align-items:           center;
  flex-shrink:           0;
  min-width:             0;
}


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

.demo-player-xs__feature-badge {
  display:       flex;
  align-items:   center;
  gap:           var(--spacing-3);
  height:        36px;
  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);
  min-width:     0;        /* prevent grid blowout */
  overflow:      hidden;
}

.demo-player-xs__feature-icon {
  width:       0.75rem;  /* 12px */
  height:      0.75rem;
  flex-shrink: 0;
}

.demo-player-xs__feature-icon svg {
  width:   100%;
  height:  100%;
  display: block;
}

.demo-player-xs__feature-text {
  font-size:     var(--font-size-xs);   /* 12px */
  line-height:   var(--line-height-xs);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}