/* public/css/impersonation.css
   Popup Dev "acessar conta de outro usuário", disparado pelo .user-profile
   da sidebar (global — por isso é um CSS próprio, carregado no head.ejs,
   em vez de ficar dentro de um CSS de página específica). */

.impersonation-popup {
    position: fixed;
    width: 280px;
    max-height: 420px;
    background-color: var(--color-light);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    z-index: 10000;
    overflow: hidden;
    display: none;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.impersonation-popup.show {
    display: flex;
}

.impersonation-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
    flex-shrink: 0;
}

.impersonation-popup-list {
    overflow-y: auto;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* .user-chat-card só tem estilo de verdade sem escopo em dashboard.css
   (carregado só no dashboard) ou aninhado sob .list-user-chats .list-user
   em style.css (carregado só em mensagens) — em qualquer outra página
   (conexões, usuários, IA, MCP...) sobrava sem formatação nenhuma. Por
   isso esse componente, que é global (vive na sidebar), precisa definir
   o próprio visual do zero em vez de depender de CSS de outra página. */
.impersonation-popup .user-chat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.impersonation-popup .user-chat-card:hover,
.impersonation-popup .user-chat-card.active-user {
    background-color: var(--color-active);
}

.impersonation-popup .user-chat-card img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.impersonation-popup .info-user {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.impersonation-popup .user-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.impersonation-popup .user-message {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.impersonation-popup-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Botão no header do popup pra voltar da conta impersonada pra do Dev
   (some quando não está impersonando). Vive dentro de um popup de largura
   fixa (280px), então não depende do estado de recolhimento da sidebar. */
.impersonation-banner {
    display: none;
    align-items: center;
    flex-shrink: 0;
    max-width: 55%;
    gap: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    background-color: var(--color-hover-bg);
    border: 1px solid var(--color-active);
    border-radius: 8px;
    cursor: pointer;
}

.impersonation-banner.show {
    display: flex;
}

.impersonation-banner-text-full {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}