/* africa-qa.css - Sleek Design */

/* General container styling */
.ai-showcase-wrapper { /* Changed from africa-qa-wrapper */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh; /* Adjust as needed for vertical centering */
    padding: 20px;
    box-sizing: border-box;
    background-color: #f0f2f5; /* Light grey background for the whole wrapper */
}

.ai-showcase-container { /* Changed from africa-qa-container */
    max-width: 700px;
    width: 100%;
    margin: 20px auto;
    padding: 35px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Softer, deeper shadow */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Modern sans-serif font */
    color: #333;
    animation: fadeIn 0.8s ease-out; /* Fade-in animation for the container */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-showcase-container h2 { /* Changed from africa-qa-container h2 */
    text-align: center;
    color: #2c3e50; /* Darker blue-grey for heading */
    margin-bottom: 30px;
    font-size: 1.8em;
    font-weight: 600;
}

/* Model Selection Area */
.model-selection-area {
    margin-bottom: 25px;
    text-align: center;
}

.model-selection-area label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #555;
}

#ai-model-selector {
    width: calc(100% - 40px); /* Adjust width */
    max-width: 400px;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    background-color: #fff;
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292%22%20height%3D%22292%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M283.4%2C130.6c-4.7%2C-4.7-12.3%2C-4.7-17%2C0l-123.4%2C123.4c-4.7%2C4.7-4.7%2C12.3%2C0%2C17l17%2C17c4.7%2C4.7%2C12.3%2C4.7%2C17%2C0l123.4%2C-123.4C288.1%2C142.9%2C288.1%2C135.3%2C283.4%2C130.6z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M283.4%2C130.6c-4.7%2C-4.7-12.3%2C-4.7-17%2C0l-123.4%2C123.4c-4.7%2C4.7-4.7%2C12.3%2C0%2C17l17%2C17c4.7%2C4.7%2C12.3%2C4.7%2C17%2C0l123.4%2C-123.4C288.1%2C142.9%2C288.1%2C135.3%2C283.4%2C130.6z%22%2F%3E%3C%2Fsvg%3E'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1em;
    cursor: pointer;
    box-sizing: border-box;
}

#ai-model-selector:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}


/* Input Group Styling */
.input-group {
    margin-bottom: 25px;
}

#ai-input { /* Changed from africa-qa-question */
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 0; /* Remove default margin */
    border: 1px solid #e0e0e0; /* Lighter border */
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1em;
    color: #4a4a4a;
    resize: vertical;
    min-height: 90px; /* Taller textarea */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#ai-input:focus { /* Changed from africa-qa-question:focus */
    border-color: #007bff; /* Primary blue on focus */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle glow */
    outline: none; /* Remove default outline */
}

/* Button Styling */
#ai-submit { /* Changed from africa-qa-submit */
    display: block;
    width: 100%;
    padding: 15px 25px;
    /* Gradient background */
    background: linear-gradient(to right, #007bff, #0056b3); /* Blue gradient */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); /* Button shadow */
}

#ai-submit:hover { /* Changed from africa-qa-submit:hover */
    background: linear-gradient(to right, #0056b3, #007bff); /* Reverse gradient on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

#ai-submit:active { /* Changed from africa-qa-submit:active */
    transform: translateY(0); /* Press effect */
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
}

/* Message Area Styling */
#qa-feedback-area {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef; /* Light divider */
    min-height: 100px; /* Ensure space for messages */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align message content to the top */
}

.qa-message {
    width: 100%;
    padding: 20px 25px;
    border-radius: 8px;
    font-size: 1.05em;
    line-height: 1.6;
    word-wrap: break-word; /* Ensure long words wrap */
    animation: slideIn 0.5s ease-out; /* Animation for messages */
}

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

/* Specific Message Types */
.qa-message-success {
    background-color: #e6ffe6; /* Very light green */
    border: 1px solid #a8e6a8;
    color: #28a745; /* Darker green text */
}

.qa-message-success h3 {
    color: #1a7a30; /* Darker green for answer title */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
    font-weight: 600;
}

.qa-message-success .ai-output-text { /* Changed from .answer-text */
    color: #4a4a4a; /* Standard text color for the answer */
    font-weight: 400;
}

.qa-message-error {
    background-color: #ffe6e6; /* Very light red */
    border: 1px solid #e6b3b3;
    color: #dc3545; /* Darker red text */
    text-align: center;
}

.qa-message-loading {
    background-color: #e0f7fa; /* Very light blue */
    border: 1px solid #a7d9ed;
    color: #007bff; /* Primary blue text */
    text-align: center;
    display: flex; /* Use flexbox for spinner and text alignment */
    flex-direction: column; /* Stack spinner and text vertically */
    align-items: center; /* Center horizontally */
}

/* Loading Spinner CSS */
.spinner {
    border: 4px solid rgba(0, 123, 255, 0.2); /* Light blue border */
    border-top: 4px solid #007bff; /* Primary blue top */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite; /* Spin animation */
    margin-bottom: 10px; /* Space between spinner and text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ai-showcase-container { /* Changed from africa-qa-container */
        padding: 25px;
        margin: 15px;
    }
    .ai-showcase-container h2 { /* Changed from africa-qa-container h2 */
        font-size: 1.6em;
    }
    #ai-submit { /* Changed from africa-qa-submit */
        font-size: 1em;
        padding: 12px 20px;
    }
    .qa-message {
        padding: 15px 20px;
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .ai-showcase-container { /* Changed from africa-qa-container */
        padding: 20px;
        margin: 10px;
        border-radius: 10px;
    }
    .ai-showcase-container h2 { /* Changed from africa-qa-container h2 */
        font-size: 1.4em;
        margin-bottom: 20px;
    }
    #ai-input { /* Changed from africa-qa-question */
        font-size: 0.9em;
        padding: 12px 15px;
    }
    .qa-message {
        font-size: 0.9em;
    }
}