/* ===== LOANSPACE.AI - SCROLLABLE CHAT CSS ===== */
/* Add this to your existing CSS or create as chat-scrollable.css */

/* ============================================
   SCROLLABLE CHAT CONTAINER
   ============================================ */

#chatbox {
    /* Make it scrollable */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    /* Set height so it can scroll */
    max-height: calc(100vh - 250px) !important;
    min-height: 300px !important;
    
    /* Smooth scrolling */
    scroll-behavior: smooth !important;
    
    /* Padding for messages - added right padding for scrollbar spacing */
    padding: 20px 16px 20px 0 !important;
    
    /* Ensure messages stack properly */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* Better scrollbar styling */
#chatbox::-webkit-scrollbar {
    width: 8px !important;
}

#chatbox::-webkit-scrollbar-track {
    background: transparent !important;
}

#chatbox::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3) !important;
    border-radius: 10px !important;
}

#chatbox::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5) !important;
}

/* ============================================
   CHAT CONTAINER LAYOUT
   ============================================ */

.chat-container {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 100px) !important;
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Make sure chatbox can grow/shrink */
.chat-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Input area stays at bottom */
.input-area {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-main, #f8fafc) !important;
    z-index: 10 !important;
}

/* ============================================
   MESSAGE ANIMATIONS
   ============================================ */

.message {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Fade in animation for new messages */
@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message {
    animation: messageSlide 0.4s ease !important;
}

/* ============================================
   THINKING INDICATOR IMPROVEMENTS
   ============================================ */

.thinking {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    color: #64748b !important;
    max-width: 200px !important;
    align-self: flex-start !important;
    animation: fadeIn 0.3s ease !important;
}

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

.thinking .spinner {
    flex-shrink: 0 !important;
}

/* ============================================
   INPUT AUTO-RESIZE
   ============================================ */

#userInput,
#input {
    min-height: 56px !important;
    max-height: 180px !important;
    resize: none !important;
    overflow-y: auto !important;
    transition: height 0.2s ease !important;
}

/* ============================================
   MOBILE ADJUSTMENTS FOR SCROLLABLE CHAT
   ============================================ */

@media (max-width: 1024px) {
    #chatbox {
        max-height: calc(100vh - 200px) !important;
        min-height: 200px !important;
    }
    
    .chat-container {
        height: calc(100vh - 80px) !important;
    }
}

@media (max-width: 768px) {
    #chatbox {
        max-height: calc(100vh - 180px) !important;
        padding: 16px 12px 16px 0 !important; /* Keep right padding for scrollbar */
        gap: 16px !important;
    }
    
    .chat-container {
        height: calc(100vh - 60px) !important;
    }
}

/* ============================================
   SCROLL TO BOTTOM BUTTON (OPTIONAL)
   ============================================ */

.scroll-to-bottom {
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--accent-blue, #2563eb) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 100 !important;
}

.scroll-to-bottom.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.scroll-to-bottom:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Disable input while processing */
#userInput:disabled,
#input:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

#sendButton:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   MESSAGE CONTENT PADDING
   ============================================ */

/* Add padding to all messages so text doesn't get too close to scrollbar */
.message-content {
    padding-right: 8px !important;
}

/* ============================================
   ERROR MESSAGES
   ============================================ */

.message.error {
    max-width: 80% !important;
    align-self: flex-start !important;
}

.message.error .message-content {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

/* ============================================
   EMPTY STATE (WHEN NO MESSAGES)
   ============================================ */

#chatbox:empty::before {
    content: "👋 Start a conversation by typing a message below";
    display: block;
    text-align: center;
    color: #94a3b8;
    font-size: 16px;
    padding: 60px 20px;
    margin: auto;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Use GPU acceleration for smooth scrolling */
#chatbox {
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

.message {
    will-change: transform, opacity;
}

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

/* Focus visible for keyboard navigation */
#chatbox:focus-visible {
    outline: 2px solid var(--accent-blue, #2563eb);
    outline-offset: 4px;
}

/* Screen reader announcements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/*
USAGE NOTES:

1. This CSS makes #chatbox scrollable with a fixed max height
2. Messages are stacked in a flex column with smooth scrolling
3. Input area is sticky at the bottom
4. Auto-resize textarea for better UX
5. Smooth animations for new messages
6. Mobile-optimized with responsive heights

OPTIONAL FEATURES:
- Uncomment scroll-to-bottom button styles if you want to add that feature
- Adjust max-height calculations based on your header/footer sizes
- Customize colors using CSS variables
*/