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

::-webkit-scrollbar-track {
  background: #edf1f7;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c3d0e3;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #416d9d;
}

/* 卡片悬停效果 */
.site-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.site-card:hover {
  transform: scale(1.15) translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  z-index: 10;
  border: 2px solid #416d9d;
}

/* 图标消失动画 */
.site-icon {
  width: 2.5rem;
  margin-right: 1rem;
  opacity: 1;
}

.site-card:hover .site-icon {
  width: 0;
  margin-right: 0;
  opacity: 0;
  transition-delay: 0.1s;
}

/* 标题放大动画 */
.site-title {
  transform-origin: left center;
}

.site-card:hover .site-title {
  transform: scale(1.2);
  transition-delay: 0.1s;
}

/* 复制成功提示动画 */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.copy-success-animation {
  animation: fadeInOut 2s ease forwards;
}

/* 移动端侧边栏 */
@media (max-width: 1023px) {
  .mobile-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .mobile-sidebar.open {
    transform: translateX(0);
  }
  
  .mobile-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  
  .mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 多行文本截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 侧边栏控制 */
#sidebar-toggle {
  display: none;
}

@media (min-width: 1024px) {
  #sidebar-toggle:checked ~ .sidebar {
    margin-left: -16rem;
  }
  
  #sidebar-toggle:checked ~ .main-content {
    margin-left: 0;
  }
}

/* 根据 submission_enabled 控制按钮显示 */
[data-submission="false"] #addSiteBtnSidebar {
  display: none;
}

[data-submission="false"]::after {
  content: "访客书签提交功能已关闭";
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: #416d9d;
  background-color: white;
  border: 1px solid #f6ede1;
  border-radius: 0.5rem;
}

/* 毛玻璃效果 */
.frosted-glass-effect {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(var(--frosted-glass-blur, 15px)) !important;
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur, 15px)) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.frosted-glass-effect:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* 卡片进入动画 */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-anim-enter {
  animation: cardEnter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}

@media (max-width: 410px) {
  .site-card .p-5 {
    padding: 0.75rem !important;
  }

  .site-card .flex.items-start {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-card .site-icon {
    margin-right: 0;
    margin-bottom: 0.5rem;
    width: 2.5rem; 
    height: 2.5rem;
  }

  .site-card .flex-1 {
    width: 100%;
  }

  .site-card .site-title {
    text-align: center;
    width: 100%;
  }

  .copy-text {
    display: none;
  }
  
  .copy-btn svg {
    margin-right: 0 !important;
  }
}

/* ========================================= */
/* 导航栏与下拉菜单统一样式 */
/* ========================================= */

.menu-item-wrapper {
  position: relative;
  display: inline-block;
}

/* 统一的导航按钮样式 (Base Nav Button) */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px; /* rounded-full */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: 1px solid transparent; /* Prevent layout shift on border change */
  cursor: pointer;
  text-decoration: none;
  height: 2.5rem; /* 固定高度，确保对齐 */
}

/* 默认状态 (未激活) */
.nav-btn.inactive {
  background-color: rgba(255, 255, 255, 0.15); /* bg-white/15 */
  color: white;
  backdrop-filter: blur(4px);
}

.nav-btn.inactive:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* 自定义壁纸下的默认状态 */
.custom-wallpaper .nav-btn.inactive {
  background-color: rgba(255, 255, 255, 0.7);
  color: #374151; /* text-gray-700 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.custom-wallpaper .nav-btn.inactive:hover {
  background-color: white;
  color: #2563eb; /* text-primary-600 */
}

/* 激活状态 (Active) */
.nav-btn.active {
  background-color: white;
  color: #1d4ed8; /* text-primary-700 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

/* 自定义壁纸下的激活状态 */
.custom-wallpaper .nav-btn.active {
  background-color: #2563eb; /* bg-primary-600 */
  color: white;
}

/* 下拉菜单容器 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px); /* 减小位移 */
  z-index: 60;
  
  /* 宽度设置：约5-6个汉字 */
  min-width: 100px; 
  width: max-content;
  max-width: 160px;
  
  padding: 0.25rem; 
  margin-top: 0.2rem; /* 减小间距 */
  
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* === 关键修复：透明桥接层 === */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -0.4rem; /* 覆盖 margin 和 translateY 的空间 */
  left: 0;
  width: 100%;
  height: 0.4rem;
  background: transparent;
}

/* 显示下拉菜单 */
.menu-item-wrapper:hover > .dropdown-menu,
.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 二级菜单 (向右弹出) */
.dropdown-menu .menu-item-wrapper {
  display: block;
  width: 100%;
}

.dropdown-menu .menu-item-wrapper .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.25rem;
  margin-left: 0.2rem; /* 减小间距 */
  transform: translateX(-4px) translateY(0); /* 减小位移 */
}

/* 二级菜单桥接 */
.dropdown-menu .menu-item-wrapper .dropdown-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: -0.4rem; /* 覆盖间隙 */
  width: 0.4rem;
  height: 100%;
  background: transparent;
}

.dropdown-menu .menu-item-wrapper:hover > .dropdown-menu {
  transform: translateX(0) translateY(0);
}

/* 下拉菜单项 */
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center; /* 文字居中 */
  position: relative; /* For arrow positioning */
  
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* text-gray-600 */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.15s ease;
  width: 100%;
  text-align: center; /* 确保文字居中 */
}

.dropdown-item:hover {
  background-color: #f3f4f6; /* bg-gray-100 */
  color: #2563eb; /* text-primary-600 */
}

/* 下拉菜单中的激活项 */
.dropdown-item.active {
  background-color: #eff6ff; /* bg-primary-50 */
  color: #1d4ed8; /* text-primary-700 */
  font-weight: 500;
}

/* 箭头指示器 (小箭头) */
.dropdown-arrow-icon {
  position: absolute;
  right: 4px; /* 靠右浮动 */
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: #9ca3af;
  pointer-events: none;
}

.menu-item-wrapper:hover > .dropdown-item .dropdown-arrow-icon {
  color: #6b7280;
}

/* 更多按钮容器背景修正 */
#horizontalMoreBtnContainer {
  /* 确保渐变背景不遮挡圆角 */
  border-radius: 0 9999px 9999px 0; 
}

/* === 关键修复：更多菜单样式重置与显隐控制 === */
#horizontalMoreDropdown {
  left: auto !important;
  right: 0 !important;
  transform: translateY(10px) !important;
}

/* 当移除 hidden 类时，强制显示 */
#horizontalMoreDropdown:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* 自定义壁纸下的下拉菜单样式 */
.custom-wallpaper .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

/* ========================================= */
/* Overflow Menu Adaptation */
/* ========================================= */

/* Transform nav-btn into dropdown-item style when moved to overflow menu */
#horizontalMoreDropdown .nav-btn {
  display: flex;
  width: 100%;
  height: auto; /* Reset fixed height */
  border-radius: 0.25rem;
  background-color: transparent;
  color: #4b5563;
  box-shadow: none;
  justify-content: flex-start; /* Left align */
  padding: 0.5rem 0.75rem;
  backdrop-filter: none;
}

#horizontalMoreDropdown .nav-btn:hover {
  background-color: #f3f4f6;
  color: #2563eb;
}

#horizontalMoreDropdown .nav-btn.active {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* Custom wallpaper adjustments for overflow menu */
.custom-wallpaper #horizontalMoreDropdown .nav-btn {
  color: #374151;
}
.custom-wallpaper #horizontalMoreDropdown .nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: #2563eb;
}
.custom-wallpaper #horizontalMoreDropdown .nav-btn.active {
  background-color: #2563eb;
  color: white;
}

/* ========================================= */
/* 修复：更多菜单中的二级菜单改为向左弹出 */
/* ========================================= */

#horizontalMoreDropdown .menu-item-wrapper .dropdown-menu {
  left: auto;
  right: 100%; /* 向左弹出 */
  margin-left: 0;
  margin-right: 0.2rem;
  transform: translateX(4px) translateY(0); /* 调整动画位移方向 */
}

/* 修正左侧弹出时的鼠标悬停桥接区域 */
#horizontalMoreDropdown .menu-item-wrapper .dropdown-menu::after {
  left: auto;
  right: -0.4rem;
}

/* 调整悬停时的动画终点 */
#horizontalMoreDropdown .menu-item-wrapper:hover > .dropdown-menu {
  transform: translateX(0) translateY(0);
}