/* Ask Mira — data agent chat page */

/* ===================== Surface layout ======================================
   One container, swapped by am-mode-{page|dock|closed} + am-{landing|thread} (set by
   callbacks/ask_mira.surface_class). The single shared composer (.am-inputwrap) sits in the
   page hero on the landing and docks to the bottom on a thread / in the panel — it never
   moves in the DOM, only its placement does. */
.am-surface { display: flex; flex-direction: column; min-height: 100%; }

/* ---- PAGE landing: hero (title | composer + chips) over a 2-col main (feed | recent) ---- */
/* The scroll container (.mira-dock-body) deliberately has no bottom padding — the sticky
   composer has to reach the very bottom edge — so the landing owns its own. Enough to clear
   the feed's last card, and the "show earlier highlights" control below it, from the
   window edge once the archive has been walked back a day or two. */
.am-mode-page.am-landing {
  display: grid; width: 100%; max-width: 1140px; margin: 0 auto; padding-bottom: 56px;
  grid-template-columns: minmax(180px, 250px) 1fr;
  grid-template-areas:
    "hero     composer"
    "hero     chips"
    "main     main";
  column-gap: 32px; row-gap: 10px; align-content: start;
}
.am-mode-page.am-landing #chat-hero    { grid-area: hero; align-self: center; }
.am-mode-page.am-landing .am-inputwrap { grid-area: composer; }
.am-mode-page.am-landing #chat-chips   { grid-area: chips; }
.am-mode-page.am-landing #chat-landing { grid-area: main; margin-top: 16px; }
.am-mode-page.am-landing #chat-thread-wrap { display: none; }

/* ---- PAGE thread: thread scrolls, composer docks to the bottom ---- */
.am-mode-page.am-thread { width: 100%; max-width: 820px; margin: 0 auto; }
.am-mode-page.am-thread #chat-hero,
.am-mode-page.am-thread #chat-chips,
.am-mode-page.am-thread #chat-landing { display: none; }
.am-mode-page.am-thread #chat-thread-wrap { order: 2; flex: 1; }
.am-mode-page.am-thread .am-inputwrap    { order: 3; }

/* ---- DOCK (both states): a lean stacked panel — Suggested, then Recent, composer at the
   bottom. No hero (the dock header already says "Ask Mira") and no highlights feed. The
   2-col main is page-only (below), so here #chat-landing is a plain block that stacks. ---- */
.am-mode-dock #chat-hero { display: none; }
.am-mode-dock #chat-suggested-head { order: 1; }
.am-mode-dock #chat-chips         { order: 2; }
.am-mode-dock #chat-landing       { order: 3; }
.am-mode-dock #chat-thread-wrap   { order: 3; flex: 1; }
/* Always dock the composer to the very bottom: in the flex column an auto top margin eats
   the free space above it, so with the Recent section collapsed (short content) it still
   sits at the panel's bottom rather than floating up under the chips. */
.am-mode-dock .am-inputwrap       { order: 4; margin-top: auto; }
/* Dock-only elements (the Suggested label); hidden on the page, where chips live bare in
   the hero. Compound selectors so specificity — not source order — decides, since the
   later `.am-zone-heading { display:flex }` rule would otherwise re-show it on the page. */
.am-zone-heading.am-dock-only { display: none; }
.am-mode-dock .am-zone-heading.am-dock-only { display: flex; }

/* ---- Hero ---- */
.am-hero-titlerow { display: flex; align-items: center; gap: 10px; }
.am-hero-spark { color: #3b5bdb; flex: none; filter: drop-shadow(0 1px 4px rgba(59,91,219,.3)); }
.am-hero-title { font-size: 30px; font-weight: 680; letter-spacing: -.02em; margin: 0; line-height: 1; }
.am-sub { color: #6b7180; font-size: 13.5px; margin: 12px 2px 0; max-width: 240px; }

/* ---- Chips: one line on the page (clip with a soft fade), stacked in the dock ---- */
.am-chips { display: flex; gap: 8px; }
.am-mode-page.am-landing #chat-chips {
  overflow: hidden; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.am-mode-dock .am-chips { flex-direction: column; margin-bottom: 22px; }
.am-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #e2e2e8; background: #fafafb; border-radius: 999px;
  padding: 8px 13px; font-size: 12.5px; color: #4a4a55; cursor: pointer;
  white-space: nowrap; text-align: left;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.am-chip:hover { background: #fff; border-color: #c7d1f5; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.am-chip-icon { color: #8b93b8; flex: none; }
.am-chip:hover .am-chip-icon { color: #4f5bd5; }
.am-chip-text { line-height: 1.3; }

/* ---- Shared zone heading: a quiet label + trailing hairline (Daily Highlights / Recent) ---- */
.am-zone-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; }
.am-zone-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; flex: none; white-space: nowrap;
}
.am-zone-rule { height: 1px; background: #ececf1; flex: 1; }

/* ---- Landing main: Daily Highlights feed (2fr) + Recent rail (1fr) — PAGE ONLY.
   The dock leaves #chat-landing a plain block so feed + recent stack, and the feed is
   hidden there entirely (below). Scoping the grid to the page is what keeps the dock from
   ever falling into a wasteful 2-column state (incl. the brief am-mode-closed frame). ---- */
.am-mode-page .am-landing { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
.am-recent-col { min-width: 0; }
.am-feed-col { min-width: 0; display: none; }          /* highlights feed: page landing only */
.am-mode-page .am-feed-col { display: block; }

/* Walk-back control under the feed. Quiet by default — it is an offer, not a call to
   action — and only drawn at all when there is an archive to walk into (its style is
   written by callbacks/ask_mira.load_highlights). */
.am-hl-more {
  align-self: start;
  margin: 14px 0 4px;
  padding: 7px 14px;
  border: 1px solid #e7e9f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.am-hl-more:hover {
  color: #26262c;
  border-color: #c7d1f5;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

/* Each archived day repeats the zone heading, so the feed reads as a dated timeline rather
   than one long undifferentiated list. */
#chat-hl-past .am-zone-heading { margin-top: 22px; }

/* ---- Daily Highlights news feed ---- */
.am-feed { display: flex; flex-direction: column; gap: 12px; }
.am-hl-card {
  display: grid; grid-template-columns: 1fr 128px; gap: 16px; align-items: stretch;
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid #e7e9f0; border-radius: 14px; padding: 15px 17px;
  box-shadow: 0 1px 2px rgba(19,28,48,.03);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.am-hl-card:hover { border-color: #d6dae4; box-shadow: 0 8px 24px rgba(19,28,48,.07); transform: translateY(-1px); }
.am-hl-body { min-width: 0; }
.am-hl-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.am-hl-sev {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650;
  padding: 2px 8px; border-radius: 999px;
}
.am-hl-sev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.am-hl-meta { font-size: 11.5px; color: #94a0b3; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.am-hl-cat { text-transform: capitalize; }
.am-hl-mdot { width: 3px; height: 3px; border-radius: 50%; background: #c3c9d4; }
.am-hl-entity { color: #616d81; font-weight: 550; }
.am-hl-title { font-size: 15px; font-weight: 640; color: #1c2536; line-height: 1.28; letter-spacing: -.005em; margin-bottom: 4px; }
.am-hl-insight { font-size: 12.75px; color: #616d81; line-height: 1.45; }
.am-hl-thumb {
  align-self: stretch; min-height: 76px; border-radius: 10px; overflow: hidden;
  background: #fbfcfe; border: 1px solid #eef0f5; display: grid; place-items: center;
}
.am-hl-thumb-graph { width: 100%; }
.am-hl-thumb-icon { width: 100%; height: 100%; display: grid; place-items: center; }
/* severity palette — chips and the fallback thumbnail tiles share it (platform RAG) */
.am-hl-red   { color: #b34a3b; background: #fbeeeb; }
.am-hl-amber { color: #9a801a; background: #f9f4e2; }
.am-hl-green { color: #57881a; background: #eef7e2; }
.am-hl-info  { color: #64748b; background: #eef1f5; }

/* ---- Recent rail: heading doubles as the disclosure toggle ---- */
.am-history-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; margin: 0 0 10px;
}
.am-history-caret { color: #b0b4bd; transition: transform .15s ease; flex: none; }
.am-history-toggle.am-open .am-history-caret { transform: rotate(90deg); }
.am-history { display: flex; flex-direction: column; gap: 2px; }
.am-history-collapsed { display: none; }                                /* dock: collapsed */
.am-mode-page .am-history-capped > *:nth-child(n+7) { display: none; }   /* page: first 6 */
/* A history row is a flex container: the open button fills the row, the trash button sits at
   the end and only appears on hover/focus so it never clutters the resting list. */
.am-hist-item {
  display: flex; align-items: center;
  border: 1px solid transparent; background: transparent; border-radius: 9px;
}
.am-hist-item:hover { background: #fff; border-color: #e7e9f0; }
.am-hist-open {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0; background: transparent; border: none; border-radius: 9px;
  padding: 8px 10px; cursor: pointer; text-align: left;
}
.am-hist-icon { color: #b7bcc7; flex: none; }
.am-hist-title {
  font-size: 13px; color: #3a3a42; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-hist-date { font-size: 11.5px; color: #a8a8b2; flex: none; }
.am-hist-del {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0 5px 0 2px;
  background: transparent; border: none; border-radius: 6px; cursor: pointer;
  color: #b0b4bd; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
/* Reveal on row hover, and on keyboard focus so it stays reachable without a pointer. */
.am-hist-item:hover .am-hist-del,
.am-hist-item:focus-within .am-hist-del { opacity: 1; }
.am-hist-del:hover { background: #fdecec; color: #d1453b; }
.am-hist-del-icon { flex: none; }
.am-empty { color: #9a9aa4; font-size: 13px; padding: 6px 0; }

/* Thread */
.am-thread-wrap { margin-top: 8px; }
.am-thread { display: flex; flex-direction: column; gap: 14px; }
.am-msg { border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.am-user { align-self: flex-end; background: #eef1ff; max-width: 78%; }
.am-assistant { align-self: flex-start; background: #f6f6f8; width: 100%; }
.am-error { align-self: flex-start; background: #fdecec; color: #8a1c1c; }
.am-thinking { color: #8a8a94; font-style: italic; }

/* Live progress checklist */
.am-pending { display: flex; flex-direction: column; gap: 4px; }
.am-step { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.4; }
.am-step-done { color: #9a9aa4; }
.am-step-done .am-step-check { color: #7AC020; font-weight: 700; }
.am-step-active { color: #26262c; }
.am-step-timer {
  margin-left: 6px; color: #b0b0b8; font-size: 12px;
  font-variant-numeric: tabular-nums; min-width: 2.5em;
}
.am-dots::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: am-dots 1.4s steps(1, end) infinite;
}
@keyframes am-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}
.am-stop-btn {
  align-self: flex-start; margin-top: 6px;
  border: 1px solid #d7d7de; background: #fff; color: #6b6b76;
  border-radius: 8px; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
}
.am-stop-btn:hover:not(:disabled) { background: #fdecec; border-color: #e0b4b4; color: #8a1c1c; }
.am-stop-btn:disabled { color: #b0b0b8; cursor: default; }
.am-md p:last-child { margin-bottom: 0; }
/* Entity links the agent embeds in prose (mira: markers → detail pages). */
.am-md a { color: #0d6efd; text-decoration: none; font-weight: 500; }
.am-md a:hover { text-decoration: underline; }
.am-md table { border-collapse: collapse; margin: 8px 0; }
.am-md th, .am-md td { border: 1px solid #e2e2e8; padding: 4px 8px; font-size: 13px; }
.am-artifact { margin-top: 10px; }
.am-fail-note {
  margin-top: 10px; font-size: 12.5px; color: #8a5a1c; line-height: 1.45;
  background: #fdf6ec; border: 1px solid #f0e0c0; border-radius: 8px; padding: 8px 10px;
}
.am-fail-icon { font-weight: 700; }
/* charts sit directly on the bubble (no nested box) */
.am-chart { }

/* Tables in chat. The AG-Grid draws its own row lines, so we wrap it in ONE light hairline
   frame (rounded, corners clipped) rather than stacking a box around the grid's own box.
   Grid theme borrowed from the Site Review grid — no borders, an airy header, quiet rows. */
.am-table-block { margin-top: 10px; }
.am-table-frame {
  border: 1px solid #eef1f5; border-radius: 8px; overflow: hidden; background: #fff;
}
.am-table {
  width: 100%;
  --ag-borders: none;
  --ag-row-border-color: #eef1f5;
  --ag-header-background-color: #f8fafc;
  --ag-header-foreground-color: #64748b;
  --ag-header-column-separator-display: none;
  --ag-row-hover-color: #f6f9ff;
  --ag-selected-row-background-color: transparent;
}

/* Download-as-CSV — a quiet, icon-led ghost button above a table (no chrome until hover, so
   it never competes with the data), and the primary action on a standalone export card. */
.am-table-actions { display: flex; justify-content: flex-end; margin-bottom: 3px; }
.am-dl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #9096a0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 7px; cursor: pointer; transition: background .12s, color .12s;
}
.am-dl-btn:hover { background: #eef1fb; color: #1E40AF; }
.am-dl-btn:active { transform: scale(.96); }
.am-dl-icon { flex: none; }
/* Standalone export card (agent's export_csv) — here the button IS the action, so give it a
   touch more presence than the ghost table button. */
.am-download-wrap { margin-top: 10px; }
.am-dl-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #eef1f5; border-radius: 8px; padding: 10px 12px;
}
.am-dl-card-icon { flex: none; color: #1E40AF; }
.am-dl-card-text { flex: 1 1 auto; min-width: 0; }
.am-dl-card-name {
  font-size: 13.5px; font-weight: 600; color: #22232a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-dl-card-meta { font-size: 12px; color: #8a9098; margin-top: 1px; }
.am-dl-card .am-dl-btn {
  flex: none; color: #1E40AF; background: #eef1fb; padding: 4px 10px;
}
.am-dl-card .am-dl-btn:hover { background: #e0e8fc; }

/* Composer. Static in the page hero on the landing; sticky at the bottom of the scroll
   column on a thread and in the dock (where it stays aligned with the messages, respecting
   the nav rail, instead of centering on the whole viewport). */
.am-inputwrap { padding: 4px 0 6px; }
/* Sticky in chat position, with a solid ground and an explicit layer so the thread's
   charts/tables scroll cleanly UNDER it instead of showing through (Plotly graphs can
   otherwise paint over a transparent, unlayered bar). A short fade above the bar keeps the
   soft transition without letting content bleed into the composer itself. */
.am-thread .am-inputwrap,
.am-mode-dock .am-inputwrap {
  position: sticky; bottom: 0; z-index: 20; padding: 10px 0 10px; background: #fff;
}
.am-thread .am-inputwrap::before,
.am-mode-dock .am-inputwrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff); pointer-events: none;
}
.am-inputbar {
  display: flex; gap: 8px; align-items: center;
  background: #fff; border: 1.5px solid #d6dae4; border-radius: 14px;
  padding: 6px 6px 6px 14px; box-shadow: 0 1px 2px rgba(19,28,48,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.am-inputbar:focus-within { border-color: #3b5bdb; box-shadow: 0 0 0 4px #eef1fb; }
.am-disclaimer {
  font-size: 11px; color: #9a9aa4; text-align: center; line-height: 1.4;
  padding: 6px 8px 4px;
}
/* The AI-disclaimer belongs with an answer, not the landing hero — show it only once
   the composer is in chat position (an open thread or the dock). */
.am-mode-page.am-landing .am-disclaimer { display: none; }
/* Attached-view chip — sits with the composer, so what the question will be
   asked about stays visible while the thread scrolls. Modelled on an editor's
   file attachment: an icon plus what is attached, and clicking the chip cycles
   the scope (eye = the visible rows, page = this page's whole dataset,
   globe = the whole study). Always visible, so the frame is never a guess. */
.am-ctxbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 2px 6px;
}
.am-ctxnav {
  display: none; align-items: center; background: none; border: 0;
  padding: 2px; cursor: pointer; color: #8a8a95;
}
.am-ctxbar-multi .am-ctxnav { display: inline-flex; }
.am-ctxnav:hover { color: #2c3a7a; }
.am-ctxchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef1ff; border: 1px solid #c7d1f5; border-radius: 12px;
  padding: 3px 10px; font-size: 12px; color: #2c3a7a; cursor: pointer;
  text-align: left; animation: am-ctx-pop 0.35s ease;
}
.am-ctxchip:hover { background: #e3e8ff; border-color: #aebbf0; }
.am-ctxchip .am-ctxchip-icon { flex: none; }
/* Study scope: no page is attached, so the chip reads neutral rather than accented. */
.am-ctxchip-study {
  background: #f2f2f4; border-color: #dcdce2; color: #6a6a74;
}
.am-ctxchip-study:hover { background: #ececf0; border-color: #cfcfd8; }
/* A capture replaces the chip's children, replaying this — so a re-capture or a
   scope change is visibly acknowledged even when the resulting text is unchanged. */
@keyframes am-ctx-pop {
  0%   { transform: scale(0.96); background: #dfe6ff; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.am-ctxchip-past {
  display: inline-flex; margin-bottom: 6px; cursor: default; animation: none;
  background: #e7eaf6; border-color: #d0d6ea; color: #4a5578; font-size: 11.5px;
}
/* A context carried over from this conversation rather than the page in front of you.
   The scope icon keeps its meaning; only the provenance differs, so this marks it
   rather than restyling it — a dashed edge plus a trailing note. */
.am-ctxchip-restored {
  border-style: dashed;
}
.am-ctxchip-restored::after {
  content: "· from this conversation";
  opacity: 0.7;
  font-size: 11px;
}

.am-input {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent;
  padding: 6px 2px; font-size: 15px; font-family: inherit; min-height: 40px; color: #1c2536;
}
.am-input::placeholder { color: #9aa0b3; }
.am-send-btn {
  flex: none; width: 38px; height: 38px; border: none; border-radius: 10px;
  background: #3b5bdb; color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, transform .1s ease;
}
.am-send-btn:hover { background: #2f4bc4; }
.am-send-btn:active { transform: scale(.94); }
/* Composer lock: dim + no-op while this browser's turn is in flight. */
.am-send-btn:disabled { background: #b6bccb; cursor: not-allowed; transform: none; }
.am-send-btn:disabled:hover { background: #b6bccb; }
.am-send-icon { transform: rotate(-90deg); }   /* chevron → up-arrow send */

.am-highlights { margin: 0; }