/* ============================================================
   style-v3.css — 全局视觉升级层 v3.7（2026-08-02）
   纯视觉覆盖，不修改任何功能逻辑。置于 style-g.css 之后加载。
   风格：紫粉光效 + 细腻毛玻璃 + 精致微交互（对标主流AI对话产品）
   ============================================================ */

/* ===== 1. 全局基底 ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* 细滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,.45); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
/* 选中与焦点 */
::selection { background: rgba(139,92,246,.35); color: #fff; }
:focus-visible { outline: 2px solid rgba(139,92,246,.5); outline-offset: 2px; }
/* 所有按钮/链接统一平滑过渡 */
button, a, .btn, select, input[type="checkbox"], .cursor-pointer {
  transition: all .2s ease;
}

/* ===== 2. 顶部导航栏 ===== */
.navbar-glass {
  background: rgba(23,20,38,.68);
  border-bottom: 1px solid rgba(139,92,246,.12);
  box-shadow: 0 1px 0 rgba(139,92,246,.05), 0 10px 32px rgba(0,0,0,.22);
}
[data-theme="light"] .navbar-glass { background: rgba(255,255,255,.72); }
.icon-btn-glass {
  border: 1px solid transparent;
  position: relative;
}
.icon-btn-glass:hover {
  border-color: rgba(139,92,246,.3);
  background: rgba(139,92,246,.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139,92,246,.22);
}
.icon-btn-glass:active { transform: translateY(0) scale(.94); }

/* ===== 3. 搜索框 ===== */
.search-box-glass {
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.search-box-glass:focus-within {
  border-color: rgba(139,92,246,.5) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.14), 0 0 24px rgba(139,92,246,.14);
}

/* ===== 4. 分类标签 ===== */
.category-tag { border-radius: 999px; position: relative; }
.category-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 14px rgba(139,92,246,.18);
}
.category-tag.active {
  box-shadow: 0 4px 18px rgba(139,92,246,.38);
  transform: translateY(-1px);
}
.category-tag.active::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}

/* ===== 5. 角色卡片 ===== */
.char-card-new {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  will-change: transform;
}
.char-card-new:hover {
  box-shadow: 0 18px 48px rgba(139,92,246,.20), 0 6px 24px rgba(0,0,0,.35);
  border-color: rgba(139,92,246,.42);
}
.char-card-new h3 {
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
  letter-spacing: .3px;
}
.char-card-new:hover h3 { color: #e9d5ff; }
/* 官方徽章 */
.char-card-new h3 span {
  box-shadow: 0 2px 10px rgba(139,92,246,.35);
}
/* 标签胶囊 */
.char-card-new .card-tags-row span {
  transition: all .2s ease;
}
.char-card-new:hover .card-tags-row span {
  background: rgba(139,92,246,.2) !important;
  color: #ddd6fe !important;
}
/* 骨架屏 */
.skeleton-card { animation: skeletonPulseV3 1.5s ease-in-out infinite; }
@keyframes skeletonPulseV3 { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* ===== 6. 聊天页 ===== */
/* 头部 */
.chat-header-bar {
  background: rgba(23,20,38,.7);
  box-shadow: 0 10px 32px rgba(0,0,0,.2);
}
[data-theme="light"] .chat-header-bar { background: rgba(255,255,255,.82); }
.chat-header-bar .char-avatar {
  box-shadow: 0 0 0 2px rgba(139,92,246,.18), 0 2px 12px rgba(139,92,246,.2);
}
/* 消息头像光晕 */
.message.assistant .msg-avatar {
  box-shadow: 0 0 0 2px rgba(139,92,246,.18), 0 0 14px rgba(139,92,246,.16);
}
/* AI气泡：玻璃质感 + 细腻描边 */
.message.assistant .msg-bubble {
  background: linear-gradient(160deg, rgba(30,27,51,.94), rgba(40,33,64,.88));
  border: 1px solid rgba(139,92,246,.13);
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .message.assistant .msg-bubble {
  background: linear-gradient(160deg, #ffffff, #faf8ff);
  border-color: rgba(124,58,237,.14);
}
/* 用户气泡：渐变增强 + 光晕 */
.message.user .msg-bubble {
  background: linear-gradient(135deg, #8b5cf6, #a855f7 55%, #d946ef);
  box-shadow: 0 6px 24px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.message.user .msg-bubble:hover {
  box-shadow: 0 8px 30px rgba(236,72,153,.38);
}
/* 消息meta按钮 */
.msg-meta .msg-copy-btn {
  border-radius: 8px;
  transition: all .18s ease;
}
.msg-meta .msg-copy-btn:hover {
  background: rgba(139,92,246,.16) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(139,92,246,.2);
}
/* 日期分隔符 */
.date-separator span {
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
/* 输入栏 */
.input-bar {
  background: rgba(23,20,38,.75);
  border-top: 1px solid rgba(139,92,246,.12);
  box-shadow: 0 -8px 32px rgba(0,0,0,.2);
}
[data-theme="light"] .input-bar { background: rgba(255,255,255,.88); }
.input-bar .input-wrap {
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.14);
  transition: all .3s ease;
}
.input-bar .input-wrap:focus-within {
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12), 0 0 24px rgba(139,92,246,.1);
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .input-bar .input-wrap { background: rgba(124,58,237,.03); }
/* 发送/停止按钮 */
.send-btn {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  box-shadow: 0 4px 18px rgba(139,92,246,.35);
  transition: all .2s ease;
}
.send-btn:hover {
  box-shadow: 0 6px 26px rgba(236,72,153,.45);
  transform: translateY(-1px);
}
.send-btn:active { transform: scale(.92); }
.stop-btn:hover { box-shadow: 0 4px 18px rgba(239,68,68,.35); }
/* 状态栏面板（气泡内） */
.status-panel {
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.status-panel .status-label { color: #a78bfa; }
/* v3.7兜底：AI未输出状态栏时面板的提示行 */
.status-panel .status-fallback-note {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(139,92,246,.18);
  color: rgba(167,139,250,.55); font-size: 10px;
}
/* 流式输入气泡 */
#streaming-bubble {
  border-radius: 4px 18px 18px 18px;
  border: 1px solid rgba(139,92,246,.13);
  box-shadow: 0 4px 24px rgba(0,0,0,.22);
}
/* 记忆面板 */
.memory-panel {
  border: 1px solid rgba(139,92,246,.14);
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
}
/* 聊天下拉菜单 */
.chat-dropdown {
  border: 1px solid rgba(139,92,246,.18) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.42) !important;
  overflow: hidden;
}
.menu-item { border-radius: 8px; }
.menu-item:hover {
  background: rgba(139,92,246,.14) !important;
  transform: translateX(2px);
}

/* ===== 7. 状态栏抽屉 ===== */
.status-drawer-panel {
  background: rgba(23,20,38,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(139,92,246,.2);
  box-shadow: 0 -12px 48px rgba(0,0,0,.4);
}
.status-field-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.14);
  border-radius: 14px;
  transition: all .25s ease;
}
.status-field-card:hover {
  background: rgba(139,92,246,.08);
  border-color: rgba(139,92,246,.3);
  transform: translateY(-2px);
}
.status-editor-panel {
  background: rgba(23,20,38,.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(139,92,246,.2);
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
}

/* ===== 8. 底部导航（样式见 style-gold.css 文末「底部导航 v2」，旧紫边规则已删除） ===== */

/* ===== 9. 通用表单/弹窗 ===== */
.input-glass {
  transition: all .25s ease;
}
.input-glass:focus {
  border-color: rgba(139,92,246,.5) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.13), 0 0 20px rgba(139,92,246,.1);
}
.modal-glass {
  border-color: rgba(139,92,246,.2) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 60px rgba(139,92,246,.1) !important;
}
.fx-dialog {
  border: 1px solid rgba(139,92,246,.2) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 50px rgba(139,92,246,.1) !important;
}
/* 确认弹窗按钮 */
.fx-btn-primary, .btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
  box-shadow: 0 4px 18px rgba(139,92,246,.32) !important;
}
.fx-btn-primary:hover, .btn-primary:hover {
  box-shadow: 0 6px 26px rgba(236,72,153,.42) !important;
  transform: translateY(-1px);
}

/* ===== 10. 首页横幅 ===== */
.banner-container {
  border: 1px solid rgba(139,92,246,.12);
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
}

/* ===== 11. Toast ===== */
.toast-item {
  border: 1px solid rgba(139,92,246,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== 12. 深色下全局光晕微调 ===== */
[data-theme="dark"] #chat-page { background-color: #171426; }

/* ===== 13. 钱包/数据卡片 ===== */
.token-card { transition: all .3s ease; }
.token-card:hover {
  border-color: rgba(139,92,246,.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(139,92,246,.14);
}
.stats-item { transition: all .25s ease; }
.stats-item:hover {
  background: rgba(139,92,246,.08);
  transform: translateY(-1px);
}
.refresh-btn {
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(236,72,153,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.refresh-btn:hover {
  box-shadow: 0 6px 24px rgba(139,92,246,.28);
  transform: translateY(-1px);
}
.progress-fill { box-shadow: 0 0 12px rgba(139,92,246,.4); }

/* ===== 14. 首页公告横幅 / 空状态 ===== */
.announce-banner {
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
#char-grid .text-center, .empty-state {
  animation: floatV3 3s ease-in-out infinite;
}
@keyframes floatV3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ===== 15. 移动端细节 ===== */
@media (max-width: 640px) {
  .message .msg-bubble { max-width: 84%; }
  .char-card-new:hover { transform: translateY(-3px); }
  .input-bar .input-wrap { border-radius: 12px; }
}