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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Mobile Responsiveness ===== */
@media (max-width: 640px) {
    .lito-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);
    }

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

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

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

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

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