/* Phase 2 — Interview-zu-Antrag UI. Uses tokens.css design system. */

/* ── file line + zusatz/modifier reveal blocks ─────────────────── */

.drop-zone--has-file { border-color: var(--accent); }
.drop-zone--busy {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.iv-file-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-faint);
  border-radius: 0.5rem;
  font-size: var(--t-sm);
}
.iv-file-name { flex: 1; font-weight: var(--w-med); }

.iv-zusatz, .iv-modifier {
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
}
.iv-zusatz > summary, .iv-modifier > summary {
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-weight: var(--w-med);
  font-size: var(--t-sm);
  user-select: none;
}
.iv-zusatz > summary:hover, .iv-modifier > summary:hover { color: var(--accent); }
.iv-zusatz-body, .iv-modifier-body {
  padding: var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.iv-zusatz-body { gap: var(--s-3); }
.iv-zusatz-name { color: var(--muted); font-size: var(--t-sm); }

/* compact variant of drop-zone for nested upload areas */
.drop-zone--compact {
  padding: var(--s-4);
  border-style: dashed;
}
.drop-zone--compact p { margin: 0.2em 0; font-size: var(--t-sm); }
.drop-zone--compact .hint { font-size: var(--t-xs); }

.iv-num-input {
  width: 5rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-base);
}

/* ── progress block ─────────────────────────────────────────────── */

.iv-progress {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--accent-faint);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.iv-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: iv-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes iv-spin { to { transform: rotate(360deg); } }

.iv-progress-text {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex: 1;
}
.iv-progress-text > span:first-child { font-weight: var(--w-med); }
.iv-progress-elapsed {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: var(--t-sm);
}
.iv-progress-hint {
  width: 100%;
  font-size: var(--t-xs);
  color: var(--muted);
}

/* ── result + tabs ─────────────────────────────────────────────── */

.iv-result { margin-top: var(--s-5); }

.iv-result .meta {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: var(--t-sm);
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.iv-result .meta strong { color: var(--ink); font-weight: var(--w-med); }
.iv-meta-degraded {
  color: #b00;
  font-weight: var(--w-semi);
}
.iv-meta-notes { color: #b87; }

.iv-tabs {
  display: flex;
  gap: var(--s-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.iv-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.iv-tab:hover { color: var(--ink); }
.iv-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--w-med);
}

.iv-tab-panel { display: none; }
.iv-tab-panel.active { display: block; }

.iv-tab-actions {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

/* ── Markdown render area ──────────────────────────────────────── */

.iv-md {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  line-height: var(--lh-body);
}
.iv-md h1 { font-size: var(--t-2xl); margin-top: 0; }
.iv-md h2 { font-size: var(--t-xl); margin-top: var(--s-5); }
.iv-md h3 { font-size: var(--t-lg); margin-top: var(--s-4); }
.iv-md p, .iv-md li { font-size: var(--t-base); }
.iv-md blockquote {
  border-left: 3px solid var(--accent);
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-4);
  background: var(--accent-faint);
  color: var(--ink);
}
.iv-md table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s-4) 0;
  font-size: var(--t-sm);
}
.iv-md th, .iv-md td {
  border: 1px solid var(--border);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
}
.iv-md th { background: var(--bg-elevated, var(--accent-faint)); font-weight: var(--w-semi); }
.iv-md code {
  background: var(--accent-faint);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}
.iv-md pre {
  background: var(--bg-elevated, var(--surface));
  padding: var(--s-4);
  border-radius: 0.5rem;
  overflow-x: auto;
  border: 1px solid var(--border);
}

/* ── similar projects list ────────────────────────────────────── */

.iv-similar { display: flex; flex-direction: column; gap: var(--s-4); }
.iv-similar-item {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.iv-similar-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.iv-similar-head .rank {
  font-family: var(--font-mono, monospace);
  color: var(--muted);
}
.iv-similar-head .name {
  font-weight: var(--w-semi);
  font-size: var(--t-lg);
  flex: 1;
}
.iv-similar-head .cat {
  padding: 0.15em 0.6em;
  background: var(--accent-faint);
  border-radius: 0.375rem;
  font-size: var(--t-xs);
  color: var(--accent);
}
.iv-similar-scores {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.iv-similar-reason {
  margin: var(--s-2) 0;
  font-size: var(--t-sm);
}
.iv-similar-docs {
  margin: var(--s-2) 0 0 var(--s-4);
  font-size: var(--t-xs);
  color: var(--muted);
}

/* ── raw answers (debug tab) ──────────────────────────────────── */

.iv-raw { display: flex; flex-direction: column; gap: var(--s-2); }
.iv-raw-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}
.iv-raw-item > summary {
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.iv-raw-item.iv-raw-error { border-color: #b00; }
.iv-raw-time {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
}
.iv-raw-err { color: #b00; font-weight: var(--w-semi); }
.iv-raw-text, .iv-raw-err-msg {
  padding: var(--s-3) var(--s-4);
  margin: 0;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  font-size: var(--t-sm);
  font-family: inherit;
}
.iv-raw-err-msg { background: rgba(176, 0, 0, 0.05); color: #b00; }

.iv-empty {
  color: var(--muted);
  font-style: italic;
  padding: var(--s-5);
  text-align: center;
}

/* ── history listing ──────────────────────────────────────────── */

.iv-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.iv-hist-row {
  display: block;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.05s;
}
.iv-hist-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.iv-hist-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.iv-hist-title {
  font-weight: var(--w-semi);
  font-size: var(--t-lg);
  flex: 1;
}
.iv-hist-row-meta {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--muted);
  flex-wrap: wrap;
}
.iv-hist-err { color: #b00; }

.iv-hist-badge {
  padding: 0.15em 0.6em;
  border-radius: 0.375rem;
  font-size: var(--t-xs);
  font-weight: var(--w-med);
  background: var(--accent-faint);
  color: var(--accent);
}
.iv-hist-badge.ok { background: rgba(40, 160, 80, 0.15); color: #1d7a3a; }
.iv-hist-badge.warn { background: rgba(200, 150, 0, 0.15); color: #8a6500; }
.iv-hist-badge.err { background: rgba(176, 0, 0, 0.12); color: #b00; }
.iv-hist-badge.run { background: var(--accent-soft); color: var(--accent); }

.iv-meta-overrides {
  color: var(--accent);
  font-weight: var(--w-med);
}

/* ── modifier prompt blocks + per-question editor ───────────── */

.iv-prompt-block {
  margin-bottom: var(--s-4);
}
.iv-prompt-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.iv-prompt-head .label { margin-bottom: 0; flex: 1; }
.iv-prompt-state {
  font-size: var(--t-xs);
  color: var(--muted);
}
.iv-prompt-state--edited {
  color: var(--accent);
  font-weight: var(--w-med);
}

.iv-questions-block {
  margin-top: var(--s-4);
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
}
.iv-questions-block > summary {
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-weight: var(--w-med);
  font-size: var(--t-sm);
}
.iv-questions-body {
  padding: var(--s-4);
  border-top: 1px solid var(--border);
}

.iv-q-section { margin-bottom: var(--s-4); }
.iv-q-section-title {
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: var(--s-3) 0 var(--s-2);
}

.iv-q-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  margin-bottom: var(--s-2);
}
.iv-q-card--edited {
  border-color: var(--accent);
  background: var(--accent-faint);
}
.iv-q-card > summary {
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.iv-q-id {
  background: var(--surface);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.85em;
}
.iv-q-preview {
  flex: 1;
  color: var(--muted);
  font-size: var(--t-sm);
}
.iv-q-edit-flag {
  color: var(--accent);
  font-weight: var(--w-med);
  font-size: var(--t-xs);
}
.iv-q-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* ── Transkript-Quelle: Datei vs. tl;dv-Link ───────────────────── */
.iv-source-toggle {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.iv-source-tab {
  flex: 1;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: var(--t-sm);
  font-weight: var(--w-med);
  color: var(--muted);
  cursor: pointer;
}
.iv-source-tab:hover { color: var(--ink); }
.iv-source-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-faint);
}
.iv-url-input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
}
.iv-url-input:focus {
  outline: none;
  border-color: var(--accent);
}