/* Shadow Interview Mode — Phase 0 POC styles. Intentionally minimal. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0e0f13;
  color: #e7e9ee;
  min-height: 100vh;
}

/* ============================================================
   Phase 1B: kouli-themed ingest screen — mobile-first, matches
   the home page aesthetic (dark gradient, glassmorphism, big
   bold title, purple→blue gradient primary CTA).
   ============================================================ */

/* When the ingest screen is showing, paint the body in the same
   kouli dark gradient that the home page uses. Background-attachment
   is fixed so it doesn't scroll. */
body.kouli-ingest-active {
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 196, 160, 0.18), transparent 44%),
    radial-gradient(circle at 82% 36%, rgba(14, 165, 233, 0.10), transparent 34%),
    linear-gradient(180deg, #07070d 0%, #070d0c 44%, #040407 100%) !important;
  background-color: #07070d !important;
  background-attachment: fixed;
  color: #fff;
}

body.kouli-ingest-active .shadow-page {
  max-width: 520px;
  margin: 0 auto;
  /* Bottom padding reserves space for the permanent bottom nav. */
  padding: max(16px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Subtle 44px grid overlay — same recipe as home. */
body.kouli-ingest-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
}

.kouli-ingest,
.kouli-ready {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.kouli-ingest-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.kouli-ingest-wordmark {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: 0 0 22px rgba(0, 196, 160, 0.20);
  color: #fff;
}

.kouli-ingest-back {
  appearance: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.kouli-ingest-back:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.kouli-ingest-back:active { transform: scale(0.94); }
.kouli-ingest-back svg { width: 16px; height: 16px; }

.kouli-wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 2px 0 4px;
}

.kouli-wizard-progress span {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
}

.kouli-wizard-progress span.is-active,
.kouli-wizard-progress span.is-complete {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  box-shadow: none;
}

.kouli-ingest-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kouli-ingest-intro {
  text-align: left;
  margin-top: 2px;
}

.kouli-step-kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.kouli-ingest-title {
  margin: 0;
  font-size: clamp(1.85rem, 7.8vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-ingest-subtitle {
  margin: 10px 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.kouli-ingest-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.kouli-interview-type-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kouli-interview-type-card {
  position: relative;
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 16px;
  display: grid;
  gap: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kouli-interview-type-card:hover,
.kouli-interview-type-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.kouli-interview-type-card:active {
  transform: scale(0.99);
}

/* Selected: bright neutral border + ring + subtle fill and the filled
   checkmark reveals. Teal is reserved for the primary CTA (colour contract),
   so selection reads through brightness, not hue. */
.kouli-interview-type-card.is-selected,
.kouli-interview-type-card[aria-checked="true"] {
  border-color: rgba(255, 255, 255, 0.85);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 12px 34px rgba(0, 0, 0, 0.32);
}

/* Head row — icon to the left of the title. */
.kouli-interview-type-head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Reserve room so a long title never slides under the corner checkmark. */
  padding-right: 30px;
}

.kouli-interview-type-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.68);
}

.kouli-interview-type-icon svg {
  width: 22px;
  height: 22px;
}

/* Filled circular checkmark, top-right. Hidden until the card is selected. */
.kouli-interview-type-check {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.kouli-interview-type-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kouli-interview-type-card.is-selected .kouli-interview-type-check,
.kouli-interview-type-card[aria-checked="true"] .kouli-interview-type-check {
  opacity: 1;
  transform: scale(1);
}

.kouli-interview-type-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .kouli-interview-type-card,
  .kouli-interview-type-check { transition: none; }
}

.kouli-interview-type-meta {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kouli-interview-type-copy {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* File drag-and-drop active state. Calm lavender highlight matching the
   existing accent — no neon glow, no overlay text obscuring the textarea.
   Pointer-events are disabled on direct children so the drop event lands
   on the card itself rather than the textarea or button. */
.kouli-ingest-card.is-dragover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 4px rgba(255, 255, 255, 0.1);
}

.kouli-ingest-card.is-dragover > * {
  pointer-events: none;
}

/* Primary upload affordance — large, soft lavender button positioned
   between the field row and the textarea so it reads as the lead input
   action (especially on mobile, where drag-and-drop is unavailable).
   Palette intentionally subdued vs the .kouli-ingest-primary "Next" CTA
   — same lavender token as the prep-card icon tiles — so the wizard's
   real primary action below still dominates the page. */
.kouli-ingest-upload-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.kouli-ingest-upload-action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.kouli-ingest-upload-action:hover,
.kouli-ingest-upload-action:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  outline: none;
}

.kouli-ingest-upload-action:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.22);
}

.kouli-ingest-upload-action:active {
  background: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .kouli-ingest-upload-action { transition: none; }
}

/* Quiet helper line under the textarea: file format / size + privacy.
   Tone matches §4 of the anchor (honest about what we are). */
.kouli-ingest-hint {
  margin: -4px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
}

.kouli-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kouli-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.kouli-field label {
  display: block;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.kouli-ingest .kouli-charcount {
  position: static;
  background: transparent;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  border-radius: 0;
}

.kouli-ingest .kouli-charcount.is-met {
  color: rgba(0, 196, 160, 0.95);
}

.kouli-ingest textarea {
  min-height: min(48vh, 390px);
}

.kouli-ingest input[type="text"],
.kouli-ingest textarea {
  width: 100%;
  background: rgba(8, 8, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.55;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.kouli-ingest input[type="text"] {
  font-size: 1rem;
  padding: 14px;
}

.kouli-ingest textarea { resize: vertical; }

.kouli-ingest input[type="text"]:focus,
.kouli-ingest textarea:focus {
  outline: none;
  border-color: rgba(0, 196, 160, 0.6);
  background: rgba(8, 8, 18, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.18);
}

.kouli-ingest textarea.is-error {
  border-color: rgba(248, 113, 113, 0.72);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

.kouli-ingest input::placeholder,
.kouli-ingest textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.kouli-ingest-primary {
  appearance: none;
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(0, 196, 160, 0.95), rgba(0, 96, 80, 0.97)),
    linear-gradient(90deg, #00C4A0, #2563eb);
  box-shadow:
    0 18px 50px rgba(0, 122, 100, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.kouli-ingest-primary svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.kouli-ingest-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 22px 58px rgba(0, 122, 100, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.kouli-ingest-primary:active:not(:disabled) {
  transform: scale(0.985);
}

.kouli-ingest-primary:disabled {
  filter: grayscale(0.45) brightness(0.65);
  cursor: not-allowed;
  box-shadow: none;
}

.kouli-ingest-secondary {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 4px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.kouli-ingest-secondary:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.9);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.kouli-ingest-secondary:disabled {
  color: rgba(255, 255, 255, 0.28);
  cursor: not-allowed;
}

.kouli-ingest-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(58, 26, 26, 0.55);
  color: #fca5a5;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.kouli-ingest-error-action {
  align-self: flex-start;
  appearance: none;
  border: 1px solid rgba(252, 165, 165, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 12px;
}

.kouli-ingest-error-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.kouli-ingest-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  line-height: 1.5;
}

.kouli-ingest-status-mist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  flex: 0 0 auto;
}

.kouli-ingest-status-mist span {
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  filter: blur(0.5px);
  animation: kouliIngestPulse 1.4s ease-in-out infinite;
}

.kouli-ingest-status-mist span:nth-child(2) { animation-delay: 0.2s; }
.kouli-ingest-status-mist span:nth-child(3) { animation-delay: 0.4s; }
.kouli-ingest-status-mist span:nth-child(4) { animation-delay: 0.6s; }

@keyframes kouliIngestPulse {
  0%, 100% { transform: scaleY(0.32); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .kouli-ingest-status-mist span { animation: none; opacity: 0.8; }
  .kouli-ingest-primary { transition: none; }
}

/* Prep beat between panel reveal and live interview -----------------------*/
/* Calm, ritualistic. Matches the existing wizard card vocabulary:
   same surface alpha, same border, same lavender accent — no neon.
   The intro is intentionally kicker-less so it reads as "you're past
   the setup wizard, this is a quiet beat" rather than another step. */
.kouli-prep {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kouli-prep-intro {
  text-align: left;
}

.kouli-prep-title {
  margin: 0;
  font-size: clamp(1.85rem, 7.8vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-prep-subtitle {
  margin: 10px 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.kouli-prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kouli-prep-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.kouli-prep-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

.kouli-prep-icon svg {
  width: 20px;
  height: 20px;
}

.kouli-prep-body h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.94);
}

.kouli-prep-body p {
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.kouli-prep-soft {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
  letter-spacing: 0;
}

/* Panel reveal screen -------------------------------------------------------*/
.kouli-ready {
  width: 100%;
}

.kouli-ready-intro {
  text-align: left;
}

.kouli-ready-title {
  margin: 0;
  font-size: clamp(2rem, 8.4vw, 2.85rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-ready-subtitle {
  margin: 10px 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

/* Live "Drafting your questions… 18s" status line shown on the setup card
   while planStatus === 'generating'. Hidden by default; shadow-interview.js
   toggles .hidden and refreshes the text on the plan-ready poll tick. The
   trailing dot pulses softly so the line never looks frozen. */
.kouli-ready-gen-status {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
.kouli-ready-gen-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.92);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.55);
  animation: kouli-gen-status-pulse 1.6s ease-in-out infinite;
}
@keyframes kouli-gen-status-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .kouli-ready-gen-status::before { animation: none; opacity: 0.85; }
}

.kouli-ready-panel,
.kouli-ready-plan,
.kouli-ready-question-bank {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.kouli-ready-panel {
  padding: 16px;
}

.kouli-ready-section-label {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.kouli-ready .panel-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.kouli-ready .panel-member {
  background: rgba(8, 8, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
}

.kouli-ready .panel-member.is-chair {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.kouli-ready .panel-member .name {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.98rem;
  font-weight: 800;
}

.kouli-ready .panel-member .role {
  color: rgba(255, 255, 255, 0.62);
}

.kouli-ready .panel-member .voice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 8px;
}

.kouli-ready .panel-member .voice-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.kouli-ready .panel-member .meta {
  color: rgba(255, 255, 255, 0.5);
}

.kouli-ready .panel-member .meta strong {
  color: rgba(255, 255, 255, 0.72);
}

.kouli-ready-plan {
  padding: 0;
  overflow: hidden;
}

.kouli-ready-plan summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 750;
}

.kouli-ready-plan summary::-webkit-details-marker { display: none; }

.kouli-ready-plan > summary::after,
.kouli-ready-question-bank > summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.7;
}

.kouli-ready-plan[open] > summary::after,
.kouli-ready-question-bank[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.kouli-ready .plan-list {
  margin: 0;
  padding: 0 16px 16px 34px;
}

.kouli-ready .plan-list li {
  color: rgba(255, 255, 255, 0.82);
}

.kouli-ready .plan-list .who {
  color: rgba(255, 255, 255, 0.42);
}

.kouli-ready .plan-list li {
  padding-right: 0;
}

.kouli-plan-row {
  display: grid;
  gap: 7px;
}

.kouli-plan-pin {
  appearance: none;
  width: fit-content;
  border: 1px solid rgba(190, 156, 255, 0.2);
  border-radius: 999px;
  background: rgba(190, 156, 255, 0.08);
  color: rgba(235, 229, 255, 0.84);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kouli-plan-pin:hover:not(:disabled),
.kouli-plan-pin:focus-visible {
  border-color: rgba(190, 156, 255, 0.48);
  color: #fff;
  outline: none;
}

.kouli-plan-pin:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.kouli-plan-pin.is-saved,
.kouli-plan-pin.is-saved:disabled {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.14);
  color: rgba(187, 247, 208, 0.96);
  opacity: 1;
  cursor: default;
}

.kouli-plan-pin-tick {
  display: inline-block;
  margin-left: 2px;
  font-weight: 900;
}

/* "Use a saved CV" picker on the CV ingest step */
.kouli-saved-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 750;
  padding: 8px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kouli-saved-toggle svg {
  width: 16px;
  height: 16px;
}

.kouli-saved-toggle:hover,
.kouli-saved-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  outline: none;
}

.kouli-saved-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.kouli-saved-picker.hidden { display: none; }

.kouli-saved-empty {
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.52);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 12px;
}

.kouli-saved-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 11px 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kouli-saved-item:hover,
.kouli-saved-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.kouli-saved-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kouli-saved-active {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.12);
  color: rgba(187, 247, 208, 0.95);
}

.kouli-saved-meta {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 700;
}

.kouli-ready-question-bank {
  padding: 0;
  overflow: hidden;
}

.kouli-ready-question-bank > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  font-size: 13px;
  color: #b8bcc8;
  font-weight: 750;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kouli-ready-question-bank > summary::-webkit-details-marker { display: none; }

.kouli-question-bank-title {
  flex: 1 1 auto;
  font: inherit;
  color: inherit;
}

.kouli-question-bank-body {
  padding: 0 16px 16px;
  display: grid;
  gap: 13px;
}

.kouli-question-bank-intro {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
  line-height: 1.45;
}

.kouli-question-bank-count {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(190, 156, 255, 0.22);
  background: rgba(190, 156, 255, 0.08);
  color: rgba(224, 214, 255, 0.9);
  font-size: 0.75rem;
  font-weight: 850;
  padding: 5px 9px;
}

.kouli-question-bank-message {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  line-height: 1.4;
  padding: 10px 12px;
}

.kouli-question-bank-message.is-error {
  background: rgba(248, 113, 113, 0.1);
  color: rgba(254, 202, 202, 0.94);
}

/* Processing state: same left-to-right "flashlight" sweep used on the
   "Reading your CV" generation labels, applied inline to the message text. */
.kouli-question-bank-message.is-processing {
  color: rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.46) 36%,
      rgba(255, 255, 255, 0.98) 46%,
      rgba(216, 231, 255, 1) 50%,
      rgba(255, 255, 255, 0.98) 54%,
      rgba(255, 255, 255, 0.46) 64%,
      rgba(255, 255, 255, 0.46) 100%
    );
  background-size: 240% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kouliLabelFlashlight 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kouli-question-bank-message.is-processing {
    animation: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
  }
}

.kouli-question-bank-list {
  display: grid;
  gap: 9px;
}

.kouli-question-bank-empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.9rem;
  line-height: 1.45;
}

.kouli-question-bank-item {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.kouli-question-bank-item.is-selected {
  border-color: #8b5cf6;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(37, 99, 235, 0.1)),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.8);
}

.kouli-question-bank-select {
  appearance: none;
  flex: 1 1 auto;
  text-align: left;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 12px;
  display: grid;
  gap: 7px;
  cursor: pointer;
  border-radius: 14px 0 0 14px;
  -webkit-tap-highlight-color: transparent;
}

.kouli-question-bank-select:hover:not(:disabled),
.kouli-question-bank-select:focus-visible {
  outline: none;
}

.kouli-question-bank-select:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.kouli-question-bank-item .text {
  font-size: 0.91rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.86);
}

.kouli-question-bank-item .meta {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.kouli-question-bank-remove {
  appearance: none;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 10px 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kouli-question-bank-remove:hover:not(:disabled),
.kouli-question-bank-remove:focus-visible {
  color: #fff;
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.14);
  outline: none;
}

.kouli-question-bank-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kouli-question-bank-add {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.kouli-question-bank-add label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 750;
}

.kouli-question-bank-add textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  padding: 12px;
  font: inherit;
}

.kouli-question-bank-add textarea:focus {
  border-color: rgba(190, 156, 255, 0.52);
  outline: none;
}

/* Live interview stage ------------------------------------------------------*/
.kouli-live {
  --voice-level: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.kouli-live-active {
  /* Neutral near-black canvas — the only colour on this screen is the
     teal digital mist inside the top interviewer card. */
  background:
    linear-gradient(180deg, #08080c 0%, #060609 44%, #040407 100%) !important;
  background-color: #07070d !important;
  background-attachment: fixed;
  color: #fff;
}

body.kouli-live-active .shadow-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.kouli-live-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 72%);
}

.kouli-live-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.kouli-live-wordmark {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.12);
}

.kouli-live-end {
  appearance: none;
  /* Apple HIG minimum tappable target is 44×44pt; the previous 62×34
     was below the floor on iOS Safari and people fat-fingered the
     KouLi wordmark instead of the End button. */
  min-width: 72px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
}

.kouli-live-end:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.kouli-live-question {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kouli-live-interviewer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 44px;
}

.kouli-live-panelist-name {
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-live-panelist-role {
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.56);
}

/* Live-interview question backdrop.
   Reuses the KouLi Coach modal's bottom-origin voice mist
   (kouli-coach-visual.css: .kouli-coach-stage / .kouli-voice-glow /
   .kouli-voice-mist-field / .kouli-mist-col). Vertical columns rise from
   the bottom with a soft purple glow at the base; identical aesthetic
   to the modal so the live stage feels like the same visual system.
   The question text sits overlaid on top via z-index.

   Audio-reactivity: shadow-interview.js drives --voice-energy on this
   stage and --col-scale on each column from the TTS analyser. The
   data-mist-state on #live-card sets calm baselines for the other
   states (user-speaking, waiting, processing). */
.kouli-live-mist-card {
  position: relative;
  min-height: clamp(240px, 42vh, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  isolation: isolate;
  /* Soften the modal's hard border/radius so the stage feels at home
     inside the Shadow Interview page (which has no card chrome). */
  border: none;
  border-radius: 16px;
}

#shadow-live-stage .kouli-voice-stage-inner {
  z-index: 0;
}

#shadow-live-stage .kouli-voice-mist-field {
  z-index: 1;
}

/* data-mist-state baselines — JS overrides --voice-energy per-frame
   while the AI is speaking via the audio analyser; these provide a
   calm fallback the rest of the time. */
.kouli-live[data-mist-state="ai-speaking"] .kouli-live-mist-card { --voice-energy: 0.55; }
.kouli-live[data-mist-state="user-speaking"] .kouli-live-mist-card { --voice-energy: 0.18; }
.kouli-live[data-mist-state="waiting"] .kouli-live-mist-card { --voice-energy: 0.22; }
.kouli-live[data-mist-state="processing"] .kouli-live-mist-card { --voice-energy: 0.14; }

/* Cooler tint while the user is speaking — keeps the AI's purple
   energy out of the user's lane without changing the visual system. */
.kouli-live[data-mist-state="user-speaking"] #shadow-live-stage .kouli-voice-glow {
  filter: blur(22px) hue-rotate(-22deg) saturate(0.82);
}

@media (prefers-reduced-motion: reduce) {
  #shadow-live-stage .kouli-mist-col {
    animation: none;
    transform: scaleY(var(--col-scale, 0.32));
  }
}

/* Mirror of the home/coach mist animations so the live stage breathes and
   drifts with the same cadence as the rest of the app. */
@keyframes kouliLiveMistBreathe {
  0%, 100% {
    transform: scaleX(0.96) scaleY(0.92);
    opacity: 0.82;
  }
  50% {
    transform: scaleX(1.04) scaleY(1.04);
    opacity: 1;
  }
}

@keyframes kouliLiveMistDrift {
  0%   { transform: translate(-53%, -50%) skewX(-8deg); }
  100% { transform: translate(-47%, -48%) skewX(8deg); }
}

.kouli-live-question-text {
  position: relative;
  z-index: 2;
  max-width: 22rem;
  margin: 0;
  text-align: center;
  font-size: clamp(1.05rem, 4.4vw, 1.32rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  text-wrap: balance;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(12, 10, 20, 0.65);
}

.kouli-live-stage-status {
  margin: 0;
  min-height: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.kouli-live[data-mist-state="ai-speaking"] .kouli-live-stage-status { color: rgba(255, 255, 255, 0.78); }
.kouli-live[data-mist-state="waiting"] .kouli-live-stage-status { color: rgba(255, 255, 255, 0.54); }
.kouli-live[data-mist-state="user-speaking"] .kouli-live-stage-status { color: rgba(255, 255, 255, 0.66); }
.kouli-live[data-mist-state="processing"] .kouli-live-stage-status { color: rgba(255, 255, 255, 0.42); }

/* Deliberation ("KouLi is thinking…" / follow-up generation): reuse the
   left-to-right "flashlight" sweep from the ingest "Reading your CV" labels
   (keyframe kouliLabelFlashlight, defined below). Scoped to .is-deliberating
   so other processing labels (e.g. "Reading your answer") stay flat. */
.kouli-live-stage-status.is-deliberating {
  color: rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.46) 36%,
      rgba(255, 255, 255, 0.98) 46%,
      rgba(216, 231, 255, 1) 50%,
      rgba(255, 255, 255, 0.98) 54%,
      rgba(255, 255, 255, 0.46) 64%,
      rgba(255, 255, 255, 0.46) 100%
    );
  background-size: 240% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kouliLabelFlashlight 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kouli-live-stage-status.is-deliberating {
    animation: none;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
  }
}

/* Slow the rise rhythm slightly while we're "thinking" — calmer
   pace than ai-speaking, no extra colour. */
.kouli-live[data-mist-state="processing"] #shadow-live-stage .kouli-mist-col {
  animation-duration: 3.8s;
}

/* Live interview progress bar.
   Mirrors .kouli-wizard-progress (top of "Paste your CV") but sized to fit
   up to 10 segments at mobile width. One segment per planned question; a
   segment flips to "is-complete" only AFTER its main answer + any pushback
   is captured, and the current question is shown as "is-active". No numbers
   per spec. */
.kouli-live-progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: 4px 4px 0;
  padding: 0 2px;
}

.kouli-live-progress[hidden] {
  display: none;
}

.kouli-live-progress span {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  transition: background 240ms ease, box-shadow 240ms ease, opacity 240ms ease;
}

.kouli-live-progress span.is-active {
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.92;
}

.kouli-live-progress span.is-complete {
  background: rgba(255, 255, 255, 0.85);
}

/* Self-view + live signals panel.
   UX intent: the self-view should feel like a real video tile (large enough
   to actually see yourself, like a small Zoom thumbnail) rather than a chip.
   The metrics column sits next to it as a calm, secondary signal — present
   but never louder than the question itself. */
.kouli-live-self-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(6, 6, 15, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px;
}

.kouli-self-view {
  position: relative;
  width: 100%;
  min-height: 280px;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.09), transparent 45%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -16px 28px rgba(6, 6, 15, 0.35);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

.kouli-self-view:hover {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.11), transparent 45%),
    rgba(255, 255, 255, 0.075);
}

.kouli-self-view.is-on {
  box-shadow:
    inset 0 0 0 1px rgba(167, 139, 250, 0.35),
    0 0 0 1px rgba(167, 139, 250, 0.12);
}

.kouli-self-view-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.kouli-self-view.is-on .kouli-self-view-video {
  opacity: 1;
}

/* Rule-of-thirds framing guide (eye-line at the upper third + centre line),
   ported from the speech self-view coach. Purely a composition aid drawn
   over the LOCAL video — nothing is analysed or transmitted. Only shown
   while the camera is on so it never floats over the "Camera off"
   placeholder. The lines are symmetric, so the mirrored video doesn't
   affect them. */
.kouli-self-view-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.4;
  fill: none;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.kouli-self-view.is-on .kouli-self-view-guide {
  opacity: 1;
}

.kouli-self-view-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.18s ease;
}

.kouli-self-view.is-on .kouli-self-view-placeholder {
  opacity: 0;
}

.kouli-self-view-label {
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
}

.kouli-self-view-hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* HUD overlays — text-first, glass-second. The chips should feel like
   the camera's own overlay (think iOS Camera, lock-screen widgets):
   the video shows through, the text just sits on top, legibility comes
   from a soft text-shadow rather than a heavy card background. Backdrop
   blur is kept very light so the eye still gets a hint of separation
   when the camera image is busy. */
.kouli-live-hud {
  position: absolute;
  top: 12px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  /* Whisper-thin tint — enough to anchor the blur on light backgrounds,
     not enough to read as a panel. */
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.88);
  /* Text legibility on any video background (bright sweater, dark room,
     a window behind the candidate). The shadow is soft + slightly diffuse
     so it doesn't read as a hard outline. */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 6px rgba(0, 0, 0, 0.35);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.kouli-live-hud-left {
  left: 12px;
  align-items: flex-start;
}

.kouli-live-hud-right {
  right: 12px;
  align-items: flex-end;
  text-align: right;
  max-width: 50%;
}

.kouli-live-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.92);
}

.kouli-live-stat-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kouli-live-stat-value {
  color: rgba(255, 255, 255, 0.98);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  transition: color 0.25s ease, opacity 0.25s ease, text-shadow 0.25s ease;
}

.kouli-live-stat-value[data-severity="ok"] {
  color: #bbf7d0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 7px rgba(34, 197, 94, 0.42);
}

.kouli-live-stat-value[data-severity="med"] {
  color: #fde68a;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 7px rgba(245, 158, 11, 0.46);
}

.kouli-live-stat-value[data-severity="high"] {
  color: #fecaca;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(239, 68, 68, 0.5);
}

.kouli-live-cue-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.kouli-live-cue-text {
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.22;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.4s ease;
  /* Barely-there breathing tied to the same digital-mist language used
     elsewhere in the app. Calm, alive, never busy. */
  animation: kouli-cue-breathe 4.6s ease-in-out infinite;
}

@keyframes kouli-cue-breathe {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
}

/* Brief flash on value change so updates feel alive without being noisy.
   Toggled by JS via the `.is-fresh` class. */
.kouli-live-stat-value.is-fresh,
.kouli-live-cue-text.is-fresh {
  animation: kouli-fresh 0.6s ease-out;
}

@keyframes kouli-fresh {
  0%   { opacity: 0.35; transform: translateY(1px); }
  60%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; }
}

.kouli-live-toast {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  max-width: 484px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 8, 18, 0.88);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.4;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Persistent TTS-failure banner — replaces the auto-hide toast for the
   audio-failed path so users have time to actually read the question.
   Cleared the moment VAD onSpeechStart fires for the answer. */
.kouli-tts-failed-banner {
  margin: 6px 4px 0;
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(244, 114, 182, 0.32);
  background: linear-gradient(180deg, rgba(99, 38, 86, 0.42), rgba(40, 14, 32, 0.62));
  color: rgba(255, 234, 244, 0.96);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 16px rgba(8, 0, 12, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.kouli-tts-failed-banner.hidden {
  display: none;
}

.kouli-tts-failed-banner-label {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 200, 224, 0.92);
}

.kouli-tts-failed-banner-help {
  font-size: 0.78rem;
  color: rgba(255, 234, 244, 0.78);
}

.kouli-tts-failed-banner-text {
  margin: 6px 0 0;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Background-paused overlay. Shown while document.visibilityState is
   'hidden' during a live session so the candidate doesn't return to
   what looks like a frozen screen. The orchestrator pauses the
   audio context + nudge timer in parallel. */
.kouli-bg-paused {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 10, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.kouli-bg-paused.hidden {
  display: none;
}

.kouli-bg-paused-card {
  max-width: 360px;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 14, 32, 0.78);
  text-align: center;
}

.kouli-bg-paused-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-bg-paused-body {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.live-debug-transcript {
  display: none;
}

/* Small-phone breathing room (Patch 9). On iPhone SE / mini-class
   devices (≤ 600 px wide and ≤ 700 px tall), the default layout
   pushed the self-view + bottom-nav off the bottom of the viewport.
   We tighten the mist card and the self-view minimum height so the
   question + mist + self-view fit above the bottom-nav without
   scrolling. Keeps the calmer mist + self-view aesthetic. */
@media (max-width: 600px) {
  .kouli-live-mist-card {
    min-height: clamp(200px, 36vh, 320px);
    padding: 22px 16px;
  }
  .kouli-self-view {
    min-height: 220px;
  }
  .kouli-live-self-panel {
    padding: 14px;
  }
  /* Compress the prep list so the "I'm ready" CTA sits above the fold
     on iPhone SE. Reduces vertical waste without changing the
     information density. */
  .kouli-prep-list { gap: 8px; }
  .kouli-prep-item { padding: 12px; }
  .kouli-prep-icon { width: 32px; height: 32px; }
}

@media (max-width: 390px) {
  .kouli-live-self-panel {
    padding: 14px;
  }
  .kouli-self-view {
    min-height: 200px;
  }
  .kouli-live-hud-left,
  .kouli-live-hud-right {
    top: 10px;
  }
  .kouli-live-cue-text {
    font-size: 0.86rem;
  }
}

.shadow-page {
  max-width: 880px;
  margin: 0 auto;
  /* Bottom padding reserves space for the permanent bottom nav so the
     dev/scratch setup + live cards don't tuck under it. */
  padding: 32px 24px calc(96px + env(safe-area-inset-bottom, 0px));
}

/* When the kouli analyzing/results stages take over, drop the outer
   shadow-page padding so the centered 520px column lives flush against
   the viewport gutters on mobile. */
body.kouli-stage .shadow-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.card {
  background: #16181f;
  border: 1px solid #23262f;
  border-radius: 10px;
  padding: 18px 18px;
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #b8bcc8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

label {
  display: block;
  font-size: 13px;
  color: #b8bcc8;
  margin-bottom: 6px;
}

input[type="text"] {
  width: 100%;
  background: #0e0f13;
  border: 1px solid #2b2e38;
  color: #e7e9ee;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

button {
  background: #3b6cf5;
  color: white;
  border: 0;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
button:disabled { background: #2b2e38; color: #6a6e78; cursor: not-allowed; }

button.secondary { background: #2b2e38; color: #e7e9ee; }
button.secondary:hover:not(:disabled) { background: #353945; }

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.panel-member {
  background: #0e0f13;
  border: 1px solid #2b2e38;
  border-radius: 8px;
  padding: 12px;
}

.panel-member.is-chair { border-color: #3b6cf5; }
.panel-member .name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.panel-member .role { font-size: 12px; color: #8a8f9c; margin-bottom: 8px; }
.panel-member .meta { font-size: 11px; color: #6a6e78; line-height: 1.5; }
.panel-member .meta strong { color: #b8bcc8; font-weight: 500; }

.status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #b8bcc8;
  margin-bottom: 12px;
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6a6e78;
  display: inline-block;
}

.status-dot.is-live { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
.status-dot.is-speaking { background: #3b6cf5; }
.status-dot.is-listening { background: #fbbf24; }
.status-dot.is-error { background: #f87171; }

.transcript {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid #23262f;
  border-radius: 8px;
  padding: 12px;
  background: #0e0f13;
}

.bubble {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 90%;
}

.bubble.ai {
  background: #1a1e27;
  border: 1px solid #2b2e38;
  align-self: flex-start;
}

.bubble.ai .who {
  font-size: 11px;
  color: #8a8f9c;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bubble.user {
  background: #1f2937;
  border: 1px solid #374151;
  margin-left: auto;
  text-align: right;
}

.bubble.system {
  background: transparent;
  border: 1px dashed #2b2e38;
  color: #8a8f9c;
  font-size: 12px;
  text-align: center;
  max-width: 100%;
}

.bubble.text-question-banner {
  background: #3a2a16;
  border: 1px solid #7c5a2e;
  color: #fbbf24;
  font-weight: 500;
}

.bubble .verdict {
  font-size: 11px;
  color: #8a8f9c;
  margin-top: 6px;
  font-style: italic;
}

.controls {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.hidden { display: none !important; }

.transcript-final {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #23262f;
  border-radius: 8px;
  background: #0e0f13;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  color: #b8bcc8;
}

/* Phase 1A ingest screen ----------------------------------------------------*/

.hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #8a8f9c;
  line-height: 1.5;
}

.field {
  margin-bottom: 14px;
  position: relative;
}

textarea {
  width: 100%;
  background: #0e0f13;
  border: 1px solid #2b2e38;
  color: #e7e9ee;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}

textarea:focus, input[type="text"]:focus {
  outline: none;
  border-color: #3b6cf5;
}

.charcount {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10.5px;
  color: #6a6e78;
  background: #16181f;
  padding: 1px 6px;
  border-radius: 3px;
}

.error-banner {
  margin-top: 12px;
  padding: 10px 12px;
  background: #3a1a1a;
  border: 1px solid #7c2e2e;
  color: #f87171;
  border-radius: 6px;
  font-size: 12.5px;
}

.ingest-status {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #b8bcc8;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #2b2e38;
  border-top-color: #3b6cf5;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.plan-preview {
  margin-top: 16px;
  padding: 12px 14px;
  background: #0e0f13;
  border: 1px solid #23262f;
  border-radius: 8px;
}

.plan-preview summary {
  cursor: pointer;
  font-size: 13px;
  color: #b8bcc8;
}

.plan-list {
  margin: 12px 0 0;
  padding: 0 0 0 24px;
  font-size: 12.5px;
  color: #d0d4dd;
  line-height: 1.5;
}

.plan-list li {
  margin-bottom: 8px;
}

.plan-list .who {
  display: block;
  font-size: 10.5px;
  color: #6a6e78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.bubble.ai .verdict.followup-tag {
  font-size: 10px;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-style: normal;
}

/* Phase 1A debrief LITE -----------------------------------------------------*/

#debrief-body { display: flex; flex-direction: column; gap: 14px; }

.debrief-takeaway {
  background: #1a1f2c;
  border: 1px solid #2b3245;
  border-radius: 8px;
  padding: 14px 16px;
}

.debrief-takeaway .takeaway-label {
  font-size: 10.5px;
  color: #8a8f9c;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.debrief-takeaway .takeaway-text {
  font-size: 14px;
  color: #e7e9ee;
  line-height: 1.5;
}

.debrief-q {
  background: #0e0f13;
  border: 1px solid #23262f;
  border-left: 3px solid #2b2e38;
  border-radius: 8px;
  padding: 14px 16px;
}

.debrief-q.verdict-strong { border-left-color: #4ade80; }
.debrief-q.verdict-adequate { border-left-color: #60a5fa; }
.debrief-q.verdict-weak { border-left-color: #fbbf24; }
.debrief-q.verdict-diversion { border-left-color: #f87171; }

.debrief-q-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.debrief-q-idx {
  background: #2b2e38;
  color: #b8bcc8;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.debrief-q-meta { flex: 1; min-width: 0; }
.debrief-q-who { font-size: 12.5px; color: #d0d4dd; font-weight: 500; }
.debrief-q-topic { font-size: 10.5px; color: #6a6e78; margin-top: 1px; text-transform: lowercase; }

.debrief-q-verdict {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.debrief-q-verdict.v-strong { background: #173025; color: #4ade80; }
.debrief-q-verdict.v-adequate { background: #1a2433; color: #60a5fa; }
.debrief-q-verdict.v-weak { background: #2a2114; color: #fbbf24; }
.debrief-q-verdict.v-diversion { background: #2e1a1a; color: #f87171; }
.debrief-q-verdict.v-unknown { background: #1a1d24; color: #8a8f9c; }

.debrief-q-text {
  font-size: 13.5px;
  color: #e7e9ee;
  line-height: 1.5;
  margin-bottom: 8px;
}

.debrief-q-ans {
  background: #1a1e27;
  border: 1px solid #2b2e38;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #d0d4dd;
  line-height: 1.5;
  margin-bottom: 8px;
}

.ans-label { color: #6a6e78; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 6px; }

.debrief-delivery-replay {
  margin: -2px 0 10px;
  padding: 9px 10px;
  border: 1px solid #2b2e38;
  border-radius: 8px;
  background: #111621;
}

.debrief-delivery-replay-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.debrief-delivery-replay-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.debrief-delivery-replay-meta {
  color: #8a8f9c;
  font-size: 11px;
}

.debrief-delivery-replay-text {
  color: #d9dce5;
  font-size: 12.5px;
  line-height: 1.65;
}

.debrief-pause-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  padding: 1px 6px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.debrief-pause-chip.is-long {
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.16);
}

.debrief-delivery-replay-note {
  margin-top: 6px;
  color: #7f8491;
  font-size: 10.5px;
  line-height: 1.35;
}

.debrief-q-reason {
  font-size: 12px;
  color: #b8bcc8;
  font-style: italic;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 2px solid #2b2e38;
}

.debrief-signals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.signal {
  font-size: 12px;
  line-height: 1.45;
  padding-left: 4px;
}

.signal .bullet { display: inline-block; width: 16px; font-weight: 700; }
.signal.hit { color: #c8e6d4; }
.signal.hit .bullet { color: #4ade80; }
.signal.missed { color: #d8c8b0; }
.signal.missed .bullet { color: #fbbf24; }

.debrief-followup {
  margin-top: 12px;
  padding: 10px 12px;
  background: #1a1612;
  border: 1px dashed #5a4a2a;
  border-radius: 6px;
}

.debrief-followup .fu-label {
  font-size: 10.5px;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.debrief-followup .fu-q {
  font-size: 13px;
  color: #e7e9ee;
  margin-bottom: 6px;
  line-height: 1.5;
}

.debrief-followup .fu-a {
  font-size: 12px;
  color: #b8bcc8;
  line-height: 1.5;
}

.debrief-raw {
  margin-top: 16px;
  padding: 8px 12px;
  background: #0e0f13;
  border: 1px solid #23262f;
  border-radius: 6px;
}

.debrief-raw summary {
  cursor: pointer;
  font-size: 11.5px;
  color: #8a8f9c;
}

.debrief-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-size: 13px;
  color: #b8bcc8;
}

/* ── Phase 1A.2 Results page (kouli-themed) ─────────────────────────────── */
/* Mirrors web/kouli-home.css design language: dark purple radial backdrop,
   glass cards, mist hero, gradient CTA, dark bottom nav. Scoped under
   .kouli-results so it doesn't touch the existing ingest/setup screens. */

.kouli-results.hidden,
.kouli-analyzing.hidden,
.kouli-early.hidden,
.kouli-confirm.hidden { display: none !important; }

/* Analyzing screen — dark fullscreen above content, but BELOW the bottom
   nav so the nav stays static across the flow. No spinner, no dots. */
.kouli-analyzing {
  position: fixed;
  inset: 0 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 24px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Analysing screen is intentionally flat black — no teal, no purple haze. */
  background: #050507;
  animation: kouliAnalyzingFade 600ms ease-out;
}

.kouli-analyzing-mist {
  position: relative;
  width: min(420px, 92vw);
  height: 260px;
  overflow: visible;
  filter: saturate(1.32);
  animation: kouliLiveMistBreathe 5.2s ease-in-out infinite;
}

/* Horizontal cloud bands — matches the home/coach mist so the loading and
   live screens feel like the same digital mist as the home hero. */
.kouli-analyzing-mist::before,
.kouli-analyzing-mist::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 46%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.08),
    transparent
  );
  filter: blur(22px);
  opacity: 0.78;
  animation: kouliLiveMistDrift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.kouli-analyzing-mist::after {
  width: 78%;
  height: 66%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.07),
    transparent
  );
  filter: blur(34px);
  opacity: 0.52;
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}
.kouli-analyzing-mist .kouli-mist-col {
  position: absolute;
  top: 50%;
  left: var(--mist-left, 50%);
  width: 12px;
  height: 100%;
  margin-left: -6px;
  border-radius: 9999px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--mist-color, rgba(255, 255, 255, 0.5)) 38%,
    var(--mist-color, rgba(255, 255, 255, 0.5)) 62%,
    transparent 100%);
  filter: blur(10px);
  opacity: 0.85;
  transform: translateY(-50%) scaleY(0.55);
  animation: kouliMistColumn 4.6s ease-in-out infinite;
  animation-delay: var(--mist-delay, 0s);
}

.kouli-early-mist .kouli-mist-col {
  position: absolute;
  top: 50%;
  left: var(--mist-left, 50%);
  width: 12px;
  height: 100%;
  margin-left: -6px;
  border-radius: 9999px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--mist-color, rgba(255, 255, 255, 0.5)) 38%,
    var(--mist-color, rgba(255, 255, 255, 0.5)) 62%,
    transparent 100%);
  filter: blur(10px);
  opacity: 0.75;
  transform: translateY(-50%) scaleY(0.55);
  animation: kouliMistColumn 4.6s ease-in-out infinite;
  animation-delay: var(--mist-delay, 0s);
}
.kouli-analyzing-label {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.46) 36%,
      rgba(255, 255, 255, 0.98) 46%,
      rgba(216, 231, 255, 1) 50%,
      rgba(255, 255, 255, 0.98) 54%,
      rgba(255, 255, 255, 0.46) 64%,
      rgba(255, 255, 255, 0.46) 100%
    );
  background-size: 240% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kouliLabelFlashlight 2.8s ease-in-out infinite;
}
@keyframes kouliAnalyzingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kouliLabelFlashlight {
  0%   { background-position: 140% 50%; }
  100% { background-position: -140% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .kouli-analyzing,
  .kouli-analyzing-mist .kouli-mist-col {
    animation: none;
  }
  .kouli-analyzing-label {
    animation: none;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
  }
}

/* When either screen is showing, paint the whole viewport in the kouli
   dark gradient via a body class. Fixed background that doesn't move
   when the user scrolls the report. */
body.kouli-stage {
  /* Neutral near-black canvas — no purple haze. On the results screen the
     only colour is the teal "Talk to KouLi" mist card at the top. */
  background:
    linear-gradient(180deg, #08080c 0%, #060609 44%, #040407 100%) !important;
  background-color: #07070d !important;
  background-attachment: fixed;
  color: #fff;
}

/* Narrow the results to the same column the home screen uses (520px). */
.kouli-results {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.kouli-early {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.kouli-early-mist {
  height: 170px;
  margin: 8px auto -6px;
}

.kouli-early-card {
  text-align: left;
}

.kouli-early-title {
  margin: 0;
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-early-copy {
  margin: 12px 0 18px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* Subtle grid overlay (matches kouli-home-shell::before). */
.kouli-results::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
}

.kouli-partial-note {
  margin: -4px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Early-end confirmation modal --------------------------------------------*/
.kouli-confirm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.kouli-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 7, 0.64);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kouli-confirm-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(8, 8, 18, 0.92);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 20px;
}

.kouli-confirm-sheet h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 850;
}

.kouli-confirm-sheet p {
  margin: 10px 0 18px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.kouli-confirm-actions {
  display: grid;
  gap: 10px;
}

.kouli-confirm-primary,
.kouli-confirm-secondary {
  width: 100%;
  min-height: 48px;
  border-radius: 15px;
  font-size: 0.96rem;
  font-weight: 800;
}

.kouli-confirm-primary {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  color: #0b0b14;
}

.kouli-confirm-secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
}

.kouli-results > * { position: relative; z-index: 1; }

/* Topbar */
.kouli-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 4px;
}

.kouli-wordmark {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.12);
}

.kouli-pill {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: default;
}

.kouli-results-pill { cursor: default; }

/* Mist hero button (compact version of kouli-home-mist-button). */
.kouli-mist-button {
  position: relative;
  width: 100%;
  height: clamp(180px, 28vh, 240px);
  margin: 4px 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.kouli-mist-button:focus-visible {
  outline: 3px solid rgba(0, 196, 160, 0.85);
  outline-offset: 6px;
  border-radius: 28px;
}

.kouli-mist {
  position: absolute;
  inset: 18px 0 4px;
  overflow: hidden;
  filter: saturate(1.32);
  animation: kouliMistBreathe 5.2s ease-in-out infinite;
}

.kouli-mist::before,
.kouli-mist::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 44%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(0, 196, 160, 0.32), rgba(0, 229, 192, 0.42), rgba(34, 211, 238, 0.24), transparent);
  filter: blur(22px);
  opacity: 0.78;
  animation: kouliMistDrift 8s ease-in-out infinite alternate;
}

.kouli-mist::after {
  width: 78%;
  height: 64%;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.22), rgba(0, 196, 160, 0.46), rgba(96, 165, 250, 0.24), transparent);
  filter: blur(34px);
  opacity: 0.5;
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}

/* Results-page hero mist columns. Scoped to .kouli-mist so this does NOT
   bleed into the coach-style mist used by the live interview question card
   (which builds .kouli-mist-col elements via web/kouli-coach-visual.css). */
.kouli-mist .kouli-mist-col {
  position: absolute;
  left: var(--mist-left);
  bottom: 12%;
  width: clamp(10px, 3.8vw, 18px);
  height: calc(62px + (var(--mist-i) * 4px));
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--mist-color), rgba(255,255,255,0));
  filter: blur(8px);
  opacity: 0.46;
  mix-blend-mode: screen;
  animation: kouliMistColumn 4.6s ease-in-out infinite;
  animation-delay: var(--mist-delay);
}

.kouli-mist-label {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 8, 18, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 18px rgba(255,255,255,0.45), 0 0 42px rgba(0, 196, 160, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 24px rgba(8,8,18,0.32);
}

.kouli-mist-button:hover .kouli-mist { filter: saturate(1.55) brightness(1.08); }
.kouli-mist-button:active .kouli-mist { transform: scale(0.985); }

@keyframes kouliMistBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes kouliMistDrift {
  0% { transform: translate(-58%, -50%); }
  100% { transform: translate(-42%, -50%); }
}

@keyframes kouliMistColumn {
  0%, 100% { opacity: 0.32; transform: translateX(-50%) scaleY(0.85); }
  50% { opacity: 0.7; transform: translateX(-50%) scaleY(1.15); }
}

/* Big title */
.kouli-results-title {
  margin: 8px 0 4px;
  font-size: clamp(1.6rem, 6.4vw, 2.1rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.97);
}

/* Generic kouli card */
.kouli-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(8, 8, 18, 0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 18px 18px 16px;
  color: #fff;
}

.kouli-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.kouli-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: none;
}

.kouli-card-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* Calm debrief summary ----------------------------------------------------- */
.kouli-readiness {
  padding: 19px 18px 17px;
}

.kouli-readiness-line {
  margin: 2px 0 16px;
  max-width: 430px;
  font-size: clamp(1.34rem, 6vw, 1.78rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 820;
  color: rgba(255, 255, 255, 0.96);
}

.kouli-lens-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kouli-lens-chip {
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.kouli-lens-name {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.43);
}

.kouli-lens-value {
  font-size: 0.95rem;
  font-weight: 720;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.9);
}

.kouli-coach-cards {
  display: grid;
  gap: 12px;
}

.kouli-coach-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(8, 8, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  padding: 16px 17px;
}

.kouli-coach-card-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.kouli-coach-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.kouli-coach-card .kouli-coach-card-action {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
}

.kouli-auth-note p {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}

/* Coach's read */
.kouli-coachread .kouli-card-title { margin-bottom: 8px; }

.kouli-coachread-body {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.kouli-coachread-quote {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

.kouli-coachread-quote::before { content: '“'; opacity: 0.6; }
.kouli-coachread-quote::after  { content: '”'; opacity: 0.6; }

.kouli-coachread-next {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.kouli-coachread-next strong { color: rgba(255, 255, 255, 0.95); font-weight: 700; }

/* Question-by-question (collapsed) report wrapper */
.kouli-qbreport {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
    rgba(8, 8, 18, 0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}

.kouli-qbreport-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

.kouli-qbreport-summary::-webkit-details-marker { display: none; }

.kouli-qbreport-chevron {
  display: inline-block;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.2s ease;
}

.kouli-qbreport[open] .kouli-qbreport-chevron {
  transform: rotate(90deg);
}

.kouli-qbreport-body {
  padding: 4px 14px 18px;
}

/* Override the older debrief block colors inside the kouli-themed shell so
   they read on the dark gradient. The skeleton structure from
   renderSummary() is reused; only colors and spacing are re-skinned. */
.kouli-qbreport .debrief-takeaway {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}
.kouli-qbreport .debrief-takeaway .takeaway-label { color: rgba(255,255,255,0.5); }
.kouli-qbreport .debrief-takeaway .takeaway-text { color: rgba(255,255,255,0.92); }

.kouli-qbreport .debrief-q {
  background: rgba(8, 8, 18, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}
.kouli-qbreport .debrief-q-text { color: rgba(255,255,255,0.92); }
.kouli-qbreport .debrief-q-ans {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255,255,255,0.82);
}
.kouli-qbreport .debrief-delivery-replay {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}
.kouli-qbreport .debrief-delivery-replay-text { color: rgba(255,255,255,0.82); }
.kouli-qbreport .debrief-delivery-replay-meta,
.kouli-qbreport .debrief-delivery-replay-note { color: rgba(255,255,255,0.46); }
.kouli-qbreport .debrief-q-reason { color: rgba(255,255,255,0.65); border-left-color: rgba(255,255,255,0.18); }
.kouli-qbreport .signal.hit { color: rgba(196, 245, 218, 0.95); }
.kouli-qbreport .signal.missed { color: rgba(255, 222, 173, 0.9); }
.kouli-qbreport .ans-label { color: rgba(255,255,255,0.5); }
.kouli-qbreport .debrief-q-who { color: rgba(255,255,255,0.92); }
.kouli-qbreport .debrief-q-topic { color: rgba(255,255,255,0.45); }
.kouli-qbreport .debrief-q-idx {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255,255,255,0.85);
}
.kouli-qbreport .debrief-followup {
  background: rgba(255, 215, 130, 0.04);
  border-color: rgba(251, 191, 36, 0.32);
}

.kouli-qbreport .debrief-q-lenses {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.kouli-qbreport .debrief-q-lens {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
}

.kouli-qbreport .debrief-q-lens-name,
.kouli-qbreport .debrief-q-lens-band {
  display: inline-block;
  margin-right: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kouli-qbreport .debrief-q-lens-name {
  color: rgba(255, 255, 255, 0.58);
}

.kouli-qbreport .debrief-q-lens-band {
  color: rgba(255, 255, 255, 0.56);
}

.kouli-qbreport .debrief-q-lens-note {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}

.kouli-qbreport .debrief-raw {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}
.kouli-qbreport .debrief-raw summary { color: rgba(255,255,255,0.55); }

/* Primary CTA */
.kouli-cta {
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)),
    rgba(8, 8, 16, 0.6);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.kouli-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.kouli-cta:active { transform: scale(0.985); }

/* ============================================================
   Permanent bottom nav — markup and styling cloned from
   /index.html so the shadow flow reads as the same app shell.
   Static across ingest / setup / live / analyzing / results.
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(7, 7, 13, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.5rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-around;
  z-index: 1000;
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.7rem;
  transition: color 0.2s ease, transform 0.15s ease;
  min-width: 52px;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
}

.bottom-nav .nav-item:hover { color: rgba(255, 255, 255, 0.85); }
.bottom-nav .nav-item:active { transform: translateY(0); }

.bottom-nav .nav-item.active { color: #ffffff; }
.bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

.bottom-nav .nav-item svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.25rem;
}

.bottom-nav .nav-item--coach { color: rgba(255, 255, 255, 0.55); }
.bottom-nav .nav-item--coach:hover { color: rgba(255, 255, 255, 0.85); }
.bottom-nav .nav-item--coach.active { color: #ffffff; }
.bottom-nav .nav-item--coach.active::before { background: #ffffff; }

.bottom-nav .nav-item--coach svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform 0.25s ease;
}

@media (max-width: 480px) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 16px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

@media (hover: hover) and (pointer: fine) {
  .bottom-nav .nav-item--coach:hover svg { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav .nav-item--coach svg { animation: none; opacity: 1; }
  .kouli-mist, .kouli-mist::before, .kouli-mist::after, .kouli-mist-col,
  .kouli-cta { animation: none; }
}

/* ============================================================
   Paywall + transport-error cards (Patch 6).
   Both reuse the kouli-stage gradient body class. The card is a
   single column, mobile-first, with a primary CTA and a secondary
   Back button. No mist columns — these are decision moments, not
   analysis screens.
   ============================================================ */
.kouli-paywall,
.kouli-transport {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  gap: 18px;
}

.kouli-paywall .kouli-topbar,
.kouli-transport .kouli-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.kouli-paywall-card,
.kouli-transport-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 14, 32, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px rgba(4, 0, 12, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.kouli-paywall-title,
.kouli-transport-title {
  margin: 0;
  font-size: clamp(1.6rem, 6.5vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #fff;
}

.kouli-paywall-copy,
.kouli-transport-copy {
  margin: 4px 0 8px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.kouli-paywall-card .kouli-cta,
.kouli-transport-card .kouli-cta {
  margin: 4px 0 0;
}

.kouli-paywall-card .kouli-ingest-secondary,
.kouli-transport-card .kouli-ingest-secondary {
  margin: 0;
  width: 100%;
}