html, body { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background-color: #FFF5F1; 
    color: #4A5568; 
    -webkit-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================
   ★ 全域客製化高質感捲軸
   ========================================== */
::-webkit-scrollbar { 
    width: 5px; 
    height: 5px;
}
::-webkit-scrollbar-track { 
    background: transparent; 
    margin: 8px 0; /* 讓捲軸上下留一點呼吸空間 */
}
::-webkit-scrollbar-thumb { 
    background-color: rgba(255, 126, 95, 0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { 
    background-color: rgba(255, 126, 95, 0.6);
}

/* ==========================================
   ★ 對話框與主畫面的平滑滾動
   ========================================== */
#chat-history, #main-content-scroll { 
    scroll-behavior: smooth;
}

/* 原有的隱藏捲軸 */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.sidebar-item-active { 
    background-color: #FFE4D6; 
    color: #FF7E5F; 
    font-weight: 700;
    border-radius: 16px; 
}
.nav-text-active { color: #FF7E5F; font-weight: 900; letter-spacing: 1px; }
.nav-text-normal { color: #A0AEC0; font-weight: 500; letter-spacing: 0.5px; }

.card-friendly { 
    background: #FFFFFF; 
    border-radius: 30px; 
    box-shadow: 0 10px 30px -10px rgba(255, 126, 95, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.8); 
}

.page-content { display: none; animation: fadeIn 0.4s ease-out; }
.page-content.active { display: block; }

@keyframes fadeIn { 
    from { opacity: 0; transform: scale(0.98); } 
    to { opacity: 1; transform: scale(1); } 
}

.chat-bubble-enter { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes popIn { 
    from { opacity: 0; transform: scale(0.5) translateY(20px); } 
    to { opacity: 1; transform: scale(1) translateY(0); } 
}

/* ==========================================
   ★ 智能掌櫃：物理動態修正區 (增加靈魂感)
   ========================================== */

/* 1. 待機懸浮 (Idle)：只上下移動，絕對不縮放 */
@keyframes natural-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); } /* 輕輕浮動 */
}

/* 2. 思考微動 (Thinking)：像是在動腦 */
@keyframes shake-light {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

/* 3. 歡呼跳躍 (Cheer) */
@keyframes jump-high {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-20px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

/* 4. 預備聆聽 (Preparing)：等待 AI 語音時的微動作 */
@keyframes prepare-nod {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.02) translateY(-3px); }
}

.glowing-cat {
    filter: drop-shadow(0 5px 15px rgba(255, 126, 95, 0.2)); 
    transform-origin: bottom center;
    cursor: pointer;
    animation: natural-float 4s ease-in-out infinite;
    transition: filter 0.3s ease, transform 0.3s ease; /* 基礎緩衝 */
}

/* 狀態：思考中 (停止懸浮，改為微動) */
.glowing-cat.thinking {
    animation: shake-light 2s ease-in-out infinite !important; 
    filter: drop-shadow(0 5px 20px rgba(255, 126, 95, 0.4));
}

/* 狀態：預備中 (送出訊息後，等待開口的專注狀態) */
.glowing-cat.preparing {
    animation: prepare-nod 1s ease-in-out infinite !important; 
    filter: drop-shadow(0 5px 25px rgba(255, 179, 71, 0.6)); /* 帶點金色的微光 */
}

/* 狀態：說話中 (停止所有 CSS 動畫，專注於 JS 換臉) */
.glowing-cat.talking {
    animation: none !important; 
    transform: translateY(0) !important; /* 確保站在原位 */
    filter: drop-shadow(0 5px 25px rgba(255, 126, 95, 0.6)); 
}

/* 動作類別 */
.anim-cheer { animation: jump-high 0.5s ease-out !important; }

/* 滑鼠互動 */
.glowing-cat:hover {
    filter: drop-shadow(0 5px 20px rgba(255, 126, 95, 0.5)); 
    transform: scale(1.05); 
}

/* 鈴鐺 */
.glowing-bell { 
    filter: drop-shadow(0 5px 10px rgba(255, 126, 95, 0.3)); 
    transition: transform 0.3s ease; 
}
.glowing-bell:hover { 
    transform: scale(1.1) rotate(10deg); 
}

/* --- 其他設定 --- */
.case-content-group { display: none; }
.case-content-group.active { display: grid !important; animation: fade-in 0.5s ease-out; }
.star-rating i { color: #ddd; cursor: pointer; transition: color 0.2s; font-size: 1.5rem; margin-right: 4px; }
.star-rating i.active { color: #FFB347; }
.icon-gradient { background: linear-gradient(135deg, #FF7E5F 0%, #FFB347 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.page-dot { 
    width: 30px; 
    height: 30px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 14px; 
    transition: all 0.3s; 
    background: white; 
    color: #aaa;
    border: 1px solid #eee; 
}
.page-dot.active { 
    background: #FF7E5F; 
    color: white; 
    border-color: #FF7E5F; 
    box-shadow: 0 4px 6px rgba(255,126,95,0.2);
}

.nav-item-active { color: #FF7E5F; }
.nav-item-active i { 
    background: linear-gradient(135deg, #FF7E5F 0%, #FFB347 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    transform: translateY(-4px) scale(1.15);
    filter: drop-shadow(0 4px 6px rgba(255, 126, 95, 0.3)); 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

/* ==========================================
   ★ 按鈕質感升級 (支援彈窗內的身分與目標選擇按鈕)
   ========================================== */
.role-pill-btn { 
    padding: 14px 12px; 
    border-radius: 16px; 
    font-weight: bold; 
    color: #64748b; /* 讓文字顏色更清晰一點 */
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 加入彈性動畫曲線 */
    border: 2px solid rgba(255, 126, 95, 0.1); /* 微光漸層感邊框 */
    background: rgba(255, 255, 255, 0.7); /* 搭配毛玻璃使用半透明背景 */
    backdrop-filter: blur(4px); /* 毛玻璃效果 */
    white-space: nowrap;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    font-size: 0.95rem; 
}

.role-pill-btn:hover {
    background: #FFF5F1; /* 懸浮時帶入品牌淺色 */
    border-color: #FF7E5F;
    transform: translateY(-3px); /* 懸浮稍微上移 */
    box-shadow: 0 10px 20px -5px rgba(255, 126, 95, 0.2); /* 發光陰影 */
    color: #4A5568; /* 懸浮時文字加深 */
}

.role-pill-btn.active { 
    background: linear-gradient(135deg, #FF7E5F 0%, #FFB347 100%); /* 選中狀態改為品牌漸層 */
    color: white; 
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4); 
}

.role-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background-color: #E2E8F0;
    transition: all 0.3s; 
}
.role-dot.active { background-color: #FF7E5F; width: 20px; border-radius: 10px; }

input, textarea { 
    -webkit-user-select: text; 
    user-select: text; 
}

/* ==========================================
   ★ 身分引導彈窗專屬動畫
   ========================================== */
#welcome-modal { 
    transition: opacity 0.4s ease, visibility 0.4s; 
}
#welcome-modal.opacity-0 { 
    opacity: 0; 
    visibility: hidden; 
}

/* 確保第二步出現時有平滑向上的動畫 */
.animate-slide-up {
    animation: slideUp 0.5s ease-out forwards; 
}

@keyframes slideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   ★ 全域優化 Bobo 點擊穿透與層級 (解決手機版空氣牆遮擋問題)
   ========================================== */
/* 1. 讓外圍空氣牆徹底失效，只保留貓咪圖片本體可以點擊 */
.glowing-cat {
    pointer-events: none !important; 
}
#soul-image {
    pointer-events: auto !important; 
}

/* 2. 賦予對話視窗「絕對最高層級」，且不覆蓋原有的 position */
#soul-bubble-container {
    z-index: 9999 !important; 
}

/* 3. 確保輸入框與按鈕在最高層級中依然保持活躍 */
#chat-input, 
#send-btn {
    z-index: 10000 !important;
    pointer-events: auto !important;
}

/* ==========================================
   ★ 針對電腦版 (768px 以上) Bobo 尺寸與位置微調
   ========================================== */
@media (min-width: 768px) {
    /* 將 Bobo 縮小並往右下推，拉開與對話框的實體距離 */
    #cat-container {
        transform: scale(0.8) translate(15px, 15px); 
        transform-origin: bottom right; 
        z-index: 40 !important; /* 壓低 Bobo 的層級 */
    }
}