/* =============================================
   personal.css — 个人中心弹窗模块样式
   依赖：common.css（CSS 变量）
   ============================================= */

/* ---------- 遮罩层 ---------- */
.personal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.personal-overlay.active {
  display: block;
  opacity: 1;
}

/* ---------- 弹窗下拉面板 ---------- */
.personal-dropdown {
  position: fixed;
  z-index: 999;
  width: 215px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.10),
    0  4px  6px -4px rgba(0, 0, 0, 0.10);
  overflow: hidden;

  /* 初始隐藏（动画起点） */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity  var(--transition-base),
    transform var(--transition-base);
}

.personal-dropdown.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- 菜单项 ---------- */
.personal-menu-item {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 15px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}

.personal-menu-item:last-child {
  border-bottom: none;
}

.personal-menu-item:hover {
  background-color: #f7f7f7;
}

/* 退出登录 */
.personal-menu-item--logout {
  height: 45px;
  color: var(--color-primary);
  font-weight: 500;
  border-bottom: none;
}

.personal-menu-item--logout:hover {
  background-color: #fff5f5;
  color: var(--color-primary-hover);
}

/* ---------- 用户按钮 open 状态箭头（如有） ---------- */
.header-user.open .chevron-icon {
  transform: rotate(180deg);
}

/* =============================================
   响应式
   ============================================= */

/* 平板（≤1024px）：右边距缩窄 */
@media (max-width: 1024px) {
  .personal-dropdown {
    width: 200px;
  }
}

/* 手机（≤640px）：全宽 + 固定底部 */
@media (max-width: 640px) {
  .personal-dropdown {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    top: auto !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transform: translateY(100%);
    max-height: 80vh;
    overflow-y: auto;
  }

  .personal-dropdown.active {
    transform: translateY(0);
  }
}