/* Chat do site. Cores e medidas acompanham o aplicativo de mensagens no tema do aparelho. */
:root {
    --ch-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ch-tam: 17px;
    --ch-fundo: #efeae2;
    --ch-desenho: rgba(104, 84, 56, .1);
    /* Opaco e igual ao theme-color de paginas/chat.php: o Safari pinta a barra de status com ele. */
    --ch-topo: #f7f7f7;
    --ch-linha: rgba(0, 0, 0, .09);
    --ch-texto: #111b21;
    --ch-sub: #667781;
    --ch-entrada: #ffffff;
    --ch-saida: #d9fdd3;
    --ch-hora: rgba(17, 27, 33, .5);
    --ch-chip: #ffffff;
    --ch-chip-texto: #54656f;
    --ch-barra: #f7f7f7;
    --ch-campo: #ffffff;
    --ch-campo-borda: #d9dde0;
    --ch-acento: #1daa61;
    --ch-link: #128c4a;
    --ch-lido: #53bdeb;
    --ch-resposta: #027eb5;
    --ch-botao: rgba(118, 118, 128, .14);
    --ch-sombra: 0 1px .5px rgba(11, 20, 26, .13);
    --ch-erro: #ea0038;
}
@media (prefers-color-scheme: dark) {
    :root {
        --ch-fundo: #0b0b0b;
        --ch-desenho: rgba(255, 255, 255, .1);
        --ch-topo: #111111;
        --ch-linha: rgba(255, 255, 255, .07);
        --ch-texto: #ececec;
        --ch-sub: #9b9d9c;
        --ch-entrada: #242625;
        --ch-saida: #144d37;
        --ch-hora: rgba(236, 236, 236, .58);
        --ch-lido: var(--ch-hora);
        --ch-chip: #1d1f1e;
        --ch-chip-texto: #b8bab9;
        --ch-barra: #111111;
        --ch-campo: #282828;
        --ch-campo-borda: transparent;
        --ch-acento: #21c063;
        --ch-link: #21c063;
        --ch-botao: #2c2c2c;
        --ch-sombra: none;
        --ch-resposta: #53bdeb;
    }
}
@media (min-width: 768px) {
    :root { --ch-tam: 15px; }
}

/* Página travada enquanto a conversa está aberta: nada rola além da lista de mensagens. */
html.chat-ativo, html.chat-ativo body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--ch-topo);
}
html.chat-ativo { scroll-behavior: auto; }
html.chat-ativo body {
    position: fixed;
    inset: 0;
    width: 100%;
}
/* A página do perfil fica atrás do chat, inclusive sob as barras translúcidas do teclado no iOS. */
html.chat-ativo body > :not(.chat-app) { visibility: hidden; }
html.chat-ativo body::after {
    content: "";
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100lvh;
    background: var(--ch-barra);
    z-index: 9998;
    pointer-events: none;
}

.chat-app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ch-altura, 100dvh);
    display: flex;
    flex-direction: column;
    /* Elemento fixo no alto da tela: o Safari do iPhone usa a cor dele na barra de status. */
    background: var(--ch-topo);
    color: var(--ch-texto);
    font-family: var(--ch-fonte);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
    color-scheme: light dark;
}
.chat-app[hidden] { display: none; }
.chat-app * {
    font-family: inherit;
    color: inherit;
    line-height: inherit;
}

/* Cabeçalho */
.chat-topo {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    background: var(--ch-topo);
    border-bottom: .5px solid var(--ch-linha);
    line-height: 1.2;
}
.chat-voltar, .chat-mais {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--ch-botao);
    color: var(--ch-texto);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.chat-voltar svg, .chat-mais svg { width: 22px; height: 22px; }
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: #fff;
}
.chat-titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.chat-titulo strong {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-status {
    font-size: 12.5px;
    color: var(--ch-sub) !important;
    margin-top: 1px;
}
.chat-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: max(8px, env(safe-area-inset-right));
    min-width: 220px;
    padding: 6px;
    border-radius: 14px;
    background: var(--ch-chip);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    transform-origin: top right;
    animation: ch-menu .16s ease-out;
}
.chat-menu[hidden] { display: none; }
.chat-menu button, .chat-menu a {
    display: block;
    width: 100%;
    text-decoration: none;
    border: 0;
    background: none;
    text-align: left;
    padding: 12px 12px;
    border-radius: 9px;
    font-size: 16px;
    cursor: pointer;
}
.chat-menu button:active, .chat-menu button:hover, .chat-menu a:active, .chat-menu a:hover { background: var(--ch-botao); }
.chat-menu [hidden] { display: none; }
@keyframes ch-menu { from { opacity: 0; transform: scale(.92); } }

/* Lista de mensagens */
.chat-corpo {
    position: relative;
    flex: 1;
    min-height: 0;
    isolation: isolate;
    background: var(--ch-fundo);
}
/* Papel de parede: desenhos de traço fino (img/chat-fundo.svg) pintados na cor do tema. */
.chat-corpo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--ch-desenho);
    -webkit-mask: url("../img/chat-fundo.svg?v2") 0 0 / 440px 440px repeat;
    mask: url("../img/chat-fundo.svg?v2") 0 0 / 440px 440px repeat;
}
.chat-rolagem {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
}
.chat-lista {
    display: flex;
    flex-direction: column;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
}
.chat-chip {
    align-self: center;
    margin: 10px 0 6px;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--ch-chip);
    color: var(--ch-chip-texto) !important;
    box-shadow: var(--ch-sombra);
    font-size: 12.5px;
    font-weight: 500;
}

.msg {
    display: flex;
    margin-top: 2px;
}
.msg.novo-grupo { margin-top: 8px; }
.msg.entrada { justify-content: flex-start; padding-left: 7px; }
.msg.saida { justify-content: flex-end; padding-right: 7px; }
.bolha {
    position: relative;
    max-width: min(80%, 560px);
    padding: 6px 8px 7px 9px;
    border-radius: 18px;
    box-shadow: var(--ch-sombra);
    font-size: var(--ch-tam);
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-user-select: text;
    user-select: text;
}
.entrada .bolha { background: var(--ch-entrada); }
.saida .bolha { background: var(--ch-saida); }
.entrada .bolha.cauda { border-bottom-left-radius: 4px; }
.saida .bolha.cauda { border-bottom-right-radius: 4px; }
.bolha.cauda::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 16px;
    background: inherit;
}
.saida .bolha.cauda::after {
    right: -6px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M0 0C0 7 2.5 13 10 16H0z'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M0 0C0 7 2.5 13 10 16H0z'/%3E%3C/svg%3E") no-repeat;
}
.entrada .bolha.cauda::after {
    left: -6px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M10 0C10 7 7.5 13 0 16h10z'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M10 0C10 7 7.5 13 0 16h10z'/%3E%3C/svg%3E") no-repeat;
}
.bolha a { color: var(--ch-link) !important; text-decoration: underline; text-underline-offset: 2px; }
.bolha strong { font-weight: 600; }
/* Hora e confirmação ficam abaixo da linha de base do texto, como no aplicativo. */
.meta {
    float: right;
    position: relative;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* Parte do rebaixo entra no fluxo para a hora não escapar de uma linha própria. */
    margin: 5px 0 0 10px;
    font-size: 11px;
    line-height: 15px;
    color: var(--ch-hora) !important;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}
.meta svg { width: 16px; height: 11px; flex-shrink: 0; }
.meta .tiques { display: inline-flex; align-items: center; }
.meta .tique { color: var(--ch-hora); }
.saida.lido .meta .tique { color: var(--ch-lido); }
.saida.falhou .meta .tique { color: var(--ch-erro); }
.msg-erro {
    display: block;
    clear: both;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ch-erro) !important;
    cursor: pointer;
}

/* Digitando */
.digitando .bolha { padding: 12px 14px; }
.pontos { display: flex; gap: 4px; height: 8px; align-items: center; }
.pontos i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ch-hora);
    animation: ch-ponto 1.2s infinite ease-in-out;
}
.pontos i:nth-child(2) { animation-delay: .15s; }
.pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-ponto {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Entrada das bolhas */
.msg.anima .bolha { animation: ch-entrar .26s cubic-bezier(.2, .9, .25, 1.15) both; }
.saida.anima .bolha { transform-origin: 100% 100%; }
.entrada.anima .bolha { transform-origin: 0 100%; }
@keyframes ch-entrar {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* Botão de descer até a última mensagem */
.chat-descer {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--ch-chip);
    color: var(--ch-sub);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: opacity .18s, transform .18s;
}
.chat-descer[hidden] { display: grid; opacity: 0; transform: scale(.6); pointer-events: none; }
.chat-descer svg { width: 22px; height: 22px; }
.chat-descer span {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ch-acento);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}
.chat-descer span:empty { display: none; }

/* Barra de digitação */
.chat-composer {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--ch-barra);
    border-top: .5px solid var(--ch-linha);
}
html.teclado-aberto .chat-composer { padding-bottom: 6px; }
.chat-composer form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 920px;
    margin: 0 auto;
}
.chat-campo {
    flex: 1;
    min-width: 0;
    display: flex;
    /* Sem esticar o campo: a altura medida é a do texto e ele volta a encolher. */
    align-items: flex-end;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ch-campo-borda);
    border-radius: 21px;
    background: var(--ch-campo);
}
.chat-campo textarea {
    flex: 1;
    width: 100%;
    min-height: 38px;
    max-height: 132px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    resize: none;
    font-size: max(16px, var(--ch-tam));
    line-height: 22px;
    color: var(--ch-texto);
    caret-color: var(--ch-acento);
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
.chat-campo textarea::placeholder { color: var(--ch-sub); opacity: 1; }
.chat-enviar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ch-acento);
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}
.chat-enviar svg { width: 20px; height: 20px; margin-left: 2px; }
.chat-enviar.vazio { opacity: .55; }
.chat-enviar:active { transform: scale(.9); }


.chat-app { z-index: 9999; }
.chat-avatar-marca { position: relative; overflow: hidden; display: block; }
/* Recorta só o cabo: o círculo original da marca permanece inteiro e centrado. */
.chat-avatar-marca img { position: absolute; width: 120%; max-width: none; height: 120%; left: -2.5%; top: -4%; }
.bolha.contato-card { width: 310px; max-width: 88%; padding: 0; overflow: hidden; }
.contato-card-linha { display:flex; align-items:center; gap:13px; padding:15px 15px 14px; }
.contato-card-avatar { width:52px; height:52px; border-radius:22%; overflow:hidden; flex-shrink:0; }
.contato-card-avatar .avatar { display:block; width:100%; height:100%; object-fit:contain; font-size:15px; }
.contato-card-detalhes { min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.contato-card-detalhes strong { font-size:15.5px; font-weight:650; overflow-wrap:anywhere; }
.contato-card-profissao, .contato-card-cidade { font-size:13px; color:var(--ch-sub)!important; }
.contato-card-conversar { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border:0; border-top:1px solid var(--ch-linha); background:transparent; color:var(--ch-acento)!important; font-size:15px; font-weight:600; cursor:pointer; }
.contato-card-conversar svg { width:18px; height:18px; color:var(--ch-acento); }
.contato-card button:disabled { opacity:.5; }
.chat-confirmar { padding:13px 14px 10px; border-top:1px solid var(--ch-linha); }
.chat-confirmar p { margin:0; font-size:13.5px; line-height:1.35; }
.chat-confirmar-opcoes { display:flex; gap:8px; margin-top:10px; }
.chat-confirmar-opcoes button { flex:1; min-height:40px; padding:7px 6px; border:1px solid var(--ch-linha); border-radius:10px; background:var(--ch-botao); color:var(--ch-texto); font-size:12.5px; font-weight:600; cursor:pointer; }
.chat-confirmar-secundario { display:block; margin:4px auto 0; padding:8px 10px; border:0; background:transparent; color:var(--ch-sub)!important; font-size:12px; cursor:pointer; }
.chat-confirmar [data-agradecimento] { color:var(--ch-acento)!important; font-weight:600; text-align:center; }
.chat-confirmar .chat-confirmar-erro { margin-top:8px; color:var(--ch-erro)!important; font-size:12px; }