/*
 * Dog House Data AI — the chat panel's own styling (ISH-899).
 *
 * A single-consumer stylesheet today (ask-the-data.html), pulled out of the page's inline <style>
 * anyway rather than left inline: it is a genuinely separate component (message list, streaming
 * turns, block renderers) and the next report page that wants a chat surface should be able to
 * link this rather than starting from a copy — the css/portal-rail.css precedent for "factor it out
 * before there's a second consumer, when the component is big enough on its own."
 *
 * Depends on the page's own :root tokens: --red, --card-bg, --page-bg, --border, --border-light,
 * --text, --text-secondary, --text-label, --radius, --radius-lg, --shadow-sm. All are either owned
 * by css/tokens.css or re-declared per-page per its header note — see ask-the-data.html's own
 * :root block for which.
 */

.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  min-height: 420px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--text-secondary);
  max-width: 40ch;
}

.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.chat-starter-chip {
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.chat-starter-chip:hover {
  background: var(--card-bg);
  border-color: var(--red);
}

.chat-turn {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-turn.user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-turn.assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-bubble {
  border-radius: var(--radius-lg);
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.chat-turn.user .chat-bubble {
  background: var(--red);
  color: #ffffff;
}

.chat-turn.assistant .chat-bubble {
  background: var(--page-bg);
  border: 1px solid var(--border-light);
  color: var(--text);
}

/* Markdown-lite output (js/markdown-lite.js) inside an assistant bubble. */
.chat-bubble p {
  margin: 0 0 0.6em;
}
.chat-bubble p:last-child {
  margin-bottom: 0;
}
.chat-bubble ul,
.chat-bubble ol {
  margin: 0 0 0.6em 1.2em;
  padding: 0;
}
.chat-bubble code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  padding: 0.1em 0.3em;
}
.chat-bubble pre {
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: 0.6em 0.8em;
  overflow-x: auto;
  margin: 0 0 0.6em;
}
.chat-bubble pre code {
  background: none;
  padding: 0;
}

/* A "thought" block: the agent's step-by-step reasoning, folded by default and visually quieter
   than its final answer. */
.chat-thought {
  font-size: 0.78rem;
  color: var(--text-label);
  font-style: italic;
}

.chat-thought summary {
  cursor: pointer;
  list-style: none;
}
.chat-thought summary::-webkit-details-marker {
  display: none;
}
.chat-thought summary::before {
  content: "▸ ";
}
.chat-thought[open] summary::before {
  content: "▾ ";
}

/* SQL toggle — collapsed by default per the acceptance criteria. */
.chat-sql {
  font-size: 0.8rem;
  align-self: stretch;
}

.chat-sql summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 0.3rem 0;
}

.chat-sql pre {
  background: #1a1a1a;
  color: #e2e8f0;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8rem;
  margin: 0.4rem 0 0;
}

/* Data table — a generic renderer against the same visual contract sales-pipeline-report.html's
   .report-table establishes, since no shared table component exists to import (SCOPING.md §2). */
.chat-table-wrap {
  align-self: stretch;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.chat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.chat-table th,
.chat-table td {
  padding: 0.45rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.chat-table th {
  background: var(--page-bg);
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.chat-table-note {
  font-size: 0.75rem;
  color: var(--text-label);
  padding: 0.4rem 0.7rem;
}

/* Chart — vega-embed mounts into this container. Fixed max-height so a tall spec cannot push the
   rest of the turn out of view; vega-embed's own responsive width handles the rest.
   `overflow-y: auto` is load-bearing, not decoration: `max-height` alone does not clip a child
   taller than it — the box still lays out at 360px for the *next* sibling (the data table or the
   next turn), but the chart's own content keeps painting past that line, visually spilling over
   whatever comes after it. Without this, any spec taller than 360px (a long legend, many bars,
   axis labels) overlapped the table beneath it instead of being contained. `overflow-x: hidden`
   because vega-embed's own responsive width already fits the container — a horizontal scrollbar
   here would only ever appear from that comment being wrong, and should surface as a visible
   clip rather than a stray scrollbar. */
.chat-chart {
  align-self: stretch;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-error {
  align-self: stretch;
  background: rgba(166, 38, 38, 0.06);
  border: 1px solid rgba(166, 38, 38, 0.25);
  color: var(--red);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
}

.chat-input-row {
  display: flex;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}

.chat-input {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: none;
}

.chat-input:disabled {
  background: var(--page-bg);
  color: var(--text-label);
}

.chat-send-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: #ffffff;
  background: var(--red);
  border: none;
  border-radius: var(--radius);
  padding: 0 1.25rem;
  cursor: pointer;
}

.chat-send-btn:hover:not(:disabled) {
  background: var(--red-hover);
}

.chat-send-btn:disabled {
  background: var(--border);
  color: var(--text-label);
  cursor: not-allowed;
}

.chat-typing {
  align-self: flex-start;
  color: var(--text-label);
  font-size: 0.8rem;
  font-style: italic;
}