/* ========================================
   用户主页 / 账户页（关注系统）
   视觉数值只允许引用 tokens.css 变量
   断点对齐 responsive.css：768px / 480px
   ======================================== */

/* ---- 页面容器：微信「我」页/用户主页 ----
   panel-inner 默认白卡（layout.css）在这里回归 #ededed 画布，
   白卡由 .wx-cells cell 组承担；账户页 cell 列表限宽 640 居中（桌面不拉伸） */
.panel-inner.user-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 0 24px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ---- 返回链接 ---- */
.user-back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--color-link);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.user-back-link:hover { opacity: 0.8; }

/* ---- 头部资料卡（用户主页 + 账户页共用 .wx-cell 骨架） ---- */

/* 56px 圆形头像（微信「我」页规格；覆盖 .user-avatar 默认 64px） */
.account-avatar,
.user-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}

.user-profile-bd,
.account-header-bd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 昵称行：20px 加粗 + VIP 徽标同行（徽标可换行不被截断） */
.account-nickname-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-nickname {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 头部 flex 行内徽标：去掉旧 h2 内联场景的 margin-left，由 gap 控距 */
.account-nickname-row .vip-badge-wrap {
  margin-left: 0;
  flex-shrink: 0;
}

/* 副行：ID / 积分余额（13px 二级灰） */
.account-subline {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.account-stats-mini {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.account-stats-mini b {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ---- cell 左侧小图标（导航/管理组，信息蓝，同微信多彩图标位） ---- */
.wx-cell-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  color: var(--color-info);
  flex-shrink: 0;
}

/* ---- 内容型 cell 组（VIP/昵称/关注/互动/收藏/私信）：白卡带内边距 ---- */
.wx-cells--padded {
  padding: 14px 16px;
}
.wx-cells--padded .empty-state { padding: 24px 12px; }

/* ---- 三栏统计白卡（用户主页） ---- */
.user-stats {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin: 8px 0;
  padding: 12px 0;
}

.user-stats .stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.user-stats .stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.user-stats .stat-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* ---- 关注/私信按钮行（用户主页）：整行等分，微信绿主按钮/描边次按钮 ---- */
.user-header-actions {
  display: flex;
  gap: 10px;
  margin: 8px 0;
}
.user-header-actions > * { flex: 1; }
.user-header-actions .follow-btn { min-height: 40px; }

/* ---- 头像圈：首字母 + 品牌金渐变底 ---- */
.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: var(--shadow-brand);
  user-select: none;
}

.user-avatar-sm {
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
  box-shadow: none;
  cursor: pointer;
}

/* ---- 关注按钮（颜色由 btn-primary/btn-secondary 承担，这里只补尺寸与「已关注」态） ---- */
.follow-btn {
  padding: 8px 22px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
}
.follow-btn.following { color: var(--color-text-secondary); }

/* ---- 分享卡片 grid ---- */
.share-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.share-card {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.share-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.share-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.share-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 预测涨幅徽章：红涨/绿跌/平灰，与树/详情同一口径（A 股习惯） */
.share-card-score {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.share-card-score.up { color: var(--color-danger); }
.share-card-score.down { color: var(--color-success); }
.share-card-score.flat { color: var(--color-text-muted); }

.share-card-path {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.share-card-desc {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
  /* 截断为 3 行（长研报描述不淹没列表） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.share-card-time {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* ---- 昵称编辑表单 ---- */
.nickname-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
}
.nickname-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.nickname-form input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.nickname-form .btn-primary { flex-shrink: 0; }

/* ---- 关注列表行（白卡内 hairline 列表式，去独立描边小卡） ---- */
.following-list {
  display: flex;
  flex-direction: column;
}

.following-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

/* 行间 hairline（对齐 .wx-cell 分隔线口径） */
.following-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 48px; /* 缩进让出头像 */
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
  transform: scaleY(0.5);
  transform-origin: bottom;
}

.following-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
}

.following-nickname {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.following-row-main:hover .following-nickname { color: var(--color-brand); }

.following-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.following-unfollow-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  font-size: 0.78rem;
}

/* ---- 树内用户组链接 & 详情分享者链接（ranking_ui.js 打的钩子 class） ---- */
.user-group-link,
.detail-sharer-link {
  cursor: pointer;
}
.user-group-link:hover,
.detail-sharer-link:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

/* ---- 移动端适配（断点同 responsive.css） ---- */
@media (max-width: 768px) {
  .share-cards { grid-template-columns: 1fr; }
}

/* ==================== 社区交互（账户页区块 + 私信，community_ui.js） ==================== */

/* ---- 收到的互动 feed ---- */

.interaction-feed {
  display: flex;
  flex-direction: column;
}

.interaction-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.interaction-row:active { background: var(--wx-pressed); }

/* 行间 hairline（对齐 .wx-cell 分隔线口径） */
.interaction-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 36px; /* 缩进让出互动图标 */
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
  transform: scaleY(0.5);
  transform-origin: bottom;
}

.interaction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
}

.interaction-icon.like { color: var(--color-brand); background: var(--color-brand-subtle); }
.interaction-icon.comment { color: var(--color-info); background: var(--color-info-subtle); }

.interaction-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.interaction-text {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  word-break: break-word;
}

.interaction-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ---- 发私信按钮（用户主页头部，与关注按钮并列） ---- */

.msg-open-btn { margin-left: 8px; }

/* ---- 发私信弹层（复用 .modal-overlay/.modal-dialog） ---- */

.msg-dialog { text-align: left; }
.msg-dialog .modal-title { text-align: center; }

.msg-dialog-body { width: 100%; }

.msg-compose-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.msg-compose-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ---- 私信会话列表（微信会话列表式：头像/标题/摘要/时间，行高 56px，hairline 分隔） ---- */

.msg-conversations {
  display: flex;
  flex-direction: column;
}

.msg-conversation {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 8px 0;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.msg-conversation:active { background: var(--wx-pressed); }

/* 行间 hairline（缩进让出头像，对齐 .wx-cell 分隔线口径） */
.msg-conversation:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 56px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
  transform: scaleY(0.5);
  transform-origin: bottom;
}

/* 会话头像 44px（覆盖 .user-avatar-sm 36px，微信会话列表规格） */
.msg-conversation .user-avatar-sm {
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
}

.msg-conversation-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.msg-peer { font-weight: 600; font-size: 0.875rem; color: var(--color-text-primary); }

.msg-preview {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-conversation-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.msg-time { font-size: 0.72rem; color: var(--color-text-muted); }

.msg-unread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-danger);
  border-radius: 9px;
}

/* ---- 私信线程（气泡式，时间正序） ---- */

.msg-thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.msg-back-link {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
}

.msg-back-link:hover { color: var(--color-brand); }

.msg-thread-peer { font-weight: 600; font-size: 0.95rem; color: var(--color-text-primary); }

.msg-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 12px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.msg-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 78%;
  align-self: flex-start;
}

/* 我发出的靠右（品牌色气泡），对方发来的靠左（白底气泡） */
.msg-row.mine { align-self: flex-end; align-items: flex-end; }

.msg-bubble {
  padding: 8px 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  word-break: break-word;
}

.msg-row.mine .msg-bubble {
  color: var(--color-brand-strong);
  background: var(--color-brand-subtle);
  border-color: var(--color-brand-glow);
}

.msg-row-time { font-size: 0.7rem; color: var(--color-text-muted); }

.msg-reply-row { margin-top: 10px; }

/* ---- 移动端适配（断点同 responsive.css） ---- */
@media (max-width: 768px) {
  .msg-row { max-width: 88%; }
  .msg-thread { max-height: 320px; }
}

/* ---- VIP 徽章 + 权益区块（2026-09-08 VIP 系统，对应 user_page.js 账户页） ---- */

/* 昵称旁徽章容器（位于 h2 内，inline 不打断昵称 ellipsis） */
.vip-badge-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.vip-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

/* 有效态：品牌金描边（VIP1=积分兑换 / VIP2=充值购买，颜色同源不同深浅） */
.vip-badge-active {
  color: var(--color-brand-strong);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand);
}
.vip-badge-lv1 { opacity: 0.92; }

/* 未开通灰态 */
.vip-badge-none {
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  font-weight: 500;
}

.vip-expire-text {
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

/* 权益区块卡片内部 */
.vip-card { display: flex; flex-direction: column; gap: 12px; }

.vip-state {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.vip-state-label { font-size: 0.95rem; font-weight: 600; }
.vip-state-active .vip-state-label { color: var(--color-brand-strong); }
.vip-state-none .vip-state-label { color: var(--color-text-muted); }
.vip-balance { font-size: 0.8125rem; color: var(--color-text-secondary); }

.vip-rule {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.vip-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* VIP2（充值购买）：比 VIP1 略强的视觉权重 */
.vip-badge-lv2 { box-shadow: 0 0 0 2px var(--color-brand-subtle); }

/* ---- 退出登录 cell（微信「我」页底部惯例：独立白卡、居中红字） ----
   2026-09-10 头部微信规范精简：退出登录唯一入口从头部队迁到这里 */
.wx-cell--danger {
  justify-content: center;
  color: var(--color-danger);
  font-weight: 500;
}