/* ================================================================
   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;
}
/* Title: one line, ellipsis on overflow (no multi-line wrap). */
#conversation-list li > span:first-child {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#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;
  /* Keep the row to one line; the email is capped below, this is the backstop. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#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.
   ponytail: fixed 120px cap truncates long emails so msg-count/time stay
   visible; make it a % of row width if the sidebar ever becomes resizable. */
#conversation-list .meta .conv-user {
  color: var(--fg-strong);
  font-weight: 600;
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.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);
}

/* 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(--wb-surface);
  border: 1px solid var(--wb-line);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04);
  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; }

/* --- Live subagent tree (ephemeral; sits just above the status pill) --- */
.subagent-tree.standalone {
  align-self: flex-start;
  max-width: 80%;
  margin: 4px 0 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed rgba(216, 211, 196, 0.18);
  border-radius: 14px;
  background: rgba(176, 74, 31, 0.04);
}
.subagent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  color: var(--muted);
}
.subagent-row .subagent-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
}
.subagent-row .subagent-icon .mini-loader { gap: 0; }
.subagent-row .subagent-icon .mini-loader__art { width: 16px; }
.subagent-row .subagent-type {
  flex: 0 0 auto;
  color: var(--foam);
  font-weight: 600;
}
.subagent-row .subagent-status {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--foam);
  opacity: 0.9;
}
.subagent-row.running .subagent-status { color: var(--flame, #b04a1f); }
.subagent-row.done .subagent-status { color: var(--kelp); }
.subagent-row.error .subagent-status { color: var(--danger); }
.subagent-row .subagent-activity {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}
.subagent-row.done { opacity: 0.7; }
.subagent-row.done .subagent-icon { color: var(--kelp); }
.subagent-row.error .subagent-icon { color: var(--danger); }

/* --- 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-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); }

/* Hover bubble showing a chip's full name (chips truncate at 260px). */
.chip-tip {
  position: fixed;
  z-index: 1000;
  max-width: min(360px, 90vw);
  background: #1f2430;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  word-break: break-word;
}
.chip-tip[hidden] { display: none; }

.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; }

/* ---- Contenteditable composer ----
   #input is a contenteditable div (so @-mentions can render as inline chips).
   These give it textarea-like wrapping/scroll, a CSS placeholder, and a
   read-only lock. */
#input {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-y: auto;
  cursor: text;
}
#input.is-empty::before {
  content: attr(data-placeholder);
  color: var(--wb-mute);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
#input.is-readonly { opacity: 0.5; cursor: not-allowed; }

/* Inline @-mention chips — same UI as the tray/message-history chip, but
   rendered right in the editor where the user typed. The chip is
   contentEditable=false, so one Backspace removes it whole. */
#input .mention-chip {
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink);
  padding: 1px 5px 1px 7px;
  margin: 0 1px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
}
#input .mention-chip-kind { color: var(--wb-mute); background: var(--wb-canvas); }
#input .mention-chip-x { color: var(--wb-mute); font-size: 14px; }
#input .mention-chip-x:hover { color: var(--wb-ink); }

#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 text keeps to one line and truncates — the row never wraps, so the
   model badge + vision note stay put on the right instead of floating against
   a wrapped block. */
.hint-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge + vision note travel together, pinned right, never breaking apart. */
.hint-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.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 {
  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;
}
/* GLM has no vision — shown next to the model badge when GLM is active. */
.vision-note {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: #b45309;
  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.
   The editorial surface only kicks 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; }

/* ================================================================
   Workbench layout (body.layout-workbench)
   - Conversation-list sidebar is a drawer on mobile
   - Conversation-list sidebar is docked beside chat on desktop
   - 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 starts as a slide-in drawer. The desktop
   single-pane rules below lift it into the normal grid flow. */
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;
  grid-template-columns: minmax(0, 1fr);
}

/* Single-pane workbench: dock the conversation list on desktop and give the
   chat the remaining width. Mobile keeps the existing off-canvas sidebar. */
@media (min-width: 769px) {
  body.layout-workbench.single-pane #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.single-pane #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.single-pane #sidebar-backdrop { display: none !important; }
  body.layout-workbench.single-pane .back-to-threads { display: none; }
  body.layout-workbench.single-pane #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);
}

/* ================================================================
   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);
}

/* --- 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);
}

/* ================================================================
   Workbench design pass — 2026-05
     • Account controls live in the sidebar footer.
     • Smaller, tighter type.
   Scoped to body.layout-workbench so Rails mode is untouched. Last in the
   file so these rules 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;
}

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

/* --- 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;
}

/* ================================================================
   Mini walking-turtle loading animation (ported from "Mini Loading.html").
   Used as the in-stream "thinking" indicator (assistant placeholder).
   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; }

/* ================================================================
   Logo brand mark that replaced the old 🐢 emoji in the empty-state hero.
   Last in the file so it wins.
   ================================================================ */
#empty-state .empty-logo {
  height: 56px;
  width: auto;
  display: block;
  filter: none;
  animation: none;
}
/* ================================================================
   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 drawer offsets.
   ================================================================ */
#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; }

/* ================================================================
   Centered reading column (Claude-style). The chat column is wider than a
   comfortable reading measure, so the message stream and composer sit in a
   centered band. The cap is wider than the message bubble max-width (760px),
   preserving left/right alignment inside the band.
   ================================================================ */
#messages,
#composer .composer-row,
#composer .composer-hint,
#composer #attachment-tray {
  max-width: 832px;
  margin-inline: auto;
  width: 100%;
}