/* Mockups de produto: aparelho gerado (Higgsfield) + interface real em HTML sobre a tela.
   A interface é desenhada num tamanho fixo (--w × --h) e escalada pelo mockups.js.
   Todos os seletores ficam presos a .mock para não vazar para a página (e vice-versa). */

.mock { position: relative; --m-mint: var(--mint, #3ee6a0); --m-line: var(--line, rgba(255,255,255,.08)); }
.mock > img { display: block; width: 100%; height: auto; max-width: none; }
.mock .mock__screen { position: absolute; overflow: hidden; }
.mock .mock__ui { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h);
  transform-origin: 0 0; transform: scale(var(--k, 1));
  font-family: Inter, system-ui, sans-serif; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: #ededed; text-align: left;
  -webkit-font-smoothing: antialiased; }
.mock .mock__ui svg { display: inline-block; max-width: none; }
/* reflexo sutil por cima da UI, para manter a sensação de vidro da foto */
.mock .mock__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%); }

/* ---------- Celular: atendimento por IA ---------- */
.mock--phone .mock__screen { left: 28.9%; top: 16.6%; width: 41.6%; height: 65.6%; border-radius: 9% / 4.3%; }
.mock--phone .mock__ui { --w: 390px; --h: 820px; background: #0a0a0a; display: flex; flex-direction: column; }
.mock .chat__status { height: 44px; padding: 14px 26px 0; display: flex; justify-content: space-between; font-size: 14px; color: #cfcfcf; }
.mock .chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; border-bottom: 1px solid var(--m-line); }
.mock .chat__back { width: 10px; height: 10px; border-left: 2px solid #8a8a8a; border-bottom: 2px solid #8a8a8a; transform: rotate(45deg); margin: 0 4px 0 6px; }
.mock .bot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1d3a2f, #0b1712); box-shadow: inset 0 0 0 1px rgba(62,230,160,.35); }
.mock .bot svg { width: 60%; height: 60%; }
.mock .bot--sm { width: 28px; height: 28px; }
.mock .chat__name { font-size: 16px; line-height: 1.2; }
.mock .chat__name small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8f8f8f; margin-top: 2px; }
.mock .chat__name small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-mint); box-shadow: 0 0 8px var(--m-mint); }
.mock .chat__ai { margin-left: auto; font-size: 11px; letter-spacing: .04em; color: var(--m-mint); border: 1px solid rgba(62,230,160,.35); border-radius: 999px; padding: 3px 9px; }
.mock .chat__body { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
.mock .chat__day { align-self: center; font-size: 11px; color: #7d7d7d; background: #151515; border-radius: 6px; padding: 3px 10px; margin-bottom: 4px; }
.mock .msg { max-width: 78%; font-size: 14.5px; line-height: 1.4; padding: 9px 12px 7px; border-radius: 16px; position: relative; }
.mock .msg time { display: block; text-align: right; font-size: 10.5px; color: rgba(255,255,255,.4); margin-top: 3px; }
.mock .msg--client { align-self: flex-end; background: #1f1f1f; border-bottom-right-radius: 5px; }
.mock .row--bot { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
/* balão da IA em superfície neutra: a menta fica só no robô e nos detalhes */
.mock .msg--bot { max-width: none; background: #161616; border: 1px solid rgba(255,255,255,.08); border-bottom-left-radius: 5px; color: #ededed; }
.mock .msg .ok { display: inline-block; vertical-align: -2px; }
.mock .typing { display: inline-flex; gap: 5px; padding: 13px 14px; }
.mock .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--m-mint); opacity: .35; animation: mock-typing 1.2s infinite; }
.mock .typing i:nth-child(2) { animation-delay: .15s } .mock .typing i:nth-child(3) { animation-delay: .3s }
@keyframes mock-typing { 30% { opacity: 1; transform: translateY(-3px) } 60%, 100% { opacity: .35; transform: none } }
.mock .chat__input { display: flex; align-items: center; gap: 10px; padding: 10px 12px 26px; }
.mock .chat__field { flex: 1; height: 42px; border-radius: 21px; background: #161616; color: #6f6f6f; font-size: 14px; display: flex; align-items: center; padding: 0 16px; }
.mock .chat__send { width: 42px; height: 42px; border-radius: 50%; background: #1b1b1b; display: grid; place-items: center; }
/* entrada das mensagens: sobe 8px com fade, 600ms (só com o roteiro ligado pelo JS) */
.mock .chat__body.is-scripted > [data-step]:not(.is-in), .mock .chat__body > [data-step].is-gone { display: none; }
.mock .chat__body > [data-step].is-in { animation: mock-msg-in .6s cubic-bezier(.4,0,.2,1) both; }
@keyframes mock-msg-in { from { opacity: 0; transform: translateY(8px) } }
/* sem JS ou com movimento reduzido: conversa completa, sem os indicadores de digitação */
.mock .chat__body:not(.is-scripted) > [data-step="typing"] { display: none; }

/* ---------- Notebook: painel SaaS ---------- */
.mock--laptop .mock__screen { left: 25.4%; top: 17.1%; width: 51.4%; height: 59.8%; border-radius: 6px 6px 0 0; }
/* tamanho de design menor que o original (1052×689) para a UI ficar legível no site */
.mock--laptop .mock__ui { --w: 900px; --h: 589px; background: #070707; display: grid; grid-template-columns: 178px 1fr; }
.mock .dash__side { border-right: 1px solid var(--m-line); padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; background: #0a0a0a; min-height: 0; overflow: hidden; }
.mock .dash__org { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; font-size: 14px; }
.mock .dash__logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #2a2a2a, #111); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: grid; place-items: center; font-size: 13px; flex: none; }
.mock .dash__org small { display: block; font-size: 11px; color: #7a7a7a; }
.mock .dash__label { font-size: 10.5px; letter-spacing: .08em; color: #5f5f5f; padding: 10px 10px 4px; }
.mock .nav { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: #9a9a9a; }
.mock .nav svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mock .nav.is-active { background: #171717; color: #f2f2f2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mock .nav em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #0a0a0a; background: var(--m-mint); border-radius: 999px; padding: 1px 7px; }
.mock .dash__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; border-top: 1px solid var(--m-line); font-size: 12.5px; }
.mock .dash__user i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #3a3a3a, #1a1a1a); display: grid; place-items: center; font-style: normal; font-size: 11px; flex: none; }
.mock .dash__user small { display: block; color: #6f6f6f; font-size: 11px; }
.mock .dash__main { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.mock .dash__top { display: flex; align-items: center; gap: 10px; }
.mock .dash__top h3 { font: 400 20px/1 Inter, sans-serif; letter-spacing: -.02em; margin: 0; color: #f2f2f2; }
.mock .dash__pill { margin-left: auto; font-size: 12px; color: #a5a5a5; border: 1px solid var(--m-line); border-radius: 8px; padding: 5px 10px; }
.mock .dash__pill + .dash__pill { margin-left: 0; }
.mock .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock .kpi { border: 1px solid var(--m-line); border-radius: 10px; padding: 10px 12px; background: #0b0b0b; min-width: 0; }
.mock .kpi span { font-size: 11px; color: #7c7c7c; letter-spacing: .02em; white-space: nowrap; }
.mock .kpi b { display: block; font: 400 22px/1.15 Inter, sans-serif; letter-spacing: -.02em; margin-top: 4px; color: #f4f4f4; white-space: nowrap; }
.mock .kpi small { font-size: 11px; color: var(--m-mint); white-space: nowrap; }
.mock .kpi small.down { color: #8f8f8f; }
.mock .panel { border: 1px solid var(--m-line); border-radius: 12px; background: #090909; padding: 12px 14px; }
.mock .chart { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mock .chart__head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: #bdbdbd; }
.mock .chart__head b { font: 400 20px Inter, sans-serif; color: #f4f4f4; }
.mock .chart__head small { color: var(--m-mint); font-size: 12px; }
.mock .chart__legend { margin-left: auto; font-size: 11px; color: #7a7a7a; display: flex; gap: 14px; }
.mock .chart__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--m-mint); margin-right: 6px; }
.mock .chart__legend i.ghost { background: #3a3a3a; }
.mock .chart svg { flex: 1; width: 100%; min-height: 0; margin-top: 8px; overflow: visible; display: block; }
.mock .chart__x { display: flex; justify-content: space-between; font-size: 10.5px; color: #5c5c5c; padding: 4px 2px 0; }
.mock .line-main { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.mock.is-live .line-main { animation: mock-draw 2.4s cubic-bezier(.4,0,.2,1) .3s forwards; }
.mock .area-main { opacity: 0; }
.mock.is-live .area-main { animation: mock-fadein 1.2s ease 1.6s forwards; }
@keyframes mock-draw { to { stroke-dashoffset: 0 } }
@keyframes mock-fadein { to { opacity: 1 } }
/* sem JS: gráfico já desenhado */
html:not(.js) .mock .line-main { stroke-dashoffset: 0; }
html:not(.js) .mock .area-main { opacity: 1; }
.mock .dash__bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.mock .tbl { font-size: 12px; }
.mock .tbl h4, .mock .src h4 { margin: 0 0 6px; font: 400 13px Inter, sans-serif; color: #bdbdbd; }
.mock .tbl div { display: grid; grid-template-columns: 1.3fr 1fr .8fr; padding: 5px 0; border-top: 1px solid var(--m-line); color: #9d9d9d; }
.mock .tbl div span:last-child { text-align: right; color: #e9e9e9; }
.mock .st { font-size: 10.5px; border-radius: 999px; padding: 1px 8px; justify-self: start; }
.mock .st--ok { color: var(--m-mint); background: rgba(62,230,160,.1); }
.mock .st--wait { color: #c9c9c9; background: #1c1c1c; }
.mock .src { font-size: 12px; color: #9d9d9d; }
.mock .src p { margin: 0 0 7px; }
.mock .src p span { float: right; color: #e9e9e9; }
.mock .src p i { display: block; height: 4px; border-radius: 4px; background: #1d1d1d; margin-top: 4px; overflow: hidden; }
.mock .src p i::before { content: ""; display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, #1f6e4f, var(--m-mint)); }

@media (prefers-reduced-motion: reduce) {
  .mock .line-main { stroke-dashoffset: 0; animation: none !important; }
  .mock .area-main { opacity: 1; animation: none !important; }
  .mock .typing i { animation: none; }
}