/* ================================================================
   Mini · Tortoise Chat — editorial theme
   ----------------------------------------------------------------
   The original "ocean" palette (dark teal/gold/coral on a brown
   gradient) has been REMOVED. The names below are retained only as
   aliases onto the editorial (--wb-*) palette defined further down,
   so any rule that still references a legacy token renders editorial.
   There is now a single, light, editorial theme across every mode —
   nothing paints the old ocean colors anymore.
   ================================================================ */

:root {
  --abyss:        var(--wb-ink);
  --surf:         var(--wb-accent);
  --foam:         var(--wb-ink);
  --mist:         var(--wb-canvas);
  --kelp:         var(--wb-accent);
  --coral:        var(--wb-accent);
  --coral-soft:   var(--wb-accent-soft);
  --shell:        var(--wb-surface);
  --sun:          var(--wb-accent);
  --danger:       #b54422;

  --bg-app:       var(--wb-canvas);   /* flat canvas — was the dark gradient */
  --bg-panel:     var(--wb-surface);
  --bg-side:      var(--wb-surface);
  --bg-input:     var(--wb-surface);
  --border:       var(--wb-line);
  --border-soft:  var(--wb-line);
  --fg:           var(--wb-ink);
  --fg-strong:    var(--wb-ink);
  --muted:        var(--wb-mute);
  --muted-2:      var(--wb-mute);

  --bubble-user:        var(--wb-surface);   /* flat surface — was the orange gradient */
  --bubble-user-fg:     var(--wb-ink);
  --bubble-assistant:   transparent;
  --bubble-assistant-b: var(--wb-line);
  --bubble-tool:        var(--wb-canvas);
  --bubble-tool-b:      var(--wb-line-strong);
  --bubble-tool-fg:     var(--wb-mute);
  --bubble-think:       var(--wb-canvas);
  --bubble-think-b:     var(--wb-line-strong);
  --bubble-think-fg:    var(--wb-mute);

  --code-bg:      var(--wb-ink);      /* dark code block, light text (kept) */
  --code-fg:      var(--wb-canvas);

  --radius:       14px;
  --radius-sm:    10px;
  --shadow-glow:  0 0 0 3px rgba(176, 74, 31, 0.14);   /* soft editorial focus ring */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  font-family: "Inter", sans-serif;
  background: var(--bg-app);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  height: 100vh;
  height: 100dvh;
  position: relative;
}

/* --- Sidebar --- */

#sidebar {
  position: relative;
  z-index: 1;
  width: 280px;
  background: var(--bg-side);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
}

.sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 12px 8px;
}
.sidebar-search svg {
  position: absolute;
  left: 23px;
  color: var(--muted);
  pointer-events: none;
}
#conversation-search {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px 8px 32px;
  border-radius: 8px;
  background: rgba(176, 74, 31, 0.08);
  color: var(--fg);
  border: 1px solid rgba(176, 74, 31, 0.28);
}
#conversation-search:focus {
  outline: none;
  border-color: var(--surf);
  background: rgba(176, 74, 31, 0.14);
}
#conversation-search::placeholder { color: var(--muted); }
#conversation-search::-webkit-search-cancel-button { cursor: pointer; }
.conv-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon {
  font-size: 26px;
  filter: drop-shadow(0 2px 6px rgba(176, 74, 31, 0.4));
  animation: bob 6s ease-in-out infinite;
  display: inline-block;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 700; font-size: 16px; color: var(--fg-strong); letter-spacing: 0.2px; }
.brand-sub  { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; }

#new-chat {
  background: linear-gradient(135deg, var(--surf), var(--kelp));
  color: var(--abyss);
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(176, 74, 31, 0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
#new-chat:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(176, 74, 31, 0.6); }
#new-chat:active { transform: translateY(0); }

#conversation-list {
  list-style: none;
  margin: 0;
  padding: 8px 8px 12px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#conversation-list li {
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
  position: relative;
  transition: background .15s ease;
}
#conversation-list li:hover { background: rgba(176, 74, 31, 0.10); }
#conversation-list li.active {
  background: linear-gradient(90deg, rgba(176, 74, 31, 0.22), rgba(176, 74, 31, 0.10));
  box-shadow: inset 2px 0 0 var(--surf);
}
#conversation-list .meta {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
#conversation-list .meta .conv-org {
  color: var(--coral);
  font-weight: 600;
}

/* Super-admin only: owner email shown next to the org on each chat row. */
#conversation-list .meta .conv-user {
  color: var(--fg-strong);
  font-weight: 600;
}

.sidebar-footer {
  border-top: 1px solid var(--border-soft);
  padding: 10px 14px;
  font-size: 11px;
  color: var(--muted-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-footer .footer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sidebar-footer .footer-nav { justify-content: flex-start; flex-wrap: wrap; }
.sidebar-footer .footer-nav .ghost-btn { flex: 1 1 auto; }
.sidebar-footer .footer-user { justify-content: flex-end; }

.sidebar-footer #logout-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.sidebar-footer #logout-btn:hover {
  color: var(--fg);
  border-color: var(--surf);
}

.sidebar-footer .ghost-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.sidebar-footer .ghost-btn:hover { color: var(--fg); border-color: var(--surf); }
.sidebar-footer .ghost-btn.active {
  color: var(--fg);
  border-color: var(--accent, #b04a1f);
  background: rgba(176, 74, 31, 0.10);
}

#conversation-list li.deleted span:first-child {
  color: var(--muted);
  font-style: italic;
}
#conversation-list li.deleted .meta { color: var(--muted-2); }

/* --- Main --- */

#main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 18, 12, 0.35) 0%, rgba(90, 60, 28, 0.20) 100%);
}

#chat-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.chat-header-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Eyebrow row above the title: the "Threads" back-link and the org-slug chip.
   Keeps the title row clear of the chip so a narrow (sided) header doesn't
   cram title + chip + action buttons onto one line. */
.chat-header-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

#chat-header h1 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--fg-strong);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
#sidebar-toggle:hover { background: rgba(176, 74, 31, 0.10); border-color: var(--surf); }
#sidebar-toggle:active { transform: scale(0.96); }

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}
#sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}

#pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-wrap: wrap;
  /* Keep the badge from squashing the conversation title: it never grows past
     its content, and yields width to the title row before the title clips. */
  flex: 0 1 auto;
  min-width: 0;
}
#pr-badge .pr-branch {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  background: rgba(176, 74, 31, 0.18);
  color: var(--foam);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(176, 74, 31, 0.30);
  /* The branch name is an auto-generated chat/<org>-conv-<id> slug — long and
     uninformative. Cap it so it reads as a compact chip, not an address bar;
     the full name stays available in the title tooltip. */
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
#pr-badge .pr-link {
  font-size: 12px;
  color: var(--kelp);
  background: rgba(176, 74, 31, 0.10);
  border: 1px solid rgba(176, 74, 31, 0.30);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
}
#pr-badge .pr-link:hover { text-decoration: underline; }

/* Workbench-mode UI: empty-state org combobox + mode pill + deploy card. */
.org-combo {
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  position: relative;
}
.org-combo-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wb-mute);
}
.org-combo-field {
  position: relative;
  display: flex;
  align-items: center;
}
.org-combo-field input {
  flex: 1;
  font-size: 13px;
  padding: 8px 56px 8px 10px;
  border-radius: 8px;
  background: rgba(176, 74, 31, 0.08);
  color: var(--fg);
  border: 1px solid rgba(176, 74, 31, 0.28);
  width: 100%;
  font-family: inherit;
}
.org-combo-field input:focus {
  outline: none;
  border-color: var(--foam);
  background: rgba(176, 74, 31, 0.14);
}
.org-combo-clear,
.org-combo-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--wb-mute);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.org-combo-clear { right: 26px; font-size: 16px; }
.org-combo-toggle { right: 6px; font-size: 12px; }
.org-combo-clear:hover,
.org-combo-toggle:hover { color: var(--fg); }
.org-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--bg-panel);
  border: 1px solid rgba(176, 74, 31, 0.32);
  border-radius: 8px;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.org-combo-option {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--fg);
}
.org-combo-option:hover,
.org-combo-option.highlight { background: rgba(176, 74, 31, 0.16); }
.org-combo-option.selected { color: var(--foam); }
.org-combo-option-sub {
  font-size: 11px;
  color: var(--wb-mute);
  font-family: "Inter", sans-serif;
}

/* Empty-state model + effort selectors (shown for every chat). */
.chat-options {
  width: 100%;
  max-width: 360px;
  margin-top: 10px;
  display: flex;
  gap: 12px;
}
.chat-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.chat-option-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wb-mute);
}
.chat-option-select {
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(176, 74, 31, 0.08);
  color: var(--fg);
  border: 1px solid rgba(176, 74, 31, 0.28);
  font-family: inherit;
  cursor: pointer;
}
.chat-option-select:focus {
  outline: none;
  border-color: var(--foam);
  background: rgba(176, 74, 31, 0.14);
}

.mode-pill {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-left: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
  border: 1px solid var(--wb-line);
}
.mode-pill[data-mode="workbench"] {
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
  border-color: var(--wb-line);
}

.deploy-summary {
  align-self: stretch;
  max-width: 760px;
  margin: 10px auto 4px;
  background: rgba(176, 74, 31, 0.08);
  border: 1px solid rgba(176, 74, 31, 0.32);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.deploy-summary-header {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--kelp);
}
.deploy-summary-row {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  padding: 2px 0;
}
.deploy-summary-row.err {
  color: var(--danger, #f6685e);
}
.deploy-summary-row.ok {
  color: var(--fg);
}

/* Interactive clarifying-question card (```ask blocks). Rendered inside the
   assistant message; the user picks an option (or types into "Other…") and the
   answer is sent as the next message. Base = dark/Rails; light overrides below. */
.ask-card {
  margin-top: 12px;
  background: var(--bubble-assistant);
  border: 1px solid rgba(176, 74, 31, 0.32);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ask-card.ask-incomplete { border-color: var(--danger); }
.ask-question { display: flex; flex-direction: column; gap: 8px; }
.ask-q-head { display: flex; align-items: center; gap: 6px; }
.ask-q-head .block-icon { color: var(--kelp); display: inline-flex; }
.ask-q-chip {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kelp);
}
.ask-q-text { font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.4; }
.ask-options { display: flex; flex-direction: column; gap: 6px; }
.ask-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.ask-option:hover { border-color: rgba(176, 74, 31, 0.5); background: rgba(176, 74, 31, 0.06); }
.ask-option.selected { border-color: var(--surf); background: rgba(176, 74, 31, 0.10); }
.ask-option input { margin-top: 2px; accent-color: var(--surf); flex: 0 0 auto; }
.ask-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ask-option-label { font-size: 13.5px; font-weight: 500; color: var(--fg); }
.ask-option-desc { font-size: 12px; color: rgba(243, 239, 230, 0.6); line-height: 1.35; }
.ask-other-input {
  margin-top: 6px;
  width: 100%;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.ask-other-input:focus { outline: none; border-color: var(--surf); }
.ask-other-input[hidden] { display: none; }
.ask-actions { display: flex; justify-content: flex-end; }
.ask-submit {
  background: var(--wb-accent);
  color: var(--wb-surface);
  border: 0;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(176, 74, 31, 0.4);
  transition: filter .12s ease;
}
.ask-submit:hover { filter: brightness(1.06); }
.ask-submit:disabled { filter: grayscale(0.4) brightness(0.8); cursor: default; box-shadow: none; }
.ask-card.answered .ask-option { cursor: default; }
.ask-card.answered .ask-option:hover { border-color: rgba(255, 255, 255, 0.10); background: transparent; }
.ask-card.answered .ask-option.selected { border-color: var(--surf); background: rgba(176, 74, 31, 0.10); }
.ask-preparing { font-size: 12.5px; color: var(--kelp); font-style: italic; padding: 4px 0; display: inline-flex; align-items: center; gap: 7px; }
.ask-preparing .mini-loader { flex: 0 0 auto; gap: 0; }
.ask-preparing .mini-loader__art { width: 18px; }

/* Light (workbench) theme overrides. */
body.layout-workbench .ask-card {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04);
}
body.layout-workbench .ask-q-head .block-icon,
body.layout-workbench .ask-q-chip { color: var(--wb-accent); }
body.layout-workbench .ask-q-text { color: var(--wb-ink); }
body.layout-workbench .ask-option { border-color: var(--wb-line); }
body.layout-workbench .ask-option:hover { border-color: var(--wb-line-strong); background: var(--wb-canvas); }
body.layout-workbench .ask-option.selected { border-color: var(--wb-accent); background: var(--wb-accent-soft); }
body.layout-workbench .ask-option input { accent-color: var(--wb-accent); }
body.layout-workbench .ask-option-label { color: var(--wb-ink); }
body.layout-workbench .ask-option-desc { color: var(--wb-mute); }
body.layout-workbench .ask-other-input {
  background: var(--wb-surface);
  border-color: var(--wb-line);
  color: var(--wb-ink);
}
body.layout-workbench .ask-other-input:focus { border-color: var(--wb-accent); }
body.layout-workbench .ask-submit {
  background: var(--wb-ink);
  color: var(--wb-canvas);
  box-shadow: none;
}
body.layout-workbench .ask-submit:hover { background: var(--wb-accent); filter: none; }
body.layout-workbench .ask-card.answered .ask-option.selected {
  border-color: var(--wb-accent);
  background: var(--wb-accent-soft);
}
body.layout-workbench .ask-preparing { color: var(--wb-mute); }

.msg.system {
  font-size: 13px;
  background: rgba(176, 74, 31, 0.10);
  border: 1px solid rgba(176, 74, 31, 0.35);
  color: var(--wb-accent);
}
.msg.system .msg-body a { color: var(--foam); }

.msg .msg-body a,
.msg .msg-body a:visited {
  color: var(--kelp);
  text-decoration: underline;
  text-decoration-color: rgba(176, 74, 31, 0.45);
  text-underline-offset: 2px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.msg .msg-body a:hover {
  color: #5eead4;
  text-decoration-color: currentColor;
}
/* User bubble is the light editorial card (--wb-surface, white), so links must
   use the dark accent — the old near-white (#fffaf2) was a leftover from the
   retired dark coral bubble and rendered invisible on white. */
.msg.user .msg-body a,
.msg.user .msg-body a:visited {
  color: var(--wb-accent);
  text-decoration-color: rgba(176, 74, 31, 0.45);
}
.msg.user .msg-body a:hover {
  color: var(--wb-accent);
  text-decoration-color: currentColor;
}

.conversation-menu {
  position: relative;
  display: inline-flex;
}
.conversation-menu[hidden] { display: none; }
.conversation-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.conversation-menu-trigger:hover { color: var(--fg-strong); border-color: var(--surf); background: rgba(176, 74, 31, 0.08); }
.conversation-menu-trigger[aria-expanded="true"] { color: var(--fg-strong); border-color: var(--surf); background: rgba(176, 74, 31, 0.10); }

.conversation-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conversation-menu-dropdown[hidden] { display: none; }
.conversation-menu-dropdown button[hidden] { display: none; }
.conversation-menu-dropdown button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  color: var(--fg);
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.conversation-menu-dropdown button:hover {
  background: rgba(176, 74, 31, 0.10);
  color: var(--fg-strong);
}
.conversation-menu-dropdown button svg { flex-shrink: 0; opacity: 0.85; }
#delete-btn { color: #b54422; }
#delete-btn:hover { background: rgba(176, 74, 31, 0.10); color: #b54422; }

/* --- Messages --- */

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.msg {
  max-width: 760px;
  border-radius: var(--radius);
  padding: 12px 16px;
  line-height: 1.55;
  font-size: 14.2px;
  word-wrap: break-word;
  animation: surface 0.35s cubic-bezier(.2, .9, .25, 1);
}
@keyframes surface {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg.user {
  background: var(--bubble-user);
  color: var(--bubble-user-fg);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 20px rgba(20, 20, 15, 0.35);
}

.msg.assistant {
  background: var(--bubble-assistant);
  border: 1px solid var(--bubble-assistant-b);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.msg.tool-pane {
  background: rgba(176, 74, 31, 0.04);
  border: 1px dashed var(--bubble-tool-b);
  color: var(--bubble-tool-fg);
  align-self: flex-start;
  font-size: 12.5px;
  border-radius: 8px;
  max-width: 520px;
  padding: 6px 12px;
}
.msg.tool-pane[open] {
  background: var(--bubble-tool);
  padding: 10px 14px;
}
.msg.tool-pane summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--kelp);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  outline: none;
  user-select: none;
}
.msg.tool-pane summary::-webkit-details-marker { display: none; }
.msg.tool-pane summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--kelp);
  transition: transform .15s ease;
}
.msg.tool-pane[open] summary::before { transform: rotate(90deg); }
.msg.tool-pane .tool-label { letter-spacing: 0.2px; }
.msg.tool-pane .tool-count {
  font-size: 10.5px;
  color: var(--muted);
  margin-left: auto;
  font-weight: 400;
}
.msg.tool-pane .tool-body {
  margin: 10px 0 0;
  padding-left: 20px;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  color: var(--foam);
  max-height: 320px;
  overflow-y: auto;
}
.msg.tool-pane .tool-body li {
  padding: 3px 0;
  border-bottom: 1px solid rgba(176, 74, 31, 0.08);
  word-break: break-all;
}
.msg.tool-pane .tool-body li:last-child { border-bottom: 0; }

.msg.thinking {
  background: rgba(176, 74, 31, 0.05);
  border: 1px dashed var(--bubble-think-b);
  color: var(--bubble-think-fg);
  align-self: flex-start;
  font-size: 12.5px;
  border-radius: 8px;
  max-width: 520px;
  padding: 6px 12px;
}
.msg.thinking[open] {
  background: var(--bubble-think);
  padding: 10px 14px;
}
.msg.thinking summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--sun);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  outline: none;
  user-select: none;
}
.msg.thinking summary::-webkit-details-marker { display: none; }
.msg.thinking summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--sun);
  transition: transform .15s ease;
}
.msg.thinking[open] summary::before { transform: rotate(90deg); }
.msg.thinking .think-label { letter-spacing: 0.2px; }
.msg.thinking .think-count {
  font-size: 10.5px;
  color: var(--muted);
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.msg.thinking .think-body {
  margin-top: 10px;
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--foam);
  font-style: italic;
  border-left: 2px solid rgba(176, 74, 31, 0.4);
  padding-left: 12px;
  max-height: 360px;
  overflow-y: auto;
}

.msg.error {
  background: rgba(181, 68, 34, 0.10);
  border: 1px solid rgba(181, 68, 34, 0.35);
  color: var(--coral-soft);
}

.msg .msg-body { white-space: pre-wrap; }
.msg .msg-body p { margin: 0; }

.msg .msg-body h1,
.msg .msg-body h2,
.msg .msg-body h3,
.msg .msg-body h4,
.msg .msg-body h5,
.msg .msg-body h6 {
  margin: 14px 0 6px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foam);
}
.msg .msg-body h1 { font-size: 1.35em; }
.msg .msg-body h2 { font-size: 1.22em; }
.msg .msg-body h3 { font-size: 1.10em; }
.msg .msg-body h4 { font-size: 1.02em; }
.msg .msg-body h5,
.msg .msg-body h6 { font-size: 0.96em; opacity: 0.9; }
.msg .msg-body h1:first-child,
.msg .msg-body h2:first-child,
.msg .msg-body h3:first-child,
.msg .msg-body h4:first-child,
.msg .msg-body h5:first-child,
.msg .msg-body h6:first-child { margin-top: 0; }

/* Scroll container around a markdown table. width:fit-content makes the box hug
   the table's natural width (so a narrow table's border doesn't span the whole
   message), while max-width:100% + overflow-x:auto keep a wide table scrollable
   instead of overflowing the column. The border/radius live here, not on the
   table, so the rounded corners clip the header background cleanly. */
.msg .msg-body .md-table-wrap {
  margin: 10px 0;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(176, 74, 31, 0.28);
  border-radius: 8px;
}
.msg .msg-body table {
  border-collapse: collapse;
  font-size: 13px;
  white-space: normal;
}
.msg .msg-body .md-table-wrap table { margin: 0; }
.msg .msg-body table th,
.msg .msg-body table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(176, 74, 31, 0.18);
  border-right: 1px solid rgba(176, 74, 31, 0.18);
  text-align: left;
  vertical-align: top;
}
.msg .msg-body table th:last-child,
.msg .msg-body table td:last-child { border-right: none; }
.msg .msg-body table tbody tr:last-child td { border-bottom: none; }
.msg .msg-body table thead th {
  background: rgba(176, 74, 31, 0.18);
  color: var(--foam);
  font-weight: 600;
}
.msg .msg-body table tbody tr:nth-child(even) td {
  background: rgba(176, 74, 31, 0.06);
}

.msg pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12.5px;
  margin: 10px 0;
  border: 1px solid rgba(176, 74, 31, 0.2);
  font-family: "Inter", sans-serif;
}

.msg code {
  background: rgba(176, 74, 31, 0.18);
  color: var(--foam);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "Inter", sans-serif;
}
.msg pre code { background: transparent; padding: 0; color: inherit; }

.msg-images {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.msg-images img {
  max-height: 180px;
  max-width: 240px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  object-fit: cover;
  background: rgba(0, 0, 0, 0.25);
  cursor: zoom-in;
}

/* Full-size attached-image preview overlay (openImageLightbox in app.js). */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(20, 20, 15, 0.78);
  cursor: zoom-out;
}
.image-lightbox.open { display: flex; }
.image-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  max-height: 100%;
}
.image-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.image-lightbox__cap {
  color: #fffaf2;
  font-size: 12px;
  text-align: center;
  word-break: break-all;
  max-width: 80vw;
}

.attachments {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attachment-link {
  background: rgba(176, 74, 31, 0.10);
  border: 1px solid rgba(176, 74, 31, 0.30);
  color: var(--kelp);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  text-decoration: none;
  transition: all .15s ease;
}
.attachment-link:hover {
  background: rgba(176, 74, 31, 0.18);
  color: var(--mist);
}

.msg-meta {
  color: var(--muted);
  font-size: 11px;
  margin-top: 8px;
  letter-spacing: 0.3px;
}

.msg-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(216, 211, 196, 0.08);
  color: var(--muted);
  font-size: 11.5px;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.2px;
}
.msg-status.standalone {
  align-self: flex-start;
  max-width: 80%;
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-top: none;
  border: 1px dashed rgba(216, 211, 196, 0.18);
  border-radius: 14px;
  background: rgba(176, 74, 31, 0.06);
  font-size: 12.5px;
}
.msg-status .status-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--foam);
}
.msg-status .typing { gap: 3px; }
.msg-status .typing span {
  width: 5px;
  height: 5px;
  background: var(--kelp);
}
.msg-status .status-elapsed {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}
/* Turtle that rides in the live-turn status pill — small, never shrinks, and
   keeps walking through tool runs so "Mini is working" never visually stalls. */
.msg-status .mini-loader { flex: 0 0 auto; gap: 0; }
.msg-status .mini-loader__art { width: 22px; }

/* --- Empty state --- */

#empty-state {
  color: var(--muted);
  font-size: 14px;
  align-self: center;
  margin-top: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#empty-state .empty-emoji {
  font-size: 64px;
  filter: drop-shadow(0 6px 24px rgba(176, 74, 31, 0.35));
  animation: bob 6s ease-in-out infinite;
}
#empty-state .empty-title { color: var(--fg-strong); font-size: 18px; font-weight: 600; }
#empty-state .empty-hint  { font-size: 13px; color: var(--muted); max-width: 420px; line-height: 1.5; }

/* --- Composer --- */

#composer {
  border-top: 1px solid var(--border);
  padding: 14px 20px 18px;
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 4px;
}
.tray-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}
.tray-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tray-thumb.uploading::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 14, 8, 0.55);
  background-image: linear-gradient(90deg, transparent, rgba(176, 74, 31, 0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.tray-thumb .remove {
  position: absolute;
  top: 2px; right: 2px;
  background: rgba(20, 14, 8, 0.75);
  color: var(--fg-strong);
  border: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.tray-thumb .remove:hover { background: var(--coral); }

/* --- Queued follow-up messages (typed while a turn streams) --- */
#queue-tray {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.queue-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(176, 74, 31, 0.10);
  border: 1px solid rgba(176, 74, 31, 0.30);
  border-radius: 8px;
  padding: 5px 6px 5px 10px;
}
.queue-item-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-item .remove {
  flex: none;
  background: rgba(20, 14, 8, 0.55);
  color: var(--fg-strong);
  border: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.queue-item .remove:hover { background: var(--coral); }

/* Non-image attachments (xlsx / xls / csv / json): a labelled chip instead of
   an image thumbnail. Auto-width, taller-than-square is fine. */
.tray-thumb.tray-file {
  width: auto;
  max-width: 200px;
  height: 64px;
  padding: 8px 26px 8px 10px;
  display: flex;
  align-items: center;
}
.tray-file-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.tray-file-ext {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--shell);
  background: var(--surf);
}
.tray-file-name {
  font-size: 11px;
  line-height: 1.25;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

/* --- @-mention chips + dropdown --- */

.msg-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}


#mention-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}
.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(176, 74, 31, 0.14);
  border: 1px solid rgba(176, 74, 31, 0.35);
  color: var(--fg-strong);
  font-size: 12px;
  padding: 3px 6px 3px 8px;
  border-radius: 999px;
  max-width: 260px;
}
.mention-chip-kind {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--surf);
  background: rgba(176, 74, 31, 0.22);
  padding: 1px 6px;
  border-radius: 999px;
}
.mention-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-chip-x {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
}
.mention-chip-x:hover { color: var(--coral); }

.mention-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 16px;
  right: 16px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 50;
  padding: 4px;
}
#composer { position: relative; }
.mention-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-strong);
}
.mention-row.active,
.mention-row:hover {
  background: rgba(176, 74, 31, 0.14);
}
.mention-kind {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--surf);
  background: rgba(176, 74, 31, 0.22);
  padding: 2px 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.mention-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.mention-badge-draft {
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.mention-sublabel {
  flex: 0 1 auto;
  color: var(--fg-muted);
  font-size: 11px;
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
}
.mention-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-muted);
  margin-left: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.mention-arrow:hover {
  background: rgba(176, 74, 31, 0.18);
  border-color: var(--border);
  color: var(--fg-strong);
}
.mention-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--fg-muted);
}
.mention-crumb {
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(176, 74, 31, 0.12);
  color: var(--fg-strong);
}
.mention-crumb:hover { background: rgba(176, 74, 31, 0.22); }
.mention-crumb-sep { color: var(--fg-muted); padding: 0 2px; }

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer-row:focus-within {
  border-color: var(--surf);
  box-shadow: var(--shadow-glow);
}

#attach-btn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
#attach-btn:hover { color: var(--surf); background: rgba(176, 74, 31, 0.10); }

#input {
  flex: 1;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--fg-strong);
  padding: 8px 4px;
  font: inherit;
  font-size: 14.2px;
  outline: none;
  max-height: 200px;
  min-height: 24px;
  line-height: 1.5;
}
#input::placeholder { color: var(--muted-2); }
#input:disabled { opacity: 0.5; cursor: not-allowed; }

#send {
  background: linear-gradient(135deg, var(--surf), var(--kelp));
  color: var(--abyss);
  border: 0;
  border-radius: 10px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 14px rgba(176, 74, 31, 0.4);
}
#send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(176, 74, 31, 0.55); }
#send:active:not(:disabled) { transform: translateY(0); }
#send:disabled { background: rgba(255,255,255,0.05); color: var(--muted-2); cursor: not-allowed; box-shadow: none; }

/* Stop button — slots into the same composer position as #send, swapped
 * via `hidden` while a turn is streaming. Coral so the user sees it as a
 * destructive action distinct from the send affordance.
 *
 * Note on the `#stop[hidden]` rule: the bare `#stop { display: grid }`
 * has higher specificity than the UA's `[hidden] { display: none }`, so
 * the `hidden` HTML attribute is ignored without an explicit override. */
#stop {
  background: var(--coral, #d6543e);
  color: #fff;
  border: 0;
  border-radius: 10px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  box-shadow: 0 4px 14px rgba(214, 84, 62, 0.35);
  position: relative;
}
#stop[hidden] { display: none; }
#send[hidden] { display: none; }
#stop:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(214, 84, 62, 0.55);
}
#stop:active:not(:disabled) { transform: translateY(0); }
#stop:disabled { opacity: 0.6; cursor: progress; }
/* Subtle pulsing ring so it reads as "actively running, click to cancel". */
#stop:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  border: 2px solid var(--coral, #d6543e);
  opacity: 0;
  animation: stop-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes stop-pulse {
  0%   { opacity: 0.5; transform: scale(0.95); }
  70%  { opacity: 0;   transform: scale(1.15); }
  100% { opacity: 0;   transform: scale(1.15); }
}

.composer-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted-2);
  padding: 0 4px;
}
.hint-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kelp);
  box-shadow: 0 0 8px var(--kelp);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
/* Selected model + effort, pinned to the right of the composer hint. */
.model-effort-badge {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted-2);
  background: rgba(176, 74, 31, 0.10);
  border: 1px solid rgba(176, 74, 31, 0.24);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* --- Drag-active composer --- */

#composer.drag-active .composer-row {
  border-color: var(--surf);
  box-shadow: var(--shadow-glow);
  background: rgba(176, 74, 31, 0.10);
}

/* --- Streaming dots --- */

.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--surf);
  opacity: 0.4;
  animation: typing 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- Scrollbar --- */

#messages::-webkit-scrollbar,
#conversation-list::-webkit-scrollbar { width: 10px; }
#messages::-webkit-scrollbar-track,
#conversation-list::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb,
#conversation-list::-webkit-scrollbar-thumb {
  background: rgba(176, 74, 31, 0.2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#messages::-webkit-scrollbar-thumb:hover,
#conversation-list::-webkit-scrollbar-thumb:hover { background: rgba(176, 74, 31, 0.4); background-clip: content-box; }

/* --- Responsive --- */

/* Tablet: trim sidebar and message paddings, but keep two-pane layout. */
@media (max-width: 1024px) {
  #sidebar { width: 240px; }
  #messages { padding: 20px 18px 10px; }
  .msg { max-width: 88%; }
  #chat-header { padding: 12px 18px; }
  #composer { padding: 12px 16px 14px; }
}

/* Phone: collapse sidebar to an off-canvas drawer with a hamburger toggle. */
@media (max-width: 720px) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    z-index: 10;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.2, .9, .25, 1);
    box-shadow: 8px 0 30px rgba(20, 14, 8, 0.45);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidebar.open { transform: translateX(0); }

  #sidebar-toggle { display: inline-flex; }

  #main {
    width: 100%;
    flex: 1 1 auto;
  }

  #chat-header {
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  #chat-header h1 { font-size: 14.5px; }

  #messages {
    padding: 14px 12px 8px;
    gap: 10px;
  }
  .msg {
    max-width: 95%;
    font-size: 14px;
    padding: 10px 13px;
    line-height: 1.5;
  }
  .msg.tool-pane,
  .msg.thinking { max-width: 95%; }

  #pr-badge { gap: 6px; margin-left: 8px; }
  #pr-badge .pr-branch { font-size: 10.5px; padding: 2px 7px; max-width: 110px; }
  #pr-badge .pr-link   { font-size: 11px;   padding: 2px 8px; }

  .conversation-menu-trigger { width: 34px; height: 34px; }

  #composer {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  /* 16px input prevents iOS Safari from auto-zooming on focus.
     Bumped min-height so a one-line placeholder isn't clipped. */
  #input { font-size: 16px; padding: 8px 4px; min-height: 28px; line-height: 1.4; }
  /* Bigger tap targets on touch screens. */
  #attach-btn { width: 40px; height: 40px; }
  #send { width: 44px; height: 44px; }

  .composer-hint { font-size: 10.5px; }

  .msg-images img { max-height: 140px; max-width: 60vw; }
  .tray-thumb { width: 56px; height: 56px; }
}

/* Compact phones — squeeze a little more. */
@media (max-width: 380px) {
  #chat-header { padding: 8px 10px; }
  #chat-header h1 { font-size: 14px; }
  #messages { padding: 12px 10px 6px; }
  .msg { padding: 9px 12px; font-size: 13.8px; }
  #composer { padding: 8px 10px; }
  .composer-hint { display: none; }
  .sidebar-footer { padding: 8px 12px; }
  /* No room for the branch slug here — the "View PR" link carries the intent. */
  #pr-badge .pr-branch { display: none; }
}

/* Touch devices: disable hover affordances that get stuck after a tap. */
@media (hover: none) {
  #conversation-list li:hover { background: transparent; }
  #conversation-list li.active:hover {
    background: linear-gradient(90deg, rgba(176, 74, 31, 0.22), rgba(176, 74, 31, 0.10));
  }
  .conversation-menu-trigger:hover { background: transparent; color: var(--muted); border-color: var(--border); }
}

/* ================================================================
   Editorial palette (workbench parity) + top app bar + preview pane.
   Scoped: the top app bar is always on; the split layout and editorial
   surface only kick in under body.layout-workbench so Rails mode is
   unchanged.
   ================================================================ */

:root {
  --wb-canvas:       #f6f4ef;
  --wb-surface:      #ffffff;
  --wb-ink:          #14140f;
  --wb-mute:         #6b6b60;
  --wb-line:         #e6e2d7;
  --wb-line-strong:  #d8d3c4;
  --wb-accent:       #b04a1f;
  --wb-accent-soft:  #f0d9c8;

  --wb-font-sans:  "Inter", sans-serif;
  --wb-font-serif: "Inter", sans-serif;
  --wb-font-mono:  "Inter", sans-serif;
}

.eyebrow {
  font-family: var(--wb-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-mute);
}

.font-serif {
  font-family: var(--wb-font-serif);
  letter-spacing: -0.015em;
}

/* --- Top app bar (always visible) --- */

#app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.app-bar-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.app-bar-mark {
  font-family: var(--wb-font-serif);
  font-size: 22px;
  line-height: 1;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}

#app-bar .eyebrow {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}

.app-bar-org {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#app-bar-org-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-input);
  color: var(--fg-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  font-size: 13px;
  font-family: var(--wb-font-sans);
  font-weight: 500;
  cursor: pointer;
  min-width: 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%236b6b60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s, background-color .15s;
}
#app-bar-org-select:hover { border-color: var(--surf); }
#app-bar-org-select:focus { outline: none; border-color: var(--surf); box-shadow: var(--shadow-glow); }
#app-bar-org-select option { background: var(--wb-surface); color: var(--fg-strong); }

/* Push the app body down below the fixed app bar. */
html, body { padding-top: 0; }
body { padding-top: 56px; }

#app-body {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* The body's existing flex layout is used by Rails mode. We host #sidebar
   and #main inside #app-body, which itself is the flex container. */
body { flex-direction: column; }

/* --- Workbench-mode back-to-threads link in the chat header --- */

.back-to-threads {
  display: none;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 8px 2px 4px;
  margin: 0 0 2px -4px;
  border-radius: 6px;
  transition: color .15s, background-color .15s;
}
.back-to-threads:hover { color: var(--fg-strong); background: rgba(255, 255, 255, 0.04); }
.back-to-threads .eyebrow { color: inherit; font-size: 10.5px; letter-spacing: 0.14em; }

.preview-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  margin-left: 8px;
  transition: color .15s, border-color .15s, background-color .15s;
}
.preview-toggle:hover { color: var(--fg-strong); border-color: var(--surf); }
/* Hide/show artifacts control. JS sets `hidden` when there's nothing to preview;
   shown on both desktop and the mobile drawer whenever artifacts exist. The
   `:not([hidden])` guard is required — an author `display` overrides the
   `[hidden]` attribute, so the button must opt back in only when not hidden. */
body.layout-workbench .preview-toggle:not([hidden]) { display: inline-flex; }

/* ================================================================
   Workbench layout (body.layout-workbench)
   - Conversation-list sidebar hidden
   - Chat collapses to ~34%
   - Preview pane fills the remaining ~66%
   - Editorial palette / typography kicks in
   ================================================================ */

body.layout-workbench {
  background: var(--wb-canvas);
  color: var(--wb-ink);
  font-family: var(--wb-font-sans);
}

/* Sidebar in workbench mode is a slide-in drawer (not display:none), so
   the Threads button can reveal the conversation list without disturbing
   the chat+preview grid. Default state is off-screen left. */
body.layout-workbench #sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: min(86vw, 320px);
  z-index: 11;
  display: flex;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.2, .9, .25, 1);
  box-shadow: 8px 0 30px rgba(20, 20, 15, 0.18);
}
body.layout-workbench #sidebar.open { transform: translateX(0); }
body.layout-workbench #sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 10;
  background: rgba(20, 20, 15, 0.32);
  opacity: 0;
  transition: opacity .2s;
}
body.layout-workbench #sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}

body.layout-workbench #app-body {
  display: grid;
  /* Chat column tracks 34% but never exceeds 400px (Claude-style cap). */
  grid-template-columns: clamp(360px, 34%, 400px) minmax(0, 1fr);
}

/* Preview hidden (no artifacts, or user-collapsed): chat takes the full width,
   the pane drops out of the grid. Desktop/tablet only — the mobile preview is a
   fixed bottom drawer (see the max-width:768px block) and isn't grid-driven. */
@media (min-width: 769px) {
  /* Full-page workbench (no artifacts, or the user collapsed the pane): there's
     no preview to fill the right, so the screen stays two-column by docking the
     conversation-list sidebar on the LEFT (claude.ai pattern) and giving the
     chat the rest. With artifacts present the sidebar reverts to its hidden
     overlay and the chat sits "sided" next to the preview pane. */
  body.layout-workbench.preview-hidden #app-body {
    grid-template-columns: clamp(260px, 24%, 320px) minmax(0, 1fr);
  }
  /* Lift the sidebar out of its fixed off-screen drawer into the grid flow. */
  body.layout-workbench.preview-hidden #sidebar {
    position: relative;
    top: auto;
    transform: none;
    width: auto;
    z-index: 1;
    box-shadow: none;
  }
  /* Docked → no dimming backdrop and no redundant "Threads" opener. */
  body.layout-workbench.preview-hidden #sidebar-backdrop { display: none !important; }
  body.layout-workbench.preview-hidden .back-to-threads { display: none; }
  /* The pane keeps its `[hidden]` attribute permanently (workbench force-shows it
     via `#preview-pane[hidden] { display: flex }` further down). Match `[hidden]`
     here too so this rule outranks that one regardless of source order. */
  body.layout-workbench.preview-hidden #preview-pane[hidden] { display: none; }
  body.layout-workbench.preview-hidden #main { border-right: none; }
}

body.layout-workbench #app-bar {
  background: rgba(246, 244, 239, 0.92);
  border-bottom-color: var(--wb-line);
}
body.layout-workbench #app-bar .app-bar-mark { color: var(--wb-ink); }
body.layout-workbench #app-bar .eyebrow      { color: var(--wb-mute); }
body.layout-workbench #app-bar-org-select {
  background-color: var(--wb-surface);
  color: var(--wb-ink);
  border-color: var(--wb-line);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%236b6b60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
}
body.layout-workbench #app-bar-org-select:hover  { border-color: var(--wb-line-strong); }
body.layout-workbench #app-bar-org-select:focus  { border-color: var(--wb-accent); box-shadow: none; }
body.layout-workbench #app-bar-org-select option { background: var(--wb-surface); color: var(--wb-ink); }

body.layout-workbench #main {
  background: var(--wb-canvas);
  border-right: 1px solid var(--wb-line);
}
body.layout-workbench #chat-header {
  background: rgba(246, 244, 239, 0.85);
  border-bottom-color: var(--wb-line);
  padding: 12px 20px;
}
body.layout-workbench #chat-header h1 {
  font-family: var(--wb-font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--wb-ink);
  text-align: left;
  letter-spacing: -0.015em;
  /* Fill the title row (base flex:1) so the action buttons sit flush right.
     The org chip lives in the eyebrow row above now, not on this row. */
}
body.layout-workbench .back-to-threads { display: inline-flex; color: var(--wb-mute); }
body.layout-workbench .back-to-threads:hover { color: var(--wb-ink); background: rgba(20, 20, 15, 0.04); }
body.layout-workbench #sidebar-toggle { display: none; }
/* Org slug chip — a muted editorial chip on the workbench palette (overrides the
   gold rails `.mode-pill[data-mode]` styling). Lives in the eyebrow row beside
   "Threads"; spacing comes from the eyebrow's flex gap, so zero out the base
   `.mode-pill` margin. */
body.layout-workbench #mode-pill {
  font-family: var(--wb-font-sans);
  background: var(--wb-surface);
  color: var(--wb-mute);
  border-color: var(--wb-line);
  margin: 0;
}
body.layout-workbench .conversation-menu-trigger {
  color: var(--wb-mute);
  border-color: var(--wb-line);
  background: transparent;
}
body.layout-workbench .conversation-menu-trigger:hover,
body.layout-workbench .conversation-menu-trigger[aria-expanded="true"] {
  color: var(--wb-ink);
  border-color: var(--wb-line-strong);
  background: var(--wb-surface);
}
body.layout-workbench .conversation-menu-dropdown {
  background: var(--wb-surface);
  border-color: var(--wb-line);
  box-shadow: 0 12px 30px rgba(20, 20, 15, 0.12);
}
body.layout-workbench .conversation-menu-dropdown button { color: var(--wb-ink); }
body.layout-workbench .conversation-menu-dropdown button:hover {
  background: var(--wb-canvas);
  color: var(--wb-ink);
}
body.layout-workbench #delete-btn { color: #b54422; }
body.layout-workbench #delete-btn:hover { background: rgba(181, 68, 34, 0.08); color: #b54422; }

body.layout-workbench #messages {
  background: var(--wb-canvas);
  color: var(--wb-ink);
}
body.layout-workbench #messages .msg {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  box-shadow: none;
}
body.layout-workbench #messages .msg.user {
  background: var(--wb-surface);
  border-color: var(--wb-line-strong);
  color: var(--wb-ink);
}
body.layout-workbench #messages .msg.assistant {
  background: transparent;
  border: none;
  padding-left: 2px;
}
body.layout-workbench #messages .msg .role-label { color: var(--wb-mute); }
body.layout-workbench #messages .msg.system {
  background: transparent;
  color: var(--wb-mute);
  border-left: 2px solid var(--wb-accent-soft);
  border-radius: 0;
}

body.layout-workbench #composer {
  background: var(--wb-canvas);
  border-top: 1px solid var(--wb-line);
}
body.layout-workbench .composer-row {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: 12px;
}
body.layout-workbench .composer-row:focus-within { border-color: var(--wb-line-strong); }
body.layout-workbench #input {
  background: transparent;
  color: var(--wb-ink);
}
body.layout-workbench #input::placeholder { color: var(--wb-mute); }
body.layout-workbench #send {
  background: var(--wb-ink);
  color: var(--wb-canvas);
}
body.layout-workbench #send:hover { background: var(--wb-accent); }
body.layout-workbench .composer-hint { color: var(--wb-mute); }
body.layout-workbench #attach-btn { color: var(--wb-mute); }
body.layout-workbench #attach-btn:hover { color: var(--wb-ink); }
body.layout-workbench .queue-head { color: var(--wb-mute); }
body.layout-workbench .queue-item {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
}
body.layout-workbench .queue-item-text { color: var(--wb-ink); }
body.layout-workbench .queue-item .remove {
  background: var(--wb-line);
  color: var(--wb-ink);
}
body.layout-workbench .queue-item .remove:hover {
  background: var(--wb-accent);
  color: var(--wb-canvas);
}

/* --- Preview pane --- */

#preview-pane {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--wb-canvas);
  color: var(--wb-ink);
  font-family: var(--wb-font-sans);
  overflow: hidden;
}
body.layout-workbench #preview-pane {
  display: flex;
  /* #main is position:relative; z-index:1, so without its own stacking the
     preview column (z-index auto) can be painted UNDER #main wherever they
     meet (shadows, sub-pixel overlap). Give it an equal-or-higher layer. */
  position: relative;
  z-index: 2;
}
body.layout-workbench #preview-pane[hidden] { display: flex; }

.preview-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--wb-line);
  background: rgba(246, 244, 239, 0.85);
  overflow-x: auto;
  scrollbar-width: thin;
  min-height: 44px;
}
.preview-tabs::-webkit-scrollbar { height: 6px; }
.preview-tabs::-webkit-scrollbar-thumb { background: var(--wb-line-strong); border-radius: 999px; }

.preview-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--wb-mute);
  white-space: nowrap;
  transition: color .15s;
}
.preview-tab:hover { color: var(--wb-ink); }
.preview-tab.active { color: var(--wb-ink); }
.preview-tab.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: var(--wb-accent);
  border-radius: 2px 2px 0 0;
}
.preview-tab .tab-kind {
  font-family: var(--wb-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-accent);
  padding: 2px 6px;
  background: var(--wb-accent-soft);
  border-radius: 4px;
}
.preview-tab.active .tab-kind { color: var(--wb-accent); }
/* Per-tab close affordance. A <span role="button"> (not a real <button> — the
   tab itself is already a <button> and nesting one is invalid). Its click
   stops propagation so closing a tab doesn't also activate it. */
.preview-tab .tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: -2px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  color: var(--wb-mute);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity .15s, background .15s, color .15s;
}
.preview-tab .tab-close:hover {
  opacity: 1;
  background: rgba(20, 20, 15, 0.08);
  color: var(--wb-ink);
}

/* "Close all" button — pinned to the right edge of the tab rail. `margin-left:
   auto` pushes it right when the strip doesn't overflow; `position: sticky;
   right: 0` keeps it visible (with a matching backdrop the tabs scroll under)
   when it does. */
.tab-close-all {
  position: sticky;
  right: 0;
  margin-left: auto;
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--wb-line);
  border-radius: 7px;
  background: var(--wb-canvas);
  color: var(--wb-mute);
  font-family: var(--wb-font-sans);
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.tab-close-all:hover {
  color: var(--wb-ink);
  background: rgba(20, 20, 15, 0.045);
  border-color: var(--wb-line-strong);
}

.preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 28px;
}
.preview-empty {
  color: var(--wb-mute);
  text-align: center;
  margin-top: 60px;
  font-size: 14px;
}

.preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.preview-header h2 {
  font-family: var(--wb-font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--wb-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-header .eyebrow { white-space: nowrap; }

.preview-section {
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  background: var(--wb-surface);
  overflow: hidden;
  margin-bottom: 16px;
}
.preview-section-title {
  font-family: var(--wb-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-mute);
  padding: 10px 14px;
  border-bottom: 1px solid var(--wb-line);
  background: var(--wb-canvas);
}
.preview-table-wrap { overflow: auto; max-height: 60vh; }
.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--wb-font-mono);
}
.preview-table thead {
  position: sticky;
  top: 0;
  background: var(--wb-surface);
}
.preview-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wb-line);
  color: var(--wb-mute);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.preview-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(230, 226, 215, 0.6);
  color: var(--wb-ink);
  vertical-align: top;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-table tbody tr:last-child td { border-bottom: 0; }
.preview-table tbody tr:hover { background: rgba(176, 74, 31, 0.04); }

.preview-code {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--wb-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--wb-ink);
  color: #f6f4ef;
  overflow: auto;
  white-space: pre;
}

.preview-metric {
  padding: 28px 20px;
  text-align: center;
}
.preview-metric .metric-value {
  font-family: var(--wb-font-serif);
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wb-ink);
}
.preview-metric .metric-label {
  margin-top: 8px;
  color: var(--wb-mute);
}

.preview-chart {
  width: 100%;
  min-height: 360px;
  background: var(--wb-surface);
}

.preview-meta {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  padding: 14px 16px;
  font-size: 13px;
}
.preview-meta dt {
  font-family: var(--wb-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wb-mute);
}
.preview-meta dd { margin: 0; color: var(--wb-ink); word-break: break-word; }

.preview-error {
  padding: 16px 18px;
  border: 1px solid var(--wb-accent-soft);
  border-radius: 10px;
  color: var(--wb-accent);
  background: rgba(176, 74, 31, 0.05);
  font-size: 13px;
}

.preview-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 200px);
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface);
}

.preview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color .15s;
}
.preview-link:hover { border-color: var(--wb-line-strong); }

/* Tablet: tighter columns */
@media (max-width: 1100px) {
  body.layout-workbench #app-body {
    grid-template-columns: clamp(320px, 38%, 400px) minmax(0, 1fr);
  }
}

/* Phone: collapse preview to a bottom drawer */
@media (max-width: 768px) {
  body.layout-workbench #app-body {
    grid-template-columns: 1fr;
  }
  body.layout-workbench #preview-pane {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 56px;
    z-index: 9;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.2, .9, .25, 1);
    border-left: none;
    box-shadow: 0 -12px 40px rgba(20, 20, 15, 0.18);
  }
  body.layout-workbench #preview-pane.open { transform: translateY(0); }
}

/* ================================================================
   Global editorial palette overrides — applied to BOTH layout-rails
   and layout-workbench so Mini has one consistent professional look.
   These rules come last so they win the cascade against the legacy
   ocean theme above without needing !important. Only the LAYOUT
   differences (sidebar hidden in workbench, grid columns) stay
   scoped under body.layout-workbench.
   ================================================================ */

body {
  background: var(--wb-canvas);
  color: var(--wb-ink);
  font-family: var(--wb-font-sans);
}

/* --- Sidebar (conversation list) — visible in Rails, hidden in Workbench --- */

#sidebar {
  background: var(--wb-surface);
  border-right: 1px solid var(--wb-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--wb-ink);
}
.sidebar-header {
  border-bottom-color: var(--wb-line);
}
.brand-icon {
  filter: none;
  animation: none;
}
.brand-name {
  font-family: var(--wb-font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--wb-ink);
  letter-spacing: -0.01em;
}
.brand-sub {
  color: var(--wb-mute);
  font-family: var(--wb-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#new-chat {
  background: var(--wb-ink);
  color: var(--wb-canvas);
  border: none;
  border-radius: 8px;
  transition: background-color .15s;
}
#new-chat:hover { background: var(--wb-accent); }

#conversation-list li {
  color: var(--wb-ink);
  border-bottom: 1px solid var(--wb-line);
  background: transparent;
}
#conversation-list li:hover {
  background: rgba(20, 20, 15, 0.03);
}
#conversation-list li.active {
  background: var(--wb-accent-soft);
  background-image: none;
  color: var(--wb-ink);
  border-left: 2px solid var(--wb-accent);
}
#conversation-list li .conv-title { color: var(--wb-ink); }
#conversation-list li .conv-meta  { color: var(--wb-mute); }

.sidebar-footer {
  border-top: 1px solid var(--wb-line);
  background: var(--wb-canvas);
}
.ghost-btn {
  color: var(--wb-mute);
  background: transparent;
  border: 1px solid var(--wb-line);
}
.ghost-btn:hover { color: var(--wb-ink); border-color: var(--wb-line-strong); background: var(--wb-surface); }
#logout-btn {
  color: var(--wb-mute);
  background: transparent;
  border: 1px solid var(--wb-line);
}
#logout-btn:hover { color: var(--wb-ink); border-color: var(--wb-line-strong); }

/* --- Main chat column --- */

#main {
  background: var(--wb-canvas);
}
#chat-header {
  background: rgba(246, 244, 239, 0.85);
  border-bottom: 1px solid var(--wb-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#chat-header h1 {
  font-family: var(--wb-font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--wb-ink);
}
#sidebar-toggle {
  color: var(--wb-mute);
  border: 1px solid var(--wb-line);
  background: transparent;
}
#sidebar-toggle:hover { color: var(--wb-ink); border-color: var(--wb-line-strong); background: var(--wb-surface); }


#pr-badge { color: var(--wb-mute); }
#pr-badge .pr-branch,
#pr-badge .pr-link {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
}
#pr-badge .pr-link:hover { border-color: var(--wb-accent); color: var(--wb-accent); }

/* --- Messages --- */

#messages {
  background: var(--wb-canvas);
}
.msg {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  box-shadow: none;
  border-radius: 12px;
}
.msg.user {
  background: var(--wb-surface);
  background-image: none;
  border-color: var(--wb-line-strong);
  color: var(--wb-ink);
}
.msg.assistant {
  background: transparent;
  border-color: transparent;
}
.msg.system {
  background: transparent;
  border: none;
  border-left: 2px solid var(--wb-accent-soft);
  border-radius: 0;
  color: var(--wb-mute);
  padding-left: 14px;
}
.msg.tool-pane,
.msg.thinking {
  background: var(--wb-canvas);
  border: 1px dashed var(--wb-line);
  color: var(--wb-mute);
}
.msg .role-label,
.msg-meta,
.msg-status {
  color: var(--wb-mute);
}
.msg pre,
.msg code {
  font-family: var(--wb-font-mono);
}
.msg pre {
  background: var(--wb-ink);
  color: var(--wb-canvas);
  border-radius: 10px;
}
.msg code {
  background: var(--wb-accent-soft);
  color: var(--wb-accent);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.msg a {
  color: var(--wb-accent);
  border-bottom: 1px solid var(--wb-accent-soft);
  text-decoration: none;
}
.msg a:hover { border-bottom-color: var(--wb-accent); }
.attachment-link {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  border-radius: 8px;
}
.attachment-link:hover { border-color: var(--wb-accent); color: var(--wb-accent); }

/* --- Empty state --- */

#empty-state {
  color: var(--wb-ink);
  margin-top: 80px;
}
#empty-state .empty-emoji {
  filter: none;
  animation: none;
}
#empty-state .empty-title {
  font-family: var(--wb-font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--wb-ink);
}
#empty-state .empty-hint {
  color: var(--wb-mute);
  font-size: 13px;
  max-width: 460px;
}

/* --- Empty-state org combobox (legacy picker; the top-bar select is the primary one) --- */

.org-combo-label {
  font-family: var(--wb-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-mute);
}
.org-combo-field input {
  background: var(--wb-surface);
  color: var(--wb-ink);
  border: 1px solid var(--wb-line);
}
.org-combo-field input:focus {
  border-color: var(--wb-accent);
  background: var(--wb-surface);
}
.org-combo-field input::placeholder { color: var(--wb-mute); }
.org-combo-clear,
.org-combo-toggle { color: var(--wb-mute); }
.org-combo-clear:hover,
.org-combo-toggle:hover { color: var(--wb-ink); }
.org-combo-list {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  box-shadow: 0 8px 24px rgba(20, 20, 15, 0.10);
}
.org-combo-option {
  color: var(--wb-ink);
}
.org-combo-option:hover,
.org-combo-option.highlight {
  background: var(--wb-accent-soft);
}
.org-combo-option.selected { color: var(--wb-accent); }
.org-combo-option-sub {
  color: var(--wb-mute);
  font-family: var(--wb-font-mono);
}

/* --- Composer --- */

#composer {
  background: var(--wb-canvas);
  border-top: 1px solid var(--wb-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.composer-row {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: 14px;
  padding: 6px 10px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.composer-row:focus-within { border-color: var(--wb-line-strong); }
#input {
  background: transparent;
  color: var(--wb-ink);
  font-family: var(--wb-font-sans);
}
#input::placeholder { color: var(--wb-mute); }
#attach-btn {
  color: var(--wb-mute);
  background: transparent;
  border: none;
}
#attach-btn:hover { color: var(--wb-ink); }
#send {
  background: var(--wb-ink);
  color: var(--wb-canvas);
  border: none;
  border-radius: 10px;
  transition: background-color .15s;
}
#send:hover { background: var(--wb-accent); }
#send:disabled { background: var(--wb-line-strong); color: var(--wb-mute); cursor: not-allowed; }
#stop {
  background: var(--wb-accent);
  color: var(--wb-canvas);
  box-shadow: none;
}
#stop:hover:not(:disabled) {
  background: var(--wb-ink);
  box-shadow: 0 4px 14px rgba(176, 74, 31, 0.35);
}
#stop:not(:disabled)::after {
  border-color: var(--wb-accent);
}
.composer-hint {
  color: var(--wb-mute);
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.hint-dot { background: var(--wb-accent); }

/* Attachment thumbnails */
.tray-thumb {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: 8px;
}
.tray-thumb .remove {
  background: var(--wb-ink);
  color: var(--wb-canvas);
}
body.layout-workbench .tray-file-ext {
  color: var(--wb-surface);
  background: var(--wb-accent);
}
body.layout-workbench .tray-file-name { color: var(--wb-ink); }

/* Mention tray + dropdown */
.mention-dropdown {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  box-shadow: 0 8px 24px rgba(20, 20, 15, 0.10);
}
.mention-dropdown li:hover,
.mention-dropdown li.active {
  background: var(--wb-accent-soft);
}

/* --- Deploy summary card --- */

.deploy-summary {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-left: 3px solid var(--wb-accent);
  border-radius: 10px;
  color: var(--wb-ink);
  padding: 12px 14px;
}
.deploy-summary-header {
  color: var(--wb-ink);
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.deploy-summary-row { color: var(--wb-mute); font-family: var(--wb-font-mono); font-size: 12px; }
.deploy-summary-row.ok { color: var(--wb-ink); }
.deploy-summary-row.err { color: var(--wb-accent); }

/* --- Sidebar mobile drawer: redo with the editorial surface --- */

@media (max-width: 720px) {
  #sidebar {
    box-shadow: 8px 0 30px rgba(20, 20, 15, 0.18);
  }
}

/* --- Scrollbars: minimal editorial --- */

#messages::-webkit-scrollbar-thumb,
#conversation-list::-webkit-scrollbar-thumb {
  background: var(--wb-line-strong);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
#messages::-webkit-scrollbar-thumb:hover,
#conversation-list::-webkit-scrollbar-thumb:hover { background: var(--wb-mute); background-clip: content-box; }

/* --- Mode pill — in rails the top bar already carries the mode label, so hide
       it there. In workbench it's repurposed as the org-slug chip next to the
       title (see `body.layout-workbench #mode-pill` above), so let it show. --- */
body.layout-rails #mode-pill { display: none !important; }

/* --- Sidebar backdrop dim on mobile, editorial palette --- */
#sidebar-backdrop {
  background: rgba(20, 20, 15, 0.32);
}

/* ================================================================
   Editorial overrides for in-conversation accent surfaces:
   the Thought-process pane, Tool-calls pane, Thinking pane,
   inline "Thinking…" status pill, and the user-message bubble.
   These were still showing ocean-theme teal/yellow leftovers.
   Heading font normalized to Inter so it matches body text.
   ================================================================ */

/* Chat header heading — sans, not serif. Matches the rest of the UI. */
#chat-header h1,
#conversation-title {
  font-family: var(--wb-font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--wb-ink);
}

/* --- Tool calls pane (was teal) --- */
.msg.tool-pane {
  background: var(--wb-canvas);
  border: 1px dashed var(--wb-line-strong);
  color: var(--wb-mute);
  font-family: var(--wb-font-sans);
  border-radius: 10px;
}
.msg.tool-pane[open] {
  background: var(--wb-surface);
  border-style: solid;
  border-color: var(--wb-line);
}
.msg.tool-pane summary,
.msg.tool-pane summary::before {
  color: var(--wb-accent);
}
.msg.tool-pane .tool-label {
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-accent);
  font-weight: 500;
}
.msg.tool-pane .tool-count {
  color: var(--wb-mute);
  font-family: var(--wb-font-mono);
}
.msg.tool-pane .tool-body {
  font-family: var(--wb-font-mono);
  color: var(--wb-ink);
}
.msg.tool-pane .tool-body li {
  border-bottom-color: var(--wb-line);
}

/* --- Thought process / Thinking pane (was yellow) --- */
.msg.thinking {
  background: var(--wb-canvas);
  border: 1px dashed var(--wb-line-strong);
  color: var(--wb-mute);
  font-family: var(--wb-font-sans);
  border-radius: 10px;
}
.msg.thinking[open] {
  background: var(--wb-surface);
  border-style: solid;
  border-color: var(--wb-line);
}
.msg.thinking summary,
.msg.thinking summary::before {
  color: var(--wb-accent);
}
.msg.thinking .think-label {
  font-family: var(--wb-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-accent);
  font-weight: 500;
}
.msg.thinking .think-count {
  color: var(--wb-mute);
  font-family: var(--wb-font-mono);
}
.msg.thinking .think-body {
  color: var(--wb-ink);
  border-left-color: var(--wb-accent-soft);
  font-style: italic;
}

/* --- Inline live status pill ("Thinking… 5s") --- */
.msg-status {
  border-top: 1px solid var(--wb-line);
  color: var(--wb-mute);
  font-family: var(--wb-font-mono);
}
.msg-status.standalone {
  background: var(--wb-canvas);
  border: 1px dashed var(--wb-line-strong);
  color: var(--wb-mute);
}
.msg-status .status-text { color: var(--wb-ink); }
.msg-status .typing span { background: var(--wb-accent); }
.msg-status .status-elapsed { color: var(--wb-mute); }
.typing span { background: var(--wb-accent); }

/* --- User message bubble — drop the blue glow shadow + tighten radius --- */
.msg.user {
  background: var(--wb-surface);
  background-image: none;
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04);
  border-radius: 14px;
}
.msg.user::before,
.msg.user::after { display: none; }
.msg.assistant strong,
.msg.user strong { color: var(--wb-ink); }

/* --- Error message --- */
.msg.error {
  background: rgba(176, 74, 31, 0.05);
  border: 1px solid var(--wb-accent-soft);
  color: var(--wb-accent);
}

/* --- Markdown headings inside messages: sans, not serif, so they don't
       compete with the chat header. Restore reasonable hierarchy. --- */
.msg .msg-body h1,
.msg .msg-body h2,
.msg .msg-body h3,
.msg .msg-body h4 {
  font-family: var(--wb-font-sans);
  color: var(--wb-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* --- Markdown tables: editorial palette. The legacy ocean rule painted the
       header text in --foam (light cream), which washes out on the light
       canvas. Unscoped (rails + workbench) so it wins everywhere. --- */
.msg .msg-body .md-table-wrap {
  border-color: var(--wb-line);
}
.msg .msg-body table th,
.msg .msg-body table td {
  border-bottom-color: var(--wb-line);
  border-right-color: var(--wb-line);
  color: var(--wb-ink);
}
.msg .msg-body table thead th {
  background: var(--wb-accent-soft);
  color: var(--wb-ink);
  font-weight: 600;
  border-bottom-color: var(--wb-line-strong);
}
.msg .msg-body table tbody tr:nth-child(even) td {
  background: rgba(20, 20, 15, 0.025);
}

/* ================================================================
   Claude-design pass (workbench) — 2026-05
     • Header confined to the FIRST column; the preview pane rises to the
       very top with just its tab strip (no global bar spanning it).
     • Account dropdown (signed-in user · mode/org · Summary · Sign out)
       in the top bar.
     • Preview tabs restyled as browser/folder tabs.
     • Smaller, tighter type.
     • No in-body preview header (renderHeader is a no-op in app.js).
   Scoped to body.layout-workbench + the desktop two-column grid, so Rails
   mode and the mobile bottom-drawer layout are untouched. Last in the file
   so these win the cascade.
   ================================================================ */

/* --- Account dropdown in the top app bar --- */
.account-menu { position: relative; display: inline-flex; align-items: center; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 7px 0 5px;
  background: transparent;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--wb-mute);
  transition: border-color .15s, background-color .15s, color .15s;
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  border-color: var(--wb-line-strong);
  background: var(--wb-surface);
  color: var(--wb-ink);
}
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wb-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.account-caret { opacity: 0.65; }
.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 224px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 20, 15, 0.16);
  padding: 6px;
  z-index: 60;
}
.account-dropdown[hidden] { display: none; }
.account-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px 10px;
}
.account-name { font-size: 13px; font-weight: 600; color: var(--wb-ink); }
.account-context {
  font-family: var(--wb-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-mute);
}
.account-sep { height: 1px; background: var(--wb-line); margin: 2px 4px 4px; }
.account-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--wb-ink);
  font-size: 13px;
  font-family: var(--wb-font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s;
}
.account-item:hover { background: var(--wb-canvas); }
.account-item[hidden] { display: none; }
.account-item svg { flex-shrink: 0; opacity: 0.7; }
#account-logout { color: #b54422; }
#account-logout:hover { background: rgba(181, 68, 34, 0.08); }

/* --- Account menu relocated into the sidebar footer: full-width avatar
       trigger whose dropdown (Connect your agent, Deleted, Summary, Sign out)
       opens UPWARD since it sits at the bottom of the sidebar. --- */
.account-menu--footer { display: flex; width: 100%; }
.account-menu--footer .account-trigger {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  gap: 9px;
}
.account-trigger-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu--footer .account-caret { margin-left: auto; flex-shrink: 0; }
.account-menu--footer .account-dropdown {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 0;
}
/* "View deleted" toggle reflects its active state inside the menu. */
.account-item[aria-pressed="true"] { color: var(--wb-accent); }
.account-item[aria-pressed="true"] svg { opacity: 1; }

/* --- Top bar tightening (workbench) --- */
body.layout-workbench .app-bar-mark { font-size: 18px; }
body.layout-workbench #app-bar { padding: 0 12px 0 18px; }
body.layout-workbench #app-bar .eyebrow {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28vw;
}

/* --- "Header in the first column" + flush-top preview (desktop grid) --- */
@media (min-width: 769px) {
  body.layout-workbench { padding-top: 0; }
  body.layout-workbench #app-bar {
    width: clamp(360px, 34vw, 400px);
    right: auto;
    height: 52px;
    border-right: 1px solid var(--wb-line);
  }
  /* Clear the now column-width fixed bar; the preview pane (col 2) keeps its
     y=0 start so its tab strip is the topmost thing on the right. */
  body.layout-workbench #main { padding-top: 52px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body.layout-workbench #app-bar { width: clamp(320px, 38vw, 400px); }
}

/* --- Smaller, tighter type (workbench) --- */
body.layout-workbench #chat-header h1 { font-size: 16px; }
body.layout-workbench .msg { font-size: 13px; line-height: 1.5; }
body.layout-workbench .preview-empty { font-size: 13px; }

/* --- Preview tabs as browser/folder tabs (Claude design) --- */
body.layout-workbench .preview-tabs {
  gap: 4px;
  padding: 8px 10px 0;
  align-items: flex-end;
  background: var(--wb-canvas);
  border-bottom: 1px solid var(--wb-line);
  min-height: 40px;
}
body.layout-workbench .preview-tab {
  align-items: center;
  gap: 7px;
  max-width: 220px;
  padding: 6px 8px 7px 10px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  font-size: 12px;
  color: var(--wb-mute);
}
body.layout-workbench .preview-tab:hover {
  background: rgba(20, 20, 15, 0.045);
  color: var(--wb-ink);
}
body.layout-workbench .preview-tab.active {
  background: var(--wb-surface);
  border-color: var(--wb-line);
  color: var(--wb-ink);
  margin-bottom: -1px;   /* sit on the strip border so the tab reads as "open" */
  padding-bottom: 8px;
}
body.layout-workbench .preview-tab.active::after { display: none; }  /* drop the old underline */
body.layout-workbench .preview-tab .tab-kind {
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--wb-mute);
  background: transparent;
  border: 1px solid var(--wb-line);
  border-radius: 4px;
}
body.layout-workbench .preview-tab.active .tab-kind {
  color: var(--wb-accent);
  background: var(--wb-accent-soft);
  border-color: var(--wb-accent-soft);
}
body.layout-workbench .preview-tab .tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.layout-workbench .preview-body { padding-top: 20px; }

/* --- Mini turtle logo (replaces the 🐢 emoji brand marks) --- */
img.brand-icon {
  height: 26px;
  width: auto;
  display: inline-block;
  filter: none;
  animation: none;
}
.app-bar-logo {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.app-bar-brand { align-items: center; }

/* ================================================================
   Claude-style collapsible blocks (tool calls / thinking) + clickable
   "created item" link rows. Applies in both modes via the editorial
   (--wb-*) palette; last in the file so it wins over the per-theme block
   styles above.
   ================================================================ */

/* Card shell */
.msg.tool-pane,
.msg.thinking {
  align-self: stretch;
  max-width: 760px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  padding: 0;
  color: var(--wb-ink);
  font-family: var(--wb-font-sans);
  overflow: hidden;
}
.msg.tool-pane[open],
.msg.thinking[open] {
  background: var(--wb-surface);
  border-color: var(--wb-line);
  padding: 0;
}

/* Summary row */
.msg.tool-pane summary,
.msg.thinking summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--wb-ink);
}
.msg.tool-pane summary:hover,
.msg.thinking summary:hover { background: var(--wb-canvas); }

/* Drop the old left ▸ markers (replaced by the leading icon tile + caret) */
.msg.tool-pane summary::before,
.msg.thinking summary::before { content: none; display: none; }
.msg.tool-pane summary::-webkit-details-marker,
.msg.thinking summary::-webkit-details-marker { display: none; }

/* Leading icon tile */
.block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--wb-canvas);
  border: 1px solid var(--wb-line);
  color: var(--wb-accent);
  flex-shrink: 0;
}

/* Labels — sentence case, not the old uppercase mono */
.msg.tool-pane .tool-label,
.msg.thinking .think-label {
  font-family: var(--wb-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wb-ink);
}
.msg.tool-pane .tool-count,
.msg.thinking .think-count {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--wb-font-sans);
  color: var(--wb-mute);
  letter-spacing: 0;
}

/* Trailing chevron */
.block-caret {
  display: inline-flex;
  align-items: center;
  color: var(--wb-mute);
  flex-shrink: 0;
  transition: transform .18s ease;
}
.msg.tool-pane .tool-count + .block-caret,
.msg.thinking .think-count + .block-caret { margin-left: 6px; }
details.msg[open] > summary .block-caret { transform: rotate(180deg); }

/* Bodies */
.msg.tool-pane .tool-body {
  margin: 0;
  padding: 8px 14px 12px 14px;
  border-top: 1px solid var(--wb-line);
  font-family: var(--wb-font-mono);
  font-size: 11.5px;
  color: var(--wb-ink);
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
}
.msg.tool-pane .tool-body li {
  padding: 4px 0;
  border-bottom: 1px solid var(--wb-line);
  word-break: break-word;
}
.msg.tool-pane .tool-body li:last-child { border-bottom: 0; }
.msg.thinking .think-body {
  margin: 0 12px 12px;
  padding: 10px 0 0;
  border-top: 1px solid var(--wb-line);
  border-left: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  font-style: normal;
  color: var(--wb-ink);
  max-height: 360px;
  overflow-y: auto;
}

/* Created-item link rows inside the deploy summary */
.deploy-summary-row.link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: 9px;
  color: var(--wb-ink);
  font-family: var(--wb-font-sans);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.deploy-summary-row.link:hover {
  border-color: var(--wb-accent);
  background: var(--wb-canvas);
}
.deploy-summary-row.link .ds-icon { display: inline-flex; color: var(--wb-accent); flex-shrink: 0; }
.deploy-summary-row.link .ds-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deploy-summary-row.link .ds-open { display: inline-flex; color: var(--wb-mute); flex-shrink: 0; }
.deploy-summary-row.link:hover .ds-open { color: var(--wb-accent); }

/* ================================================================
   Mini walking-turtle loading animation (ported from "Mini Loading.html").
   Used as the in-stream "thinking" indicator (assistant placeholder) and the
   preview pane loading state. Self-contained ml-* classes; theme via
   [data-on="cream"|"ink"].
   ================================================================ */
.mini-loader {
  --ml-dur: 1.05s;
  --ml-shell: var(--wb-accent); --ml-head: var(--wb-ink); --ml-carve: var(--wb-surface);
  --ml-eye: var(--wb-surface); --ml-shadow: var(--wb-ink); --ml-ground: var(--wb-ink); --ml-label: var(--wb-mute);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: auto;
  font-family: var(--wb-font-mono);
}
.mini-loader[data-on="ink"] {
  --ml-head: var(--wb-surface); --ml-carve: var(--wb-ink); --ml-eye: var(--wb-ink);
  --ml-shadow: #000; --ml-ground: var(--wb-surface); --ml-label: rgba(246, 244, 239, .65);
}
.mini-loader__art { width: var(--ml-art-w, 84px); height: auto; display: block; overflow: visible; }
.mini-loader__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ml-label); white-space: nowrap; }
.mini-loader__label .ml-dots i { font-style: normal; animation: ml-dot 1.05s steps(1) infinite; }
.mini-loader__label .ml-dots i:nth-child(2) { animation-delay: .18s; }
.mini-loader__label .ml-dots i:nth-child(3) { animation-delay: .36s; }
.ml-shell, .ml-tail, .ml-leg { fill: var(--ml-shell); }
.ml-headc { fill: var(--ml-head); }
.ml-eye { fill: var(--ml-eye); }
.ml-carve { stroke: var(--ml-carve); }
.ml-shadow { fill: var(--ml-shadow); }
.ml-ground { stroke: var(--ml-ground); }
.ml-turtle { transform-box: fill-box; transform-origin: 50% 100%; animation: ml-bob var(--ml-dur) ease-in-out infinite; }
.ml-leg { transform-box: fill-box; transform-origin: 50% 0%; }
.ml-leg--b { animation: ml-legB var(--ml-dur) ease-in-out infinite; }
.ml-leg--f { animation: ml-legF var(--ml-dur) ease-in-out infinite; }
.ml-head { transform-box: fill-box; transform-origin: 50% 100%; animation: ml-head var(--ml-dur) ease-in-out infinite; }
.ml-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: ml-shadow var(--ml-dur) ease-in-out infinite; }
.ml-ground { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; stroke-opacity: .18; animation: ml-ground var(--ml-dur) linear infinite; }
@keyframes ml-bob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-5px); } }
@keyframes ml-legB { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
@keyframes ml-legF { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ml-head { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(1px); } }
@keyframes ml-shadow { 0%, 50%, 100% { transform: scale(1); opacity: .16; } 25%, 75% { transform: scale(.8); opacity: .09; } }
@keyframes ml-ground { to { stroke-dashoffset: -14; } }
@keyframes ml-dot { 0%, 75% { opacity: .25; } 38% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .ml-turtle { animation-duration: 2.6s; }
  .ml-leg--b, .ml-leg--f, .ml-head, .ml-ground { animation: none; }
}
/* Left-align the thinking loader inside the assistant message bubble. */
.msg.assistant .mini-loader { align-items: flex-start; }
/* Center the loader in the preview pane while an artifact fetches. */
.preview-loading { display: flex; justify-content: center; padding-top: 48px; }

/* ================================================================
   Logo brand marks that replaced the old 🐢 emoji (empty-state hero +
   deploy-summary header). Last in the file so they win.
   ================================================================ */
#empty-state .empty-logo {
  height: 56px;
  width: auto;
  display: block;
  filter: none;
  animation: none;
}
.deploy-summary-header { display: flex; align-items: center; gap: 7px; }
.ds-header-logo { height: 15px; width: auto; display: block; flex-shrink: 0; }

/* ================================================================
   Claude-style composer (workbench mode): roomy textarea on its own row,
   a control strip beneath it — attach on the left, a labelled "Send" pill
   on the right. Scoped to workbench so Rails keeps its single-row pill.
   ================================================================ */
/* The text label only appears in the workbench pill; Rails stays icon-only. */
.send-label { display: none; }

body.layout-workbench .composer-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "input  input input"
    "attach .     send";
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px 8px;
  border-radius: 18px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04);
}
body.layout-workbench .composer-row:focus-within {
  border-color: var(--wb-line-strong);
  box-shadow: 0 2px 10px rgba(20, 20, 15, 0.06);
}
body.layout-workbench #input {
  grid-area: input;
  min-height: 24px;
  max-height: 240px;
  padding: 4px 6px;
  font-size: 15px;
  line-height: 1.5;
}
body.layout-workbench #attach-btn {
  grid-area: attach;
  justify-self: start;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--wb-line);
  background: transparent;
  color: var(--wb-mute);
  display: grid;
  place-items: center;
}
body.layout-workbench #attach-btn:hover {
  color: var(--wb-ink);
  border-color: var(--wb-line-strong);
  background: transparent;
}
body.layout-workbench #send,
body.layout-workbench #stop {
  grid-area: send;
  justify-self: end;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 12px;
  font-family: var(--wb-font-sans);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: none;
}
body.layout-workbench #send .send-label { display: inline; }
body.layout-workbench #send svg,
body.layout-workbench #stop svg { width: 16px; height: 16px; }
body.layout-workbench #send { background: var(--wb-ink); color: var(--wb-canvas); }
body.layout-workbench #send:hover:not(:disabled) {
  background: var(--wb-accent);
  transform: none;
  box-shadow: none;
}
body.layout-workbench #send:disabled {
  background: var(--wb-line-strong);
  color: var(--wb-mute);
  box-shadow: none;
}
body.layout-workbench #stop {
  padding: 9px 14px;
  background: var(--wb-accent);
  color: var(--wb-canvas);
}
body.layout-workbench #stop:hover:not(:disabled) {
  background: var(--wb-ink);
  transform: none;
}
/* The redesigned #send / #stop rules set `display` with higher specificity
   than the base `[hidden]{display:none}`, so the swapped-out button would
   stay visible. Re-assert the hidden state at matching specificity. */
body.layout-workbench #send[hidden],
body.layout-workbench #stop[hidden] { display: none; }
/* iOS Safari zooms the page when a focused field is < 16px. Keep the
   composer textarea at 16px on phones (the 15px above is desktop-only). */
@media (max-width: 768px) {
  body.layout-workbench #input { font-size: 16px; }
}

/* ================================================================
   Drop the top app-bar. It duplicated the sidebar: the "Mini" brand
   already sits at the top of the left sidebar, and Summary + Sign out
   live in the sidebar footer. Two "Mini" headers read as a mistake —
   keep only the left side. Applies to both rails and workbench (the
   editorial theme is global). Reclaim every bit of top space the fixed
   bar reserved: the global body padding, plus the workbench-only
   y-offsets on the fixed sidebar drawer, backdrop, mobile preview pane,
   and the desktop chat column's padding-top.
   ================================================================ */
#app-bar { display: none; }
body { padding-top: 0; }
body.layout-workbench #main { padding-top: 0; }
body.layout-workbench #sidebar { top: 0; }
body.layout-workbench #sidebar-backdrop { inset: 0; }
body.layout-workbench #preview-pane { top: 0; }

/* ================================================================
   Centered reading column (Claude-style). In the wide layouts — Rails
   (no preview pane) and Workbench with the preview pane hidden — the chat
   column is far wider than a comfortable reading measure, so the message
   stream and the composer sit in a centered band instead of stretching
   from edge to edge. The cap is wider than the message bubble max-width
   (760px) so bubbles keep their left/right alignment within the band.
   Inert in Workbench-with-artifacts and on mobile, where the chat column
   is already narrower than the cap.
   ================================================================ */
#messages,
#composer .composer-row,
#composer .composer-hint,
#composer #attachment-tray,
#composer #mention-tray {
  max-width: 832px;
  margin-inline: auto;
  width: 100%;
}