/* css/peca3d.css: materiais do card (Site e Peça 3D), Escolher fotos, pedido, briefing,
   chat de ajuste (.folha-chat) e as peças de interface da Peça 3D. Área: peca3d.
   Só tokens do base.css. Cor em hex só nas ilustrações dos modelos, e vem do JS (--mc = cor da marca). */

/* ==========================================================================
   MATERIAIS NO CARD: .site-block > [botão da ação] + .site-slot (o slot vem antes na tela)
   ========================================================================== */
.site-block { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

/* o slot (estado: progresso, erro, resumo) aparece ACIMA do botão da ação; o DOM mantém o botão antes
   (contrato do card: o primeiro [data-action=criar-site|gerar-3d] vem antes do slot) */
.site-block > .site-slot, .site-block > .peca-slot { order: -1; min-width: 0; }

.site-slot:empty, .peca-slot:empty { display: none; }

.site-block > [data-action="criar-site"], .site-block > [data-action="gerar-3d"] { min-height: 48px; }

.mat-dica { margin: 0; font-size: var(--t-13); color: var(--text-2); line-height: 1.45; }

.mat-erro {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px;
  background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--r-sm);
}

.mat-erro > svg { width: 20px; height: 20px; flex: none; color: var(--danger); margin-top: 1px; }

.mat-erro b { display: block; font-size: var(--t-14); font-weight: 600; color: var(--text); }

.mat-erro span { display: block; font-size: var(--t-13); color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }

.mat-pronto { display: grid; gap: 10px; min-width: 0; }

.mat-topo { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text-3); }

.mat-topo > svg { width: 16px; height: 16px; flex: none; }

.mat-url { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mat-url-bloco {
  display: block; white-space: normal; word-break: break-all; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}

.mat-acoes2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

.mat-acoes2 .btn { min-height: 48px; text-decoration: none; padding-inline: 8px; }

/* site pronto: Abrir site na linha toda; Copiar link e Compartilhar lado a lado embaixo */
.mat-acoes2 .mat-abrir { grid-column: 1 / -1; }

/* ações de manutenção (Escolher fotos, Refazer): peso baixo, longe do principal */
.mat-mais { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: -2px -8px -4px 0; }

.mat-mais .btn { border-color: transparent; color: var(--text-2); padding-inline: 10px; font-weight: 500; }

.mat-mais .btn:hover { background: var(--surface-2); color: var(--text); }

.mat-mais .btn svg { width: 16px; height: 16px; }

/* --- progresso da fila / briefing pronto --- */
.mat-prog {
  display: grid; gap: var(--sp-2); padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}

.mat-prog.compacto { padding: 10px 12px; gap: 6px; }

.mat-etapas { list-style: none; margin: 0 0 2px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }

.mat-etapas li { display: grid; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--text-3); }

/* colunas do tamanho dos nomes (Renderizando e Pesquisando são os longos): nada corta em 360 */
.mat-etapas[data-trilha="gera"] { grid-template-columns: .85fr 1.1fr 1.45fr .85fr; }

.mat-etapas[data-trilha="pesq"] { grid-template-columns: .85fr 1.45fr 1fr 1fr; }

.mat-etapas li > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* V2: cada etapa é um trilho; a barra (.mat-cheia) enche da esquerda (scaleX) e a etapa atual tem
   uma luz que passa (.mat-luz). Só transform/opacity. */
.mat-trilho { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line-2); }

.mat-cheia { position: absolute; inset: 0; border-radius: inherit; background: var(--primary); transform: scaleX(0); transform-origin: left center; }

.mat-luz { position: absolute; inset: 0; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--warn) 45%, var(--warn) 55%, transparent); }

.mat-etapas li.feita { color: var(--text-2); }

.mat-etapas li.feita .mat-cheia { transform: none; }

.mat-etapas li.atual { color: var(--text); font-weight: 600; }

.mat-etapas li.atual .mat-trilho { background: var(--warn-soft); }

.mat-etapas li.atual .mat-luz { opacity: 1; animation: mat-luz 1.5s var(--ease-saida) infinite; }

.mat-briefing .mat-etapas li.atual .mat-trilho { background: var(--accent); }

.mat-briefing .mat-etapas li.atual .mat-luz { display: none; }

@keyframes mat-luz { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* site gerando: faixa sem fim (não há etapas pra contar) */
.mat-indet { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--warn-soft); }

.mat-indet .mat-luz { opacity: 1; animation: mat-luz 1.2s var(--ease-saida) infinite; }

.mat-prog-topo { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

.mat-prog-topo b { font-size: var(--t-14); font-weight: 600; color: var(--text); }

.mat-tempo { margin-left: auto; flex: none; font-size: var(--t-12); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* o relógio que anda (2:14): número tabular, um pouco mais forte que o "uns 2 min" */
.mat-relogio { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.mat-spin.feito { border-color: var(--primary); animation: none; }

.mat-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--warn); animation: mat-gira .9s linear infinite;
}

@keyframes mat-gira { to { transform: rotate(360deg); } }

.mat-prog-tx { margin: 0; font-size: var(--t-13); color: var(--text-2); line-height: 1.45; }

.mat-desde { color: var(--text-3); }

.mat-resumo {
  margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.mat-atraso {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin: 2px 0 0; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.4; color: var(--warn); background: var(--warn-soft); border-radius: var(--r-sm);
}

.mat-atraso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  .mat-spin { animation: none; }
  .mat-etapas li.atual .mat-luz, .mat-indet .mat-luz, .peca-foto-vaga::after { animation: none; transform: none; opacity: .5; }
}

:root[data-movimento="reduzido"] .mat-etapas li.atual .mat-luz, :root[data-movimento="reduzido"] .mat-indet .mat-luz,
:root[data-movimento="reduzido"] .peca-foto-vaga::after { animation: none; transform: none; opacity: .5; }

/* o erro com a ação dentro (foto real): a mensagem em cima, o botão embaixo à direita */
.mat-erro-acao { flex-wrap: wrap; }

.mat-erro-acao > div { flex: 1 1 0; min-width: 0; }

.mat-erro-acao > .btn { margin-left: auto; }

/* --- peça PRONTA: status + carrossel dos 6 + CTA + 3 ações + fotos reais --- */
.peca-pronta { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }

.peca-status { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: 28px; }

.peca-status-tx { font-size: var(--t-13); color: var(--text-2); }

.peca-escolha {
  display: inline-flex; align-items: center; font-size: var(--t-12); font-weight: 600; padding: 4px 10px; line-height: 1.3;
  border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-line); white-space: nowrap;
}

.peca-carrossel {
  width: 0; min-width: 100%; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: thin;
}

.peca-slide { flex: 0 0 200px; scroll-snap-align: start; display: grid; gap: 6px; text-decoration: none; color: var(--text-2); border-radius: var(--r-sm); }

.peca-slide-img { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--line); background: var(--surface-2); }

.peca-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }

/* a imagem do modelo não veio: a ilustração do modelo no lugar */
.peca-slide-img.sem-img { display: grid; place-items: center; padding: 14%; }

.peca-slide-img.sem-img .mi { border: 0; }

.peca-slide.on .peca-slide-img { border-color: var(--primary); }

.peca-selo {
  position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-pill); background: var(--primary); color: var(--primary-ink);
}

.peca-slide small { font-size: var(--t-12); line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.peca-slide.on small { color: var(--text); font-weight: 600; }

.peca-slide:focus-visible { outline: none; }

.peca-slide:focus-visible .peca-slide-img { outline: 2px solid var(--accent); outline-offset: 2px; }

.peca-cta { text-decoration: none; }

/* 4 secundárias em 2 x 2: o link (Copiar, Compartilhar) em cima, a peça (Ajustar, Foto real) embaixo */
.peca-acoes3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }

.peca-acoes3 .btn { min-height: 48px; padding: 6px 8px; font-size: 13px; gap: 6px; white-space: nowrap; }

.peca-acoes3 .btn svg { width: 18px; height: 18px; flex: none; }

.peca-acoes3 .btn.is-loading::before { margin: 0; }

.peca-fotos-bloco { display: grid; gap: 6px; min-width: 0; }

.peca-fotos-t { font-size: var(--t-12); font-weight: 600; color: var(--text-2); }

.peca-fotos { width: 0; min-width: 100%; display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; }

.peca-fotos a { flex: none; position: relative; display: block; width: 72px; height: 96px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }

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

.peca-fotos a.sem-img::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: 2px dashed var(--line-2); }

/* foto real: nasce desfocada e fica nítida quando carrega (filter leve + escala) */
.peca-fotos img.revela { filter: blur(12px) saturate(.6); transform: scale(1.12); opacity: .55;
  transition: filter .7s var(--ease-saida), transform .7s var(--ease-saida), opacity .45s var(--ease-saida); }

.peca-fotos img.revela.nitida { filter: none; transform: none; opacity: 1; }

/* as 3 vagas da foto real que está sendo tirada */
.peca-foto-vaga { flex: none; position: relative; width: 72px; height: 96px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2); border: 1px dashed var(--line-2); }

.peca-foto-vaga::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--brilho-esq), transparent); animation: mat-luz 1.4s var(--ease-saida) infinite; }

.peca-foto-vaga:nth-child(2)::after { animation-delay: .15s; }

.peca-foto-vaga:nth-child(3)::after { animation-delay: .3s; }

/* pontos do carrossel (só no celular, onde ele rola): alvo de 44 px, ponto de 8 px que estica no atual */
.peca-pontos { display: none; }

@media (max-width: 767.98px) {
  .peca-pontos { display: flex; justify-content: center; margin: -6px 0 -8px; }
  .peca-ponto { position: relative; width: 44px; height: 44px; margin: 0 -8px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-pill); }
  .peca-ponto i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: var(--text-3); opacity: .45;
    transition: transform var(--dur-3) var(--ease-mola), opacity var(--dur-2) var(--ease-saida); }
  .peca-ponto.on i { background: var(--primary); opacity: 1; transform: scaleX(2.4); }
  .peca-ponto:focus-visible { outline: none; }
  .peca-ponto:focus-visible i { outline: 2px solid var(--accent); outline-offset: 3px; }
  .peca-carrossel.arrastando-mouse { scroll-snap-type: none; cursor: grabbing; }
}

/* transição suave entre os 6 modelos ao arrastar: o do lado chega um pouco menor e apagado e
   cresce até o lugar (animação ligada à rolagem; só onde o navegador tem e com movimento normal) */
@supports (animation-timeline: view(inline)) {
  @media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    :root:not([data-movimento="reduzido"]) .peca-slide-img {
      animation: peca-foco linear both; animation-timeline: view(inline); animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes peca-foco {
  0% { transform: scale(.86); opacity: .5; }
  38%, 66% { transform: none; opacity: 1; }
  100% { transform: scale(.86); opacity: .5; }
}

@media (min-width: 768px) {
  .peca-carrossel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .peca-slide { flex: auto; }
}

/* celular: o carrossel sangra até a borda do card (não corta o 2º slide no padding de 16 px) */
@media (max-width: 767.98px) {
  .peca-carrossel { margin: 0 -16px; min-width: calc(100% + 32px); padding: 2px 16px 6px; scroll-padding: 0 16px; }
}

/* ==========================================================================
   FOLHA "Escolher fotos" (curadoria da galeria do site)
   ========================================================================== */
.fotos-hint { font-size: var(--t-13); color: var(--text-2); margin: 0 0 12px; line-height: 1.45; }

.fotos-semfoto {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--alvo); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--t-13);
  font-weight: 600; margin-bottom: 12px; transition: border-color var(--dur-1), color var(--dur-1);
}

.fotos-semfoto svg { width: 18px; height: 18px; }

.fotos-semfoto:hover { color: var(--text); border-color: var(--line-2); }

.fotos-semfoto.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.fotos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }

@media (min-width: 768px) { .fotos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.foto-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; background: var(--surface-3);
  transition: border-color var(--dur-1), opacity var(--dur-1);
}

.foto-tile:hover { border-color: var(--line-2); }

.foto-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

.foto-tile.is-hero { border-color: var(--accent); }

.foto-tile.is-excl img { opacity: .35; filter: grayscale(.7); }

.foto-badge-capa, .foto-badge-fora {
  position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-md);
}

.foto-badge-capa { background: var(--accent); color: var(--accent-ink); }

.foto-badge-fora { background: var(--surface-3); color: var(--text-2); }

/* alvo 44 x 44 no canto; o círculo visível é menor */
.foto-x {
  position: absolute; top: 0; right: 0; z-index: 2; width: var(--alvo); height: var(--alvo);
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text);
}

.foto-x span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--veu); transition: background-color var(--dur-1), color var(--dur-1);
}

.foto-x svg { width: 16px; height: 16px; }

.foto-x:hover span { background: var(--danger); color: var(--primary-ink); }

.foto-tile.is-excl .foto-x span { color: var(--primary); }

.foto-tile.is-excl .foto-x:hover span { background: var(--primary); color: var(--primary-ink); }

.foto-x:focus-visible { outline: none; }

.foto-x:focus-visible span { outline: 2px solid var(--accent); outline-offset: 1px; }

.foto-selo-dono {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--veu));
  color: var(--text); font-size: 10px; font-weight: 600; text-align: center; padding: 12px 4px 4px;
}

.fotos-conta { margin: 12px 0 0; font-size: var(--t-12); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   CHAT DE AJUSTE (folha cheia): log estica, chips + input presos no rodapé
   ========================================================================== */
.modal-overlay.folha-chat #modal-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.aj-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }

.aj-log > :first-child { margin-top: auto; } /* bolhas ancoradas embaixo quando o log é curto */

.aj-log .msg { max-width: 86%; padding: 10px 13px; border-radius: var(--r); font-size: var(--t-14); line-height: 1.45; overflow-wrap: anywhere; }

.aj-log .msg.eu { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }

.aj-log .msg.painel { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--line); border-bottom-left-radius: 4px; }

.aj-log .msg.nota { align-self: stretch; max-width: none; font-size: var(--t-12); color: var(--text-2); background: none; padding: 0 4px; }

.aj-log .msg.pensando { color: var(--text-2); font-style: italic; }

/* V2: a bolha nova entra com mola a partir do canto de onde fala (a do histórico nasce parada) */
.msg.chega { animation: bolha-entra var(--dur-3) var(--ease-mola) both; transform-origin: bottom left; }

.msg.chega.eu { transform-origin: bottom right; }

.msg.chega.nota { animation-name: bolha-nota; }

@keyframes bolha-entra { from { opacity: 0; transform: translateY(10px) scale(.9); } }

@keyframes bolha-nota { from { opacity: 0; transform: translateY(6px); } }

/* "digitando": 3 pontinhos que sobem em onda */
.msg.pensando .digitando { display: inline-flex; gap: 5px; align-items: center; height: 1.45em; padding: 0 2px; }

.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); opacity: .5; animation: digita 1s var(--ease-saida) infinite; }

.digitando i:nth-child(2) { animation-delay: .15s; }

.digitando i:nth-child(3) { animation-delay: .3s; }

@keyframes digita { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .digitando i { animation: none; opacity: .7; } }

:root[data-movimento="reduzido"] .digitando i { animation: none; opacity: .7; }

.aj-log .msg.erro { background: var(--danger-soft); border-color: var(--danger-line); }

.aj-log .msg-nota { margin-top: 6px; font-size: 11.5px; opacity: .8; }

.aj-denovo { display: flex; margin-top: var(--sp-2); }

.aj-rodape {
  flex-shrink: 0; border-top: 1px solid var(--line); background: var(--surface);
  padding: 10px var(--sp-4); padding-bottom: calc(12px + var(--safe-b)); display: grid; gap: 10px;
}

.aj-chips { width: 0; min-width: 100%; display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px 0; scrollbar-width: none; }

.aj-chips::-webkit-scrollbar { display: none; }

.aj-chip {
  flex: 0 0 auto; min-height: var(--alvo); padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}

.aj-chip:hover { border-color: var(--line-2); background: var(--surface-3); }

.aj-chip.atual { color: var(--text-3); }

.aj-chip:disabled { opacity: .5; cursor: not-allowed; }

.aj-envio { display: flex; gap: var(--sp-2); }

.modal-box .aj-envio input { flex: 1; min-width: 0; min-height: 48px; font-size: var(--t-base); }

.aj-envio .btn { min-height: 48px; padding: 0 18px; flex-shrink: 0; }

@media (min-width: 768px) { .aj-rodape { padding-inline: var(--sp-5); } .aj-log { padding: var(--sp-5); } }

/* ==========================================================================
   PEÇAS DO PEDIDO E DO BRIEFING
   ========================================================================== */
/* --- chips segmentados (radios escondidos; .on acompanha o marcado) --- */
.modal-box .chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }

.modal-box .chips .chip {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: var(--alvo); margin: 0; padding: 6px 8px;
  border: 0; border-radius: var(--r-xs); background: none; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.modal-box .chips .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.modal-box .chips .chip.on { background: var(--accent); color: var(--accent-ink); }

.modal-box .chips .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.modal-box .chips.livre { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; background: none; border: 0; }

.modal-box .chips.livre .chip { flex: 0 1 auto; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-pill); padding: 8px 14px; text-align: left; }

.modal-box .chips.livre .chip.on { background: var(--accent); border-color: var(--accent); }

.chip-sug, .mcard-sug {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--r-pill); background: var(--coach); color: var(--accent-ink); font-style: normal; line-height: 1.5;
}

.chips-dica { font-size: var(--t-12); color: var(--text-2); line-height: 1.45; margin-top: 6px; }

.opc-bloco { margin-top: var(--sp-4); }

.peca-sub { font-size: var(--t-13); font-weight: 600; color: var(--text); margin-bottom: 6px; }

.peca-sub small { font-weight: 400; color: var(--text-2); }

/* --- toggle switch --- */
.modal-box .switch { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; margin: 14px 0 0; padding: 4px 0; cursor: pointer; font-size: var(--t-14); font-weight: 500; color: var(--text); }

.modal-box .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.switch-pista { position: relative; flex-shrink: 0; width: 48px; height: 28px; border-radius: var(--r-pill); background: var(--line-2); transition: background-color var(--dur-1); }

.switch-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); transition: transform var(--dur-1); box-shadow: var(--shadow-sm); }

.modal-box .switch input:checked + .switch-pista { background: var(--primary); }

.modal-box .switch input:checked + .switch-pista::after { transform: translateX(20px); }

.modal-box .switch input:focus-visible + .switch-pista { outline: 2px solid var(--accent); outline-offset: 2px; }

.switch-tx small { display: block; color: var(--text-2); font-size: var(--t-12); font-weight: 400; }

@media (prefers-reduced-motion: reduce) { .switch-pista, .switch-pista::after { transition: none; } }

/* --- campos de texto (48 px de toque) --- */
.modal-box .peca-campo { display: block; font-size: var(--t-13); font-weight: 600; color: var(--text-2); margin: 12px 0 6px; }

.modal-box .peca-campo small { font-weight: 400; color: var(--text-3); }

.modal-box .peca-campo input, .modal-box .peca-campo textarea, .modal-box .peca-input { width: 100%; min-height: 48px; font-size: var(--t-base); margin-top: 6px; }

.modal-box .peca-input { margin-top: 0; }

.modal-box .peca-campo textarea { min-height: 72px; }

.modal-box .peca-arquivo input[type=file] { width: 100%; min-height: 48px; padding: 10px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--text-2); font: inherit; font-size: var(--t-13); }

.modal-box .peca-arquivo input[type=file]::file-selector-button {
  margin-right: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--r-xs); border: 1px solid var(--line-2);
  background: var(--surface-3); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}

.peca-erro-inline { color: var(--danger); font-size: var(--t-13); margin-top: 6px; }

/* --- ilustração dos 6 modelos: display 7:9; 3D = botton, plano = anel, cartaz = logo grande + frase --- */
.mi { position: relative; display: block; width: 100%; aspect-ratio: 7 / 9; border-radius: var(--r-xs); overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); --mc: var(--accent); }

.mi-deg { background: linear-gradient(180deg, var(--bg) 25%, var(--mc) 100%); }

.mi-cor { background: var(--mc); }

.mi i { position: absolute; display: block; }

.mi-logo { top: 11%; left: 28%; width: 44%; height: 10%; border-radius: 3px; background: var(--text); opacity: .92; }

.mi-cartaz .mi-logo { top: 9%; left: 20%; width: 60%; height: 20%; border-radius: 4px; }

.mi-btn { top: 35%; left: 31%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--text) 0, var(--mc) 40%, var(--bg) 100%); box-shadow: var(--shadow-md), inset 0 0 0 2px var(--line-2); }

.mi-anel { top: 35%; left: 31%; width: 38%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--mc); box-shadow: 0 0 8px var(--mc); }

.mi-frase { top: 41%; left: 10%; width: 58%; height: 9%; background: var(--text); border-radius: 2px; }

.mi-frase2 { top: 54%; left: 10%; width: 44%; height: 9%; background: var(--text); border-radius: 2px; opacity: .8; }

.mi-qr { bottom: 8%; left: 36%; width: 28%; aspect-ratio: 1; border-radius: 2px; opacity: .85; background: repeating-conic-gradient(var(--text) 0 25%, transparent 0 50%) 0 0 / 40% 40%; }

.mi-cartaz .mi-qr { left: auto; right: 10%; width: 22%; }

.mi-gotica .mi-logo, .mi-gotica .mi-frase, .mi-gotica .mi-frase2 { background: var(--text-2); }

.mi-cor.mi-gotica { background: linear-gradient(180deg, var(--bg), var(--mc)); }

/* --- cards dos 6 modelos (passo 3 do briefing): 2 colunas, 3 no desktop --- */
.modal-box .mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.modal-box .mcard {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; margin: 0; padding: 10px; min-height: var(--alvo);
  border: 2px solid var(--line); border-radius: var(--r); background: var(--surface-2); cursor: pointer; color: var(--text); font-size: var(--t-13); font-weight: 400; -webkit-tap-highlight-color: transparent;
}

.modal-box .mcard input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.modal-box .mcard.on { border-color: var(--accent); background: var(--accent-soft); }

/* V2: trocar de modelo é suave: a ilustração marcada cresce com mola, as outras recuam um pouco */
.modal-box .mcard .mi { transform: scale(.94); transition: transform var(--dur-3) var(--ease-mola); }

.modal-box .mcard.on .mi { transform: none; }

.modal-box .mcard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.mcard-tx { display: grid; gap: 3px; min-width: 0; }

.mcard-tx b { font-size: 12.5px; font-weight: 600; line-height: 1.2; }

.mcard-tx small { font-size: 11px; color: var(--text-2); line-height: 1.25; }

.modal-box .mcard-sug { position: absolute; top: -9px; right: 8px; margin: 0; }

@media (min-width: 768px) { .modal-box .mcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- faixa dos 6 mini-cards (pedido) --- */
.faixa-modelos { width: 0; min-width: 100%; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }

.fmini { flex: 0 0 112px; scroll-snap-align: start; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }

.fmini b { font-size: 11.5px; font-weight: 600; line-height: 1.2; }

.fmini small { font-size: 10.5px; color: var(--text-2); line-height: 1.25; }

/* --- cards-rádio da fonte da logo (pedido) --- */
.fcards { display: grid; gap: 10px; }

.modal-box .fcard {
  position: relative; display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: center; margin: 0; padding: 12px; min-height: 64px;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--surface-2); cursor: pointer; color: var(--text); font-size: var(--t-14); font-weight: 400; -webkit-tap-highlight-color: transparent;
}

.modal-box .fcard input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.modal-box .fcard.on { border-color: var(--accent); background: var(--accent-soft); }

.modal-box .fcard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.fcard-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--accent); }

.fcard-ico svg { width: 22px; height: 22px; }

.fcard-tx { display: grid; gap: 2px; min-width: 0; }

.fcard-tx b { font-size: var(--t-14); font-weight: 600; }

.fcard-tx small { font-size: var(--t-12); color: var(--text-2); line-height: 1.35; overflow-wrap: anywhere; }

.fcard-marca { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); color: transparent; }

.fcard-marca svg { width: 14px; height: 14px; }

.modal-box .fcard.on .fcard-marca { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.peca-pistas { display: grid; gap: 2px; padding: 4px 0 6px 12px; border-left: 2px solid var(--line-2); margin-left: 22px; }

.peca-pistas-t { font-size: var(--t-13); font-weight: 600; color: var(--text); }

.peca-pistas-t small { font-weight: 400; color: var(--text-2); }

.modal-box .peca-pistas .peca-campo { margin-top: 8px; }

/* --- briefing em 4 passos --- */
.bf-sub-nome { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bf-prog { display: flex; gap: 4px; width: 100%; margin-top: 4px; }

.bf-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-2); }

.bf-prog i.on { background: var(--accent); }

.bf-prog-tx { font-size: var(--t-12); font-weight: 600; color: var(--text-2); }

.bf-dir { padding: 10px 12px; border-left: 3px solid var(--coach); background: var(--coach-soft); border-radius: var(--r-sm); font-size: var(--t-13); line-height: 1.45; margin-bottom: var(--sp-4); }

.bf-dir-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }

.bf-dir-mais { background: none; border: 0; color: var(--coach); font: inherit; font-size: var(--t-13); font-weight: 600; padding: 8px 10px; min-height: var(--alvo); margin: -4px -6px -4px 0; cursor: pointer; border-radius: var(--r-xs); }

.bf-dir-mais:hover { background: var(--coach-soft); }

.bf-dir-resumo { margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.bf-dir.aberto .bf-dir-resumo { display: block; }

.bf-dir-corpo { display: grid; gap: 6px; margin-top: 8px; color: var(--text-2); }

.bf-dir-corpo b { color: var(--text); }

.bf-perguntas { display: grid; gap: 6px; margin-top: 4px; }

.bf-perguntas small { font-size: var(--t-12); color: var(--text-3); }

.peca-pergunta {
  display: block; width: 100%; min-height: var(--alvo); padding: 10px 12px; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--t-13); line-height: 1.4; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--coach-line); border-radius: var(--r-sm);
}

.peca-pergunta:hover { background: var(--surface-3); }

.modal-box .peca-tag { font-size: 11px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--coach-soft); color: var(--coach); font-weight: 600; white-space: nowrap; }

.modal-box .peca-tag.fraca { background: var(--surface-3); color: var(--text-2); }

.peca-ia-m { color: var(--text-2); }

.peca-rotulo { font-size: var(--t-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }

.peca-rotulo small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; color: var(--text-3); }

.peca-rotulo-mt { margin-top: var(--sp-5); }

.peca-bloco { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

.bf-logos, .bf-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.modal-box .peca-op {
  position: relative; display: grid; gap: 6px; margin: 0; padding: 6px; cursor: pointer; text-align: center; font-size: 11px; font-weight: 400; color: var(--text-2);
  border: 2px solid var(--line); border-radius: var(--r); background: var(--surface-2); -webkit-tap-highlight-color: transparent;
}

.modal-box .peca-op.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.modal-box .peca-op.on::after {
  content: '✓'; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow-md);
}

.modal-box .peca-op:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.modal-box .peca-op input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

/* fundo claro atrás da logo (logo escura com fundo transparente precisa); xadrez = transparência */
.peca-thumb { display: grid; place-items: center; aspect-ratio: 1; min-height: 140px; border-radius: var(--r-sm); overflow: hidden; background: var(--text); }

.peca-thumb.xadrez {
  background: var(--text);
  background: repeating-conic-gradient(color-mix(in srgb, var(--text) 86%, var(--text-3)) 0 25%, var(--text) 0 50%) 0 0 / 14px 14px;
}

.peca-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.peca-thumb.peca-mono { background: var(--surface-3); color: var(--text-2); font-family: var(--f-display); font-weight: 700; font-size: var(--t-28); }

.peca-thumb.peca-mono svg { width: 28px; height: 28px; }

.modal-box .peca-op small { word-break: break-word; line-height: 1.25; padding: 0 2px 2px; }

@media (min-width: 768px) { .bf-logos, .bf-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bf-cores { width: 0; min-width: 100%; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }

.modal-box .peca-cor { position: relative; flex: 0 0 auto; display: grid; gap: 4px; justify-items: center; margin: 0; padding: 5px; cursor: pointer; font-size: 11px; font-weight: 400; color: var(--text-2); border: 2px solid transparent; border-radius: var(--r); font-variant-numeric: tabular-nums; }

.modal-box .peca-cor.on { border-color: var(--accent); color: var(--text); }

.modal-box .peca-cor:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.modal-box .peca-cor input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.modal-box .peca-cor i { display: block; width: 56px; height: 56px; border-radius: var(--r); border: 1px solid var(--line-2); }

.modal-box .peca-cor input[type=color] { width: 56px; height: 56px; min-height: 0; padding: 0; margin: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: none; cursor: pointer; }

.modal-box .peca-cor input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }

.modal-box .peca-cor input[type=color]::-webkit-color-swatch { border: 0; border-radius: 12px; }

.peca-fontes { font-size: var(--t-12); color: var(--text-2); margin-top: 10px; }

.peca-fontes code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }

.bf-dir-btn { margin-top: var(--sp-4); min-height: 48px; }

.bf-chat-area { margin-top: 10px; }

.peca-chat-log { max-height: 220px; overflow: auto; display: grid; gap: 6px; padding: 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }

.peca-chat-log .msg { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: var(--t-13); line-height: 1.4; overflow-wrap: anywhere; }

.peca-chat-log .msg.eu { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }

.peca-chat-log .msg.painel { justify-self: start; background: var(--surface-3); border-bottom-left-radius: 4px; }

.peca-chat-log .msg.nota { font-size: 11.5px; color: var(--text-2); }

.peca-chat-log .msg.pensando { color: var(--text-2); font-style: italic; }

.peca-chat-envio { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.modal-box .peca-chat-envio input { flex: 1; min-width: 0; min-height: 48px; font-size: var(--t-base); }

.peca-chat-envio .btn { min-height: 48px; }

/* celular: faixas roláveis sangram até a borda da folha */
@media (max-width: 767.98px) {
  .faixa-modelos, .bf-cores { margin: 0 -16px; min-width: calc(100% + 32px); padding: 4px 16px 8px; scroll-padding: 0 16px; }
  .fmini { flex-basis: 104px; }
}

/* passo 2: prévia da cor em 3 modelos; passo 4: resumo do que foi marcado */
.bf-previa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 360px; }

.bf-previa-it { display: grid; gap: 4px; justify-items: center; font-size: 11px; color: var(--text-2); }

.bf-previa-it small { white-space: nowrap; }

.bf-resumo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.bf-resumo-it { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 12px 4px 6px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-12); color: var(--text-2); }

.bf-resumo-it img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: var(--text); }

.bf-resumo-it i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); }

.bf-resumo-it b { color: var(--text); }

.bf-resumo-mono { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--surface-3); font-size: 11px; }

.modal-box #bf-frase-livre { margin-top: 10px; }