/**
 * 外壳布局（M4-G-2，agents.md 4.5 的参考布局 + 4.2 的可调面板 + 4.4 的克制视觉）。
 *
 * 禁止事项里写着「业务逻辑里不许硬编码面板像素与颜色」——所以画布内的一切颜色住在
 * `src/render/theme.ts`，画布外的一切尺寸与颜色住在这里，两边不共享常量：换皮肤不该让求值或绘制
 * 变一个像素，反过来改求值也不该动这里的一个字节。
 *
 * 但**面板的尺寸不在这里写死**：`--tools-w` / `--dock-w` / `--props-h` / `--objects-h` 四个变量
 * 由 `chrome.ts` 从 `UiPrefs` 写进来（4.2 的「位置与尺寸存在用户偏好里」）。这个文件只定义
 * 「有这些变量时怎么排」，以及它们的折叠 / 隐藏态长什么样。画布区域永远是中间那一格，
 * `fitCanvas()` 靠 `clientWidth/clientHeight` 量它，所以布局怎么改都不用动代码。
 *
 * 视觉按 4.4：不用渐变与阴影堆叠（浮层除外——它必须看得出浮在谁上面），不做动画，
 * 配色只一套中性深色 + 一个强调色，对象列表靠色点与等宽类型名分层次而不是靠线框——列表是扁平的，
 * 对象之间是依赖关系不是父子关系，画成缩进的树会让人以为拖动父对象会带走孩子。
 */

:root {
  --bg: #1d2126;
  --panel: #262b32;
  --panel-2: #2d333b;
  --line: #333a43;
  --ink: #d7dce3;
  --ink-dim: #98a2b0;
  --accent: #4d9ce8;
  --danger: #e0655f;
  --rail-w: 44px;
  --split: 5px;
  --menu-h: 30px;
  --tab-h: 28px;
  --strip-h: 26px;
  --gap: 8px;
  /* 4.4 的「面板展开 150–200ms」取 180ms。动效时长是界面量，跟面板像素一样只许写在这一层（禁止事项 4） */
  --motion: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: system-ui, "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  /* 4.3 的「无惯性、跟手」：外壳自己处理手势，别让浏览器的默认滚动与双击缩放插手 */
  overscroll-behavior: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="separator"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ 骨架 */

#app {
  --tools-live: var(--tools-w, 120px);
  --props-live: var(--props-h, 360px);
  --objects-live: var(--objects-h, 240px);
  --dock-live: var(--dock-w, 260px);
  display: grid;
  height: 100%;
  grid-template-columns: var(--rail-w) var(--tools-live) var(--split) minmax(0, 1fr) var(--split) var(--dock-live);
  grid-template-rows: var(--menu-h) var(--tab-h) minmax(0, 1fr) var(--strip-h);
  grid-template-areas:
    "menu menu menu  menu  menu  dock"
    "tabs tabs tabs  tabs  tabs  dock"
    "rail tools sv1  stage sv2 dock"
    "strip strip strip strip strip strip";
  /* 折叠 / 展开走 180ms（4.4）。分隔条拖动时必须没有这条（见下面 `.resizing`）：
     拖动是连续输入，跟着 180ms 的尾巴只会看起来像卡顿，那正是 4.4 说的「滥用」 */
  transition: grid-template-columns var(--motion) var(--ease), grid-template-rows var(--motion) var(--ease);
}

#app.resizing,
#app.resizing .dock > .panel {
  transition: none;
}

.menubar {
  grid-area: menu;
}
.tabbar {
  grid-area: tabs;
}
.rail {
  grid-area: rail;
}
.tools {
  grid-area: tools;
}
#split-tools {
  grid-area: sv1;
}
#stage {
  grid-area: stage;
}
#split-dock {
  grid-area: sv2;
}
.dock {
  grid-area: dock;
}
.strip {
  grid-area: strip;
}

/* 区带显隐（`UiPrefs.chrome`）：整条收掉而不是留一根空槽 */
.hidden {
  display: none !important;
}

/* 上面那句只让元素消失，网格那一格还留着 30 / 28 / 26 px 的空槽——「收掉」因此必须是两件事：
   元素不给显示，轨道也不给宽度。`:has()` 让轨道跟着子元素的显隐塌下去（画布因此真的长满，而不是多一条黑边） */
#app:has(> .menubar.hidden) {
  --menu-h: 0px;
}
#app:has(> .tabbar.hidden) {
  --tab-h: 0px;
}
#app:has(> .strip.hidden) {
  --strip-h: 0px;
}

/* 折叠 = 内容不给位置，但图标栏留着——4.1 要求「隐藏后也能一次点开」，图标栏就是那一次点击 */
#app.fold-tools,
#app.hide-tools {
  --tools-live: 0px;
}
#app.fold-properties {
  --props-live: 0px;
}
#app.fold-objects {
  --objects-live: 0px;
}
#app.fold-properties #props,
#app.hide-properties #props,
#app.fold-objects #objects,
#app.hide-objects #objects {
  display: none;
}
#app.fold-properties #split-props,
#app.hide-properties #split-props,
#app.fold-objects #split-props,
#app.hide-objects #split-props {
  display: none;
}
#app.hide-properties #split-tools,
#app.hide-tools #split-tools,
#app.fold-tools #split-tools {
  display: none;
}
/* 两块面板都不在了，右列才真的收起（四条组合 = 「properties 不在」×「objects 不在」） */
#app.hide-properties.hide-objects,
#app.hide-properties.fold-objects,
#app.fold-properties.hide-objects,
#app.fold-properties.fold-objects {
  --dock-live: 0px;
}
#app.hide-properties.hide-objects #split-dock,
#app.hide-properties.fold-objects #split-dock,
#app.fold-properties.hide-objects #split-dock,
#app.fold-properties.fold-objects #split-dock {
  display: none;
}

/* ------------------------------------------------------------------ 区带 */

.menubar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.menu-title {
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
}

.menu-title:hover,
.menu-title.open {
  color: var(--ink);
  background: var(--panel-2);
}

.tabbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  padding: 2px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.tab-add {
  padding: 2px 8px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
}

/* 当前页的标签：与工具栏选中态同一套颜色（4.4 的「一处一种强调」）。像素与色值都不进 JS（禁止事项 4） */
.tab.active {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px 3px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  font-size: 12px;
}

.rail-btn {
  flex: none;
  padding: 8px 2px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
}

.rail-btn.on {
  color: var(--accent);
  border-color: var(--accent);
}

/* 菜单栏被关掉时（4.2 的区带显隐）补一颗齿轮：「偏好设置…」与「重置界面布局」都住在菜单栏里，
   没有这条退路就是关得掉、回不来。菜单栏在的时候它不给位置——图标栏因此还是那三个面板开关 */
.rail-prefs {
  display: none;
}

#app:has(> .menubar.hidden) > .rail > .rail-prefs {
  display: block;
}

.tools {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--panel);
  border-right: 1px solid var(--line);
  font-size: 12px;
}

.tool-btn {
  padding: 6px 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: center;
}

.tool-btn:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}

.tool-btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* 状态栏：左边是「下一步怎么做」，中间是提示，右边是出错与读数——三件事分开放，谁也不覆盖谁（4.1） */
.strip {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--gap);
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px;
  overflow: hidden;
}

#status {
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice:empty,
.error:empty {
  display: none;
}

.error {
  color: var(--danger);
  white-space: nowrap;
}

.meter {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.readout {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mini {
  padding: 1px 6px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 11px;
}

.mini:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}

/* ------------------------------------------------------------------ 画布 */

#stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* `touch-action: none`：双指手势要交给外壳折成缩放/平移（4.3），不能被浏览器的滚动吞掉 */
#board {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 分隔条：只有 5 像素，但命中区靠 `::after` 放宽到 9 像素（4.3 的手感，不是视觉宽度） */
.split {
  background: var(--line);
  cursor: col-resize;
  position: relative;
}

.split-h {
  height: 5px;
  cursor: row-resize;
  flex: none;
}

.split::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.split:hover {
  background: var(--accent);
}

/* ------------------------------------------------------------------ 面板 */

.dock {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
  font-size: 12px;
}

.panel {
  overflow: auto;
  scrollbar-width: thin;
  padding: 6px 8px;
}

#props {
  flex: 0 0 var(--props-live);
  min-height: 0;
  transition: flex-basis var(--motion) var(--ease);
}

/* 对象列表吃掉剩余高度：`--objects-h` 因此是它的**初始与最小**高度（两栏都精确等于偏好值的话，
   底部会留一条没人要的空隙，那比让列表长一点难看多了） */
#objects {
  flex: 1 1 var(--objects-live);
  min-height: 0;
  transition: flex-basis var(--motion) var(--ease);
}

.group {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.group > h3 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.row {
  /* 三列而不是两列：带单位的行是「标签 + 控件 + 单位」三个孩子，两列会把单位挤到下一行去 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}

.row > label {
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row input[type="text"],
.row input[type="number"],
.row select {
  min-width: 0;
  width: 112px;
  padding: 2px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.row input[type="checkbox"] {
  justify-self: start;
  accent-color: var(--accent);
}

.row-action {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  cursor: pointer;
}

.row-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.row .unit,
.disabled {
  color: var(--ink-dim);
  font-size: 11px;
}

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink);
}

.swatches {
  display: flex;
  align-items: center;
  gap: 3px;
}

.swatch {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}

.row input[type="color"] {
  width: 22px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

/* 对象列表：行首色点 + 名字 + 类型 + 三个动作，靠缩进与图标分层而不是靠线框（4.4） */
.obj {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 4px;
  padding: 1px 2px;
  border-radius: 3px;
}

.obj.sel {
  background: rgba(77, 156, 232, 0.18);
}

.swatch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.obj-name {
  padding: 1px 2px;
  background: transparent;
  border: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj.invalid .obj-name {
  color: var(--danger);
}

.obj-type {
  color: var(--ink-dim);
}

.obj-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ink-dim);
  cursor: pointer;
  line-height: 16px;
}

.obj-btn:hover {
  border-color: var(--line);
  color: var(--ink);
}

.obj-btn.off {
  opacity: 0.35;
}

.empty {
  margin: 6px 0;
  color: var(--ink-dim);
  font-size: 12px;
}

/* ------------------------------------------------------------------ 浮层 */

.pop {
  position: fixed;
  z-index: 30;
  min-width: 210px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  font-size: 13px;
}

/* 显隐走 `hidden` 属性，所以这两条必须自己写：上面那条 `display: flex` 会盖掉浏览器的 UA 规则 */
.pop[hidden],
.layer[hidden] {
  display: none;
}

.pop-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.pop-item:hover {
  background: rgba(77, 156, 232, 0.2);
}

.pop-item .mark {
  color: var(--accent);
  font-size: 11px;
}

.pop-item.checked .mark::before {
  content: "✓";
}

/* 菜单项的文案列：长工具名（「圆（圆心与圆上一点）」）宁可省略，也不许把右边的键串挤出行外——
   键串那一列是 `auto`，文案折行就会推着它换行，一个菜单项变成两行高（`minmax(0, 1fr)` 已允许收缩） */
.pop-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pop-hint {
  color: var(--ink-dim);
}

.tag {
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-dim);
  font-size: 10px;
}

.arrow {
  color: var(--ink-dim);
}

.pop-back {
  align-self: flex-start;
  padding: 3px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
  text-align: left;
}

.sep {
  margin: 3px 4px;
  border-top: 1px solid var(--line);
  height: 0;
}

/* ------------------------------------------------------------------ 对话框 */

.layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.dialog {
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow: auto;
  scrollbar-width: thin;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  font-size: 13px;
}

.dialog .head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.dialog h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.dialog .close {
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-dim);
  cursor: pointer;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}

.form .group {
  margin-bottom: 8px;
}

.note {
  margin: 4px 0;
  color: var(--ink-dim);
  font-size: 12px;
}

.note.bad {
  color: var(--danger);
}

.keys {
  display: grid;
  gap: 2px;
}

.keyrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 6px;
}

.kname {
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keyrow input {
  padding: 2px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.keyrow input.bad,
.row input.bad {
  border-color: var(--danger);
}

.gesture {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--gap);
  font-size: 12px;
  color: var(--ink-dim);
}

.gesture b {
  color: var(--ink);
  font-weight: 600;
}

.foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap);
  padding: 8px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.foot .note {
  margin-right: auto;
}

.primary {
  padding: 3px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.about .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* 演示模式（4.1 的第 10 项）：只剩画布。浮层留着，右击仍然能用 */
#app.presentation {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
}

#app.presentation > :is(.menubar, .tabbar, .rail, .tools, .dock, .strip, .split) {
  display: none;
}

/* 窗口很窄时先牺牲图标栏与左列的宽度：画布是主角（4.5 说的「以画布为主」）。
   下限是「属性」两个字加内边距，再窄就把面板开关变成看不懂的符号 */
@media (max-width: 900px) {
  #app {
    --rail-w: 34px;
  }
}

/* 系统要求减少动效时就没有第二条理由：面板该收起还是收起，只是瞬间完成 */
@media (prefers-reduced-motion: reduce) {
  #app,
  #props,
  #objects {
    transition: none;
  }
}

/* ------------------------------------------------------------------ 工具语义分组（M10）
   参考原版「工具文件夹」的分类：标题可折叠，组体整块 hidden。标题是 div 不是 button，
   避免 clickByText 之类按 button 查的脚本误命中；折叠状态是会话态（chrome.ts 的 Set）。 */

.pop-group,
.tool-group {
  display: flex;
  flex-direction: column;
}

.pop-group-head,
.tool-group-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 2px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}

.pop-group:first-child > .pop-group-head,
.tool-group:first-child > .tool-group-head {
  border-top: 0;
  margin-top: 0;
}

.pop-group-head:hover,
.tool-group-head:hover,
.pop-group-head:focus-visible,
.tool-group-head:focus-visible {
  color: var(--ink);
  outline: none;
}

.pop-group-head:focus-visible,
.tool-group-head:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: 3px;
}

.pop-group-caret,
.tool-group-caret {
  width: 10px;
  flex: none;
  color: var(--accent);
  font-size: 10px;
}

.pop-group-body,
.tool-group-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* display:flex 会盖掉 UA 的 [hidden]{display:none}，这两条必须自己写（同 .pop[hidden]） */
.pop-group-body[hidden],
.tool-group-body[hidden] {
  display: none;
}

/* 工具箱里的工具按钮在组体里也要保持原来那个内边距与宽度 */
.tool-group-body .tool-btn {
  width: 100%;
}