/* DiF v5 - Mobile Styles */

/* Amara message styling in main chat */
.anonymous-message.amara-message {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #9370db;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    margin: 0.5rem 0;
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.1);
}

.anonymous-message.amara-message .amara-speaker {
    color: #9370db;
    font-weight: 600;
}

.anonymous-message.user-message {
    background: #2563eb;
    color: white;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    margin: 0.5rem 0;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
}

.anonymous-message.user-message .user-speaker {
    color: white;
    font-weight: 600;
}

/* Mobile-specific chat adjustments */
@media (max-width: 768px) {
    .chat-messages {
        padding: 0.75rem;
        padding-bottom: 180px !important; /* Increased padding to ensure content is not hidden under input bar */
        margin-bottom: 0 !important; /* Remove margin since we're using padding */
    }
    
    .chat-messages.p-3 {
        padding: 0.75rem;
        padding-bottom: 180px !important; /* Ensure consistent padding */
    }
    
    .mobile-chat-container {
        padding: 0.75rem;
        padding-bottom: 180px; /* Match the chat-messages padding */
    }
    
    .mobile-chat-container .chat-bubble, 
    .chat-messages .chat-bubble {
        max-width: 92%;
        padding: 0.75rem 0.875rem;
    }
    
    /* Ensure chat window container has proper height on mobile */
    .chat-window-container {
        height: calc(100vh - 320px) !important; /* Increased space to account for input bar and padding */
        min-height: 300px;
        position: relative;
    }
    
    /* Ensure the chat messages container takes up the full available height */
    .chat-window-container .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .mobile-chat-container .chat-bubble, 
    .chat-messages .chat-bubble {
        max-width: 95%;
        padding: 0.625rem 0.75rem;
    }
    
    /* Additional padding for very small screens */
    .chat-messages {
        padding-bottom: 200px !important; /* Even more padding for smaller screens */
    }
    
    .chat-messages.p-3 {
        padding-bottom: 200px !important;
    }
    
    .mobile-chat-container {
        padding-bottom: 200px;
    }
    
    /* Adjust height for very small screens */
    .chat-window-container {
        height: calc(100vh - 340px) !important;
    }
}