/* ==================================================================
   mindmap5.3 · css/shell.css —— 产品壳：顶栏视图开关 / 左工具栏 / 大纲 / 右侧 NaviMD
   ================================================================== */

/* A 常驻导航、B 动态阅读命令、C 右对齐面板共享同一个顶栏。 */
body.shell-ready #menubar {
  display: flex; flex-flow: row nowrap; align-items: center; gap: 10px;
  height: var(--menubar-h); padding: 0 12px; box-sizing: border-box;
  color: var(--ui-text); background: var(--ui-panel); border-bottom: 1px solid var(--ui-border);
  font: var(--ui-font-size)/var(--ui-line-height) var(--ui-font);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.topbar-zone { display: flex; align-items: center; min-width: 0; gap: 3px; }
.topbar-zone-a { flex: none; }
.topbar-zone-b { flex: 1; border-left: 1px solid var(--ui-border); padding-left: 10px; }
.topbar-zone-c { flex: none; margin-left: auto; border-left: 1px solid var(--ui-border); padding-left: 9px; }
.topbar-zone-a .mb-title { margin-right: 2px; }
.topbar-zone-a .mb-title-text { display: none; }
.topbar-zone-a .mb-burger { display: none; }
.topbar-zone-a .mb-item { min-height: var(--ui-control-h); padding-inline: 8px; font-size: 12px; }
.shell-views { display: flex; align-items: center; gap: 3px; min-width: 0; }
.shell-modes {
  display: flex; align-items: center; gap: 1px; padding: 2px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-input-radius); background: transparent;
}
.shell-view {
  appearance: none; flex: none; min-height: var(--ui-control-h); padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--ui-button-radius); background: transparent; color: var(--ui-text);
  cursor: pointer; font: 400 12px/var(--ui-button-line-height) var(--ui-font); white-space: nowrap;
  transition: background var(--ui-motion); touch-action: manipulation;
}
.shell-modes .shell-view { min-height: 28px; padding: 4px 9px; }
.shell-view:disabled { opacity: var(--ui-disabled-opacity); cursor: default; }
.shell-view:hover:not(:disabled) { color: var(--ui-hover-text); background: var(--ui-hover-bg); }
.shell-view:focus-visible { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); box-shadow: var(--ui-focus); }
.shell-view.on, .shell-view[aria-pressed="true"] { color: var(--ui-pressed-text); background: var(--ui-pressed-bg); }
.shell-view[data-shell-view="settings"] { display: none; }

#left-toolbar {
  position: absolute; z-index: 30;
  top: 50%; left: 10px;
  transform: translateY(-50%);
  width: 50px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px;
  border: 1px solid var(--ui-toolbar-border); border-radius: var(--ui-toolbar-radius);
  background: var(--ui-toolbar-bg);
  box-shadow: var(--ui-shadow-toolbar);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
  pointer-events: auto;
  max-height: calc(100% - 24px);
}
#left-toolbar:empty { display: none; }
body.shell-ready #stage {
  /* 只有阅读区分屏影响画布尺寸，大纲和 NaviMD 覆盖在画布上方。 */
  right: var(--reader-right-inset);
  transition: right var(--anim), left var(--anim), background var(--anim);
}

.left-tool {
  appearance: none; display: grid; place-items: center;
  width: var(--ui-toolbar-button-size); min-height: var(--ui-toolbar-button-size); padding: 6px;
  border: 0; border-radius: var(--ui-button-radius);
  background: transparent; color: var(--ui-text); cursor: pointer;
  font: 400 11px/var(--ui-button-line-height) var(--ui-font); touch-action: manipulation;
}
.left-tool svg { width: var(--ui-icon-size); height: var(--ui-icon-size); }
.left-tool:hover:not(:disabled) { color: var(--ui-hover-text); background: var(--ui-hover-bg); }
.left-tool:focus-visible { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); box-shadow: var(--ui-focus); }
.left-tool.on, .left-tool[aria-pressed="true"] {
  color: var(--ui-pressed-text); background: var(--ui-pressed-bg);
}
.left-tool:disabled { opacity: var(--ui-disabled-opacity); cursor: default; }
.left-toolbar-spacer {
  flex: none; width: 20px; height: 1px; margin: 4px 0;
  background: var(--ui-border);
}

/* 大纲覆盖在右侧；宽度可拖拽并记忆，不改变 Reader 视口。 */
#outline-panel {
  position: fixed; z-index: var(--z-outline);
  top: var(--menubar-h); right: 0; bottom: 0;
  width: clamp(280px, var(--outline-w), min(560px, 50vw));
  display: flex; flex-direction: column;
  border-right: 0; border-left: 1px solid var(--ui-border);
  background: var(--ui-panel);
  transform: translateX(110%);
  transition: transform var(--anim);
  box-sizing: border-box;
  color: var(--ui-text); font: var(--ui-font-size)/var(--ui-line-height) var(--ui-font);
}
#outline-panel[hidden] { display: none; }
body.shell-outline-open #outline-panel {
  transform: none;
}
#outline-resizer {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; touch-action: none; z-index: 2;
}
.outline-head {
  display: flex; align-items: center; gap: 8px; flex: none;
  box-sizing: border-box; min-height: var(--ui-panel-header-h); padding: var(--ui-panel-header-padding);
  border-bottom: 1px solid var(--ui-border);
}
.outline-head strong {
  flex: 1; min-width: 0;
  font: 650 14px/var(--ui-line-height) var(--ui-font); color: var(--ui-text);
}
.outline-head button {
  appearance: none; min-height: var(--ui-control-h); padding: var(--ui-button-padding); border: 1px solid transparent;
  border-radius: var(--ui-button-radius); background: transparent; color: var(--ui-text); cursor: pointer;
  font: 400 13px/var(--ui-button-line-height) var(--ui-font);
}
.outline-head button:hover:not(:disabled) { color: var(--ui-accent); background: var(--ui-hover-bg); }
.outline-head button:focus-visible { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); box-shadow: var(--ui-focus); }
.outline-head [data-outline-close] {
  width: var(--ui-icon-button-size); padding: 6px; display: grid; place-items: center;
  font-size: 13px; line-height: 1;
}
.outline-tools {
  flex: none;
  display: grid;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel);
}
.outline-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--ui-input-h);
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-input-radius);
  background: var(--ui-input-bg);
  color: var(--ui-muted);
}
.outline-search:focus-within {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-focus-soft);
}
.outline-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-text);
  font: 400 12px/var(--ui-line-height) var(--ui-font);
}
.outline-levels { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.outline-levels button {
  appearance: none;
  min-height: var(--ui-control-h);
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--ui-button-radius);
  background: transparent;
  color: var(--ui-text);
  font: 400 11px/var(--ui-button-line-height) var(--ui-font);
  cursor: pointer;
}
.outline-levels button:hover:not(:disabled) { color: var(--ui-accent); background: var(--ui-hover-bg); }
.outline-levels button.on, .outline-levels button[aria-pressed="true"] { color: var(--ui-accent); background: var(--ui-pressed-bg); }
.outline-levels [data-outline-copy-rich] { margin-left: auto; color: var(--ui-accent); }
.outline-levels [data-outline-copy] { color: var(--ui-accent); }
.outline-levels button:focus-visible { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); box-shadow: var(--ui-focus); }
.outline-levels button:disabled { opacity: var(--ui-disabled-opacity); cursor: default; }
.outline-tree {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--ui-panel-body-padding);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* NaviMD 与大纲互斥，均覆盖阅读区。
   关闭态 translateX(100%) 会滑到大纲上，必须 visibility:hidden，否则挡住大纲拖宽槽。 */
body.shell-ready #mdpanel {
  left: auto; right: 0; width: var(--outline-w); box-sizing: border-box;
  border-right: 0; border-left: 1px solid var(--ui-border);
  transform: translateX(100%);
}
body.shell-ready #mdpanel:not(.show) {
  visibility: hidden; pointer-events: none;
  z-index: calc(var(--z-outline) - 1);
}
body.shell-ready #mdpanel.show {
  visibility: visible; pointer-events: auto; transform: translateX(0);
}
body.shell-ready #md-resizer { left: -4px; right: auto; }
body.shell-ready #reader-panel { right: 0; }

/* 桌面端：批量 Dock 屏幕水平居中、压在阅读区上层，不随阅读区/大纲让位挪动；
   仅给 MiniMap 留让位。移动端 Dock 贴底通栏，不参与该规则。 */
@media (min-width: 901px) {
  body.shell-ready .batch-dock {
    left: 50%;
    width: max-content;
    max-width: min(var(--batch-dock-max-w), calc(100vw - var(--minimap-reserve, 0px) - 24px));
  }
}

body.shell-ready #zoompop {
  left: calc(var(--left-toolbar-pad) + var(--left-toolbar-w) + 8px);
}

@media (max-width: 900px) {
  body.shell-ready #menubar { gap: 0; padding: 0 8px; }
  .topbar-zone-a { flex: 1; width: 100%; gap: 2px; }
  .topbar-zone-a .mb-title, .topbar-zone-a .mb-burger,
  #topbar-zone-b, #topbar-zone-c { display: none !important; }
  .topbar-zone-a .mb-item { display: block; flex: none; min-width: 44px; height: 44px; padding: 0 6px; font-size: 12px; }
  .shell-views { flex: 1; justify-content: space-between; gap: 0; }
  .shell-view { height: 44px; min-width: 44px; padding: 0 6px; font-size: 12px; }
  .shell-modes { padding: 0; gap: 0; border: 0; }
  .shell-modes .shell-view { height: 44px; }
  .shell-view[data-shell-view="split"], .shell-view[data-shell-view="md"] { display: none; }
  .shell-view[data-shell-view="settings"] { display: block; }
  /* 手机共用顶栏常驻，Reader 与设置标题从顶栏下方开始。 */
  body.shell-ready.reader-touch-experimental #reader-panel {
    top: var(--menubar-h); height: calc(100dvh - var(--menubar-h)); padding-top: 0;
  }
  body.reader-mode-reader-only #mobilebar { display: none; }
  #left-toolbar {
    display: none;
  }
  /* 移动端大纲改为右侧覆盖抽屉，不挤压画布。 */
  #outline-panel {
    right: 0; width: min(var(--outline-w), 94vw) !important;
    z-index: calc(var(--z-mdpanel) + 1);
    box-shadow: var(--ui-shadow-aux);
  }
  #outline-resizer { display: none; }
  .outline-tools { padding: 12px 16px; }
  .outline-search { min-height: 44px; }
  .outline-search input { height: 100%; }
  .outline-head button { width: 44px; height: 44px; }
  .outline-levels button { min-height: 44px; padding-inline: 10px; }
  .outline-levels [data-outline-copy-rich] { margin-left: 0; }
  body.shell-ready #zoompop {
    left: 10px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #left-toolbar {
    background: var(--ui-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

body.reader-mode-reader-only #left-toolbar { display: none; }

/* 仅六项主工具；缩放命令按需展开，仍在脑图 Pane 内。 */
.left-zoom-tools {
  position: absolute; left: calc(100% + 8px); top: -1px; bottom: -1px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px;
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  border-radius: var(--ui-popover-radius); box-shadow: var(--ui-shadow);
}
/* 贴齐工具栏外边框，刻度轨道填满百分比与适应按钮之间的空间。 */
.left-zoom-tools .zoom-scale-control { flex: 1; min-height: 0; height: auto; }
.left-zoom-tools .zoom-scale-input { height: calc(100% - 6px); }
.left-zoom-tools .zoom-scale-ticks { height: calc(100% - 22px); }
.left-zoom-tools > .left-tool { flex-shrink: 0; }
.left-zoom-tools[hidden] { display: none; }
body.shell-ready #mdpanel, #outline-panel { box-shadow: var(--ui-shadow-aux); }
@media (min-width: 901px) and (max-width: 1280px) {
  body.shell-ready #menubar { gap: 8px; padding-inline: 10px; }
  .topbar-zone-a { gap: 1px; }
  .topbar-zone-a .mb-item { padding-inline: 7px; }
}
@media (max-width: 359px) {
  body.shell-ready #menubar { padding-inline: 2px; }
  .shell-view, .topbar-zone-a .mb-item { padding-inline: 3px; }
}