/* ==============================================
 * 经典版 UI - 样式文件
 * 从原始 index.html 精确提取
 * 包含 Tailwind 配置 + 自定义样式
 * ============================================== */

/* Tailwind 配置 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind 自定义配置（从原始脚本中提取） */
/*
 * tailwind.config = {
 *   darkMode: 'class',
 *   theme: {
 *     extend: {
 *       colors: {
 *         primary: '#4f46e5',
 *         secondary: '#64748b',
 *         success: '#10b981',
 *         danger: '#ef4444',
 *         warning: '#f59e0b',
 *         info: '#3b82f6',
 *         dark: {
 *           50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0',
 *           700: '#334155', 800: '#1e293b', 850: '#172033',
 *           900: '#0f172a', 950: '#0a0f1d',
 *         }
 *       },
 *       screens: {
 *         'xs': '360px', 'sm': '640px', 'md': '768px',
 *         'lg': '1024px', 'xl': '1280px', '2xl': '1536px',
 *       }
 *     }
 *   }
 * }
 */

/* ==============================================
 * 核心样式（从原始 index.html 的 <style> 块精确提取）
 * ============================================== */

/* 【核心修复】全局禁止页面整体滚动，所有滚动都在内部容器 */
html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 基础样式 */
.markdown-body { background: transparent !important; color: #f1f5f9 !important; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: #f1f5f9 !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 滚动条隐藏核心样式 */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.tree-fold { transition: transform 0.2s ease; }
.tree-fold.folded { transform: rotate(-90deg); }

/* 触摸优化 */
.touch-friendly {
  min-height: 44px;
  min-width: 44px;
}

/* Toast动画 */
@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}
.toast-enter { animation: toastIn 0.3s ease forwards; }
.toast-leave { animation: toastOut 0.3s ease forwards; }

/* 锁定页面动画 */
@keyframes lockIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lock-enter { animation: lockIn 0.3s ease forwards; }

/* 侧边栏动画 */
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.sidebar-enter { animation: slideInLeft 0.3s ease forwards; }
.sidebar-leave { animation: slideOutLeft 0.3s ease forwards; }

/* 底部导航动画 */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.bottom-nav-enter { animation: slideUp 0.3s ease forwards; }

/* 草稿状态指示器 */
.draft-indicator {
  transition: all 0.3s ease;
}
.draft-indicator.saving {
  color: #f59e0b;
}
.draft-indicator.saved {
  color: #10b981;
}
.draft-indicator.draft {
  color: #3b82f6;
}

/* 标签样式 */
.draft-tag {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid #3b82f6;
}
.top-tag {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}
.note-item-top {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
  border-color: rgba(245, 158, 11, 0.4) !important;
}
.top-btn-active {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.2) !important;
}
.page-hidden {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 排序控件样式 */
.sort-control {
  transition: all 0.2s ease;
}
.sort-control:hover {
  border-color: #4f46e5;
}
.sort-order-btn.active {
  background: rgba(79, 70, 229, 0.2);
  color: #4f46e5;
  border-color: #4f46e5;
}

/* 分类颜色系统 */
.cat-color-0 { --cat-color: #8b5cf6; --cat-bg: rgba(139, 92, 246, 0.15); --cat-border: rgba(139, 92, 246, 0.3); }
.cat-color-1 { --cat-color: #06b6d4; --cat-bg: rgba(6, 182, 212, 0.15); --cat-border: rgba(6, 182, 212, 0.3); }
.cat-color-2 { --cat-color: #10b981; --cat-bg: rgba(16, 185, 129, 0.15); --cat-border: rgba(16, 185, 129, 0.3); }
.cat-color-3 { --cat-color: #f59e0b; --cat-bg: rgba(245, 158, 11, 0.15); --cat-border: rgba(245, 158, 11, 0.3); }
.cat-color-4 { --cat-color: #ec4899; --cat-bg: rgba(236, 72, 153, 0.15); --cat-border: rgba(236, 72, 153, 0.3); }
.cat-color-5 { --cat-color: #6366f1; --cat-bg: rgba(99, 102, 241, 0.15); --cat-border: rgba(99, 102, 241, 0.3); }
.cat-color-6 { --cat-color: #14b8a6; --cat-bg: rgba(20, 184, 166, 0.15); --cat-border: rgba(20, 184, 166, 0.3); }
.cat-color-7 { --cat-color: #f97316; --cat-bg: rgba(249, 115, 22, 0.15); --cat-border: rgba(249, 115, 22, 0.3); }

.category-badge {
  background: var(--cat-bg);
  color: var(--cat-color);
  border: 1px solid var(--cat-border);
}
.tag-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

/* 【修复】模态框全屏仅手机端生效 */
@media (max-width: 640px) {
  .modal-fullscreen-xs {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* 安全区域适配 */
:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}
.safe-area-top { padding-top: var(--sat); }
.safe-area-bottom { padding-bottom: var(--sab); }
.safe-area-left { padding-left: var(--sal); }
.safe-area-right { padding-right: var(--sar); }

/* 【核心修复】三列布局高度限制，永不超框 */
.main-content-grid {
  height: calc(100vh - 64px);
  overflow: hidden;
}

/* 【核心修复】每一列的固定高度+内部滚动 */
.column-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 【核心修复】滚动区域通用样式，超出自动滚动 */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 【核心修复】知识库容器固定高度，内部滚动 */
.knowledge-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 【核心修复】编辑器文本域滚动 */
#noteContent {
  resize: none;
  overflow-y: auto;
}