/* =========================================================
   TEMA  ·  base #1fa198 (teal)
   ========================================================= */
:root {
    --teal:            #1fa198;
    --teal-escuro:     #17817a;
    --teal-profundo:   #0f5f5a;
    --teal-tinta:      #e7f4f2;   /* fundos suaves */
    --teal-bolha:      #d6efe9;   /* bolha das minhas mensagens */

    --fundo:           #f0f3f2;
    --fundo-chat:      #eae7e0;   /* fundo da área de mensagens */
    --painel:          #ffffff;
    --linha:           #e4e8e7;

    --texto:           #1c2b29;
    --texto-suave:     #6b7c79;
    --erro:            #d64545;
    --azul-lido:       #34b7f1;   /* "✓✓" quando a mensagem já foi lida */

    --raio:            14px;
    --raio-peq:        10px;
    --sombra:          0 6px 24px rgba(15, 95, 90, 0.10);

    --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--fonte);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   AVATAR (inicial gerada a partir do nome)
   ========================================================= */
.avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar.grupo { background: var(--teal-profundo); }

/* Avatar com fotografia (coluna users.avatar) */
.avatar { overflow: hidden; }
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Logo do ecrã inicial do chat */
.conversa-inicial-logo {
    width: 104px;
    height: 104px;
    margin: 0 auto 20px;
    padding: 14px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(15, 95, 90, .14);
}
.conversa-inicial-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}


/* =========================================================
   PÁGINA DE LOGIN
   ========================================================= */
.pagina-login {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(31,161,152,0.18), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(31,161,152,0.14), transparent 55%),
        #f4f7f6;
}

.login-cartao {
    width: 100%; max-width: 400px;
    background: var(--painel);
    border-radius: 20px;
    box-shadow: var(--sombra);
    padding: 36px 30px;
}

.login-marca { text-align: center; margin-bottom: 26px; }
/* Logo do login — imagem em vez do símbolo */
.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    padding: 0;                 /* anula padding do estilo antigo */
    font-size: 0;               /* garante que não sobra espaço de texto */
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(31, 161, 152, .25);
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* usa "cover" se preferires preencher todo o círculo */
    display: block;
}
.login-marca h1 { font-size: 1.35rem; font-weight: 700; }
.login-sub { color: var(--texto-suave); font-size: 0.9rem; margin-top: 4px; }

.login-erro {
    background: #fdecec; color: var(--erro);
    border: 1px solid #f6c9c9;
    padding: 10px 14px; border-radius: var(--raio-peq);
    font-size: 0.88rem; margin-bottom: 18px; text-align: center;
}

/* Botões de perfil */
.perfil-botoes { display: flex; gap: 10px; margin-bottom: 22px; }
.perfil-btn {
    flex: 1;
    border: 2px solid var(--linha);
    background: #fff;
    border-radius: var(--raio);
    padding: 16px 8px;
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--texto-suave);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: all 0.18s ease;
}
.perfil-btn .perfil-icone { font-size: 1.5rem; }
.perfil-btn:hover { border-color: var(--teal); color: var(--teal-escuro); }
.perfil-btn.ativo {
    border-color: var(--teal);
    background: var(--teal-tinta);
    color: var(--teal-profundo);
    box-shadow: 0 4px 14px rgba(31,161,152,0.18);
}

/* Campos */
.campo { display: block; margin-bottom: 16px; }
.campo span {
    display: block; font-size: 0.8rem; font-weight: 500;
    color: var(--texto-suave); margin-bottom: 6px;
}
.campo input {
    width: 100%;
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-peq);
    padding: 12px 14px;
    font-family: inherit; font-size: 0.95rem;
    transition: border-color 0.15s;
}
.campo input:focus { outline: none; border-color: var(--teal); }

.btn-entrar {
    width: 100%;
    background: var(--teal);
    color: #fff; border: none;
    border-radius: var(--raio-peq);
    padding: 13px;
    font-family: inherit; font-size: 0.98rem; font-weight: 600;
    cursor: pointer; margin-top: 6px;
    transition: background 0.15s;
}
.btn-entrar:hover { background: var(--teal-escuro); }

/* =========================================================
   ESTRUTURA DO CHAT
   ========================================================= */
.pagina-chat { background: var(--fundo); }
.app {
    display: grid;
    grid-template-columns: 360px 1fr;
    transition: grid-template-columns 0.28s ease;
    height: 100vh;
    height: 100dvh; /* mais fiável em janelas curtas / browsers com barras dinâmicas */
    max-width: 1500px; margin: 0 auto;
    background: var(--painel);
    box-shadow: var(--sombra);
}

/* ---------------- Barra lateral ---------------- */
.lateral {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--linha);
    background: var(--painel);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    transition: opacity 0.22s ease;
}
.lateral-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--teal);
    color: #fff;
}
.meu-perfil { display: flex; align-items: center; gap: 12px; min-width: 0; }
.meu-perfil .avatar { background: rgba(255,255,255,0.22); }
.meu-info { display: flex; flex-direction: column; min-width: 0; }
.meu-info strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta-tipo {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.85;
}
.lateral-acoes { display: flex; gap: 6px; }
.icone-btn {
    width: 38px; height: 38px;
    border: none; background: rgba(255,255,255,0.15);
    color: #fff; border-radius: 50%;
    font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.icone-btn:hover { background: rgba(255,255,255,0.3); }

.pesquisa { padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.pesquisa input {
    width: 100%; border: none; background: var(--fundo);
    border-radius: 20px; padding: 10px 16px;
    font-family: inherit; font-size: 0.9rem;
}
.pesquisa input:focus { outline: 2px solid var(--teal-tinta); }

/* Lista de conversas */
.lista-conversas { flex: 1; overflow-y: auto; min-height: 0; }
.vazio-lateral { padding: 30px 20px; text-align: center; color: var(--texto-suave); font-size: 0.9rem; }

.item-conversa {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; cursor: pointer;
    border-bottom: 1px solid var(--linha);
    transition: background 0.12s;
}
.item-conversa:hover { background: var(--teal-tinta); }
.item-conversa.ativa { background: var(--teal-tinta); }
.item-conversa-texto { flex: 1; min-width: 0; }
.item-conversa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.item-conversa-nome { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-conversa-hora { font-size: 0.72rem; color: var(--texto-suave); flex-shrink: 0; }
.item-conversa-previa { font-size: 0.83rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo-nao-lido {
    background: var(--teal); color: #fff;
    font-size: 0.7rem; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.selo-mencao {
    background: var(--erro); color: #fff;
    font-size: 0.68rem; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; margin-right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cabecalho-seccao {
    padding: 12px 16px 6px; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--teal-escuro); font-weight: 600;
}

/* ---------------- Área da conversa ---------------- */
.conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo-chat); }

.conversa-inicial {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; color: var(--texto-suave);
    padding: 40px;
}
.conversa-inicial h2 { color: var(--texto); margin-bottom: 8px; }

.conversa-ativa { display: flex; flex-direction: column; height: 100%; }
.oculto { display: none !important; }

.conversa-topo {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: var(--painel);
    border-bottom: 1px solid var(--linha);
}
.conversa-topo-info { display: flex; flex-direction: column; min-width: 0; }
/* Avatar/nome do grupo no cabeçalho — clicável só quando abre as definições do grupo */
.topo-clicavel { cursor: pointer; }
.conversa-topo-info.topo-clicavel:hover strong { text-decoration: underline; }
.conversa-topo-info strong {
    font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.conversa-topo-info span { font-size: 0.78rem; color: var(--texto-suave); }

.btn-menu-lateral {
    width: 38px; height: 38px; flex-shrink: 0;
    border: none; background: var(--fundo); color: var(--texto-suave);
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.btn-menu-lateral:hover { background: var(--teal-tinta); color: var(--teal-escuro); }

/* Sidebar recolhida (desktop) através do botão de menu no cabeçalho da conversa —
   desliza suavemente (transição na grelha + esbatimento), sem "display:none" a meio da animação. */
.app.lateral-fechada { grid-template-columns: 0 1fr; }
.app.lateral-fechada .lateral { opacity: 0; pointer-events: none; }

/* Mensagens
   .mensagens é só o "quadro" onde o botão flutuante fica ancorado — quem
   faz scroll de facto é o .mensagens-scroll lá dentro. Separar os dois
   evita um bug conhecido de alguns browsers (Safari incluído) em que um
   filho "position:absolute" dentro do PRÓPRIO elemento com overflow:auto
   não fica fixo no sítio, arrastando-se com o conteúdo. */
.mensagens {
    flex: 1; min-height: 0; position: relative;
    display: flex; flex-direction: column;
}
.mensagens-scroll {
    flex: 1; overflow-y: auto; min-height: 0;
    padding: 24px 8%;
    display: flex; flex-direction: column; gap: 4px;
    background-image: linear-gradient(rgba(234,231,224,0.6), rgba(234,231,224,0.6));
    /* Desliga a "scroll anchoring" automática do browser — ela tenta compensar
       sozinha os saltos causados por imagens/vídeos a carregar, e entra em
       conflito com o reajuste manual feito em chat.js, dando resultados
       inconsistentes consoante o timing. Com isto desligado, só o JS decide. */
    overflow-anchor: none;
}
.bolha {
    max-width: 68%;
    padding: 8px 12px 6px;
    border-radius: 12px;
    font-size: 0.92rem; line-height: 1.4;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
    word-wrap: break-word;
}
.bolha.recebida { background: var(--painel); align-self: flex-start; border-top-left-radius: 3px; }
.bolha.enviada  { background: var(--teal-bolha); align-self: flex-end; border-top-right-radius: 3px; }
.bolha-autor { font-size: 0.76rem; font-weight: 600; color: var(--teal-escuro); margin-bottom: 2px; }
.bolha-hora {
    font-size: 0.66rem; color: var(--texto-suave); margin-top: 2px;
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.bolha-estado { font-size: 0.75rem; color: var(--texto-suave); letter-spacing: -2px; }
.bolha-estado.lida { color: var(--azul-lido); }
.mencao-destaque { color: var(--teal-profundo); font-weight: 600; background: rgba(15,95,90,0.1); border-radius: 4px; padding: 0 2px; }

.separador-dia {
    align-self: center;
    background: rgba(255,255,255,0.85);
    color: var(--texto-suave);
    font-size: 0.74rem; font-weight: 500;
    padding: 4px 12px; border-radius: 10px;
    margin: 10px 0;
}
.separador-nao-lidas {
    align-self: stretch;
    display: flex; align-items: center; gap: 10px;
    color: var(--erro); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 8px 0;
}
.separador-nao-lidas::before, .separador-nao-lidas::after {
    content: ''; flex: 1; height: 1px; background: rgba(214,69,69,0.35);
}

/* Botão flutuante "ir para o fim" */
.btn-scroll-fundo {
    position: absolute; right: 20px; bottom: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--painel); color: var(--teal-escuro);
    border: 1px solid var(--linha); box-shadow: var(--sombra);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 4;
}
.btn-scroll-fundo:hover { background: var(--teal-tinta); }
.scroll-fundo-contador {
    position: absolute; top: -6px; right: -6px;
    background: var(--teal); color: #fff;
    font-size: 0.65rem; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}

/* Barra de envio */
.barra-envio {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    background: var(--painel);
    border-top: 1px solid var(--linha);
    position: relative;
}

/* Menções (@nome) */
.mencao-dropdown {
    position: absolute; left: 20px; right: 20px; bottom: 100%;
    margin-bottom: 8px;
    background: var(--painel); border: 1px solid var(--linha);
    border-radius: var(--raio-peq); box-shadow: var(--sombra);
    max-height: 220px; overflow-y: auto;
    z-index: 6;
}
.mencao-opcao {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer; font-size: 0.88rem;
}
.mencao-opcao:hover, .mencao-opcao.ativo { background: var(--teal-tinta); }
.mencao-opcao-texto { display: flex; flex-direction: column; min-width: 0; }
.mencao-opcao-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mencao-opcao-username { font-size: 0.74rem; color: var(--texto-suave); }
.barra-envio input {
    flex: 1; min-width: 0; border: none; background: var(--fundo);
    border-radius: 22px; padding: 12px 18px;
    font-family: inherit; font-size: 0.95rem;
}
.barra-envio input:focus { outline: 2px solid var(--teal-tinta); }
.btn-enviar {
    width: 46px; height: 46px; border: none;
    background: var(--teal); color: #fff;
    border-radius: 50%; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.btn-enviar:hover { background: var(--teal-escuro); }

/* =========================================================
   MODAL (novo grupo)
   ========================================================= */
.modal-fundo {
    position: fixed; inset: 0;
    background: rgba(15,95,90,0.35);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 50;
}
.modal {
    background: var(--painel);
    border-radius: 18px;
    width: 100%; max-width: 420px;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}
.modal-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: var(--teal); color: #fff;
}
.modal-topo h3 { font-size: 1.05rem; }
.modal-corpo { padding: 20px; overflow-y: auto; }
.modal-legenda { font-size: 0.82rem; color: var(--texto-suave); margin: 6px 0 10px; }
.lista-membros { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.membro-opcao {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: var(--raio-peq); cursor: pointer;
    transition: background 0.12s;
}
.membro-opcao:hover { background: var(--teal-tinta); }
.membro-opcao input { width: 18px; height: 18px; accent-color: var(--teal); }
.membro-opcao .avatar { width: 36px; height: 36px; font-size: 0.85rem; }
.membro-nome { font-size: 0.92rem; font-weight: 500; }
.membro-tipo { font-size: 0.72rem; color: var(--texto-suave); }

/* Membro obrigatório (ex.: administradores fixos de um grupo "iS Privado") — marcado e sem se poder tirar */
.membro-opcao-bloqueada { cursor: default; opacity: 0.75; }
.membro-opcao-bloqueada:hover { background: none; }
.membro-opcao-bloqueada input { cursor: not-allowed; }

.modal-rodape {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 20px; border-top: 1px solid var(--linha);
}
.modal-rodape .btn-entrar,
.modal-rodape .btn-perigo { width: auto; padding: 11px 22px; margin: 0; }
.btn-secundario {
    background: var(--fundo); color: var(--texto);
    border: none; border-radius: var(--raio-peq);
    padding: 11px 22px; font-family: inherit; font-weight: 600;
    cursor: pointer;
}
.btn-secundario:hover { background: var(--linha); }

.campo-checkbox { display: flex; align-items: center; gap: 8px; }
.campo-checkbox input { width: 16px; height: 16px; accent-color: var(--teal); }
.campo-checkbox span { font-size: 0.85rem; color: var(--texto); }

/* =========================================================
   ANEXOS · RESPOSTA · APAGAR · SELETOR "iS PRIVADO"
   ========================================================= */
.conversa-topo { flex-wrap: wrap; }
#privado-seletor-wrap { margin-left: auto; }
#privado-seletor {
    background: var(--fundo); border: 1px solid var(--linha);
    border-radius: var(--raio-peq); padding: 6px 10px;
    font-family: inherit; font-size: 0.85rem; color: var(--texto);
    cursor: pointer;
}

#readonly-notice {
    text-align: center; color: var(--texto-suave); font-style: italic;
    font-size: 0.88rem; padding: 12px 20px; background: var(--painel);
    border-top: 1px solid var(--linha);
}

#reply-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--teal-tinta); border-left: 4px solid var(--teal);
    padding: 8px 16px; font-size: 0.85rem; color: var(--texto);
}
#reply-bar-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reply-bar-fechar {
    border: none; background: none; cursor: pointer;
    font-size: 1rem; color: var(--texto-suave);
}

#anexo-preview {
    display: flex; align-items: center; gap: 10px;
    background: var(--fundo); padding: 8px 16px;
    border-top: 1px solid var(--linha);
}
#anexo-preview img { max-height: 56px; border-radius: 6px; }
#anexo-preview-nome { flex: 1; font-size: 0.85rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#anexo-preview-limpar { border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--texto-suave); }

#btn-anexar, #btn-camera { background: var(--fundo); color: var(--texto-suave); }
#btn-anexar:hover, #btn-camera:hover { background: var(--teal-tinta); color: var(--teal-escuro); }

.mensagens.arrastar-ficheiro { outline: 3px dashed var(--teal); outline-offset: -6px; }

/* Ações por cima da bolha (responder / apagar) */
.bolha-acoes {
    position: absolute; top: -14px; right: 6px;
    display: flex; gap: 2px; opacity: 0; pointer-events: none;
    background: var(--painel); border-radius: 12px; padding: 2px;
    box-shadow: var(--sombra);
    transition: opacity 0.12s;
}
.bolha:hover .bolha-acoes { opacity: 1; pointer-events: auto; }
.bolha-acao-btn {
    border: none; background: rgba(15,95,90,0.08); color: var(--texto-suave);
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    font-size: 0.72rem; display: flex; align-items: center; justify-content: center;
}
.bolha-acao-btn:hover { background: rgba(15,95,90,0.18); color: var(--teal-profundo); }

.bolha-apagada { font-style: italic; color: var(--texto-suave); font-size: 0.85rem; }

.bolha-resposta {
    background: rgba(15,95,90,0.06); border-left: 3px solid var(--teal);
    border-radius: 6px; padding: 5px 8px; margin-bottom: 4px;
    display: flex; flex-direction: column; gap: 2px;
    cursor: pointer; transition: background 0.15s;
}
.bolha-resposta:hover { background: rgba(15,95,90,0.13); }
.bolha-resposta-autor { font-size: 0.72rem; font-weight: 600; color: var(--teal-escuro); }
.bolha-resposta-texto { font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bolha-resposta-media {
    max-width: 96px; max-height: 72px; border-radius: 6px;
    object-fit: cover; display: block; margin: 2px 0;
}
.bolha-resposta-ficheiro { font-size: 0.78rem; color: var(--teal-profundo); font-weight: 600; }

@keyframes destacarMensagem {
    0%, 100% { box-shadow: none; }
    25%, 75% { box-shadow: 0 0 0 3px var(--teal); }
}
.bolha.bolha-destacada { animation: destacarMensagem 1.5s ease; border-radius: 12px; }

.bolha-media { margin-bottom: 4px; }
.bolha-media img { max-width: 240px; border-radius: 8px; cursor: zoom-in; display: block; }
.bolha-media video { max-width: 240px; border-radius: 8px; display: block; }

.bolha-ficheiro {
    display: block; background: rgba(15,95,90,0.06); border-radius: 8px;
    padding: 8px 10px; font-size: 0.8rem; color: var(--teal-profundo);
    text-decoration: none; margin-bottom: 4px; word-break: break-all;
}
.bolha-ficheiro:hover { background: rgba(15,95,90,0.12); }

/* =========================================================
   AÇÕES DE GRUPO (admin): pesquisa · filtros · info/definições
   ========================================================= */
.conversa-topo-acoes { display: flex; gap: 8px; margin-left: auto; }
.conversa-topo-acoes .icone-btn {
    background: var(--fundo); color: var(--texto-suave);
}
.conversa-topo-acoes .icone-btn:hover { background: var(--teal-tinta); color: var(--teal-escuro); }

.icone-btn-grande {
    width: 42px; height: 42px;
}
.icone-btn-grande svg { display: block; }

.pesquisa-mensagens-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--painel);
    border-bottom: 1px solid var(--linha);
    padding: 0 20px;
    max-height: 0; opacity: 0; transform: translateY(-12px);
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(.4,0,.2,1), opacity 0.26s ease, transform 0.32s cubic-bezier(.4,0,.2,1), padding 0.32s ease;
}
.pesquisa-mensagens-bar.aberto {
    max-height: 70px; opacity: 1; transform: translateY(0);
    padding: 10px 20px;
}
.pesquisa-mensagens-bar input {
    flex: 1; border: none; background: var(--fundo);
    border-radius: 20px; padding: 8px 16px;
    font-family: inherit; font-size: 0.88rem;
}
.pesquisa-mensagens-bar input:focus { outline: 2px solid var(--teal-tinta); }
.pesquisa-mensagens-contador {
    font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; flex-shrink: 0;
}
.pesquisa-mensagens-nav {
    border: none; background: none; cursor: pointer;
    color: var(--texto-suave); border-radius: 50%;
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.pesquisa-mensagens-nav:hover:not(:disabled) { background: var(--teal-tinta); color: var(--teal-escuro); }
.pesquisa-mensagens-nav:disabled { opacity: 0.35; cursor: not-allowed; }
#pesquisa-mensagens-fechar {
    border: none; background: none; cursor: pointer;
    font-size: 1rem; color: var(--texto-suave);
}

.filtro-mensagens-painel {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
    padding: 0 20px;
    max-height: 0; opacity: 0; transform: translateY(-14px);
    overflow: visible;
    /* o transform acima cria um novo contexto de empilhamento — sem este
       z-index, o dropdown do calendário lá dentro (por muito z-index que
       tenha) ficava sempre por baixo da área de mensagens, que vem depois
       no HTML. */
    position: relative; z-index: 5;
    transition: max-height 0.32s cubic-bezier(.4,0,.2,1), opacity 0.26s ease, transform 0.32s cubic-bezier(.4,0,.2,1), padding 0.32s ease;
}
.filtro-mensagens-painel:not(.aberto) { overflow: hidden; }
.filtro-mensagens-painel.aberto {
    max-height: 420px; opacity: 1; transform: translateY(0);
    padding: 18px 20px;
}
.filtro-mensagens-painel .campo { margin-bottom: 0; min-width: 180px; position: relative; }
.campo-filtro span {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.8rem; font-weight: 500; color: var(--texto-suave);
    margin-bottom: 6px;
}
.campo-filtro span svg { flex-shrink: 0; color: var(--teal-escuro); opacity: 0.8; }
.filtro-mensagens-painel input,
.filtro-mensagens-painel select {
    background: var(--painel);
    border: 1.5px solid var(--linha);
    transition: border-color 0.15s, box-shadow 0.15s;
}
#filtro-user {
    width: 100%;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7c79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    padding: 12px 38px 12px 14px !important;
    border-radius: var(--raio-peq);
    font-size: 0.9rem; color: var(--texto);
    cursor: pointer;
}
.filtro-mensagens-painel input:hover,
.filtro-mensagens-painel select:hover { border-color: var(--teal); }
.filtro-mensagens-painel input:focus,
.filtro-mensagens-painel select:focus {
    outline: none; border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-tinta);
}
.filtro-acoes { display: flex; gap: 10px; margin-left: auto; }
.filtro-acoes .btn-entrar,
.filtro-acoes .btn-secundario { width: auto; margin-top: 0; }
.btn-com-icone {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 999px !important; padding: 10px 20px !important;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.btn-com-icone svg { flex-shrink: 0; }
.filtro-acoes .btn-secundario {
    background: var(--painel); border: 1.5px solid var(--linha); color: var(--texto-suave);
}
.filtro-acoes .btn-secundario.btn-com-icone:hover {
    transform: translateY(-1px); background: var(--fundo); border-color: var(--teal); color: var(--teal-escuro);
}
.filtro-acoes .btn-entrar.btn-com-icone:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(31,161,152,0.35);
}

/* =========================================================
   CALENDÁRIO (seletor de data/intervalo do filtro)
   ========================================================= */
.calendario-gatilho {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; background: var(--painel); border: 1.5px solid var(--linha);
    border-radius: var(--raio-peq); padding: 12px 14px;
    font-family: inherit; font-size: 0.9rem; color: var(--texto);
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.calendario-gatilho:hover { border-color: var(--teal); }
.calendario-gatilho.aberto {
    outline: none; border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-tinta);
}
.calendario-gatilho svg { flex-shrink: 0; color: var(--texto-suave); }
#calendario-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.calendario-painel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    background: var(--painel); border-radius: var(--raio);
    box-shadow: 0 12px 32px rgba(15,95,90,0.2);
    padding: 14px; width: 280px;
}
.calendario-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.calendario-cabecalho strong { font-size: 0.88rem; text-transform: capitalize; }
.calendario-nav {
    border: none; background: var(--fundo); color: var(--texto);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    font-size: 1.15rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.calendario-nav:hover { background: var(--teal-tinta); color: var(--teal-escuro); }
.calendario-dias-semana {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; font-size: 0.68rem; font-weight: 700;
    color: var(--texto-suave); margin-bottom: 4px;
}
.calendario-grelha { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendario-dia {
    border: none; background: none; cursor: pointer;
    padding: 8px 0; font-size: 0.8rem; color: var(--texto);
    transition: background 0.12s, color 0.12s;
}
.calendario-dia:hover:not(.calendario-selecionado) { background: var(--teal-tinta); border-radius: 8px; }
.calendario-dia.calendario-fora-do-mes { color: var(--texto-suave); opacity: 0.4; }
.calendario-dia.calendario-hoje { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--teal); border-radius: 8px; }
.calendario-dia.calendario-no-intervalo { background: var(--teal-tinta); }
.calendario-dia.calendario-selecionado {
    background: var(--teal); color: #fff; font-weight: 600;
}
.calendario-dia.calendario-selecionado-inicio { border-radius: 8px 0 0 8px; }
.calendario-dia.calendario-selecionado-fim { border-radius: 0 8px 8px 0; }
.calendario-dia.calendario-selecionado-inicio.calendario-selecionado-fim { border-radius: 8px; }
.calendario-rodape {
    display: flex; justify-content: space-between;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha);
}
.link-btn {
    border: none; background: none; cursor: pointer;
    color: var(--teal-escuro); font-family: inherit; font-size: 0.8rem; font-weight: 600;
    padding: 4px;
}
.link-btn:hover { text-decoration: underline; }
@media (max-width: 420px) {
    .calendario-painel { left: 0; right: 0; width: auto; }
}

/* Destaque do termo encontrado na pesquisa (como um "Ctrl+F") */
.busca-destaque {
    background: #ffe066; color: #3a2e00;
    border-radius: 3px; padding: 0 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

.filtro-sem-resultados {
    align-self: center; margin: auto;
    color: var(--texto-suave); font-size: 0.9rem; font-style: italic;
    text-align: center; padding: 40px;
}

/* Mensagens escondidas pela pesquisa/filtro do topo (independentes entre si) */
.bolha.busca-oculta,
.bolha.filtro-oculto,
.separador-dia.filtro-oculto {
    display: none !important;
}

/* Modal "Informações do grupo" */
.modal-grande { max-width: 520px; }

/* Modal de alerta/confirmação — substitui o alert()/confirm() nativo do browser */
.modal-alerta { max-width: 380px; }
.modal-alerta .modal-corpo { padding-top: 18px; }
#modal-alerta-mensagem { white-space: pre-line; color: var(--texto); line-height: 1.5; }
.grupo-info-cabecalho {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 20px 0;
}
.grupo-info-cabecalho .avatar { width: 84px; height: 84px; font-size: 1.6rem; }
.grupo-info-cabecalho strong { font-size: 1.1rem; }
.grupo-info-nome-linha { display: flex; align-items: center; gap: 8px; }
.icone-btn-lapis {
    border: none; background: rgba(15,95,90,0.08); color: var(--texto-suave);
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.icone-btn-lapis:hover { background: var(--teal-tinta); color: var(--teal-escuro); }

/* Zona de arrastar/escolher imagem para o avatar de um grupo */
.avatar-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px; border: 2px dashed var(--linha); border-radius: var(--raio);
    cursor: pointer; text-align: center; background: var(--fundo);
    transition: border-color 0.15s, background 0.15s;
}
.avatar-dropzone:hover,
.avatar-dropzone:focus-visible {
    border-color: var(--teal); background: var(--teal-tinta);
    outline: none;
}
.avatar-dropzone.avatar-dropzone-arrastar {
    border-color: var(--teal); background: var(--teal-tinta);
    box-shadow: 0 0 0 3px rgba(31,161,152,0.15);
}
.avatar-dropzone.avatar-dropzone-a-carregar { opacity: 0.6; pointer-events: none; }
.avatar-dropzone-preview { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar-dropzone-texto { font-size: 0.82rem; color: var(--texto-suave); }
.avatar-dropzone-link { color: var(--teal-escuro); font-weight: 600; text-decoration: underline; }

.avatar-remover-btn { width: auto; margin: 10px auto 0; display: block; padding: 8px 16px; font-size: 0.82rem; }

/* Abas do modal "Informações do grupo" */
.modal-tabs {
    display: flex; gap: 4px; margin-top: 16px; padding: 0 20px;
    border-bottom: 1px solid var(--linha);
}
.modal-tab {
    border: none; background: none; cursor: pointer;
    padding: 12px 14px; font-family: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--texto-suave); border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.modal-tab:hover { color: var(--teal-escuro); }
.modal-tab.ativo { color: var(--teal-escuro); border-bottom-color: var(--teal); }

.modal-painel { padding-top: 4px; }
.modal-rodape-interno { border-top: none; padding: 16px 0 0; }

.grupo-btn-bloco { width: 100%; margin-top: 10px; }
.btn-perigo {
    width: 100%; margin-top: 20px;
    background: #fdecec; color: var(--erro); border: 1px solid #f6c9c9;
    border-radius: var(--raio-peq); padding: 11px;
    font-family: inherit; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.btn-perigo:hover { background: #f8d7d7; }

.membro-opcao-info { justify-content: space-between; }
.membro-info-texto { flex: 1; min-width: 0; }
.membro-remover-btn {
    border: none; background: none; color: var(--texto-suave); cursor: pointer;
    font-size: 1rem; flex-shrink: 0; padding: 4px;
}
.membro-remover-btn:hover { color: var(--erro); }

.grupo-ficheiros-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
}
.grupo-ficheiro-item img,
.grupo-ficheiro-item video {
    width: 100%; height: 96px; object-fit: cover; border-radius: 8px;
    cursor: zoom-in; display: block; background: var(--fundo);
}
.grupo-ficheiro-generico {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 96px; width: 100%; background: var(--fundo); border-radius: 8px;
    text-decoration: none; color: var(--texto-suave); font-size: 0.68rem;
    font-weight: 600; text-align: center; padding: 8px 6px; gap: 4px;
}
.grupo-ficheiro-generico:hover { background: var(--teal-tinta); color: var(--teal-escuro); }
.grupo-ficheiro-icone { font-size: 1.3rem; line-height: 1; }
.grupo-ficheiro-nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    word-break: break-word;
    line-height: 1.25;
}

.grupo-info-horario-card {
    background: var(--fundo); border-radius: var(--raio);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 16px;
}
.grupo-info-horario {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.grupo-info-horario-card .campo { margin-bottom: 0; }
.grupo-info-horario-card input[type="time"] { background: var(--painel); }

.dias-semana-seletor { display: flex; flex-wrap: wrap; gap: 8px; }
.dia-pill {
    border: 1.5px solid var(--linha); background: var(--painel); color: var(--texto-suave);
    border-radius: 999px; padding: 9px 0; width: 52px;
    font-family: inherit; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s ease;
}
.dia-pill:hover { border-color: var(--teal); color: var(--teal-escuro); }
.dia-pill.ativo {
    background: var(--teal); border-color: var(--teal); color: #fff;
    box-shadow: 0 4px 12px rgba(31,161,152,0.28);
}

.modal-legenda-sub { font-style: italic; margin: 0 !important; }

/* Modal da câmara — captura de ecrã + recorte (equivalente ao "Win+Shift+S" que o browser permite invocar) */
.camera-crop-area {
    position: relative; background: #000; border-radius: var(--raio-peq);
    overflow: hidden; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    max-height: 60vh;
}
.camera-crop-area canvas { max-width: 100%; max-height: 60vh; display: block; cursor: crosshair; }
.camera-crop-selecao {
    position: absolute; border: 2px dashed #fff;
    background: rgba(31,161,152,0.22);
    pointer-events: none;
}
.camera-modo-botoes { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.modal-fundo#modal-camera.camera-sem-video #camera-modo-captura { display: none; }
.camera-fotos-lista {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
}
.camera-foto-item { position: relative; }
.camera-foto-item img {
    width: 100%; height: 84px; object-fit: cover; border-radius: 8px; display: block;
}
.camera-foto-item button {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--erro); color: #fff; border: 2px solid var(--painel);
    cursor: pointer; font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
}
#camera-confirmar:disabled { opacity: 0.5; cursor: not-allowed; }

/* Aviso de carregamento de mensagens antigas (scroll infinito) */
#carregar-antigas-aviso {
    position: sticky; top: 0; z-index: 5;
    align-self: center;
    background: var(--painel); color: var(--texto-suave);
    font-size: 0.76rem; padding: 5px 14px; border-radius: 12px;
    box-shadow: var(--sombra); margin: 0 0 8px;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 820px) {
    .app { grid-template-columns: 1fr; transition: none; }

    /* Lista e conversa sobrepõem-se na mesma célula da grelha e deslizam por
       transform — nada de "display:none" a meio, para a transição ser suave. */
    .lateral, .conversa {
        grid-column: 1; grid-row: 1;
        display: flex; min-height: 0;
        transition: transform 0.28s ease;
    }
    .lateral { transform: translateX(0); }
    .conversa { transform: translateX(100%); }
    .app.ver-conversa .lateral { transform: translateX(-100%); }
    .app.ver-conversa .conversa { transform: translateX(0); }

    .mensagens-scroll { padding: 16px 5%; }
    .bolha { max-width: 82%; }
    .filtro-mensagens-painel { flex-direction: column; align-items: stretch; }
    .filtro-acoes { margin-left: 0; }
    .grupo-info-horario { grid-template-columns: 1fr; }
    .barra-envio { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .mencao-dropdown { left: 10px; right: 10px; }
    .btn-scroll-fundo { right: 14px; bottom: 12px; }

    /* Cabeçalho da conversa mais compacto, para caber o botão de menu + avatar + nome + ações numa linha só */
    .conversa-topo { padding: 8px 12px; gap: 8px; }
    .conversa-topo .avatar { width: 38px; height: 38px; }
    .conversa-topo-info strong { font-size: 0.92rem; }
    .conversa-topo-info span { font-size: 0.72rem; }
    .conversa-topo-acoes { gap: 6px; }
    .icone-btn-grande { width: 34px; height: 34px; }
    .icone-btn-grande svg { width: 17px; height: 17px; }
}

/* Fundo da página do chat (por fora do .app) */
html,
body.pagina-chat {
    background: #67cbc5 !important;
}
.app {
    border-radius: 16px;
    overflow: hidden;
}