/* ═══════════════════════════════════════════════════
   INTERFACE TAB (Sprint 9)
   All selectors scoped under .maker .tab-interface.
   PR-0 scaffold: sub-tab pill row + per-section controls
   mount + shared preview frame. Per-section styles land
   in their own PRs.
   ═══════════════════════════════════════════════════ */

/* Galmuri11 — bundled pixel font for game-accurate quest dialogue + info-card
   text (Dotum-style bitmap look; covers Latin + Korean). OFL-1.1, see
   assets/fonts/Galmuri-OFL.txt. */
@font-face {
  font-family: 'Galmuri11';
  src: url('../../assets/fonts/Galmuri11.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

.maker .tab-interface .panel-body {
  display: flex;
  height: 100%;
  min-height: 0;
}

.maker .tab-interface .controls-col {
  width: var(--rail-left);          /* 260 → 220, grammar-aligned */
  flex: 0 0 var(--rail-left);
  border-right: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  overflow-y: auto;
  background: var(--tab-active);    /* was transparent — match every other rail */
}

/* ── Bottom dock — Windows gallery (replaces the left-rail UI Type dropdown) ── */
/* Bug K6KS2F: the old `flex:0 0 auto; max-height:188px` (pre-browse-dock
   emoji grid) overrode the shared --dock-h sizing, so the resize handle
   couldn't drag the dock taller. Inherit the maker-dock var like every tab. */
.maker .tab-interface .if-window-dock { flex: 0 0 var(--dock-h); }
/* .maker-dock-header is shared (styles/maker/shell-layout.css). */
.maker .tab-interface .if-window-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
  overflow-y: auto;
}
.maker .tab-interface .if-window-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--chrome-hi);
  color: var(--text-mid);
  font-size: var(--fs-3);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.maker .tab-interface .if-window-card:hover { border-color: var(--accent); color: var(--text); }
.maker .tab-interface .if-window-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--chrome-hi));
  color: var(--accent-text);
  font-weight: 600;
}
.maker .tab-interface .if-window-ico { font-size: 20px; line-height: 1; }

.maker .tab-interface .preview-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;   /* anchor for the slide-out side dock */
}

/* ── Slide-out right dock (World Map minimap, etc.) ── */
/* Lives INSIDE the (position:relative, overflow:auto) canvas frame so it
   ends where the bottom Windows dock begins. display-gated rather than
   translated off-screen — a transformed child would add phantom
   horizontal overflow to the scrollable frame. */
.maker .tab-interface .if-side-dock {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 240px;
  display: none;
  flex-direction: column;
  background: var(--chrome);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.28);
  z-index: 6;
}
.maker .tab-interface .if-side-dock.open { display: flex; animation: if-side-dock-in 0.16s ease; }
@keyframes if-side-dock-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.maker .tab-interface .if-side-dock-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.maker .tab-interface .if-side-dock-header span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-interface .if-dock-close {
  cursor: pointer; border: 0; background: transparent; color: var(--text-dim);
  font-size: 18px; line-height: 1; padding: 0 var(--sp-1);
}
.maker .tab-interface .if-dock-close:hover { color: var(--text); }
.maker .tab-interface .if-side-dock-body { padding: var(--sp-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
.maker .tab-interface .if-dock-minimap {
  background: var(--input-bg); border: 1px solid var(--border-lo); border-radius: var(--r);
  padding: var(--sp-3); display: flex; align-items: center; justify-content: center;
}
.maker .tab-interface .if-dock-minimap canvas { max-width: 100%; image-rendering: pixelated; }
.maker .tab-interface .if-dock-meta { font-size: var(--fs-4); color: var(--text-dim); }
.maker .tab-interface .if-dock-meta b { color: var(--text); }
/* Base look comes from .btn.btn-accent (consolidation 2026-08-11) —
   only the full-width dock placement stays local. */
.maker .tab-interface .if-dock-open-maps { width: 100%; }

/* ── UI Type selector (top of controls) ── */
.maker .tab-interface .if-uitype {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
/* Driven by the bottom Windows gallery now — kept in the DOM (hidden) for
   interface.js wiring. [hidden] must beat the display:flex above. */
.maker .tab-interface .if-uitype[hidden] { display: none; }
.maker .tab-interface .if-uitype label {
  font-size: var(--fs-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.maker .tab-interface .if-uitype select {
  appearance: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  padding: var(--sp-3) 28px var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-lo);
  border-radius: var(--r);
  background: var(--input-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23888'/></svg>") no-repeat right 10px center;
  color: var(--text);
  transition: border-color 0.15s;
}
.maker .tab-interface .if-uitype select:hover,
.maker .tab-interface .if-uitype select:focus { border-color: var(--accent); outline: none; }

/* ── Per-section controls mount ── */
.maker .tab-interface .if-controls:empty {
  display: none;
}

/* ── Preview frame ── reuses the shared .canvas-frame / .empty-state
   chrome from main.css. The status bar is ~800px wide; let it scale
   down to fit while staying pixel-crisp. */
.maker .tab-interface #if-preview-canvas {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* ── Section controls (per-section persistent container) ── */
.maker .tab-interface .if-section-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ── Status Bar: bar rows (current / max + progress slider) ── */
.maker .tab-interface .if-bar-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.maker .tab-interface .if-bar-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.maker .tab-interface .if-bar-label {
  width: 34px;
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--text-dim);
}
.maker .tab-interface .if-bar-cur,
.maker .tab-interface .if-bar-max {
  width: 64px;
  box-sizing: border-box;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-lo);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-4);
  font-variant-numeric: tabular-nums;
}
.maker .tab-interface .if-bar-cur:focus,
.maker .tab-interface .if-bar-max:focus { border-color: var(--accent); outline: none; }
.maker .tab-interface .if-bar-div { color: var(--text-dim); }
.maker .tab-interface .if-bar-slider,
.maker .tab-interface .if-stepper input[type="range"] { width: 100%; }

/* ── Quick presets + hint ── */
.maker .tab-interface .if-bar-presets {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.maker .tab-interface .if-bar-presets button {
  flex: 1;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-4);
  padding: var(--sp-2) 0;
  border: 1px solid var(--border-lo);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text-dim);
  transition: border-color .15s, color .15s;
}
.maker .tab-interface .if-bar-presets button:hover { border-color: var(--accent); color: var(--text); }
.maker .tab-interface .if-hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-3);
  line-height: 1.4;
  color: var(--text-dim);
}

/* ── Inventory: category tabs + add-search results ── */
.maker .tab-interface .inv-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.maker .tab-interface .inv-tabs button {
  flex: 1; cursor: pointer; font: inherit; font-size: var(--fs-3); padding: var(--sp-2) 0;
  border: 1px solid var(--border-lo); border-radius: var(--r);
  background: var(--input-bg); color: var(--text-dim);
}
.maker .tab-interface .inv-tabs button:hover { border-color: var(--accent); color: var(--text); }
.maker .tab-interface .inv-results {
  display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto;
  margin-top: var(--sp-2);
}
.maker .tab-interface .inv-result {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  font: inherit; font-size: var(--fs-4); text-align: left;
  padding: 3px var(--sp-2); border: 1px solid transparent; border-radius: var(--r);
  background: var(--input-bg); color: var(--text);
}
.maker .tab-interface .inv-result:hover { border-color: var(--accent); }
.maker .tab-interface .inv-result-ic { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex: 0 0 26px; }
.maker .tab-interface .inv-result-ic canvas { max-width: 26px; max-height: 26px; image-rendering: pixelated; }
.maker .tab-interface .inv-result-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-interface .inv-result-cat { font-size: var(--fs-2); color: var(--text-dim); }
.maker .tab-interface .inv-result-empty { color: var(--text-dim); font-size: var(--fs-4); padding: var(--sp-3) var(--sp-1); }

/* ── Checkbox row (e.g. Damage “Miss”) ── */
.maker .tab-interface .if-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-4);
  color: var(--text);
  cursor: pointer;
}
.maker .tab-interface .if-check input { margin: 0; }

/* Damage Type select reuses the bar-input look */
.maker .tab-interface #dmg-family,
.maker .tab-interface #ttip-slot,
.maker .tab-interface #ttip-job,
.maker .tab-interface #eq-char,
.maker .tab-interface #wm-map,
.maker .tab-interface #dlg-quest,
.maker .tab-interface #dlg-stage,
.maker .tab-interface #dlg-emotion {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-lo);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* ── Tooltip section: [Items|Skills] mode toggle ── */
.maker .tab-interface .if-mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-lo);
  border-radius: var(--r);
  overflow: hidden;
}
.maker .tab-interface .if-mode-toggle button {
  flex: 1;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-4);   /* design-system 2026-08-06: segmented @ fs-4 */
  padding: var(--sp-3) 0;
  border: 0;
  background: var(--input-bg);
  color: var(--text-dim);
  transition: background .15s, color .15s;
}
.maker .tab-interface .if-mode-toggle button + button { border-left: 1px solid var(--border-lo); }
.maker .tab-interface .if-mode-toggle button.active { background: var(--accent); color: #fff; }

/* ── Tooltip section: view-style toggle + gender filter ── */
.maker .tab-interface .if-view-row {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-1) 0;
}
.maker .tab-interface .if-view-row > span {
  font-size: var(--fs-3); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim);
}
.maker .tab-interface .if-view-toggle {
  display: flex; flex: 1; border: 1px solid var(--border-lo);
  border-radius: var(--r); overflow: hidden;
}
.maker .tab-interface .if-view-toggle button {
  flex: 1; cursor: pointer; font: inherit; font-size: var(--fs-4); padding: var(--sp-2) 0;
  border: 0; background: var(--input-bg); color: var(--text-dim);
}
.maker .tab-interface .if-view-toggle button + button { border-left: 1px solid var(--border-lo); }
.maker .tab-interface .if-view-toggle button.active { background: var(--accent); color: #fff; }
.maker .tab-interface .if-gender {
  display: flex; gap: var(--sp-4); margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-4); color: var(--text-dim);
}
.maker .tab-interface .if-gender label { display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
.maker .tab-interface .if-gender input { margin: 0; }

/* ── Tooltip section: search + icon grid ── */
.maker .tab-interface .if-search {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-2) var(--sp-4);                 /* match the shared .npc-search standard */
  margin: var(--sp-3) 0;
  border: 1px solid var(--border-lo);
  border-radius: var(--r);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-4);
}
.maker .tab-interface .if-search:focus { border-color: var(--accent); outline: none; }
.maker .tab-interface .if-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 36px);
  gap: var(--sp-1);
  max-height: 260px;
  overflow-y: auto;
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--input-bg);
}
.maker .tab-interface .if-cell {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--chrome-lo);
  overflow: hidden;
}
.maker .tab-interface .if-cell canvas { max-width: 32px; max-height: 32px; image-rendering: pixelated; }
.maker .tab-interface .if-cell:hover { border-color: var(--border-lo); }
.maker .tab-interface .if-cell.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.maker .tab-interface .if-grid-empty { grid-column: 1/-1; text-align: center; color: var(--text-dim); font-size: var(--fs-4); padding: var(--sp-6) 0; }

/* Quest browser — picker button (controls) + side-dock searchable rows */
.maker .tab-interface .if-quest-pick {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-lo); border-radius: var(--r);
  background: var(--chrome-lo); color: var(--text); cursor: pointer; font-size: var(--fs-4); text-align: left;
}
.maker .tab-interface .if-quest-pick:hover { border-color: var(--accent); }
.maker .tab-interface .if-quest-pick > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-interface .if-quest-pick-go { color: var(--accent); font-weight: 600; flex: 0 0 auto; }
.maker .tab-interface .if-quest-note { font-size: var(--fs-3); color: var(--text-dim); margin: -4px 0 2px; }
.maker .tab-interface .if-quest-list { display: flex; flex-direction: column; gap: 3px; }
.maker .tab-interface .if-quest-row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--r);
  background: var(--chrome-lo); color: var(--text); cursor: pointer; text-align: left;
}
.maker .tab-interface .if-quest-row:hover { border-color: var(--border-lo); }
.maker .tab-interface .if-quest-row.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.maker .tab-interface #dlg-browse-mode { margin-bottom: var(--sp-3); }
.maker .tab-interface .if-select {
  width: 100%; margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-3); font: inherit; font-size: 13px;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border-lo); border-radius: var(--r); cursor: pointer;
}
.maker .tab-interface .if-quest-back {
  width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1);
  border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-4);
  font-weight: 600; cursor: pointer; border-radius: var(--r);
}
.maker .tab-interface .if-quest-back:hover { background: var(--chrome-lo); }
.maker .tab-interface .if-quest-thumb {
  flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.06); border-radius: var(--r); overflow: hidden;
}
.maker .tab-interface .if-quest-thumb canvas { max-width: 30px; max-height: 30px; image-rendering: pixelated; }
.maker .tab-interface .if-quest-main { flex: 1; min-width: 0; }
.maker .tab-interface .if-quest-name { font-size: var(--fs-4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maker .tab-interface .if-quest-sub { font-size: var(--fs-3); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Tooltip section: skill level row ── */
.maker .tab-interface .if-level-row {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.maker .tab-interface .if-level-row button {
  cursor: pointer; font: inherit; font-size: var(--fs-4);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border-lo);
  border-radius: var(--r); background: var(--input-bg); color: var(--text);
}
.maker .tab-interface .if-level-row button:hover { border-color: var(--accent); }
.maker .tab-interface .if-level-row #ttip-lv-label {
  flex: 1; text-align: center; font-size: var(--fs-4); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ── Tooltip section: scroll-simulation ── */
.maker .tab-interface .if-scrolls { margin-top: var(--sp-5); }
.maker .tab-interface .if-scrolls .cv-shell-section-header { margin-bottom: var(--sp-2); }
.maker .tab-interface .if-scroll-pills {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2);
}
.maker .tab-interface .if-scroll-pills button {
  cursor: pointer; font: inherit; font-size: var(--fs-3);
  padding: 3px var(--sp-3); border: 1px solid var(--border-lo);
  border-radius: 999px; background: var(--input-bg); color: var(--text-dim);
}
.maker .tab-interface .if-scroll-pills button:hover { border-color: var(--accent); color: var(--text); }
.maker .tab-interface .if-scroll-tiers {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); margin-bottom: var(--sp-2);
}
.maker .tab-interface .if-scroll-tiers button {
  display: flex; flex-direction: column; align-items: flex-start;
  cursor: pointer; font: inherit; font-size: var(--fs-4); font-weight: 600;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-lo);
  border-radius: var(--r); background: var(--input-bg); color: var(--text);
}
.maker .tab-interface .if-scroll-tiers button span { font-weight: 400; font-size: var(--fs-2); color: var(--text-dim); margin-top: 2px; }
.maker .tab-interface .if-scroll-tiers button:hover:not(:disabled) { border-color: var(--accent); }
.maker .tab-interface .if-scroll-tiers button:disabled { opacity: 0.4; cursor: not-allowed; }
.maker .tab-interface .if-scroll-foot {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-3); color: var(--text-dim);
}
.maker .tab-interface .if-scroll-foot span { flex: 1; font-variant-numeric: tabular-nums; }
.maker .tab-interface .if-scroll-foot button {
  cursor: pointer; font: inherit; font-size: var(--fs-3); padding: 3px var(--sp-3);
  border: 1px solid var(--border-lo); border-radius: var(--r); background: var(--input-bg); color: var(--text);
}
.maker .tab-interface .if-scroll-foot button:hover:not(:disabled) { border-color: var(--accent); }
.maker .tab-interface .if-scroll-foot button:disabled { opacity: 0.4; cursor: not-allowed; }
/* slot-usage pips + applied-upgrade badge */
.maker .tab-interface .if-scroll-ups {
  margin-left: auto; font-size: var(--fs-2); font-weight: 700; color: #f2b24e;
  font-variant-numeric: tabular-nums;
}
.maker .tab-interface .if-scroll-slots { flex: 1; display: flex; align-items: center; gap: 3px; }
.maker .tab-interface .if-scroll-slots i {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--border-lo); background: transparent; box-sizing: border-box;
}
.maker .tab-interface .if-scroll-slots i.on { background: var(--accent); border-color: var(--accent); }

/* ── Tooltip section: Scenario (preview character + mockup overrides) ── */
.maker .tab-interface .if-scenario { margin-top: var(--sp-5); }
.maker .tab-interface .if-scenario-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.maker .tab-interface .if-scenario-note { margin: 0; font-size: var(--fs-3); color: var(--text-dim); line-height: 1.35; }
.maker .tab-interface .if-scenario-sub {
  font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin-top: 2px;
}
/* meets-requirements toggle switch */
/* (.if-toggle pill retired — design-system 2026-08-06: settings rows use
   the global Maps-style .check-row + .toggle-switch, switch-left, compact,
   off = dimmed label.) */
.maker .tab-interface .if-scenario-hint { margin: -3px 0 0; font-size: var(--fs-2); color: var(--text-dim); line-height: 1.3; }
.maker .tab-interface .if-scenario-name {
  width: 100%; box-sizing: border-box; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-lo); border-radius: var(--r); background: var(--input-bg);
  color: var(--text); font: inherit; font-size: var(--fs-4);
}
.maker .tab-interface .if-scenario-name:focus { border-color: var(--accent); outline: none; }
.maker .tab-interface .if-scenario-cash { font-size: var(--fs-4); }
/* Scenario reset is a plain .btn.btn--sm now (consolidation 2026-08-11). */

/* ── UI sounds picker (Sound/UI.img) — tab-wide, under the section controls ── */
.maker .tab-interface .if-uisounds {
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border-lo);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.maker .tab-interface .if-uisound-list { max-height: 200px; overflow-y: auto; }
.maker .tab-interface #if-uisound-dl { align-self: flex-start; }
/* Header row for the UI-sound picker: title + "All" (unscope) toggle. */
.maker .tab-interface .if-uisound-head { display: flex; align-items: center; justify-content: space-between; }
.maker .tab-interface .if-uisound-scope {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-3); font-weight: 400; color: var(--text-dim); cursor: pointer;
}

/* Chat Balloon section host (Phase 5) — the relocated Chat pane fills the preview
   area between the toolbar and the Windows switcher. _setChatView toggles display. */
.maker .tab-interface .if-chat-host {
  flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden;
  flex-direction: column;
}
/* The relocated pane lost its .tab-pane sizing — make it fill the host. */
.maker .tab-interface .if-chat-host > .tab-chat-bubble {
  flex: 1 1 auto; min-height: 0; width: 100%; display: flex;
}

/* ── Browse-dock pane (UX-polish P3) — per-window-type hint pane.
   The old emoji card grid (.if-window-grid/.if-window-card) was
   replaced by the shared dock's rail. ── */
.maker .tab-interface .if-dock-pane { padding: var(--sp-6) 18px; }
.maker .tab-interface .if-dock-pane-title { font-weight: 700; font-size: var(--fs-4); color: var(--text); }
.maker .tab-interface .if-dock-pane-hint {
  margin-top: var(--sp-1); font-size: var(--fs-3); color: var(--text-dim);
  max-width: 480px; line-height: 1.5;
}

/* Balloon-style browser inside the dock pane (re-homed, R5). */
.maker .tab-interface .if-dock-pane-chat .style-grid { padding: var(--sp-3) 0; }

/* Shared Export slot (bug FV8CGJ) — the active section's Export block is
   relocated here by interface.js. margin-top:auto pins it to the rail's
   bottom (bottom-left of the window), matching every other tab's layout;
   with an overflowing rail it degrades to sitting after the UI sounds. */
.maker .tab-interface .if-export-host { margin-top: auto; }

/* ── Interface-category window gallery (VF3YCP) — one thumbnail card per
   classic UI window in the dock pane; click activates the window (the
   left rail swaps to its controls). Chrome art renders pixelated and is
   letterboxed into a fixed card so wide (Status Bar) and tall (Storage)
   windows read at the same size. ── */
.maker .tab-interface .if-win-gallery {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-1);
}
.maker .tab-interface .if-win-thumb {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  width: 132px; padding: var(--sp-3) var(--sp-2) var(--sp-3);
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
}
.maker .tab-interface .if-win-thumb:hover { border-color: var(--accent, #3aa0c8); }
.maker .tab-interface .if-win-thumb.active {
  border-color: var(--accent, #3aa0c8);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #3aa0c8) 30%, transparent);
  background: var(--tab-active);
}
.maker .tab-interface .if-win-thumb-art {
  display: flex; align-items: center; justify-content: center;
  width: 116px; height: 74px; overflow: hidden;
}
.maker .tab-interface .if-win-thumb-art canvas {
  max-width: 100%; max-height: 100%;
  image-rendering: pixelated;
}
.maker .tab-interface .if-win-thumb-label {
  font-size: var(--fs-3); color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Chat Balloon in the STANDARD shell (59JXWN follow-up) — the chat
   controls column re-homes into the shared left rail (full height), the
   chat preview column swaps in where the shared preview frame sits. The
   wrappers keep .tab-chat-bubble so chat-bubble.css keeps matching;
   these overrides strip the pane-level chrome that would double up. ── */
.maker .tab-interface .if-chat-rail.tab-chat-bubble .controls-col {
  width: auto; flex: none;
  border-right: 0; padding: 0;
  background: transparent;
  overflow: visible;
}
.maker .tab-interface .if-chat-stage {
  display: flex; flex: 1 1 auto; min-width: 0; min-height: 0;
}
.maker .tab-interface .if-chat-stage .preview-col { flex: 1 1 auto; min-width: 0; min-height: 0; }

/* ── Tooltip Items/Skills dock browse (4NPS7V) — 3-panel layout:
   slot/job list · toolbar (search+filters / level stepper) · gallery.
   Fills the dock pane and scrolls each panel independently. ── */
.maker .tab-interface .ttip-dock {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0;
  height: 100%;
  min-height: 0;
}
.maker .tab-interface .ttip-dock-list {
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;
  border-right: 1px solid var(--border);
  padding: var(--sp-2) 0;
}
.maker .tab-interface .ttip-dock-list-group {
  flex: 0 0 auto;   /* flex children in a scrolling column must NOT shrink */
  font-size: var(--fs-2); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim);
  padding: var(--sp-3) var(--sp-6) 3px;
}
.maker .tab-interface .ttip-dock-row {
  flex: 0 0 auto;   /* ditto — unshrunk rows stay readable + clickable */
  display: block; text-align: left;
  padding: var(--sp-2) var(--sp-6); border: 0; background: none;
  font-size: var(--fs-4); color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}
.maker .tab-interface .ttip-dock-row:hover { background: var(--tab-active); }
.maker .tab-interface .ttip-dock-row.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-weight: 600;
}
.maker .tab-interface .ttip-dock-main {
  display: flex; flex-direction: column;
  min-height: 0; padding: var(--sp-3) var(--sp-5);
  gap: var(--sp-3);
}
.maker .tab-interface .ttip-dock-toolbar {
  display: flex; align-items: center; gap: var(--sp-6); flex: 0 0 auto;
}
.maker .tab-interface .ttip-dock-toolbar .if-search { max-width: 260px; margin: 0; }
/* The dock gallery scrolls in the remaining pane height (the rail cap
   was 260px — here the resizable dock owns the height). */
.maker .tab-interface .ttip-dock-grid {
  flex: 1 1 auto; max-height: none; min-height: 0;
}

/* Layers menu rows (4NPS7V P3). */
.maker .tab-interface .ttip-layers-body { display: flex; flex-direction: column; gap: 2px; }
.maker .tab-interface .ttip-layer-row { font-size: var(--fs-4); padding: 2px 0; }

/* Back bar atop a window-owned dock pane (World Map thumbnails). */
.maker .tab-interface .if-dock-back {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) 18px; border: 0; border-bottom: 1px solid var(--border);
  background: var(--tab-active); color: var(--accent);
  font-size: var(--fs-3); font-weight: 600; cursor: pointer;
}
.maker .tab-interface .if-dock-back:hover { filter: brightness(1.05); }

/* Compact gallery variant — Name Tag styles are small plates, not windows. */
.maker .tab-interface .if-win-gallery.nt-compact .if-win-thumb {
  width: auto; min-width: 64px; max-width: 180px; padding: var(--sp-2) var(--sp-4) var(--sp-2);
}
.maker .tab-interface .if-win-gallery.nt-compact .if-win-thumb-art {
  width: auto; height: 34px; max-width: 160px;
}

/* ── NPC Quests dock browser (Derek feedback round 2) — mode + search
   toolbar over a wrapping quest-card grid, filling the dock pane. ── */
.maker .tab-interface .dlg-dock-browser {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  padding: var(--sp-3) var(--sp-5); gap: var(--sp-3);
}
.maker .tab-interface .dlg-dock-toolbar {
  display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto;
}
.maker .tab-interface .dlg-dock-toolbar .if-select { max-width: 170px; }
.maker .tab-interface .dlg-dock-toolbar .if-search { max-width: 260px; margin: 0; }
.maker .tab-interface .dlg-dock-toolbar .if-quest-note { margin-left: auto; }
.maker .tab-interface .dlg-dock-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-1); align-content: start;
  max-height: none;
}
/* The static current-quest label (rail) — the pick happens in the dock. */
.maker .tab-interface .if-quest-pick.is-static { cursor: default; }

/* ── In-stage click-to-edit overlay (notes round 3) ── */
.maker .tab-interface .if-stage-edit {
  position: absolute; z-index: 7;
  box-sizing: border-box;
  font: 11px Dotum, "MS Sans Serif", sans-serif;
  padding: 0 3px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: #fff; color: #000;
  outline: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* ── Tooltip layers panel (right side-dock, WC9AGS) — eye/solo rows. ── */
.maker .tab-interface .ttip-layer-panel { display: flex; flex-direction: column; gap: 2px; }
.maker .tab-interface .ttip-layer-prow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r);
}
.maker .tab-interface .ttip-layer-prow:hover { background: var(--tab-active); }
.maker .tab-interface .ttip-layer-prow.is-dim .ttl-name { opacity: 0.45; }
.maker .tab-interface .ttl-name { flex: 1; font-size: var(--fs-4); color: var(--text); }
/* 9YYTXU: same controls as the Characters/Maps panels — SF2_ICONS eye
   SVGs + the 12px circle solo (outline → accent-filled). */
.maker .tab-interface .ttl-eye {
  cursor: pointer; border: 0; background: none;
  width: 22px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mid); border-radius: var(--r);
}
.maker .tab-interface .ttl-eye:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.maker .tab-interface .ttl-eye.is-off { color: var(--border-lo); }
.maker .tab-interface .ttl-solo {
  cursor: pointer; padding: 0; flex: 0 0 auto;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--text-dim); background: transparent;
}
.maker .tab-interface .ttl-solo.is-on { background: var(--accent); border-color: var(--accent); }

/* Enchant scroll one-shot animation overlay (WC9AGS). */
.maker .tab-interface .ttip-ench-anim {
  position: absolute; z-index: 8;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Layer-panel thumbnails (parity pass) — content crop on a checker card. */
.maker .tab-interface .ttl-thumb {
  flex: 0 0 auto; width: 44px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-lo); border-radius: var(--r);
  background: var(--input-bg)
    repeating-conic-gradient(rgba(127,127,127,0.14) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px;
  overflow: hidden;
}
.maker .tab-interface .ttl-thumb canvas { image-rendering: pixelated; }
.maker .tab-interface .ttip-layer-prow { touch-action: none; }

/* Scroll tier cards lead with the in-game scroll icon. */
.maker .tab-interface .ttip-scroll-ic {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 auto;
}
.maker .tab-interface .ttip-scroll-ic canvas { image-rendering: pixelated; }