/* Global Styles */
body {
    background-color: #050507;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 25%), 
        radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 25%);
}

/* Glassmorphism Utilities */
.glass-container {
    background: rgba(15, 17, 21, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 1.5rem; /* 24px */
}

.glass-header {
    background: rgba(15, 17, 21, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-footer {
    background: linear-gradient(to top, rgba(15, 17, 21, 0.95), rgba(15, 17, 21, 0));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 3px;
    transition: background 0.3s ease;
}

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

/* Typography Selection */
::selection {
    background: rgba(99, 102, 241, 0.3);
    color: #e0e7ff;
}

/* Animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
}

.animate-pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
}

/* Message Typing Indicator */
.typing-indicator {
    display: inline-block;
    margin-left: 2px;
    width: 4px;
    height: 14px;
    background-color: #6366f1;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Loading Dots */
.loading-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #94a3b8;
    margin: 0 2px;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Message Styles Override/Enhancement */
.message-user {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.message-ai {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Input Focus Glow */
.glass-panel {
    background: rgba(15, 17, 21, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

.input-focus-glow {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.5), 0 0 20px rgba(99, 102, 241, 0.2);
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES
   ========================================= */

@media screen and (max-width: 768px) {
    /* Profile Avatar Adjustments for Mobile */
    #dev-profile-container {
        top: 1rem !important; /* Move slightly up */
        left: 1rem !important;
    }
    
    #dev-avatar .w-10 {
        width: 2.25rem; /* Smaller avatar (36px) */
        height: 2.25rem;
    }

    /* Move the panel to avoid going off-screen or being too wide */
    #dev-panel {
        top: 3.5rem !important;
        left: 0.5rem !important;
        width: 16rem !important; /* Slightly narrower */
    }

    /* 
       Mobile Layout & Dimensions 
       --------------------------
       Fixes for stability, keyboard handling, and spacing
    */
    html, body {
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important; /* Prevent body scroll */
        position: fixed !important; /* Lock viewport to prevent scroll bounce and shifting */
    }

    body {
        justify-content: flex-start !important; /* Align top */
    }

    .glass-container {
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important; /* Use dynamic viewport height */
        max-height: 100dvh !important;
        
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        
        display: flex !important;
        flex-direction: column !important;
    }

    /* 
       Spacing & Vertical Rhythm 
       -------------------------
    */
    .glass-header {
        padding: 1rem 1.25rem !important; /* Increased spacing */
        flex-shrink: 0;
        width: 100% !important;
    }

    #chat-content {
        width: 100% !important;
        flex: 1 1 auto !important; /* Grow and shrink properly */
        height: 0 !important; /* Allow flex shrinking when keyboard opens */
        min-height: 0 !important;
        
        padding: 1rem 1.25rem !important; /* Consistent padding */
        
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth scroll */
        overscroll-behavior-y: contain; /* Prevent pull-to-refresh */
    }

    /* 
       Footer & Input Area 
       -------------------
       Ensures visibility and touch targets
    */
    .glass-footer {
        width: 100% !important;
        flex-shrink: 0;
        padding: 0.75rem 1rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 10px)) !important;
        
        /* Ensure background is solid enough to hide content behind it */
        background: rgba(15, 17, 21, 0.98); 
        backdrop-filter: blur(16px);
    }

    #chat-form {
        max-width: 100% !important;
    }

    .glass-footer .relative.flex {
        padding: 0.5rem !important; /* Larger touch area */
        border-radius: 1rem !important;
    }

    /* 
       Input Behavior 
       --------------
    */
    #user-input {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        height: auto !important;
    }
    
    /* Touch Targets */
    .glass-footer button[type="submit"] {
        padding: 0.75rem !important; /* Larger button */
    }
    
    /* Hide hover effects on mobile to prevent sticky states */
    .glass-footer button[type="submit"]:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}