/* Padrão SabeTudo — wizard de menus na bolha.
   Doc: docs/SABETUDO-MENU-WIZARD-PATTERN.md
   Bolha creme (--bink). Overlay escuro do Composer NÃO usa isto. */
/* Sem max-height: o card cresce inteiro e quem rola é a página (scroll único,
   UX 2026-08-30). Era min(72vh,640px) com o pane rolando por dentro — dois
   scrollers aninhados e o user preso no de dentro. */
.sabe-wiz{margin:10px 0 0;padding:12px 14px;border:1px solid rgba(var(--bink),.16);border-radius:14px;background:var(--bubble-hi);color:var(--bink-solid);
  width:100%;max-width:100%;box-sizing:border-box;min-width:0;
  display:flex;flex-direction:column}
.sabe-wiz.is-advancing{box-shadow:0 0 0 3px rgba(var(--acc-rgb,20,125,111),.28);transition:box-shadow .2s ease}
/* 7 fases: não comprimir rótulos até sobrepor. min 4.5rem; grow quando a bolha é larga.
   Bolha estreita → overflow-x. Padding-y reserva o brilho da bolinha (overflow clipa). */
.sabe-wiz-steps{display:flex;gap:0;margin:0 0 12px;padding:8px 2px 10px;list-style:none;align-items:flex-start;
  position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  touch-action:pan-x;scrollbar-width:none}
.sabe-wiz-steps::-webkit-scrollbar{height:0;display:none}
.sabe-wiz-steps.is-overflow{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent)}
.sabe-wiz-step{position:relative;flex:1 0 4.5rem;min-width:4.5rem;text-align:center;box-sizing:border-box}
.sabe-wiz-step::after{content:"";position:absolute;top:11px;left:calc(50% + 16px);right:-50%;height:2px;background:rgba(var(--bink),.14);transition:background .35s ease}
.sabe-wiz-step:last-child::after{display:none}
.sabe-wiz-step.done::after{background:rgba(var(--acc-rgb,20,125,111),.45)}
.sabe-wiz-dot{width:22px;height:22px;border-radius:999px;border:1.5px solid rgba(var(--bink),.22);color:rgba(var(--bink),.6);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--bubble-hi);
  position:relative;z-index:1;transition:background .2s,border-color .2s,color .2s}
.sabe-wiz-step-lab{display:block;font-size:calc(10px * var(--sabe-fs,1));color:rgba(var(--bink),.68);margin-top:4px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 4px;box-sizing:border-box}
.sabe-wiz-step.now .sabe-wiz-step-lab{color:var(--tomate-text);font-weight:800}
[data-theme="dark"] .sabe-wiz-step.now .sabe-wiz-step-lab{color:var(--tomate-text-soft)}
.sabe-wiz-step.now .sabe-wiz-dot{background:var(--tomate);border-color:var(--tomate);color:#fff;
  box-shadow:0 0 0 4px rgba(var(--acc-rgb,20,125,111),.22);animation:sabe-wiz-dot-idle 2.4s ease-in-out infinite}
.sabe-wiz-step.glow .sabe-wiz-dot{animation:sabe-wiz-dot-glow .9s ease-out,sabe-wiz-dot-idle 2.4s ease-in-out .9s infinite}
.sabe-wiz-step.done .sabe-wiz-dot{background:var(--tomate-deep,#0E685C);border-color:var(--tomate);color:#fff;animation:none}
@keyframes sabe-wiz-dot-glow{
  0%{box-shadow:0 0 0 0 rgba(89,205,187,.9);transform:scale(1);filter:brightness(1.15)}
  40%{box-shadow:0 0 0 10px rgba(89,205,187,0),0 0 22px 6px rgba(89,205,187,.55);transform:scale(1.22);filter:brightness(1.45)}
  100%{box-shadow:0 0 0 4px rgba(var(--acc-rgb,20,125,111),.22);transform:scale(1);filter:none}
}
@keyframes sabe-wiz-dot-idle{
  0%,100%{box-shadow:0 0 0 4px rgba(var(--acc-rgb,20,125,111),.18),0 0 8px 0 rgba(89,205,187,.25)}
  50%{box-shadow:0 0 0 6px rgba(var(--acc-rgb,20,125,111),.32),0 0 16px 2px rgba(89,205,187,.45)}
}
.sabe-wiz-pane{animation:sabe-wiz-pane-fwd .34s cubic-bezier(.22,.7,.3,1) both;
  flex:1 1 auto;min-height:0}
.sabe-wiz-step.locked{opacity:.38;cursor:default;pointer-events:none}
.sabe-wiz-step:not(.locked):not(.now){cursor:pointer}
.sabe-wiz-step:not(.locked):not(.now):hover .sabe-wiz-dot{border-color:var(--tomate);color:var(--tomate-text)}
.sabe-wiz.sabe-cmp .sabe-wiz-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;
  flex-shrink:0;margin-top:0;padding-top:10px;border-top:1px solid rgba(var(--bink),.12);background:var(--bubble-hi)}
.sabe-wiz-actions-start,.sabe-wiz-actions-end{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
.sabe-wiz-actions-end{margin-left:auto}
.sabe-wiz-actions button:disabled{opacity:.32;cursor:not-allowed}
.sabe-cmp-ficha{margin:8px 0;padding:10px;border-radius:12px;background:rgba(var(--acc-rgb,20,125,111),.07);border:1px solid rgba(var(--acc-rgb,20,125,111),.22)}
.sabe-cmp-req{font-size:10px;color:#B45309;margin-left:6px;font-weight:700;cursor:pointer;border:0;background:transparent;padding:0;font-family:inherit}
.sabe-cmp-req.is-opt{color:rgba(var(--bink),.45);font-weight:600}
.sabe-cmp-field.is-missing label{color:#B45309}
[data-theme="dark"] .sabe-cmp-req,[data-theme="dark"] .sabe-cmp-field.is-missing label{color:#F0A36B}
.sabe-cmp-param-opts{max-height:180px;overflow:auto;margin-top:6px;display:flex;flex-direction:column;gap:4px}
.sabe-cmp-err{color:#9a2f1c}
[data-theme="dark"] .sabe-cmp-err{color:#F49E8C}
.sabe-wiz[data-dir="back"] .sabe-wiz-pane{animation-name:sabe-wiz-pane-back}
@keyframes sabe-wiz-pane-fwd{
  from{opacity:0;transform:translateX(1.1rem)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes sabe-wiz-pane-back{
  from{opacity:0;transform:translateX(-1.1rem)}
  to{opacity:1;transform:translateX(0)}
}
.sabe-wiz-item{display:inline-flex;align-items:center;box-sizing:border-box;text-align:left;padding:8px 12px;border-radius:10px;
  border:1.5px solid rgba(var(--bink),.18);background:var(--bubble-hi);color:var(--bink-solid);cursor:pointer;font:inherit;
  font-size:calc(13px * var(--sabe-fs,1));font-weight:600;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.sabe-wiz-item:hover:not(:disabled):not(.is-off){border-color:var(--tomate)}
.sabe-wiz-item.sel{background:var(--tomate);border-color:var(--tomate);color:#fff;font-weight:800;
  box-shadow:0 0 0 3px rgba(var(--acc-rgb,20,125,111),.22)}
.sabe-wiz-item:disabled,.sabe-wiz-item.is-off{opacity:.4;cursor:not-allowed;box-shadow:none}
.sabe-wiz-actions button.primary.is-wait{animation:sabe-wiz-cta-pulse .5s ease-in-out infinite}
@keyframes sabe-wiz-cta-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--acc-rgb,20,125,111),.35)}
  50%{transform:scale(1.04);box-shadow:0 0 0 6px rgba(var(--acc-rgb,20,125,111),0)}
}
/* 7 telas: mesma largura de card (não encolhe no nome, não estoura na prévia). */
.msg.sabe:has(.sabe-wiz){width:min(760px,92%);max-width:min(760px,92%)}
.msg.sabe:has(.sabe-wiz) .bubble{flex:1 1 auto;min-width:0}
@media (prefers-reduced-motion:reduce){
  .sabe-wiz-step.now .sabe-wiz-dot,.sabe-wiz-step.glow .sabe-wiz-dot{animation:none}
  .sabe-wiz-pane{animation:none}
  .sabe-wiz-actions button.primary.is-wait{animation:none}
}