/* 基础样式设置 */
body {
    font-family: 'LXGW WenKai', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    overflow: hidden; /* 防止页面滚动 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 主题切换时的平滑过渡 */
}

/* 1. 声明 Regular (常规) - 对应 font-weight: 400 */
@font-face {
    font-family: 'LXGW WenKai';
    src: url('asserts/fonts/LXGWWenKai-Regular.woff2') format('woff2'); /*,*/
    /*url('./fonts/LXGWWenKai-Regular.ttf') format('truetype');*/
    font-weight: 400; /* 标准粗细 */
    font-style: normal;
    font-display: swap; /* 推荐加上，避免文字加载时的闪烁或隐藏 */
}

/* 2. 声明 Medium (中粗) - 对应 font-weight: 500 */
@font-face {
    font-family: 'LXGW WenKai';
    src: url('asserts/fonts/LXGWWenKai-Medium.woff2') format('woff2');
    /*url('./fonts/LXGWWenKai-Medium.ttf') format('truetype');*/
    font-weight: 600; /* 稍粗 */
    font-style: normal;
    font-display: swap; /* 推荐加上，避免文字加载时的闪烁或隐藏 */
}

/* 3. 声明 Light (细体) - 对应 font-weight: 300 */
@font-face {
    font-family: 'LXGW WenKai';
    src: url('asserts/fonts/LXGWWenKai-Light.woff2') format('woff2');
    /*url('./fonts/LXGWWenKai-Light.ttf') format('truetype');*/
    font-weight: 300; /* 较细 */
    font-style: normal;
    font-display: swap; /* 推荐加上，避免文字加载时的闪烁或隐藏 */
}


/*
 * 主题变量系统
 * 使用CSS变量实现主题切换，只需修改data-theme属性即可切换整个应用的主题
 * 每个主题定义了一组完整的颜色变量，确保UI元素在不同主题下都有合适的颜色
 */

/* 明亮主题（默认） */
:root {
    --bg-color: #f8f9fa; /* 主背景色 */
    --sidebar-bg: #ffffff; /* 侧边栏背景色 */
    --hover-bg: #8b650814; /* 悬停状态背景色 */
    --text-color: #1e2124; /* 主文本颜色 */
    --text-secondary: #6c757d; /* 次要文本颜色 */
    --text-tree: #555; /* tree文本颜色 */
    --border-color: #dee2e6; /* 边框颜色 */
    --accent-color: #8b6508; /* 强调色（用于选中状态、按钮等） */
    --accent-hover: #8b650814; /* 强调色悬停状态 */
    --content-bg: #ffffff; /* 内容区域背景色 */
    --content-text: #1e2124; /* 内容区域文本颜色 */
    --tooltip-bg: #1e2124; /* 工具提示背景色 */
    --tooltip-text: #ffffff; /* 工具提示文本颜色 */
    --tree-icon-folder: #8b6508; /* 树状结构文件夹图标颜色 */
    --tree-icon-note: #3b82f6; /* 树状结构笔记图标颜色 */
    --tree-icon-lake: #8b5cf6; /* 树状结构Lake笔记图标颜色 */
    --tree-icon-whiteboard: #10b981; /* 树状结构白板图标颜色 */
    --tree-icon-flowchart: #f97316; /* 树状结构流程图图标颜色 */
    --menu-hover-bg: #f1f3f5; /* 菜单项悬停背景色 */
}

/* 明亮主题 */
[data-theme="light"] {
    --bg-color: #f8f9fa; /* 主背景色 */
    --sidebar-bg: #ffffff; /* 侧边栏背景色 */
    --hover-bg: #8b650814; /* 悬停状态背景色 */
    --text-color: #1e2124; /* 主文本颜色 */
    --text-secondary: #6c757d; /* 次要文本颜色 */
    --text-secondary-label: #555; /* tree文本颜色 */
    --border-color: #dee2e6; /* 边框颜色 */
    --accent-color: #8b6508; /* 强调色（用于选中状态、按钮等） */
    --accent-hover: #8b650814; /* 强调色悬停状态 */
    --content-bg: #ffffff; /* 内容区域背景色 */
    --content-text: #1e2124; /* 内容区域文本颜色 */
    --tooltip-bg: #1e2124; /* 工具提示背景色 */
    --tooltip-text: #ffffff; /* 工具提示文本颜色 */
    --tree-icon-folder: #8b6508; /* 树状结构文件夹图标颜色 */
    --tree-icon-note: #3b82f6; /* 树状结构笔记图标颜色 */
    --tree-icon-lake: #8b5cf6; /* 树状结构Lake笔记图标颜色 */
    --tree-icon-whiteboard: #10b981; /* 树状结构白板图标颜色 */
    --tree-icon-flowchart: #f97316; /* 树状结构流程图图标颜色 */
    --menu-hover-bg: #f1f3f5; /* 菜单项悬停背景色 */
}

/* 暗黑主题 */
[data-theme="dark"] {
    --bg-color: #1e2124; /* 主背景色 */
    --sidebar-bg: #2d3035; /* 侧边栏背景色 */
    --hover-bg: #36393f; /* 悬停状态背景色 */
    --text-color: #ffffff; /* 主文本颜色 */
    --text-secondary: #b9bbbe; /* 次要文本颜色 */
    --text-secondary-label: #ddd; /* tree文本颜色 */
    --border-color: #202225; /* 边框颜色 */
    --accent-color: #facc15; /* 强调色（用于选中状态、按钮等） */
    --accent-hover: #facc1514; /* 强调色悬停状态 */
    --content-bg: #ffffff; /* 内容区域背景色 */
    --content-text: #1e2124; /* 内容区域文本颜色 */
    --tooltip-bg: #1e2124; /* 工具提示背景色 */
    --tooltip-text: #ffffff; /* 工具提示文本颜色 */
    --tree-icon-folder: #facc15; /* 树状结构文件夹图标颜色 */
    --tree-icon-note: #3b82f6; /* 树状结构笔记图标颜色 */
    --tree-icon-lake: #8b5cf6; /* 树状结构Lake笔记图标颜色 */
    --tree-icon-whiteboard: #10b981; /* 树状结构白板图标颜色 */
    --tree-icon-flowchart: #f97316; /* 树状结构流程图图标颜色 */
    --menu-hover-bg: #36393f; /* 菜单项悬停背景色 */
}

/* 护眼主题 */
[data-theme="eye"] {
    --bg-color: #f5f0e6;
    --sidebar-bg: #ede4d3;
    --hover-bg: #e6d9c2;
    --text-color: #3d2f1f;
    --text-secondary: #6b5d4f;
    --text-secondary-label: #555; /* tree文本颜色 */
    --border-color: #d4c5a9;
    --accent-color: #c69749;
    --accent-hover: #a37d3c;
    --content-bg: #faf6ed;
    --content-text: #3d2f1f;
    --tooltip-bg: #3d2f1f;
    --tooltip-text: #f5f0e6;
    --tree-icon-folder: #c69749;
    --tree-icon-note: #3b82f6;
    --tree-icon-lake: #8b5cf6;
    --tree-icon-whiteboard: #10b981;
    --tree-icon-flowchart: #f97316;
    --menu-hover-bg: #e6d9c2;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--hover-bg);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 笔记区域*/
.note-main {
    display: flex;
    justify-content: center;
}



/* 玻璃态效果 - 用于创建半透明模糊背景 */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .glass,
[data-theme="eye"] .glass {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 上下文菜单样式 - 用于右键菜单和弹出菜单 */
.context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--sidebar-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 6px;
    animation: scaleIn 0.15s ease-out;
    transform-origin: top left;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.context-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
    color: var(--text-color);
}

.context-menu-item:hover {
    background: var(--menu-hover-bg);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* 树状结构样式 - 用于笔记列表的层级展示 */
#tree-container {
    user-select: none;
}
.tree-item {
    position: relative;
    transition: background-color 0.2s ease;
}

.secondary-lable {
    color: var(--text-secondary-label);
    font-weight: 400;
}


/* 方式 1：限制只对直接子元素生效（推荐） */
.items-center.active-hover {
    background: var(--hover-bg);
}

.tree-item.active > .items-center.justify-between {
    background: var(--hover-bg);
}

/* 选中状态的左侧强调条 */
/*.tree-item.active .items-center::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 0px;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    width: 3px;*/
/*    background: var(--accent-color);*/
/*    border-radius: 0.375rem 0px 0px 0.375rem;*/
/*}*/
.tree-item.active > .items-center.rounded-md {
    box-shadow: inset 3px 0 0 0 var(--accent-color);
}

/* 树状结构子项容器 - 用于实现展开/收起动画 */
.tree-children {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    opacity: 1;
}

.tree-children.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* 展开/收起图标旋转动画 */
.tree-expand-icon {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-expand-icon.collapsed {
    transform: rotate(-90deg);
}

/* 分隔条样式 - 用于调整区域宽度 */
.resizer {
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.resizer:hover,
.resizer.active {
    background: var(--accent-color);
}

/* 标签页样式 - 用于区域3的标签页 */
.tab {
    position: relative;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    color: var(--text-color);
}

.tab.active {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}

.tab:hover:not(.active) {
    background: var(--hover-bg);
}

/* 图标按钮样式 - 用于区域1的图标菜单和工具栏按钮 */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    position: relative;
}

.icon-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.icon-btn.active {
    background: var(--hover-bg);
    color: var(--accent-color);
}
.bg-primary{
    background: var(--hover-bg);
}
.bg-primary:hover {
background:var(--accent-color);
}

/* 设置面板样式 - 用于左下角的设置弹出菜单 */
.settings-panel {
    position: absolute;
    bottom: 60px;
    left: 60px;
    width: 240px;
    background: var(--sidebar-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 6px;
    z-index: 1000;
    animation: scaleIn 0.2s ease-out;
    transform-origin: bottom left;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.settings-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
    color: var(--text-color);
}

.settings-item:hover {
    background: var(--menu-hover-bg);
}

.settings-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* 主题选择器样式 - 用于设置面板中的主题切换 */
.theme-selector {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
}

.theme-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.theme-option:hover {
    transform: scale(1.1);
}

.theme-option.active {
    border-color: var(--accent-color);
}

/* 动画关键帧定义 */
@keyframes scaleIn {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 加载动画样式 */
.spinner {
    border: 2px solid var(--hover-bg);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* iframe样式 - 用于笔记内容和聊天区域 */
iframe {
    border: none;
    width: 100%;
    height: 100%;
}

/* 隐藏滚动条但保持滚动功能 */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* toolbar*/
.toolbar-tips {
    color: var(--text-secondary);
    font-size: small;
}

/* 工具提示样式 - 用于鼠标悬停时显示提示信息 */
.tooltip {
    position: absolute;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-btn:hover .tooltip {
    opacity: 1;
}

/* 通知提示样式 - 用于显示操作成功等消息 */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--sidebar-bg);
    color: var(--text-color);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 主布局样式 - 定义五个区域的整体布局 */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--bg-color);
    color: var(--text-color);
}

/* 区域1: 左侧图标菜单 */
.region-1 {
    width: 60px;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    z-index: 20;
}

/* 区域2: 侧边栏，包含空间选择器、搜索框和树状笔记列表 */
.region-2 {
    width: 280px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.region-2.hidden {
    width: 0;
    transform: translateX(-100%);
    border-right: none;
}

/* 区域3、4、5的容器 */
.region-3-4-5 {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 区域3: 顶部工具栏，包含标签页和操作按钮 */
.region-3 {
    height: 44px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
}

/* 区域4和5的容器 */
.region-4-5 {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 区域4: 笔记内容显示区域 */
.region-4 {
    flex: 1;
    background: var(--content-bg);
    color: var(--content-text);
    overflow: hidden;
    position: relative;
}

/* 区域5: 右侧面板，用于显示聊天、元数据等 */
.region-5 {
    width: 300px;
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border-color);
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.region-5.hidden {
    width: 0;
    border-left: none;
}

/* 树状结构操作按钮样式 - 悬停时显示 */
.tree-item-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.items-center.rounded-md.active-hover .tree-item-actions {
    opacity: 1;
}

/* 空间选择器样式 - 用于切换不同的笔记空间 */
.space-selector {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.space-dropdown {
    background: var(--hover-bg);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
    color: var(--text-color);
}

.space-dropdown:hover {
    background: var(--border-color);
}

/* 搜索框样式 */
.search-bar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

.search-input {
    background: var(--bg-color);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: var(--text-color);
    width: 100%;
    outline: none;
    transition: background 0.2s;
}

.search-input:focus {
    background: var(--accent-hover);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

/* 拖拽覆盖层 - 用于拖拽调整区域宽度时防止iframe捕获鼠标事件 */
.drag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    cursor: col-resize;
    display: none;
}

.drag-overlay.active {
    display: block;
}

/* 菜单背景层 - 用于点击菜单外部时关闭菜单 */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: transparent;
    display: none;
}

.menu-backdrop.active {
    display: block;
}

/* 笔记类型图标样式 - 根据笔记类型显示不同颜色的图标 */
.note-type-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.note-type-group {
    fill: var(--tree-icon-folder);
}

.note-type-note {
    fill: var(--tree-icon-note);
}

.note-type-lake_note {
    fill: var(--tree-icon-lake);
}

.note-type-whiteboard {
    fill: var(--tree-icon-whiteboard);
}

.note-type-flowchart {
    fill: var(--tree-icon-flowchart);
}

/* 统一菜单项样式 - 用于所有菜单中的项目 */
.menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
    color: var(--text-color);
}

.menu-item:hover {
    background: var(--menu-hover-bg);
}

/* 区域5面板头部样式 */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* ====== 树形目录拖拽排序样式 ================================================================================== */

/* 拖拽指示线样式 */
.drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-color);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
}

.drop-indicator::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
}

.drop-indicator::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
}

/* 拖拽幽灵元素样式 */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    background-color: var(--sidebar-bg);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px 12px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}

/* 拖拽状态样式 */
.tree-item-content.dragging {
    opacity: 0.5;
    background-color: var(--hover-bg);
}

.tree-item-content.drop-target {
    background-color: var(--hover-bg);
    box-shadow: 0 0 0 2px var(--hover-bg);
}
/* ======end 树形目录拖拽排序样式 end================================================================== */