/* 全局樣式 */
body {
    font-family: "Inter", "Noto Sans TC", /* 繁體中文優先字體 */ "PingFang TC",
        /* macOS 繁體字體 */ "Noto Sans KR",
        /* 韓文優先字體 */ "Hiragino Maru Gothic ProN",
        /* macOS 韓文字體 */ -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    margin: 0;
    /* 移除網頁預設的外邊距 */
    padding: 0;
    /* 移除網頁預設的內邊距 */
    background-color: #f0f0f0;
    /* 設置網頁背景顏色為淺灰色 */
    color: #000000;
    font-family: Arial, sans-serif;
    /* 設置網頁文字字體為 Arial 或無襯線字體 */
    height: 100vh;
    /* 設置 body 元素的最小高度為視窗高度的 100% */
    display: flex;
    /* 使用彈性盒子布局 */
    flex-direction: column;
    /* 設置主軸方向為垂直方向 */
}

/* 大頭圖像 */
.avatarList {
    display: flex;
    /* 使用彈性盒子布局 */
    flex-direction: column;
    /* 設置主軸方向為垂直方向 */
    justify-content: center;
    /* 在主軸上置中對齊內容 */
    align-items: center;
    /* 在交叉軸上置中對齊內容 */
    /* height: 100vh; */
    /* 設置容器高度為視窗高度的 100% */
    padding: 10px;
    /* 設置內邊距為 20 像素,在手機上提供一些間距 */
    box-sizing: border-box;
    /* 確保內邊距不會影響容器高度 */
}

/* 鍵盤和頭像容器樣式 */
.keypad,
.faces {
    width: 100%; /* 設置寬度為 100%,充滿手機螢幕 */
    max-width: 400px;
    /* 設置最大寬度為 400 像素,避免在較大螢幕上過寬 */
    /* background-color: #f0f0f0; */
    /* 設置背景顏色為淺灰色 */
    border-radius: 10px;
    /* 設置圓角半徑為 10 像素 */
    padding: 5px;
    /* 設置內邊距為 20 像素 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 設置陰影效果 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 每行最多 3 個元素 */
    row-gap: 0px; /* 設置行間距為 10px */
    column-gap: 0px; /* 設置列間距為 20px */
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.avatar-container .user-info-container {
    /* margin-top: -5px; 用戶名稱和頭像之間的間距 */
    text-align: center;
    max-width: 80px; /* 限制用戶名稱的最大寬度 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keypad {
    height: 100%;
    /* 設置鍵盤容器高度為 100%,填滿容器的高度 */
    display: flex;
    /* 使用彈性盒子布局 */
    flex-direction: column;
    /* 設置主軸方向為垂直方向 */
    /* justify-content: space-around; */
    justify-content: space-between; /* 修改为 space-between 以确保行间距均匀分布 */
    /* 在主軸上均勻分布按鍵行 */
    margin-top: 60px; /* 添加這行以將整個數字鍵盤下移，具體數值可根據需要調整 */
}

/* 按鍵行樣式 */
.row {
    display: flex;
    /* 使用彈性盒子布局 */
    justify-content: center;
    /* 在主軸上置中對齊按鍵 */
    flex-wrap: nowrap;
    /* 防止按鍵換行 */
    margin-bottom: 10px; /* 添加此行以设置行间距，具体数值可根据需要调整 */
}

/* 按鍵樣式 */
.key {
    width: calc(33.33% - 20px);
    /* 設置寬度為容器寬度的三分之一,減去外邊距 */
    height: 80px;
    /* 設置高度為 80 像素,增加按鍵大小 */
    border: none;
    /* 移除邊框 */
    /* border-radius: 50%; */
    border-radius: 10px; /* 設置圓角半徑為 50%,使按鍵呈現圓形 */
    font-size: 45px;
    /* 設置字體大小為 45 像素 */
    color: #ffffff;
    /* 設置文字顏色為白色 */
    background-color: #3f51b5;
    /* 設置背景顏色為藍色 */
    margin: 0 10px;
    /* 設置左右外邊距為 10 像素,增加按鍵間距 */
    cursor: pointer;
    /* 設置滑鼠指針樣式為手形 */
    outline: none;
    /* 移除外框 */

    /* 觸控優化 */
    touch-action: manipulation; /* 移除觸控延遲 */
    -webkit-tap-highlight-color: transparent; /* 移除iOS點擊高亮 */
    transition: transform 0.1s ease, background-color 0.1s ease; /* 加快過渡效果 */
    user-select: none; /* 防止文本被選中 */
}

.key:active {
    transform: scale(0.95);
    background-color: #2c3e9b; /* 按下時顏色變深 */
    transition: transform 0.05s ease, background-color 0.05s ease; /* 按下時更快的反應 */
}

/* 確認按鈕樣式 */
.confirm {
    background-color: #4caf50;
    /* 設置背景顏色為綠色 */
    font-size: 24px;
    /* 設置文字大小為 24 像素 */
}

/* 左側按鈕樣式 */
.left-button {
    /* 使用一個現代、中性的灰色，以區分功能 */
    background-color: #ff6c9f;
    font-size: 24px;
}

/* 頭像樣式 */
.avatar {
    width: 100px;
    /* 設置寬度為 100 像素 */
    height: 100px;
    /* 設置高度為 100 像素 */
    border-radius: 50%;
    /* 設置圓角半徑為 50%,使頭像呈現圓形 */
    margin: 5px;
    cursor: pointer;
    /* 設置滑鼠指針樣式為手形 */
    transition: transform 0.3s ease-in-out;
    /* 設置過渡效果 */
    width: 100px; /* 或者您想要的任何合適的寬度 */
    height: 100px; /* 設置相同的高度以創建正方形容器 */
    object-fit: cover; /* 確保圖像填滿容器並保持比例 */
    border-radius: 50%; /* 如果您想要圓形頭像 */
}

/* 頭像懸停樣式 */
.avatar:hover {
    transform: scale(1.1);
    /* 設置放大效果 */
}

/* 選中的頭像樣式 */
.selected-avatar {
    width: 120px;
    /* 設置寬度為 120 像素,增加選中頭像大小 */
    height: 120px;
    /* 設置高度為 120 像素,增加選中頭像大小 */
    border-radius: 50%;
    /* 設置圓角半徑為 50%,使頭像呈現圓形 */
    margin-bottom: 20px;
    /* 設置底部外邊距為 20 像素 */
}

/* 底部填充樣式 */
.bottom-padding {
    height: 0px;
    /* 設置高度為 0 像素 */
}

#tempButton {
    /* 設置暫時性按鈕為透明並隱藏 */
    opacity: 0;
    position: absolute;
    left: -9999px;
}

/* --------------------------------------------------- */

.updated {
    animation: highlight 1s ease-in-out;
}

@keyframes highlight {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.border-flash {
    transition: box-shadow 0.3s ease-in-out;
}

/* 用於「同設備」登入痕跡的特殊高亮樣式 */
.same-device-highlight {
    /* 主背景色：使用帶有80%透明度的柔和綠色，比之前版本色彩更豐富 */
    background: rgba(200, 230, 201, 0.2);
    /* 邊框色：使用接近不透明的清晰綠色邊框 */
    border: 2px solid rgba(129, 199, 132, 0.9);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.same-device-highlight:hover {
    /* 懸停時的邊框色：變為完全不透明的深綠色，提供明確的視覺反饋 */
    border-color: rgba(102, 187, 106, 1);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.highlighted-avatar {
    border: 2px solid rgba(255, 255, 255, 0.6); /* 半透明白色邊框 */
    border-radius: 20px; /* 大圓角，柔和流線型 */
    backdrop-filter: blur(10px); /* 添加玻璃毛玻璃效果 */
    background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 柔和陰影 */
    transition: all 0.3s ease; /* 平滑過渡 */
}

.highlighted-avatar:hover {
    border-color: rgba(255, 255, 255, 0.8); /* 懸停時更明顯的白色邊框 */
    background: rgba(255, 255, 255, 0.3); /* 懸停時背景更亮 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 加強陰影 */
    transform: translateY(-3px); /* 輕微浮動效果 */
}

/* 新增用戶圖標樣式 */
.add-user-avatar-container {
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.add-user-icon-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 5px; /* [修正] 將 margin 設為與 .avatar 一致，解決垂直對齊問題 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.add-user-avatar-container:hover .add-user-icon-wrapper {
    transform: scale(1.1) rotate(90deg);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.add-user-icon-svg {
    width: 40px;
    height: 40px;
    stroke: rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
}

/* ==========================================================================
   登入頁大頭像樣式 (Login Page Avatars) - 已整合提案 C
   ========================================================================== */

/* --- 基礎佈局與外觀 --- */

.avatar-container[data-page-type="login"] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-container[data-page-type="login"] .avatar {
    margin-bottom: 0px;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease,
        box-shadow 0.3s ease;
    border-radius: 50%;
    /* [灰階優先] 預設狀態設為灰階、半透明 */
    filter: grayscale(100%);
    opacity: 0.45;
    /* 預設邊框，會被狀態樣式覆蓋 */
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-info-container {
    margin-top: 4px;
    text-align: center;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
}

.user-display-name {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.user-default-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.3px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* --- 狀態顯示區 --- */

.user-online-status {
    margin-top: 10px;
    transform: translateY(-8px) translateX(-3px);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.3s ease;
    height: 18px; /* 給定固定高度以避免 UI 跳動 */
}

.user-online-status .status-dot {
    width: 6px;
    height: 6px;
    background: #90ee90;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(144, 238, 144, 0.6);
    animation: pulse 2s infinite;
}

/* ==========================================================================
   提案 C：第一性原理在席狀態視覺效果
   ========================================================================== */

/* --- 動畫效果 --- */

/* 用於 Online 狀態的動態光暈 */
@keyframes glowing-border {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(72, 244, 78, 0.807);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(76, 175, 80, 0.7);
    }
}

/* 用於狀態指示燈的脈動 */
@keyframes pulse {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}

/* --- 三態視覺邏輯 --- */

/* 1. 오프라인 (Offline) 狀態 */
.avatar-container[data-page-type="login"].status-offline .avatar {
    filter: grayscale(100%);
    opacity: 0.45;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.status-offline .user-online-status {
    opacity: 0;
}

/* 2. 백그라운드 (Background) 狀態 */
.avatar-container[data-page-type="login"].status-background .avatar {
    filter: none;
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
.status-background .user-online-status {
    opacity: 0;
}

/* 3. 온라인 (Online) 狀態 */
.avatar-container[data-page-type="login"].status-online .avatar {
    filter: none;
    opacity: 1;
    border-color: #5ceb63 !important;
    border-width: 4px !important;
    animation: glowing-border 2s infinite;
}
.status-online .user-online-status {
    opacity: 1;
    color: #dcf8c6;
}