/* Demonstração ao vivo (demo.js): usada no site (sunbook.app/#demo) e na página /demo. */
.sbd {
  --sbd-verde: #16413F; --sbd-acento: #1F6B66; --sbd-ouro: #F2B544; --sbd-papel: #FFFFFF; --sbd-fundo: #F3F1EA;
  --sbd-tinta: #18252B; --sbd-suave: #5E6A70; --sbd-linha: #E2DDD2; --sbd-mau: #9A3B2E;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--sbd-tinta);
}
.sbd *, .sbd *::before, .sbd *::after { box-sizing: border-box; }
.sbd-lado { background: var(--sbd-papel); border: 1px solid var(--sbd-linha); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sbd-lado h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.55rem; line-height: 1.2; margin: 0; }
.sbd-lado p { margin: 0; color: var(--sbd-suave); line-height: 1.55; }
.sbd-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbd-passos li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.sbd-passos b { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--sbd-ouro); color: var(--sbd-verde); align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.sbd-btn { appearance: none; border: 0; border-radius: 12px; background: var(--sbd-acento); color: #fff; font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; padding: 15px 20px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.sbd-btn:hover { background: var(--sbd-verde); }
.sbd-btn:focus-visible { outline: 3px solid var(--sbd-ouro); outline-offset: 2px; }
.sbd-btn.wa { background: #1FA855; }
.sbd-btn.wa:hover { background: #178A45; }
.sbd-btn.sec { background: transparent; color: var(--sbd-acento); border: 1px solid var(--sbd-linha); }
.sbd-qr { display: grid; grid-template-columns: 172px 1fr; gap: 20px; align-items: center; }
.sbd-qr-caixa { width: 172px; height: 172px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--sbd-linha); }
.sbd-qr-caixa img, .sbd-qr-caixa canvas { width: 150px !important; height: 150px !important; display: block; }
.sbd-codigo { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.5rem; letter-spacing: .22em; font-weight: 600; color: var(--sbd-verde); }
.sbd-mini { font-size: .85rem; color: var(--sbd-suave); }
.sbd-local { display: flex; flex-direction: column; gap: 10px; }
.sbd-local form { display: flex; gap: 8px; }
.sbd-local input { flex: 1; min-width: 0; border: 1px solid var(--sbd-linha); border-radius: 12px; padding: 13px 14px; font: inherit; }
.sbd-local .sbd-sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.sbd-local .sbd-sugs button { border: 1px solid var(--sbd-linha); background: #fff; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--sbd-acento); }

.sbd-painel { background: var(--sbd-verde); border-radius: 18px; padding: 22px; color: #F3F1EA; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 460px; position: relative; overflow: hidden; }
.sbd-painel::after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(242,181,68,.22), transparent); pointer-events: none; }
.sbd-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sbd-topo b { font-size: 1.05rem; }
.sbd-ao-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #C9D8D4; }
.sbd-ao-vivo i { width: 9px; height: 9px; border-radius: 50%; background: #5AD08A; box-shadow: 0 0 0 0 rgba(90,208,138,.6); animation: sbd-pulso 1.8s infinite; }
.sbd-ao-vivo.parado i { background: #8BA39E; animation: none; }
@keyframes sbd-pulso { 0% { box-shadow: 0 0 0 0 rgba(90,208,138,.55); } 70% { box-shadow: 0 0 0 10px rgba(90,208,138,0); } 100% { box-shadow: 0 0 0 0 rgba(90,208,138,0); } }
.sbd-totais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sbd-totais div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.sbd-totais span { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #A9C4BF; }
.sbd-totais strong { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.25rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbd-lista { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sbd-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: #C9D8D4; padding: 24px 12px; border: 1px dashed rgba(255,255,255,.2); border-radius: 14px; }
.sbd-vazio svg { opacity: .8; }
.sbd-entrada { background: var(--sbd-papel); color: var(--sbd-tinta); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; animation: sbd-entra .7s cubic-bezier(.2,.8,.2,1) both; }
.sbd-entrada.nova { box-shadow: 0 0 0 3px var(--sbd-ouro); }
@keyframes sbd-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.sbd-entrada .data { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem; color: var(--sbd-suave); }
.sbd-entrada .valor { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 1.1rem; text-align: right; }
.sbd-entrada .memo { grid-column: 1 / -1; font-weight: 600; line-height: 1.35; }
.sbd-entrada .conta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--sbd-suave); }
.sbd-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: #E3F0ED; color: var(--sbd-acento); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.sbd-chip.ouro { background: #FBEFD3; color: #7A5A12; }
.sbd-prova { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; border-top: 1px dashed var(--sbd-linha); padding-top: 10px; }
.sbd-prova img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sbd-linha); flex: none; }
.sbd-prova audio { height: 32px; max-width: 200px; flex: none; }
.sbd-prova q { font-style: italic; color: var(--sbd-suave); font-size: .88rem; line-height: 1.4; }
.sbd-conversa { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; }
.sbd-conversa div { max-width: 92%; padding: 7px 10px; border-radius: 10px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.sbd-conversa .owner { align-self: flex-end; background: #D3E8E2; color: var(--sbd-tinta); }
.sbd-conversa .assistant { align-self: flex-start; background: rgba(255,255,255,.92); color: var(--sbd-tinta); }
.sbd-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: #A9C4BF; flex-wrap: wrap; }
.sbd-rodape button { background: none; border: 0; color: #F3F1EA; font: inherit; text-decoration: none; border-bottom: 1px solid rgba(243,241,234,.4); cursor: pointer; padding: 2px 0; }
.sbd-erro { color: var(--sbd-mau); font-size: .9rem; }

@media (max-width: 900px) {
  .sbd { grid-template-columns: 1fr; }
  .sbd-painel { min-height: 380px; }
}
@media (max-width: 480px) {
  .sbd-lado, .sbd-painel { padding: 18px; border-radius: 16px; }
  .sbd-qr { grid-template-columns: 1fr; justify-items: start; }
  .sbd-totais strong { font-size: 1.02rem; }
  .sbd-totais div { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sbd-entrada, .sbd-ao-vivo i { animation: none; }
}