/* ========================================
   CrisTsau Garden - 完整修复版
   ======================================== */

/* ========== 导航卡片悬浮按钮优化 ========== */
.link-card {
  position: relative !important;
  padding-top: 48px !important; /* 为顶部按钮留空间 */
}

.link-icon-wrapper {
  margin-top: 8px !important; /* 图标下移 */
}

.link-actions {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: 8px !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.link-card:hover .link-actions {
  opacity: 1 !important;
}

/* 悬浮按钮统一样式 */
.link-btn {
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 28px !important;
}

.link-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3) !important;
}

.link-btn.edit {
  background: var(--teal-primary) !important;
  color: white !important;
}

.link-btn.edit:hover {
  background: var(--teal-hover) !important;
}

.link-btn.del {
  background: #ef4444 !important;
  color: white !important;
}

.link-btn.del:hover {
  background: #dc2626 !important;
}

/* AI 阅读按钮 */
.link-btn[onclick*="readLink"] {
  background: #8b5cf6 !important;
  color: white !important;
}

.link-btn[onclick*="readLink"]:hover {
  background: #7c3aed !important;
}

/* ========== 设置模态框美化 ========== */
#settingsModal .modal {
  max-width: 680px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  background: var(--cream-surface) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(32, 178, 170, 0.2) !important;
}

#settingsModal .modal-header {
  background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark)) !important;
  color: white !important;
  padding: 20px 24px !important;
  border-radius: 20px 20px 0 0 !important;
  border: none !important;
}

#settingsModal .modal-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: white !important;
}

#settingsModal .modal-close {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  transition: all 0.2s ease !important;
}

#settingsModal .modal-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.1) !important;
}

/* 设置标签页 */
.settings-tabs {
  display: flex !important;
  gap: 8px !important;
  padding: 16px 24px !important;
  background: var(--teal-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

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

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

.settings-tab.active {
  background: var(--cream-surface) !important;
  color: var(--teal-primary) !important;
  box-shadow: 0 2px 8px rgba(32, 178, 170, 0.15) !important;
}

/* 设置面板 */
.settings-panel {
  display: none !important;
  padding: 24px !important;
}

.settings-panel.active {
  display: block !important;
}

/* 表单元素美化 */
.form-input, .form-control, input[type="text"], input[type="password"], textarea, select {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  background: var(--cream-bg) !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

.form-input:focus, .form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--teal-primary) !important;
  box-shadow: 0 0 0 3px var(--teal-light) !important;
  background: var(--cream-surface) !important;
}

/* 按钮悬浮效果 */
.btn {
  transition: all 0.2s ease !important;
}

.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.2) !important;
}

.btn-primary:hover {
  box-shadow: 0 6px 16px rgba(32, 178, 170, 0.3) !important;
}

/* AI 面板输入框 */
.ai-panel-input input {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  background: var(--cream-bg) !important;
}

.ai-panel-input input:focus {
  border-color: var(--teal-primary) !important;
  box-shadow: 0 0 0 3px var(--teal-light) !important;
}

.ai-panel-input button {
  background: var(--teal-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  color: white !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
}

.ai-panel-input button:hover {
  background: var(--teal-hover) !important;
  transform: scale(1.05) !important;
}

/* 工具按钮 */
.tool-btn {
  background: var(--teal-light) !important;
  color: var(--teal-primary) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

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

/* 聊天消息 */
.msg {
  border-radius: 16px !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

.msg.user {
  background: var(--teal-light) !important;
  color: var(--text-primary) !important;
}

.msg.ai {
  background: var(--cream-bg) !important;
  border: 1px solid var(--border-color) !important;
}

/* 复选框美化 */
.checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  background: var(--cream-bg) !important;
  border: 1px solid var(--border-color) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

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

.checkbox-label input:checked + span {
  color: var(--teal-primary) !important;
  font-weight: 500 !important;
}

/* 笔记标签 */
.tag {
  background: var(--teal-light) !important;
  color: var(--teal-primary) !important;
  border: none !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
}

.tag:hover {
  background: var(--teal-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* 笔记操作按钮 */
.note-action-btn {
  background: var(--teal-light) !important;
  color: var(--teal-primary) !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.note-action-btn:hover {
  background: var(--teal-primary) !important;
  color: white !important;
  border-color: var(--teal-primary) !important;
  transform: translateY(-2px) !important;
}

/* 下拉菜单 */
.ai-dropdown-menu {
  background: var(--cream-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(32, 178, 170, 0.15) !important;
  overflow: hidden !important;
}

.ai-dropdown-item {
  transition: all 0.2s ease !important;
}

.ai-dropdown-item:hover {
  background: var(--teal-light) !important;
  color: var(--teal-primary) !important;
}

/* 模态框背景 */
.modal-bg {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

/* 空状态 */
.empty {
  color: var(--text-secondary) !important;
}

.empty span {
  font-size: 3rem !important;
  opacity: 0.6 !important;
}

/* Toast 提示动画 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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