/**
 * Lito Chatbot - Animations and styles
 * Owl reading recommendation assistant widget
 */

/* ===== FAB Entrance ===== */
@keyframes chatbot-fab-entrance {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.chatbot-fab-enter {
    animation: chatbot-fab-entrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ===== Owl Idle Animations ===== */
@keyframes chatbot-idle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.chatbot-owl-idle {
    animation: chatbot-idle-bounce 3s ease-in-out infinite;
}

/* ===== Owl Eye Blink ===== */
@keyframes chatbot-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.1); }
}

.chatbot-owl-eyes {
    transform-origin: center;
    animation: chatbot-blink 4s ease-in-out infinite;
}

/* ===== Owl Thinking (gentle sway) ===== */
@keyframes chatbot-thinking-sway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

.chatbot-owl-thinking {
    animation: chatbot-thinking-sway 2s ease-in-out infinite;
    transform-origin: center bottom;
}

/* ===== Owl Talking (subtle nod) ===== */
@keyframes chatbot-talking-nod {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-2px); }
    60% { transform: translateY(1px); }
}

.chatbot-owl-talking {
    animation: chatbot-talking-nod 0.8s ease-in-out infinite;
}

/* ===== Typing Indicator Dots ===== */
@keyframes chatbot-typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

.chatbot-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #d97706;
    display: inline-block;
    animation: chatbot-typing-bounce 1.2s ease-in-out infinite;
}

.chatbot-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.chatbot-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

/* ===== Message Appear ===== */
@keyframes chatbot-message-in {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.chatbot-message-enter {
    animation: chatbot-message-in 0.25s ease-out forwards;
}

/* ===== Option Select Feedback ===== */
.chatbot-option-select {
    transition: all 0.15s ease;
}

.chatbot-option-select:active {
    transform: scale(0.95);
}

/* ===== Chat Window Scrollbar ===== */
.chatbot-messages-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.chatbot-messages-scroll::-webkit-scrollbar {
    width: 4px;
}

.chatbot-messages-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.chatbot-messages-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.chatbot-messages-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ===== Tooltip Nudge ===== */
@keyframes chatbot-tooltip-entrance {
    0% { transform: translateY(8px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.chatbot-tooltip-enter {
    animation: chatbot-tooltip-entrance 0.3s ease-out both;
}

/* ===== Notification Badge Pulse ===== */
@keyframes chatbot-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.chatbot-badge-pulse {
    animation: chatbot-badge-pulse 2s ease-in-out infinite;
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 640px) {
    .chatbot-chat-window {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .chatbot-options-grid {
        flex-direction: column;
    }

    .chatbot-options-grid button {
        width: 100%;
        min-height: 44px;
    }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .chatbot-owl-idle,
    .chatbot-owl-eyes,
    .chatbot-owl-thinking,
    .chatbot-owl-talking,
    .chatbot-typing-dot,
    .chatbot-message-enter,
    .chatbot-fab-enter,
    .chatbot-badge-pulse,
    .chatbot-tooltip-enter {
        animation: none !important;
    }

    .chatbot-fab-enter {
        opacity: 1 !important;
    }

    .chatbot-option-select {
        transition: none !important;
    }
}