/* 白板页专属样式：全屏画布、悬浮工具栏、移动端适配。 */
:root { --bar-h: 52px; }
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-tool { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.85em; color: var(--text-dim); }
.wb-tool input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; }
.wb-tool input[type="range"] { width: 80px; accent-color: var(--primary); }
.wb-width-val { width: 1.4em; text-align: center; }
.wb-bar .btn { padding: 0.4em 0.9em; font-size: 0.86em; }

.wb-stage { position: relative; flex: 1; overflow: hidden; }
#canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; cursor: crosshair;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--surface);
  background-blend-mode: normal;
}
.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-tool input[type="range"] { width: 56px; }
  .wb-bar .btn { padding: 0.45em 0.7em; }
  .wb-title { display: none; }
}