:root {
  color-scheme: light;
  /* Yatto DESIGN.md tokens: keep aliases so older runtime classes stay stable. */
  --yatto-bg: #f8fbff;
  --yatto-surface: #ffffff;
  --yatto-surface-soft: #f1f7ff;
  --yatto-text: #111827;
  --yatto-muted: #475569;
  --yatto-border: #d9e2f0;
  --yatto-primary: #2563eb;
  --yatto-primary-dark: #1d4ed8;
  --yatto-warm: #f59e0b;
  --yatto-success: #15803d;
  --yatto-warning: #92400e;
  --yatto-danger: #dc2626;
  --yatto-radius-sm: 10px;
  --yatto-radius-md: 16px;
  --yatto-radius-lg: 24px;
  --yatto-radius-xl: 32px;
  --yatto-radius-pill: 999px;
  --yatto-space-xs: 4px;
  --yatto-space-sm: 8px;
  --yatto-space-md: 16px;
  --yatto-space-lg: 24px;
  --yatto-space-xl: 40px;
  --yatto-space-xxl: 72px;

  --bg: var(--yatto-bg);
  --bg-soft: var(--yatto-surface-soft);
  --card: rgba(255, 255, 255, 0.9);
  --card-border: var(--yatto-border);
  --text: var(--yatto-text);
  --muted: var(--yatto-muted);
  --accent: var(--yatto-primary);
  --accent-strong: var(--yatto-primary-dark);
  --shadow: 0 24px 80px rgba(37, 99, 235, 0.12);
  --runtime-font-multilingual: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Arabic", "Noto Sans Bengali", "Noto Sans Thai", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--runtime-font-multilingual);
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 46%, var(--bg-soft) 100%);
  color: var(--text);
}

.shell {
  width: min(1320px, calc(100vw - 12px));
  margin: 0 auto;
  padding: 10px 0 24px;
  display: grid;
  gap: 12px;
}

.stage-card,
.controls-card,
.log-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--yatto-radius-lg);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.stage-card {
  padding: 10px;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.stage-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

h1,
h2 {
  margin: 0;
}

.badge {
  border: 1px solid rgba(166, 92, 63, 0.24);
  color: var(--accent-strong);
  background: rgba(255, 247, 240, 0.74);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
}

.avatar-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--yatto-radius-lg);
  overflow: hidden;
  border: 1px solid var(--yatto-border);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 246, 228, 0.95), transparent 18%),
    radial-gradient(circle at 76% 22%, rgba(255, 239, 212, 0.78), transparent 16%),
    linear-gradient(180deg, #fbf1e5 0%, #f2dfcb 36%, #dfc0a3 62%, #b98358 62%, #9c6846 100%);
}

.avatar-stage[data-scene-background="plain"] {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 54%, #cbd5e1 100%);
}

.avatar-stage[data-scene-background="cafe"] {
  background:
    linear-gradient(90deg, rgba(91, 55, 32, 0.26) 0 1px, transparent 1px 20%),
    linear-gradient(180deg, #fff7ed 0%, #f4d4aa 38%, #a56b3f 38% 43%, #6f4a32 100%);
}

.avatar-stage[data-scene-background="airport"] {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(59, 130, 246, 0.22) 18% 18.7%, transparent 18.7% 81.3%, rgba(59, 130, 246, 0.22) 81.3% 82%, transparent 82%),
    linear-gradient(180deg, #ecfeff 0%, #bfdbfe 48%, #dbeafe 48% 60%, #94a3b8 100%);
}

.avatar-stage[data-scene-background="hotel"] {
  background:
    linear-gradient(90deg, rgba(120, 53, 15, 0.18) 0 1px, transparent 1px 18%),
    linear-gradient(180deg, #fff7ed 0%, #fed7aa 42%, #d97706 42% 45%, #854d0e 100%);
}

.avatar-stage[data-scene-background="interview"] {
  background:
    linear-gradient(90deg, transparent 0 32%, rgba(15, 23, 42, 0.08) 32% 33%, transparent 33% 67%, rgba(15, 23, 42, 0.08) 67% 68%, transparent 68%),
    linear-gradient(180deg, #f8fafc 0%, #e0f2fe 48%, #334155 48% 100%);
}

.avatar-stage[data-scene-background="classroom"] {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(22, 101, 52, 0.24) 12% 88%, transparent 88%),
    linear-gradient(180deg, #fefce8 0%, #d9f99d 40%, #a3a3a3 40% 45%, #e7e5e4 100%);
}

.avatar-stage::before,
.avatar-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.avatar-stage::before {
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(122, 82, 52, 0.16) 16% 16.8%, transparent 16.8% 83.2%, rgba(122, 82, 52, 0.16) 83.2% 84%, transparent 84%),
    linear-gradient(180deg, transparent 0 14%, rgba(255, 249, 239, 0.48) 14% 33%, transparent 33% 100%),
    linear-gradient(180deg, transparent 0 58%, rgba(108, 74, 49, 0.18) 58% 60%, transparent 60% 100%),
    radial-gradient(circle at 18% 24%, rgba(255, 252, 246, 0.45), transparent 10%),
    radial-gradient(circle at 84% 26%, rgba(255, 249, 242, 0.34), transparent 9%);
  opacity: 0.78;
}

.avatar-stage::after {
  background:
    radial-gradient(circle at 10% 84%, rgba(86, 119, 88, 0.26), transparent 18%),
    radial-gradient(circle at 88% 80%, rgba(122, 81, 53, 0.22), transparent 16%),
    radial-gradient(circle at 50% 70%, rgba(255, 214, 170, 0.18), transparent 22%);
  filter: blur(24px);
  opacity: 0.9;
}

.avatar-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 236, 202, 0.30), transparent 22%),
    radial-gradient(circle at 24% 24%, rgba(255, 251, 244, 0.22), transparent 14%),
    radial-gradient(circle at 80% 22%, rgba(255, 247, 232, 0.18), transparent 12%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%);
  pointer-events: none;
}

.scene-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.08), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.08));
}

.avatar-shell {
  --float-y: 0px;
  --talk-scale: 1;
  --head-rotate: 0deg;
  --head-shift-x: 0px;
  --jaw-open: 0px;
  --blink: 0;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px 24px 28px;
}

.assistant-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 4;
  pointer-events: none;
  background: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
}


.renderer-error {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 28px;
  box-sizing: border-box;
  background: #050505;
  color: #ffffff;
  text-align: center;
  font-family: var(--runtime-font-multilingual);
}

.renderer-error[hidden] {
  display: none;
}

.renderer-error strong {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
}

.renderer-error span {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}

.avatar-stage[data-renderer-error="1"] {
  background: #050505 !important;
}

.avatar-stage[data-renderer-error="1"] .avatar-shell,
.avatar-stage[data-renderer-error="1"] .assistant-video,
.avatar-stage[data-renderer-error="1"] .assistant-video-sidefill,
.avatar-stage[data-renderer-error="1"] .scene-overlay {
  display: none !important;
}

.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  padding: 14px 16px 18px;
  pointer-events: none;
  color: #ffffff;
}

.scene-overlay[data-caption-mode="off"]:not([data-countdown-active="1"]) {
  display: none;
}

.scene-label {
  position: absolute;
  top: 20px;
  left: 22px;
  max-width: min(540px, 88%);
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.scene-countdown {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  min-width: 108px;
  display: grid;
  gap: 2px;
  justify-items: start;
  box-sizing: border-box;
  padding: 9px 12px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 16px 38px rgba(2, 6, 23, 0.26);
  backdrop-filter: blur(12px);
}

.scene-countdown[hidden] {
  display: none;
}

.scene-countdown-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
}

.scene-countdown-value {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.scene-countdown[data-urgency="soon"] {
  border-color: rgba(251, 191, 36, 0.48);
}

.scene-countdown[data-urgency="ending"] {
  border-color: rgba(248, 113, 113, 0.62);
}

.scene-countdown[data-urgency="ending"] .scene-countdown-value {
  color: #fecaca;
}

.scene-caption-panel {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(960px, calc(100% - 28px));
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  padding: 16px 20px 15px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.78), rgba(8, 13, 24, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.30);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 120ms ease, transform 120ms ease;
  font-family: var(--runtime-font-multilingual);
}

.scene-overlay[data-has-caption="1"] .scene-caption-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.scene-subtitle,
.scene-translation,
.scene-phrase {
  margin: 0;
  text-align: center;
  overflow-wrap: anywhere;
  font-family: var(--runtime-font-multilingual);
}

.scene-subtitle {
  font-size: 28px;
  line-height: 1.22;
  font-weight: 900;
}

.scene-translation {
  display: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 760;
}

.scene-phrase {
  display: none;
  color: #fde68a;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 850;
}

.scene-overlay[data-caption-mode="bilingual"] .scene-translation,
.scene-overlay[data-caption-mode="phrase"] .scene-translation,
.scene-overlay[data-caption-mode="phrase"] .scene-phrase {
  display: block;
}

.assistant-video-sidefill {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  filter: blur(26px) saturate(0.92) brightness(0.78);
  transform: scale(1.04) translateZ(0);
  backface-visibility: hidden;
}

.avatar-stage[data-video-renderer="livetalking"][data-video-active="1"] .assistant-video-sidefill {
  opacity: 0.42;
}

.avatar-stage[data-video-renderer="livetalking"][data-video-active="1"]::before {
  background: linear-gradient(90deg, rgba(96, 63, 42, 0.08), transparent 24%, transparent 76%, rgba(96, 63, 42, 0.08));
  opacity: 0.22;
  z-index: 2;
}

.avatar-stage[data-video-renderer="livetalking"][data-video-active="1"]::after {
  background: linear-gradient(180deg, transparent 58%, rgba(62, 39, 24, 0.10) 100%);
  filter: none;
  opacity: 0.26;
  z-index: 2;
}

.avatar-stage[data-runtime-ready="0"] .avatar-shell {
  opacity: 0;
}

.avatar-stage[data-video-renderer="livetalking"][data-video-active="1"] .assistant-video {
  opacity: 1;
}

.avatar-stage[data-video-renderer="livetalking"] .assistant-video {
  object-fit: contain;
  object-position: center center;
  background: transparent;
}

.bot-output-mode body {
  margin: 0;
  overflow: hidden;
  background: #050505;
}

.bot-output-mode .shell {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
}

.bot-output-mode .stage-card {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #050505;
  box-shadow: none;
}

.bot-output-mode .stage-header,
.bot-output-mode .status-bar,
.bot-output-mode .controls-card {
  display: none !important;
}

.bot-output-mode .avatar-stage {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #050505;
  box-shadow: none;
}

.bot-output-mode .avatar-stage[data-video-renderer="livetalking"] .assistant-video {
  object-fit: cover;
  object-position: center 34%;
}

.avatar-stage[data-video-renderer="livetalking"][data-video-active="1"] .avatar-shell {
  opacity: 0;
}


/* Broken synthetic blink overlay removed: it could drift over the painted eyes and create a fake extra-eye artifact. Reintroduce blinking only with dedicated eye-safe assets. */

.avatar-shell::after {
  content: "";
  position: absolute;
  bottom: 7%;
  width: min(44vw, 500px);
  height: 56px;
  background: radial-gradient(circle, rgba(99, 67, 44, 0.34), rgba(99, 67, 44, 0.06) 62%, transparent 74%);
  filter: blur(16px);
  transform: scaleX(1.18);
  pointer-events: none;
}

.avatar-stack {
  position: relative;
  width: min(50vw, 500px);
  max-width: 100%;
  aspect-ratio: 896 / 1200;
  overflow: visible;
  transform: none;
  z-index: 2;
}

.avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 120ms linear, transform 220ms ease;
  transform-origin: 50% 86%;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-layer.is-base {
  z-index: 1;
}

.avatar-layer.is-active {
  opacity: 1;
}

.avatar-stage[data-video-renderer="static"] .avatar-bg-glow,
.avatar-stage[data-video-renderer="static"] .scene-ambient,
.avatar-stage[data-video-renderer="static"]::before,
.avatar-stage[data-video-renderer="static"]::after,
.avatar-stage[data-video-renderer="static"] .avatar-shell::after {
  display: none;
}

.avatar-stage[data-video-renderer="static"] .avatar-shell {
  padding: 0;
  place-items: stretch;
}

.avatar-stage[data-video-renderer="static"] .avatar-stack {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
}

.avatar-stage[data-video-renderer="static"] .avatar-layer.is-flat-base {
  object-fit: cover;
  object-position: center center;
}

.avatar-stage[data-video-renderer="static"] .avatar-stack,
.avatar-stage[data-video-renderer="static"] .avatar-layer,
.avatar-stage[data-video-renderer="static"] .avatar-layer.is-flat-base {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.avatar-stage[data-video-renderer="static"] .avatar-layer.is-flat-base:not(.is-active) {
  opacity: 0 !important;
}

.avatar-layer.is-mouth-viseme {
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 36ms linear, transform 36ms linear, filter 90ms ease;
  transform-origin: 50% 49.8%;
  clip-path: ellipse(13.8% 8.8% at 50% 49.9%);
  pointer-events: none;
  filter: saturate(1) brightness(1);
}

.avatar-layer.is-eye-expression,
.avatar-layer.is-blink-expression {
  opacity: 0;
  transition: opacity 80ms linear, transform 70ms linear, filter 120ms ease;
  transform-origin: 50% 31%;
  transform-box: fill-box;
  clip-path: ellipse(18% 10% at 50% 31%);
  pointer-events: none;
}

.avatar-layer.is-eye-expression {
  z-index: 7;
}

.avatar-layer.is-blink-expression {
  z-index: 8;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.controls-card,
.log-card {
  padding: 20px;
}

.preview-lite-card {
  display: grid;
  gap: 18px;
}

.guest-trial-panel {
  display: none;
}

html.guest-trial-mode .guest-trial-panel {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 246, 236, 0.92);
  border: 1px solid rgba(199, 124, 89, 0.14);
}

.guest-trial-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

html.guest-trial-mode .guest-trial-actions {
  justify-content: flex-start;
}

html.guest-trial-mode .guest-trial-actions > button {
  min-width: 180px;
}

html.guest-trial-mode .grid.two-up,
html.guest-trial-mode .avatar-manager,
html.guest-trial-mode .preview-advanced-fields,
html.guest-trial-mode .preview-primary-actions,
html.guest-trial-mode #debug-card,
html.guest-trial-mode .log-card {
  display: none !important;
}

html.nico-mode .shell {
  width: min(860px, calc(100vw - 32px));
}

html.nico-mode .stage-header {
  align-items: center;
}

html.nico-mode .controls-card {
  padding: 18px;
}

html.nico-mode .grid.two-up,
html.nico-mode .avatar-manager,
html.nico-mode .preview-advanced-fields,
html.nico-mode #preview-lipsync,
html.nico-mode #start-preview,
html.nico-mode #stop-preview,
html.nico-mode #create-recall-bot,
html.nico-mode #debug-card,
html.nico-mode .log-card {
  display: none !important;
}

html.nico-mode .preview-primary-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

html.nico-mode #connect-live,
html.nico-mode #disconnect-live {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 180px;
}

.nico-copy {
  margin: 0;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

.preview-advanced-fields,
.preview-hidden-action,
#debug-card,
.log-card,
.avatar-slider-grid,
.avatar-actions,
.compact-note {
  display: none !important;
}

.preview-primary-actions {
  margin-top: 18px;
  justify-content: center;
}

.preview-primary-actions > #preview-lipsync {
  min-width: 220px;
}

.grid {
  display: grid;
  gap: 16px;
}

.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea,
select {
  width: 100%;
  border-radius: var(--yatto-radius-md);
  border: 1px solid var(--yatto-border);
  background: var(--yatto-surface);
  color: var(--text);
  padding: 14px 16px;
}

input[type="range"] {
  padding: 0;
}

input[type="file"] {
  padding: 12px;
}

textarea {
  resize: vertical;
}

.avatar-manager {
  margin-top: 20px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 246, 236, 0.92);
  border: 1px solid rgba(199, 124, 89, 0.14);
}

.avatar-manager-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.avatar-slider-grid {
  margin-top: 14px;
}

.slider-value {
  font-size: 12px;
  color: var(--accent-strong);
}

.avatar-actions {
  margin-top: 14px;
}

.compact-note {
  margin-top: 12px;
}

.avatar-layer.is-flat-base {
  transform-origin: 50% 78%;
}

.avatar-layer.is-custom-mouth {
  z-index: 9;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(60, 33, 20, 0.18));
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

button {
  border: 0;
  border-radius: var(--yatto-radius-pill);
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--yatto-primary) 0%, var(--yatto-primary-dark) 100%);
  color: var(--yatto-surface);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

button.secondary {
  background: var(--yatto-surface);
  color: var(--text);
  border: 1px solid var(--yatto-border);
  box-shadow: none;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.note-box {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--yatto-radius-md);
  background: var(--yatto-surface-soft);
  border: 1px solid var(--yatto-border);
  color: var(--muted);
}

#event-log,
#debug-status {
  margin: 12px 0 0;
  min-height: 180px;
  max-height: 300px;
  overflow: auto;
  padding: 16px;
  border-radius: 18px;
  background: rgba(98, 69, 49, 0.92);
  border: 1px solid rgba(146, 107, 75, 0.18);
  color: #f7ede3;
  white-space: pre-wrap;
}

.debug-card {
  display: grid;
  gap: 12px;
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.bot-mode #controls-card,
.bot-mode #debug-card {
  display: none;
}

.bot-mode .shell {
  width: 100vw;
  min-height: 100vh;
  padding: 0;
}

.bot-mode body {
  background:
    radial-gradient(circle at top, rgba(255, 241, 221, 0.92), transparent 34%),
    linear-gradient(180deg, #fbf2e7 0%, #f2dfcb 44%, #e1c2a6 100%);
}

.bot-mode .stage-card {
  border-radius: 0;
  min-height: 100vh;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.bot-mode .stage-header,
.bot-mode .status-bar,
.bot-mode .log-card {
  display: none;
}

.bot-mode .avatar-stage {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(226, 239, 236, 0.52), transparent 38%),
    radial-gradient(ellipse at 82% 16%, rgba(232, 226, 212, 0.58), transparent 40%),
    radial-gradient(ellipse at 50% 92%, rgba(150, 112, 83, 0.28), transparent 44%),
    linear-gradient(90deg, rgba(246, 242, 235, 0.92) 0%, rgba(232, 226, 216, 0.72) 20%, rgba(241, 238, 232, 0.54) 38%, rgba(241, 238, 232, 0.54) 62%, rgba(232, 226, 216, 0.72) 80%, rgba(246, 242, 235, 0.92) 100%),
    linear-gradient(180deg, #f8f5ef 0%, #f4e4d2 32%, #ece7df 56%, #d7c6b6 78%, #b7784d 96%, #8a5a3c 100%);
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"] {
  background: #050505;
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-video-active="1"] {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(226, 239, 236, 0.52), transparent 38%),
    radial-gradient(ellipse at 82% 16%, rgba(232, 226, 212, 0.58), transparent 40%),
    radial-gradient(ellipse at 50% 92%, rgba(150, 112, 83, 0.28), transparent 44%),
    linear-gradient(90deg, rgba(246, 242, 235, 0.92) 0%, rgba(232, 226, 216, 0.72) 20%, rgba(241, 238, 232, 0.54) 38%, rgba(241, 238, 232, 0.54) 62%, rgba(232, 226, 216, 0.72) 80%, rgba(246, 242, 235, 0.92) 100%),
    linear-gradient(180deg, #f8f5ef 0%, #f4e4d2 32%, #ece7df 56%, #d7c6b6 78%, #b7784d 96%, #8a5a3c 100%);
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-video-active="0"] .avatar-shell,
.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-video-active="0"] .scene-overlay {
  display: none !important;
}

.bot-mode .avatar-stage[data-scene-background="plain"] {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 54%, #cbd5e1 100%);
}

.bot-mode .avatar-stage[data-scene-background="cafe"] {
  background:
    linear-gradient(90deg, rgba(91, 55, 32, 0.26) 0 1px, transparent 1px 20%),
    linear-gradient(180deg, #fff7ed 0%, #f4d4aa 38%, #a56b3f 38% 43%, #6f4a32 100%);
}

.bot-mode .avatar-stage[data-scene-background="airport"] {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(59, 130, 246, 0.22) 18% 18.7%, transparent 18.7% 81.3%, rgba(59, 130, 246, 0.22) 81.3% 82%, transparent 82%),
    linear-gradient(180deg, #ecfeff 0%, #bfdbfe 48%, #dbeafe 48% 60%, #94a3b8 100%);
}

.bot-mode .avatar-stage[data-scene-background="hotel"] {
  background:
    linear-gradient(90deg, rgba(120, 53, 15, 0.18) 0 1px, transparent 1px 18%),
    linear-gradient(180deg, #fff7ed 0%, #fed7aa 42%, #d97706 42% 45%, #854d0e 100%);
}

.bot-mode .avatar-stage[data-scene-background="interview"] {
  background:
    linear-gradient(90deg, transparent 0 32%, rgba(15, 23, 42, 0.08) 32% 33%, transparent 33% 67%, rgba(15, 23, 42, 0.08) 67% 68%, transparent 68%),
    linear-gradient(180deg, #f8fafc 0%, #e0f2fe 48%, #334155 48% 100%);
}

.bot-mode .avatar-stage[data-scene-background="classroom"] {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(22, 101, 52, 0.24) 12% 88%, transparent 88%),
    linear-gradient(180deg, #fefce8 0%, #d9f99d 40%, #a3a3a3 40% 45%, #e7e5e4 100%);
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-scene-background="plain"] {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(226, 239, 236, 0.52), transparent 38%),
    radial-gradient(ellipse at 82% 16%, rgba(232, 226, 212, 0.58), transparent 40%),
    radial-gradient(ellipse at 50% 92%, rgba(150, 112, 83, 0.28), transparent 44%),
    linear-gradient(90deg, rgba(246, 242, 235, 0.92) 0%, rgba(232, 226, 216, 0.72) 20%, rgba(241, 238, 232, 0.54) 38%, rgba(241, 238, 232, 0.54) 62%, rgba(232, 226, 216, 0.72) 80%, rgba(246, 242, 235, 0.92) 100%),
    linear-gradient(180deg, #f8f5ef 0%, #f4e4d2 32%, #ece7df 56%, #d7c6b6 78%, #b7784d 96%, #8a5a3c 100%);
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-video-active="0"],
.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-video-active="0"][data-scene-background],
.bot-mode .avatar-stage[data-video-renderer="livetalking"][data-video-active="0"][data-scene-background="plain"] {
  background: #050505;
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"] .assistant-video {
  object-fit: cover;
  object-position: center 18%;
}

.bot-mode .avatar-stage[data-video-renderer="livetalking"] .assistant-video-sidefill {
  display: none;
}

.bot-mode .avatar-stage::before {
  background:
    radial-gradient(ellipse at 16% 36%, rgba(255, 255, 255, 0.34), transparent 32%),
    radial-gradient(ellipse at 84% 34%, rgba(255, 255, 255, 0.30), transparent 34%),
    linear-gradient(90deg, rgba(77, 92, 92, 0.06), transparent 28%, transparent 72%, rgba(77, 92, 92, 0.06));
  filter: blur(20px);
  opacity: 0.68;
}

.bot-mode .avatar-stage::after {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.08), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.08)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 44%, rgba(87, 63, 46, 0.10));
  filter: none;
  opacity: 0.58;
}


.bot-mode .avatar-shell {
  place-items: end center;
  padding: 0 56px 52px;
}

.bot-mode .avatar-stack {
  width: min(58vw, 620px, calc((100vh - 72px) * 0.7466667));
}

.bot-mode .avatar-stage[data-video-renderer="static"] .avatar-shell {
  padding: 0;
  place-items: stretch;
}

.bot-mode .avatar-stage[data-video-renderer="static"] .avatar-stack {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
}

@media (max-width: 720px) {
  .shell {
    width: min(100vw - 8px, 1120px);
    padding-top: 6px;
  }

  .two-up {
    grid-template-columns: 1fr;
  }

  .stage-header {
    flex-direction: column;
  }

  .scene-overlay {
    padding: 14px 12px 16px;
  }

  .scene-label {
    top: 14px;
    left: 12px;
    max-width: calc(100% - 150px);
  }

  .scene-countdown {
    top: 10px;
    left: 10px;
    right: auto;
    min-width: 96px;
    padding: 8px 10px 7px;
    border-radius: 14px;
  }

  .scene-countdown-value {
    font-size: 20px;
  }

  .scene-caption-panel {
    width: calc(100% - 16px);
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 12px 14px;
    border-radius: 15px;
  }

  .scene-subtitle {
    font-size: 20px;
  }

  .scene-translation,
  .scene-phrase {
    font-size: 13px;
  }
}