/*
 * Estilos do Chat Operacional. Uma tela por vez (nunca lado a lado): a tela
 * inicial é só a lista de conversas/grupos (nome, badge de não lidas, preview
 * da última mensagem); ao clicar, abre a conversa completa ocupando a página
 * inteira, com botão de voltar pra lista. Reaproveita classes visuais de
 * css/chat-suporte.css (chat-header, chat-msg, chat-msg-balao, chat-input-area,
 * chat-input, chat-enviar, chat-mensagens, chat-voltar, chat-fechar) — este
 * arquivo só adiciona a lista de conversas e os tipos de mensagem novos
 * (foto, áudio) que não existem no Chat Inspe IA.
 */

/* Página normal dentro do fluxo do #content-master (mesmo padrão de
   #page_agendaoperacional/#page_mapaoperacao) — nunca overlay/tela cheia,
   pra não ficar atrás do menu lateral nem sair do lugar de qualquer outra
   página navegada via irPara(). */
#page_chat_operacional {
    padding: 0 !important;
}

.chatop-container {
    display: flex;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 16px 16px 0 0 !important;
    background: white;
    overflow: hidden;
}

/* Lista de conversas — ocupa a página inteira até uma conversa ser aberta */
.chatop-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 16px 16px 0 0 !important;
}

.chatop-sidebar.chatop-sidebar-escondida {
    display: none;
}

.chatop-sidebar-header {
    flex-shrink: 0;
}

/* .chat-header vem de css/chat-suporte.css (compartilhado com o Inspe IA) — aqui
   força o canto arredondado igual ao resto do sistema, sobrepondo os border-radius:0
   que existiam pra ficar "rente" ao container (que agora já cuida do recorte via
   overflow:hidden no .chatop-container/.chatop-sidebar). */
.chat-header {
    border-radius: 16px 16px 0 0 !important;
}

.chatop-busca {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.chatop-busca input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    outline: none;
}

.chatop-busca input:focus {
    border-color: #b13636;
}

.chatop-lista-conversas {
    /* Sem overflow/scroll próprio — a lista cresce normalmente e quem rola é a
       página (#content-master/body), igual às outras páginas do sistema. */
}

.chatop-lista-carregando,
.chatop-lista-vazia,
.chatop-lista-erro {
    padding: 30px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.chatop-lista-secao {
    padding: 10px 15px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b13636;
    background: #faf5f5;
}

.chatop-item-conversa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.chatop-item-conversa:hover,
.chatop-item-conversa:active {
    background: #f7f2f2;
}

.chatop-item-conversa.chatop-item-fixo {
    background: #fbf5f5;
}

.chatop-item-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background: #b13636;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
}

.chatop-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chatop-item-info {
    flex: 1;
    min-width: 0;
}

.chatop-item-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.chatop-item-nome {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatop-item-hora {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

.chatop-item-baixo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.chatop-item-preview {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu "⋮" por item da lista (Remover conversa) — em vez de um ícone de lixeira
   direto no card, precisa abrir o menu primeiro, pra não ficar fácil de remover
   sem querer. */
.chatop-item-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.chatop-item-menu-btn {
    background: none;
    border: none;
    color: #ccc;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.chatop-item-menu-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

.chatop-item-conversa:hover .chatop-item-menu-btn,
.chatop-item-menu-btn:active {
    color: #b13636;
}

.chatop-item-menu-btn:hover {
    background: rgba(177, 54, 54, 0.1);
}

.chatop-badge {
    background: #b13636;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

/* Painel de conversa — escondido até uma conversa ser aberta (nunca lado a lado com a lista) */
.chatop-painel {
    display: none;
    flex-direction: column;
    background: #f5f5f5;
    min-width: 0;
    width: 100%;
}

.chatop-sidebar.chatop-sidebar-escondida ~ .chatop-painel {
    display: flex;
}

.chatop-painel-vazio {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #bbb;
}

.chatop-painel-vazio svg {
    width: 60px;
    height: 60px;
    fill: #ddd;
}

.chatop-conversa-ativa {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chatop-conversa-ativa .chat-header {
    flex-shrink: 0;
}

/* .chat-mensagens (css/chat-suporte.css) tem overflow-y:auto por padrão — aqui
   desliga esse scroll próprio, a área de mensagens cresce com o conteúdo e quem
   rola é a página, igual o resto do chat. min-height pra não ficar minúscula
   quando a conversa tem poucas mensagens (fica com "tamanho bom" mesmo vazia). */
.chatop-conversa-ativa .chat-mensagens {
    overflow-y: visible;
    min-height: 60vh;
}

#chatop-btn-sair-grupo {
    width: auto;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
}

.chat-header-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chatop-menu-wrap {
    position: relative;
}

.chatop-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 10;
    min-width: 190px;
}

.chatop-menu-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 12px 14px;
    font-size: 13px;
    color: #b13636;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chatop-menu-dropdown button:hover {
    background: #faf5f5;
}

/* Menu de anexar (Galeria/Câmera/Arquivo) fica na barra de digitar, embaixo da
   tela — abre pra cima em vez de para baixo, senão sai da tela. */
.chatop-menu-dropdown-cima {
    top: auto;
    bottom: 100%;
    left: 0;
    right: auto;
    margin-top: 0;
    margin-bottom: 6px;
}

.chatop-menu-anexar-wrap {
    display: flex;
}

.chatop-menu-dropdown button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.chatop-btn-secundario {
    background: transparent;
    color: #b13636;
}

.chatop-btn-secundario svg {
    fill: #b13636;
}

.chatop-btn-secundario:hover {
    background: #f0dede;
}

.chatop-btn-secundario.chatop-gravando {
    background: #b13636;
    animation: chatop-pulse-gravando 1s infinite;
}

.chatop-btn-secundario.chatop-gravando svg {
    fill: white;
}

@keyframes chatop-pulse-gravando {
    0%, 100% { box-shadow: 0 0 0 0 rgba(177, 54, 54, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(177, 54, 54, 0); }
}

/* Busca de mensagens dentro da conversa aberta (lupa no cabeçalho) */
.chatop-busca-msg {
    position: relative;
    padding: 10px 15px;
    background: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.chatop-busca-msg input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 36px 8px 14px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.chatop-busca-msg input:focus {
    border-color: #b13636;
}

.chatop-busca-msg-fechar,
#chatop-busca-msg-fechar {
    position: absolute;
    top: 10px;
    right: 23px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 4px;
}

.chatop-busca-msg-resultados {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 8px;
}

.chatop-busca-msg-item {
    padding: 8px 6px;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    border-radius: 6px;
}

.chatop-busca-msg-item:hover {
    background: #f7f2f2;
}

.chatop-busca-msg-item-topo {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.chatop-busca-msg-item-nome {
    font-size: 12px;
    font-weight: 600;
    color: #b13636;
}

.chatop-busca-msg-item-data {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

.chatop-busca-msg-item-texto {
    font-size: 13px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Destaque breve na mensagem depois de ir até ela pela busca */
@keyframes chatop-flash-destaque {
    0%, 100% { background: transparent; }
    30% { background: rgba(177, 54, 54, 0.18); }
}

.chat-msg.chatop-msg-destacada .chat-msg-balao {
    animation: chatop-flash-destaque 2s ease-out;
    border-radius: 12px;
}

/* Nome do remetente em mensagens de grupo */
.chatop-msg-remetente {
    font-size: 12px;
    font-weight: 600;
    color: #b13636;
    padding: 0 4px;
}

.chatop-msg-linha {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-msg.usuario .chatop-msg-linha {
    flex-direction: row-reverse;
}

.chatop-msg-apagar {
    cursor: pointer;
    color: #999;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0 4px;
    user-select: none;
}

.chat-msg:hover .chatop-msg-apagar,
.chat-msg.chatop-msg-apagar-visivel .chatop-msg-apagar {
    opacity: 1;
}

.chatop-msg-apagada {
    font-style: italic;
    color: #999 !important;
    background: #eee !important;
}

/* Bolha temporária "Enviando..." enquanto a foto/arquivo sobe pro blob */
.chatop-msg-enviando {
    display: flex;
    align-items: center;
    gap: 8px;
    font-style: italic;
    opacity: 0.8;
}

.chatop-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: chatop-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.chat-msg.assistente .chatop-spinner {
    border-color: rgba(177, 54, 54, 0.3);
    border-top-color: #b13636;
}

/* Bolha "na fila de sincronização" — mensagem/foto/áudio/arquivo enviada sem
   conexão, aguardando a internet voltar pra ser enviada de verdade (ver
   _sincronizarFilaChat em js/chat-operacional.js). Visual mais "parado" que o
   spinner de upload (borda tracejada, ícone de relógio), pra diferenciar de
   "enviando agora" de "esperando conexão". */
.chatop-msg-pendente {
    border: 1px dashed rgba(255, 255, 255, 0.6) !important;
}

.chatop-icone-pendente {
    flex-shrink: 0;
}

@keyframes chatop-spin {
    to { transform: rotate(360deg); }
}

/* Mensagem de foto */
.chatop-msg-foto {
    padding: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.chatop-msg-foto img {
    max-width: 260px;
    max-height: 320px;
    border-radius: 12px;
    display: block;
    cursor: pointer;
}

/* Mensagem de arquivo (qualquer tipo — abre/baixa numa aba nova) */
.chatop-msg-arquivo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    max-width: 260px;
    text-decoration: none;
    color: inherit;
}

.chatop-msg-arquivo svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    flex-shrink: 0;
}

.chatop-msg-arquivo-nome {
    font-size: 13px;
    word-break: break-word;
}

/* Mensagem de áudio (player custom) */
.chatop-msg-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.chatop-msg-audio audio {
    display: none;
}

.chatop-audio-play {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.chat-msg.usuario .chatop-audio-play {
    background: rgba(255, 255, 255, 0.3);
}

.chatop-audio-play svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.chatop-audio-progresso {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.chat-msg.usuario .chatop-audio-progresso {
    background: rgba(255, 255, 255, 0.3);
}

.chatop-audio-progresso-barra {
    height: 100%;
    width: 0%;
    background: currentColor;
}

.chatop-audio-duracao {
    font-size: 11px;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Modal "Nova conversa / Novo grupo" */
.chatop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatop-modal {
    background: white;
    width: 420px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 60px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chatop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #b13636 0%, #d94545 100%);
    color: white;
}

.chatop-modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.chatop-modal-fechar {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}

.chatop-modal-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}

.chatop-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.chatop-tab.active {
    color: #b13636;
    border-bottom-color: #b13636;
    font-weight: 600;
}

.chatop-modal-body {
    padding: 15px 20px;
    overflow-y: auto;
    flex: 1;
}

.chatop-modal-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
}

.chatop-modal-input:focus {
    border-color: #b13636;
}

.chatop-modal-lista-usuarios {
    max-height: 320px;
    overflow-y: auto;
}

.chatop-modal-item-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 8px;
}

.chatop-modal-item-usuario:hover {
    background: #f7f2f2;
}

.chatop-modal-item-usuario.selecionado {
    background: #fbeaea;
}

.chatop-modal-item-nome {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.chatop-modal-item-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #b13636;
}

.chatop-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #eee;
}

.chatop-modal-footer span {
    font-size: 12px;
    color: #888;
}

/* Modal "Gerenciar grupo" — lista de participantes atuais (não clicável pra
   seleção, ao contrário de .chatop-modal-item-usuario normal) + botão de remover. */
.chatop-gerenciar-secao-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b13636;
    margin: 14px 0 6px;
}

.chatop-gerenciar-secao-titulo:first-child {
    margin-top: 0;
}

.chatop-gerenciar-item {
    cursor: default;
}

.chatop-gerenciar-item:hover {
    background: none;
}

.chatop-gerenciar-btn-remover {
    background: none;
    border: none;
    color: #ccc;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.chatop-gerenciar-btn-remover svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}

.chatop-gerenciar-btn-remover:hover {
    color: #b13636;
    background: rgba(177, 54, 54, 0.1);
}

.chatop-badge-admin {
    display: inline-block;
    background: #b13636;
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Telas estreitas: fotos um pouco menores nas bolhas de mensagem, e a conversa
   aberta vira tela cheia (mesmo padrão do Chat Inspe IA — position:fixed cobrindo
   o viewport inteiro, com o próprio header/voltar/scroll), já que embutida no
   fluxo normal da página ela ficava pequena demais numa tela de celular. */
@media (max-width: 768px) {
    .chatop-msg-foto img {
        max-width: 200px;
        max-height: 260px;
    }

    .chatop-sidebar.chatop-sidebar-escondida ~ .chatop-painel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999999;
        background: white;
    }

    .chatop-conversa-ativa {
        height: 100%;
    }

    /* Em tela cheia, a área de mensagens volta a ter scroll próprio (é a única
       forma de manter cabeçalho e input sempre visíveis num overlay fixo) —
       diferente do modo embutido na página (desktop), onde quem rola é a página. */
    .chatop-conversa-ativa .chat-mensagens {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chatop-conversa-ativa .chat-input-area {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    /* Trava o scroll da página por trás enquanto a conversa está em tela cheia. */
    body.chatop-conversa-aberta-mobile {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
        top: 0 !important;
    }
}