/* Meu CDN, TRAVESSIA v4, página ATENDIMENTO: o momento assinatura (4 canais → 1 caixa) e os blocos próprios
   (caixa de entrada de exemplo, IA, ficha do cliente, do site para o chat). Base = versão parada; html.mov = palco preso.
   O movimento está em assets/js/pg/atendimento.js (p de 0 a 1: as fotos entram, as mensagens voam até a caixa, o
   buldogue responde). */

/* =========================================================================================================
   MOMENTO ASSINATURA: de onde o cliente escrever, a conversa cai no mesmo lugar
   ========================================================================================================= */
.at-conv { position: relative; background: radial-gradient(55% 60% at 72% 46%, rgb(139 43 226 / .22), transparent 70%), radial-gradient(40% 40% at 18% 80%, rgb(240 0 208 / .1), transparent 70%), #0a0517; }
.at-conv__palco { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 56px; max-width: 1320px; margin: 0 auto; padding: clamp(80px, 9vw, 128px) var(--lado) 24px; }
.at-conv__luz { display: none; }
.at-conv__titulo { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.at-conv__passos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: p; }
.at-conv__passos li { position: relative; counter-increment: p; padding: 12px 0 12px 44px; border-top: 1px solid rgb(255 255 255 / .1); }
.at-conv__passos li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 800 .8rem/1 var(--fonte); letter-spacing: .1em; color: var(--magenta); }
.at-conv__passos b { display: block; font-size: 1.04rem; font-weight: 800; }
.at-conv__passos span { display: block; margin-top: 4px; color: var(--tinta-2); font-size: .94rem; line-height: 1.5; }
.at-conv__mundo { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start; }
.at-conv__origens { display: contents; list-style: none; margin: 0; padding: 0; }
.at-origem { position: relative; }
.at-origem__foto { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 26px 50px -26px rgb(0 0 0 / .9); background: #1a1030; }
.at-origem__foto img { width: 100%; height: 100%; object-fit: cover; }
.at-origem__foto figcaption { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: 99px; background: rgb(12 6 28 / .78); font: 700 .78rem/1 var(--fonte); color: #fff; }
.at-origem__marca { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.at-origem__marca .mc { width: 15px; height: 15px; }
.at-origem__marca--app .mc { width: 22px; height: 22px; }
.at-bolha { position: relative; margin-top: 10px; padding: 10px 12px 10px 34px; border-radius: 14px 14px 14px 4px; background: #fff; color: #1d1530; font: 600 .84rem/1.35 var(--fonte); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .8); }
.at-bolha .mc { position: absolute; left: 10px; top: 11px; width: 16px; height: 16px; }
.at-bolha .mc--app { width: 18px; height: 18px; left: 9px; }
.at-caixa { grid-column: 1 / -1; position: relative; border-radius: 16px; overflow: hidden; background: #f6f3fb; color: #1d1530; font-family: var(--fonte); box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 40px 90px -40px rgb(0 0 0 / .95), 0 0 110px -40px rgb(240 0 208 / .45); }
.at-conv__boris { display: none; }
.at-conv__conta { display: none; }
.at-conv__nota { max-width: 1320px; margin: 0 auto; padding: 0 var(--lado) 56px; }

/* caixa de entrada de exemplo (também usada no bloco "do site para o chat") */
.at-caixa__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; background: #fff; border-bottom: 1px solid #e6dff0; font-size: .92rem; }
.at-caixa__filtros { display: inline-flex; align-items: center; gap: 10px; }
.at-caixa__filtros span { padding: 4px 10px; border-radius: 99px; background: #efe9f7; font: 700 .72rem/1 var(--fonte); color: #5d5275; }
.at-caixa__filtros span.is-on { background: #1d1530; color: #fff; }
.at-caixa__filtros .mc { width: 16px; height: 16px; }
.at-caixa__corpo { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 0; }
.at-caixa__lista { list-style: none; margin: 0; padding: 6px; border-right: 1px solid #e6dff0; background: #fbf9fe; display: grid; align-content: start; gap: 4px; }
.at-linha { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; color: #1d1530; font-family: var(--fonte); }
.at-linha.is-sel { background: #efe6ff; box-shadow: inset 3px 0 0 #8b2be2; }
.at-linha__canal { display: grid; place-items: center; width: 22px; height: 22px; }
.at-linha__canal .mc { width: 20px; height: 20px; }
.at-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--degrade); color: #fff; font: 800 .76rem/1 var(--fonte); }
.at-linha__q { min-width: 0; }
.at-linha__q b { display: block; font-size: .84rem; line-height: 1.2; }
.at-linha__q span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .76rem; color: #6f6585; }
.at-linha__lado { display: grid; justify-items: end; gap: 4px; }
.at-linha__lado time { font: 600 .68rem/1 var(--fonte); color: #8a80a0; }
.at-caixa__conversa { padding: 12px 14px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-height: 260px; overflow: hidden; background: #f6f3fb; }
.at-caixa__quem { display: flex; align-items: center; gap: 8px; margin: 0 0 auto; padding-bottom: 10px; border-bottom: 1px solid #e6dff0; font-size: .86rem; }
.at-caixa__quem .mc { width: 18px; height: 18px; }
.at-caixa__quem small { color: #7d7393; font-size: .72rem; }
.at-caixa .sv-msg { font-size: .82rem; }

/* ---------- com movimento: o palco preso ---------- */
html.mov .at-conv__palco { display: block; max-width: none; height: var(--alto); min-height: 640px; padding: 0; overflow: hidden; }
html.mov .at-conv__luz { display: block; position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(38% 42% at 66% 50%, rgb(240 0 208 / .18), transparent 70%); will-change: transform, opacity; }
html.mov .at-conv__texto { position: absolute; z-index: 3; left: var(--lado); top: calc(var(--cab) + 20px); bottom: 36px; width: min(430px, 30vw); display: flex; flex-direction: column; justify-content: center; }
html.mov .at-conv__passos li { opacity: .42; transition: opacity .4s ease; }
html.mov .at-conv__passos li.is-agora { opacity: 1; }
html.mov .at-conv__passos li.is-agora::before { color: #fff; text-shadow: 0 0 12px rgb(240 0 208 / .9); }
html.mov .at-conv__mundo { display: block; position: absolute; left: calc(var(--lado) + min(430px, 30vw) + 44px); right: var(--lado); top: calc(var(--cab) + 18px); bottom: 26px; }
html.mov .at-origem { position: absolute; z-index: 2; width: 19%; will-change: transform, opacity; }
html.mov .at-origem--wa { left: 0; top: 0; }
html.mov .at-origem--ig { right: 0; top: 2%; }
html.mov .at-origem--ms { left: 0; bottom: 3%; }
html.mov .at-origem--app { right: 0; top: 43%; }
html.mov .at-bolha { position: absolute; z-index: 4; width: 215px; margin: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
html.mov .at-origem--wa .at-bolha { left: 84%; top: 62%; }
html.mov .at-origem--ig .at-bolha { right: 84%; top: 66%; border-radius: 14px 14px 4px 14px; }
html.mov .at-origem--ms .at-bolha { left: 84%; top: 14%; }
html.mov .at-origem--app .at-bolha { right: 84%; top: 30%; border-radius: 14px 14px 4px 14px; }
html.mov .at-caixa { position: absolute; z-index: 1; left: 14%; right: 21%; top: 13%; bottom: 14%; display: flex; flex-direction: column; will-change: transform, opacity; }
html.mov .at-caixa__corpo { flex: 1; }
html.mov .at-caixa__conversa { min-height: 0; }
html.mov .at-linha[data-k] { will-change: opacity, transform; }
html.mov .at-caixa [data-fala] { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--saida); }
html.mov .at-caixa [data-fala].on { opacity: 1; transform: none; }
html.mov .at-conv__boris { display: block; position: absolute; z-index: 3; right: 0; bottom: 0; height: 32%; width: auto; max-width: none; filter: drop-shadow(-12px 14px 24px rgb(4 2 12 / .7)); will-change: transform, opacity; }
html.mov .at-conv__conta { display: block; position: absolute; z-index: 3; left: 23%; bottom: 5%; font: 700 .86rem/1 var(--fonte); color: var(--tinta-2); }
html.mov .at-conv__conta b { color: #fff; font-size: 1.1rem; }
html.mov .at-conv__nota { position: absolute; right: var(--lado); bottom: 10px; padding: 0; margin: 0; z-index: 3; }
.at-linha.is-chegou { animation: at-chega .9s var(--saida); }
@keyframes at-chega { 0% { background: #ffe0f7; } 100% { background: transparent; } }
.at-linha.is-sel.is-chegou { animation: none; }

/* =========================================================================================================
   IA: o buldogue com a IA atrás da conversa
   ========================================================================================================= */
.at-ia__figura { display: grid; justify-items: end; padding-top: 30px; }
.at-ia__boris { position: absolute; left: 0; bottom: 0; height: min(420px, 92%); width: auto; max-width: none; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .5)); }
.at-ia__chat { position: relative; width: min(400px, 78%); }

/* =========================================================================================================
   FICHA DO CLIENTE AO LADO DA CONVERSA
   ========================================================================================================= */
.at-ficha__tela { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 40px 90px -40px rgb(0 0 0 / .95); }
.at-ficha__conversa { border-radius: 0; box-shadow: none; }
.at-ficha__lado { padding: 16px; background: #fff; color: #1d1530; font-family: var(--fonte); border-left: 1px solid #e6dff0; }
.at-ficha__nome b { display: block; font-size: .98rem; }
.at-ficha__nome span { font-size: .74rem; color: #7d7393; }
.at-ficha__dados { margin: 12px 0; display: grid; gap: 8px; }
.at-ficha__dados div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e6dff0; }
.at-ficha__dados dt { font: 700 .72rem/1.2 var(--fonte); letter-spacing: .04em; color: #7d7393; }
.at-ficha__dados dd { margin: 0; font: 700 .8rem/1.2 var(--fonte); text-align: right; }
.at-ficha__acoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.at-ficha__acoes li { padding: 8px; border-radius: 9px; background: #f1ebfa; color: #4b2a8a; font: 800 .72rem/1.25 var(--fonte); text-align: center; }
.at-ficha__ramo { margin-top: 14px; }

/* =========================================================================================================
   DO SITE PARA O CHAT
   ========================================================================================================= */
.at-site__obs { margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--ambar); font-size: .98rem; }
.at-site__fluxo { display: grid; justify-items: center; gap: 14px; }
.at-site__form { width: min(380px, 100%); padding: 14px 16px 16px; border-radius: 16px; background: #fff; color: #1d1530; font-family: var(--fonte); box-shadow: 0 34px 70px -36px rgb(0 0 0 / .95); }
.at-site__url { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 10px; border-radius: 8px; background: #f1edf7; font: 600 .74rem/1 var(--fonte); color: #6f6585; }
.at-site__url svg { width: 13px; height: 13px; fill: none; stroke: #0c7a43; stroke-width: 1.6; }
.at-site__campo { display: grid; gap: 3px; margin-bottom: 9px; }
.at-site__campo span { font: 700 .68rem/1 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: #8a80a0; }
.at-site__campo b { padding: 8px 10px; border-radius: 8px; border: 1px solid #e3dcee; font-size: .84rem; font-weight: 600; }
.at-site__enviar { margin-top: 4px; padding: 10px; border-radius: 10px; background: var(--degrade); color: #fff; font-weight: 800; text-align: center; font-size: .88rem; }
.at-site__seta { width: 2px; height: 46px; background: linear-gradient(var(--magenta), var(--azul)); position: relative; }
.at-site__seta::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 10px; height: 10px; border: solid var(--azul); border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); }
.at-site__linha { width: min(400px, 100%); background: #fff; box-shadow: 0 0 0 2px rgb(240 0 208 / .5), 0 24px 50px -24px rgb(0 0 0 / .9); }

/* =========================================================================================================
   COMPUTADOR MAIS ESTREITO
   ========================================================================================================= */
@media (min-width: 761px) and (max-width: 1180px) {
  html.mov .at-conv__texto { width: min(360px, 32vw); }
  html.mov .at-conv__mundo { left: calc(var(--lado) + min(360px, 32vw) + 28px); }
  html.mov .at-bolha { width: 180px; font-size: .78rem; }
  html.mov .at-caixa { left: 12%; right: 12%; }
  .at-caixa__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .at-linha__lado .sv-tag { display: none; }
}

/* =========================================================================================================
   CELULAR (até 760 px ou tela em pé): layout próprio
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .at-conv__palco { grid-template-columns: 1fr; padding: 72px 16px 16px; gap: 24px; }
  .at-conv__mundo { grid-template-columns: 1fr 1fr; gap: 12px; }
  .at-caixa__corpo { grid-template-columns: 1fr; }
  .at-caixa__lista { border-right: 0; border-bottom: 1px solid #e6dff0; }
  .at-caixa__conversa { min-height: 0; }
  .at-caixa__filtros .mc { display: none; }
  /* o filtro encosta no título: o canto direito fica para o Boris, que chega por cima da caixa */
  .at-caixa__topo { justify-content: flex-start; }
  .at-conv__nota { padding: 0 16px 40px; }

  html.mov .at-conv__palco { min-height: 600px; padding: 0; }
  html.mov .at-conv__texto { left: 16px; right: 16px; top: calc(var(--cab) + 6px); bottom: auto; width: auto; display: block; }
  html.mov .at-conv__texto .rotulo { font-size: .66rem; }
  html.mov .at-conv__titulo { font-size: clamp(1.32rem, 5.9vw, 1.6rem); margin: 6px 0 8px; }
  html.mov .at-conv__passos { position: relative; height: 4.6em; margin: 0; }
  html.mov .at-conv__passos li { position: absolute; inset: 0; padding: 0 0 0 30px; border: 0; opacity: 0; }
  html.mov .at-conv__passos li.is-agora { opacity: 1; }
  html.mov .at-conv__passos li::before { top: 2px; }
  html.mov .at-conv__passos b { font-size: .9rem; }
  html.mov .at-conv__passos span { font-size: .8rem; line-height: 1.38; margin-top: 2px; }
  html.mov .at-conv__mundo { left: 16px; right: 16px; top: calc(var(--cab) + 182px); bottom: 70px; }   /* o pé fica livre para o selo fixo */
  html.mov .at-origem { width: 22.6%; top: 0; bottom: auto; right: auto; }
  html.mov .at-origem--wa { left: 0; }
  html.mov .at-origem--ig { left: 25.8%; top: 0; }
  html.mov .at-origem--ms { left: 51.6%; bottom: auto; }
  html.mov .at-origem--app { left: auto; right: 0; top: 0; }
  html.mov .at-origem__foto { border-radius: 10px; }
  html.mov .at-origem__foto figcaption { left: 4px; bottom: 4px; padding: 3px; font-size: 0; gap: 0; }
  html.mov .at-bolha, html.mov .at-origem--ig .at-bolha, html.mov .at-origem--ms .at-bolha, html.mov .at-origem--app .at-bolha {
    left: 0; right: auto; top: 104%; width: 100%; max-height: calc(2.5em + 12px); padding: 6px 7px 6px 24px; border-radius: 10px; font-size: .62rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html.mov .at-bolha .mc { left: 6px; top: 7px; width: 13px; height: 13px; }
  html.mov .at-caixa { left: 0; right: 0; top: 29%; bottom: 0; }
  html.mov .at-caixa__corpo { display: flex; flex-direction: column; }
  html.mov .at-caixa__lista { padding: 4px; gap: 2px; }
  html.mov .at-linha { padding: 5px 8px; gap: 7px; }
  html.mov .at-linha__lado time { display: none; }
  html.mov .at-av { width: 26px; height: 26px; font-size: .64rem; }
  html.mov .at-linha__lado .sv-tag { display: none; }
  html.mov .at-caixa__conversa { flex: 1; padding: 8px 10px 10px; gap: 5px; }
  html.mov .at-caixa__quem { padding-bottom: 6px; font-size: .8rem; }
  html.mov .at-caixa .sv-msg { font-size: .74rem; padding: 7px 10px 6px; }
  html.mov .at-conv__boris { right: 4px; bottom: auto; top: calc(29% - 70px); height: 92px; z-index: 2; }
  html.mov .at-conv__conta { display: none; }
  html.mov .at-conv__nota { display: none; }

  .at-ia__figura { justify-items: center; padding-top: 140px; }
  .at-ia__boris { left: 50%; top: 0; bottom: auto; height: 190px; transform: translateX(-90%); }
  .at-ia__chat { width: 100%; }
  .at-ficha__tela { grid-template-columns: 1fr; }
  .at-ficha__lado { border-left: 0; border-top: 1px solid #e6dff0; }
}