/* 自定义样式 + Tailwind 补充 */

@layer utilities {
  .text-link {
    @apply text-primary hover:underline;
  }
  .sidebar-active {
    @apply bg-primary/10 text-primary border-r-2 border-primary;
  }

  /* 自定义滚动条 - 深色 */
  .dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .dark ::-webkit-scrollbar-track {
    background: #1A1F29;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: #434C5E;
    border-radius: 4px;
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #0891b2;
  }

  /* 自定义滚动条 - 浅色 */
  html:not(.dark) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  html:not(.dark) ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
  html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #0891b2;
  }

  /* 浅色模式下的文字颜色覆盖 */
  html:not(.dark) .text-light-text {
    color: #1e293b;
  }
  html:not(.dark) .text-light-muted {
    color: #64748b;
  }
  html:not(.dark) .bg-light-bg {
    background-color: #f8fafc;
  }
  html:not(.dark) .bg-light-card,
  html:not(.dark) .bg-white {
    background-color: #ffffff;
  }
  html:not(.dark) .border-light-border {
    border-color: #e2e8f0;
  }

  /* 浅色模式下输入框和卡片 */
  html:not(.dark) input,
  html:not(.dark) textarea {
    color: #1e293b;
    background-color: #f8fafc;
    border-color: #e2e8f0;
  }
  html:not(.dark) input::placeholder,
  html:not(.dark) textarea::placeholder {
    color: #94a3b8;
  }
  html:not(.dark) .bg-gray-50 {
    background-color: #f8fafc;
  }
  html:not(.dark) .text-gray-700 {
    color: #334155;
  }
  html:not(.dark) .text-gray-800 {
    color: #1e293b;
  }
  html:not(.dark) .text-gray-600 {
    color: #475569;
  }
  html:not(.dark) .text-gray-500 {
    color: #64748b;
  }
  html:not(.dark) .text-gray-400 {
    color: #94a3b8;
  }
  html:not(.dark) .bg-gray-100 {
    background-color: #f1f5f9;
  }

  /* 浅色模式 hover 状态 */
  html:not(.dark) .hover\:bg-gray-100:hover {
    background-color: #f1f5f9;
  }
  html:not(.dark) .hover\:bg-gray-50:hover {
    background-color: #f8fafc;
  }

  /* 代码块样式 */
  pre {
    @apply bg-gray-900 dark:bg-black rounded-lg p-4 overflow-x-auto my-4;
  }
  pre code {
    @apply text-gray-100 text-sm font-mono leading-relaxed;
  }
  code {
    @apply bg-gray-100 dark:bg-gray-800 text-primary px-1.5 py-0.5 rounded text-sm font-mono;
  }
  pre code {
    @apply bg-transparent text-gray-100 dark:text-gray-100 px-0 py-0;
  }

  /* 图片样式 */
  img {
    @apply rounded-lg shadow-md my-4;
  }

  /* 文件夹展开动画 */
  [class^="folder-children-"] {
    @apply overflow-hidden;
  }

  /* 左侧边栏树形目录样式 - 飞书风格 */
  .tree-item {
    @apply select-none;
  }
  .tree-item > div {
    @apply transition-all duration-150;
  }
  .tree-item > div:hover {
    @apply bg-gray-100 dark:bg-dark-hover;
  }
  .tree-item .fa-caret-right,
  .tree-item .fa-caret-down {
    @apply transition-transform duration-150;
  }
  [class^="tree-children-"] {
    @apply overflow-hidden;
  }

  /* 移动端：树目录展开时防止穿透到底部标签 */
  @media (max-width: 1023px) {
    #leftSidebar {
      padding-bottom: 80px !important;
    }
    #leftSidebar > .p-6 {
      padding-bottom: 6rem;
    }
  }

  /* 留言板头像渐变 */
  .guestbook-avatar {
    background: linear-gradient(135deg, #0891b2, #67e8f9);
  }
}

/* 浅色模式下保持 white 背景的卡片可见 */
html:not(.dark) .bg-white {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

html:not(.dark) section h2 {
  color: #0f172a;
}

html:not(.dark) .hover\:bg-gray-50:hover {
  background-color: #f8fafc;
}

/* 留言表单 sticky 优化 */
@media (max-width: 1023px) {
  #guestbook .sticky {
    position: relative;
    top: 0;
  }
}

/* ========== 侧边栏拖拽调整大小 ========== */
#sidebarResizeHandle {
  width: 5px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.2s;
  z-index: 10;
}
#sidebarResizeHandle:hover,
#sidebarResizeHandle.active {
  background: #0891b2;
}

/* 拖拽时禁用文本选择 */
body.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}