/* ========================================
   CrisTsau Garden - Perplexity 奶油青绿风格
   ======================================== */

:root {
  /* Perplexity 青绿配色 */
  --cream-bg: #FDFCF9;
  --cream-surface: #FFFFFF;
  --teal-primary: #20B2AA;
  --teal-hover: #1A9B94;
  --teal-light: #E6F7F6;
  --teal-dark: #158F87;
  --text-primary: #1A1A1A;
  --text-secondary: #6B7280;
  --border-color: #E5E7EB;
  --shadow-sm: 0 1px 3px rgba(32, 178, 170, 0.08);
  --shadow-md: 0 4px 12px rgba(32, 178, 170, 0.12);
  --shadow-lg: 0 8px 24px rgba(32, 178, 170, 0.15);
}

body {
  background: var(--cream-bg) !important;
  color: var(--text-primary) !important;
}

/* ========== 顶部导航栏 ========== */
header {
  background: var(--cream-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: var(--shadow-sm) !important;
  height: 60px !important;
}

.logo {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--teal-primary) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 标签页 - Perplexity 风格 */
.tabs {
  display: flex !important;
  gap: 4px !important;
  background: var(--teal-light) !important;
  padding: 4px !important;
  border-radius: 12px !important;
}

.tab {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tab:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: var(--teal-primary) !important;
}

.tab.active {
  background: var(--cream-surface) !important;
  color: var(--teal-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 搜索框 - 奶油风格 */
.search-box {
  flex: 1 !important;
  max-width: 480px !important;
  margin: 0 24px !important;
  position: relative !important;
}

.search-input {
  width: 100% !important;
  padding: 10px 16px 10px 40px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 24px !important;
  background: var(--cream-bg) !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

.search-input:focus {
  outline: none !important;
  border-color: var(--teal-primary) !important;
  box-shadow: 0 0 0 3px var(--teal-light) !important;
  background: var(--cream-surface) !important;
}

.search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-secondary) !important;
}

/* 右侧按钮组 */
.header-right {
  display: flex !important;
  gap: 8px !important;
}

.btn-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--teal-light) !important;
  color: var(--teal-primary) !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-icon:hover {
  background: var(--teal-primary) !important;
  color: white !important;
  transform: scale(1.05) !important;
}

/* ========== 分组标签 ========== */
.group-tabs {
  padding: 16px 24px 12px !important;
  background: var(--cream-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
}

.group-tab {
  padding: 8px 20px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--cream-bg) !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.group-tab:hover {
  border-color: var(--teal-primary) !important;
  background: var(--teal-light) !important;
}

.group-tab.active {
  background: var(--teal-primary) !important;
  color: white !important;
  border-color: var(--teal-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ========== 导航卡片 - 去除边框 ========== */
.link-card {
  background: var(--cream-surface) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.link-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.link-icon-wrapper {
  background: var(--teal-light) !important;
  border-radius: 12px !important;
  border: none !important;
}

/* 添加导航卡片 - 特殊样式 */
.add-link-card {
  background: var(--teal-light) !important;
  border: 2px dashed var(--teal-primary) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.add-link-card:hover {
  background: var(--teal-primary) !important;
  border-style: solid !important;
}

.add-link-card:hover .add-icon {
  color: white !important;
}

.add-icon {
  font-size: 2.5rem !important;
  color: var(--teal-primary) !important;
  transition: all 0.2s ease !important;
}

.add-text {
  font-size: 0.85rem !important;
  color: var(--teal-primary) !important;
  font-weight: 500 !important;
}

.add-link-card:hover .add-text {
  color: white !important;
}

/* ========== AI 悬浮面板 - 左下角美化 ========== */
.ai-panel {
  position: fixed !important;
  left: 24px !important;
  bottom: 24px !important;
  width: 380px !important;
  height: 500px !important;
  background: var(--cream-surface) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 1000 !important;
  border: 1px solid var(--border-color) !important;
}

.ai-panel.open {
  display: flex !important;
}

.ai-panel-header {
  padding: 16px 20px !important;
  background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark)) !important;
  color: white !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: move !important;
}

.ai-panel-header select {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
}

/* AI FAB 按钮 - 左下角 */
#aiFab {
  position: fixed !important;
  left: 24px !important;
  bottom: 24px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark)) !important;
  color: white !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
  cursor: pointer !important;
  font-size: 1.5rem !important;
  transition: all 0.3s ease !important;
  z-index: 999 !important;
}

#aiFab:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 32px rgba(32, 178, 170, 0.3) !important;
}

/* 主 FAB - 右下角（添加导航） - 隐藏 */
#mainFab {
  display: none !important;
}

/* ========== 笔记卡片 ========== */
.note-card {
  background: var(--cream-surface) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
}

.note-card:hover {
  box-shadow: var(--shadow-md) !important;
}

/* ========== 按钮样式 ========== */
.btn-primary {
  background: var(--teal-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary:hover {
  background: var(--teal-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  color: var(--text-secondary) !important;
}

.btn-ghost:hover {
  border-color: var(--teal-primary) !important;
  color: var(--teal-primary) !important;
  background: var(--teal-light) !important;
}

/* ========== 模态框美化 ========== */
.modal {
  background: var(--cream-surface) !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-header {
  background: var(--teal-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 20px 20px 0 0 !important;
}

/* ========== 滚动条美化 ========== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cream-bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--teal-primary);
  border-radius: 4px;
}

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