// AI Chatbot Styling
.index-chatbot {
    background-color: #f8f9fa;
    
    .card {
        border: none;
        border-radius: 12px;
        
        .card-header {
            border-radius: 12px 12px 0 0;
            padding: 1rem 1.5rem;
            
            h5 {
                font-size: 1.25rem;
                font-weight: 600;
            }
            
            small {
                opacity: 0.9;
            }
        }
        
        .card-body {
            padding: 1.5rem;
        }
    }
    
    .chat-messages {
        min-height: 200px;
        
        .alert {
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 0.75rem;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            strong {
                display: block;
                margin-bottom: 0.25rem;
            }
        }
        
        .alert-primary {
            background-color: #e7f3ff;
            border-color: #b3d9ff;
            color: #004085;
        }
        
        .alert-success {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
        
        .alert-info {
            background-color: #d1ecf1;
            border-color: #bee5eb;
            color: #0c5460;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }
    }
    
    .input-group {
        #chat-input {
            border-radius: 8px 0 0 8px;
            border: 2px solid #dee2e6;
            padding: 0.75rem 1rem;
            
            &:focus {
                border-color: #198754;
                box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
            }
        }
        
        #chat-send-btn {
            border-radius: 0 8px 8px 0;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            
            &:hover:not(:disabled) {
                background-color: #157347;
                border-color: #146c43;
            }
            
            &:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
        }
    }
    
    #chat-loading {
        .spinner-border {
            width: 2rem;
            height: 2rem;
        }
        
        p {
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }
    }
}

// Responsive adjustments
@media (max-width: 768px) {
    .index-chatbot {
        .card-header {
            h5 {
                font-size: 1.1rem;
            }
            
            small {
                font-size: 0.85rem;
            }
        }
        
        .chat-messages {
            max-height: 300px !important;
        }
        
        .input-group {
            #chat-send-btn {
                padding: 0.75rem 1rem;
                
                span {
                    display: none;
                }
            }
        }
    }
}