/* TDBFP Sentinel — Chat tab (docs/CHAT-CONTRACT.md §7).
   Layout, message bubbles, tool chips, composer and the canvas/slot chrome.
   Colour comes only from the custom properties defined in app.css — this
   file introduces no raw hex values, matching every other tab. */

/* ---------- host: two columns, full remaining viewport height ----------
   No .page-head on this tab (the Chat tab drops the title/description bar
   so the composer gets the full view height) - only .view's own top/bottom
   padding needs subtracting here, not a header's height too. */
.chat-tab .chat-host{
  height:calc(100vh - var(--topbar-h) - var(--tabs-h) - 4.5rem);min-height:520px;
  display:grid;grid-template-columns:minmax(320px,38%) 1fr;overflow:hidden;
}
@media(max-width:900px){
  .chat-tab .chat-host{grid-template-columns:1fr;grid-template-rows:minmax(360px,1fr) minmax(360px,1fr);
    height:auto;min-height:0}
}

/* ---------- left column: sessions, messages, composer ---------- */
.chat-left{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line)}
@media(max-width:900px){.chat-left{border-right:0;border-bottom:1px solid var(--line)}}

.session-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;
  border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.session-bar select{flex:1 1 auto;min-width:0;font-size:.8rem}
/* Status pill moved here from the (now-removed) page header - pinned to the row's end. */
.session-bar #chatStatusPill{flex:0 0 auto;margin-left:.2rem}

.chat-messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.9rem .85rem;
  display:flex;flex-direction:column;gap:.7rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.chat-messages::-webkit-scrollbar{width:9px}
.chat-messages::-webkit-scrollbar-track{background:transparent}
.chat-messages::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--surface)}

.chat-msg{display:flex;flex-direction:column;gap:.3rem;max-width:92%}
.chat-msg.user{align-self:flex-end;align-items:flex-end}
.chat-msg.assistant{align-self:flex-start;align-items:flex-start;max-width:98%}
.chat-msg.error{align-self:stretch;max-width:100%}

.chat-msg .bubble{border-radius:10px;padding:.6rem .8rem;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.chat-msg.user .bubble{background:var(--accent-soft);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.chat-msg.assistant .bubble{background:var(--surface-2);border:1px solid var(--line-soft)}
.chat-msg.error .bubble{background:var(--crit-soft);color:var(--crit);
  border:1px solid color-mix(in srgb,var(--crit) 35%,transparent);font-family:var(--f-mono);font-size:.78rem}

.chat-msg .bubble p{margin:0 0 .5rem}
.chat-msg .bubble p:last-child{margin-bottom:0}
.chat-msg .bubble ul,.chat-msg .bubble ol{margin:0 0 .5rem;padding-left:1.2rem}
.chat-msg .bubble li{margin:.15rem 0}
.chat-msg .bubble h1,.chat-msg .bubble h2,.chat-msg .bubble h3,
.chat-msg .bubble h4,.chat-msg .bubble h5,.chat-msg .bubble h6{font-size:.9rem;margin:.3rem 0 .35rem;color:var(--ink)}
.chat-msg .bubble code{font-family:var(--f-mono);font-size:.82em;background:var(--surface-3);
  padding:.1em .35em;border-radius:3px;color:var(--ink)}
.chat-msg .bubble .spinner{margin-left:.3rem}

/* GFM pipe-tables inside an assistant reply (renderMarkdownLite's table branch) — a real,
   scrollable table instead of a raw "| a | b | c |" line of text. Reuses table.data's
   look (app.css) so it matches every other table in the app. */
.chat-msg .bubble .md-table-wrap{margin:.3rem 0 .55rem;overflow-x:auto;
  border:1px solid var(--line-soft);border-radius:6px}
.chat-msg .bubble .md-table-wrap:last-child{margin-bottom:0}
.chat-msg .bubble .md-table-wrap table.data{margin:0}
.chat-msg .bubble .md-table-wrap table.data th{position:static}

/* Inline tool-use chips, e.g. "▸ get_series · c82, c58 · 412 ms". */
.tool-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.1rem}
.tool-chip{font-family:var(--f-mono);font-size:.68rem;padding:.16em .5em;border-radius:3px;
  background:var(--surface-2);border:1px solid var(--line-soft);color:var(--ink-3);white-space:nowrap}
.tool-chip.pending{color:var(--accent-ink);border-color:var(--accent)}
.tool-chip.error{color:var(--crit);border-color:var(--crit);background:var(--crit-soft)}
.tool-chip .spinner{width:9px;height:9px;border-width:1.5px;vertical-align:-1px;margin-right:.15em}

/* Collapsed reasoning trace — only present on turns where `think` was on. */
.reasoning{font-size:.72rem;color:var(--ink-3);margin-bottom:.1rem;max-width:100%}
.reasoning summary{cursor:pointer;font-family:var(--f-mono);letter-spacing:.05em;
  text-transform:uppercase;font-size:.64rem;list-style:revert}
.reasoning summary:hover{color:var(--ink)}
.reasoning-body{margin-top:.3rem;padding:.5rem .6rem;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--radius);white-space:pre-wrap;font-family:var(--f-mono);font-size:.7rem;line-height:1.5;
  max-height:220px;overflow-y:auto}

/* Empty-session suggested prompts. */
.chat-empty{display:flex;flex-direction:column;gap:.9rem;padding:.4rem .1rem}
.prompt-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.prompt-chip{text-align:left;white-space:normal;max-width:100%;font-size:.76rem;line-height:1.35;padding:.4rem .65rem}

/* ---------- composer ---------- */
.composer{flex:0 0 auto;border-top:1px solid var(--line);padding:.6rem .75rem;
  display:flex;flex-direction:column;gap:.5rem}
.composer-row textarea{width:100%;resize:none;min-height:38px;max-height:200px;
  font-size:.85rem;line-height:1.4;overflow-y:auto}
.composer-tools{display:flex;align-items:center;gap:.5rem}
.composer-tools .spacer{flex:1 1 auto}

/* ---------- right column: the render canvas ---------- */
.chat-right{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--ground)}

.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  padding:.55rem .75rem;border-bottom:1px solid var(--line-soft);flex:0 0 auto;background:var(--surface)}
.canvas-layout-chips{display:flex;gap:.3rem}

.canvas-slots{flex:1 1 auto;min-height:0;display:grid;gap:.7rem;padding:.7rem;overflow:auto}
.canvas-slots.layout-single{grid-template-columns:1fr}
.canvas-slots.layout-split{grid-template-columns:1fr 1fr}
.canvas-slots.layout-stack{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
@media(max-width:1300px){.canvas-slots.layout-split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

.canvas-slot{display:flex;flex-direction:column;min-height:280px;min-width:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* Expand: the chosen slot takes the whole canvas; its sibling hides rather than shrinking to nothing. */
.canvas-slots.has-expanded .canvas-slot.collapsed{display:none}
.canvas-slots.has-expanded .canvas-slot.expanded{grid-column:1 / -1;grid-row:1 / -1}

.slot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;
  padding:.5rem .65rem;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.slot-titles{min-width:0}
.slot-title{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-subtitle{display:block;font-size:.68rem;color:var(--ink-3);margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-tools{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.slot-tools select.slot-type{font-size:.7rem;padding:.2rem .35rem}

.slot-body{flex:1 1 auto;min-height:0;position:relative;padding:.4rem}
.slot-body .empty{padding:1.6rem 1rem}
.slot-body .loading-row{padding:1.6rem 1rem;justify-content:center}

.slot-foot{flex:0 0 auto;padding:.35rem .65rem;border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:.66rem;color:var(--ink-3);min-height:1.2rem}

/* ---------- kpi tiles (the canvas's one non-ECharts chart type) ---------- */
.chat-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.6rem;height:100%;align-content:center}
.chat-kpi-tile .tile-unit{font-size:.62em;color:var(--ink-3);font-weight:400}

/* ---------- table render type ---------- */
.chat-table-wrap{height:100%;display:flex;flex-direction:column;min-height:0}
.chat-table-wrap .tscroll{flex:1 1 auto;min-height:0;overflow:auto}
.chat-table-wrap table.data th{cursor:pointer;user-select:none}
.chat-table-wrap table.data th:hover{color:var(--ink)}
.chat-table-wrap table.data tfoot td{font-weight:600;background:var(--surface-2);
  border-top:2px solid var(--line);color:var(--ink)}
.chat-table-note{font-size:.68rem;color:var(--ink-3);padding:.3rem .1rem 0}