/* ==========================================================================
   site-bento.css: bento (cards grandes com o feixe de linhas e o campo que digita sozinho).
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* ── 7. Chips, badges, tiles, tooltip ─────────────────────────────────── */
/* Fileira de chips: trilho de UMA linha. Quem esconde o excedente e faz o
   fade e o .st-marquee--soft que a envolve. */
.st-chips {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
}

/* 170px e nao 150px: em 150 o rodape de chips dos mockups chat, agente-ia e
   pagina-ofertas ficava cortado no meio (6 a 13px faltando). */
.st-card__panel--sm { height: 170px; padding: 16px; }

/* 10.5 Bento */
.st-bento { display: grid; grid-template-columns: 620px minmax(0, 1fr); gap: 12px; }

.st-bento__side { display: grid; gap: 12px; align-content: start; }

.st-bento__big {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-top-color: var(--primary-line);
  border-radius: var(--radius);
  background: #fafbfb;
  overflow: hidden;
}

/* A arte cresce com a coluna: com altura fixa sobrava uma faixa branca de
   ~130px entre os chips e a base do card. */
.st-bento__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 340px;
  min-height: 340px;
  overflow: hidden;
}

.st-bento__lines { position: absolute; inset: 0; width: 100%; height: 100%; }

/* O feixe do bento: espessura e opacidade por linha vem do PHP (atributo do
   proprio SVG, porque variam de linha a linha). Aqui so a cor, que alterna
   entre a da marca e o cinza dos mockups, e e o que da o ar de fio trancado
   quando duas linhas de cor diferente se cruzam. */
.st-bento__line { fill: none; stroke-linecap: round; }

.st-bento__line--a { stroke: var(--primary); }

.st-bento__line--b { stroke: var(--mk-line); }

.st-bento__input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 391px;
  max-width: calc(100% - 48px);
  height: 73px;
  padding: 0 10px 0 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
}

.st-bento__input-ico { color: var(--primary); display: inline-flex; flex: 0 0 auto; }

.st-bento__input-ico svg { width: 18px; height: 18px; }

/* UMA linha, sempre: o texto corta com reticencias e o cursor pisca ao lado
   (o JS digita as frases alternando). 15px e nao 16px porque a frase mais
   longa ("Cria uma campanha pros leads de ontem") media 299px em 16px contra
   os 283,6px da linha: o campo terminava TODA volta da digitacao em
   reticencias, bem na frase que o dono citou. */
.st-bento__input-txt {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--text-ghost);
  white-space: nowrap;
  overflow: hidden;
}

.st-bento__input-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.st-bento__caret { flex: 0 0 auto; width: 2px; height: 19px; border-radius: 1px; background: var(--primary); }

.st-bento__input-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-btn-2);
  color: var(--text-1-soft);
}

.st-bento__input-go svg { width: 16px; height: 16px; }

.st-bento__body { padding: 26px; }

.st-bento__title { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.015em; }

.st-bento__desc { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--text-muted); }

.st-bento__chips { margin-top: 20px; }

.st-bento__art .mk[data-mk='mcp-chat'] { zoom: 1.7; }

/* A conversa nova e MAIS LARGA antes de ampliar (300px em vez de 240), e nao
   so maior: o dono pediu mais exemplo, nao letra maior. Por isso a regra vale
   so dentro do bento e so para ela (o mesmo nome de laco serve a 'aquecimento'
   e 'comandos-grupo', que continuam com 240 x 1,7). A especificidade tem de
   empatar com a linha acima, senao a linha acima ganha por vir antes. */
.st-bento__art .mk--conversa[data-mk='mcp-chat'] { zoom: 1.75; max-width: 300px; }

@media (max-width: 1100px) {
  .st-bento { grid-template-columns: minmax(0, 1fr) 302px; }
}

@media (max-width: 1024px) {
  .st-bento { grid-template-columns: minmax(0, 1fr); }

  .st-bento__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .st-bento__side { grid-template-columns: minmax(0, 1fr); }
}

/* No bento a arte divide a faixa com o texto: o passo e o mesmo do mcp-chat. */
.st-bento__art .mk[data-mk='integracoes'],
.st-bento__art .mk[data-mk='cobranca'] { zoom: 1.7; }

@media (max-width: 768px) {
  .st-bento__art .mk[data-mk='integracoes'],
  .st-bento__art .mk[data-mk='cobranca'] { zoom: 1.2; }
}

@media (max-width: 480px) {
  .st-bento__art .mk[data-mk='integracoes'],
  .st-bento__art .mk[data-mk='cobranca'] { zoom: 1; }
}

@media (max-width: 768px) {
  .st-bento__art .mk--conversa[data-mk='mcp-chat'] { zoom: 1.15; max-width: 280px; }
}

@media (max-width: 480px) {
  .st-bento__art .mk--conversa[data-mk='mcp-chat'] { zoom: 1.15; max-width: 262px; }
}