html, body { height: 100%; margin: 0; background: #0b0b10; }
body { overflow: hidden; }
#app {
  box-sizing: border-box; min-height: 100%; padding: 48px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px;
}
#dashboard {
  width: min(1200px, calc(100vw - 96px)); display: flex;
  align-items: center; justify-content: center; gap: 36px;
}
#face {
  max-height: 72vh; width: min(42vw, 520px); border-radius: 20px;
  object-fit: contain; transition: box-shadow 180ms ease, filter 180ms ease;
  box-shadow: 0 10px 60px rgba(120,120,255,0.28);
}
#face.engaged {
  filter: saturate(1.08);
  box-shadow: 0 10px 70px rgba(56,220,130,0.46),
    0 0 0 1px rgba(96,255,170,0.25);
}
#captions {
  box-sizing: border-box; width: min(42vw, 520px); min-height: 240px;
  max-height: 64vh; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; background: rgba(24,27,36,0.82);
  box-shadow: 0 10px 45px rgba(0,0,0,0.32);
}
.caption-header {
  padding: 16px 20px 12px; color: rgba(240,242,255,0.72);
  font: 600 13px/1.2 system-ui, sans-serif; letter-spacing: 0;
  text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1);
}
#caption-scroll {
  flex: 1; overflow-y: auto; padding: 20px 22px; display: flex;
  flex-direction: column; gap: 14px;
}
.caption-line {
  color: rgba(232,232,240,0.55); font: 400 18px/1.36 system-ui,
  sans-serif; letter-spacing: 0; overflow-wrap: anywhere;
}
.caption-placeholder {
  color: rgba(232,232,240,0.48); font: 400 18px/1.4 system-ui, sans-serif;
  letter-spacing: 0; overflow-wrap: anywhere;
}
.caption-placeholder.unavailable { color: rgba(255,210,170,0.8); }
#status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 900px) {
  #app { padding: 24px; }
  #dashboard { width: 100%; flex-direction: column; gap: 24px; }
  #face { max-height: 44vh; width: min(70vw, 420px); }
  #captions { width: min(640px, 100%); min-height: 180px; max-height: 36vh; }
  .caption-line, .caption-placeholder { font-size: 16px; }
}
@media (max-height: 650px) {
  #app { padding: 20px; gap: 12px; }
  #dashboard { gap: 24px; }
  #face { max-height: 56vh; }
  #captions { min-height: 160px; max-height: 56vh; }
  .caption-header { padding: 12px 16px 10px; }
  #caption-scroll { padding: 16px; gap: 10px; }
  .caption-line, .caption-placeholder { font-size: 15px; }
}