/* ==========================================================================
   neWave . demos dos heros de One e SMS + palavra que gira no h1 da home
   (Lote 4)

   Nao mexe em css/style.css: so o que e novo para estes componentes, lendo
   as variaveis de :root e reaproveitando .fone/.fone-tela/.hero-grid/
   .hero-texto/.hero-demo ja definidos la (dao o cromo do celular e a
   entrada animada do hero de graca).

   As duas demos sao irmas da conversa do hero do Fluctus (#chatDemo): mesma
   moldura .fone, mesma fonte, mesmo cabecalho com avatar e status, mesmo
   verde de acento. O One e uma tela de chamada (escura, como toda tela de
   ligacao); o SMS e a caixa de mensagens (clara, como o chat do Fluctus).
   A tela do celular nao muda com o tema do site: o hero e sempre escuro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palavra que gira no h1 da home (index.html)

   Restrito a h1.hp-ativo (classe que o demos-hero.js poe so no h1 da home,
   quando a rotacao realmente inicia): one.html e sms.html carregam este
   mesmo arquivo CSS mas o h1 deles nunca ganha hp-ativo.

   O span recebe do JS a largura exata da palavra atual e anima a largura
   ate a da proxima: a linha se recentraliza suavemente e nao sobra buraco.
   Se o JS detectar que alguma largura mudaria as quebras de linha, ele
   fixa a maior largura para todas (a palavra fica alinhada a esquerda e a
   sobra vai para o fim da linha).
   -------------------------------------------------------------------------- */

.hero h1.hp-ativo .destaque {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
  transition: width .5s var(--ease-out);
}

/* largura fixa com o span sozinho na linha (o JS decide): centrado */
.hero h1.hp-ativo .destaque.hp-sozinho { text-align: center; }

.hero h1.hp-ativo .destaque .hp-palavra {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .32s ease, transform .32s ease;
}

.hero h1.hp-ativo .destaque .hp-palavra.hp-sai {
  opacity: 0;
  transform: translateY(-12px);
}

.hero h1.hp-ativo .destaque .hp-palavra.hp-entra {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.hp-ativo .destaque,
  .hero h1.hp-ativo .destaque .hp-palavra { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero de duas colunas entre 981px e 1180px (so One e SMS)

   Com a proporcao 1.15fr/.85fr do style.css o h1 fica espremido em 1024px.
   Aqui o celular ganha coluna fixa e um pouco mais estreita, e o texto fica
   com o resto. :has() restringe a regra aos heros que tem estas demos; o
   hero do Fluctus fica exatamente como esta.
   -------------------------------------------------------------------------- */

@media (min-width: 981px) and (max-width: 1180px) {
  .hero-grid:has(#demoOne, #demoSms) {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
  }
}

/* --------------------------------------------------------------------------
   Barra de status do celular (comum as duas demos)
   -------------------------------------------------------------------------- */

.dh-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px 4px;
  font-family: var(--font-titulo);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.dh-status-icones { display: flex; align-items: center; gap: 6px; }

.dh-sinal { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.dh-sinal b { width: 2.5px; border-radius: 1px; background: currentColor; }
.dh-sinal b:nth-child(1) { height: 3px; }
.dh-sinal b:nth-child(2) { height: 5px; }
.dh-sinal b:nth-child(3) { height: 7px; }
.dh-sinal b:nth-child(4) { height: 9px; }

.dh-bateria {
  position: relative;
  width: 20px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .9;
}
.dh-bateria::before {
  content: "";
  position: absolute;
  inset: 1.5px 5px 1.5px 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.dh-bateria::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -4px;
  width: 2px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Demo do hero do One: tela de chamada do softphone
   -------------------------------------------------------------------------- */

.fone-tela.pbx-tela {
  position: relative;
  height: 560px;
  color: #e4fde4;
  background:
    radial-gradient(120% 60% at 50% 34%, rgba(50, 190, 73, .16), rgba(50, 190, 73, 0) 62%),
    linear-gradient(180deg, #1b3a44 0%, #10282f 100%);
}

.pbx-tela .dh-status { color: #e4fde4; }

/* cabecalho: mesmo desenho do .chat-cab do Fluctus */

.pbx-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid rgba(228, 253, 228, .08);
  flex-shrink: 0;
  text-align: left;
}

.pbx-marca {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #16a062;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  flex-shrink: 0;
}
.pbx-marca i { width: 2.5px; border-radius: 2px; background: #e4fde4; }
.pbx-marca i:nth-child(1), .pbx-marca i:nth-child(5) { height: 7px; }
.pbx-marca i:nth-child(2), .pbx-marca i:nth-child(4) { height: 13px; }
.pbx-marca i:nth-child(3) { height: 18px; }

.pbx-cab strong {
  display: block;
  font-family: var(--font-titulo);
  font-size: .92rem;
  font-weight: 600;
}

.pbx-cab-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  opacity: .85;
}

.pbx-cab-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55c000;
  animation: pulso-status 2s ease-in-out infinite;
}

/* palco dos estados: os controles ficam por cima, presos ao pe da tela */

.pbx-corpo {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.pbx-estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px 158px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.985);
  transition: opacity .45s ease, transform .45s var(--ease-out), visibility 0s linear .45s;
}

.pbx-estado.mostra {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .1s, transform .6s var(--ease-out) .1s, visibility 0s;
}

.pbx-estado-topo { justify-content: flex-start; gap: 12px; padding-top: 16px; }

/* etiqueta do estado: pilula discreta no topo do palco */

.pbx-rotulo {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(50, 190, 73, .14);
  color: #9fe3aa;
  font-family: var(--font-titulo);
  font-size: .7rem;
  font-weight: 600;
}

.pbx-nome {
  font-family: var(--font-titulo);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.2;
}

.pbx-numero {
  font-size: .86rem;
  color: #a9c2b3;
  font-variant-numeric: tabular-nums;
}

.pbx-legenda {
  margin: 0;
  font-size: .72rem;
  color: #7f9a8c;
}

.pbx-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, #2c5a66, #1f4550);
  border: 1px solid rgba(228, 253, 228, .16);
  color: #e4fde4;
  font-family: var(--font-titulo);
  font-size: .76rem;
  font-weight: 700;
}

/* tocando: avatar grande com aneis */

.pbx-avatar-grupo {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  margin: 10px 0 8px;
}

.pbx-avatar-grupo .pbx-avatar {
  width: 88px;
  height: 88px;
  font-size: 1.7rem;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.pbx-anel {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1.5px solid #32be49;
  opacity: 0;
}

[data-estado="recebendo"].mostra .pbx-anel { animation: pbx-anel-pulso 2.1s var(--ease-out) infinite; }
[data-estado="recebendo"].mostra .pbx-anel-2 { animation-delay: .7s; }
[data-estado="recebendo"].mostra .pbx-anel-3 { animation-delay: 1.4s; }

@keyframes pbx-anel-pulso {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* URA: menu como lista e teclado com o digito aceso */

.pbx-menu {
  list-style: none;
  margin: 0;
  padding: 4px;
  width: 100%;
  border-radius: 14px;
  background: rgba(228, 253, 228, .05);
  border: 1px solid rgba(228, 253, 228, .08);
  text-align: left;
}

.pbx-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: .8rem;
  color: #c9dccf;
}

.pbx-menu kbd {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(228, 253, 228, .1);
  font-family: var(--font-titulo);
  font-size: .68rem;
  font-weight: 700;
  color: #e4fde4;
}

[data-estado="ura"].mostra .pbx-menu li:first-child { animation: pbx-menu-escolhe .5s ease 1.5s both; }
[data-estado="ura"].mostra .pbx-menu li:first-child kbd { animation: pbx-kbd-escolhe .5s ease 1.5s both; }

@keyframes pbx-menu-escolhe { to { background: rgba(50, 190, 73, .18); color: #e4fde4; } }
@keyframes pbx-kbd-escolhe { to { background: #32be49; color: #0e262e; } }

.pbx-teclado {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 6px 22px;
  justify-content: center;
}

.pbx-teclado span {
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(228, 253, 228, .08);
  color: #e4fde4;
  font-family: var(--font-titulo);
  font-size: .98rem;
  font-weight: 500;
  line-height: 1;
}

.pbx-teclado small {
  margin-top: 2px;
  font-family: var(--font-corpo);
  font-size: .42rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: #a9c2b3;
}

[data-estado="ura"].mostra .pbx-teclado span:first-child { animation: pbx-tecla-flash .7s ease-out 1.2s 1 both; }

@keyframes pbx-tecla-flash {
  0%   { background: rgba(228, 253, 228, .08); transform: scale(1); }
  35%  { background: #32be49; color: #0e262e; transform: scale(1.12); box-shadow: 0 0 0 8px rgba(50, 190, 73, .2); }
  100% { background: rgba(50, 190, 73, .35); color: #e4fde4; transform: scale(1); box-shadow: 0 0 0 0 rgba(50, 190, 73, 0); }
}

/* fila: contato, card com posicao, barra e espera */

.pbx-contato {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.pbx-contato strong {
  display: block;
  font-family: var(--font-titulo);
  font-size: .9rem;
  font-weight: 600;
}

.pbx-contato span:not(.pbx-avatar) { font-size: .74rem; color: #a9c2b3; }

.pbx-fila-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px 14px;
  border-radius: 18px;
  background: rgba(228, 253, 228, .06);
  border: 1px solid rgba(228, 253, 228, .1);
  text-align: left;
}

.pbx-fila-trilha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pbx-fila-agente {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16a062;
  color: #e4fde4;
  margin-right: 6px;
}

.pbx-fila-pessoa {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(228, 253, 228, .12);
  display: grid;
  place-items: center;
  font-family: var(--font-titulo);
  font-size: .6rem;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.pbx-fila-voce {
  background: transparent;
  border: 1.5px solid #32be49;
  color: #9fe3aa;
}

[data-estado="fila"].mostra .pbx-fila-sai { animation: pbx-fila-sai .6s var(--ease-out) 1.3s forwards; }

@keyframes pbx-fila-sai {
  to { width: 0; margin-right: -8px; opacity: 0; transform: translateX(-14px); }
}

.pbx-fila-posicoes {
  position: relative;
  height: 1.4em;
}

.pbx-pos {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-titulo);
  font-size: .98rem;
  font-weight: 600;
  opacity: 0;
}

.pbx-pos-2 { opacity: 1; }

[data-estado="fila"].mostra .pbx-pos-2 { animation: pbx-fila-fora .35s ease 1.4s forwards; }
[data-estado="fila"].mostra .pbx-pos-1 { animation: pbx-fila-dentro .35s ease 1.55s forwards; }

@keyframes pbx-fila-fora { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pbx-fila-dentro { from { transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pbx-barra {
  height: 6px;
  border-radius: 999px;
  background: rgba(228, 253, 228, .1);
  overflow: hidden;
}

.pbx-barra i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a062, #32be49);
  transform-origin: left;
  transform: scaleX(.34);
}

[data-estado="fila"].mostra .pbx-barra i { animation: pbx-barra-enche 2.4s var(--ease-out) .3s forwards; }

@keyframes pbx-barra-enche { to { transform: scaleX(.92); } }

.pbx-fila-espera {
  margin: 0;
  font-size: .74rem;
  color: #a9c2b3;
}

/* em atendimento: timer grande, onda de voz larga, gravando */

[data-estado="ativa"] .pbx-nome { font-size: 1.05rem; color: #c9dccf; }

.pbx-timer {
  font-family: var(--font-titulo);
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.pbx-onda-voz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 46px;
  margin: 4px 0 2px;
}

.pbx-onda-voz span {
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: #32be49;
  opacity: .9;
  transform-origin: center;
  transform: scaleY(.15);
}

.pbx-onda-voz span:nth-child(3n) { background: #82c89a; }

[data-estado="ativa"].mostra .pbx-onda-voz span { animation: pbx-onda-voz 1.15s ease-in-out infinite; }
[data-estado="ativa"].mostra .pbx-onda-voz span:nth-child(7n+1) { animation-duration: .95s; animation-delay: -.2s; }
[data-estado="ativa"].mostra .pbx-onda-voz span:nth-child(7n+2) { animation-duration: 1.3s; animation-delay: -.55s; }
[data-estado="ativa"].mostra .pbx-onda-voz span:nth-child(7n+3) { animation-duration: .8s; animation-delay: -.35s; }
[data-estado="ativa"].mostra .pbx-onda-voz span:nth-child(7n+4) { animation-duration: 1.2s; animation-delay: -.9s; }
[data-estado="ativa"].mostra .pbx-onda-voz span:nth-child(7n+5) { animation-duration: .9s; animation-delay: -.1s; }
[data-estado="ativa"].mostra .pbx-onda-voz span:nth-child(7n+6) { animation-duration: 1.4s; animation-delay: -.7s; }

@keyframes pbx-onda-voz {
  0%, 100% { transform: scaleY(.15); }
  50% { transform: scaleY(1); }
}

.pbx-gravando {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(229, 72, 77, .14);
  color: #ff8f93;
  font-size: .72rem;
  font-weight: 600;
}

.pbx-ponto-rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5c62;
  display: inline-block;
}

[data-estado="ativa"].mostra .pbx-ponto-rec { animation: pbx-rec-pulso 1.6s ease-in-out infinite; }

@keyframes pbx-rec-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* resumo: card que usa a tela toda (os controles saem) */

[data-estado="resumo"] { padding-bottom: 22px; }

.pbx-resumo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: #f2f8f2;
  color: #21343c;
  text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

.pbx-resumo-topo { display: flex; align-items: center; gap: 12px; }

.pbx-resumo-topo span:not(.pbx-check) { font-size: .78rem; color: #6b7f76; }

.pbx-resumo .pbx-rotulo {
  display: block;
  padding: 0;
  background: none;
  color: #21343c;
  font-size: .98rem;
}

.pbx-check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #cff0d4;
  color: #16a062;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pbx-resumo-dados { margin: 0; }

.pbx-resumo-dados div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #dbe7db;
}

.pbx-resumo-dados dt { font-size: .78rem; color: #6b7f76; }

.pbx-resumo-dados dd {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: .86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pbx-estrelas { color: #f0b429; letter-spacing: .08em; }

.pbx-gravacao-salva {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #e3fce3;
  color: #16603a;
  font-size: .78rem;
  font-weight: 600;
}

.pbx-play {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16a062;
  color: #fff;
  flex-shrink: 0;
  padding-left: 2px;
}

.pbx-gravacao-onda { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.pbx-gravacao-onda i { width: 2px; border-radius: 1px; background: #16a062; opacity: .6; }
.pbx-gravacao-onda i:nth-child(odd) { height: 8px; }
.pbx-gravacao-onda i:nth-child(even) { height: 14px; }
.pbx-gravacao-onda i:nth-child(3n) { height: 5px; }

/* controles: fileira de botoes redondos e botao de atender/desligar */

.pbx-controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: opacity .4s ease, transform .5s var(--ease-out);
}

.pbx-botoes {
  width: 100%;
  display: flex;
  justify-content: space-between;
  transition: opacity .4s ease;
}

.pbx-btn {
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.pbx-btn i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(228, 253, 228, .1);
  color: #e4fde4;
  transition: background .3s ease, color .3s ease;
}

.pbx-btn small {
  font-size: .6rem;
  color: #a9c2b3;
  white-space: nowrap;
}

.pbx-acoes {
  display: flex;
  justify-content: center;
  gap: 72px;
  height: 54px;
}

.pbx-acao {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: #fff;
}

.pbx-recusar, .pbx-desligar { background: #e5484d; box-shadow: 0 8px 22px rgba(229, 72, 77, .35); }
.pbx-atender { background: #32be49; box-shadow: 0 8px 22px rgba(50, 190, 73, .4); }

/* fases (o JS espelha o estado atual em data-fase na .pbx-tela) */

.pbx-tela[data-fase="recebendo"] .pbx-botoes { opacity: 0; }
.pbx-tela[data-fase="recebendo"] .pbx-recusar,
.pbx-tela[data-fase="recebendo"] .pbx-atender { display: grid; }
.pbx-tela:not([data-fase="recebendo"]) .pbx-desligar { display: grid; }

.pbx-tela[data-fase="recebendo"] .pbx-atender { animation: pbx-atender-chama 1.4s ease-in-out infinite; }

@keyframes pbx-atender-chama {
  0%, 60%, 100% { transform: rotate(0); }
  66% { transform: rotate(-14deg); }
  74% { transform: rotate(12deg); }
  82% { transform: rotate(-8deg); }
  90% { transform: rotate(4deg); }
}

/* na URA o teclado aberto ocupa o lugar da fileira de botoes, como num
   celular de verdade: sobra so o desligar embaixo dele */
.pbx-tela[data-fase="ura"] .pbx-botoes { opacity: 0; }
[data-estado="ura"] { padding-bottom: 92px; }

.pbx-tela[data-fase="resumo"] .pbx-controles { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  /* so o estado marcado .mostra (o JS so marca o ultimo, "resumo") fica
     visivel, e sem nenhuma animacao: o quadro final e estatico */
  .pbx-estado,
  .pbx-estado.mostra,
  .pbx-controles { transition: none; }
  .pbx-anel,
  .pbx-menu li,
  .pbx-menu kbd,
  .pbx-teclado span,
  .pbx-fila-sai,
  .pbx-pos-1,
  .pbx-pos-2,
  .pbx-barra i,
  .pbx-onda-voz span,
  .pbx-ponto-rec,
  .pbx-atender,
  .pbx-cab-status i { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Demo do hero do SMS: caixa de mensagens com o fio acumulando
   -------------------------------------------------------------------------- */

.fone-tela.sms-tela {
  position: relative;
  text-align: left;
  background: #f2f8f2;
  color: #21343c;
}

.sms-tela .dh-status { color: #e4fde4; background: var(--ardosia, #18333d); }

/* cabecalho da conversa: mesmo desenho do .chat-cab do Fluctus */

.sms-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px 10px;
  background: var(--ardosia, #18333d);
  color: #e4fde4;
  flex-shrink: 0;
}

.sms-voltar { display: grid; place-items: center; opacity: .8; }

.sms-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c2527f, #8e3f9e);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-titulo);
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sms-cab strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-titulo);
  font-size: .92rem;
  font-weight: 600;
}

.sms-selo {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #32be49;
  color: #0e262e;
  display: grid;
  place-items: center;
}

.sms-cab-sub { display: block; font-size: .72rem; opacity: .85; }

/* notificacao que desce do topo quando cada mensagem chega */

.sms-banner {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  color: #21343c;
  box-shadow: 0 14px 34px rgba(8, 24, 30, .35);
  opacity: 0;
  transform: translateY(-120%);
  transition: opacity .35s ease, transform .5s var(--ease-out);
}

.sms-banner.mostra { opacity: 1; transform: none; }

.sms-banner-icone {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #16a062;
  color: #fff;
  flex-shrink: 0;
}

.sms-banner-conteudo { min-width: 0; flex: 1; }

.sms-banner strong {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-titulo);
  font-size: .76rem;
  font-weight: 600;
}

.sms-banner time { font-family: var(--font-corpo); font-weight: 400; color: #6b7f76; font-size: .68rem; }

.sms-banner-texto {
  display: block;
  font-size: .74rem;
  color: #46626b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* o fio: mensagens alinhadas embaixo; as antigas sobem e saem pelo topo */

.sms-fio {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 14px 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
  transition: opacity .8s ease;
}

.sms-fio.some { opacity: 0; }

.sms-dia-hoje { margin-top: 12px; }

.sms-dia {
  align-self: center;
  font-size: .68rem;
  color: #6b7f76;
  background: #e6efe6;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.sms-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    max-height .6s var(--ease-out),
    margin-top .6s var(--ease-out),
    opacity .4s ease .15s,
    transform .5s var(--ease-out) .15s;
}

.sms-msg.mostra {
  max-height: 340px;
  margin-top: 10px;
  opacity: 1;
  transform: none;
}

.sms-balao {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  background: #ffffff;
  border: 1px solid #dbe7db;
}

.sms-corpo {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: #21343c;
}

.sms-otp-legenda { font-size: .72rem; color: #6b7f76; }

.sms-codigo {
  margin: 6px 0 4px;
  font-family: var(--font-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #16333c;
  font-variant-numeric: tabular-nums;
}

.sms-meta { font-size: .62rem; color: #7f958a; padding-left: 4px; }

/* sugestao do sistema abaixo do OTP */

.sms-copiar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #b8dcc0;
  background: #e3fce3;
  color: #16603a;
  font-size: .74rem;
  font-weight: 600;
}

[data-estado="otp"].mostra .sms-copiar { animation: sms-copiar-toque .5s ease 1.9s both; }

@keyframes sms-copiar-toque {
  0% { transform: scale(1); }
  40% { transform: scale(.94); background: #cff0d4; }
  100% { transform: scale(1); background: #cff0d4; }
}

/* cartao RCS */

.sms-balao.sms-rcs {
  width: 88%;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

.sms-rcs-midia {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: linear-gradient(135deg, #f7d6df 0%, #e7b3cf 45%, #b995dc 100%);
}

.sms-rcs-circulo {
  position: absolute;
  right: -26px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}

.sms-rcs-circulo-2 { right: 40px; top: 50px; width: 64px; height: 64px; background: rgba(142, 63, 158, .18); }

.sms-rcs-logo {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1;
  color: #5b2466;
}

.sms-rcs-data {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #5b2466;
  font-family: var(--font-titulo);
  font-size: .7rem;
  font-weight: 700;
}

.sms-rcs-conteudo { padding: 10px 13px 4px; }

.sms-rcs-titulo {
  display: block;
  font-family: var(--font-titulo);
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.sms-rcs-botoes {
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
}

.sms-rcs-botoes span {
  flex: 1;
  display: block;
  text-align: center;
  border: 1px solid #dbe7db;
  border-radius: 999px;
  background: #f2f8f2;
  color: #16603a;
  font-size: .76rem;
  font-weight: 600;
  padding: 7px 4px;
}

.sms-rcs-botoes span:first-child {
  background: #16a062;
  color: #fff;
  border-color: #16a062;
}

/* rodape: contador discreto, no lugar do .chat-selo do Fluctus */

.sms-rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px 12px;
  font-size: .7rem;
  color: #16a062;
  background: #f2f8f2;
  flex-shrink: 0;
}

.sms-entregues-num { font-variant-numeric: tabular-nums; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  /* o JS marca as tres mensagens: fio completo, parado, sem banner */
  .sms-msg,
  .sms-fio,
  .sms-banner { transition: none; }
  .sms-copiar { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Pausa fora da tela ou com a aba oculta (mesmo mecanismo do main.js, sem
   depender da classe .anim-continua: os elementos ja existem na marcacao
   estatica e o demos-hero.js registra .fone em window.NW_ANIM.observar()).
   -------------------------------------------------------------------------- */

.fone.fora-da-tela .pbx-anel,
.fone.fora-da-tela .pbx-onda-voz span,
.fone.fora-da-tela .pbx-ponto-rec,
.fone.fora-da-tela .pbx-atender,
.fone.fora-da-tela .pbx-cab-status i,
body.aba-oculta .fone .pbx-anel,
body.aba-oculta .fone .pbx-onda-voz span,
body.aba-oculta .fone .pbx-ponto-rec,
body.aba-oculta .fone .pbx-atender,
body.aba-oculta .fone .pbx-cab-status i {
  animation-play-state: paused;
}