/* ============================================================================
 * Standalone Interviewer — shared styles
 *
 * Covers: QAComponent, InterviewDisplayUI, ReviewComponent, and the
 * standalone app's template admin + interviewer shell.
 *
 * All colours and surfaces come from CSS variables so themes work everywhere.
 * ============================================================================ */

/* ---------- Shared primitives ---------- */
.qa-btn,
.tpl-btn,
.intv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e0e0e0);
  background: var(--containerbackground, #fff);
  color: var(--text-color, #000);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.qa-btn:hover,
.tpl-btn:hover,
.intv-btn:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 5%, transparent));
}
.qa-btn:active,
.tpl-btn:active,
.intv-btn:active { transform: translateY(1px); }
.qa-btn:disabled,
.tpl-btn:disabled,
.intv-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.qa-btn-primary,
.tpl-btn-primary,
.intv-btn-primary {
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  border-color: var(--accent-color, #667eea);
}
.qa-btn-primary:hover,
.tpl-btn-primary:hover,
.intv-btn-primary:hover {
  background: var(--accent-color-dark, var(--accent-color, #4c63d2));
}

.qa-btn-danger,
.tpl-btn-danger,
.intv-btn-danger {
  border-color: #d93636;
  color: #d93636;
}
.qa-btn-danger:hover,
.tpl-btn-danger:hover,
.intv-btn-danger:hover {
  background: rgba(217, 54, 54, 0.08);
}

/* ============================================================================
 * QAComponent
 * ============================================================================ */
.qa-component { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.qa-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 4%, transparent));
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
}
.qa-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.qa-progress-label { font-weight: 600; color: var(--text-color, #000); }
.qa-progress-count { color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent)); }
.qa-progress-bar {
  height: 6px;
  background: color-mix(in srgb, var(--text-color) 10%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.qa-progress-fill {
  height: 100%;
  background: var(--accent-color, #667eea);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.qa-list { display: flex; flex-direction: column; gap: 12px; }

.qa-card {
  background: var(--containerbackground, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.qa-card-answered { border-color: var(--accent-color, #667eea); }
.qa-card-focus { min-height: 260px; }

.qa-card-header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px;
}
.qa-card-number {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  border-radius: 50%;
  font-size: 13px; font-weight: 600;
}
.qa-card-question {
  flex: 1 1 auto;
  font-size: 15px; font-weight: 500;
  color: var(--text-color, #000);
  line-height: 1.4;
}
.qa-card-status {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.qa-card-answered .qa-card-status {
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
}
.qa-card-category {
  font-size: 11px;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 50%, transparent));
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qa-card-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}
.qa-card-textarea:focus {
  outline: 2px solid var(--accent-color, #667eea);
  outline-offset: -1px;
  border-color: var(--accent-color, #667eea);
}
.qa-card-textarea::placeholder {
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 40%, transparent));
}

/* ----------------------------------------------------------------------------
 * Typed answer controls (Interviewer v2): yes/no, scale, select, number
 * ------------------------------------------------------------------------- */
.qa-card-number {
  width: 160px;
  max-width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  box-sizing: border-box;
}
.qa-card-number:focus {
  outline: 2px solid var(--accent-color, #667eea);
  outline-offset: -1px;
  border-color: var(--accent-color, #667eea);
}

.qa-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.qa-scale-group { gap: 6px; }

.qa-choice {
  appearance: none;
  cursor: pointer;
  padding: 8px 14px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--text-color, #000);
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 999px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.qa-choice:hover:not(:disabled) {
  border-color: var(--accent-color, #667eea);
}
.qa-choice.selected {
  background: var(--accent-color, #667eea);
  border-color: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  font-weight: 600;
}
.qa-choice:disabled { opacity: .55; cursor: not-allowed; }

.qa-scale-pip {
  min-width: 40px;
  text-align: center;
  border-radius: 8px;
}
.qa-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent));
}

/* ----------------------------------------------------------------------------
 * Per-question insight ("Add a note") affordance
 * ------------------------------------------------------------------------- */
.qa-insight-wrap { margin-top: 10px; }
.qa-insight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.qa-insight-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-color, #000);
  background: color-mix(in srgb, var(--accent-color, #667eea) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color, #667eea) 30%, transparent);
  border-radius: 8px;
}
.qa-insight-toggle {
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-color, #667eea);
}
.qa-insight-toggle:hover { text-decoration: underline; }
.qa-insight-editor { margin-top: 8px; }
.qa-insight-input {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
}
.qa-insight-input:focus {
  outline: 2px solid var(--accent-color, #667eea);
  outline-offset: -1px;
}
.qa-insight-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.qa-focus-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px;
}
.qa-focus-position {
  font-size: 13px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent));
}

.qa-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 60%, transparent));
}

/* ============================================================================
 * InterviewDisplayUI
 * ============================================================================ */
.idui-root {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--containerbackground, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
}
.idui-title {
  font-size: 16px; font-weight: 600;
  color: var(--text-color, #000);
}
.idui-top-row {
  display: flex; align-items: center; gap: 16px;
}
.idui-progress {
  flex: 0 0 auto;
  position: relative;
  width: 72px; height: 72px;
}
.idui-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.idui-ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--text-color) 10%, transparent);
  stroke-width: 8;
}
.idui-ring-fill {
  fill: none;
  stroke: var(--accent-color, #667eea);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}
.idui-progress-text {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px;
}
.idui-progress-num { font-weight: 700; color: var(--text-color, #000); }
.idui-progress-denom { color: var(--text-secondary, color-mix(in srgb, var(--text-color) 60%, transparent)); }

.idui-current { flex: 1 1 auto; min-width: 0; }
.idui-current-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 55%, transparent));
  margin-bottom: 4px;
}
.idui-current-text {
  font-size: 15px;
  color: var(--text-color, #000);
  line-height: 1.4;
}

.idui-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.idui-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  transition: opacity 0.3s, transform 0.3s;
}
.idui-badge-enter {
  opacity: 0;
  transform: scale(0.7);
}

.idui-transcript-wrap {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border-color, #e0e0e0);
  padding-top: 10px;
}
.idui-transcript-header {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 55%, transparent));
}
.idui-transcript {
  max-height: 160px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 4%, transparent));
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color, #000);
}
.idui-transcript-line { margin-bottom: 4px; }
.idui-transcript-line:last-child { margin-bottom: 0; }
.idui-transcript-user { color: var(--text-color, #000); }
.idui-transcript-ai {
  color: var(--accent-color, #667eea);
  font-style: italic;
}

/* ============================================================================
 * ReviewComponent
 * ============================================================================ */
.review-component { display: flex; flex-direction: column; gap: 14px; }

.review-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.review-header-title {
  font-size: 16px; font-weight: 600;
  color: var(--text-color, #000);
}
.review-header-count {
  font-size: 13px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent));
}

.review-list { display: flex; flex-direction: column; gap: 12px; }

.review-item {
  background: var(--containerbackground, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  padding: 14px 16px;
}
.review-item-unanswered { opacity: 0.65; }

.review-item-header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px;
}
.review-item-num {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
}
.review-item-q {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--text-color, #000);
  line-height: 1.4;
}
.review-item-cat {
  font-size: 11px;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 50%, transparent));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.review-item-text {
  font-size: 14px;
  color: var(--text-color, #000);
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 8px 0;
}
.review-item-unanswered .review-item-text {
  font-style: italic;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 50%, transparent));
}
.review-item-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}
.review-item-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 55%, transparent));
}
.review-item-additional {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border-left: 3px solid var(--accent-color);
  border-radius: 6px;
}
.review-item-additional-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 4px;
}
.review-item-additional-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color);
  white-space: pre-wrap;
}

/* Insights (Interviewer v2) — per-question and interview-level */
.review-insights { margin-top: 10px; }
.review-insights-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 65%, transparent));
  margin-bottom: 6px;
}
.review-insight {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.review-insight-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent-color, #667eea);
}
.review-insight-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.review-insight-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color);
}
.review-insight-cat {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 12%, transparent);
}
.review-general-insights {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #e0e0e0);
}
.review-general-insights-heading {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.review-session-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.review-session-summary-heading {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-color);
}

.review-session-card-grid,
.review-session-qa-list,
.review-session-flow-list,
.review-session-transcript-list {
  display: grid;
  gap: 10px;
}

.review-session-flow-item.is-shown .review-session-card {
  margin: 0;
}

.review-session-card,
.review-session-qa,
.review-session-transcript-turn {
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 4%, transparent));
  padding: 12px 14px;
}

.review-session-transcript-turn {
  padding: 11px 14px 12px 15px;
  border-left-width: 4px;
}

.review-session-transcript-turn.is-assistant {
  border-left-color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 7%, var(--bg-secondary, #fff));
}

.review-session-transcript-turn.is-user {
  border-left-color: #0f766e;
  background: color-mix(in srgb, #0f766e 7%, var(--bg-secondary, #fff));
}

.review-session-transcript-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.review-session-transcript-role-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--accent-color, #667eea);
}

.review-session-transcript-turn.is-user .review-session-transcript-role-mark {
  background: #0f766e;
}

.review-session-card-title,
.review-session-qa-question,
.review-session-transcript-speaker {
  font-weight: 700;
  color: var(--text-color);
}

.review-session-card-title,
.review-session-qa-question {
  margin-bottom: 7px;
}

.review-session-transcript-speaker {
  margin-bottom: 0;
  font-size: 12px;
}

.review-session-card-media {
  margin: 8px 0 10px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.review-session-card-media img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}

.review-session-card-media-missing {
  padding: 12px;
  color: var(--text-secondary, var(--placeholder-color));
  font-size: 13px;
}

.review-session-card-list {
  margin: 0;
  padding-left: 18px;
}

.review-session-card-list li {
  margin-bottom: 7px;
  line-height: 1.45;
}

.review-session-card-body,
.review-session-qa-answer,
.review-session-transcript-text,
.review-session-empty {
  color: var(--text-secondary, var(--placeholder-color));
  line-height: 1.5;
  font-size: 13.5px;
}

.review-session-transcript-text {
  white-space: pre-wrap;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-color);
}

/* ============================================================================
 * Standalone app shell (interviewer-app + template-admin)
 * ============================================================================ */
.intv-app {
  min-height: 100vh;
  background: var(--bg-color, snow);
  color: var(--text-color, #000);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.intv-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  background: var(--containerbackground, #fff);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.intv-header-title { font-size: 18px; font-weight: 600; }
.intv-header-actions { display: flex; gap: 8px; align-items: center; }
.intv-user-info {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; margin-right: 12px; line-height: 1.2;
}
.intv-user-name {
  font-size: 0.9rem; font-weight: 600; color: var(--text-color);
}
.intv-user-org {
  font-size: 0.75rem; color: var(--text-secondary);
}

.intv-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px;
}

.intv-card {
  background: var(--containerbackground, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.intv-card-title {
  font-size: 16px; font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-color, #000);
  /* Long titles wrap onto multiple lines instead of overflowing the card,
     and very long unbroken strings break rather than spill horizontally. */
  overflow-wrap: anywhere;
}
.intv-card-subtle {
  font-size: 13px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent));
  margin-bottom: 12px;
}

.intv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.intv-field label {
  font-size: 13px; font-weight: 500;
  color: var(--text-color, #000);
}
.intv-field input[type="text"],
.intv-field input[type="email"],
.intv-field textarea,
.intv-field select {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #000);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  box-sizing: border-box;
}
.intv-field input:focus,
.intv-field textarea:focus,
.intv-field select:focus {
  outline: 2px solid var(--accent-color, #667eea);
  outline-offset: -1px;
  border-color: var(--accent-color, #667eea);
}
.intv-field-hint {
  font-size: 12px;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 50%, transparent));
}

.intv-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.intv-spacer { flex: 1 1 auto; }

.intv-question-editor {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 3%, transparent));
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  margin-bottom: 8px;
}

.intv-template-list { display: flex; flex-direction: column; gap: 10px; }
.intv-template-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--containerbackground, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
}
.intv-template-item-title {
  flex: 1 1 auto;
  font-weight: 500;
}
.intv-template-item-meta {
  font-size: 12px;
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 50%, transparent));
}

.intv-badge-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intv-badge-pill.cancelled {
  background: #6b7280;
  color: #fff;
}

.intv-status-banner {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
.intv-status-info {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--text-color, #000);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.intv-status-error {
  background: rgba(217, 54, 54, 0.1);
  color: #d93636;
  border: 1px solid rgba(217, 54, 54, 0.4);
}
.intv-status-success {
  background: rgba(46, 160, 67, 0.1);
  color: #2ea043;
  border: 1px solid rgba(46, 160, 67, 0.4);
}

/* Mode toggle (all_questions ↔ focus_mode) */
.intv-mode-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 5%, transparent));
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 999px;
}
.intv-mode-toggle button {
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-color, #000);
  font-size: 13px;
  cursor: pointer;
  border-radius: 999px;
}
.intv-mode-toggle button.active {
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
}

/* Hide the extracted listen component's embedded headers by default */
.intv-listen-wrap {
  margin-top: 16px;
  padding: 14px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 3%, transparent));
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
}


/* ---------- Run view: start screen + toolbar ---------- */
.intv-start-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--bg-secondary, var(--containerbackground));
}
.intv-start-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--text-color);
}
.intv-mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.intv-mode-card {
  text-align: left;
  padding: 14px;
  border: 2px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--containerbackground);
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.intv-mode-card:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 5%, transparent));
}
.intv-mode-card.selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.intv-mode-card-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-color);
}
.intv-mode-card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.intv-run-toolbar { flex-wrap: wrap; gap: 8px; }
.intv-run-audiobar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.intv-run-audiobar:empty { margin-bottom: 0; }

.intv-btn-sm {
  padding: 4px 10px;
  font-size: 0.8rem;
}
.intv-qa-audio-ctrls {
  display: flex;
  gap: 6px;
  margin: 6px 0 8px 0;
  flex-wrap: wrap;
}


/* ---------- Run view: side-by-side layout (listen/voice modes) ---------- */
.intv-run-body {
  display: block;
}
.intv-run-body.with-listen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .intv-run-body.with-listen {
    grid-template-columns: 1fr;
  }
}

/* Collapsible questions panel — when audio modes are active the questions
 * list starts collapsed and can be revealed via the toggle button. */
.intv-run-body.intv-collapsed {
  display: none;
}
.intv-questions-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}
.intv-toggle-caret {
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
  font-size: 11px;
  color: var(--text-secondary, var(--placeholder-color));
}
.intv-toggle-hint {
  font-size: 12.5px;
  color: var(--text-secondary, var(--placeholder-color));
}

/* Centred call stage above the run-display-ui, replacing the old side
 * aside layout. Keeps the AI voice bar visually front-and-centre. */
.intv-call-stage {
  margin: 6px auto 14px;
  max-width: 760px;
  width: 100%;
  /* The voice-call bar inside provides its own glass background, so we
   * don't add another container here — just centre + width-cap. */
}
.intv-call-stage .intv-listen-header {
  justify-content: center;
}

.intv-live-session-shell {
  display: grid;
  gap: 24px;
  align-items: start;
}

.intv-live-session-shell-presentation {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
}

.intv-live-main,
.intv-live-side {
  box-sizing: border-box;
  min-width: 0;
}

.intv-live-session-shell-presentation .intv-call-stage {
  box-sizing: border-box;
  max-width: none;
  margin: 6px 0 14px;
}

.intv-live-side {
  position: sticky;
  top: 88px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 12px;
  background: var(--containerbackground, var(--bg-secondary, #fff));
  padding: 14px;
  width: 100%;
  max-height: calc(100vh - 110px);
  overflow: hidden;
}

.intv-live-side .idui-root {
  gap: 10px;
}

.intv-live-side .idui-transcript-wrap {
  border-top: 0;
  padding-top: 0;
}

.intv-live-side .idui-transcript {
  max-height: calc(100vh - 190px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
}

.intv-live-side .idui-transcript-line {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--intv-accent) 18%, var(--intv-border, #e0e0e0));
  border-radius: 10px;
  background: color-mix(in srgb, var(--intv-surface, #fff) 86%, transparent);
  color: var(--intv-text, var(--text-color, #000));
}

.intv-live-side .idui-transcript-current {
  border-color: color-mix(in srgb, var(--intv-accent) 34%, var(--intv-border, #e0e0e0));
  background: color-mix(in srgb, var(--intv-accent) 7%, var(--intv-surface, #fff));
}

.intv-live-side .idui-transcript-who {
  display: block;
  margin-bottom: 4px;
  color: var(--intv-accent, var(--accent-color, #667eea));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intv-live-side .idui-transcript-user .idui-transcript-who {
  color: #3b82f6;
}

.intv-live-side .idui-transcript-text {
  display: block;
  color: inherit;
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.intv-live-side .idui-transcript-ai {
  color: var(--intv-text, var(--text-color, #000));
  font-style: normal;
}

@media (max-width: 1120px) {
  .intv-live-session-shell-presentation {
    grid-template-columns: 1fr;
  }
  .intv-live-side {
    position: static;
    max-height: none;
  }
  .intv-live-side .idui-transcript {
    max-height: 260px;
    min-height: 180px;
  }
}

/* Small button variant used by the Load default / Reset prompt buttons
 * and the Show/Hide questions toggle. */
.intv-btn-small {
  padding: 4px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 6px;
}
.intv-run-main {
  min-width: 0;
}
.intv-run-side {
  position: sticky;
  top: 12px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 3%, transparent));
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 14px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Define the CSS vars the GrowthCanvas listen component expects so
     its internal styles (toggle slider, status dots, etc.) render
     correctly inside the interviewer theme. */
  --accent: var(--accent-color);
  --muted: var(--placeholder-color, var(--text-secondary));
  --bad: #e74c3c;
  --warn: #f39c12;
}
.intv-listen-header {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}


/* ---------- Respondent form (run start screen) ---------- */
.intv-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.intv-form-field { display: flex; flex-direction: column; gap: 4px; }
.intv-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.intv-form-check {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-color);
}
.intv-input {
  padding: 9px 12px;
  font: inherit; font-size: 14px;
  background: var(--bg-color, #fff);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-sizing: border-box;
}
.intv-input:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: -1px;
  border-color: var(--accent-color);
}
.intv-input:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ---------- Mode card "Preview" badge ---------- */
.intv-mode-card { position: relative; }
.intv-mode-card-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ---------- Q&A card: confidence + additional insights ---------- */
.qa-card-confidence-high   { border-left: 4px solid #22c55e !important; }
.qa-card-confidence-medium { border-left: 4px solid #eab308 !important; }
.qa-card-confidence-low    { border-left: 4px solid #ef4444 !important; }

.qa-additional-context {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border-left: 3px solid var(--accent-color);
  border-radius: 0 6px 6px 0;
  color: var(--text-color);
  line-height: 1.45;
}
.qa-ctx-label {
  font-weight: 600;
  color: var(--accent-color);
  margin-right: 6px;
  display: inline-block;
}
.qa-ctx-text { color: var(--text-secondary); }

/* ---------- Prominent start-listening button ---------- */
.intv-listen-header .lc-listen-btn {
  flex: 1 1 auto;
  min-height: 48px;
  font-size: 16px;
  padding: 12px 20px;
  font-weight: 700;
  justify-content: center;
  background: var(--accent-color);
  color: var(--text-color-inv, #fff);
  border-radius: 10px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.intv-listen-header .lc-listen-btn:not(.listening):not(.paused) {
  animation: intv-listen-pulse 2s ease-in-out infinite;
}
.intv-listen-header .lc-clear-all-btn {
  padding: 8px 12px;
  font-size: 12px;
}
@keyframes intv-listen-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 55%, transparent),
                0 2px 8px color-mix(in srgb, var(--accent-color) 25%, transparent);
  }
  50% {
    box-shadow: 0 0 0 14px transparent,
                0 2px 8px color-mix(in srgb, var(--accent-color) 25%, transparent);
  }
}

/* ---------- Auto-apply toggle visibility fix ---------- */
.intv-run-side .lc-toggle-slider {
  background: color-mix(in srgb, var(--text-color) 25%, transparent) !important;
}
.intv-run-side .lc-toggle-slider::after {
  background: var(--bg-color, #fff) !important;
}
.intv-run-side .lc-auto-apply-checkbox:checked + .lc-toggle-slider {
  background: var(--accent-color) !important;
}
.intv-run-side .lc-auto-apply-checkbox:checked + .lc-toggle-slider::after {
  background: var(--text-color-inv, #fff) !important;
}
.intv-run-side .lc-auto-apply-label {
  color: var(--text-color) !important;
  font-size: 12px;
}

/* ---------- Past-interviews (sessions) table ---------- */
.intv-sessions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.intv-sessions-table th,
.intv-sessions-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}
.intv-sessions-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 3%, transparent));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.intv-sessions-table tr:hover td {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 4%, transparent));
}
.intv-muted {
  color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 50%, transparent));
  font-size: 12px;
}
.intv-empty-state {
  padding: 28px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
}


/* ---------- Voice picker (template editor) ---------- */
.intv-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.intv-voice-option {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 2px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--containerbackground);
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.intv-voice-option.selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.intv-voice-option:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 4%, transparent));
}
.intv-voice-pick {
  flex: 1 1 auto;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.intv-voice-name { font-weight: 600; font-size: 13px; }
.intv-voice-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.intv-voice-play-btn {
  flex: 0 0 auto;
  width: 36px;
  border: none;
  border-left: 1px solid var(--border-color);
  background: transparent;
  color: var(--accent-color);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.intv-voice-play-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
}
.intv-voice-play-btn.playing {
  background: var(--accent-color);
  color: var(--text-color-inv, #fff);
}
.intv-voice-play-btn:disabled { opacity: 0.5; cursor: wait; }


/* ---------- Voice picker (template editor) ---------- */
.intv-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.intv-voice-option {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 2px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--containerbackground);
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.intv-voice-option.selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.intv-voice-option:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 4%, transparent));
}
.intv-voice-pick {
  flex: 1 1 auto;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.intv-voice-name { font-weight: 600; font-size: 13px; }
.intv-voice-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.intv-voice-play-btn {
  flex: 0 0 auto;
  width: 36px;
  border: none;
  border-left: 1px solid var(--border-color);
  background: transparent;
  color: var(--accent-color);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.intv-voice-play-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
}
.intv-voice-play-btn.playing {
  background: var(--accent-color);
  color: var(--text-color-inv, #fff);
}
.intv-voice-play-btn:disabled { opacity: 0.5; cursor: wait; }


/* ===========================================================================
 * Conversation-mode voice call bar (InterviewerVoiceCall)
 *
 * Visual design mirrors the main VoiceCall bar: glassy background, gradient
 * pulsing avatar, state-driven accent, waveform, SVG mic/hangup icons.
 * =========================================================================== */
.ivc-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--containerbackground) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
  border-radius: 16px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s cubic-bezier(.23,1,.32,1), transform .3s cubic-bezier(.23,1,.32,1);
}
.ivc-bar.ivc-visible { opacity: 1; transform: translateY(0); }

/* state-driven accent colour on the bar (drives avatar gradient + dot) */
.ivc-bar {
  --ivc-accent-from: var(--accent-color);
  --ivc-accent-to:   color-mix(in srgb, var(--accent-color) 70%, #000 30%);
  --ivc-state:       var(--accent-color);
}
.ivc-bar[data-state="connecting"] { --ivc-state: #f59e0b; }
.ivc-bar[data-state="listening"]  { --ivc-state: #10b981; }
.ivc-bar[data-state="speaking"]   { --ivc-state: var(--accent-color); }
.ivc-bar[data-state="thinking"]   { --ivc-state: #3b82f6; }
.ivc-bar[data-state="paused"]     { --ivc-state: #f59e0b; }
.ivc-bar[data-state="completing"] { --ivc-state: #10b981; }
.ivc-bar[data-state="ended"]      { --ivc-state: #94a3b8; }

.ivc-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.ivc-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: .5px;
  color: var(--text-color-inv, #fff);
  background: linear-gradient(135deg, var(--ivc-accent-from) 0%, var(--ivc-accent-to) 100%);
  border: 2px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ivc-accent-from) 38%, transparent);
  flex-shrink: 0;
  animation: ivc-pulse 2.1s ease-in-out infinite;
}
@keyframes ivc-pulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--ivc-accent-from) 32%, transparent); }
  50%      { box-shadow: 0 6px 22px color-mix(in srgb, var(--ivc-accent-from) 58%, transparent); }
}
.ivc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ivc-name {
  font-size: 15px; font-weight: 700; color: var(--text-color);
  /* Use the available (centered) stage width, wrap long titles onto a second
     line, and only ellipsis if it still doesn't fit. */
  max-width: min(440px, 100%);
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.ivc-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary, var(--placeholder-color));
  white-space: nowrap;
}
.ivc-state-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ivc-state);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ivc-state) 60%, transparent);
  animation: ivc-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes ivc-dot-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--ivc-state) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ivc-state) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--ivc-state) 0%,  transparent); }
}
.ivc-bar[data-state="ended"] .ivc-state-dot,
.ivc-bar[data-state="ended"] .ivc-avatar {
  animation: none;
}

.ivc-center {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; justify-content: center; min-width: 0;
}
.ivc-wave {
  display: block;
  height: 36px; width: 120px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
}
.ivc-bar[data-state="ended"] .ivc-wave { opacity: .35; }

.ivc-timer {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.ivc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ivc-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--containerbackground);
  color: var(--text-color);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s cubic-bezier(.23,1,.32,1), background .18s, border-color .18s, box-shadow .18s;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  padding: 0;
  position: relative;
  z-index: 20;
  pointer-events: auto;
  touch-action: manipulation;
}
.ivc-btn:hover { transform: translateY(-1px); }
.ivc-btn:active { transform: scale(.95); }
.ivc-mute:hover {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.ivc-pause:hover,
.ivc-pause.ivc-paused {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  border-color: #f59e0b;
  color: #f59e0b;
}
.ivc-mute.ivc-muted {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  border-color: #ef4444;
  color: #ef4444;
}
.ivc-end {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .32);
}
.ivc-end:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, .42);
}

.ivc-caption {
  margin-top: 10px;
  min-height: 22px;
}
.ivc-caption:empty { display: none; }
.ivc-caption-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  font-size: 13px;
  color: var(--text-color);
  animation: ivc-cap-in .18s ease-out;
}
@keyframes ivc-cap-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.ivc-caption-who {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ivc-state, var(--accent-color));
  flex-shrink: 0;
}
.ivc-cap-user .ivc-caption-who { color: #3b82f6; }
.ivc-caption-text {
  flex: 1 1 auto;
  color: var(--text-color);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .ivc-bar { gap: 10px; padding: 10px 12px; }
  .ivc-wave { display: none; }
  .ivc-name { max-width: min(260px, 100%); font-size: 14px; }
  .ivc-btn { width: 36px; height: 36px; }
}
.ivc-btn:active { transform: scale(.95); }
.ivc-mute:hover {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.ivc-mute.ivc-muted {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  border-color: #ef4444;
  color: #ef4444;
}
.ivc-end {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .32);
}
.ivc-end:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, .42);
}

.ivc-caption {
  margin-top: 10px;
  min-height: 22px;
}
.ivc-caption:empty { display: none; }
.ivc-caption-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  font-size: 13px;
  color: var(--text-color);
  animation: ivc-cap-in .18s ease-out;
}
@keyframes ivc-cap-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.ivc-caption-who {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ivc-state, var(--accent-color));
  flex-shrink: 0;
}
.ivc-cap-user .ivc-caption-who { color: #3b82f6; }
.ivc-caption-text {
  flex: 1 1 auto;
  color: var(--text-color);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .ivc-bar { gap: 10px; padding: 10px 12px; }
  .ivc-wave { display: none; }
  .ivc-name { max-width: min(260px, 100%); font-size: 14px; }
  .ivc-btn { width: 36px; height: 36px; }
}
/* ============================================================================
 * v2 ÔÇö Top nav, landing page, analysis dashboard, publish modal
 * ============================================================================ */

/* ---- Top navigation ---- */
.intv-app { display: flex; flex-direction: column; }
.intv-topnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--containerbackground, #fff);
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  backdrop-filter: saturate(140%) blur(8px);
}
.intv-topnav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.intv-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text-color, #000);
}
.intv-brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-color, #667eea), color-mix(in srgb, var(--accent-color, #667eea) 60%, #1a1a40));
  color: #fff;
}
.intv-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.intv-brand-title { font-weight: 700; font-size: 16px; }
.intv-brand-tag {
  font-size: 11px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 65%, transparent));
}

.intv-nav { display: flex; gap: 4px; justify-content: center; }
.intv-nav-link {
  padding: 8px 14px; border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 75%, transparent));
  font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.intv-nav-link:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 6%, transparent));
  color: var(--text-color);
}
.intv-nav-link.active {
  background: color-mix(in srgb, var(--accent-color, #667eea) 14%, transparent);
  color: var(--accent-color, #667eea);
}

.intv-nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

.intv-theme-toggle {
  display: inline-flex;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 6%, transparent));
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.intv-theme-toggle button {
  border: 0; background: transparent;
  width: 30px; height: 30px; border-radius: 999px;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background .15s, transform .1s;
}
.intv-theme-toggle button:hover { transform: translateY(-1px); }
.intv-theme-toggle button.active {
  background: var(--containerbackground);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.intv-user-menu { position: relative; }
.intv-user-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 5%, transparent));
  border: 1px solid var(--border-color, transparent);
  color: var(--text-color);
  cursor: pointer;
}
.intv-user-trigger:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 8%, transparent));
}
.intv-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-color, #667eea); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.intv-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; max-width: 160px; }
.intv-user-meta .intv-user-name { font-size: 13px; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.intv-user-meta .intv-user-org { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.intv-user-caret { font-size: 11px; color: var(--text-secondary); margin-left: 2px; }
.intv-user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--containerbackground, #fff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 60;
}
.intv-user-dropdown-item {
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 8px 10px; border-radius: 6px;
  color: var(--text-color); font-size: 13px;
  cursor: pointer;
}
.intv-user-dropdown-item:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 7%, transparent));
}

.intv-nav-burger {
  display: none;
  background: transparent; border: 0;
  font-size: 22px; color: var(--text-color);
  cursor: pointer; padding: 4px 8px;
}

/* Show/hide based on auth state ÔÇö JS toggles body classes */
body:not(.is-signed-in) .auth-only { display: none !important; }
body.is-signed-in .guest-only { display: none !important; }

/* Public-token mode ÔÇö hide everything except the run view */
body.is-public-token .intv-nav,
body.is-public-token .intv-nav-actions { display: none !important; }
body.is-public-token .intv-brand { pointer-events: none; }

/* ---- Footer ---- */
.intv-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color, #e0e0e0);
  background: var(--containerbackground, #fff);
}
.intv-footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 20px 6px;
  font-size: 12px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.intv-footer-sep { opacity: .5; }
.intv-footer-legal {
  max-width: 1280px; margin: 0 auto;
  padding: 0 20px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px;
}
.intv-footer-legal a {
  color: var(--accent-color, #10b981);
  text-decoration: none;
}
.intv-footer-legal a:hover { text-decoration: underline; }
.intv-footer-copyright {
  max-width: 1280px; margin: 6px auto 0;
  padding: 0 20px 14px;
  font-size: 11px; color: var(--text-secondary);
  opacity: .7;
}

/* ---- Interview complete modal overlay ---- */
.intv-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: intv-fade-in 0.2s ease;
}
@keyframes intv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.intv-complete-card {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  animation: intv-slide-up 0.25s ease;
}
@keyframes intv-slide-up {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.intv-complete-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, #2ecc71 18%, transparent);
  color: #1f8a4f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.intv-complete-icon svg { width: 36px; height: 36px; stroke-width: 2.5; }
.intv-complete-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-color);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.intv-complete-body {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 28px;
}
.intv-complete-cta {
  width: 100%;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
}

/* ---- Landing page ---- */
.intv-landing { display: flex; flex-direction: column; gap: 28px; }
.intv-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color, #667eea) 18%, transparent),
    color-mix(in srgb, var(--accent-color, #667eea) 4%, transparent));
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.intv-hero::after {
  content: ''; position: absolute;
  right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color, #667eea) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.intv-hero-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.intv-hero-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.intv-hero-subtitle {
  font-size: 16px; line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 22px;
  max-width: 520px;
}
.intv-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.intv-hero-art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 240px;
}
.intv-hero-art-card {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  width: 100%; max-width: 320px;
  position: relative;
}
.intv-hero-art-card + .intv-hero-art-card {
  position: absolute;
  transform: rotate(-4deg) translate(-30px, 40px);
  opacity: .85;
  z-index: -1;
}
.intv-hero-art-q {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 6px;
}
.intv-hero-art-a {
  font-size: 14px; color: var(--text-color);
  border-left: 3px solid var(--accent-color);
  padding-left: 10px;
}
.intv-hero-art-pulse {
  position: absolute; top: -10px; right: -10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #ff5e5e;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px;
  box-shadow: 0 0 0 0 rgba(255,94,94,.7);
  animation: intv-pulse 2s infinite;
}
@keyframes intv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,94,94,.55); }
  70% { box-shadow: 0 0 0 14px rgba(255,94,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,94,94,0); }
}

.intv-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.intv-feature {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.intv-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
}
.intv-feature-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px; font-size: 18px;
}
.intv-feature-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--text-color); }
.intv-feature-desc { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }

.intv-steps {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 28px;
}
.intv-steps-title {
  font-size: 18px; font-weight: 700; margin: 0 0 18px;
  color: var(--text-color);
}
.intv-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.intv-step-num {
  font-size: 32px; font-weight: 800; color: var(--accent-color);
  line-height: 1; opacity: .6;
}
.intv-step h3 { font-size: 14px; font-weight: 700; margin: 8px 0 4px; color: var(--text-color); }
.intv-step p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* ---- Analysis dashboard ---- */
.intv-analysis-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
}
.intv-analysis-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--text-color); }
.intv-analysis-sub { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

.intv-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.intv-stat {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
}
.intv-stat-label {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.intv-stat-value {
  font-size: 28px; font-weight: 800;
  color: var(--text-color);
  margin-top: 6px; line-height: 1.1;
}
.intv-stat-foot {
  font-size: 12px; color: var(--text-secondary); margin-top: 4px;
}

.intv-analysis-table-wrap {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.intv-analysis-table { width: 100%; border-collapse: collapse; }
.intv-analysis-table th,
.intv-analysis-table td {
  padding: 12px 16px; text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color);
}
.intv-analysis-table th {
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 4%, transparent));
  color: var(--text-secondary);
  font-weight: 600;
}
.intv-analysis-table tr:last-child td { border-bottom: 0; }
.intv-analysis-table tr:hover td {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 4%, transparent));
}
.intv-meter {
  display: inline-block;
  width: 110px; height: 6px; border-radius: 999px;
  background: var(--border-color);
  position: relative; overflow: hidden;
  vertical-align: middle; margin-right: 8px;
}
.intv-meter > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent-color);
  border-radius: 999px;
}

/* ---- Status badges (Published / Draft) on template list ---- */
.intv-status-pill {
  display: inline-block;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}
.intv-status-pill.published {
  background: color-mix(in srgb, #2ecc71 20%, transparent);
  color: #1f8a4f;
}
.intv-status-pill.draft {
  background: color-mix(in srgb, var(--text-color) 10%, transparent);
  color: var(--text-secondary);
}

/* ---- Publish / share modal ---- */
.intv-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.intv-modal {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  width: 100%; max-width: 540px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  color: var(--text-color);
}
.intv-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between;
}
.intv-modal-title { font-size: 16px; font-weight: 700; margin: 0; }
.intv-modal-close {
  border: 0; background: transparent;
  font-size: 22px; cursor: pointer;
  color: var(--text-secondary);
  line-height: 1; padding: 0 4px;
}
.intv-modal-body { padding: 20px 22px; font-size: 14px; line-height: 1.55; color: var(--text-color); }
.intv-modal-body p { margin: 0 0 12px; color: var(--text-secondary); }
.intv-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-color);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 3%, transparent));
}

/* Requirements brief modal (Interviewer v2) */
.intv-modal.intv-brief-modal { max-width: 820px; }
.intv-brief-modal .intv-modal-body {
  max-height: min(72vh, 720px);
  overflow-y: auto;
}
.intv-brief-count {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}
.intv-brief-content { color: var(--text-color); }
.intv-brief-content h1 { font-size: 20px; margin: 4px 0 12px; }
.intv-brief-content h2 {
  font-size: 16px;
  margin: 20px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}
.intv-brief-content h3 { font-size: 14px; margin: 14px 0 6px; }
.intv-brief-content p { margin: 0 0 10px; color: var(--text-color); }
.intv-brief-content ul,
.intv-brief-content ol { margin: 0 0 12px; padding-left: 22px; }
.intv-brief-content li { margin: 3px 0; }
.intv-brief-content strong { color: var(--text-color); font-weight: 700; }
.intv-brief-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
}
.intv-brief-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 12px;
  font-size: 13px;
}
.intv-brief-content th,
.intv-brief-content td {
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  text-align: left;
}

/* Analysis charts (theme-aware, no chart library) */
.intv-analysis-charts {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}
.intv-chart-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.intv-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.intv-chart-card {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--text-color) 2.5%, transparent);
}
.intv-chart-q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
}
.intv-chart-avg {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-color, #667eea);
  white-space: nowrap;
}
.intv-chart-foot { margin-top: 8px; font-size: 11px; color: var(--text-secondary); }

.intv-bar-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.intv-bar-label {
  flex: 0 0 76px;
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intv-bar-track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color) 9%, transparent);
  overflow: hidden;
}
.intv-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-color, #667eea);
  min-width: 2px;
  transition: width .3s ease;
}
.intv-bar-fill.intv-bar-pos { background: #16a34a; }
.intv-bar-fill.intv-bar-neg { background: #94a3b8; }
.intv-bar-val {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
}

.intv-hist { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.intv-hist-col {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%;
}
.intv-hist-barwrap {
  flex: 1 1 auto;
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 3px;
}
.intv-hist-bar {
  width: 68%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent-color, #667eea);
  transition: height .3s ease;
}
.intv-hist-count { font-size: 10.5px; color: var(--text-secondary); line-height: 1; }
.intv-hist-x { font-size: 11px; color: var(--text-color); }

.intv-share-row {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 5%, transparent));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 6px 6px 12px;
}
.intv-share-row input {
  flex: 1 1 auto;
  border: 0; background: transparent;
  font-size: 13px; color: var(--text-color);
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Toast (lightweight, used by copy-link) ---- */
.intv-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text-color); color: var(--containerbackground);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  z-index: 300;
}
.intv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Empty state component ---- */
.intv-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.intv-empty-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
}
.intv-empty-title { font-size: 16px; font-weight: 700; color: var(--text-color); margin: 0 0 6px; }
.intv-empty-desc { font-size: 13px; margin: 0 auto; max-width: 360px; line-height: 1.5; }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .intv-topnav-inner { grid-template-columns: 1fr auto; }
  .intv-nav { display: none; }
  .intv-brand-tag { display: none; }
  .intv-user-meta { display: none; }
  .intv-nav-burger { display: inline-flex; }
  .intv-hero { grid-template-columns: 1fr; padding: 36px 24px; }
  .intv-hero-art { display: none; }
  .intv-theme-toggle { display: none; }
}
@media (max-width: 560px) {
  .intv-nav-actions .guest-only.intv-btn:not(.intv-btn-primary) { display: none !important; }
}

/* ---- Old top header is replaced ÔÇö hide the legacy element if any page still ships it ---- */
.intv-app > .intv-header { display: none; }



/* ============================================================================
 * v3 ´┐¢ App body shell with sidebar, redesigned signed-in surfaces,
 * improved question editor + interview-sets table, refined buttons
 * ============================================================================ */

/* ---- App layout: sidebar + main ---- */
.intv-app { min-height: 100vh; }
.intv-app-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
  flex: 1 1 auto;
}
body:not(.is-signed-in) .intv-app-body { grid-template-columns: 1fr; }
body.is-public-token .intv-app-body { grid-template-columns: 1fr; }

/* Standalone "present" mode: chrome-less popup window (opened from another
   app). Hide the top nav + sidebar and let the session screen fill the view. */
body.intv-standalone .intv-topnav,
body.intv-standalone .intv-sidebar { display: none !important; }
body.intv-standalone .intv-app-body { grid-template-columns: 1fr; }
body.intv-standalone .intv-app-body .intv-container {
  margin: 0 auto;
  max-width: 1100px;
  padding: 16px 28px 48px;
}

.intv-app-body .intv-container {
  max-width: 1200px;
  margin: 0;
  width: 100%;
  padding: 28px 36px 64px;
}
/* When there is no sidebar (signed-out / public token) centre the container */
body:not(.is-signed-in) .intv-app-body .intv-container,
body.is-public-token .intv-app-body .intv-container {
  margin: 0 auto;
}

/* ---- Sidebar ---- */
.intv-sidebar {
  position: sticky;
  top: 65px; /* below sticky header */
  align-self: start;
  height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px;
  background: var(--containerbackground, #fff);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
}
.intv-sidebar-section { display: flex; flex-direction: column; gap: 10px; }
.intv-sidebar-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 8px;
}
.intv-sidebar-cta {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  border: 0;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .05s, box-shadow .15s;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-color, #667eea) 35%, transparent);
}
.intv-sidebar-cta:hover { filter: brightness(1.06); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color, #667eea) 45%, transparent); }
.intv-sidebar-cta:active { transform: translateY(1px); }
.intv-sidebar-cta-icon {
  display: inline-flex; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.18);
  align-items: center; justify-content: center;
}

.intv-sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.intv-sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background .12s, color .12s;
}
.intv-sidebar-link:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 6%, transparent));
  color: var(--text-color);
}
.intv-sidebar-link.active {
  background: color-mix(in srgb, var(--accent-color, #667eea) 14%, transparent);
  color: var(--accent-color, #667eea);
  font-weight: 600;
}
.intv-sidebar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}

.intv-sidebar-foot {
  margin-top: auto;
  padding: 10px 12px;
  font-size: 12px; color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}
.intv-sidebar-org { display: block; font-weight: 600; color: var(--text-color); }

.intv-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 49;
}

/* ---- Topnav refinements ---- */
.intv-topnav { z-index: 60; }
.intv-topnav-inner {
  grid-template-columns: auto 1fr auto;
  padding: 10px 24px;
  gap: 16px;
}
.intv-nav-burger {
  display: none;
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 6%, transparent));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  color: var(--text-color); cursor: pointer; padding: 0;
}
body:not(.is-signed-in) .intv-nav-burger { display: none !important; }

/* ============================================================================
 * Page header (used on Sets list, Analysis, etc.)
 * ============================================================================ */
.intv-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 4px 0 22px;
}
.intv-page-title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-color);
}
.intv-page-subtitle {
  font-size: 14px; color: var(--text-secondary);
  margin: 4px 0 0;
}
.intv-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================================
 * Interview Sets ´┐¢ table-style list with refined action buttons
 * ============================================================================ */
.intv-sets-card {
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.intv-sets-table {
  width: 100%;
  border-collapse: collapse;
}
.intv-sets-table thead th {
  text-align: left;
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  background: var(--bg-secondary, color-mix(in srgb, var(--text-color) 3%, transparent));
  border-bottom: 1px solid var(--border-color);
}
.intv-sets-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  font-size: 14px;
  color: var(--text-color);
}
.intv-sets-table tbody tr:last-child td { border-bottom: 0; }
.intv-sets-table tbody tr {
  transition: background .12s;
}
.intv-sets-table tbody tr:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 3%, transparent));
}

.intv-set-name {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.intv-set-thumb {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color, #667eea) 22%, transparent),
    color-mix(in srgb, var(--accent-color, #667eea) 8%, transparent));
  color: var(--accent-color, #667eea);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent-color, #667eea) 25%, var(--border-color));
}
.intv-set-thumb-sample {
  background: linear-gradient(135deg,
    color-mix(in srgb, #a855f7 22%, transparent),
    color-mix(in srgb, #a855f7 8%, transparent));
  color: #7c3aed;
  border-color: color-mix(in srgb, #a855f7 25%, var(--border-color));
}
.intv-list-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding-left: 2px;
}
.intv-sets-empty-hint {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
}
.intv-set-name-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.intv-set-title {
  font-size: 14.5px; font-weight: 600; color: var(--text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intv-set-sub {
  font-size: 12.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.intv-set-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
}

.intv-set-actions {
  display: inline-flex; gap: 4px; justify-content: flex-end;
  white-space: nowrap;
}

/* Refined small icon-style action button */
.intv-icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.intv-icon-btn:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 7%, transparent));
  color: var(--text-color);
  border-color: var(--border-color);
}
.intv-icon-btn svg { width: 15px; height: 15px; }
.intv-icon-btn.is-primary {
  background: var(--accent-color, #667eea);
  color: var(--text-color-inv, #fff);
  border-color: var(--accent-color, #667eea);
}
.intv-icon-btn.is-primary:hover {
  background: var(--accent-color-dark, var(--accent-color, #4c63d2));
  color: var(--text-color-inv, #fff);
}
.intv-icon-btn.is-danger {
  color: #d93636;
}
.intv-icon-btn.is-danger:hover {
  background: rgba(217,54,54,.08);
  border-color: rgba(217,54,54,.3);
}

/* Status pill refinements (compact and clean) */
.intv-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.3;
}
.intv-status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.intv-status-pill.published {
  background: color-mix(in srgb, #2ecc71 18%, transparent);
  color: #1f8a4f;
}
.intv-status-pill.published::before { background: #2ecc71; }
.intv-status-pill.draft {
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  color: var(--text-secondary);
}
.intv-status-pill.draft::before { background: var(--text-secondary); }
.intv-status-pill.sample {
  background: color-mix(in srgb, #a855f7 15%, transparent);
  color: #7c3aed;
}
.intv-status-pill.sample::before { background: #a855f7; }

/* ============================================================================
 * Improved question editor rows
 * ============================================================================ */
.intv-question-editor {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 14px 10px;
  background: var(--containerbackground);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.intv-question-editor:hover {
  border-color: color-mix(in srgb, var(--accent-color, #667eea) 35%, var(--border-color));
}
.intv-question-editor:focus-within {
  border-color: var(--accent-color, #667eea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #667eea) 18%, transparent);
}

.intv-q-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color, #667eea) 12%, transparent);
  color: var(--accent-color, #667eea);
  font-size: 13px; font-weight: 700;
  margin-top: 2px;
}

.intv-q-fields {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.intv-q-question-input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  background: transparent;
  color: var(--text-color);
  border: 0;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  box-sizing: border-box;
  outline: none;
}
.intv-q-question-input:hover { border-bottom-color: color-mix(in srgb, var(--text-color) 15%, transparent); }
.intv-q-question-input:focus { border-bottom-color: var(--accent-color, #667eea); }

.intv-q-category-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
}
.intv-q-category-icon {
  display: inline-flex; color: var(--text-secondary);
  width: 14px; height: 14px;
}
.intv-q-category-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-style: italic;
}
.intv-q-category-input::placeholder { color: var(--placeholder-color, color-mix(in srgb, var(--text-color) 35%, transparent)); }

/* Typed-question controls in the designer (Interviewer v2) */
.intv-q-type-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 12px 0;
}
.intv-q-type-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.intv-q-type-select {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 8px;
  color: var(--text-color);
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
}
.intv-q-required {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.intv-q-config { padding: 8px 12px 0; }
.intv-q-config:empty { padding: 0; }
.intv-q-config-input { width: 100%; box-sizing: border-box; }
.intv-q-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 640px) {
  .intv-q-config-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Persona library (Stage 2) — same portrait-card language as the wizard's
   persona selector (.intv-psel-*), plus Edit/Delete actions. */
.intv-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.intv-persona-card {
  --persona-accent: var(--accent-color, #667eea);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 0;
  border: 1.5px solid color-mix(in srgb, var(--persona-accent) 18%, var(--border-color, #e0e0e0));
  border-radius: 16px;
  background: var(--containerbackground, var(--bg-color, #fff));
  overflow: hidden;
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.intv-persona-card:hover {
  border-color: color-mix(in srgb, var(--persona-accent) 45%, var(--border-color));
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--persona-accent) 45%, transparent);
  transform: translateY(-2px);
}
.intv-persona-default {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--persona-accent);
  background: color-mix(in srgb, var(--persona-accent) 14%, transparent);
}
.intv-persona-chip {
  font-size: 11.5px;
  padding: 2px 9px; border-radius: 999px;
  color: var(--text-color);
  background: color-mix(in srgb, var(--text-color) 7%, transparent);
}
.intv-persona-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.intv-modal.intv-persona-modal { max-width: 640px; }
.intv-persona-modal .intv-modal-body { max-height: min(76vh, 760px); overflow-y: auto; }

/* Persona badge on the run start screen */
.intv-persona-badge {
  --persona-accent: var(--accent-color, #667eea);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 12px 0 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--persona-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--persona-accent) 28%, transparent);
}
.intv-persona-badge-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
  background: var(--persona-accent);
}
.intv-persona-badge-text { font-size: 13px; color: var(--text-color); }

/* AI question drafting panel (Stage 4) */
.intv-ai-draft {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-color, #667eea) 35%, var(--border-color, #e0e0e0));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color, #667eea) 6%, transparent);
}
.intv-ai-draft-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.intv-ai-draft-icon {
  display: inline-flex;
  color: var(--accent-color, #667eea);
  margin-top: 1px;
}
.intv-ai-draft-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-color);
}
.intv-ai-draft-sub {
  font-size: 12.5px;
  color: var(--text-secondary, color-mix(in srgb, var(--text-color) 70%, transparent));
}
.intv-ai-draft textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-color, #000);
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  resize: vertical;
}
.intv-ai-draft textarea:focus {
  outline: 2px solid var(--accent-color, #667eea);
  outline-offset: -1px;
}
.intv-ai-draft-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.intv-ai-draft-row .intv-input { flex: 1 1 220px; }

.intv-q-tools {
  display: flex; align-items: center; gap: 2px;
  align-self: stretch;
}
.intv-q-tool {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.intv-q-tool:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--text-color) 7%, transparent));
  color: var(--text-color);
}
.intv-q-tool.is-danger:hover {
  background: rgba(217,54,54,.1);
  color: #d93636;
}
.intv-q-tool svg { width: 16px; height: 16px; }

.intv-questions-add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  margin-top: 4px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px dashed var(--border-color);
  color: var(--text-secondary);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.intv-questions-add:hover {
  border-color: var(--accent-color, #667eea);
  color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 6%, transparent);
}

/* Make the questions card look like a section, not nested-card */
.intv-card .intv-card .intv-card-title { font-size: 15px; }

/* ============================================================================
 * Empty state for sets list
 * ============================================================================ */
.intv-sets-empty {
  text-align: center;
  padding: 56px 24px;
}
.intv-sets-empty-icon {
  width: 72px; height: 72px; border-radius: 18px;
  background: color-mix(in srgb, var(--accent-color, #667eea) 14%, transparent);
  color: var(--accent-color, #667eea);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.intv-sets-empty-icon svg { width: 32px; height: 32px; }
.intv-sets-empty-title {
  font-size: 18px; font-weight: 700; color: var(--text-color); margin: 0 0 6px;
}
.intv-sets-empty-desc {
  font-size: 13.5px; color: var(--text-secondary);
  max-width: 420px; margin: 0 auto 18px;
  line-height: 1.55;
}

/* ============================================================================
 * Responsive
 * ============================================================================ */
@media (max-width: 980px) {
  .intv-app-body { grid-template-columns: 1fr; }
  body.is-signed-in .intv-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    height: 100vh;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  body.is-signed-in.intv-sidebar-open .intv-sidebar { transform: translateX(0); }
  body.is-signed-in:not(.intv-sidebar-open) .intv-sidebar-backdrop { display: none; }
  body.is-signed-in .intv-nav-burger { display: inline-flex; }
  .intv-app-body .intv-container { padding: 22px 18px 48px; }
  .intv-sets-table thead { display: none; }
  .intv-sets-table tbody td {
    display: block;
    padding: 10px 16px;
    border-bottom: 0;
  }
  .intv-sets-table tbody tr {
    display: block;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0 14px;
  }
  .intv-set-actions { padding-top: 4px; }
}
@media (max-width: 560px) {
  .intv-page-title { font-size: 22px; }
  .intv-app-body .intv-container { padding: 18px 14px 40px; }
}

/* =====================================================================
   Template wizard (create / edit interview set)
   ===================================================================== */
.intv-wizard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.intv-wizard-head .intv-card-title { margin: 0; }

.intv-wizard-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.intv-wizard-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.intv-wizard-step-btn:disabled { cursor: default; opacity: .55; }
.intv-wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-color) 8%, transparent);
  border: 1px solid var(--border-color);
}
.intv-wizard-step.is-current .intv-wizard-step-btn { color: var(--text-color); }
.intv-wizard-step.is-current .intv-wizard-step-num {
  color: var(--text-color-inv, #fff);
  background: var(--accent-color, #667eea);
  border-color: var(--accent-color, #667eea);
}
.intv-wizard-step.is-done .intv-wizard-step-num {
  color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-color, #667eea) 40%, transparent);
}
.intv-wizard-step + .intv-wizard-step::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 4px;
  vertical-align: middle;
  background: var(--border-color);
}

.intv-wizard-body { min-height: 220px; }
.intv-wizard-lede {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 14px;
}

/* Separate the "How would you like to start?" chooser from the session-type
   cards above it. */
.intv-start-lede {
  margin-top: 28px;
}
.intv-wizard-panel { margin-top: 14px; }
.intv-wizard-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* --- Step 1: start-mode chooser ------------------------------------- */
.intv-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}
.intv-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  background: var(--containerbackground, var(--bg-color));
  color: var(--text-color);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.intv-mode-card:hover {
  border-color: color-mix(in srgb, var(--accent-color, #667eea) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color, #667eea) 4%, var(--containerbackground, var(--bg-color)));
}
.intv-mode-card.is-disabled,
.intv-mode-card:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: grayscale(.18);
}
.intv-mode-card.is-disabled:hover,
.intv-mode-card:disabled:hover {
  transform: none;
  border-color: var(--border-color);
  background: var(--containerbackground, var(--bg-color));
}
.intv-mode-card.selected {
  border-color: var(--accent-color, #667eea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #667eea) 18%, transparent);
  background: color-mix(in srgb, var(--accent-color, #667eea) 6%, var(--containerbackground, var(--bg-color)));
}
.intv-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 12%, transparent);
}
.intv-mode-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
}
.intv-mode-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 14%, transparent);
}
.intv-mode-badge-muted {
  color: var(--muted-color, #6b7280);
  background: color-mix(in srgb, var(--muted-color, #6b7280) 14%, transparent);
}
.intv-mode-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* --- Step 1: start-method chooser ----------------------------------- */
.intv-start-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
}
.intv-start-choice {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--containerbackground, var(--bg-color));
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.intv-start-choice:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-color, #667eea) 34%, var(--border-color));
}
.intv-start-choice.selected {
  border-color: color-mix(in srgb, var(--accent-color, #667eea) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color, #667eea) 7%, var(--containerbackground, var(--bg-color)));
}
.intv-start-choice-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--containerbackground, var(--bg-color));
  box-sizing: border-box;
}
.intv-start-choice.selected .intv-start-choice-check {
  border: 5px solid var(--accent-color, #667eea);
}
.intv-start-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--accent-color, #667eea);
  background: color-mix(in srgb, var(--accent-color, #667eea) 12%, transparent);
}
.intv-start-choice-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.intv-start-choice-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
}
.intv-start-choice-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* --- Collapsible advanced / power settings -------------------------- */
.intv-advanced {
  margin-top: 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-color) 2%, transparent);
}
.intv-advanced > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.intv-advanced > summary::-webkit-details-marker { display: none; }
.intv-advanced > summary:hover { color: var(--text-color); }
.intv-advanced-chevron {
  display: inline-flex;
  transition: transform .15s;
}
.intv-advanced[open] .intv-advanced-chevron { transform: rotate(90deg); }
.intv-advanced-body { padding: 4px 16px 16px; }

/* --- Persona selector cards (wizard, advisor-card style) ------------ */
.intv-psel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin: 4px 0 6px;
}
.intv-psel-card {
  --persona-accent: var(--accent-color, #667eea);
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 6px;
  padding: 16px 14px 0;
  border: 1.5px solid color-mix(in srgb, var(--persona-accent) 18%, var(--border-color));
  border-radius: 14px;
  background: var(--containerbackground, var(--bg-color));
  color: var(--text-color);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.intv-psel-card:hover,
.intv-psel-card:focus-visible {
  border-color: color-mix(in srgb, var(--persona-accent) 55%, var(--border-color));
  background: color-mix(in srgb, var(--persona-accent) 5%, var(--containerbackground, var(--bg-color)));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--persona-accent) 14%, transparent);
  outline: none;
}
.intv-psel-card.selected {
  border-color: var(--persona-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--persona-accent) 20%, transparent);
  background: color-mix(in srgb, var(--persona-accent) 7%, var(--containerbackground, var(--bg-color)));
}
.intv-psel-check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--text-color-inv, #fff);
  background: var(--persona-accent);
}
.intv-psel-card.selected .intv-psel-check { display: inline-flex; }
.intv-psel-avatar {
  width: min(100%, 96px);
  align-self: center;
  aspect-ratio: 1;
  border-radius: 10px 10px 50% 50% / 10px 10px 22px 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--persona-accent) 9%, var(--bg-color));
  border: 1px solid color-mix(in srgb, var(--persona-accent) 16%, var(--border-color));
  box-shadow: 0 3px 10px color-mix(in srgb, #000 8%, transparent);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.intv-psel-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.intv-psel-initials {
  font-size: 26px;
  font-weight: 800;
  color: var(--persona-accent);
}
.intv-psel-avatar-custom { color: var(--text-secondary); }
.intv-psel-custom { border-style: dashed; }
.intv-psel-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}
.intv-psel-role {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--persona-accent);
  min-height: 14px;
}
.intv-psel-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 8px;
  flex: 1;
}
.intv-psel-meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.intv-psel-accent {
  height: 3px;
  border-radius: 2px 2px 0 0;
  margin-top: auto;
  background: var(--persona-accent);
  flex-shrink: 0;
}

/* --- Review step ----------------------------------------------------- */
.intv-review-card {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-color, #667eea) 4%, var(--containerbackground, var(--bg-color)));
  margin-bottom: 18px;
}
.intv-review-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color);
}
.intv-review-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.intv-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.intv-review-item { display: flex; flex-direction: column; gap: 4px; }
.intv-review-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--placeholder-color, var(--text-secondary));
}
.intv-review-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}
.intv-review-persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.intv-review-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--persona-accent, var(--accent-color, #667eea)) 12%, transparent);
  flex-shrink: 0;
}
.intv-review-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intv-review-avatar .intv-psel-initials { font-size: 11px; }

/* --- Persona avatar images (library cards, run badge, modal editor) -- */
.intv-persona-avatar.has-img,
.intv-persona-badge-avatar.has-img {
  overflow: hidden;
  background: color-mix(in srgb, var(--persona-accent) 12%, transparent);
}
.intv-persona-avatar.has-img img,
.intv-persona-badge-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intv-avatar-edit {
  display: flex;
  align-items: center;
  gap: 14px;
}
.intv-avatar-preview {
  --persona-accent: var(--accent-color, #667eea);
  width: 64px;
  height: 64px;
  border-radius: 16px 16px 50% 50% / 16px 16px 24px 24px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: var(--persona-accent);
  background: color-mix(in srgb, var(--persona-accent) 10%, var(--bg-color));
  border: 1px solid color-mix(in srgb, var(--persona-accent) 20%, var(--border-color));
  flex-shrink: 0;
}
.intv-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intv-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 560px) {
  .intv-wizard-steps { gap: 2px; }
  .intv-wizard-step-label { display: none; }
  .intv-wizard-step.is-current .intv-wizard-step-label { display: inline; }
  .intv-start-methods { grid-template-columns: 1fr; }
  .intv-start-choice {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
  }
  .intv-start-choice-check { display: none; }
  .intv-psel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================================
 * Design refresh — softer, friendlier, more modern feel for the standalone
 * app launch. Pure overrides of the earlier rules: pill buttons with gradient
 * primaries, rounder cards and inputs, an ambient accent glow behind the
 * workspace, and gentler focus states. Everything stays variable-driven so
 * all themes keep working.
 * ============================================================================ */

/* --- Ambient workspace background (sits behind cards, works on any theme) -- */
.intv-app-body {
  background:
    radial-gradient(1100px 480px at 88% -8%,
      color-mix(in srgb, var(--accent-color, #667eea) 9%, transparent), transparent 70%),
    radial-gradient(900px 420px at -10% 104%,
      color-mix(in srgb, var(--accent-color, #667eea) 6%, transparent), transparent 70%);
}

/* --- Buttons: pills, gradient primary, gentle lift --------------------- */
.qa-btn,
.tpl-btn,
.intv-btn {
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .18s, transform .12s;
}
.qa-btn:hover,
.tpl-btn:hover,
.intv-btn:hover { transform: translateY(-1px); }
.qa-btn:active,
.tpl-btn:active,
.intv-btn:active { transform: translateY(0); }
.intv-btn-small { padding: 5px 13px; border-radius: 999px; }

.qa-btn-primary,
.tpl-btn-primary,
.intv-btn-primary {
  background: linear-gradient(135deg,
    var(--accent-color, #667eea),
    color-mix(in srgb, var(--accent-color, #667eea) 70%, var(--accent-color-dark, #312e81)));
  border-color: transparent;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color, #667eea) 32%, transparent);
}
.qa-btn-primary:hover,
.tpl-btn-primary:hover,
.intv-btn-primary:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color, #667eea) 92%, #fff),
    color-mix(in srgb, var(--accent-color, #667eea) 70%, var(--accent-color-dark, #312e81)));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color, #667eea) 42%, transparent);
}
.intv-icon-btn { border-radius: 999px; }
.intv-icon-btn.is-primary {
  background: linear-gradient(135deg,
    var(--accent-color, #667eea),
    color-mix(in srgb, var(--accent-color, #667eea) 70%, var(--accent-color-dark, #312e81)));
  border-color: transparent;
}

/* --- Cards & surfaces: rounder, softer, a touch more air ---------------- */
.intv-card {
  border-radius: 18px;
  padding: 24px 26px;
  border-color: color-mix(in srgb, var(--border-color, #e0e0e0) 85%, transparent);
  box-shadow:
    0 1px 2px color-mix(in srgb, #000 4%, transparent),
    0 16px 40px -28px color-mix(in srgb, #000 25%, transparent);
}
.intv-sets-card { border-radius: 18px; }
.qa-card { border-radius: 14px; }
.intv-question-editor { border-radius: 12px; }
.intv-empty-state { border-radius: 14px; padding: 36px 28px; }
.intv-status-banner { border-radius: 12px; }
.intv-modal { border-radius: 18px; }
.qa-progress-wrap { border-radius: 12px; }
.qa-progress-bar { height: 8px; border-radius: 4px; }
.qa-progress-fill {
  background: linear-gradient(90deg,
    var(--accent-color, #667eea),
    color-mix(in srgb, var(--accent-color, #667eea) 65%, var(--accent-color-dark, #312e81)));
}

/* --- Inputs: rounder with a soft focus ring ----------------------------- */
.intv-field input[type="text"],
.intv-field input[type="email"],
.intv-field input[type="number"],
.intv-field textarea,
.intv-field select,
.intv-input,
.qa-card-textarea,
.qa-insight-input {
  border-radius: 12px;
  padding: 10px 14px;
}
.intv-field input:focus,
.intv-field textarea:focus,
.intv-field select:focus,
.intv-input:focus,
.qa-card-textarea:focus,
.qa-insight-input:focus {
  outline: none;
  border-color: var(--accent-color, #667eea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #667eea) 18%, transparent);
}

/* --- Top nav: frosted glass --------------------------------------------- */
.intv-topnav {
  background: color-mix(in srgb, var(--containerbackground, #fff) 80%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: color-mix(in srgb, var(--border-color, #e0e0e0) 70%, transparent);
}
.intv-brand-mark { border-radius: 12px; }

/* --- Sidebar: pill links, gradient CTA ---------------------------------- */
/* Desktop only: let the ambient gradient show through. The mobile overlay
   sidebar (max-width: 900px) keeps its solid surface for readability. */
@media (min-width: 901px) {
  .intv-sidebar { background: transparent; }
}
.intv-sidebar-link { border-radius: 999px; padding: 10px 14px; }
.intv-sidebar-cta {
  border-radius: 999px;
  background: linear-gradient(135deg,
    var(--accent-color, #667eea),
    color-mix(in srgb, var(--accent-color, #667eea) 70%, var(--accent-color-dark, #312e81)));
}

/* --- Friendlier headings -------------------------------------------------- */
.intv-page-title { font-size: 30px; letter-spacing: -0.02em; }
.intv-page-subtitle { font-size: 14.5px; margin-top: 6px; }
.intv-card-title { font-size: 17px; font-weight: 700; }

/* --- Voice picker & add-question affordances ----------------------------- */
.intv-voice-option { border-radius: 12px; border-width: 1.5px; }
.intv-questions-add { border-radius: 999px; }

/* --- Set list thumbs ------------------------------------------------------ */
.intv-set-thumb { border-radius: 12px; }

/* ============================================================================
 * Studio refresh - conversation-led UI
 * ============================================================================ */

body.intv-app,
body.intv-app * {
  letter-spacing: 0 !important;
}

body.intv-app {
  --intv-studio-ink: #17211d;
  --intv-studio-muted: #647067;
  --intv-studio-line: color-mix(in srgb, var(--border-color, #dfe5df) 74%, transparent);
  --intv-studio-surface: color-mix(in srgb, var(--containerbackground, #fff) 92%, #f7f9f5);
  --intv-studio-soft: color-mix(in srgb, var(--bg-color, #f7f9f5) 82%, #eef5f1);
  --intv-studio-teal: #0f8f88;
  --intv-studio-coral: #e45f4f;
  background: var(--intv-studio-soft);
  color: var(--text-color, var(--intv-studio-ink));
}

.intv-app-body {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-color, #f7f9f5) 86%, #eef5f1) 0%,
      color-mix(in srgb, var(--bg-color, #f7f9f5) 92%, #ffffff) 48%,
      var(--bg-color, #f7f9f5) 100%);
}

.intv-topnav {
  background: color-mix(in srgb, var(--containerbackground, #fff) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-color, #dfe5df) 62%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, #17211d 7%, transparent);
}

.intv-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background:
    linear-gradient(145deg,
      var(--intv-studio-teal),
      color-mix(in srgb, var(--accent-color, #667eea) 58%, var(--intv-studio-coral)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--intv-studio-teal) 24%, transparent);
}

.intv-brand-title {
  font-size: 15px;
  font-weight: 800;
}

.intv-brand-tag {
  font-size: 12px;
  color: var(--text-secondary, var(--intv-studio-muted));
}

.intv-theme-toggle,
.intv-user-trigger {
  background: color-mix(in srgb, var(--containerbackground, #fff) 72%, transparent);
  border: 1px solid var(--intv-studio-line);
}

.intv-app-body .intv-container {
  max-width: 1240px;
  padding: 34px 40px 70px;
}

@media (min-width: 901px) {
  .intv-sidebar {
    width: auto;
    margin: 18px 0 18px 18px;
    height: calc(100vh - 101px);
    top: 83px;
    border: 1px solid var(--intv-studio-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--containerbackground, #fff) 70%, transparent);
    box-shadow: 0 18px 44px color-mix(in srgb, #17211d 7%, transparent);
  }
}

.intv-sidebar-eyebrow {
  color: color-mix(in srgb, var(--text-secondary, #647067) 82%, var(--intv-studio-teal));
}

.intv-sidebar-link {
  min-height: 44px;
  color: var(--text-secondary, var(--intv-studio-muted));
}

.intv-sidebar-link:hover,
.intv-sidebar-link.active {
  background: color-mix(in srgb, var(--intv-studio-teal) 11%, var(--containerbackground, #fff));
  color: color-mix(in srgb, var(--intv-studio-teal) 82%, var(--text-color, #17211d));
}

.intv-sidebar-cta,
.intv-btn-primary,
.tpl-btn-primary,
.qa-btn-primary,
.intv-icon-btn.is-primary {
  background:
    linear-gradient(135deg,
      var(--intv-studio-teal),
      color-mix(in srgb, var(--accent-color, #667eea) 45%, var(--intv-studio-coral)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--intv-studio-teal) 20%, transparent);
}

.intv-btn,
.tpl-btn,
.qa-btn {
  min-height: 42px;
  border-radius: 12px;
}

.intv-btn-primary,
.tpl-btn-primary,
.qa-btn-primary {
  border-color: transparent;
}

.intv-card,
.intv-modal,
.idui-root,
.qa-card,
.intv-review-card,
.intv-analysis-table-wrap,
.intv-chart-card,
.intv-persona-card,
.intv-psel-card {
  border-color: var(--intv-studio-line);
  box-shadow: 0 18px 48px -34px color-mix(in srgb, #17211d 36%, transparent);
}

.intv-card {
  border-radius: 20px;
  background: color-mix(in srgb, var(--containerbackground, #fff) 94%, transparent);
}

.intv-page-header {
  align-items: flex-start;
  margin-bottom: 26px;
}

.intv-page-title,
.intv-analysis-title,
.intv-hero-title {
  letter-spacing: 0 !important;
}

.intv-page-title {
  font-size: 32px;
  line-height: 1.12;
}

.intv-page-subtitle {
  max-width: 620px;
  line-height: 1.55;
}

/* Landing: make the first screen feel like the product, not a brochure. */
.intv-studio-landing {
  gap: 22px;
}

.intv-hero-studio {
  min-height: 430px;
  border: 1px solid var(--intv-studio-line);
  border-radius: 24px;
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--containerbackground, #fff) 96%, #eef5f1),
      color-mix(in srgb, var(--containerbackground, #fff) 76%, #eaf4f2));
  box-shadow: 0 24px 60px -42px color-mix(in srgb, #17211d 50%, transparent);
}

.intv-hero-studio::after {
  display: none;
}

.intv-hero-eyebrow {
  background: color-mix(in srgb, var(--intv-studio-teal) 12%, var(--containerbackground, #fff));
  color: color-mix(in srgb, var(--intv-studio-teal) 82%, var(--text-color, #17211d));
  border: 1px solid color-mix(in srgb, var(--intv-studio-teal) 18%, transparent);
}

.intv-hero-title {
  max-width: 640px;
  font-size: 44px;
  line-height: 1.05;
}

.intv-hero-subtitle {
  font-size: 16px;
  color: var(--text-secondary, var(--intv-studio-muted));
}

.intv-conversation-preview {
  min-height: 310px;
}

.intv-preview-card {
  width: min(100%, 380px);
  padding: 18px;
  border: 1px solid var(--intv-studio-line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--containerbackground, #fff) 90%, transparent);
  box-shadow: 0 24px 60px -34px color-mix(in srgb, #17211d 45%, transparent);
}

.intv-preview-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.intv-preview-head strong,
.intv-preview-head span span {
  display: block;
}

.intv-preview-head strong {
  font-size: 14px;
  color: var(--text-color);
}

.intv-preview-head span span {
  font-size: 12px;
  color: var(--text-secondary);
}

.intv-preview-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px 14px 50% 50% / 14px 14px 20px 20px;
  background: color-mix(in srgb, var(--intv-studio-coral) 16%, var(--containerbackground, #fff));
  color: var(--intv-studio-coral);
  font-weight: 800;
}

.intv-preview-live {
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
}

.intv-wave-preview {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  margin: 0 0 16px;
  padding: 0 4px;
}

.intv-wave-preview span {
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--intv-studio-teal) 76%, var(--accent-color, #667eea));
  animation: intv-wave-lift 1.15s ease-in-out infinite;
}

.intv-wave-preview span:nth-child(2) { height: 32px; animation-delay: .08s; }
.intv-wave-preview span:nth-child(3) { height: 42px; animation-delay: .16s; }
.intv-wave-preview span:nth-child(4) { height: 27px; animation-delay: .24s; }
.intv-wave-preview span:nth-child(5) { height: 34px; animation-delay: .32s; }

@keyframes intv-wave-lift {
  0%, 100% { transform: scaleY(.72); opacity: .66; }
  50% { transform: scaleY(1); opacity: 1; }
}

.intv-preview-bubble {
  width: fit-content;
  max-width: 86%;
  padding: 11px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}

.intv-preview-bubble-ai {
  background: color-mix(in srgb, var(--intv-studio-teal) 12%, var(--containerbackground, #fff));
  color: var(--text-color);
}

.intv-preview-bubble-user {
  margin: 10px 0 0 auto;
  background: color-mix(in srgb, var(--intv-studio-coral) 12%, var(--containerbackground, #fff));
  color: var(--text-color);
}

.intv-preview-insight {
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--intv-studio-teal) 18%, var(--intv-studio-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--intv-studio-teal) 7%, var(--containerbackground, #fff));
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.45;
}

.intv-preview-insight span {
  display: block;
  margin-bottom: 4px;
  color: var(--intv-studio-teal);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.intv-feature,
.intv-steps {
  border-color: var(--intv-studio-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--containerbackground, #fff) 88%, transparent);
}

/* Interview sets: keep table semantics, present as a modern library. */
.intv-sets-card {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.intv-sets-table {
  display: block;
}

.intv-sets-table thead {
  display: none;
}

.intv-sets-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 16px;
}

.intv-sets-table tbody tr {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 18px;
  border: 1px solid var(--intv-studio-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--containerbackground, #fff) 94%, transparent);
  box-shadow: 0 18px 48px -34px color-mix(in srgb, #17211d 36%, transparent);
}

.intv-sets-table tbody tr:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--intv-studio-teal) 26%, var(--intv-studio-line));
  background: color-mix(in srgb, var(--containerbackground, #fff) 96%, #eef5f1);
}

.intv-sets-table tbody td {
  display: block;
  padding: 0;
  border: 0;
}

.intv-sets-table tbody td:first-child {
  margin-bottom: 14px;
}

.intv-sets-table tbody td:nth-child(2),
.intv-sets-table tbody td:nth-child(3),
.intv-sets-table tbody td:nth-child(4) {
  display: inline-flex;
  width: fit-content;
  margin: 0 7px 8px 0;
}

.intv-sets-table tbody td:nth-child(4):empty {
  display: none;
}

.intv-sets-table tbody td:last-child {
  margin-top: auto;
  padding-top: 16px;
}

.intv-set-name {
  align-items: flex-start;
}

.intv-set-thumb {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 17px;
  font-weight: 800;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--intv-studio-teal) 15%, var(--containerbackground, #fff)),
      color-mix(in srgb, var(--intv-studio-coral) 11%, var(--containerbackground, #fff)));
  color: color-mix(in srgb, var(--intv-studio-teal) 72%, var(--text-color, #17211d));
}

.intv-set-thumb-sample {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent-color, #667eea) 14%, var(--containerbackground, #fff)),
      color-mix(in srgb, var(--intv-studio-coral) 12%, var(--containerbackground, #fff)));
  color: color-mix(in srgb, var(--accent-color, #667eea) 76%, var(--text-color, #17211d));
}

.intv-set-title {
  font-size: 17px;
  line-height: 1.22;
}

.intv-set-sub,
.intv-set-meta {
  color: var(--text-secondary, var(--intv-studio-muted));
}

.intv-status-pill,
.intv-set-meta {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

.intv-status-pill.published {
  background: color-mix(in srgb, #16a34a 13%, transparent);
  color: #15803d;
}

.intv-status-pill.draft {
  background: color-mix(in srgb, var(--intv-studio-coral) 12%, transparent);
  color: color-mix(in srgb, var(--intv-studio-coral) 82%, var(--text-color, #17211d));
}

.intv-status-pill.sample {
  background: color-mix(in srgb, var(--accent-color, #667eea) 12%, transparent);
  color: color-mix(in srgb, var(--accent-color, #667eea) 82%, var(--text-color, #17211d));
}

.intv-set-actions {
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.intv-icon-btn {
  min-width: 42px;
  min-height: 42px;
  border-radius: 12px;
}

.intv-row-menu {
  position: relative;
  z-index: 120;
}

.intv-row-menu summary {
  list-style: none;
  cursor: pointer;
}

.intv-row-menu summary::-webkit-details-marker {
  display: none;
}

.intv-row-menu[open] summary {
  border-color: color-mix(in srgb, var(--accent-color, #667eea) 26%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color, #667eea) 6%, transparent);
}

.intv-row-menu-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 1000;
  min-width: 172px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--containerbackground, #fff);
  box-shadow: 0 18px 42px rgba(20, 24, 32, .16);
}

.intv-row-menu-panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.intv-row-menu-panel button:hover,
.intv-row-menu-panel button:focus-visible {
  background: color-mix(in srgb, var(--accent-color, #667eea) 8%, transparent);
  outline: none;
}

.intv-row-menu-panel svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.intv-row-menu-panel .is-danger {
  color: #d93636;
}

.intv-row-menu-panel .is-danger:hover,
.intv-row-menu-panel .is-danger:focus-visible {
  background: rgba(217,54,54,.08);
}

.intv-sets-table:not(.intv-samples-table) tbody tr.is-menu-open,
.intv-sets-table:not(.intv-samples-table) tbody tr:has(.intv-row-menu[open]) {
  position: relative;
  z-index: 900;
}

.intv-list-section-label {
  margin: 6px 0 12px;
  color: color-mix(in srgb, var(--text-secondary, #647067) 70%, var(--intv-studio-teal));
}

/* Start interview screen. */
.intv-run-start-card {
  position: relative;
  overflow: hidden;
}

.intv-run-start-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--intv-studio-teal), var(--intv-studio-coral));
}

.intv-run-start-card > * {
  position: relative;
}

.intv-run-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.intv-run-summary div {
  padding: 14px;
  border: 1px solid var(--intv-studio-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-color, #f7f9f5) 56%, var(--containerbackground, #fff));
}

.intv-run-summary span,
.intv-run-summary strong {
  display: block;
}

.intv-run-summary span {
  margin-bottom: 4px;
  color: var(--text-secondary, var(--intv-studio-muted));
  font-size: 12px;
  font-weight: 700;
}

.intv-run-summary strong {
  color: var(--text-color);
  font-size: 15px;
}

.intv-start-panel {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--intv-studio-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--containerbackground, #fff) 78%, transparent);
}

.intv-start-title {
  font-size: 15px;
  font-weight: 800;
}

.intv-mode-cards,
.intv-mode-grid {
  gap: 12px;
}

.intv-mode-card {
  min-height: 144px;
  border-radius: 18px;
  border-color: var(--intv-studio-line);
  background: color-mix(in srgb, var(--containerbackground, #fff) 88%, transparent);
}

.intv-mode-card:hover,
.intv-mode-card.selected {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--intv-studio-teal) 38%, var(--intv-studio-line));
}

.intv-mode-card.selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--intv-studio-teal) 14%, transparent);
  background: color-mix(in srgb, var(--intv-studio-teal) 7%, var(--containerbackground, #fff));
}

.intv-mode-card-title,
.intv-mode-title {
  font-size: 15px;
}

.intv-mode-card-desc,
.intv-mode-desc {
  line-height: 1.5;
}

.intv-persona-badge,
.intv-persona-card,
.intv-psel-card {
  border-radius: 18px;
}

.intv-persona-badge-avatar,
.intv-avatar-preview,
.intv-psel-avatar {
  border-radius: 16px 16px 50% 50% / 16px 16px 22px 22px;
}

.qa-card {
  padding: 18px;
}

.qa-card-number {
  border-radius: 999px;
}

.qa-card-status {
  text-transform: none;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .intv-wave-preview span {
    animation: none;
  }
}

@media (max-width: 900px) {
  .intv-app-body .intv-container {
    padding: 24px 18px 52px;
  }

  .intv-hero-title {
    font-size: 36px;
  }

  .intv-hero-studio {
    min-height: auto;
  }

  .intv-conversation-preview {
    display: block;
    min-height: auto;
  }

  .intv-preview-card {
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  .intv-page-title,
  .intv-hero-title {
    font-size: 30px;
  }

  .intv-run-summary {
    grid-template-columns: 1fr;
  }

  .intv-sets-table tbody {
    grid-template-columns: 1fr;
  }

  .intv-sets-table tbody tr {
    min-height: 0;
  }
}

/* ============================================================================
 * Palette correction + focused Interview Sets table
 * ============================================================================ */

body.intv-app {
  --intv-studio-ink: #20242c;
  --intv-studio-muted: #687080;
  --intv-studio-line: color-mix(in srgb, var(--border-color, #d8dde8) 78%, transparent);
  --intv-studio-surface: color-mix(in srgb, var(--containerbackground, #fff) 94%, #f7f8fb);
  --intv-studio-soft: #f7f8fb;
  --intv-studio-teal: #2f6fed;
  --intv-studio-coral: #b7791f;
}

.intv-app-body {
  background:
    linear-gradient(180deg, #f7f8fb 0%, #fbfcff 48%, var(--bg-color, #f7f8fb) 100%);
}

.intv-brand-mark,
.intv-sidebar-cta,
.intv-btn-primary,
.tpl-btn-primary,
.qa-btn-primary,
.intv-icon-btn.is-primary {
  background: linear-gradient(135deg, #2f6fed, #6b7cff);
  box-shadow: 0 10px 22px color-mix(in srgb, #2f6fed 20%, transparent);
}

.intv-sidebar-link:hover,
.intv-sidebar-link.active {
  background: color-mix(in srgb, #2f6fed 10%, var(--containerbackground, #fff));
  color: #254fb8;
}

.intv-hero-studio {
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--containerbackground, #fff) 96%, #f7f8fb),
      color-mix(in srgb, var(--containerbackground, #fff) 84%, #eef2ff));
}

.intv-hero-eyebrow,
.intv-preview-bubble-ai,
.intv-preview-insight,
.intv-mode-card.selected,
.intv-review-card {
  background: color-mix(in srgb, #2f6fed 8%, var(--containerbackground, #fff));
}

.intv-preview-bubble-user {
  background: color-mix(in srgb, #b7791f 10%, var(--containerbackground, #fff));
}

.intv-preview-avatar {
  background: color-mix(in srgb, #b7791f 12%, var(--containerbackground, #fff));
  color: #9a5f12;
}

.intv-wave-preview span {
  background: #2f6fed;
}

.intv-run-start-card::before {
  background: linear-gradient(90deg, #2f6fed, #8b96ff);
}

/* Main Interview Sets: refined table, not cards. */
.intv-sets-card {
  overflow: visible;
  border: 1px solid var(--intv-studio-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--containerbackground, #fff) 96%, transparent);
  box-shadow: 0 18px 48px -36px color-mix(in srgb, #20242c 30%, transparent);
}

.intv-sets-table:not(.intv-samples-table) {
  display: table;
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.intv-sets-table:not(.intv-samples-table) thead {
  display: table-header-group;
}

.intv-sets-table:not(.intv-samples-table) tbody {
  display: table-row-group;
}

.intv-sets-table:not(.intv-samples-table) tbody tr {
  display: table-row;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.intv-sets-table:not(.intv-samples-table) tbody tr:hover {
  transform: none;
  background: color-mix(in srgb, #2f6fed 5%, var(--containerbackground, #fff));
}

.intv-sets-table:not(.intv-samples-table) thead th {
  padding: 14px 18px;
  border-bottom: 1px solid var(--intv-studio-line);
  background: color-mix(in srgb, #f7f8fb 74%, var(--containerbackground, #fff));
  color: var(--text-secondary, #687080);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.intv-sets-table:not(.intv-samples-table) tbody td {
  display: table-cell;
  padding: 16px 18px;
  border-bottom: 1px solid var(--intv-studio-line);
  color: var(--text-color);
  vertical-align: middle;
}

.intv-sets-table:not(.intv-samples-table) tbody tr:last-child td {
  border-bottom: 0;
}

.intv-sets-table:not(.intv-samples-table) tbody td:first-child,
.intv-sets-table:not(.intv-samples-table) tbody td:nth-child(2),
.intv-sets-table:not(.intv-samples-table) tbody td:nth-child(3),
.intv-sets-table:not(.intv-samples-table) tbody td:nth-child(4),
.intv-sets-table:not(.intv-samples-table) tbody td:last-child {
  width: auto;
  margin: 0;
  padding-top: 16px;
}

.intv-sets-table:not(.intv-samples-table) tbody td:last-child {
  text-align: right;
}

.intv-sets-table:not(.intv-samples-table) .intv-set-actions {
  justify-content: flex-end;
}

.intv-sets-table:not(.intv-samples-table) .intv-set-thumb {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, #2f6fed 12%, var(--containerbackground, #fff)),
      color-mix(in srgb, #8b96ff 10%, var(--containerbackground, #fff)));
  color: #2f6fed;
}

.intv-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* Samples live in a getting-started modal so they do not compete with user sets. */
.intv-modal-kicker {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.intv-samples-modal {
  max-width: 960px;
}

.intv-samples-modal .intv-modal-body {
  max-height: min(70vh, 700px);
  overflow: auto;
}

.intv-samples-table-wrap {
  box-shadow: none;
}

.intv-samples-table {
  display: table;
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.intv-samples-table thead {
  display: table-header-group;
}

.intv-samples-table tbody {
  display: table-row-group;
}

.intv-samples-table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--intv-studio-line);
  background: color-mix(in srgb, #f7f8fb 74%, var(--containerbackground, #fff));
  color: var(--text-secondary, #687080);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.intv-samples-table tbody tr {
  display: table-row;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.intv-samples-table tbody td {
  display: table-cell;
  padding: 15px 16px;
  border-bottom: 1px solid var(--intv-studio-line);
  vertical-align: middle;
}

.intv-samples-table tbody td:last-child {
  text-align: right;
}

.intv-samples-table .intv-set-actions {
  justify-content: flex-end;
}

/* ============================================================================
 * Modern workbench correction - sharper controls, real dark mode
 * ============================================================================ */

body.intv-app {
  --intv-app-bg: #f5f7fb;
  --intv-app-bg-2: #eef2f7;
  --intv-surface: #ffffff;
  --intv-surface-2: #f8fafc;
  --intv-surface-3: #eef2f7;
  --intv-text: #111827;
  --intv-muted: #667085;
  --intv-faint: #98a2b3;
  --intv-line: #d0d5dd;
  --intv-line-soft: #e4e7ec;
  --intv-accent: #3758f9;
  --intv-accent-hover: #2848df;
  --intv-accent-soft: rgba(55, 88, 249, .10);
  --intv-success: #16a34a;
  --intv-warning: #b7791f;
  --intv-danger: #dc2626;
  background: var(--intv-app-bg);
  color: var(--intv-text);
}

body.theme-dark.intv-app {
  --intv-app-bg: #0d1117;
  --intv-app-bg-2: #111827;
  --intv-surface: #151b24;
  --intv-surface-2: #111827;
  --intv-surface-3: #1d2532;
  --intv-text: #f3f4f6;
  --intv-muted: #a8b3c2;
  --intv-faint: #7c8797;
  --intv-line: #303a49;
  --intv-line-soft: #252d3a;
  --intv-accent: #7c9cff;
  --intv-accent-hover: #9ab2ff;
  --intv-accent-soft: rgba(124, 156, 255, .16);
  --intv-success: #4ade80;
  --intv-warning: #fbbf24;
  --intv-danger: #fb7185;
}

body.theme-ocean.intv-app {
  --intv-app-bg: #071827;
  --intv-app-bg-2: #092033;
  --intv-surface: #0e2b42;
  --intv-surface-2: #0b2438;
  --intv-surface-3: #163b56;
  --intv-text: #e8f7ff;
  --intv-muted: #abcfe2;
  --intv-faint: #78aabe;
  --intv-line: #2e5b74;
  --intv-line-soft: #24475c;
  --intv-accent: #38bdf8;
  --intv-accent-hover: #7dd3fc;
  --intv-accent-soft: rgba(56, 189, 248, .16);
}

body.intv-app,
body.intv-app .intv-app-body {
  background: var(--intv-app-bg);
  color: var(--intv-text);
}

.intv-app-body {
  background:
    linear-gradient(180deg, var(--intv-app-bg) 0%, var(--intv-app-bg-2) 100%);
}

.intv-topnav {
  background: var(--intv-surface-2);
  border-bottom: 1px solid var(--intv-line);
  box-shadow: none;
}

.intv-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--intv-accent);
  box-shadow: none;
}

.intv-brand-title,
.intv-page-title,
.intv-card-title,
.intv-set-title,
.intv-modal-title,
.intv-analysis-title {
  color: var(--intv-text);
}

.intv-brand-tag,
.intv-page-subtitle,
.intv-card-subtle,
.intv-set-sub,
.intv-set-meta,
.intv-modal-kicker,
.intv-user-meta .intv-user-org,
.intv-sidebar-link,
.intv-sidebar-eyebrow,
.intv-muted {
  color: var(--intv-muted);
}

.intv-theme-toggle,
.intv-user-trigger,
.intv-user-dropdown,
.intv-card,
.intv-modal,
.intv-complete-card,
.idui-root,
.qa-card,
.intv-review-card,
.intv-analysis-table-wrap,
.intv-chart-card,
.intv-persona-card,
.intv-psel-card,
.intv-start-panel,
.intv-run-summary div {
  background: var(--intv-surface);
  border-color: var(--intv-line);
  box-shadow: none;
}

.intv-app-body .intv-container {
  padding: 32px 42px 72px;
}

@media (min-width: 901px) {
  .intv-sidebar {
    top: 61px;
    height: calc(100vh - 61px);
    margin: 0;
    padding: 22px 18px;
    border: 0;
    border-right: 1px solid var(--intv-line);
    border-radius: 0;
    background: var(--intv-surface-2);
    box-shadow: none;
  }
}

.intv-sidebar-cta,
.intv-btn,
.tpl-btn,
.qa-btn,
.intv-icon-btn,
.intv-user-trigger,
.intv-theme-toggle,
.intv-theme-toggle button,
.intv-mode-card,
.intv-input,
.intv-field input[type="text"],
.intv-field input[type="email"],
.intv-field input[type="number"],
.intv-field textarea,
.intv-field select,
.qa-card-textarea,
.qa-insight-input {
  border-radius: 8px;
}

.intv-btn,
.tpl-btn,
.qa-btn {
  min-height: 38px;
  padding: 8px 14px;
  background: var(--intv-surface);
  border: 1px solid var(--intv-line);
  color: var(--intv-text);
  box-shadow: none;
}

.intv-btn:hover,
.tpl-btn:hover,
.qa-btn:hover {
  background: var(--intv-surface-3);
  transform: none;
}

.intv-btn-primary,
.tpl-btn-primary,
.qa-btn-primary,
.intv-sidebar-cta,
.intv-icon-btn.is-primary {
  background: var(--intv-accent);
  border-color: var(--intv-accent);
  color: #fff;
  box-shadow: none;
}

.intv-btn-primary:hover,
.tpl-btn-primary:hover,
.qa-btn-primary:hover,
.intv-sidebar-cta:hover,
.intv-icon-btn.is-primary:hover {
  background: var(--intv-accent-hover);
  border-color: var(--intv-accent-hover);
  filter: none;
}

.intv-sidebar-link {
  min-height: 40px;
  border-radius: 7px;
  padding: 9px 11px;
  font-weight: 600;
}

.intv-sidebar-link:hover {
  background: var(--intv-surface-3);
  color: var(--intv-text);
}

.intv-sidebar-link.active {
  position: relative;
  background: var(--intv-accent-soft);
  color: var(--intv-accent);
}

.intv-sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--intv-accent);
}

.intv-page-header {
  margin: 2px 0 24px;
}

.intv-page-title {
  font-size: 31px;
  line-height: 1.12;
}

.intv-list-section-label {
  margin: 0 0 10px;
  color: var(--intv-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.intv-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}

.intv-table-toolbar .intv-btn {
  min-height: 36px;
}

.intv-table-toolbar + .intv-list-section-label {
  margin-top: 2px;
}

/* Table: modern SaaS workbench, not a card grid or tablet list. */
.intv-sets-card {
  border: 1px solid var(--intv-line);
  border-radius: 10px;
  background: var(--intv-surface);
  box-shadow: none;
  overflow: visible;
}

.intv-sets-table:not(.intv-samples-table),
.intv-samples-table {
  min-width: 820px;
  background: var(--intv-surface);
}

.intv-sets-table:not(.intv-samples-table) thead th,
.intv-samples-table thead th {
  padding: 12px 16px;
  background: var(--intv-surface-2);
  border-bottom: 1px solid var(--intv-line);
  color: var(--intv-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.intv-sets-table:not(.intv-samples-table) tbody td,
.intv-samples-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--intv-line-soft);
  color: var(--intv-text);
}

.intv-sets-table:not(.intv-samples-table) tbody tr,
.intv-samples-table tbody tr {
  background: var(--intv-surface);
}

.intv-sets-table:not(.intv-samples-table) tbody tr:hover,
.intv-samples-table tbody tr:hover {
  background: var(--intv-surface-2);
}

.intv-set-name {
  gap: 12px;
}

.intv-sets-table:not(.intv-samples-table) .intv-set-thumb,
.intv-samples-table .intv-set-thumb,
.intv-set-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--intv-accent-soft);
  border: 1px solid color-mix(in srgb, var(--intv-accent) 24%, var(--intv-line));
  color: var(--intv-accent);
  font-size: 14px;
  font-weight: 800;
}

.intv-set-title {
  font-size: 15px;
  font-weight: 700;
}

.intv-set-sub {
  font-size: 13px;
}

.intv-status-pill {
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.intv-status-pill.published {
  background: color-mix(in srgb, var(--intv-success) 12%, transparent);
  color: var(--intv-success);
}

.intv-status-pill.draft {
  background: color-mix(in srgb, var(--intv-warning) 13%, transparent);
  color: var(--intv-warning);
}

.intv-status-pill.cancelled {
  background: color-mix(in srgb, #6b7280 14%, transparent);
  color: #4b5563;
}

.intv-status-pill.sample {
  background: var(--intv-accent-soft);
  color: var(--intv-accent);
}

/* Knowledge documents still processing in the background. The set can only be
   run once every document is ready, so the Run action is disabled meanwhile. */
.intv-status-pill.processing {
  background: color-mix(in srgb, var(--intv-accent, var(--accent-color, #667eea)) 14%, transparent);
  color: var(--intv-accent, var(--accent-color, #667eea));
}
.intv-status-pill.processing::before {
  background: var(--intv-accent, var(--accent-color, #667eea));
  animation: intv-pill-pulse 1s ease-in-out infinite;
}
@keyframes intv-pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.6); }
}

/* Disabled row actions (e.g. Run while documents are processing). */
.intv-icon-btn:disabled,
.intv-icon-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.intv-icon-btn:disabled:hover,
.intv-icon-btn[disabled]:hover {
  background: var(--accent-color, #667eea);
  border-color: transparent;
}

/* Subtle highlight on a set whose documents are still processing. */
.intv-sets-table tr.is-processing td {
  background: color-mix(in srgb, var(--intv-accent, var(--accent-color, #667eea)) 5%, transparent);
}

.intv-icon-btn {
  min-width: 36px;
  min-height: 36px;
  background: transparent;
  border-color: transparent;
  color: var(--intv-muted);
}

.intv-icon-btn:hover {
  background: var(--intv-surface-3);
  color: var(--intv-text);
}

.intv-icon-btn.is-primary {
  min-width: 58px;
  padding-inline: 12px;
}

.intv-mode-card {
  min-height: 124px;
  background: var(--intv-surface);
  border-color: var(--intv-line);
}

.intv-mode-card:hover {
  background: var(--intv-surface-2);
  border-color: var(--intv-line);
  transform: none;
}

.intv-mode-card.selected {
  background: var(--intv-accent-soft);
  border-color: var(--intv-accent);
  box-shadow: none;
  transform: none;
}

.intv-run-start-card::before {
  height: 4px;
  background: var(--intv-accent);
}

.intv-run-summary div {
  background: var(--intv-surface-2);
}

.intv-run-summary span {
  color: var(--intv-muted);
}

.intv-run-summary strong {
  color: var(--intv-text);
}

.intv-hero-studio {
  background: var(--intv-surface);
  border-color: var(--intv-line);
  box-shadow: none;
}

.intv-hero-eyebrow,
.intv-preview-bubble-ai,
.intv-preview-insight {
  background: var(--intv-accent-soft);
  color: var(--intv-accent);
}

.intv-preview-card,
.intv-feature,
.intv-steps {
  background: var(--intv-surface);
  border-color: var(--intv-line);
  box-shadow: none;
}

.intv-preview-bubble-user {
  background: var(--intv-surface-3);
  color: var(--intv-text);
}

.intv-preview-avatar {
  background: var(--intv-accent-soft);
  color: var(--intv-accent);
}

.intv-wave-preview span {
  background: var(--intv-accent);
}

.intv-modal-backdrop {
  background: rgba(2, 6, 23, .62);
}

.intv-samples-modal .intv-modal-body {
  background: var(--intv-surface);
}

body.theme-dark.intv-app .intv-user-avatar,
body.theme-ocean.intv-app .intv-user-avatar {
  color: #fff;
}

@media (max-width: 900px) {
  .intv-app-body .intv-container {
    padding: 24px 18px 52px;
  }
}

/* Persona surfacing: contextual previews instead of a primary nav destination. */
.intv-persona-preview-band,
.intv-persona-carousel-shell {
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid var(--intv-line);
  border-radius: 10px;
  background: var(--intv-surface);
}

.intv-persona-preview-band {
  margin-top: -4px;
}

.intv-persona-preview-head,
.intv-persona-carousel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.intv-persona-preview-head h2,
.intv-persona-carousel-head h2 {
  margin: 0;
  color: var(--intv-text);
  font-size: 18px;
  line-height: 1.2;
}

.intv-persona-preview-head p,
.intv-persona-carousel-head p {
  margin: 5px 0 0;
  max-width: 640px;
  color: var(--intv-muted);
  font-size: 13px;
  line-height: 1.45;
}

.intv-persona-mini-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 230px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.intv-persona-mini-card {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--intv-line-soft);
  border-radius: 9px;
  background: var(--intv-surface-2);
  color: var(--intv-text);
}

.intv-persona-mini-avatar {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--persona-accent, var(--intv-accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--persona-accent, var(--intv-accent)) 28%, var(--intv-line));
  color: var(--persona-accent, var(--intv-accent));
  font-size: 14px;
  font-weight: 800;
}

.intv-persona-mini-avatar.has-img {
  overflow: hidden;
  padding: 0;
}

.intv-persona-mini-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intv-persona-mini-name {
  color: var(--intv-text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}

.intv-persona-mini-role {
  color: var(--intv-accent);
  font-size: 12px;
  font-weight: 700;
}

.intv-persona-mini-desc {
  color: var(--intv-muted);
  font-size: 12px;
  line-height: 1.4;
}

body.theme-dark.intv-app .intv-topnav,
body.theme-dark.intv-app .intv-sidebar {
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.24);
}

body.theme-dark.intv-app .intv-card,
body.theme-dark.intv-app .intv-sets-card,
body.theme-dark.intv-app .intv-modal,
body.theme-dark.intv-app .intv-persona-preview-band,
body.theme-dark.intv-app .intv-persona-carousel-shell,
body.theme-dark.intv-app .intv-preview-card,
body.theme-dark.intv-app .intv-feature,
body.theme-dark.intv-app .intv-steps {
  box-shadow:
    0 1px 0 rgba(255,255,255,.035) inset,
    0 18px 48px rgba(0,0,0,.28),
    0 0 0 1px rgba(124,156,255,.035);
}

body.theme-dark.intv-app .intv-sets-table:not(.intv-samples-table) tbody tr:hover,
body.theme-dark.intv-app .intv-samples-table tbody tr:hover {
  background: color-mix(in srgb, var(--intv-accent) 8%, var(--intv-surface));
}

body.theme-dark.intv-app .intv-persona-mini-card {
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

@media (max-width: 700px) {
  .intv-persona-preview-head,
  .intv-persona-carousel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .intv-persona-mini-row {
    grid-auto-columns: minmax(170px, 78vw);
  }
}

/* Drawer-only navigation + centered workspace. */
body.intv-app .intv-app-body {
  display: block;
}

body.intv-app .intv-app-body .intv-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 28px 76px;
}

body.is-signed-in.intv-app .intv-nav-burger {
  display: inline-flex !important;
}

body.intv-app .intv-nav-burger {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--intv-line);
  border-radius: 9px;
  background: var(--intv-surface);
  color: var(--intv-text);
}

body.intv-app .intv-nav-burger:hover {
  background: var(--intv-surface-3);
}

body.intv-app .intv-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  top: 0;
  width: min(320px, calc(100vw - 34px));
  height: 100dvh;
  z-index: 90;
  transform: translateX(-105%);
  transition: transform .26s ease, box-shadow .26s ease;
  border: 0;
  border-right: 1px solid var(--intv-line);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--intv-surface) 94%, transparent);
  box-shadow: none;
}

body.is-signed-in.intv-sidebar-open .intv-sidebar {
  transform: translateX(0);
  box-shadow: 24px 0 70px rgba(15, 23, 42, .22);
}

body.intv-app .intv-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(7px);
}

body.intv-app:not(.intv-sidebar-open) .intv-sidebar-backdrop,
body.intv-app .intv-sidebar-backdrop[hidden] {
  display: none !important;
}

body.intv-app .intv-admin-only {
  display: none !important;
}

body.is-org-admin.intv-app .intv-admin-only {
  display: flex !important;
}

body.theme-dark.intv-app .intv-sidebar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--intv-surface) 94%, #1b2b4a),
      var(--intv-surface-2));
  box-shadow: none;
}

body.theme-dark.intv-app.intv-sidebar-open .intv-sidebar {
  box-shadow:
    24px 0 80px rgba(0, 0, 0, .46),
    0 0 42px rgba(124, 156, 255, .14);
}

body.theme-dark.intv-app .intv-sidebar-backdrop {
  background: rgba(2, 6, 23, .62);
}

.intv-persona-mini-viewport {
  overflow: hidden;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.intv-persona-mini-row {
  width: max-content;
  overflow: visible;
}

.intv-persona-mini-row.is-animated {
  animation: intv-persona-carousel 34s linear infinite;
  will-change: transform;
}

.intv-persona-mini-viewport:hover .intv-persona-mini-row.is-animated,
.intv-persona-mini-row.is-animated:focus {
  animation-play-state: paused;
}

@keyframes intv-persona-carousel {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .intv-persona-mini-row.is-animated {
    animation: none;
  }
}

@media (min-width: 1280px) {
  body.intv-app .intv-app-body .intv-container {
    padding-inline: 34px;
  }
}

@media (max-width: 760px) {
  body.intv-app .intv-app-body .intv-container {
    padding: 24px 16px 58px;
  }

  .intv-persona-mini-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================================
   Knowledge documents + FAQ editor (session modes: presentation / training)
   ========================================================================== */

.intv-kdoc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intv-kdoc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--intv-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--intv-accent) 3%, transparent);
}

.intv-kdoc-icon {
  display: inline-flex;
  color: var(--intv-muted);
  flex: 0 0 auto;
}

.intv-kdoc-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intv-kdoc-meta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--intv-muted);
}

.intv-kdoc-row .intv-icon-btn {
  min-width: 30px;
  min-height: 30px;
}

.intv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intv-faq-row {
  position: relative;
  padding: 12px 44px 8px 12px;
  border: 1px solid var(--intv-border);
  border-radius: 8px;
}

.intv-faq-row .intv-faq-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 28px;
  min-height: 28px;
}

@media (max-width: 760px) {
  .intv-kdoc-row {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Voice call — figure display (show_figure tool)
   ========================================================================== */

.ivc-figure {
  margin: 12px auto 0;
  max-width: 720px;
  position: relative;
  z-index: 30;
}

.ivc-figure[hidden] {
  display: none !important;
}

.ivc-figure-visible {
  display: block;
}

.ivc-figure-frame {
  position: relative;
  border: 1px solid var(--intv-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--intv-surface, var(--containerbackground));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--intv-text, #000) 12%, transparent);
  animation: ivc-figure-in 0.35s ease;
}

@keyframes ivc-figure-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.ivc-figure-frame img {
  display: block;
  width: 100%;
  max-height: min(52vh, 460px);
  object-fit: contain;
  background: #fff;  /* extracted document figures assume a paper background */
}

.ivc-figure-caption {
  padding: 8px 38px 8px 12px;
  font-size: 12.5px;
  color: var(--intv-muted);
  border-top: 1px solid var(--intv-border);
}

.ivc-figure-maximize {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--intv-border);
  background: color-mix(in srgb, var(--intv-surface, #fff) 85%, transparent);
  color: var(--intv-muted);
  cursor: pointer;
}

.ivc-figure-maximize:hover {
  color: var(--intv-text);
}

.ivc-figure-maximize svg {
  width: 15px;
  height: 15px;
}

.ivc-figure-lightbox {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 42px);
  background: rgba(8, 12, 24, 0.82);
  backdrop-filter: blur(10px);
}

.ivc-figure-lightbox-panel {
  position: relative;
  max-width: min(1180px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  border-radius: 14px;
  background: var(--intv-surface, var(--containerbackground));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.ivc-figure-lightbox-panel img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 56px);
  object-fit: contain;
  background: #fff;
}

.ivc-figure-lightbox-caption {
  padding: 10px 48px 10px 14px;
  color: var(--intv-muted);
  font-size: 13px;
  border-top: 1px solid var(--intv-border);
}

.ivc-figure-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, #fff 32%, transparent);
  border-radius: 50%;
  background: rgba(8, 12, 24, 0.76);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ivc-figure-lightbox-close:hover {
  background: rgba(8, 12, 24, 0.92);
}

/* ==========================================================================
   Voice call — presenter board, whiteboard notes, generated assets
   ========================================================================== */

.ivc-board {
  box-sizing: border-box;
  width: min(920px, 100%);
  max-width: 100%;
  margin: 14px auto 0;
  border: 1px solid var(--intv-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--intv-surface, #fff) 96%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--intv-text, #000) 8%, transparent);
  padding: 14px;
}

.ivc-board[hidden] { display: none; }

.ivc-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--intv-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

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

.ivc-note-card,
.ivc-asset-card {
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--intv-line, var(--intv-border));
  background: var(--intv-surface-2, var(--intv-surface, #fff));
  color: var(--intv-text, #111827);
  padding: 16px;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
  animation: ivc-figure-in 0.28s ease;
}

.ivc-note-card {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--intv-text, #000) 7%, transparent);
}

.ivc-note-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--intv-accent, var(--accent-color, #667eea));
}

.ivc-note-pin {
  display: none;
}

.ivc-note-card h3,
.ivc-asset-meta strong {
  display: block;
  margin: 0 0 9px;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: 0;
}

.ivc-note-card h3 {
  color: var(--intv-text, #111827);
  font-weight: 700;
}

.ivc-note-card p {
  margin: 0 0 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--intv-muted, var(--text-secondary, #4b5563));
}

.ivc-note-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.ivc-note-card li {
  margin: 0 0 9px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--intv-muted, var(--text-secondary, #4b5563));
}

.ivc-note-card li strong {
  display: block;
  margin: 0 0 3px;
  color: var(--intv-text, #111827);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ivc-note-card li.ivc-note-item-numbered {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin-bottom: 10px;
}

.ivc-note-card li.ivc-note-item-numbered strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 999px;
  color: var(--intv-accent, var(--accent-color, #667eea));
  background: var(--intv-accent-soft, color-mix(in srgb, var(--intv-accent, #667eea) 12%, transparent));
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ivc-note-card li.ivc-note-item-numbered span {
  display: block;
  min-width: 0;
  padding-top: 2px;
}

.ivc-note-card li span {
  display: inline;
  font-size: 13px;
  line-height: 1.45;
}

.ivc-note-card li em {
  display: inline-block;
  margin: 4px 0 0;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--intv-accent, var(--accent-color, #667eea));
  background: var(--intv-accent-soft, color-mix(in srgb, var(--intv-accent, #667eea) 12%, transparent));
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
}

.ivc-note-risks { border-color: color-mix(in srgb, var(--intv-warning, #B45309) 34%, var(--intv-line, #e0e0e0)); }
.ivc-note-actions { border-color: color-mix(in srgb, var(--intv-success, #0E8C57) 34%, var(--intv-line, #e0e0e0)); }
.ivc-note-takeaways { border-color: color-mix(in srgb, var(--intv-accent, #667eea) 34%, var(--intv-line, #e0e0e0)); }

.ivc-asset-card {
  background: var(--intv-surface, #fff);
  color: var(--intv-text, #111827);
  border-color: var(--intv-border);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--intv-text, #000) 9%, transparent);
}

.ivc-asset-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ivc-asset-meta span {
  flex: 0 0 auto;
  color: var(--intv-muted);
  font-size: 12px;
}

.ivc-asset-card p {
  margin: 0 0 10px;
  color: var(--intv-muted);
  font-size: 13px;
  line-height: 1.4;
}

.ivc-asset-body {
  display: grid;
  place-items: center;
  min-height: 110px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--intv-accent) 5%, transparent);
  overflow: hidden;
}

.ivc-asset-body img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #fff;
}

.ivc-asset-download {
  justify-self: start;
  margin: 10px;
  color: var(--intv-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ivc-asset-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--intv-accent) 22%, transparent);
  border-top-color: var(--intv-accent);
  animation: ivc-spin .8s linear infinite;
}

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

/* ==========================================================================
   Voice call — presenter stage layouts, highlight, parked questions
   ========================================================================== */

.ivc-stage-area {
  width: min(960px, 100%);
  margin: 0 auto;
}

/* split: figure and board side by side on wider viewports */
.ivc-stage-area[data-layout="split"] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ivc-stage-area[data-layout="split"] .ivc-figure,
.ivc-stage-area[data-layout="split"] .ivc-board {
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
}

/* fullscreen_visual: enlarge the figure, hide the board for a deep dive */
.ivc-stage-area[data-layout="fullscreen_visual"] .ivc-figure {
  max-width: 100%;
}

.ivc-stage-area[data-layout="fullscreen_visual"] .ivc-figure-frame img {
  max-height: min(70vh, 640px);
}

.ivc-stage-area[data-layout="fullscreen_visual"] .ivc-board {
  display: none;
}

@media (max-width: 720px) {
  .ivc-stage-area[data-layout="split"] {
    grid-template-columns: 1fr;
  }
}

/* highlight: spotlight the element the presenter is referring to */
.ivc-hl {
  outline: 2px solid var(--intv-accent, var(--accent-color, #667eea));
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--intv-accent, #667eea) 22%, transparent);
  animation: ivc-hl-pulse 1.4s ease-in-out infinite;
}

@keyframes ivc-hl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--intv-accent, #667eea) 18%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--intv-accent, #667eea) 30%, transparent); }
}

li.ivc-hl {
  outline-offset: 0;
  padding-left: 6px;
}

/* parked questions — captured to answer later */
.ivc-parked {
  box-sizing: border-box;
  width: min(960px, 100%);
  margin: 12px auto 0;
  border: 1px dashed var(--intv-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--intv-accent, #667eea) 6%, transparent);
  padding: 10px 14px;
}

.ivc-parked[hidden] { display: none; }

.ivc-parked-head {
  color: var(--intv-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.ivc-parked ul {
  margin: 0;
  padding-left: 18px;
}

.ivc-parked li {
  color: var(--intv-text);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ivc-figure-frame {
    animation: none;
  }
  .ivc-note-card,
  .ivc-asset-card,
  .ivc-asset-spinner,
  .ivc-hl {
    animation: none;
  }
}

/* ==========================================================================
   Persona library — category sections (interviewer / presenter / trainer)
   ========================================================================== */

.intv-persona-section {
  margin-bottom: 26px;
}

.intv-persona-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--intv-border);
}

.intv-persona-section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--intv-text);
}

.intv-persona-empty {
  padding: 10px 2px;
  font-size: 13px;
}

/* ==========================================================================
   Voice call — muted-by-default hint (presenter / trainer sessions)
   ========================================================================== */

.ivc-mute-hint[hidden] {
  display: none;
}

.ivc-mute-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--intv-accent) 40%, transparent);
  background: color-mix(in srgb, var(--intv-accent) 12%, transparent);
  color: var(--intv-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  animation: ivc-mute-pulse 2.2s ease-in-out infinite;
}

.ivc-mute-hint:hover {
  background: color-mix(in srgb, var(--intv-accent) 20%, transparent);
}

.ivc-mute-hint svg {
  flex: 0 0 auto;
  color: var(--intv-accent);
}

.ivc-speaking-tip {
  width: fit-content;
  max-width: min(680px, 100%);
  margin: 8px auto 0;
  color: var(--intv-muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}

@keyframes ivc-mute-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--intv-accent) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--intv-accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .ivc-mute-hint { animation: none; }
}