.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.animate-bounce-dot {
    background-color: #80CBC4;
    /* brand DEFAULT */
    animation: bounce 0.8s infinite ease-in-out;
}

.delay-100 {
    animation-delay: 0.15s;
}

.delay-200 {
    animation-delay: 0.3s;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }

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

.animate-fade-in-up {
    animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fade-in 0.2s ease-out forwards;
}


html.dark {
    background-color: #121212 !important;
}

body.dark-mode {
    background-color: #121212 !important;
}


body.dark-mode .option-card {
    background-color: #2D2D2D !important;
    border-color: #3C4043 !important;
}


body.dark-mode .option-text {
    color: #F8FAFC !important;
}

body.dark-mode .option-badge {
    background-color: rgba(128, 203, 196, 0.2) !important;

    color: #80CBC4 !important;

}

body.dark-mode .copy-btn {
    background-color: #3C4043 !important;
    color: #80CBC4 !important;
}


body.dark-mode #view-emotion,
body.dark-mode #chat-history {
    background-color: #121212 !important;
}


body.dark-mode .absolute.bottom-0.left-0.right-0 {
    background-color: rgba(30, 30, 30, 0.8) !important;

    border-color: #333333 !important;
    backdrop-filter: blur(12px);
}


body.dark-mode #chat-history .bg-white,
body.dark-mode .option-card,
body.dark-mode div[class*="dark:bg-[#2D2D2D]"] {
    background-color: #2D2D2D !important;
    color: #FFFFFF !important;

    border-color: #3C4043 !important;
}


body.dark-mode .bg-gray-100 {
    background-color: #2D2D2D !important;
}

body.dark-mode input#emotion-input {
    color: #FFFFFF !important;
}


body.dark-mode #help-tooltip {
    background-color: #2D2D2D !important;
    color: #E2E8F0 !important;
    border-color: #3C4043 !important;
}


body.dark-mode .bg-white\/80,
body.dark-mode .bg-gray-100 {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
}

body.dark-mode input,
body.dark-mode textarea {
    background-color: transparent !important;
    color: #FFFFFF !important;
}


body.dark-mode .bg-yellow-50 {
    background-color: rgba(253, 226, 147, 0.1) !important;
    border-color: #443700 !important;
    color: #FDE293 !important;
}


body.large-font {
    font-size: 1.25rem;
}

body.large-font #chat-history [class*="text-[15px]"],
body.large-font #chat-history .text-sm,
body.large-font .option-content {
    font-size: 1.25rem !important;
    line-height: 1.8;
}

body.large-font input,
body.large-font textarea,
body.large-font button {
    font-size: 1.15rem !important;
}

body.large-font [class*="text-[13px]"],
body.large-font .text-gray-600 {
    font-size: 1.1rem !important;
    line-height: 1.7;
}