*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}

:root {
  --shell-bg: #080e1a;
  --sidebar-bg: #0d1424;
  --card-bg: #111d2e;
  --border: rgba(255, 255, 255, 0.09);
  --text: #e8edf5;
  --text-muted: #e7ecf5;
  --text-dim: #7a8ea8; /* raised from #4a5a70 — meets 4.5:1 on dark bg */
  --accent: #5b6ef5;
  --accent-hover: #4757e0;
  --danger: #ef4444;
  --app-primary: #5b6ef5;
  --app-secondary: #8b5cf6;
  --app-bg: #0f172a;
  --app-navbar: #0d1424;
  --app-text: #e8edf5;
  /* Dynamic vars — overridden per-JSON in JS */
  --topbar-name-color: #5b6ef5;
  --hero-bg: rgba(255, 255, 255, 0.05);
  --app-border: rgba(255, 255, 255, 0.09);
  /* --app-primary-font and --app-secondary-font set by JS; undefined = fallback active */
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--shell-bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh; /* real mobile: 100vh includes space behind the collapsible
     address bar, so it overshoots the visible viewport — combined with the
     overflow:hidden below, inner panels never get a correct scrollable
     height and their own overflow-y:auto stops working. */
  display: flex;
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  width: 200px;
  min-width: 200px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.sidebar-header {
  padding: 18px 14px 14px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.sidebar-app-version {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--accent);
  opacity: 0.7;
  margin-top: 2px;
  text-align: center;
}

.btn-paste {
  width: 100%;
  padding: 9px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}
.btn-paste:hover {
  background: var(--accent-hover);
}

.sidebar-section-title {
  padding: 14px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}

/* ── KEYBOARD HINTS ── */
.sidebar-shortcuts {
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
  flex-shrink: 0;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
.shortcut-row kbd {
  font-size: 10px;
  font-family: "SF Mono", "Cascadia Code", monospace;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.shortcut-row span {
  font-size: 10px;
  color: var(--text-muted);
}

.history-item {
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
}
.history-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.history-item.active {
  background: rgba(91, 110, 245, 0.13);
}

.history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.history-info {
  flex: 1;
  min-width: 0;
}
.history-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-desc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.history-del {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  transition: all 0.12s;
  flex-shrink: 0;
}
.history-item:hover .history-del {
  opacity: 1;
}
.history-del:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.history-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}

/* ── MAIN ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── AI LOADER ── */
.ai-loader {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.ai-loader.active {
  opacity: 1;
}
.ai-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 26, 0.55);
}
.ai-loader-spinner {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(91, 110, 245, 0.18);
  border-top-color: #5b6ef5;
  box-shadow: 0 0 18px rgba(91, 110, 245, 0.35);
  animation: ai-spin 0.75s linear infinite;
}
@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}
.ai-loader-label {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
  text-shadow:
    0 0 16px rgba(91, 110, 245, 0.9),
    0 0 32px rgba(91, 110, 245, 0.5);
}
.ai-loader.active .ai-loader-label {
  opacity: 1;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.topbar-name {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  transition: color 0.4s;
}
.topbar-version {
  font-size: 11px;
  color: var(--app-navbar);
  opacity: 0.6;
  margin-left: 4px;
  flex-shrink: 0;
}
.topbar-spacer {
  flex: 1;
}

/* ── EMPTY STATE ── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px;
}
.empty-icon {
  font-size: 44px;
  opacity: 0.2;
}
.empty-title {
  font-size: 19px;
  font-weight: 600;
}
.empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 340px;
  line-height: 1.6;
}
.btn-secondary {
  padding: 9px 22px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* ── APP VIEW ── */
.app-view {
  flex: 1;
  overflow-y: auto;
  background: var(--app-bg);
  transition: background 0.4s;
}

/* ── SPLIT LAYOUT ── */
.main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.editor-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  /* Fixed UI colors — not essence-themed */
  --app-primary: #5b6ef5;
  --app-secondary: #8b5cf6;
  --app-bg: #0e1117;
  --app-navbar: #151b25;
  --app-text: rgba(255, 255, 255, 0.87);
  --app-border: rgba(255, 255, 255, 0.08);
  --hero-bg: rgba(255, 255, 255, 0.04);
}
.main-body.split-mode {
  flex-direction: row;
}
.main-body.split-mode .editor-half {
  border-right: 2px solid rgba(255, 255, 255, 0.08);
}
/* Layout override: editor full-width */
.main-body.split-mode.layout-editor #viewerPanel {
  display: none;
}
.main-body.split-mode.layout-editor .editor-half {
  border-right: none;
}
/* Layout override: viewer full-width */
.main-body.split-mode.layout-viewer .editor-half {
  display: none;
}
#viewerPanel {
  display: none;
}
.main-body.split-mode #viewerPanel {
  display: flex;
  flex: 1;
  min-width: 0;
  background: #fff;
  padding-top: 20px;
  position: relative;

  /* ── ViewerPanel light-theme token set ───────────────────────────── */
  --vp-bg: #ffffff;
  --vp-surface-1: rgba(0, 0, 0, 0.02);
  --vp-surface-2: rgba(0, 0, 0, 0.04);
  --vp-surface-3: rgba(0, 0, 0, 0.07);
  --vp-border: rgba(0, 0, 0, 0.09);
  --vp-border-strong: rgba(0, 0, 0, 0.14);
  --vp-border-dashed: rgba(0, 0, 0, 0.12);
  --vp-text: #1e293b;
  --vp-text-muted: #4b5563;
  --vp-text-dim: #94a3b8;
  --vp-primary: var(--app-primary, #5b6ef5);
  --vp-radius: 6px;
  --vp-danger: #ef4444;
  --vp-success: #22c55e;
  --vp-warning: #f59e0b;

  /* Override inherited dark-theme root vars with light equivalents */
  --card-bg: #f8fafc;
  --border: var(--vp-border);
  --text: var(--vp-text);
  --text-muted: var(--vp-text-muted);
  --text-dim: var(--vp-text-dim);

  /* Template inline-style vars (used by promptjson rendered content) */
  --muted: var(--vp-text-muted);
  --white: var(--vp-bg);
  --radius: var(--vp-radius);
}

.hero {
  padding: 28px 28px 0;
}
.hero-intro {
  /* background uses --hero-bg (set per-JSON in JS) so it always pairs with --app-text */
  background: var(--hero-bg);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  padding: 24px 28px;
  line-height: 1.7;
  font-size: 14px;
  color: var(--app-text);
}
.hero-intro h1,
.hero-intro h2 {
  color: var(--app-primary);
  margin-bottom: 10px;
  font-size: 1.3em;
}
.hero-intro p {
  margin-bottom: 8px;
  color: var(--app-text);
  opacity: 0.88;
}
.hero-intro strong {
  color: var(--app-text);
}

/* ── TABS ── */
.tabs {
  padding: 20px 28px 0;
}

.tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 20px;
}
.tab-btn {
  padding: 7px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.tab-btn:hover {
  color: var(--text);
}
.tab-btn.active {
  color: var(--app-primary);
  border-bottom-color: var(--app-primary);
}

.overview-subtitle {
  font-size: 13px;
  color: var(--app-text);
  line-height: 1.5;
  opacity: 0.85;
  padding-bottom: 20px;
}

.tab-panel {
  display: none;
  padding-bottom: 40px;
}
.tab-panel.active {
  display: block;
}

/* ── CARDS ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.card-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── OVERVIEW ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.stat-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--app-primary);
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.swatch-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.swatch-desc {
  font-size: 9px;
  opacity: 0.8;
}

/* ── PERSONA ── */
.persona-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--app-primary);
  border-radius: 12px;
  padding: 22px 24px;
  transition: border-color 0.4s;
}
.persona-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
  white-space: pre-wrap;
}
.assistant-hdr {
  margin-bottom: 10px;
}
.assistant-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--app-primary);
  margin-bottom: 3px;
}
.assistant-slogan {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.assistant-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.assistant-meta-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── ViewerPanel: override dark-theme hard-coded colours → --vp-* tokens ── */
#viewerPanel .swatch {
  background: var(--vp-surface-1);
}
#viewerPanel .swatch-dot {
  border-color: var(--vp-border);
}
#viewerPanel .section-hdr:hover {
  background: var(--vp-surface-1);
}
#viewerPanel .step-hdr:hover {
  background: var(--vp-surface-1);
}
#viewerPanel .section-hint {
  background: var(--vp-surface-2);
}
#viewerPanel .step-body {
  background: var(--vp-surface-2);
}
#viewerPanel .step-fn {
  background: var(--vp-surface-2);
}
#viewerPanel .step-hint {
  background: var(--vp-surface-2);
}
#viewerPanel .el-opts {
  background: var(--vp-surface-1);
}
#viewerPanel .el-opt-toggle {
  background: var(--vp-surface-2);
}
#viewerPanel .el-value-pill {
  background: var(--vp-surface-3);
}
#viewerPanel .el-item {
  background: var(--vp-surface-1);
}
#viewerPanel .entity-field {
  background: var(--vp-surface-1);
}

/* ── SECTIONS ACCORDION ── */
.section-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.section-hdr {
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  user-select: none;
  transition: background 0.12s;
}
.section-hdr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.section-num {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--app-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.4s;
}
.section-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.section-meta {
  font-size: 11px;
  color: var(--text-dim);
}
.chevron {
  color: var(--text-dim);
  font-size: 10px;
  transition: transform 0.2s;
}
.section-item.open > .section-hdr .chevron {
  transform: rotate(180deg);
}
.step-item.open > .step-hdr .chevron {
  transform: rotate(180deg);
}

.section-body {
  display: none;
  border-top: 1px solid var(--border);
}
.section-item.open .section-body {
  display: block;
}

.section-desc {
  padding: 14px 18px 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.section-hint {
  margin-top: 8px;
  font-size: 11px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border-left: 2px solid var(--app-primary);
  color: var(--text-muted);
  transition: border-color 0.4s;
}

/* ── STEPS ── */
.step-item {
  border-bottom: 1px solid var(--border);
}
.step-item:last-child {
  border-bottom: none;
}

.step-hdr {
  padding: 11px 18px 11px 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
}
.step-hdr:hover {
  background: rgba(255, 255, 255, 0.02);
}
.step-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-req {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.badge-opt {
  background: rgba(122, 142, 168, 0.18);
  color: #94a3b8;
}
.badge-pro {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.badge-combined {
  background: rgba(20, 184, 166, 0.15);
  color: #2dd4bf;
}
.badge-multi {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
}
.badge.ef-toggle {
  cursor: pointer;
  outline: 1.5px dashed var(--app-primary);
  outline-offset: 2px;
}
.badge.ef-toggle:hover {
  opacity: 0.75;
}
.badge.badge--inactive {
  opacity: 0.3;
}

.step-body {
  display: none;
  padding: 12px 18px 14px 44px;
  background: rgba(0, 0, 0, 0.14);
}
.step-item.open .step-body {
  display: block;
}
.step-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
}
.step-fn {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}
.step-hint {
  margin-top: 8px;
  font-size: 11px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border-left: 2px solid var(--app-secondary);
  color: var(--text-muted);
}
.step-purpose {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-style: italic;
}
.el-purpose {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
  font-style: italic;
}
.el-opts {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.el-opt-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
}
.el-opt-label {
  min-width: 82px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-weight: 500;
  padding-top: 2px;
}
.el-opt-field {
  flex: 1;
  color: var(--text-muted);
  word-break: break-word;
}
.el-opt-field--wrap {
  white-space: pre-wrap;
}
.el-opt-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 10px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.el-opt-toggle--on {
  background: rgba(34, 197, 94, 0.15);
  border-color: #4ade80;
  color: #4ade80;
}
.el-model-picks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.el-model-pick {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.el-model-pick:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent);
  color: var(--accent);
}
.el-model-pick--active {
  background: rgba(91, 110, 245, 0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.el-value-pill {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ── DRAG-AND-DROP ── */
.drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.12s;
  user-select: none;
}
.drag-handle:hover {
  opacity: 1;
  color: var(--text-muted);
}
.drag-handle:active {
  cursor: grabbing;
}
.dd-dragging {
  opacity: 0.35;
}
.section-item.drag-before {
  border-top: 2px solid var(--accent);
}
.section-item.drag-after {
  border-bottom: 2px solid var(--accent);
}
.step-item.drag-before {
  border-top: 2px solid var(--accent);
}
.step-item.drag-after {
  border-bottom: 2px solid var(--accent);
}
.el-item.drag-before {
  border-top: 2px solid var(--accent);
}
.el-item.drag-after {
  border-bottom: 2px solid var(--accent);
}

/* ── ELEMENTS ── */
.elements-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.el-item {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.el-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.el-body {
  flex: 1;
  min-width: 0;
}
.el-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.el-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.45;
}
.el-key {
  font-size: 10px;
  font-family: "SF Mono", "Cascadia Code", monospace;
  color: var(--app-primary);
  background: rgba(91, 110, 245, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 4px;
  display: inline-block;
  transition:
    color 0.4s,
    background 0.4s;
}

/* ── ENTITIES ── */
.entity-name-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.entity-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--app-primary);
  font-family: "SF Mono", monospace;
  transition: color 0.4s;
}
.entity-field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 5px;
  font-size: 12px;
  margin-bottom: 3px;
}
.entity-key {
  font-family: monospace;
  color: var(--text-muted);
  min-width: 130px;
  flex-shrink: 0;
}
.entity-key-input {
  width: 130px;
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 11px;
}
.entity-val {
  color: var(--text-dim);
  font-style: italic;
  word-break: break-all;
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(5px);
}
.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  width: 540px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.modal-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.modal-textarea {
  width: 100%;
  min-height: 200px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: 11.5px;
  padding: 12px;
  resize: vertical;
  margin-bottom: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.modal-textarea:focus {
  border-color: var(--accent);
}

.modal-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.modal-input:focus {
  border-color: var(--accent);
}
.modal-input::placeholder {
  color: var(--text-muted);
}

.modal-err {
  font-size: 12px;
  color: var(--danger);
  margin-bottom: 10px;
  display: none;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.btn-cancel {
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.13s;
}
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}
.btn-primary {
  padding: 8px 18px;
  background: var(--accent);
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s;
}
.btn-primary:hover {
  background: var(--accent-hover);
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 22px;
  left: 280px;
  padding: 10px 18px;
  background: var(--card-bg);
  border: 1px solid var(--app-navbar);
  border-radius: 9px;
  font-size: 13px;
  transform: translateY(70px);
  opacity: 0;
  transition: all 0.25s;
  z-index: 200;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast.toast-dim {
  color: var(--text-muted);
}
.toast.toast-warn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

/* ── EDIT MODE ── */
.ef {
  outline: 1.5px dashed var(--app-primary);
  border-radius: 3px;
  padding: 1px 3px;
  cursor: text;
  user-select: text !important;
  transition: outline-color 0.15s;
}
.ef:focus {
  outline: 2px solid var(--app-primary);
  background: rgba(91, 110, 245, 0.07);
  outline-offset: 1px;
}

.btn-edit-mode {
  margin-left: auto;
  padding: 7px 15px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.btn-edit-mode:hover {
  background: rgba(0, 0, 0, 0.05);
}
.btn-edit-mode.active {
  background: rgba(91, 110, 245, 0.18);
  border-color: var(--app-primary);
  color: var(--app-primary);
}
.edit-mode .topbar {
  border-bottom-color: var(--app-primary);
}

.editable-color {
  cursor: pointer;
  transition:
    outline 0.15s,
    transform 0.15s;
}
.editable-color:hover {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
  transform: scale(1.2);
}
#fontDisplay .editable-color:hover {
  transform: none;
}

.btn-add-step {
  display: block;
  width: calc(100% - 36px);
  margin: 10px 18px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--app-primary);
  color: var(--app-primary);
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.65;
  transition:
    opacity 0.15s,
    background 0.15s;
}
.btn-add-step:hover {
  opacity: 1;
  background: rgba(91, 110, 245, 0.08);
}

.btn-edit-intro {
  display: none;
  margin-top: 10px;
  padding: 5px 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--app-text);
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.14s;
}
.btn-edit-intro:hover {
  background: rgba(255, 255, 255, 0.12);
}
.edit-mode .btn-edit-intro {
  display: inline-block;
}

/* ── HEADER ACTIONS (edit mode — sections & steps) ── */
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── ELEMENT ACTIONS (edit mode) ── */
.el-actions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.el-confirm {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 8px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
}
.el-confirm-msg {
  font-size: 11px;
  color: var(--danger);
  flex: 1;
}
.btn-el-action {
  padding: 3px 8px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s;
}
.btn-el-action:hover {
  background: rgba(255, 255, 255, 0.1);
}
.btn-el-del {
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger);
}
.btn-el-del:hover {
  background: rgba(239, 68, 68, 0.1);
}
.btn-el-del-confirm {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.btn-el-del-confirm:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* ── GLOBAL DATA TAB — add forms ── */
/* ── SCOPE MAP ── */
.scope-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}
.scope-row:last-child {
  border-bottom: none;
}
.scope-key {
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: 11px;
  color: var(--app-primary);
  background: rgba(91, 110, 245, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.13s,
    color 0.4s;
}
.scope-key:hover {
  background: rgba(91, 110, 245, 0.22);
}
.scope-path {
  font-size: 11px;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
}
.scope-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.btn-add-inline {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.btn-add-inline:hover {
  border-color: var(--app-primary);
  color: var(--app-primary);
}
.btn-add-entity {
  margin-top: 18px;
}

.add-inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.add-input {
  flex: 1;
  min-width: 80px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  font-family: "SF Mono", "Cascadia Code", monospace;
  outline: none;
  transition: border-color 0.15s;
}
.add-input:focus {
  border-color: var(--app-primary);
}

/* ── EXPORT JSON ── */
.btn-export-json {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  border-radius: 7px;
  font-size: 13px;
  font-family: "SF Mono", "Cascadia Code", monospace;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.btn-export-json:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ── UNDO / REDO ── */
.btn-nav {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    opacity 0.15s;
}
.btn-nav:not(:disabled):hover {
  background: rgba(0, 0, 0, 0.05);
}
.btn-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── REVERT ── */
.btn-revert {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.btn-revert:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}
/* ── VALIDATE GROUP (button + auto-fix toggle) ── */
.validate-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}
@keyframes val-shake {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-5px);
  }
  30% {
    transform: translateX(5px);
  }
  45% {
    transform: translateX(-4px);
  }
  60% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}
.validate-group.shaking {
  animation: val-shake 0.55s ease;
}

.btn-validate {
  padding: 7px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.btn-validate:hover {
  background: rgba(0, 0, 0, 0.05);
}
.btn-validate.autofix-on {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.07);
  color: #0d9966;
}
.btn-validate.autofix-on:hover {
  background: rgba(16, 185, 129, 0.13);
}
.val-check-icon {
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  transition:
    color 0.18s,
    opacity 0.18s;
  user-select: none;
}
.val-check-icon:hover {
  opacity: 0.7;
}
.btn-validate:not(.autofix-on) .val-check-icon {
  color: #bbb;
  opacity: 0.55;
}
.val-validate-label {
  pointer-events: none;
}

/* ── ISSUE BUBBLE ── */
.val-issue-bubble {
  position: fixed;
  top: 62px;
  right: 24px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(239, 68, 68, 0.15);
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.22s,
    transform 0.22s;
}
.val-issue-bubble::before {
  content: "⚠ ";
  color: #f87171;
}
.val-issue-bubble.val-issue-bubble-in {
  opacity: 1;
  transform: translateY(0);
}
.val-issue-bubble.val-issue-bubble-out {
  opacity: 0;
  transform: translateY(-6px);
}

/* ── AUTO-FIX RESULT BANNER ── */
.val-autofix-banner {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.val-autofix-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.val-autofix-fail {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ── REMOTE BUTTONS ── */
.btn-remote-save {
  padding: 7px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.btn-remote-save:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}
.btn-remote-save:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Unsaved-changes reminder: recolor the button itself rather than adding a
   separate label — border/text/icon all share this one color since the
   cloud icon is inline text content, not a separate element. */
.btn-remote-save.remote-save-dirty {
  color: #d97706;
  border-color: #d97706;
  font-weight: 600;
}
.btn-remote-save.remote-save-dirty:hover:not(:disabled) {
  background: rgba(217, 119, 6, 0.08);
}

.btn-remote-refresh {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-muted, #888);
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.btn-remote-refresh:hover:not(:disabled) {
  color: var(--text);
}
.btn-remote-refresh:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── VALIDATION ── */
.val-summary {
  display: flex;
  gap: 12px;
  padding: 12px 0 16px;
  flex-wrap: wrap;
}
.val-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.val-chip-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.val-chip-error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.val-chip-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.val-chip-info {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}
.val-chip-suggest {
  background: rgba(234, 179, 8, 0.12);
  color: #fcd34d;
  font-weight: 500;
  border-radius: 8px;
  width: 100%;
  white-space: normal;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.val-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.val-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.val-item-error {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid #f87171;
}
.val-item-warn {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #fbbf24;
}
.val-item-info {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #818cf8;
}
.val-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.val-body {
  flex: 1;
}
.val-path {
  font-family: monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.val-msg {
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Auto-fix confirm box ── */
.val-autofix-confirm {
  width: 100%;
  background: rgba(79, 142, 247, 0.08);
  border: 1px solid rgba(79, 142, 247, 0.3);
  border-radius: 10px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.val-autofix-confirm-msg {
  font-size: 13px;
  color: var(--text-muted, #8a9bbf);
  line-height: 1.5;
  margin: 0;
}
.val-autofix-confirm-btns {
  display: flex;
  gap: 8px;
}

/* ── Save prompt ── */
.val-save-prompt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  margin-top: 2px;
}
.val-save-label {
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
  flex: 1;
  min-width: 120px;
}
.val-save-btn {
  font-size: 12px;
  padding: 5px 12px;
  flex-shrink: 0;
}
.val-save-dismiss {
  opacity: 0.6;
}
.val-save-dismiss:hover {
  opacity: 1;
}

/* ── Fix with AI ── */
.val-fix-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.val-fix-btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 10px;
}
.val-fix-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.val-fix-all {
  background: var(--app-primary, #4f8ef7);
}
.val-fix-warn {
  background: rgba(245, 158, 11, 0.8);
}
.val-fix-sync {
  background: rgba(16, 185, 129, 0.7);
}
.val-key-btn {
  font-size: 11px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.val-key-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ── Fix diff display ── */
.val-diff-section {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.val-diff-title {
  font-size: 12px;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 10px;
}
.val-diff-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.val-diff-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.val-diff-old {
  font-family: monospace;
  font-size: 10px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  margin: 4px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.val-diff-arrow {
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px 0;
}
.val-diff-new {
  font-family: monospace;
  font-size: 10px;
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}

.modal-wide {
  width: 680px;
  max-width: 94vw;
}

.json-preview {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  max-height: 52vh;
  overflow-y: auto;
  white-space: pre;
  margin-bottom: 14px;
  user-select: text;
}

@keyframes chatbotHelpPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(91, 110, 245, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(91, 110, 245, 0);
    transform: scale(1.06);
  }
}

.chatbot-help-highlight {
  animation: chatbotHelpPulse 1.4s ease-in-out infinite;
  border-color: var(--app-primary, #5b6ef5) !important;
}

.chatbot-help-list {
  max-height: 56vh;
  overflow-y: auto;
  margin-bottom: 14px;
}

.chatbot-help-group-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 16px 0 8px;
}

.chatbot-help-group-title:first-child {
  margin-top: 0;
}

.chatbot-help-example {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.chatbot-help-example:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

.chatbot-help-placeholder {
  color: var(--app-primary, #5b6ef5);
  background: rgba(91, 110, 245, 0.15);
  border-radius: 4px;
  padding: 1px 3px;
  font-weight: 600;
}

.chatbot-help-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
}

.chatbot-help-limits {
  margin: 0;
  padding: 10px 12px 10px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.chatbot-help-limits li {
  margin-bottom: 6px;
}

.chatbot-help-limits li:last-child {
  margin-bottom: 0;
}

.btn-secondary {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.13s;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.11);
}

/* ── CHANGES PANEL ───────────────────────────────────────────────────── */
.changes-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 240px;
  height: 100vh;
  background: var(--sidebar-bg, #0d1424);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.changes-panel.open {
  transform: translateX(0);
}

.changes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.changes-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.changes-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}
.changes-close:hover {
  color: var(--text);
}

.changes-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.changes-empty {
  padding: 16px 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.change-item {
  display: flex;
  flex-direction: column;
  padding: 6px 14px;
  border-left: 2px solid transparent;
  transition: background 0.12s;
}
.change-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.change-item.current {
  cursor: default;
  border-left-color: var(--app-primary, #5b6ef5);
  background: rgba(91, 110, 245, 0.08);
}
.change-item.future {
  opacity: 0.65;
}
.change-item.future:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04);
}

.change-label {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.change-item.current .change-label {
  color: var(--app-primary, #5b6ef5);
  font-weight: 600;
}
.change-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.change-main {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  padding: 2px 0;
}
.snapshot-tag {
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--accent);
  background: rgba(91, 110, 245, 0.12);
  border: 1px solid rgba(91, 110, 245, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookmark-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0;
  line-height: 1;
  transition: opacity 0.12s;
}
.change-item:hover .bookmark-btn,
.change-item.bookmarked .bookmark-btn {
  opacity: 0.55;
}
.bookmark-btn:hover {
  opacity: 1 !important;
}
.bookmark-edit-wrap {
  padding: 5px 12px 8px;
}
.bookmark-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  padding: 4px 8px;
  font-size: 11px;
  outline: none;
}
.bookmark-input::placeholder {
  color: var(--text-dim);
}
.change-expand {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
}
.change-expand:hover {
  color: var(--text);
}

.change-diff {
  display: none;
  padding: 6px 14px 6px 16px;
  border-top: 1px solid var(--border);
}
.change-diff.open {
  display: block;
}

.diff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  flex-wrap: wrap;
}
.diff-path {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 70px;
  flex-shrink: 0;
}
.diff-colors {
  display: flex;
  align-items: center;
  gap: 5px;
}
.diff-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.diff-arrow {
  font-size: 10px;
  color: var(--text-muted);
}
.diff-vals {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
}
.diff-before {
  font-size: 10px;
  color: #f87171;
  text-decoration: line-through;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diff-after {
  font-size: 10px;
  color: #86efac;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diff-note {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── AI PATCH BLOCKS ─────────────────────────────────────────────────── */
pre:has(code.language-json-patch) {
  display: none;
}

/* ════════════════════════════════════════════
   VIEWER PANEL  (viewer.js)
   Namespaced under #viewerPanel — no collisions.
   Colors use CSS custom properties from applyTheme().
   ════════════════════════════════════════════ */

#viewerPanel {
  --vp-primary: var(--app-primary, #4caf50);
  font-family: var(--app-secondary-font, "Outfit", sans-serif);
  color: #111;
}
#viewerPanel input,
#viewerPanel textarea,
#viewerPanel button,
#viewerPanel select {
  font-family: inherit;
}

/* Sidebar */
#viewerPanel .vp-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #fff;
  overflow-y: auto;
  padding: 8px;
}
#viewerPanel .vp-sec-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.12s;
  border-radius: 10px;
  transition-duration: 0.5s;
  background: #f4f4f4;
  margin-bottom: 10px;
}
#viewerPanel .vp-sec-item:hover {
  background: #000;
}
#viewerPanel .vp-sec-item:hover .vp-sec-name,
#viewerPanel .vp-sec-item:hover .vp-sec-count {
  color: #fff;
}
#viewerPanel .vp-sec-item.vp-active {
  background: var(--vp-primary-strong, var(--vp-primary));
  cursor: pointer;
}
@keyframes vp-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-6px);
  }
}
#viewerPanel .vp-sec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
#viewerPanel .vp-sec-name {
  font-size: 11px;
  font-weight: 600;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
}
#viewerPanel .vp-sec-check,
#viewerPanel .vp-sec-dot {
  flex-shrink: 0;
}
#viewerPanel .vp-sec-item.vp-active .vp-sec-name {
  color: #fff;
}

#viewerPanel .vp-sec-count {
  font-size: 10px;
  color: #000;
  font-weight: 600;
}
#viewerPanel .vp-sec-item.vp-active .vp-sec-count {
  /* Full white: at 10px, dropping to 85% costs enough contrast to fail AA even on the
     darkened primary (3.73 vs the 4.56 the same colour gives at full opacity). */
  color: #fff;
}
#viewerPanel .vp-step-item {
  padding: 0px 14px 15px 22px;
  font-size: 10px;
  color: #666;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
#viewerPanel .vp-step-dot {
  flex-shrink: 0;
}
#viewerPanel .vp-sec-item.vp-next,
#viewerPanel .vp-welcome-actions .vp-next {
  animation: vp-bounce 1.1s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
  animation-iteration-count: infinite;
}

/* Welcome screen */
#viewerPanel .vp-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* "safe" keeps centering when content fits, but falls back to top-anchored
     (like flex-start) when the intro text is too tall for the panel — plain
     "center" would clip the top of the overflowing content unreachably,
     since a centered flex item can't be scrolled past its natural top. */
  justify-content: safe center;
  align-items: flex-start;
  padding: 52px 52px 48px;
}
#viewerPanel .vp-welcome-text {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 28px;
}
ol li {
  margin-left: 20px;
}

#viewerPanel .vp-welcome-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── AI Fill button ── */
#viewerPanel .vp-fill-ai-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 20px;
  border-radius: 10px;
  border: none;
  background: color-mix(in srgb, var(--vp-primary) 12%, transparent);
  color: var(--vp-primary);
  cursor: pointer;
  transition: opacity 0.15s;
}
#viewerPanel .vp-fill-ai-btn:hover:not(:disabled) {
  opacity: 0.8;
}
#viewerPanel .vp-fill-ai-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── AI fill loader banner ── */
.vp-ai-loader-dim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  z-index: 49;
  transition: opacity 0.4s;
}
.vp-ai-loader-dim--fade {
  opacity: 0;
}
.vp-ai-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: 40px;
  background: #fff;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.13),
    0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid
    color-mix(in srgb, var(--vp-primary, #5b6ef5) 22%, transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--vp-primary, #5b6ef5) 80%, #000);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.4s;
}
.vp-ai-loader--fade {
  opacity: 0;
}
.vp-ai-loader-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid
    color-mix(in srgb, var(--vp-primary, #5b6ef5) 25%, transparent);
  border-top-color: var(--vp-primary, #5b6ef5);
  animation: vp-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes vp-spin {
  to {
    transform: rotate(360deg);
  }
}
.vp-ai-loader-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--vp-primary, #5b6ef5) 15%, transparent);
  overflow: hidden;
}
.vp-ai-loader-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--vp-primary, #5b6ef5);
  width: 0%;
  transition: width 0.4s ease;
  animation: vp-indeterminate 1.4s ease-in-out infinite;
}
@keyframes vp-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.5);
  }
  50% {
    transform: translateX(25%) scaleX(0.8);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}

/* ── AI fill lock overlay (transparent shield over panel during fill) ── */
.vp-fill-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 48;
  cursor: not-allowed;
  background: transparent;
}

/* ── AI fill status bar (fixed bottom during fill) ── */
.vp-fill-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--vp-primary, #5b6ef5) 92%, #000);
  color: #fff;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  animation: vp-slidein-bottom 0.28s ease;
  transition:
    opacity 0.35s,
    transform 0.35s;
}
.vp-fill-status-bar--out {
  opacity: 0;
  transform: translateY(100%);
}
.vp-fill-status-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: vp-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes vp-slidein-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── AI cursor ── */
.vp-ai-cursor {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition:
    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  left: -100px;
  top: -100px;
}
.vp-ai-cursor-label {
  font-size: 10px;
  font-weight: 700;
  background: #6366f1;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  opacity: 0.9;
}
.vp-ai-cursor--click svg {
  transform: scale(0.82);
  transition: transform 0.08s;
}
.vp-ai-cursor--done {
  opacity: 0;
  transition: opacity 0.4s;
}

/* Content area */
#viewerPanel .vp-content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px 32px;
  background: #fff;
  min-width: 0;
  max-width: 1240px;
  margin-inline: auto;
}

#viewerPanel .vp-sec-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  font-family: var(--app-primary-font, inherit);
}
#viewerPanel .vp-sec-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}
#viewerPanel .vp-sec-desc h3 {
  font-size: 21px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}
#viewerPanel .vp-sec-desc p {
  margin-bottom: 4px;
}

/* Step card */
#viewerPanel .vp-step-card {
  margin-bottom: 40px;
  padding: 30px 40px;
  background: #f8f8f8;
  border-radius: 12px;
  border: 1px solid #eee;
  margin-top: 20px;
}
#viewerPanel .vp-step-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--vp-primary);
  margin-bottom: 20px;
  font-family: var(--app-primary-font, inherit);
}
#viewerPanel .vp-step-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 14px;
}
#viewerPanel .vp-step-desc p {
  margin-bottom: 4px;
}

/* Elements */
#viewerPanel .vp-el {
  margin-bottom: 15px;
  display: block;
  text-align: center;
  font-size: 90%;
  background: linear-gradient(22deg, #fafafa, #e2e2e2);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.5s;
  padding: 15px 10px 15px 10px;
  position: relative;
}
#viewerPanel .vp-el.vp-el-filled {
  background: #ddd;
}
#viewerPanel .vp-el:has(.vp-tile) {
  padding: 0;
}
/* Action-button wrappers: strip the card from vp-el; the button itself carries the styling */
#viewerPanel .vp-el:has(.vp-action-btn) {
  background: none;
  border-radius: 0;
  padding: 0;
  cursor: default;
}

#viewerPanel .vp-el-label {
  display: block;
  font-size: 13.5px;
  /* #666 clears AA on the card's #f8f8f8 but not on the #ddd a filled vp-el switches to. */
  color: #555;
  text-align: center;
  margin-bottom: 4px;
}
#viewerPanel .vp-input {
  width: 100%;
  border: 1.5px solid #333;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 11px;
  color: #333;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
  margin-top: 5px;
}
#viewerPanel .vp-input:focus {
  border: 2px solid #333;
}
#viewerPanel .vp-textarea {
  resize: vertical;
  min-height: 64px;
  text-align: left;
}
#viewerPanel .vp-scraper-extra-urls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
#viewerPanel .vp-scraper-extra-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
#viewerPanel .vp-scraper-extra-row .vp-input {
  margin-top: 0;
  text-align: left;
}
#viewerPanel .vp-scraper-extra-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1.5px solid #333;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
#viewerPanel .vp-scraper-extra-remove:hover {
  background: #fee2e2;
  border-color: #dc2626;
  color: #991b1b;
}
#viewerPanel .vp-scraper-extra-add {
  align-self: flex-start;
  border: 1.5px dashed #333;
  background: transparent;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 11px;
  color: #333;
  cursor: pointer;
}
#viewerPanel .vp-scraper-extra-add:hover {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
}
#viewerPanel .vp-color-input {
  height: 36px;
  padding: 2px;
  cursor: pointer;
}
#viewerPanel .vp-slider {
  cursor: pointer;
  accent-color: var(--vp-primary);
}
#viewerPanel .vp-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#viewerPanel .vp-radio-label {
  font-size: 11px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#viewerPanel .vp-display {
  font-size: 11px;
  color: #555;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 6px 10px;
  border: 1px solid #eee;
}
#viewerPanel .vp-action-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  text-align: center;
  background: linear-gradient(22deg, #fafafa, #e2e2e2);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.5s;
  padding: 15px 10px;
  border: none;
  position: relative;
  color: #555;
}
#viewerPanel .vp-action-btn:hover:not(.vp-prompt-btn-loading) {
  background: linear-gradient(22deg, #f0efef, #d5d5d5);
}
#viewerPanel .vp-action-btn.vp-el-filled {
  background: #ddd;
}
/* ── Filled checkmark badge (shared by vp-el inputs and vp-action-btn) ── */
#viewerPanel .vp-el-check {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--vp-primary-strong, var(--vp-primary));
  border-radius: 50%;
  position: absolute;
  top: -6px;
  right: -6px;
  transition-duration: 0.5s;
  font-size: 12px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  padding-top: 3px;
  opacity: 0;
  line-height: 1.1;
  pointer-events: none;
}
#viewerPanel .vp-el.vp-el-filled > .vp-el-check,
#viewerPanel .vp-action-btn.vp-el-filled > .vp-el-check {
  opacity: 1;
}
#viewerPanel .vp-tile {
  font-size: 12px;
  color: #333;
  text-align: center;
  transition:
    background 0.12s,
    border-color 0.12s;
  box-sizing: border-box;
  position: relative;
  padding: 15px 10px 15px 10px;
}

#viewerPanel .vp-tile.vp-tile-selected {
  background: #ddd;
  border-color: var(--vp-primary);
  border-radius: 12px;
}
#viewerPanel .vp-tile-check {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--vp-primary-strong, var(--vp-primary));
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.7s;
}

/* Nav row */
#viewerPanel .vp-nav-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
}
#viewerPanel .vp-nav-back {
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-weight: 600;
}
#viewerPanel .vp-nav-back:disabled {
  opacity: 0.3;
  cursor: default;
}
#viewerPanel .vp-nav-continue {
  background: var(--vp-primary-strong, var(--vp-primary));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
#viewerPanel .vp-nav-continue:disabled {
  opacity: 0.4;
  cursor: default;
}
#viewerPanel .vp-nav-continue:not(:disabled):hover {
  opacity: 0.88;
}

/* ── VIEWER CHAT THREAD ── */
#viewerPanel .vp-drop-hover {
  outline: 2px dashed var(--accent, #6366f1);
  outline-offset: 4px;
  border-radius: 10px;
}
#viewerPanel .vp-chat-thread {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-bottom: 50px;
}
#viewerPanel .vp-chat-user {
  align-self: flex-end;
  margin-left: 20px;
  background: var(--vp-text);
  color: var(--vp-bg);
  padding: 8px 14px;
  border-radius: 12px 0px 12px 12px;
  font-size: 13px;
  font-weight: 500;
  max-width: 80%;
  line-height: 1.4;
}
#viewerPanel .vp-chat-loading {
  align-self: flex-start;
  color: var(--vp-text-dim);
  font-size: 12px;
  font-style: italic;
  padding: 4px 0;
}
#viewerPanel .vp-chat-stream {
  font-size: 13px;
  line-height: 1.6;
  color: var(--vp-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
#viewerPanel .vp-chat-ai {
  align-self: stretch;
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: 4px 14px 14px 14px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vp-text);
  overflow: hidden;
  margin: 20px 20px 0 0;
}
#viewerPanel .vp-chat-divider {
  border: none;
  border-top: 1px dashed var(--vp-border-dashed);
  margin: 12px 0;
  width: 100%;
}
#viewerPanel .vp-chat-tmpl-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--vp-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-text-muted);
  padding: 4px 14px;
  margin-left: 4px;
  opacity: 0;
  pointer-events: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    opacity 0.15s;
}
#viewerPanel .vp-chat-thread:hover .vp-chat-tmpl-btn {
  opacity: 1;
  pointer-events: auto;
}
#viewerPanel .vp-chat-tmpl-btn:hover {
  color: var(--vp-primary);
  border-color: var(--vp-primary);
}
/* Touch devices have no reliable :hover — the opacity:0/pointer-events:none
   reveal-on-.vp-chat-thread:hover above would leave this button permanently
   invisible and unclickable. Show it plainly instead. */
@media (hover: none) {
  #viewerPanel .vp-chat-tmpl-btn {
    opacity: 1;
    pointer-events: auto;
  }
}
/* ── Template editor inline panel ───────────────────────────────────── */
#viewerPanel .vp-tmpl-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  background: var(--vp-surface-1);
  padding: 20px;
  margin: 12px 0 0 0;
}
#viewerPanel .vp-tmpl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#viewerPanel .vp-tmpl-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-text);
}
#viewerPanel .vp-tmpl-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--vp-text-dim);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
#viewerPanel .vp-tmpl-close:hover {
  color: var(--vp-text-muted);
}
#viewerPanel .vp-tmpl-vars-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#viewerPanel .vp-tmpl-vars-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--vp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#viewerPanel .vp-tmpl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#viewerPanel .vp-tmpl-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: filter 0.12s;
  font-family: inherit;
}
#viewerPanel .vp-tmpl-chip:hover {
  filter: brightness(0.93);
}
#viewerPanel .vp-tmpl-chip-field {
  background: #dbeafe;
  color: #1d4ed8;
}
#viewerPanel .vp-tmpl-chip-loop {
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
}
#viewerPanel .vp-tmpl-chip-sub {
  background: #f1f5f9;
  color: #475569;
}
#viewerPanel .vp-tmpl-chip-input {
  background: #fef3c7;
  color: #92400e;
}
#viewerPanel .vp-tmpl-gen-row {
  display: flex;
  align-items: center;
  padding-top: 2px;
}
#viewerPanel .vp-tmpl-gen-btn {
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  border: 1.5px solid #f59e0b;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  background: #fffbeb;
  color: #92400e;
  transition:
    background 0.12s,
    filter 0.12s;
}
#viewerPanel .vp-tmpl-gen-btn:hover:not(:disabled) {
  background: #fef3c7;
}
#viewerPanel .vp-tmpl-gen-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #d1d5db;
  color: #6b7280;
  background: #f9fafb;
}
#viewerPanel .vp-tmpl-chip-hint {
  font-size: 11px;
  opacity: 0.65;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#viewerPanel .vp-tmpl-body {
  display: flex;
  gap: 12px;
}
#viewerPanel .vp-tmpl-col-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--vp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
#viewerPanel .vp-tmpl-editor-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 46%;
}
#viewerPanel .vp-tmpl-editor-col .tox-tinymce {
  border-radius: 6px;
  border-color: var(--vp-border);
}
#viewerPanel .vp-tmpl-preview-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#viewerPanel .vp-tmpl-preview {
  flex: 1;
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: 6px;
  padding: 14px 16px;
  min-height: 300px;
  max-height: 500px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vp-text);
  overflow: auto;
}
#viewerPanel .vp-tmpl-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
#viewerPanel .vp-tmpl-raw-toggle {
  font-size: 12px;
  color: var(--vp-text-muted);
  cursor: pointer;
  flex: 1;
}
#viewerPanel .vp-tmpl-raw-toggle summary {
  cursor: pointer;
  user-select: none;
}
#viewerPanel .vp-tmpl-raw-pre {
  margin-top: 6px;
  font-family: "Fira Mono", monospace;
  font-size: 11px;
  background: var(--vp-surface-2);
  border-radius: 4px;
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--vp-text-muted);
  max-height: 160px;
  overflow: auto;
}
#viewerPanel .vp-tmpl-save {
  background: var(--vp-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 20px;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
#viewerPanel .vp-tmpl-save:hover {
  opacity: 0.88;
}

/* ── chip styling panel ── */
#viewerPanel .vp-tmpl-chip-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: var(--vp-surface-1);
  border: 1px solid var(--vp-border);
  border-top: none;
  border-bottom: 2px solid #93c5fd;
  font-size: 12px;
}
#viewerPanel .vp-tmpl-chip-panel--hidden {
  display: none !important;
}
#viewerPanel .vp-tmpl-cp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#viewerPanel .vp-tmpl-cp-row-label,
#viewerPanel .vp-tmpl-cp-label {
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
  font-size: 11px;
}
#viewerPanel .vp-tmpl-cp-name {
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 4px;
  padding: 1px 7px;
  flex-shrink: 0;
}
/* color swatches (text + background + border) */
/* color picker field */
#viewerPanel .vp-tmpl-cp-color-field {
  display: flex;
  align-items: center;
  gap: 2px;
}
#viewerPanel .vp-tmpl-cp-color-picker {
  width: 30px;
  height: 22px;
  padding: 1px 2px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  opacity: 0.35;
}
#viewerPanel .vp-tmpl-cp-color-field--active .vp-tmpl-cp-color-picker {
  opacity: 1;
}
#viewerPanel .vp-tmpl-cp-color-clear {
  width: 18px;
  height: 18px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: #9ca3af;
  padding: 0;
}
#viewerPanel .vp-tmpl-cp-color-clear:hover {
  color: #dc2626;
  border-color: #fca5a5;
}
/* free-text CSS value inputs */
#viewerPanel .vp-tmpl-cp-css-input {
  width: 90px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
  color: #1e293b;
}
/* B / I / U toggles */
#viewerPanel .vp-tmpl-cp-toggles {
  display: flex;
  gap: 2px;
}
#viewerPanel .vp-tmpl-cp-toggle {
  width: 24px;
  height: 22px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  line-height: 1;
}
#viewerPanel .vp-tmpl-cp-toggle--active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
/* before/after text inputs */
/* element inline-style editor */
#viewerPanel .vp-tmpl-cp-elem-row {
  align-items: flex-start;
}
#viewerPanel .vp-tmpl-cp-elem-ta {
  flex: 1;
  min-height: 52px;
  max-height: 120px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #1e293b;
  resize: vertical;
}
#viewerPanel .vp-tmpl-cp-affix {
  width: 72px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  color: #1e293b;
}
/* preset button groups (size, padding, radius, border-style, border-width) */
#viewerPanel .vp-tmpl-cp-presets {
  display: flex;
  gap: 2px;
}
#viewerPanel .vp-tmpl-cp-preset {
  height: 22px;
  padding: 0 7px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  line-height: 1;
  white-space: nowrap;
}
#viewerPanel .vp-tmpl-cp-presets--sm .vp-tmpl-cp-preset {
  padding: 0 5px;
}
#viewerPanel .vp-tmpl-cp-preset--active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

/* ── editor col header + raw toggle ── */
#viewerPanel .vp-tmpl-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
#viewerPanel .vp-tmpl-raw-toggle-btn {
  font-size: 11px;
  color: #64748b;
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: monospace;
}
#viewerPanel .vp-tmpl-raw-toggle-btn:hover {
  color: #1d4ed8;
  border-color: #93c5fd;
}
#viewerPanel .vp-tmpl-raw-ta {
  width: 100%;
  height: 300px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #1e293b;
  resize: vertical;
}
#viewerPanel .vp-tmpl-raw-ta--hidden {
  display: none !important;
}

/* ── AI response toolbar ── */
#viewerPanel .vp-chat-ai-wrap {
  position: relative;
  margin: 20px 20px 0 0;
}
#viewerPanel .vp-chat-ai-toolbar {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 3px 8px;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 11px;
  color: #64748b;
  user-select: none;
  /* hidden until wrap is hovered */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}
#viewerPanel .vp-chat-ai-wrap:hover .vp-chat-ai-toolbar {
  opacity: 1;
  pointer-events: auto;
}
/* Touch devices have no reliable :hover — Hide/Remove/Share/Copy/Change would
   be permanently invisible and unclickable on every AI response otherwise. */
@media (hover: none) {
  #viewerPanel .vp-chat-ai-toolbar {
    opacity: 1;
    pointer-events: auto;
  }
}
#viewerPanel .vp-chat-ai-time {
  /* #94a3b8 on the panel's white is 2.56 — far under AA, and this is an 11px timestamp. */
  color: #64748b;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
#viewerPanel .vp-chat-ai-act {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
}
#viewerPanel .vp-chat-ai-act:hover {
  color: #1d4ed8;
  background: #eff6ff;
}
#viewerPanel .vp-chat-ai-act--danger:hover {
  color: #dc2626;
  background: #fef2f2;
}
/* pipe separators between actions via CSS — no extra DOM nodes */
#viewerPanel .vp-chat-ai-time + .vp-chat-ai-act::before,
#viewerPanel .vp-chat-ai-act + .vp-chat-ai-act::before {
  content: "|";
  color: #cbd5e1;
  margin-right: 2px;
  pointer-events: none;
}
#viewerPanel .vp-chat-ai-toast {
  font-size: 11px;
  color: #6366f1;
  padding: 2px 8px;
  animation: vp-fadein 0.15s ease;
}
/* aiDiv inside wrap: wrap owns the margin; aiDiv keeps its natural appearance */
#viewerPanel .vp-chat-ai-wrap .vp-chat-ai {
  margin: 0;
  overflow: visible;
}
/* collapsed: 50px peek with fade-out, re-expands on Show */
#viewerPanel .vp-chat-ai--collapsed {
  max-height: 50px !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0,
    black 20px,
    transparent 50px
  );
  mask-image: linear-gradient(to bottom, black 0, black 20px, transparent 50px);
  cursor: pointer;
}
#viewerPanel .vp-chat-ai--collapsed iframe {
  pointer-events: none;
}
/* ── inline raw content editor ── */
#viewerPanel .vp-chat-raw-editor {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top: none;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#viewerPanel .vp-chat-raw-editor-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
#viewerPanel .vp-chat-raw-editor-ta {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #1e293b;
  resize: vertical;
}
#viewerPanel .vp-chat-raw-editor-actions {
  display: flex;
  gap: 6px;
}
#viewerPanel .vp-chat-raw-editor-apply {
  padding: 4px 14px;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
#viewerPanel .vp-chat-raw-editor-apply:hover {
  opacity: 0.88;
}
#viewerPanel .vp-chat-raw-editor-cancel {
  padding: 4px 12px;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: #64748b;
}
#viewerPanel .vp-chat-raw-editor-cancel:hover {
  color: #374151;
  border-color: #9ca3af;
}

#viewerPanel .vp-chat-regen {
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  padding-top: 6px;
  font-weight: 900;
  letter-spacing: +1px;
  font-size: 15px;
  border-radius: 12px;
  padding: 6px 30px;
}
#viewerPanel .vp-chat-regen:hover {
  color: var(--vp-primary);
}
#viewerPanel .vp-chat-error {
  color: #ef4444;
  font-size: 12px;
  padding: 4px 0;
}
#viewerPanel .vp-chat-truncated {
  color: #92400e;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
#viewerPanel .vp-chat-placeholder {
  color: #9ca3af;
  font-size: 12px;
  font-style: italic;
  padding: 6px 0;
}

#viewerPanel .vp-chat-iframe {
  display: block;
  width: 100%;
  min-height: 200px;
  height: 200px;
  border: none;
  border-radius: 6px;
  background: #fff;
  transition: height 0.2s ease;
}
#viewerPanel .vp-widget-dynamic {
  margin-top: 10px;
  width: 100%;
}
#viewerPanel .vp-widget-dynamic .vp-chat-iframe {
  min-height: 120px;
  height: 120px;
  border-radius: 10px;
  border: 1px solid var(--vp-border);
}
#viewerPanel .vp-chat-code {
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  background: #f3f4f6;
  color: #374151;
  padding: 8px;
  border-radius: 4px;
  margin: 0;
}
#viewerPanel .vp-action-btn.vp-prompt-btn-loading {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* ── LAYOUT TOGGLE (topbar) ── */
.btn-layout-group {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
}
.btn-layout {
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
}
.btn-layout:first-child {
  border-left: none;
}
.btn-layout:hover {
  background: rgba(0, 0, 0, 0.05);
}
.btn-layout.active {
  background: rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════════════════════
   MOBILE  (≤ 768px)
   ══════════════════════════════════════════════ */

/* Hamburger — desktop hidden */
.btn-hamburger {
  display: none;
}

/* Mobile tab bar — hidden by default, shown via .visible class on mobile */
.mobile-tab-bar {
  display: none;
}

/* Sections toggle — always hidden on desktop */
.mobile-sections-toggle {
  display: none;
}

/* Backdrop — hidden by default */
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}
.mobile-backdrop.active {
  display: block;
}

@media (max-width: 768px) {
  /* ── Sidebar becomes a fixed overlay ── */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    height: 100dvh;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Compact the mobile drawer's own contents — logo, paste button, history
     rows, and the Undo/Redo/Revert/etc. actions list — so more fits on a
     320px-tall-viewport phone without scrolling. */
  .sidebar.mobile-open .sidebar-header {
    padding: 12px 12px 10px;
  }
  .sidebar.mobile-open .sidebar-logo {
    font-size: 10px;
  }
  .sidebar.mobile-open .btn-paste {
    padding: 7px 12px;
    font-size: 12px;
  }
  .sidebar.mobile-open .history-item {
    padding: 7px 8px;
  }
  .sidebar.mobile-open .history-name {
    font-size: 12px;
  }
  .sidebar.mobile-open .history-desc {
    font-size: 10px;
  }
  .sidebar.mobile-open .mobile-action-item {
    padding: 7px 10px;
    font-size: 12px;
  }

  /* ── Topbar ── */
  .btn-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #000;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.15s;
  }
  .btn-hamburger:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .topbar-spacer {
    display: none;
  }
  .topbar-version {
    display: none;
  }
  /* All topbar action buttons moved to sidebar on mobile */
  #undoBtn,
  #redoBtn,
  #revertBtn,
  #editModeBtn,
  #exportJsonBtn,
  #histPanelBtn,
  #validateBtn {
    display: none !important;
  }
  /* Desktop layout toggle hidden on mobile */
  .btn-layout-group {
    display: none !important;
  }
  /* Keyboard shortcuts hidden on mobile */
  .sidebar-shortcuts {
    display: none;
  }

  /* ── Mobile tab bar ── */
  .mobile-tab-bar.visible {
    display: flex;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
  }
  .mobile-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
      color 0.15s,
      box-shadow 0.15s;
    border-bottom: 2px solid transparent;
  }
  .mobile-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ── Split panel → single panel on mobile ── */
  .main-body.split-mode {
    flex-direction: column;
  }

  /* Default: show viewer, hide editor */
  .main-body.split-mode .editor-half {
    display: none;
    border-right: none;
  }
  .main-body.split-mode #viewerPanel {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* layout-editor: show editor only */
  .main-body.split-mode.layout-editor .editor-half {
    display: flex;
    flex: 1;
  }
  .main-body.split-mode.layout-editor #viewerPanel {
    display: none;
  }

  /* layout-viewer: show viewer (same as default, explicit) */
  .main-body.split-mode.layout-viewer .editor-half {
    display: none;
  }
  .main-body.split-mode.layout-viewer #viewerPanel {
    display: flex;
    flex: 1;
    padding: 10px;
  }

  /* ── Viewer panel: sidebar drops below tab-bar as horizontal strip ── */
  #viewerPanel {
    flex-direction: column;
  }

  #viewerPanel .vp-sidebar {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 10px;
    gap: 6px;
    scrollbar-width: none;
  }
  #viewerPanel .vp-sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Section items become horizontal pill chips */
  #viewerPanel .vp-sec-item {
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: none;
    border-radius: 20px;
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    align-items: center;
  }
  #viewerPanel .vp-sec-item.vp-active {
    background: var(--vp-primary-strong, var(--vp-primary));
    border-color: var(--vp-primary-strong, var(--vp-primary));
  }
  #viewerPanel .vp-sec-item.vp-done {
    background: #f0f0f0;
    border-color: #ddd;
  }
  #viewerPanel .vp-sec-item.vp-done .vp-sec-name {
    color: #777;
  }
  #viewerPanel .vp-sec-row {
    gap: 5px;
  }

  /* Step items: inline text chips in the scroll strip */
  #viewerPanel .vp-step-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 0 0 10px 15px;
  }
  #viewerPanel .vp-step-dot {
    display: none;
  }
  #viewerPanel .vp-sec-count {
    display: none;
  }

  /* Fix scroll: min-height:0 lets overflow-y:auto actually constrain */
  #viewerPanel .vp-content {
    padding: 16px 14px 24px;
    max-width: 100%;
    min-height: 0;
  }

  /* ── Editor: remove side padding on small screens ── */
  .tabs {
    padding: 12px 12px 0 !important;
  }
  .hero {
    padding: 16px 12px 0 !important;
  }

  /* Tab bar overflows viewport width on mobile (5 tabs don't fit on one
     line) — wrap onto a second row instead of pushing the page sideways. */
  .tab-bar {
    flex-wrap: wrap;
    gap: 2px 4px;
  }
  .tab-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Entities panel: .entity-key's fixed 130px min-width crowds .entity-val
     into ~116px at 320px wide, forcing word-break:break-all to split mid-
     token (e.g. "{{input_hero_n" / "ame}}"). Stack key above value instead. */
  .entity-field {
    flex-direction: column;
    gap: 2px;
  }
  .entity-key {
    min-width: 0;
  }

  /* Global Data tab: .scope-key and .scope-badge are both flex-shrink:0
     (151px + 54px combined at 320px), squeezing .scope-path's flex:1 down
     to ~20px — each word of the path wraps onto its own line. Stack it
     below the key/badge row instead of fighting them for width. */
  .scope-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .scope-path {
    flex: none;
    width: 100%;
  }

  /* Modals (Paste JSON, Validate, chatbot-help, JSON export, ...) have no
     max-height — a tall one (long chatbot-help example list, etc.) grows
     past the viewport with no way to scroll, and its footer Close button
     can land unreachable or under the external chat widget's bottom-right
     bubble. Cap height and let the modal scroll internally instead. */
  .modal-overlay {
    padding: 16px;
  }
  .modal {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  /* Right-aligned modal-actions puts the primary button bottom-right —
     exactly where the external chatbot widget's floating bubble sits.
     Left-align on mobile so our own buttons don't fight it for that corner. */
  .modal-actions {
    justify-content: flex-start;
  }

  /* .btn-nav (chatbotHelpBtn) and .btn-remote-save (Save) are the two
     topbar buttons still visible on mobile — the rest are hidden below.
     The existing compact-button rule only fires at 769-1200px (tablet),
     so on real mobile these stayed full desktop size. */
  .btn-nav,
  .btn-remote-save {
    padding: 5px 9px;
    font-size: 12px;
  }

  /* Fix scroll: welcome screen is appended straight to #viewerPanel (not
     .vp-content), so it never inherited overflow-y — its Fill-AI/Continue
     buttons could get clipped off-screen with no way to reach them. */
  #viewerPanel .vp-welcome {
    overflow-y: auto;
    min-height: 0;
    padding: 24px 16px 20px;
  }
  #viewerPanel .vp-welcome-text h1 {
    line-height: 1.15;
  }

  /* ── Touch-friendly elements ── */
  #viewerPanel .vp-tile {
    padding: 13px 14px;
    font-size: 13px;
  }
  #viewerPanel .vp-nav-continue {
    padding: 11px 22px;
    font-size: 13px;
  }
  #viewerPanel .vp-action-btn {
    padding: 12px 14px;
    font-size: 12px;
  }

  /* ── Collapsed: hide the sidebar strip ── */
  #viewerPanel.vp-sidebar-collapsed .vp-sidebar {
    display: none;
  }

  /* ── Sections toggle: full-width handle bar below tab bar ── */
  .mobile-sections-toggle {
    display: none;
    width: 100%;
    padding: 7px 0 6px;
    background: var(--sidebar-bg);
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background 0.12s;
  }
  .mobile-sections-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .mobile-sections-toggle.preview-active {
    display: flex;
  }

  /* Pill handle — CSS drawn, no font metrics */
  .sections-handle {
    display: block;
    width: 36px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    transition:
      background 0.2s,
      opacity 0.2s;
  }
  .mobile-sections-toggle:hover .sections-handle {
    opacity: 0.75;
  }

  /* Label */
  .sections-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color 0.2s;
  }

  /* Collapsed (sections hidden): both go grey */
  .mobile-sections-toggle.sections-collapsed .sections-handle {
    background: rgba(255, 255, 255, 0.22);
  }
  .mobile-sections-toggle.sections-collapsed .sections-label {
    color: var(--text-dim);
  }
  .mobile-sections-toggle.sections-collapsed:hover .sections-handle {
    background: rgba(255, 255, 255, 0.38);
  }

  /* ── Mobile sidebar actions ── */
  .mobile-sidebar-actions {
    flex-direction: column;
    border-top: 1px solid var(--border);
    padding: 8px;
    gap: 2px;
  }
  .mobile-sidebar-actions.hidden {
    display: none;
  }
  .mobile-action-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
  }
  .mobile-action-item:hover {
    background: rgba(255, 255, 255, 0.07);
  }
  #viewerPanel .vp-step-card {
    padding: 20px 15px;
  }
  .toast {
    left: 20px;
  }
}

/* Desktop: mobile actions section always hidden */
@media (min-width: 769px) {
  .mobile-sidebar-actions {
    display: none !important;
  }
}

/* Extra small (phone portrait) */
@media (max-width: 480px) {
  #viewerPanel .vp-sec-name {
    font-size: 10px;
  }
  .topbar-name {
    font-size: 13px;
  }
}

/* full width viewer */

.main-body.split-mode.layout-viewer #viewerPanel .vp-sidebar {
  width: 360px;
  padding: 30px;
}
.main-body.split-mode.layout-viewer #viewerPanel .vp-step-item,
.main-body.split-mode.layout-viewer #viewerPanel .vp-sec-item {
  padding: 15px 30px;
  margin-bottom: 10px;
  border-radius: 12px;
  transition-duration: 0.5s;
  font-size: 12px;
  gap: 20px;
}
.main-body.split-mode.layout-viewer #viewerPanel .vp-sec-item {
  font-weight: normal;
}

.main-body.split-mode.layout-viewer #viewerPanel .vp-sec-name,
.main-body.split-mode.layout-viewer #viewerPanel .vp-sec-count {
  font-size: 14px;
}

.main-body.split-mode.layout-viewer #viewerPanel .vp-nav-back,
.main-body.split-mode.layout-viewer #viewerPanel .vp-nav-continue {
  letter-spacing: +1px;
  font-size: 15px;
  font-weight: 900;
}
.main-body.split-mode.layout-viewer #viewerPanel .vp-input {
  font-size: 15px;
}
.main-body.split-mode.layout-viewer #viewerPanel .vp-action-btn {
  font-size: 13.5px;
  line-height: 24.3px;
  font-weight: 400;
}
.main-body.split-mode.layout-viewer #viewerPanel .vp-chat-user {
  padding: 10px 20px;
}

.main-body.split-mode.layout-viewer #viewerPanel .vp-welcome {
  padding-left: 25px;
}

#viewerPanel .vp-action-btn #viewerPanel .vp-step-desc {
  margin-bottom: 30px;
}

@media screen and (min-width: 800px) {
  .main-body.split-mode.layout-viewer #viewerPanel .vp-welcome {
    padding-left: 25%;
    max-width: 1700px;
  }
}

/* ── FONT PICKER POPOVER ─────────────────────────────────────────────── */
.font-picker-pop {
  background: #1a2540;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  padding: 10px;
  width: 260px;
  max-height: 340px;
  overflow-y: auto;
}
.font-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.font-picker-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #e8edf5;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 10px;
  text-align: left;
  transition: background 0.12s;
}
.font-picker-btn:hover {
  background: rgba(91, 110, 245, 0.18);
  color: #fff;
}
.font-picker-btn--default {
  color: rgba(232, 237, 245, 0.5);
  font-style: italic;
  font-size: 12px;
}
.font-picker-sep {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 8px 0;
}
.font-picker-custom {
  display: flex;
  gap: 6px;
}
.font-picker-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #e8edf5;
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
}
.font-picker-input:focus {
  border-color: var(--accent, #5b6ef5);
}
.font-picker-apply {
  background: var(--accent, #5b6ef5);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}
.font-picker-apply:hover {
  background: var(--accent-hover, #4757e0);
}

/* ══════════════════════════════════════════════
   TOPBAR — prevent overflow on all widths
   ══════════════════════════════════════════════ */
.topbar-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* ══════════════════════════════════════════════
   TABLET (769 – 1200px): no split view, show tab bar
   ══════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Sidebar is always visible at this range — toggle is redundant */
  #vpSidebarToggle {
    display: none !important;
  }
  /* Compact topbar — wraps to second line, height auto-expands */
  .topbar {
    padding: 6px 10px;
    gap: 5px;
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    align-content: center;
  }
  /* Name shrinks gracefully */
  .topbar-name {
    font-size: 13px;
    flex-shrink: 0;
    max-width: 160px;
  }
  .topbar-spacer {
    display: none;
  }
  /* All topbar action buttons: compact */
  .btn-nav,
  .btn-revert,
  .btn-edit-mode,
  .btn-export-json,
  .btn-validate,
  .btn-remote-save {
    padding: 5px 9px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .btn-layout-group {
    flex-shrink: 0;
  }
  .btn-layout {
    padding: 5px 9px;
    font-size: 14px;
  }
  /* Hide the split (◫) layout button — only editor/viewer make sense */
  .btn-layout[data-layout="split"] {
    display: none;
  }
  /* Force stacked — no true side-by-side */
  .main-body.split-mode {
    flex-direction: column;
  }
  .main-body.split-mode .editor-half {
    border-right: none;
  }
  /* Show the tab bar so users can still switch panels */
  .mobile-tab-bar.visible {
    display: flex;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
  }
  .mobile-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition:
      color 0.15s,
      border-color 0.15s;
  }
  .mobile-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  /* viewer panel fills height */
  .main-body.split-mode #viewerPanel {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  /* layout-editor: show editor only */
  .main-body.split-mode.layout-editor .editor-half {
    display: flex;
    flex: 1;
  }
  .main-body.split-mode.layout-editor #viewerPanel {
    display: none;
  }
  /* layout-viewer: show viewer only */
  .main-body.split-mode.layout-viewer .editor-half {
    display: none;
  }
  .main-body.split-mode.layout-viewer #viewerPanel {
    display: flex;
    flex: 1;
  }
  /* default split → show viewer (tab bar controls the switch) */
  .main-body.split-mode:not(.layout-editor):not(.layout-viewer) .editor-half {
    display: none;
  }
  /* Sections toggle can show on tablet too */
  .mobile-sections-toggle.preview-active {
    display: flex;
  }
}

/* ══════════════════════════════════════════════
   VIEWER FULL (layout-viewer) on MEDIUM screens (769 – 1024px)
   ══════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sidebar {
    width: 220px;
    padding: 16px 12px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-item,
  .main-body.split-mode.layout-viewer #viewerPanel .vp-step-item {
    padding: 10px 14px;
    font-size: 11px;
    gap: 10px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-name,
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-count {
    font-size: 12px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-nav-back,
  .main-body.split-mode.layout-viewer #viewerPanel .vp-nav-continue {
    font-size: 13px;
    letter-spacing: 0;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-input {
    font-size: 13px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-title {
    font-size: 17px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-step-title {
    font-size: 14px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-content {
    padding: 18px 20px 28px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-welcome {
    padding-left: 10px;
  }
}

/* ══════════════════════════════════════════════
   VIEWER FULL on MOBILE (≤ 768px)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Viewer-full: sidebar items go full-width vertical list */
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sidebar {
    width: 100%;
    padding: 8px 10px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-item {
    width: 100%;
    flex-shrink: 1;
    border-radius: 8px;
    margin-bottom: 4px;
    padding: 8px 12px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-step-item {
    width: 100%;
    flex-shrink: 1;
    border-radius: 8px;
    margin: 0 0 4px 0;
    padding: 7px 12px;
    white-space: normal;
  }
  /* Smaller type/spacing in viewer on mobile */
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-name,
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-count {
    font-size: 12px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-welcome-actions {
    gap: 10px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-nav-back,
  .main-body.split-mode.layout-viewer #viewerPanel .vp-nav-continue,
  .main-body.split-mode.layout-viewer #viewerPanel .vp-fill-ai-btn {
    font-size: 10px;
    letter-spacing: 0;
    padding: 8px 14px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-sec-title {
    font-size: 16px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-step-title {
    font-size: 13px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-input {
    font-size: 13px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-el-label {
    font-size: 12px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-content {
    padding: 12px 12px 20px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-step-card {
    padding: 14px 12px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-welcome {
    padding-left: 8px;
  }
  .main-body.split-mode.layout-viewer #viewerPanel .vp-chat-user {
    margin-bottom: 35px;
  }
}