/* ═══════════════════════════════════════════════════════════
   納赫允魔導書 V28 · AppShell Layout
   ═══════════════════════════════════════════════════════════
   桌面：grid 三欄，TopBar 黏頂，BottomDock 黏底
   平板：LeftRail 可收合
   手機：LeftRail 變 BottomNav，RightInspector 變全螢幕 drawer
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-main);
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei",
               "Noto Sans TC", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  overflow: hidden;       /* AppShell 自己控制 scroll */
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────
   AppShell 主格線
   ───────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-areas:
    "topbar  topbar  topbar"
    "rail    main    inspector"
    "rail    dock    inspector";
  grid-template-columns: var(--leftrail-w) minmax(0, 1fr) var(--rightinspector-w);
  /* V28.102 dock row 改 auto：dock 只在對話工作台顯示，其他頁 display:none 時
     row 自動收成 0（原本固定 --bottomdock-h → 每一頁底部都有 120px 黑邊）。
     dock 顯示時的高度由 .dock 的 min-height 保證。 */
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  background: var(--bg-base);
  position: relative;
  z-index: var(--z-base);
}

/* 收合 LeftRail 時 */
.app-shell.rail-collapsed {
  grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr) var(--rightinspector-w);
}
/* 收合 RightInspector 時 */
.app-shell.inspector-hidden {
  grid-template-columns: var(--leftrail-w) minmax(0, 1fr) 0;
}
.app-shell.inspector-hidden.rail-collapsed {
  grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr) 0;
}

/* ─────────────────────────────────────────────────────────────
   TopBar
   ───────────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  padding: 0 var(--gap-4);
  background: linear-gradient(to bottom, #0B0A0E, var(--bg-base));
  border-bottom: 1px solid var(--border);
  z-index: var(--z-topbar);
  box-shadow: 0 1px 0 rgba(196, 154, 83, 0.05);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  min-width: 220px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  color: var(--gold);
  font-size: var(--fs-h3);
}

.topbar-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 36px;
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0 var(--gap-3) 0 36px;
  color: var(--text-main);
  font-size: var(--fs-body);
  outline: none;
  transition: border-color var(--t-fast);
}
.topbar-search input:focus { border-color: var(--cyan-dim); }
.topbar-search::before {
  content: '⌕';
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 16px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-left: auto;
}

/* TopBar 上的模型狀態徽章 */
.topbar-model {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 6px var(--gap-3);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.topbar-model .label { color: var(--text-faint); font-size: var(--fs-tiny); }
.topbar-model .value { color: var(--gold-soft); font-weight: var(--fw-bold); }
.topbar-model .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

/* ─────────────────────────────────────────────────────────────
   LeftRail — 一級導航
   ───────────────────────────────────────────────────────────── */
.leftrail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.leftrail::-webkit-scrollbar { width: 6px; }
.leftrail::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 3px; }

.leftrail-section {
  padding: var(--gap-4) var(--gap-3);
}
.leftrail-section-title {
  font-size: var(--fs-tiny);
  letter-spacing: var(--ls-extra);
  color: var(--text-faint);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  margin-bottom: var(--gap-2);
  padding: 0 var(--gap-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: 10px var(--gap-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  background: transparent;
  transition: all var(--t-fast);
  user-select: none;
  margin-bottom: 2px;
}
.nav-item:hover {
  background: var(--bg-card);
  color: var(--text-main);
}
.nav-item .icon {
  width: 18px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}
.nav-item .label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item .badge {
  font-size: var(--fs-tiny);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text-faint);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--gold-bg), transparent);
  border-color: var(--gold-line);
  color: var(--gold-soft);
  box-shadow: var(--shadow-glow-gold);
}
.nav-item.active .icon { color: var(--gold); }

.nav-item.kind-magic.active {
  background: linear-gradient(135deg, var(--purple-bg), transparent);
  border-color: var(--purple-line);
  color: var(--purple-soft);
  box-shadow: var(--shadow-glow-purple);
}

.rail-collapsed .nav-item .label,
.rail-collapsed .nav-item .badge,
.rail-collapsed .leftrail-section-title { display: none; }
.rail-collapsed .nav-item { justify-content: center; padding: 10px; }

/* LeftRail 底部「專案資訊」區 */
.leftrail-footer {
  margin-top: auto;
  padding: var(--gap-3);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-tiny);
  color: var(--text-faint);
}

/* ─────────────────────────────────────────────────────────────
   CenterWorkspace — 主工作區
   ───────────────────────────────────────────────────────────── */
.workspace {
  grid-area: main;
  background: var(--bg-base);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.workspace::-webkit-scrollbar { width: 8px; }
.workspace::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 4px; }

.workspace-inner {
  /* V28.102 吃滿可用寬度：原本 1400px 置中，寬螢幕左右各留 100px+ 黑邊 */
  max-width: none;
  margin: 0 auto;
  padding: var(--gap-4) var(--gap-6) var(--gap-8);
}

/* 模組之間的 view 互斥（套用 47-view-switcher 的 data-view 思路） */
.workspace [data-module-view] { display: none; }
.workspace [data-module-view].active { display: block; }

/* WorkflowStepper — 中間頂部那條流程條 */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--gap-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

.step {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.step:hover { color: var(--text-main); border-color: var(--gold-line); }
.step.active {
  background: linear-gradient(135deg, var(--purple-bg), transparent);
  border-color: var(--purple-line);
  color: var(--purple-soft);
}
.step .icon { font-size: 14px; }
.step-arrow { color: var(--text-faint); user-select: none; flex-shrink: 0; }

/* 中間「三區」對話工作台 — A 知識來源 / B 對話 / C 摘要 */
.split-3 {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: var(--gap-4);
  height: 100%;
  min-height: 480px;
}
.split-3 > .pane {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border-soft);
}
.pane-head .title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  color: var(--gold-soft);
}
.pane-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-3);
}
.pane-tag {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  background: var(--bg-elevated);
  color: var(--gold);
  border: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────
   RightInspector — 設定 / 調參
   ───────────────────────────────────────────────────────────── */
.inspector {
  grid-area: inspector;
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
  display: flex;
  flex-direction: column;
}
.inspector::-webkit-scrollbar { width: 6px; }
.inspector::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 3px; }

.inspector-head {
  position: sticky;
  top: 0;
  background: var(--bg-deep);
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.inspector-head .title {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  color: var(--gold);
  font-weight: var(--fw-black);
}

.inspector-section {
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border-soft);
}
.inspector-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-3);
  cursor: pointer;
  user-select: none;
}
.inspector-section-head .label {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  letter-spacing: 0.08em;
}
.inspector-section-head .label .ico { color: var(--purple); }
.inspector-section-head .expand-btn {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  width: 22px; height: 22px;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--t-fast);
}
.inspector-section-head .expand-btn:hover {
  border-color: var(--gold-line);
  color: var(--gold);
}

.inspector-section.collapsed .inspector-section-body { display: none; }

/* compact slider */
.compact-slider {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  padding: var(--gap-2) 0;
}
.compact-slider .slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.compact-slider .slider-row .val {
  color: var(--gold-soft);
  font-family: ui-monospace, monospace;
  font-weight: var(--fw-bold);
}
.compact-slider input[type=range] {
  width: 100%;
  accent-color: var(--purple);
  height: 4px;
}

/* StatusPill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.pill.ok { background: rgba(16, 185, 129, 0.1); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.3); }
.pill.warn { background: rgba(245, 158, 11, 0.1); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.3); }
.pill.err { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-dim); }
.pill.info { background: var(--cyan-bg); color: var(--cyan); border: 1px solid var(--cyan-line); }
.pill.gold { background: var(--gold-bg); color: var(--gold-soft); border: 1px solid var(--gold-line); }

/* ─────────────────────────────────────────────────────────────
   BottomDock — 輸入與生成
   ───────────────────────────────────────────────────────────── */
.dock {
  grid-area: dock;
  background: linear-gradient(to top, var(--bg-deep), var(--bg-base));
  border-top: 1px solid var(--border);
  padding: var(--gap-3) var(--gap-4);
  display: flex;
  gap: var(--gap-3);
  align-items: stretch;
  /* V28.102 grid row 改 auto 後，顯示時仍維持原本高度 */
  min-height: var(--bottomdock-h);
}

.dock-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.dock-input .input-row {
  flex: 1;
  display: flex;
  gap: var(--gap-2);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--gap-2);
  transition: border-color var(--t-fast);
}
.dock-input .input-row:focus-within { border-color: var(--purple-line); }
.dock-input textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 4px var(--gap-2);
  min-height: 56px;
}
.dock-input .quick-cmds {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
.dock-input .quick-cmd {
  font-size: var(--fs-tiny);
  padding: 4px var(--gap-2);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.dock-input .quick-cmd:hover {
  color: var(--purple-soft);
  border-color: var(--purple-line);
}

.dock-meter {
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--gap-3);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dock-meter .row {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-tiny);
}
.dock-meter .row .v {
  color: var(--gold-soft);
  font-weight: var(--fw-bold);
}
.dock-meter .title {
  font-size: var(--fs-tiny);
  color: var(--text-faint);
  letter-spacing: var(--ls-wide);
  margin-bottom: 2px;
}

.dock-execute {
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(135deg, #2A1A4A, #1A0A2E);
  border: 1px solid var(--purple-line);
  border-radius: var(--radius-lg);
  color: var(--purple-soft);
  cursor: pointer;
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-wide);
  transition: all var(--t-fast);
  box-shadow: var(--shadow-glow-purple);
}
.dock-execute:hover {
  background: linear-gradient(135deg, #3A2560, #2A1040);
  color: #E9D5FF;
}
.dock-execute .ico { font-size: 24px; }
.dock-execute .hint { font-size: var(--fs-tiny); font-weight: var(--fw-regular); color: var(--text-faint); }

/* ─────────────────────────────────────────────────────────────
   Drawer（從右滑出）
   ───────────────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal);
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-strong);
  z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%);
  transition: transform var(--t-normal) var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border);
}
.drawer-head .title { font-weight: var(--fw-black); color: var(--gold-soft); letter-spacing: var(--ls-wide); }
.drawer-head .close { background: transparent; border: none; color: var(--text-faint); font-size: 22px; cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--gap-4); }

.drawer.wide { width: 640px; }

/* ─────────────────────────────────────────────────────────────
   FocusModal（全螢幕 80%）
   ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}
.modal-overlay.open { display: flex; }

.focus-modal {
  width: 90vw;
  height: 90vh;
  max-width: 1400px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.focus-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--gap-4) var(--gap-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.focus-modal-head .title { font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--gold); letter-spacing: var(--ls-wide); }
.focus-modal-head .close {
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 18px;
}
.focus-modal-body { flex: 1; overflow: auto; padding: var(--gap-6); }

/* ─────────────────────────────────────────────────────────────
   通用元件 — Card / Button / Input
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-4);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--gap-3);
}
.card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: 0.05em;
  color: var(--text-strong);
}

button.btn {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-main);
  padding: 6px var(--gap-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: all var(--t-fast);
}
button.btn:hover { border-color: var(--gold-line); color: var(--gold-soft); }
button.btn.gold { border-color: var(--gold-line); color: var(--gold-soft); background: var(--gold-bg); }
button.btn.purple { border-color: var(--purple-line); color: var(--purple-soft); background: var(--purple-bg); }
button.btn.danger { border-color: var(--red-dim); color: var(--red); background: var(--red-bg); }
button.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.input, .select, textarea.input {
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-main);
  padding: 6px var(--gap-3);
  font-size: var(--fs-body);
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast);
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--purple-line); }

/* ─────────────────────────────────────────────────────────────
   響應式
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --rightinspector-w: 300px; }
}

/* 平板：右側變抽屜 */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-areas:
      "topbar  topbar"
      "rail    main"
      "rail    dock";
    grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr);
  }
  .inspector {
    grid-area: unset;
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    width: 360px;
    height: calc(100vh - var(--topbar-h));
    transform: translateX(100%);
    transition: transform var(--t-normal);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-lg);
  }
  .app-shell.inspector-open .inspector { transform: translateX(0); }
  .leftrail .nav-item .label,
  .leftrail .nav-item .badge,
  .leftrail .leftrail-section-title { display: none; }
  .leftrail .nav-item { justify-content: center; }
  .split-3 { grid-template-columns: 1fr; grid-auto-rows: minmax(200px, auto); }
}

/* 手機：底部 nav，center 單欄 */
@media (max-width: 720px) {
  :root { --bottomdock-h: 92px; }
  .app-shell {
    grid-template-areas:
      "topbar"
      "main"
      "dock"
      "rail";
    grid-template-columns: 1fr;
    /* V28.102 同桌面版：dock row 改 auto，隱藏時不留黑邊 */
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) auto 56px;
  }
  .leftrail {
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .leftrail-section-title, .leftrail-footer { display: none; }
  .leftrail-section { display: flex; padding: var(--gap-2); }
  .nav-item { flex-shrink: 0; padding: 8px 12px; }
  .topbar-search { max-width: 200px; }
  .topbar-brand { min-width: unset; font-size: var(--fs-caption); }
  .dock { flex-wrap: wrap; height: auto; }
  .dock-meter { display: none; }
  .dock-execute { width: 100%; height: 48px; flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════
   §99. Legacy Staging Area & V27.11 Panel Migration Reset
   ═══════════════════════════════════════════════════════════
   讓舊 v27.11 panel 搬進 V28 shell 的新容器後不會視覺壞掉。
   這部分原本在 build-shell-embed.py 的 STAGING_STYLE，現在直接寫進
   layout.css，這樣 Node 跑的 build-embed-single.js 也能正確 inline。
   ═══════════════════════════════════════════════════════════ */

/* staging area · 物理可達（getElementById 仍能找到所有 ID），
   但 visibility:hidden 會繼承到所有子元素（含 position:fixed 的
   loading-overlay / err-toast / 主 header 等）— 這是 opacity:0 做不到的，
   因為 opacity 不繼承而且 fixed 子元素會建立新 stacking context 逃離 parent opacity。 */
#legacy-staging-area {
  position: absolute !important;
  left: -99999px !important; top: 0 !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 已搬到 V28 shell 內的 panel 取消上面所有限制 */
.app-shell [id$="-panel-wrap"],
.app-shell #api-panel-body,
.app-shell #codex-panel-wrap,
.app-shell #style-panel-wrap,
.app-shell #name-summon-panel {
  position: static !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: block !important;
}

/* 原 body 在 V25 用 max-w-6xl/mx-auto/mt 等 Tailwind class，
   搬進新 slot 後容器尺寸已換，需要 reset 讓它跟著 slot 走 */
.app-shell .max-w-6xl { max-width: none !important; }

/* RightInspector 內搬進來的 panel：reset margin/padding */
.inspector #style-panel-wrap,
.inspector [class*="max-w-"] {
  margin: 0 !important;
  padding: 0 !important;
}
.inspector #style-panel-wrap > div {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Inspector 內所有 svg / 裝飾性 ascii art 限制大小 — 避免巨大幾何圖示佔版面 */
.inspector svg {
  max-width: 100% !important;
  max-height: 32px !important;
}
.inspector pre,
.inspector .style-decoration {
  max-height: 80px !important;
  overflow: hidden !important;
  font-size: 9px !important;
}
.inspector #logic-axis-wrap > div:has(svg),
.inspector #chuuni-axis-wrap > div:has(svg),
.inspector #meme-axis-wrap > div:has(svg),
.inspector .text-center.py-8 {
  display: none !important;
}

/* 為 staging area 內的舊 V25 header / footer / safelist 不顯示 */
#legacy-staging-area .sl,
#legacy-staging-area > footer { display: none !important; }
/* header 不隱藏 — 由 migration.js 搬到 #slot-summon-stage 上方 */

/* 通用：舊 panel 內所有 svg 預設上限（避免搬到新容器後沒約束變超大） */
#slot-summon-stage svg,
#slot-summon-namesummon svg,
#slot-codex svg,
#slot-worldbook-lore svg,
#slot-settings-api svg,
#slot-inspector-narrative svg {
  max-width: 100% !important;
  max-height: 64px !important;
}

/* 但 toggle button 內的圖示要更小（避免大方塊感） */
[id^="slot-"] button svg,
[id^="slot-"] label svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

/* 設定面板內的 input/select 寬度給足 */
#slot-settings-api input[type="text"],
#slot-settings-api input[type="password"],
#slot-settings-api input[type="number"],
#slot-settings-api select {
  width: 100% !important;
  max-width: 100% !important;
}
#slot-settings-api .grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   §100. V28.1 補強：隱藏 dialogue-section 內重複的世界書/知識庫按鈕
   ═══════════════════════════════════════════════════════════
   原因：這兩個功能已搬到右側 Inspector 集中管理（避免使用者困惑於
        為何畫面上有兩個世界書按鈕但點起來進不同地方）。原 onclick
        函式（toggleKnowledgeBase / openWorldbookManager）仍可用，
        Inspector 按鈕也是呼叫它們。 */

/* 對話面板右上角工具列上的「📄 知識庫」「📚 世界書」按鈕 */
.app-shell #dialogue-section button[onclick="toggleKnowledgeBase()"],
.app-shell #dialogue-section button[onclick="openWorldbookManager()"] {
  display: none !important;
}

/* dialogue-section 第二個 openWorldbookManager 是 row 2224「角色卡庫」內的，留著 */

/* ═══════════════════════════════════════════════════════════
   §101. V28.2 重構：對話工作台 UI 分層
   ═══════════════════════════════════════════════════════════
   目標：中間主區只負責「跟誰聊天 + 對話訊息」，
        所有設定 UI 全部移到右側 Inspector。

   策略：CSS 隱藏，不刪 DOM（呼叫的函式仍可用），
        讓 Inspector 透過呼叫舊函式間接控制。
   ═══════════════════════════════════════════════════════════ */

/* ── 隱藏展開式設定面板（佔大量畫面） ── */
.app-shell #dialogue-section #dialogue-tone-panel,
.app-shell #dialogue-section #dialogue-narrative-panel,
.app-shell #dialogue-section #dialogue-sampling-panel,
.app-shell #dialogue-section #dialogue-search-panel {
  display: none !important;
}

/* ── 隱藏對話控制列上「設定類」按鈕（搬到 Inspector）── */
.app-shell #dialogue-section button[onclick="toggleDialogueSampling()"],
.app-shell #dialogue-section button[onclick="toggleDialogueTonePanel()"],
.app-shell #dialogue-section button[onclick="toggleDialogueNarrativePanel()"],
.app-shell #dialogue-section button[onclick="toggleDialogueSearch()"] {
  display: none !important;
}

/* ── 隱藏多餘的對話對象按鈕（你只要 3 個入口：當前/角色卡/群聊）── */
.app-shell #dialogue-section #dialogue-mode-library,
.app-shell #dialogue-section #dialogue-mode-persona {
  display: none !important;
}

/* ── 隱藏 Persona 面板（搬到 Inspector）── */
/* 注意：persona-panel 仍透過 dialogueSetMode('persona') 觸發顯示，
   但模式按鈕已隱藏，所以使用者進不來；只有 Inspector 主動呼叫才會顯示 */
.app-shell #dialogue-section #dialogue-persona-panel {
  display: none !important;
}

/* ── 對話控制列簡化：分兩排，常用功能優先 ── */
/* (CSS 不能改 button 順序，但可以縮小不重要按鈕視覺權重) */

/* ── chat-box 高度給足，現在主畫面只有對話對象 + 訊息 ── */
.app-shell #dialogue-section #dialogue-messages {
  max-height: calc(100vh - 360px) !important;
  min-height: 320px !important;
}

/* ── 隱藏 chat-box 下方那塊巨大的 reveal 工具列（已搬走的東西的 ×關閉按鈕容器）── */
/* 這個保留：因為健康檢查、SillyTavern 匯出等不該搬走 */

/* ── Active Target Card 樣式（character-card 已經是 v27 的，加強視覺）── */
.app-shell #dialogue-section #dialogue-character-card {
  background: linear-gradient(135deg, rgba(34,211,238,0.05), rgba(139,92,246,0.05)) !important;
  border: 1px solid var(--cyan-line) !important;
}

/* §102. Accordion 視覺：collapsed 時 ▾ 轉 90 度（變 ▸ 樣） */
.inspector-section[data-acc] .inspector-section-head {
  transition: background var(--t-fast);
  border-radius: var(--radius-md);
  margin: -4px -4px 0;
  padding: 8px;
}
.inspector-section[data-acc] .inspector-section-head:hover {
  background: rgba(196, 154, 83, 0.06);
}
.inspector-section[data-acc] .expand-btn {
  transition: transform var(--t-normal);
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
}
.inspector-section[data-acc].collapsed .expand-btn {
  transform: rotate(-90deg);
  color: var(--text-faint) !important;
}
.inspector-section[data-acc]:not(.collapsed) .expand-btn {
  color: var(--gold-soft) !important;
}

/* ═══════════════════════════════════════════════════════════
   §103. V28.3 對話工作台終極清理
   ═══════════════════════════════════════════════════════════
   問題：v27.11 對話面板原本就有：
     - 對話輸入框（#dialogue-input + #dialogue-send-btn）
     - 訊息控制列上的 token/context 顯示
     - UI 主題切換 panel（#theme-panel）
   這些跟 V28 的 BottomDock + Inspector 功能重複。
   策略：CSS 隱藏，但保留 DOM 跟 ID（dialogue/30 內部 polling 還會用到）。
   ═══════════════════════════════════════════════════════════ */

/* ── ❶ 隱藏舊版輸入框與送出按鈕（V28 BottomDock 已取代）── */
/* 但是！v27.11 原本就靠這個輸入框送訊息，dialogueSendMessage 是綁這顆送出按鈕。
   所以不能完全隱藏 — 要保留功能但縮小到 BottomDock 下方變成「次級輸入備援」。
   方案：純 CSS 把它「視覺上不顯眼」，內部 #dialogue-input 仍可被 dock-execute 觸發。 */
/* 經評估：保留好了，因為使用者熟悉這個位置；只是把 token/context 顯示拿掉（重複） */

/* ── ❷ 隱藏中間對話區的 token/context 顯示（已在 BottomDock 顯示）── */
.app-shell #dialogue-section #dialogue-token-estimate,
.app-shell #dialogue-section #dialogue-token-context {
  display: none !important;
}
/* 但保留「當前對話：~200 tokens」那一行的整個 wrapper（在 input row 下方）
   因為它還包了「Context: 200 / 2,000,000 (0%)」百分比進度條，刪掉會讓使用者
   看不到上下文用量警告 → 改用：把整行縮小成迷你版 */

/* ── ❸ 隱藏 UI 主題切換按鈕 + 預設關閉 theme-panel ── */
/* 主題切換不該在對話工作台主畫面，搬到右上角設定 */
.app-shell #dialogue-section button[onclick="toggleThemePanel()"] {
  display: none !important;
}
/* theme-panel 強制收合（對話模組進來時不該開著）*/
.app-shell #theme-panel {
  display: none !important;
}

/* ── ❹ V28 BottomDock 才是主要輸入區 — 確保它顯眼 ── */
.app-shell .dock-execute {
  z-index: 10 !important;
}

/* ── ❺ Inspector accordion 預設行為調整：第 3 (Persona) 跟第 4 (世界書) 也預設收合 ── */
/* JS 啟動時自動加 collapsed class 給 §3, §4，與其他保持一致 */

/* ═══════════════════════════════════════════════════════════
   §104. V28.4 召喚工坊 header 整理（125 矩陣搬進來後）
   ═══════════════════════════════════════════════════════════ */

/* 限制搬進來的 header 內 svg 大小（避免巨大 ∞ 之類符號占滿畫面）*/
#slot-summon-controls svg {
  max-width: 24px !important;
  max-height: 24px !important;
}
/* 但 R1/R2/R3 下拉箭頭那 12px 不要被影響，沒 svg 是純文字 ▾ */

/* 隱藏 header 內的 V25 主標題（已在 V28 上方顯示「召喚工坊」）*/
#slot-summon-controls h1 {
  display: none !important;
}
/* 隱藏「125 萬象矩陣 · 三相共在神話顯化」副標題下面的橫線 */
#slot-summon-controls .text-center > div + div + div { /* h-px 線 */
  display: none !important;
}

/* header 內整個 wrapper 用新容器尺寸 */
#slot-summon-controls > header {
  padding: 0 !important;
  margin: 0 !important;
}
#slot-summon-controls .max-w-6xl,
#slot-summon-controls .rounded-\[2\.5rem\] {
  max-width: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
}

/* 啟動宇宙矩陣推演按鈕：保留 glow，是主 CTA */
#slot-summon-controls button[onclick="handleExecuteSummon()"] {
  margin-top: 8px !important;
}

/* 確保 workspace 內容底部留空間給 BottomDock，免被蓋到 */
.app-shell .workspace-inner {
  padding-bottom: 60px !important;
}

/* ═══════════════════════════════════════════════════════════
   §105. V28.5 隱藏中間區的重複跳轉 UI
   ═══════════════════════════════════════════════════════════
   信甫指令：
   - 47-view-switcher 的「⚛ 宇宙推演 / 💬 納赫允對話 / 🍺 酒館助手」tabbar
     → 拿掉（LeftRail 已有 3 個對應入口）
   - 47-view-switcher 注入的「💬 納赫允對話」大按鈕在召喚工坊中央
     → 拿掉（重複入口）
   - 儀表板模式不該顯示 BottomDock（沒對話情境）
   ═══════════════════════════════════════════════════════════ */

/* 隱藏 47-tabbar（中間那條 ⚛ 宇宙推演 / 💬 納赫允對話 / 🍺 酒館助手）*/
.app-shell #naheryu-tabbar {
  display: none !important;
}

/* 隱藏 47-view-switcher 注入到召喚工坊中央的「💬 納赫允對話」跳轉按鈕 */
.app-shell #naheryu-dialog-quickbtn {
  display: none !important;
}

/* 儀表板模式：隱藏 BottomDock（沒對話情境，input/exec 沒用）*/
.app-shell:has([data-module-view="dashboard"].active) .dock {
  display: none !important;
}
/* 後備：如果瀏覽器不支援 :has，用 JS 控制（shell.js showModule 內加） */

/* 痕跡之書 / 世界書 / 角色圖鑑 / 設定 / 輸出 模組也不需要 BottomDock */
.app-shell:has([data-module-view="codex"].active) .dock,
.app-shell:has([data-module-view="worldbook"].active) .dock,
.app-shell:has([data-module-view="charlib"].active) .dock,
.app-shell:has([data-module-view="settings"].active) .dock,
.app-shell:has([data-module-view="export"].active) .dock {
  display: none !important;
}

/* V28.8 Dialogue Desk: make the chat desk one continuous workspace.
   The dialogue composer is the only send surface; the global BottomDock is hidden. */
.app-shell.shell-module-dialogue {
  grid-template-areas:
    "topbar  topbar  topbar"
    "rail    main    inspector"
    "rail    main    inspector";
}

.app-shell.shell-module-dialogue .dock,
.app-shell:has([data-module-view="dialogue"].active) .dock {
  display: none !important;
}

.app-shell.shell-module-dialogue .workspace {
  overflow: hidden;
}

.app-shell.shell-module-dialogue .workspace-inner {
  max-width: none !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.app-shell.shell-module-dialogue [data-module-view="dialogue"].active {
  display: none !important;
}

.app-shell.shell-module-dialogue #slot-main-stage {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.app-shell.shell-module-dialogue #result-area {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.app-shell.shell-module-dialogue #result-area > [data-view]:not([data-view="dialogue"]) {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 14px 18px 16px !important;
}

.app-shell.shell-module-dialogue #dialogue-section > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-section > div:first-child {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section > div:nth-of-type(2) {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section > div:nth-of-type(2) > div:first-child {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(196, 154, 83, 0.18);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.30);
}

.app-shell.shell-module-dialogue #dialogue-character-card {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-chat-box {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

.app-shell.shell-module-dialogue #dialogue-messages {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 18px 22px 20px !important;
  border: 1px solid rgba(196, 154, 83, 0.18);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.16)),
    radial-gradient(circle at 50% 20%, rgba(34,211,238,0.045), transparent 42%);
}

.app-shell.shell-module-dialogue #dialogue-chat-box > .border-t {
  flex: 0 0 auto;
  padding: 12px 18px 14px !important;
  border: 1px solid rgba(196, 154, 83, 0.20) !important;
  border-top-color: rgba(168, 85, 247, 0.30) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,6,10,0.92), rgba(0,0,0,0.72));
  box-shadow: 0 -18px 36px rgba(0,0,0,0.28);
}

.app-shell.shell-module-dialogue #dialogue-worldbook-runtime-status {
  margin: 0 0 8px !important;
  border-color: rgba(196, 154, 83, 0.22) !important;
  background: rgba(0,0,0,0.36) !important;
}

.app-shell.shell-module-dialogue #dialogue-input {
  min-height: 54px;
  max-height: 140px;
  border-color: rgba(168, 85, 247, 0.56) !important;
  background: rgba(0,0,0,0.54) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.app-shell.shell-module-dialogue #dialogue-input:focus {
  border-color: rgba(34, 211, 238, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.16), 0 0 22px rgba(34,211,238,0.10);
}

.app-shell.shell-module-dialogue #dialogue-send-btn {
  min-height: 54px;
}

.app-shell.shell-module-dialogue #dialogue-section #dialogue-token-estimate,
.app-shell.shell-module-dialogue #dialogue-section #dialogue-token-context {
  display: inline !important;
}

/* V28.9 Summon Workshop: formula workspace only.
   The global BottomDock is a dialogue surface and is hidden here. */
.app-shell.shell-module-summon {
  grid-template-areas:
    "topbar  topbar  topbar"
    "rail    main    inspector"
    "rail    main    inspector";
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) 0;
}

.app-shell.shell-module-summon .dock,
.app-shell:has([data-module-view="summon"].active) .dock {
  display: none !important;
}

.app-shell.shell-module-summon .workspace {
  overflow-y: auto;
}

.app-shell.shell-module-summon .workspace-inner {
  padding-bottom: var(--gap-4) !important;
}

.app-shell.shell-module-summon #slot-main-stage {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .app-shell.shell-module-dialogue {
    grid-template-areas:
      "topbar"
      "main"
      "rail";
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) 56px;
  }

  .app-shell.shell-module-dialogue #dialogue-section {
    padding: 10px !important;
  }

  .app-shell.shell-module-dialogue #dialogue-messages {
    padding: 14px !important;
  }

  .app-shell.shell-module-dialogue #dialogue-chat-box > .border-t {
    padding: 10px !important;
  }
}

@media (max-width: 900px) {
  .app-shell.shell-module-summon {
    grid-template-areas:
      "topbar"
      "main"
      "rail";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) 56px;
  }
}