/* 记事本页专属样式：全屏 textarea、悬浮工具栏、移动端适配。 */
/* 强制浅色：本独立页与 zWhiteBoard 组件（被 mainPage 构建期 import 到浅色站点）共享视觉，
   覆盖 common.css 的 color-scheme: light dark 与 prefers-color-scheme: dark，避免深色背景。 */
:root {
  --bar-h: 52px;
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: rgba(0, 0, 0, 0.02);
  --border: #e0e3e7;
  --text: #1a1a1a;
  --text-dim: #6b7280;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}
body { overflow: hidden; background: var(--bg); }
.wb-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.wb-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6em; padding: 0.5em 0.9em;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow); min-height: var(--bar-h);
  flex-wrap: wrap;
}
.wb-bar-left, .wb-bar-right { display: flex; align-items: center; gap: 0.6em; }
.wb-title { font-weight: 700; font-size: 1.05em; }
.wb-id { background: var(--surface-2); padding: 0.15em 0.5em; border-radius: 6px; font-size: 0.82em; color: var(--text-dim); }
.wb-online { color: var(--success); font-size: 0.7em; }
.wb-online.off { color: var(--text-dim); }
.wb-bar .btn { padding: 0.4em 0.9em; font-size: 0.86em; }

.wb-stage { position: relative; flex: 1; overflow: hidden; }
.wb-editor {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; resize: none; border: none; outline: none;
  padding: 1em 1.2em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace;
  font-size: 14px; line-height: 1.6;
  background: var(--surface); color: var(--text);
  touch-action: manipulation;
}
.wb-editor::placeholder { color: var(--text-dim); }
.wb-status {
  position: absolute; bottom: 0.8em; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border);
  padding: 0.3em 0.9em; border-radius: 16px; font-size: 0.8em;
  color: var(--text-dim); box-shadow: var(--shadow);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.wb-status.show { opacity: 1; }
.wb-status.err { color: var(--danger); border-color: var(--danger-soft); }

/* 移动端：工具栏紧凑、按钮变大易触 */
@media (max-width: 640px) {
  .wb-bar { padding: 0.4em 0.5em; gap: 0.4em; }
  .wb-id { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wb-bar .btn { padding: 0.45em 0.7em; }
  .wb-title { display: none; }
  .wb-editor { font-size: 15px; padding: 0.8em; }
}