display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f5f7fa !important;
}
.points-record-item:last-child {
    border-bottom: none !important;
}
.points-record-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.points-record-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
.points-record-icon.earn {
    background: rgba(34,197,94,0.1) !important;
    color: #22c55e !important;
}
.points-record-icon.spend {
    background: rgba(239,68,68,0.1) !important;
    color: #ef4444 !important;
}
.points-record-icon.refund {
    background: rgba(59,130,246,0.1) !important;
    color: #3b82f6 !important;
}
.points-record-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin-bottom: 2px !important;
}
.points-record-time {
    font-size: 11px !important;
    color: #9ca3af !important;
}
.points-record-num {
    font-size: 15px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    flex-shrink: 0 !important;
}
.points-record-num.earn {
    color: #22c55e !important;
}
.points-record-num.spend {
    color: #ef4444 !important;
}
.points-record-num.refund {
    color: #3b82f6 !important;
}

/* 空状态 */
.points-records-empty {
    text-align: center !important;
    padding: 30px 0 !important;
    color: #9ca3af !important;
    font-size: 13px !important;
}

/* 深色模式适配 */
[data-theme="dark"] .points-modal .points-card {
    background: #1a1d23 !important;
}
[data-theme="dark"] .points-modal .points-checkin {
    background: #252830 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .points-modal .points-checkin-text { color: #e8eaed !important; -webkit-text-fill-color: #e8eaed !important; }
[data-theme="dark"] .points-modal .points-checkin-sub { color: #8b8f96 !important; }
[data-theme="dark"] .points-modal .points-streak {
    background: #252830 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .points-modal .points-streak-item { background: #2d3038 !important; }
[data-theme="dark"] .points-modal .points-streak-item.checked { background: rgba(59,130,246,0.15) !important; }
[data-theme="dark"] .points-modal .points-streak-day { color: #8b8f96 !important; }
[data-theme="dark"] .points-modal .points-streak-reward { color: #6b7280 !important; }
[data-theme="dark"] .points-records {
    background: #252830 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .points-records-title { color: #e8eaed !important; border-color: #33363d !important; }
[data-theme="dark"] .points-records-title span { color: #e8eaed !important; -webkit-text-fill-color: #e8eaed !important; }
[data-theme="dark"] .points-record-item { border-color: #2d3038 !important; }
[data-theme="dark"] .points-record-title { color: #e8eaed !important; }
[data-theme="dark"] .points-record-time { color: #8b8f96 !important; }
[data-theme="dark"] .points-modal .checkin-btn:disabled { background: #33363d !important; color: #6b7280 !important; }

/* ============================================================
   修复：签到进度数字可见性 + 会员中心头部白色卡片
   ============================================================ */

/* 签到进度 - 去掉旧的圆形背景，让数字直接显示在item背景上 */
.points-modal .points-streak-day {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}
.points-modal .points-streak-day::after {
    display: none !important;
}
.points-modal .points-streak-item.checked .points-streak-day {
    color: #3b82f6 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.points-modal .points-streak-item.today .points-streak-day {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.points-modal .points-streak-reward {
    font-size: 10px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}
.points-modal .points-streak-item.checked .points-streak-reward {
    color: #6b7280 !important;
}
.points-modal .points-streak-item.today .points-streak-reward {
    color: rgba(255,255,255,0.85) !important;
}

/* 会员中心头部 - 改为白色圆角卡片 */
.mbr2-hero {
    background: #fff !important;
    color: #1a1a1a !important;
    padding: 20px !important;
    margin: 16px 16px 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    overflow: visible !important;
}
.mbr2-hero::before,
.mbr2-hero::after {
    display: none !important;
}
.mbr2-hero-content {
    gap: 14px !important;
}
.mbr2-hero-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--lv-color, #3b82f6), rgba(0,0,0,0.2)) !important;
    color: #fff !important;
    font-size: 26px !important;
    backdrop-filter: none !important;
}
.mbr2-hero-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.mbr2-hero-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
}
.mbr2-hero-badge {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: rgba(59,130,246,0.1) !important;
    color: var(--lv-color, #3b82f6) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.mbr2-hero-points {
    text-align: right !important;
    flex-shrink: 0 !important;
}
.mbr2-hero-points-num {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--lv-color, #3b82f6) !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.5px !important;
}
.mbr2-hero-points-label {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin-top: 4px !important;
}

/* 会员中心整体背景改为浅灰 */
.member-modal-v2 .member-body {
    background: #f5f7fa !important;
    padding: 0 0 20px 0 !important;
}

/* 深色模式 - 会员中心头部白色卡片适配 */
[data-theme="dark"] .mbr2-hero {
    background: #252830 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    color: #e8eaed !important;
}
[data-theme="dark"] .mbr2-hero-name { color: #e8eaed !important; }
[data-theme="dark"] .mbr2-hero-badge {
    background: rgba(59,130,246,0.2) !important;
}
[data-theme="dark"] .mbr2-hero-points-label { color: #8b8f96 !important; }
[data-theme="dark"] .member-modal-v2 .member-body {
    background: #1a1d23 !important;
}

/* 深色模式 - 签到进度 */
[data-theme="dark"] .points-modal .points-streak-day { color: #8b8f96 !important; }
[data-theme="dark"] .points-modal .points-streak-item.checked .points-streak-day { color: #60a5fa !important; }
[data-theme="dark"] .points-modal .points-streak-reward { color: #6b7280 !important; }
[data-theme="dark"] .points-modal .points-streak-item.checked .points-streak-reward { color: #8b8f96 !important; }

/* ============================================================
   修复：个人中心弹窗溢出适配
   ============================================================ */
.profile-card-wide {
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: calc(100% - 40px) !important;
    max-width: 880px !important;
}

/* 窄屏适配：减小内边距 */
@media (max-width: 768px) {
    .profile-card-wide .profile-header {
        padding: 24px 20px 20px !important;
        gap: 14px !important;
    }
    .profile-card-wide .profile-avatar {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
    }
    .profile-card-wide .profile-username {
        font-size: 18px !important;
    }
    .profile-card-wide .profile-user-meta {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    .profile-card-wide .profile-stats-section {
        padding: 16px 20px !important;
    }
    .profile-card-wide .profile-stats {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .profile-card-wide .profile-stat-card {
        flex: 1 1 calc(33.33% - 7px) !important;
        min-width: 90px !important;
        padding: 12px 8px !important;
    }
    .profile-card-wide .profile-stat-num {
        font-size: 18px !important;
    }
    .profile-card-wide .profile-stat-label {
        font-size: 11px !important;
    }
    .profile-card-wide .profile-content-row {
        padding: 20px !important;
        gap: 20px !important;
    }
}

@media (max-width: 560px) {
    .profile-card-wide .profile-stat-card {
        flex: 1 1 calc(50% - 5px) !important;
    }
    .profile-card-wide .profile-content-row {
        flex-direction: column !important;
    }
    .profile-card-wide .profile-promo-desc {
        font-size: 12px !important;
    }
}

/* 滚动条美化 */
.profile-card-wide::-webkit-scrollbar {
    width: 6px;
}
.profile-card-wide::-webkit-scrollbar-track {
    background: transparent;
}
.profile-card-wide::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}
[data-theme="dark"] .profile-card-wide::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
}

/* ============================================================
   头像菜单徽章 - 流光渐变方案（方案四）
   ============================================================ */

.auth-menu-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;
    height: 22px !important;
    padding: 0 9px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    vertical-align: middle !important;
}

.auth-menu-item:hover .auth-menu-badge {
    transform: translateY(-1px) scale(1.03) !important;
}

/* 积分商城 — 珊瑚橙 → 玫瑰粉 渐变 */
#authMenuPoints,
#chatAuthMenuPoints {
    background: linear-gradient(135deg, #FF8A65 0%, #FF6B9D 55%, #F06292 100%) !important;
    box-shadow: 0 2px 12px rgba(255, 107, 157, 0.38), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* 微光扫过动效 */
#authMenuPoints::after,
#chatAuthMenuPoints::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
    transform: skewX(-22deg);
    animation: badgeShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgeShine {
    0%, 55%  { left: -120%; }
    85%, 100% { left: 160%; }
}

/* 会员中心 — 薰衣草紫 → 香槟金 渐变 + 皇冠 */
#authMenuLevel,
#chatAuthMenuLevel {
    background: linear-gradient(135deg, #B39DDB 0%, #9C7BDB 45%, #E8C87A 100%) !important;
    box-shadow: 0 2px 12px rgba(156, 123, 219, 0.38), inset 0 1px 0 rgba(255,255,255,0.28) !important;
    padding-left: 22px !important;
    min-width: 52px !important;
}

#authMenuLevel::before,
#chatAuthMenuLevel::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm0 2h14v2H5v-2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
    pointer-events: none;
}

/* 任务中心 NEW — 活力天蓝 */
#authMenuTaskBadge,
#chatAuthMenuTaskBadge {
    background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%) !important;
    box-shadow: 0 2px 10px rgba(41, 182, 246, 0.32), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    font-size: 9px !important;
    letter-spacing: 0.8px !important;
    min-width: 52px !important;
}

/* 深色主题下外发光微调 */
[data-theme="dark"] #authMenuPoints,
[data-theme="dark"] #chatAuthMenuPoints {
    box-shadow: 0 2px 14px rgba(255, 107, 157, 0.45), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
[data-theme="dark"] #authMenuLevel,
[data-theme="dark"] #chatAuthMenuLevel {
    box-shadow: 0 2px 14px rgba(156, 123, 219, 0.45), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
[data-theme="dark"] #authMenuTaskBadge,
[data-theme="dark"] #chatAuthMenuTaskBadge {
    box-shadow: 0 2px 12px rgba(41, 182, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}




/* ============================================================
   从 index.html 内联样式迁移
   ============================================================ */

/* 设置弹窗双栏导航 - 绝对定位方案 */
      .modal.settings-modal { width: 860px; max-width: 92vw; height: 85vh; display: flex; flex-direction: column; }
      .settings-body { position: relative; flex: 1 1 auto; padding: 0 !important; overflow: hidden !important; min-height: 0; }
      .settings-nav { position: absolute; left: 0; top: 0; bottom: 0; width: 180px; border-right: 1px solid var(--border-color); padding: 12px 0; overflow-y: auto; display: flex; flex-direction: column; box-sizing: border-box; }
      .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text-secondary); border-left: 3px solid transparent; transition: all 0.2s; }
      .settings-nav-item:hover { background: var(--bg-card-hover, rgba(255,255,255,0.05)); color: var(--text-primary); }
      .settings-nav-item.active { background: var(--primary-glow, rgba(37,99,235,0.1)); border-left-color: var(--primary, #2563eb); color: var(--primary, #2563eb); font-weight: 500; }
      .settings-nav-item svg { flex-shrink: 0; }
      .settings-nav-copyright { margin-top: auto; padding: 12px 16px; font-size: 11px; color: var(--text-tertiary); border-top: 1px solid var(--border-color); line-height: 1.6; }
      .settings-nav-copyright a { color: var(--primary); text-decoration: none; }
      .settings-content { position: absolute; left: 180px; right: 0; top: 0; bottom: 0; padding: 20px 24px; overflow-y: overlay; overflow-x: hidden; box-sizing: border-box; }
      .settings-content * { box-sizing: border-box; }
      .settings-content .settings-section,
      .settings-content .settings-card,
      .settings-content .settings-item { width: 100%; max-width: 100%; box-sizing: border-box; }
      .settings-content .settings-section { display: none; padding: 0; border: none; margin: 0; background: none; }
      .settings-content .settings-section.active { display: block; }
      /* 运单已处理状态 */
      .waybill-item.processed { opacity: 0.45; }
      .waybill-item.processed .waybill-number { text-decoration: line-through; }
      .waybill-action-btn.active { color: #22c55e !important; background: rgba(34,197,94,0.12) !important; }
      /* 活动日志筛选与分组 */
      .log-filter-tabs { display: flex; gap: 2px; }
      .log-filter-tab {
        padding: 3px 8px; font-size: 11px; border-radius: 6px; cursor: pointer;
        color: var(--text-muted, #94a3b8); transition: all 0.2s;
      }
      .log-filter-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
      .log-filter-tab.active { background: var(--primary-glow, rgba(37,99,235,0.1)); color: var(--primary, #2563eb); font-weight: 500; }
      .log-group-header {
        padding: 5px 12px; font-size: 11px; font-weight: 600;
        color: var(--text-muted, #94a3b8); background: var(--bg-secondary, rgba(255,255,255,0.03));
        position: sticky; top: 0; z-index: 1;
      }
/* ============================================================
   核心架构 · 高端化重构 - 首页组件统一升级
   ============================================================ */

/* ---------- 1. 设计令牌精修 ---------- */
:root {
  /* 圆角体系 - 四级制 */
  --premium-radius-sm: 6px;
  --premium-radius-md: 8px;
  --premium-radius-lg: 10px;
  --premium-radius-xl: 12px;

  /* 阴影体系 - 三级制（更克制） */
  --premium-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --premium-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --premium-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.05);
  --premium-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 1px rgba(15, 23, 42, 0.02);

  /* 间距体系 - 基准4px */
  --premium-space-1: 4px;
  --premium-space-2: 8px;
  --premium-space-3: 12px;
  --premium-space-4: 16px;
  --premium-space-5: 20px;
  --premium-space-6: 24px;
  --premium-space-8: 32px;

  /* 动效曲线 - 克制高级感 */
  --premium-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --premium-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --premium-duration-fast: 120ms;
  --premium-duration-normal: 200ms;
  --premium-duration-slow: 300ms;
}

/* 深色模式下的阴影 */
[data-theme="dark"] {
  --premium-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  --premium-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --premium-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --premium-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* ---------- 2. 标题栏升级 ---------- */
.titlebar {
  height: 40px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.titlebar-btn {
  width: 40px !important;
  transition: background-color var(--premium-duration-fast) var(--premium-ease-standard),
              color var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.titlebar-btn.icon-btn {
  width: 36px !important;
}

/* 标题栏模式切换分段按钮 */
.mode-segmented {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  margin-right: 4px;
  height: 28px;
}

.mode-seg-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 22px;
  font-size: 12px;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.mode-seg-item:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.mode-seg-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 8px var(--primary-glow), 0 1px 3px rgba(0,0,0,0.15);
}

.mode-seg-item.active svg {
  stroke: #fff;
}

[data-theme="dark"] .mode-seg-item.active {
  background: var(--primary);
  color: #fff;
}

.titlebar-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  letter-spacing: 0.3px !important;
}

/* ---------- 3. 顶部栏升级 ---------- */
.top-bar {
  height: 56px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.page-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  gap: 10px !important;
}

.page-title .title-accent {
  width: 3px !important;
  height: 18px !important;
  border-radius: 2px !important;
}

.top-actions {
  gap: 8px !important;
}

.top-action-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--premium-radius-md) !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  font-size: 15px !important;
}

.top-action-btn::before {
  display: none !important;
}

.top-action-btn:hover {
  transform: none !important;
  background: var(--bg-tertiary) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.top-action-btn:active {
  transform: scale(0.96) !important;
  transition-duration: 80ms !important;
}

.top-action-btn.primary {
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--premium-radius-md) !important;
  box-shadow: var(--premium-shadow-sm) !important;
  gap: 6px !important;
}

.top-action-btn.primary::before {
  display: block !important;
  height: 1px !important;
  top: 1px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%) !important;
  border-radius: var(--premium-radius-md) var(--premium-radius-md) 0 0 !important;
}

.top-action-btn.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px var(--primary-glow), 0 1px 2px rgba(0,0,0,0.1) !important;
  filter: brightness(1.05) !important;
}

/* 标题栏通知徽章 - 数字完整显示 */
.notification-badge {
  top: 2px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  font-size: 9px !important;
  line-height: 16px !important;
  border-radius: 8px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ---------- 4. 侧边栏升级 ---------- */
.sidebar {
  width: 260px !important;
}

.sidebar.collapsed {
  width: 0 !important;
  border-right: none !important;
}

.sidebar.collapsed .sidebar-header,
.sidebar.collapsed .shop-list,
.sidebar.collapsed .sidebar-footer {
  opacity: 0 !important;
  pointer-events: none !important;
}

.sidebar-header {
  padding: 16px 12px 12px !important;
}

.sidebar-header::after {
  left: 12px !important;
  right: 12px !important;
  opacity: 0.3 !important;
}

.search-input {
  height: 36px !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: 13px !important;
  padding: 0 12px 0 36px !important;
}

.search-icon {
  left: 12px !important;
  font-size: 14px !important;
}

.add-shop-btn {
  height: 38px !important;
  margin-top: 12px !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: 13px !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.add-shop-btn::before {
  display: none !important;
}

.add-shop-btn:hover {
  transform: none !important;
  background: var(--primary-glow) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.shop-list {
  padding: 10px 8px !important;
}

.shop-group-title {
  padding: 8px 8px 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

.shop-group-title::before {
  width: 2px !important;
  height: 12px !important;
  border-radius: 1px !important;
}

.shop-card {
  padding: 8px 10px !important;
  margin-bottom: 2px !important;
  border-radius: var(--premium-radius-md) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
  border: 1px solid transparent !important;
}

.shop-card::after {
  display: none !important;
}

.shop-card:hover {
  transform: none !important;
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}

.shop-card.active {
  background: var(--primary-glow) !important;
  border-color: transparent !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px var(--primary-glow) !important;
}

.shop-card.active .shop-name {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* 加载中动效 - 优先级最高，覆盖 active/hover 状态 */
.shop-card.loading-shop {
  background: linear-gradient(90deg, var(--bg-card) 0%, rgba(79, 124, 255, 0.18) 30%, rgba(79, 124, 255, 0.35) 50%, rgba(79, 124, 255, 0.18) 70%, var(--bg-card) 100%) !important;
  background-size: 250% 100% !important;
  animation: bgGlowFlow 1.5s ease-in-out infinite !important;
  border-color: rgba(79, 124, 255, 0.4) !important;
  transition: border-color 0.2s ease !important;
}

/* 店铺卡片加载动画关键帧 */
@keyframes bgGlowFlow {
  0% { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

.shop-card .active-indicator {
  width: 3px !important;
  height: 20px !important;
  left: -1px !important;
  border-radius: 0 3px 3px 0 !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.shop-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--premium-radius-md) !important;
  margin-right: 10px !important;
  font-size: 13px !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.shop-avatar::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%) !important;
}

.shop-card:hover .shop-avatar {
  transform: none !important;
}

.shop-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.shop-remark {
  font-size: 11px !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
}

.shop-badge {
  height: 16px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin-left: 6px !important;
}

.sidebar-footer {
  padding: 10px 12px !important;
}

.sidebar-toggle-btn {
  width: 18px !important;
  height: 36px !important;
  left: 260px !important;
  border-radius: 0 var(--premium-radius-sm) var(--premium-radius-sm) 0 !important;
  font-size: 12px !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.sidebar.collapsed ~ .sidebar-toggle-btn {
  left: 0 !important;
}

/* ---------- 5. 内容区域 ---------- */
.content-area {
  padding: 24px !important;
}

/* ---------- 6. 统计卡片高端化 ---------- */
.stats-grid {
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.stat-card {
  border-radius: var(--premium-radius-xl) !important;
  padding: 18px !important;
  gap: 12px !important;
  box-shadow: var(--premium-shadow-card) !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
  border: 1px solid var(--border-color) !important;
}

/* 去除多余装饰 */
.stat-card::before {
  display: none !important;
}

.stat-card::after {
  display: none !important;
}

.stat-card .data-flow {
  display: none !important;
}

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

.stat-card:hover .stat-icon-wrap {
  transform: none !important;
}

.stat-card:hover .stat-value {
  filter: none !important;
}

.stat-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--premium-radius-lg) !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.stat-icon-wrap::after {
  display: none !important;
}

.stat-icon-wrap::before {
  height: 1px !important;
  top: 1px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important;
  border-radius: var(--premium-radius-lg) var(--premium-radius-lg) 0 0 !important;
  opacity: 0.6 !important;
}

.stat-icon {
  font-size: 20px !important;
  filter: none !important;
}

.stat-value {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text-primary) !important;
  transition: color var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.stat-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  margin-top: 4px !important;
  letter-spacing: 0 !important;
}

/* 翻牌器简化 */
.flip-digit-card .digit-text {
  font-size: 24px !important;
  font-weight: 600 !important;
}

/* ---------- 7. 运单列表高端化 ---------- */
.waybill-section {
  margin-bottom: 20px !important;
}

.waybill-list {
  border-radius: var(--premium-radius-lg) !important;
  box-shadow: var(--premium-shadow-card) !important;
  border: 1px solid var(--border-color) !important;
}

.waybill-header {
  padding: 10px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase;
}

.waybill-company-group {
  border-radius: var(--premium-radius-lg) !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
}

.waybill-company-header {
  padding: 10px 16px !important;
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.waybill-company-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  gap: 8px !important;
}

.company-dot {
  width: 6px !important;
  height: 6px !important;
  box-shadow: none !important;
}

.company-count {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: var(--premium-radius-sm) !important;
  background: var(--bg-tertiary) !important;
}

.company-action-btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: var(--premium-radius-sm) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.company-action-btn:hover {
  transform: none !important;
}

.company-action-btn.primary {
  box-shadow: var(--premium-shadow-sm) !important;
}

.company-action-btn.primary:hover {
  box-shadow: 0 2px 6px var(--primary-glow) !important;
  filter: brightness(1.05) !important;
}

.waybill-item {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-color-light) !important;
  transition: background-color var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.waybill-item:last-child {
  border-bottom: none !important;
}

.waybill-item:hover {
  background: var(--bg-card-hover) !important;
}

/* 斑马纹 - 奇数行微底色 */
.waybill-item:nth-child(odd) {
  background: var(--bg-secondary);
}
.waybill-item:nth-child(odd):hover {
  background: var(--bg-card-hover);
}

.waybill-index {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

.waybill-number {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

.waybill-company {
  font-size: 11px !important;
  margin-top: 3px !important;
  padding: 1px 6px !important;
  border-radius: var(--premium-radius-xs, 4px) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-tertiary) !important;
}

.waybill-time {
  font-size: 12px !important;
  color: var(--text-tertiary) !important;
}

.waybill-status {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: var(--premium-radius-sm) !important;
  gap: 4px !important;
}

.waybill-status svg {
  width: 10px !important;
  height: 10px !important;
}

.waybill-action-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--premium-radius-sm) !important;
  font-size: 12px !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.waybill-empty {
  padding: 48px 20px !important;
  gap: 10px !important;
}

.waybill-empty-icon {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 2px !important;
}

.waybill-empty-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.waybill-empty-text {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

.waybill-empty-hint {
  font-size: 12px !important;
}

.waybill-empty-action {
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--premium-radius-md) !important;
  box-shadow: var(--premium-shadow-sm) !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.waybill-empty-action:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px var(--primary-glow) !important;
  filter: brightness(1.05) !important;
}

/* ---------- 8. 按钮系统统一 ---------- */
.btn {
  padding: 8px 16px !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.btn::before {
  height: 1px !important;
  top: 1px !important;
  border-radius: var(--premium-radius-md) var(--premium-radius-md) 0 0 !important;
  opacity: 0.6 !important;
}

.btn::after {
  display: none !important;
}

.btn-primary {
  border-radius: var(--premium-radius-md) !important;
  box-shadow: var(--premium-shadow-sm) !important;
}

.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px var(--primary-glow) !important;
  filter: brightness(1.05) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
  filter: brightness(0.98) !important;
}

.btn-secondary {
  border-radius: var(--premium-radius-md) !important;
}

.btn-secondary:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: var(--primary-glow) !important;
}

.btn-danger {
  border-radius: var(--premium-radius-md) !important;
  box-shadow: var(--premium-shadow-sm) !important;
}

.btn-danger:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px var(--danger-glow) !important;
  filter: brightness(1.05) !important;
}

.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* ---------- 9. 推广横幅克制化 ---------- */
.promo-entrance-row {
  margin: 14px 0 20px !important;
}

.promo-entrance-banner {
  border-radius: var(--premium-radius-lg) !important;
  padding: 16px 20px !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1px solid var(--primary-glow) !important;
  background: linear-gradient(135deg, var(--primary-glow) 0%, transparent 60%) !important;
}

.promo-entrance-banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--premium-shadow-md) !important;
  border-color: var(--primary) !important;
}

.promo-banner-bg {
  display: none !important;
}

.promo-banner-content {
  gap: 14px !important;
}

.promo-banner-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--premium-radius-md) !important;
  background: var(--primary-gradient) !important;
  box-shadow: 0 2px 8px var(--primary-glow) !important;
}

.promo-banner-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 3px !important;
}

.promo-banner-desc {
  font-size: 12px !important;
  color: var(--text-tertiary) !important;
}

.promo-banner-cta {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
  padding: 6px 12px !important;
  border-radius: var(--premium-radius-sm) !important;
  background: var(--primary-glow) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
  gap: 4px !important;
}

.promo-entrance-banner:hover .promo-banner-cta {
  background: var(--primary) !important;
  color: white !important;
  gap: 6px !important;
}

/* 深色模式适配 */
[data-theme="dark"] .promo-entrance-banner {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .promo-entrance-banner:hover {
  border-color: var(--primary) !important;
}

/* ---------- 10. 筛选栏升级 ---------- */
.filter-bar {
  margin-bottom: 16px !important;
}

.copy-all-btn,
.filter-action-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: var(--premium-radius-sm) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.filter-action-btn:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: var(--primary-glow) !important;
}

.company-tag {
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: var(--premium-radius-sm) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.company-tag:hover {
  transform: none !important;
}

/* ---------- 11. 背景系统优化 ---------- */
/* 降低鼠标光晕强度 */
.cursor-glow {
  width: 200px !important;
  height: 200px !important;
  opacity: 0.6 !important;
}

/* 粒子效果默认降低不透明度 */
#particlesCanvas {
  opacity: 0.15 !important;
}

/* ---------- 12. 滚动条精致化 ---------- */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px !important;
  transition: background-color var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

::-webkit-scrollbar-thumb:hover {
  box-shadow: none !important;
}

.content-area::-webkit-scrollbar {
  width: 6px !important;
}

/* ---------- 13. 活动日志升级 ---------- */
.log-section {
  margin-bottom: 0 !important;
}

.log-container {
  max-height: 320px !important;
}

.log-group-header {
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-tertiary) !important;
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  letter-spacing: 0.3px !important;
}

.log-item {
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--border-color-light) !important;
  transition: background-color var(--premium-duration-fast) var(--premium-ease-standard) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
}

.log-item:hover {
  background: var(--bg-card-hover) !important;
}

.log-item:nth-child(odd) {
  background: var(--bg-secondary);
}
.log-item:nth-child(odd):hover {
  background: var(--bg-card-hover);
}

.log-time {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-variant-numeric: tabular-nums !important;
  flex-shrink: 0 !important;
  min-width: 60px !important;
}

.log-type {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.log-type.info {
  background: var(--info-bg) !important;
  color: var(--info) !important;
}

.log-type.success {
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

.log-type.warning {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

.log-type.error {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.log-message {
  flex: 1 !important;
  min-width: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 深色模式斑马纹适配 */
[data-theme="dark"] .log-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015) !important;
}
[data-theme="dark"] .log-item:nth-child(odd):hover {
  background: var(--bg-card-hover) !important;
}
[data-theme="dark"] .log-group-header {
  background: var(--bg-tertiary) !important;
}

/* ---------- 14. 输入框统一风格 ---------- */
input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
  border-radius: var(--premium-radius-md) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  outline: none !important;
}

/* ---------- 15. 通用卡片风格 ---------- */
.section-header {
  margin-bottom: 12px !important;
}

.section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.section-subtitle {
  font-size: 12px !important;
  color: var(--text-tertiary) !important;
}

/* ---------- 16. 深色模式适配补充 ---------- */
[data-theme="dark"] .stat-value {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .waybill-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015) !important;
}

[data-theme="dark"] .waybill-item:nth-child(odd):hover {
  background: var(--bg-card-hover) !important;
}

[data-theme="dark"] .waybill-header {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .waybill-company-header {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .top-action-btn {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .top-action-btn:hover {
  background: var(--bg-card) !important;
}

/* 深色模式下顶部文字按钮确保可见 */
[data-theme="dark"] .top-action-btn.top-action-btn-text {
  color: #e2e8f0 !important;
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .top-action-btn.top-action-btn-text:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .top-action-btn.mode-toggle-btn {
  color: var(--primary) !important;
  background: var(--primary-glow) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .top-action-btn.mode-toggle-btn svg {
  stroke: var(--primary) !important;
  color: var(--primary) !important;
}

[data-theme="dark"] .top-action-btn.mode-toggle-btn:hover {
  color: #fff !important;
  background: var(--primary) !important;
}

[data-theme="dark"] .top-action-btn.mode-toggle-btn:hover svg {
  stroke: #fff !important;
  color: #fff !important;
}

[data-theme="dark"] .shop-card.active {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 店铺卡片加载动效 - 放在 active 之后，确保优先级覆盖 */
[data-theme="dark"] .shop-card.loading-shop,
.shop-card.loading-shop {
  background: linear-gradient(90deg, var(--bg-card) 0%, rgba(79, 124, 255, 0.18) 30%, rgba(79, 124, 255, 0.35) 50%, rgba(79, 124, 255, 0.18) 70%, var(--bg-card) 100%) !important;
  background-size: 250% 100% !important;
  animation: bgGlowFlow 1.5s ease-in-out infinite !important;
  border-color: rgba(79, 124, 255, 0.5) !important;
  transition: border-color 0.2s ease !important;
  box-shadow: 0 0 0 1px rgba(79, 124, 255, 0.2), 0 0 20px rgba(79, 124, 255, 0.1) !important;
}

[data-theme="dark"] .promo-card {
  background: var(--bg-card) !important;
}


/* ---------- 17. 登录页高端化 ---------- */
.auth-lock-card {
  max-width: 380px !important;
  border-radius: var(--premium-radius-xl) !important;
  padding: 32px 28px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--border-color) !important;
  animation: authCardIn 0.5s var(--premium-ease-emphasized) !important;
}

.auth-lock-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--premium-radius-lg) !important;
  margin: 0 auto 14px !important;
  box-shadow: 0 4px 16px var(--primary-glow) !important;
  position: relative !important;
}

.auth-lock-logo::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  right: 1px !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%) !important;
  border-radius: var(--premium-radius-lg) var(--premium-radius-lg) 0 0 !important;
  pointer-events: none !important;
}

.auth-lock-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px !important;
}

.auth-lock-subtitle {
  font-size: 13px !important;
  margin-bottom: 24px !important;
}

.auth-tabs {
  border-radius: var(--premium-radius-md) !important;
  padding: 3px !important;
  margin-bottom: 20px !important;
}

.auth-tab {
  padding: 7px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--premium-radius-sm) !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.auth-tab.active {
  box-shadow: var(--premium-shadow-sm) !important;
  font-weight: 600 !important;
}

.auth-form-group {
  margin-bottom: 14px !important;
}

.auth-form-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  color: var(--text-secondary) !important;
}

.auth-form-input {
  height: 40px !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  transition: all var(--premium-duration-fast) var(--premium-ease-standard) !important;
}

.auth-form-input:focus {
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.auth-form-row {
  margin-bottom: 18px !important;
  font-size: 12px !important;
  margin-top: -6px !important;
}

.auth-btn {
  height: 40px !important;
  border-radius: var(--premium-radius-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--premium-shadow-sm) !important;
  transition: all var(--premium-duration-normal) var(--premium-ease-standard) !important;
}

.auth-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  right: 1px !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%) !important;
  border-radius: var(--premium-radius-md) var(--premium-radius-md) 0 0 !important;
  pointer-events: none !important;
}

.auth-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
  filter: brightness(1.05) !important;
}

.auth-btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.98) !important;
}

/* 深色模式下登录卡片阴影调整 */
[data-theme="dark"] .auth-lock-card {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}



/* ============================================================
   对话模式 · 最终版（干净统一）
   ============================================================ */

/* ---------- 切换控制 ---------- */
.chat-mode-hide { display: none !important; }

.content-area { position: relative; }

/* ---------- 容器 ---------- */
/* 手机端专属快捷按钮栏：默认隐藏，仅手机端显示 */
.mobile-quick-bar {
  display: none;
}

/* 手机端顶部状态栏：默认隐藏，仅手机端显示 */
.mobile-status-bar {
  display: none;
}

.chat-mode-container {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.content-area.chat-mode-active .chat-mode-container {
  display: flex !important;
}

.content-area.chat-mode-active > *:not(.chat-mode-container) {
  display: none !important;
}

/* 对话模式下隐藏经典模式所有内容（catch-all，确保不会漏） */
body.chat-mode-body .content-area > *:not(#chatMode):not(.chat-mode-container):not(.chat-float-actions-fixed) {
  display: none !important;
}

.content-area.chat-mode-active {
  padding: 0 !important;
  overflow: hidden !important;
}

/* ---------- 欢迎区 ---------- */
.chat-welcome {
  flex-shrink: 0;
  text-align: center;
  padding: 16px 20px 8px;
}

.chat-welcome-icon-wrap {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--primary, #2563eb) 0%, var(--primary-light, #3b82f6) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px var(--primary-glow, rgba(37,99,235,0.3));
}

.chat-welcome-icon-wrap::before {
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: 1px;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%);
  border-radius: 9px 9px 3px 3px;
  pointer-events: none;
}

.chat-welcome-icon { font-size: 20px; line-height: 1; }

.chat-welcome-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.chat-welcome-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ---------- 消息区（独立滚动） ---------- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 20px 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
  transition: background 0.2s;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ---------- 消息气泡 ---------- */
.chat-msg {
  display: flex;
  gap: 10px;
  max-width: 85%;
  margin-bottom: 16px;
  animation: chatMsgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }

.chat-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s var(--premium-ease-standard);
  overflow: hidden;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-msg:hover .chat-msg-avatar { transform: scale(1.05); }

.chat-msg.user .chat-msg-avatar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light, #3b82f6) 100%);
  color: #fff;
}

.chat-msg.ai .chat-msg-avatar {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: #fff;
  position: relative;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chat-msg.user .chat-msg-bubble {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light, #3b82f6) 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}

.chat-msg.ai .chat-msg-bubble {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}

.chat-msg-bubble .msg-success { color: #22c55e; font-weight: 500; }
.chat-msg-bubble .msg-error { color: #ef4444; font-weight: 500; }
.chat-msg-bubble .msg-info { color: var(--primary); font-weight: 500; }

/* 深色模式下的信息色 */
[data-theme="dark"] .chat-msg-bubble .msg-info { color: #60a5fa; }

/* ---------- 打字指示器 ---------- */
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: chatTyping 1.4s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- 快捷建议按钮 ---------- */
.chat-suggest-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.chat-suggest-btn {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 12px;
  background: var(--primary-glow);
  color: var(--primary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s var(--premium-ease-standard);
}

.chat-suggest-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- AI 助手吉祥物 ---------- */
/* ============ AI 助手吉祥物（输入框右上） ============ */
.chat-mascot {
  position: absolute;
  bottom: 100%;
  right: 18px;
  margin-bottom: -12px;
  cursor: pointer;
  z-index: 10;
  transform-origin: bottom center;
  animation: mascotFloat 3.2s ease-in-out infinite;
  transition: transform 0.3s ease;
  /* 去掉移动端点击时的灰色高亮方框（tap highlight）与选中轮廓 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  /* 确保吉祥物容器本身不带任何边框/背景/投影 */
  background: transparent;
  border: none;
  box-shadow: none;
}
.chat-mascot:active,
.chat-mascot:focus,
.chat-mascot:focus-visible {
  outline: none;
}
/* 听写/聚焦：轻轻蹦跶，状态灯变蓝，头顶冒思考气泡 */
.chat-mascot.is-listening {
  animation: mascotBounce 1.6s ease-in-out infinite;
}
.chat-mascot.is-listening .mascot-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.chat-mascot.is-listening .mascot-status {
  background: #3b82f6;
  box-shadow: 0 0 0 0 rgba(59,130,246,0.45);
  animation: statusPulseBlue 2s ease-in-out infinite;
}
/* 打字时点头 */
.chat-mascot.is-typing {
  animation: mascotNod 0.5s ease-in-out;
}
/* 发送后开心跳一下 */
.chat-mascot.is-happy {
  animation: mascotHappy 0.7s ease-in-out;
}
.chat-mascot:hover {
  transform: scale(1.1) rotate(-6deg);
}
.chat-mascot:hover .mascot-status {
  box-shadow: 0 0 8px 2px rgba(34,197,94,0.5);
}
/* 招手：点击小人触发一次友好挥手（戳一戳） */
.chat-mascot.is-wave {
  animation: mascotWave 0.9s ease;
}
.mascot-svg {
  display: block;
  width: var(--mascot-size, 128px);   /* 尺寸由 JS 按实际布局宽度写入，内联优先级高于媒体查询，确保手机端一定缩小 */
  height: var(--mascot-size, 128px);
  filter: drop-shadow(0 3px 8px rgba(40,50,120,0.22));
  transition: filter 0.3s ease;
  background: transparent;
  border: none;
  box-shadow: none;
}
.chat-mascot:hover .mascot-svg {
  filter: drop-shadow(0 6px 16px rgba(40,50,120,0.32));
}
/* 状态指示灯：位置由 JS 按天线坐标精确计算（left/top 写入），
   这里只负责样式与居中变换，确保绿点永远锁在小人头顶天线上。 */
.mascot-status {
  position: absolute;
  left: 42px;            /* JS 会按天线坐标精确覆盖；此为兜底近似值 */
  top: 6px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, transparent);
  z-index: 12;
  animation: statusPulse 2s ease-in-out infinite;
}
/* Lottie 就绪后隐藏旧的 HTML 绿点，改用 SVG 内 <circle> 精确贴在天线（同坐标系永不错位） */
.chat-mascot.has-lottie .mascot-status {
  display: none;
}
/* SVG 内天线绿点样式（由 JS 生成，位置与角色同坐标系） */
.mascot-antenna-dot {
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
/* 思考气泡：聚焦时出现在小人头顶（三个跳动的点，像在等你说话） */
.mascot-bubble {
  position: absolute;
  bottom: 104%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  background: transparent;
  border: none;
  border-radius: 14px;
  box-shadow: none;
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.7);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  z-index: 11;
}
/* 气泡小尾巴 */
.mascot-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: transparent;                       /* 思考气泡尾巴透明，不留白块方框感 */
  border: none;
}
.mascot-bubble i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary, #2563eb);
  animation: bubbleDot 1.2s ease-in-out infinite;
}
.mascot-bubble i:nth-child(1) { animation-delay: 0s; }
.mascot-bubble i:nth-child(2) { animation-delay: 0.2s; }
.mascot-bubble i:nth-child(3) { animation-delay: 0.4s; }
@keyframes bubbleDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}
/* 发送时星光迸发 */
.mascot-sparkle {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 11;
}
.mascot-sparkle i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--primary, #2563eb);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity: 0;
  transform: scale(0) rotate(0deg);
}
.chat-mascot.is-happy .mascot-sparkle i { animation: sparklePop 0.7s ease-out; }
.chat-mascot.is-happy .mascot-sparkle i:nth-child(1) { --tx: -28px; --ty: -24px; }
.chat-mascot.is-happy .mascot-sparkle i:nth-child(2) { --tx: 24px;  --ty: -28px; }
.chat-mascot.is-happy .mascot-sparkle i:nth-child(3) { --tx: 32px;  --ty: 8px; }
@keyframes sparklePop {
  0%   { opacity: 0; transform: translate(0,0) scale(0) rotate(0deg); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1) rotate(140deg); }
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.04); }
}
@keyframes mascotWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-12deg); }
}
@keyframes mascotNod {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(9deg); }
  100% { transform: rotate(0deg); }
}
@keyframes mascotHappy {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-10px) scale(1.12) rotate(4deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes soundPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
@keyframes statusPulseBlue {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(59,130,246,0.45); }
  50% { opacity: 0.85; box-shadow: 0 0 0 4px rgba(59,130,246,0); }
}

/* ---------- 吉祥物 Lottie 三态容器（替代静态 PNG） ---------- */
.mascot-lottie {
  position: relative;
  width: var(--mascot-size, 128px);   /* 尺寸由 JS 写入 --mascot-size，内联优先级高于媒体查询 */
  height: var(--mascot-size, 128px);
  overflow: hidden;         /* 兜底裁切，角色已用 viewBox 居中填满 */
  display: none;            /* 默认隐藏，Lottie 就绪后显示 */
  background: transparent;
  border: none;
  box-shadow: none;
}
.chat-mascot.has-lottie .mascot-lottie {
  display: block;
}
.mascot-layer {
  position: absolute;
  inset: 0;
  display: none;
}
.mascot-layer.is-active {
  display: block;
}
.mascot-lottie svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* 角色本体由 JS 设置 viewBox 裁到画布留白区域，精确填满容器，无需 CSS scale */
  filter: drop-shadow(0 3px 8px rgba(40,50,120,0.22));
  transition: filter 0.3s ease;
  background: transparent;
  border: none;
  box-shadow: none;
}
.chat-mascot:hover .mascot-lottie svg {
  filter: drop-shadow(0 6px 16px rgba(40,50,120,0.32));
}
/* Lottie 加载成功后隐藏 PNG 兜底 */
.chat-mascot.has-lottie .mascot-fallback {
  display: none;
}

/* 输入区有吉祥物时不再额外留顶距（小人已坐在输入框上边界） */
.chat-input-area:has(.chat-mascot) {
  padding-top: 0;
}

/* ---------- 戳一戳 / 欢迎 文字气泡 ---------- */
.mascot-tip {
  position: absolute;
  bottom: 106%;
  left: auto;
  right: 0;
  width: max-content;
  max-width: 220px;
  max-width: min(80vw, 220px);
  padding: 7px 11px;
  background: transparent;              /* 不要卡片底色，点击小人时不会出现方框 */
  border: none;
  border-radius: 14px;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25); /* 仅用文字阴影保证可读，不产生方框 */
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary, #334155); /* 跟随主题文字色，深色模式自动变浅色可读 */
  white-space: normal;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(6px) scale(0.7);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  z-index: 13;
}
.mascot-tip-icon {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}
.mascot-tip::after {
  display: none;                        /* 无底色气泡不需要小尾巴 */
}
.mascot-tip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- 引导示例气泡（欢迎页，可点击示例指令） ---------- */
/* 将气泡提升到 body 层，避免被 .chat-mode-container 裁剪，也不随小人缩放/招手 */
#mascotSuggestPortal {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 200;
  pointer-events: none;
}
/* 去掉白色卡片：两行提示居中横铺在对话区域内（不覆盖左侧栏），两端柔和淡出 */
.mascot-suggest {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;            /* 两行都居中 */
  gap: 8px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 200;
  /* 两端柔和渐隐，避免芯片被硬切 */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.mascot-suggest.show { opacity: 1; }
.mascot-suggest-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 2px 6px;
  animation: mascotSway 3.2s ease-in-out infinite alternate;   /* 居中左右摆动：快且深 */
  will-change: transform;
}
/* 轻量第二行：更细更淡、反向摆动，与首行形成对流；仅桌面显示（手机端 CSS 收起） */
.mascot-suggest-track--light {
  opacity: 0.68;
  padding: 0 6px;
  animation: mascotSway 4.2s ease-in-out infinite alternate-reverse;
}
.mascot-suggest-track--light .mascot-suggest-item {
  background: rgba(59, 130, 246, 0.08);
  color: var(--text-secondary, #64748b);
  padding: 3px 10px;
  font-size: 12px;
}
/* 手机端竖向空间紧张，收起轻量第二行，保持单行；并略加快摆动节奏 */
@media (max-width: 768px) {
  .mascot-suggest-track--light { display: none; }
  .mascot-suggest-track--light .mascot-suggest-item { font-size: 10px; padding: 2px 8px; }
  .mascot-suggest-track { animation-duration: 2.6s; }
}
@keyframes mascotSway {
  from { transform: translateX(-30px); }
  to   { transform: translateX(30px); }
}
/* 胶囊错落弹入：让刷新标签时“跳”一下，更有灵动感 */
@keyframes mascotChipIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mascot-suggest-item {
  appearance: none;
  border: none;
  background: rgba(59, 130, 246, 0.10);
  color: var(--primary, #2563eb);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  padding: 5px 12px;
  border-radius: 18px;
  cursor: default;
  white-space: nowrap;
  flex: 0 0 auto;
  pointer-events: auto;
  /* 入场前由 backwards 填充 0% 关键帧（隐藏），动画结束后回到基础态，hover 可正常放大 */
  animation: mascotChipIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mascot-suggest-item:hover {
  transform: scale(1.12);
  background: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  opacity: 1;
}
.mascot-suggest-icon {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}
/* 滚动时小人挥手 */
.chat-mascot.is-suggest-scrolling .mascot-lottie,
.chat-mascot.is-suggest-scrolling .mascot-svg,
.chat-mascot.is-suggest-scrolling .mascot-fallback {
  animation: mascotSuggestWave 0.55s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes mascotSuggestWave {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}
[data-theme="dark"] .mascot-suggest-item {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}
[data-theme="dark"] .mascot-suggest-item:hover {
  background: #3b82f6;
  color: #fff;
  opacity: 1;
}

/* ---------- 错误重试气泡 ---------- */
.mascot-error-bubble {
  position: absolute;
  bottom: 118%;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.92);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  width: max-content;
  max-width: min(78vw, 240px);
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.28);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 15;
}
.mascot-error-bubble::before { content: "\26A0\FE0F"; }
.mascot-error-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
/* 错误态：小人轻微抖动 + 红色辉光 */
.chat-mascot.is-error .mascot-lottie,
.chat-mascot.is-error .mascot-svg,
.chat-mascot.is-error .mascot-fallback {
  animation: mascotShake 0.45s ease 0s 2;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.55));
}
@keyframes mascotShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-3deg); }
  40% { transform: translateX(5px) rotate(3deg); }
  60% { transform: translateX(-4px) rotate(-2deg); }
  80% { transform: translateX(4px) rotate(2deg); }
}

/* ---------- 响应式：小屏缩小吉祥物，避免遮挡输入/显得过大 ---------- */
/* 绿点、角色都在 SVG 内，容器缩小会自动等比缩放，不会错位 */
/* 尺寸统一由 --mascot-size 变量控制；实际值优先由 JS 按布局宽度写入（内联样式，
   优先级高于媒体查询，确保任何环境下手机端都生效）。以下是兜底（JS 未执行时）。 */
.chat-mascot {
  --mascot-size: 128px;
}
@media (max-width: 768px) {
  .chat-mascot {
    --mascot-size: 92px;
  }
}
@media (max-width: 480px) {
  .chat-mascot {
    --mascot-size: 72px;
  }
}



/* ---------- 输入区 · 高端对话输入（Copilot 风格） ---------- */
.chat-input-area {
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, rgba(var(--bg-primary-rgb, 255,255,255), 0) 0%, var(--bg-primary) 16px);
}

/* 输入容器：白色卡片 */
.chat-input-container {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7) inset,
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.05),
    0 12px 24px rgba(0,0,0,0.04);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-theme="dark"] .chat-input-container {
  background: rgba(var(--bg-secondary-rgb, 30,41,59), 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 4px 12px rgba(0,0,0,0.2),
    0 12px 24px rgba(0,0,0,0.28);
}

.chat-input-container:focus-within {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.85) inset,
    0 0 0 3px var(--primary-glow),
    0 6px 18px rgba(79,124,255,0.1),
    0 14px 28px rgba(79,124,255,0.06);
  transform: translateY(-1px);
}

[data-theme="dark"] .chat-input-container:focus-within {
  background: rgba(var(--bg-card-rgb, 30,41,59), 0.9);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 0 3px var(--primary-glow),
    0 6px 18px rgba(0,0,0,0.3),
    0 14px 28px rgba(0,0,0,0.35);
}

/* 输入行：独占一行的 textarea */
.chat-input-row {
  display: flex;
  align-items: center;
  padding: 14px 16px 6px;
}

.chat-input-field {
  flex: 1;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}

.chat-input {
  width: 100%;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.55;
  resize: none;
  min-height: 54px;
  max-height: 168px;
  font-family: inherit;
  padding: 0;
}

.chat-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.chat-input::placeholder { color: var(--text-tertiary); opacity: 0.8; }

/* 底部状态栏：仅承载远程在线状态，默认高度为 0，有内容时自然撑开 */
.chat-input-footer {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  padding: 0 14px;
}

.chat-input-count {
  position: absolute;
  right: 0;
  bottom: -18px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chat-input-count.is-visible { opacity: 1; }
.chat-input-count.is-near-limit { color: var(--danger); font-weight: 600; }

/* 底部工具栏 */
.chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 10px;
}

.chat-toolbar-left,
.chat-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* + 工具按钮 */
.chat-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: none;
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-plus-btn svg { display: block; transition: transform 0.2s ease; }

.chat-plus-btn:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text-primary);
}

.chat-plus-btn:active { transform: scale(0.94); }

.chat-plus-btn.active {
  color: var(--primary);
  background: var(--primary-glow);
}

.chat-plus-btn.active svg { transform: rotate(45deg); }

[data-theme="dark"] .chat-plus-btn { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .chat-plus-btn:hover { background: rgba(255,255,255,0.12); }

/* @ 提及店铺标签（截图中的红色文字下拉按钮） */
.chat-mention-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--danger, #ef4444);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.chat-mention-tag svg { flex-shrink: 0; }

.chat-mention-tag:hover {
  background: rgba(239,68,68,0.08);
}

.chat-mention-tag:active { transform: scale(0.96); }

[data-theme="dark"] .chat-mention-tag { color: #ff6b6b; }
[data-theme="dark"] .chat-mention-tag:hover { background: rgba(255,107,107,0.12); }

/* 语音按钮 */
.chat-voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s ease;
}

.chat-voice-btn svg { display: block; }

.chat-voice-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text-primary);
}

.chat-voice-btn:active { transform: scale(0.94); }

.chat-voice-btn.recording {
  background: #ef4444;
  color: #fff;
  animation: chat-rec-pulse 1.4s infinite;
}

[data-theme="dark"] .chat-voice-btn:hover { background: rgba(255,255,255,0.08); }

/* 发送按钮：灰色圆底 + 深色箭头 */
.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: none;
  background: #f3f4f6;
  color: #374151;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s ease;
}

.chat-send-btn svg {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
  transform-origin: center;
}

.chat-send-btn:hover {
  background: #e5e7eb;
  color: #111827;
}

.chat-send-btn:active { transform: scale(0.94); }

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="dark"] .chat-send-btn {
  background: rgba(255,255,255,0.12);
  color: #e5e7eb;
}
[data-theme="dark"] .chat-send-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

@keyframes chat-rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* 吉祥物在移动端 toolbar 内时缩小为伴游图标 */
.chat-input-toolbar .chat-mascot {
  --mascot-size: 34px !important;
  position: relative;
  margin-left: 2px;
  flex-shrink: 0;
}
.chat-input-toolbar .chat-mascot .mascot-travel-badge,
.chat-input-toolbar .chat-mascot .mascot-bubble,
.chat-input-toolbar .chat-mascot .mascot-sparkle,
.chat-input-toolbar .chat-mascot .mascot-status {
  display: none !important;
}

/* ---------- 更多功能菜单 ---------- */
.chat-tools-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 10px;
  min-width: 168px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  padding: 6px;
  z-index: 100;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: all 0.15s ease;
}

.chat-tools-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-tools-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-tools-menu-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.ctm-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.chat-tools-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 6px;
}

/* ---------- 店铺提示下拉 ---------- */
.chat-shop-suggest {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 14px;
  right: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--premium-radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

.chat-shop-suggest.show { display: block; }

.chat-shop-suggest-title {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.chat-shop-suggest-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.chat-shop-suggest-item:hover {
  background: var(--primary-glow);
  color: var(--primary);
}

.chat-shop-suggest-item .shop-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

/* 智能建议（@/获取/智能建议）主题化 —— 替代 JS 内联 isDark 取色 */
.sugg-header {
  position: relative;
  padding: 10px 36px 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.sugg-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: 6px;
}

.sugg-close:hover { background: rgba(127, 127, 127, 0.16); }

.sugg-item {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: background 0.15s;
}

.sugg-item:hover { background: var(--bg-secondary); }

/* ---------- 回到底部按钮（保持） ---------- */
.chat-scroll-bottom {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
  transition: all 0.2s var(--premium-ease-standard);
  backdrop-filter: blur(8px);
}

.chat-scroll-bottom.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.chat-scroll-bottom:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* ---------- 深色模式适配 ---------- */
[data-theme="dark"] .chat-input-area {
  background: var(--bg-primary);
}

[data-theme="dark"] .mascot-status {
  border-color: var(--bg-primary, #1a1a2e);
}

/* ---------- 顶部栏文字按钮（深色模式修复） ---------- */
.top-action-btn-text {
  color: var(--text-primary) !important;
}

.top-action-btn-text:hover {
  color: var(--primary) !important;
  background: var(--primary-glow) !important;
}

.mode-toggle-btn {
  background: var(--primary-glow) !important;
  color: var(--primary) !important;
  border-color: transparent !important;
}

.mode-toggle-btn svg {
  stroke: var(--primary) !important;
  color: var(--primary) !important;
}

.mode-toggle-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.mode-toggle-btn:hover svg {
  stroke: #fff !important;
  color: #fff !important;
}








/* ---------- 店铺提示下拉 ---------- */
.chat-shop-suggest {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 34px;
  right: 34px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--premium-radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

.chat-shop-suggest.show { display: block; }

.chat-shop-suggest-title {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.chat-shop-suggest-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.chat-shop-suggest-item:hover {
  background: var(--primary-glow);
  color: var(--primary);
}

.chat-shop-suggest-item .shop-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

/* 智能建议（@/获取/智能建议）主题化 —— 替代 JS 内联 isDark 取色 */
.sugg-header {
  position: relative;
  padding: 10px 36px 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.sugg-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-tertiary);
  padding: 2px 6px;
  border-radius: 6px;
}

.sugg-close:hover { background: rgba(127, 127, 127, 0.16); }

.sugg-item {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: background 0.15s;
}

.sugg-item:hover { background: var(--bg-secondary); }

/* ---------- 回到底部按钮 ---------- */
.chat-scroll-bottom {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
  transition: all 0.2s var(--premium-ease-standard);
  backdrop-filter: blur(8px);
}

.chat-scroll-bottom.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.chat-scroll-bottom:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* ---------- 深色模式适配 ---------- */
[data-theme="dark"] .chat-input-area {
  background: var(--bg-primary);
}

/* ---------- 顶部栏文字按钮（深色模式修复） ---------- */
.top-action-btn-text {
  color: var(--text-primary) !important;
}

.top-action-btn-text:hover {
  color: var(--primary) !important;
  background: var(--primary-glow) !important;
}

.mode-toggle-btn {
  background: var(--primary-glow) !important;
  color: var(--primary) !important;
  border-color: transparent !important;
}

.mode-toggle-btn svg {
  stroke: var(--primary) !important;
  color: var(--primary) !important;
}

.mode-toggle-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.mode-toggle-btn:hover svg {
  stroke: #fff !important;
  color: #fff !important;
}


/* ---------- 欢迎区显示/隐藏动效 ---------- */
.chat-welcome {
  transition: all 0.3s var(--premium-ease-emphasized);
  transform-origin: center top;
}

.chat-welcome.hidden {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}


/* ---------- 清屏按钮（消息区右上角悬浮） ---------- */
.chat-clear-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--premium-radius-md);
  cursor: pointer;
  transition: all 0.2s var(--premium-ease-standard);
  font-family: inherit;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  opacity: 0.8;
}

.chat-clear-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
  background: #fef2f2;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239,68,68,0.15);
}

[data-theme="dark"] .chat-clear-btn:hover {
  background: rgba(239,68,68,0.1);
}

.chat-clear-btn:active {
  transform: scale(0.97);
}


/* ---------- 方案A：对话模式沉浸式（隐藏顶部栏） ---------- */

/* 对话模式主容器占满 */
.chat-mode-main .content-area {
  padding: 0 !important;
}

.chat-mode-main {
  padding-top: 0 !important;
}

/* 右上角悬浮操作栏 */
.chat-float-actions {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-float-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--premium-radius-lg);
  cursor: pointer;
  transition: all 0.2s var(--premium-ease-standard);
  font-family: inherit;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chat-float-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-glow);
  box-shadow: 0 4px 12px var(--primary-glow);
  transform: translateY(-1px);
}

.chat-float-btn:active {
  transform: scale(0.97);
}

.chat-float-btn span {
  white-space: nowrap;
}


/* 清屏按钮在左侧 */
.chat-clear-btn-left {
  left: 12px !important;
  right: auto !important;
}


/* 清屏按钮（悬浮栏内）hover 变红提示破坏性 */
.chat-float-clear:hover {
  color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  background: rgba(255,77,79,0.08) !important;
  box-shadow: 0 4px 12px rgba(255,77,79,0.15) !important;
}


/* ---------- 气泡内建议指令胶囊按钮 ---------- */
.chat-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.chat-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s var(--premium-ease-standard);
  font-family: inherit;
  white-space: nowrap;
}

.chat-suggest-chip:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-glow);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--primary-glow);
}

.chat-suggest-chip:active {
  transform: scale(0.96);
}


/* ---------- 欢迎区 V2：大图标 + 能力卡片 + 小贴士 ---------- */

.chat-welcome {
  padding: 24px 20px 20px;
}

.chat-welcome-icon-wrap {
  margin-bottom: 16px;
}

.chat-welcome-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 24px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: welcomeFloat 3s ease-in-out infinite;
  overflow: hidden;
}

.chat-welcome-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes welcomeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.chat-welcome-icon:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}

.chat-welcome-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  animation: welcomeFadeIn 0.5s 0.1s both;
}

.chat-welcome-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: 20px;
  animation: welcomeFadeIn 0.5s 0.2s both;
}

/* 能力卡片 */
.chat-welcome-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  animation: welcomeFadeIn 0.5s 0.3s both;
}

.welcome-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--premium-radius-lg);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s var(--premium-ease-standard);
}

.welcome-card:hover {
  border-color: var(--primary);
  background: var(--primary-glow);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px var(--primary-glow);
}

.welcome-card:active {
  transform: scale(0.97);
}

.welcome-card-icon {
  font-size: 24px;
  margin-bottom: 6px;
  transition: transform 0.3s var(--premium-ease-emphasized);
}

.welcome-card:hover .welcome-card-icon {
  transform: scale(1.2) rotate(-5deg);
}

.welcome-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.welcome-card-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* 小贴士轮播 */
.chat-welcome-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 8px 14px;
  background: var(--bg-secondary);
  border-radius: 999px;
  margin: 0 auto;
  animation: welcomeFadeIn 0.5s 0.4s both;
}

.tip-icon {
  font-size: 14px;
}

.tip-text {
  transition: opacity 0.3s ease;
}

.tip-text.tip-fade {
  opacity: 0;
}

@keyframes welcomeFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---------- 欢迎区 V3：圆头像 + 标签 + 弹幕 ---------- */

/* 圆形头像 */
.chat-welcome-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 24px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: welcomeFloat 3s ease-in-out infinite;
  overflow: hidden;
  border: 3px solid var(--bg-card);
}

.chat-welcome-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* 快捷能力标签 */
.chat-welcome-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  animation: welcomeFadeIn 0.5s 0.3s both;
}

.welcome-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s var(--premium-ease-standard);
  white-space: nowrap;
}

.welcome-tag:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-glow);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--primary-glow);
}

.welcome-tag:active {
  transform: scale(0.96);
}

.tag-icon {
  font-size: 14px;
}

/* 弹幕小贴士 */
.chat-welcome-danmaku {
  overflow: hidden;
  height: 28px;
  position: relative;
  margin-bottom: 4px;
  animation: welcomeFadeIn 0.5s 0.4s both;
}

.danmaku-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.danmaku-item {
  position: absolute;
  right: -100%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 5px 12px;
  border-radius: 999px;
  animation: danmakuFly 8s linear forwards;
}

@keyframes danmakuFly {
  0% {
    right: -100%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    right: 100%;
    opacity: 0;
  }
}


/* ---------- 欢迎区 V4：圆形头像修复 + 打字机tips ---------- */

/* 圆形头像修复：强制正方形容器 */
.chat-welcome-icon {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  border: 3px solid var(--bg-card);
  overflow: hidden;
}

.chat-welcome-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}

/* 打字机小贴士 */
.chat-welcome-typewriter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  animation: welcomeFadeIn 0.5s 0.4s both;
}

.typewriter-icon {
  font-size: 16px;
}

.typewriter-text {
  font-weight: 500;
  min-height: 18px;
}

.typewriter-cursor {
  color: var(--primary);
  font-weight: 300;
  animation: cursorBlink 0.8s steps(1) infinite;
  margin-left: 1px;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


/* ---------- 堆叠气泡小贴士 ---------- */
.chat-welcome-tips-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 2px;
  height: 110px;
  min-height: 110px;
  overflow: hidden;
  animation: welcomeFadeIn 0.5s 0.4s both;
}

.tip-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.tip-bubble.tip-active {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tip-bubble.tip-history {
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
}

.tip-bubble-icon {
  font-size: 14px;
}

.tip-bubble-text {
  min-height: 16px;
}

.tip-bubble-cursor {
  color: var(--primary);
  font-weight: 300;
  animation: cursorBlink 0.8s steps(1) infinite;
  margin-left: 1px;
  font-size: 13px;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


/* ---------- 欢迎区 V5：垂直居中 + 放大 + 防遮挡 ---------- */

/* 欢迎区容器占满剩余空间，垂直居中 */
.chat-welcome {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 24px !important;
  min-height: 0;
}

.chat-welcome.hidden {
  display: none !important;
  flex: 0;
  padding: 0 !important;
}

/* 头像放大 */
.chat-welcome-icon {
  width: 84px !important;
  height: 84px !important;
}

.chat-welcome-icon img {
  width: 84px !important;
  height: 84px !important;
}

/* 标题放大 */
.chat-welcome-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.chat-welcome-desc {
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

/* 标签放大 */
.welcome-tag {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.tag-icon {
  font-size: 16px !important;
}

.chat-welcome-tags {
  gap: 10px !important;
  margin-bottom: 20px !important;
}

/* 堆叠气泡整体放大 */
.chat-welcome-tips-stack {
  gap: 10px !important;
  height: 130px !important;
  min-height: 130px !important;
}

.tip-bubble {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.tip-bubble.tip-history {
  font-size: 12px !important;
}

.tip-bubble-icon {
  font-size: 15px !important;
}

/* 消息区顶部留空间，防止悬浮按钮遮挡第一条消息 */
.chat-messages {
  padding-top: 52px !important;
}

/* 悬浮按钮保持在右上角，不随内容滚动 */
/* 对话模式下悬浮按钮改为fixed定位，确保在最上层可见 */
body.chat-mode-body .chat-float-actions {
  position: fixed !important;
  top: 12px !important;
  right: 16px !important;
  z-index: 10001 !important;
  display: flex !important;
}

/* 经典模式下隐藏悬浮按钮 */
.chat-float-actions-fixed {
  display: none !important;
}

/* 对话模式下显示悬浮按钮 - 放在body最外层，fixed定位，完全独立 */
body.chat-mode-body .chat-float-actions-fixed {
  display: flex !important;
  position: fixed !important;
  top: 52px !important;
  right: 16px !important;
  z-index: 500 !important;
  pointer-events: auto !important;
}

/* ---------- 欢迎区垂直居中彻底修复 ---------- */

/* 容器：占满高度 + flex 列布局 */
.chat-mode-container {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  position: relative;
}

.chat-mode-container[style*="display: none"] {
  display: none !important;
}

/* 欢迎区：占满剩余空间 + 垂直水平居中 */
.chat-welcome {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 20px 24px !important;
}

.chat-welcome.hidden {
  display: none !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  min-height: 0;
}

/* 消息区：有消息时占满空间 */
.chat-messages-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
}


/* ---------- 对话模式容器 & 欢迎区居中（修复版） ---------- */

/* 默认隐藏时 - 优先级足够高，确保经典模式下不会显示 */
#chatMode {
  display: none !important;
}

/* 对话模式激活时（通过 body class 控制） - 改为fixed全屏覆盖，完全独立于经典布局 */
body.chat-mode-body #chatMode {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 40px !important;
  left: 280px;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: calc(100vh - 40px) !important;
  z-index: 9999 !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========== VIP专属：聊天页样式 ========== */

/* VIP消息气泡常驻微光 */
.chat-msg.user.vip-user .chat-msg-bubble {
  box-shadow: 0 2px 12px var(--primary-glow), 0 0 0 1px var(--primary-glow-strong);
  position: relative;
}

/* VIP消息气泡入场光晕动画 */
.vip-msg-enter {
  animation: vip-msg-glow 0.6s ease-out;
}

@keyframes vip-msg-glow {
  0% {
    box-shadow: 0 0 0 0 var(--primary-glow-strong), 0 2px 12px var(--primary-glow);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255,255,255,0), 0 4px 20px var(--primary-glow-strong);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 2px 12px var(--primary-glow), 0 0 0 1px var(--primary-glow-strong);
    transform: scale(1);
  }
}

/* VIP头像发光边框（聊天页补充） */
.chat-msg-avatar.vip-avatar-ring {
  position: relative;
}
.chat-msg-avatar.vip-avatar-ring::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F5D76E 0%, #D4AF37 40%, #B8860B 70%, #F5D76E 100%);
  background-size: 200% 200%;
  z-index: -1;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
  animation: vip-avatar-ring-shine 3s ease-in-out infinite;
}
.chat-msg-avatar.vip-avatar-ring::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='cg' x1='16' y1='1' x2='16' y2='20' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF3B0'/%3E%3Cstop offset='0.35' stop-color='%23FFE066'/%3E%3Cstop offset='0.7' stop-color='%23E6B800'/%3E%3Cstop offset='1' stop-color='%23B8860B'/%3E%3C/linearGradient%3E%3ClinearGradient id='cg2' x1='16' y1='15' x2='16' y2='20' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D4AF37'/%3E%3Cstop offset='1' stop-color='%238B6914'/%3E%3C/linearGradient%3E%3CradialGradient id='gem1' cx='50%25' cy='40%25' r='60%25'%3E%3Cstop stop-color='%23FF6B6B'/%3E%3Cstop offset='0.6' stop-color='%23E63946'/%3E%3Cstop offset='1' stop-color='%239D0208'/%3E%3C/radialGradient%3E%3CradialGradient id='gem2' cx='50%25' cy='40%25' r='60%25'%3E%3Cstop stop-color='%2374C0FC'/%3E%3Cstop offset='0.6' stop-color='%23339AF0'/%3E%3Cstop offset='1' stop-color='%231864AB'/%3E%3C/radialGradient%3E%3CradialGradient id='gem3' cx='50%25' cy='40%25' r='60%25'%3E%3Cstop stop-color='%2369DB7C'/%3E%3Cstop offset='0.6' stop-color='%2337B24D'/%3E%3Cstop offset='1' stop-color='%232B8A3E'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2 17L5.5 6L10 11L16 2L22 11L26.5 6L30 17H2Z' fill='url(%23cg)' stroke='%238B6914' stroke-width='0.8' stroke-linejoin='round'/%3E%3Crect x='1' y='17' width='30' height='4' rx='1.5' fill='url(%23cg2)' stroke='%238B6914' stroke-width='0.6'/%3E%3Ccircle cx='16' cy='8' r='2.8' fill='url(%23gem1)' stroke='%238B6914' stroke-width='0.5'/%3E%3Ccircle cx='16' cy='7.5' r='1' fill='white' opacity='0.6'/%3E%3Ccircle cx='7.5' cy='11' r='2' fill='url(%23gem2)' stroke='%238B6914' stroke-width='0.4'/%3E%3Ccircle cx='7.5' cy='10.6' r='0.7' fill='white' opacity='0.5'/%3E%3Ccircle cx='24.5' cy='11' r='2' fill='url(%23gem3)' stroke='%238B6914' stroke-width='0.4'/%3E%3Ccircle cx='24.5' cy='10.6' r='0.7' fill='white' opacity='0.5'/%3E%3Ccircle cx='11.5' cy='18.5' r='0.6' fill='%23FFF3B0'/%3E%3Ccircle cx='16' cy='18.5' r='0.6' fill='%23FFF3B0'/%3E%3Ccircle cx='20.5' cy='18.5' r='0.6' fill='%23FFF3B0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 1px 3px rgba(139, 105, 20, 0.45));
}

@keyframes vip-avatar-ring-shine {
  0%, 100% { background-position: 0% 50%; opacity: 0.85; }
  50% { background-position: 100% 50%; opacity: 1; }
}

/* VIP专属加载动画 */
.vip-loading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vip-loading span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: vip-loading-bounce 1.4s ease-in-out infinite both;
}
.vip-loading span:nth-child(1) { animation-delay: -0.32s; }
.vip-loading span:nth-child(2) { animation-delay: -0.16s; }
.vip-loading span:nth-child(3) { animation-delay: 0s; }

@keyframes vip-loading-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px var(--primary-glow-strong);
  }
}

/* 皮肤切换光扫效果容器 */
.vip-shine-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}
.vip-shine-overlay::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.1) 45%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.1) 55%,
    transparent 100%
  );
  transform: translateX(-100%) rotate(15deg);
  animation: vip-shine-sweep 1.2s ease-out forwards;
}

@keyframes vip-shine-sweep {
  0% { transform: translateX(-100%) rotate(15deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(100%) rotate(15deg); opacity: 0; }
}

/* VIP签到粒子（聊天页） */
.vip-checkin-particles {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
}
.vip-checkin-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: vip-particle-float 1.2s ease-out forwards;
  box-shadow: 0 0 6px var(--primary-glow-strong);
}
.vip-checkin-particle.star {
  width: 8px;
  height: 8px;
  background: var(--primary-light);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes vip-particle-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.3);
  }
}

/* VIP用户名徽章 */
.vip-username-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 激活VIP庆祝动效 */
.vip-celebration {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100000;
  overflow: hidden;
}
.vip-confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: vip-confetti-fall 3s ease-in forwards;
}
.vip-confetti.circle { border-radius: 50%; }
.vip-confetti.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes vip-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* 皮肤预览大图弹窗 */
.skin-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.skin-preview-modal.show {
  opacity: 1;
  visibility: visible;
}
.skin-preview-content {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 24px;
  max-width: 520px;
  width: 90%;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.skin-preview-modal.show .skin-preview-content {
  transform: scale(1);
}
.skin-preview-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.skin-preview-img {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
  aspect-ratio: 16/10;
  margin-bottom: 16px;
}
.skin-preview-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}
.skin-preview-actions {
  display: flex;
  gap: 10px;
}
.skin-preview-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.skin-preview-btn.primary {
  background: var(--primary-gradient);
  color: #fff;
}
.skin-preview-btn.primary:hover {
  opacity: 0.9;
}
.skin-preview-btn.ghost {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.skin-preview-btn.ghost:hover {
  background: var(--bg-hover);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .vip-msg-enter,
  .chat-msg-avatar.vip-avatar-ring::before,
  .chat-msg-avatar.vip-avatar-ring::after,
  .vip-loading span,
  .vip-shine-overlay::after,
  .vip-checkin-particle,
  .vip-confetti,
  .skin-preview-modal,
  .skin-preview-content {
    animation: none !important;
    transition: none !important;
  }
}
  background: var(--bg-primary) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 折叠侧边栏后，主区域占满全屏 */
body.chat-mode-body.chat-sidebar-collapsed #chatMode {
  left: 0 !important;
}

/* 对话模式下隐藏经典模式所有内容（双重保险） */
body.chat-mode-body .content-area > *:not(#chatMode):not(.chat-float-actions-fixed) {
  display: none !important;
}

/* 欢迎区：垂直水平居中 */
body.chat-mode-body .chat-welcome {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 20px 24px !important;
}

body.chat-mode-body .chat-welcome.hidden {
  display: none !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
}

/* 消息区包装 */
body.chat-mode-body .chat-messages-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.chat-mode-body .chat-messages {
  flex: 1;
  overflow-y: auto;
}


/* ---------- 消息头像 + 时间戳 ---------- */

/* AI 头像 */
.chat-ai-avatar {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: hidden;
}

.chat-ai-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* 欢迎区头像去掉白边 */
.chat-welcome-icon {
  border: none !important;
}

/* 消息内容容器（气泡+时间戳） */
.chat-msg-content {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  gap: 4px;
}

.chat-msg.user .chat-msg-content {
  align-items: flex-end;
}

.chat-msg.ai .chat-msg-content {
  align-items: flex-start;
}

/* 时间戳 */
.chat-msg-time {
  font-size: 10px;
  color: var(--text-tertiary);
  opacity: 0.6;
  padding: 0 4px;
  line-height: 1;
}

/* 气泡宽度修正 */
.chat-msg-bubble {
  max-width: 100% !important;
}



/* ========== 对话模式侧边栏 ========== */

.chat-sidebar {
  width: 280px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 对话模式下：侧边栏改为fixed固定定位，完全独立于经典布局 */
body.chat-mode-body .chat-sidebar {
  display: flex !important;
  position: fixed !important;
  top: 40px !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  height: calc(100vh - 40px) !important;
  z-index: 9998 !important;
  border-right: 1px solid var(--border-color) !important;
}

body.chat-mode-body.chat-sidebar-collapsed .chat-sidebar {
  width: 0 !important;
  border-right: none !important;
}

body.chat-mode-body .sidebar {
  display: none !important;
}

/* 对话模式下隐藏顶部栏 */
body.chat-mode-body .top-bar {
  display: none !important;
}

/* 对话侧边栏头部 */
.chat-sidebar-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-color);
}

.chat-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-sidebar-logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--primary-glow);
  overflow: hidden;
}

.chat-sidebar-logo-icon img {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.chat-sidebar-logo-text {
  flex: 1;
  min-width: 0;
}

.chat-sidebar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.chat-sidebar-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 数据统计卡片区域 */
.chat-sidebar-stats {
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--border-color-hover);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card-primary::before {
  background: var(--primary);
}

.stat-card-success::before {
  background: var(--success);
}

.stat-card-warning::before {
  background: var(--warning);
}

.stat-card-danger::before {
  background: var(--danger);
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-primary .stat-card-icon {
  background: var(--primary-glow);
  color: var(--primary-light);
}

.stat-card-success .stat-card-icon {
  background: var(--success-bg);
  color: var(--success-light);
}

.stat-card-warning .stat-card-icon {
  background: var(--warning-bg);
  color: var(--warning-light);
}

.stat-card-danger .stat-card-icon {
  background: var(--danger-bg);
  color: var(--danger-light);
}

.stat-card-info {
  flex: 1;
  min-width: 0;
}

.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
}

.stat-card-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.chat-sidebar-stats .stat-card {
  cursor: default;
}

.chat-sidebar-stats .stat-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}

.chat-sidebar-stats .stat-card:hover::before {
  opacity: 0;
}

/* 快捷功能区 */
.chat-sidebar-section {
  padding: 0 12px 16px;
}

.chat-sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-log-clear {
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: color 0.15s;
}

.chat-log-clear:hover {
  color: var(--danger);
}

/* 卖家广场入口 */
.chat-showcase-section {
  padding-bottom: 12px;
}

.chat-showcase-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-glow) 0%, transparent 70%);
  border: 1px solid var(--primary-glow);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.chat-showcase-banner:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--primary-glow);
}

.chat-showcase-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.chat-showcase-info {
  flex: 1;
  min-width: 0;
}

.chat-showcase-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.chat-showcase-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-showcase-arrow {
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.chat-showcase-banner:hover .chat-showcase-arrow {
  transform: translateX(2px);
}

/* 活动日志区 */
.chat-log-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.chat-log-container {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 12px;
}

.chat-log-empty {
  text-align: center;
  padding: 20px 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

.chat-log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
  transition: background 0.15s;
}

.chat-log-item:hover {
  background: var(--bg-card-hover);
  cursor: pointer;
}

.chat-log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.chat-log-info { background: var(--info); }
.chat-log-success { background: var(--success); }
.chat-log-warning { background: var(--warning); }
.chat-log-error { background: var(--danger); }

.chat-log-text {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chat-log-time {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 11px;
}

/* 底部用户菜单（对话侧边栏）- 位置微调，其余继承 .auth-entry-menu */
.chat-sidebar-auth-entry {
  position: relative;
}

.chat-auth-menu {
  /* 位置与经典模式一致：bottom 70px, left/right 10px */
  bottom: 70px;
  left: 10px;
  right: 10px;
}

.chat-sidebar-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-sidebar-user-status {
  font-size: 11px;
  color: var(--text-tertiary);
}

.chat-sidebar-user-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* 折叠状态 */
.chat-sidebar.collapsed {
  width: 0;
  border-right: none;
}

.chat-sidebar.collapsed .chat-sidebar-header,
.chat-sidebar.collapsed .chat-sidebar-stats,
.chat-sidebar.collapsed .chat-sidebar-section,
.chat-sidebar.collapsed .chat-sidebar-footer {
  opacity: 0;
  pointer-events: none;
}

/* 对话模式下折叠按钮：fixed定位，跟随侧边栏 */
body.chat-mode-body .sidebar-toggle-btn {
  left: 280px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: fixed !important;
  z-index: 10000 !important;
}

body.chat-mode-body.chat-sidebar-collapsed .sidebar-toggle-btn {
  left: 0 !important;
}

body.chat-mode-body.chat-sidebar-collapsed .sidebar-toggle-btn svg {
  transform: rotate(180deg) !important;
}

/* 远程模式在线状态脉冲动画 */
@keyframes onlinePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* --- 终止按钮 --- */
.chat-msg-bubble .fetch-cancel-btn,
.fetch-cancel-btn {
    display: inline-block !important;
    padding: 6px 16px !important;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}
.chat-msg-bubble .fetch-cancel-btn:hover,
.fetch-cancel-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.chat-msg-bubble .fetch-cancel-btn:active,
.fetch-cancel-btn:active {
  background: #dc2626 !important;
  color: #fff !important;
  transform: scale(0.95);
}