/* ============================================================================
   interview-v2.css — nieuwe schil procesinterview (redesign golf A)
   Bron-ontwerp: bijlage "FlowTopper Interviewmodule (offline).html" (10-6-2026).
   Alles is gescoped op .interview-panel.iv2 zodat de oude schil
   (interview-gast.html — tot golf H) onaangetast blijft.
   ============================================================================ */

/* --- Paneel: volledig scherm. Verbergt bewust de app-navigatie (stappen
   1 t/m 5) én de topbar: maximale ruimte voor gesprek, schema en voortgang
   (afspraak Remco 10-6-2026). De !important-regels winnen van de oudere
   drawer-regels in redesign.css (.interview-panel met !important). --- */
.interview-panel.iv2 {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--rd-bg-subtle, #F2F2F8) !important;
  z-index: 1500; /* boven topbar/sidebar; onder modals (cr-modal 2000, bl-modal 10050) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.interview-panel.iv2.hidden { display: none !important; }

/* --- Bovenbalk --- */
.iv2-appbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--rd-bg-elev, #fff);
  border-bottom: 1px solid var(--rd-border, rgba(10,10,31,0.1));
  flex-shrink: 0;
  flex-wrap: wrap;
}
.iv2-brand { display: flex; align-items: center; gap: 10px; }
.iv2-brand-badge {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--primary, #3D2EFF);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; letter-spacing: -0.04em;
}
.iv2-brand-title { font-size: 13.5px; font-weight: 700; line-height: 1.15; color: var(--rd-ink, #0A0A1F); }
.iv2-brand-sub { font-size: 10.5px; font-weight: 500; color: var(--rd-ink-soft, rgba(10,10,31,0.5)); }
.iv2-appbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.iv2-timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px; font-weight: 600;
  color: var(--rd-ink-soft, rgba(10,10,31,0.65));
}
.iv2-ai-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--primary, #3D2EFF);
}
.iv2-ai-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary, #3D2EFF);
  animation: iv2-pulse 1.4s ease-in-out infinite;
}
@keyframes iv2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Voorlees-instellingen: oude schil had witte tekst op paarse header — hier lichte balk */
.iv2 .interview-tts-label {
  color: var(--rd-ink-soft, rgba(10,10,31,0.65)) !important;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px;
}
/* !important nodig: redesign.css verft deze elementen wit (voor de oude paarse
   header) met !important — wit-op-wit op onze lichte balk (gemeten 10-6). */
.iv2 .interview-voice-select {
  padding: 4px 8px;
  border: 1px solid var(--rd-border, #ddd) !important;
  border-radius: 6px;
  font-size: 12px;
  max-width: 180px;
  background: var(--rd-bg, #fff) !important;
  color: var(--rd-ink, #333) !important;
}
.iv2-close-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--rd-border, rgba(10,10,31,0.12));
  background: var(--rd-bg, #fff);
  color: var(--rd-ink-soft, rgba(10,10,31,0.6));
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iv2-close-btn:hover { background: var(--rd-bg-subtle, #f0f0f5); color: var(--rd-ink, #0A0A1F); }

/* --- Werkbalk (Verkenning + invoerwijze) --- */
.iv2-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  background: var(--rd-bg-elev, #FAFAFC);
  border-bottom: 1px solid var(--rd-border, rgba(10,10,31,0.08));
  flex-shrink: 0;
  flex-wrap: wrap;
}
.iv2-toolbar-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--rd-ink-soft, rgba(10,10,31,0.45));
}
.iv2-toolbar-hint { font-size: 11px; color: var(--rd-ink-soft, rgba(10,10,31,0.45)); }
.iv2-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.iv2-seg {
  display: inline-flex;
  background: rgba(10,10,31,0.06);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.iv2-seg button {
  border: none;
  background: transparent;
  color: var(--rd-ink-soft, rgba(10,10,31,0.5));
  font-size: 11.5px; font-weight: 600;
  font-family: inherit;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s ease;
}
.iv2-seg button.active {
  background: var(--rd-bg-elev, #fff);
  color: var(--rd-ink, #0A0A1F);
  box-shadow: 0 1px 2px rgba(10,10,31,0.1);
}

/* --- Drie-vakken-rooster: rail | gesprek | schema --- */
.iv2-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
}
.interview-panel.iv2[data-layout="stacked"] .iv2-body {
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "rail convo" "rail schema";
}
.interview-panel.iv2[data-layout="split"] .iv2-body {
  grid-template-columns: 236px minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail convo schema";
}
.interview-panel.iv2[data-layout="schema"] .iv2-body {
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "schema rail" "schema convo";
}
.iv2-card {
  background: var(--rd-bg-elev, #fff);
  border: 1px solid var(--rd-border, rgba(10,10,31,0.08));
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(10,10,31,0.04);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.iv2-rail   { grid-area: rail; }
.iv2-convo  { grid-area: convo; }
.iv2-schema { grid-area: schema; }
.interview-panel.iv2[data-layout="schema"] .iv2-rail { max-height: 220px; }

/* --- Rail (voortgang + notitiekaart) --- */
.iv2-rail-inner { padding: 16px 14px; overflow-y: auto; min-height: 0; }
.iv2-rail-head {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--primary, #3D2EFF);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.iv2-rail-teller {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0;
  color: var(--rd-ink-soft, rgba(10,10,31,0.4));
}
.iv2-rail-divider { height: 1px; background: rgba(10,10,31,0.07); margin: 14px 0; }

/* Fase-checklist */
.iv2-checklist { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.iv2-fase {
  all: unset;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: default;
  box-sizing: border-box;
  width: 100%;
}
.iv2-fase:not([disabled]) { cursor: pointer; }
.iv2-fase:not([disabled]):hover { background: rgba(10,10,31,0.04); }
.iv2-fase.is-huidig {
  background: var(--rd-bg-elev, #fff);
  border-color: color-mix(in srgb, var(--primary, #3D2EFF) 25%, transparent);
}
.iv2-fase-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: #E7E7F0;
  color: rgba(10,10,31,0.4);
  font-size: 10.5px; font-weight: 700;
  margin-top: 1px;
}
.iv2-fase.is-klaar .iv2-fase-dot { background: #00B14F; color: #fff; }
.iv2-fase.is-huidig:not(.is-klaar) .iv2-fase-dot {
  background: var(--primary, #3D2EFF); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #3D2EFF) 10%, transparent);
}
.iv2-fase-tekst { flex: 1; min-width: 0; }
.iv2-fase-naam {
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: rgba(10,10,31,0.5);
}
.iv2-fase.is-klaar .iv2-fase-naam, .iv2-fase.is-huidig .iv2-fase-naam { color: var(--rd-ink, #0A0A1F); }
.iv2-fase.is-huidig .iv2-fase-naam { font-weight: 700; }
.iv2-fase-sub {
  display: block;
  font-size: 11px; line-height: 1.4;
  color: rgba(10,10,31,0.5);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.iv2-fase-nu {
  font-size: 9.5px; font-weight: 700;
  color: var(--primary, #3D2EFF);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  margin-top: 4px;
}

/* Notitiekaart */
.iv2-notitiekaart { display: flex; flex-direction: column; gap: 6px; }
.iv2-notitie {
  all: unset;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
}
.iv2-notitie:hover { background: rgba(10,10,31,0.04); }
.iv2-notitie-vink {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: #00B14F; color: #fff;
  margin-top: 2px;
}
.iv2-notitie-vink svg { width: 9px; height: 9px; }
.iv2-notitie-tekst { flex: 1; min-width: 0; }
.iv2-notitie-label {
  display: block;
  font-size: 10px; font-weight: 700;
  color: var(--primary, #3D2EFF);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.iv2-notitie-waarde {
  display: block;
  font-size: 12px; line-height: 1.45;
  color: var(--rd-ink, #0A0A1F);
}
.iv2-notitie-leeg {
  font-size: 12px;
  color: rgba(10,10,31,0.45);
  font-style: italic;
}

/* Flits-markering op een bericht na klik in checklist/notitiekaart */
.iv2 .interview-msg.iv2-flits {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3D2EFF) 30%, transparent);
  border-radius: 10px;
  transition: box-shadow 0.3s ease;
}
/* Fase-label: oude schil toonde dit wit in de paarse header — hier als chip.
   Kleur met !important: redesign.css zet 'm op wit met !important (gemeten 10-6). */
.iv2 .interview-phase {
  display: inline-block;
  font-size: 12.5px; font-weight: 700;
  color: var(--primary, #3D2EFF) !important;
  background: color-mix(in srgb, var(--primary, #3D2EFF) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #3D2EFF) 25%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}
/* --- Gesprek-vak: flex-kolom (regels stonden eerst op .interview-panel--live) --- */
.iv2 .interview-chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.iv2 .interview-chat-pane #interview-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.iv2 .interview-input-row { flex-shrink: 0; }
.iv2 .interview-bottom-actions { flex-shrink: 0; flex-wrap: wrap; }

/* Invoerwijze "Typen": microfoonknop en mic-status verbergen (golf C herbouwt
   de composer; tot die tijd is dit de zichtbare betekenis van de schakelaar). */
.interview-panel.iv2[data-modality="typed"] .mic-btn-wrapper,
.interview-panel.iv2[data-modality="typed"] #interview-mic-status { display: none !important; }

/* --- Schema-vak: flex-kolom; toolbar bestaat al globaal (redesign.css) --- */
.iv2 .interview-canvas-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--rd-bg-elev, #fff);
}
.iv2 .interview-canvas-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================================
   GOLF C — gesprek als fase-kaarten + typ-animatie + frissere invoerbalk
   Maten/kleuren 1-op-1 gemeten uit het prototype (docs/prototype-
   interviewmodule-offline.html, 11-6-2026): kaart wit r14 + 1px rand 7% +
   schaduw 3%; nummer-chip 10px/700 paars op 6%-paars r5; naam 12.5px/600;
   doelregel 11px/40% op dezelfde regel; AI-icoon 24px paars r7; antwoordbalk
   #FAF9FC r10 met 1px rand 6%; tekst 13.5px.
   ========================================================================== */
.iv2 .ivg-kaart {
  border: 1px solid rgba(10, 10, 31, 0.07);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 10, 31, 0.03);
  padding: 14px 16px;
  margin: 0 0 12px;
}
.iv2 .ivg-kaart-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.iv2 .ivg-kaart-chip {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  color: var(--primary, #3D2EFF);
  background: rgba(61, 46, 255, 0.063);
  border-radius: 5px;
  padding: 2px 7px;
}
.iv2 .ivg-kaart-naam { font-size: 12.5px; font-weight: 600; color: var(--rd-ink, #0A0A1F); }
.iv2 .ivg-kaart-doel {
  font-size: 11px; font-weight: 400;
  color: rgba(10, 10, 31, 0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv2 .ivg-kaart-berichten {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bericht-rijen: icoontje + inhoud (prototype-stijl, geen bubbels/labels).
   !important nodig: redesign.css zet bubbel-achtergrond/padding/max-width op
   .interview-msg(-user/-ai) met !important (gemeten 11-6, zelfde patroon als
   de fase-chip-fix van 10-6). */
.iv2 .ivg-kaart .interview-msg.ivg-rij {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  color: var(--rd-ink, #0A0A1F) !important;
  animation: none;
}
.iv2 .ivg-icoon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  margin-top: 1px;
}
.iv2 .ivg-icoon-ai { background: var(--primary, #3D2EFF); }
.iv2 .ivg-icoon-user { background: var(--rd-groen, #00C853); }
.iv2 .ivg-ai-inhoud { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 6px; }
.iv2 .ivg-rij .ivg-msg-tekst {
  font-size: 13.5px; line-height: 1.5;
  color: var(--rd-ink, #0A0A1F);
}
.iv2 .ivg-user-balk {
  flex: 1 1 auto; min-width: 0;
  background: #FAF9FC;
  border: 1px solid rgba(10, 10, 31, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
}
/* ── Golf D: antwoord wijzigen ─────────────────────────────────────────── */
.iv2 .ivg-user-balk { display: flex; align-items: flex-start; gap: 10px; }
.iv2 .ivg-user-balk .ivg-msg-tekst { flex: 1 1 auto; min-width: 0; }
.iv2 .ivg-wijzig-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(10, 10, 31, 0.12);
  background: #fff;
  border-radius: 8px;
  font-size: 11px;
  color: rgba(10, 10, 31, 0.55);
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.iv2 .ivg-wijzig-btn:hover { color: var(--primary, #3D2EFF); border-color: var(--primary, #3D2EFF); }
.iv2 .ivg-bijgewerkt,
.iv2 .iv2-bijgewerkt {
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: 1px;
}
.iv2 .ivg-kaart-kop .ivg-bijgewerkt { margin-left: auto; }
.iv2 .ivg-antwoord-op #ivg-wijzig-annuleer {
  border: none; background: none; cursor: pointer;
  font-size: 10.5px;
  color: rgba(10, 10, 31, 0.45);
  padding: 0 0 0 6px;
}
.iv2 .ivg-antwoord-op #ivg-wijzig-annuleer:hover { color: #b91c1c; }
/* Gemeten 11-6: een generieke knop-regel zet display:flex en wint van .hidden */
.iv2 #ivg-wijzig-annuleer.hidden { display: none !important; }
.iv2 .interview-input-row.ivg-wijzig-actief {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

/* ── Golf E: schemapaneel-extra's ───────────────────────────────────────── */
/* Statusregel als groene chip (prototype: "9 stappen · 1 beslismoment") */
.iv2 .ivg-status-chip {
  display: inline-block;
  font-size: 11.5px;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 3px 10px;
}
/* Bouwt-indicator tijdens een AI-build */
.iv2 .ivg-bouwt { display: inline-flex; align-items: center; gap: 7px; color: var(--primary, #3D2EFF); font-weight: 600; }
.iv2 .ivg-bouwt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary, #3D2EFF);
  animation: ivgBouwtPuls 1s ease-in-out infinite;
}
@keyframes ivgBouwtPuls { 50% { opacity: 0.25; transform: scale(0.8); } }
/* JE BENT HIER-chipje boven het actuele blokje (bpmn-js overlay) */
.ivg-hier {
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
  color: #fff;
  background: var(--primary, #3D2EFF);
  border-radius: 999px;
  padding: 2px 8px;
  box-shadow: 0 2px 6px rgba(10, 10, 31, 0.25);
  white-space: nowrap;
}
/* Actieve baan zacht laten oplichten (bpmn-js marker op de lane) */
.djs-element.ivg-lane-actief .djs-visual > rect:first-child {
  fill: rgba(61, 46, 255, 0.045) !important;
  transition: fill 0.4s ease;
}
/* Flits op blokjes bij klik op een AI-bericht */
.djs-element.ivg-shape-flits .djs-visual > :first-child {
  stroke: var(--primary, #3D2EFF) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 6px rgba(61, 46, 255, 0.45));
}

/* ── Golf F: drie kijk-standen + vogelvlucht + stappenstrip ─────────────── */
.iv2 .ivg-kijkstanden {
  display: inline-flex;
  gap: 2px;
  background: rgba(10, 10, 31, 0.04);
  border: 1px solid rgba(10, 10, 31, 0.08);
  border-radius: 999px;
  padding: 2px;
}
.iv2 .ivg-kijkstand {
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(10, 10, 31, 0.55);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.iv2 .ivg-kijkstand.active {
  background: #fff;
  color: var(--rd-ink, #0A0A1F);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(10, 10, 31, 0.12);
}
/* Vogelvlucht-kaartje (gemeten prototype: rechts/onder 14px, wit, r10).
   top/left expliciet op auto: een bestaande stage-regel rekt directe kinderen
   uit naar top/left 0 (gemeten 11-6: paneel werd 747px hoog). */
.iv2 .ivg-vogelvlucht {
  position: absolute !important;
  top: auto !important; left: auto !important;
  right: 14px !important; bottom: 14px !important;
  width: 232px !important;
  height: auto !important;
  background: #fff;
  border: 1px solid rgba(10, 10, 31, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px -10px rgba(10, 10, 31, 0.3);
  z-index: 30;
  overflow: hidden;
}
.iv2 .ivg-vogelvlucht-kop {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.95px;
  color: rgba(10, 10, 31, 0.45);
  padding: 6px 9px 4px;
}
.iv2 .ivg-vogelvlucht-kop span { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(10, 10, 31, 0.35); }
.iv2 .ivg-vogelvlucht-kaart {
  position: relative;
  height: 82px;
  margin: 0 6px 6px;
  border-radius: 6px;
  background: var(--rd-bg, #fafafe);
  cursor: pointer;
  overflow: hidden;
}
.iv2 .ivg-vogelvlucht-kaart svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.iv2 .ivg-vogelvlucht-kader {
  position: absolute;
  border: 1.5px solid var(--primary, #3D2EFF);
  background: rgba(61, 46, 255, 0.06);
  border-radius: 3px;
  pointer-events: none;
}
/* Stappenstrip (stapkompas) */
.iv2 .ivg-stappenstrip {
  flex: 0 0 auto;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(10, 10, 31, 0.06);
  background: var(--rd-bg-elev, #fff);
}
.iv2 .ivg-strip-kop {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.9px;
  color: rgba(10, 10, 31, 0.45);
  margin-bottom: 6px;
}
.iv2 .ivg-strip-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.iv2 .ivg-strip-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(10, 10, 31, 0.1);
  background: #fff;
  border-radius: 999px;
  font-size: 11px;
  color: var(--rd-ink, #0A0A1F);
  padding: 3px 10px;
  cursor: pointer;
}
.iv2 .ivg-strip-chip:hover { border-color: var(--primary, #3D2EFF); }
.iv2 .ivg-strip-chip.is-actief {
  background: var(--primary, #3D2EFF);
  border-color: var(--primary, #3D2EFF);
  color: #fff;
  font-weight: 700;
}
.iv2 .ivg-strip-vink { color: var(--rd-groen, #16a34a); font-weight: 800; }
.iv2 .ivg-strip-speel { font-size: 9px; }
.iv2 .ivg-strip-pijl { color: rgba(10, 10, 31, 0.3); }
.iv2 .ivg-strip-leeg { font-size: 11.5px; color: rgba(10, 10, 31, 0.45); font-style: italic; }
/* Hulpregel in Overzicht-stand (top:auto — zie stage-stretch hierboven) */
.iv2 .ivg-overzicht-hint {
  position: absolute !important;
  top: auto !important;
  left: 0 !important; right: 0 !important; bottom: 6px !important;
  height: auto !important;
  text-align: center;
  font-size: 11px;
  color: rgba(10, 10, 31, 0.4);
  pointer-events: none;
  z-index: 20;
}
/* Gemeten 11-6: de globale .hidden-regel verliest het op deze panelen (zelfde
   cascade-kwestie als de annuleer-knop) — expliciet afdwingen. */
.iv2 .ivg-vogelvlucht.hidden,
.iv2 .ivg-stappenstrip.hidden,
.iv2 .ivg-overzicht-hint.hidden { display: none !important; }

/* ── Golf G: demo-modus ─────────────────────────────────────────────────── */
.ivg-demo-uitleg { font-size: 13px; color: rgba(10, 10, 31, 0.6); margin: 4px 0 12px; }
.ivg-demo-keuze { display: flex; gap: 10px; flex-wrap: wrap; }
.ivg-demo-kaart {
  flex: 1 1 180px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border: 1px solid rgba(10, 10, 31, 0.1);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-size: 12px; color: rgba(10, 10, 31, 0.6);
}
.ivg-demo-kaart strong { font-size: 13.5px; color: var(--rd-ink, #0A0A1F); }
.ivg-demo-kaart .ivg-demo-ico { font-size: 18px; }
.ivg-demo-kaart:hover { border-color: var(--primary, #3D2EFF); box-shadow: 0 2px 8px rgba(61, 46, 255, 0.12); }
#ivg-demo-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px; font-weight: 800;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.iv2 #ivg-demo-einde {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  font-size: 12.5px; font-weight: 600; color: #92400e;
}
.iv2 #ivg-demo-einde button {
  border: 1px solid #fcd34d;
  background: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  padding: 4px 11px;
  cursor: pointer;
  color: var(--rd-ink, #0A0A1F);
}
.iv2 #ivg-demo-einde button:hover { border-color: var(--primary, #3D2EFF); color: var(--primary, #3D2EFF); }

/* Voorlees-knopjes: bestaand gedrag, subtiel naast de AI-tekst */
.iv2 .ivg-voorlees { flex: 0 0 auto; }
.iv2 .ivg-voorlees .interview-play-btn,
.iv2 .ivg-voorlees .interview-pause-btn {
  border: none; background: none; cursor: pointer;
  font-size: 10px; color: rgba(10, 10, 31, 0.35);
  padding: 2px 4px;
}
.iv2 .ivg-voorlees .interview-play-btn:hover,
.iv2 .ivg-voorlees .interview-pause-btn:hover { color: var(--primary, #3D2EFF); }

/* Typ-animatie: knipperende cursor zolang het antwoord "getypt" wordt */
.iv2 .interview-msg-ai.ivg-typt .ivg-msg-tekst::after {
  content: '▍';
  margin-left: 1px;
  color: var(--primary, #3D2EFF);
  animation: ivg-knipper 0.9s steps(2) infinite;
}
@keyframes ivg-knipper { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .iv2 .interview-msg-ai.ivg-typt .ivg-msg-tekst::after { animation: none; }
}

/* Invoerbalk (composer) naar prototype: één grote afgeronde witte balk met
   ronde paarse mic-knop links, "Antwoord op: [fase]" + typveld in het midden */
.iv2 .interview-input-row {
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(10, 10, 31, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(10, 10, 31, 0.05);
}
.iv2 .interview-input-row:focus-within {
  border-color: color-mix(in srgb, var(--primary, #3D2EFF) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3D2EFF) 10%, transparent);
}
/* !important: redesign.css stylet .ai-gen-mic-btn met !important (vierkantje
   grijs); prototype heeft een ronde paarse knop. .recording (rood) blijft
   gewoon werken — die regel staat later in de cascade met !important. */
.iv2 .interview-input-row .ai-gen-mic-btn {
  width: 38px; height: 38px;
  border-radius: 50% !important;
  background: var(--primary, #3D2EFF) !important;
  border: none !important;
  color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.iv2 .interview-input-row .ai-gen-mic-btn svg { stroke: #fff; }
.iv2 .interview-input-row .ai-gen-mic-btn.recording { background: #dc2626 !important; }
.iv2 .ivg-composer-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.iv2 .ivg-antwoord-op {
  font-size: 11px; font-weight: 600;
  color: var(--rd-ink, #0A0A1F);
}
.iv2 .ivg-antwoord-op span { color: var(--primary, #3D2EFF); }
.iv2 .interview-input-row textarea#interview-input {
  border: none !important; /* redesign.css geeft textareas een eigen kader */
  background: transparent !important;
  padding: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  resize: none;
  width: 100%;
}
.iv2 .interview-input-row textarea#interview-input:focus { outline: none; box-shadow: none !important; }
/* Mic-keuze (▾) niet meer óver de ronde knop heen: klein knopje ernaast */
.iv2 .interview-input-row .mic-btn-wrapper { display: flex; align-items: center; gap: 3px; position: relative; }
.iv2 .interview-input-row .mic-device-toggle {
  position: static !important;
  width: 16px; height: 16px;
  border: none !important;
  background: transparent !important;
  color: rgba(10, 10, 31, 0.45) !important;
  font-size: 10px;
  padding: 0 !important;
  cursor: pointer;
}
.iv2 .interview-send-btn { border-radius: 12px; }

/* --- Smal scherm: alles onder elkaar --- */
@media (max-width: 900px) {
  .interview-panel.iv2[data-layout="stacked"] .iv2-body,
  .interview-panel.iv2[data-layout="split"] .iv2-body,
  .interview-panel.iv2[data-layout="schema"] .iv2-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "rail" "convo" "schema";
  }
  .interview-panel.iv2 .iv2-rail { max-height: 150px; }
}