:root {
  --souled-navy: #1a2b4a;
  --souled-gold: #c9a85a;
  --souled-cream: #faf8f3;
  --souled-ink: #222;
  --souled-muted: #6b7280;
  --souled-border: #e5e7eb;
  --bg: #f7f8fa;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--souled-ink);
}
body { min-height: 100vh; display: flex; flex-direction: column; }
/* Chat page pins the whole viewport so only the chat log scrolls. */
html:has(body.chat-page), body.chat-page {
  height: 100vh;       /* legacy fallback */
  height: 100svh;      /* small viewport — fits inside the URL-bar-visible area on mobile (Android Chromium browsers were rendering header behind URL bar with 100dvh + overflow:hidden) */
  overflow: hidden;
}

header {
  background: white;
  border-bottom: 1px solid var(--souled-border);
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-logo { height: 36px; }
.header-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--souled-navy);
}
.header-sub {
  font-size: 0.85rem;
  color: var(--souled-muted);
}
.header-spacer { flex: 1; }
.header-right { display: flex; gap: 12px; align-items: center; font-size: 0.9rem; color: var(--souled-muted); }
.header-right a { color: var(--souled-navy); text-decoration: none; }
.header-right a:hover { text-decoration: underline; }

/* Identity chip — avatar + name + title. Sits where the bare email used to. */
.me-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
}
.me-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--souled-navy);
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.me-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-name { color: var(--souled-ink); font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.me-title { color: var(--souled-muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Admin-only "View as" role selector (QA / impersonation). */
.impersonate-picker { display: flex; align-items: center; gap: 6px; }
.impersonate-picker select {
  padding: 3px 6px;
  border: 1px solid var(--souled-border);
  border-radius: 6px;
  font-size: 0.85rem;
  background: white;
  color: var(--souled-ink);
  cursor: pointer;
}

/* Sticky banner shown in-chat while an admin is impersonating another role. */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #7a4b00;
}

.help-btn {
  background: var(--souled-navy);
  border: 1px solid var(--souled-navy);
  color: white;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  margin-right: 12px;
  transition: background 0.12s ease;
}
.help-btn:hover { background: #132036; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 43, 74, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background: white;
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  padding: 28px 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal h2 { margin: 0 0 8px; color: var(--souled-navy); font-size: 1.25rem; }
.modal h3 { margin: 18px 0 6px; color: var(--souled-navy); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.modal p { margin: 8px 0; color: var(--souled-ink); font-size: 0.95rem; line-height: 1.5; }
.modal ul { margin: 6px 0 0; padding-left: 20px; font-size: 0.92rem; line-height: 1.5; color: var(--souled-ink); }
.modal li { margin: 4px 0; }
.modal strong { color: var(--souled-navy); }
.modal .modal-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--souled-border); color: var(--souled-muted); font-size: 0.9rem; }

/* Exec-only banner pinned at the top of the help modal — links execs to a
 * personalized /about/ showcase URL they can share. */
.exec-showcase-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #fdf6e3;
  border: 1px solid var(--souled-gold);
  border-left: 4px solid var(--souled-gold);
  border-radius: 8px;
}
.exec-showcase-banner p { margin: 4px 0; font-size: 0.9rem; color: var(--souled-ink); }
.exec-showcase-banner a { color: var(--souled-navy); font-weight: 600; }
.exec-showcase-banner code {
  background: rgba(26, 43, 74, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--souled-muted);
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--souled-ink); }

main {
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ---- Auth screens ---- */
.auth-card {
  margin: 40px auto 0;
  max-width: 440px;
  background: white;
  border: 1px solid var(--souled-border);
  border-radius: var(--radius);
  padding: 28px;
}
.auth-card h1 { margin-top: 0; color: var(--souled-navy); font-size: 1.3rem; }
.auth-card p { color: var(--souled-muted); font-size: 0.95rem; }
.auth-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--souled-border);
  border-radius: 8px;
  font-size: 1rem;
  margin-top: 6px;
}
.auth-label {
  display: block;
  font-size: 0.78rem;
  color: var(--souled-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-top: 14px;
}
.auth-card button {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  background: var(--souled-navy);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.auth-card button:hover { background: #132036; }
.auth-note { margin-top: 12px; color: var(--souled-muted); font-size: 0.85rem; }
.auth-error { color: #b00020; font-size: 0.9rem; margin-top: 10px; }
.auth-links {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--souled-muted);
  text-align: center;
}
.auth-links a {
  color: var(--souled-navy);
  text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }
.auth-link-sep { margin: 0 8px; color: var(--souled-border); }

/* ---- Chat ---- */
.chat-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: white;
  border: 1px solid var(--souled-border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
}
.chat-log {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.chat-input { flex-shrink: 0; }
/* Each message renders as a .msg-row wrapper that owns the horizontal
   placement (left for assistant, right for user) and stacks the bubble on top
   of a hover-revealed actions row (Copy button etc.). */
.msg-row { display: flex; flex-direction: column; max-width: 720px; }
.msg-row.user { align-self: flex-end; align-items: flex-end; }
.msg-row.assistant { align-self: flex-start; align-items: flex-start; }
.msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  min-height: 22px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.msg-row:hover .msg-actions,
.msg-row:focus-within .msg-actions { opacity: 1; }
.msg-action-copy {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--souled-muted);
  cursor: pointer;
  font-family: inherit;
}
.msg-action-copy:hover { background: var(--souled-cream); border-color: var(--souled-border); color: var(--souled-navy); }
.msg-action-copy.copied { color: var(--souled-navy); font-weight: 500; }

/* Per-message "Feedback" affordance — text label, not an icon, so it's
   discoverable. Mirrors .msg-action-copy sizing/coloring so both buttons
   read as a unified hover-revealed action row. */
.msg-action-feedback {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--souled-muted);
  cursor: pointer;
  font-family: inherit;
}
.msg-action-feedback:hover { background: var(--souled-cream); border-color: var(--souled-border); color: var(--souled-navy); }
.msg-action-feedback.is-open { background: var(--souled-cream); border-color: var(--souled-border); color: var(--souled-navy); }
.msg-action-feedback.is-sent { color: #2e7d32; }
.msg-action-feedback.is-sent::before { content: '✓ '; }

/* Feedback panel — vertical stack: prompt → thumbs → textarea → hint → actions.
   Lives below the bubble's actions row, full bubble-width. */
.feedback-panel {
  max-width: 720px;
  width: 100%;
  margin: 8px 0 4px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--souled-border);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--souled-ink);
  box-shadow: 0 2px 8px rgba(26, 43, 74, 0.06);
}
.feedback-prompt {
  text-align: center;
  font-size: 0.88rem;
  color: var(--souled-muted);
  margin-bottom: 8px;
}
.feedback-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}
.feedback-thumb {
  background: white;
  border: 1px solid var(--souled-border);
  border-radius: 8px;
  padding: 4px 18px;
  font-size: 1.1rem;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  color: var(--souled-ink);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.feedback-thumb:hover { background: var(--souled-cream); }
.feedback-thumb:active { transform: scale(0.97); }
.feedback-thumb.selected-up { background: #f1f8f4; border-color: #c8e6c9; color: #2e7d32; }
.feedback-thumb.selected-down { background: #fdf2f2; border-color: #f4c7c3; color: #c62828; }
.feedback-panel textarea {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--souled-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  resize: vertical;
}
.feedback-panel textarea:focus {
  outline: 2px solid var(--souled-gold);
  outline-offset: -1px;
  border-color: var(--souled-gold);
}
.feedback-hint { margin-top: 4px; font-size: 0.78rem; color: var(--souled-muted); }
.feedback-hint.is-required { color: #c62828; }
.feedback-panel-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.feedback-panel-actions .version-stamp {
  margin-right: auto;
  font-size: 0.76rem;
  color: var(--souled-muted);
}
.feedback-panel-actions button {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--souled-border);
  background: white;
  color: var(--souled-muted);
  font-family: inherit;
}
.feedback-panel-actions button.primary {
  background: var(--souled-navy);
  border-color: var(--souled-navy);
  color: white;
}
.feedback-panel-actions button:hover { background: var(--souled-cream); color: var(--souled-navy); }
.feedback-panel-actions button.primary:hover { background: #132036; color: white; }
.feedback-panel-actions button[disabled] { opacity: 0.4; cursor: not-allowed; }
.feedback-panel-actions button.primary[disabled]:hover { background: var(--souled-navy); color: white; }
.feedback-error {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #c62828;
}
.feedback-thanks {
  text-align: center;
  padding: 18px 14px;
  font-size: 0.95rem;
  color: var(--souled-navy);
  font-weight: 500;
  line-height: 1.4;
  animation: feedback-thanks-in 0.25s ease-out;
}
.feedback-thanks::before {
  content: '✓';
  display: block;
  font-size: 1.6rem;
  color: #2e7d32;
  margin-bottom: 6px;
  font-weight: 700;
}
@keyframes feedback-thanks-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg { max-width: 720px; padding: 12px 14px; border-radius: 12px; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--souled-navy); color: white; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: #f1f3f7; color: var(--souled-ink); border-bottom-left-radius: 4px; }
.msg.assistant .md p { margin: 0 0 8px 0; }
.msg.assistant .md p:last-child { margin-bottom: 0; }
.msg.assistant .md h1, .msg.assistant .md h2, .msg.assistant .md h3 { margin: 10px 0 6px; color: var(--souled-navy); font-weight: 600; }
.msg.assistant .md h1 { font-size: 1.1rem; }
.msg.assistant .md h2 { font-size: 1.05rem; }
.msg.assistant .md h3 { font-size: 1rem; }
.msg.assistant .md ul, .msg.assistant .md ol { margin: 6px 0; padding-left: 22px; }
.msg.assistant .md li { margin: 2px 0; }
.msg.assistant .md code { background: #e8ecf2; padding: 1px 5px; border-radius: 4px; font-size: 0.88em; }
.msg.assistant .md pre { background: #e8ecf2; padding: 8px 10px; border-radius: 6px; overflow-x: auto; }
.msg.assistant .md pre code { background: transparent; padding: 0; }
.msg.assistant .md table { border-collapse: collapse; margin: 8px 0; }
.msg.assistant .md img { max-width: 220px; max-height: 260px; border-radius: 8px; margin: 4px 6px 4px 0; vertical-align: middle; object-fit: cover; }
.msg.assistant .csv-download {
  display: inline-block;
  margin: 2px 0 12px 0;
  padding: 5px 12px;
  background: white;
  border: 1px solid var(--souled-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--souled-navy);
  font-weight: 500;
}
.msg.assistant .csv-download:hover {
  background: var(--souled-cream);
  border-color: var(--souled-gold);
}
/* Per-message "Download as Word" button — sits at the end of an assistant
   message, after the markdown body and any per-table CSV buttons. Same
   visual language as .csv-download but full-width-friendly so it reads as
   a message-level footer action rather than a table sibling. */
.msg.assistant .docx-download.msg-docx {
  display: inline-block;
  margin: 6px 0 2px 0;
  padding: 5px 12px;
  background: white;
  border: 1px solid var(--souled-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--souled-navy);
  font-weight: 500;
}
.msg.assistant .docx-download.msg-docx:hover {
  background: var(--souled-cream);
  border-color: var(--souled-gold);
}
.msg.assistant .docx-download[disabled] { opacity: 0.6; cursor: progress; }
.msg.assistant .md th, .msg.assistant .md td { border: 1px solid #d0d5dc; padding: 6px 10px; text-align: left; font-size: 0.9rem; }
.msg.assistant .md th { background: #e8ecf2; font-weight: 600; }
.msg.assistant .md strong { color: var(--souled-navy); }
.msg.assistant .md blockquote { border-left: 3px solid var(--souled-gold); margin: 6px 0; padding: 2px 10px; color: var(--souled-muted); }
.msg.assistant .md hr { border: none; border-top: 1px solid #d0d5dc; margin: 10px 0; }

/* ---- Mobile ---- */
/*
 * Goal on small screens: maximize the chat-log area. Pre-2026-04-24 the
 * header wrapped to 2 rows (140px+) and the welcome banner was ~175px, so
 * chat log was only ~45% of an iPhone viewport. Now header stays on one
 * row, welcome collapses to just the action buttons, and the chat log
 * grows to ~65% of the viewport.
 */
@media (max-width: 720px) {
  header {
    padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    gap: 6px;
    flex-wrap: nowrap;
  }
  .header-logo { height: 26px; flex-shrink: 0; }
  /* Title block ("Bina Bot" + tagline) is redundant with the logo on mobile —
     hide it entirely so the help button + identity chip + sign-out have room. */
  .header-title-block { display: none; }
  /* Help button collapses to a "?" circle on mobile. aria-label preserves the
     full description for screen readers; .help-btn-text is hidden. */
  .help-btn {
    padding: 0;
    margin-right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
  }
  .help-btn-text { display: none; }
  .help-btn::before { content: '?'; }
  /* Build-version badge is a QA/diagnostic affordance — hide on mobile so the
     identity chip + sign-out fit. Still visible on desktop and admin views.
     Selector specificity bumped (header-right ancestor) because the base
     `.build-version { display: inline-flex }` rule sits later in the file. */
  .header-right .build-version { display: none; }
  .header-spacer { display: none; }
  .header-right {
    width: auto;
    order: 0;
    font-size: 0.72rem;
    gap: 6px;
    flex-wrap: nowrap;
    margin-left: auto;
    min-width: 0;
  }
  /* Truncate the signed-in email so it never pushes the header to two rows. */
  .header-right > span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Compact identity chip on mobile: smaller avatar, narrower name column,
     hide the title row (falls back to tooltip on tap-hold). */
  .me-avatar { width: 26px; height: 26px; font-size: 0.7rem; }
  .me-chip { min-width: 0; }
  .me-name { font-size: 0.75rem; max-width: 110px; }
  .me-title { display: none; }
  /* Drop the "View as:" label — the dropdown value is self-explanatory. */
  .impersonate-picker > span { display: none; }
  .impersonate-picker select { font-size: 0.72rem; padding: 2px 4px; max-width: 110px; }

  main {
    padding: 8px 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /*
   * Welcome banner: hide the prose blurb, keep the action buttons. The help
   * modal (reachable from the header) covers the blurb content already.
   */
  .welcome {
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    font-size: 0.82rem;
    margin-bottom: 6px;
    gap: 6px;
  }
  .welcome > div:first-child { display: none; }
  .welcome-actions {
    flex: 1;
    width: auto;
    display: flex;
    gap: 6px;
  }
  .welcome-actions .btn-ghost { flex: 1; padding: 6px 8px; font-size: 0.8rem; white-space: nowrap; }
  .welcome-actions .export-menu { flex: 1; }

  .msg { max-width: 100%; font-size: 0.92rem; padding: 10px 12px; }

  /* Drop the desktop empty-state min-height so the chat-log can shrink to
     fit alongside the input on small viewports. Padding-bottom = live
     input height + soft-keyboard offset + buffer, so the last line of
     an answer never wedges against (or hides behind) the input bar.
     --chat-input-height comes from a ResizeObserver in app.js;
     --keyboard-offset comes from the visualViewport listener (#121).
     Fallback covers the brief window before observers fire — sized
     above the textarea max-height (160px) so it's never too tight. */
  .chat-log { min-height: 0; padding-bottom: calc(var(--chat-input-height, 180px) + var(--keyboard-offset, 0px) + 24px); }

  /* Pin the chat-input to the visible viewport bottom on mobile. Earlier
     attempts using flex-shrink: 0 + chat-log min-height: 0 worked at the
     desktop-narrow mobile breakpoint but failed on actual Brave Android —
     `100svh` was apparently reporting larger than the visible area, and
     chat-shell's `overflow: hidden` then clipped the input invisibly
     below the OS chrome. Fixed positioning bypasses the flex math
     entirely so the input is always visible regardless of how the
     parent reports its height. (2026-04-29). */
  .chat-input {
    position: fixed;
    left: 0;
    right: 0;
    /* --keyboard-offset is set by app.js from the visualViewport API so the
       input rides above the soft keyboard. Falls back to 0 (pinned to the
       layout-viewport bottom) when the keyboard is closed or visualViewport
       is unavailable. */
    bottom: var(--keyboard-offset, 0px);
    background: white;
    border-top: 1px solid var(--souled-border);
    padding: 8px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    z-index: 10;
    transition: bottom 0.15s ease-out;
  }
  .chat-input textarea { font-size: 16px; /* iOS zoom prevention */ }
  .chat-input button { padding: 0 14px; }

  .auth-card { margin: 20px auto 0; padding: 20px; }
  .auth-card h1 { font-size: 1.15rem; }

  .modal { padding: 20px 18px; }
  .modal h2 { font-size: 1.1rem; }
  .modal h3 { font-size: 0.85rem; }

  /* Admin tables: horizontal scroll instead of breaking layout */
  table { font-size: 0.82rem; }
  .admin-panel { padding: 12px; }
  .admin-tabs { overflow-x: auto; gap: 6px; }
  .admin-tabs button { white-space: nowrap; font-size: 0.82rem; padding: 6px 10px; }
}

@media (max-width: 480px) {
  .header-logo { height: 24px; }
  .header-right { font-size: 0.68rem; gap: 4px; }
  .header-right > span { max-width: 70px; }
  .me-name { max-width: 90px; }
  .impersonate-picker select { max-width: 90px; font-size: 0.68rem; }
  .msg { font-size: 0.9rem; }
  .welcome-actions .btn-ghost { font-size: 0.72rem; padding: 5px 6px; }
}
.msg.system { align-self: center; color: var(--souled-muted); font-size: 0.85rem; font-style: italic; }
.msg .tool-calls { margin-top: 6px; font-size: 0.75rem; color: var(--souled-muted); }

.chat-input {
  border-top: 1px solid var(--souled-border);
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
}
.chat-input textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--souled-border);
  border-radius: 8px;
  font-size: 0.95rem;
  resize: vertical;
  font-family: inherit;
}
.chat-input button {
  padding: 0 18px;
  background: var(--souled-navy);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}
.chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-input .mic-btn {
  padding: 0;
  width: 44px;
  flex: 0 0 auto;
  background: white;
  color: var(--souled-navy);
  border: 1px solid var(--souled-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-input .mic-btn:hover { background: #f4f5f7; }
.chat-input .mic-btn.recording {
  background: #d33;
  border-color: #d33;
  color: white;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221, 51, 51, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(221, 51, 51, 0); }
}

.welcome {
  background: #fffbea;
  border: 1px solid #f4e4a5;
  padding: 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #6b5a20;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}
/* Active conversation: hide the intro blurb and slim the bar to just the
   action buttons so the chat-log fills the available height. */
.welcome.slim {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 8px;
  justify-content: flex-end;
}
.welcome.slim .welcome-blurb { display: none; }
.welcome-feedback-tip {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e7d89a;
  font-size: 0.82rem;
  color: #7a6427;
}
.welcome-feedback-tip strong { color: var(--souled-navy); }
.welcome-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-ghost {
  background: white;
  border: 1px solid #e7d89a;
  color: #6b5a20;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover { background: #fff5d0; }

.export-menu { position: relative; display: inline-flex; }
.export-menu > .btn-ghost { width: 100%; }
.export-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border: 1px solid #e7d89a;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.export-menu-list[hidden] { display: none; }
.export-menu-list button {
  background: white;
  border: none;
  text-align: left;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: #6b5a20;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  font-family: inherit;
}
.export-menu-list button:hover:not(:disabled) { background: #fff5d0; }
.export-menu-list button:disabled { color: #b8a76b; cursor: not-allowed; }

.history-list { list-style: none; padding: 0; margin: 10px 0 0; }
.history-list li {
  padding: 10px 12px;
  border: 1px solid var(--souled-border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: white;
}
.history-list li:hover { background: var(--souled-cream); border-color: var(--souled-gold); }
.history-preview { font-size: 0.92rem; color: var(--souled-ink); margin-bottom: 4px; line-height: 1.4; }
.history-meta { font-size: 0.78rem; color: var(--souled-muted); }

/* ---- Admin ---- */
/* Let wide tables (whitelist, events, top users) scroll horizontally inside */
/* the panel instead of clipping their rightmost columns. */
.admin-panel { overflow-x: auto; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-tabs button {
  background: white;
  border: 1px solid var(--souled-border);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.admin-tabs button.active { background: var(--souled-navy); color: white; border-color: var(--souled-navy); }

.admin-panel { background: white; border: 1px solid var(--souled-border); border-radius: var(--radius); padding: 18px; }
.admin-panel h2 { margin-top: 0; color: var(--souled-navy); font-size: 1.1rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--souled-border); }
th { color: var(--souled-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; }
th[title] { cursor: help; }
.th-info {
  display: inline-block;
  margin-left: 3px;
  color: var(--souled-gold);
  font-size: 0.85em;
  opacity: 0.7;
}
th:hover .th-info { opacity: 1; }
tr.flagged { background: #fff7e6; }
.muted { color: var(--souled-muted); font-size: 0.85rem; }
.btn-small { padding: 4px 10px; font-size: 0.8rem; border: 1px solid var(--souled-border); background: white; border-radius: 6px; cursor: pointer; }
.btn-small.danger { color: #b00020; border-color: #f3c6cb; }

.convo-detail { margin-top: 16px; padding: 14px; background: #f7f8fa; border-radius: 8px; }
.convo-detail pre { white-space: pre-wrap; word-break: break-word; background: white; padding: 10px; border-radius: 6px; font-size: 0.82rem; }

/* Build-version badge — short git SHA shown in the header so testers can
   read it back ("what version do you see?") to disambiguate stale cache. */
.build-version {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  opacity: 0.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
  transition: opacity 0.15s, background 0.15s;
}
.build-version:hover { opacity: 0.9; background: rgba(0, 0, 0, 0.05); }
.build-version:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.build-version-copied { opacity: 0.9; }
.build-version-icon { font-size: 0.85em; }