.home-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 20px;
    padding-bottom: 120px; /* Tăng padding bottom để tránh bị thanh mood che */
}

.welcome-card {
    background: white;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    max-width: 700px;
    width: 100%;
    border: 1px solid #e2e8f0;
}

.greeting-text h1 {
    font-size: 3rem;
    color: #16a34a;
    margin-bottom: 20px;
}

.quote-text {
    font-size: 1.5rem;
    color: #475569;
    font-style: italic;
    line-height: 1.6;
    font-weight: 500;
    position: relative;
    padding: 0 30px;
}

.quote-text::before {
    content: '"';
    font-size: 3rem;
    color: #cbd5e1;
    position: absolute;
    left: 0;
    top: -10px;
}

/* --- BOTTOM MOOD BAR STYLES --- */
.bottom-mood-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bottom-mood-bar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #fff;
    width: 100%;
}
.feedback-box {
    background: white;
    padding: 20px 25px; /* Tăng padding một chút */
    border-radius: 25px; /* Bo tròn nhiều hơn */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Bóng đổ sâu hơn */
    text-align: center;
    /* SỬA LẠI TÊN ANIMATION VÀ KIỂU CHẠY (cubic-bezier tạo độ nảy) */
    animation: elasticUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid #e2e8f0;
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

/* Animation mới: Nảy đàn hồi */
@keyframes elasticUp {
    0% { opacity: 0; transform: translateY(100px) scale(0.8); }
    60% { opacity: 1; transform: translateY(-20px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.feedback-text {
    color: #334155;
    margin: 15px 0; /* Tăng khoảng cách */
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Thêm style cho Emoji lớn trong hộp thoại */
.feedback-emoji-large {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
    animation: fadeScaleIn 0.5s 0.3s backwards; /* Hiện sau hộp thoại 1 chút */
}

@keyframes fadeScaleIn {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}
.btn-accept { background: #10b981; color: white; }
.btn-accept:hover { background: #059669; }
.btn-decline { background: #f1f5f9; color: #64748b; }
.btn-decline:hover { background: #e2e8f0; }

/* --- MOOD BUTTONS --- */
.mood-question {
    font-weight: 700;
    color: #334155;
    font-size: 1.1rem;
    white-space: nowrap;
}

.mini-emotion-buttons { display: flex; gap: 10px; }

.mini-btn {
    width: 45px; height: 45px;
    border-radius: 50%; border: none;
    font-size: 1.2rem; cursor: pointer;
    transition: 0.2s; background: #f1f5f9; color: #64748b;
}

.mini-btn:hover { transform: scale(1.1); }
.mini-btn.happy:hover { background: #dcfce7; color: #16a34a; }
.mini-btn.neutral:hover { background: #e0f2fe; color: #0284c7; }
.mini-btn.anxious:hover { background: #ffedd5; color: #ea580c; } /* Mệt mỏi dùng style của Anxious cũ */
.mini-btn.sad:hover { background: #fee2e2; color: #dc2626; }

/* --- FLOATING MUSIC FAB --- */
.music-control-wrapper {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.music-fab {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    cursor: pointer;
    transition: transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.music-fab:hover { transform: rotate(15deg) scale(1.05); }

.music-menu {
    background: white;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    display: none; /* Mặc định ẩn */
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
    animation: fadeInScale 0.2s ease-out;
}

.music-menu.active { display: flex; }

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); transform-origin: bottom right; }
    to { opacity: 1; transform: scale(1); }
}

.music-menu button {
    background: transparent;
    color: #475569;
    text-align: left;
    padding: 10px;
    border-radius: 8px;
    box-shadow: none;
    font-weight: 600;
    font-size: 0.95rem;
}

@keyframes jellyPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); } /* Phóng to nhanh */
    50% { transform: scale(0.9); }  /* Thu nhỏ lại chút */
    70% { transform: scale(1.05); } /* Nảy lên lại nhẹ */
    100% { transform: scale(1); }   /* Về bình thường */
}

.mini-btn.animate-jelly {
    animation: jellyPop 0.6s ease forwards; /* Chạy animation khi có class này */
}

.music-menu button:hover { background: #f8fafc; color: #6366f1; transform: none; }
.music-menu hr { border: 0; border-top: 1px solid #e2e8f0; margin: 5px 0; }
.music-menu .stop-btn { color: #ef4444; }
.music-menu .stop-btn:hover { background: #fef2f2; color: #dc2626; }