/* public/assets/css/text/whiteboard.css */
.wb-tool-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #3b82f6; --p-text: #0f172a; width: 100%; max-width: 1400px; margin: 0 auto; background: var(--p-bg); border-radius: 20px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); box-sizing: border-box; }
.wb-header-main { font-size: 1.5rem; font-weight: 800; color: var(--p-text); margin-bottom: 8px; text-align: center; }
.wb-subtitle { color: #64748b; font-size: 0.95rem; padding-bottom: 20px; border-bottom: 1px solid var(--p-border); margin-bottom: 20px; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* 核心布局框架：弹性行布局 */
.wb-pro-layout { display: flex; flex-direction: row; height: 75vh; min-height: 500px; border: 1px solid var(--p-border); border-radius: 16px; background: #e2e8f0; overflow: hidden; position: relative; }

/* 沉浸全屏模式 */
.wb-pro-layout.fullscreen-mode {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important; z-index: 999999 !important;
    margin: 0 !important; border-radius: 0 !important; border: none !important;
}

/* 1. 左侧竖向工具栏 */
.wb-sidebar { width: 64px; background: #ffffff; border-right: 1px solid var(--p-border); display: flex; flex-direction: column; align-items: center; padding: 12px 0; z-index: 30; flex-shrink: 0; overflow-y: auto; scrollbar-width: none; }
.wb-sidebar::-webkit-scrollbar { display: none; }
.wb-sidebar-section { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.wb-sidebar-section.bottom { margin-top: auto; padding-top: 12px; }
.wb-sidebar-divider { width: 36px; height: 1px; background: var(--p-border); margin: 4px 0; flex-shrink: 0; }

/* 按钮样式 */
.wb-tool-btn, .wb-action-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; }
.wb-tool-btn:hover, .wb-action-btn:hover { background: #f1f5f9; }
.wb-tool-btn.active { background: #eff6ff; border-color: #bfdbfe; box-shadow: inset 0 0 0 1px #3b82f6; }

.wb-action-btn.toggle-props { background: #f0fdf4; border-color: #bbf7d0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.wb-action-btn.toggle-props:hover { background: #dcfce3; }
.wb-action-btn.toggle-props.active { background: var(--p-primary); border-color: var(--p-primary); color: white; filter: grayscale(1) brightness(2); }

.wb-action-btn.primary { background: var(--p-primary); color: white; }
.wb-action-btn.primary:hover { background: #2563eb; transform: translateY(-2px); }

/* 2. 悬浮属性面板 (侧边抽屉) */
.wb-props-panel { position: absolute; left: 64px; top: 0; bottom: 0; width: 240px; background: #ffffff; border-right: 1px solid var(--p-border); box-shadow: 4px 0 15px rgba(0,0,0,0.05); z-index: 20; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; }
.wb-props-panel.open { transform: translateX(0); }

.wb-props-header { padding: 16px; border-bottom: 1px solid var(--p-border); display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #334155; font-size: 1rem; background: #f8fafc; }
.wb-props-close { background: none; border: none; font-size: 1.1rem; color: #94a3b8; cursor: pointer; padding: 4px; display: flex; }
.wb-props-close:hover { color: #ef4444; }

.wb-props-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.wb-props-divider { height: 1px; background: var(--p-border); width: 100%; margin: 4px 0; }
.wb-prop-item { display: flex; font-size: 0.9rem; color: #475569; font-weight: 600; }
.wb-prop-item.col { flex-direction: column; gap: 8px; }
.wb-prop-item.row { justify-content: space-between; align-items: center; }

input[type="range"] { accent-color: var(--p-primary); cursor: pointer; width: 100%; }
input[type="color"] { width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #cbd5e1; border-radius: 6px; }
.wb-checkbox-label { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.wb-checkbox { width: 16px; height: 16px; accent-color: var(--p-primary); cursor: pointer; }

/* 3. 画布容器与浮动全屏按钮 */
.wb-canvas-container { flex: 1; position: relative; overflow: hidden; touch-action: none; background: #e2e8f0; }
#wbCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.wb-fs-floating-btn { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; background: #ffffff; border: 1px solid var(--p-border); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); cursor: pointer; font-size: 1.2rem; display: flex; justify-content: center; align-items: center; z-index: 10; transition: 0.2s; }
.wb-fs-floating-btn:hover { background: #f1f5f9; transform: scale(1.05); }

/* ================= 极简响应式 (所有设备保持相同排版逻辑) ================= */
@media (max-width: 950px) and (orientation: landscape) {
    .wb-header-main, .wb-subtitle { display: none; }
    .wb-tool-wrapper { padding: 0; border: none; box-shadow: none; border-radius: 0; }
    .wb-pro-layout { height: 100vh; border-radius: 0; border: none; }
}
@media (max-width: 768px) {
    /* 移动端更窄的侧边栏 */
    .wb-sidebar { width: 56px; padding: 8px 0; }
    .wb-tool-btn, .wb-action-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    .wb-props-panel { left: 56px; box-shadow: 10px 0 20px rgba(0,0,0,0.15); }
}

/* 黑夜模式 */
[data-theme="dark"] .wb-tool-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .wb-header-main { color: #f8fafc; }
[data-theme="dark"] .wb-pro-layout { border-color: #475569; }
[data-theme="dark"] .wb-sidebar { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .wb-sidebar-divider, [data-theme="dark"] .wb-props-divider { background: #475569; }
[data-theme="dark"] .wb-tool-btn:hover, [data-theme="dark"] .wb-action-btn:hover { background: #1e293b; }
[data-theme="dark"] .wb-tool-btn.active { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; }
[data-theme="dark"] .wb-action-btn.toggle-props { background: #064e3b; border-color: #047857; }
[data-theme="dark"] .wb-action-btn.toggle-props.active { background: var(--p-primary); border-color: var(--p-primary); }

[data-theme="dark"] .wb-props-panel { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .wb-props-header { background: #1e293b; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .wb-prop-item { color: #cbd5e1; }
[data-theme="dark"] input[type="color"]::-webkit-color-swatch { border-color: #475569; }

[data-theme="dark"] .wb-fs-floating-btn { background: #1e293b; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .wb-fs-floating-btn:hover { background: #334155; }