/* =========================================================================
   Billions Creative — Preview de páginas (galeria de temas)
   Ferramenta interna: mesma linguagem visual do site (index-v2.css, que
   já é importado antes deste arquivo — reaproveita tokens, .btn/.btn-primary
   e .tag-row/.tag-chip em vez de recriá-los). Aqui só o "chrome" próprio
   desta tela: barra de controle fixa + palco do iframe.
   ========================================================================= */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; background: var(--c-surface-dark); }

/* ---------- Barra de controle ---------- */
/* mesma altura/tratamento do .site-header do site (52px, vidro sobre
   preto) — aqui um pouco mais alta (60px) por ter mais controles
   (tabs de modelo + device switcher + CTA), mas com a mesma disciplina
   visual: hairline embaixo, sem sombra pesada. */
.preview-bar {
  flex: 0 0 60px;
  height: 60px;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: rgba(0,0,0,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-hairline-dark);
}
.bar-left, .bar-right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bar-right { justify-content: flex-end; }

.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 590;
  color: var(--c-on-dark-soft);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.back:hover, .back:focus-visible { color: var(--c-on-dark); }
.back svg { width: 18px; height: 18px; flex-shrink: 0; }

.divider { width: 1px; height: 24px; background: var(--c-hairline-dark); flex-shrink: 0; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: 22px; height: 22px; display: block; }

/* rótulo "Coleção" + nome do tema: mesma anatomia de .theme-meta small/b
   já usada no resto do projeto (eyebrow 10px caixa-alta + texto principal) */
.theme-meta { line-height: 1.2; min-width: 0; }
.theme-meta small {
  display: block;
  font-size: 10px; font-weight: 590; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-on-dark-soft);
  margin-bottom: 2px;
}
.theme-meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--c-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* tabs de modelo: o mesmo .tag-row/.tag-chip do site, só compactado para
   caber na barra (44px de alvo de toque é demais para uma toolbar) */
.model-tabs { flex-wrap: nowrap; gap: 6px; }
.model-tabs .tag-chip {
  min-height: 34px;
  padding: 0 16px;
  font-size: 12px;
  white-space: nowrap;
}
/* mesmo padrão do filtro ativo em Experiências (.xp-filters .tag-chip.is-accent):
   branco sólido + texto escuro, não o mint padrão do .tag-chip.is-accent base */
.model-tabs .tag-chip:hover { border-color: #fff; color: var(--c-on-dark); }
.model-tabs .tag-chip.is-accent { background: #fff; border-color: #fff; color: var(--c-panel-dark); }

.device-switcher { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid var(--c-hairline-dark); flex-shrink: 0; }
.device-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--c-on-dark-soft);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.device-btn:hover { color: var(--c-on-dark); }
.device-btn.active { background: var(--c-mint-dark-bg); color: var(--c-on-brand); }
.device-btn svg { width: 16px; height: 16px; }

/* CTA de conversão real (mesma classe .btn.btn-primary dos planos/CTA
   final — a única cor de ação do site, azul, nunca mint aqui) */
.choose-model { min-height: 36px; padding: 0 18px; font-size: 13px; flex-shrink: 0; }
.choose-model svg { width: 14px; height: 14px; }

.open-new {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-hairline-dark);
  color: var(--c-on-dark-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.open-new:hover, .open-new:focus-visible { border-color: var(--c-mint-dark-bg); color: var(--c-on-dark); }
.open-new svg { width: 15px; height: 15px; }

/* ---------- Palco do iframe ---------- */
/* fundo neutro e quieto — o produto é a página sendo mostrada, não o
   palco. Sem gradiente decorativo: só o preto/grafite já usado no resto
   do site em telas escuras. */
.viewport-stage {
  position: relative;
  flex: 1; min-height: 0;
  overflow: auto;
  display: flex; justify-content: center; align-items: stretch;
  background: var(--c-surface-dark-2);
}
.frame-shell {
  position: relative;
  width: 100%; height: 100%; min-height: 560px;
  background: #fff;
  overflow: hidden;
  transition: width .5s var(--ease-out), height .5s var(--ease-out), border-radius .4s var(--ease);
}
.viewport-stage.is-tablet { padding: 24px; }
.viewport-stage.is-tablet .frame-shell { width: 820px; height: calc(100vh - 60px - 48px); border-radius: var(--radius-l); box-shadow: var(--shadow-card-dark); }
.viewport-stage.is-mobile { padding: 24px; }
.viewport-stage.is-mobile .frame-shell { width: 390px; height: 844px; flex: 0 0 auto; border-radius: var(--radius-l); box-shadow: var(--shadow-card-dark); }
iframe { width: 100%; height: 100%; display: block; border: 0; background: #fff; }

/* estado de carregamento: o próprio símbolo da marca se desenhando em
   loop (stroke-dashoffset — técnica de "line drawing") em vez de um
   spinner genérico. Montado por assets/js/symbol-loader.js (dois <path>
   com pathLength="1", o que dispensa medir o comprimento real do
   traçado em JS: dasharray/dashoffset de 0 a 1 funcionam para qualquer
   path). O contorno hexagonal traça primeiro, o "B" interno logo atrás
   (delay), revelando o gradiente da marca ao completar; o ciclo todo
   dá um respiro e recomeça — "criação contínua", não um preenchimento
   único. */
.loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: var(--c-surface-dark);
  color: var(--c-on-dark-soft);
  font-family: var(--font-text);
  font-size: 13px; font-weight: 590;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.loading.hidden { opacity: 0; visibility: hidden; }
/* loop pausado enquanto não há loading ativo (setActive em symbol-loader.js) —
   nada de animação rodando escondida atrás do iframe já carregado */
.loading:not(.is-animating) .loading-symbol,
.loading:not(.is-animating) .loading-symbol-path { animation-play-state: paused; }
.loading-symbol {
  width: 72px; height: auto; overflow: visible;
  animation: symbol-cycle-opacity 2.8s linear infinite;
}
.loading-symbol-path {
  fill-opacity: 0;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: symbol-draw 2.8s var(--ease) infinite, symbol-fill 2.8s linear infinite;
}
/* o "B" interno começa a se desenhar um instante depois do contorno
   hexagonal — a mesma ordem de quem desenha a mão: moldura primeiro */
.loading-symbol-path-1 { animation-delay: .35s, .35s; }
@keyframes symbol-draw {
  0% { stroke-dashoffset: 1; }
  48%, 100% { stroke-dashoffset: 0; }
}
@keyframes symbol-fill {
  0%, 45% { fill-opacity: 0; }
  62%, 100% { fill-opacity: 1; }
}
/* o símbolo some bem no fim do ciclo (traçado e preenchimento já
   resetados por baixo) e reaparece no início — a "virada" do loop fica
   invisível, sem soletrar o reset abrupto do traço */
@keyframes symbol-cycle-opacity {
  0%, 88% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
/* sem movimento: símbolo estático, já completo — nada de traço/loop */
@media (prefers-reduced-motion: reduce) {
  .loading-symbol { animation: none !important; opacity: 1; }
  .loading-symbol-path { animation: none !important; stroke-dashoffset: 0; fill-opacity: 1; }
}

@media (max-width: 960px) {
  .divider, .device-switcher { display: none; }
  .preview-bar { padding-inline: 16px; }
  .bar-left { gap: 10px; }
  .model-tabs .tag-chip { padding: 0 13px; }
}
@media (max-width: 680px) {
  .preview-bar {
    flex-basis: 104px; height: 104px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 52px 52px;
    gap: 0 10px;
    padding: 4px 14px;
  }
  .bar-left { grid-column: 1; }
  .bar-right { grid-column: 2; gap: 8px; }
  .model-tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .theme-meta, .open-new { display: none; }
  .back span { font-size: 0; }
  .back span::after { content: "Voltar"; font-size: 13px; }
  .choose-model { min-height: 34px; padding-inline: 14px; font-size: 12px; }
  .viewport-stage.is-tablet, .viewport-stage.is-mobile { padding: 0; }
  .viewport-stage.is-tablet .frame-shell, .viewport-stage.is-mobile .frame-shell { width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
}