.overlay {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 24px;
}

.modal {
  background: var(--color-bg-card, #080908);
  border: 1px solid var(--color-border, #161a16);
  border-radius: 12px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-height: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #1e1e2e);
}

.title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary, #e0e0e0);
}

.closeBtn {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  &:hover { background: var(--bg-hover, #1a1a2e); color: var(--text-primary, #e0e0e0); }
}

.body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Hero Card */
.heroCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.heroRunning {
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.08), rgba(0, 200, 100, 0.02));
  border: 1px solid rgba(0, 200, 100, 0.2);
}

.heroStopped {
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
}

.heroLeft {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heroStatus {
  display: flex;
  align-items: center;
  gap: 8px;
}

.statusDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dotGreen {
  background: #00c864;
  box-shadow: 0 0 6px rgba(0, 200, 100, 0.4);
}

.dotGray {
  background: #555;
}

.heroLabel {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.heroMeta {
  font-size: 12px;
  color: var(--text-muted, #888);
  display: flex;
  align-items: center;
  gap: 6px;
}

.heroActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.startBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #00c864;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  &:hover { background: #00d874; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}

/* 📖 Bigger start button for the stopped state — more prominent CTA. */
.startBtnBig {
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 10px;
}

.stopBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  &:hover { background: #e04555; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}

.refreshBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 8px;
  color: var(--text-muted, #888);
  cursor: pointer;
  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
}

/* Quick Setup */
.quickSetup {
  margin-bottom: 16px;
}

/* 📖 Hero glow when running — makes the quick setup card visually prominent. */
.quickSetupHero {
  border: 1px solid rgba(0, 200, 100, 0.25);
  box-shadow: 0 0 16px rgba(0, 200, 100, 0.08);
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.05), transparent);
}

/* 📖 "Copy all" button — sits at the right of the Quick Setup title. */
.copyAllBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  &:hover { color: var(--text-primary, #e0e0e0); border-color: var(--accent, #00c864); }
}

.sectionTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quickRows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 8px;
  padding: 10px 12px;
}

.quickRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quickLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #888);
  min-width: 60px;
  text-transform: uppercase;
}

.quickValue {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-primary, #0f0f17);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', monospace;
}

.copyBtn {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
}

/* Probe Mode */
.section {
  margin-bottom: 16px;
}

.probeModes {
  display: flex;
  gap: 8px;
}

.probeBtn {
  padding: 6px 14px;
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
  background: var(--bg-secondary, #14141f);
  color: var(--text-secondary, #aaa);
  font-size: 12px;
  cursor: pointer;
  text-transform: capitalize;
  &:hover { border-color: var(--text-muted, #888); }
}

.probeActive {
  background: rgba(0, 200, 100, 0.1);
  border-color: rgba(0, 200, 100, 0.3);
  color: #00c864;
  font-weight: 600;
}

/* Model Health */
.modelList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modelRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-secondary, #14141f);
  border-radius: 6px;
  font-size: 12px;
}

.modelPriority {
  color: var(--text-muted, #888);
  min-width: 22px;
  font-weight: 600;
}

.modelName {
  flex: 1;
  color: var(--text-primary, #e0e0e0);
  font-family: 'SF Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelScore {
  color: var(--text-muted, #888);
  min-width: 40px;
  text-align: right;
}

.modelLatency {
  color: var(--text-muted, #888);
  min-width: 50px;
  text-align: right;
}

.circuitBadge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 70px;
  text-align: center;
}

.circuitClosed { background: rgba(0, 200, 100, 0.15); color: #00c864; }
.circuitOpen { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
.circuitHalfOpen { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.circuitAuth { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
.circuitUnknown { background: rgba(128, 128, 128, 0.15); color: #888; }

/* Request Log */
.logList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: 'SF Mono', monospace;
}

.logOk { color: #00c864; min-width: 28px; }
.logErr { color: #dc3545; min-width: 28px; }
.logModel { color: var(--text-secondary, #aaa); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logLatency { color: var(--text-muted, #888); min-width: 50px; text-align: right; }
.logTokens { color: var(--text-muted, #888); min-width: 60px; text-align: right; }
.logFailover {
  font-size: 9px;
  padding: 1px 4px;
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
  border-radius: 3px;
  text-transform: uppercase;
}

.logEmpty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 12px;
  background: var(--bg-secondary, #14141f);
  border: 1px dashed var(--border, #1e1e2e);
  border-radius: 8px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Set Manager (add / remove / drag-and-drop) ─────────────────────── */

.setMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-bottom: 8px;
}

.setMetaName {
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  font-family: 'SF Mono', monospace;
}

.setActions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.smallBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  &:hover { color: var(--text-primary, #e0e0e0); border-color: var(--text-muted, #888); }
  &:disabled { opacity: 0.4; cursor: not-allowed; }
}

.primaryBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #00c864;
  color: #000;
  border: 1px solid #00c864;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  &:hover { background: #00d874; border-color: #00d874; }
  &:disabled { opacity: 0.4; cursor: not-allowed; }
}

.setList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
}

.setEmpty {
  padding: 20px 16px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 12px;
  background: var(--bg-secondary, #14141f);
  border: 1px dashed var(--border, #1e1e2e);
  border-radius: 8px;
}

.setEmptyTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  margin-bottom: 4px;
}

.setEmptyHint {
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.5;
}

.setEmptyHint strong {
  color: var(--text-secondary, #aaa);
}

.setRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
}

.setRow:hover {
  background: var(--bg-hover, #1a1a2e);
  border-color: var(--text-muted, #888);
}

.setRowDragging {
  opacity: 0.5;
  transform: scale(0.99);
  cursor: grabbing;
}

.setRowDropTarget {
  border-color: #00c864;
  background: rgba(0, 200, 100, 0.06);
}

.setRowDropTargetAbove {
  border-top: 2px solid #00c864;
}

.setRowDropTargetBelow {
  border-bottom: 2px solid #00c864;
}

.setDragHandle {
  color: var(--text-muted, #888);
  cursor: grab;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  user-select: none;
  &:hover { color: var(--text-secondary, #aaa); }
}

.setPriority {
  min-width: 28px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted, #888);
  text-align: right;
  font-family: 'SF Mono', monospace;
}

.setKey {
  flex: 1;
  color: var(--text-primary, #e0e0e0);
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setTier {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-primary, #0f0f17);
  color: var(--text-muted, #888);
  min-width: 32px;
  text-align: center;
  text-transform: uppercase;
}

/* 📖 Priority badge variants — make the fallback chain semantics explicit
   (issue #120). Primary gets the accent color so users instantly see which
   model serves every request; fallbacks stay muted. */
.setPriorityPrimary {
  min-width: 52px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 200, 100, 0.14);
  color: var(--accent, #00c864);
  border: 1px solid rgba(0, 200, 100, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
}

.setPriorityFallback {
  text-transform: none;
  opacity: 0.85;
}

/* 📖 Next-to-serve row — subtle accent left border + tint so the user can
   see at a glance which model will handle the next chat completion.
   Only applied when the daemon is running and routingOrder is known. */
.setRowNext {
  background: linear-gradient(90deg, rgba(0, 200, 100, 0.07), transparent 60%);
  border-left: 2px solid var(--accent, #00c864);
  padding-left: 8px;
}

/* 📖 Priority legend — one-line explainer above the set list. */
.priorityLegend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-muted, #888);
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
}

.legendPrimary {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--accent, #00c864);
}

.legendFallback {
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

.legendSeparator {
  color: var(--text-muted, #888);
  opacity: 0.7;
}

.legendNext {
  margin-left: auto;
  color: var(--text-secondary, #aaa);
}

.legendNext code {
  color: var(--accent, #00c864);
  font-family: 'SF Mono', monospace;
  font-size: 10px;
}

.setRowBtns {
  display: flex;
  gap: 2px;
}

.iconBtn {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover { color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); }
  &:disabled { opacity: 0.3; cursor: not-allowed; }
}

.removeBtn:hover { color: #ff6b6b; background: rgba(220, 53, 69, 0.1); }

/* Add picker */
.pickerPanel {
  margin-top: 10px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pickerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

.pickerSearch {
  display: flex;
  gap: 6px;
}

.pickerInput {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-primary, #0f0f17);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  &:focus { border-color: var(--accent, #00c864); }
}

.pickerSelect {
  padding: 6px 10px;
  background: var(--bg-primary, #0f0f17);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  max-width: 140px;
}

.pickerList {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pickerItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: 'SF Mono', monospace;
  color: var(--text-primary, #e0e0e0);
  border-radius: 4px;
  cursor: pointer;
  &:hover { background: var(--bg-hover, #1a1a2e); }
}

.pickerItemAdded {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.pickerProvider {
  color: var(--text-muted, #888);
  min-width: 90px;
}

.pickerModel {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickerBadge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 140, 0, 0.15);
  color: #ff8c00;
  text-transform: uppercase;
  font-weight: 700;
}

.pickerBadgeOk {
  background: rgba(0, 200, 100, 0.15);
  color: #00c864;
}

.pickerEmpty {
  padding: 10px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 12px;
}

.saveStatus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  font-weight: 600;
}

.saveStatusOk { color: #00c864; }
.saveStatusErr { color: #dc3545; }

/* ── Auto-heal banner ────────────────────────────────────────── */

.autoHealBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
}

.autoHealLeft {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.autoHealIcon {
  font-size: 18px;
  color: #ffc107;
  flex-shrink: 0;
  line-height: 1.4;
}

.autoHealTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 2px;
}

.autoHealHint {
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}

.autoHealHint strong {
  color: var(--text-secondary, #aaa);
}

.autoHealActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   📖 Probe-all button + progress bar (AI Latency benchmarks on the set).
   ════════════════════════════════════════════════════════════════════════ */

/* 📖 Active state for the Probe button while benchmarks run. */
.probeBtnActive {
  border-color: var(--accent, #00c864);
  color: var(--accent, #00c864);
  cursor: progress;
}

/* 📖 Progress card shown below the set actions while probing. */
.probeProgress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg-secondary, #14141f);
  border: 1px solid rgba(0, 200, 100, 0.2);
  border-radius: 6px;
}

.probeProgressLabel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--accent, #00c864);
  font-weight: 600;
}

.probeProgressCount {
  margin-left: auto;
  color: var(--text-secondary, #aaa);
  font-weight: 500;
  font-family: 'SF Mono', monospace;
}

.probeProgressBar {
  height: 4px;
  background: var(--bg-primary, #0f0f17);
  border-radius: 2px;
  overflow: hidden;
}

.probeProgressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #00c864), rgba(0, 200, 100, 0.6));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   📖 AI Latency cell in each set row — populated by Probe all.
   ════════════════════════════════════════════════════════════════════════ */

.aiLatencyCell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 78px;
  font-size: 10px;
  font-family: 'SF Mono', monospace;
  justify-content: flex-end;
}

.aiLatencyMs {
  font-weight: 700;
  color: #b400ff;
}

.aiLatencyTps {
  color: var(--text-muted, #888);
  font-size: 9px;
}

.aiLatencySpin {
  color: var(--accent, #00c864);
  letter-spacing: 2px;
  animation: probeSpin 0.8s steps(3, end) infinite;
}

@keyframes probeSpin {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.aiLatencyErr {
  color: var(--error, #ff5a5a);
  font-size: 10px;
}

.aiLatencyNone {
  color: var(--text-muted, #888);
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════════════════
   📖 Mini Playground — live router test inside the Router view.
   ════════════════════════════════════════════════════════════════════════ */

.miniPgHint {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted, #888);
}

.miniPgHint code {
  color: var(--accent, #00c864);
  font-family: 'SF Mono', monospace;
}

.miniPg {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--bg-primary, #0f0f17);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.miniPgEmpty {
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 11px;
  padding: 18px 8px;
}

.miniPgMsg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 88%;
}

.miniPgUser {
  align-self: flex-end;
  align-items: flex-end;
}

.miniPgAssistant {
  align-self: flex-start;
  align-items: flex-start;
}

.miniPgBubble {
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary, #e0e0e0);
}

.miniPgUser .miniPgBubble {
  background: rgba(0, 200, 100, 0.12);
  border: 1px solid rgba(0, 200, 100, 0.2);
  border-bottom-right-radius: 4px;
}

.miniPgAssistant .miniPgBubble {
  background: var(--bg-secondary, #14141f);
  border: 1px solid var(--border, #1e1e2e);
  border-bottom-left-radius: 4px;
}

.miniPgTyping {
  color: var(--accent, #00c864);
  letter-spacing: 3px;
  animation: probeSpin 0.9s steps(3, end) infinite;
}

.miniPgError {
  display: block;
  margin-top: 4px;
  color: var(--error, #ff5a5a);
  font-size: 11px;
}

.miniPgAborted {
  display: block;
  margin-top: 4px;
  color: var(--text-muted, #888);
  font-size: 10px;
  font-style: italic;
}

/* 📖 Target badge under each user bubble — shows the Primary model the
   router will try first for this message (priority-first routing, #120).
   If failover kicks in, the reply's .miniPgRouted badge shows a different
   model, making the fallback chain visible at a glance. */
.miniPgTarget {
  font-size: 10px;
  color: var(--text-muted, #888);
  font-family: 'SF Mono', monospace;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.miniPgTarget svg {
  color: var(--accent, #00c864);
}

/* 📖 Routed-via badge under each assistant reply — shows WHICH model the
   priority-first router actually picked for this message (issue #120). */
.miniPgRouted {
  font-size: 10px;
  color: var(--text-muted, #888);
  font-family: 'SF Mono', monospace;
  padding: 0 4px;
}

.miniPgRouted span {
  color: var(--accent, #00c864);
}

.miniPgInputRow {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.miniPgInput {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-primary, #0f0f17);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: 8px;
  color: var(--text-primary, #e0e0e0);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.miniPgInput:focus {
  border-color: var(--accent, #00c864);
}

.miniPgInput::placeholder {
  color: var(--text-muted, #888);
}

.miniPgSendBtn,
.miniPgStopBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.miniPgSendBtn {
  background: var(--accent, #00c864);
  color: #000;
}

.miniPgSendBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.miniPgStopBtn {
  background: var(--error, #ff5a5a);
  color: #fff;
}