/* polish.css - 视觉打磨
 * 纯样式层面的现代化微调,不动布局、不动 DOM。
 * 所有规则都在业务 css 之后加载,可以放心覆盖。
 *
 * 目标:
 *  - 让按钮、卡片、面板有"实体感"(阴影 + 圆角 + 过渡)
 *  - 键盘/鼠标 hover 状态有明确的视觉反馈
 *  - 滚动条、聚焦、选中态按现代设计语言统一
 *  - 不破坏已有配色与多主题(dark / light / GitHub / vscode / HC)
 *
 * 设计原则:
 *  - 用 CSS 变量串联,主题切换时阴影/颜色自动跟随
 *  - 阴影分层(--shadow-1/2/3);浅色主题阴影更柔和
 *  - 过渡时长 180ms,统一节奏
 *  - 边缘微动效用 transform: translateY(-1px) 而非 margin/padding(避免抖动)
 */

/* =========================================================
 * 1. 现代化阴影梯度 + 过渡节奏
 * ========================================================= */
:root {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 12px 24px -6px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 6px 16px -4px rgba(13, 110, 253, 0.35), 0 2px 6px -2px rgba(13, 110, 253, 0.25);
  --ring-focus: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
}

/* 浅色主题叠一点更柔和的阴影 */
[data-bs-theme="light"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 4px 10px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-3: 0 12px 24px -8px rgba(0, 0, 0, 0.10), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
}

/* 全局聚焦环:统一键盘可达性 */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--bs-primary) !important;
}

/* =========================================================
 * 2. 按钮微动效(hover 抬起 + 按下回弹)
 * ========================================================= */
.btn,
.toolbar-btn,
.topbar-btn,
.user-menu-item,
.profile-nav-grid .btn {
  transition: background-color var(--t-base) var(--ease-soft),
              border-color    var(--t-base) var(--ease-soft),
              color           var(--t-base) var(--ease-soft),
              box-shadow      var(--t-base) var(--ease-soft),
              transform       var(--t-fast) var(--ease-soft);
}

/* 主要按钮:hover 抬升 + 主题色阴影 */
.btn-primary,
.toolbar-btn-primary,
#newBtn {
  will-change: transform;
}
.btn-primary:hover,
.toolbar-btn-primary:hover,
#newBtn:hover {
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover,
.toolbar-btn-primary:hover,
#newBtn:hover,
.btn:hover,
.toolbar-btn:hover {
  transform: translateY(-1px);
}
.btn:active,
.toolbar-btn:active,
#newBtn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--t-fast);
}

/* outline 按钮:hover 边框加深 + 背景微染 */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-warning:hover {
  box-shadow: var(--shadow-1);
}

/* 个人中心导航按钮:扁平风格,不做抬升和阴影 */
.profile-nav-grid .btn:hover,
.profile-nav-grid .btn-outline-primary:hover,
.profile-nav-grid .btn-outline-secondary:hover,
.profile-nav-grid .btn-outline-warning:hover {
  transform: none;
  box-shadow: none !important;
}

/* 工具栏按钮:hover(图标按钮)轻微高亮 */
.toolbar-btn:hover,
.topbar-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="light"] .toolbar-btn:hover,
[data-bs-theme="light"] .topbar-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 顶栏按钮(铃铛/头像)hover 一圈柔和光环 */
#notifBellBtn:hover,
#userInfo:hover,
#sidebarTogglePC:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}
[data-bs-theme="light"] #notifBellBtn:hover,
[data-bs-theme="light"] #userInfo:hover,
[data-bs-theme="light"] #sidebarTogglePC:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* =========================================================
 * 3. 卡片 / 面板 阴影加身
 * ========================================================= */
.modal-content,
.notif-dropdown,
.user-menu,
.mineru-panel,
.doc-context-bar {
  box-shadow: var(--shadow-3);
  border: 1px solid var(--chat-border);
}
.dropdown-menu,
.modal-content {
  border-radius: 12px;
}
.notif-dropdown,
.user-menu {
  border-radius: 10px;
}

/* 思考面板:配色 + 圆角 */
.reasoning-panel {
  border-radius: 8px;
  border: 1px solid var(--chat-border);
  background: rgba(255, 255, 255, 0.02);
  transition: background var(--t-base) var(--ease-soft), border-color var(--t-base) var(--ease-soft);
}
[data-bs-theme="light"] .reasoning-panel {
  background: rgba(0, 0, 0, 0.02);
}
.reasoning-panel:hover {
  border-color: var(--bs-primary);
}

/* 气泡轻阴影(用户气泡已有鲜艳背景,bot 气泡给一点柔和提升) */
.bubble {
  border-radius: 12px;
  transition: box-shadow var(--t-base) var(--ease-soft);
}
.bubble:hover {
  box-shadow: var(--shadow-1);
}

/* =========================================================
 * 4. 侧边栏会话项:hover / 选中 现代感
 * ========================================================= */
.session-item {
  transition: background-color var(--t-base) var(--ease-soft),
              transform var(--t-fast) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
  border-radius: 8px;
}
.session-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}
[data-bs-theme="light"] .session-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.session-item.active {
  background-color: var(--active-bg);
  box-shadow: inset 3px 0 0 var(--bs-primary);
  /* 左侧主题色"选中外饰条",更明确当前态 */
}

/* 选中状态:加一点点左边距视觉补偿,避免 inset 阴影导致标题位移 */
.session-item.active .session-main {
  margin-left: 0;
}

/* hover 时显示操作按钮:已有 opacity 显示,加点进入动效 */
.session-actions {
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-soft),
              transform var(--t-fast) var(--ease-soft);
  transform: translateX(4px);
}
.session-item:hover .session-actions,
.session-item.active .session-actions,
.session-item:focus-within .session-actions {
  opacity: 1;
  transform: translateX(0);
}
.session-actions button {
  transition: background-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease-soft);
}
.session-actions button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
}
[data-bs-theme="light"] .session-actions button:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.session-actions button.del:hover {
  background-color: rgba(220, 53, 69, 0.18);
  color: #ff6b6b;
}

/* 预设 chip:hover 抬起 */
.preset-chip {
  transition: background-color var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              color var(--t-base) var(--ease-soft),
              transform var(--t-fast) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
}
.preset-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.preset-chip.active {
  box-shadow: var(--shadow-primary);
}

/* =========================================================
 * 5. 输入框聚焦环:增强版
 * ========================================================= */
#input,
.form-control,
.form-select {
  transition: border-color var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft),
              background-color var(--t-base) var(--ease-soft);
}
#input:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: var(--ring-focus);
  background-color: var(--bs-body-bg);
}

/* 输入框外层:聚焦时整条输入区底色稍微亮一点,引导视线 */
#inputBar {
  transition: background-color var(--t-base) var(--ease-soft);
}

/* 搜索框:跟现代搜索一致的圆角 + 略浅背景 */
#sessionSearch {
  border-radius: 8px;
}

/* =========================================================
 * 6. 徽标 / 标签:柔化边框 + 渐变背景
 * ========================================================= */
.session-badge,
.tag {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid transparent;
  transition: background var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft);
}
.session-badge.pin,
.tag.pinned {
  background: rgba(255, 193, 7, 0.12);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.35);
}
.session-badge.star,
.tag.starred {
  background: rgba(255, 193, 7, 0.12);
  color: #ffd54f;
  border-color: rgba(255, 193, 7, 0.35);
}
.session-badge.archived,
.tag.archived {
  background: rgba(108, 117, 125, 0.12);
  color: var(--bs-secondary-color);
  border-color: rgba(108, 117, 125, 0.35);
}

/* notif 数量徽标:更醒目 */
.notif-bell-count {
  background: linear-gradient(135deg, #ff5252, #d32f2f);
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.4);
  font-weight: 600;
}

/* =========================================================
 * 7. 顶栏:层次化
 * ========================================================= */
#topbar {
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--chat-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 当下方内容滚动时,顶栏有"漂浮感" */
  /* position + z-index 确保顶栏及其下拉菜单(user-menu / notif-dropdown)
     层级高于 flex 兄弟元素 #messages,否则移动端下拉会被消息区拦截点击 */
  position: relative;
  z-index: 10;
}

/* 侧边栏 header:跟下面的 session group 中间增加一线分隔 */
#sidebar header {
  border-bottom: 1px solid var(--chat-border);
  padding-bottom: 12px;
}

/* 侧边栏 footer:在底部加一线分隔,跟内容区视觉断开 */
.sidebar-footer {
  border-top: 1px solid var(--chat-border);
  padding-top: 12px;
}

/* 侧边栏分隔条更细更柔和 */
#sidebarResizer {
  background: transparent;
  transition: background-color var(--t-base) var(--ease-soft);
}
#sidebarResizer:hover {
  background: var(--bs-primary);
}

/* =========================================================
 * 8. 滚动条:细、圆、跟主题色
 * ========================================================= */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(155, 155, 155, 0.25);
  border-radius: 4px;
  border: none;
  transition: background var(--t-base) var(--ease-soft);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(155, 155, 155, 0.45);
}

/* Firefox 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.25) transparent;
}

/* =========================================================
 * 9. 头像圆形:统一优雅
 * ========================================================= */
.avatar,
.user-avatar,
.user-menu-avatar,
.profile-avatar-wrap {
  border-radius: 50%;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
}
.user-avatar:hover,
.user-menu-avatar:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-1);
}

/* =========================================================
 * 10. 选中状态:增加主题色微光
 * ========================================================= */
.session-item.active .session-main .title {
  color: var(--active-fg);
  font-weight: 500;
}

/* =========================================================
 * 11. 响应式微调:小屏 button hover 抬起取消(transform 一律不抬)
 *    避免移动端"hover"状态下被误判
 * ========================================================= */
@media (hover: none) {
  .btn:hover,
  .toolbar-btn:hover,
  .topbar-btn:hover,
  .preset-chip:hover,
  #newBtn:hover {
    transform: none;
  }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}