/* ==========================================================================
   Mockups de produto, animados

   Sistema de Ponto: gráfico de horas, absenteísmo e rotatividade, com as
   barras subindo em laço lento.
   AI Delivery: um atendimento acontecendo, com o agente digitando, mandando
   imagem e link de pagamento.

   Tudo em CSS, sem imagem e sem JS. Representação estilizada, rotulada como
   tal na tela. Laço lento de propósito: é ambiente, não chama atenção.
   ========================================================================== */

.pmock {
  --marca: #2D6CDF;
  --sobre-marca: #FFFFFF;
  border: 1px solid var(--borda-media);
  background: var(--fundo-2);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.pmock__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 11px 14px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.pmock__id { display: flex; align-items: center; gap: 9px; min-width: 0; }

.pmock__logo {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--marca);
  color: var(--sobre-marca);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.pmock__nome {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmock__tag {
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--txt-2);
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}

.pmock__corpo { padding: var(--e-3); display: grid; gap: var(--e-3); }

/* ==========================================================================
   Sistema de Ponto · painel de indicadores
   ========================================================================== */

.pmock__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pmock__kpi {
  border: 1px solid var(--borda);
  background: var(--fundo);
  padding: 10px 11px;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.pmock__kpi b {
  font-family: var(--fonte-mono);
  font-size: 17px;
  font-weight: 400;
  color: var(--txt);
  line-height: 1;
}

.pmock__kpi span {
  font-size: 9px;
  line-height: 1.25;
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pmock__kpi--ok b { color: var(--sinal-ok); }
.pmock__kpi--atencao b { color: var(--sinal-aviso); }

/* --- gráfico de barras, subindo em laço ---------------------------------- */

.pmock__grafico {
  border: 1px solid var(--borda);
  background: var(--fundo);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.pmock__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 9px;
  color: var(--txt-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pmock__legenda span { display: inline-flex; align-items: center; gap: 6px; }

.pmock__legenda i {
  width: 8px;
  height: 8px;
  display: block;
  flex: none;
}

.pmock__legenda i:nth-of-type(1) { background: var(--acento); }

.pmock__barras {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 108px;
}

.pmock__col {
  display: grid;
  gap: 2px;
  align-content: end;
  height: 100%;
}

.pmock__b {
  transform-origin: 50% 100%;
  animation: pmockSubir 5.2s var(--ease) infinite;
}

/* Horas trabalhadas, a barra alta. */
.pmock__b--horas { background: var(--acento); }
/* Absenteísmo, o pedaço menor em cima. */
.pmock__b--falta { background: var(--ambar); opacity: 0.85; }

.pmock__col:nth-child(1) .pmock__b { animation-delay: 0s; }
.pmock__col:nth-child(2) .pmock__b { animation-delay: .12s; }
.pmock__col:nth-child(3) .pmock__b { animation-delay: .24s; }
.pmock__col:nth-child(4) .pmock__b { animation-delay: .36s; }
.pmock__col:nth-child(5) .pmock__b { animation-delay: .48s; }
.pmock__col:nth-child(6) .pmock__b { animation-delay: .6s; }
.pmock__col:nth-child(7) .pmock__b { animation-delay: .72s; }
.pmock__col:nth-child(8) .pmock__b { animation-delay: .84s; }

@keyframes pmockSubir {
  0%   { transform: scaleY(.35); }
  40%  { transform: scaleY(1); }
  70%  { transform: scaleY(1); }
  100% { transform: scaleY(.35); }
}

.pmock__eixo {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  color: var(--txt-2);
  text-align: center;
}

/* --- linha de rotatividade ----------------------------------------------- */

.pmock__linha-svg { width: 100%; height: 54px; display: block; }

.pmock__traco {
  fill: none;
  stroke: var(--marca);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  animation: pmockTracar 5.2s var(--ease) infinite;
}

@keyframes pmockTracar {
  0%   { stroke-dashoffset: 320; }
  45%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 320; }
}

.pmock__ponto-svg {
  fill: var(--acento);
  animation: pmockPulsar 5.2s var(--ease) infinite;
}

@keyframes pmockPulsar {
  0%, 40% { opacity: 0; r: 0; }
  50%     { opacity: 1; r: 3.5; }
  85%     { opacity: 1; r: 3.5; }
  100%    { opacity: 0; r: 0; }
}

/* ==========================================================================
   AI Delivery · atendimento acontecendo
   ========================================================================== */

.pmock__chat {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  min-height: 250px;
  align-content: start;
}

.pmock__msg {
  max-width: 84%;
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0;
  animation: pmockMsg 11s var(--ease) infinite;
}

/* Cliente à esquerda, agente à direita. */
.pmock__msg--cliente {
  justify-self: start;
  background: var(--fundo-2);
  border: 1px solid var(--borda-media);
  color: var(--txt);
}

.pmock__msg--agente {
  justify-self: end;
  background: var(--marca);
  color: var(--sobre-marca);
  border: 1px solid transparent;
}

.pmock__msg:nth-of-type(1) { animation-delay: .3s; }
.pmock__msg:nth-of-type(2) { animation-delay: 1.9s; }
.pmock__msg:nth-of-type(3) { animation-delay: 3.5s; }
.pmock__msg:nth-of-type(4) { animation-delay: 5.6s; }
.pmock__msg:nth-of-type(5) { animation-delay: 7.4s; }

@keyframes pmockMsg {
  0%, 2%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  6%, 88%  { opacity: 1; transform: none; }
  96%,100% { opacity: 0; transform: none; }
}

/* Cardápio que o agente manda: bloco de imagem estilizado. */
.pmock__foto {
  justify-self: end;
  width: 132px;
  border: 1px solid var(--borda-media);
  background: var(--fundo-2);
  padding: 7px;
  display: grid;
  gap: 6px;
  opacity: 0;
  animation: pmockMsg 11s var(--ease) 5.6s infinite;
}

.pmock__foto-area {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--lavagem-acento), transparent 60%),
    var(--fundo);
  border: 1px solid var(--borda);
  display: grid;
  place-items: center;
  color: var(--txt-2);
}

.pmock__foto-area .ico { width: 26px; height: 26px; }

.pmock__foto span {
  font-family: var(--fonte-mono);
  font-size: 9px;
  color: var(--txt-2);
  text-align: center;
}

/* Link de pagamento: o fecho do atendimento. */
.pmock__pgto {
  justify-self: end;
  width: 176px;
  border: 1px solid var(--acento);
  background: var(--lavagem-acento);
  padding: 10px 11px;
  display: grid;
  gap: 7px;
  opacity: 0;
  animation: pmockMsg 11s var(--ease) 7.4s infinite;
}

.pmock__pgto-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  color: var(--acento);
  text-transform: uppercase;
}

.pmock__pgto b {
  font-family: var(--fonte-mono);
  font-size: 15px;
  font-weight: 400;
  color: var(--txt);
  line-height: 1;
}

.pmock__pgto-btn {
  padding: 6px;
  background: var(--acento-fundo);
  color: var(--n-950);
  border-radius: var(--raio-acao);
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* Três pontinhos de "digitando", entre as mensagens. */
.pmock__digitando {
  justify-self: end;
  display: flex;
  gap: 4px;
  padding: 9px 12px;
  background: var(--fundo-2);
  border: 1px solid var(--borda-media);
  opacity: 0;
  animation: pmockDigitando 11s var(--ease) 2.7s infinite;
}

.pmock__digitando i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--txt-2);
  display: block;
  animation: pmockPula 1.1s var(--ease) infinite;
}

.pmock__digitando i:nth-child(2) { animation-delay: .16s; }
.pmock__digitando i:nth-child(3) { animation-delay: .32s; }

@keyframes pmockDigitando {
  0%, 2%  { opacity: 0; }
  5%, 7%  { opacity: 1; }
  9%, 100% { opacity: 0; }
}

@keyframes pmockPula {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --- rodapé de funcionalidades ------------------------------------------- */

.pmock__recursos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 14px;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}

.pmock__recursos span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--borda-media);
  font-size: 10px;
  color: var(--txt-2);
  line-height: 1.3;
  white-space: nowrap;
}

.pmock__recursos .ico { width: 13px; height: 13px; color: var(--acento); }

.pmock__nota {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  color: var(--txt-2);
  line-height: 1.5;
  margin-top: var(--e-2);
}

/* --- redução de movimento ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pmock__b { animation: none !important; transform: scaleY(1) !important; }
  .pmock__traco { animation: none !important; stroke-dashoffset: 0 !important; }
  .pmock__ponto-svg { animation: none !important; opacity: 1 !important; r: 3.5; }
  .pmock__msg,
  .pmock__foto,
  .pmock__pgto { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pmock__digitando { display: none !important; }
}