/* --- Chat Area --- */
/* --- View Tabs --- */
#view-tabs {
  display: flex;
  gap: 2px;
  margin-left: 12px;
}
.view-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
@media (hover: hover) {
  .view-tab:hover { color: var(--text); background: var(--bg-hover); }
}
.view-tab.active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(78,168,222,0.1);
}
/* On a phone the switch lives in the bottom bar's middle section instead. Two
   ways into the same view would drift, and the header row is where the space
   runs out: the tabs were taking it from the title, which ellipsised at 390 and
   had nothing left at all by 320. */
@media (max-width: 768px) {
  #view-tabs { display: none; }
}

#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* --- File Browser --- */
#file-browser {
  flex: 1;
  display: flex;
  overflow: hidden;
}
#fb-tree-panel {
  width: 260px;
  min-width: 180px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surface);
}
#fb-tree-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#fb-tree-path {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}
#fb-refresh {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
@media (hover: hover) { #fb-refresh:hover { color: var(--text); background: var(--bg-hover); } }
#fb-upload {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
@media (hover: hover) { #fb-upload:hover { color: var(--text); background: var(--bg-hover); } }
#fb-upload.done { color: var(--green); }
/* Folder picked as the upload target (left border so it reads as "selected"). */
.fb-item.fb-dir-active { box-shadow: inset 2px 0 0 var(--accent); }
#fb-tree-hide {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}
@media (hover: hover) { #fb-tree-hide:hover { color: var(--text); background: var(--bg-hover); } }
@media (max-width: 768px) { #fb-tree-hide { display: none; } }
#fb-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.fb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}
@media (hover: hover) { .fb-item:hover { background: var(--bg-hover); } }
.fb-item.active { background: var(--bg-surface2); color: var(--accent); }
/* The mark is a 13px svg (file-browser.js), centred in the same 14px column the
   emoji had, so every name starts where it did — measured to the pixel before and
   after. Flex rather than text-align: an inline svg sits on the text baseline and
   rode 2px above the row's centre. */
.fb-item .fb-icon { flex-shrink: 0; width: 14px; display: flex; justify-content: center; color: var(--text-muted); }
.fb-item .fb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fb-item .fb-size { color: var(--text-muted); font-size: 11px; flex-shrink: 0; font-family: var(--mono); }
.fb-dir-arrow {
  font-size: 8px;
  transition: transform 0.15s;
  flex-shrink: 0;
  width: 10px;
  text-align: center;
  color: var(--text-muted);
}
.fb-dir-arrow.open { transform: rotate(90deg); }

#fb-preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
#fb-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-surface);
}
#fb-back, #fb-tree-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
@media (hover: hover) {
  #fb-tree-toggle:hover { color: var(--text); background: var(--bg-hover); }
}
#file-browser.fb-tree-hidden #fb-tree-panel { display: none; }
#fb-preview-filename {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fb-download {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 16px;
  padding: 2px 6px;
}
@media (hover: hover) { #fb-download:hover { color: var(--text); } }
#fb-copy {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
@media (hover: hover) { #fb-copy:hover { color: var(--text); background: var(--bg-hover); } }
#fb-copy.copied { color: var(--green); }
#fb-preview-path {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
  padding: 0 12px 6px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
}
#fb-preview-path:empty { display: none; }
#fb-preview-path:hover { color: var(--text); }
#fb-preview-content {
  flex: 1;
  overflow: auto;
  padding: 16px;
}
#fb-preview-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}
#fb-preview-content pre {
  background: var(--bg);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  font-size: 13px;
  margin: 0;
}
#fb-preview-content pre code { font-family: var(--mono); }
/* Truncated / binary preview banner. */
.fb-preview-notice {
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 12px;
}
.fb-line-numbers {
  display: flex;
}
.fb-line-numbers .fb-ln {
  color: var(--text-muted);
  text-align: right;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid var(--border);
  user-select: none;
  min-width: 3ch;
  white-space: pre;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
}
.fb-line-numbers .fb-code {
  flex: 1;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.45;
}
.fb-markdown { line-height: 1.6; }
.fb-markdown a { color: var(--accent); }
.fb-markdown ol,
.fb-markdown ul { padding-left: 2em; }
/* Horizontal scroll lives on a wrapper (renderMarkdown wraps every <table> in
   .md-table-scroll). The table itself stays a real table — `display: block`
   here splits <thead>/<tbody> into separate anonymous tables, which misaligns
   the columns and detaches the header. */
.md-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 0.5em 0;
}

/* @mentions in messages, three tiers. Base: colored bold text, no pill (so many
   mentions don't turn a message into confetti). */
.mention {
  font-weight: 600;
  white-space: nowrap;
}
/* Subagent nicks: a stable hashed colour (set inline as --m) + a faint underline. */
.mention:not(.mention-self):not(.mention-lead) {
  color: var(--m, var(--accent));
  border-bottom: 1px solid color-mix(in srgb, var(--m, var(--accent)) 45%, transparent);
}
/* @lead: the theme accent, filled pill (what the operator used to have). */
.mention-lead {
  color: var(--accent-hover, var(--accent));
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: 4px;
  padding: 0 3px;
}
/* Operator (its configured handle, @user/@you/@me): amber, but plain — no pill, no border. */
.mention-self {
  color: hsl(38, 95%, 44%);
}
.bubble table,
.fb-markdown table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
}
.bubble table th,
.bubble table td,
.fb-markdown table th,
.fb-markdown table td {
  border: 1px solid var(--border);
  padding: 0.4em 0.7em;
  text-align: left;
  vertical-align: top;
}
.bubble table th,
.fb-markdown table th {
  background: var(--bg-surface);
  font-weight: 600;
}
.bubble table tr:nth-child(even) td,
.fb-markdown table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-surface) 40%, transparent);
}
.fb-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 6px;
}
.fb-pdf {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: none;
  border-radius: 6px;
  background: var(--bg-surface);
  display: block;
}
#fb-preview-content:has(.fb-pdf) { padding: 0; }
.fb-html {
  width: 100%;
  flex: 1;
  min-height: 400px;
  border: none;
  border-radius: 0 0 6px 6px;
  background: #fff; /* sandboxed page renders on its own bg; default to white */
  display: block;
}
#fb-preview-content:has(.fb-html) {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fb-html-bar {
  display: flex;
  justify-content: flex-end;
  padding: 2px 10px;
  font-size: 12px;
}
.fb-html-source { color: var(--text-muted); text-decoration: none; }
.fb-html-source:hover { color: var(--accent); text-decoration: underline; }
/* The one line a static (srcdoc) preview gets, under it. */
.fb-html-static {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.fb-video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 6px;
}
@media (max-width: 768px) {
  #file-browser { flex-direction: column; }
  #fb-tree-panel { width: 100%; min-width: 100%; border-right: none; flex: 1; }
  #file-browser.fb-preview-active #fb-tree-panel { display: none; }
  #file-browser:not(.fb-preview-active) #fb-preview-panel { display: none; }
  #fb-back { display: block !important; }
  #fb-tree-toggle { display: none; }
}

/* wraps messages + empty-state + scroll-btn; sibling of #input-area so
   that the input is constrained to the chat-area width on desktop (not
   stretched across the whole viewport underneath the sidebar). */
#chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
}