/* ═══════════════════════════════════════════════════════════════════
   user-dropdown.css — v2.1.3 精致下拉样式
   
   用途: 前台所有页面 (/notes/ /skills/ /pricing/ /xueshu/ 等) 的头像下拉
   由 user-zone.js 动态生成 DOM, 本文件提供样式
   
   设计:
     - ChatDLM-style 毛玻璃质感
     - 未登录: 一个 "登录/注册" 按钮
     - 已登录: 头像 → 点击弹出下拉面板
   
   架构:
     - 所有 CSS 变量继承 --ae-* token (site/index.css 定义)
     - 不破坏现有 .avatar-btn / .notif-btn / .login-btn 样式
     - 新增: .user-dropdown 容器 + .user-dropdown-menu 弹出面板
   ═══════════════════════════════════════════════════════════════════ */

/* 触发器 (头像) 悬浮状态 */
.user-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.user-dropdown-trigger {
  width: var(--ae-toggle-size);
  height: var(--ae-toggle-size);
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ae-transition);
  position: relative;
}
.user-dropdown-trigger:hover {
  background: var(--ae-glass-bg-hover);
}
.user-dropdown-trigger.active {
  background: var(--ae-glass-bg-active, rgba(255,255,255,0.08));
}
.user-dropdown-trigger img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

/* ═══ 下拉面板 ═══ */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  max-width: 320px;
  background: var(--ae-sidebar-bg);
  border: 1px solid var(--ae-glass-border);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .2);
  padding: 8px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.user-dropdown.open .user-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 顶部身份区 */
.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.user-dropdown-header .header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ae-glass-bg, rgba(255,255,255,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.user-dropdown-header .header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-dropdown-header .header-info {
  flex: 1;
  min-width: 0;
}
.user-dropdown-header .header-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ae-text-1, #fff);
  line-height: 1.2;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v3.0.0-alpha.5: 邮箱显示 (玻璃风, 单行省略) */
.user-dropdown-header .header-email {
  font-size: 0.6875rem;
  color: var(--ae-text-3, rgba(255,255,255,.3));
  line-height: 1.2;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  direction: ltr;
}
.user-dropdown-header .header-status {
  font-size: 0.75rem;
  color: var(--ae-text-2, #888);
  line-height: 1;
}

/* 身份徽章 (v3.0.0-alpha.5 玻璃宪法: 全部纯玻璃, 无渐变) */
.user-dropdown-badge {
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 10px;
  margin-top: 4px;
  font-weight: 500;
}
.user-dropdown-badge.badge-user {
  background: rgba(100, 150, 255, 0.15);
  color: #7ab5ff;
}
.user-dropdown-badge.badge-admin {
  background: rgba(255, 180, 50, 0.15);
  color: #ffc766;
}
.user-dropdown-badge.badge-superadmin {
  background: rgba(255, 120, 170, 0.15);
  color: #ff9cb8;
}
.user-dropdown-badge.badge-guest {
  background: rgba(255,255,255,0.08);
  color: var(--ae-text-2, #888);
}

/* 余额卡片 */
.user-dropdown-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 6px 0;
  background: var(--ae-glass-bg, rgba(255,255,255,0.04));
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.user-dropdown-balance:hover {
  background: var(--ae-glass-bg-hover, rgba(255,255,255,0.08));
}
.user-dropdown-balance .balance-label {
  font-size: 0.8125rem;
  color: var(--ae-text-2, #888);
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-dropdown-balance .balance-label i {
  color: #ffc766;
}
.user-dropdown-balance .balance-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ae-text-1, #fff);
  display: flex;
  align-items: center;
  gap: 6px;
}
.user-dropdown-balance .balance-amount::after {
  content: '›';
  font-size: 1rem;
  color: var(--ae-text-2, #888);
  margin-left: 2px;
}

/* 分割线 */
.user-dropdown-divider {
  height: 1px;
  background: var(--ae-border-1, rgba(255,255,255,0.06));
  margin: 6px 0;
}

/* 菜单项 */
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--ae-text-1, #e8e8e8);
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  user-select: none;
}
.user-dropdown-item:hover {
  background: var(--ae-glass-bg-hover, rgba(255,255,255,0.06));
  color: var(--ae-text-1, #fff);
  text-decoration: none;
}
.user-dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--ae-text-2, #888);
  font-size: 0.875rem;
  flex-shrink: 0;
}
.user-dropdown-item:hover i {
  color: var(--ae-text-1, #fff);
}
.user-dropdown-item .item-label {
  flex: 1;
  line-height: 1;
}
.user-dropdown-item .item-value {
  font-size: 0.75rem;
  color: var(--ae-text-2, #888);
}
.user-dropdown-item .item-chevron {
  font-size: 0.6875rem;
  color: var(--ae-text-2, #888);
  opacity: 0.6;
}
/* v3.0.0-alpha.5: 菜单右侧 badge (外观 [深色] / 语言 [简体]) */
.user-dropdown-item .item-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ae-text-3, rgba(255,255,255,.3));
  font-weight: 400;
}

/* 高亮样式 (退出登录) */
.user-dropdown-item.danger {
  color: #ff6b6b;
}
.user-dropdown-item.danger:hover {
  background: rgba(255, 107, 107, 0.08);
  color: #ff8a8a;
}
.user-dropdown-item.danger i {
  color: #ff6b6b;
}
.user-dropdown-item.danger:hover i {
  color: #ff8a8a;
}

/* 高亮: 升级按钮 (v3.0.0-alpha.5 玻璃宪法: 去渐变, 改 accent 软底) */
.user-dropdown-item.primary {
  background: var(--ae-accent-soft, rgba(100, 150, 255, 0.10));
  color: var(--ae-accent, #7ab5ff);
  font-weight: 500;
}
.user-dropdown-item.primary:hover {
  background: var(--ae-accent-soft, rgba(100, 150, 255, 0.18));
  color: var(--ae-accent, #9ec8ff);
}
.user-dropdown-item.primary i {
  color: var(--ae-accent, #7ab5ff);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .user-dropdown-menu {
    min-width: 240px;
    max-width: calc(100vw - 24px);
    right: -12px;
  }
}

/* 未登录状态的登录按钮 (复用已有 .login-btn, 这里不重复写) */

/* ═══════════════════════════════════════════════════════════════════
   End of user-dropdown.css
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v3.0.0-alpha.5: av-* 共享组件 (前台后台 1:1 复用, 严守 6 个 9 对称)
   ───────────────────────────────────────────────────────────────────
   HTML 结构跟后台 _shell.html 完全一致 (av-user-card / av-balance-card / av-menu)
   CSS 用 --ae-* 主题变量, 自动跟随前台 6 主题切换
   字号全部 px 写死 (避免被字体大小滑块影响, 破坏卡片内对称)
   ═══════════════════════════════════════════════════════════════════ */

.user-dropdown-menu .av-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 10px;
  background: var(--ae-glass-bg);
  margin-bottom: 12px;
}
.user-dropdown-menu .av-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ae-glass-bg-active);
  color: var(--ae-text-1);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.user-dropdown-menu .av-user-info { flex: 1; min-width: 0; }
.user-dropdown-menu .av-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ae-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-menu .av-user-role {
  font-size: 12px;
  color: var(--ae-text-3);
  margin-top: 4px;
}

/* ═══ 余额 / 升级 双行卡 (v3.0.0-alpha.5 final 几何归零)
   ─────────────────────────────────────────────────
   几何宪法 v4 (基于 DeGao 反馈):
     行 1 高 = 行 2 高 严格相等 (上下半视觉对称)
     字号统一: "个人" / "余额" / "70" 全部 14px / 700
              ¥ 12px (小 2 号)
              升级 12px / 600 (胶囊内)
              箭头 10px
     升级按钮: 面性玻璃 (无边框), 26px 固定高, 双向居中
     全部 line-height:1, vertical center 靠 align-items:center
   ═══════════════════════════════════════════════════ */
.user-dropdown-menu .av-balance-card {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ae-glass-bg);
  border: 1px solid var(--ae-glass-border);
  margin-bottom: 12px;
}
.user-dropdown-menu .av-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}
.user-dropdown-menu .av-balance-row + .av-balance-row {
  border-top: 1px solid var(--ae-glass-border);
}
.user-dropdown-menu .av-balance-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ae-text-1);
  letter-spacing: -.1px;
}
.user-dropdown-menu .av-balance-star {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ae-text-1);
  display: inline-flex;
  align-items: center;
  letter-spacing: -.1px;
}
.user-dropdown-menu .av-balance-star i {
  margin-right: 8px;
  color: var(--ae-text-3);
  font-size: 14px;
  line-height: 1;
}

/* 升级胶囊: 面性玻璃 + 横纵居中 + 26px 等高 */
.user-dropdown-menu .av-upgrade-btn {
  height: 26px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ae-text-1);
  text-decoration: none;
  background: var(--ae-glass-bg-active);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .3px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.user-dropdown-menu .av-upgrade-btn:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}

/* 余额数字: ¥(12) + 70(14) + ›(10) — 跟标签 14 同高同重 */
.user-dropdown-menu .av-balance-value {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
  line-height: 1;
}
.user-dropdown-menu .av-balance-value .av-currency {
  font-size: 12px;
  font-weight: 600;
  color: var(--ae-text-1);
  line-height: 1;
}
.user-dropdown-menu .av-balance-value .av-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--ae-text-1);
  line-height: 1;
  letter-spacing: -.1px;
  font-variant-numeric: tabular-nums;
}
.user-dropdown-menu .av-balance-value .av-chev-r {
  font-size: 10px;
  color: var(--ae-text-3);
  line-height: 1;
  margin-left: 2px;
}
.user-dropdown-menu .av-balance-value:hover .av-currency,
.user-dropdown-menu .av-balance-value:hover .av-amount {
  color: var(--ae-accent);
}
.user-dropdown-menu .av-balance-value:hover .av-chev-r {
  color: var(--ae-accent);
}

/* ═══ 菜单项 (跟后台 1:1) ═══ */
.user-dropdown-menu .av-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-dropdown-menu .av-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ae-text-1);
  text-decoration: none;
  transition: background .15s, color .15s;
  position: relative;
}
.user-dropdown-menu .av-item:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
  text-decoration: none;
}
.user-dropdown-menu .av-item i {
  width: 16px;
  text-align: center;
  color: var(--ae-text-2);
  flex-shrink: 0;
  font-size: 14px;
}
.user-dropdown-menu .av-item span {
  flex: 1;
}
.user-dropdown-menu .av-item-tag {
  color: var(--ae-text-3);
  font-size: 12px;
  margin-right: 4px;
  flex: none !important;
}
.user-dropdown-menu .av-item-arrow {
  font-size: 10px !important;
  color: var(--ae-text-3);
  width: auto !important;
  flex: none !important;
}
.user-dropdown-menu .av-item-danger {
  color: var(--ae-red);
}
.user-dropdown-menu .av-item-danger i {
  color: var(--ae-red);
}
.user-dropdown-menu .av-item-danger:hover {
  background: rgb(var(--ae-red-rgb) / .08);
  color: var(--ae-red);
}

.user-dropdown-menu .av-divider {
  height: 1px;
  background: var(--ae-glass-border);
  margin: 8px 0;
}