/* ============================================================================
   exitus.css — skin Exitus para o inVerse (Converse.js v13)
   Fonte de verdade: deploy/inverse/exitus.css (repo Openfire-v2).
   Aplicada por deploy/inverse-exitus-skin.sh (copia p/ classes/css/ no volume).
   REAPLICAR após upgrade/reinstalação do plugin inverse.
   Paleta do modelo https://exituseduc.com.br — sem textos/marca do produto.
   ========================================================================== */

/* ---- 1. Tipografia -------------------------------------------------------
   Plus Jakarta Sans vem de <link> Google Fonts no index.html (patch do
   script); sem internet no cliente cai no fallback system-ui. */
.conversejs,
.conversejs input,
.conversejs button,
.conversejs textarea,
.conversejs select,
converse-bg {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* ---- 2. Variáveis do tema (cores + cantos) ------------------------------ */
.conversejs,
converse-bg,
.conversejs[data-converse-theme=classic],
converse-bg[data-converse-theme=classic],
.conversejs[data-bs-theme=classic],
converse-bg[data-bs-theme=classic] {
    --background-color: #FFFFFF;
    --background-color-lighter: #F5F6FF;
    --foreground-color: #1E2046;
    --primary-color: #EC4B8A;
    --primary-color-hover: #D33D78;
    --secondary-color: #6E7196;
    --secondary-color-hover: #4F60D4;
    --link-color: #5C6FE6;
    --link-color-hover: #4F60D4;
    --chat-color: #5C6FE6;
    --chat-color-hover: #4F60D4;
    --chat-header-bg-color: #FFFFFF;
    --chat-header-fg-color: #1E2046;
    --muc-color: #8A5BE6;
    --muc-color-hover: #7847D1;
    --muc-header-bg-color: #FFFFFF;
    --muc-header-fg-color: #1E2046;
    --chat-status-online: #1FAE7A;
    --chat-status-busy: #E14F4F;
    --chat-status-away: #E78B3A;
    --chatbox-border-radius: 16px;
    --converse-list-group-color: #1E2046;
    --converse-list-group-bg: transparent;
    --converse-list-group-active-bg: #EEF0FE;
    --converse-list-group-active-color: #1E2046;
    --converse-list-group-active-border-color: #C4CCFF;
    --converse-list-group-action-hover-bg: #F5F6FF;
    --converse-list-group-action-hover-color: #1E2046;
    --converse-list-group-action-active-bg: #EEF0FE;
    --converse-list-group-action-active-color: #1E2046;
}

/* seleção de texto legível (padrão do browser pode virar preto-no-escuro) */
.conversejs ::selection,
converse-bg ::selection { background: #C4CCFF; color: #1E2046; }

/* ---- 3. Fundo da página: lavanda + pontinhos índigo (assinatura Exitus) -- */
body.converse-fullscreen,
converse-bg,
#conversejs-bg {
    background-color: #F5F6FF !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(92, 111, 230, .16) 1px, transparent 1.5px) !important;
    background-size: 22px 22px !important;
}

/* ---- 4. Chrome do converse que não queremos (ex-"ui-limpa") --------------
   O logo aparece como <converse-brand-logo> solto (sem o wrapper
   converse-brand-heading) no fullscreen — esconder os três cobre os dois casos. */
.converse-fullscreen nav.navbar,
.converse-fullscreen footer.footer,
.converse-fullscreen converse-brand-heading,
.converse-fullscreen converse-brand-logo,
.converse-fullscreen .brand-heading {
    display: none !important;
}

/* ---- 5. Login: card centralizado com medalhão de avatar ------------------
   Card branco no centro da página (h+v); círculo marinho com ícone de pessoa
   sobrepondo o topo (negative margin). Ícones em data-URI: sem asset externo. */
.converse-fullscreen converse-login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92vh;
}
.converse-fullscreen converse-login-form form,
.converse-fullscreen converse-registration-form form {
    background: #FFFFFF;
    border: 1px solid #E0E3F5;
    border-radius: 16px;
    padding: 28px 40px 36px;
    width: min(420px, 92vw);
    margin: 56px auto 0;
    box-shadow: 0 8px 30px rgba(30, 32, 70, .06);
}
.converse-fullscreen converse-login-form form::before {
    content: "";
    display: block;
    width: 88px;
    height: 88px;
    margin: -76px auto 22px;
    border-radius: 50%;
    border: 5px solid #F5F6FF;
    background-color: #1E2046;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.4'/%3E%3Cpath d='M5.5 19.5c1.2-3.4 3.6-5 6.5-5s5.3 1.6 6.5 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44px;
}
.converse-fullscreen converse-login-form .btn-primary {
    width: 100%;
    padding: 11px;
    margin-top: 6px;
}
.converse-fullscreen converse-login-form input[type=checkbox] { accent-color: #EC4B8A; }
/* ---- 5b. Login: labels em pt-BR, sem sufixo de domínio, sem placeholders --
   Os labels do converse vêm em inglês ("XMPP Address:"/"Password"); troca via
   font-size:0 + ::before. O sufixo @dominio (locked_domain) fica oculto — o
   usuário digita só o nome e o converse completa o domínio sozinho. */
.conversejs label[for="converse-login-jid"],
.conversejs label[for="converse-login-password"] {
    font-size: 0 !important;
    margin-bottom: 4px;
}
.conversejs label[for="converse-login-jid"]::before { content: "Usuário"; }
.conversejs label[for="converse-login-password"]::before { content: "Senha"; }
.conversejs label[for="converse-login-jid"]::before,
.conversejs label[for="converse-login-password"]::before {
    font-size: 14px;
    font-weight: 600;
    color: #1E2046;
    line-height: 1.4;
}
.conversejs converse-login-form .input-group-text { display: none !important; }
.conversejs converse-login-form .input-group .form-control {
    border-radius: 10px !important;
}
.conversejs converse-login-form input::placeholder { color: transparent; }

/* ---- 5c. Login: ícones dentro dos campos (pessoa/cadeado) ----------------- */
.conversejs converse-login-form #converse-login-jid,
.conversejs converse-login-form #converse-login-password {
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 18px;
}
.conversejs converse-login-form #converse-login-jid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6FE6' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.4'/%3E%3Cpath d='M5.5 19.5c1.2-3.4 3.6-5 6.5-5s5.3 1.6 6.5 5'/%3E%3C/svg%3E");
}
.conversejs converse-login-form #converse-login-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6FE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E");
}

/* ---- 6. Inputs e botões --------------------------------------------------- */
.conversejs .form-control {
    background-color: #F5F6FF;
    border: 1px solid #E0E3F5;
    border-radius: 10px;
    color: #1E2046;
}
.conversejs .form-control::placeholder { color: #A8AABF; }
.conversejs .form-control:focus {
    background-color: #FFFFFF;
    border-color: #5C6FE6;
    box-shadow: 0 0 0 3px rgba(92, 111, 230, .15);
    color: #1E2046;
}
.conversejs .btn-primary,
.conversejs .button-primary {
    background-color: #EC4B8A;
    border-color: #EC4B8A;
    border-radius: 10px;
    font-weight: 600;
    color: #FFFFFF;
}
.conversejs .btn-primary:hover,
.conversejs .btn-primary:focus,
.conversejs .button-primary:hover {
    background-color: #D33D78;
    border-color: #D33D78;
}
.conversejs .btn-secondary { border-radius: 10px; }

/* ---- 7. Lista de conversas (roster/controlbox) --------------------------- */
.conversejs #controlbox .flyout { background: #FFFFFF; }
.conversejs .list-item,
.conversejs .items-list .list-item {
    border-radius: 10px;
    color: #1E2046;
}
.conversejs .list-item:hover,
.conversejs .items-list .list-item:hover { background: #F5F6FF; }
.conversejs .list-item.current-xmpp-contact.open,
.conversejs .items-list .list-item.open { background: #EEF0FE; }

/* ---- 8. Cabeçalho, mensagens e área de digitação ------------------------- */
.conversejs .chat-head { border-bottom: 1px solid #E0E3F5; }
.conversejs .chat-msg__author { color: #1E2046; }
.conversejs .chat-msg__time,
.conversejs .chat-info { color: #A8AABF; }
.conversejs .message .separator hr { border-color: #E0E3F5; }
.conversejs .new-msgs-indicator { background-color: #5C6FE6; border-radius: 999px; }
.conversejs .sendXMPPMessage {
    border-top: 1px solid #E0E3F5;
    background: #FFFFFF;
}
.conversejs .chat-textarea { background: #FFFFFF; color: #1E2046; }
.conversejs .chat-toolbar { background: #FFFFFF; }
.conversejs .chat-toolbar .fa,
.conversejs .chat-toolbar converse-icon { color: #6E7196; }

/* ---- 9. Modais e menus ---------------------------------------------------- */
.conversejs .modal-content {
    border-radius: 16px;
    border: 1px solid #E0E3F5;
}
.conversejs .modal-header { border-bottom: 1px solid #E0E3F5; }
.conversejs .dropdown-menu {
    border-radius: 12px;
    border: 1px solid #E0E3F5;
    box-shadow: 0 8px 30px rgba(30, 32, 70, .10);
}
.conversejs .dropdown-item:hover { background: #F5F6FF; }

/* ---- 10. Avatares e detalhes ---------------------------------------------- */
.conversejs .avatar { border-radius: 10px; }
.conversejs .badge { border-radius: 999px; font-weight: 600; }

/* ---- 11. Adicionar contato = busca no diretório ---------------------------
   Com xhr_user_search_url ativo (endpoint /user-search do plugin ACL), o
   modal vira autocomplete de usuários reais do servidor — sem JID à mão.
   Sugestões do autocomplete na paleta. */
.conversejs .suggestion-box__results {
    border: 1px solid #E0E3F5;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 8px 30px rgba(30, 32, 70, .10);
}
.conversejs .suggestion-box__results li:hover,
.conversejs .suggestion-box__results li[aria-selected=true] { background: #F5F6FF; }

/* "Iniciar nova conversa" aceita JID livre (sem validar existência) — sai da
   UI; conversa nova = clicar num contato ou adicionar pela busca validada. */
.conversejs .dropdown-item.new-chat { display: none !important; }