/*
 * 工具界面样式。取值全部来自 CanvasAgent/DESIGN.md「Phosphor」，亮/暗各一份。
 * 注意：这里的样式不能影响 #nice（文章），文章只归 theme/phosphor.css 管。
 */
:root {
  --primary-6: #12874F; --primary-5: #16A05E; --primary-7: #0E6B3F; --primary-1: #E3F6EC;
  --bg-layout: #F2F4F7; --bg-container: #FFFFFF; --bg-elevated: #E9EDF2;
  --border: #D2D8E0; --divider: #E2E6EC;
  --text-1: #1A2029; --text-2: #4A5563; --text-3: #6B7686; --text-disabled: #9AA3B0;
  --error-6: #C4363B; --warning-6: #A9700F;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  color-scheme: light;
}
/* 亮/暗默认跟随系统；被画布嵌入时由 data-theme 跟随画布（canvas-bridge.js） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-6: #3DD68C; --primary-5: #5FE3A3; --primary-7: #26B873; --primary-1: #0E2A1E;
    --bg-layout: #12161C; --bg-container: #171C23; --bg-elevated: #1E242D;
    --border: #2A313C; --divider: #222831;
    --text-1: #D3DAE2; --text-2: #AAB4C0; --text-3: #8B96A5; --text-disabled: #586477;
    --error-6: #F2555A; --warning-6: #E5A13A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary-6: #3DD68C; --primary-5: #5FE3A3; --primary-7: #26B873; --primary-1: #0E2A1E;
  --bg-layout: #12161C; --bg-container: #171C23; --bg-elevated: #1E242D;
  --border: #2A313C; --divider: #222831;
  --text-1: #D3DAE2; --text-2: #AAB4C0; --text-3: #8B96A5; --text-disabled: #586477;
  --error-6: #F2555A; --warning-6: #E5A13A;
  color-scheme: dark;
}
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg-layout); color: var(--text-1); font: 13px/1.5 var(--mono); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary-6); outline-offset: 2px; }

/* flex 而非 grid：窄屏切换条在宽屏下 display:none，grid 的行模板会因此错位 */
.app { display: flex; flex-direction: column; height: 100vh; }
.app > .workspace { flex: 1; }

/* ─── 顶栏 ─── */
.topbar {
  display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 8px 16px;
  background: var(--bg-container); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.brand-mark { width: 3px; height: 16px; background: var(--primary-6); align-self: center; }
.brand-name { font: 600 14px/1 var(--ui); color: var(--text-1); }
.brand-theme { color: var(--text-3); font-size: 12px; }
.file { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.file-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-state { font-size: 12px; white-space: nowrap; }
.file-state.dirty { color: var(--warning-6); }
.file-state.saved { color: var(--text-3); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Button：终端风格，不填色，方括号 + 描边 */
.btn {
  padding: 5px 10px; border: 1px solid; border-radius: 4px; background: transparent;
  cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s;
}
.btn-primary { color: var(--primary-6); border-color: var(--primary-6); }
.btn-primary:hover { background: var(--primary-1); color: var(--primary-5); }
.btn-primary:active { color: var(--primary-7); }
.btn-secondary { color: var(--text-2); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-elevated); color: var(--text-1); }

/* ─── 工作区 ─── */
.workspace { display: grid; grid-template-columns: var(--split, 44%) 6px 1fr; min-height: 0; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-container); }
.pane-head {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 16px;
  border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 12px;
}
.pane-title { color: var(--text-3); }
.pane-meta { margin-left: auto; font-variant-numeric: tabular-nums; }

.editor {
  flex: 1; width: 100%; min-height: 0; padding: 16px; border: 0; resize: none; outline: none;
  background: var(--bg-container); color: var(--text-1);
  font: 14px/1.75 var(--mono); tab-size: 2;
}
.editor::placeholder { color: var(--text-disabled); }
.editor.drop-target { box-shadow: inset 0 0 0 2px var(--primary-6); background: var(--primary-1); }

.splitter { background: var(--border); cursor: col-resize; position: relative; }
.splitter::after { content: ""; position: absolute; inset: 0 -4px; }
.splitter:hover, .splitter.dragging { background: var(--primary-6); }

/* ─── 预览 ─── */
.preview-head { flex-wrap: wrap; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: transparent;
  color: var(--text-2); cursor: pointer; font-size: 12px;
}
.chip:hover { background: var(--bg-elevated); color: var(--text-1); }
/* 选中：极淡底 + 主色字，不整块填充 */
.chip[aria-pressed="true"] { background: var(--primary-1); color: var(--primary-6); border-color: var(--primary-6); }
.width-readout { margin-left: auto; color: var(--text-1); font-variant-numeric: tabular-nums; }
.dark-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); white-space: nowrap; }
.dark-toggle input { accent-color: var(--primary-6); margin: 0; }

.stage { flex: 1; min-height: 0; overflow: auto; padding: 24px 32px 48px; background: var(--bg-layout); }
.device {
  position: relative; margin: 0 auto; min-height: 100%; max-width: none;
  background: #FFFFFF; border: 1px solid var(--border); border-radius: 8px;
  display: flex;
}
.device.resizing { user-select: none; }
.device-screen { flex: 1; min-width: 0; border: 0; border-radius: 8px; }
.device-screen[hidden] { display: none; }
iframe.device-screen { background: #191919; height: 100%; }
/* 深色模拟时 iframe 自己滚动，设备框固定为预览区高度 */
.device.dark { height: 100%; min-height: 0; }

/* 文章容器：模拟公众号正文区 —— 默认字体栈、默认文字色、PC 端 677px 版心 */
.article {
  max-width: 677px; margin: 0 auto; padding: 24px 16px 48px;
  font-family: "mp-quote", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  color: rgba(0, 0, 0, 0.9); font-size: 17px; line-height: 1.6; letter-spacing: normal;
  text-align: left; cursor: text;
}

/* 右缘拖拽条：宽 16px 的命中区，视觉只有一根 4px 胶囊 */
.device-handle {
  position: absolute; top: 0; right: -17px; width: 16px; height: 100%;
  cursor: ew-resize; display: flex; align-items: flex-start; justify-content: center;
}
.device-handle span {
  position: sticky; top: 40vh; width: 4px; height: 48px; margin-top: 120px;
  border-radius: 9999px; background: var(--text-disabled);
}
.device-handle:hover span, .device-handle:focus-visible span, .device.resizing .device-handle span { background: var(--primary-6); }

/* ─── 状态栏 ─── */
.statusbar {
  display: flex; gap: 16px; align-items: center; min-height: 28px; padding: 4px 16px;
  background: var(--bg-container); border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 12px;
}
.status-msg { margin-left: auto; }
.status-msg.ok { color: var(--primary-6); }
.status-msg.err { color: var(--error-6); }

/* ─── 窄屏：编辑 / 预览二选一 ─── */
.pane-switch { display: none; }
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; }
  .file { order: 3; flex-basis: 100%; }
  .pane-switch {
    display: flex; gap: 0; padding: 8px 16px; background: var(--bg-container); border-bottom: 1px solid var(--border);
  }
  .pane-switch button {
    flex: 1; padding: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer;
  }
  .pane-switch button:first-child { border-radius: 4px 0 0 4px; }
  .pane-switch button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
  .pane-switch button[aria-selected="true"] { background: var(--primary-1); color: var(--primary-6); border-color: var(--primary-6); }
  .workspace { grid-template-columns: 1fr; }
  .splitter { display: none; }
  .pane[data-hidden="true"] { display: none; }
  .stage { padding: 16px; }
  .device-handle { display: none; }
  /* 手机上预览框不超过屏宽，宽度预设在这里只作为上限 */
  .device { max-width: 100%; }
}