/* engine-chat-format.css — polished, theme-aware styling for AIDC Plant Chat
 * bot responses (paired with engine-chat-format.js).
 *
 * Scoped to .msg-bot only — .msg-user bubbles are intentionally left untouched.
 * Uses the shared design tokens (var(--bg), --bg2, --bg3, --border, --border2,
 * --text, --text2, --dim, --cyan, --mono, --sans) which are redefined for light
 * mode by tablet-theme-fix.css under html.light-theme, so every rule below works
 * in both the dark default and the light theme without hardcoded colors.
 *
 * DESIGN GOAL (2026-07): calm, warm, "designed by a careful hand" — a well-set
 * technical document, not a neon dashboard. Sections are separated by SPACE and
 * gentle typographic hierarchy rather than by loud rules and shouty cyan headers.
 * This file now DOES override .md-h2 / .md-h3 within .msg-bot (previously it did
 * not) to soften the heading hierarchy; the overrides are scoped to .msg-bot so
 * nothing outside a bot bubble is affected.
 *
 * Spacing scale (kept consistent so responses "breathe" evenly):
 *   block gap (paragraphs / lists / tables) ...... 14px bottom
 *   section heading top-margin (h1/h2) ........... 24px
 *   sub-heading top-margin (h3) .................. 18px
 *   minor heading top-margin (h4) ................ 12px
 */

/* ---- Vertical rhythm: paragraphs & generic prose ------------------------ */
/* Roomier line-height and an even block gap so a response reads like prose,
   not a dense report. Overrides chat.html's tighter .md-p (margin 6px/1.7). */
.msg-bot .md-p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: var(--text);
}

/* First block should hug the top of the bubble (no big opening gap). */
.msg-bot .md-p:first-child,
.msg-bot .md-list:first-child,
.msg-bot .chat-ol:first-child,
.msg-bot .chat-table-wrap:first-child {
  margin-top: 0;
}

/* Last block shouldn't add trailing space inside the bubble. */
.msg-bot .md-p:last-child,
.msg-bot .md-list:last-child,
.msg-bot .chat-ol:last-child {
  margin-bottom: 0;
}

/* ---- Headings (calm hierarchy — rank by size/weight + SPACE) ------------- */
/* # / h1 — the top level. Restrained: text-colour title with a faint hairline
   underline (border, not the heavier border2) and generous air above. */
.msg-bot .md-h1,
.msg-bot .chat-h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
  letter-spacing: .1px;
}

/* ## / h2 — primary section header. No full-width rule; separated by space.
   The single restrained cyan touch in the whole scheme: a thin 2px accent bar
   that reads as "designed", not "neon". Colour stays var(--text) so it's calm. */
.msg-bot .md-h2 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 8px;
  padding: 0 0 0 10px;
  border-bottom: none;          /* was a loud full-width rule in chat.html */
  border-left: 2px solid var(--cyan);
  line-height: 1.4;
  letter-spacing: .1px;
}

/* ### / h3 — sub-section. Muted, NOT cyan (chat.html made every ### loud cyan).
   Differentiated from h2 by a lighter weight/colour and smaller size. */
.msg-bot .md-h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin: 18px 0 6px;
  line-height: 1.4;
}

/* #### / h4 — minor label. Dimmest rung of the ladder. */
.msg-bot .md-h4,
.msg-bot .chat-h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  margin: 12px 0 4px;
  line-height: 1.4;
}

/* Tighten the leading heading so a bubble that opens with a heading doesn't
   start with a big top gap. */
.msg-bot .md-h1:first-child,
.msg-bot .md-h2:first-child,
.msg-bot .md-h3:first-child,
.msg-bot .md-h4:first-child {
  margin-top: 2px;
}

/* ---- Horizontal rule (de-emphasised hairline) --------------------------- */
/* The prompt side is being changed to stop emitting decorative '---'; any that
   survive should read as a gentle divider, not a hard band. Faint (border, not
   border2) with generous air. */
.msg-bot .chat-hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* ---- Lists (comfortable, restrained markers) ---------------------------- */
/* Unordered .md-list is defined in chat.html (custom cyan bullet). Refine the
   rhythm/margins for breathing room; keep the marker subtle. */
.msg-bot .md-list {
  margin: 6px 0 14px;
  padding-left: 4px;
}

.msg-bot .md-list li {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.7;
}

.msg-bot .md-list li::before {
  color: var(--cyan);          /* small accent bullet — restrained, not loud */
  opacity: .85;
}

/* Ordered lists get real decimal numbers (the original renderer forced <ul>
   bullets on numbered items). Same comfortable rhythm as unordered lists. */
.msg-bot .chat-ol {
  margin: 6px 0 14px;
  padding-left: 22px;
  list-style: decimal;
}

.msg-bot .chat-ol li {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  padding-left: 3px;
}

.msg-bot .chat-ol li::marker {
  color: var(--cyan);
  font-weight: 600;
}

/* Nested lists: tighten the top gap so a sub-list hugs its parent item. */
.msg-bot .md-list .md-list,
.msg-bot .md-list .chat-ol,
.msg-bot .chat-ol .md-list,
.msg-bot .chat-ol .chat-ol {
  margin-top: 6px;
  margin-bottom: 4px;
}

/* ---- Tables (clean data card, not a spreadsheet grid) ------------------- */
/* Wrapper gives wide tables their own horizontal scroll so they never push the
   chat bubble past its width; rounded, soft-surfaced container. */
.msg-bot .chat-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
}

.msg-bot .chat-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  font-family: var(--sans);
}

/* Only horizontal separators — no vertical grid lines — for a calmer card.
   Generous cell padding. */
.msg-bot .chat-table th,
.msg-bot .chat-table td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

/* Subtle header: soft tint, medium weight (not the old shouty 700 + 2px band). */
.msg-bot .chat-table thead th {
  background: var(--bg3);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--border2);
}

.msg-bot .chat-table tbody tr:last-child td {
  border-bottom: none;
}

/* Gentle zebra + hover. Translucent tints aren't token-covered, so provide
   explicit light-mode values below (the dark rgba washes out on white). */
.msg-bot .chat-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .02);
}

.msg-bot .chat-table tbody tr:hover {
  background: rgba(6, 182, 212, .06);
}

html.light-theme .msg-bot .chat-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, .02);
}

html.light-theme .msg-bot .chat-table tbody tr:hover {
  background: rgba(14, 116, 144, .07);
}

/* ---- Inline code → equipment-tag pill ----------------------------------- */
/* Engineering tags (LT-DW055, HS-DW051, DR1(C)-DW201-P(02)-(A)) render as
   .chat-code-inline. Style them as intentional, scannable pills: soft
   token-based surface, hairline border, monospace, accent-tinted text, and
   comfortable padding. white-space:nowrap keeps a tag from breaking mid-token.
   Fully token-based, so the surface + accent flip correctly for light mode. */
.msg-bot .chat-code-inline {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 1.5px 7px;
  font-family: var(--mono);
  font-size: .86em;            /* relative → scales with surrounding text */
  line-height: 1.5;
  color: var(--cyan);
  white-space: nowrap;
}

/* ---- Code block --------------------------------------------------------- */
/* Piggybacks on chat.html's .md-code; guarantees the scroll affordance and
   consistent rhythm for fenced blocks emitted by the renderer. */
.msg-bot .chat-code-block {
  overflow-x: auto;
  margin: 14px 0;
}

/* ---- Links -------------------------------------------------------------- */
.msg-bot .chat-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.msg-bot .chat-link:hover {
  border-bottom-color: var(--cyan);
}