:root {
  color-scheme: light;
  --bg: #f3f3f3;
  --surface-0: #ffffff;
  --surface-1: #f8f8f8;
  --surface-2: #efefef;
  --surface-3: #e1e1e1;
  --sidebar: #f7f7f7;
  --editor: #ffffff;
  --panel: #fbfbfb;
  --menu: #ffffff;
  --dialog: #f5f5f5;
  --border: #d4d4d4;
  --border-strong: #c6c6c6;
  --text: #1f1f1f;
  --text-muted: #616161;
  --text-dim: #7a7a7a;
  --accent: #0e639c;
  --accent-strong: #1177bb;
  --accent-soft: rgba(14, 99, 156, 0.14);
  --success: #16825d;
  --warning: #b89500;
  --danger: #c74e39;
  --status-bg: #007acc;
  --status-text: #ffffff;
  --focus-ring: 0 0 0 1px var(--accent);
  --font-ui: "Segoe UI", Tahoma, sans-serif;
  --font-mono: "Cascadia Code", Consolas, "Courier New", monospace;
  /* Source-pane typography (Settings > Appearance). applyEditorFont() overrides
     these on :root; the editor, its gutter and line metrics all derive from them
     so changing one value resizes the whole source pane consistently. */
  --editor-font-family: var(--font-mono);
  --editor-font-size: 13px;
  --topbar-height: 42px;
  --status-height: 24px;
  --activity-width: 48px;
  --sidebar-width: 280px;
  --preview-width: 420px;
  --chat-width: 420px;
  --splitter-size: 4px;
  --radius: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --surface-0: #252526;
  --surface-1: #2d2d2d;
  --surface-2: #313131;
  --surface-3: #3c3c3c;
  --sidebar: #252526;
  --editor: #1e1e1e;
  --panel: #252526;
  --menu: #252526;
  --dialog: #252526;
  --border: #2f2f2f;
  --border-strong: #3c3c3c;
  --text: #cccccc;
  --text-muted: #9d9d9d;
  --text-dim: #858585;
  --accent: #0e639c;
  --accent-strong: #3794ff;
  --accent-soft: rgba(55, 148, 255, 0.18);
  --success: #4ec9b0;
  --warning: #d7ba7d;
  --danger: #f48771;
  --status-bg: #007acc;
  --status-text: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
}

body {
  min-height: 100vh;
}

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
select,
textarea {
  border: 1px solid transparent;
  background: var(--surface-0);
  color: var(--text);
}

button {
  border-radius: var(--radius);
  padding: 0 10px;
  cursor: pointer;
}

input,
select,
textarea {
  border-radius: var(--radius);
  padding: 7px 8px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

p {
  margin: 0;
}

.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--status-height);
  height: 100vh;
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  height: var(--topbar-height);
  padding: 0 10px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 30;
}

.brand-cluster,
.status-item,
.settings-actions-row,
.sidebar-panel-header {
  display: flex;
  align-items: center;
}

.brand-cluster {
  gap: 8px;
  min-width: 0;
}

.brand-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.brand-block {
  display: grid;
  align-content: center;
  min-width: 0;
  line-height: 1.1;
}

.brand-block h1,
.settings-form h2,
.settings-section h3 {
  margin: 0;
}

.brand-block h1 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eyebrow,
.subtle-label,
.pane-label {
  color: var(--text-dim);
  font-size: 11px;
}

.eyebrow {
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menu-bar {
  display: flex;
  gap: 2px;
  align-items: center;
  min-width: 0;
  overflow: visible;
}

.menu-group {
  position: relative;
}

.menu-trigger,
.activity-button,
.icon-button {
  height: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
}

.menu-trigger {
  padding: 0 9px;
  font-size: 12px;
}

.menu-trigger.is-open,
.menu-trigger:hover,
.activity-button:hover,
.icon-button:hover {
  background: var(--surface-2);
}

.window-caption {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.menu-popover,
.explorer-context-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  display: grid;
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--menu);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  z-index: 40;
}

.explorer-context-menu {
  position: fixed;
}

.menu-popover button,
.explorer-context-menu button {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  text-align: left;
  background: transparent;
  border: 0;
  font-size: 12px;
  touch-action: manipulation;
}

.menu-popover button:hover,
.explorer-context-menu button:hover {
  background: var(--accent-soft);
}

/* Hover-reveal submenu (e.g. "Export As" on .bmap files). */
.explorer-context-subwrap {
  position: relative;
}
.explorer-context-sub-trigger::after {
  content: "\25B8";
  float: right;
  margin-left: 8px;
  opacity: 0.6;
}
.explorer-context-submenu {
  position: absolute;
  top: -5px;
  left: 100%;
  /* Sit flush against the trigger — any horizontal gap becomes a dead zone that
     drops :hover before the pointer reaches the flyout, slamming it shut. */
  margin-left: 0;
  min-width: 160px;
  display: none;
  gap: 1px;
  padding: 4px;
  padding-left: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--menu);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  z-index: 41;
}
/* Invisible bridge across the visual gap so the hover region is continuous. */
.explorer-context-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 6px;
  height: 100%;
}
.explorer-context-subwrap:hover > .explorer-context-submenu,
.explorer-context-submenu:hover {
  display: grid;
}

.menu-popover button.menu-danger-button {
  color: var(--danger);
  font-weight: 600;
}

.menu-popover button.menu-danger-button:hover {
  background: rgba(199, 78, 57, 0.14);
}

.workspace-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--activity-width) var(--sidebar-width) var(--splitter-size) minmax(0, 1fr) var(--splitter-size) var(--chat-width);
  overflow: hidden;
}

.app-shell[data-explorer="collapsed"] .workspace-shell {
  grid-template-columns: var(--activity-width) 0 0 minmax(0, 1fr) var(--splitter-size) var(--chat-width);
}

.app-shell[data-chat="hidden"] .workspace-shell {
  grid-template-columns: var(--activity-width) var(--sidebar-width) var(--splitter-size) minmax(0, 1fr) 0 0;
}

.app-shell[data-explorer="collapsed"][data-chat="hidden"] .workspace-shell {
  grid-template-columns: var(--activity-width) 0 0 minmax(0, 1fr) 0 0;
}

/* ---- Floating (overlay) explorer anchor ---------------------------------- */
/* The sidebar column collapses to 0 so the editor keeps full width; the panel
   is lifted out of flow and slides over the workspace, so opening/closing it
   never reflows the content (Edge-style vertical-tab flyout). */
.app-shell[data-explorer-anchor="floating"] .workspace-shell {
  position: relative;
  grid-template-columns: var(--activity-width) 0 0 minmax(0, 1fr) var(--splitter-size) var(--chat-width);
}

.app-shell[data-explorer-anchor="floating"][data-chat="hidden"] .workspace-shell {
  grid-template-columns: var(--activity-width) 0 0 minmax(0, 1fr) 0 0;
}

.app-shell[data-explorer-anchor="floating"] .workspace-shell > .workspace-splitter {
  display: none;
}

.app-shell[data-explorer-anchor="floating"] .workspace-shell > .sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  /* The shell is a positioned grid container and this panel keeps grid-column: 2,
     so its abs-pos containing block is that (zero-width) grid track, which begins
     exactly at the activity bar's right edge. So left is measured from there:
     -1px overlaps the activity bar's 1px border, leaving no gutter seam. */
  left: -1px;
  width: var(--sidebar-width);
  z-index: 35;
  padding-top: 10px;
  border-right: 1px solid var(--border);
  box-shadow: 6px 0 22px rgba(0, 0, 0, 0.30);
  /* Collapsed: tucked away + non-interactive; expanded: slides into view. */
  transform: translateX(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.app-shell[data-explorer-anchor="floating"][data-explorer="expanded"] .workspace-shell > .sidebar {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Pin control rotates + highlights when the explorer is floating (unpinned). */
.sidebar-anchor-button .sidebar-icon-svg {
  transition: transform 0.16s ease;
}

.app-shell[data-explorer-anchor="floating"] .sidebar-anchor-button .sidebar-icon-svg {
  transform: rotate(45deg);
}

.workspace-shell > .activity-bar {
  grid-column: 1;
}

.workspace-shell > .sidebar {
  grid-column: 2;
}

.workspace-shell > .workspace-splitter {
  grid-column: 3;
}

.sidebar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sidebar-icon-button,
.sidebar-add-button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.sidebar-icon-button:hover,
.sidebar-add-button:hover {
  background: var(--surface-2);
}

.sidebar-icon-button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sidebar-icon-svg {
  width: 15px;
  height: 15px;
  display: block;
}

.workspace-shell > .workspace {
  grid-column: 4;
}

.workspace-shell > .chat-splitter {
  grid-column: 5;
}

.workspace-shell > .chat-panel {
  grid-column: 6;
}

.activity-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border-right: 1px solid var(--border);
  background: var(--surface-0);
}

.activity-button {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  color: var(--text-dim);
}

.preview-output img {
  display: block;
  max-width: 100%;
  height: auto;
}

.asset-preview {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
}

.asset-preview img {
  max-width: min(100%, 960px);
  max-height: calc(100vh - 220px);
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.remote-asset-preview {
  align-content: start;
  gap: 14px;
}

.remote-asset-meta {
  display: grid;
  gap: 4px;
  width: min(100%, 960px);
  color: var(--text-muted);
  font-size: 12px;
}

.remote-asset-meta strong {
  color: var(--text);
  font-size: 13px;
}

.urldb-preview {
  height: 100%;
  overflow: auto;
  padding: 16px;
}

.urldb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-0);
}

.urldb-table th,
.urldb-table td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}

.urldb-table th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  z-index: 1;
}

.urldb-table img {
  display: block;
  width: 88px;
  max-width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.editor-readonly-note {
  color: var(--text-muted);
}

.activity-button:hover {
  color: var(--text);
}

.activity-button.is-active {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

.app-shell[data-explorer="expanded"] #explorer-toggle-button {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

.activity-bar-spacer {
  flex: 1;
}

.activity-status-mark {
  width: 18px;
  height: 3px;
  background: var(--accent);
}

.sidebar {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: 10px;
}

.app-shell[data-explorer="collapsed"] .sidebar {
  padding: 0;
  border-right: 0;
}

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

.sidebar-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.explorer-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow: auto;
  padding: 6px 0;
}

.explorer-tree.is-drop-into-root {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: linear-gradient(to bottom, transparent, var(--accent-soft));
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 10px 0 6px;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  color: var(--text);
}

.tree-row[draggable="true"] {
  cursor: pointer;
}

.tree-row:hover {
  background: var(--surface-2);
}

.tree-row.is-active {
  background: var(--accent-soft);
}

.tree-row.is-drop-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.tree-row.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tree-row.is-drop-into {
  background: color-mix(in srgb, var(--accent-soft) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tree-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.is-agent-pending > .tree-label::after {
  content: "●";
  margin-left: 6px;
  color: var(--accent);
  font-size: 8px;
  vertical-align: middle;
  opacity: 0.85;
}

.is-asset-row .tree-label::after {
  content: "image";
  margin-left: 8px;
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.is-remote-asset-row .tree-label::after {
  content: "url image";
  margin-left: 8px;
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.explorer-image-tooltip {
  position: fixed;
  z-index: 60;
  width: 180px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  background: var(--menu);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.explorer-image-tooltip img {
  display: block;
  width: 100%;
  height: auto;
}

.tree-depth {
  display: inline-block;
  width: calc(var(--depth, 0) * 14px);
  flex: 0 0 auto;
}

.tree-icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex: 0 0 auto;
}

.tree-icon.is-folder,
.tree-icon.is-folder-open {
  width: 15px;
  height: 11px;
  margin-top: 1px;
  border: 1px solid #c38f00;
  background: #dcb14a;
}

.tree-icon.is-folder::before,
.tree-icon.is-folder-open::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1px;
  width: 7px;
  height: 3px;
  background: #dcb14a;
  border: 1px solid #c38f00;
  border-bottom: 0;
}

.tree-icon.is-folder-open {
  background: #e7c46a;
}

.tree-icon.is-md,
.tree-icon.is-mtree,
.tree-icon.is-urldb,
.tree-icon.is-remote-image,
.tree-icon.is-bmap,
.tree-icon.is-file {
  border: 1px solid var(--border-strong);
  background: var(--surface-0);
}

.tree-icon.is-md {
  border-color: #3a7bd5;
  background: rgba(58, 123, 213, 0.14);
}

.tree-icon.is-mtree {
  border-color: #c586c0;
  background: rgba(197, 134, 192, 0.16);
}

.tree-icon.is-urldb,
.tree-icon.is-remote-image {
  border-color: var(--accent);
  background: rgba(14, 99, 156, 0.14);
}

.tree-icon.is-md::before,
.tree-icon.is-mtree::before,
.tree-icon.is-urldb::before,
.tree-icon.is-remote-image::before,
.tree-icon.is-bmap::before,
.tree-icon.is-file::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 5px;
  height: 5px;
  background: var(--sidebar);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.tree-icon.is-md::after,
.tree-icon.is-mtree::after,
.tree-icon.is-urldb::after,
.tree-icon.is-bmap::after,
.tree-icon.is-remote-image::after {
  position: absolute;
  inset: 2px 1px 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
}

.tree-icon.is-md::after {
  content: "MD";
  color: var(--accent);
}

.tree-icon.is-mtree::after {
  content: "MT";
  color: #8a5cff;
}

.tree-icon.is-urldb::after {
  content: "URL";
  color: var(--accent-strong);
  font-size: 6px;
}

.tree-icon.is-remote-image::after {
  content: "IMG";
  color: var(--accent-strong);
  font-size: 6px;
}

.tree-icon.is-bmap {
  border-color: #3dba72;
  background: rgba(61, 186, 114, 0.14);
}

.tree-icon.is-bmap::after {
  content: "BM";
  color: #3dba72;
}

.tree-row.is-project-root {
  margin-bottom: 2px;
}

.tree-row.is-project-root .tree-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tree-icon.is-project {
  width: 13px;
  height: 13px;
  margin-top: 1px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
}

.tree-icon.is-project::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 1px;
}

.icon-button {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  color: var(--text-dim);
}

.icon-button.is-ghost {
  visibility: hidden;
  pointer-events: none;
}

.tree-row-derived .tree-label {
  font-size: 12px;
}

.sidebar-panel {
  display: grid;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-0);
}

.sidebar-panel-header {
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.presence-strip,
.presence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.workspace-mode-toggle {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}

.workspace-mode-toggle:hover {
  background: var(--surface-3);
}

.presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 11px;
}

.presence-avatar {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.panel-splitter {
  position: relative;
  background: var(--surface-1);
}

.panel-splitter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background 120ms ease;
}

.panel-splitter:hover::after {
  background: var(--accent-soft);
}

.workspace-splitter,
.editor-splitter,
.chat-splitter {
  cursor: col-resize;
}

.app-shell[data-explorer="collapsed"] .workspace-splitter,
.app-shell[data-preview="hidden"] .editor-splitter,
.app-shell[data-source="hidden"] .editor-splitter,
.app-shell[data-chat="hidden"] .chat-splitter {
  display: none;
}

.workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 0 0;
  background: var(--editor);
  overflow: hidden;
}
.app-shell[data-debug="on"] .workspace {
  grid-template-rows: minmax(0, 1fr) var(--splitter-size) minmax(120px, var(--debug-height, 180px));
}

.pane-header {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 35px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}

.tab-strip {
  display: flex;
  align-items: flex-end;
  min-height: 35px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}

.pane-tab-strip {
  min-width: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.editor-tab {
  min-width: 0;
  max-width: min(56vw, 520px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 35px;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
}

.editor-tab.is-active {
  background: var(--editor);
}

.editor-tab.is-empty {
  background: transparent;
  color: var(--text-dim);
  border-right: 0;
}

.tab-file-icon {
  width: 12px;
  height: 14px;
  position: relative;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}

.tab-file-icon::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 5px;
  height: 5px;
  background: var(--editor);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
}

.tab-agent-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 3px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0.9;
}

.tab-dirty {
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

.tab-dirty.is-dirty {
  color: var(--accent-strong);
}

.tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.editor-tab:hover .tab-close,
.editor-tab.is-active .tab-close {
  color: var(--text);
}

.editor-tab:hover .tab-close:hover,
.editor-tab.is-active .tab-close:hover {
  color: var(--danger);
}

.editor-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--splitter-size) minmax(280px, var(--preview-width));
  gap: 0;
  overflow: hidden;
}
.debug-splitter {
  display: none;
  cursor: row-resize;
}

.app-shell[data-debug="on"] .debug-splitter {
  display: block;
}

.editor-surface {
  position: relative;
}

/* The source pane has three stacked regions when the toolbar is on: header,
   toolbar, editor surface. The base .editor-pane grid only defines two rows, so
   use a flex column here — the toolbar takes its natural height and the editor
   surface fills the rest (and collapses to nothing when the toolbar is hidden). */
#source-pane {
  display: flex;
  flex-direction: column;
}
#source-pane > .editor-surface {
  flex: 1 1 auto;
  min-height: 0;
}

/* Optional Overleaf-style markdown insert toolbar above the editor surface. */
.editor-format-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
}
.format-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.format-toolbar-btn:hover,
.format-toolbar-btn:focus-visible {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--text);
  outline: none;
}
.format-toolbar-sep {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--border);
}

/* Floating drag-to-size table picker (Markdown "Insert table"). Positioned via
   fixed coords set inline by table-grid-picker.js open(). */
.table-grid-picker {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--menu);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
}
.table-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 10), 16px);
  gap: 2px;
}
.table-grid-cell {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--surface-0);
  cursor: pointer;
}
.table-grid-cell.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.table-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.table-grid-size {
  font-size: 12px;
  color: var(--text-dim);
}
.table-grid-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.table-grid-toggle-btn {
  padding: 2px 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
}
.table-grid-toggle-btn.is-active {
  background: var(--accent-soft);
  color: var(--text);
}

/* Caret-anchored, VSCode-style completion popup. left/top are set inline by
   positionEditorAutocompleteAtCaret(); keep the defaults as a safe fallback. */
.editor-autocomplete {
  position: absolute;
  left: 16px;
  top: 16px;
  width: max-content;
  min-width: 180px;
  max-width: 360px;
  display: block;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--menu);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
  z-index: 30;
}

/* The category label adds height VSCode-style popups don't have — hide it. */
.editor-autocomplete-label {
  display: none;
}

.editor-autocomplete-list {
  display: block;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.editor-autocomplete-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 2px 8px;
  border: none;
  border-radius: 3px;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.editor-autocomplete-item.is-active,
.editor-autocomplete-item:hover {
  border: none;
  background: var(--accent-soft);
}

.editor-autocomplete-item-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-autocomplete-item-detail {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell[data-preview="hidden"] .editor-grid,
.app-shell[data-source="hidden"] .editor-grid {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell[data-preview="hidden"] #preview-pane {
  display: none;
}

.app-shell[data-source="hidden"] #source-pane {
  display: none;
}

.editor-pane,
.preview-pane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  background: var(--editor);
  overflow: hidden;
}

.editor-pane.is-drop-active,
.preview-pane.is-drop-active {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.editor-pane.is-drop-active .pane-header,
.preview-pane.is-drop-active .pane-header {
  background: var(--accent-soft);
}

.preview-pane {
  border-left: 1px solid var(--border);
}

.pane-label {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.pane-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  line-height: 1;
}

.pane-action:hover {
  color: var(--text);
  background: var(--surface-1);
}

.source-preview-toggle {
  display: none;
}

.app-shell[data-preview="hidden"] .source-preview-toggle {
  display: inline-flex;
}

.preview-source-toggle {
  display: none;
}

.app-shell[data-source="hidden"] .preview-source-toggle {
  display: inline-flex;
}

.editor-surface {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

.editor-gutter {
  position: relative;
  min-width: 44px;
  height: 100%;
  padding: 16px 6px 16px 8px;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-dim);
  font-family: var(--editor-font-family);
  font-size: var(--editor-font-size);
  line-height: 1.6;
  text-align: right;
  user-select: none;
  overflow: hidden;
}

.editor-gutter-content {
  position: absolute;
  top: 16px;
  left: 8px;
  right: 6px;
  min-height: calc(100% - 32px);
  will-change: transform;
}

.editor-gutter-line,
.editor-line {
  min-height: calc(var(--editor-font-size) * 1.6);
}

.editor-gutter-line {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.editor-gutter-line.is-continuation {
  color: transparent;
}

/* Phase 5: agent-pending line decoration */
.editor-line.is-agent-pending {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.editor-gutter-line.is-agent-pending {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.editor-gutter-agent-mark {
  font-size: 10px;
  line-height: 1;
  margin-right: 2px;
  opacity: 0.8;
  flex-shrink: 0;
}

.editor-scroll {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--editor);
}

/* Floating in-editor agent action bar (Keep/Drop or Accept/Dismiss) */
.editor-agent-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: all;
  user-select: none;
}

.agent-bar-label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  margin-right: 2px;
}

.agent-bar-btn {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.4;
}

.agent-bar-btn:hover:not(:disabled) {
  background: var(--hover);
}

.agent-bar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.agent-bar-btn.agent-bar-keep,
.agent-bar-btn.agent-bar-accept {
  color: var(--accent);
  border-color: var(--accent);
}

.agent-bar-btn.agent-bar-keep:hover:not(:disabled),
.agent-bar-btn.agent-bar-accept:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Single contenteditable — owns scrolling, caret, and syntax colour */
#editor-content,
.preview-output {
  width: 100%;
  min-height: 0;
  padding: 16px;
}

.preview-output {
  padding: 6px;
}

#editor-content {
  display: block;
  position: relative;
  height: 100%;
  outline: none;
  border: 0;
  overflow: auto;
  color: var(--text);
  caret-color: var(--text);
  font-family: var(--editor-font-family);
  font-size: var(--editor-font-size);
  line-height: 1.6;
  tab-size: var(--indent-tab-size, 4);
  cursor: text;
  /* Prevent browser from injecting <div>, <p> or <span> wrappers on enter/paste */
  white-space: pre;
}

.app-shell[data-word-wrap="on"] #editor-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Hanging indent — first visual row stays at the original indent,
   continuation rows (which wrap) are pulled to the same indent column.
   This works because both visual layout AND caret position come from
   the same DOM element, so there is no dual-layer mismatch. */
.app-shell[data-word-wrap="on"] #editor-content .editor-line.has-wrapped-indent {
  padding-left: calc(var(--wrapped-indent-columns, 0) * 1ch);
  text-indent: calc(var(--wrapped-indent-columns, 0) * -1ch);
}

/* Placeholder shown when no file is open. Absolutely positioned so it overlays
   the first line instead of consuming a line box (which would push the caret
   onto the second visual line). */
#editor-content[data-empty="true"]::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

/* When no file is open the editor is not editable; this overlay replaces the
   plain placeholder and offers a clickable "create a new file" affordance. */
#editor-content[data-no-file="true"]::before {
  content: none;
}

.editor-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  background: var(--editor);
}

.welcome-card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  color: var(--text);
}

.welcome-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: var(--text-on-accent, #fff);
  font-size: 26px;
  font-weight: 700;
}

.welcome-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}

.welcome-tagline {
  margin: 0 auto 20px;
  max-width: 340px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
  margin: 0 auto 16px;
}

.welcome-btn {
  width: 100%;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-0);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.welcome-btn:hover {
  background: var(--surface-1);
}

.welcome-btn.is-primary {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.welcome-btn[hidden] {
  display: none;
}

.welcome-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

.editor-empty-state[hidden] {
  display: none;
}

/* Text button styled as an inline hyperlink. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--accent);
}

.editor-drop-caret {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  border-left: 2px dashed var(--accent-strong);
  pointer-events: none;
  z-index: 2;
}

/* Remote-cursor overlay layer (sits over the editor-scroll container) */
.editor-cursors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.remote-cursor {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.85;
}

/* Colored collaborator dots (matching cursor colors) shown in the status bar
   next to the "N collaborators online" count. */
.peer-badge-dots {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.peer-badge-dots:not(:empty) {
  margin-right: 5px;
}

.peer-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--status-bar, var(--surface-2));
  margin-left: -3px;
}

.peer-badge-dot:first-child {
  margin-left: 0;
}

.remote-selection {
  position: absolute;
  pointer-events: none;
  opacity: 0.25;
  border-radius: 2px;
}

/* ---- Find / Replace ------------------------------------------------------ */
.editor-search-highlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.search-match {
  position: absolute;
  pointer-events: none;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.search-match.is-current {
  background: color-mix(in srgb, var(--accent-strong, var(--accent)) 55%, transparent);
  outline: 1px solid var(--accent-strong, var(--accent));
}

.editor-find-bar {
  position: absolute;
  top: 6px;
  right: 14px;
  z-index: 10;
  display: grid;
  gap: 4px;
  padding: 6px;
  max-width: min(94%, 460px);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--menu, var(--surface-0));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

.editor-find-bar[hidden] {
  display: none;
}

.find-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.find-row[hidden] {
  display: none;
}

.find-input {
  flex: 1 1 auto;
  min-width: 120px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-0);
  color: var(--text);
}

.find-input.is-error {
  border-color: var(--danger, #d9534f);
}

.find-count {
  flex: none;
  min-width: 68px;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.find-toggle,
.find-nav {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  font-size: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.find-toggle:hover,
.find-nav:hover {
  background: var(--surface-2);
}

.find-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.find-btn {
  flex: none;
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface-0);
  color: var(--text);
  cursor: pointer;
}

.find-btn:hover {
  background: var(--surface-1);
}

/* ---- Snapshots + diff ---------------------------------------------------- */
/* File-Manager-style selectable list: a single bordered box, rows are options
   you click to highlight; the actions live in the footer action bar. */
.snapshots-list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: min(46vh, 340px);
  overflow-y: auto;
  background: var(--surface-0);
  border: 1px solid var(--border);
}

.snapshot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.snapshot-item:last-child {
  border-bottom: 0;
}

.snapshot-item:hover {
  background: var(--surface-1);
}

.snapshot-item.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

.snapshot-item.is-selected .snapshot-time {
  font-weight: 700;
}

.snapshot-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.snapshot-time {
  font-size: 12px;
  font-weight: 600;
}

.snapshot-count {
  font-size: 11px;
}

/* Footer action bar — mirrors the File Manager: selection label on the left,
   Compare/Restore/Delete/Close on the right. Wraps so it never overflows the
   dialog on a narrow (mobile) screen. */
.snapshots-actionbar {
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Compact actions — smaller text so the buttons don't dominate the dialog. */
.snapshots-actionbar button {
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
}

/* Dim disabled actions so the enabled ones clearly read as clickable. */
.snapshots-actionbar button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Bound the dialog to the viewport (border-box includes its padding) so its flex
   rows wrap instead of pushing the dialog wider than the screen. */
#snapshots-dialog {
  width: min(94vw, 460px);
  box-sizing: border-box;
}

#snapshots-dialog .app-dialog-form {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Phones: put the selection label on its own line so the compact actions get a
   row to themselves (right-aligned) and never crowd off the edge. */
@media (max-width: 560px) {
  #snapshots-selection-label {
    flex-basis: 100%;
    margin-right: 0;
  }
}

.snapshots-toolbar {
  align-items: end;
  gap: 10px;
  margin-bottom: 8px;
}

/* Compact "Create Snapshot Now" — beat .settings-actions-row button's 30px. */
.snapshots-toolbar .browser-tool-btn {
  min-height: 28px;
  align-self: end;
}

.snapshots-file-label {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.snapshots-file-label select {
  width: 100%;
}

/* Self-contained diff view: occupies the preview pane's content cell (same grid
   row as #preview-output), toggled with it — so it never disturbs the normal
   preview DOM. Its own toolbar + scrollable body + change-overview ruler. */
.preview-diff-view {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  flex: 1 1 auto; /* fill the pane in the mobile flex-column layout (ignored in the desktop grid) */
  display: flex;
  flex-direction: column;
  background: var(--editor);
}

.preview-diff-view[hidden] {
  display: none;
}

/* When the diff is open, hide the normal preview so only the diff shows. */
.preview-pane:has(.preview-diff-view:not([hidden])) > #preview-output {
  display: none;
}

.diff-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 12px;
}

.preview-diff-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.preview-diff-stats {
  flex: none;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.diff-scroll-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.diff-body {
  height: 100%;
  overflow: auto;
  padding: 6px 14px 6px 6px; /* right pad clears the ruler */
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

/* Overview ruler — a thin strip on the right with a tick per change block,
   proportional to its position in the file (VS Code's scrollbar decorations). */
.diff-ruler {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background: color-mix(in srgb, var(--text-dim) 8%, transparent);
  pointer-events: none;
}

.diff-ruler-tick {
  position: absolute;
  right: 1px;
  width: 8px;
  min-height: 3px;
  border-radius: 1px;
  pointer-events: auto;
  cursor: pointer;
}

.diff-ruler-tick.tick-add { background: #4caf50; }
.diff-ruler-tick.tick-del { background: #f44336; }
.diff-ruler-tick.tick-mix { background: #e5a53b; }

/* The preview diff tab's icon: a glyph, not the drawn "page" box of file tabs. */
.tab-file-icon.tab-diff-icon {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.tab-file-icon.tab-diff-icon::after {
  content: none;
}

.diff-line {
  display: flex;
  align-items: baseline;
}

.diff-line.is-current-change {
  outline: 2px solid var(--accent-strong, var(--accent));
  outline-offset: -2px;
}

.diff-gutter {
  flex: none;
  width: 42px;
  padding-right: 6px;
  text-align: right;
  color: var(--text-dim);
  user-select: none;
}

.diff-mark {
  flex: none;
  width: 16px;
  text-align: center;
  user-select: none;
}

.diff-text {
  flex: 1 1 auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-line.diff-add {
  background: color-mix(in srgb, #4caf50 18%, transparent);
}

.diff-line.diff-add .diff-mark {
  color: #2e7d32;
}

.diff-line.diff-del {
  background: color-mix(in srgb, #f44336 16%, transparent);
}

.diff-line.diff-del .diff-mark {
  color: #c62828;
}

.remote-cursor-label {
  position: absolute;
  top: -1.35em;
  left: 0;
  font-size: 11px;
  line-height: 1.2;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
  user-select: none;
}

.editor-measure {
  position: absolute;
  top: -99999px;
  left: -99999px;
  visibility: hidden;
  pointer-events: none;
  contain: layout style;
}

.editor-measure-line {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#editor-content::selection,
#editor-content *::selection {
  background: rgba(14, 99, 156, 0.28);
}

.token-heading-mark,
.token-heading-text {
  color: var(--accent-strong);
}

.token-heading-text {
  font-weight: 600;
}

.token-list-mark,
.token-quote-mark,
.token-fence {
  color: #c586c0;
}

.token-quote-text {
  color: #6a9955;
}

.token-inline-code,
.token-code-block {
  color: #ce9178;
}

.token-link {
  color: #4fc1ff;
}

.token-strong {
  color: #dcdcaa;
  font-weight: 700;
}

.token-emphasis {
  color: #9cdcfe;
  font-style: italic;
}

.token-mtree-comment,
.token-mtree-section-mark,
.token-mtree-continuation {
  color: #c586c0;
}

.token-mtree-section-name,
.token-mtree-chain-arrow {
  color: #4fc1ff;
}

.token-mtree-name {
  color: #dcdcaa;
}

.token-mtree-description {
  color: #6a9955;
}

/* ── color swatch (shared across file types) ─────────────────────────────── */
.token-color-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── .bmap syntax tokens ──────────────────────────────────────────────────── */
.token-bmap-comment       { color: #6a9955; }
.token-bmap-selector      { color: #4ec9b0; font-weight: 600; }
.token-bmap-brace         { color: #c586c0; }
.token-bmap-key           { color: #9cdcfe; }
.token-bmap-style-key     { color: #ce9178; }
.token-bmap-sep           { color: var(--text-dim); }
.token-bmap-value         { color: #d4d4d4; }
.token-bmap-keyword       { color: #569cd6; }
.token-bmap-color         { color: #ce9178; }
.token-bmap-number        { color: #b5cea8; }
.token-bmap-endpoint-node { color: #dcdcaa; }
.token-bmap-endpoint-side { color: #b5cea8; }

.preview-output {
  overflow: auto;
  border: 0;
  background: var(--editor);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.preview-output > :first-child {
  margin-top: 0;
}

.preview-output pre,
.preview-output code {
  font-family: var(--font-mono);
}

.preview-output pre {
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.md-code-block {
  position: relative;
}

.md-code-block pre {
  margin: 0;
}

.md-code-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.md-code-block:hover .md-code-copy-button,
.md-code-block:focus-within .md-code-copy-button {
  opacity: 1;
  pointer-events: auto;
}

.md-code-copy-button:hover {
  color: var(--text);
  border-color: var(--accent);
}

.md-code-copy-button.is-copied {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.preview-output code {
  padding: 1px 4px;
  background: var(--surface-1);
}

.preview-output blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
}

.preview-output table {
  width: 100%;
  border-collapse: collapse;
}

.preview-output th,
.preview-output td {
  padding: 6px 8px;
  border: 1px solid var(--border);
}

.status-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 10px;
  background: var(--status-bg);
  color: var(--status-text);
  overflow-x: auto;
}

.status-item {
  gap: 6px;
  font-size: 11px;
  white-space: nowrap;
}

.status-item-grow {
  justify-content: flex-end;
  margin-left: auto;
}

/* .status-item sets display:flex, which would otherwise defeat [hidden]. */
.status-item[hidden] {
  display: none;
}

/* Tabular figures so the count doesn't jitter the bar as digits change. */
.status-item-charcount {
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}

/* Status-bar items that act as shortcuts to related menus/panels. */
.status-item-action {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.status-item-action:hover,
.status-item-action:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.status-dot.is-success {
  background: #7ee787;
}

.status-dot.is-warning {
  background: #f2cc60;
}

.status-dot.is-danger {
  background: #ff7b72;
}

.settings-form {
  min-width: min(92vw, 760px);
  display: grid;
  gap: 14px;
}

/* Keep the Settings dialog a fixed size so switching tabs (a narrow Appearance
   list vs. the wide 2-column Collaboration tab) never resizes it — the user
   never loses their place. The panel area is a fixed-height scroll region, so
   long tabs scroll internally instead of growing the dialog. */
#settings-dialog .settings-form {
  width: min(92vw, 900px);
  min-width: 0;
  max-height: 88vh;
}

.settings-body {
  min-height: 0; /* let the scroll region actually shrink/scroll */
}

#settings-dialog .settings-tab-strip {
  min-height: 0;
}

#settings-dialog .settings-tab-panels {
  height: min(64vh, 520px);
  overflow-y: auto;
  padding-right: 10px;
}

.dialog-header {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Reserve room so the title/subtitle never slide under the corner close. */
.dialog-header:has(.dialog-close-corner) {
  padding-right: 30px;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px;
}

/* Tabbed settings dialog with a left navigation rail (IDE-style). */
.settings-body {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: 0;
}

.settings-tab-strip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 144px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

.settings-tab {
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  text-align: left;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.settings-tab:hover {
  color: var(--text);
  background: var(--surface-1);
}

.settings-tab.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.settings-tab-panels {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-tab-panel[hidden] {
  display: none;
}

/* Two-column Collaboration tab: left = server + shared session, right = account. */
.collab-grid {
  align-items: start;
}

.collab-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.settings-form label,
.settings-section {
  display: grid;
  gap: 6px;
}

.settings-section {
  align-content: start;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.settings-actions-row {
  gap: 8px;
}

.settings-actions-row button,
.dialog-actions button {
  min-height: 30px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
}

.settings-actions-row button:last-child {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

@keyframes flash-border-success {
  0%   { border-color: #2ea043; box-shadow: 0 0 0 2px rgba(46,160,67,0.35); }
  60%  { border-color: #2ea043; box-shadow: 0 0 0 2px rgba(46,160,67,0.35); }
  100% { border-color: var(--border); box-shadow: none; }
}

@keyframes flash-border-error {
  0%   { border-color: #f85149; box-shadow: 0 0 0 2px rgba(248,81,73,0.35); }
  60%  { border-color: #f85149; box-shadow: 0 0 0 2px rgba(248,81,73,0.35); }
  100% { border-color: var(--border); box-shadow: none; }
}

.settings-status-panel {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface-0);
}

.settings-status-panel.is-success {
  border-color: var(--accent);
  border-left-width: 3px;
}

.settings-status-panel.is-error {
  border-color: var(--border-strong);
  border-left: 3px solid var(--text-dim);
}

.settings-status-panel--flash-success {
  animation: flash-border-success 1.4s ease-out forwards;
}

.settings-status-panel--flash-error {
  animation: flash-border-error 1.4s ease-out forwards;
}

/* Account login block (accounts mode / state 3) — visually set off from the
   PIN connect controls above it. */
.account-login {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.account-login[hidden] {
  display: none;
}

.account-login h4,
#workspace-switcher h4,
.collab-hosting h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, var(--subtle, #888));
}

.collab-hosting {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

#workspace-switcher {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* ---- Unified file browser (Open a workspace) ---------------------------- */
/* Shared column template so the header row and every item line up. */
#server-browser {
  --browser-date-col: 160px;
}

#server-browser[hidden] {
  display: none;
}

/* Keep the dialog a stable size regardless of how many entries are listed.
   Size the <dialog> itself (border-box includes its 18px padding) so the inner
   form can never push past the viewport and force a horizontal scrollbar. */
#open-server-dialog {
  width: min(94vw, 716px);
}

#open-server-dialog .settings-form {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Access dialog: cap the width and drop the .settings-form min-width so it never
   exceeds the viewport (no horizontal scroll), on phones especially. */
#access-dialog .settings-form {
  width: min(88vw, 440px);
  min-width: 0;
  max-width: 100%;
}

.browser-section {
  min-height: 0;
}

.browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.browser-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 12px;
}

.breadcrumb-crumb {
  min-height: 22px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--accent-strong);
  background: transparent;
  border: 1px solid transparent;
}

.breadcrumb-crumb:hover {
  background: var(--surface-2);
}

.breadcrumb-crumb[aria-current="true"] {
  color: var(--text);
  font-weight: 600;
  cursor: default;
}

.breadcrumb-sep {
  color: var(--text-muted);
  font-size: 12px;
  user-select: none;
}

.browser-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.browser-tool-btn {
  min-height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.browser-tool-btn[hidden] {
  display: none;
}

/* Column header row — sits directly on top of the list to form one box. */
.browser-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--browser-date-col);
  gap: 8px;
  padding: 5px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
}

.browser-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Fixed height (not max-height) so the dialog never resizes with content. */
  height: min(46vh, 340px);
  overflow-y: auto;
  background: var(--surface-0);
  border: 1px solid var(--border);
}

.browser-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--browser-date-col);
  gap: 8px;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: default;
  user-select: none;
}

.browser-item:last-child {
  border-bottom: none;
}

.browser-item:hover {
  /* Distinct from the surface tones so rows never blend into the panel. */
  background: var(--accent-soft);
}

.browser-item.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Multi-select (File Manager) checkbox + checked row. */
.browser-item-check {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.browser-item.is-checked {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.browser-item-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.browser-item-icon {
  flex: none;
  font-size: 14px;
  line-height: 1;
}

.browser-item-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-item.is-selected .browser-item-label {
  font-weight: 600;
}

.browser-item-date {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Storage side toggle (This device / Server) at the top of the browser. */
.browser-side-toggle {
  display: inline-flex;
  align-self: flex-start;
  gap: 0;
  margin-bottom: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}

.browser-side-toggle[hidden] {
  display: none;
}

.side-tab {
  min-height: 26px;
  padding: 0 14px;
  font-size: 12px;
  border: none;
  border-radius: 0;
  background: var(--surface-1);
  color: var(--text-muted);
}

.side-tab + .side-tab {
  border-left: 1px solid var(--border-strong);
}

.side-tab.is-active {
  background: var(--accent);
  color: #ffffff;
}

.side-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bottom action bar — the only place to Open/Access a selected row. */
.browser-actionbar {
  align-items: center;
  margin-top: 10px;
}

.browser-selection-label {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.browser-primary-btn:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.browser-tool-btn.is-suggested {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.browser-tool-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Delete button in the File Manager action bar. */
.browser-danger-btn {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  color: var(--danger);
}

.browser-danger-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-0));
}

.browser-danger-btn[hidden] {
  display: none;
}

.access-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 12px;
}

.presence-list {
  min-height: 40px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface-0);
}

.checkbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.checkbox-row input {
  margin: 0;
  margin-top: 2px;
}

.checkbox-row span {
  min-width: 0;
}

.mtree-tools-grid {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  min-height: 0;
  overflow: hidden;
}

.mtree-tools-grid > .settings-section {
  min-height: 0;
}

.mtree-tools-grid > .settings-section:first-child {
  overflow: auto;
}

.mtree-tools-grid > .settings-section:last-child {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.mtree-pane-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.mtree-pane-header h3 {
  min-width: 0;
}

.mtree-editor-actions {
  justify-content: flex-end;
}

.mtree-editor-actions button:last-child {
  border-color: var(--border-strong);
  background: var(--surface-1);
  color: var(--text);
}

.mtree-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.mtree-editor-pane,
.mtree-render-preview {
  display: grid;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--surface-0);
}

.mtree-editor-pane {
  grid-template-rows: minmax(0, 1fr);
}

.mtree-render-preview {
  display: block;
}

.mtree-editor-surface {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--editor);
}

.mtree-output-highlight,
.mtree-output-text {
  width: 100%;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  tab-size: var(--indent-tab-size, 4);
}

.mtree-output-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  margin: 0;
  padding-right: calc(12px + var(--mtree-scrollbar-width, 0px));
  overflow: visible;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.mtree-output-text {
  position: relative;
  display: block;
  min-height: 0;
  height: 100%;
  resize: none;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  white-space: pre-wrap;
  overflow: auto;
  overflow-wrap: anywhere;
  z-index: 1;
}

.mtree-render-preview {
  padding: 12px;
  overflow: auto;
}

.mtree-warning-list {
  min-height: 80px;
  max-height: 220px;
  overflow: auto;
  align-content: start;
}

.mtree-warning-list .subtle-label {
  white-space: pre-wrap;
}

.mtree-tools-form {
  min-width: min(96vw, 1100px);
  max-height: min(92vh, 900px);
  min-height: min(88vh, 820px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.add-file-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
}

.add-file-dropzone {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-1);
}

.add-file-dropzone.is-active {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}

.add-file-dropzone-title {
  font-size: 13px;
  font-weight: 600;
}

.mtree-tools-form .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  background: var(--dialog);
}

dialog {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--dialog);
  color: var(--text);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.35);
  padding: 18px;
  /* Never let a dialog exceed the viewport; tall ones scroll instead of pushing
     their actions off-screen. (Settings scrolls its panel area internally.) */
  max-height: 92vh;
  /* Same guard horizontally so a wide form can't push the page into a sideways
     scroll — the dialog itself stays within the viewport. */
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  overflow: auto;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

menu {
  margin: 0;
  padding: 0;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.app-dialog {
  min-width: min(92vw, 420px);
}

.app-dialog-form {
  display: grid;
  gap: 14px;
}

.app-dialog-form label {
  display: grid;
  gap: 6px;
}

.app-dialog-form input {
  width: 100%;
}

.app-dialog-form select {
  width: 100%;
}

/* Rename dialog's "auto file extension" checkbox row: inline, not full-width. */
.input-dialog-ext-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.input-dialog-ext-row input {
  width: auto;
  flex: none;
  margin: 0;
}

.bookmark-entry-form input,
.bookmark-entry-form textarea {
  border: 1px solid var(--border-strong);
  background: var(--surface-0);
  color: var(--text);
  box-shadow: inset 0 0 0 1px transparent;
}

.bookmark-entry-form input:focus-visible,
.bookmark-entry-form textarea:focus-visible {
  box-shadow: var(--focus-ring), inset 0 0 0 1px var(--accent);
}

.bookmark-entry-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 88px;
}

.debug-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-top: 1px solid var(--border);
  background: var(--surface-0);
  overflow: hidden;
}

.debug-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 0;
  border-bottom: 1px solid var(--border);
}

.debug-panel-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.debug-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
}

.debug-panel-header button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  font-size: 11px;
}

.debug-collapse-button {
  min-width: 24px;
  padding: 0;
  line-height: 1;
}

.debug-tab-strip {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.debug-tab {
  min-width: 62px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-top: 1px solid transparent;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
}

.debug-tab:hover {
  background: var(--surface-1);
  color: var(--text);
}

.debug-tab.is-active {
  color: var(--text);
  background: var(--editor);
  border-top-color: var(--accent);
}

.debug-log-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 1px;
  padding: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.debug-log-entry {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.debug-log-entry.is-empty {
  grid-template-columns: 1fr;
  color: var(--text-dim);
}

.debug-log-time,
.debug-log-kind {
  color: var(--text-dim);
  white-space: nowrap;
}

.debug-log-message {
  min-width: 0;
}

.debug-log-detail {
  grid-column: 3;
  color: var(--text-muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.editor-line.is-empty {
  min-height: calc(var(--editor-font-size) * 1.6);
}

.editor-line.is-empty::before {
  content: "\00a0";
}

.token-urldb-bracket,
.token-urldb-separator {
  color: var(--text-dim);
}

.token-urldb-key {
  color: var(--accent-strong);
}

.token-urldb-name {
  color: #c586c0;
}

.token-urldb-description {
  color: #ce9178;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
  border: 3px solid transparent;
  background-clip: padding-box;
}

@media (max-width: 1100px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile topbar controls: hidden on desktop, revealed inside the mobile media
   query. Kept out of the media block so their base look is shared. */
.topbar-mobile-btn {
  width: 32px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.topbar-mobile-btn:hover {
  background: var(--surface-2);
}

.topbar-mobile-btn.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.topbar-mobile-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.topbar-mobile-actions {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* Mobile topbar caption: replaces the pane header on small screens, showing
   "SOURCE — file" / "PREVIEW — file". Hidden on desktop; revealed in the media
   query. Flexes to fill the space between the brand and the action buttons and
   truncates the file name to the available width. */
.mobile-pane-caption {
  display: none;
  /* Shrink to content (not grow) so the pen button sits right after the text. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* Rename pen: matches the caption's dim tone, smaller, hugging the caption.
   (The action cluster's own margin-left:auto pushes it to the far right, so the
   pen naturally sits right after the caption text.) */
#mobile-rename-button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  color: var(--text-dim);
}

#mobile-rename-button .topbar-mobile-icon {
  width: 13px;
  height: 13px;
}

/* Corner close (×) shared by settings/browse/tool dialogs. Hugs the top-right of
   the dialog on every viewport so "Close" never claims a full footer row. */
.dialog-close-corner {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dialog-close-corner:hover {
  background: var(--surface-1);
  color: var(--text);
}

/* ≡ button that collapses the settings section rail on mobile. Hidden on
   desktop, where the vertical rail is always shown. */
.dialog-nav-button {
  display: none;
}

@media (max-width: 900px) {
  /* Reveal the mobile topbar controls. */
  .topbar-mobile-btn {
    display: inline-flex;
  }

  .topbar-mobile-actions {
    display: flex;
  }

  .mobile-pane-caption {
    display: block;
  }

  /* ── Topbar: ≡ + brand on the left, pane/chat/⋮ actions on the right ── */
  .topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-template-columns: none;
  }

  .topbar .menu-bar,
  .topbar .window-caption {
    display: none;
  }

  .brand-cluster {
    flex: 0 0 auto;
    overflow: hidden;
  }

  .brand-cluster .eyebrow {
    display: none;
  }

  /* Drop the "Stilo Marker" wordmark on phones (the compact "S" mark stays) so
     the pane caption + rename control get the width they need. */
  .brand-block {
    display: none;
  }

  /* ⋮ dropdown: reveal the menu-bar as a right-anchored vertical panel. */
  .app-shell[data-mobile-menu="open"] .topbar .menu-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 2px);
    right: 6px;
    min-width: 200px;
    padding: 4px;
    gap: 1px;
    background: var(--menu);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
    z-index: 45;
  }

  .app-shell[data-mobile-menu="open"] .topbar .menu-group {
    position: static;
  }

  .app-shell[data-mobile-menu="open"] .topbar .menu-trigger {
    justify-content: space-between;
    width: 100%;
  }

  /* Each menu-trigger is a collapsible group here, not a flat button: show a
     chevron that points right when collapsed and rotates down when expanded. */
  .app-shell[data-mobile-menu="open"] .topbar .menu-trigger::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.65;
  }

  .app-shell[data-mobile-menu="open"] .topbar .menu-trigger.is-open::after {
    transform: rotate(45deg);
    opacity: 0.9;
  }

  .app-shell[data-mobile-menu="open"] .topbar .menu-popover {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 10px;
    min-width: 0;
  }

  /* ── Workspace: single column; activity-bar and splitters gone ── */
  .workspace-shell,
  .app-shell[data-explorer="collapsed"] .workspace-shell,
  .app-shell[data-chat="hidden"] .workspace-shell,
  .app-shell[data-explorer-anchor="floating"] .workspace-shell {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .activity-bar,
  .workspace-splitter,
  .chat-splitter,
  .editor-splitter {
    display: none;
  }

  /* ── Explorer: left flyout overlay driven by data-mobile-explorer ── */
  .workspace-shell > .sidebar {
    grid-column: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 340px);
    z-index: 36;
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 22px rgba(0, 0, 0, 0.32);
    transform: translateX(-102%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }

  /* Neutralize the desktop floating-anchor "shown" rule on mobile so the flyout
     is governed solely by data-mobile-explorer (higher-specificity override). */
  .app-shell[data-explorer-anchor="floating"][data-explorer="expanded"] .workspace-shell > .sidebar {
    transform: translateX(-102%);
    opacity: 0;
    pointer-events: none;
  }

  .app-shell[data-mobile-explorer="open"] .workspace-shell > .sidebar,
  .app-shell[data-explorer-anchor="floating"][data-explorer="expanded"][data-mobile-explorer="open"] .workspace-shell > .sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Editor grid: one pane at a time, chosen by data-mobile-view ── */
  /* The main workspace keeps grid-column:4 from the desktop 6-column shell; on
     the collapsed single-column shell that lands it in an implicit, content-
     sized track (which shrinks the preview to min-content). Pin it to col 1. */
  .workspace-shell > .workspace {
    grid-column: 1;
  }

  .editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell[data-mobile-view="preview"] #source-pane,
  .app-shell[data-mobile-view="chat"] #source-pane {
    display: none;
  }

  .app-shell[data-mobile-view="source"] .preview-pane,
  .app-shell[data-mobile-view="chat"] .preview-pane {
    display: none;
  }

  /* Preview must show on mobile when selected (desktop hides it here). */
  .app-shell[data-mobile-view="preview"] .preview-pane {
    display: flex;
    flex-direction: column;
  }

  /* ── Chat: overlays the workspace area, toggled into the pane slot ──
     Selectors use the child combinator to outrank the base
     [data-chat="hidden"] .chat-panel rule declared later in the sheet. */
  .workspace-shell > .chat-panel {
    grid-column: 1;
    position: absolute;
    inset: 0;
    z-index: 26;
    border-left: 0;
  }

  .app-shell[data-mobile-view="source"] .workspace-shell > .chat-panel,
  .app-shell[data-mobile-view="preview"] .workspace-shell > .chat-panel {
    display: none;
  }

  .app-shell[data-mobile-view="chat"] .workspace-shell > .chat-panel {
    display: flex;
  }

  /* ── Pane headers removed: the topbar caption carries SOURCE/PREVIEW + file.
     This also reclaims the vertical space for the editor format toolbar. ── */
  .pane-header {
    display: none;
  }

  /* ── Dialogs: tighten headers, collapse the settings rail into a ≡ flyout ── */
  .dialog-header .eyebrow {
    display: none;
  }

  #settings-tabs-button {
    display: inline-flex;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 32px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  #settings-tabs-button:hover {
    background: var(--surface-1);
  }

  #settings-dialog .dialog-header:has(#settings-tabs-button) {
    padding-left: 34px;
  }

  #settings-dialog .settings-body {
    position: relative;
  }

  /* Section rail slides in from the left as a non-anchored overlay. */
  #settings-dialog .settings-tab-strip {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: min(70vw, 230px);
    padding: 10px;
    background: var(--dialog);
    border-right: 1px solid var(--border-strong);
    box-shadow: 6px 0 22px rgba(0, 0, 0, 0.32);
    transform: translateX(-104%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }

  #settings-dialog[data-tabs="open"] .settings-tab-strip {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Never let the settings dialog scroll horizontally: size the dialog itself
     (padding included) to the viewport and let the form fill it, rather than a
     92vw form that then overflows once the 18px dialog padding is added. */
  #settings-dialog {
    width: min(96vw, 900px);
    max-width: 96vw;
    padding: 14px;
    box-sizing: border-box;
  }

  #settings-dialog .settings-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #settings-dialog .settings-body {
    min-width: 0;
  }

  #settings-dialog .settings-tab-panels {
    overflow-x: hidden;
    padding-right: 4px;
  }

  /* Collapse any multi-column settings layouts so nothing forces overflow. */
  #settings-dialog .settings-grid,
  #settings-dialog .collab-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #settings-dialog input,
  #settings-dialog select,
  #settings-dialog textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Status bar removed on mobile; session panel carries the info ── */
  .app-shell {
    grid-template-rows: var(--topbar-height) minmax(0, 1fr) 0;
  }

  .status-bar {
    display: none;
  }
}

.preview-output {
  height: 100%;
}

/* ──────────────────────────────────────────────
   .bmap Diagram Canvas
   ────────────────────────────────────────────── */

.bmap-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
}

.bmap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 82%, transparent), var(--surface-0));
}

.bmap-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
}

.bmap-toolbar-group-compact {
  align-items: center;
  justify-content: center;
}

.bmap-toolbar-btn,
.bmap-inspector-actions button {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.bmap-toolbar-btn:hover,
.bmap-inspector-actions button:hover {
  background: var(--surface-2);
}

.bmap-toolbar-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface-1));
  color: var(--accent-strong);
}

.bmap-toolbar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bmap-toolbar-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
}

.bmap-toolbar-btn-icon svg {
  display: block;
}

.bmap-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-0);
  color: var(--text-dim);
  font-size: 12px;
}

.bmap-toolbar-select {
  min-width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
}

.bmap-status-float {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-0) 42%, transparent);
  backdrop-filter: blur(2px);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.bmap-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bmap-workspace.is-inspector-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
  column-gap: 0;
}

.bmap-stage {
  position: relative;
  min-width: 0;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-0) 88%, transparent), var(--surface-1));
  overflow: hidden;
}

.bmap-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--surface-0);
  /* In both modes left-drag is a marquee select, so the idle cursor is a normal
     arrow. The grabbing hand is only shown while actively panning (right/middle
     drag), driven by the .is-panning class from the pan gesture. */
  cursor: default;
  touch-action: none;
  user-select: none;
}

/* The canvas is focusable (tabIndex) so it can receive keyboard shortcuts; it
   must not paint a browser focus ring around the whole preview pane. */
.bmap-canvas:focus,
.bmap-canvas:focus-visible {
  outline: none;
}

.bmap-canvas.is-panning {
  cursor: grabbing;
}

/* While a clipboard paste is pending placement (the ghost is following the
   pointer), show a stamp-style cursor as a hint that the next click drops it. */
.bmap-canvas.is-pasting {
  cursor: copy;
}

.bmap-editor.is-readonly .bmap-toolbar {
  display: none;
}

.bmap-editor.is-readonly .bmap-workspace {
  grid-template-columns: 1fr;
}

.bmap-editor.is-readonly .bmap-inspector {
  display: none;
}

.bmap-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.bmap-connectors-svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.bmap-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
}

/* ── Nodes ── */

.bmap-node {
  position: absolute;
  min-width: 120px;
  box-sizing: border-box;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: default;
  overflow: visible;
  transition: box-shadow 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.bmap-node.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 28px rgba(0, 0, 0, 0.24);
}

.bmap-node.is-link-drop {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-1));
}

.bmap-node-circle {
  border-radius: 50%;
}

.bmap-node-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
}

.bmap-node-circle .bmap-node-content {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── Snap points ── */

.bmap-snap {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface-0);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: auto;
  cursor: crosshair;
  z-index: 3;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.bmap-node:hover .bmap-snap,
.bmap-node.is-selected .bmap-snap {
  opacity: 1;
}

.bmap-snap:hover {
  background: var(--accent-strong);
}

/* side 0 = top */
.bmap-snap-0 {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--bmap-inv-zoom, 1));
}

/* side 1 = right */
.bmap-snap-1 {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) scale(var(--bmap-inv-zoom, 1));
}

/* side 2 = bottom */
.bmap-snap-2 {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) scale(var(--bmap-inv-zoom, 1));
}

/* side 3 = left */
.bmap-snap-3 {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) scale(var(--bmap-inv-zoom, 1));
}

/* ── Node interior ── */

.bmap-node-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--border);
}

.bmap-node-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  /* Node boxes are always light, so default the name to a fixed dark ink that
     matches the SVG export and the inspector picker, not the theme text color. */
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bmap-node-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.bmap-node-link-chip {
  max-width: 110px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
  color: var(--accent-strong);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bmap-node-action {
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1.4;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
}

.bmap-node:hover .bmap-node-action,
.bmap-node.is-selected .bmap-node-action {
  opacity: 1;
}

.bmap-node-action:hover {
  background: var(--surface-2);
  color: var(--text);
}

.bmap-node-text {
  padding: 4px 8px 6px;
  font-size: 11px;
  /* Fixed dark ink (matches the export + inspector default), since the node box
     is always light regardless of theme. */
  color: #1a1a1a;
  /* Body is rendered Markdown HTML (block <p>/<ul>), so use `normal`: `pre-wrap`
     would render the newlines between block tags as extra blank lines. */
  white-space: normal;
  word-break: break-word;
}

.bmap-node-circle .bmap-node-header {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
}

.bmap-node-circle .bmap-node-text {
  text-align: center;
}

.bmap-resize-handle {
  position: absolute;
  padding: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 4;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.bmap-resize-handle::before {
  content: '';
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
}

.bmap-node:hover .bmap-resize-handle {
  opacity: 0.7;
}

.bmap-node.is-selected .bmap-resize-handle {
  opacity: 1;
}

/* Corners: small square, diagonal grip */
.bmap-resize-nw,
.bmap-resize-ne,
.bmap-resize-sw,
.bmap-resize-se {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* NW/SE: ↘ diagonal (45°) */
.bmap-resize-nw::before,
.bmap-resize-se::before {
  width: 2px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: -3.5px 0 0 var(--accent), 3.5px 0 0 var(--accent);
}

/* NE/SW: ↗ diagonal (-45°) */
.bmap-resize-ne::before,
.bmap-resize-sw::before {
  width: 2px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: -3.5px 0 0 var(--accent), 3.5px 0 0 var(--accent);
}

.bmap-resize-nw {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(var(--bmap-inv-zoom, 1));
  cursor: nwse-resize;
}

.bmap-resize-ne {
  top: 0;
  right: 0;
  transform: translate(50%, -50%) scale(var(--bmap-inv-zoom, 1));
  cursor: nesw-resize;
}

.bmap-resize-sw {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%) scale(var(--bmap-inv-zoom, 1));
  cursor: nesw-resize;
}

.bmap-resize-se {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%) scale(var(--bmap-inv-zoom, 1));
  cursor: nwse-resize;
}

.bmap-connector-path {
  fill: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

.bmap-connector-path.is-selected {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent));
}

.bmap-connector-hit {
  cursor: pointer;
}

.bmap-connector-preview {
  pointer-events: none;
}

/* Rubber-band rectangle for marquee selection (screen-space, not transformed) */
.bmap-marquee {
  position: absolute;
  z-index: 6;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  pointer-events: none;
}

/* Draggable handle on a dangling connector end (from copy/paste). Lives in
   world space, so it is counter-scaled to stay a constant on-screen size. */
.bmap-dangling-handle {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface-0);
  border: 2px solid var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
  transform: translate(-50%, -50%) scale(var(--bmap-inv-zoom, 1));
  cursor: grab;
  z-index: 5;
}

.bmap-dangling-handle:hover {
  background: color-mix(in srgb, var(--danger) 22%, var(--surface-0));
}

.bmap-dangling-handle.is-static {
  cursor: default;
  pointer-events: none;
}

/* Translucent "ghost" preview shown while a clipboard paste is pending
   placement: it follows the pointer until the user left-clicks to drop it
   (or right-clicks / Escape to cancel), so nothing commits to the diagram
   sight-unseen. */
.bmap-paste-ghost {
  pointer-events: none;
}

.bmap-paste-ghost-node {
  opacity: 0.55;
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.bmap-paste-ghost-svg {
  opacity: 0.55;
}

.bmap-paste-ghost-path {
  stroke-dasharray: 6 4;
}

/* App-wide transient feedback toasts, stacked bottom-center over everything. */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--status-height, 24px) + 12px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 210;
  pointer-events: none;
}

.app-toast {
  max-width: min(90vw, 420px);
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--surface-3, rgba(30, 30, 30, 0.94));
  color: var(--text-on-accent, #fff);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Transient toast (e.g. "Copied") anchored to the top-center of the canvas. */
.bmap-toast {
  position: fixed;
  transform: translate(-50%, -6px);
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--surface-3, rgba(30, 30, 30, 0.92));
  color: var(--text-on-accent, #fff);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}

.bmap-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Right-click context menu for the bmap canvas. Mirrors the explorer menu. */
.bmap-context-menu {
  position: fixed;
  min-width: 180px;
  display: grid;
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--menu);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  z-index: 50;
}

.bmap-context-menu button {
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 3px;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
}

.bmap-context-menu button:hover:not(:disabled) {
  background: var(--accent-soft);
}

.bmap-context-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}

.bmap-context-menu button.bmap-context-danger:not(:disabled) {
  color: var(--danger);
  font-weight: 600;
}

.bmap-context-menu button.bmap-context-danger:hover:not(:disabled) {
  background: rgba(199, 78, 57, 0.14);
}

.bmap-context-sep {
  height: 1px;
  margin: 3px 6px;
  background: var(--border-strong);
}

/* "mixed" badge shown beside multi-edit fields whose values disagree */
.bmap-mixed-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.bmap-inspector {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  overflow: visible;
}

.bmap-inspector.is-collapsed {
  background: transparent;
  border-color: transparent;
}

.bmap-inspector-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.bmap-inspector.is-collapsed .bmap-inspector-body {
  display: none;
}

.bmap-file-dropzone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 36px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface-0);
  cursor: default;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bmap-file-dropzone.is-drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface-0));
}

.bmap-file-dropzone.has-file {
  border-style: solid;
  border-color: var(--border);
  background: var(--surface-1);
}

.bmap-file-dropzone-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bmap-file-dropzone.has-file .bmap-file-dropzone-label {
  color: var(--text);
}

.bmap-file-dropzone-clear {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1;
}

.bmap-file-dropzone-clear:hover {
  background: var(--surface-2);
  color: var(--text);
}

.bmap-inspector-collapse-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  z-index: 5;
  transition: background 0.12s ease, color 0.12s ease;
}

.bmap-inspector-collapse-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* When collapsed the inspector column shrinks to 0 at the workspace's right
   edge, so the boundary tab would straddle (and clip) the screen edge. Anchor
   it flush inside the edge instead, and enlarge it a touch so the chevron
   reads clearly as a "reopen inspector" handle. */
.bmap-workspace.is-inspector-collapsed .bmap-inspector-collapse-btn {
  left: auto;
  right: 4px;
  transform: translate(0, -50%);
  width: 22px;
  height: 56px;
  font-size: 13px;
}

.bmap-inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.bmap-inspector-header h3 {
  margin: 0;
  font-size: 13px;
}

.bmap-inspector-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bmap-inspector-fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.bmap-inspector-fieldset:disabled {
  opacity: 0.72;
}

.bmap-inspector-note {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-0));
  color: var(--text-dim);
  font-size: 11px;
}

.bmap-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  color: var(--text-dim);
}

.bmap-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bmap-field input,
.bmap-field textarea,
.bmap-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-0);
  color: var(--text);
  font: inherit;
}

.bmap-field textarea {
  resize: vertical;
  min-height: 88px;
}

.bmap-field.is-disabled {
  opacity: 0.55;
}

.bmap-checkbox-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.bmap-checkbox-field input {
  width: auto;
  margin: 0;
}

/* Unified color field: native picker doubles as a live swatch preview. */
.bmap-color-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Higher specificity than `.bmap-field input` so width/height/padding win. */
.bmap-color-control .bmap-color-swatch {
  flex: 1 1 auto;
  width: 100%;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.bmap-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.bmap-color-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }

/* Grouped style section with dynamically revealed sub-options (e.g. Border). */
.bmap-style-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.bmap-border-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bmap-border-options[hidden] {
  display: none;
}

/* Markdown-rendered node body: keep it compact inside the node box. */
.bmap-node-text > :first-child { margin-top: 0; }
.bmap-node-text > :last-child { margin-bottom: 0; }
.bmap-node-text p { margin: 0 0 4px; }
.bmap-node-text ul,
.bmap-node-text ol { margin: 0 0 4px; padding-left: 18px; }
.bmap-node-text code {
  font-size: 0.92em;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--surface-2);
}

.bmap-inspector-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bmap-inspector-actions button {
  flex: 1 1 120px;
}

.bmap-generate-btn {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.bmap-generate-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
}

.bmap-secondary-btn:hover {
  background: var(--surface-2);
}

.bmap-danger-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.bmap-danger-btn:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-1));
}

.bmap-inspector-empty {
  font-size: 12px;
  color: var(--text-dim);
}

.bmap-inspector-empty p {
  margin: 0 0 8px;
}

.bmap-inspector-empty ul {
  margin: 0;
  padding-left: 18px;
}

.bmap-parse-errors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.bmap-parse-error {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-0));
  color: var(--danger);
  font-size: 11px;
}

/* ── Floating file-preview popup ── */

.bmap-file-popup {
  position: fixed;
  z-index: 60;
  width: 300px;
  height: 440px;
  min-width: 200px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  background: var(--menu);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  overflow: auto;
  resize: both;
}

.bmap-popup-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}

.bmap-popup-titlebar:active {
  cursor: grabbing;
}

.bmap-popup-title {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.bmap-popup-close,
.bmap-popup-zoom-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
}

.bmap-popup-close:hover,
.bmap-popup-zoom-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.bmap-popup-zoom-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
}

.bmap-popup-togglebar {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
  flex-shrink: 0;
}

.bmap-popup-mode-btn {
  padding: 2px 8px;
  font-size: 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
}

.bmap-popup-mode-btn.is-active {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.bmap-popup-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.bmap-popup-body-msg {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.bmap-popup-content {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.bmap-popup-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bmap-popup-content pre {
  overflow-x: auto;
}

/* ── Zoom/pan controls ── */

.bmap-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

.bmap-control-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bmap-control-btn:hover {
  background: var(--surface-2);
}

.bmap-control-btn.is-active {
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface-1));
  border-color: var(--accent);
  color: var(--accent-strong);
}

@media (max-width: 980px) {

  .bmap-toolbar-group,
  .bmap-toolbar-group-compact {
    justify-content: flex-start;
  }

  /* Inspector docks to the bottom of the stage. Reserve a real, scrollable
     slice of height so it stays usable instead of being squeezed to a sliver;
     the stage keeps a guaranteed minimum above it. */
  .bmap-workspace,
  .bmap-workspace.is-inspector-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(140px, 1fr) auto;
    column-gap: 12px;
  }

  .bmap-stage {
    min-height: 0;
  }

  .bmap-inspector {
    max-height: 46vh;
  }

  /* The show/hide toggle belongs at the top edge of the bottom sheet, as a
     full-width grab handle, not floating off the left side. Keep it that way
     even when collapsed (override the desktop collapsed-tab positioning). */
  .bmap-inspector-collapse-btn,
  .bmap-workspace.is-inspector-collapsed .bmap-inspector-collapse-btn {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: 24px;
    font-size: 12px;
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
  }

  .bmap-inspector-collapse-btn > * {
    display: inline-block;
    transform: rotate(90deg);
  }

}

/* ── Editor link hover tooltip ────────────────────────────────────────────── */

.editor-link-tooltip {
  position: fixed;
  z-index: 200;
  width: 380px;
  height: 340px;
  min-width: 200px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  background: var(--menu);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
  overflow: hidden;
  resize: both;
}

.editor-link-tooltip-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-1);
}

.editor-link-tooltip-name {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--accent-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.editor-link-tooltip-name.is-unresolved {
  color: var(--danger);
}

.editor-link-tooltip-hint {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.editor-link-tooltip-preview {
  overflow-y: auto;
  padding: 10px 12px;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.55;
}

.editor-link-tooltip-preview:empty {
  display: none;
}

/* Dim link tokens in source pane when hovering to hint at interactivity */
.token-link[data-href] {
  cursor: default;
}

/* ── Links sidebar panel ─────────────────────────────────────────────────── */

.links-sidebar-panel {
  border-top: 1px solid var(--border);
  padding: 0;
}

.links-panel-header {
  padding: 6px 10px 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.links-section {
  padding: 0 0 6px;
}

.links-section-label {
  padding: 4px 10px 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}

.links-list {
  display: flex;
  flex-direction: column;
}

.links-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  overflow: hidden;
}

.links-item-clickable {
  cursor: pointer;
}

.links-item-clickable:hover {
  background: var(--surface-2);
}

.links-item-empty {
  color: var(--text-dim);
  font-style: italic;
}

.links-item-unresolved .links-item-href {
  color: var(--danger);
  text-decoration: wavy underline var(--danger);
  text-decoration-skip-ink: none;
}

.links-item-label {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.links-item-href {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.links-item-count {
  color: var(--text-dim);
  font-size: 10px;
  flex-shrink: 0;
}

/* ── Chat panel ───────────────────────────────────────────────────────────── */

.chat-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--sidebar);
  overflow: hidden;
  position: relative;
}

.app-shell[data-chat="hidden"] .chat-panel {
  display: none;
}

/* ─ Toolbar ─────────────────────────────────────────────────────────── */

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 35px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-grow: 0;
}

.chat-toolbar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-model-badge {
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 1;
  font-family: inherit;
  cursor: pointer;
}
.chat-model-badge:hover,
.chat-model-badge:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
  outline: none;
}
.chat-model-badge.is-error {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

.chat-model-select {
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  max-width: 130px;
  flex-shrink: 1;
}

/* Expandable agent activity log. */
.chat-activity-toggle {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
}
.chat-activity-toggle:hover {
  text-decoration: underline;
}

/* Retry affordance on a failed turn. */
.chat-message-retry {
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.chat-message-retry:hover {
  background: var(--accent-soft);
}

.chat-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.chat-toolbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
}

.chat-toolbar-icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.chat-toolbar-icon-btn[aria-pressed="true"] {
  color: var(--accent);
}

/* ─ History drawer ───────────────────────────────────────────────────── */

.chat-history-pane {
  border-bottom: 1px solid var(--border);
  background: var(--sidebar);
  max-height: 208px;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  gap: 3px;
}

.chat-history-pane[hidden] {
  display: none;
}

.chat-thread-list {
  display: grid;
  gap: 2px;
}

.chat-thread-button {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.chat-thread-button:hover {
  background: var(--surface-2);
}

.chat-thread-button.is-active {
  background: var(--accent-soft);
}

.chat-thread-title,
.chat-thread-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-title {
  font-size: 12px;
  color: var(--text);
}

.chat-thread-meta {
  font-size: 10px;
  color: var(--text-dim);
}

/* ─ Message list ─────────────────────────────────────────────────────── */

.chat-message-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
}

.chat-message {
  display: grid;
  gap: 4px;
  padding: 8px 14px;
  border-left: 2px solid transparent;
  min-width: 0;
}

.chat-message + .chat-message {
  border-top: 1px solid var(--border);
}

.chat-message[data-role="user"] {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-0));
  border-left-color: var(--accent);
}

.chat-message[data-role="assistant"] {
  background: var(--surface-0);
}

.chat-message[data-role="system"] {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-0));
  border-left-color: var(--danger);
}

.chat-message.is-error {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-0));
  border-left-color: var(--danger);
}

.chat-message-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}

.chat-message-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-message[data-role="user"] .chat-message-role {
  color: var(--accent);
}

.chat-message[data-role="assistant"] .chat-message-role {
  color: var(--text);
}

.chat-message[data-role="system"] .chat-message-role {
  color: var(--danger);
}

.chat-message-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
}

.chat-message-content {
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.chat-message[data-role="user"] .chat-message-content,
.chat-message[data-role="system"] .chat-message-content {
  white-space: pre-wrap;
}

/* Markdown rendered inside assistant messages */
.chat-message[data-role="assistant"] .chat-message-content p:first-child {
  margin-top: 0;
}

.chat-message[data-role="assistant"] .chat-message-content p:last-child {
  margin-bottom: 0;
}

.chat-message[data-role="assistant"] .chat-message-content pre {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 3px;
  padding: 8px;
  background: var(--surface-2);
  font-size: 12px;
}

.chat-message[data-role="assistant"] .chat-message-content code:not(pre code) {
  background: var(--surface-2);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}

.chat-message-context {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.chat-message-context-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.6;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-context-file::before {
  content: "@";
  opacity: 0.7;
  flex-shrink: 0;
}

/* Thinking / sending animation */
.chat-thinking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
}

/* Persisted, collapsible "Thought for…" section on a finished assistant reply. */
.chat-thought {
  margin-bottom: 6px;
}

.chat-thought-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  cursor: pointer;
}

.chat-thought-toggle:hover {
  color: var(--text);
}

.chat-thought-caret {
  display: inline-block;
  font-style: normal;
  transition: transform 0.15s ease;
}

.chat-thought.is-open .chat-thought-caret {
  transform: rotate(90deg);
}

.chat-thought-body {
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 10px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Reasoning-model "thinking" stream: muted, monospace-ish, scrolls if long. */
.chat-reasoning {
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 10px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-stream-preview {
  width: 100%;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.chat-stream-preview > *:first-child { margin-top: 0; }
.chat-stream-preview > *:last-child { margin-bottom: 0; }

.chat-thinking-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.chat-thinking-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: chat-bounce 1.3s ease-in-out infinite;
  opacity: 0.7;
}

.chat-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.chat-thinking-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.chat-activity-line {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.chat-activity-line:last-child {
  color: var(--text);
}

.chat-empty-state {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.65;
}

/* ─ Proposal card (agent-as-collaborator, Phase 4) ──────────────────── */
.proposal-card {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}

.proposal-card.is-kept,
.proposal-card.is-dropped {
  opacity: 0.6;
}

.proposal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.proposal-card.is-accepted .proposal-card-header {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.proposal-card-title {
  font-weight: 600;
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proposal-card-resolved {
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
}

.proposal-card-actions {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.proposal-btn {
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  line-height: 1.7;
}

.proposal-btn:hover:not(:disabled) {
  background: var(--surface-4, var(--surface-3));
}

.proposal-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.proposal-btn-accept-all {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-3));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

.proposal-btn-accept-all:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface-3));
}

.proposal-btn-keep {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-3));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

.proposal-btn-keep:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface-3));
}

.proposal-btn-jump {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-dim);
}

.proposal-card-ops {
  padding: 0;
}

.proposal-op {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

.proposal-op:last-child {
  border-bottom: none;
}

.proposal-op.is-stale {
  opacity: 0.5;
  text-decoration: line-through;
}

.proposal-op.is-dropped {
  opacity: 0.4;
}

.proposal-op-icon {
  font-size: 10px;
  font-weight: 700;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-dim);
}

.proposal-op-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--text);
}

.proposal-op-badge {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}

.proposal-op-btn {
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  line-height: 1.6;
  flex-shrink: 0;
}

.proposal-op-accept:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.proposal-op-drop:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger, #e05) 12%, var(--surface-2));
  color: var(--danger, #e05);
  border-color: color-mix(in srgb, var(--danger, #e05) 30%, transparent);
}

.proposal-op-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.proposal-op-diff {
  width: 100%;
  margin-top: 2px;
}

.proposal-op-diff summary {
  cursor: pointer;
  font-size: 10px;
  color: var(--text-dim);
  user-select: none;
  padding: 2px 0;
}

.proposal-op-diff-body {
  margin-top: 4px;
}

.proposal-diff-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  overflow-x: auto;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  line-height: 1.5;
}

pre.proposal-diff-block {
  margin: 0;
  white-space: pre;
}

.proposal-diff-line {
  white-space: pre;
}

.proposal-diff-del {
  background: color-mix(in srgb, #e05555 12%, transparent);
  color: #c44;
}

.proposal-diff-add {
  background: color-mix(in srgb, #44a 10%, transparent);
  color: color-mix(in srgb, var(--accent) 90%, var(--text));
}

.proposal-diff-ctx {
  color: var(--text-dim);
}

.proposal-diff-warning {
  font-size: 11px;
  color: #c44;
  padding: 4px 2px;
}

.proposal-diff-rename {
  font-size: 11px;
  font-family: var(--mono, monospace);
  padding: 4px 2px;
}

.proposal-diff-more {
  display: block;
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 6px;
}

/* ─ Compose area (absolute overlay at the bottom) ───────────────────── */

.chat-compose-shell {
  flex-shrink: 0;
  max-height: 40%;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 2px solid var(--border-strong, var(--border));
  background: var(--sidebar);
  display: grid;
  gap: 0;
}

.chat-context-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px 0;
  min-height: 0;
}

.chat-context-list:empty {
  display: none;
}

.chat-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-size: 11px;
  max-width: 180px;
}

.chat-context-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-context-chip button {
  min-width: 14px;
  min-height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  line-height: 1;
  cursor: pointer;
}

.chat-context-chip button:hover {
  color: var(--text);
}

.chat-compose-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 8px 8px;
  border-radius: 0 0 4px 4px;
  transition: background 0.1s;
}

.chat-compose-form.is-drag-over {
  background: color-mix(in srgb, var(--accent) 10%, var(--sidebar));
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
}

.chat-compose-context-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
}

.chat-compose-drop-hint {
  font-size: 10px;
  color: var(--text-dim);
  pointer-events: none;
  white-space: nowrap;
}

.chat-compose-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.chat-input {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-height: 100px;
  resize: none;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 3px;
  overflow-y: auto;
  field-sizing: content;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-compose-chip-btn {
  flex-shrink: 0;
  padding: 3px 7px;
  font-size: 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-dim);
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.chat-compose-chip-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

.chat-compose-chip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-send-button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-send-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-send-button:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent) 80%, #000);
}

/* ---- Scrollable tab strips + overflow menu -------------------------------
   Tabs used to shrink (min-width:0 + ellipsis) until nothing was readable.
   Instead they now keep their natural width and the strip scrolls, with a "⋯"
   button pinned at the end that lists every open tab. */
.tab-strip-wrap {
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.tab-strip-wrap > .tab-strip {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

/* A slim scrollbar so it never eats into the 35px strip height. */
.tab-strip-wrap > .tab-strip::-webkit-scrollbar {
  height: 4px;
}
.tab-strip-wrap > .tab-strip::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}
.tab-strip-wrap > .tab-strip::-webkit-scrollbar-track {
  background: transparent;
}

/* Natural width — never squeeze a tab down to an unreadable sliver. */
.tab-strip-wrap > .tab-strip > .editor-tab {
  flex: 0 0 auto;
}

.tab-overflow-btn {
  flex: none;
  align-self: center;
  width: 26px;
  height: 26px;
  margin: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.tab-overflow-btn:hover,
.tab-overflow-btn.is-open {
  background: var(--surface-2);
  color: var(--text);
}
.tab-overflow-btn[hidden] {
  display: none;
}

/* The "all open tabs" popover: reuses the context-menu shell. */
.tab-overflow-menu {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  min-width: 240px;
}
.tab-overflow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.tab-overflow-row .tab-overflow-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.tab-overflow-row.is-active .tab-overflow-name {
  font-weight: 700;
  color: var(--accent);
}
.tab-overflow-close {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 13px;
}
.tab-overflow-close:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* Mid-turn the send button becomes a Stop control (danger-coloured so it reads
   as "interrupt", not "send"). */
.chat-send-button.is-stop {
  background: var(--danger);
  font-size: 13px;
}
.chat-send-button.is-stop:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger) 80%, #000);
}

/* An answer the user interrupted — marked so a partial reply isn't mistaken for
   a complete one. */
.chat-message.is-interrupted .chat-message-content::after {
  content: " ⏹ stopped";
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}