/* 背景層：象牙白霧感 + 模糊 + 漸層光暈 */
.profile-info {
    display: none;
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(250, 248, 245, 0.65), rgba(240, 235, 230, 0.6));
    backdrop-filter: blur(10px) brightness(0.95);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.4s ease;
}

/* 顯示時 */
.profile-info.show {
    display: flex;
    animation: fadeIn 0.4s ease forwards;
}

/* 隱藏時 */
.profile-info.fade-out {
    animation: fadeOut 0.4s ease forwards;
}

/* 淡入動畫 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 淡出動畫 */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

.profile-info-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    max-height: 90dvh;
    background-color: #FCF8F3;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #5a4a3a;
    overflow: hidden;
    padding: 24px 32px;
}


/* --- 卡片頂部標題 (使用 profile-top) --- */
.profile-top {
    width: 100%;
    padding-bottom: 24px;
    font-size: 22px;
    text-align: center;
    color: #4b3f36;
    font-family: 'Noto Serif TC', serif;
    border-bottom: 1px solid #EAE5DD;
    margin-bottom: 24px;
}

/* --- 頭像區塊 (使用 profile-header) --- */
.profile-header {
    align-items: center;
    gap: 16px;
}

/* --- 頭像圖片 (使用 profile-picture) --- */
.profile-picture {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* ✅ 改小一點，讓 name 和 email 更靠近 */
    font-size: 15px;
    line-height: 1.5;
    color: #5a4a3a;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex: 1;
    min-width: 0;
}

.profile-text .profile-name {
    font-size: 22px;
    font-weight: 600;
    color: #4b3f36;
    text-decoration: none;

}

.profile-email .profile-vip {
    font-size: 14px;
    color: #9c8c7e;
    text-decoration: none;
}


/* --- 按鈕區塊 (使用 profile-button) --- */
.profile-button {
    margin-top: auto;
    /* 將按鈕推到底部 */
    padding-top: 32px;
    /* 增加與上方內容的間距 */
    display: flex;
    gap: 12px;
}

.close-link,
.logout-link {
    flex-grow: 1;
    padding: 14px;
    border-radius: 16px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    background-color: #E9E2D6;
    color: #6e5c4f;
}

.close-link:hover,
.logout-link:hover {
    background-color: #C1A88B;
    /* 更醒目的登出顏色 */
    color: #FFFFFF;
}