/* =========================================
   User Hub Tabs + Mailbox (Merged)
   - Tabs: 直角高级风格
   - Mailbox: 取更高者等高同步
   - 邮箱可无限延展（不被裁剪）
========================================= */

/* ---------- Theme Vars ---------- */
:root{
  --brand: #111827;
  --brand-soft: #0f172a;
  --brand-border: rgba(255,255,255,.12);

  --active-bg: #ffffff;
  --active-text: #111827;

  --hub-shadow: 0 10px 26px rgba(0,0,0,.22);
  --hub-accent: #60a5fa;
}

/* ---------- Hub Container ---------- */
/* ✅ 关键：不要裁切整个 user-hub（会裁掉邮箱延展） */
.user-hub{ overflow: visible !important; }

/* 顶部导航条（直角） */
.user-hub-tabs{
  background: linear-gradient(180deg, var(--brand-soft), var(--brand));
  padding: 12px 14px 0;
  position: relative;

  overflow: hidden; /* 只裁切头部自身 */
  isolation: isolate;
}

/* segmented 容器（直角） */
.user-hub-tabs-inner{
  display: inline-flex;
  gap: 0;

  background: rgba(255,255,255,.04);
  border: 1px solid var(--brand-border);
  border-bottom: 0;
  margin-bottom: -1px;

  overflow: hidden;
}

/* tab 按钮 */
.user-hub-tab{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.82);
  padding: 12px 18px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  position: relative;

  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.user-hub-tab + .user-hub-tab{
  border-left: 1px solid rgba(255,255,255,.10);
}

.user-hub-tab:hover{
  background: rgba(255,255,255,.06);
}

/* active：浅底 + 下划线强调 */
.user-hub-tab.is-active{
  background: rgba(255,255,255,.92);
  color: var(--active-text);
  z-index: 2;

  transform: translateY(-3px);
  box-shadow: var(--hub-shadow);
}

/* 下划线 */
.user-hub-tab.is-active::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--hub-accent);
}

/* 向下延伸连接内容区（直角连体） */
.user-hub-tab.is-active::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 16px;
  background: rgba(255,255,255,.92);
  z-index: -1;
}

/* step 圆点 */
.user-hub-tab .hub-step{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 900;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}

.user-hub-tab.is-active .hub-step{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.user-hub-tab .hub-label{ white-space: nowrap; }

/* badge */
.tab-badge{
  margin-left: 6px;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  line-height: 18px;

  background: #ef4444;
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* panel 切换（保持你原逻辑） */
.user-tab-panel{ display:none; }
.user-tab-panel.is-active{ display:block; }

/* 内容区：允许撑开（邮箱无限延展） */
.user-hub-body{
  background: #fff;
  padding: 18px 18px 0;
  margin-top: -1px;
  position: relative;
  z-index: 1;

  overflow: visible !important;
}

/* ---------- Mobile Tabs ---------- */
@media (max-width: 640px){
  .user-hub-tabs{ padding: 10px 10px 0; }

  .user-hub-tabs-inner{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .user-hub-tab{
    flex: 1 1 50%;
    justify-content:center;
    padding: 14px 12px;
    font-size: 14px;
  }

  .user-hub-tab + .user-hub-tab{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.10);
  }

  .user-hub-tab.is-active{ transform: translateY(-2px); }
  .user-hub-tab.is-active::before{ bottom:-12px; height:12px; }
}

/* =====================================================
   📬 Mailbox – Final Layout (Merged)
   - 同一容器同步延展
   - 取更高者等高（flex + stretch 天然实现）
   - 页面整体滚动
===================================================== */

/* mailbox 面板本身不裁切 */
#mailbox{
  overflow: visible !important;
  height: auto !important;
}

/* 核心容器：谁高以谁为准，左右自动等高 */
#mailbox .mailbox-body{
  display:flex;
  align-items: stretch;   /* ⭐关键：左右等高（取更高者） */
  gap: 0;

  overflow: visible !important;
  height: auto !important;
}

/* 左侧列表：不锁高，不独立滚动（跟随页面滚动） */
#mailbox .mailbox-list{
  width: 320px;
  max-width: 360px;
  background: #fafafa;
  border-right: 1px solid #eee;

  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;

  align-self: stretch;
}

/* 列表项 */
#mailbox .mail-item{
  position: relative;
  display: flex;
  align-items: center;

  padding: 16px 16px 16px 36px;
  min-height: 84px;

  overflow-x: hidden;
}

#mailbox .mail-item input[type="checkbox"]{
  position:absolute;
  left:14px;
  top:50%;
  transform: translateY(-50%);
}

#mailbox .mail-item:hover{
  background:#f3f6ff;
  transform: translateX(2px);
  box-shadow: inset 2px 0 0 #dbe4ff;
}
#mailbox .mail-item.active{ background:#e8efff; }

#mailbox .mail-item.unread::before{
  content:"";
  width:8px;
  height:8px;
  background:#3b82f6;
  border-radius:50%;
  position:absolute;
  left:8px;
  top:18px;
}

/* 文本 */
#mailbox .mail-title{
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#mailbox .mail-item.unread .mail-title{ font-weight:700; }

#mailbox .mail-sender{
  margin-top:4px;
  font-size:13px;
  color:#555;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#mailbox .mail-time{
  margin-top:4px;
  font-size:12px;
  color:#999;
  white-space:nowrap;
}

/* 右侧正文区：允许 iframe 撑开 */
#mailbox .mailbox-content{
  flex:1;
  min-width:0;
  background:#f7f8fa;

  height:auto;
  overflow: visible;

  align-self: stretch;
}

/* subject bar */
#mailbox .mail-subject-bar{
  padding: 8px 16px;
  background:#fafafa;
  border-bottom:1px solid #eee;

  font-size:13px;
  color:#888;
  line-height:1.6;

  display:none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  word-break: break-word;
}

/* iframe：高度由 JS 设置 */
#mailbox #mail-body{
  display:block;
  width:100%;
  border:none;
  background:#fff;

  height:auto;
  min-height:520px;
}

/* 分页 */
#mailbox .mailbox-pagination{
  margin-top:12px;
  padding:15px;
  border-top:1px solid #eee;

  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- Mobile Mailbox ---------- */
@media (max-width:768px){
  #mailbox .mailbox-body{
    flex-direction: column;
    align-items: stretch;
  }

  #mailbox .mailbox-list{
    width:100%;
    max-width:none;
    border-right:none;
    border-bottom:1px solid #eee;
  }

  #mailbox .mailbox-content{
    width:100%;
  }

  #mailbox #mail-body{ min-height:520px; }

  #mailbox .mail-item{
    min-height:72px;
    padding:12px 12px 12px 36px;
  }

  #mailbox .mail-title{
    white-space: normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
}

/* ✅ 进一步避免 iframe “内容区出现滚动条”的观感问题 */
#mailbox .mailbox-content { overflow: visible !important; background:#fff;          /* 让邮件更像原始正文 */}
#mailbox #mail-body { overflow: hidden !important; } /* iframe 元素本身不要滚 */
/* ✅ 手机端：减少 padding，避免内容看起来“被隐藏/挤压” */
@media (max-width:768px){
  .user-hub-body{
    padding: 12px 12px 0 !important;
  }