/*
 * Root mobile preview only. The production holographic cabin stays on its
 * existing black presentation styles because every rule is scoped to
 * html.light-preview and a phone-sized viewport.
 */
@media (max-width: 640px) {
  html.light-preview,
  html.light-preview body,
  html.light-preview #layout,
  html.light-preview #stage {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: #eef1f4 !important;
  }

  html.light-preview body {
    margin: 0 !important;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
    color: #1b2735 !important;
  }

  html.light-preview #layout {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
  }

  html.light-preview #stage {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #eef1f4 !important;
  }

  html.light-preview #stage::after,
  html.light-preview #stage #talk-theme,
  html.light-preview #stage .hint,
  html.light-preview #stage #hero > h2,
  html.light-preview #stage #hero > p {
    display: none !important;
  }

  /* The selection/login layer is one centered, non-overlapping column. */
  html.light-preview #stage #hero {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 72px 16px 24px !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
  }

  html.light-preview #stage #jt-logo {
    display: block !important;
    position: absolute !important;
    top: calc(18px + env(safe-area-inset-top)) !important;
    left: 16px !important;
    width: 52px !important;
    max-width: 52px !important;
    height: auto !important;
    transform: none !important;
    z-index: 35 !important;
  }

  html.light-preview #stage #jt-company {
    display: block !important;
    position: absolute !important;
    top: calc(31px + env(safe-area-inset-top)) !important;
    left: 78px !important;
    color: #273648 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    z-index: 35 !important;
  }

  html.light-preview #auth-gate {
    position: static !important;
    display: block !important;
    width: min(92vw, 360px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.light-preview #auth-gate[hidden] {
    display: none !important;
  }

  html.light-preview #persona-picker[hidden],
  html.light-preview #start[hidden],
  html.light-preview #start-error[hidden] {
    display: none !important;
  }

  html.light-preview #stage[data-experience="a"] #persona-picker[hidden],
  html.light-preview #stage[data-experience="a"] #start[hidden],
  html.light-preview #stage[data-experience="a"] #start-error[hidden] {
    display: none !important;
  }

  html.light-preview #auth-gate #cabin-login-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: grid !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(28, 43, 60, 0.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(28, 43, 60, 0.12) !important;
  }

  html.light-preview #cabin-login-form label,
  html.light-preview #cabin-login-form input,
  html.light-preview #cabin-login-form select,
  html.light-preview #cabin-login-form button {
    font-size: 16px !important;
  }

  html.light-preview #cabin-login-form input,
  html.light-preview #cabin-login-form select,
  html.light-preview #cabin-login-form button {
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  html.light-preview #cabin-login-form input,
  html.light-preview #cabin-login-form select {
    width: 100% !important;
    color: #1b2735 !important;
    background: #fff !important;
    border-color: rgba(28, 43, 60, 0.22) !important;
  }

  html.light-preview #cabin-login-form button,
  html.light-preview #start {
    color: #fff !important;
    background: #c45a0a !important;
    text-shadow: none !important;
  }

  html.light-preview #persona-picker:not([hidden]) {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    gap: 12px !important;
    width: min(92vw, 360px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.light-preview #persona-picker .persona-option {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 146px !important;
    min-height: 0 !important;
    padding: 10px 8px !important;
    gap: 8px !important;
    font-size: 15px !important;
    border-radius: 18px !important;
  }

  html.light-preview #persona-picker .persona-logo,
  html.light-preview #persona-picker .persona-option[data-persona="ruby"] .persona-logo {
    width: 72px !important;
    height: 72px !important;
  }

  html.light-preview #start {
    position: static !important;
    width: min(78vw, 280px) !important;
    min-height: 54px !important;
    margin: 0 !important;
    transform: none !important;
    font-size: 18px !important;
    z-index: 41 !important;
  }

  html.light-preview #stage[data-state="idle"] #video,
  html.light-preview #stage[data-state="idle"] #video-canvas,
  html.light-preview #stage[data-state="idle"] hyperframes-player {
    display: none !important;
  }

  /* Conversation: contain the avatar; do not inherit the desktop scale. */
  html.light-preview #stage[data-state="connecting"] #video,
  html.light-preview #stage[data-state="connecting"] #video-canvas,
  html.light-preview #stage[data-state="live"] #video,
  html.light-preview #stage[data-state="live"] #video-canvas {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center 15% !important;
    transform: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  html.light-preview #stage[data-state="live"] #jt-logo,
  html.light-preview #stage[data-state="connecting"] #jt-logo,
  html.light-preview #stage[data-state="live"] #jt-company,
  html.light-preview #stage[data-state="connecting"] #jt-company {
    display: none !important;
  }

  /* Conversation is selected before the first frame arrives. Use the
     experience state as the stable mobile layout switch so the avatar is not
     hidden or re-positioned during that connecting window. */
  html.light-preview #stage[data-experience="b"] #hero {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.light-preview #stage[data-experience="b"] #video,
  html.light-preview #stage[data-experience="b"] #video-canvas {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center 15% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* The caption is a real sibling of #stage, not a descendant. */
  html.light-preview:has(#stage[data-state="live"]) ~ .caption-slot,
  html.light-preview:has(#stage[data-state="connecting"]) ~ .caption-slot,
  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .caption-slot {
    display: block !important;
    position: fixed !important;
    left: 10vw !important;
    right: 10vw !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-height: 24vh !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 70 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot {
    display: block !important;
    position: fixed !important;
    left: 10vw !important;
    right: 10vw !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 24vh !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 70 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot #transcript-panel,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .caption-slot #transcript-panel {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: 24vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript-panel,
  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: 24vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript .turn,
  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript .text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c45a0a !important;
    -webkit-text-fill-color: #c45a0a !important;
    font-size: clamp(17px, 4.4vw, 21px) !important;
    line-height: 1.28 !important;
    white-space: pre-line !important;
    text-align: center !important;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript .turn.user .text {
    color: #274c77 !important;
    -webkit-text-fill-color: #274c77 !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot #transcript-panel h2,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .caption-slot #transcript-panel .who {
    display: none !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot #transcript,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .caption-slot #transcript {
    display: block !important;
    max-height: 24vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c45a0a !important;
    text-align: center !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot #transcript .turn,
  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot #transcript .text,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .caption-slot #transcript .turn,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .caption-slot #transcript .text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #c45a0a !important;
    -webkit-text-fill-color: #c45a0a !important;
    font-size: clamp(17px, 4.4vw, 21px) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    white-space: pre-line !important;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .caption-slot #transcript .turn.user .text {
    color: #274c77 !important;
    -webkit-text-fill-color: #274c77 !important;
  }

  /* Footer is always the bottom band; no overlay with the caption. */
  html.light-preview .footer-slot {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    padding: 8px 16px env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    z-index: 80 !important;
    background: rgba(255, 255, 255, 0.86) !important;
  }

  html.light-preview .footer-slot,
  html.light-preview .wave-slot {
    display: none !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .footer-slot,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .footer-slot {
    display: flex !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .footer-slot {
    display: flex !important;
  }

  html.light-preview #usage {
    position: static !important;
    margin: 0 !important;
    color: #273648 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
  }

  html.light-preview #usage,
  html.light-preview #controls {
    display: none !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .footer-slot #usage,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .footer-slot #usage {
    display: block !important;
  }

  html.light-preview #layout:has(#stage[data-state="live"]) ~ .footer-slot #controls,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .footer-slot #controls {
    display: flex !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .footer-slot #usage,
  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .footer-slot #controls {
    display: flex !important;
  }

  html.light-preview #controls {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    transform: none !important;
  }

  html.light-preview #mic,
  html.light-preview .wave-slot,
  html.light-preview #status {
    display: none !important;
  }

  html.light-preview #stop,
  html.light-preview #stage[data-state="live"] ~ .footer-slot #stop {
    position: static !important;
    display: flex !important;
    width: min(72vw, 240px) !important;
    min-height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 90 !important;
    color: #fff !important;
    background: #c9343d !important;
    border-radius: 999px !important;
  }

  html.light-preview #layout:has(#stage[data-state="idle"]) ~ .footer-slot,
  html.light-preview #layout:has(#stage[data-state="connecting"]) ~ .footer-slot {
    background: transparent !important;
  }

  html.light-preview #stage[data-state="idle"] ~ .footer-slot #usage,
  html.light-preview #stage[data-state="idle"] ~ .footer-slot #controls,
  html.light-preview #stage[data-state="connecting"] ~ .footer-slot #usage,
  html.light-preview #stage[data-state="connecting"] ~ .footer-slot #controls {
    display: none !important;
  }

  html.light-preview #jt-dock {
    display: none !important;
  }

  html.light-preview #login-error,
  html.light-preview #cabin-login-error,
  html.light-preview #start-error {
    max-width: min(92vw, 360px) !important;
    color: #9e2630 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  /* Stable pre-caption conversation presentation. The body state is written
     by main.ts, so the sibling caption/footer do not depend on :has(). */
  html.light-preview body[data-experience="b"] #stage #video,
  html.light-preview body[data-experience="b"] #stage #video-canvas {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
    object-position: center 36% !important;
    transform: scale(1.08) !important;
    transform-origin: 50% 35% !important;
    z-index: 1 !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot,
  html.light-preview body[data-experience="b"] .caption-slot {
    display: block !important;
    position: fixed !important;
    left: 7vw !important;
    right: 7vw !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 70 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript-panel,
  html.light-preview body[data-experience="b"] .caption-slot #transcript-panel {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    visibility: visible !important;
    overflow: hidden !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript-panel h2,
  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript-panel .who,
  html.light-preview body[data-experience="b"] .caption-slot #transcript-panel h2,
  html.light-preview body[data-experience="b"] .caption-slot #transcript-panel .who {
    display: none !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript,
  html.light-preview body[data-experience="b"] .caption-slot #transcript {
    display: block !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #c45a0a !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript .text,
  html.light-preview body[data-experience="b"] .caption-slot #transcript .text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c45a0a !important;
    -webkit-text-fill-color: #c45a0a !important;
    font-size: clamp(17px, 4.4vw, 21px) !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .caption-slot #transcript .turn.user .text,
  html.light-preview body[data-experience="b"] .caption-slot #transcript .turn.user .text {
    color: #274c77 !important;
    -webkit-text-fill-color: #274c77 !important;
  }

  html.light-preview #layout:has(#stage[data-experience="b"]) ~ .footer-slot,
  html.light-preview body[data-experience="b"] .footer-slot {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
  }

  /* Final mobile conversation override: older inline rules used a 1.9x
     transform and won the cascade, which could move the avatar off-screen.
     Match that selector's specificity while keeping the stable pre-caption
     framing and the caption/footer layers above it. */
  html.talk-only.light-preview body[data-experience="b"] #stage[data-experience="b"] .avatar-slot #video,
  html.talk-only.light-preview body[data-experience="b"] #stage[data-experience="b"] .avatar-slot #video-canvas {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center 36% !important;
    transform: scale(1.08) !important;
    transform-origin: 50% 35% !important;
    z-index: 1 !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .caption-slot {
    display: block !important;
    position: fixed !important;
    left: 7vw !important;
    right: 7vw !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 70 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .caption-slot #transcript-panel,
  html.talk-only.light-preview body[data-experience="b"] .caption-slot #transcript-panel .panel-inner,
  html.talk-only.light-preview body[data-experience="b"] .caption-slot #transcript {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .caption-slot #transcript-panel h2,
  html.talk-only.light-preview body[data-experience="b"] .caption-slot #transcript-panel .who {
    display: none !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .caption-slot #transcript .text {
    display: block !important;
    color: #c45a0a !important;
    -webkit-text-fill-color: #c45a0a !important;
    font-size: clamp(16px, 4.2vw, 19px) !important;
    line-height: 1.28 !important;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.45) !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .footer-slot {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .footer-slot #usage {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: calc(52px + env(safe-area-inset-bottom)) !important;
    width: calc(100% - 24px) !important;
    transform: translateX(-50%) !important;
    color: #26364a !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    z-index: 82 !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .footer-slot #controls {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 81 !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .footer-slot #controls #mic {
    display: none !important;
  }

  html.talk-only.light-preview body[data-experience="b"] .footer-slot #controls #stop {
    display: flex !important;
    position: static !important;
    min-width: 104px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Final light-mode conversation layer. The production cabin does not carry
     `light-preview`, so its stable black layout is deliberately untouched. */
  html.light-preview #stage[data-experience="b"] .avatar-slot #video {
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: 1 !important;
  }

  html.light-preview #stage[data-experience="b"] .avatar-slot #video-canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 4 !important;
    background: transparent !important;
  }

  /* Keep the complete caption panel in its own bottom band. Older desktop
     rules positioned its nested panel at mid-screen and let long lines leak
     out on the right. */
  html.light-preview #stage[data-experience="b"] .caption-slot {
    display: block !important;
    position: fixed !important;
    left: 7vw !important;
    right: 7vw !important;
    top: auto !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 70 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html.light-preview #stage[data-experience="b"] .caption-slot #transcript-panel,
  html.light-preview #stage[data-experience="b"] .caption-slot #transcript-panel .panel-inner,
  html.light-preview #stage[data-experience="b"] .caption-slot #transcript {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 96px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  html.light-preview #stage[data-experience="b"] .caption-slot #transcript .turn,
  html.light-preview #stage[data-experience="b"] .caption-slot #transcript .text {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c45a0a !important;
    -webkit-text-fill-color: #c45a0a !important;
    font-size: clamp(16px, 4.2vw, 19px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.45) !important;
  }

  html.light-preview #stage[data-experience="b"] .caption-slot #transcript .turn.user .text {
    color: #274c77 !important;
    -webkit-text-fill-color: #274c77 !important;
  }
}