/* ============================================================
   Primitive tokens — generated from Figma Tailwind + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  /* Brand-neutral */
  --color-brand-neutral-50 : #FAFAF7;
  --color-brand-neutral-100: #F5F5F3;
  --color-brand-neutral-200: #E7E7E2;
  --color-brand-neutral-300: #D6D6CD;
  --color-brand-neutral-400: #A8A8A0;
  --color-brand-neutral-500: #85857A;
  --color-brand-neutral-600: #65655D;
  --color-brand-neutral-700: #4D4D47;
  --color-brand-neutral-800: #3A3A36;
  --color-brand-neutral-900: #282825;
  --color-brand-neutral-950: #1A1A18;

  /* Brand-beige */
  --color-brand-beige-50 : #FAF6F0;
  --color-brand-beige-100: #F5F0E7;
  --color-brand-beige-200: #E5DFD5;
  --color-brand-beige-300: #D6CFC2;
  --color-brand-beige-400: #C3BBAC;
  --color-brand-beige-500: #C2B69F;
  --color-brand-beige-600: #907F60;
  --color-brand-beige-700: #6C6251;
  --color-brand-beige-800: #4D422E;
  --color-brand-beige-900: #282115;
  --color-brand-beige-950: #1A150D;

  /* Brand-blue */
  --color-brand-blue-50 : #EBFAFF;
  --color-brand-blue-100: #D1EFFA;
  --color-brand-blue-200: #A8DDF0;
  --color-brand-blue-300: #7ECBE7;
  --color-brand-blue-400: #59B7D9;
  --color-brand-blue-500: #33A3CC;
  --color-brand-blue-600: #2684A6;
  --color-brand-blue-700: #186581;
  --color-brand-blue-800: #0F4457;
  --color-brand-blue-900: #083545;
  --color-brand-blue-950: #05232E;

  /* Brand-orange */
  --color-brand-orange-50 : #FFF0EB;
  --color-brand-orange-100: #FCE2D9;
  --color-brand-orange-200: #F8B7A0;
  --color-brand-orange-300: #F4855D;
  --color-brand-orange-400: #F0612D;
  --color-brand-orange-500: #C64110;
  --color-brand-orange-600: #A0340D;
  --color-brand-orange-700: #712509;
  --color-brand-orange-800: #4B1906;
  --color-brand-orange-900: #260C03;
  --color-brand-orange-950: #1A0802;

  /* Typography scale */
  --font-size-h1   : 2.25rem;
  --font-size-h2   : 1.875rem;
  --font-size-h3   : 1.5rem;
  --font-size-h4   : 1.25rem;
  --font-size-body : 1rem;
  --font-size-lead : 1.25rem;
  --font-size-large: 1.125rem;

  /* Shadow scale */
  --shadow-2xs: 0px 1px 3px 0px #1A1A1808;
  --shadow-xs : 0px 1px 3px 0px #1A1A1808;
  --shadow-2xl: 0px 1px 3px 0px #1A1A1821;
  --shadow-sm : 0px 1px 3px 0px #1A1A180D, 0px 1px 2px -1px #1A1A180D;
  --shadow-md : 0px 1px 3px 0px #1A1A180D, 0px 2px 4px -1px #1A1A180D;
  --shadow-lg : 0px 1px 3px 0px #1A1A180D, 0px 4px 6px -1px #1A1A180D;
  --shadow-xl : 0px 1px 3px 0px #1A1A180D, 0px 8px 10px -1px #1A1A180D;

}

/* ============================================================
   Semantic color tokens — generated from Figma Mode + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  --extra-transparent     : #FFFFFF00;
  --extra-backdrop-overlay: #3C3A4099;
  --extra-shadow-color    : #0000001A;
  --muted-foreground-card : #A8A8A0;
  --opacity-accent-10     : #FFFFFF1A;
  --opacity-accent-20     : #FFFFFF33;
  --opacity-accent-30     : #FFFFFF4D;
  --opacity-accent-40     : #FFFFFF66;
  --opacity-accent-50     : #FFFFFF80;
  --opacity-success-10    : #16A34A1A;
  --opacity-success-20    : #16A34A33;
  --opacity-success-30    : #16A34A4D;
  --opacity-success-40    : #16A34A66;
  --opacity-success-50    : #16A34A80;
  --opacity-info-10       : #59B7D91A;
  --opacity-info-20       : #59B7D933;
  --opacity-info-30       : #59B7D94D;
  --opacity-info-40       : #59B7D966;
  --opacity-info-50       : #59B7D980;
  --opacity-warning-10    : #E392191A;
  --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-neutral-10    : #2828251A;
  --opacity-neutral-20    : #28282533;
  --opacity-neutral-30    : #2828254D;
  --opacity-neutral-40    : #28282566;
  --opacity-neutral-50    : #28282580;
}


:host,
[data-scheme="light"] {
  --background                : #F5F0E7;
  --foreground                : #282825;
  --card                      : #FFFFFF;
  --card-foreground           : #282825;
  --popover                   : #F5F0E7;
  --popover-foreground        : #3A3A36;
  --primary                   : #C64110;
  --primary-foreground        : #F5F0E7;
  --secondary                 : #FAF6F0;
  --secondary-foreground      : #3A3A36;
  --muted                     : #E5DFD5;
  --muted-foreground          : #85857A;
  --accent                    : #FAF6F0;
  --accent-foreground         : #282825;
  --destructive               : #EF4444;
  --info                      : #59B7D9;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #D6CFC2;
  --input                     : #D6CFC2;
  --ring                      : #59B7D9;
  --chart-1                   : #F0612D;
  --chart-2                   : #59B7D9;
  --chart-3                   : #6366F1;
  --chart-4                   : #10B981;
  --chart-5                   : #EAB308;
  --sidebar                   : #E5DFD5;
  --sidebar-foreground        : #4D4D47;
  --sidebar-primary           : #F0612D;
  --sidebar-primary-foreground: #F5F0E7;
  --sidebar-accent            : #FAF6F0;
  --sidebar-accent-foreground : #1A1A18;
  --sidebar-border            : #D6CFC2;
  --sidebar-ring              : #3A3A36;
  --extra-muted-foreground    : #D6CFC2;
  --opacity-primary-10        : #C641101A;
  --opacity-primary-20        : #C6411033;
  --opacity-primary-30        : #C641104D;
  --opacity-primary-40        : #C6411066;
  --opacity-primary-50        : #C6411080;
  --opacity-secondary-10      : #FAF6F01A;
  --opacity-secondary-20      : #FAF6F033;
  --opacity-secondary-30      : #FAF6F04D;
  --opacity-secondary-40      : #FAF6F066;
  --opacity-secondary-50      : #FAF6F080;
}

[data-scheme="dark"] {
  --background                : #1A1A18;
  --foreground                : #F5F0E7;
  --card                      : #282825;
  --card-foreground           : #F5F0E7;
  --popover                   : #282825;
  --popover-foreground        : #FAF6F0;
  --primary                   : #F0612D;
  --primary-foreground        : #FAF6F0;
  --secondary                 : #1A1A18;
  --secondary-foreground      : #FAF6F0;
  --muted                     : #3A3A36;
  --muted-foreground          : #85857A;
  --accent                    : #3A3A36;
  --accent-foreground         : #FAF6F0;
  --destructive               : #DC2626;
  --info                      : #7ECBE7;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --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: #FAF6F0;
  --sidebar-accent            : #282825;
  --sidebar-accent-foreground : #FFFFFF;
  --sidebar-border            : #282825;
  --sidebar-ring              : #65655D;
  --extra-muted-foreground    : #4D4D47;
  --opacity-primary-10        : #F0612D1A;
  --opacity-primary-20        : #F0612D33;
  --opacity-primary-30        : #F0612D4D;
  --opacity-primary-40        : #F0612D66;
  --opacity-primary-50        : #F0612D80;
  --opacity-secondary-10      : #2828251A;
  --opacity-secondary-20      : #28282533;
  --opacity-secondary-30      : #2828254D;
  --opacity-secondary-40      : #28282566;
  --opacity-secondary-50      : #28282580;
}

/* ============================================================
   Responsive layout tokens — generated from Figma Responsive exports.
   Mobile-first: :root = mobile defaults; overridden at tablet (768px)
   and web (1280px) via media queries.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

/* Mobile defaults */
:host {
  --layout-screen-size        : 360px;
  --layout-vertical-padding   : 32px;
  --layout-horizontal-padding : 16px;
  --layout-heading-size       : 24px;
  --layout-heading-line-height: 32px;
  --layout-section-spacing    : 48px;
  --layout-block-width        : 360px;
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
  :host {
    --layout-screen-size        : 768px;
    --layout-vertical-padding   : 64px;
    --layout-horizontal-padding : 24px;
    --layout-heading-size       : 30px;
    --layout-heading-line-height: 36px;
    --layout-section-spacing    : 64px;
    --layout-block-width        : 768px;
  }
}

/* Web (≥1280px) */
@media (min-width: 1280px) {
  :host {
    --layout-screen-size        : 1280px;
    --layout-vertical-padding   : 96px;
    --layout-horizontal-padding : 32px;
    --layout-heading-size       : 36px;
    --layout-heading-line-height: 40px;
    --layout-section-spacing    : 96px;
    --layout-block-width        : 1440px;
  }
}

/* ============================================================
   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.

   Layer 1 — Primitives (brand palette + type scale): tokens/primitives.css  [generated]
   Layer 2 — Semantic colors + opacity scale:         tokens/colors.css       [generated]
   Layer 3 — Responsive layout vars:                  tokens/responsive.css   [generated]
   Layer 4 — Manual supplements below                 (not yet in Figma)
   ============================================================ */


/* ----------------------------------------------------------
   Manual Color Supplements — Light
   Tokens not (yet) exported from Figma; kept here manually.
   ---------------------------------------------------------- */
:host,
[data-scheme="light"] {

  /* 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             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --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;

}


/* ----------------------------------------------------------
   Manual Color Supplements — Dark
   ---------------------------------------------------------- */
[data-scheme="dark"] {

  /* 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             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --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-fallback: "II_Increments_Sans", "Iiincrementssans", sans-serif;
   --font-family-default:   var(--_typography---fonts--font-main, var(--font-family-fallback));

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


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

/* ---- 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: 960px;
  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;
  right:     24px;
  position: absolute;
  top:      24px;
  width:    38%;
  max-width: 238px;
}

/* 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;
  position: absolute;
  width:    40.5%;
  max-width: 254px;
}

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

/* ============================================================
   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);
  border-radius: var(--radius-full);
}

/* Segmented tab bar */
.tod__segtabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        34px;
  background:    var(--muted);
  border-radius: var(--radius-full);
  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:          1px solid transparent; /* maintains consistent size 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;
  white-space:     nowrap;
  transition:      background 0.2s, border-color 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);
  border: 1px solid var(--border);
}

.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:       0;
  background:    transparent;
  border-radius: var(--radius-full);
}

/* Pill-shaped trigger button — bordered pill with card background. */
.tod__trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--spacing-1-5); /* 6px */
  width:           100%;
  height:          36px;
  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 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(--accent);
}

/* 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 {
  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 228px;
  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;
  background:      var(--background);
}

/* 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);
  background:      var(--background);
}

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