/* static/css/style.css */

/* --- Main Layout --- */
body, html {
    height: 100%;
    margin: 0;
    /* font-family will be inherited from main.css */
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-width:300px;
    margin: 0 auto;
    background-color: var(--color-background-secondary);
}

.chat-header {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border-primary);
    text-align: center;
    flex-shrink: 0;
}

.chat-header h3 {
    margin: 0 0 0.25rem 0;
}


.messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
}

.message__image{
    border-radius: 5px;
}

.chat-input {
    flex-shrink: 1;
    padding: 1rem;
    border-top: 1px solid var(--color-border-primary);
    /* The .input-group class from main.css will handle the flex layout */
}

/* --- Status Dot Styling --- */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    background-color: #ccc; /* Default color */
}

.status-dot.connected {
    background-color: var(--color-success, #2ecc71); /* Green */
}

.status-dot.connecting {
    background-color: var(--color-warning, #f39c12); /* Orange */
    animation: pulse 1.5s infinite;
}

.status-dot.disconnected {
    background-color: var(--color-error, #e74c3c); /* Red */
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}