/* Sidewall Keys — 侧壁厚键 UI */

:root {
  --body: #221f1c;
  --body-edge: #3a352f;
  --well: #17140f;
  --key: #e8e0cf;
  --key-bevel: #fffdf7;
  --key-wall-1: #8e8676;
  --key-wall-2: #6a6357;
  --key-ink: #241f18;
  --key-dark: #4a443c;
  --key-dark-bevel: #6e675c;
  --key-dark-wall-1: #2b2721;
  --key-dark-wall-2: #191612;
  --danger: oklch(0.52 0.15 32);
  --danger-bevel: oklch(0.66 0.14 32);
  --danger-wall-1: oklch(0.33 0.11 32);
  --danger-wall-2: oklch(0.24 0.08 32);
  /* 强调（新建、工具选中）— 暖橄榄绿，贴合机身棕灰 */
  --accent: #5a6b50;
  --accent-bevel: #758a68;
  --accent-wall-1: #3d4838;
  --accent-wall-2: #2a3226;
  --accent-ink: #eef2ea;
  /* 导出 / 输出 — 板岩蓝 */
  --export: oklch(0.5 0.06 250);
  --export-bevel: oklch(0.62 0.05 250);
  --export-wall-1: oklch(0.34 0.05 250);
  --export-wall-2: oklch(0.25 0.04 250);
  --export-ink: #eef3fa;
  /* 可逆操作（撤回）— 琥珀 */
  --warn: oklch(0.7 0.12 78);
  --warn-bevel: oklch(0.8 0.11 78);
  --warn-wall-1: oklch(0.46 0.09 78);
  --warn-wall-2: oklch(0.34 0.07 78);
  --warn-ink: #2a2210;
  --paper: #f6f2e8;
  --grid: rgba(120, 110, 90, 0.18);
  --disabled-face: #302c26;
  --disabled-ink: #6d675d;
  --divider: #332e28;

  /* 语义别名（组件内沿用） */
  --bg: var(--body);
  --card: var(--key-dark);
  --ink: #d4cdc0;
  --ink-2: #9a9288;
  --ink-3: #6d675d;
  --line: var(--divider);
  --highlight: var(--key);
  --bad: var(--danger);
  --pause: #8a8498;
  --radius: 5px;
  --shadow: none;
  --shadow-float: 0 14px 0 var(--well), 0 26px 30px rgba(0, 0, 0, 0.55);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --dock-w: 42vw;
  --chat-z: 20;
  --z-stage: 1;
  --z-canvas-ui: 12;
  --z-chat: 20;
  --z-chrome: 28;
  --z-popover: 60;
  --z-menu: 1000;
  --key-wall-h: 9px;
  --key-wall-h-sm: 7px;
  --key-press: 8px;
  --key-press-sm: 6px;
  --key-wall-h-xs: 5px;
  --key-press-xs: 4px;
  --key-focus-ring: 0 0 0 2px var(--body), 0 0 0 4px var(--key);

  /* 对话坞 — 由浅到深四层表面 + 语义点缀 */
  --chat-shell-bg: #2f2b26;
  --chat-shell-edge: #454039;
  --chat-head-bg: #3a3630;
  --chat-feed-bg: #272420;
  --chat-compose-bg: #23201b;
  --chat-input-bg: #1b1915;
  --chat-input-edge: #3f3b35;
  --chat-model-bg: #35312c;
  --chat-model-edge: #4e4840;
  --chat-user-bg: #403b35;
  --chat-user-edge: #5a534a;
  --chat-assist-bg: #201e1a;
  --chat-assist-edge: #36322d;
  --chat-panel-bg: #36322d;
  --chat-accent-soft: rgba(90, 107, 80, 0.2);
  --chat-accent-edge: rgba(117, 138, 104, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --key-press: 0px;
    --key-press-sm: 0px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font:
    14px / 1.6 system-ui,
    -apple-system,
    "PingFang SC",
    "Hiragino Sans GB",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mobile-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--bg);
}
.mobile-gate-card {
  max-width: 320px;
  text-align: center;
}
.mobile-gate-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.mobile-gate-desc {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* Crawlable product copy: keep in DOM for search/AI agents, out of the interactive layout. */
.seo-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.seo-copy h1,
.seo-copy p {
  margin: 0;
}

@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
  .mobile-gate {
    display: flex;
  }
  .app {
    display: none !important;
  }
}

.session-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.picker {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: none;
  cursor: pointer;
  appearance: none;
  font: inherit;
  transition:
    filter 70ms linear,
    transform 70ms linear,
    box-shadow 70ms linear;
}
.picker-trigger--key {
  padding: 10px 12px 11px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  color: #d8d0c2;
  background: var(--key-dark);
  border-top: 1px solid var(--key-dark-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--key-dark-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-dark-wall-2);
  margin-bottom: calc(var(--key-wall-h-xs) + 6px);
  min-height: 36px;
}
.picker-trigger--key:hover:not(:disabled) {
  filter: brightness(1.05);
}
.picker-trigger--key:active:not(:disabled) {
  transform: translateY(var(--key-press-xs));
  box-shadow:
    0 1px 0 var(--key-dark-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.picker-trigger--key[aria-expanded="true"] {
  filter: brightness(1.06);
  border-top-color: var(--accent-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--accent-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--accent-wall-2),
    0 0 0 1px var(--chat-accent-edge);
}
.picker-trigger--key:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.picker--session {
  max-width: min(200px, 100%);
}
.picker--session .picker-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-trigger-label {
  font-weight: 600;
}
.picker-chevron {
  font-size: 10px;
  color: var(--ink-3);
  flex: none;
}
.picker-panel {
  position: absolute;
  z-index: var(--z-popover);
  min-width: max(100%, 148px);
  max-width: min(280px, calc(100vw - 32px));
  max-height: min(240px, 40vh);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--chat-panel-bg);
  border: 1px solid var(--chat-shell-edge);
  border-radius: 5px;
  box-shadow: var(--shadow-float);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.picker-panel.is-floated,
.model-panel.is-floated {
  position: fixed;
  z-index: var(--z-popover);
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  min-width: 0;
  width: auto;
}
.picker-panel[hidden] {
  display: none !important;
}
.picker-panel--down {
  top: calc(100% + 6px);
  left: 0;
}
.picker-panel--up {
  bottom: calc(100% + 6px);
  left: 0;
}
.picker-option {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-option:hover:not(:disabled) {
  background: var(--chat-model-bg);
  border-color: var(--chat-model-edge);
}
.picker-option[aria-selected="true"] {
  background: var(--chat-accent-soft);
  border-color: var(--chat-accent-edge);
  color: var(--key);
}
.picker--theme .picker-trigger--key {
  min-height: 32px;
  padding: 9px 12px 10px;
  margin-bottom: calc(var(--key-wall-h-xs) + 5px);
}
.session-bar button {
  font-size: 14px;
}

/* —— 侧壁厚键：基础 reset —— */
button,
select,
textarea,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  appearance: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* 主键（米白） */
.key,
button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--key-ink);
  background: var(--key);
  border-top: 1px solid var(--key-bevel);
  box-shadow:
    0 var(--key-wall-h) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h) + 9px) 24px rgba(0, 0, 0, 0.5),
    inset 0 -6px 0 rgba(0, 0, 0, 0.07);
  padding: 14px 22px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    transform 70ms linear,
    box-shadow 70ms linear,
    filter 70ms linear;
  transform: translateY(0);
  margin-bottom: calc(var(--key-wall-h) + 8px);
  min-height: 44px;
}
.key:hover:not(:disabled):not(:active),
button.primary:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.key:active:not(:disabled),
button.primary:active:not(:disabled) {
  transform: translateY(var(--key-press));
  box-shadow:
    0 1px 0 var(--key-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.key:focus-visible,
button.primary:focus-visible {
  box-shadow:
    var(--key-focus-ring),
    0 var(--key-wall-h) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h) + 9px) 24px rgba(0, 0, 0, 0.5),
    inset 0 -6px 0 rgba(0, 0, 0, 0.07);
}
.key:disabled,
button.primary:disabled,
button:disabled.key {
  background: var(--disabled-face);
  color: var(--disabled-ink);
  border-top-color: #3a352f;
  box-shadow:
    0 3px 0 var(--key-dark-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.4);
  transform: none;
  filter: none;
  cursor: default;
}

/* 次级键（深键面） */
.key--secondary,
button.secondary {
  color: #d8d0c2;
  background: var(--key-dark);
  border-top: 1px solid var(--key-dark-bevel);
  box-shadow:
    0 var(--key-wall-h) 0 var(--key-dark-wall-1),
    0 calc(var(--key-wall-h) + 1px) 0 var(--key-dark-wall-2),
    0 calc(var(--key-wall-h) + 9px) 24px rgba(0, 0, 0, 0.5),
    inset 0 -6px 0 rgba(0, 0, 0, 0.12);
}
.key--secondary:hover:not(:disabled):not(:active),
button.secondary:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.key--secondary:active:not(:disabled),
button.secondary:active:not(:disabled) {
  transform: translateY(var(--key-press));
  box-shadow:
    0 1px 0 var(--key-dark-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}

/* 危险键（砖红） */
.key--danger,
button.danger {
  color: #fff8f5;
  background: var(--danger);
  border-top: 1px solid var(--danger-bevel);
  box-shadow:
    0 var(--key-wall-h) 0 var(--danger-wall-1),
    0 calc(var(--key-wall-h) + 1px) 0 var(--danger-wall-2),
    0 calc(var(--key-wall-h) + 9px) 24px rgba(0, 0, 0, 0.5),
    inset 0 -6px 0 rgba(0, 0, 0, 0.1);
}
.key--danger:hover:not(:disabled):not(:active),
button.danger:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.key--danger:active:not(:disabled),
button.danger:active:not(:disabled) {
  transform: translateY(var(--key-press));
  box-shadow:
    0 1px 0 var(--danger-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}

/* 语义色键：与 key--seg 同尺寸，叠在分段键上 */
.key--accent,
.session-bar button.key--accent {
  color: var(--accent-ink);
  background: var(--accent);
  border-top-color: var(--accent-bevel);
  box-shadow:
    0 var(--key-wall-h-sm) 0 var(--accent-wall-1),
    0 calc(var(--key-wall-h-sm) + 1px) 0 var(--accent-wall-2),
    0 calc(var(--key-wall-h-sm) + 7px) 18px rgba(0, 0, 0, 0.45),
    inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}
.key--export,
.stage-chrome-right button.key--export {
  color: var(--export-ink);
  background: var(--export);
  border-top-color: var(--export-bevel);
  box-shadow:
    0 var(--key-wall-h-sm) 0 var(--export-wall-1),
    0 calc(var(--key-wall-h-sm) + 1px) 0 var(--export-wall-2),
    0 calc(var(--key-wall-h-sm) + 7px) 18px rgba(0, 0, 0, 0.45),
    inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}
.key--warn,
.history-undo.key--warn {
  color: var(--warn-ink);
  background: var(--warn);
  border-top-color: var(--warn-bevel);
  box-shadow:
    0 var(--key-wall-h-sm) 0 var(--warn-wall-1),
    0 calc(var(--key-wall-h-sm) + 1px) 0 var(--warn-wall-2),
    0 calc(var(--key-wall-h-sm) + 7px) 18px rgba(0, 0, 0, 0.45),
    inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}
.key--accent:hover:not(:disabled):not(:active),
.key--export:hover:not(:disabled):not(:active),
.key--warn:hover:not(:disabled):not(:active) {
  filter: brightness(1.05);
}
.key--accent:active:not(:disabled),
.key--export:active:not(:disabled),
.key--warn:active:not(:disabled) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--accent-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.key--export:active:not(:disabled) {
  box-shadow:
    0 1px 0 var(--export-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.key--warn:active:not(:disabled) {
  box-shadow:
    0 1px 0 var(--warn-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.key--danger.key--seg {
  color: #fff8f5;
  background: var(--danger);
  border-top-color: var(--danger-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--danger-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--danger-wall-2),
    0 calc(var(--key-wall-h-xs) + 5px) 12px rgba(0, 0, 0, 0.4);
}
.key--danger.key--seg:active:not(:disabled) {
  box-shadow:
    0 1px 0 var(--danger-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.key--accent:disabled,
.key--export:disabled,
.key--warn:disabled,
.key--danger.key--seg:disabled,
.history-undo:disabled {
  background: var(--disabled-face);
  color: var(--disabled-ink);
  border-top-color: #3a352f;
  box-shadow:
    0 3px 0 var(--key-dark-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.4);
  transform: none;
  filter: none;
  cursor: default;
}

/* 分段多选栏：独立键并排，选中项米白 / 未选深键面 */
.seg-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: flex-end;
}
.seg-bar .tab {
  padding: 10px 14px 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 5px;
  color: #d8d0c2;
  background: var(--key-dark);
  border: none;
  border-top: 1px solid var(--key-dark-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--key-dark-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-dark-wall-2),
    0 calc(var(--key-wall-h-xs) + 6px) 14px rgba(0, 0, 0, 0.4);
  margin-bottom: calc(var(--key-wall-h-xs) + 6px);
  min-height: 36px;
  transition:
    transform 70ms linear,
    box-shadow 70ms linear,
    filter 70ms linear;
}
.seg-bar .tab:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.seg-bar .tab:active:not(:disabled) {
  transform: translateY(var(--key-press-xs));
  box-shadow:
    0 1px 0 var(--key-dark-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.seg-bar .tab[aria-selected="true"] {
  color: var(--key-ink);
  background: var(--key);
  border-top-color: var(--key-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h-xs) + 6px) 14px rgba(0, 0, 0, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.07);
}
.seg-bar .tab:focus-visible {
  box-shadow:
    var(--key-focus-ring),
    0 var(--key-wall-h-xs) 0 var(--key-dark-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-dark-wall-2),
    0 calc(var(--key-wall-h-xs) + 6px) 14px rgba(0, 0, 0, 0.4);
}
.seg-bar .tab[aria-selected="true"]:focus-visible {
  box-shadow:
    var(--key-focus-ring),
    0 var(--key-wall-h-xs) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h-xs) + 6px) 14px rgba(0, 0, 0, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.07);
}

/* 分段键 / 顶栏小键 */
.key--seg,
.session-bar button,
.stage-chrome-right button,
.history-undo,
.hist-del-btn,
.ctx-menu button,
.canvas-bar .key--seg,
.preview-tool {
  padding: 10px 14px 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 5px;
  color: #d8d0c2;
  background: var(--key-dark);
  border-top: 1px solid var(--key-dark-bevel);
  box-shadow:
    0 var(--key-wall-h-sm) 0 var(--key-dark-wall-1),
    0 calc(var(--key-wall-h-sm) + 1px) 0 var(--key-dark-wall-2),
    0 calc(var(--key-wall-h-sm) + 7px) 18px rgba(0, 0, 0, 0.45);
  margin-bottom: calc(var(--key-wall-h-sm) + 6px);
  min-height: 36px;
  transition:
    transform 70ms linear,
    box-shadow 70ms linear,
    filter 70ms linear;
}
.key--seg:hover:not(:disabled):not(:active),
.session-bar button:hover:not(:disabled):not(:active),
.stage-chrome-right button:hover:not(:disabled):not(:active),
.history-undo:hover:not(:disabled):not(:active),
.hist-del-btn:hover:not(:disabled):not(:active),
.ctx-menu button:hover:not(:disabled):not(:active),
.canvas-bar .key--seg:hover:not(:disabled):not(:active),
.preview-tool:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.key--seg:active:not(:disabled),
.session-bar button:active:not(:disabled):not(.key--accent),
.stage-chrome-right button:active:not(:disabled):not(.key--export),
.history-undo:active:not(:disabled):not(.key--warn),
.hist-del-btn:active:not(:disabled):not(.key--danger),
.ctx-menu button:active:not(:disabled):not(.key--accent):not(.key--danger),
.canvas-bar .key--seg:active:not(:disabled),
.preview-tool:active:not(:disabled):not(.active) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--key-dark-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.session-bar button.key--accent:active:not(:disabled),
.preview-tool.active:active:not(:disabled),
.ctx-menu button.key--accent:active:not(:disabled) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--accent-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.stage-chrome-right button.key--export:active:not(:disabled) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--export-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.history-undo.key--warn:active:not(:disabled) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--warn-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.hist-del-btn.key--danger:active:not(:disabled),
.ctx-menu button.key--danger:active:not(:disabled) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--danger-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}
.key--seg.is-on,
.preview-tool.active {
  color: var(--accent-ink);
  background: var(--accent);
  border-top-color: var(--accent-bevel);
  box-shadow:
    0 var(--key-wall-h-sm) 0 var(--accent-wall-1),
    0 calc(var(--key-wall-h-sm) + 1px) 0 var(--accent-wall-2),
    0 calc(var(--key-wall-h-sm) + 7px) 18px rgba(0, 0, 0, 0.45),
    inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

/* 图标键（全尺寸，如画布外大操作） */
.key--icon {
  width: 44px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--key-ink);
  background: var(--key);
  border-top: 1px solid var(--key-bevel);
  box-shadow:
    0 var(--key-wall-h-sm) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h-sm) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h-sm) + 7px) 18px rgba(0, 0, 0, 0.45);
  margin-bottom: calc(var(--key-wall-h-sm) + 6px);
}
.key--icon:active:not(:disabled) {
  transform: translateY(var(--key-press-sm));
  box-shadow:
    0 1px 0 var(--key-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}

/* 图标键（紧凑，缩放 ± 等） */
.key--icon-sm,
.canvas-bar .key--icon-sm {
  width: 34px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--key-ink);
  background: var(--key);
  border-top: 1px solid var(--key-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h-xs) + 5px) 12px rgba(0, 0, 0, 0.4);
  margin-bottom: calc(var(--key-wall-h-xs) + 5px);
  transition:
    transform 70ms linear,
    box-shadow 70ms linear,
    filter 70ms linear;
}
.key--icon-sm:hover:not(:disabled):not(:active),
.canvas-bar .key--icon-sm:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.key--icon-sm:active:not(:disabled),
.canvas-bar .key--icon-sm:active:not(:disabled) {
  transform: translateY(var(--key-press-xs));
  box-shadow:
    0 1px 0 var(--key-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}

/* 开关 Toggle */
.key-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.key-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.key-toggle-track {
  position: relative;
  flex: none;
  width: 64px;
  height: 34px;
  border-radius: 5px;
  padding: 4px;
  background: var(--well);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8);
}
.key-toggle-knob {
  display: block;
  width: 28px;
  height: 26px;
  border-radius: 3px;
  background: var(--key-dark);
  border-top: 1px solid var(--key-dark-bevel);
  box-shadow: 0 4px 0 var(--key-dark-wall-1);
  transition:
    transform 70ms linear,
    background 70ms linear,
    box-shadow 70ms linear;
}
.key-toggle input:checked + .key-toggle-track .key-toggle-knob {
  transform: translateX(28px);
  background: var(--key);
  border-top-color: var(--key-bevel);
  box-shadow: 0 4px 0 var(--key-wall-1);
}
.key-toggle input:focus-visible + .key-toggle-track {
  box-shadow:
    var(--key-focus-ring),
    inset 0 4px 10px rgba(0, 0, 0, 0.8);
}

.app {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

.pane {
  background: var(--body);
  border: 1px solid var(--body-edge);
  border-radius: 5px;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* —— 全屏图纸底座 —— */
.stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}
.stage-chrome {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  padding: 16px 20px 22px;
  border-bottom: 1px solid var(--divider);
  background: var(--body);
  position: relative;
  z-index: var(--z-chrome);
}
.stage-chrome-left {
  display: flex;
  align-items: flex-end;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  gap: 14px;
  overflow: visible;
}
.stage-chrome-center {
  display: flex;
  justify-content: center;
  justify-self: center;
  align-items: flex-end;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.stage-chrome-center .seg-bar {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.stage-chrome-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  justify-self: end;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
  overflow: visible;
}

.stage-body {
  flex: 1;
  position: relative;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.stage-body > #right-scroll {
  flex: 1;
  min-height: 0;
}

/* —— 对话覆盖层（仅在网格区内，不盖住顶栏） —— */
.chat-shell {
  position: absolute;
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--chat-shell-bg);
  border-color: var(--chat-shell-edge);
  box-shadow: var(--shadow-float);
  transition:
    left 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.15s ease;
  will-change: left, top, right, bottom, width, height, transform;
}
.chat-shell.chat-shell--flip {
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.15s ease;
}
/* 程序化重置坞位置（如切换对话）：瞬间落位，避免用旧位置量出的 insets 算错 fit。 */
.chat-shell.chat-shell--no-anim,
.chat-shell.chat-shell--no-anim.chat-shell--flip {
  transition: none !important;
}
.chat-shell.is-dragging {
  box-shadow:
    var(--shadow-float),
    0 16px 48px rgba(0, 0, 0, 0.14);
  user-select: none;
  transition: none !important;
}
.chat-shell.is-dragging.is-dock-magnet {
  box-shadow:
    var(--shadow-float),
    0 0 0 2px var(--key),
    0 26px 30px rgba(0, 0, 0, 0.55);
}
.chat-shell.is-dragging.is-dock-release {
  box-shadow:
    var(--shadow-float),
    0 0 0 1px var(--body-edge),
    0 20px 24px rgba(0, 0, 0, 0.45);
  opacity: 0.96;
}

/* 对话态：坞位置由 data-dock 决定 */
.app[data-layout="chat"] .chat-shell {
  height: auto;
}
.app[data-layout="chat"][data-dock="left"] .chat-shell {
  top: 12px;
  left: 12px;
  bottom: 12px;
  right: auto;
  width: var(--dock-w);
  max-width: min(520px, calc(100% - 24px));
  min-width: 320px;
}
.app[data-layout="chat"][data-dock="right"] .chat-shell {
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: auto;
  width: var(--dock-w);
  max-width: min(520px, calc(100% - 24px));
  min-width: 320px;
}
.app[data-layout="chat"] .chat-shell-head {
  cursor: grab;
}
.app[data-layout="chat"] .chat-resize-edge {
  display: none;
}
.app[data-layout="chat"][data-dock="left"] .chat-resize-edge--right {
  display: block;
}
.app[data-layout="chat"][data-dock="right"] .chat-resize-edge--left {
  display: block;
}
.app[data-layout="chat"] .chat-resize-corner {
  display: none;
}

/* 预览编辑态：紧凑浮窗 — 模型选择 + 输入（无聊天流） */
.app[data-layout="stage"] .chat-shell {
  max-width: calc(100% - 24px);
  width: var(--chat-float-w, 400px);
  height: auto !important;
  min-height: 0;
  overflow: visible;
}
.app[data-layout="stage"] .chat-shell-head,
.app[data-layout="stage"] .chat-body > .scroll,
.app[data-layout="stage"] .chat-body > .status-line {
  display: none;
}
.app[data-layout="stage"] .chat-body {
  display: contents;
}
.app[data-layout="stage"] .chat-body > .scroll,
.app[data-layout="stage"] .chat-body > .status-line {
  display: none !important;
}
.app[data-layout="stage"] .composer {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 6px 8px 8px;
  position: relative;
  cursor: grab;
  overflow: visible;
}
.app[data-layout="stage"] .composer-card {
  padding: 6px 8px 8px;
  gap: 4px;
}
.app[data-layout="stage"] .composer-row {
  min-height: 44px;
}
.app[data-layout="stage"] .composer-actions {
  width: 60px;
  height: 36px;
}
.app[data-layout="stage"] .composer-row textarea {
  min-height: 40px;
  padding: 6px 2px;
}
.app[data-layout="stage"] .composer-settings {
  overflow: visible;
}
.app[data-layout="stage"] .model-panel {
  width: min(320px, calc(100vw - 48px));
  z-index: calc(var(--chat-z) + 4);
}
.app[data-layout="stage"] .composer #brief,
.app[data-layout="stage"] .composer #go,
.app[data-layout="stage"] .composer #stop,
.app[data-layout="stage"] .composer .model-trigger,
.app[data-layout="stage"] .composer .model-panel,
.app[data-layout="stage"] .composer .composer-context {
  cursor: auto;
}
.app[data-layout="stage"] .chat-resize-corner,
.app[data-layout="stage"] .chat-resize-edge {
  display: none !important;
}
.app[data-layout="chat"] .composer-stage-bar {
  display: none;
}
.app[data-layout="chat"] .chat-shell-head {
  cursor: grab;
}
.app[data-layout="chat"] .chat-body > .scroll {
  cursor: grab;
}
.app[data-layout="chat"] .chat-body .chat,
.app[data-layout="chat"] .chat-body .bubble,
.app[data-layout="chat"] .chat-body .edit-card,
.app[data-layout="chat"] .chat-body .tool-line {
  cursor: auto;
}
.chat-shell.is-dragging .chat-shell-head,
.chat-shell.is-dragging .chat-body > .scroll,
.chat-shell.is-dragging .composer {
  cursor: grabbing;
}
.chat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-body > .scroll {
  flex: 1;
  min-height: 0;
}

.chat-resize-edge {
  position: absolute;
  z-index: 3;
}
.chat-resize-edge--right {
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}
.chat-resize-edge--left {
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}
.chat-resize-edge:hover {
  background: rgba(232, 224, 207, 0.12);
}

.chat-resize-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 3;
}
.chat-resize-corner::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  opacity: 0.55;
}

.layout-toggle {
  font-size: 12px;
  padding: 3px 8px;
  flex: none;
}

.tabs-mobile {
  display: none;
}
@media (max-width: 1119px) {
  .app[data-mobile="chat"] .stage {
    display: none;
  }
  .app[data-mobile="stage"] .chat-shell {
    display: none;
  }
  .tabs-mobile {
    display: flex;
    gap: 9px;
    padding: 12px 16px 0;
    align-items: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-chrome);
    background: var(--body);
    border-bottom: 1px solid var(--divider);
  }
  .chat-shell {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .chat-resize-edge,
  .chat-resize-corner,
  .layout-toggle {
    display: none !important;
  }
  .stage {
    top: 52px;
  }
  .stage-body {
    flex: 1;
    min-height: 0;
  }
}

.pane-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
}
.chat-shell-head {
  flex-wrap: wrap;
  row-gap: 8px;
  background: var(--chat-head-bg);
  border-bottom-color: var(--chat-shell-edge);
}
.chat-shell-head h1 {
  color: var(--key);
}
.chat-shell-head .stage-note {
  color: var(--ink-2);
}
.chat-body {
  background: var(--chat-feed-bg);
}
.chat-body > .scroll {
  background: var(--chat-feed-bg);
}
.pane-head h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.pane-head .spacer {
  flex: 1;
}
.stage-note {
  font-size: 12px;
  color: var(--ink-3);
}

.scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.scroll.no-scroll {
  overflow: hidden;
}

.chat {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble {
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 13px;
  max-width: 100%;
}
.bubble.user {
  background: var(--chat-user-bg);
  color: #e8e0d4;
  align-self: flex-end;
  white-space: pre-wrap;
  border: 1px solid var(--chat-user-edge);
  border-top-color: var(--key-dark-bevel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.bubble.assistant {
  background: var(--chat-assist-bg);
  color: var(--ink);
  border: 1px solid var(--chat-assist-edge);
  white-space: pre-wrap;
}
.bubble.stream {
  background: var(--chat-assist-bg);
  border: 1px solid var(--chat-assist-edge);
  max-width: 100%;
}
.bubble.stream .think {
  font-size: 12px;
  color: var(--ink-3);
  border-left: 2px solid var(--pause);
  padding-left: 8px;
  margin-bottom: 8px;
}
.bubble.stream .think-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--pause);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.bubble.stream .think-body {
  white-space: pre-wrap;
}
.bubble.stream .stream-out {
  white-space: pre-wrap;
  font: 12px / 1.55 var(--mono);
  word-break: break-word;
}
.bubble.stream .typing {
  color: var(--ink-3);
  font-size: 12px;
}
.demo-code-card {
  overflow: hidden;
  border: 1px solid var(--chat-assist-edge);
  border-radius: 5px;
  background: var(--well);
}
.demo-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--chat-assist-edge);
  color: var(--ink-2);
  background: var(--chat-model-bg);
  font: 10px var(--mono);
}
.demo-code-head span:last-child {
  color: var(--accent-bevel);
}
.demo-code-body {
  max-height: 280px;
  margin: 0;
  overflow: auto;
  padding: 10px 12px 13px;
  color: var(--ink);
  background: var(--well);
  font: 11px / 1.55 var(--mono);
  white-space: pre;
}
.demo-code-card.is-complete .demo-code-head span:last-child::before {
  content: "✓ ";
}

/* coding agent 风格编辑卡片 */
.edit-card {
  border: 1px solid var(--chat-assist-edge);
  border-radius: 5px;
  background: var(--chat-assist-bg);
  font-size: 12px;
  overflow: hidden;
  max-width: 100%;
}
.edit-card.pending {
  opacity: 0.72;
  border-style: dashed;
}
.edit-card.failed {
  border-color: var(--danger-wall-1);
}
.edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--chat-model-bg);
  border-bottom: 1px solid var(--chat-assist-edge);
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.edit-op {
  font-weight: 700;
  color: var(--key);
}
.edit-loc {
  color: var(--ink-3);
}
.edit-state {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: none;
}
.edit-state.ok {
  color: var(--highlight);
}
.edit-title {
  padding: 4px 10px 0;
  color: var(--ink-2);
  font-size: 11px;
}
.edit-body {
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font: 11px / 1.45 var(--mono);
}
.edit-row.del code {
  color: var(--bad);
  text-decoration: line-through;
}
.edit-row.add code {
  color: var(--highlight);
}
.edit-k {
  flex: none;
  width: 52px;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
}
.edit-row code {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--chat-input-bg);
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--ink);
}
.edit-err {
  color: var(--danger);
  font-size: 11px;
  margin-top: 2px;
}

.bubble.error {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--danger-wall-1);
  color: #f0c4b8;
}

.tool-line {
  font: 11px var(--mono);
  color: var(--ink-3);
  padding: 2px 4px;
}
.tool-line b {
  color: var(--accent-bevel);
  font-weight: 600;
}
.tool-line .linkish,
.bubble .linkish {
  border: 0;
  background: none;
  padding: 0;
  color: var(--highlight);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  padding: 6px 14px 8px;
  background: var(--chat-feed-bg);
  border-top: 1px solid var(--chat-assist-edge);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-bevel);
  animation: pulse 1.1s ease-in-out infinite;
  flex: none;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

.composer {
  flex: none;
  border-top: 1px solid var(--chat-shell-edge);
  padding: 10px 14px 14px;
  background: var(--chat-compose-bg);
  position: relative;
  z-index: 2;
  overflow: visible;
}
.composer-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
  border-radius: 6px;
  background: var(--chat-input-bg);
  border: 1px solid var(--chat-input-edge);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28);
  overflow: visible;
}
.composer-card-head {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding-bottom: 2px;
}
.demo-open:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.demo-running {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-bottom: calc(var(--key-wall-h-sm) + 6px);
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--chat-accent-edge);
  border-radius: 5px;
  background: var(--chat-accent-soft);
  color: var(--accent-bevel);
  font: 11px var(--mono);
}
.demo-running[hidden],
.demo-picker[hidden] {
  display: none !important;
}
.demo-running::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bevel);
  animation: pulse 1.1s ease-in-out infinite;
}
.demo-picker {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.demo-picker--chat {
  display: flex;
  width: min(420px, calc(100% - 28px));
  margin: clamp(48px, 18vh, 120px) auto 24px;
  padding: 0;
  justify-content: center;
}
.demo-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--ink-3);
  font: 10px var(--mono);
}
.demo-picker-head > :first-child {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
}
.demo-preset-grid {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.demo-preset {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 10px 12px;
  text-align: left;
  border-radius: 5px;
  color: #e8e0d4;
  background: var(--chat-user-bg);
  border: 1px solid var(--chat-user-edge);
  border-top-color: var(--key-dark-bevel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font: inherit;
}
.demo-preset:hover:not(:disabled) {
  border-color: var(--chat-accent-edge);
  background: var(--chat-accent-soft);
  color: var(--ink);
}
.demo-preset:disabled {
  opacity: 0.55;
  cursor: default;
}
.demo-preset-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.demo-preset-note {
  color: inherit;
  opacity: 0.78;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
}
.app[data-demo="active"] .stage-chrome button:not(#demo-exit),
.app[data-demo="active"] .preview-tool-rail,
.app[data-demo="active"] .chat-resize-edge {
  pointer-events: none;
}
.app[data-demo="active"]:not([data-demo-phase="explore"]) .canvas-bar {
  pointer-events: none;
}
.app[data-demo="active"] .stage-chrome button:not(#demo-exit),
.app[data-demo="active"] .preview-tool-rail {
  opacity: 0.72;
}
.app[data-demo="active"]:not([data-demo-phase="explore"]) .canvas-bar {
  opacity: 0.72;
}
.app[data-demo="active"]:not([data-demo-phase="explore"]) .canvas-bar .canvas-bar-3d-display {
  opacity: 1;
}
.app[data-demo="active"] .composer {
  display: none !important;
}
.composer-settings {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
}
.model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 4px;
  color: var(--ink);
  background: var(--chat-model-bg);
  border: 1px solid var(--chat-model-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin: 0;
  min-height: 0;
  cursor: pointer;
  transition:
    color 70ms linear,
    border-color 70ms linear,
    background 70ms linear;
}
.model-trigger:hover:not(:disabled) {
  color: var(--ink);
  background: #3d3933;
  border-color: #5a534a;
}
.model-trigger[aria-expanded="true"] {
  background: var(--chat-accent-soft);
  border-color: var(--chat-accent-edge);
}
.model-trigger:active:not(:disabled) {
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.model-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.model-trigger-label {
  font-weight: 600;
  color: var(--key);
  font-size: 11px;
}
.model-trigger-meta {
  color: var(--accent-bevel);
  font-size: 10px;
  font-weight: 500;
}
.model-trigger-meta::before {
  content: "·";
  margin: 0 3px;
}
.model-trigger-chevron {
  font-size: 9px;
  color: var(--ink-3);
  margin-left: 1px;
  transition: transform 70ms linear;
}
.model-trigger[aria-expanded="true"] .model-trigger-chevron {
  transform: rotate(180deg);
}

.model-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: var(--z-popover);
  width: min(320px, calc(100vw - 48px));
  max-height: min(360px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--chat-panel-bg);
  border: 1px solid var(--chat-shell-edge);
  border-radius: 5px;
  box-shadow: var(--shadow-float);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.model-panel[hidden] {
  display: none;
}
.model-panel-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.model-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.model-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--chat-input-edge);
  background: var(--chat-input-bg);
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
}
.model-option:hover:not(:disabled) {
  background: var(--chat-model-bg);
  border-color: var(--chat-model-edge);
}
.model-option[aria-selected="true"] {
  border-color: var(--chat-accent-edge);
  background: var(--chat-accent-soft);
}
.model-option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.model-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.model-option-note {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.35;
}
.model-option-check {
  color: var(--accent-bevel);
  font-weight: 600;
  flex: none;
  margin-top: 2px;
}
.model-panel-reasoning {
  border-top: 1px solid var(--chat-input-edge);
  padding-top: 16px;
}
.reasoning-switch-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.reasoning-switch-hint {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}

.composer-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  min-width: 0;
}
.composer-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 1px;
}
.composer-context[hidden] {
  display: none !important;
}
.composer-context .chip {
  margin-bottom: 0;
  padding: 6px 9px 7px;
  font-size: 11px;
  background: var(--chat-model-bg);
  border-top-color: var(--chat-model-edge);
  box-shadow: 0 4px 0 var(--key-dark-wall-1);
}
.composer-context .chip-element {
  color: var(--accent-ink);
  background: var(--accent);
  border-top-color: var(--accent-bevel);
  box-shadow: 0 4px 0 var(--accent-wall-1);
}
.composer-actions {
  position: relative;
  flex: none;
  width: 68px;
  height: 40px;
  flex-shrink: 0;
}
.composer-actions[data-state="demo"] {
  width: 0;
  overflow: hidden;
}
.app[data-demo="active"] .composer-row textarea:disabled {
  color: var(--ink-3);
  opacity: 0.62;
  cursor: default;
}
.composer-send {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  min-height: 0;
  border-radius: 5px;
  transition:
    opacity 70ms linear,
    visibility 70ms linear;
}
.composer-send[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.composer-send[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.composer-send.primary {
  padding: 0 8px;
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--key-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-wall-2),
    0 calc(var(--key-wall-h-xs) + 4px) 10px rgba(0, 0, 0, 0.38),
    inset 0 -3px 0 rgba(0, 0, 0, 0.07);
  margin-bottom: 0;
}
.composer-send.danger {
  padding: 0 8px;
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--danger-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--danger-wall-2),
    0 calc(var(--key-wall-h-xs) + 4px) 10px rgba(0, 0, 0, 0.38);
  margin-bottom: 0;
}
.composer-send.primary:active:not(:disabled),
.composer-send.danger:active:not(:disabled) {
  transform: translateY(var(--key-press-xs));
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 9px 12px 11px;
  font-size: 12px;
  border-radius: 4px;
  color: #d8d0c2;
  background: var(--key-dark);
  border-top: 1px solid var(--key-dark-bevel);
  box-shadow: 0 5px 0 var(--key-dark-wall-1);
  margin-bottom: 5px;
}
.chip-element {
  color: var(--key-ink);
  background: var(--key);
  border-top-color: var(--key-bevel);
  box-shadow: 0 5px 0 var(--key-wall-1);
}
.chip-spatial {
  color: #d8d0c2;
}
.chip b {
  font-weight: 600;
}
.chip button {
  border: none;
  background: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--danger);
  cursor: pointer;
  box-shadow: none;
  margin: 0;
}
.chip button:hover {
  filter: brightness(1.1);
}

.history-page {
  max-width: 960px;
}
.history-page-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}
.history-table-wrap {
  padding: 0;
  max-height: none;
  overflow: visible;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.history-table th {
  text-align: left;
  color: var(--ink-3);
  font-weight: 600;
  padding: 2px 6px 4px;
  border-bottom: 1px solid var(--line);
}
.history-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
.history-table tr.checked td {
  color: var(--ink-3);
}
.history-table tr.new td {
  color: var(--ink);
}
.history-table .who-human {
  color: #2f6f4f;
}
.history-table .who-agent {
  color: #6b6b8f;
}
.history-table .st-new {
  font-weight: 600;
}
.history-empty {
  font-size: 11px;
  color: var(--ink-3);
  padding: 4px 6px 2px;
}
.history-empty[hidden] {
  display: none;
}

.history-actions {
  padding: 12px 0 0;
}
.history-undo {
  width: auto;
  min-width: 200px;
  font-size: 12px;
  padding: 6px 8px;
}

.hist-summary {
  white-space: pre-wrap;
  word-break: break-word;
}
.hist-note-input {
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--well);
  color: var(--ink);
}
.hist-del-btn {
  margin-top: 6px;
  font-size: 12px;
  padding: 4px 8px;
}
.hist-audit {
  margin-top: 8px;
  border: 1px solid var(--divider);
  border-radius: 5px;
  background: var(--well);
}
.hist-audit > summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--ink-2);
  font-size: 11px;
  list-style: none;
}
.hist-audit > summary::-webkit-details-marker {
  display: none;
}
.hist-audit-item {
  padding: 0 10px 10px;
  border-top: 1px solid var(--divider);
}
.hist-audit-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 8px;
}
.hist-audit-sub {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 6px;
}
.hist-code {
  margin: 4px 0 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--body);
  border: 1px solid var(--body-edge);
  color: #d8d0c2;
  font: 11px / 1.45 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}

.canvas.preview-busy {
  cursor: not-allowed;
}
.canvas.box-selecting,
.canvas.box-selecting:active {
  cursor: crosshair;
}
.canvas.editing {
  cursor: grabbing;
}
.canvas[data-cursor="move"] {
  cursor: move;
}
.canvas[data-cursor="ew"] {
  cursor: ew-resize;
}
.canvas[data-cursor="ns"] {
  cursor: ns-resize;
}
.canvas[data-cursor="pointer"] {
  cursor: pointer;
}
.canvas[data-cursor="crosshair"] {
  cursor: crosshair;
}
.canvas[data-cursor="busy"] {
  cursor: not-allowed;
}
.preview-overlay .sel-rect,
.preview-overlay .sel-poly {
  fill: rgba(180, 90, 50, 0.06);
  stroke: var(--key-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.preview-overlay .sel-wall {
  fill: none;
  stroke: var(--key-ink);
  stroke-width: 3;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.preview-overlay .sel-rect.dragging,
.preview-overlay .sel-poly.dragging {
  fill: rgba(180, 90, 50, 0.1);
  stroke-dasharray: 6 4;
}
.preview-overlay .wall-handle,
.preview-overlay .resize-handle-corner,
.preview-overlay .resize-handle-edge {
  fill: var(--key);
  stroke: var(--key-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.preview-overlay .wall-handle.active {
  fill: var(--key-bevel);
}
.preview-box {
  position: absolute;
  border: 2px dashed var(--key-ink);
  background: rgba(180, 90, 50, 0.06);
  pointer-events: none;
  z-index: 3;
}
.ctx-menu {
  position: fixed;
  z-index: var(--z-menu);
  min-width: 180px;
  background: var(--body);
  border: 1px solid var(--body-edge);
  border-radius: 5px;
  box-shadow: var(--shadow-float);
  padding: 10px;
}
.ctx-menu-title {
  font-size: 11px;
  color: var(--ink-3);
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 8px;
}
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
}
.ctx-menu button.key--danger {
  color: #fff8f5;
  background: var(--danger);
  border-top-color: var(--danger-bevel);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--danger-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--danger-wall-2);
  margin-top: 6px;
}
.ctx-menu button.key--danger:active:not(:disabled) {
  box-shadow:
    0 1px 0 var(--danger-wall-2),
    inset 0 3px 7px rgba(0, 0, 0, 0.25);
}

.bubble .msg-attach {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bubble .msg-attach .chip {
  font-size: 10px;
}

.composer-row textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  font: inherit;
  padding: 8px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  min-height: 48px;
  max-height: 160px;
  line-height: 1.5;
}
.composer-row textarea::placeholder {
  color: var(--ink-3);
}
.composer-row textarea:focus {
  outline: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

/* .tabs 仅作语义标记，布局由 .seg-bar 承担 */

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

pre.code {
  margin: 0;
  padding: 14px 16px 18px;
  font: 12px / 1.65 var(--mono);
  white-space: pre;
  overflow-x: auto;
  color: var(--ink);
  background: var(--well);
}
pre.code .ln {
  color: var(--ink-3);
  user-select: none;
  display: inline-block;
  width: 3ch;
  text-align: right;
  margin-right: 12px;
}
pre.code .row.bad {
  background: rgba(0, 0, 0, 0.2);
}
pre.code .row.warn {
  background: rgba(0, 0, 0, 0.15);
}
pre.code .row.selected {
  background: color-mix(in srgb, var(--accent) 24%, var(--well));
  box-shadow: inset 3px 0 0 var(--accent);
}

.canvas-wrap {
  position: relative;
  height: 100%;
  padding: 26px;
  box-sizing: border-box;
}
.canvas-wrap--3d .canvas-inner {
  pointer-events: none;
}
.canvas-wrap--3d .canvas-bar-zoom,
.canvas-wrap--3d .picker--theme,
.canvas-wrap--3d .preview-layer-toggle {
  display: none;
}
.canvas-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #17191b;
  border-radius: 4px;
  overflow: hidden;
}
.preview3d-viewport,
.preview3d-ui-layer {
  position: absolute;
  inset: 0;
}
.preview3d-viewport {
  z-index: 0;
}
.preview3d-ui-layer {
  z-index: 10;
  pointer-events: none;
}
.preview3d-viewport canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: auto;
  outline: none;
}
.preview3d-viewport canvas.is-interactive {
  cursor: default;
  touch-action: none;
}
.preview3d-viewport canvas.is-interactive:active {
  cursor: default;
}
.preview3d-viewport canvas.is-interactive[data-tool="orbit"] {
  cursor: grab;
}
.preview3d-viewport canvas.is-interactive[data-tool="orbit"]:active {
  cursor: grabbing;
}
.preview3d-viewport canvas.is-interactive.is-editing {
  cursor: move;
}
.preview3d-viewport canvas.is-interactive.is-editing:active {
  cursor: move;
}
.canvas-3d-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  color: #c8c2b8;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.preview3d-toolbar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 24px);
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(22, 24, 27, 0.86);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
}
.canvas-bar-3d-views,
.canvas-bar-3d-display {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}
.canvas-bar-3d-display {
  gap: 9px;
}
.canvas-bar-3d-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.preview3d-light-slider {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: inherit;
  opacity: 0.92;
  white-space: nowrap;
}
.preview3d-light-slider input[type="range"] {
  width: 72px;
  accent-color: var(--accent);
  cursor: pointer;
}
.canvas-bar-3d-views .key--seg.key--active {
  background: var(--accent);
  color: var(--paper);
}
.canvas-bar-3d-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  max-width: 9.5em;
  text-overflow: ellipsis;
}
.canvas-3d[hidden] {
  display: none !important;
}
.canvas-inner[hidden] {
  display: none !important;
}
.canvas-bar-mode {
  display: inline-flex;
  gap: 2px;
  margin-right: 8px;
}
.canvas-bar-mode .key--seg.key--active {
  background: var(--accent);
  color: var(--paper);
}
.canvas {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: var(--body);
  border-radius: 4px;
}
.canvas-inner {
  transform-origin: 0 0;
  isolation: isolate;
  position: relative;
  width: max-content;
  height: max-content;
  background: var(--paper);
  border-radius: 4px;
  padding: 16px;
  box-shadow:
    0 0 0 10px #2b2721,
    0 0 0 12px #4a443c,
    0 14px 0 var(--well),
    0 26px 30px rgba(0, 0, 0, 0.55);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
.canvas:active {
  cursor: grabbing;
}
.canvas[data-cursor="move"]:active {
  cursor: move;
}
.canvas[data-cursor="ew"]:active {
  cursor: ew-resize;
}
.canvas[data-cursor="ns"]:active {
  cursor: ns-resize;
}
.canvas.editing:active {
  cursor: grabbing;
}
.canvas.box-selecting:active {
  cursor: crosshair;
}

.canvas-inner svg.plan {
  display: block;
  max-width: none;
  height: auto;
}
.preview-overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
  display: block;
  max-width: none;
}
.preview-overlay rect.spatial-mark,
.preview-overlay circle.spatial-mark,
.preview-overlay .spatial-mark rect,
.preview-overlay .spatial-mark circle {
  fill: rgba(180, 90, 50, 0.08);
  stroke: var(--key-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.preview-overlay rect.spatial-mark.selected,
.preview-overlay circle.spatial-mark.selected,
.preview-overlay .spatial-mark.selected rect,
.preview-overlay .spatial-mark.selected circle {
  fill: rgba(180, 90, 50, 0.14);
  stroke: var(--key-ink);
  stroke-width: 2.5;
}
.preview-overlay .spatial-label {
  fill: var(--key-ink);
  font-family: var(--sans, system-ui, sans-serif);
  font-weight: 600;
  font-size: 12px;
  pointer-events: none;
}
.preview-tool-rail {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition:
    left 0.32s ease,
    right 0.32s ease,
    top 0.32s ease,
    bottom 0.32s ease,
    transform 0.32s ease;
}
/* 右坞：工具栏改到左侧，缩放条改到左下 */
.app[data-layout="chat"][data-dock="right"] .preview-tool-rail {
  right: auto;
  left: 12px;
  transform: translateY(-50%);
}
.app[data-layout="chat"][data-dock="right"] .canvas-bar {
  right: auto;
  left: 12px;
}
.preview-tool-rail .preview-tool {
  width: auto;
  min-width: 44px;
  min-height: 36px;
  padding: 10px 14px 11px;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
}
.preview-inline-text {
  position: absolute;
  z-index: 5;
  min-width: 140px;
  max-width: min(280px, calc(100% - 24px));
  padding: 10px 12px;
  font:
    13px / 1.4 system-ui,
    -apple-system,
    "PingFang SC",
    sans-serif;
  border: none;
  border-radius: 4px;
  background: var(--key);
  color: var(--key-ink);
  border-top: 1px solid var(--key-bevel);
  box-shadow: 0 5px 0 var(--key-wall-1);
  resize: none;
  outline: none;
  pointer-events: auto;
}
.preview-inline-text:focus {
  box-shadow:
    var(--key-focus-ring),
    0 5px 0 var(--key-wall-1);
}
.pages-board {
  display: flex;
  align-items: flex-start;
  gap: 1200px;
  position: relative;
  width: max-content;
  height: max-content;
}
.page-pane {
  position: relative;
  flex: none;
}
.page-pane svg.plan {
  display: block;
}
.composer-context .chip-spatial.selected {
  outline: 2px solid rgba(168, 100, 28, 0.45);
}
.canvas-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.canvas-wrap > .canvas {
  flex: 1;
  min-height: 0;
}
.canvas-bar {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: var(--z-canvas-ui);
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition:
    left 0.32s ease,
    right 0.32s ease,
    top 0.32s ease,
    bottom 0.32s ease;
  overflow: visible;
}
.canvas-bar-zoom {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.canvas-bar .zoom-readout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  margin-bottom: calc(var(--key-wall-h-xs) + 5px);
  font: 11px / 1 var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--well);
  border-radius: 4px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
}
.canvas-bar .key--seg {
  padding: 9px 12px 10px;
  min-height: 32px;
  margin-bottom: calc(var(--key-wall-h-xs) + 5px);
  box-shadow:
    0 var(--key-wall-h-xs) 0 var(--key-dark-wall-1),
    0 calc(var(--key-wall-h-xs) + 1px) 0 var(--key-dark-wall-2),
    0 calc(var(--key-wall-h-xs) + 5px) 12px rgba(0, 0, 0, 0.4);
}
.canvas-bar .key--seg:active:not(:disabled) {
  transform: translateY(var(--key-press-xs));
}

table.areas {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.areas th,
table.areas td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
  color: var(--ink);
}
table.areas th {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
table.areas td.num {
  text-align: right;
  font: 12px var(--mono);
  font-variant-numeric: tabular-nums;
}
table.areas tr.total td {
  font-weight: 600;
  border-top: 2px solid var(--divider);
}
table.areas tr.level td {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--well);
  padding-top: 10px;
  border-bottom: 1px solid var(--divider);
}
table.areas td.null {
  color: var(--ink-3);
  font-style: italic;
  font-family: inherit;
  font-size: 12px;
}
.badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 6px;
}
.badge.no {
  background: rgba(0, 0, 0, 0.25);
  color: #f0c4b8;
}

.diags {
  padding: 8px 0 14px;
}
.diag-group {
  padding: 4px 14px;
}
.diag-group h3 {
  font-size: 11px;
  color: var(--ink-3);
  margin: 10px 0 4px;
  font-weight: 600;
}
.diag .sev {
  flex: none;
  font: 10px var(--mono);
  padding: 2px 6px;
  border-radius: 3px;
  height: fit-content;
}
.diag {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--divider);
  color: var(--ink);
}
.diag.judged {
  opacity: 0.72;
}
.diag.judged .diag-head {
  text-decoration: line-through;
  color: var(--ink-3);
}
.diag-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.diag-code {
  font: 10px var(--mono);
  color: var(--ink-3);
}
.diag-judged {
  color: var(--key);
  font-size: 11px;
  margin-top: 4px;
  font-style: normal;
  text-decoration: none;
}
.diag .sev.error {
  background: rgba(0, 0, 0, 0.25);
  color: #f0c4b8;
}
.diag .sev.warning {
  background: rgba(0, 0, 0, 0.2);
  color: var(--warn);
}
.diag .fixflag {
  color: var(--key);
  font-size: 11px;
  margin-top: 2px;
}

#right-scroll {
  flex: 1;
  min-height: 0;
  transition: padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--body);
}
#right-body {
  height: 100%;
  min-height: 0;
}

/* —— 效果图渲染弹窗 —— */
.render-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.render-modal[hidden] {
  display: none !important;
}
.render-modal [hidden] {
  display: none !important;
}
.render-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.render-modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--chat-panel-bg);
  border: 1px solid var(--chat-shell-edge);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.render-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--divider);
}
.render-modal-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.render-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.render-section h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.render-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.render-style-grid .render-style-btn {
  min-height: 32px;
  padding: 8px 12px 9px;
  font-size: 13px;
}
.render-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--ink);
}
.render-scope-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.render-room-select {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 5px;
  border: 1px solid var(--chat-shell-edge);
  background: var(--chat-input-bg);
  color: var(--ink);
  font: inherit;
}
.render-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  font-size: 13px;
  color: var(--ink-2);
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
}
.render-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: render-spin 0.8s linear infinite;
  flex: none;
}
@keyframes render-spin {
  to {
    transform: rotate(360deg);
  }
}
.render-result img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--divider);
  background: #fff;
  display: block;
}
.render-preview-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.render-history-count {
  font-weight: 500;
  color: var(--ink-3);
}
.render-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.render-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.render-history-item:hover {
  border-color: var(--chat-shell-edge);
  background: rgba(0, 0, 0, 0.18);
}
.render-history-item.is-active {
  border-color: var(--chat-accent-edge);
  background: var(--chat-accent-soft);
}
.render-history-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--divider);
  flex: none;
  background: #fff;
}
.render-history-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.render-history-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.render-history-time {
  font-size: 11px;
  color: var(--ink-3);
}
.render-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--divider);
}
.render-modal-foot .key--accent {
  min-width: 140px;
}

/* —— Flat UI：配色与占位尺寸不变，去掉侧壁厚键立体效果 —— */
.app[data-ui="flat"] {
  --key-wall-h: 0px;
  --key-wall-h-sm: 0px;
  --key-wall-h-xs: 0px;
  --key-press: 0px;
  --key-press-sm: 0px;
  --key-press-xs: 0px;
  --shadow-float: none;
}

/* 米白主键 */
.app[data-ui="flat"] .key,
.app[data-ui="flat"] button.primary {
  border: 1px solid var(--key-wall-2);
  box-shadow: none;
  transform: none;
  margin-bottom: 17px;
}
.app[data-ui="flat"] .key:hover:not(:disabled):not(:active),
.app[data-ui="flat"] button.primary:hover:not(:disabled):not(:active) {
  filter: brightness(1.04);
}
.app[data-ui="flat"] .key:active:not(:disabled),
.app[data-ui="flat"] button.primary:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}
.app[data-ui="flat"] .key:focus-visible,
.app[data-ui="flat"] button.primary:focus-visible {
  box-shadow: var(--key-focus-ring);
}

/* 深键面 */
.app[data-ui="flat"] .key--secondary,
.app[data-ui="flat"] button.secondary {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
  transform: none;
}
.app[data-ui="flat"] .key--secondary:active:not(:disabled),
.app[data-ui="flat"] button.secondary:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}

/* 语义色主键 */
.app[data-ui="flat"] .key--danger,
.app[data-ui="flat"] button.danger {
  border: 1px solid var(--danger-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .key--danger:active:not(:disabled),
.app[data-ui="flat"] button.danger:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}

.app[data-ui="flat"] .key--accent,
.app[data-ui="flat"] .session-bar button.key--accent {
  border: 1px solid var(--accent-wall-2);
  box-shadow: none;
  margin-bottom: 13px;
}
.app[data-ui="flat"] .key--export,
.app[data-ui="flat"] .stage-chrome-right button.key--export {
  border: 1px solid var(--export-wall-2);
  box-shadow: none;
  margin-bottom: 13px;
}
.app[data-ui="flat"] .key--warn,
.app[data-ui="flat"] .history-undo.key--warn {
  border: 1px solid var(--warn-wall-2);
  box-shadow: none;
  margin-bottom: 13px;
}
.app[data-ui="flat"] .key--accent:active:not(:disabled),
.app[data-ui="flat"] .key--export:active:not(:disabled),
.app[data-ui="flat"] .key--warn:active:not(:disabled),
.app[data-ui="flat"] .session-bar button.key--accent:active:not(:disabled),
.app[data-ui="flat"] .stage-chrome-right button.key--export:active:not(:disabled),
.app[data-ui="flat"] .history-undo.key--warn:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}
.app[data-ui="flat"] .key--danger.key--seg {
  border: 1px solid var(--danger-wall-2);
  box-shadow: none;
  margin-bottom: 10px;
}
.app[data-ui="flat"] .key--danger.key--seg:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}

.app[data-ui="flat"] .key:disabled,
.app[data-ui="flat"] button.primary:disabled,
.app[data-ui="flat"] button:disabled.key,
.app[data-ui="flat"] .key--accent:disabled,
.app[data-ui="flat"] .key--export:disabled,
.app[data-ui="flat"] .key--warn:disabled,
.app[data-ui="flat"] .key--danger.key--seg:disabled,
.app[data-ui="flat"] .history-undo:disabled {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
  transform: none;
  filter: none;
}

/* 顶栏标签 */
.app[data-ui="flat"] .seg-bar .tab {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
  transform: none;
  margin-bottom: 11px;
}
.app[data-ui="flat"] .seg-bar .tab:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}
.app[data-ui="flat"] .seg-bar .tab[aria-selected="true"] {
  border-color: var(--key-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .seg-bar .tab:focus-visible,
.app[data-ui="flat"] .seg-bar .tab[aria-selected="true"]:focus-visible {
  box-shadow: var(--key-focus-ring);
}

/* 分段键 / 小键 */
.app[data-ui="flat"] .key--seg,
.app[data-ui="flat"] .session-bar button,
.app[data-ui="flat"] .stage-chrome-right button,
.app[data-ui="flat"] .history-undo,
.app[data-ui="flat"] .hist-del-btn,
.app[data-ui="flat"] .ctx-menu button,
.app[data-ui="flat"] .canvas-bar .key--seg,
.app[data-ui="flat"] .preview-tool {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
  transform: none;
  margin-bottom: 13px;
}
.app[data-ui="flat"] .key--seg:active:not(:disabled),
.app[data-ui="flat"] .session-bar button:active:not(:disabled):not(.key--accent),
.app[data-ui="flat"] .stage-chrome-right button:active:not(:disabled):not(.key--export),
.app[data-ui="flat"] .history-undo:active:not(:disabled):not(.key--warn),
.app[data-ui="flat"] .hist-del-btn:active:not(:disabled):not(.key--danger),
.app[data-ui="flat"] .ctx-menu button:active:not(:disabled):not(.key--accent):not(.key--danger),
.app[data-ui="flat"] .canvas-bar .key--seg:active:not(:disabled),
.app[data-ui="flat"] .preview-tool:active:not(:disabled):not(.active) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}
.app[data-ui="flat"] .key--seg.is-on,
.app[data-ui="flat"] .preview-tool.active {
  border-color: var(--accent-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .session-bar button.key--accent:active:not(:disabled),
.app[data-ui="flat"] .preview-tool.active:active:not(:disabled),
.app[data-ui="flat"] .ctx-menu button.key--accent:active:not(:disabled) {
  border-color: var(--accent-wall-2);
}
.app[data-ui="flat"] .stage-chrome-right button.key--export:active:not(:disabled) {
  border-color: var(--export-wall-2);
}
.app[data-ui="flat"] .history-undo.key--warn:active:not(:disabled) {
  border-color: var(--warn-wall-2);
}
.app[data-ui="flat"] .hist-del-btn.key--danger:active:not(:disabled),
.app[data-ui="flat"] .ctx-menu button.key--danger:active:not(:disabled) {
  border-color: var(--danger-wall-2);
}

/* 图标键 */
.app[data-ui="flat"] .key--icon,
.app[data-ui="flat"] .key--icon-sm,
.app[data-ui="flat"] .canvas-bar .key--icon-sm {
  border: 1px solid var(--key-wall-2);
  box-shadow: none;
  transform: none;
}
.app[data-ui="flat"] .key--icon {
  margin-bottom: 13px;
}
.app[data-ui="flat"] .key--icon-sm,
.app[data-ui="flat"] .canvas-bar .key--icon-sm {
  margin-bottom: 10px;
}
.app[data-ui="flat"] .key--icon:active:not(:disabled),
.app[data-ui="flat"] .key--icon-sm:active:not(:disabled),
.app[data-ui="flat"] .canvas-bar .key--icon-sm:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}

/* 开关 */
.app[data-ui="flat"] .key-toggle-track {
  box-shadow: none;
  border: 1px solid var(--body-edge);
}
.app[data-ui="flat"] .key-toggle-knob {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .key-toggle input:checked + .key-toggle-track .key-toggle-knob {
  border-color: var(--key-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .key-toggle input:focus-visible + .key-toggle-track {
  box-shadow: var(--key-focus-ring);
}

/* 下拉触发器 */
.app[data-ui="flat"] .picker-trigger--key {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
  transform: none;
  margin-bottom: 11px;
}
.app[data-ui="flat"] .picker-trigger--key:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
  box-shadow: none;
}
.app[data-ui="flat"] .picker-trigger--key[aria-expanded="true"] {
  border-color: var(--accent-wall-2);
  box-shadow: none;
}

/* 浮层 / 面板 */
.app[data-ui="flat"] .pane,
.app[data-ui="flat"] .chat-shell,
.app[data-ui="flat"] .picker-panel,
.app[data-ui="flat"] .model-panel,
.app[data-ui="flat"] .ctx-menu,
.app[data-ui="flat"] .render-modal-card {
  box-shadow: none;
}
.app[data-ui="flat"] .chat-shell.is-dragging,
.app[data-ui="flat"] .chat-shell.is-dragging.is-dock-magnet,
.app[data-ui="flat"] .chat-shell.is-dragging.is-dock-release {
  box-shadow: none;
}

/* 对话区 */
.app[data-ui="flat"] .composer-card {
  box-shadow: none;
}
.app[data-ui="flat"] .model-trigger {
  box-shadow: none;
}
.app[data-ui="flat"] .model-trigger:active:not(:disabled) {
  box-shadow: none;
}
.app[data-ui="flat"] .bubble.user {
  box-shadow: none;
}
.app[data-ui="flat"] .chip,
.app[data-ui="flat"] .composer-context .chip {
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
  margin-bottom: 5px;
}
.app[data-ui="flat"] .chip-element,
.app[data-ui="flat"] .composer-context .chip-element {
  border-color: var(--accent-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .composer-send.primary,
.app[data-ui="flat"] .composer-send.danger {
  border: 1px solid var(--key-wall-2);
  box-shadow: none;
  transform: none;
  margin-bottom: 0;
}
.app[data-ui="flat"] .composer-send.danger {
  border-color: var(--danger-wall-2);
}
.app[data-ui="flat"] .composer-send.primary:active:not(:disabled),
.app[data-ui="flat"] .composer-send.danger:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
}

/* 画布 */
.app[data-ui="flat"] .canvas-inner {
  box-shadow: none;
  border: 2px solid #4a443c;
  outline: 2px solid #2b2721;
  outline-offset: 0;
}
.app[data-ui="flat"] .canvas-bar .zoom-readout {
  box-shadow: none;
  border: 1px solid var(--body-edge);
  margin-bottom: 10px;
}
.app[data-ui="flat"] .canvas-bar .key--seg {
  margin-bottom: 10px;
  border: 1px solid var(--key-dark-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .canvas-bar .key--seg:active:not(:disabled) {
  transform: none;
  filter: brightness(0.94);
}

/* 右键菜单危险项 */
.app[data-ui="flat"] .ctx-menu button.key--danger {
  border: 1px solid var(--danger-wall-2);
  box-shadow: none;
  margin-top: 6px;
}
.app[data-ui="flat"] .ctx-menu button.key--danger:active:not(:disabled) {
  box-shadow: none;
  filter: brightness(0.94);
}

.app[data-ui="flat"] .preview-inline-text {
  border: 1px solid var(--key-wall-2);
  box-shadow: none;
}
.app[data-ui="flat"] .preview-inline-text:focus {
  box-shadow: var(--key-focus-ring);
}