/* ==========================================================================
   Mocks vivos da landing page.

   Substituem os PNGs de screenshot da interface. Motivo técnico, além do
   visual: as capturas eram da interface CLARA e viravam blocos brancos no tema
   escuro — não há filtro de CSS que conserte isso sem descaracterizar o
   produto. Componente construído com os tokens acompanha o tema sozinho,
   fica nítido em qualquer densidade de tela e pesa uma fração de um PNG.

   Todo mock respeita `prefers-reduced-motion`: a animação para, mas o
   componente continua mostrando o estado final (nunca fica vazio).
   ========================================================================== */

.mock {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--neutral-0);
  color: var(--neutral-900);
  text-align: left;
  container-type: inline-size;
}
.mock * {
  box-sizing: border-box;
}

/* Blindagem contra o CSS da página.
   O site estiliza `header` e `nav` por TAG — `header` é `position: fixed`. Um
   <header> dentro do mock herdava isso e o cabeçalho da conversa ia parar
   grudado no topo da tela, fora do quadro. As tags dentro do mock foram
   trocadas por <div>, e este reset garante que nenhuma regra por tag do site
   vaze para dentro de um mock no futuro. */
.mock header,
.mock nav,
.mock aside,
.mock section {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  z-index: auto;
}
/* NÃO zerar `padding` aqui. Este seletor é (0,1,1) e vencia as regras de
   componente como `.mock-filters` (0,1,0) — foi o que deixou as sidebars
   coladas na borda. O que precisava ser neutralizado do CSS do site era
   posicionamento e fundo, não espaçamento interno. */

/* --------------------------------------------------------------------------
   1. Tela de Atendimento — reprodução da tela real do app.weny.com.br.

   O que veio do produto (e não de invenção): barra superior escura com o
   seletor de produto e a navegação; sidebar de filtros agrupada em Caixa de
   entrada / Status / Canais / Agentes com contadores à direita; coluna de
   conversas com o botão "Nova conversa"; abas Mensagens/Oportunidade/Chamadas;
   botão "Ações" em lime; avatares em círculo lime com iniciais; e a mensagem
   do agente em LAVANDA — não em lime, como eu tinha feito antes.
   -------------------------------------------------------------------------- */
/* Altura e escala: a tela precisa DOMINAR o hero, como o print que ela
   substituiu. 430px deixava o produto parecendo miniatura. */
.mock-inbox {
  display: flex;
  flex-direction: column;
  height: 580px;
  font-size: 12px;
  overflow: hidden;
}

/* Barra superior: escura nos DOIS temas, como no produto. Cada item de menu
   tem ícone, há um divisor depois do seletor de produto e o cluster da direita
   (Copiloto, saldo, tema, novidades, ajuda, avisos, avatar) — conferido no
   recorte do print real, não de memória. */
.mock-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 44px;
  background: #262b33;
  color: #e8eaed;
  flex-shrink: 0;
  overflow: hidden;
}
.mock-topbar svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mock-apps { opacity: 0.75; display: inline-flex; }
.mock-logo { display: inline-flex; }
/* Logo REAL da Weny: o símbolo é extraído de imagens/logo-white.svg (os quatro
   traços do X), não um desenho aproximado. Antes eu tinha inventado uma
   estrela — é o tipo de detalhe que denuncia um mock na hora. */
.mock-logo svg { width: 18px; height: 18px; display: block; }
.mock-prod {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mock-prod b { opacity: 0.55; font-weight: 400; margin-left: 1px; }
.mock-div {
  width: 1px;
  height: 18px;
  background: rgba(232, 234, 237, 0.18);
  flex-shrink: 0;
}
.mock-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: rgba(232, 234, 237, 0.6);
  overflow: hidden;
  min-width: 0;
}
.mock-nav span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mock-nav .on { color: #fff; font-weight: 700; }
.mock-nav b { opacity: 0.55; font-weight: 400; }

.mock-topright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.mock-copilot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #fff;
  white-space: nowrap;
}
/* Medidor de saldo: anel com o percentual, como no produto. */
.mock-pct {
  font-size: 9px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(232, 234, 237, 0.3);
  color: rgba(232, 234, 237, 0.85);
}
.mock-ico {
  display: inline-flex;
  color: rgba(232, 234, 237, 0.75);
  position: relative;
}
.mock-ico.has-dot::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success-300);
}
.mock-me {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #131313;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.mock-inbox-cols {
  display: grid;
  grid-template-columns: 186px 224px 1fr;
  flex: 1;
  min-height: 0;
}

/* Sidebar de filtros */
.mock-filters {
  border-right: 1px solid var(--neutral-30);
  padding: 9px 8px;
  overflow: hidden;
  background: var(--neutral-0);
}
.mock-filters-title {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 7px;
}
.mock-search {
  border: 1px solid var(--neutral-30);
  border-radius: 7px;
  padding: 5px 8px;
  color: var(--neutral-100);
  font-size: 10px;
  margin-bottom: 9px;
}
.mock-group {
  font-size: 9.5px;
  color: var(--neutral-100);
  margin: 9px 0 4px;
}
.mock-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--neutral-300);
  font-size: 11.5px;
}
.mock-f.on {
  background: var(--neutral-20);
  color: var(--neutral-900);
  font-weight: 600;
}
.mock-f span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.mock-f b {
  font-weight: 600;
  color: var(--neutral-200);
  font-variant-numeric: tabular-nums;
}
.mock-f .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.d.ia { background: var(--chart-blue); }
.d.wait { background: var(--warning-300); }
.d.done { background: var(--success-300); }
.d.wa { background: #25d366; }
.mock-agent {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--neutral-900);
}
.mock-agent i {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--neutral-100);
}

/* Avatares: círculo lime com iniciais, como no produto. */
.mock-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--primary);
  color: #131313;
}
.mock-avatar.sm {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

/* Coluna de conversas */
.mock-convs {
  border-right: 1px solid var(--neutral-30);
  padding: 8px 7px;
  overflow: hidden;
  background: var(--neutral-0);
}
.mock-convs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
}
/* Pílula invertida: escura no tema claro, clara no escuro — em ambos ela é o
   botão de destaque da coluna. Usa a rampa crua (e não --surface-inverse) de
   propósito: aqui o efeito desejado É inverter com o tema. */
.mock-newconv {
  background: var(--neutral-900);
  color: var(--neutral-0);
  font-size: 9px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.mock-conv {
  display: flex;
  gap: 8px;
  padding: 7px;
  border-radius: 8px;
  align-items: flex-start;
  transition: background 0.3s ease;
}
.mock-conv.is-active {
  background: var(--neutral-20);
}
.mock-conv-body { min-width: 0; flex: 1; }
.mock-conv-name {
  font-weight: 600;
  font-size: 11.5px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.mock-conv-name time {
  color: var(--neutral-100);
  font-weight: 500;
  font-size: 9px;
  flex-shrink: 0;
}
.mock-conv-prev {
  color: var(--neutral-200);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  display: block;
}

/* Área da conversa */
.mock-inbox-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--neutral-0);
}
.mock-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--neutral-30);
}
.mock-chat-head strong { display: block; font-size: 13px; }
.mock-chat-head small { color: var(--neutral-100); font-size: 9.5px; }
.mock-acoes {
  margin-left: auto;
  background: var(--primary);
  color: #131313;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.mock-tabs {
  display: flex;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--neutral-30);
  font-size: 11.5px;
  color: var(--neutral-200);
}
.mock-tabs span { padding: 7px 0; }
.mock-tabs .on {
  color: var(--neutral-900);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--neutral-900);
}

.mock-thread {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
  overflow: hidden;
}
.mock-msg {
  max-width: 72%;
  padding: 10px 13px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  animation: mock-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Cliente: bolha neutra à esquerda. */
.mock-msg.is-them {
  align-self: flex-start;
  background: var(--neutral-20);
  color: var(--neutral-900);
}
/* Agente Weny: LAVANDA à direita — é a cor que o produto usa. */
.mock-msg.is-ai {
  align-self: flex-end;
  background: var(--mock-agent-bg);
  color: var(--mock-agent-fg);
  border: 1px solid var(--mock-agent-br);
}
.mock-msg-meta {
  display: block;
  font-size: 9px;
  margin-top: 3px;
  opacity: 0.65;
}
@keyframes mock-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.mock-typing {
  align-self: flex-end;
  display: inline-flex;
  gap: 3px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--mock-agent-bg);
  border: 1px solid var(--mock-agent-br);
  animation: mock-in 0.3s ease both;
}
.mock-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mock-agent-fg);
  animation: mock-dot 1.1s ease-in-out infinite;
}
.mock-typing i:nth-child(2) { animation-delay: 0.16s; }
.mock-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes mock-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.mock-composer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--neutral-30);
  color: var(--neutral-100);
  font-size: 10.5px;
}
.mock-composer-field {
  flex: 1;
  border: 1px solid var(--neutral-30);
  border-radius: 100px;
  padding: 6px 12px;
  background: var(--neutral-10);
}
.mock-send {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #131313;
}

/* Lavanda do Agente Weny, nos dois temas. */
:root {
  --mock-agent-bg: #efedfd;
  --mock-agent-fg: #2b2350;
  --mock-agent-br: #ded9fa;
}
:root[data-theme='dark'] {
  --mock-agent-bg: #211d33;
  --mock-agent-fg: #cfc7f5;
  --mock-agent-br: #322a4d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --mock-agent-bg: #211d33;
    --mock-agent-fg: #cfc7f5;
    --mock-agent-br: #322a4d;
  }
}

@container (max-width: 760px) {
  .mock-inbox-cols { grid-template-columns: 160px 1fr; }
  .mock-filters { display: none; }
}
@container (max-width: 520px) {
  .mock-inbox-cols { grid-template-columns: 1fr; }
  .mock-convs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mock-msg, .mock-typing { animation: none; }
  .mock-typing i { animation: none; opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   2. Cartões flutuantes do hero (SLA, contato) e HUD de telemetria.

   Substituem os três PNGs laterais. O estilo monoespaçado dos rótulos é
   deliberado: comunica "dado de sistema, ao vivo" em vez de "print de tela".
   -------------------------------------------------------------------------- */
.mock-card,
.mock-hud {
  padding: 14px;
  font-size: 12px;
  border-radius: 12px;
}
.mock-mono,
.mock-hud {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
.mock-mono {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--neutral-100);
}
.mock-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--neutral-50);
  flex-shrink: 0;
}
.mock-dot.ok {
  background: var(--success-300);
  box-shadow: 0 0 0 0 var(--success-300);
  animation: mock-pulse 2.4s ease-out infinite;
}
@keyframes mock-pulse {
  0% { box-shadow: 0 0 0 0 rgba(88, 192, 148, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(88, 192, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(88, 192, 148, 0); }
}
.mock-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--warning-50);
  color: var(--warning-300);
  border: 1px solid var(--warning-100);
}
.mock-kpi {
  margin-bottom: 12px;
}
.mock-kpi strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mock-kpi span {
  font-size: 11px;
  color: var(--neutral-200);
}
.mock-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.mock-rows li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--neutral-200);
  padding-top: 7px;
  border-top: 1px solid var(--neutral-30);
}
.mock-rows b {
  color: var(--neutral-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mock-rows b.ok,
.mock-hud b.ok {
  color: var(--success-300);
}
.mock-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.mock-contact strong {
  display: block;
  font-size: 12.5px;
}
.mock-contact small {
  color: var(--neutral-100);
  font-size: 11px;
}
.mock-score {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--neutral-200);
  margin-bottom: 6px;
}
.mock-score b {
  font-size: 20px;
  font-weight: 800;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}
.mock-bar {
  height: 5px;
  border-radius: 100px;
  background: var(--neutral-30);
  overflow: hidden;
}
.mock-bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--primary);
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mock-hud {
  display: grid;
  gap: 8px;
  font-size: 10.5px;
}
.mock-hud-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.05em;
  color: var(--neutral-100);
}
.mock-hud-row b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--neutral-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* O quadro central deixa de ser um print de 132% de largura: o mock é
   construído no tamanho certo e não precisa transbordar o container. */
/* O quadro central transborda o container de propósito, como no layout
   original do print: é o que faz a tela dominar o hero. */
.hero-img-central:has(.mock) {
  width: 112%;
  margin-left: -6%;
}

@media (prefers-reduced-motion: reduce) {
  .mock-dot.ok { animation: none; }
  .mock-bar i { transition: none; }
}

/* --------------------------------------------------------------------------
   Posição dos cartões flutuantes.

   As posições originais (-22%) foram calculadas para o print antigo. Com o
   quadro central em 124% de largura, elas jogavam os cartões para fora da
   janela. Agora eles se apoiam NA BORDA da tela, sobrepondo-a de leve — que é
   o efeito que o layout original buscava.
   -------------------------------------------------------------------------- */
/* Afastados para as laterais: antes ficavam POR CIMA da tela e escondiam a
   sidebar e a conversa. Agora encostam de leve na borda do quadro, e o
   conteúdo do produto fica legível. */
.hero-images:has(.mock) .hero-img-left {
  left: -13%;
  top: 72%;
  width: 20%;
}
.hero-images:has(.mock) .hero-img-right {
  right: -13%;
  top: 40%;
  width: 20%;
}
.hero-images:has(.mock) .hero-img-right-bottom {
  right: -11%;
  top: 84%;
  width: 19%;
  padding: 0;
  background: var(--neutral-0);
}
@media (max-width: 1200px) {
  .hero-images:has(.mock) .hero-img-left,
  .hero-images:has(.mock) .hero-img-right,
  .hero-images:has(.mock) .hero-img-right-bottom {
    display: none;
  }
  .hero-img-central:has(.mock) {
    width: 100%;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Insights — gráfico de Conversão (substitui imagens/insights.png)
   -------------------------------------------------------------------------- */
.mock-chart {
  border: 1px solid var(--neutral-30);
  border-radius: 14px;
  padding: 16px;
  position: relative;
}
.mock-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.mock-chart-head strong { font-size: 17px; font-weight: 700; }
.mock-select {
  border: 1px solid var(--neutral-30);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--neutral-300);
  white-space: nowrap;
}
.mock-chart-value {
  text-align: center;
  margin: 6px 0 2px;
}
.mock-chart-value b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mock-chart-value span {
  font-size: 11px;
  color: var(--neutral-200);
}
.mock-chart-svg {
  width: 100%;
  height: 150px;
  display: block;
  overflow: visible;
}
.mock-grid line {
  stroke: var(--neutral-30);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.mock-chart-line {
  fill: none;
  stroke: var(--danger-200);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* O traço é desenhado do começo ao fim: `stroke-dasharray` recebe o
     comprimento real da curva no JS, porque ele muda a cada série de dados. */
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mock-chart-area {
  fill: var(--danger-200);
  opacity: 0.1;
  transition: d 1.2s ease;
}
.mock-chart-dot {
  fill: var(--neutral-0);
  stroke: var(--danger-200);
  stroke-width: 3;
  transition: cx 1.1s cubic-bezier(0.4, 0, 0.2, 1), cy 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   4. Copiloto — regras de automação com toggles e cursores da equipe
      (substitui imagens/copiloto.png)
   -------------------------------------------------------------------------- */
.mock-rules {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 8px 4px;
  background: none;
}
.mock-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.mock-rule.is-on {
  border-color: var(--primary-300);
  transform: translateX(2px);
}
.mock-rule-body { min-width: 0; flex: 1; }
.mock-rule-body b { display: block; font-size: 12.5px; font-weight: 700; }
.mock-rule-body i {
  display: block;
  font-style: normal;
  font-size: 11px;
  line-height: 1.45;
  color: var(--neutral-200);
  margin-top: 2px;
}
.mock-rule-time {
  font-size: 12px;
  color: var(--neutral-300);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mock-switch {
  width: 34px;
  height: 19px;
  border-radius: 100px;
  background: var(--neutral-30);
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.mock-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--neutral-0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mock-switch.is-on {
  background: var(--primary);
}
.mock-switch.is-on::after {
  transform: translateX(15px);
}

/* Cursores da equipe: comunicam que a configuração é colaborativa, como no
   material original. */
.mock-cursor {
  position: absolute;
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}
.mock-cursor svg { width: 15px; height: 15px; }
.mock-cursor em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  margin-top: 8px;
}
.mock-cursor.is-a { color: #131313; }
.mock-cursor.is-a em { background: #131313; }
.mock-cursor.is-b { color: var(--chart-blue); }
.mock-cursor.is-b em { background: var(--chart-blue); }

@media (prefers-reduced-motion: reduce) {
  .mock-chart-line,
  .mock-chart-dot,
  .mock-cursor,
  .mock-switch,
  .mock-switch::after,
  .mock-rule {
    transition: none;
  }
}

/* `.insight-img` é um flex container com `align-items: flex-end`, e a única
   regra de largura era `.insight-img img { width: 100% }`. Sem o equivalente
   para o mock, ele encolhia até o conteúdo e o texto quebrava palavra por
   palavra. */
.insight-img > .mock {
  width: 100%;
  border-radius: 12px 12px 0 0;
}
.insight-img > .mock-chart {
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}
.insight-img > .mock-rules {
  padding-bottom: 22px;
}

/* --------------------------------------------------------------------------
   5. "O futuro, potencializado pela IA" — os quatro cartões
   -------------------------------------------------------------------------- */
.future-card-inner > .mock { width: 100%; }
.mock-spark { color: var(--chart-blue); display: inline-flex; flex-shrink: 0; }
.mock-spark svg { width: 18px; height: 18px; }

/* 5a. Áudio transcrito em tempo real */
.mock-audio {
  border: 1px solid var(--neutral-30);
  border-radius: 14px;
  padding: 16px;
}
.mock-audio-top { display: flex; gap: 10px; align-items: flex-start; }
.mock-audio-top p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  min-height: 2.9em;
}
.mock-audio-play {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--neutral-30);
}
.mock-audio-btn {
  border: 1px solid var(--neutral-30);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 12.5px;
  color: var(--neutral-300);
  white-space: nowrap;
}
.mock-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.mock-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--neutral-50);
  height: 30%;
  transition: height 0.18s ease, background 0.18s ease;
}
.mock-wave i.on { background: var(--chart-blue); }

/* 5b. Painel personalizável */
.mock-dash { position: relative; padding: 6px 0 16px; }
.mock-dash-win {
  border: 1px solid var(--neutral-30);
  border-radius: 10px;
  overflow: hidden;
  background: var(--neutral-10);
}
.mock-dash-bar { display: flex; gap: 4px; padding: 8px 10px; }
.mock-dash-bar i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neutral-40);
}
.mock-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--neutral-0);
}
.mock-tile {
  height: 34px;
  border-radius: 6px;
  border: 1px dashed var(--neutral-40);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.mock-tile.on {
  background: var(--primary-50);
  border-color: var(--primary-300);
  border-style: solid;
}
.mock-dash-widget {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 46%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mock-dash-lines { display: grid; gap: 5px; flex: 1; }
.mock-dash-lines i {
  height: 5px; border-radius: 3px; background: var(--neutral-30);
}
.mock-dash-lines i:first-child { width: 70%; }
.mock-dash-lines i:last-child { width: 45%; }
.mock-donut { width: 42px; height: 42px; flex-shrink: 0; transform: rotate(-90deg); }
.mock-donut circle { fill: none; stroke-width: 6; }
.mock-donut-bg { stroke: var(--neutral-30); }
.mock-donut-fg {
  stroke: var(--fg-purple);
  stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 5c. Classificações geradas pela IA */
.mock-class { display: grid; gap: 10px; }
.mock-prompt {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--neutral-30);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--neutral-300);
}
.mock-caret {
  width: 1.5px;
  height: 16px;
  background: var(--neutral-900);
  animation: mock-caret 1s step-end infinite;
}
@keyframes mock-caret { 50% { opacity: 0; } }
.mock-go {
  margin-left: auto;
  color: var(--neutral-100);
  display: inline-flex;
  flex-shrink: 0;
}
.mock-go svg { width: 16px; height: 16px; }
.mock-class-box {
  border: 1px solid var(--neutral-30);
  border-radius: 12px;
  padding: 12px;
}
.mock-class-box small {
  display: block;
  font-size: 11.5px;
  color: var(--neutral-200);
  margin-bottom: 8px;
}
.mock-class-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
}
.mock-class-item svg { width: 15px; height: 15px; color: var(--neutral-300); }
.mock-class-item.on { opacity: 1; transform: none; }
.mock-class-item.on:first-of-type { background: var(--neutral-20); }

/* 5d. Insights acionáveis */
.mock-opp { display: grid; gap: 10px; }
.mock-kpi-tile {
  position: relative;
  border: 1px solid var(--neutral-30);
  border-radius: 12px;
  padding: 12px 14px;
}
.mock-kpi-tile > span:first-child {
  font-size: 11px;
  color: var(--neutral-200);
}
.mock-kpi-tile b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mock-kpi-tile b i { font-style: normal; }
.mock-kpi-tile em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger-300);
}
.mock-bolt {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--neutral-30);
  display: grid;
  place-items: center;
  color: var(--neutral-300);
}
.mock-bolt svg { width: 15px; height: 15px; }
.mock-opp-card {
  display: flex;
  gap: 10px;
  border: 1px solid var(--neutral-30);
  border-radius: 12px;
  padding: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mock-opp-card.on { opacity: 1; transform: none; }
.mock-opp-body { min-width: 0; flex: 1; }
.mock-opp-body > b { font-size: 12.5px; display: block; }
.mock-opp-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--neutral-200);
  margin-left: 4px;
}
.mock-opp-body i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--neutral-200);
  line-height: 1.45;
  margin: 2px 0 6px;
}
.mock-opp-foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
}
.mock-opp-foot b.ok { color: var(--success-300); font-size: 12.5px; }
.mock-opp-foot em { font-style: normal; color: var(--neutral-100); }

@media (prefers-reduced-motion: reduce) {
  .mock-wave i, .mock-tile, .mock-donut-fg, .mock-class-item,
  .mock-opp-card { transition: none; }
  .mock-caret { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Weny Flow — editor de fluxos (substitui imagens/weny-flow-v2.png)

   Conferido contra o print real: barra superior ROXA (a do Atendimento é
   escura), paleta de componentes agrupada por "WENY AI", canvas pontilhado
   com nós ligados por arestas curvas, toolbar flutuante com Testar/Publicar,
   e as portas de saída coloridas do nó Weny AI (Modelo, RAG, Texto).
   -------------------------------------------------------------------------- */
.browser-frame > .mock-flow { width: 100%; }
.mock-flow {
  display: flex;
  flex-direction: column;
  height: 520px;
  font-size: 12px;
  overflow: hidden;
}
.mock-topbar.is-flow { background: #5b3df5; }
.mock-topbar.is-flow .mock-nav .on { box-shadow: inset 0 -2px 0 #fff; padding-bottom: 2px; }

.mock-flow-body { display: grid; grid-template-columns: 232px 1fr; flex: 1; min-height: 0; }

.mock-palette {
  border-right: 1px solid var(--neutral-30);
  padding: 10px;
  overflow: hidden;
  background: var(--neutral-0);
}
.mock-pal-flow small,
.mock-pal-group {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--neutral-100);
  margin-bottom: 5px;
}
.mock-pal-sel {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--neutral-30);
  border-radius: 8px;
  padding: 7px 9px;
  margin-bottom: 12px;
}
.mock-pal-q {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--neutral-20); color: var(--neutral-300);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.mock-pal-sel b { display: block; font-size: 11px; }
.mock-pal-sel i { display: block; font-style: normal; font-size: 9.5px; color: var(--neutral-100); }
.mock-pal-title { display: block; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.mock-pal-group { margin-top: 8px; }
.mock-pal-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--neutral-30);
  border-radius: 9px;
  padding: 8px;
  margin-bottom: 6px;
}
.mock-pal-item b { display: block; font-size: 11px; }
.mock-pal-item i {
  display: block; font-style: normal; font-size: 9.5px; line-height: 1.35;
  color: var(--neutral-200);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mock-pal-ico {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: 11px; flex-shrink: 0;
}
.i-ai { background: var(--tint-purple); color: var(--fg-purple); }
.i-gpt { background: var(--success-50); color: var(--success-300); }
.i-cl { background: var(--warning-50); color: var(--warning-300); }
.i-gm { background: var(--tint-blue); color: var(--chart-blue); }
.i-db { background: var(--success-50); color: var(--success-300); }
.i-rag { background: var(--tint-blue); color: var(--chart-blue); }

/* Canvas pontilhado, como no editor. */
.mock-canvas {
  position: relative;
  background-color: var(--neutral-10);
  background-image: radial-gradient(var(--neutral-40) 1px, transparent 1px);
  background-size: 15px 15px;
  overflow: hidden;
}
.mock-toolbar {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 10.5px;
  color: var(--neutral-300);
  z-index: 4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.mock-tb-test {
  background: var(--surface-inverse); color: var(--on-inverse);
  padding: 4px 9px; border-radius: 7px; font-weight: 600;
}
.mock-tb-pub {
  background: var(--success-300); color: #06281c;
  padding: 4px 10px; border-radius: 7px; font-weight: 700;
}

.mock-edges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.mock-edge {
  fill: none;
  stroke: var(--neutral-50);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
/* O pulso é a execução percorrendo o fluxo — é o "movimento" que o print
   estático não conseguia mostrar. */
.mock-pulse { fill: var(--primary); filter: drop-shadow(0 0 5px var(--primary)); }

.mock-node { position: absolute; width: 30%; z-index: 2; }
.mock-node-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 600;
  padding: 2px 7px; border-radius: 100px; margin-bottom: 4px;
}
.t-purple { background: var(--tint-purple); color: var(--fg-purple); }
.t-green { background: var(--success-50); color: var(--success-300); }
.mock-node-box {
  background: var(--neutral-0);
  border: 1.5px solid var(--neutral-30);
  border-radius: 9px;
  padding: 8px 9px;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.b-purple { border-color: #cfc4fb; }
.b-green { border-color: #a9e2c8; }
.mock-node-box b { display: block; font-size: 11px; }
.mock-node-box > i {
  display: block; font-style: normal; font-size: 9.5px; line-height: 1.4;
  color: var(--fg-purple); margin-top: 2px;
}
.b-green > i { color: var(--success-300); }
.mock-node-foot,
.mock-node-meta {
  display: block; font-size: 9px; color: var(--neutral-200);
  margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--neutral-30);
}
.mock-node-meta em { font-style: normal; float: right; color: var(--neutral-300); }
.mock-node-bar {
  display: block; height: 4px; border-radius: 3px;
  background: var(--neutral-30); margin-top: 5px; overflow: hidden;
}
.mock-node-bar i {
  display: block; height: 100%; width: 0;
  background: var(--success-300);
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.mock-port {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9.5px; color: var(--neutral-300);
  border: 1px solid var(--neutral-30); border-radius: 6px;
  padding: 3px 7px; margin-top: 4px;
}
.mock-port em { width: 6px; height: 6px; border-radius: 50%; }
.p-green { background: var(--success-300); }
.p-blue { background: var(--chart-blue); }
.p-purple { background: var(--fg-purple); }

/* Nó "executando": destaque que acompanha o pulso. */
.mock-node.is-run .mock-node-box {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(203, 231, 94, 0.28);
  transform: translateY(-2px);
}

@container (max-width: 780px) {
  .mock-flow-body { grid-template-columns: 1fr; }
  .mock-palette { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mock-node-box, .mock-node-bar i { transition: none; }
}

/* Miniaturas de componente que flutuam ao redor do editor. Eram os últimos
   PNGs claros da página — no tema escuro ficavam como cartões brancos soltos. */
.flow-img-float > .mock-fnode { width: 100%; }
.mock-fnode {
  border: 1.5px solid var(--neutral-30);
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 11px;
}
.mock-fnode-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 11.5px;
  margin-bottom: 5px;
}
.mock-fnode-head em {
  font-style: normal;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; font-size: 10px; flex-shrink: 0;
}
.mock-fnode p { margin: 0; font-size: 10px; line-height: 1.45; }
.f-purple { border-color: #cfc4fb; }
.f-purple .mock-fnode-head em { background: var(--tint-purple); color: var(--fg-purple); }
.f-purple p { color: var(--fg-purple); }
.f-green { border-color: #a9e2c8; }
.f-green .mock-fnode-head em { background: var(--success-50); color: var(--success-300); }
.f-green p { color: var(--success-300); }
.f-blue { border-color: #b6d9f2; }
.f-blue .mock-fnode-head em { background: var(--tint-blue); color: var(--chart-blue); }
.f-blue p { color: var(--chart-blue); }
.f-amber { border-color: #e6d59a; }
.f-amber .mock-fnode-head em { background: var(--warning-50); color: var(--warning-300); }
.f-amber p { color: var(--warning-300); }

/* ==========================================================================
   ANATOMIA REAL DO NÓ DO WENY FLOW

   Conferida nos recortes ampliados dos nós (imagens/Screenshot 2026-05-01*):
     · faixa de cabeçalho COM FUNDO TINTADO, ocupando a largura inteira;
     · dentro dela, um ícone em quadrado arredondado (tom mais forte do mesmo
       matiz) e o título em PRETO NEGRITO — não na cor do accent;
     · corpo com fundo BRANCO e a descrição escrita NA COR do accent;
     · ponto de entrada colorido na borda esquerda do corpo.

   A primeira versão pintava título e descrição na mesma cor e não tinha a
   faixa — era a razão de não parecer o produto.
   ========================================================================== */
.mock-fnode,
.mock-node-box {
  border: 1.5px solid var(--n-br);
  border-radius: 10px;
  overflow: hidden;
  background: var(--neutral-0);
  padding: 0;
}
.mock-fnode-head,
.mock-node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--n-head);
}
.mock-fnode-head b,
.mock-node-head b {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1.25;
}
.mock-fnode-ico,
.mock-node-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--n-ico);
  color: var(--n-fg);
}
.mock-fnode-ico svg,
.mock-node-ico svg { width: 13px; height: 13px; }
.mock-fnode-body,
.mock-node-body {
  position: relative;
  padding: 9px 10px;
  background: var(--neutral-0);
}
.mock-fnode-body p,
.mock-node-body p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--n-fg);
}
/* Porta de entrada na borda esquerda, como no editor. */
.mock-fnode-port {
  position: absolute;
  left: -5px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

/* Paletas por tipo de nó. Um único conjunto de variáveis serve ao cartão
   flutuante e ao nó do canvas — não há duas listas para sair de sincronia. */
.f-purple, .b-purple {
  --n-br: #ddd4fb; --n-head: #f4efff; --n-ico: #e6dcfd; --n-fg: #7c3aed;
}
.f-green, .b-green {
  --n-br: #b6e5cf; --n-head: #e9f9f0; --n-ico: #d3f2e2; --n-fg: #0f9d63;
}
.f-blue, .b-blue {
  --n-br: #bcdff0; --n-head: #eaf6fc; --n-ico: #d5ecf7; --n-fg: #6b7280;
}
.f-amber, .b-amber {
  --n-br: #ecdca6; --n-head: #fdf7e6; --n-ico: #f7ecc6; --n-fg: #c2620c;
}
/* No tema escuro as faixas viram tons escuros do mesmo matiz — clarinho
   pastel sobre fundo preto seria o mesmo erro dos PNGs antigos. */
:root[data-theme='dark'] .f-purple, :root[data-theme='dark'] .b-purple {
  --n-br: #3a2f5c; --n-head: #1e1830; --n-ico: #2b2247; --n-fg: #c4a7ff;
}
:root[data-theme='dark'] .f-green, :root[data-theme='dark'] .b-green {
  --n-br: #1f4a37; --n-head: #10241b; --n-ico: #17352770; --n-fg: #58c094;
}
:root[data-theme='dark'] .f-blue, :root[data-theme='dark'] .b-blue {
  --n-br: #24404f; --n-head: #101f28; --n-ico: #182d38; --n-fg: #9aa3ae;
}
:root[data-theme='dark'] .f-amber, :root[data-theme='dark'] .b-amber {
  --n-br: #4a3c17; --n-head: #241d0d; --n-ico: #362b12; --n-fg: #e0a33f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .f-purple, :root:not([data-theme='light']) .b-purple {
    --n-br: #3a2f5c; --n-head: #1e1830; --n-ico: #2b2247; --n-fg: #c4a7ff;
  }
  :root:not([data-theme='light']) .f-green, :root:not([data-theme='light']) .b-green {
    --n-br: #1f4a37; --n-head: #10241b; --n-ico: #173527; --n-fg: #58c094;
  }
  :root:not([data-theme='light']) .f-blue, :root:not([data-theme='light']) .b-blue {
    --n-br: #24404f; --n-head: #101f28; --n-ico: #182d38; --n-fg: #9aa3ae;
  }
  :root:not([data-theme='light']) .f-amber, :root:not([data-theme='light']) .b-amber {
    --n-br: #4a3c17; --n-head: #241d0d; --n-ico: #362b12; --n-fg: #e0a33f;
  }
}

/* ==========================================================================
   PAINÉIS LATERAIS DO HERO — reproduzidos dos prints reais
   (esquerda/direita/crm - weny-v2.png). A versão anterior era invenção minha:
   um "SLA" genérico, um "score" e um HUD de telemetria que não existem assim
   no produto.
   ========================================================================== */
.mock-panel {
  padding: 14px;
  font-size: 11px;
  border-radius: 12px;
}
.mock-panel-row { display: flex; align-items: center; gap: 7px; }
.mock-panel-row > b { font-size: 12px; font-weight: 700; }
.mock-panel-sub {
  margin: 3px 0 12px;
  font-size: 10.5px;
  color: var(--neutral-200);
}
.mock-panel-sub b { color: var(--neutral-900); font-weight: 600; }
.mock-panel-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; margin: 12px 0 7px;
}
.mock-i { width: 13px; height: 13px; color: var(--neutral-300); flex-shrink: 0; }

.mock-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 600; font-style: normal;
  padding: 2px 8px; border-radius: 100px; margin-left: auto;
}
.mock-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.s-gray { background: var(--neutral-20); color: var(--neutral-300); }
.s-red { background: var(--danger-50); color: var(--danger-300); margin-left: 6px; }

.mock-metric {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--neutral-30); border-radius: 10px;
  padding: 9px 10px; margin-bottom: 7px;
}
.mock-metric-ico {
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; flex-shrink: 0;
}
.mock-metric-ico svg { width: 13px; height: 13px; }
.m-red { background: var(--danger-50); color: var(--danger-300); }
.m-gray { background: var(--neutral-20); color: var(--neutral-300); }
.mock-metric b { display: flex; align-items: center; font-size: 11px; }
.mock-metric i {
  display: block; font-style: normal; font-size: 10px;
  color: var(--neutral-200); margin-top: 2px; line-height: 1.4;
}

.mock-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mock-hist li { display: flex; gap: 8px; align-items: flex-start; font-size: 10.5px; }
.mock-hist i {
  display: block; font-style: normal; font-size: 9.5px;
  color: var(--neutral-100); margin-top: 1px;
}
.h-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.d-green { background: var(--success-300); }
.d-red { background: var(--danger-300); }
.d-amber { background: var(--warning-300); }
.d-blue { background: var(--chart-blue); }

/* Ficha do contato */
.mock-foto {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: #131313;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  margin-bottom: 9px;
}
.mock-contato-nome { margin-bottom: 9px; }
.mock-contato-nome b { font-size: 14px; }
.mock-score-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--success-50); color: var(--success-300);
  border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 600;
  margin-bottom: 11px;
}
.mock-score-pill svg { width: 13px; height: 13px; }
.mock-score-pill b { font-variant-numeric: tabular-nums; }
.mock-campos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mock-campos li {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--neutral-300);
}
.mock-campos svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--neutral-200); }

/* Oportunidade (CRM) */
.mock-canal {
  display: inline-block; background: var(--primary-50); color: var(--primary-500);
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--primary-100);
}
.mock-opp2-nome { display: block; font-size: 15px; font-weight: 700; margin: 8px 0 10px; }
.mock-mini-av {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); color: #131313;
  display: inline-grid; place-items: center; font-size: 8px; font-weight: 700;
}
.mock-opp2-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--neutral-30);
  font-size: 11px; color: var(--neutral-300);
}
.mock-opp2-foot > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.mock-opp2-foot svg { width: 13px; height: 13px; }
/* Etapas do pipeline: preenchem uma a uma (o print mostra a régua colorida). */
.mock-etapas { display: flex; gap: 4px; margin-top: 10px; }
.mock-etapas i {
  flex: 1; height: 4px; border-radius: 3px;
  background: var(--neutral-30);
  transition: background 0.4s ease;
}
.mock-etapas i.on { background: var(--danger-200); }

@media (prefers-reduced-motion: reduce) {
  .mock-etapas i { transition: none; }
}

/* ==========================================================================
   TAMANHO E RESPIRO

   Duas correções vindas do uso: as telas ainda liam como miniatura, e as
   sidebars estavam coladas na borda — no produto elas têm respiro.
   ========================================================================== */
.mock-inbox { height: 660px; font-size: 13px; }
.mock-flow { height: 620px; font-size: 12.5px; }
.hero-img-central:has(.mock) { width: 118%; margin-left: -9%; }
.browser-frame:has(.mock-flow) { width: 112%; margin-left: -6%; }

/* Respiro das sidebars (Conversas / lista de caixa de entrada / paleta do
   Flow). Antes o conteúdo encostava na borda do painel. */
.mock-filters { padding: 14px 12px; }
.mock-filters-title { margin-bottom: 10px; }
.mock-search { padding: 7px 10px; margin-bottom: 14px; }
.mock-group { margin: 14px 0 6px; }
.mock-f { padding: 6px 9px; }
.mock-agent { padding: 6px 9px; }
.mock-convs { padding: 12px 10px; }
.mock-convs-head { margin-bottom: 10px; padding: 0 2px; }
.mock-conv { padding: 9px; }
.mock-palette { padding: 14px 12px; }
.mock-pal-item { padding: 9px 10px; margin-bottom: 8px; }
.mock-pal-sel { padding: 9px 10px; margin-bottom: 14px; }
.mock-inbox-cols { grid-template-columns: 208px 244px 1fr; }
.mock-flow-body { grid-template-columns: 250px 1fr; }

/* Nós do canvas maiores, para o texto não ficar ilegível na tela grande. */
.mock-node { width: 27%; }
.mock-node-head b { font-size: 12px; }
.mock-node-body p { font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Olho de seção no padrão da referência (kenlo.com.br): um filete, um ponto
   de status pulsando e o rótulo em monoespaçada maiúscula. Aqui ele tem uma
   função extra e honesta — avisa que aquilo é a interface rodando ao vivo, e
   não uma captura de tela.
   -------------------------------------------------------------------------- */
.mock-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-200);
}
.mock-eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--neutral-50);
  flex-shrink: 0;
}
.mock-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary);
  animation: mock-pulse-lime 2.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes mock-pulse-lime {
  0% { box-shadow: 0 0 0 0 rgba(203, 231, 94, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(203, 231, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(203, 231, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .mock-eyebrow .dot { animation: none; } }

/* O painel de SLA é alto e, na posição anterior, cobria justamente os
   contadores da Caixa de entrada — a parte da sidebar que mais comunica.
   Descido e estreitado para se apoiar na metade de baixo do quadro. */
.hero-images:has(.mock) .hero-img-left {
  left: -15%;
  top: 78%;
  width: 19%;
}
.hero-images:has(.mock) .hero-img-right {
  right: -14%;
  top: 34%;
  width: 19%;
}
.hero-images:has(.mock) .hero-img-right-bottom {
  right: -12%;
  top: 82%;
  width: 18%;
}
.mock-sla { font-size: 10.5px; }
.mock-sla .mock-hist li { font-size: 10px; }

/* Cartões de componente ao redor do editor: as posições vinham do print
   antigo, que era mais estreito. Com a tela maior eles cobriam a paleta —
   justamente a lista de componentes, que é o que a seção quer mostrar.
   Empurrados para fora e estreitados. */
.flow-images:has(.mock) .flow-img-float { width: 17%; }
.flow-images:has(.mock) .flow-img-l1 { left: -19%; top: 14%; }
.flow-images:has(.mock) .flow-img-l2 { left: -20%; top: 62%; }
.flow-images:has(.mock) .flow-img-r1 { right: -19%; top: 6%; }
.flow-images:has(.mock) .flow-img-r2 { right: -18%; top: 42%; }
.flow-images:has(.mock) .flow-img-r3 { right: -19%; top: 78%; }
/* O olho de seção fica acima do quadro e não deve ser coberto por eles. */
.mock-eyebrow { position: relative; z-index: 5; }

@media (max-width: 1280px) {
  .flow-images:has(.mock) .flow-img-float { display: none; }
  .browser-frame:has(.mock-flow) { width: 100%; margin-left: 0; }
}

/* Painel de SLA: mais compacto e mais abaixo. Ele é o mais alto dos três e,
   na posição anterior, atravessava a faixa dos contadores da Caixa de entrada
   — deixava números órfãos aparecendo ao lado dele. */
/* Largura escolhida para a borda direita do painel ULTRAPASSAR a coluna de
   filtros. Numa largura menor ele cobria os rótulos e deixava os contadores
   pendurados ao lado, sem o texto — pior que cobrir ou não cobrir. */
.hero-images:has(.mock) .hero-img-left { top: 86%; left: -16%; width: 26%; }
.mock-sla { padding: 12px; font-size: 10px; }
.mock-sla .mock-metric { padding: 8px 9px; margin-bottom: 6px; }
.mock-sla .mock-panel-title { margin: 10px 0 6px; }
.mock-sla .mock-hist { gap: 7px; }

/* ==========================================================================
   ENCAIXE DOS PAINÉIS FLUTUANTES

   O <section class="hero"> tem `overflow: hidden` inline no HTML (contém os
   brilhos de fundo). Qualquer painel que passe da borda inferior é CORTADO —
   era o que decepava o Histórico do "Padrão Atendimento" na emenda com a
   seção "Conheça a Weny SDR". A correção é caber, não remover o overflow.

   Larguras também subiram: 18-19% deixava os painéis estreitos demais para o
   conteúdo real (nome + telefone + localização quebravam em três linhas).
   ========================================================================== */
.hero-images:has(.mock) .hero-img-left {
  top: 74%;
  left: -16%;
  width: 25%;
}
.hero-images:has(.mock) .hero-img-right {
  top: 32%;
  right: -14%;
  width: 23%;
}
.hero-images:has(.mock) .hero-img-right-bottom {
  top: 76%;
  right: -13%;
  width: 22%;
}

/* ==========================================================================
   PAINÉIS x TEXTO DA CONVERSA

   Os painéis cobriam as bolhas de mensagem — o conteúdo que a seção mais
   precisa mostrar. Afastá-los sozinho não resolve: numa janela de 1440px não
   cabe uma tela grande MAIS dois painéis inteiros fora dela.

   Solução em duas partes: o quadro central encolhe e os painéis vão para fora
   até o limite da janela; e a conversa RESERVA a faixa onde eles pousam, via
   padding. A sobreposição passa a cair sobre área vazia, nunca sobre texto.
   ========================================================================== */
.hero-img-central:has(.mock) {
  width: 104%;
  margin-left: -2%;
}
.hero-images:has(.mock) .hero-img-left {
  left: -19%;
  top: 74%;
  width: 23%;
}
.hero-images:has(.mock) .hero-img-right {
  right: -12%;
  top: 30%;
  width: 22%;
}
.hero-images:has(.mock) .hero-img-right-bottom {
  right: -11%;
  top: 78%;
  width: 21%;
}

/* A faixa reservada. `!important` porque `.mock-thread` traz `padding`
   abreviado e o objetivo aqui é justamente sobrepor o lado direito dele. */
.hero-img-central .mock-thread,
.hero-img-central .mock-composer {
  padding-right: 200px !important;
}
.hero-img-central .mock-msg {
  max-width: 82%;
}

@media (max-width: 1400px) {
  /* Sem largura para os painéis, eles saem e a conversa recupera a faixa. */
  .hero-images:has(.mock) .hero-img-float { display: none; }
  .hero-img-central:has(.mock) { width: 100%; margin-left: 0; }
  .hero-img-central .mock-thread,
  .hero-img-central .mock-composer { padding-right: 14px !important; }
}

/* O ponto de destaque do gráfico saía OVAL: o SVG usava
   `preserveAspectRatio="none"`, que estica X e Y em proporções diferentes
   para preencher a largura — e um <circle> esticado vira elipse. Sem esse
   atributo o desenho escala proporcionalmente e o círculo volta a ser
   círculo; a altura passa a ser derivada da largura. */
.mock-chart-svg {
  width: 100%;
  height: auto;
}

/* O painel de SLA passou a ser cortado pela borda esquerda da JANELA (não do
   hero). Trazido para dentro: ele se apoia sobre a coluna de filtros, que é
   conteúdo secundário, em vez de perder o próprio texto. */
.hero-images:has(.mock) .hero-img-left {
  left: -14%;
}

/* Nós um pouco mais estreitos: com quatro nós e a saída do modelo pendurada
   embaixo, 27% fazia as caixas se tocarem. */
.mock-node { width: 24%; }

/* Telas maiores. */
.mock-inbox { height: 760px; }
.mock-flow { height: 720px; }
.browser-frame:has(.mock-flow) { width: 118%; margin-left: -9%; }

/* Com o quadro do Flow em 118%, as posições anteriores jogavam os cartões
   para fora da janela. Recalculadas para ficarem inteiros visíveis. */
.flow-images:has(.mock) .flow-img-float { width: 17%; }
.flow-images:has(.mock) .flow-img-l1 { left: -13%; top: 12%; }
.flow-images:has(.mock) .flow-img-l2 { left: -13%; top: 58%; }
.flow-images:has(.mock) .flow-img-r1 { right: -13%; top: 6%; }
.flow-images:has(.mock) .flow-img-r2 { right: -12%; top: 40%; }
.flow-images:has(.mock) .flow-img-r3 { right: -13%; top: 74%; }

/* ==========================================================================
   7. CAMPANHAS — do modelo ao disparo, em três estágios que se alternam.

   Rótulos e estados vieram da UI real (apps/ai-manager/.../campaigns):
   "Modelo de Mensagem *", "Grupo de contatos", "Lotes de envio",
   "Janela de horário", "Destinatários:", "Custo:", e os KPIs Enviados /
   Entregues / Lidos / Respondidos. Os status são os do enum do produto —
   SENDING e COMPLETED.
   ========================================================================== */
.campanha-wrap { position: relative; max-width: 1080px; margin: 40px auto 0; }
.mock-camp {
  display: flex;
  flex-direction: column;
  height: 620px;
  font-size: 12.5px;
  overflow: hidden;
}
.mock-camp-body { flex: 1; padding: 18px 22px; min-height: 0; position: relative; }

.mock-camp-steps {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--neutral-200);
}
.mock-camp-steps span { display: inline-flex; align-items: center; gap: 8px; }
.mock-camp-steps i {
  font-style: normal;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  background: var(--neutral-20); color: var(--neutral-300);
  transition: background 0.35s ease, color 0.35s ease;
}
.mock-camp-steps span.on { color: var(--neutral-900); font-weight: 600; }
.mock-camp-steps span.on i { background: var(--primary); color: #131313; }
.mock-camp-steps span.done i { background: var(--success-300); color: #06281c; }

/* Os três painéis ocupam o mesmo espaço; só um fica visível por vez. */
.mock-camp-pane {
  position: absolute;
  inset: 56px 22px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.mock-camp-pane.on { opacity: 1; transform: none; }
.mock-camp-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mock-camp-col label {
  font-size: 10.5px;
  color: var(--neutral-200);
  margin-top: 7px;
}
.mock-camp-col label:first-child { margin-top: 0; }
.mock-inp {
  border: 1px solid var(--neutral-30);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  background: var(--neutral-10);
}
.mock-inp-txt { min-height: 74px; line-height: 1.5; background: var(--neutral-0); }
.mock-vars { display: flex; gap: 7px; margin-top: 8px; }
.mock-vars span {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 6px;
  background: var(--primary-50); color: var(--primary-500);
  border: 1px solid var(--primary-100);
}

/* Pré-visualização no estilo WhatsApp. */
.mock-wa {
  flex: 1;
  border-radius: 10px;
  padding: 14px;
  background: var(--neutral-10);
  border: 1px solid var(--neutral-30);
  display: flex;
  align-items: flex-start;
}
.mock-wa-msg {
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  border-radius: 10px 10px 10px 3px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 92%;
}
.mock-wa-msg em {
  display: block; font-style: normal;
  font-size: 9.5px; color: var(--neutral-200);
  text-align: right; margin-top: 3px;
}
.mock-camp-status {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; font-size: 11.5px; color: var(--success-300);
}
.mock-resumo {
  display: grid; gap: 6px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--neutral-30);
  font-size: 12px; color: var(--neutral-200);
}
.mock-resumo span { display: flex; justify-content: space-between; }
.mock-resumo b { color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.mock-camp-cta {
  margin-top: auto;
  background: var(--primary); color: #131313;
  font-weight: 700; font-size: 12.5px;
  text-align: center; padding: 10px; border-radius: 9px;
}

/* Estágio 3 — disparo ao vivo. Ocupa a largura inteira. */
.mock-camp-pane[data-pane='2'] { grid-template-columns: 1fr; }
.mock-camp-run { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mock-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mock-run-head b { font-size: 14px; }
.mock-run-head i {
  display: block; font-style: normal;
  font-size: 11px; color: var(--neutral-200); margin-top: 2px;
}
.mock-status-camp {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 100px;
  background: var(--warning-50); color: var(--warning-300);
  border: 1px solid var(--warning-100);
  white-space: nowrap;
}
.mock-status-camp.done {
  background: var(--success-50); color: var(--success-300);
  border-color: var(--success-100);
}
.mock-run-bar { height: 8px; border-radius: 100px; background: var(--neutral-30); overflow: hidden; }
.mock-run-bar i {
  display: block; height: 100%; width: 0;
  border-radius: 100px; background: var(--primary);
  transition: width 0.6s linear;
}
.mock-run-sub { margin: 0; font-size: 11.5px; color: var(--neutral-200); }
.mock-run-sub b { color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.mock-run-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-run-kpis div {
  border: 1px solid var(--neutral-30);
  border-radius: 10px;
  padding: 10px 12px;
}
.mock-run-kpis span { display: block; font-size: 10.5px; color: var(--neutral-200); }
.mock-run-kpis b {
  font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
/* Feed de eventos: cada linha entra por cima, como um log ao vivo. */
.mock-run-feed {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--neutral-30);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mock-feed-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; color: var(--neutral-300);
  animation: mock-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mock-feed-item em {
  font-style: normal; margin-left: auto;
  font-size: 10.5px; color: var(--neutral-100);
  font-variant-numeric: tabular-nums;
}

@container (max-width: 720px) {
  .mock-camp-pane { grid-template-columns: 1fr; }
  .mock-camp-pane > .mock-camp-col:last-child { display: none; }
  .mock-run-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-camp-pane, .mock-run-bar i, .mock-camp-steps i, .mock-feed-item { transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   Caixa do WhatsApp e nó de intenção no canvas do Flow.

   A caixa mostra a mensagem CHEGANDO pelo canal — é o gatilho do fluxo. Sem
   ela, o pulso começava do "Início" sem que nada explicasse de onde vinha a
   execução.
   -------------------------------------------------------------------------- */
.mock-node { width: 19%; }
.mock-node.n-wa { width: 19%; }
.mock-wa-box {
  border: 1.5px solid #b6e5cf;
  border-radius: 10px;
  overflow: hidden;
  background: var(--neutral-0);
}
:root[data-theme='dark'] .mock-wa-box { border-color: #1f4a37; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-wa-box { border-color: #1f4a37; }
}
.mock-wa-head {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px;
  background: var(--n-head, #e9f9f0);
}
.b-green, .mock-wa-head { --n-head: #e9f9f0; }
:root[data-theme='dark'] .mock-wa-head { background: #10241b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-wa-head { background: #10241b; }
}
.mock-wa-ico {
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
  background: #25d366; color: #fff;
}
.mock-wa-ico svg { width: 12px; height: 12px; }
.mock-wa-head b { font-size: 11px; font-weight: 700; }
.mock-wa-head em {
  font-style: normal; margin-left: auto;
  font-size: 9px; color: var(--neutral-200);
}
.mock-wa-in {
  padding: 9px;
  font-size: 10.5px;
  line-height: 1.45;
  min-height: 34px;
  color: var(--neutral-900);
}
/* A porta que a intenção acertou pisca — mostra POR ONDE o fluxo saiu. */
.mock-port em[data-intent-hit].hit {
  box-shadow: 0 0 0 3px rgba(203, 231, 94, 0.45);
  background: var(--primary);
}
.mock-node.n-intent .mock-port { transition: background 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .mock-port em[data-intent-hit] { transition: none; }
}

/* A tela de campanha ficava com muito vazio abaixo do feed no estágio 3. */
.mock-camp { height: 540px; }

/* ==========================================================================
   CHAT DO WHATSAPP ao lado do editor de fluxos.

   Antes isto era um NODE dentro do canvas, o que estava errado: o WhatsApp
   não é um componente do Weny Flow — é o canal onde o cliente conversa. Agora
   é a conversa de verdade, com o cliente mandando a mensagem de um lado e a
   resposta chegando do outro, enquanto o fluxo roda ao lado.
   ========================================================================== */
.mock-whats {
  position: absolute;
  left: -17%;
  top: 16%;
  width: 21%;
  z-index: 3;
  border-radius: 14px;
  overflow: hidden;
  background: #0b141a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  font-family: 'Inter', -apple-system, sans-serif;
  animation: float-left 4s ease-in-out infinite;
}
.mock-whats-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: #1f2c33;
  color: #e9edef;
}
.mock-whats-back { width: 14px; height: 14px; opacity: 0.8; flex-shrink: 0; }
.mock-whats-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: #6a7175; color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.mock-whats-id { min-width: 0; flex: 1; }
.mock-whats-id b { display: block; font-size: 11.5px; }
.mock-whats-id i {
  display: block; font-style: normal;
  font-size: 9.5px; color: #8696a0;
}
.mock-whats-ico { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; }

/* Papel de parede do WhatsApp: a trama pontilhada sobre o verde-escuro. */
.mock-whats-thread {
  min-height: 168px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: flex-end;
  background-color: #0b141a;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 14px 14px;
}
.mock-whats-msg {
  max-width: 84%;
  padding: 6px 9px 5px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.42;
  color: #e9edef;
  position: relative;
  animation: mock-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Enviada pelo cliente: bolha verde à direita, como no app. */
.mock-whats-msg.out {
  align-self: flex-end;
  background: #005c4b;
  border-bottom-right-radius: 2px;
}
/* Resposta da empresa: bolha cinza à esquerda. */
.mock-whats-msg.in {
  align-self: flex-start;
  background: #202c33;
  border-bottom-left-radius: 2px;
}
.mock-whats-msg em {
  font-style: normal;
  float: right;
  margin: 4px 0 0 8px;
  font-size: 8.5px;
  color: rgba(233, 237, 239, 0.55);
}
.mock-whats-msg.out em { color: rgba(233, 237, 239, 0.65); }
.mock-whats-tip {
  display: inline-flex; gap: 3px; align-self: flex-start;
  padding: 8px 11px; border-radius: 8px; background: #202c33;
  animation: mock-in 0.3s ease both;
}
.mock-whats-tip i {
  width: 4px; height: 4px; border-radius: 50%;
  background: #8696a0;
  animation: mock-dot 1.1s ease-in-out infinite;
}
.mock-whats-tip i:nth-child(2) { animation-delay: 0.16s; }
.mock-whats-tip i:nth-child(3) { animation-delay: 0.32s; }
.mock-whats-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #1f2c33;
  font-size: 10.5px;
  color: #8696a0;
}
.mock-whats-bar > span:first-child {
  flex: 1; background: #2a3942; border-radius: 100px; padding: 6px 11px;
}
.mock-whats-send {
  width: 24px; height: 24px; border-radius: 50%;
  background: #00a884; color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.mock-whats-send svg { width: 12px; height: 12px; }

@media (max-width: 1280px) { .mock-whats { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mock-whats { animation: none; }
  .mock-whats-msg, .mock-whats-tip { animation: none; }
  .mock-whats-tip i { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   CAMPANHAS — agora a tela de "Detalhes da campanha" do produto.

   A versão anterior era um assistente de 3 passos que eu inventei. A tela real
   (apps/ai-manager/.../campaigns/[campaignId]) é uma página de detalhe com
   Visão geral / Desempenho / Engajamento / Linha do tempo, os cartões de
   Enviados / Entregues / Lidos / Conversões, o "Funil da campanha", a
   "Receita atribuída" e o "Custo total". Os nomes aqui são os de lá.
   ========================================================================== */
.mock-camp-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 18px;
}
.mock-camp-crumb { font-size: 11px; color: var(--neutral-200); }
.mock-camp-crumb b { color: var(--neutral-100); margin: 0 3px; font-weight: 400; }
.mock-camp-tabs {
  display: flex; gap: 18px;
  border-bottom: 1px solid var(--neutral-30);
  font-size: 12px; color: var(--neutral-200);
}
.mock-camp-tabs span { padding: 7px 0; }
.mock-camp-tabs .on {
  color: var(--neutral-900); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--neutral-900);
}
.mock-camp-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.mock-camp-main, .mock-camp-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mock-card-sec {
  border: 1px solid var(--neutral-30);
  border-radius: 11px;
  padding: 12px 14px;
}
.mock-card-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mock-sec-title { display: block; font-size: 12px; font-weight: 700; margin-bottom: 10px; }

/* Funil: cada etapa é uma barra que enche até a proporção da anterior. */
.mock-funil { display: grid; gap: 9px; }
.mock-funil > div {
  display: grid;
  grid-template-columns: 118px 1fr 46px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--neutral-200);
}
.mock-funil i {
  display: block; height: 9px; border-radius: 100px;
  background: var(--primary); width: 0;
  transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.mock-funil > div:nth-child(2) i { background: var(--primary-400); }
.mock-funil > div:nth-child(3) i { background: var(--success-300); }
.mock-funil > div:nth-child(4) i { background: var(--chart-blue); }
.mock-funil > div:nth-child(5) i { background: var(--fg-purple); }
.mock-funil em {
  font-style: normal; text-align: right;
  color: var(--neutral-900); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mock-receita { margin-bottom: 10px; }
.mock-receita > b {
  display: block; font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.mock-receita > span { font-size: 10.5px; color: var(--neutral-200); }

@container (max-width: 760px) {
  .mock-camp-grid { grid-template-columns: 1fr; }
  .mock-camp-side { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mock-funil i { transition: none; } }

/* O chat encostava na borda da janela e cobria o topo da paleta. */
.mock-whats { left: -13%; top: 30%; width: 20%; }

/* Os cartões são absolutos dentro da MOLDURA do navegador (que virou 118% e
   agora ocupa a largura da janela), não dentro de `.flow-images`. Por isso
   percentuais negativos jogavam-nos para fora da tela. Encostados na borda
   interna: eles se apoiam sobre as beiradas do canvas, que é área vazia. */
.flow-images:has(.mock) .flow-img-l1 { left: 1%; top: 8%; }
.flow-images:has(.mock) .flow-img-l2 { left: 1%; top: 62%; }
.flow-images:has(.mock) .flow-img-r1 { right: 1%; top: 6%; }
.flow-images:has(.mock) .flow-img-r2 { right: 1%; top: 40%; }
.flow-images:has(.mock) .flow-img-r3 { right: 1%; top: 74%; }
.flow-images:has(.mock) .flow-img-float { width: 15%; }

/* Descidos para não cobrir a barra do navegador nem a barra roxa do produto —
   as duas fazem parte do que a seção quer mostrar. */
.mock-whats { top: 44%; }
.flow-images:has(.mock) .flow-img-l1 { top: 22%; }
.flow-images:has(.mock) .flow-img-r1 { top: 16%; }
.flow-images:has(.mock) .flow-img-r2 { top: 46%; }
.flow-images:has(.mock) .flow-img-r3 { top: 76%; }
.flow-images:has(.mock) .flow-img-l2 { top: 70%; }
/* Ainda cruzavam as barras: empurrados para abaixo do cabeçalho do produto. */
.flow-images:has(.mock) .flow-img-l1 { top: 30%; }
.flow-images:has(.mock) .flow-img-r1 { top: 26%; }
.mock-whats { top: 52%; }

/* ==========================================================================
   CARTÕES DE COMPONENTE PARA FORA DO EDITOR

   A moldura estava em 118% e ocupava quase toda a janela — não sobrava
   lateral, então os cartões só podiam pousar EM CIMA do canvas. Com a moldura
   em 100% sobram ~180px de cada lado e eles cabem fora, só encostando na
   borda.

   A tela não encolhe por isso: o que dá presença é a ALTURA (720px), que não
   muda.
   ========================================================================== */
.browser-frame:has(.mock-flow) {
  width: 100%;
  margin-left: 0;
}
.flow-images:has(.mock) .flow-img-float { width: 15%; }
.flow-images:has(.mock) .flow-img-l1 { left: -14%; top: 20%; }
.flow-images:has(.mock) .flow-img-l2 { left: -14%; top: 66%; }
.flow-images:has(.mock) .flow-img-r1 { right: -14%; top: 12%; }
.flow-images:has(.mock) .flow-img-r2 { right: -14%; top: 44%; }
.flow-images:has(.mock) .flow-img-r3 { right: -14%; top: 76%; }
/* O chat é o mais largo; encosta um pouco mais para caber na janela. */
.mock-whats { left: -15%; top: 40%; width: 17%; }

/* ==========================================================================
   COR DO CABEÇALHO POR PRODUTO

   Os três valores vêm de apps/ai-manager/src/lib/products.ts, que é onde a
   plataforma define a identidade de cada produto — eu vinha usando tons
   aproximados de memória:
     attendance #282c35 · flow #4F46E5 · campaigns #374151
   ========================================================================== */
.mock-topbar { background: #282c35; }
.mock-topbar.is-flow { background: #4F46E5; }
.mock-topbar.is-camp { background: #374151; }

/* Status da campanha: "Enviando" é azul e "Finalizada" é esmeralda, como no
   produto (SENDING: blue, COMPLETED: emerald). */
.mock-status-camp {
  background: var(--tint-blue);
  color: var(--chart-blue);
  border-color: color-mix(in srgb, var(--chart-blue) 35%, transparent);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
}
.mock-status-camp.done {
  background: var(--success-50);
  color: var(--success-300);
  border-color: var(--success-100);
}

/* O chat do WhatsApp estava por cima do primeiro cartão de componente. */
.mock-whats { top: 46%; }
.flow-images:has(.mock) .flow-img-l1 { top: 12%; }
.flow-images:has(.mock) .flow-img-l2 { top: 78%; }

/* ==========================================================================
   HEADER: cor do produto no CLARO, preto no ESCURO

   Regra copiada do app (components/layouts/top-nav-layout.tsx):
     theme === 'dark' ? 'bg-black' : activeProduct.color.headerBg
   No escuro a plataforma neutraliza a cor de TODOS os produtos, porque os
   tons saturados brigam com o resto da página escura. Era por isso que o
   header de Campanhas parecia diferente do real.
   ========================================================================== */
:root[data-theme='dark'] .mock-topbar,
:root[data-theme='dark'] .mock-topbar.is-flow,
:root[data-theme='dark'] .mock-topbar.is-camp { background: #000; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-topbar,
  :root:not([data-theme='light']) .mock-topbar.is-flow,
  :root:not([data-theme='light']) .mock-topbar.is-camp { background: #000; }
}

/* Nós mais largos: com quatro caixas em cadeia, 19% espremia o texto. */
.mock-node { width: 23%; }

/* ==========================================================================
   DESTAQUE DO SIMULADOR DE WHATSAPP

   Ele é o ponto da seção: mostra o que o cliente vê enquanto o fluxo roda.
   Ganhou moldura, brilho e uma etiqueta — antes competia de igual para igual
   com os cartões de componente e passava despercebido.
   ========================================================================== */
.mock-whats {
  width: 19%;
  border: 1px solid rgba(203, 231, 94, 0.35);
  box-shadow:
    0 0 0 5px rgba(203, 231, 94, 0.10),
    0 20px 60px rgba(0, 0, 0, 0.45);
}
.mock-whats::before {
  content: 'Conversa do cliente';
  position: absolute;
  top: -11px;
  left: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--primary);
  color: #131313;
  font-weight: 700;
  z-index: 1;
}

/* Os dois cursores nasciam ambos em (0,0) e ficavam um sobre o outro até a
   animação começar — e, com movimento reduzido, para sempre. Cada um tem
   agora uma posição inicial própria, em linhas diferentes. */
/* Posicionados por left/top (percentual do CONTAINER). Antes eu usava
   `transform: translate(%)`, mas ali o percentual é do PRÓPRIO elemento — os
   dois cursores ficavam amontoados no canto, um por cima do outro. */
.mock-cursor {
  transition: left 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              top 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mock-cursor.is-a { left: 87%; top: 2%; }
.mock-cursor.is-b { left: 71%; top: 66%; }

/* A etiqueta de destaque era um ::before posicionado FORA da caixa — e a caixa
   tem `overflow: hidden` (necessário para arredondar os cantos do cabeçalho).
   O resultado era uma barra verde cortada no topo, parecendo defeito. Agora é
   um elemento dentro do próprio cabeçalho. */
.mock-whats::before { content: none; }
.mock-whats-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--primary);
  color: #131313;
  flex-shrink: 0;
}
.mock-whats-ico { display: none; }

/* Tela do Flow um pouco mais larga, sem voltar a cobrir as laterais. */
.browser-frame:has(.mock-flow) { width: 110%; margin-left: -5%; }
.flow-images:has(.mock) .flow-img-float { width: 14%; }
.flow-images:has(.mock) .flow-img-l1 { left: -16%; }
.flow-images:has(.mock) .flow-img-l2 { left: -16%; }
.flow-images:has(.mock) .flow-img-r1 { right: -16%; }
.flow-images:has(.mock) .flow-img-r2 { right: -16%; }
.flow-images:has(.mock) .flow-img-r3 { right: -16%; }
.mock-whats { left: -17%; width: 18%; }
/* O chat saía pela borda esquerda da janela com a moldura mais larga. */
.mock-whats { left: -12%; width: 17%; }

/* Tela do Flow maior e centrada. `width: X%` com `margin-left: -(X-100)/2 %`
   mantém o quadro simétrico em relação ao container. */
.browser-frame:has(.mock-flow) { width: 122%; margin-left: -11%; }
.flow-images:has(.mock) .flow-img-float { width: 13%; }
.flow-images:has(.mock) .flow-img-l1 { left: -17%; }
.flow-images:has(.mock) .flow-img-l2 { left: -17%; }
.flow-images:has(.mock) .flow-img-r1 { right: -17%; }
.flow-images:has(.mock) .flow-img-r2 { right: -17%; }
.flow-images:has(.mock) .flow-img-r3 { right: -17%; }
.mock-whats { left: -16%; width: 16%; }

/* ==========================================================================
   A moldura tem `max-width: 1080px` e `margin: 0 auto` na folha da página.
   Era por isso que aumentar `width` não fazia nada — o teto vencia — e o meu
   `margin-left` negativo, além de não alargar, DESCENTRALIZAVA o quadro.

   O caminho certo é subir o teto e deixar a centralização com o `margin: auto`
   que já existe.
   ========================================================================== */
.browser-frame:has(.mock-flow) {
  max-width: 1300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.flow-images:has(.mock) .flow-img-float { width: 13%; }
.flow-images:has(.mock) .flow-img-l1 { left: -15%; }
.flow-images:has(.mock) .flow-img-l2 { left: -15%; }
.flow-images:has(.mock) .flow-img-r1 { right: -15%; }
.flow-images:has(.mock) .flow-img-r2 { right: -15%; }
.flow-images:has(.mock) .flow-img-r3 { right: -15%; }
.mock-whats { left: -14%; width: 15%; }

/* O teto de 1080px também está no PAI (`.flow-images`), então subir só o da
   moldura não adiantava. Com 1260px o quadro cresce ~17% e continua centrado
   pelo `margin: auto`.

   A esta largura não sobra lateral para os cartões ficarem inteiramente fora:
   eles passam a apoiar-se ~75px sobre as bordas (a coluna da paleta de um
   lado, a margem do canvas do outro), que é área de menor informação. */
.flow-images:has(.mock) { max-width: 1260px; }
.browser-frame:has(.mock-flow) { max-width: 1260px; }
.flow-images:has(.mock) .flow-img-float { width: 12%; }
.flow-images:has(.mock) .flow-img-l1 { left: -6%; }
.flow-images:has(.mock) .flow-img-l2 { left: -6%; }
.flow-images:has(.mock) .flow-img-r1 { right: -6%; }
.flow-images:has(.mock) .flow-img-r2 { right: -6%; }
.flow-images:has(.mock) .flow-img-r3 { right: -6%; }
.mock-whats { left: -7%; width: 14%; }

/* O nome do contato e a pílula "AO VIVO" brigavam pela mesma linha e o texto
   quebrava por cima. Nome trunca, pílula encolhe. */
.mock-whats { left: -9%; width: 16%; }
.mock-whats-id b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-whats-tag { font-size: 7px; padding: 2px 5px; }
.mock-whats-top { gap: 6px; padding: 8px 9px; }

/* ==========================================================================
   CHAT DO WHATSAPP — sem enfeite meu

   Eu tinha posto uma borda lima, um anel de brilho e uma pílula "AO VIVO"
   para dar destaque. Nada disso existe no WhatsApp, e o objetivo aqui é
   justamente parecer o WhatsApp. Tudo removido.

   O destaque passa a vir do que o app tem de verdade: a sombra de elemento
   flutuante e o contraste do próprio tema escuro do WhatsApp contra a página.
   O cabeçalho ganhou os ícones reais — vídeo, chamada e menu.
   ========================================================================== */
.mock-whats {
  border: 0;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.mock-whats-tag { display: none; }
.mock-whats-ico {
  display: inline-block;
  width: 15px;
  height: 15px;
  opacity: 0.75;
  flex-shrink: 0;
  color: #aebac1;
}
.mock-whats-top { gap: 9px; padding: 9px 10px; }
.mock-whats-id { margin-right: auto; }

/* ==========================================================================
   PALETA RECOLHIDA

   O editor real tem o botão « para recolher a coluna de componentes. Com ela
   aberta, a paleta comia ~250px e sobrava pouco canvas para os nós — que é
   justamente o que a seção precisa mostrar. Recolhida vira um rail de ícones,
   como no produto, e todo o espaço vai para o fluxo.
   ========================================================================== */
.mock-flow-body { grid-template-columns: 52px 1fr; }
.mock-palette.is-collapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
}
.mock-pal-toggle {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  border: 1px solid var(--neutral-30);
  color: var(--neutral-300);
  margin-bottom: 4px;
}
.mock-pal-toggle svg { width: 13px; height: 13px; }
.mock-pal-mini {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* Com o canvas maior, os nós respiram: mais largos e mais espaçados. */
.mock-node { width: 21%; }

/* O chat cobria o nó "Início" e o nome do contato truncava. Subiu, foi para a
   esquerda e ganhou largura suficiente para "Marina Alves" caber inteiro. */
.mock-whats { left: -14%; top: 26%; width: 18%; }

/* Ajuste fino do cabeçalho: com 3 ícones reais mais avatar e nome, a linha
   estava no limite. Ícones e espaçamentos menores para "Marina Alves" caber
   inteiro sem cortar — e o chat de volta para dentro da janela. */
.mock-whats { left: -11%; width: 18%; }
.mock-whats-top { gap: 6px; padding: 8px 8px; }
.mock-whats-ico { width: 13px; height: 13px; }
.mock-whats-back { width: 12px; height: 12px; }
.mock-whats-av { width: 24px; height: 24px; font-size: 9px; }
.mock-whats-id b { font-size: 11px; }
.mock-whats-id i { font-size: 9px; }

/* ==========================================================================
   PULSO DE EXECUÇÃO — fora do SVG

   O pulso era um <circle> dentro do SVG das arestas, que usa
   `preserveAspectRatio="none"` para as curvas casarem com os nós posicionados
   em porcentagem. Esse estiramento é o que deixava o círculo OVAL e maior do
   que devia — o mesmo defeito que já tinha aparecido no gráfico de Conversão.

   Agora ele é um elemento próprio, posicionado em pixels a partir do ponto
   calculado na curva. O SVG segue esticado (as arestas precisam disso), mas o
   pulso não sofre a deformação.
   ========================================================================== */
.mock-pulse {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px 2px rgba(203, 231, 94, 0.55);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.mock-pulse.on { opacity: 1; }

/* ==========================================================================
   NÓ EXECUTADO — no padrão do editor

   O editor marca o nó com `ring-2` na COR DO PRÓPRIO NÓ a 40%
   (node-chrome.tsx: `--tw-ring-color: rgb(${rgb} / 0.40)`), sobre a borda que
   já é a cor do nó a 30%. Eu usava borda lima com brilho lima — chamava
   atenção, mas não é o que a plataforma faz.
   ========================================================================== */
.mock-node-box { border-radius: 12px; }
.mock-node.is-run .mock-node-box {
  border-color: color-mix(in srgb, var(--n-fg) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--n-fg) 40%, transparent);
  transform: none;
}

/* ==========================================================================
   NÓS DERIVADOS DA COR, COMO NO EDITOR

   O produto define UMA cor por tipo de nó (NODE_COLOR + COLOR_RGB em
   node-chrome.tsx) e deriva o resto dela:
     borda   → rgb(cor / 0.30)
     cabeçalho → color-mix(in srgb, rgb(cor) 14%, <card>)
     anel de selecionado → rgb(cor / 0.40)
   O corpo é o `card` neutro (base.tsx: bg-card, dark bg-[hsl(0_0%_12%)] com
   borda hsl(0_0%_26%)) — não um tom da cor, como eu vinha fazendo.

   Duas cores minhas estavam simplesmente erradas: Weny Intent é FUCHSIA
   (217 70 239) e não âmbar, e Enviar Texto (weny-output) é CYAN (6 182 212)
   e não verde.
   ========================================================================== */
.mock-node-box {
  --card: #ffffff;
  background: var(--card);
  border: 1px solid rgb(var(--n-rgb) / 0.30);
  border-radius: 12px;
}
:root[data-theme='dark'] .mock-node-box { --card: hsl(0 0% 12%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-node-box { --card: hsl(0 0% 12%); }
}
.mock-node-head {
  background: color-mix(in srgb, rgb(var(--n-rgb)) 14%, var(--card));
}
.mock-node-body { background: var(--card); }
.mock-node-body p { color: rgb(var(--n-rgb)); }
.mock-node-ico {
  background: color-mix(in srgb, rgb(var(--n-rgb)) 22%, var(--card));
  color: rgb(var(--n-rgb));
}
.mock-node.is-run .mock-node-box {
  border-color: rgb(var(--n-rgb) / 0.30);
  box-shadow: 0 0 0 2px rgb(var(--n-rgb) / 0.40);
}

/* Cores dos tipos usados, direto do COLOR_RGB do produto. */
.n-purple  { --n-rgb: 168 85 247; }   /* weny-agent, início agendado */
.n-fuchsia { --n-rgb: 217 70 239; }   /* weny-intent */
.n-green   { --n-rgb: 34 197 94; }    /* modelo / weny-message */
.n-cyan    { --n-rgb: 6 182 212; }    /* weny-output */
.t-fuchsia { background: color-mix(in srgb, rgb(217 70 239) 16%, transparent); color: rgb(217 70 239); }
.t-cyan    { background: color-mix(in srgb, rgb(6 182 212) 16%, transparent); color: rgb(6 182 212); }

/* Portas de saída: pílula neutra com o ponto na cor do nó, como no editor. */
.mock-port {
  border: 1px solid color-mix(in srgb, var(--neutral-900) 12%, transparent);
  background: color-mix(in srgb, var(--neutral-900) 4%, transparent);
  border-radius: 8px;
}
.mock-port em { background: rgb(var(--n-rgb)); }

/* Fundo do canvas: pontos com gap 14 e tamanho 1.2, nas cores que o editor
   passa ao <Background> do React Flow. */
.mock-canvas {
  background-image: radial-gradient(#9AA1AE 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}
:root[data-theme='dark'] .mock-canvas {
  background-image: radial-gradient(hsl(0 0% 38%) 1.2px, transparent 1.2px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-canvas {
    background-image: radial-gradient(hsl(0 0% 38%) 1.2px, transparent 1.2px);
  }
}

/* ==========================================================================
   MINIATURAS COM A MESMA DERIVAÇÃO DOS NÓS

   Os nós do canvas passaram a derivar cabeçalho, borda e texto de UMA cor
   (--n-rgb). As miniaturas flutuantes ficaram para trás, ainda com a paleta
   que eu havia escolhido à mão — e destoavam lado a lado. Agora usam a mesma
   fórmula e as mesmas cores do produto.
   ========================================================================== */
.mock-fnode {
  --card: #ffffff;
  background: var(--card);
  border: 1px solid rgb(var(--n-rgb) / 0.30);
  border-radius: 12px;
}
:root[data-theme='dark'] .mock-fnode { --card: hsl(0 0% 12%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-fnode { --card: hsl(0 0% 12%); }
}
.mock-fnode-head {
  background: color-mix(in srgb, rgb(var(--n-rgb)) 14%, var(--card));
}
.mock-fnode-body { background: var(--card); }
.mock-fnode-body p { color: rgb(var(--n-rgb)); }
.mock-fnode-ico {
  background: color-mix(in srgb, rgb(var(--n-rgb)) 22%, var(--card));
  color: rgb(var(--n-rgb));
}
.mock-fnode-port { background: rgb(var(--n-rgb)); }

.n-amber   { --n-rgb: 245 158 11; }   /* weny-conditional */
.n-emerald { --n-rgb: 16 185 129; }   /* weny-create-opportunity */

/* O chat estava por cima da miniatura do Weny AI. Descido para a faixa livre
   entre ela e a segunda miniatura. */
.mock-whats { top: 40%; }
.flow-images:has(.mock) .flow-img-l1 { top: 8%; }
.flow-images:has(.mock) .flow-img-l2 { top: 80%; }

/* O olho de seção ("WENY FLOW · EXECUTANDO") fica ACIMA da moldura, e o
   percentual dos cartões é medido a partir do topo de `.flow-images` — que
   inclui esse rótulo. Com o cartão em 8% ele pousava justamente sobre o texto.
   Descido para depois do rótulo e da barra do navegador. */
.flow-images:has(.mock) .flow-img-l1 { top: 17%; }

/* Atenção ao posicionar estes cartões: a animação `float-left` aplica
   `translateY(-50%)`, então o `top` marca o CENTRO do cartão, não o topo.
   Foi o que me fez errar as contas duas vezes.
   Container de 807px: o olho de seção ocupa 0..17 e o chat 184..445. Com o
   centro em 13% (105) o cartão fica em 45..165 — abaixo do rótulo e acima do
   chat, sem tocar nenhum dos dois. */
.flow-images:has(.mock) .flow-img-l1 { top: 13%; }

/* A grade de addons era `repeat(4, 1fr)` para os quatro cards originais. Com a
   remoção do Weny Signature sobraram três, e o quarto trilho ficava vazio —
   os cards encolhiam e a linha ficava desalinhada à esquerda. */
.addons-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .addons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .addons-grid { grid-template-columns: 1fr; }
}

/* Avatar por iniciais: o card usava a foto de uma pessoa real. Trocar só o
   nome deixaria o rosto de alguém atribuído a um depoimento que não é dele. */
.testimonial-initials {
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #131313;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ==========================================================================
   LINHAS DECORATIVAS DA PÁGINA

   As duas verticais (e as horizontais de seção) usavam `--neutral-40`, um
   cinza-claro FIXO, e são desenhadas por cima de tudo (z-index 5). Isso
   funciona enquanto o fundo é claro — mas a seção do CTA final é uma faixa
   ESCURA mesmo no tema claro, e ali a linha aparecia como um risco claro
   atravessando o bloco.

   Trocadas por um cinza TRANSLÚCIDO: escurece de leve sobre fundo claro e
   clareia de leve sobre fundo escuro, sem precisar saber o que está embaixo.
   ========================================================================== */
/* O token `--regua` e a pintura dos filetes MUDARAM para o `layout.css`.

   Motivo: este arquivo é carregado só pela index, e o `layout.css` — que é
   carregado pelas oito páginas — já usava `var(--regua)` na borda do header.
   Nas outras sete o token não existia, a declaração virava inválida e a borda
   caía em `currentColor`: um filete PRETO embaixo do header, brigando com as
   réguas cinza-claro. Com o token no arquivo compartilhado, filete e régua
   voltam a ser a mesma cor em todas as páginas. */

/* O olho de seção é um <p>, e no hero ele caía numa regra genérica de
   parágrafo (`max-width: 560px; margin: 0 auto`). Resultado: o rótulo
   "Atendimento · ao vivo" ganhava 270px de margem automática de cada lado e
   ficava centralizado, enquanto os das outras seções ficam rentes à esquerda
   do quadro que rotulam. Especificidade (0,2,1) para vencer a regra do hero. */
p.mock-eyebrow.mock-eyebrow {
  max-width: none;
  margin: 0 0 14px;
}

/* O quadro central do hero transborda o container em -2% (`.hero-img-central`),
   então o rótulo precisa do mesmo deslocamento para ficar rente à borda
   esquerda da tela que ele descreve — como acontece no Weny Flow e em
   Campanhas, onde quadro e rótulo dividem o mesmo pai sem transbordo. */
.hero-images:has(.mock) p.mock-eyebrow.mock-eyebrow {
  margin-left: -2%;
}
@media (max-width: 1200px) {
  .hero-images:has(.mock) p.mock-eyebrow.mock-eyebrow {
    margin-left: 0;
  }
}

/* ==========================================================================
   CRM / PIPELINE — quadro de oportunidades

   Reproduz `apps/ai-manager/.../opportunities/[opportunityId]/page.tsx` e o
   `components/container/index.tsx`, e não uma aproximação:

   - coluna = CABEÇALHO em caixa própria (`rounded-lg bg-[#f7f7f7] border
     border-border/70 shadow-sm mb-2`) + CORPO separado (`rounded-lg
     bg-[#f0f0f0] border border-border/60 p-2`). São dois blocos, não um
     painel só — é isso que dá o desenho característico do quadro.
   - card = `bg-card rounded-xl border border-border shadow-sm`, conteúdo
     `p-3` com espaçamento 2.5, e a barra de urgência de 5 blocos no rodapé.
   - alvo válido do arraste = `border-primary/60 ring-2 ring-primary/30` mais
     o brilho azul `rgba(59,130,246,0.15)` que o app aplica junto.
   - o `--primary` do ai-manager é quase-preto no claro
     (`hsl(222.2 47.4% 11.2%)`) e quase-branco no escuro (`hsl(0 0% 95%)`) —
     por isso o anel do alvo NÃO é verde nem azul.
   - detalhe da oportunidade é um Sheet LATERAL (`w-[max(70%,900px)]`,
     `right-3`, cantos arredondados), com três colunas: barra de navegação à
     esquerda, campos no centro e o trilho "Mover card para fase" à direita.
   ========================================================================== */
.mock-crm {
  height: 620px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  --crm-primary: #0f172a;
  --crm-col-head: #f7f7f7;
  --crm-col-body: #f0f0f0;
}
:root[data-theme='dark'] .mock-crm,
:root:not([data-theme='light']) .mock-crm {
  --crm-primary: #f2f2f2;
  --crm-col-head: var(--neutral-10);
  --crm-col-body: rgba(255, 255, 255, 0.04);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .mock-crm {
    --crm-primary: #0f172a;
    --crm-col-head: #f7f7f7;
    --crm-col-body: #f0f0f0;
  }
}

.mock-crm-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 16px;
  position: relative;
}
.mock-crm-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--neutral-200);
}
.mock-crm-crumb b { font-weight: 400; opacity: 0.6; }
.mock-crm-crumb span:last-child { color: var(--neutral-900); font-weight: 600; }

/* Toolbar: abas à esquerda com sublinhado na ativa, ações à direita. */
.mock-crm-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  border-radius: 9px;
  padding: 0 6px;
  flex-shrink: 0;
}
.mock-crm-tabs { display: flex; align-items: center; }
.mock-crm-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neutral-200);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mock-crm-tabs span.on {
  color: var(--neutral-900);
  border-bottom-color: var(--crm-primary);
}
.mock-crm-tabs svg { width: 13px; height: 13px; flex-shrink: 0; }
.mock-crm-acts { display: flex; align-items: center; gap: 6px; padding-right: 4px; }
.mock-crm-sel,
.mock-crm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--neutral-30);
  border-radius: 7px;
  font-size: 10.5px;
  color: var(--neutral-200);
  white-space: nowrap;
}
.mock-crm-sel svg { color: var(--crm-primary); }
.mock-crm-sel b { font-weight: 400; opacity: 0.6; margin-left: 2px; }
.mock-crm-acts svg { width: 12px; height: 12px; flex-shrink: 0; }

.crm-wrap { position: relative; max-width: 1080px; margin: 40px auto 0; }

/* ---- Quadro ---- */
.mock-board {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
  padding: 2px;
  position: relative;
}
.mock-col {
  width: 224px;
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mock-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--crm-col-head);
  border: 1px solid var(--neutral-30);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.mock-col-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mock-col-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mock-col-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  display: block;
  line-height: 1.25;
}
.mock-col-count { font-size: 10px; color: var(--neutral-200); display: block; }
.mock-col-total {
  font-size: 10px;
  font-weight: 600;
  color: var(--success-200);
  display: block;
}
.mock-col-acts { display: flex; align-items: center; gap: 3px; color: var(--neutral-200); }
.mock-col-acts svg { width: 12px; height: 12px; }

.mock-col-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 9px;
  background: var(--crm-col-body);
  border: 1px solid var(--neutral-30);
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
/* Alvo válido durante o arraste — mesma combinação do app. */
.mock-col-body.is-valid {
  border-color: color-mix(in srgb, var(--crm-primary) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--crm-primary) 30%, transparent),
    0 0 0 6px rgba(59, 130, 246, 0.15);
}
/* Coluna de origem: o app só tira a saturação da borda. */
.mock-col-body.is-source { border-color: color-mix(in srgb, var(--neutral-900) 20%, transparent); }

/* Coluna fantasma "Nova coluna" (o `placeholder` do BoardColumn). */
.mock-col.is-ghost { flex: 1 1 104px; width: auto; min-width: 96px; }
.mock-col.is-ghost .mock-col-body {
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--neutral-30);
  background: none;
  color: var(--neutral-200);
  font-size: 11.5px;
  font-weight: 500;
  gap: 6px;
  flex-direction: row;
  white-space: nowrap;
}
/* Sem tamanho explicito o SVG do "+" herda a altura da coluna inteira e ocupa
   o bloco todo, empurrando o rotulo para fora. */
.mock-col.is-ghost .mock-col-body svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---- Card de oportunidade ---- */
.mock-oc {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 10px;
  flex-shrink: 0;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s, border-color 0.2s, opacity 0.25s;
}
.mock-oc.is-novo { animation: crm-entra 0.45s ease-out both; }
@keyframes crm-entra {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
/* Card em movimento: o app usa `shadow-lg border-primary/50` no overlay.
   Ele voa na camada do QUADRO, nao dentro da coluna — `.mock-col-body` tem
   overflow hidden e recortaria o card, e como cada coluna e pintada depois da
   anterior, o card passaria por tras das colunas a frente. */
.mock-oc.is-voando {
  position: absolute;
  z-index: 50;
  margin: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  border-color: color-mix(in srgb, var(--crm-primary) 50%, transparent);
  cursor: grabbing;
  pointer-events: none;
}
/* Copia deixada na coluna de origem enquanto o card viaja. */
.mock-oc.is-fantasma {
  opacity: 0.3;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--crm-primary) 50%, transparent);
  box-shadow: none;
}
.mock-oc-espaco {
  border: 1px dashed color-mix(in srgb, var(--crm-primary) 35%, transparent);
  border-radius: 12px;
  flex-shrink: 0;
}
.mock-oc-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.mock-crm .mock-tag {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mock-crm .t-emerald { background: var(--success-50); color: var(--success-300); }
.mock-crm .t-sky { background: var(--tint-sky); color: var(--chart-blue); }
.mock-crm .t-indigo { background: var(--tint-purple); color: var(--fg-purple); }
.mock-crm .t-pink {
  background: color-mix(in srgb, rgb(236 72 153) 15%, transparent);
  color: rgb(219 39 119);
}
.mock-crm .t-danger { background: var(--danger-50); color: var(--danger-300); }
.mock-oc-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.25;
  display: block;
}
.mock-oc-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.mock-oc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--neutral-200);
  min-width: 0;
}
.mock-oc-row svg { width: 12px; height: 12px; flex-shrink: 0; }
.mock-oc-row b { color: var(--neutral-900); font-weight: 600; }
.mock-oc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--neutral-30);
  color: var(--neutral-200);
  font-size: 10px;
}
.mock-oc-foot > div { display: flex; align-items: center; gap: 9px; }
.mock-oc-foot span { display: inline-flex; align-items: center; gap: 3px; }
.mock-oc-foot svg { width: 11px; height: 11px; }
.mock-oc-avs { display: flex; }
.mock-oc-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--neutral-0);
  margin-left: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
}
.mock-oc-av:first-child { margin-left: 0; }
/* Barra de urgência: 5 blocos, os vencidos em vermelho (igual ao app). */
.mock-oc-urg { display: grid; grid-auto-flow: column; gap: 2px; margin-top: 7px; }
.mock-oc-urg i { height: 4px; border-radius: 100px; background: var(--neutral-30); }
.mock-oc-urg i.r { background: var(--danger-200); }
.mock-oc-urg i.p { background: var(--crm-primary); }

/* ---- Detalhe da oportunidade (Sheet lateral) ----------------------------
   No app é um `<Sheet>` que entra pela direita ocupando `max(70%, 900px)`,
   com `right-3`, `h-[98%]` e cantos arredondados — não um modal centralizado.
   ------------------------------------------------------------------------ */
.mock-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
}
.mock-sheet[hidden] { display: none; }
.mock-sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mock-sheet-panel {
  position: absolute;
  top: 1%;
  bottom: 1%;
  right: 10px;
  width: 72%;
  display: flex;
  flex-direction: column;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  border-radius: 12px;
  overflow: hidden;
  transform: translateX(103%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.18);
}
.mock-sheet.is-open .mock-sheet-bg { opacity: 1; }
.mock-sheet.is-open .mock-sheet-panel { transform: none; }

.mock-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--neutral-30);
  flex-shrink: 0;
}
.mock-sheet-nav { display: flex; align-items: center; gap: 6px; }
.mock-sheet-nav em { font-style: normal; font-size: 10px; color: var(--neutral-200); }
.mock-sheet-nav b { font-size: 12px; font-weight: 600; color: var(--neutral-900); }
.mock-sheet-ico { display: inline-flex; color: var(--neutral-200); }
.mock-sheet-ico svg { width: 13px; height: 13px; }
.mock-sheet-div { width: 1px; height: 12px; background: var(--neutral-30); margin: 0 4px; }

.mock-sheet-body { flex: 1; min-height: 0; display: flex; }
.mock-sheet-side {
  width: 27%;
  flex-shrink: 0;
  border-right: 1px solid var(--neutral-30);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.mock-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--neutral-30);
  border-radius: 100px;
  font-size: 10px;
  color: var(--neutral-900);
  white-space: nowrap;
}
.mock-chip svg { width: 11px; height: 11px; color: var(--neutral-200); }
.mock-chip-av {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Par derivado do proprio texto: no claro vira cinza-claro com letra escura,
     no escuro se inverte sozinho. `--neutral-800` era escuro sobre escuro no
     tema claro e as iniciais sumiam. */
  background: color-mix(in srgb, var(--neutral-900) 12%, transparent);
  color: var(--neutral-900);
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mock-sheet-menu { display: flex; flex-direction: column; gap: 2px; }
.mock-sheet-menu span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-200);
}
.mock-sheet-menu span.on {
  background: color-mix(in srgb, var(--neutral-900) 10%, transparent);
  color: var(--neutral-900);
}
.mock-sheet-menu svg { width: 13px; height: 13px; flex-shrink: 0; }
.mock-sheet-sep { height: 1px; background: var(--neutral-30); }
.mock-sheet-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mock-sheet-name { font-size: 13px; font-weight: 700; color: var(--neutral-900); }
.mock-sheet-fone { font-size: 10.5px; color: var(--neutral-200); }

.mock-sheet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mock-sheet-fase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--neutral-30);
  flex-shrink: 0;
}
.mock-sheet-fase > div { display: flex; align-items: center; gap: 8px; }
.mock-sheet-fase b { font-size: 12px; font-weight: 600; color: var(--neutral-900); }
.mock-fase-chip {
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--neutral-900) 8%, transparent);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neutral-900);
}
.mock-sheet-share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--neutral-200);
}
.mock-sheet-share svg { width: 12px; height: 12px; }
.mock-sheet-scroll { flex: 1; min-height: 0; padding: 14px; overflow: hidden; }
.mock-sheet-scroll .mock-sec-title { display: block; margin-bottom: 8px; }
.mock-sheet-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-bottom: 16px;
}
.mock-sheet-campos > div {
  border: 1px solid var(--neutral-30);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
}
.mock-sheet-campos span {
  display: block;
  font-size: 9.5px;
  color: var(--neutral-200);
  margin-bottom: 2px;
}
.mock-sheet-campos b {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock-sheet-hist { display: flex; flex-direction: column; gap: 10px; }
.mock-sheet-hist > div { display: flex; gap: 9px; align-items: flex-start; }
.mock-sheet-hist i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crm-primary);
  margin-top: 4px;
  flex-shrink: 0;
}
.mock-sheet-hist span { display: block; font-size: 10.5px; color: var(--neutral-200); }
.mock-sheet-hist b { color: var(--neutral-900); font-weight: 600; }
.mock-sheet-hist em { display: block; font-style: normal; margin-top: 1px; }

.mock-sheet-rail {
  width: 23%;
  flex-shrink: 0;
  border-left: 1px solid var(--neutral-30);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.mock-sheet-rail > b { font-size: 12.5px; font-weight: 600; color: var(--neutral-900); }
.mock-sheet-rail p {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-200);
  margin: 2px 0 0;
}
.mock-rail-back { padding-top: 8px; border-top: 1px solid var(--neutral-30); margin-top: 4px !important; }
.mock-rail-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--neutral-30);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--neutral-900);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.mock-rail-btn svg { width: 13px; height: 13px; margin-left: auto; color: var(--neutral-200); flex-shrink: 0; }
.mock-rail-btn.is-back { font-weight: 500; }
.mock-rail-btn.is-back svg { margin-left: 0; margin-right: 0; }
.mock-rail-btn.is-loss {
  border-color: color-mix(in srgb, var(--danger-200) 40%, transparent);
  background: color-mix(in srgb, var(--danger-200) 10%, transparent);
  color: var(--danger-300);
}
/* Realce do clique simulado no botão que move o card. */
.mock-rail-btn.is-press {
  background: color-mix(in srgb, var(--neutral-900) 10%, transparent);
  border-color: color-mix(in srgb, var(--crm-primary) 45%, transparent);
  transform: scale(0.98);
}

/* Cursor que aponta o clique — mesmo recurso já usado nos outros mocks. */
.mock-crm-cursor {
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: 60;
  color: var(--neutral-900);
  opacity: 0;
  transition: opacity 0.25s, left 0.5s ease, top 0.5s ease;
  pointer-events: none;
}
.mock-crm-cursor.on { opacity: 1; }
.mock-crm-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

@media (max-width: 900px) {
  .mock-crm { height: 540px; }
  .mock-sheet-side { display: none; }
  .mock-sheet-panel { width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .mock-oc,
  .mock-sheet-panel,
  .mock-sheet-bg { transition: none; }
  .mock-oc.is-novo { animation: none; }
}

/* ==========================================================================
   SUPERFÍCIE DOS MOCKS — independente do fundo da página

   A página passou a ser PRETO PURO no tema escuro (`--neutral-0: #000`). Os
   mocks usam esse mesmo token como superfície em dezenas de lugares, então
   painel, card e fundo viraram a mesma cor e a UI perdeu o relevo.

   E é errado que sigam a página: o ai-manager no escuro NÃO é preto puro —
   é quase-preto com os cards um degrau acima, e é isso que os mocks precisam
   reproduzir para parecerem o produto.

   Aqui a ponta escura da rampa é REDEFINIDA localmente. Como custom property
   herda, toda referência a `--neutral-0` … `--neutral-40` dentro de um mock
   passa a resolver para os valores do app, sem tocar em nenhuma das regras
   que já as usam. A página continua preta.
   ========================================================================== */
:root[data-theme='dark'] .mock,
:root[data-theme='dark'] .browser-frame,
:root:not([data-theme='light']) .mock,
:root:not([data-theme='light']) .browser-frame {
  --neutral-0: #141414;
  --neutral-10: #181818;
  --neutral-20: #1c1c1c;
  --neutral-30: #262626;
  --neutral-40: #303030;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .mock,
  :root:not([data-theme='dark']) .browser-frame {
    --neutral-0: #ffffff;
    --neutral-10: #f7f8f8;
    --neutral-20: #f0f1f2;
    --neutral-30: #ecedee;
    --neutral-40: #e1e2e4;
  }
}

/* Pontos do canvas do Weny Flow: o app usa `hsl(0 0% 38%)` no escuro, mas ali
   eles ficam sobre um canvas cinza-escuro. Nos mocks, em escala reduzida e com
   a malha mais densa em relação ao quadro, 38% lê como textura pesada. Baixado
   para 24% no escuro e clareado no claro, mantendo o mesmo passo de 14px e o
   mesmo raio de 1,2px do produto. */
.mock-canvas {
  background-image: radial-gradient(#c3c8d0 1.2px, transparent 1.2px);
}
:root[data-theme='dark'] .mock-canvas,
:root:not([data-theme='light']) .mock-canvas {
  background-image: radial-gradient(hsl(0 0% 24%) 1.2px, transparent 1.2px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .mock-canvas {
    background-image: radial-gradient(#c3c8d0 1.2px, transparent 1.2px);
  }
}