/* ============================================================
   Liv marketing experience (liv-form-demo)
   Visual system from the Liv/Anam integration brief: deep navy
   radial background, #0E2550 cards, electric blue + mint
   accents, Inter + IBM Plex Mono.
   All selectors are lf- prefixed and scoped under .lf-app.
   ============================================================ */

.lf-app {
  --lf-navy: #0E2550;
  --lf-blue: #3B5BDB;
  --lf-mint: #7CF2C0;
  --lf-text: #E6EEFF;
  --lf-text2: #C6D4EE;
  --lf-label: #9EC1FF;
  --lf-line: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 44px);
  color: var(--lf-text);
  background: radial-gradient(120% 80% at 50% 0%, #16306b 0%, #0a1830 55%, #050b1c 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 24px 60px rgba(8, 18, 40, 0.45);
}

.lf-mini-label {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--lf-mint);
  margin-bottom: 10px;
}

.lf-head { max-width: 720px; margin-bottom: 26px; }
/* Route back to the click-through demo the viewer arrived from.
   Lives on the presenter start screen only: in theatre mode the
   fixed stage overlay covers the whole head. Rendered as a ghost
   pill on its own row so it never collides with the kicker. */
.lf-head-nav { margin-bottom: 18px; }
.lf-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lf-text2);
  text-decoration: none;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--lf-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lf-back-ic { font-size: 13px; line-height: 1; transition: transform 0.15s ease; }
.lf-back:hover, .lf-back:focus-visible {
  color: #fff;
  border-color: rgba(124, 242, 192, 0.55);
  background: rgba(124, 242, 192, 0.08);
}
.lf-back:hover .lf-back-ic, .lf-back:focus-visible .lf-back-ic { transform: translateX(-2px); }
.lf-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: #fff;
}
.lf-sub { font-size: 14.5px; line-height: 1.6; color: var(--lf-text2); margin: 0; }

.lf-banner {
  border: 1px solid var(--lf-line);
  background: rgba(30, 60, 120, 0.45);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--lf-text2);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lf-banner.is-error { border-color: rgba(255, 138, 138, 0.4); color: #ffb4b4; }
.lf-banner[hidden] { display: none; }

.lf-row {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 340px);
  gap: 28px;
  align-items: start;
}

/* ---------- Slide stage ---------- */
.lf-stagewrap { min-width: 0; }
.lf-stage {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: linear-gradient(180deg, rgba(30, 60, 120, 0.5), rgba(14, 37, 80, 0.6));
  min-height: 460px;
  overflow: hidden;
}
.lf-slide {
  position: absolute;
  inset: 0;
  padding: clamp(24px, 4vw, 44px);
  display: none;
  flex-direction: column;
  justify-content: center;
  animation: lf-in 0.45s ease;
}
.lf-slide.is-active { display: flex; }
@keyframes lf-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.lf-slide-cover { text-align: left; }
.lf-slide-big {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: #fff;
}
.lf-slide-big--mint {
  background: linear-gradient(90deg, var(--lf-mint), #b9f7dd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lf-slide-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #fff;
}
.lf-slide-lede { font-size: 15.5px; line-height: 1.65; color: var(--lf-text2); max-width: 560px; margin: 0; }

.lf-slide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 560px; }
.lf-slide-list li {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--lf-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lf-text2);
}
.lf-slide-list b { color: #fff; font-weight: 600; }

.lf-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; max-width: 680px; }
.lf-split-cell {
  border: 1px solid var(--lf-line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
}
.lf-split-cell p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lf-text2); }
.lf-split-k {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lf-mint);
  margin-bottom: 8px;
}
.lf-split-arrow { align-self: center; font-size: 22px; color: var(--lf-label); }

/* Product slides: the screenshot IS the slide. It fills the whole
   stage (object-fit cover) and slowly pans top-to-bottom and back so
   every part of the product screen gets shown while Liv narrates. */
.lf-slide--shot { padding: 0; }
.lf-shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0%;
  animation: lf-shot-pan 16s ease-in-out 0.8s infinite alternate;
}
@keyframes lf-shot-pan {
  from { object-position: center 0%; }
  to { object-position: center 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-shot-img { animation: none; }
}
.lf-shot-cap {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lf-line);
  background: rgba(10, 22, 46, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(4, 10, 24, 0.45);
}
.lf-shot-cap .lf-mini-label { margin: 0; }
.lf-shot-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.lf-slide-cta { margin-top: 18px; align-self: flex-start; text-decoration: none; }

/* Small Form Generator thumbnail on the text slides so the product
   is always in view for context. Full-screen (theatre) mode only:
   the windowed stage is too small for it. Above 1100px the thumb is
   the RIGHT COLUMN of a two-column grid (see the theatre slide
   rules further down), so headings of any length in any language
   wrap inside their own column and can never run underneath it. */
.lf-thumb { display: none; }
.lf-thumb[hidden] { display: none !important; }
@media (min-width: 1101px) {
  .lf-app.is-theatre .lf-thumb {
    display: block;
    position: relative;
    width: 100%;
    max-width: 470px;
    justify-self: end;
    align-self: center;
    margin: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(5, 12, 28, 0.9);
    /* Layered depth: a deep drop, a hairline mint ring, and a wide
       cool ambient glow so the card sits IN the scene instead of
       floating over it. */
    box-shadow:
      0 34px 90px rgba(2, 6, 18, 0.65),
      0 0 0 1px rgba(124, 242, 192, 0.05),
      0 0 110px rgba(56, 120, 255, 0.16);
    overflow: hidden;
  }
  .lf-app.is-theatre .lf-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 0%;
  }
}
.lf-thumb-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 16, 34, 0.72);
}
.lf-thumb-cap::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lf-mint);
  box-shadow: 0 0 8px rgba(124, 242, 192, 0.8);
}
.lf-thumb-cap .lf-mini-label { margin: 0; }

.lf-progress { display: flex; gap: 6px; margin-top: 8px; }
/* Each dash is a real button with a comfortable hit area; the
   visible 4px bar is drawn by .lf-seg-bar. Hover or keyboard focus
   reveals a tooltip naming the section. */
.lf-seg {
  position: relative;
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 0;
  margin: 0;
  cursor: pointer;
  display: block;
  min-width: 0;
}
.lf-seg-bar {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease, transform 0.15s ease;
}
.lf-seg:hover .lf-seg-bar,
.lf-seg:focus-visible .lf-seg-bar { background: rgba(255, 255, 255, 0.3); transform: scaleY(1.6); }
.lf-seg.is-done .lf-seg-bar { background: var(--lf-blue); }
.lf-seg.is-now .lf-seg-bar { background: linear-gradient(90deg, var(--lf-blue), var(--lf-mint)); }
.lf-seg.is-done:hover .lf-seg-bar,
.lf-seg.is-now:hover .lf-seg-bar { filter: brightness(1.25); }
.lf-seg:focus-visible { outline: 2px solid var(--lf-mint); outline-offset: 2px; border-radius: 8px; }
.lf-seg-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 6px 10px 6px 7px;
  border-radius: 9px;
  border: 1px solid var(--lf-line);
  background: rgba(10, 22, 46, 0.96);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(4, 10, 24, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 30;
}
.lf-seg-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(10, 22, 46, 0.96);
}
.lf-seg:hover .lf-seg-tip,
.lf-seg:focus-visible .lf-seg-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Keep edge tooltips inside the stage width. */
.lf-seg:first-child .lf-seg-tip { left: 0; transform: translateX(0) translateY(4px); }
.lf-seg:first-child:hover .lf-seg-tip,
.lf-seg:first-child:focus-visible .lf-seg-tip { transform: translateX(0) translateY(0); }
.lf-seg:first-child .lf-seg-tip::after { left: 24px; }
.lf-seg:last-child .lf-seg-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.lf-seg:last-child:hover .lf-seg-tip,
.lf-seg:last-child:focus-visible .lf-seg-tip { transform: translateX(0) translateY(0); }
.lf-seg:last-child .lf-seg-tip::after { left: auto; right: 24px; transform: none; }
.lf-seg-tip-n {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  background: var(--lf-blue);
  color: #fff;
  flex: none;
}

.lf-caption {
  margin-top: 14px;
  border-left: 3px solid var(--lf-mint);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lf-text2);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 10px 10px 0;
}

/* ---------- Live answer slide (Q&A) ----------
   While Liv answers a question the stage becomes her answer surface:
   the latest question plus the streamed answer text, styled like a
   deck slide. Sits above the paused slides inside .lf-stage. */
.lf-answer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 44px);
  /* Fully opaque: even a few percent of bleed-through lets the paused
     slide's white text ghost into the answer. */
  background: linear-gradient(180deg, #1c3568, #0b1a36);
  animation: lf-in 0.45s ease;
}
.lf-answer[hidden] { display: none; }
.lf-answer-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-mint);
}
.lf-answer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-mint);
  animation: lf-ans-pulse 1.4s ease-in-out infinite;
}
.lf-answer-q {
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 18px;
  max-width: 900px;
}
.lf-answer-body {
  font-size: clamp(15.5px, 1.7vw, 20px);
  line-height: 1.7;
  color: var(--lf-text2);
  white-space: pre-line;
  max-width: 940px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.lf-answer.is-waiting .lf-answer-body { opacity: 0.75; font-style: italic; }
@keyframes lf-ans-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: none; }
}

/* ---------- Avatar card ---------- */
.lf-ava {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--lf-navy);
  box-shadow: 0 24px 60px rgba(8, 18, 40, 0.45);
}
.lf-ava-media { position: relative; aspect-ratio: 4 / 5; }
.lf-ava-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(90% 70% at 50% 24%, rgba(59, 91, 219, 0.55), transparent 70%),
    linear-gradient(180deg, #16306b, #0E2550 70%, #0a1c3d);
}
.lf-ava-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 10px;
  padding-left: 10px;
  color: #fff;
  text-shadow: 0 6px 30px rgba(59, 91, 219, 0.8);
}
.lf-ava-monosub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lf-label);
}
/* Still portrait of Liv, layered over the monogram so the card
   never shows a blank panel while the video is not playing. */
.lf-ava-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.lf-ava-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.lf-ava-audio { display: none; }
.lf-ava-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 37, 80, 0.1), rgba(14, 37, 80, 0.05) 55%, rgba(14, 37, 80, 0.55));
}
.lf-ava-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(5, 12, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--lf-text2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Speaker toggle for Liv's voice, bottom-right of the video. Only
   shown while a session is connecting or live - before that there is
   no audio to mute. */
.lf-ava-mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(5, 12, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lf-ava[data-status="connecting"] .lf-ava-mute,
.lf-ava[data-status="live"] .lf-ava-mute { display: inline-flex; }
.lf-ava-mute:hover { background: rgba(5, 12, 28, 0.85); border-color: rgba(255, 255, 255, 0.4); }
.lf-ava-mute .lf-ava-mute-off { display: none; }
.lf-ava-mute[data-muted="1"] .lf-ava-mute-on { display: none; }
.lf-ava-mute[data-muted="1"] .lf-ava-mute-off { display: block; }
.lf-ava-mute[data-muted="1"] {
  background: rgba(255, 138, 138, 0.22);
  border-color: rgba(255, 138, 138, 0.55);
  color: #ffb4b4;
}
.lf-ava-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lf-label); }
.lf-ava[data-status="live"] .lf-ava-dot { background: var(--lf-mint); box-shadow: 0 0 8px var(--lf-mint); }
.lf-ava[data-status="error"] .lf-ava-dot { background: #ff8a8a; }
.lf-ava[data-status="connecting"] .lf-ava-dot { animation: lf-pulse 1s ease infinite; }
@keyframes lf-pulse { 50% { opacity: 0.35; } }
.lf-ava-name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 10px rgba(4, 10, 24, 0.8);
}

/* ---------- Controls ---------- */
.lf-controls { margin-top: 14px; display: grid; gap: 10px; }
.lf-ctlrow { display: flex; gap: 8px; }
.lf-ctlrow[hidden] { display: none; }
.lf-ctlrow .lf-btn { flex: 1; }
.lf-btn {
  --accent: var(--lf-blue);
  appearance: none;
  border: 1px solid var(--lf-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--lf-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.lf-btn:hover { background: rgba(255, 255, 255, 0.11); }
.lf-btn:active { transform: translateY(1px); }
.lf-btn.primary {
  background: linear-gradient(90deg, #3B5BDB, #7CF2C0);
  border: none;
  color: #0E2550;
  font-weight: 700;
}
.lf-btn.primary:hover { filter: brightness(1.06); }
.lf-btn.primary:disabled { opacity: 0.65; cursor: default; }
.lf-btn.danger { border-color: rgba(239, 68, 68, 0.5); color: #ff9d9d; }
.lf-btn.danger:hover { background: rgba(239, 68, 68, 0.14); }
.lf-btn.ghost { padding: 7px 12px; font-size: 12.5px; }

/* ---------- Language picker + Play (one row) ---------- */
.lf-ctlrow--lang { align-items: stretch; }
.lf-ctlrow--lang .lf-lang { flex: 1.15; min-width: 0; display: flex; }
.lf-ctlrow--lang .lf-btn.primary { flex: 1; }
.lf-play-ic {
  display: inline-block;
  font-size: 10px;
  margin-right: 8px;
  transform: translateY(-1px);
}
.lf-lang {
  display: flex;
  align-items: center;
}
.lf-lang-sel {
  flex: 1;
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--lf-line);
  background: rgba(255, 255, 255, 0.06)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23AFC0DF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--lf-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 30px 9px 12px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.lf-lang-sel:hover { background-color: rgba(255, 255, 255, 0.11); }
.lf-lang-sel:focus-visible { outline: 2px solid var(--lf-mint); outline-offset: 2px; }
.lf-lang-sel option { background: #10203f; color: #e8eefb; }

/* ---------- Right-to-left (Arabic) ---------- */
.lf-app[data-lang="ar"] .lf-slide,
.lf-app[data-lang="ar"] .lf-answer,
.lf-app[data-lang="ar"] .lf-caption {
  direction: rtl;
  text-align: right;
}
.lf-app[data-lang="ar"] .lf-split-arrow { transform: scaleX(-1); }

/* ---------- Rail hint under the slide dashes (demo page) ---------- */
.lf-side-hint {
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lf-text2);
  opacity: 0.85;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .lf-row { grid-template-columns: 1fr; }
  .lf-side { max-width: 420px; }
  .lf-stage { min-height: 380px; }
}
@media (max-width: 640px) {
  .lf-split { grid-template-columns: 1fr; }
  .lf-split-arrow { transform: rotate(90deg); justify-self: center; }
  .lf-shot-cap { top: 10px; left: 10px; padding: 6px 12px; }
  .lf-shot-title { font-size: 13px; }
}

/* ---------- Live Q&A dock (typed questions + transcript) ---------- */
.lf-qa-dock {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.lf-qa-input {
  flex: 1;
  min-width: 0;
  background: rgba(4, 12, 28, 0.6);
  border: 1px solid var(--lf-line);
  border-radius: 10px;
  color: var(--lf-text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
}
.lf-qa-input:focus { outline: none; border-color: var(--lf-blue); }
.lf-qa-input::placeholder { color: rgba(158, 193, 255, 0.55); }
.lf-qa-status {
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lf-mint);
}
.lf-qa-download { margin-top: 8px; width: 100%; }

/* Stacked dock (demo page sidebar): input on its own row, buttons
   share the row below. */
.lf-qa-dock--stack { flex-wrap: wrap; margin-top: 12px; }
.lf-qa-dock--stack .lf-btn { flex: 1; white-space: nowrap; }

/* Chat-style composer (demo page sidebar): the question field with
   an inline mic and send button, so the sidebar keeps one primary
   CTA (Play) and asking feels like messaging Liv. */
.lf-composer {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 5px 4px;
  background: rgba(4, 12, 28, 0.6);
  border: 1px solid var(--lf-line);
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lf-composer:focus-within {
  border-color: var(--lf-blue);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.22);
}
.lf-composer .lf-qa-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 9px 10px;
}
.lf-cmp-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(158, 193, 255, 0.8);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.lf-cmp-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lf-cmp-btn:active { transform: scale(0.94); }
.lf-cmp-send {
  background: linear-gradient(90deg, #3B5BDB, #7CF2C0);
  color: #0E2550;
}
.lf-cmp-send:hover { background: linear-gradient(90deg, #3B5BDB, #7CF2C0); color: #0E2550; filter: brightness(1.08); }

/* Quiet row under the composer: usage hint + transcript link. */
.lf-qa-under {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding: 0 2px;
}
.lf-qa-under-hint {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--lf-text2);
  opacity: 0.65;
}
.lf-tr-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 2px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--lf-label);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(158, 193, 255, 0.35);
  transition: color 0.15s ease;
}
.lf-tr-link:hover:not(:disabled) { color: #fff; }
.lf-tr-link:disabled { opacity: 0.35; cursor: default; text-decoration: none; }

/* Running Q&A conversation under Liv's video. The author display
   rules below would override the hidden attribute, so restate it. */
.lf-qa-feed {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  align-content: start;
}
.lf-qa-feed[hidden] { display: none; }
/* While Q&A is live the exchange shows full-size on the answer
   slide; repeating it in the side feed duplicated every answer
   (user request: not in both places). The transcript download
   still carries the whole conversation. */
.lf-app.is-qa-live .lf-qa-feed { display: none; }
.lf-qa-msg {
  border: 1px solid var(--lf-line);
  border-radius: 12px;
  padding: 9px 12px 10px;
  background: rgba(255, 255, 255, 0.04);
}
.lf-qa-msg.is-user {
  border-color: rgba(59, 91, 219, 0.55);
  background: rgba(59, 91, 219, 0.16);
}
.lf-qa-who {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lf-mint);
  margin-bottom: 4px;
}
.lf-qa-msg.is-user .lf-qa-who { color: #9ec1ff; }
.lf-qa-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lf-text);
  overflow-wrap: anywhere;
}

/* ---------- Full-screen presentation (theatre mode) ----------
   .is-theatre is added to .lf-app while the demo plays. The stage
   takes over the viewport (CSS takeover; the Fullscreen API is
   unreliable inside the proxied preview iframe) and the avatar
   column floats as a compact panel in the bottom-right corner. */
html.lf-lock-scroll,
html.lf-lock-scroll body { overflow: hidden; }

.lf-app.is-theatre .lf-stagewrap {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.5vw, 32px);
  background: radial-gradient(120% 80% at 50% 0%, #16306b 0%, #0a1830 55%, #050b1c 100%);
}
.lf-app.is-theatre .lf-stage { flex: 1; min-height: 0; }

/* Text slides centre their content in the space ABOVE the bottom
   chrome band (subtitle + transport pill + progress strip), not the
   full viewport. Without this the content sat visually low: a large
   empty band at the top and everything crowding the chrome at the
   bottom. Shot slides are excluded: their screenshot fills the
   stage edge-to-edge. */
.lf-app.is-theatre .lf-slide:not(.lf-slide--shot) {
  padding-bottom: clamp(170px, 24vh, 240px);
}

/* Text slides above 1100px: a balanced two-column hero. The copy
   is the left column, the product card is its own right column, and
   both centre vertically in the space above the bottom chrome band.
   Because the card occupies a real grid column, a heading can wrap
   to any length in any language and structurally CANNOT run under
   it. The right padding keeps the whole grid clear of the floating
   Liv panel (viewport gutter + 272px panel + gap); grid direction
   flips automatically for Arabic. */
@media (min-width: 1101px) {
  .lf-app.is-theatre .lf-slide.is-active:not(.lf-slide--shot) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 440px);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: center;
    align-content: center;
    padding-left: clamp(40px, 6vw, 104px);
    padding-right: calc(clamp(14px, 2.5vw, 32px) + 272px + 40px);
  }
  /* Larger, more editorial type once the deck owns the screen. */
  .lf-app.is-theatre .lf-slide:not(.lf-slide--shot) .lf-slide-big {
    font-size: clamp(42px, 4.4vw, 70px);
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    overflow-wrap: break-word;
  }
  .lf-app.is-theatre .lf-slide:not(.lf-slide--shot) .lf-slide-title {
    font-size: clamp(26px, 2.4vw, 36px);
    margin-bottom: 20px;
    overflow-wrap: break-word;
  }
  .lf-app.is-theatre .lf-slide:not(.lf-slide--shot) .lf-slide-lede {
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.7;
    max-width: 620px;
  }
  .lf-app.is-theatre .lf-slide:not(.lf-slide--shot) .lf-slide-list,
  .lf-app.is-theatre .lf-slide:not(.lf-slide--shot) .lf-split {
    max-width: 640px;
  }
}

/* Cinema chrome: the caption becomes a floating subtitle over the
   slide, the dashes become a hairline strip pinned to the bottom
   edge, and the transport collapses into one frosted pill at the
   bottom centre (see .lf-controls below). */
.lf-app.is-theatre .lf-caption {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 4001;
  width: min(680px, 74vw);
  max-height: 122px;
  overflow-y: auto;
  margin: 0;
  /* Solid dark subtitle chip: bare white text with a shadow was
     unreadable whenever it floated over the white product
     screenshots on shot slides. */
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(5, 12, 27, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(3, 8, 20, 0.45);
  text-align: center;
  font-size: 16.5px;
  line-height: 1.6;
  color: #eef3ff;
  text-shadow: none;
}
/* No caption text = no chip: an empty frosted box floating over the
   slide reads as a glitch. */
.lf-app.is-theatre .lf-caption:empty { display: none; }
/* RTL captions keep the subtitle centred. */
.lf-app[data-lang="ar"].is-theatre .lf-caption { text-align: center; }
.lf-app.is-theatre .lf-progress {
  position: absolute;
  left: clamp(14px, 2.5vw, 32px);
  right: clamp(14px, 2.5vw, 32px);
  bottom: 2px;
  margin: 0;
  gap: 5px;
  z-index: 4001;
}
.lf-app.is-theatre .lf-seg { padding: 9px 0; }
.lf-app.is-theatre .lf-seg-bar { height: 3px; }
@media (min-width: 881px) {
  /* The live answer text must not run under the floating panel. */
  .lf-app.is-theatre .lf-answer { padding-right: 332px; }
  .lf-app[data-lang="ar"].is-theatre .lf-answer {
    padding-right: clamp(24px, 4vw, 44px);
    padding-left: 332px;
  }
}

.lf-exit-fs {
  position: absolute;
  top: clamp(24px, 3.5vw, 44px);
  right: clamp(24px, 3.5vw, 44px);
  z-index: 4002;
  background: rgba(5, 12, 28, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lf-exit-fs[hidden] { display: none; }

/* Compact floating panel per the approved reference: just the
   rounded video card (LIVE pill + name overlaid) with a distinct
   dark playback row directly beneath it. No panel chrome, and the
   question box / feed / status stay out of full-screen mode. */
.lf-app.is-theatre .lf-side {
  position: fixed;
  right: clamp(14px, 2.5vw, 32px);
  bottom: clamp(56px, 8vh, 84px);
  z-index: 4001;
  width: 272px;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.lf-app.is-theatre .lf-side-hint { display: none; }
/* The question dock stays available in full screen so viewers can
   ask Liv by text or voice at any point. The hint + transcript row
   is hidden while the presentation plays (panel stays compact) but
   MUST come back in live Q&A: the transcript download is otherwise
   unreachable in full screen. */
.lf-app.is-theatre .lf-qa-dock { margin-top: 10px; }
.lf-app.is-theatre .lf-qa-under { display: none; }
.lf-app.is-theatre.is-qa-live .lf-qa-under {
  display: flex;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(8, 16, 34, 0.75);
}
.lf-app.is-theatre .lf-composer {
  background: rgba(8, 16, 34, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lf-app.is-theatre .lf-qa-status {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(8, 16, 34, 0.75);
}
.lf-app.is-theatre .lf-qa-feed { margin-top: 10px; max-height: 200px; }
.lf-app.is-theatre .lf-qa-msg {
  background: rgba(8, 16, 34, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lf-app.is-theatre .lf-qa-msg.is-user { background: rgba(35, 55, 110, 0.88); }
.lf-app.is-theatre .lf-ava {
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(4, 10, 24, 0.65);
}
/* One frosted transport pill, bottom centre: language on the left,
   then a hairline divider, then the playback (or Q&A) buttons. The
   controls DOM still lives inside .lf-side; fixed positioning lifts
   it out visually without touching markup or selectors. */
.lf-app.is-theatre .lf-controls {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 4002;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(6, 13, 28, 0.72);
  box-shadow: 0 18px 50px rgba(3, 8, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lf-app.is-theatre .lf-ctlrow { gap: 2px; align-items: center; }
.lf-app.is-theatre .lf-ctlrow:not(.lf-ctlrow--lang):not([hidden]) {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 8px;
  margin-left: 6px;
}
.lf-app.is-theatre .lf-ctlrow .lf-btn {
  flex: none;
  padding: 9px 15px;
  font-size: 13.5px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #fff;
}
.lf-app.is-theatre .lf-ctlrow .lf-btn:hover { background: rgba(255, 255, 255, 0.1); }
.lf-app.is-theatre .lf-ctlrow .lf-btn.danger { color: #ff9d9d; }
.lf-app.is-theatre .lf-ctlrow .lf-btn.danger:hover { background: rgba(239, 68, 68, 0.16); }
.lf-app.is-theatre .lf-ctlrow--lang .lf-lang { flex: none; }
.lf-app.is-theatre .lf-lang-sel {
  border: none;
  background-color: transparent;
  padding-top: 9px;
  padding-bottom: 9px;
}
.lf-app.is-theatre .lf-lang-sel:hover { background-color: rgba(255, 255, 255, 0.1); }

/* Collapsed Ask-Liv pill under the video (theatre only); the real
   composer shows when it is open or whenever Q&A is live. */
.lf-ask-open { display: none; }
.lf-app.is-theatre:not(.is-qa-live) .lf-ask-open {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(6, 13, 28, 0.72);
  color: rgba(222, 233, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lf-app.is-theatre:not(.is-qa-live) .lf-ask-open:hover { background: rgba(16, 28, 52, 0.85); }
.lf-app.is-theatre:not(.is-qa-live):not(.is-ask-open) .lf-qa-dock { display: none; }

/* Auto-hiding chrome: after a few idle seconds during playback only
   the slide, the subtitle and Liv's video remain (JS adds .is-idle,
   any activity removes it). Faded chrome must not eat clicks. */
.lf-app.is-theatre .lf-controls,
.lf-app.is-theatre .lf-progress,
.lf-app.is-theatre .lf-exit-fs,
.lf-app.is-theatre .lf-ask-open,
.lf-app.is-theatre .lf-qa-dock { transition: opacity 0.5s ease; }
.lf-app.is-theatre.is-idle .lf-controls,
.lf-app.is-theatre.is-idle .lf-progress,
.lf-app.is-theatre.is-idle .lf-exit-fs,
.lf-app.is-theatre.is-idle .lf-ask-open,
.lf-app.is-theatre.is-idle .lf-qa-dock {
  opacity: 0;
  pointer-events: none;
}
.lf-app.is-theatre.is-idle .lf-stagewrap { cursor: none; }

/* Product-screenshot slides: Liv collapses into a small circular
   avatar so she does not hide the product behind her. The panel
   keeps its width so the controls and question dock stay usable. */
.lf-app.is-theatre.is-shot-slide .lf-ava {
  width: 148px;
  margin-left: auto;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 44px rgba(4, 10, 24, 0.6);
}
.lf-app.is-theatre.is-shot-slide .lf-ava-media { aspect-ratio: 1 / 1; }
.lf-app.is-theatre.is-shot-slide .lf-ava-pill,
.lf-app.is-theatre.is-shot-slide .lf-ava-name { display: none; }
/* The tiny circular shot-slide avatar clips the mute toggle's corner;
   centre it along the bottom of the circle instead so it stays fully
   inside the round frame (user request). */
.lf-app.is-theatre.is-shot-slide .lf-ava-mute {
  right: 50%;
  bottom: 10px;
  transform: translateX(50%);
}
.lf-app.is-theatre.is-shot-slide .lf-ava-mono { font-size: 20px; letter-spacing: 4px; }
.lf-app.is-theatre.is-shot-slide .lf-ava-monosub { display: none; }

/* While a live Q&A session is active in full screen the avatar
   returns to the full card (with LIVE pill and name) even on
   product slides, so the viewer can see Liv answer. */
.lf-app.is-theatre.is-qa-live .lf-ava {
  width: 100%;
  margin-left: 0;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.18);
}
.lf-app.is-theatre.is-qa-live .lf-ava-media { aspect-ratio: 4 / 3; }
.lf-app.is-theatre.is-qa-live .lf-ava-pill { display: inline-flex; }
.lf-app.is-theatre.is-qa-live .lf-ava-name { display: block; }
.lf-app.is-theatre.is-qa-live .lf-ava-mono { font-size: 44px; letter-spacing: 10px; }
.lf-app.is-theatre.is-qa-live .lf-ava-monosub { display: block; }
/* ---------- Live Q&A: keep the conversation on screen ----------
   The viewer must see Liv AND her answers without scrolling (user
   report: the feed sat below the fold under the tall portrait). In
   both windowed and full-screen Q&A the side column becomes a
   viewport-capped flex column: the portrait shortens to 4:3, every
   control row keeps its natural height, and the feed takes the
   remaining space with its own scrollbar. */
.lf-app.is-qa-live .lf-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lf-app.is-qa-live .lf-side > * { flex: 0 0 auto; }
.lf-app.is-qa-live .lf-ava-media { aspect-ratio: 4 / 3; }
.lf-app.is-qa-live .lf-qa-feed {
  flex: 0 1 auto;
  min-height: 88px;
  max-height: none;
  overflow-y: auto;
}
/* Windowed Q&A: pin the column so it stays in view if the page
   scrolls, and never let it outgrow the viewport. The cap leaves
   headroom because the page cannot always scroll the column all
   the way to the top edge (an overflow-x ancestor also disables
   sticky, so the column may sit at its natural offset). */
.lf-app.is-qa-live:not(.is-theatre) .lf-side {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
}
/* Full-screen Q&A: the panel is fixed bottom-right; cap its height
   so the feed shrinks and scrolls instead of overflowing the
   screen. */
.lf-app.is-theatre.is-qa-live .lf-side {
  justify-content: flex-end;
  max-height: calc(100vh - clamp(64px, 10vh, 96px));
  max-height: calc(100dvh - clamp(64px, 10vh, 96px));
}
/* Short screens: shrink the portrait further so the controls and a
   useful slice of the conversation still fit without clipping. */
@media (max-height: 680px) {
  .lf-app.is-qa-live .lf-ava-media,
  .lf-app.is-theatre.is-qa-live .lf-ava-media { aspect-ratio: 16 / 9; }
}

/* ---------- Phone theatre layout (<=880px) ----------
   The desktop panel floats bottom-right, which on a phone buried the
   subtitle under Liv and left the composer (and its microphone)
   collapsed behind a pill that faded out (user report). On phones:
   Liv becomes a small picture-in-picture card at the TOP-right (the
   exit button moves top-left to make room), the composer with the
   mic is pinned as its own bar above the transport pill so asking is
   always one tap away, and the subtitle / status / feed stack above
   that bar. Mobile-only overrides: recorded tours replay against the
   desktop layout, which stays untouched. This block sits after every
   desktop theatre rule so equal-specificity overrides win. */
@media (max-width: 880px) {
  .lf-app.is-theatre .lf-exit-fs {
    top: 10px;
    left: 10px;
    right: auto;
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .lf-app.is-theatre .lf-side {
    top: 10px;
    bottom: auto;
    right: 10px;
    width: 124px;
  }
  .lf-app.is-theatre .lf-ava { border-radius: 14px; }
  .lf-app.is-theatre .lf-ava-name { font-size: 11px; }
  /* :not(.is-qa-live) keeps the desktop rule that restores the full
     card during live Q&A winning; this block sits after it, so the
     shot-slide shrink must exclude the Q&A state itself. */
  .lf-app.is-theatre.is-shot-slide:not(.is-qa-live) .lf-ava { width: 92px; }
  /* The collapsed Ask-Liv pill is pointless on a 124px card: show
     the real composer instead, pinned above the transport pill. It
     still fades with the rest of the chrome when idle; any tap
     wakes it. */
  .lf-app.is-theatre:not(.is-qa-live) .lf-ask-open { display: none; }
  .lf-app.is-theatre:not(.is-qa-live):not(.is-ask-open) .lf-qa-dock { display: flex; }
  .lf-app.is-theatre .lf-qa-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 62px;
    z-index: 4002;
    margin: 0;
  }
  /* One-row transport pill: tighter buttons, and it scrolls
     sideways rather than wrapping upward into the composer bar
     when a language's labels run long. */
  .lf-app.is-theatre .lf-controls {
    bottom: 10px;
    padding: 4px;
    max-width: calc(100vw - 12px);
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .lf-app.is-theatre .lf-ctlrow { flex-wrap: nowrap; }
  .lf-app.is-theatre .lf-ctlrow .lf-btn {
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
  }
  .lf-app.is-theatre .lf-lang-sel { font-size: 12px; }
  .lf-app.is-theatre .lf-ctlrow:not(.lf-ctlrow--lang):not([hidden]) {
    padding-left: 5px;
    margin-left: 3px;
  }
  /* Subtitle sits above the composer bar, full width. */
  .lf-app.is-theatre .lf-caption {
    width: calc(100vw - 20px);
    bottom: 122px;
    max-height: 96px;
    font-size: 14px;
    padding: 8px 12px;
  }
  /* Slide content clears the taller bottom chrome. */
  .lf-app.is-theatre .lf-slide:not(.lf-slide--shot) {
    padding-bottom: max(230px, 30vh);
  }
  /* Connection status chip and the post-Q&A feed also live above
     the composer bar instead of under the tiny corner card. */
  .lf-app.is-theatre .lf-qa-status {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 122px;
    z-index: 4003;
    margin: 0;
  }
  .lf-app.is-theatre .lf-qa-feed {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 122px;
    z-index: 4002;
    margin: 0;
    max-height: 30vh;
    max-height: 30dvh;
  }
  /* Live Q&A: Liv keeps the full card (LIVE pill + name), slightly
     larger, still top-right; her answer renders full-size on the
     stage below. The transcript row joins the composer bar, which
     grows upward from its fixed bottom edge, so the status chip
     moves up with it. */
  .lf-app.is-theatre.is-qa-live .lf-side {
    top: 10px;
    bottom: auto;
    width: 152px;
    max-height: none;
    justify-content: flex-start;
  }
  .lf-app.is-theatre.is-qa-live .lf-qa-status { bottom: 186px; }
  /* The stage answer text starts below the corner card and keeps
     clear of the composer bar; long answers scroll inside the
     answer body. */
  .lf-app.is-theatre .lf-answer {
    justify-content: flex-start;
    padding: 176px 16px 160px;
  }
}