/**
 * Chat Interface Styles
 * Trustia - Jonah AI Assistant Prototype
 *
 * Design: Minimal, professional, accessible
 * Following Trustia design system: Poppins font, blue primary, gray neutrals
 */

/* ============================================
   FLOATING ANIMATION (Jonah Icon)
   ============================================ */

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

.floating-animation {
    animation: float 3s ease-in-out infinite;
}

/* Jonah Icon Hover Effect */
@keyframes sayHello {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    15% {
        transform: translateY(-8px) rotate(-8deg);
    }
    30% {
        transform: translateY(-6px) rotate(8deg);
    }
    45% {
        transform: translateY(-8px) rotate(-6deg);
    }
    60% {
        transform: translateY(-4px) rotate(4deg);
    }
    75% {
        transform: translateY(-2px) rotate(0deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes autoGreet {
    0%, 94% {
        transform: translateY(0) rotate(0deg);
    }
    95% {
        transform: translateY(-8px) rotate(-8deg);
    }
    96% {
        transform: translateY(-6px) rotate(8deg);
    }
    97% {
        transform: translateY(-8px) rotate(-6deg);
    }
    98% {
        transform: translateY(-4px) rotate(4deg);
    }
    99% {
        transform: translateY(-2px) rotate(0deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.jonah-icon-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    animation: autoGreet 45s ease-in-out infinite;
}

.jonah-icon-card:hover {
    animation: sayHello 0.8s ease-in-out;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

/* ============================================
   SHINE ANIMATION (Jonah Name)
   ============================================ */

@keyframes shine {
    0% {
        background-position: 0% center;
    }
    30% {
        background-position: 100% center;
    }
    100% {
        background-position: 100% center;
    }
}

.shine-animation {
    background: linear-gradient(
        110deg,
        #3b82f6 0%,
        #3b82f6 20%,
        #3b82f6 48%,
        #4a90f6 50%,
        #3b82f6 52%,
        #3b82f6 80%,
        #3b82f6 100%
    );
    background-size: 300% 100%;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 10s linear infinite;
}

/* ============================================
   TEXTAREA AUTO-RESIZE & BEHAVIOR
   ============================================ */

#initial-message-input,
#conversation-message-input {
    @apply transition-all duration-200 ease-in-out;
}

#initial-message-input:focus,
#conversation-message-input:focus {
    @apply ring-4 ring-charter-accent-medium/10;
}

#initial-message-input:disabled,
#conversation-message-input:disabled {
    @apply opacity-60 cursor-not-allowed bg-charter-bg-subtle;
}

/* ============================================
   SEND BUTTON STATES
   ============================================ */

#initial-send-btn:not(:disabled),
#conversation-send-btn:not(:disabled) {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    @apply cursor-pointer;
}

#initial-send-btn:not(:disabled):hover,
#conversation-send-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    @apply scale-105;
}

#initial-send-btn:not(:disabled):active,
#conversation-send-btn:not(:disabled):active {
    @apply scale-95;
}

/* ============================================
   TYPING INDICATOR
   ============================================ */

.typing-indicator {
    @apply inline-flex gap-1 py-3 px-4;
}

.typing-indicator span {
    @apply w-2 h-2 bg-charter-text-light rounded-full;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */

#messages-container {
    @apply scroll-smooth;
}

/* Custom scrollbar (webkit browsers) */
#messages-container::-webkit-scrollbar {
    @apply w-1.5;
}

#messages-container::-webkit-scrollbar-track {
    @apply bg-charter-bg-muted rounded-lg;
}

#messages-container::-webkit-scrollbar-thumb {
    @apply bg-charter-text-lighter rounded-lg;
}

#messages-container::-webkit-scrollbar-thumb:hover {
    @apply bg-charter-text-light;
}

/* ============================================
   HEADER ANIMATIONS
   ============================================ */

header {
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   INITIAL STATE ANIMATIONS
   ============================================ */

#initial-state {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

#greeting-time {
    @apply inline-block;
}

/* ============================================
   CONVERSATION STATE
   ============================================ */

#conversation-state.active {
    @apply flex;
    animation: fadeIn 0.4s ease-out;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile: Reduce spacing, smaller text */
@media (max-width: 640px) {
    #initial-state {
        @apply p-4;
    }

    .message-bubble {
        @apply text-sm;
    }

    #messages-container {
        @apply p-4;
    }
}

/* Desktop: Larger spacing */
@media (min-width: 1024px) {
    #messages-container {
        @apply py-8 px-4;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
textarea:focus-visible {
    @apply outline-2 outline-charter-accent-medium outline-offset-2;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .floating-animation,
    .shine-animation {
        animation: none;
    }
}

/* ============================================
   MESSAGE TIMESTAMP FADE-IN
   ============================================ */

.message-timestamp {
    animation: fadeIn 0.5s ease-out 0.2s both;
}