/* src/css/chat-status.css */

.chat-status-bar {
    display: none; /* Hidden by default, JS will make it visible */
    padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* Space between status bar and chat interface */
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    text-align: center;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    transform: translateY(-20px); /* Start off-screen for slide-in effect */
    position: relative; /* Could be sticky if needed, but relative for now */
    z-index: 1050; /* Ensure it's above most content but potentially below modals */
}

.chat-status-bar.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Message Types */
.chat-status-bar.info {
    background-color: var(--color-info-bg, #e0f0ff); /* Light blue for info */
    color: var(--color-info-text, #004085);
    border: 1px solid var(--color-info-border, #b8daff);
}

.chat-status-bar.success {
    background-color: var(--color-success-bg, #d4edda); /* Light green for success */
    color: var(--color-success-text, #155724);
    border: 1px solid var(--color-success-border, #c3e6cb);
}

.chat-status-bar.error {
    background-color: var(--color-error-bg, #f8d7da); /* Light red for error */
    color: var(--color-error-text, #721c24);
    border: 1px solid var(--color-error-border, #f5c6cb);
}

#chat-status-message {
    /* Additional styling for the message text itself if needed */
    display: inline-block;
}

/* It might be good to define these CSS variables in your common.css or variables file */
/* Example variables (add to your main CSS variables definition if not present):
:root {
    --color-info-bg: #e0f0ff;
    --color-info-text: #004085;
    --color-info-border: #b8daff;
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-success-border: #c3e6cb;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-error-border: #f5c6cb;
}
*/