:root {
  --bg: #f4f6f9;
  --grid-dot: #e2e8f0;
  --toolbar-bg: #ffffff;
  --border: #d7dce3;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --node-bg: #ffffff;
  --node-border: #c7cdd6;
  --edge: #94a3b8;
  --node-font-size: 14px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Toolbar ----------
   Split into a left group (brand, hamburger menu, node editing — the
   most-frequently-used actions) and a right group (zoom, color), anchored
   to opposite ends via justify-content so the bar reads as organized
   rather than one long run of buttons. Rarely-used actions (file I/O,
   settings) live in the #file-menu dropdown instead of the bar itself, so
   there's little left to wrap; nowrap + a hidden horizontal scrollbar is
   the safety net for windows too narrow to fit everything, keeping this
   to a single row instead of spilling onto a second line. */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}
#toolbar::-webkit-scrollbar { display: none; }

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.toolbar-group.brand {
  font-weight: 700;
  font-size: 16px;
  margin-right: 6px;
  color: var(--accent-dark);
  white-space: nowrap;
}

#toolbar button {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

#toolbar button:hover { background: #eef2f8; border-color: #b9c2cf; }
#toolbar button:active { background: #e2e8f0; }
#toolbar button:disabled { opacity: .4; cursor: default; }
#toolbar button:disabled:hover { background: #fff; }

.menu-toggle[aria-expanded="true"] { background: #eef2f8; border-color: #b9c2cf; }

/* Show/hide toggles for the icon and checklist sidebars — pressed (ON)
   state reads as a filled accent chip, same visual language as an active
   tab, so it's obvious at a glance which panels are currently showing. */
.panel-group { padding-left: 8px; border-left: 1px solid var(--border); }
.panel-toggle.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
.panel-toggle.active:hover { background: var(--accent-dark); }

.color-group { padding-left: 8px; border-left: 1px solid var(--border); }
.color-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.swatch:hover { transform: scale(1.15); }

/* ---------- Tab bar: multiple open maps ---------- */
#tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-right: calc(10px + env(safe-area-inset-right));
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#tab-list {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#tab-list::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 160px;
  touch-action: manipulation;
  transition: background .12s, border-color .12s;
}
.tab:hover { background: #eef2f8; }
.tab.active {
  background: #fff;
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close {
  border: none;
  background: none;
  color: inherit;
  opacity: .5;
  font-size: 13px;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}
.tab-close:hover { opacity: 1; background: rgba(15, 23, 42, .1); }

#btn-new-tab {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s, border-color .12s;
}
#btn-new-tab:hover { background: #eef2f8; border-color: #b9c2cf; }

/* ---------- Body row: checklist + icon sidebar + canvas, side by side ---------- */
#body-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0; /* let children size within the flex column above, instead of forcing the page to grow */
  overflow: hidden;
}

/* Auto-appears (see #checklist-sidebar.hidden) the moment the active tab's
   document has at least one checkbox node, and disappears again once it
   has none — so it never takes up space for a map that isn't using
   checkboxes. */
#checklist-sidebar {
  flex-shrink: 0;
  width: 220px;
  max-width: 40vw;
  background: var(--toolbar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#checklist-sidebar.hidden { display: none; }

.checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.checklist-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.checklist-progress { font-weight: 400; color: var(--muted); }

.checklist-copy-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  touch-action: manipulation;
  transition: background .12s, border-color .12s;
}
.checklist-copy-btn:hover { background: #eef2f8; border-color: #b9c2cf; }
.checklist-copy-btn:disabled { opacity: .4; cursor: default; }
.checklist-copy-btn:disabled:hover { background: #fff; }
/* Stays pressed for as long as "include ancestor path" is on for copying —
   same visual language as the other toggle buttons in this app. */
#checklist-copy-path-toggle.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
#checklist-copy-path-toggle.active:hover { background: var(--accent-dark); }

#checklist-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#checklist-actions button {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 6px 4px;
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s, border-color .12s;
  touch-action: manipulation;
}
#checklist-actions button:hover { background: #eef2f8; border-color: #b9c2cf; }
#checklist-actions button:disabled { opacity: .4; cursor: default; }
#checklist-actions button:disabled:hover { background: #fff; }
/* Stays pressed/highlighted for as long as continuous-add mode is on —
   same visual language as the toolbar's panel-toggle buttons. */
#checklist-stamp-mode.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
#checklist-stamp-mode.active:hover { background: var(--accent-dark); }

.checklist-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

#checklist-list {
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.checklist-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.35;
}
.checklist-item:hover { background: #eef2f8; }
.checklist-item.selected { background: #e2e8f0; }

.checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.checklist-item input[type="checkbox"] {
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.checklist-text {
  overflow-wrap: break-word;
  color: var(--text);
}
.checklist-item.checked .checklist-text {
  color: var(--muted);
  text-decoration: line-through;
}

/* Shown only under the currently-selected item — the ancestor chain from
   the center topic down to (not including) that node, so its place in the
   tree is clear even when the rest of the map isn't in view. */
.checklist-path {
  padding-left: 22px;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: break-word;
}

#icon-sidebar {
  flex-shrink: 0;
  width: 40px;
  background: var(--toolbar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width .15s ease;
  overflow: hidden;
}
#icon-sidebar.collapsed { width: 0; border-right-width: 0; }
#icon-sidebar.collapsed #icon-sidebar-grid,
#icon-sidebar.collapsed #icon-sidebar-actions { display: none; }

/* Remove-last/remove-all-icons for whichever node is currently selected —
   pinned above the palette and set off from it by a divider, since these
   act on the selection rather than adding anything. */
#icon-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#icon-sidebar-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  background: none;
  border-radius: 5px;
  padding: 4px 0;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s;
}
#icon-sidebar-actions button:hover { background: #eef2f8; }
#icon-sidebar-actions button:disabled { opacity: .35; cursor: default; }
#icon-sidebar-actions button:disabled:hover { background: none; }

/* Single column of small, borderless icons — a compact, always-visible
   palette rather than a grid of boxed buttons. */
#icon-sidebar-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px;
  overflow-y: auto;
}
#icon-sidebar-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  background: none;
  border-radius: 5px;
  padding: 3px 0;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s;
}
#icon-sidebar-grid button:hover { background: #eef2f8; }
#icon-sidebar-grid button:disabled { opacity: .35; cursor: default; }
#icon-sidebar-grid button:disabled:hover { background: none; }

/* ---------- Canvas ---------- */
#canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--grid-dot) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
}
#canvas:active { cursor: grabbing; }

#world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

#clouds,
#edges,
#glinks {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.cloud {
  fill-opacity: .28;
  stroke-opacity: .5;
  stroke-width: 2;
}

.edge {
  fill: none;
  stroke: var(--edge);
  stroke-width: 2.5;
  stroke-linecap: round;
}

#nodes {
  position: absolute;
  left: 0;
  top: 0;
}

/* Chapter 3: graphical links — arbitrary arrows between any two nodes */
.glink {
  fill: none;
  stroke-width: 2.5;
  opacity: .85;
}
.glink.selected {
  stroke-width: 4;
  opacity: 1;
}
.glink-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}

/* Drag handle for reshaping a selected graphical link's curve (see
   interactions.js) — a filled dot with a light halo so it reads as
   grabbable and stands out against the curve underneath it. */
.glink-handle {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2.5;
  cursor: grab;
  touch-action: none;
  pointer-events: all; /* #glinks disables pointer events by default (see below), same as .glink-hit already overrides */
}
.glink-handle:active {
  cursor: grabbing;
}

/* ---------- Node ---------- */
.node-box {
  position: absolute;
  max-width: 220px;
  transform: translate(-50%, -50%);
  background: var(--node-bg);
  border: 1.5px solid var(--node-border);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: var(--node-font-size);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  -webkit-touch-callout: none;
}

.node-box.root-box {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--node-font-size) + 2px);
  border-radius: 16px;
  padding: 11px 20px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}

.node-box.selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

.node-box.drop-target {
  outline: 2px dashed #16a34a;
  outline-offset: 3px;
}

.node-box.collapsed {
  border-style: dashed;
}

.node-box.link-source {
  outline: 2px dashed #f97316;
  outline-offset: 2px;
}

.node-box.has-link {
  cursor: pointer;
}

/* ---------- Node style setting: borderless / underline ----------
   (see settings.js's applySettings — the modifier class lives on <html>,
   not on individual node boxes, so it cascades to every node uniformly
   including the measure.js probe, which is also appended under <body>.) */
.node-style-borderless .node-box {
  border-width: 0;
}

/* No box at all — just the text, underlined, sitting directly on the
   canvas (FreeMind's classic "fork" node look). render.js repoints a
   node's custom color (n.color) to border-bottom-color instead of
   background in this mode, so a colored node still shows *something*
   instead of the color silently disappearing. */
.node-style-underline .node-box {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 2px 3px;
  border-bottom: 1.5px solid var(--node-border);
}
.node-style-underline .node-box.root-box {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
  box-shadow: none;
}
.node-style-underline .node-box.selected {
  box-shadow: none; /* the filled halo reads as a box; the outline alone still marks selection */
}
.node-style-underline .node-box.collapsed {
  border-bottom-style: dashed;
}

.node-icons {
  display: inline;
  margin-right: 4px;
  font-size: 1em;
}

.node-image {
  display: block;
  max-width: 100%;
  height: auto; /* keep aspect ratio if the node box's own max-width ever
                   has to squeeze the image below its w/h attributes */
  border-radius: 6px;
  margin: 0 0 6px;
  object-fit: contain;
  pointer-events: none; /* clicks fall through to the node box beneath it */
}

.node-checkbox {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -.1em;
  cursor: pointer;
}
.node-checkbox.checked { color: #16a34a; }
.node-box.root-box .node-checkbox { color: #fff; }
.node-box.root-box .node-checkbox.checked { color: #bbf7d0; }

/* A colored number badge (Chapter 3 icons '#1'..'#9') — white digit on a
   per-number background, since no single emoji glyph can be recolored. */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  color: #fff;
  font-size: .8em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -.2em;
}

.link-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #f97316;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.node-text {
  display: inline; /* flows on the same line as .node-icons, right after it, instead of wrapping to its own line */
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.node-text[contenteditable="true"] {
  outline: none;
  cursor: text;
  user-select: text;
  background: rgba(255, 255, 255, .55);
  border-radius: 4px;
}

.node-box.root-box .node-text[contenteditable="true"] {
  background: rgba(255, 255, 255, .25);
}

.fold-toggle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #94a3b8;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.fold-toggle.side-right { right: -9px; }
.fold-toggle.side-left { left: -9px; }
.fold-toggle:hover { background: #eef2f8; }

#nodes.dragging-node .node-box { cursor: grabbing; }

.measure-probe {
  position: absolute;
  visibility: hidden;
  left: -9999px;
  top: -9999px;
  white-space: pre-wrap;
}

/* ---------- Context menu ---------- */
.context-menu {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  padding: 4px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
}
.context-menu.hidden { display: none; }
.context-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text);
  touch-action: manipulation;
}
.context-menu button:hover { background: #eef2f8; }

#icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  min-width: unset;
  max-height: min(360px, 70vh);
  overflow-y: auto;
}
#icon-picker.hidden { display: none; }
#icon-picker button {
  font-size: 18px;
  padding: 6px;
  text-align: center;
  border-radius: 6px;
}

/* ---------- Settings modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}
.modal-backdrop.hidden { display: none; }

.modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .25);
  width: 100%;
  max-width: 380px;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; }

.modal-close {
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  touch-action: manipulation;
}
.modal-close:hover { background: #eef2f8; color: var(--text); }

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setting-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.setting-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.setting-control input[type="range"] { flex: 1; }
.setting-value {
  font-size: 12px;
  color: var(--muted);
  min-width: 34px;
  text-align: right;
}

.setting-row.setting-row-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.setting-row-inline input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  flex-shrink: 0;
}

.swatch-row { flex-wrap: wrap; }
.swatch-row .swatch { width: 26px; height: 26px; }
.swatch.active { outline: 2px solid var(--accent); outline-offset: 2px; }

.setting-toggle-group button {
  border: 1px solid var(--border);
  background: #fff;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.setting-toggle-group button:hover { background: #eef2f8; }
.setting-toggle-group button.active {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
.setting-toggle-group button.active:hover { background: var(--accent-dark); }
.setting-row-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.modal-footer button {
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.modal-footer button:hover { background: #eef2f8; }
.modal-footer button.primary {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
.modal-footer button.primary:hover { background: var(--accent-dark); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, .9);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity .2s;
}
.toast.hidden { display: none; }

/* ---------- Status bar ---------- */
#statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  padding-bottom: calc(5px + env(safe-area-inset-bottom));
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  background: var(--toolbar-bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  gap: 12px;
}
#statusbar .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  #statusbar .hint { display: none; }
}

/* ---------- Mobile / touch ---------- */
@media (max-width: 640px), (pointer: coarse) {
  #toolbar { gap: 10px; }
  .toolbar-left, .toolbar-right { gap: 10px; }

  .toolbar-group.brand { display: none; }

  #toolbar button {
    padding: 9px 11px;
    min-height: 40px;
    font-size: 13px;
  }

  .swatch {
    width: 26px;
    height: 26px;
  }

  #icon-sidebar { width: 46px; }
  #icon-sidebar.collapsed { width: 0; }
  #icon-sidebar-grid button { padding: 8px 0; font-size: 18px; min-height: 38px; }
  #icon-sidebar-actions button { padding: 9px 0; font-size: 18px; min-height: 38px; }

  .tab { padding: 8px 8px 8px 12px; font-size: 13px; max-width: 130px; }
  .tab-close { width: 22px; height: 22px; font-size: 15px; }
  #btn-new-tab { width: 30px; height: 30px; font-size: 17px; }

  #checklist-sidebar { width: 55vw; }
  .checklist-item input[type="checkbox"] { width: 18px; height: 18px; }
  #checklist-actions button { padding: 9px 4px; font-size: 12.5px; min-height: 38px; }
  .checklist-copy-btn { width: 30px; height: 30px; font-size: 14px; }

  .fold-toggle {
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
  .fold-toggle.side-right { right: -12px; }
  .fold-toggle.side-left { left: -12px; }

  .node-box {
    max-width: min(220px, 62vw);
  }

  /* Prevent iOS Safari from auto-zooming the page when a contenteditable
     field with a small font size gains focus. */
  .node-text[contenteditable="true"] {
    font-size: max(16px, 1em);
  }

  .context-menu button {
    padding: 11px 14px;
    min-height: 44px;
    font-size: 14px;
  }

  #icon-picker button {
    font-size: 22px;
    padding: 8px;
  }

  .link-badge {
    width: 24px;
    height: 24px;
    font-size: 13px;
    top: -10px;
    left: -10px;
  }

  .toast {
    bottom: calc(52px + env(safe-area-inset-bottom));
    max-width: 86vw;
    text-align: center;
  }

  .modal-close { min-width: 40px; min-height: 40px; font-size: 18px; }
  .modal-footer button { padding: 10px 14px; min-height: 42px; font-size: 14px; }
  .swatch-row .swatch { width: 30px; height: 30px; }
  .setting-control input[type="range"] { min-height: 30px; }
}