@import url('/admin/styles.css');

:root {
    --bg-operator: #0d1117;
    --operator-accent: #10b981;
}

/* Override or add operator specific styles */

.chat-messages-container.admin-chat .message.operator {
    align-self: flex-end;
    background: var(--operator-accent);
    color: white;
}

.status-badge.free {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.busy {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-badge.away {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.btn-operator {
    background: var(--operator-accent);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-operator:hover {
    opacity: 0.9;
}

/* Ensure consistent layout with admin */
.sidebar {
    width: 240px;
    /* Slightly wider like modern admin panels */
}

.chat-layout {
    height: calc(100vh - 140px);
}

.chat-sessions-list {
    width: 320px;
}

.chat-user-info h4 {
    font-size: 16px;
    font-weight: 600;
}

#chat-user-data {
    margin-top: 4px;
    background: var(--bg-hover);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
}