/* Design system inspirado em Binance.US
   Amarelo #F0B90B como único acento; verde/vermelho apenas semântico. */

:root {
  --yellow: #F0B90B;
  --yellow-active: #D0980B;
  --gold: #FFD000;
  --focus-blue: #1EAEDB;

  --white: #FFFFFF;
  --snow: #F5F5F5;
  --dark: #222126;
  --dark-card: #2B2F36;

  --ink: #1E2026;
  --text-2: #32313A;
  --slate: #848E9C;
  --muted: #777E90;

  --green: #0ECB81;
  --red: #F6465D;
  /* Teal: reservado para status do WhatsApp (recados de 24h) apagados */
  --teal: #0E9F9F;
  --border: #E6E8EA;

  /* Cores fixas independentes do tema (texto sobre amarelo, seção escura) */
  --on-yellow: #1E2026;
  --on-dark: #FFFFFF;

  --shadow-card: rgba(32, 32, 37, 0.05) 0px 3px 5px 0px;
  --shadow-card-hover: rgba(8, 8, 8, 0.05) 0px 3px 5px 5px;
  --shadow-pill: rgb(153, 153, 153) 0px 2px 10px -3px;

  --font: "Inter", Arial, sans-serif;

  color-scheme: light;
}

/* ---------- Tema escuro ----------
   As variáveis têm papel semântico: --white = superfície, --snow = fundo
   sutil, --ink = texto principal. Só trocamos os valores. */
html[data-theme="dark"] {
  --white: #1E2329;
  --snow: #14161A;
  --dark: #101216;
  --dark-card: #181B20;

  --ink: #EAECEF;
  --text-2: #D5D9E0;
  --slate: #9AA4B2;
  --muted: #848E9C;

  --teal: #2CC5C5;
  --border: #2E353F;

  --shadow-card: rgba(0, 0, 0, 0.25) 0px 3px 5px 0px;
  --shadow-card-hover: rgba(0, 0, 0, 0.35) 0px 3px 5px 5px;
  --shadow-pill: rgba(0, 0, 0, 0.45) 0px 2px 10px -3px;

  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--snow);
}

html[data-theme="dark"] .topnav {
  background: var(--snow);
}

* {
  box-sizing: border-box;
}

/* Garante que [hidden] vença regras como display: grid/flex */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  font-feature-settings: "tnum";
}

.container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-inline: 32px;
}

/* ---------- Navegação ---------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.brand-word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav-tag {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* "Sair" na topbar (só logado): mesmo botão redondo dos vizinhos, com 3D */
.nav-logout {
  min-height: 40px;
}

/* Objetos 3D nos botões da topbar (bandeira, sol/lua, sair, menu) */
.theme-toggle .i3d {
  font-size: 24px;
  filter: drop-shadow(0 2px 3px rgba(20, 22, 30, 0.14));
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--slate);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Mostra a lua no claro (ação: escurecer) e o sol no escuro */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Botões ---------- */

.btn {
  appearance: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16px;
  line-height: 1.25;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.btn.pill {
  border-radius: 50px;
  padding: 12px 32px;
  min-height: 48px;
}

.btn.square {
  border-radius: 6px;
  padding: 12px 32px;
}

.btn.primary {
  background: var(--yellow);
  color: var(--on-yellow);
}

.btn.pill.primary {
  box-shadow: var(--shadow-pill);
}

.btn.primary:hover {
  background: var(--focus-blue);
  color: var(--on-dark);
}

.btn.primary:active {
  background: var(--yellow-active);
  color: var(--on-yellow);
}

.btn.outline {
  background: var(--white);
  color: var(--ink);
  border-color: var(--border);
}

.btn.pill.outline {
  box-shadow: var(--shadow-pill);
}

.btn.outline:hover {
  background: var(--focus-blue);
  border-color: var(--focus-blue);
  color: var(--on-dark);
}

.btn.ghost {
  background: transparent;
  color: var(--slate);
  font-size: 14.4px;
  letter-spacing: 0.72px;
  padding: 10px 12px;
}

.btn.ghost:hover {
  color: var(--ink);
}

.btn.block {
  width: 100%;
}

.btn:disabled {
  background: var(--border);
  color: var(--slate);
  cursor: not-allowed;
  box-shadow: none;
}

.btn.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn.block.is-busy {
  display: flex;
}

.btn.is-busy::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.btn.primary.is-busy:disabled {
  background: var(--yellow);
  color: var(--on-yellow);
  cursor: wait;
  box-shadow: var(--shadow-pill);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.55;
  }
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* ---------- Gate (hero + card) ---------- */

.gate {
  padding: 80px 0 64px;
}

.gate-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}

.hero-title {
  margin: 0;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-title .hl {
  color: var(--yellow);
}

.hero-sub {
  margin: 20px 0 0;
  max-width: 30em;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--slate);
}

.hero-sub strong {
  font-weight: 700;
  color: var(--ink);
}

.gate-hint {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-2);
  background: var(--snow);
}

/* ---------- Cards ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.card-copy {
  margin: 8px 0 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  color: var(--slate);
}

.card-copy.small {
  margin-bottom: 12px;
  font-size: 12px;
}

/* ---------- Formulários ---------- */

.form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
}

.field input {
  width: 100%;
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 200ms ease;
}

.field input::placeholder {
  color: var(--slate);
  font-weight: 500;
}

.field input:focus {
  outline: 1px solid var(--ink);
  border-color: var(--ink);
}

.field input.is-invalid {
  border-color: var(--red);
}

.field input.is-invalid:focus {
  outline-color: var(--red);
  border-color: var(--red);
}

.field-error {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
  line-height: 1.35;
}

.field-error:empty {
  display: none;
}

.phone-split {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 8px;
  align-items: stretch;
  text-transform: none;
  letter-spacing: 0;
}

.phone-country {
  position: relative;
  min-width: 7.5rem;
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 200ms ease;
}

.phone-country-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
}

.phone-country-face .phone-flag {
  font-size: 18px;
  line-height: 1;
}

.phone-country-face .phone-dial {
  color: var(--slate);
}

.phone-country-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.phone-country::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.phone-country:focus-within {
  outline: 1px solid var(--ink);
  border-color: var(--ink);
}

.field .phone-national {
  min-width: 0;
}

.phone-split.is-invalid .phone-country,
.field input.phone-national.is-invalid {
  border-color: var(--red);
}

.phone-split.is-invalid .phone-country:focus-within,
.field input.phone-national.is-invalid:focus {
  outline-color: var(--red);
  border-color: var(--red);
}

#otpInput {
  letter-spacing: 0.4em;
  text-align: center;
}

.emergency {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.emergency-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.status {
  min-height: 1.5em;
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.gate-card .status:empty {
  display: none;
  margin: 0;
  min-height: 0;
}

.status.error {
  color: var(--red);
}

/* ---------- Barra do feed ---------- */

.feed-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-top: 48px;
  padding-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.session-meta {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.feed-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feed-actions .btn.pill {
  padding: 8px 24px;
  min-height: 44px;
  font-size: 14.4px;
}

/* Botões com objeto 3D à esquerda do rótulo (Minha conta / Mensagens) */
.feed-actions .btn.pill:has(.i3d) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}

.feed-actions .btn.pill .i3d {
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(20, 22, 30, 0.14));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.number-picker select {
  appearance: none;
  font-family: var(--font);
  font-size: 14.4px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 10px 36px 10px 20px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--shadow-pill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23848E9C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.number-picker select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* ---------- Seção escura (landing) ---------- */

.dark-section {
  background: var(--dark);
  padding: 32px 0;
}

/* ---------- Conexão WhatsApp: card alinhado ao conteúdo ----------
   Mesma superfície dos demais cards (.card) nos dois layouts; dashboard.css
   só troca raio e fundo. Ícone 3D do número com o ponto de estado como selo
   (cor vem de is-ok/is-warn/is-bad em .waha-status, lida via :has()). */

.waha-wrap {
  margin-bottom: 4px;
}

.waha-card {
  padding: 14px 18px;
}

.waha-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.waha-ico {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.waha-ico .i3d {
  font-size: 40px;
  filter: drop-shadow(0 3px 5px rgba(20, 22, 30, 0.12));
}

.waha-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slate);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px color-mix(in srgb, var(--slate) 18%, transparent);
}

.waha-bar:has(.waha-status.is-ok) .waha-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px color-mix(in srgb, var(--green) 22%, transparent);
}

.waha-bar:has(.waha-status.is-warn) .waha-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px color-mix(in srgb, var(--yellow) 22%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}

.waha-bar:has(.waha-status.is-bad) .waha-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent);
}

.waha-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.waha-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Dentro do card o ponto vive no selo do ícone, não antes do texto */
.waha-card .waha-status {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

.waha-card .waha-status::before {
  display: none;
}

/* .waha-status genérico (com ponto ::before): ainda usado pela /tela */
.waha-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waha-status::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--slate);
}

.waha-status.is-ok::before {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(14, 203, 129, 0.15);
}

.waha-status.is-warn::before {
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(240, 185, 11, 0.15);
  animation: pulse 1.6s ease-in-out infinite;
}

.waha-status.is-bad::before {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(246, 70, 93, 0.15);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Alinha com a coluna de texto (40px do ícone + 14px de gap) */
.waha-hint {
  margin: 8px 0 0;
  padding-left: 54px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.43;
  color: var(--slate);
  max-width: 60em;
}

.waha-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.waha-actions .btn.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 12px;
  min-height: 38px;
  font-size: 14px;
}

.waha-actions .btn.pill .i3d {
  font-size: 20px;
}

/* Ações secundárias: botão quadrado só com o objeto 3D; rótulo no title */
.waha-icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.waha-icon-btn .i3d {
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(20, 22, 30, 0.14));
}

.waha-icon-btn:hover {
  background: var(--snow);
  border-color: var(--slate);
}

.waha-icon-btn.danger {
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

.waha-icon-btn.danger:hover {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: var(--red);
}

.waha-icon-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.waha-icon-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Bloqueado mas clicável (mostra o motivo no hint): ex. migrar sem destino. */
.waha-icon-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: help;
}

.waha-icon-btn:disabled .i3d,
.waha-icon-btn[aria-disabled="true"] .i3d {
  filter: grayscale(1);
}

.waha-icon-btn[aria-disabled="true"]:hover {
  background: var(--white);
  border-color: var(--border);
}

/* Telas estreitas: continua numa linha só — tudo encolhe um pouco e o
   status usa reticências em vez de empurrar as ações para baixo. */
@media (max-width: 640px) {
  .waha-card {
    padding: 12px;
  }

  .waha-bar {
    gap: 10px;
  }

  .waha-ico,
  .waha-ico .i3d {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }

  .waha-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .waha-actions .btn.pill {
    padding: 6px 14px 6px 10px;
    min-height: 34px;
    font-size: 13px;
  }

  .waha-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .waha-icon-btn .i3d {
    font-size: 20px;
  }

  /* Com problema na conexão (status warn/bad) a barra abre: status por
     extenso e as ações descem para a própria linha, para o usuário ler o
     que houve e resolver aqui mesmo. */
  .waha-bar:has(.waha-status.is-warn),
  .waha-bar:has(.waha-status.is-bad) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .waha-bar:has(.waha-status.is-warn) .waha-status,
  .waha-bar:has(.waha-status.is-bad) .waha-status {
    white-space: normal;
  }

  .waha-bar:has(.waha-status.is-warn) .waha-actions,
  .waha-bar:has(.waha-status.is-bad) .waha-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .waha-hint {
    padding-left: 0;
  }
}

.dark-section .btn.ghost:hover {
  color: var(--on-dark);
}

.btn.ghost.danger {
  color: var(--red);
}

.btn.ghost.danger:hover {
  color: var(--red);
  text-decoration: underline;
}

/* QR sobre brilho dourado, dentro da seção escura */

.waha-qr {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 16px;
  justify-items: center;
}

.qr-glow {
  display: grid;
  place-items: center;
  padding: 32px;
  border-radius: 12px;
  background: radial-gradient(closest-side, var(--yellow), #F8D12F 70%, rgba(248, 209, 47, 0.35));
}

.qr-frame {
  /* Fundo branco fixo: o QR precisa de contraste para o scanner */
  background: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-pill);
}

.qr-frame img {
  display: block;
  width: min(60vw, 220px);
  height: auto;
}

.qr-steps {
  margin: 0;
  max-width: 36em;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.qr-steps strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Feed de mensagens ---------- */

.feed {
  padding-top: 32px;
  padding-bottom: 80px;
}

.list {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  /* A âncora de leitura é feita em JS (withScrollAnchor + ResizeObserver),
     igual em todos os navegadores; o anchoring nativo compensaria duas vezes. */
  overflow-anchor: none;
}

/* ---------- Barra "ao vivo" do feed ---------- */
.feed-live {
  position: sticky;
  top: 72px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 14px;
  padding: 7px 8px 7px 12px;
  /* Altura fixa: a barra é sticky mas ocupa fluxo — se crescesse quando o
     botão "N novas" aparece, empurraria o feed 12px sem compensação. */
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  box-shadow: 0 8px 24px rgba(30, 32, 38, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 500 13px/18px var(--font);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.feed-live.has-new {
  border-color: color-mix(in srgb, var(--yellow) 52%, var(--border));
  box-shadow:
    0 8px 24px rgba(30, 32, 38, 0.07),
    inset 3px 0 0 var(--yellow);
}

.feed-live[hidden] {
  display: none;
}

.feed-live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
}

.feed-live.is-paused .feed-live-dot {
  background: var(--slate);
  box-shadow: none;
}

.feed-live-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}

.feed-live-new {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 5px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--yellow) 42%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--yellow) 16%, var(--white));
  color: var(--ink);
  font: 700 12.5px/18px var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  animation: feedLiveNewIn 220ms ease-out;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.feed-live-new:hover {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 24%, var(--white));
}

.feed-live-new:active {
  transform: translateY(1px);
}

.feed-live-new[hidden] {
  display: none;
}

@keyframes feedLiveNewIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.feed-live-pause {
  flex: none;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--snow);
  font: 600 12.5px var(--font);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.feed-live-pause:hover {
  border-color: color-mix(in srgb, var(--slate) 48%, var(--border));
  background: var(--white);
  color: var(--ink);
}

/* Telas estreitas: uma linha só (o status encolhe com reticências) — a barra
   não pode mudar de altura quando o botão aparece. */
@media (max-width: 560px) {
  .feed-live {
    top: 64px;
    gap: 7px;
    padding: 7px 7px 7px 10px;
  }

  .feed-live.has-new .feed-live-status {
    /* Prioriza a ação no espaço estreito; o ponto ainda comunica "ao vivo". */
    display: none;
  }

  .feed-live-new {
    flex: 1 1 auto;
    padding-inline: 9px;
  }

  .feed-live-pause {
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-live-new {
    animation: none;
  }
}

/* Troca de página/filtro: a página antiga esmaece até a nova chegar */
.list.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* ---------- Paginador do feed ---------- */

.feed-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 920px;
  margin: 28px auto 0;
}

.feed-pager[hidden] {
  display: none;
}

.feed-pager-summary {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.feed-pager-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.feed-page-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--slate);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.feed-page-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--slate);
}

.feed-page-btn:focus-visible {
  outline: 2px solid var(--focus-blue);
  outline-offset: 2px;
}

.feed-page-btn.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.feed-page-btn:disabled:not(.is-current) {
  opacity: 0.45;
  cursor: default;
}

.feed-page-btn.is-nav {
  padding: 0 16px;
}

.feed-page-gap {
  min-width: 22px;
  text-align: center;
  color: var(--slate);
  font-weight: 600;
  user-select: none;
}

@media (max-width: 560px) {
  .feed-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .feed-page-btn.is-nav {
    padding: 0 12px;
  }
}

/* ---------- Superfícies do produto (recuperadas × sem visto) ---------- */

.feed-surfaces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.feed-surface {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.feed-surface:hover {
  border-color: var(--slate);
}

.feed-surface .i3d {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.feed-surface-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.feed-surface-copy strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.feed-surface-copy em {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  line-height: 1.35;
}

.feed-surface.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}

.feed-surface.is-silent.is-active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}

.feed-surface .chip-count {
  flex: 0 0 auto;
}

.silent-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal) 8%, var(--white));
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.silent-intro[hidden] {
  display: none;
}

.silent-intro .i3d {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.feed.is-silent .feed-filters {
  justify-content: flex-end;
}

.feed.is-silent .msg.kind-inbox {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--teal) 22%, var(--border));
}

.feed.is-silent .msg.kind-inbox:hover {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--teal) 40%, var(--border));
}

/* Celular: as duas superfícies seguem lado a lado, como cartões mais altos
   (objeto em cima, texto embaixo, contagem como selo no canto). */
@media (max-width: 640px) {
  .feed-surface {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 132px;
    padding: 16px 14px 14px;
  }

  .feed-surface .i3d {
    width: 40px;
    height: 40px;
  }

  .feed-surface-copy {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .feed-surface-copy em {
    white-space: normal;
  }

  .feed-surface .chip-count {
    position: absolute;
    top: 12px;
    right: 12px;
  }
}

/* ---------- Filtros do feed (chips por tipo + busca) ---------- */

.feed-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.feed-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--slate);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.feed-chip:hover {
  color: var(--ink);
  border-color: var(--slate);
}

.feed-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.chip-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--snow);
  color: var(--slate);
}

.feed-chip.is-active .chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
}

html[data-theme="dark"] .feed-chip.is-active .chip-count {
  background: rgba(0, 0, 0, 0.25);
}

.feed-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 200px;
}

/* Telas estreitas: a busca ocupa a linha inteira (Dashboard: dashboard.css) */
@media (max-width: 640px) {
  .feed-search {
    flex: 1 1 100%;
    min-width: 0;
  }
}

.feed-search svg {
  position: absolute;
  left: 13px;
  width: 14px;
  height: 14px;
  color: var(--slate);
  pointer-events: none;
}

.feed-search input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.feed-search input:focus {
  outline: 2px solid var(--focus-blue);
  outline-offset: -1px;
}

/* Aviso: busca no servidor não alcança corpo cifrado */
.feed-search-note {
  flex-basis: 100%;
  margin: -6px 0 0;
  color: var(--slate);
  font-size: 12px;
}

.feed-search-note[hidden] {
  display: none;
}

/* ---------- Separador de dia no feed (chip como no WhatsApp) ---------- */

.day-sep {
  display: flex;
  justify-content: center;
  margin: 4px 0 -6px;
}

.day-sep span {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--slate);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 1px;
}

/* Cartão = recorte de conversa: cabeçalho informativo + área de chat */
.msg {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 16px 18px 14px;
  transition: box-shadow 200ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .msg {
    animation: msgIn 0.3s ease backwards;
  }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.msg:hover {
  box-shadow: var(--shadow-card-hover);
}

.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.msg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Semântica pela cor do texto: apagada = vermelho, editada = amarelo */
.msg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--white));
}

.msg-badge .i3d {
  font-size: 19px;
  margin: -3px 0 -3px -5px;
}

.msg.kind-edited .msg-badge {
  color: var(--yellow-active);
  background: color-mix(in srgb, var(--yellow) 10%, var(--white));
}

/* Inbox: incoming no buffer, sem visto no WhatsApp */
.msg.kind-inbox .msg-badge {
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--white));
}

/* Visualização única: violeta — capturada pelo comportamento (some ao ser vista) */
.msg.kind-view_once .msg-badge {
  color: #7B61FF;
  background: color-mix(in srgb, #7B61FF 8%, var(--white));
}

.msg .msg-badge.viewonce {
  color: #7B61FF;
  background: color-mix(in srgb, #7B61FF 8%, var(--white));
}

/* Status do WhatsApp (recado de 24h) apagado: teal, para não confundir com
   mensagem apagada de conversa */
.msg .msg-badge.status {
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--white));
}

.msg .msg-badge.neutral {
  color: var(--slate);
  background: var(--snow);
}

/* Nome do grupo é nome próprio: sem uppercase */
.msg .msg-badge.group {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Origem (número) — usado na visão "Todos os números" da master */
.msg-badge.number {
  color: var(--ink);
  background: var(--snow);
  text-transform: none;
  letter-spacing: 0;
}

/* Retenção do plano vence em < 24 h: vermelho mais cheio que o chip
   "Apagada" (7%) e borda tingida — depois dos chips por tipo para vencer
   a cor herdada de .msg.kind-* */
.msg .msg-badge.expiring {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, var(--white));
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  font-variant-numeric: tabular-nums;
}

.msg-when {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
}

.msg-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  flex: 1;
}

.msg-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
  background: hsl(var(--avatar-hue, 200) 45% 88%);
  color: hsl(var(--avatar-hue, 200) 45% 30%);
}

html[data-theme="dark"] .msg-avatar {
  background: hsl(var(--avatar-hue, 200) 30% 26%);
  color: hsl(var(--avatar-hue, 200) 60% 78%);
}

/* Foto real por cima da inicial (que segue como fallback enquanto carrega
   ou se a imagem falhar). */
.msg-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--snow);
  box-shadow: inset 0 0 0 1px rgba(20, 22, 30, 0.08);
  animation: avatar-in 0.25s ease-out;
}

@keyframes avatar-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mensagem de grupo: foto do grupo num selo no canto do avatar */
.msg-avatar-group {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--white);
  z-index: 1;
}

.msg-avatar-group:empty {
  display: none;
}

html[data-theme="dark"] .msg-avatar-photo {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .msg-avatar-photo {
    animation: none;
  }
}

.msg-who-text {
  margin: 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  word-break: break-word;
}

/* Número do contato como chip pequeno e colorido (verde, cor de telefone/
   WhatsApp) ao lado do nome; quebra para baixo quando não cabe. No mobile o
   chip some e o número fica no balão do nome — ver media query. */
.msg-who-text .msg-who-phone {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, var(--white));
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--green) 55%, var(--ink));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nome com número: toque/clique (ou Enter/espaço no foco) abre um balão
   escuro logo abaixo do nome com o número — o title nativo não aparece no
   toque em mobile. Estado controlado por .is-open (attachTapTip). */
.msg-who-text .name[data-tip] {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
}

.msg-who-text .name[data-tip]:focus-visible {
  outline: 2px solid var(--focus-blue);
  outline-offset: 2px;
}

.msg-who-text .name[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  transform: translateY(-4px);
  width: max-content;
  max-width: min(260px, 80vw);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 5;
}

.msg-who-text .name[data-tip].is-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.msg-who-text .chat {
  font-weight: 500;
  color: var(--slate);
}

.msg-who-text .chat::before {
  content: "·";
  margin: 0 8px;
  color: var(--slate);
}

/* ---------- Área de chat estilo WhatsApp dentro do cartão ---------- */

/* "Papel de parede" da conversa, como na demo da landing */
.fm-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  padding: 16px 12px 12px;
  border-radius: 12px;
  background: #ECE5DD;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
}

.fm-row {
  display: flex;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}

/* Respiro extra entre o fantasma e a bolha recuperada (o selo invade o vão) */
.fm-row + .fm-row {
  margin-top: 5px;
}

.fm-bubble {
  position: relative;
  min-width: 0;
  max-width: min(480px, 94%);
  background: #fff;
  color: #111B21;
  border-radius: 10px;
  border-top-left-radius: 2px;
  padding: 7px 10px 5px;
  font: 500 15px/1.45 var(--font);
  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
  word-break: break-word;
}

/* Rabinho triangular (só na bolha "comum"; a recuperada tem anel dourado) */
.fm-bubble.fm-tail::after {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-bottom: 9px solid transparent;
  border-right: 8px solid #fff;
}

/* Placeholder de apagada, como o WhatsApp exibe */
.fm-bubble.fm-ghost {
  color: #667781;
}

.fm-bubble.fm-ghost em {
  font-style: italic;
}

.fm-bubble.fm-ghost > svg {
  vertical-align: -2px;
  margin-right: 6px;
}

/* Bolha com o conteúdo recuperado: anel dourado da marca */
.fm-bubble.fm-truth {
  min-width: min(140px, 100%);
  border-top-left-radius: 10px;
  border: 1px solid rgba(240, 185, 11, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.14), rgba(0, 0, 0, 0.08) 0 1px 1px;
}

/* Selo "Recuperada" ancorado na bolha */
.fm-recovered-badge {
  position: absolute;
  top: -11px;
  right: -6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(240, 185, 11, 0.35);
}

.fm-text {
  display: block;
  white-space: pre-wrap;
}

/* Edição: texto anterior riscado acima do texto final */
.fm-old {
  display: block;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(17, 27, 33, 0.14);
  white-space: pre-wrap;
  font-size: 13.5px;
  color: #667781;
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
}

/* Horário dentro da bolha, canto inferior direito */
.fm-time {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: #667781;
  text-align: right;
  white-space: nowrap;
}

/* Placeholder e cofre travado ganham visual "de dentro da bolha" */
.fm-bubble .msg-placeholder,
.fm-bubble .msg-locked {
  margin: 0;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: #667781;
  font-size: 14px;
}

.fm-bubble .msg-locked[role="button"]:hover {
  color: #111B21;
}

/* Tema escuro: cores do WhatsApp dark, como na demo da landing */
html[data-theme="dark"] .fm-chat {
  background: #0B141A;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1.4px, transparent 1.6px);
}

html[data-theme="dark"] .fm-bubble {
  background: #202C33;
  color: #E9EDEF;
  box-shadow: none;
}

html[data-theme="dark"] .fm-bubble.fm-tail::after {
  border-right-color: #202C33;
}

html[data-theme="dark"] .fm-bubble.fm-ghost,
html[data-theme="dark"] .fm-time,
html[data-theme="dark"] .fm-bubble .msg-placeholder,
html[data-theme="dark"] .fm-bubble .msg-locked {
  color: #8696A0;
}

html[data-theme="dark"] .fm-bubble .msg-locked[role="button"]:hover {
  color: #E9EDEF;
}

html[data-theme="dark"] .fm-bubble.fm-truth {
  border-color: rgba(240, 185, 11, 0.45);
  box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.1);
}

html[data-theme="dark"] .fm-old {
  color: #8696A0;
  border-bottom-color: rgba(233, 237, 239, 0.14);
}

/* Rodapé de metadados do evento */
.msg-time {
  margin: 10px 2px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
}

/* Mídia */

.media {
  min-width: 0;
  max-width: 100%;
  margin-top: 12px;
}

.media img,
.media video {
  max-width: min(100%, 420px);
  border-radius: 8px;
  display: block;
  border: 1px solid var(--border);
}

.media audio {
  width: min(100%, 420px);
  display: block;
}

/* ---------- Frame de mídia: espaço reservado + miniatura ----------
   --media-ar / --media-w vêm do JS (dimensões do proto do WhatsApp, ou um
   palpite estável quando a linha é antiga). O cartão nasce com a altura
   final: a mídia que chega depois preenche o frame em vez de empurrar o
   que está abaixo. A miniatura (jpegThumbnail) fica desfocada por baixo. */
.media-frame {
  position: relative;
  /* A largura preferida vem do proto e é o que dá largura intrínseca ao
     frame (os filhos são absolutos, não contribuem nada). Precisa ser um
     comprimento puro: a bolha é shrink-to-fit (item de .fm-row), e um
     `width: min(360px, 100%)` — porcentagem cíclica — vira `auto` no cálculo
     do max-content, a bolha encolhia para a largura da hora e o frame ficava
     minúsculo em mensagem só de imagem. `max-width: 100%` continua deixando
     o frame encolher até o espaço real da bolha; min-width:0 nos ancestrais
     flex evita que 480px vire largura mínima. */
  width: var(--media-w, 360px);
  max-width: 100%;
  aspect-ratio: var(--media-ar, 4 / 3);
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--snow);
}

.media-frame > img,
.media-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border: none;
  border-radius: 0;
}

.media-frame > .media-thumb {
  object-fit: cover;
  filter: blur(14px) saturate(1.1);
  transform: scale(1.08);
  opacity: 0.9;
  transition: opacity 260ms ease;
}

.media-frame > .media-thumb + img,
.media-frame > .media-thumb + video {
  opacity: 0;
  transition: opacity 200ms ease;
}

.media-frame.is-loaded > .media-thumb {
  opacity: 0;
}

.media-frame.is-loaded > img,
.media-frame.is-loaded > video,
.media-frame > video[poster] {
  opacity: 1;
}

/* Sem miniatura: a imagem aparece assim que o navegador a pinta */
.media-frame > img:first-child,
.media-frame > video:first-child {
  opacity: 1;
}

/* Estado (decifrando N% / falhou) por cima da miniatura, no mesmo espaço */
.media-frame > .media-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  color: var(--ink);
  font: 600 13px var(--font);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
}

html[data-theme="dark"] .media-frame > .media-state {
  background: rgba(0, 0, 0, 0.35);
}

/* Áudio/documento não têm frame: o estado é a linha tracejada de antes */
.media:not(.media-frame) > .media-state {
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font: 500 13.5px var(--font);
  font-variant-numeric: tabular-nums;
}

.media:not(.media-frame)[data-kind="audio"] {
  min-height: 40px;
}

.media-state.is-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .media-frame > .media-thumb,
  .media-frame > .media-thumb + img,
  .media-frame > .media-thumb + video {
    transition: none;
  }
}

/* Mídia dentro da bolha: cantos arredondados, sem moldura extra */
.fm-bubble .media {
  margin-top: 2px;
}

.fm-bubble .media img,
.fm-bubble .media video {
  max-width: 100%;
  border: none;
  border-radius: 7px;
}

.fm-bubble .media-frame {
  border: none;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.06);
}

.fm-bubble .media-frame > img,
.fm-bubble .media-frame > video {
  border-radius: 0;
}

.fm-bubble .media:not(.media-frame) > .media-state {
  padding: 4px 0;
  border: none;
}

.fm-bubble .media audio {
  width: min(100%, 300px);
}

.fm-bubble .media + .fm-text,
.fm-bubble .fm-text + .media {
  margin-top: 6px;
}

.media a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.media-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--slate);
}

.media-note.is-retry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.fm-bubble .media-note.is-retry {
  margin: 0;
  color: #667781;
}

.media-retry {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 600 13px var(--font);
  cursor: pointer;
}

.media-retry:hover {
  border-color: var(--yellow);
  color: var(--ink);
}

html[data-theme="dark"] .fm-bubble .media-note {
  color: #8696A0;
}

html[data-theme="dark"] .media-retry:hover {
  color: #E9EDEF;
}

/* ---- Gatilhos do visualizador no feed ----
   Imagem: clique direto amplia. Vídeo/áudio: player nativo fica inline e um
   botão "expandir" abre o visualizador. Avatar: vira botão quando a foto
   principal carrega. */
.media.is-openable > img {
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: filter 160ms ease;
}

.media.is-openable > img:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
  border-radius: 7px;
}

@media (hover: hover) {
  .media.is-openable > img:hover {
    filter: brightness(1.04);
  }
}

/* Player compacto de áudio (buildInlineAudio): play + onda + duração +
   expandir. Largura fixa com teto em 100%: em bolha com largura por conteúdo
   uma porcentagem sozinha colapsaria para zero. */
.audio-inline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 340px;
  max-width: 100%;
  min-width: 0;
  padding: 8px 8px 8px 6px;
  border-radius: 14px;
  background: rgba(17, 27, 33, 0.04);
  --wave-base: rgba(84, 101, 111, 0.3);
}

.audio-inline audio {
  display: none;
}

.audio-inline-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  background: #25D366;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(37, 211, 102, 0.7);
  transition: transform 140ms ease, background 140ms ease;
}

.audio-inline-play:hover {
  background: #2EE07A;
}

.audio-inline-play:active {
  transform: scale(0.94);
}

.audio-inline-play:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
}

.audio-inline-play .ic-pause,
.audio-inline.is-playing .audio-inline-play .ic-play {
  display: none;
}

.audio-inline.is-playing .audio-inline-play .ic-pause {
  display: block;
}

.audio-inline-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.audio-inline-meta {
  display: flex;
  justify-content: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #667781;
  line-height: 1;
  padding-left: 2px;
}

.audio-inline.is-playing .audio-inline-meta {
  color: #25D366;
}

.media-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(17, 27, 33, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 140ms ease, transform 140ms ease, opacity 160ms ease;
}

.media-expand:hover {
  background: rgba(17, 27, 33, 0.82);
  transform: scale(1.06);
}

.media-expand:active {
  transform: scale(0.96);
}

.media-expand:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
}

/* Vídeo: não toca inline. O frame mostra primeiro quadro/miniatura e um
   botão de play cobre o frame inteiro — qualquer clique abre o visualizador
   já tocando. Duração (do proto) no canto inferior esquerdo. */
.media-frame > video {
  pointer-events: none;
}

.media-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 40%);
  color: #FFFFFF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.media-play-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(17, 27, 33, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 160ms ease, background 160ms ease;
}

.media-play-disc svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.media-play:hover .media-play-disc {
  background: rgba(37, 211, 102, 0.92);
  transform: scale(1.06);
}

.media-play:active .media-play-disc {
  transform: scale(0.96);
}

.media-play:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: -3px;
  border-radius: 8px;
}

.media-play-dur {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(17, 27, 33, 0.62);
  font: 600 11.5px var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Frame ainda em palpite/carregando: o play espera a mídia chegar */
.media-frame.is-pending > .media-play {
  display: none;
}

.audio-inline .media-expand {
  width: 30px;
  height: 30px;
  color: #54656F;
  background: rgba(17, 27, 33, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.audio-inline .media-expand:hover {
  color: #111B21;
  background: rgba(17, 27, 33, 0.12);
}

.msg-avatar.is-openable {
  cursor: zoom-in;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.msg-avatar.is-openable:hover {
  transform: scale(1.06);
}

.msg-avatar.is-openable:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
}

html[data-theme="dark"] .audio-inline {
  background: rgba(233, 237, 239, 0.06);
  --wave-base: rgba(233, 237, 239, 0.28);
}

html[data-theme="dark"] .audio-inline-meta {
  color: #8696A0;
}

html[data-theme="dark"] .audio-inline.is-playing .audio-inline-meta {
  color: #25D366;
}

html[data-theme="dark"] .audio-inline .media-expand {
  color: #AEBAC1;
  background: rgba(233, 237, 239, 0.08);
}

html[data-theme="dark"] .audio-inline .media-expand:hover {
  color: #E9EDEF;
  background: rgba(233, 237, 239, 0.16);
}

/* Conteúdo sem corpo exibível (mídia não recuperada, localização, vCard…):
   placeholder com ícone do tipo em vez de cartão "oco" */
.msg-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--snow);
  color: var(--slate);
  font-size: 14px;
  font-weight: 500;
}

.msg-placeholder + .msg-placeholder {
  margin-top: 8px;
}

.msg-placeholder svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.empty {
  margin: 48px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--slate);
}

/* ---------- Responsivo ---------- */

@media (max-width: 896px) {
  .container {
    padding-inline: 16px;
  }

  .gate {
    padding: 48px 0 32px;
  }

  .gate-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .nav-tag {
    display: none;
  }

  /* Logado, no celular, a bandeira sai da topbar (o idioma fica no seletor
     de Minha conta). No gate ela continua: é o único lugar para trocar. */
  body:has(#inbox:not([hidden])) .lang-toggle {
    display: none;
  }

  /* Topbar: logotipo + nome centralizados em relação à tela, ações à direita
     (grade 1fr auto 1fr; a 1ª coluna fica vazia no Clássico — o Dashboard
     coloca o botão do menu nela, em dashboard.css). */
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }

  .nav-inner .brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }

  .nav-inner .nav-right {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    gap: 8px;
  }

  .feed-bar {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 32px;
  }

  .msg {
    padding: 12px 12px 10px;
  }

  .fm-chat {
    padding: 14px 10px 10px;
  }

  .fm-bubble {
    max-width: 94%;
  }
}

@media (max-width: 560px) {
  .fm-bubble:has(.media-frame) {
    /* No mobile, mídia aproveita a bolha sem criar largura intrínseca maior
       que o viewport. O padding da bolha já está incluído pelo border-box. */
    width: 94%;
  }

  .media-frame {
    width: 100%;
  }
}

/* ---------- Painel de instâncias WAHA (master) ---------- */

.admin-section {
  margin: 8px auto 24px;
  display: grid;
  gap: 16px;
}

.admin-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-toolbar .card-copy {
  margin: 0;
}

.admin-card.is-collapsed {
  gap: 0;
}

.admin-card.is-collapsed > :not(.admin-head) {
  display: none;
}

/* Estatísticas de armazenamento (snapshot por janela de retenção) */

.storage-stats {
  display: grid;
  gap: 12px;
  overflow-x: auto;
}

.storage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.storage-table th,
.storage-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.storage-table th[scope='row'],
.storage-table thead th:first-child {
  text-align: left;
  font-weight: 600;
}

.storage-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.storage-table tr.is-total th,
.storage-table tr.is-total td {
  font-weight: 700;
  border-bottom: none;
}

.storage-table tr.is-provider th,
.storage-table tr.is-provider td {
  color: var(--muted);
  border-bottom: none;
}

.storage-table tr.is-sub th {
  padding-left: 28px;
  font-weight: 400;
  color: var(--muted);
}

.storage-table tr.is-sub td {
  color: var(--muted);
}

.number-country-flag {
  display: inline-block;
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
  vertical-align: -1px;
}

.storage-table tr.is-error td {
  color: var(--red);
  text-align: left;
}

.storage-foot {
  margin: 0;
}

/* Monitor do pool WAHA (uma seção por instância) */

.monitor-list {
  display: grid;
  gap: 20px;
}

.monitor-instance {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.monitor-instance:first-child {
  padding-top: 0;
  border-top: none;
}

.inst-group-title {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.monitor-stat {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--snow);
}

.monitor-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.monitor-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.monitor-value::before {
  content: none;
}

.monitor-value.is-ok::before,
.monitor-value.is-bad::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.monitor-value.is-ok::before {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 203, 129, 0.15);
}

.monitor-value.is-bad::before {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(246, 70, 93, 0.15);
}

@media (max-width: 720px) {
  .monitor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-card {
  display: grid;
  gap: 20px;
}

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-head .card-copy {
  margin-bottom: 0;
}

/* Ferramentas do cabeçalho (filtro por marca + atualizar) */
.admin-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-tools .admin-filter select {
  min-height: 38px;
  padding: 6px 32px 6px 14px;
  font-size: 13px;
  box-shadow: none;
  background-position: right 12px center;
}

.inst-list {
  display: grid;
  gap: 10px;
}

.inst-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--snow);
}

.inst-row.is-active {
  border-color: var(--green);
}

.inst-info {
  min-width: 0;
}

.inst-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inst-meta {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.inst-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--border);
  color: var(--ink);
}

.inst-badge.active {
  background: var(--green);
  color: var(--on-dark);
}

.inst-badge.ok {
  background: var(--green);
  color: var(--on-dark);
}

.inst-badge.warn {
  background: var(--yellow);
  color: var(--on-yellow);
}

.inst-badge.bad {
  background: var(--red);
  color: #fff;
}

/* Grupo de badges encostado à direita do título (lista de contas do master):
   fica numa coluna alinhada entre as linhas, logo antes dos botões. O
   .inst-info precisa ocupar a largura livre para o margin-left:auto agir. */
.inst-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

#acctList .inst-info {
  flex: 1;
}

/* Frase-chave (zero-access): círculo só com o cadeado. Fechado em teal =
   ligada; aberto em vermelho, com uma faixa diagonal por cima ("proibido")
   = desligada — o suporte precisa ver de longe quem está em claro. */
.inst-badge.enc {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--slate);
  cursor: help;
  outline-offset: 2px;
}

.inst-badge.enc svg {
  width: 12px;
  height: 12px;
  display: block;
}

.inst-badge.enc.on {
  background: color-mix(in srgb, var(--teal) 16%, var(--white));
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
}

.inst-badge.enc.off {
  background: color-mix(in srgb, var(--red) 12%, var(--white));
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 55%, transparent);
}

/* A faixa: barra vermelha atravessando o círculo, com um filete da cor do
   fundo em volta para o cadeado não "colar" nela. */
.inst-badge.enc.off::before {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--red) 12%, var(--white));
  transform: rotate(-45deg);
  pointer-events: none;
}

/* Tooltip (data-tip): balão escuro ancorado à direita do badge, abre no
   hover e no foco via teclado. Fica à direita da linha, então cresce para a
   esquerda para não estourar a tela. */
.inst-badge.enc::after {
  content: attr(data-tip);
  position: absolute;
  right: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(11px) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 5;
}

.inst-badge.enc:hover::after,
.inst-badge.enc:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(11px) translateY(0);
}

/* Marca (multi-marca, painel master): cor fixa por marca para a origem de
   conta / número / sessão ser reconhecível de longe. Marca nova sem cor
   definida cai no neutro. Cores por data-brand — o texto vem do catálogo. */
.inst-badge.brand {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--snow);
  color: var(--slate);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.inst-badge.brand[data-brand='uneraser'] {
  background: color-mix(in srgb, var(--yellow) 18%, var(--white));
  color: var(--yellow-active);
  border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
}

.inst-badge.brand[data-brand='safekeep'] {
  background: color-mix(in srgb, var(--teal) 14%, var(--white));
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
}

/* Compacto (tabelas de storage/trials): só a inicial, num quadradinho antes
   do e-mail — a coluna já é apertada. */
.inst-badge.brand.compact {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-right: 8px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0;
  vertical-align: -4px;
}

/* Feed "Todos os números" (master): alinhado aos demais badges da mensagem */
.msg-badges .inst-badge.brand {
  align-self: center;
}

.inst-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.inst-form {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.migrate-form {
  padding-top: 0;
  border-top: none;
}

.migrate-form .inst-grid {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .migrate-form .inst-grid,
  .inst-grid-2 {
    grid-template-columns: 1fr;
  }
}

.inst-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 12px;
}

.inst-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.inst-defaults {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.inst-defaults-field {
  flex: 1;
  min-width: 12rem;
}

.inst-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.inst-sessions {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}

@media (max-width: 720px) {
  .inst-grid {
    grid-template-columns: 1fr;
  }

  .inst-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Em coluna o flex:1 vira altura; a largura cheia mantém os badges à direita */
  #acctList .inst-info {
    align-self: stretch;
  }
}

/* Aviso de histórico arquivado (login OTP) */

.archived-notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--slate);
  background: var(--snow);
}

.verify-notice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.verify-notice-text {
  margin: 0;
}

.verify-notice .billing-plans {
  margin-top: 4px;
}

/* Exclusão definitiva local de um item do feed */

.msg-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Botão só com ícone (lixeira 3D): cinza em repouso, ganha cor no hover. */
.msg-forget {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.msg-forget .i3d {
  font-size: 18px;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.msg-forget:hover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.msg-forget:hover .i3d {
  filter: none;
  opacity: 1;
}

.msg-forget:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.msg-forget:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Modal (substitui alert/confirm nativos) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12, 14, 18, 0.55);
  backdrop-filter: blur(3px);
  animation: modal-fade 160ms ease;
}

.modal {
  width: min(480px, 100%);
  max-height: min(80vh, 640px);
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 18px 50px -12px;
  padding: 24px;
  animation: modal-pop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.modal-message {
  margin: 12px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-2);
}

/* Slot opcional do modal (ex.: select de instância de destino) */
.modal-body {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.modal-body select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: 500 14px var(--font);
}

.modal-body .inst-meta {
  margin: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.modal-actions .btn.square {
  padding: 10px 24px;
}

.btn.square.danger {
  background: var(--red);
  color: var(--on-dark);
}

.btn.square.danger:hover {
  background: #D93A50;
  color: var(--on-dark);
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal {
    animation: none;
  }
}

/* ---------- Visualizador de avatar e mídia (mediaViewer.js) ----------
   Abaixo dos .modal-overlay (z 100): um alerta pode aparecer por cima.
   A abertura/fechamento da figura e do backdrop é animada via Web Animations
   em JS (FLIP a partir do elemento de origem); o CSS cuida do chrome. */

html.viewer-open {
  overflow: hidden;
}

.viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.viewer-overlay[hidden] {
  display: none;
}

.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 13, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Durante o arraste o blur pesa: cai para o fundo sólido */
.viewer-overlay.is-dragging .viewer-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.viewer-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  /* Em cima: barra de botões; embaixo: faixa da legenda. Os mesmos números
     em VIEWPORT_PAD_Y de mediaViewer.js (56 + 84). */
  padding: 56px 16px 84px;
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  pointer-events: none;
}

.viewer-figure {
  position: relative;
  pointer-events: auto;
  transform-origin: 50% 50%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #0B141A;
}

.viewer-figure.is-springing {
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.viewer-figure.is-resizing {
  transition: width 220ms ease, height 220ms ease;
}

/* Imagem e vídeo */
.viewer-figure-image,
.viewer-figure-video {
  max-width: 100%;
  max-height: 100%;
}

.viewer-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.viewer-figure-image .viewer-media {
  cursor: default;
}

/* Miniatura borrada por baixo enquanto a imagem grande carrega */
.viewer-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.2);
  transform: scale(1.08);
  opacity: 1;
  transition: opacity 260ms ease;
}

.viewer-figure.is-loaded .viewer-poster {
  opacity: 0;
}

.viewer-figure-image .viewer-media {
  position: relative;
  opacity: 0;
  transition: opacity 240ms ease;
}

.viewer-figure-image.is-loaded .viewer-media,
.viewer-figure-image:not(:has(.viewer-poster)) .viewer-media {
  opacity: 1;
}

/* Avatar: círculo grande */
.viewer-figure-avatar {
  border-radius: 50%;
  width: min(72vw, 72dvh, 420px);
  height: min(72vw, 72dvh, 420px);
  background: #202C33;
}

.viewer-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Chrome: barra superior e legenda inferior, em vidro */
.viewer-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.viewer-overlay.is-open .viewer-chrome {
  opacity: 1;
  transition-delay: 120ms;
}

.viewer-overlay.is-chrome-hidden .viewer-chrome,
.viewer-overlay.is-dragging .viewer-chrome {
  opacity: 0;
  transition-delay: 0ms;
}

.viewer-chrome > * {
  pointer-events: auto;
}

.viewer-overlay.is-chrome-hidden .viewer-chrome > *,
.viewer-overlay.is-dragging .viewer-chrome > * {
  pointer-events: none;
}

.viewer-top {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  display: flex;
  gap: 8px;
}

.viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}

.viewer-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.viewer-btn:active {
  transform: scale(0.94);
}

.viewer-btn:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
}

.viewer-btn[hidden] {
  display: none;
}

.viewer-caption {
  position: absolute;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 560px);
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.viewer-caption[hidden] {
  display: none;
}

.viewer-caption-avatar {
  display: inline-flex;
  flex: none;
}

.viewer-caption-avatar[hidden] {
  display: none;
}

.viewer-caption-avatar .msg-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.viewer-caption:has(.viewer-caption-avatar[hidden]) {
  padding-left: 16px;
}

.viewer-caption-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.viewer-caption-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-caption-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-caption-meta[hidden] {
  display: none;
}

/* Mini player de áudio */
.viewer-figure-audio {
  width: min(92vw, 420px);
  border-radius: 22px;
  background: linear-gradient(160deg, hsl(var(--avatar-hue, 160) 30% 22%), #111B21 70%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.viewer-audio {
  display: grid;
  gap: 18px;
  padding: 20px 20px 18px;
  color: #E9EDEF;
}

.viewer-audio audio {
  display: none;
}

.viewer-audio-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.viewer-audio-avatar {
  display: inline-flex;
  flex: none;
}

.viewer-audio-avatar .msg-avatar {
  width: 44px;
  height: 44px;
  font-size: 17px;
}

.viewer-audio-avatar:empty {
  display: none;
}

.viewer-audio-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.viewer-audio-who strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-audio-who span {
  font-size: 12px;
  color: rgba(233, 237, 239, 0.65);
}

/* Forma de onda compartilhada (waveform.js): feed e visualizador. Cores e
   altura por variáveis; --p é o progresso. */
.wave {
  --p: 0%;
  --wave-base: rgba(84, 101, 111, 0.35);
  --wave-fill: #25D366;
  --wave-head: #FFFFFF;
  position: relative;
  height: var(--wave-h, 32px);
  cursor: pointer;
  touch-action: none;
  border-radius: 8px;
  -webkit-user-select: none;
  user-select: none;
}

.wave:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 4px;
}

.wave-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--wave-gap, 2px);
}

.wave-bars i {
  flex: 1 1 0;
  min-height: 4px;
  border-radius: 2px;
  background: currentColor;
  transition: height 280ms ease;
}

.wave-base {
  color: var(--wave-base);
}

.wave-fill {
  color: var(--wave-fill);
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
}

.wave.is-seeking .wave-bars i {
  transition: none;
}

.wave-head {
  position: absolute;
  top: 50%;
  left: var(--p);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--wave-head);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.wave:hover .wave-head,
.wave:focus-visible .wave-head,
.wave.is-seeking .wave-head {
  opacity: 1;
  transform: scale(1);
}

/* No visualizador: mais alta, base clara sobre o cartão escuro */
.viewer-audio .wave {
  --wave-h: 56px;
  --wave-base: rgba(233, 237, 239, 0.28);
}

.viewer-audio .wave-head {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
}

.viewer-audio-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.viewer-audio-time {
  display: inline-flex;
  gap: 5px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(233, 237, 239, 0.75);
}

.viewer-audio-sep {
  opacity: 0.5;
}

.viewer-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0B141A;
  background: #25D366;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.7);
  transition: transform 140ms ease, background 140ms ease;
}

.viewer-play:hover {
  background: #2EE07A;
}

.viewer-play:active {
  transform: scale(0.94);
}

.viewer-play:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.viewer-play .viewer-ic-pause {
  display: none;
}

.viewer-audio.is-playing .viewer-play .viewer-ic-pause {
  display: block;
}

.viewer-audio.is-playing .viewer-play .viewer-ic-play {
  display: none;
}

.viewer-rate {
  justify-self: end;
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #E9EDEF;
  background: rgba(255, 255, 255, 0.08);
  font: 700 13px var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 140ms ease;
}

.viewer-rate:hover {
  background: rgba(255, 255, 255, 0.16);
}

.viewer-rate:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .viewer-stage {
    padding-left: 8px;
    padding-right: 8px;
  }

  .viewer-figure {
    border-radius: 10px;
  }

  .viewer-caption {
    max-width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-chrome,
  .viewer-figure.is-springing,
  .viewer-figure.is-resizing,
  .viewer-poster,
  .viewer-figure-image .viewer-media,
  .wave-bars i,
  .audio-inline-play {
    transition: none;
  }
}

/* ---------- Fase 3: contas (gate + painel) ---------- */

.gate-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.gate-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font: 600 15px var(--font);
  color: var(--muted);
  cursor: pointer;
}

.gate-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--yellow);
}

.turnstile-slot:empty {
  display: none;
}

.turnstile-slot {
  margin: 4px 0;
}

.lang-toggle {
  font: 700 12px var(--font);
  letter-spacing: 0.06em;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 18px 0;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.account-value {
  margin: 0;
  font: 600 15px var(--font);
  color: var(--ink);
  word-break: break-all;
}

.account-badge {
  margin: 0;
  font: 600 12px var(--font);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--snow);
  color: var(--muted);
  border: 1px solid var(--border);
}

.account-badge.is-ok {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
}

.account-badge.is-warn {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

.account-select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: 500 14px var(--font);
}

.billing-zone {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.billing-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
}

.billing-plan {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.billing-plan .btn {
  margin-top: auto;
}

.danger-zone {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.danger-zone .form {
  width: 100%;
  max-width: 380px;
}

.btn.danger,
.btn.square.danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 50%, transparent);
}

.btn.square.danger {
  background: var(--red);
  color: #fff;
  border: none;
}

/* ---------- Landing pública ---------- */

.landing-hero {
  padding: 72px 0 48px;
  overflow-x: clip;
}

.landing-cta-row {
  display: flex;
  gap: 12px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}

/* ---------- Demo do hero: telefone WhatsApp com revelação animada ---------- */

.landing-hero-demo {
  align-self: center;
  justify-self: center;
  width: min(400px, 100%);
  border-radius: 24px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #ECE5DD;
  box-shadow: var(--shadow-card-hover);
}

/* Flutuação sutil do "telefone" */
@media (prefers-reduced-motion: no-preference) {
  .landing-hero-demo {
    animation: demoFloat 7s ease-in-out infinite;
  }
}

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

/* Hover pausa a cena inteira (timers via JS, animações via CSS) */
.landing-hero-demo.is-paused,
.landing-hero-demo.is-paused * {
  animation-play-state: paused !important;
}

/* Barra de status do telefone */
.wa-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 5px;
  background: #054C44;
  color: #fff;
}

.wa-status-time {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wa-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.92;
}

.wa-status-icons svg {
  display: block;
}

.wa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #075E54;
  color: #fff;
}

.wa-back-icon {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.85;
}

.wa-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #CFD8D3;
  color: #8FA29B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.wa-avatar svg {
  width: 26px;
  height: 26px;
  margin-top: 5px;
}

.wa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mesmo fade de entrada do nome quando o contato troca */
.wa-avatar.is-entering {
  animation: waContactIn 0.4s ease;
}

.wa-contact {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

/* Fade de entrada quando o contato do cabeçalho troca entre slides */
.wa-contact.is-entering {
  animation: waContactIn 0.4s ease;
}

@keyframes waContactIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.wa-name {
  font-weight: 600;
  font-size: 15px;
}

.wa-presence {
  font-size: 11.5px;
  opacity: 0.75;
}

.wa-header-icons {
  margin-left: auto;
  display: flex;
  gap: 16px;
  opacity: 0.8;
}

.wa-header-icons svg {
  width: 17px;
  height: 17px;
}

/* "Papel de parede" da conversa: pontilhado sutil */
.wa-body {
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
}

.wa-daychip {
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #54656F;
  background: #F7F5F3;
  border-radius: 8px;
  padding: 3px 10px;
  box-shadow: rgba(0, 0, 0, 0.06) 0 1px 1px;
}

/* Palco: bolhas de contexto em fluxo + "stack" com as fases da mensagem-chave
   (typing → chegada → apagada/editada → recuperada) empilhadas na mesma célula. */
.reveal-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 186px;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.reveal-stage.is-leaving {
  opacity: 0;
}

.wa-stack {
  position: relative;
  display: grid;
  align-items: start;
}

.wa-stack > .wa-row {
  grid-area: 1 / 1;
}

.wa-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.wa-row.from-me {
  justify-content: flex-end;
}

/* Bolha de contexto entra com um pop rápido junto com o slide */
.wa-ctx .wa-bubble {
  animation: bubbleSpring 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) 0.1s both;
}

.wa-bubble {
  position: relative;
  max-width: 84%;
  background: #fff;
  color: #111B21;
  border-radius: 10px;
  border-top-left-radius: 2px;
  padding: 8px 10px 6px;
  font: 500 14.5px/1.4 var(--font);
  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
}

/* Mensagem enviada por "você": bolha verde à direita, com ticks azuis */
.wa-bubble.wa-out {
  background: #D9FDD3;
  border-top-left-radius: 10px;
  border-top-right-radius: 2px;
}

/* Rabinho triangular como no WhatsApp (só em bolhas "comuns";
   a recuperada tem anel dourado e dispensa o rabinho) */
.wa-bubble.wa-tail::after {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-bottom: 9px solid transparent;
  border-right: 8px solid #fff;
}

.wa-bubble.wa-tail.wa-out::after {
  left: auto;
  right: -7px;
  border-right: none;
  border-left: 8px solid #D9FDD3;
}

/* Indicador de "digitando…": três pontinhos pulsando */
.wa-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 14px;
}

.wa-typing-bubble i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8696A0;
  animation: typingBlink 1.15s ease-in-out infinite;
}

.wa-typing-bubble i:nth-child(2) { animation-delay: 0.18s; }
.wa-typing-bubble i:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBlink {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Fases: typing e chegada ficam ocultas até a classe correspondente */
.wa-typing-row,
.wa-arrive {
  opacity: 0;
  pointer-events: none;
}

.reveal-stage.is-typing .wa-typing-row {
  opacity: 1;
}

.reveal-stage.is-typing .wa-typing-row .wa-bubble {
  animation: bubbleSpring 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.reveal-stage.is-arrived .wa-typing-row {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.reveal-stage.is-arrived .wa-arrive {
  opacity: 1;
}

.reveal-stage.is-arrived .wa-arrive .wa-bubble {
  animation: bubbleSpring 0.38s cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* Quando a mensagem "some", a versão que chegou dá lugar à cover */
.reveal-stage.is-covered .wa-arrive {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reveal-stage.is-covered .wa-arrive .wa-bubble {
  animation: none;
}

.wa-row .wa-bubble { transform-origin: bottom left; }
.wa-row.from-me .wa-bubble { transform-origin: bottom right; }

@keyframes bubbleSpring {
  0% { opacity: 0; transform: translateY(10px) scale(0.86); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

.wa-time {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  color: #667781;
  text-align: right;
  white-space: nowrap;
}

.wa-time svg {
  vertical-align: -1px;
  margin-left: 3px;
  color: #53BDEB;
}

/* Placeholder de apagada, como o WhatsApp exibe */
.wa-bubble.wa-ghost {
  color: #667781;
}

.wa-bubble.wa-ghost em {
  font-style: italic;
}

.wa-bubble.wa-ghost > svg {
  vertical-align: -2px;
  margin-right: 5px;
}

/* Bolha recuperada: destaque na cor da marca */
.wa-truth-bubble {
  border: 1px solid rgba(240, 185, 11, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.14), rgba(0, 0, 0, 0.08) 0 1px 1px;
}

/* Brilho dourado que percorre a bolha recuperada uma vez, na revelação */
.reveal-stage.is-revealed .wa-truth-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 235, 160, 0.5) 50%, transparent 68%) no-repeat;
  background-size: 240% 100%;
  animation: truthShimmer 1s ease-out 0.25s both;
}

@keyframes truthShimmer {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

/* Selo "Recuperada" ancorado na bolha, no lugar do chip solto */
.wa-recovered-badge {
  position: absolute;
  top: -11px;
  right: -6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(240, 185, 11, 0.45);
  opacity: 0;
}

.wa-bubble.wa-out .wa-recovered-badge {
  right: auto;
  left: -6px;
}

.reveal-stage.is-revealed .wa-recovered-badge {
  animation: badgePop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.4s both;
}

@keyframes badgePop {
  from { opacity: 0; transform: scale(0.6) translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* Citação (reply) dentro da bolha */
.wa-quote {
  display: block;
  margin: -2px 0 6px;
  padding: 5px 9px 6px;
  border-left: 3px solid #06CF9C;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.055);
  font-size: 12.5px;
  color: #54656F;
}

.wa-quote b {
  display: block;
  margin-bottom: 1px;
  font-size: 11px;
  font-weight: 700;
  color: #008069;
}

/* Mensagem de voz: play + forma de onda + duração */
.wa-audio {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 200px;
  padding: 6px 4px 3px;
  color: #54656F;
}

.wa-audio svg {
  flex: none;
}

.wa-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.wa-wave i {
  width: 3px;
  border-radius: 2px;
  background: #AEBAC1;
}

/* Na bolha recuperada, a onda fica dourada */
.wa-truth-bubble .wa-wave i {
  background: #D9A70B;
}

.wa-audio-dur {
  font-size: 11px;
  white-space: nowrap;
}

/* Foto recuperada (arte em CSS: pôr do sol) */
.wa-bubble.wa-media {
  padding: 5px 5px 6px;
  max-width: 88%;
}

.wa-photo {
  display: block;
  width: 224px;
  max-width: 100%;
  height: 126px;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  background:
    url("/img/demo-recovered.jpg") center 32% / cover no-repeat,
    linear-gradient(180deg, #4A3A33 0%, #2B2028 100%);
}

.wa-caption {
  display: block;
  padding: 6px 6px 0;
  font-size: 13.5px;
}

.wa-media .wa-time {
  padding-right: 6px;
}

/* Recorte angulado: truth entra pela esquerda, cover é "consumida" em sincronia */
.wa-truth {
  clip-path: polygon(-10% 0, -10% 0, -18% 100%, -10% 100%);
}

.wa-cover {
  opacity: 0;
  clip-path: polygon(-10% 0, 118% 0, 118% 100%, -18% 100%);
  transition: opacity 0.3s ease;
}

/* A cover só aparece no momento em que a mensagem "some" */
.reveal-stage.is-covered .wa-cover {
  opacity: 1;
}

.reveal-stage.is-scanning .wa-truth {
  animation: waTruthWipe 2s cubic-bezier(0.6, 0.05, 0.4, 0.95) forwards;
}

.reveal-stage.is-scanning .wa-cover {
  animation: waCoverWipe 2s cubic-bezier(0.6, 0.05, 0.4, 0.95) forwards;
}

.reveal-stage.is-revealed .wa-truth {
  clip-path: none;
  animation: none;
}

.reveal-stage.is-revealed .wa-cover {
  clip-path: polygon(118% 0, 118% 0, 118% 100%, 110% 100%);
  animation: none;
  opacity: 0;
}

@keyframes waTruthWipe {
  from { clip-path: polygon(-10% 0, -10% 0, -18% 100%, -10% 100%); }
  to   { clip-path: polygon(-10% 0, 118% 0, 110% 100%, -10% 100%); }
}

@keyframes waCoverWipe {
  from { clip-path: polygon(-10% 0, 118% 0, 118% 100%, -18% 100%); }
  to   { clip-path: polygon(118% 0, 118% 0, 118% 100%, 110% 100%); }
}

/* Linha de varredura: feixe dourado angulado que "reconstitui" a verdade */
.reveal-line {
  position: absolute;
  top: -8%;
  height: 116%;
  width: 3px;
  left: -14%;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-8deg);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(240, 185, 11, 0) 0%, #FFD000 18%, #FFF3C4 50%, #FFD000 82%, rgba(240, 185, 11, 0) 100%);
  box-shadow: 0 0 14px 3px rgba(240, 185, 11, 0.65);
}

.reveal-stage.is-scanning .reveal-line {
  opacity: 1;
  animation: waScanline 2s cubic-bezier(0.6, 0.05, 0.4, 0.95) forwards;
}

.reveal-stage.is-revealed .reveal-line {
  opacity: 0;
  transition: opacity 0.25s ease;
}

@keyframes waScanline {
  from { left: -14%; }
  to   { left: 112%; }
}

/* Chip de estado sob a conversa: apagada/editada → recuperada */
.wa-chip-row {
  display: flex;
  justify-content: center;
  min-height: 28px;
}

.wa-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: opacity 0.35s ease;
}

.wa-state-chip.is-deleted {
  color: #C4314B;
  background: rgba(246, 70, 93, 0.12);
  animation: chipPop 0.3s ease;
}

.wa-state-chip.is-edited {
  color: #8A6D00;
  background: rgba(240, 185, 11, 0.16);
  animation: chipPop 0.3s ease;
}

/* Na revelação o chip cede o palco ao selo ancorado na bolha */
.wa-state-chip.is-hidden {
  opacity: 0;
}

@keyframes chipPop {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}

.wa-inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
}

.wa-input {
  flex: 1;
  background: #fff;
  color: #8696A0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  box-shadow: rgba(0, 0, 0, 0.06) 0 1px 1px;
}

.wa-mic {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: #075E54;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-mic svg {
  width: 17px;
  height: 17px;
}

.wa-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 0 12px;
}

.wa-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.wa-dot:hover {
  background: rgba(0, 0, 0, 0.32);
}

.wa-dot.is-active {
  background: var(--yellow-active);
  transform: scale(1.3);
}

.wa-dot.is-active:hover {
  background: var(--yellow-active);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-line {
    display: none;
  }

  .reveal-stage .wa-truth,
  .reveal-stage .wa-cover {
    animation: none !important;
  }

  .wa-ctx .wa-bubble,
  .reveal-stage.is-typing .wa-typing-row .wa-bubble,
  .reveal-stage.is-arrived .wa-arrive .wa-bubble,
  .reveal-stage.is-revealed .wa-truth-bubble::before {
    animation: none !important;
  }

  .wa-ctx .wa-bubble {
    opacity: 1;
  }

  .reveal-stage.is-revealed .wa-recovered-badge {
    animation: none !important;
    opacity: 1;
  }
}

/* Tema escuro: cores do WhatsApp dark */
html[data-theme="dark"] .landing-hero-demo {
  background: #0B141A;
  border-color: #233138;
}

html[data-theme="dark"] .wa-header {
  background: #202C33;
}

html[data-theme="dark"] .wa-avatar {
  background: #33434C;
  color: #75868F;
}

html[data-theme="dark"] .wa-body {
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1.4px, transparent 1.6px);
}

html[data-theme="dark"] .wa-daychip {
  color: #8696A0;
  background: #182229;
  box-shadow: none;
}

html[data-theme="dark"] .wa-bubble {
  background: #202C33;
  color: #E9EDEF;
  box-shadow: none;
}

html[data-theme="dark"] .wa-bubble.wa-out {
  background: #005C4B;
}

html[data-theme="dark"] .wa-bubble.wa-ghost,
html[data-theme="dark"] .wa-time {
  color: #8696A0;
}

html[data-theme="dark"] .wa-statusbar {
  background: #1A252B;
}

html[data-theme="dark"] .wa-bubble.wa-tail::after {
  border-right-color: #202C33;
}

html[data-theme="dark"] .wa-bubble.wa-tail.wa-out::after {
  border-left-color: #005C4B;
}

html[data-theme="dark"] .wa-quote {
  background: rgba(255, 255, 255, 0.06);
  color: #AEBAC1;
}

html[data-theme="dark"] .wa-quote b {
  color: #06CF9C;
}

html[data-theme="dark"] .wa-audio {
  color: #AEBAC1;
}

html[data-theme="dark"] .wa-wave i {
  background: #5B6B75;
}

html[data-theme="dark"] .wa-truth-bubble .wa-wave i {
  background: #F0B90B;
}

html[data-theme="dark"] .wa-input {
  background: #202C33;
  color: #8696A0;
  box-shadow: none;
}

html[data-theme="dark"] .wa-mic {
  background: #00A884;
}

html[data-theme="dark"] .wa-dot {
  background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .wa-dot:hover {
  background: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .wa-dot.is-active,
html[data-theme="dark"] .wa-dot.is-active:hover {
  background: var(--yellow);
}

.landing-section {
  padding: 56px 0;
}

.landing-h2 {
  font: 700 clamp(24px, 3.4vw, 34px) var(--font);
  margin: 0 0 10px;
  color: var(--ink);
}

.dark-section .landing-h2,
.dark-section .landing-step h3 {
  color: var(--on-dark);
}

.landing-sub {
  margin: 0 0 26px;
  color: var(--muted);
  font: 400 16px/1.55 var(--font);
  max-width: 640px;
}

.dark-section .landing-sub {
  color: var(--slate);
}

.landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.landing-card {
  padding: 24px;
}

.landing-card h3 {
  margin: 0 0 8px;
  font: 600 18px var(--font);
  color: var(--ink);
}

.landing-card p {
  margin: 0;
  color: var(--muted);
  font: 400 14.5px/1.55 var(--font);
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 26px;
}

.landing-step h3 {
  margin: 0 0 6px;
  font: 600 17px var(--font);
}

.landing-step p {
  margin: 0;
  color: var(--slate);
  font: 400 14.5px/1.55 var(--font);
}

.pricing-cards {
  max-width: 760px;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-card.is-featured {
  border: 2px solid var(--yellow);
  position: relative;
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--yellow);
  color: #1E2026;
  font: 700 11px/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

.pricing-tagline {
  margin: -6px 0 0;
  color: var(--slate);
  font: 400 14px/1.5 var(--font);
}

.pricing-retention {
  font: 600 15px var(--font);
  color: var(--ink);
  margin: 0;
}

.pricing-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font: 400 14px/1.7 var(--font);
}

.pricing-list .pricing-exclusive {
  color: var(--ink);
  font-weight: 600;
}

.pricing-list .pricing-exclusive::marker {
  color: var(--yellow);
}

.pricing-list .pricing-limitation {
  color: var(--muted);
  font-weight: 500;
}

.pricing-list .pricing-limitation::marker {
  color: var(--muted);
}

.pricing-amount {
  margin: auto 0 0;
  font: 700 28px/1.2 var(--font);
  color: var(--ink);
}

.pricing-soon {
  margin: auto 0 0;
  font: 600 13px var(--font);
  color: var(--muted);
}

.landing-narrow {
  max-width: 760px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.faq-item summary {
  cursor: pointer;
  font: 600 15.5px var(--font);
  color: var(--ink);
}

.faq-item p {
  margin: 10px 0 0;
  color: var(--muted);
  font: 400 14.5px/1.6 var(--font);
}

.landing-legal {
  padding: 40px 0;
}

.legal-note {
  color: var(--muted);
  font: 400 13px var(--font);
  margin: 0 0 14px;
}

.legal-list {
  padding-left: 20px;
  color: var(--text-2);
  font: 400 14px/1.65 var(--font);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-footer {
  border-top: 1px solid var(--border);
  padding: 26px 0;
}

.landing-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font: 400 13px var(--font);
}

.landing-footer-links {
  display: flex;
  gap: 18px;
}

.landing-footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.landing-footer-links a:hover {
  color: var(--ink);
}

.landing-footer-note {
  font-size: 12px;
}

/* ---------- Selos de confiança (landing) ---------- */

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--snow);
  color: var(--text-2);
  font: 600 12.5px var(--font);
  white-space: nowrap;
}

.trust-badge svg {
  color: var(--green);
  flex-shrink: 0;
}

.pricing-trust {
  justify-content: center;
  margin-top: 26px;
}

.trust-cards {
  max-width: 1000px;
}

.trust-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--snow);
  border: 1px solid var(--border);
  color: var(--green);
}

/* ---------- CTA final (landing) ---------- */

.landing-final-cta {
  text-align: center;
}

.landing-final-cta .landing-h2,
.landing-final-cta .landing-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.landing-final-cta .landing-cta-row {
  justify-content: center;
}

.final-note {
  margin: 0;
  color: var(--muted);
  font: 600 13px var(--font);
}

/* ---------- Contato (landing) ---------- */

.contact-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.contact-channels .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contact-form .form {
  margin-top: 16px;
}

.field textarea {
  width: 100%;
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  resize: vertical;
  transition: border-color 200ms ease;
}

.field textarea::placeholder {
  color: var(--slate);
  font-weight: 500;
}

.field textarea:focus {
  outline: 1px solid var(--ink);
  border-color: var(--ink);
}

.contact-feedback {
  margin: 0;
  font: 600 14px var(--font);
  color: var(--green);
}

.contact-feedback.is-error {
  color: var(--red);
}

/* ---------- Privacidade e controle (app) ---------- */

.trust-notice {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--slate);
  background: var(--snow);
}

.trust-notice svg {
  color: var(--green);
  flex-shrink: 0;
}

/* Cofre ativo: o aviso entra com a página e some sozinho (renderTrustNotice
   põe .is-fading após 2 s e esconde ao fim da transição). */
.trust-notice {
  transition: opacity 0.45s ease;
}

.trust-notice.is-fading {
  opacity: 0;
}

/* Cofre inativo: alerta que induz a ativar a frase-chave */
.trust-notice.is-warn {
  border-left-color: var(--yellow-active);
  background: color-mix(in srgb, var(--yellow) 14%, var(--white));
  color: var(--text-2);
  flex-wrap: wrap;
}

.trust-notice.is-warn > span {
  flex: 1 1 240px;
  min-width: 0;
}

.trust-notice.is-warn .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.privacy-zone {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.privacy-zone .form {
  width: 100%;
  max-width: 380px;
}

.privacy-assurance {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1.45 var(--font);
  color: var(--ink);
}

.privacy-assurance svg {
  color: var(--green);
  flex-shrink: 0;
}

.btn-wipe {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
}

.activity-zone {
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font: 400 13.5px/1.4 var(--font);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-when {
  flex-shrink: 0;
  min-width: 120px;
  color: var(--muted);
  font-feature-settings: "tnum";
}

.activity-label {
  color: var(--text-2);
  font-weight: 500;
}

.activity-ip {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-feature-settings: "tnum";
}

/* Celular: a linha (ícone + data + rótulo + IP, este sem quebra — IPv6 passa de
   35 caracteres) não cabe em ~260px. Como os itens da grade .admin-card têm
   min-width:auto, esse min-content empurrava o card e a página inteira para
   um scroll horizontal. Aqui a linha quebra: data e IP em cima, rótulo embaixo. */
@media (max-width: 640px) {
  .admin-card > * {
    min-width: 0;
  }

  .activity-list {
    overflow-x: hidden;
  }

  .activity-item {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  /* 1ª linha: ícone + data (a data ocupa o resto da linha e força a quebra);
     2ª linha: rótulo à esquerda e IP à direita, alinhados sob a data. */
  .activity-when {
    flex: 1 1 auto;
    min-width: 0;
  }

  .activity-label {
    min-width: 0;
    padding-left: 32px; /* ícone 20px + gap 12px */
  }

  .activity-ip {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
  }
}

/* Botão de desconexão destacado (painel WhatsApp, seção escura) */

/* ---------- Proteção com frase-chave ---------- */

.enc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--yellow) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--yellow) 10%, var(--white));
  font: 500 14px/1.4 var(--font);
  color: var(--ink);
}

.enc-banner svg {
  flex-shrink: 0;
  color: var(--yellow-active);
}

.enc-banner .btn {
  margin-left: auto;
  flex-shrink: 0;
}

/* Cofre destravado: faixa verde, mesma casca do .enc-banner (travado) */
.enc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 8%, var(--white));
  font: 500 13px/1.35 var(--font);
  color: var(--ink);
}

.enc-chip .i3d {
  font-size: 28px;
  filter: drop-shadow(0 3px 5px rgba(20, 22, 30, 0.12));
}

.enc-chip-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.enc-chip-copy strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}

.enc-chip-copy em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--slate);
}

.enc-chip-btn {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  border-radius: 999px;
  background: var(--white);
  font: 600 12.5px var(--font);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.enc-chip-btn:hover {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 50%, transparent);
  background: color-mix(in srgb, var(--red) 6%, var(--white));
}

/* Placeholder de conteúdo travado no feed */
.msg-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--snow);
  color: var(--muted);
  font: 500 14px/1.4 var(--font);
}

.msg-locked[role="button"] {
  cursor: pointer;
}

.msg-locked[role="button"]:hover {
  border-color: var(--yellow);
  color: var(--ink);
}

.msg-locked svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Conteúdo fora do plano: mesmo visual do cadeado, com CTA de upgrade */
.msg-locked.is-plan {
  flex-wrap: wrap;
}

.msg-locked-upgrade {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 600 13px var(--font);
  cursor: pointer;
}

.msg-locked-upgrade:hover:not(:disabled) {
  background: var(--yellow);
  color: var(--ink);
}

.msg-locked-upgrade:disabled {
  opacity: 0.6;
  cursor: default;
}

.enc-pending {
  color: var(--muted);
}

.enc-failed {
  color: var(--muted);
  font-style: italic;
}

/* Zona no painel da conta */
.enc-zone {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.enc-zone .form {
  width: 100%;
  max-width: 380px;
  margin-top: 8px;
}

.enc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Minha conexão (painel da conta) ----------
   Espelho da barra WAHA do feed: estado do número + ações de sessão. */
.conn-zone {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.conn-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conn-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slate);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--slate) 18%, transparent);
}

.conn-dot.is-ok {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent);
}

.conn-dot.is-warn {
  background: var(--yellow);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 22%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}

.conn-dot.is-bad {
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent);
}

.conn-status-copy p {
  margin: 0;
}

.conn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.conn-actions .btn.square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.conn-actions .btn.square .i3d {
  font-size: 20px;
  margin-left: -4px;
}

.btn.ghost.danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

.btn.ghost.danger:hover {
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.card-copy.warn {
  color: var(--red);
  font-weight: 500;
}

/* ---------- Pareamento por código (dentro do card de conexão) ----------
   Campos usam o visual padrão de .field; só a separação do cabeçalho é
   própria. */

.waha-pair {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 16px;
  max-width: 480px;
}

.pair-form {
  display: grid;
  gap: 12px;
}

.pair-code-block {
  display: grid;
  gap: 10px;
}

.pair-code-intro {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.pair-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pair-code {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--snow);
  border: 1px dashed color-mix(in srgb, var(--slate) 55%, transparent);
  border-radius: 10px;
  padding: 10px 18px;
  user-select: all;
}

.pair-expiry {
  margin: 0;
  font-size: 13px;
  color: var(--slate);
}

.pair-steps {
  margin: 4px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--slate);
}

.waha-alt {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.waha-alt .link-btn {
  font-size: 13px;
  color: var(--slate);
}

.waha-alt .link-btn:hover {
  color: var(--ink);
}

.pair-fallbacks {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  max-width: 480px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--snow);
}

.pair-fallback {
  display: grid;
  gap: 8px;
}

.pair-handoff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pair-handoff-url {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  word-break: break-all;
  user-select: all;
}

/* ---------- Segunda tela pública (/tela) ---------- */

.master-wrap {
  padding: 48px 0 64px;
  display: grid;
  justify-items: center;
}

.master-card {
  max-width: 420px;
  width: 100%;
}

.master-enc-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2, color-mix(in srgb, var(--slate) 12%, transparent));
  color: var(--slate);
}

.master-or {
  margin: 16px 0 4px;
  text-align: center;
  color: var(--muted, var(--slate));
  font-size: 0.85rem;
  text-transform: lowercase;
}

.tela-wrap {
  padding: 48px 0 64px;
  display: grid;
  gap: 24px;
  justify-items: center;
}

.tela-card {
  max-width: 460px;
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 28px;
}

.tela-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tela-head .icon-tile {
  flex: none;
}

.tela-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.tela-qr {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.tela-qr-head {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.tela-qr-head .i3d {
  font-size: 72px;
  filter: drop-shadow(0 6px 10px rgba(20, 22, 30, 0.12));
}

.tela-qr .waha-status {
  color: inherit;
}

.tela-qr .qr-steps,
.tela-warning {
  color: var(--muted, #6b7280);
}

.tela-qr .qr-steps strong {
  color: var(--ink);
}

.tela-warning {
  max-width: 40em;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--red, #f6465d) 35%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
}

.tela-warning .i3d {
  font-size: 28px;
  margin-top: -2px;
}

#telaCodeInput {
  font-size: 24px;
  letter-spacing: 0.3em;
  text-align: center;
}

.tela-success .tela-title {
  color: var(--green, #16a34a);
}

@media (max-width: 520px) {
  .tela-wrap {
    padding-top: 28px;
  }

  .tela-card {
    padding: 22px 18px;
  }

  .tela-head .icon-tile {
    width: 52px;
    height: 52px;
  }

  .tela-head .icon-tile .i3d {
    font-size: 40px;
  }
}

@media (max-width: 640px) {
  .msg-head {
    align-items: flex-start;
  }

  .msg-side {
    gap: 4px;
  }

  .msg-when {
    font-size: 12px;
  }

  .msg-forget {
    width: 28px;
    height: 28px;
  }

  /* Mobile: número só no balão que abre ao tocar no nome */
  .msg-who-text .msg-who-phone {
    display: none;
  }

  .msg-badges {
    gap: 6px;
  }
}

.link-btn {
  margin-top: 10px;
  border: none;
  background: none;
  padding: 0;
  font: 500 13px var(--font);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--ink);
}

/* Diálogos: campo de senha com toggle, lembrar, código */
.enc-pass-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.enc-pass-wrap input {
  flex: 1;
  min-width: 0;
}

.enc-show-btn {
  border: 1px solid var(--border);
  background: var(--snow);
  border-radius: 8px;
  padding: 8px 10px;
  font: 600 12px var(--font);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.enc-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 500 13.5px var(--font);
  color: var(--text-2);
  cursor: pointer;
}

.enc-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--yellow);
}

.enc-code {
  margin: 6px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--snow);
  font: 700 17px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-align: center;
  user-select: all;
  word-break: break-all;
}

/* Wizard */
.modal-wide {
  width: min(560px, 100%);
}

.enc-steps {
  display: flex;
  gap: 6px;
  margin: 12px 0 4px;
}

.enc-steps span {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: var(--border);
}

.enc-steps span.is-current {
  background: var(--yellow);
}

.enc-steps span.is-done {
  background: color-mix(in srgb, var(--yellow) 55%, var(--border));
}

.enc-step {
  margin-top: 6px;
}

.enc-bullets {
  margin: 10px 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 400 14px/1.5 var(--font);
  color: var(--text-2);
}

.enc-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  font: 600 12px var(--font);
  color: var(--muted);
}

.enc-strength i {
  width: 90px;
  height: 5px;
  border-radius: 5px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.enc-strength i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 33%;
  background: var(--red);
  border-radius: 5px;
  transition: width 0.2s ease, background 0.2s ease;
}

.enc-strength[data-score="1"] i::after {
  width: 66%;
  background: var(--yellow);
}

.enc-strength[data-score="2"] i::after {
  width: 100%;
  background: var(--green);
}

/* ---------- Convites (admin + gate do cliente) ---------- */

.invite-toggle,
.pref-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.pref-toggle {
  margin: 14px 0 6px;
}

.pref-toggle + .pref-copy {
  margin: 0 0 6px 28px;
}

#avatarsPrefStatus {
  margin: 0 0 18px 28px;
}

#avatarsPrefStatus:empty {
  display: none;
}

.invite-toggle input,
.pref-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  cursor: pointer;
}

#inviteCodeInput {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.invite-waitlist {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Ícones 3D (Thiings) ----------
   Renders WebP com fundo transparente, servidos de /img/3d. Todos são
   decorativos (alt="" + aria-hidden): o significado continua no texto. */

.i3d {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.2em;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.i3d-sm { font-size: 20px; }
.i3d-md { font-size: 40px; }
.i3d-lg { font-size: 72px; }
.i3d-xl { font-size: 112px; }

.i3d-md,
.i3d-lg,
.i3d-xl {
  filter: drop-shadow(0 6px 10px rgba(20, 22, 30, 0.12));
}

/* Placa neutra: os objetos do Thiings já trazem cor, volume e sombra. */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--snow) 76%, var(--white));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .icon-tile {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.icon-tile .i3d,
.trust-icon .i3d {
  font-size: 46px;
}

/* Placa sobre seções escuras (passos "Como funciona" e "Segurança") */
.dark-section .icon-tile {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Cards da landing: ícone acima do título */
.landing-card .icon-tile {
  margin-bottom: 14px;
}

.trust-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--snow) 76%, var(--white));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .trust-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.trust-card .trust-icon {
  margin-bottom: 4px;
}

/* Passos: ícone à esquerda do número */
.landing-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: start;
}

.landing-step .icon-tile {
  width: 60px;
  height: 60px;
}

.landing-step-body {
  min-width: 0;
}

/* Preço: ícone do plano ao lado do nome */
.pricing-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pricing-head h3 {
  margin: 0;
}

.pricing-head .icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.pricing-head .icon-tile .i3d {
  font-size: 36px;
}

/* Selos de confiança: 3D no lugar do traço */
.trust-badge .i3d {
  font-size: 18px;
  vertical-align: middle;
}

/* Título de seção com ícone acima */
.section-icon {
  display: block;
  margin: 0 0 14px;
}

.section-icon.i3d-md {
  font-size: 52px;
}

.landing-final-cta .section-icon {
  font-size: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hero: objetos flutuando ao redor do telefone ---------- */

.hero-stage {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(400px, 100%);
}

.hero-stage .landing-hero-demo {
  width: 100%;
}

.hero-float {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(20, 22, 30, 0.16));
}

.hero-float-1 {
  top: -48px;
  left: -76px;
  font-size: 124px;
  transform: rotate(-8deg);
}

.hero-float-2 {
  right: -72px;
  top: 32%;
  font-size: 108px;
  transform: rotate(10deg);
}

.hero-float-3 {
  left: -66px;
  bottom: 36px;
  font-size: 100px;
  transform: rotate(6deg);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-float-1 { animation: heroFloatA 8s ease-in-out infinite; }
  .hero-float-2 { animation: heroFloatB 9.5s ease-in-out infinite; }
  .hero-float-3 { animation: heroFloatC 7s ease-in-out infinite; }
}

@keyframes heroFloatA {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(-4deg); }
}

@keyframes heroFloatB {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  50% { transform: translateY(-12px) rotate(14deg); }
}

@keyframes heroFloatC {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@media (max-width: 1100px) {
  .hero-float-1 { top: -40px; left: -30px; font-size: 96px; }
  .hero-float-2 { right: -24px; top: 30%; font-size: 84px; }
  .hero-float-3 { left: -30px; bottom: 110px; font-size: 76px; }
}

@media (max-width: 640px) {
  .hero-float { display: none; }
}

/* ---------- Gate (app): trilha de objetos abaixo do hero ---------- */

.gate-art {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.gate-art li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 120px;
  max-width: 160px;
  padding: 16px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--snow) 76%, var(--white));
  text-align: center;
  font: 600 12.5px/1.3 var(--font);
  color: var(--text-2);
}

.gate-art .i3d {
  font-size: 56px;
  filter: drop-shadow(0 6px 10px rgba(20, 22, 30, 0.12));
}

@media (prefers-reduced-motion: no-preference) {
  .gate-art .i3d { animation: gateBob 6s ease-in-out infinite; }
  .gate-art li:nth-child(2) .i3d { animation-delay: -2s; }
  .gate-art li:nth-child(3) .i3d { animation-delay: -4s; }
}

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

/* ---------- App: estado vazio do feed ---------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty .i3d {
  font-size: 120px;
}

@media (prefers-reduced-motion: no-preference) {
  .empty .i3d { animation: gateBob 6s ease-in-out infinite; }
}

/* ---------- App: chips do feed com miniaturas 3D ---------- */

.feed-chip .i3d {
  font-size: 18px;
  margin-left: -4px;
}

/* ---------- App: banners e avisos ---------- */

.enc-banner .i3d {
  font-size: 34px;
  filter: drop-shadow(0 3px 5px rgba(20, 22, 30, 0.12));
}

.trust-notice .i3d {
  font-size: 26px;
}

/* Avisos com objeto à esquerda (archived / verify / onboarding / trial).
   Mesma escala do trust-notice; o texto continua no <span>/<p> irmão. */
.notice-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-row .i3d {
  font-size: 26px;
  filter: drop-shadow(0 3px 5px rgba(20, 22, 30, 0.1));
}

.notice-row > span,
.notice-row > p {
  margin: 0;
  min-width: 0;
}

/* Histórico de ações: um objeto por família de evento (renderActivity) */
.activity-item .i3d {
  font-size: 20px;
  align-self: center;
}

/* Planos in-app: mesmo par de objetos dos cards de preço da landing */
.billing-plan-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-plan-name .i3d {
  font-size: 26px;
  filter: drop-shadow(0 3px 5px rgba(20, 22, 30, 0.1));
}

/* ---------- App: rótulos de zona do painel da conta ---------- */

.zone-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zone-label .i3d {
  font-size: 26px;
  filter: drop-shadow(0 3px 5px rgba(20, 22, 30, 0.1));
}

/* ---------- App: pareamento (seção escura) ---------- */

.pair-code-intro {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pair-code-intro .i3d {
  font-size: 32px;
}

/* Alternativas de pareamento: três botões empilhados, objeto antes do rótulo
   para varredura rápida (outra tela / e-mail / QR aqui). */
.pair-fallback .btn.square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pair-fallback .btn.square .i3d {
  font-size: 22px;
  margin-left: -6px;
}

/* ---------- App: modais com ícone de cabeçalho ---------- */

.modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modal-head .icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.modal-head .icon-tile .i3d {
  font-size: 36px;
}

.modal-head .modal-title {
  margin: 0;
}

@media (max-width: 896px) {
  .landing-step {
    grid-template-columns: 52px 1fr;
    gap: 12px;
  }

  .landing-step .icon-tile,
  .landing-card .icon-tile,
  .trust-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .landing-step .icon-tile .i3d,
  .landing-card .icon-tile .i3d,
  .trust-icon .i3d {
    font-size: 40px;
  }

  .gate-art .i3d {
    font-size: 52px;
  }

  .empty .i3d {
    font-size: 96px;
  }
}