/* Vitrine da marca (componente vitrine, U1, N1): as três demonstrações dentro da moldura verde-escura
   sobre a curva, com as cores, raios, sombras, estados e o movimento finito das telas de produto. */
.prod-media[data-agent-scene],.prod-media[data-scene]{
 --u-fundo:#FAFAF9;--u-sup:#FFFFFF;--u-sutil:#F1F3F0;--u-texto:#172B25;--u-apoio:#5B6861;--u-linha:#E1E6DF;--u-forte:#CCD6CD;
 --u-prim:#102B23;--u-ok:#27634E;--u-okf:#E8F0E8;--u-and:#3C6078;--u-andf:#EDF3F7;--u-at:#7C5925;--u-atf:#F8F0E0;
 --u-cartao:0 1px 2px rgba(16,43,35,.04),0 4px 16px rgba(16,43,35,.06);--u-flut:0 12px 40px rgba(16,43,35,.14);
 background:#102B23 url(assets/vitrine-curva.webp?v=2026101901) center/cover;
}
.prod-media .flow-caption{align-self:center!important;width:auto!important;margin:0 auto;padding:4px 12px;border-radius:999px;background:#102B23;color:#FAFAF9;font-size:13px}

/* Tela: off-white, cartão de 16 px, sombra de elemento flutuante, só Gramatika 400. */
.ag-window,.ap-win,.gr-win{border:0;border-radius:16px;background:var(--u-fundo);color:var(--u-texto);box-shadow:0 12px 40px rgba(0,0,0,.45);-webkit-backdrop-filter:none;backdrop-filter:none}
.ag-window *,.ap-win *,.gr-win *{font-weight:400!important;font-synthesis:none}
.ag-top,.ap-top{border-bottom-color:var(--u-linha)}
.ag-mark,.sc-mark{border-radius:8px;background:var(--u-prim);color:#FAFAF9}
.ag-base,.ag-count,.ag-doc small,.ag-find small,.ag-answer-foot,.ap-counter,.ap-legend,.ap-col,.ap-sub,.ap-plan-foot,.ap-node small,.ap-week,.gr-audit li,.gr-audit time{color:var(--u-apoio)}
.ag-input:empty:before{color:var(--u-apoio)}

/* Estados com ponto e palavra; chips de 8 px. */
.ag-base i{background:var(--u-ok)}
.ag-query,.ap-crumb{border-radius:8px;background:var(--u-sutil);color:var(--u-apoio)}
.ag-pill{border-radius:8px;background:var(--u-atf);color:var(--u-at)}
.ag-pill:before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.ag-answer.is-approved .ag-pill{background:var(--u-okf);color:var(--u-ok)}
.ag-answer.is-approved .ag-pill:before{display:none}
.ap-stamp,.gr-signed{border-radius:8px;background:var(--u-okf);color:var(--u-ok)}
.gr-modal-kicker{display:inline-flex;align-items:center;gap:6px;border-radius:8px;background:var(--u-atf);color:var(--u-at)}
.gr-modal-kicker:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.gr-state{border-radius:8px;background:var(--u-sutil);color:var(--u-apoio)}
.gr-state:before{background:currentColor}
.gr-state.is-working{background:var(--u-andf);color:var(--u-and)}
.gr-state.is-working:before{background:currentColor}
.gr-state.is-waiting{background:var(--u-atf);color:var(--u-at)}

/* Botões: pílula; primário verde-escuro, secundário em contorno. */
.ag-approve,.ap-validate,.gr-authorize{border-radius:999px;background:var(--u-prim);color:#FFFFFF;padding:7px 14px}
.gr-btn-ghost{border-radius:999px;border-color:var(--u-forte);color:var(--u-texto)}
.gr-signed{border-radius:999px}

/* Ampliar: conversa, ferramentas, documentos e resposta. */
.ag-user{border-radius:16px 16px 8px 16px;background:var(--u-prim);color:#FFFFFF}
.ag-think,.ap-win .sc-status,.gr-win .sc-status{color:var(--u-ok)}
.ag-think .ag-spark,.sc-spark{color:var(--u-ok)}
.ag-tool{border-color:var(--u-linha);border-radius:12px;background:var(--u-sup);box-shadow:var(--u-cartao)}
.ag-after{border-color:var(--u-linha);background:var(--u-sup)}
.ag-spin{border:1.6px solid var(--u-andf);border-top-color:var(--u-and)}
.ag-state svg,.ag-ok,.gr-ok,.gr-done{background:var(--u-ok)}
.ag-doc{border-radius:8px;background:var(--u-sutil)}
.ag-doc-ico{border-color:var(--u-linha)}
.ag-doc.is-read .ag-doc-ico{border-color:var(--u-ok);background:var(--u-okf)}
.ag-bar{background:var(--u-linha)}
.ag-bar i,.ap-line i,.gr-bar i{background:var(--u-ok)}
.ag-find:before{background:var(--u-okf)}
.ag-cite{border-radius:8px;background:var(--u-okf);color:var(--u-ok)}
.ag-answer{border-radius:16px;border-color:var(--u-linha);background:var(--u-sup);box-shadow:var(--u-cartao)}
.ag-answer-kicker{color:var(--u-ok)}
.ag-answer-foot{border-top-color:var(--u-linha)}
.ag-composer{border-color:var(--u-forte);border-radius:16px;background:var(--u-sup);box-shadow:var(--u-flut)}
.ag-caret{background:var(--u-ok)}
.ag-send{background:var(--u-forte)}
.ag-composer.has-text .ag-send{background:var(--u-prim)}

/* Aprender: mapa de habilidades e plano de formação. */
.ap-cell{border-radius:4px;background:var(--u-sutil)}
.ap-cell.is-on[data-v="3"],.ap-legend [data-v="3"]{background:var(--u-atf);box-shadow:inset 0 0 0 1px #E5C48D}
.ap-cell.is-hit{box-shadow:inset 0 0 0 1px #E5C48D,0 0 0 2px var(--u-ok)}
.ap-grid.is-focus .ap-school{color:var(--u-apoio)}
.ap-grid.is-focus .ap-school.is-hit{color:var(--u-texto)}
.ap-callout{border-radius:12px;background:var(--u-prim);color:#FAFAF9}
.ap-callout span{color:#B5C2B8}
.ap-side{background:var(--u-sup);color:var(--u-texto);border-color:var(--u-linha);box-shadow:var(--u-cartao)}
.ap-side span{color:var(--u-apoio)}
.ap-plan{border-radius:16px;border-color:var(--u-linha);background:var(--u-sup);box-shadow:var(--u-cartao)}
.ap-plan h4{font-size:18px}
.ap-kicker,.ap-session small{color:var(--u-ok)}
.ap-cal,.ap-win .sc-status{border-top-color:var(--u-linha)}
.ap-session{border-radius:8px;background:var(--u-okf);border-left-color:var(--u-ok)}
.ap-slot{border-color:var(--u-forte);background:var(--u-sup)}
.ap-slot.is-filled{border-color:var(--u-sup);background:var(--u-ok)}
.ap-slot.is-filled:nth-child(even){background:var(--u-prim)}
.ap-line{background:var(--u-linha)}
.ap-node i{background:var(--u-fundo);border-color:var(--u-ok)}

/* Gerir: quadro de trabalho, frentes, autorização e registro. */
.gr-win{--ink:var(--u-texto);--muted:var(--u-apoio);--line:var(--u-linha);--chip:var(--u-sutil);--ok:var(--u-ok)}
.gr-agent{border-radius:12px;border-color:var(--u-linha);background:var(--u-sup)}
.gr-col{border:0;border-radius:12px;background:var(--u-linha)}
.gr-col-head{color:var(--u-apoio)}
.gr-col-head i{border-radius:8px;border-color:var(--u-linha);background:var(--u-sup)}
.gr-col[data-col="concluido"] .gr-col-head:before{background:var(--u-ok)}
.gr-card,.gr-ticket{border-radius:8px;background:var(--u-sup);border-color:transparent;box-shadow:var(--u-cartao)}
.gr-card{opacity:.8}
.gr-ticket{border-color:var(--u-ok);box-shadow:0 0 0 3px #27634E1f,var(--u-flut)}
.gr-tag{border-radius:8px;background:var(--u-sutil);color:var(--u-apoio)}
.gr-ticket .gr-tag{background:var(--u-okf);color:var(--u-ok)}
.gr-done{border-color:var(--u-fundo)}
.gr-lane,.gr-diff,.gr-sends{border-radius:12px;border-color:var(--u-linha);background:var(--u-sup);box-shadow:var(--u-cartao)}
.gr-dot{background:var(--u-and)}
.gr-lane.is-done .gr-dot{background:var(--u-ok);opacity:1}
.gr-bar{background:var(--u-linha)}
.gr-field s:after{background:var(--u-texto)}
.gr-send>svg{color:var(--u-apoio)}
.gr-toast{border-radius:12px;background:var(--u-prim);color:#FAFAF9;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.gr-shade{background:#102B2366}
.gr-modal{border-radius:24px;background:var(--u-sup);box-shadow:0 12px 40px rgba(16,43,35,.3)}
.gr-modal h4{font-size:18px}
@media(min-width:521px){.gr-line:not(.gr-result):before{color:var(--u-ok)}}

/* Movimento finito (N1, U1): nada pisca, gira ou brilha em loop; o progresso aparece em barras e marcas que avançam. */
.ag-base i:after,.ap-node.ap-next.is-live i:after{display:none}
.ag-spin,.ag-think.is-working .ag-spark,.sc-status.is-working .sc-spark,.gr-dot,.gr-state.is-working:before{animation:none}
.ag-think.is-working .ag-shimmer{color:inherit;animation:none}
.sc-status.is-working .sc-status-text{-webkit-text-fill-color:currentColor;animation:none}
.ag-state svg,.ag-ok,.gr-ok{transition:opacity .24s ease-out,transform .24s ease-out}
.ap-cell{transition-duration:.24s,.24s,.24s}
/* Buscando: anel inteiro parado, na cor de andamento (um arco parado pareceria travado). */
.ag-spin{border-color:var(--u-and)}
/* Aviso de novo pedido no vão abaixo do quadro, sem cobrir as colunas. */
.gr-toast{top:auto;bottom:64px;right:16px}

/* Legível no computador: a tela ocupa o palco e o texto sobe um degrau na escala de U1. */
@media(min-width:901px){
 .prod-stage{grid-template-columns:minmax(0,30vw) minmax(0,1fr);gap:4vw}
 .ag-window,.ap-win,.gr-win{max-width:100%;max-height:none}
 .ag-base,.ag-count,.ag-query,.ap-crumb,.ap-counter,.gr-crumb{font-size:13px}
 .ag-user{font-size:16px}
 .ag-think,.ag-tool-head,.ag-find,.sc-status,.ap-title{font-size:14px}
 .ag-doc b{font-size:14px}.ag-doc small,.ag-find small{font-size:12.5px}
 .ag-text{font-size:17px}
 .ag-answer-kicker,.ap-kicker{font-size:12px}
 .ag-answer-foot,.ag-approve,.ag-pill{font-size:13px}
 .ag-composer{font-size:15px}
 .ap-legend,.ap-col{font-size:12px}
 .ap-school{font-size:14px;line-height:32px}.ap-cell{height:32px}
 .ap-callout{font-size:13px}.ap-callout b{font-size:13.5px}
 .ap-plan h4{font-size:20px}.ap-sub,.ap-plan-foot,.ap-validate,.ap-stamp{font-size:13px}
 .ap-week{font-size:12px}.ap-session{font-size:13px}.ap-session small{font-size:11.5px}
 .ap-node b{font-size:13px}.ap-node small{font-size:12px}
 .gr-agent b{font-size:13px}.gr-agent small,.gr-state{font-size:11.5px}
 .gr-col-head{font-size:12px}
 .gr-card,.gr-ticket{font-size:13px}.gr-card small,.gr-ticket small{font-size:11.5px}.gr-tag{font-size:10.5px}.gr-owner{font-size:11px}
 .gr-lane-head,.gr-field,.gr-send,.gr-toast{font-size:13px}
 .gr-log,.gr-send em{font-size:11.5px}.gr-exec-label{font-size:10.5px}
 .gr-modal-kicker,.gr-checks{font-size:12px}.gr-modal h4{font-size:20px}.gr-modal dl,.gr-actions{font-size:13.5px}
 .gr-audit li{font-size:12px}
}
/* Celular: o balão secundário sai, para o principal ter espaço sobre o mapa. */
@media(max-width:520px){.ap-side{display:none!important}}