/* Components the assistant renders inside a conversation.
   Both reuse a card that was written for a side rail or a centred welcome
   panel; these are the only rules needed to seat them in a message. */

/* The proposed action, rendered in the AI Analyst thread as well as the rail. */
.answer-card .action-card { margin: 10px 0 0; }

/* Follow-up suggestions in a Dashboard Studio reply; left-aligned there,
   unlike the centred set on the welcome panel. */
.builder-msg--ai .builder-chips { justify-content: flex-start; }

/* ── the AI Analyst answer's controls ───────────────────────────────────── */
/* None of these runs a query: they redraw or reorder what the answer already
   delivered, on a live turn and on one restored from history alike. */

.chart-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.chart-toolbar-gap { flex: 1; }
.chart-type-btn, .chart-size-btn {
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.chart-size-btn { width: 24px; padding: 3px 0; }
.chart-type-btn:hover:not(:disabled),
.chart-size-btn:hover:not(:disabled) { color: var(--text); border-color: var(--bhi); }
.chart-type-btn.is-on { color: var(--void); background: var(--gold); border-color: var(--gold); }
.chart-size-btn:disabled { opacity: .4; cursor: default; }

/* Sorting the result table: the whole delivered set is ordered, the first 100
   shown — so the header has to say which column is doing it. */
.data-section th.is-sortable { cursor: pointer; user-select: none; }
.data-section th.is-sortable:hover { color: var(--text); }
.data-section th.is-sorted { color: var(--gold); }
.sort-ch { margin-left: 5px; font-size: 8px; }

/* Keeping a result in the insight list. */
.keep-section { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.keep-btn {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.keep-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.keep-btn.is-added { color: var(--emerald); border-color: var(--emerald); cursor: default; }

/* What to look at next: three questions drawn from the answer above them. */
.recommend-section { padding: 10px 18px 14px; }
.recommend-label {
  font-family: var(--label-font, var(--mono));
  font-size: max(9px, var(--label-min-size, 0px));
  text-transform: var(--label-case, uppercase);
  letter-spacing: var(--label-tracking, 1.4px);
  color: var(--faint);
  margin-bottom: 8px;
}
.recommend-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  margin-bottom: 5px;
  background: var(--void);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold-dim);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.recommend-chip:hover { background: var(--lift); border-color: var(--bhi); border-left-color: var(--gold); }
.recommend-chip:last-child { margin-bottom: 0; }

/* The Analyst composer's mic, reusing the Studio's button and status row: the
   two behave identically, so they look identical. Only the seating differs —
   the Analyst's Send button is taller. */
.input-row .builder-mic-btn { align-self: flex-end; width: 46px; height: 46px; }
.input-bar .builder-voice-status { padding: 8px 2px 0; }

/* Which source a clashing table name means. Rendered inside the conversation,
   like the action card, because it is a question the turn is waiting on — not a
   setting. `--amber` reads as "attention needed", not "something broke": the
   pipeline is fine, it just cannot choose for the user. */
.source-choice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 13px 15px;
  margin: 10px 0 0;
}
.source-choice-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.source-choice-kind {
  font-family: var(--label-font, var(--mono));
  font-size: max(9px, var(--label-min-size, 0px));
  text-transform: var(--label-case, uppercase);
  letter-spacing: var(--label-tracking, .8px);
  color: var(--gold);
}
.source-choice-hdr code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}
.source-choice-q { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 10px; }
.source-choice-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.source-choice-btn {
  padding: 6px 12px;
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--display);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.source-choice-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.source-choice-btn.is-picked { border-color: var(--gold); color: var(--gold); background: var(--bhi); }
.source-choice-btn:disabled { cursor: default; opacity: .55; }
.source-choice-note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  margin-top: 9px;
}

/* ══ Imago (spec 005f): the analyst ════════════════════════════════════════════
   The conversation is centred on the sheet; the answer is one petal card (the
   agent wrote it) holding square white panels for the chart and the table (the
   database produced those). Anomalies and proposed actions are small petals.
   Theme tokens only, with fallbacks for the Imago-only ones. */
.analyst-left, .analyst-right { background: var(--lift); }
.analyst-left { width: 244px; }
.analyst-right { width: 280px; }
.side-section { padding: 18px 16px; }
.side-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.side-label::after { background: var(--border); }
.rail-empty { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.conn-indicator { background: transparent; padding: 18px 16px 14px; }
.conn-source-name { font-size: 14px; }
.conn-source-type { font-family: var(--sans); font-size: 12px; background: var(--surface); }
.example-chip {
  border-left: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px 14px; font-size: 14px; margin-bottom: 8px;
}
.example-chip:hover { border-color: var(--accent-dim); border-left-color: var(--accent-dim); background: var(--accent-bg); }
.suggestions-refresh { width: 28px; height: 28px; }
.convo-new-btn { width: 30px; height: 30px; font-size: 16px; }
.convo-row { border-radius: var(--r); }
.convo-row.is-open { border-color: var(--accent-dim); background: var(--accent-mid); }
.convo-title { font-size: 14px; }
.convo-meta { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.convo-act { width: 28px; height: 28px; }

.analyst-main { background: var(--depth); }
.convo { padding: 32px max(24px, calc((100% - 860px) / 2)); gap: 24px; }
.empty-state { max-width: 460px; gap: 14px; }
.empty-mark { opacity: .9; }
.empty-state h2 { font-size: 26px; letter-spacing: -0.02em; }
.empty-state p { font-size: 15.5px; line-height: 1.6; }

.msg-user { max-width: min(600px, 90%); }
.msg-user .bubble {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); font-size: 16px; line-height: 1.55; padding: 12px 16px;
}
.answer-card {
  background: var(--ai-bg, var(--surface));
  border: 1px solid var(--ai-border, var(--border));
  border-radius: var(--petal-lg, 32px 6px 32px 6px);
  padding-bottom: 6px;
}
[dir="rtl"] .answer-card { border-radius: 6px 32px 6px 32px; }
.answer-prov {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 22px 0; font-size: 14px; color: var(--muted);
}
.answer-prov b { color: var(--text); font-weight: 600; }
.pipe-track { background: transparent; border-bottom: 0; padding: 14px 22px 4px; }
.p-dot { background: var(--surface); border-color: var(--bhi); }
.p-node:not(:last-child)::after { background: var(--bhi); }
.p-node.ok .p-dot { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.p-node.ok:not(:last-child)::after { background: var(--accent); opacity: .7; }
.p-node.run .p-dot { border-color: var(--accent); background: var(--accent-mid); animation: none; }
.p-node.run:not(:last-child)::after { background: linear-gradient(90deg, var(--accent) 0%, var(--bhi) 100%); }
.p-node.err .p-dot { box-shadow: none; }
.p-lbl { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.p-node.run .p-lbl, .p-node.ok .p-lbl { color: var(--text); }
.answer-body { font-family: var(--sans); font-size: 16.5px; line-height: 1.6; border-bottom: 0; padding: 14px 22px; max-width: 72ch; }
.chart-section, .data-section {
  margin: 8px 22px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.chart-section { padding: 14px 16px 8px; }
.data-section { max-height: 260px; }
.data-section th { background: var(--lift); font-size: 13px; padding: 9px 14px; }
.data-section td { font-family: var(--sans); font-size: 14px; padding: 8px 14px; font-variant-numeric: tabular-nums; border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent); }
.chart-type-btn { font-family: var(--sans); font-size: 13.5px; }
.keep-section, .steps-section, .recommend-section { padding: 6px 22px 10px; border-bottom: 0; }
.keep-btn { font-family: var(--sans); font-size: 14px; min-height: 36px; border-radius: var(--r); }
.steps-section details > summary { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text); }
.step-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.step-q { font-family: var(--sans); font-size: 14px; }
.step-sql { color: var(--accent); background: var(--lift); font-size: 12.5px; font-variant-ligatures: none; }
.step-meta { font-size: 13px; }
.recommend-label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
.recommend-chip {
  display: inline-flex; width: auto; margin: 0 8px 8px 0; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--bhi); border-left-width: 1px; border-radius: var(--r-pill, 9999px);
  background: var(--surface); font-size: 14px; align-items: center;
}
.recommend-chip:hover { border-left-color: var(--accent-dim); border-color: var(--accent-dim); background: var(--accent-bg); }

.input-bar { background: var(--depth); border-top: 0; padding: 12px max(24px, calc((100% - 860px) / 2)) 22px; }
.input-row {
  align-items: flex-end; gap: 8px; padding: 8px;
  background: var(--surface); border: 2px solid var(--accent); border-radius: 16px;
}
.input-row textarea { border: 0; padding: 8px 10px; font-size: 16px; background: transparent; }
.input-row textarea:focus { border: 0; box-shadow: none; }
.input-row:focus-within { box-shadow: 0 0 0 3px var(--accent-bg); }
.send-btn {
  height: 44px; border-radius: 12px; font-family: var(--sans); font-weight: 500;
  background: var(--accent); color: var(--on-accent, var(--void));
}
.input-row .builder-mic-btn { width: 44px; height: 44px; border-radius: 12px; }

.insight-card, .action-card {
  background: var(--ai-bg, var(--surface));
  border: 1px solid var(--ai-border, var(--border));
  border-radius: var(--petal-sm, 18px 4px 18px 4px);
  padding: 14px 16px; margin-bottom: 10px;
}
[dir="rtl"] .insight-card, [dir="rtl"] .action-card { border-radius: 4px 18px 4px 18px; }
.insight-card::before { display: none; }
.insight-text { font-size: 14px; line-height: 1.55; }
.insight-meta { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.sev-track { height: 4px; border-radius: 2px; }
.sev-fill, .insight-card.high .sev-fill { background: var(--accent); }
.insight-card.high .sev-fill { background: var(--text); }
.action-type {
  font-size: 12.5px; color: var(--ai-ink, var(--accent)); background: transparent;
  border: 0; padding: 0; margin-bottom: 6px; font-weight: 600;
}
.action-type::first-letter { text-transform: uppercase; }
.action-when { font-family: var(--sans); font-size: 12px; }
.action-title { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.35; }
.action-detail { font-size: 13.5px; line-height: 1.5; }
.action-btns { gap: 8px; }
.action-btns button { min-height: 36px; border-radius: var(--r); font-family: var(--sans); font-size: 13.5px; }
.btn-approve { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.btn-approve:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.btn-reject { background: var(--surface); border-color: var(--bhi); color: var(--text); }
.action-status { font-family: var(--sans); font-size: 12.5px; font-weight: 600; }
.action-outcome { font-size: 13px; }
.kept-card { border-radius: var(--r-lg); }
.kept-title { font-size: 14px; }
.kept-meta { font-family: var(--sans); font-size: 12.5px; }
.source-choice { border-radius: var(--petal-sm, 18px 4px 18px 4px); background: var(--ai-bg, var(--surface)); border-color: var(--ai-border, var(--border)); }

.msg-user { margin-left: auto; width: fit-content; }
.msg-user + .msg-bot { margin-top: 12px; }
.answer-card .action-card { margin: 8px 22px 16px; }
.kept-card { border-left: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; }
.data-section th.is-num, .data-section td.is-num { text-align: right; }