.chart-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    max-height: 400px;
}
@media (max-width: 768px) {
    .chart-container {
        height: 250px;
    }
}
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Custom scrollbar for inner content */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f4; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

/* Floating Button Animation */
.float-bounce {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* Chat Bubble Styles */
.chat-bubble-user {
    background-color: #e0f2fe;
    color: #0369a1;
    border-radius: 1rem 1rem 0 1rem;
    align-self: flex-end;
}
.chat-bubble-ai {
    background-color: #f3f4f6;
    color: #374151;
    border-radius: 1rem 1rem 1rem 0;
    align-self: flex-start;
}

/* Mobile Modal Height adjustment using dvh */
.modal-height-fix {
    height: 100dvh;
    max-height: 100dvh;
}
@media (min-width: 768px) {
    .modal-height-fix {
        height: auto;
        max-height: 90vh;
    }
}