/* Message Styles */
.message {
    @apply p-4 rounded-2xl mb-4 break-words relative max-w-[85%];
    animation: fadeIn 0.3s ease-in;
}

.user-message {
    @apply ml-auto text-white;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.ai-message {
    @apply mr-auto text-white;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.thinking {
    @apply bg-gray-700 text-white opacity-75;
    animation: pulse 1.5s infinite;
}

/* Hover effects */
.user-message:hover {
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.ai-message:hover {
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.message {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pulse-recording {
    0% {
        background-color: rgb(239 68 68 / 0.3);
    }

    50% {
        background-color: rgb(239 68 68 / 0.9);
    }

    100% {
        background-color: rgb(239 68 68 / 0.3);
    }
}

@keyframes glow {
    0% {
        filter: drop-shadow(0 0 2px rgb(239 68 68 / 0.5));
    }

    50% {
        filter: drop-shadow(0 0 6px rgb(239 68 68 / 1));
    }

    100% {
        filter: drop-shadow(0 0 2px rgb(239 68 68 / 0.5));
    }
}

/* Animated gradient text */
.animated-gradient {
    @apply px-2 py-1 rounded-lg;
    background: linear-gradient(45deg,
            theme('colors.primary.500'),
            theme('colors.secondary.500'),
            theme('colors.accent.500'),
            theme('colors.primary.500'));
    background-size: 300% 300%;
    animation: gradient 8s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Thinking animation */
.thinking {
    @apply bg-gradient-to-r from-base-200 to-base-300 text-base-content opacity-75;
    animation: pulse 1.5s infinite, gradient-move 2s infinite linear;
}

/* Chat scrollbar */
#chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

#chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Victory animation */
.victory-animation {
    animation: celebrate 1s ease-in-out infinite;
}

/* Recording states */
.recording {
    background-color: rgb(239 68 68 / 0.5) !important;
    animation: pulse-recording 1.5s infinite;
}

.recording svg {
    animation: glow 1.5s infinite;
}

.recording-indicator {
    @apply absolute -top-2 -right-2 w-3 h-3 bg-red-500 rounded-full;
    animation: blink 1s infinite;
}

/* Level transition animation */
.stat-value {
    transition: all 0.3s ease;
}

.stat-value.changing {
    animation: pulse 0.5s ease-in-out;
}

/* Badge styles */
.badge-error {
    @apply bg-error/20 text-error-content border-error/30;
    animation: fadeIn 0.3s ease-in;
}

.badge-error svg {
    @apply opacity-70;
}

/* Boss level styles */
.boss-mode #chat-interface {
    @apply border-red-500/30;
    transition: all 0.3s ease;
}

.boss-mode #level-description {
    @apply bg-red-900/20 border-red-500/30;
    animation: pulse-boss 2s infinite;
}

.boss-mode .stat-value {
    @apply text-red-500;
}

@keyframes pulse-boss {
    0% {
        background-color: rgba(127, 29, 29, 0.1);
    }

    50% {
        background-color: rgba(127, 29, 29, 0.2);
    }

    100% {
        background-color: rgba(127, 29, 29, 0.1);
    }
}

/* Boss level message styles */
.boss-mode .ai-message {
    @apply bg-gradient-to-br from-red-500/20 to-orange-500/20 border-red-500/30;
}

.boss-mode .thinking {
    @apply bg-gradient-to-r from-red-900/30 to-orange-900/30;
}

/* Boss level victory animation */
@keyframes legendary-victory {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(180deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}

.legendary-victory {
    animation: legendary-victory 2s ease-in-out;
}

/* Input error state */
.input-error {
    @apply border-error focus:border-error;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

#forbidden-word-error {
    animation: fadeIn 0.3s ease-in;
}

/* Reward codes */
.reward-code {
    @apply bg-base-300 px-2 py-1 rounded font-mono text-primary;
    transition: all 0.2s ease;
}

.reward-code:hover {
    @apply bg-primary text-base-300;
    transform: scale(1.05);
}

.reward-code:active {
    transform: scale(0.95);
}

/* Suggested words */
.suggested-words {
    animation: fadeIn 0.5s ease-out;
}

.suggested-word {
    transition: all 0.2s ease;
}

.suggested-word:hover {
    transform: translateY(-2px);
    @apply shadow-lg;
}

.suggested-word.btn-active {
    transform: translateY(1px);
    @apply shadow-sm;
}

/* Highlight word */
.highlight-word {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.2));
    color: #fca5a5;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    animation: highlightFade 0.5s ease-in-out;
}

@keyframes highlightFade {
    0% {
        background-color: rgba(255, 0, 0, 0.5);
        transform: scale(1.1);
    }

    100% {
        background-color: rgba(255, 0, 0, 0.3);
        transform: scale(1);
    }
}

/* Level info message styles */
.level-info-message {
    animation: fadeInScale 0.5s ease-out;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: 1rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin: 1rem 0;
}

.level-info-message .text-6xl {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    animation: pulseNumber 2s infinite;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

@keyframes pulseNumber {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Voice Recognition Timer */
.progress-ring-circle {
    transition: stroke-dashoffset 0.1s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 364;
}

#voice-overlay {
    z-index: 1000;
}

#voice-overlay.active {
    display: flex;
}