/*
 * O portal do devedor em tela de celular.
 *
 * O dono relatou que o portal "zoa em alguns tipos de tela de celular". Medido em 30/09/2026 com
 * `testes/e2e/responsivo_e2e.py`, nas larguras 320 a 768 e em paisagem: a pagina inicial ficava
 * com 680 px de largura numa tela de 320, o login empurrava o formulario para fora da tela ate em
 * 768, o menu de celular nunca aparecia, e o card da divida espremia o nome do credor em "FU...".
 *
 * ## Por que quase tudo isso e UMA folha que faltou
 *
 * O bundle usa classes que nenhuma folha define: `sc-desktop`, `sc-mobile`, `sc-hero-grid`,
 * `sc-auth-left`, `sc-steps-grid`... O botao de menu nasce com `display:none` INLINE -- so uma regra
 * de celular o mostraria. O CSS responsivo do fonte ficou fora do build, e o fonte nao existe mais
 * (ver `api-espelho.js`). A secao 1 abaixo devolve essas regras, ancorada nas classes do proprio
 * bundle.
 *
 * ## Como o resto se ancora
 *
 * As telas logadas nao tem classe nenhuma: e tudo estilo inline. As ancoras sao, nesta ordem de
 * preferencia, `aria-label`/`alt`/`role` (estaveis), e trechos do proprio estilo inline, na forma
 * como o navegador os serializa (`[style*="padding: 12px 22px"]`). Duas cautelas:
 *
 * - Todo seletor por estilo inline e ESCOPADO pela area da rota (`html[data-sc-area=...]`, posta
 *   pelo `responsivo.js`): `repeat(3, 1fr)` tambem existe no admin, e regra de celular do devedor
 *   nao tem nada que fazer la.
 * - Nunca ancorar em `calc(...)`: o Chrome reescreve `calc(100vh - 64px)` como `calc(-64px + 100vh)`
 *   (medido), e nada garante que outro navegador escreva igual. Propriedade simples (`padding`, `gap`,
 *   `white-space`) nao tem essa ambiguidade.
 *
 * `!important` so onde ha estilo inline a vencer. Tudo fica dentro de media query, menos o chat e o
 * QR (secoes 3 e 5), que em desktop resultam no mesmo valor que o bundle ja tinha (`dvh` = `vh`,
 * teclado 0, QR que ja cabe) -- `testes/responsivo.test.mjs` confere isso. Em 1280 px com mouse a
 * tela fica igual (conferido por print antes/depois); em aparelho de toque vale tambem a secao 4.
 *
 * Se uma ancora deixar de casar (um `dist/` novo, por exemplo), a regra simplesmente nao se aplica
 * e a tela volta a ser o que era -- nada quebra por causa desta folha.
 *
 * ESTE ARQUIVO E PROVISORIO, como os shims deste `dist/`: o lugar dele e o CSS do front. Quando o
 * front for recompilado com layout responsivo, apague-o com o `responsivo.js` e as linhas do index.
 */

/* ============================================================================================
 * 1. A folha que faltou: as classes `sc-*` do bundle
 * ========================================================================================== */

/*
 * Menu das paginas publicas. Os seis links + "Quero negociar" precisam de ~960 px; abaixo disso eles
 * quebravam em duas linhas (768) ou vazavam 360 px para fora da tela (320). O botao hamburguer e o
 * overlay ja existiam no bundle -- so nao havia regra para mostra-los.
 */
@media (max-width: 1023px) {
  nav .sc-desktop {
    display: none !important;
  }
  nav .sc-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* 22 px de icone + 4 de padding = 30 px de alvo; 44 e o minimo para o dedo (WCAG 2.5.5). A
       margem negativa devolve o que cresceu, e o icone fica onde estava. */
    min-width: 44px;
    min-height: 44px;
    margin-right: -7px;
  }
  /* O overlay aberto: em paisagem (375 px de altura) os links nao cabem, e ele nao rolava. */
  nav:has(> .sc-mobile) > div[style*="position: fixed"] {
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 8px !important;
  }
  /* Cada link com a altura do dedo, e so a largura do texto: esticado, o fim da linha ficava
     embaixo do botao do chat e o toque ali caia no chat. */
  nav:has(> .sc-mobile) > div[style*="position: fixed"] > a {
    display: flex;
    align-items: center;
    align-self: flex-start;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 600px) {
  /* 48 px de cada lado comiam 30% de uma tela de 320. */
  nav:has(> .sc-mobile) {
    padding: 0 16px !important;
  }
}

/*
 * Hero da pagina inicial: duas colunas (60%/40%) e um titulo de 56 px. Em 320 a palavra
 * "Negociacao" sozinha passava da borda, e o card de exemplo ficava cortado em 768. Em uma coluna o
 * card de exemplo sai (e `sc-desktop` por desenho: e ilustracao, e o formulario de CPF logo abaixo
 * do titulo e o que a pessoa usa).
 */
@media (max-width: 900px) {
  .sc-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 56px 24px !important;
    min-height: 0 !important;
  }
  .sc-hero-grid .sc-desktop {
    display: none !important;
  }
  .sc-hero-grid h1 {
    font-size: clamp(34px, 9vw, 56px) !important;
    overflow-wrap: break-word;
  }
}

@media (max-width: 560px) {
  .sc-hero-grid {
    padding: 40px 16px 48px !important;
  }
}

/* Os 4 passos, os depoimentos e o rodape: grades de 3-4 colunas fixas, que em 320 davam colunas de
   40 px e texto vazando por cima da coluna vizinha. */
@media (max-width: 900px) {
  .sc-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  /* O tracejado entre um passo e o proximo so faz sentido com os 4 na mesma linha. */
  .sc-step-line {
    display: none !important;
  }
  .sc-testi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .sc-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }
  .sc-padded {
    padding: 64px 24px !important;
  }
  footer.sc-padded {
    padding: 48px 24px 32px !important;
  }
}

@media (max-width: 560px) {
  .sc-steps-grid,
  .sc-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .sc-padded {
    padding: 48px 16px !important;
  }
  footer.sc-padded {
    padding: 40px 16px 24px !important;
  }
}

/*
 * Login (`/entrar`): o painel escuro tem `flex: 0 0 62%` fixo. Em 768 sobravam 292 px para o
 * formulario, que tem 40 px de padding dele e 40 do cartao -- os campos saiam da tela; em 320 o
 * formulario comecava em x=198. Em celular o painel vira uma faixa com a marca, e o formulario ocupa
 * a largura toda. Manchete, lista e numeros saem: repetem a pagina inicial e empurravam o
 * formulario para baixo da dobra.
 */
@media (max-width: 900px) {
  div:has(> .sc-auth-left) {
    flex-direction: column !important;
  }
  .sc-auth-left {
    flex: none !important;
    padding: 16px 20px !important;
  }
  /* Filhos do painel, na ordem do bundle: 2 circulos decorativos, a marca, a manchete, os numeros. */
  .sc-auth-left > :not(:nth-child(3)) {
    display: none !important;
  }
  .sc-auth-left img {
    height: 32px !important;
  }
  .sc-auth-right {
    flex: 1 0 auto !important;
    justify-content: flex-start !important;
    padding: 32px 24px 48px !important;
  }
  /* Sem o painel ao lado, o cartao esticaria a 720 px em tablet -- tres campos numa faixa larga.
     480 e perto dos ~406 px que ele tem no desktop. */
  .sc-auth-right > div:first-child {
    max-width: 480px;
  }
}

@media (max-width: 560px) {
  .sc-auth-right {
    padding: 20px 16px 40px !important;
  }
  /* O cartao do formulario: 40 px de padding em volta de campos de 230 px. */
  .sc-auth-right > div:first-child {
    padding: 24px 20px !important;
  }
}

/* ============================================================================================
 * 2. Paginas publicas: grades e secoes com estilo inline (sem classe)
 * ========================================================================================== */

@media (max-width: 900px) {
  /* "Sobre" (missao ao lado dos numeros) e "Como negociar" (indice fixo de 340 px ao lado). */
  html[data-sc-area="publico"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"],
  html[data-sc-area="publico"] [style*="grid-template-columns: 340px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  /* Diferenciais, pilares de seguranca, canais de atendimento (3) e parceiros (4). */
  html[data-sc-area="publico"] [style*="grid-template-columns: repeat(3, 1fr)"],
  html[data-sc-area="publico"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Secoes e cabecalho das paginas internas: os mesmos 48 px laterais do hero. */
  html[data-sc-area="publico"] [style*="padding: 80px 48px"],
  html[data-sc-area="publico"] [style*="padding: 72px 48px"],
  html[data-sc-area="publico"] [style*="padding: 64px 48px"] {
    padding: 56px 24px !important;
  }
  html[data-sc-area="publico"] [style*="padding: 0px 48px 80px"] {
    padding: 0 24px 56px !important;
  }
  /* Titulo do cabecalho das paginas internas (52 px) e os h2 de 40-44 px das secoes. */
  html[data-sc-area="publico"] h1[style*="font-size: 52px"] {
    font-size: clamp(32px, 8vw, 52px) !important;
  }
  html[data-sc-area="publico"] h2[style*="font-size: 40px"],
  html[data-sc-area="publico"] h2[style*="font-size: 44px"] {
    font-size: clamp(28px, 7vw, 44px) !important;
  }
}

@media (max-width: 560px) {
  /* E-mail e endereco de contato nao tem onde quebrar e passavam da borda do cartao. `break-word`
     so quebra a palavra que nao cabe -- e nao mexe no tamanho minimo das caixas, como `anywhere`
     mexeria. So nas paginas publicas: nas telas do devedor isso partiria VALOR no meio
     ("R$ 296.296,2" / "9"), e la a correcao e a fonte (secao 3). */
  html[data-sc-area="publico"] #root {
    overflow-wrap: break-word;
  }
  html[data-sc-area="publico"] [style*="grid-template-columns: repeat(3, 1fr)"],
  html[data-sc-area="publico"] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-sc-area="publico"] [style*="padding: 80px 48px"],
  html[data-sc-area="publico"] [style*="padding: 72px 48px"],
  html[data-sc-area="publico"] [style*="padding: 64px 48px"] {
    padding: 48px 16px !important;
  }
  html[data-sc-area="publico"] [style*="padding: 0px 48px 80px"] {
    padding: 0 16px 48px !important;
  }
  /* "Sobre": os quatro numeros em 2 colunas `1fr` -- que nao encolhem abaixo de "47.000+" em 30 px,
     e empurravam a grade 4-40 px para fora da tela ate ~400 px. */
  html[data-sc-area="publico"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* "Seguranca": tabela dado x uso com a coluna do dado presa em 160 px -- em 320 o uso ficava com
     60 px e cada palavra numa linha. Em celular, um embaixo do outro. */
  html[data-sc-area="publico"] div:has(> div[style*="min-width: 160px"]) {
    flex-direction: column !important;
    gap: 4px !important;
  }
  html[data-sc-area="publico"] div[style*="min-width: 160px"] {
    min-width: 0 !important;
  }
  /*
   * Formulario de CPF (hero, cabecalho das paginas, chamada final): campo e botao "Consultar
   * dividas" na mesma linha, com o botao em `nowrap`. Em 320 o botao passava 70 px da borda. Em
   * celular, empilhados, cada um com a largura toda.
   */
  html[data-sc-area="publico"] div[style*="padding: 6px 6px 6px 20px"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  html[data-sc-area="publico"] div[style*="padding: 6px 6px 6px 20px"] > input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 48px;
    padding: 0 14px !important;
  }
  html[data-sc-area="publico"] div[style*="padding: 6px 6px 6px 20px"] > button {
    flex: 1 1 100% !important;
  }
}

/* ============================================================================================
 * 3. Telas do devedor logado (lista, condicoes, pagamento, Pix, boleto, recibo, erro)
 * ========================================================================================== */

/*
 * O conteiner de toda tela logada (`Rs` no bundle). O botao do chat (56 px, fixo a 20 px do canto)
 * cobria o ULTIMO botao de cada tela no fim da rolagem -- "Continuar com...", "Confirmar acordo",
 * "Voltar para minhas dividas" -- e no fim da rolagem nao ha como tira-lo de cima. 96 px de folga
 * embaixo resolvem; em 1280 o conteiner (640 px, centralizado) nunca encosta no canto, e la nada muda.
 */
@media (max-width: 900px) {
  html[data-sc-area="devedor"] div[style*="background: rgb(248, 248, 248)"][style*="padding: 28px 24px"] {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 560px) {
  html[data-sc-area="devedor"] div[style*="background: rgb(248, 248, 248)"][style*="padding: 28px 24px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 20px !important;
  }

  /*
   * Card da divida (`K8`): nome do credor, selo "Pendente" e "% OFF" numa linha so. Os selos nao
   * encolhem, e em 320-390 o nome ficava com 20-60 px: "FU...". Deixar os selos descerem para a
   * linha de baixo, e o nome ocupar ate duas linhas antes da reticencia.
   */
  html[data-sc-area="devedor"] div[style*="padding: 16px 20px"][style*="justify-content: space-between"][style*="gap: 12px"] {
    flex-wrap: wrap !important;
  }
  html[data-sc-area="devedor"] div[style*="text-overflow: ellipsis"][style*="white-space: nowrap"][style*="text-transform: uppercase"] {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
  }

  /* Condicoes: "Credor - produto" ao lado de "Valor original R$ 1.234.567,89" (que nao encolhe).
     Em 320 o valor passava 20 px da borda. */
  html[data-sc-area="devedor"] div[style*="justify-content: space-between"][style*="align-items: flex-start"][style*="margin-bottom: 10px"] {
    flex-wrap: wrap !important;
  }
  html[data-sc-area="devedor"] div[style*="justify-content: space-between"][style*="align-items: flex-start"][style*="margin-bottom: 10px"] > div:last-child {
    text-align: left !important;
  }

  /* Meio de pagamento: o valor de 30 px e o selo "% OFF" lado a lado; em 320-375 o selo saia 90 px
     para fora do cartao e da tela. */
  html[data-sc-area="devedor"] div[style*="justify-content: space-between"][style*="align-items: center"][style*="margin-top: 10px"] {
    flex-wrap: wrap !important;
    gap: 8px 12px;
  }

  /* Botao principal do design system (`q8`): `white-space: nowrap` com o valor dentro. "Continuar
     com A vista R$ 296.296,29" nao cabe em 272 px e o texto passava por fora do botao. */
  html[data-sc-area="devedor"] button[style*="white-space: nowrap"][style*="width: 100%"] {
    white-space: normal !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Texto sem espaco para quebrar: numero de contrato e documento podem ter 20+ digitos. */
  html[data-sc-area="devedor"] div[style*="padding-left: 4px"] > span {
    overflow-wrap: anywhere;
  }
}

/*
 * Valores grandes (Pix 34 px; boleto, meio de pagamento e card 30 px; cartao 28 px). "R$" e o
 * numero vem com espaco NAO separavel, entao "R$ 296.296,29" e uma palavra so: em 320 ela nao cabia
 * no cartao e vazava pelas bordas. A fonte acompanha a largura (8vw = 25,6 px em 320, e o tamanho
 * original a partir de ~375-425 px) e o numero nunca e partido -- "12x" / "R$ 32.098,77" ainda
 * quebra no espaco comum, que e onde deve.
 */
@media (max-width: 440px) {
  html[data-sc-area="devedor"] [style*="font-family: Barlow"][style*="font-size: 34px"] {
    font-size: min(34px, 8vw) !important;
  }
  html[data-sc-area="devedor"] [style*="font-family: Barlow"][style*="font-size: 30px"] {
    font-size: min(30px, 8vw) !important;
  }
  html[data-sc-area="devedor"] [style*="font-family: Barlow"][style*="font-size: 28px"] {
    font-size: min(28px, 7.5vw) !important;
  }
  html[data-sc-area="devedor"] [style*="font-family: Barlow"][style*="font-size: 34px"],
  html[data-sc-area="devedor"] [style*="font-family: Barlow"][style*="font-size: 30px"],
  html[data-sc-area="devedor"] [style*="font-family: Barlow"][style*="font-size: 28px"] {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
}

@media (max-width: 400px) {
  html[data-sc-area="publico"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/*
 * Meio de pagamento (`X8`, `role="radio"`): o selo "Recomendado" nao encolhe e espremia titulo e
 * descricao do Pix numa coluna de ~80 px -- "Pagar com / Pix" e quatro linhas de descricao, na
 * tela em que a pessoa decide como pagar. Abaixo de 420 px o selo desce para baixo do texto,
 * alinhado com ele (22 px do circulo + 16 de espaco).
 */
@media (max-width: 420px) {
  html[data-sc-area="devedor"] [role="radio"][style*="display: flex"] {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  html[data-sc-area="devedor"] [role="radio"][style*="display: flex"] > div:nth-child(2) {
    flex: 1 1 160px !important;
  }
  html[data-sc-area="devedor"] [role="radio"][style*="display: flex"] > span {
    margin-left: 38px;
  }
}

/*
 * Barra de passos (Identificacao, Dividas, Oferta, Pagamento): quatro rotulos em `nowrap` somam
 * ~326 px e nao cabem abaixo de ~420 px -- "PAGAMENTO" encostava na borda. So o rotulo do passo
 * atual (peso 700) fica a vista; os outros continuam no DOM, escondidos so da tela, e o leitor de
 * tela segue lendo os quatro.
 */
@media (max-width: 420px) {
  html[data-sc-area="devedor"] div[style*="align-items: flex-start"][style*="width: 100%"] > div > span[style*="text-transform: uppercase"][style*="font-weight: 500"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* QR do Pix: 240 px fixos. Cabe em 320, mas nao em tela mais estreita (a tela externa do Galaxy
   Fold tem 280). Nunca maior que o cartao. */
html[data-sc-area="devedor"] img[alt="QR Code Pix"] {
  max-width: 100%;
  height: auto;
}

/* ============================================================================================
 * 4. Toque: alvo de 44 px e campo de 16 px
 * ========================================================================================== */

/*
 * So em aparelho de toque (`pointer: coarse`): e o dedo que precisa de 44 x 44 (WCAG 2.5.5), e e o
 * Safari do iPhone que da zoom ao focar campo com fonte menor que 16 px -- a tela passa a rolar
 * para os lados e nao volta sozinha. No desktop com mouse nada aqui se aplica.
 */
@media (pointer: coarse) {
  /* Campos do login (15 px) e do chat (13,5 px). */
  #login-doc,
  #login-dob,
  #login-email,
  [role="dialog"][aria-label="Chat de atendimento"] input[aria-label="Mensagem"] {
    font-size: 16px !important;
  }
  #login-doc,
  #login-dob,
  #login-email {
    min-height: 48px;
  }
  /* Campo de data: a altura minima acima vale tambem para ele vazio, e `min-width: 0` impede que a
     largura propria do controle de data empurre o cartao. (O teste roda em Chromium; o Safari do
     iPhone nao foi medido.) */
  #login-dob {
    min-width: 0;
  }
  /* "Voltar ao inicio" (15 px de altura) e "editar" (35 x 15). A margem negativa do "editar"
     devolve o que o alvo cresceu, e a caixa do CPF fica do mesmo tamanho. */
  .sc-auth-right button[style*="text-decoration: underline"] {
    min-height: 44px;
  }
  .sc-auth-right div[style*="justify-content: space-between"] > button[style*="text-decoration: underline"] {
    min-width: 44px;
    margin: -12px -8px -12px 0 !important;
    padding: 0 8px !important;
  }
  /* O aceite da LGPD: o alvo e o rotulo inteiro, que em tela larga tem duas linhas (39 px). */
  .sc-auth-right label:has(> input[type="checkbox"]) {
    min-height: 44px;
  }
  /* Campo de CPF da pagina inicial: sem padding, 18 px de altura dentro da caixa de 62. */
  html[data-sc-area="publico"] div[style*="padding: 6px 6px 6px 20px"] > input {
    min-height: 44px;
  }

  /* Paginas publicas: perguntas frequentes (botao de largura toda e `padding: 0` -- 22 px de altura
     numa pergunta de uma linha), links do rodape (14 px de texto) e os botoes dos canais de
     atendimento. As perguntas de "Como negociar" nao tem `aria-expanded`, entao a ancora e o estilo. */
  html[data-sc-area="publico"] button[style*="width: 100%"][style*="padding: 0px"] {
    min-height: 44px;
  }
  .sc-footer-link {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  html[data-sc-area="publico"] footer [style*="flex-direction: column"][style*="gap: 10px"] {
    gap: 0 !important;
  }
  /* "Iniciar conversa", "Enviar e-mail", "Ligar" (ajuda): 10 px de padding, 37 px de altura. */
  html[data-sc-area="publico"] a[href][style*="padding: 10px 0px"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Telas logadas. */
  html[data-sc-area="devedor"] button[style*="border-radius: 9999px"][style*="padding: 8px 18px"],
  html[data-sc-area="devedor"] button[style*="padding: 12px 22px"],
  html[data-sc-area="devedor"] button[style*="padding: 10px 16px"],
  html[data-sc-area="devedor"] button[style*="padding: 13px 0px"] {
    min-height: 44px;
  }
  /* "Voltar" (16 px de altura, so texto). */
  html[data-sc-area="devedor"] button[style*="padding: 0px"][style*="gap: 6px"] {
    min-height: 44px;
    align-self: flex-start;
    padding-right: 12px !important;
  }

  /* Chat: o "x" do cabecalho tinha 12 x 20; a margem negativa mantem o cabecalho com a mesma
     altura. O campo e o "enviar" ganham a altura do dedo. */
  [role="dialog"][aria-label="Chat de atendimento"] button[aria-label="Fechar chat"] {
    min-width: 44px;
    min-height: 44px;
    margin: -12px -12px -12px 0 !important;
  }
  [role="dialog"][aria-label="Chat de atendimento"] input[aria-label="Mensagem"] {
    min-height: 44px;
    min-width: 0;
  }
  [role="dialog"][aria-label="Chat de atendimento"] button[aria-label="Enviar"] {
    min-width: 44px;
    min-height: 44px;
  }
  /* Botoes de opcao do chat (`chat-opcoes.js`): 8 px de padding e 13 px de texto davam 33 px. */
  [data-chat-opcoes] > button,
  [data-chat-opcoes] > a {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
  }
}

/* ============================================================================================
 * 5. Chat: altura real da tela e teclado virtual
 * ========================================================================================== */

/*
 * O painel tinha `max-height: calc(100vh - 120px)`. Em celular `100vh` e a altura com a barra do
 * navegador RECOLHIDA: com a barra a vista, o topo do painel -- onde fica o "x" -- ficava escondido
 * atras dela. `dvh` e a altura visivel de fato; o `vh` antes e para navegador que nao conhece `dvh`.
 * Em desktop os dois sao iguais, e nada muda.
 *
 * `--sc-teclado` e o quanto o teclado virtual cobre (`responsivo.js`): o chat sobe esse tanto, e o
 * painel encolhe o mesmo, para o campo de mensagem nao ficar embaixo do teclado.
 */
[role="dialog"][aria-label="Chat de atendimento"] {
  max-height: calc(100vh - 120px - var(--sc-teclado, 0px)) !important;
  max-height: calc(100dvh - 120px - var(--sc-teclado, 0px)) !important;
}
div[style*="position: fixed"]:has(> button[aria-label="Abrir chat"]),
div[style*="position: fixed"]:has(> button[aria-label="Fechar chat"]) {
  bottom: calc(20px + var(--sc-teclado, 0px)) !important;
}

/*
 * Telas de pagamento (Pix, boleto, cartao, recibo -- `data-sc-tela="pagamento"`, do
 * `responsivo.js`): o botao redondo do chat NAO flutua. Em 320 ele ficava por cima da borda
 * direita do QR do Pix, e quem escaneia com outro aparelho segura a tela parada justamente ali; o
 * mesmo vale para o copia-e-cola, a linha digitavel e os valores do recibo, que passam por baixo
 * dele na rolagem. Aqui o botao desce para o FIM da pagina, depois do conteudo, e nao cobre nada
 * em rolagem nenhuma. Aberto, o painel do chat aparece ali mesmo, e o proprio widget rola ate ele.
 *
 * Por que so abaixo de 720 px: a coluna destas telas tem no maximo 520 px, centralizada, e o botao
 * ocupa os 76 px da direita (56 + 20 de margem). As duas so se cruzam abaixo de 520 + 2 x 76 =
 * 672 px; a folga ate 720 e a sombra do botao. Acima disso ele continua flutuando no canto, como
 * sempre -- e nunca encosta no conteudo.
 */
@media (max-width: 719px) {
  html[data-sc-tela="pagamento"] div[style*="position: fixed"]:has(> button[aria-label="Abrir chat"]),
  html[data-sc-tela="pagamento"] div[style*="position: fixed"]:has(> button[aria-label="Fechar chat"]) {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
    /* O mesmo cinza do conteudo: sem ele, o fim da pagina viraria uma faixa branca. */
    background: #F8F8F8;
  }
  /* A folga de 96 px embaixo (secao 3) existia para o botao flutuante; aqui ele nao flutua, e a
     folga volta ao padding original do bundle. */
  html[data-sc-tela="pagamento"] div[style*="background: rgb(248, 248, 248)"][style*="padding: 28px 24px"] {
    padding-bottom: 28px !important;
  }
}

/*
 * Celular deitado (375-430 px de altura): o painel ficava com 255 px, e sobravam ~150 px para a
 * conversa, porque o botao redondo ocupa 88 px embaixo dele. Deitado ha largura sobrando: o botao
 * vai para o lado, e o painel usa a altura toda.
 */
@media (max-height: 500px) and (min-width: 560px) {
  div[style*="position: fixed"]:has(> [role="dialog"][aria-label="Chat de atendimento"]) {
    display: flex !important;
    align-items: flex-end;
    gap: 12px;
  }
  [role="dialog"][aria-label="Chat de atendimento"] {
    margin-bottom: 0 !important;
    max-height: calc(100vh - 40px - var(--sc-teclado, 0px)) !important;
    max-height: calc(100dvh - 40px - var(--sc-teclado, 0px)) !important;
  }
}