/**
 * Chat do site, estilos do widget.
 *
 * Tudo aqui e prefixado com .forwc- porque o widget entra em tema de loja, onde regras
 * genericas (button, input, ul) sao reescritas o tempo todo. As propriedades que o tema
 * costuma atropelar (font, box-sizing, line-height) sao declaradas de novo de proposito.
 *
 * As cores saem de variaveis para o painel do WordPress conseguir trocar a marca sem
 * reescrever regra nenhuma.
 */

.forwc-raiz {
    --forwc-cor: #25D366;
    --forwc-cor-texto: #fff;
    --forwc-fundo: #fff;
    --forwc-texto: #1f2328;
    --forwc-cinza: #667085;
    --forwc-borda: #e6e8eb;
    --forwc-bolha-loja: #f2f4f7;
    --forwc-largura: 380px;
    --forwc-altura: 620px;
}

/* ============================ botao flutuante ============================ */

.forwc-botao {
    position: fixed;
    /* Logo abaixo do balao de stories (999999), que fica no canto oposto: assim os dois
       convivem sem disputa e nenhum tapa o outro. */
    z-index: 999998;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
    background: var(--forwc-cor);
    color: var(--forwc-cor-texto);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

/* O dedo que comeca no botao arrasta o botao, nao rola a pagina. */
.forwc-botao { touch-action: none; }

/* Enquanto arrasta, sem transicao: com ela o botao persegue o dedo com atraso. */
.forwc-botao.forwc-arrastando {
    transition: none;
    cursor: grabbing;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    /* Avisa o navegador de que left e top vao mudar a cada quadro. Sem isso o
       celular recalcula o desenho do zero e o botao anda aos saltos. */
    will-change: left, top;
}

.forwc-botao:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.forwc-botao:active { transform: scale(.97); }
.forwc-botao svg { width: 58%; height: 58%; fill: currentColor; pointer-events: none; }

/* Contador de mensagens novas com o painel fechado. */
.forwc-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e5484d;
    color: #fff;
    font: 700 11px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px var(--forwc-fundo);
}

.forwc-badge[hidden] { display: none; }

/* ============================ painel ============================ */

.forwc-painel {
    position: fixed;
    /* Acima do balao de stories (999999). No celular a conversa ocupa a tela inteira, e sem
       isso o balao ficava flutuando por cima das mensagens. */
    z-index: 1000001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--forwc-fundo);
    color: var(--forwc-texto);
    font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    box-sizing: border-box;
}

.forwc-painel * { box-sizing: border-box; }
.forwc-painel[hidden] { display: none; }

/* Desktop: painel lateral ancorado no canto do botao, sem cobrir a loja. */
@media (min-width: 769px) {
    .forwc-painel {
        width: var(--forwc-largura);
        height: min(var(--forwc-altura), calc(100vh - 120px));
        border-radius: 16px;
        animation: forwc-sobe .2s ease-out;
    }
}

/* Mobile: tela cheia, que e o unico jeito de digitar confortavel com o teclado aberto. */
@media (max-width: 768px) {
    .forwc-painel {
        inset: 0 !important;
        width: 100%;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
        animation: forwc-entra .18s ease-out;
    }
}

@keyframes forwc-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes forwc-entra { from { opacity: 0; } to { opacity: 1; } }

/* ============================ cabecalho ============================ */

.forwc-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--forwc-cor);
    color: var(--forwc-cor-texto);
    flex: 0 0 auto;
}

.forwc-topo-txt { flex: 1 1 auto; min-width: 0; }
.forwc-topo-titulo { font-weight: 600; font-size: 15px; margin: 0; }
.forwc-topo-sub { font-size: 12px; opacity: .9; margin: 2px 0 0; }

.forwc-fechar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: inherit;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forwc-fechar:hover { background: rgba(255, 255, 255, .3); }

/* Sino de ligar o aviso de resposta. Mesmo desenho do fechar para nao competir com ele. */
.forwc-sino {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forwc-sino svg { width: 17px; height: 17px; fill: currentColor; }
.forwc-sino:hover { background: rgba(255, 255, 255, .3); }
.forwc-sino:disabled { opacity: .6; cursor: default; }
/* O display:flex acima venceria o hidden nativo. */
.forwc-sino[hidden] { display: none; }

/* ============================ corpo ============================ */

.forwc-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    background: var(--forwc-fundo);
    -webkit-overflow-scrolling: touch;
}

.forwc-intro {
    font-size: 14px;
    color: var(--forwc-cinza);
    margin: 0 0 16px;
}

/* --- formulario --- */

.forwc-campo { margin-bottom: 12px; }

.forwc-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--forwc-texto);
}

.forwc-campo input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--forwc-borda);
    border-radius: 10px;
    font-size: 16px; /* 16px evita o zoom automatico do iOS ao focar */
    font-family: inherit;
    color: var(--forwc-texto);
    background: #fff;
    outline: none;
}

.forwc-campo input:focus { border-color: var(--forwc-cor); box-shadow: 0 0 0 3px rgba(0, 0, 0, .05); }
.forwc-campo input[aria-invalid="true"] { border-color: #e5484d; }

.forwc-erro { color: #e5484d; font-size: 12px; margin: 4px 0 0; min-height: 1em; }

.forwc-enviar-dados {
    width: 100%;
    height: 46px;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    background: var(--forwc-cor);
    color: var(--forwc-cor-texto);
    font: 600 15px/1 inherit;
    font-family: inherit;
    cursor: pointer;
}

.forwc-enviar-dados:disabled { opacity: .6; cursor: default; }

.forwc-aviso { font-size: 11px; color: var(--forwc-cinza); margin: 12px 0 0; line-height: 1.5; }
.forwc-aviso a { color: inherit; text-decoration: underline; }

/* --- conversa --- */

.forwc-msg { display: flex; margin-bottom: 10px; }
.forwc-msg-visitante { justify-content: flex-end; }

.forwc-bolha {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.forwc-msg-loja .forwc-bolha {
    background: var(--forwc-bolha-loja);
    color: var(--forwc-texto);
    border-bottom-left-radius: 4px;
}

.forwc-msg-visitante .forwc-bolha {
    background: var(--forwc-cor);
    color: var(--forwc-cor-texto);
    border-bottom-right-radius: 4px;
}

.forwc-hora { display: block; font-size: 10.5px; opacity: .65; margin-top: 3px; text-align: right; }

/* --- anexos --- */

.forwc-anexo-img {
    margin: -3px 0 6px;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
}

.forwc-anexo-img img,
.forwc-anexo-img video {
    display: block;
    width: 100%;
    max-width: 240px;
    max-height: 300px;
    object-fit: cover;
    background: rgba(0, 0, 0, .06);
}

/* Video precisa mostrar a barra de controle inteira, entao nao pode ser cortado. */
.forwc-anexo-img video { object-fit: contain; background: #000; }

.forwc-anexo-arq {
    display: inline-block;
    margin-bottom: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .07);
    color: inherit;
    text-decoration: none;
    font-size: 13.5px;
    word-break: break-all;
}

.forwc-anexo-arq:hover { text-decoration: underline; }

.forwc-clipe {
    flex: 0 0 auto;
    width: 38px;
    height: 42px;
    border: 0;
    background: none;
    color: var(--forwc-cinza);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.forwc-clipe:hover { color: var(--forwc-texto); }
.forwc-clipe:disabled { opacity: .5; cursor: default; }
.forwc-clipe svg { width: 22px; height: 22px; fill: currentColor; }

.forwc-dia {
    text-align: center;
    font-size: 11px;
    color: var(--forwc-cinza);
    margin: 14px 0 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.forwc-status { text-align: center; font-size: 12px; color: var(--forwc-cinza); padding: 8px 0; }

/* Aviso de fora do horario: presente, mas sem alarme. Nao bloqueia o envio. */
.forwc-fechado {
    background: #fff8e6;
    border: 1px solid #f5e0a3;
    color: #6b5310;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 14px;
}

/* ============================ rodape ============================ */

.forwc-rodape {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--forwc-borda);
    background: var(--forwc-fundo);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.forwc-rodape[hidden] { display: none; }

.forwc-texto {
    flex: 1 1 auto;
    min-height: 42px;
    max-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--forwc-borda);
    border-radius: 21px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.35;
    color: var(--forwc-texto);
    background: #fff;
    resize: none;
    outline: none;
}

.forwc-texto:focus { border-color: var(--forwc-cor); }

.forwc-enviar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--forwc-cor);
    color: var(--forwc-cor-texto);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forwc-enviar:disabled { opacity: .5; cursor: default; }
.forwc-enviar svg { width: 20px; height: 20px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .forwc-botao, .forwc-painel { transition: none; animation: none; }
}

/* --- citacao, tiques e responder --- */

.forwc-citacao {
    display: block;
    margin: -2px 0 6px;
    padding: 6px 8px;
    border-left: 3px solid currentColor;
    border-radius: 6px;
    background: rgba(0, 0, 0, .07);
    font-size: 12.5px;
    line-height: 1.35;
    opacity: .92;
}

.forwc-msg-visitante .forwc-citacao { background: rgba(255, 255, 255, .18); }

.forwc-citacao-quem { display: block; font-weight: 600; font-size: 11.5px; margin-bottom: 1px; }
.forwc-citacao-txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forwc-tique { margin-left: 4px; letter-spacing: -1px; }
.forwc-tique-lido { color: #53bdeb; }

/* O botao de responder vive AO LADO da bolha. Dentro dela ele cobria o texto de mensagem
   curta e se perdia no conteudo. */
.forwc-msg { align-items: center; gap: 5px; }

.forwc-responder {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: var(--forwc-cinza);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}

.forwc-responder svg { width: 16px; height: 16px; fill: currentColor; }
.forwc-responder:hover { background: rgba(0, 0, 0, .12); color: var(--forwc-texto); }

/* Passar o mouse em qualquer parte da linha revela o botao, e nao so em cima da bolha:
   o alvo fica maior e a descoberta, mais facil. */
.forwc-msg:hover .forwc-responder,
.forwc-responder:focus { opacity: 1; }

/* No celular nao existe passar o mouse, entao o botao fica sempre visivel. O toque longo
   na bolha continua funcionando como atalho. */
@media (hover: none) {
    .forwc-responder { opacity: .55; }
}

.forwc-resp-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--forwc-borda);
    background: #f7f9fc;
    font-size: 12.5px;
    color: var(--forwc-texto);
}

.forwc-resp-txt {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 3px solid var(--forwc-cor);
    padding-left: 8px;
}

.forwc-resp-x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .07);
    color: var(--forwc-cinza);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

/* --- convite para ligar a notificacao --- */

.forwc-convite {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #eef4ff;
    border-bottom: 1px solid #d7e3fb;
    font-size: 12.5px;
    line-height: 1.35;
    color: #1c3d70;
}

.forwc-convite-txt { flex: 1 1 auto; min-width: 0; }

.forwc-convite-sim {
    flex: 0 0 auto;
    border: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--forwc-cor);
    color: var(--forwc-cor-texto);
    font: 600 12.5px/1 inherit;
    font-family: inherit;
    cursor: pointer;
}

.forwc-convite-sim:disabled { opacity: .6; cursor: default; }

.forwc-convite-nao {
    flex: 0 0 auto;
    border: 0;
    padding: 6px 8px;
    background: none;
    color: #5a7296;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Formatacao do WhatsApp dentro da bolha. O riscado precisa de cor propria para nao
   sumir no fundo verde das mensagens da cliente. */
.forwc-bolha strong { font-weight: 700; }
.forwc-bolha em { font-style: italic; }
.forwc-bolha s { opacity: .75; }

/* Endereco dentro da bolha. Herda a cor do texto para contrastar nos dois fundos (o cinza
   da loja e a cor da marca na mensagem da cliente) e se anuncia pelo sublinhado. */
.forwc-bolha a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.forwc-bolha a:hover { opacity: .8; }