/* Build page: start screen + live screen (agents' panes and live preview). */
.sf-quick { grid-template-columns: minmax(0, 1fr); }
.sf-quick .sf-chatx-hello h1 { transition: opacity .28s ease, transform .28s ease; }
.sf-quick .sf-chatx-hello h1.is-out { opacity: 0; transform: translateY(6px); }
.sf-quick-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, #7c3aed, #f97316); margin-bottom: 1rem; box-shadow: 0 6px 20px rgba(124, 58, 237, .3); }
.sf-quick-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.sf-quick-tier { font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--cx-line); color: var(--cx-muted); background: var(--cx-surface); }
.sf-quick-tier i { margin-right: .15rem; }
.sf-quick-tier.is-simple i { color: #22c55e; }
.sf-quick-tier.is-medium i { color: #3b82f6; }
.sf-quick-tier.is-complex i { color: #f97316; }
.sf-quick-recent { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .8rem; margin-top: 1.5rem; font-size: .82rem; }
.sf-quick-recent small { color: var(--cx-muted); width: 100%; }
.sf-quick-recent-item { color: var(--cx-text); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.sf-quick-recent-item i { font-size: .45rem; color: #a3a3a3; }
.sf-quick-recent-item.is-working i, .sf-quick-recent-item.is-planning i { color: #3b82f6; }
.sf-quick-recent-item.is-done i { color: #22c55e; }
.sf-quick-recent-item.is-failed i { color: #ef4444; }
.sf-quick-error { max-width: 720px; width: 100%; }

/* ---- live screen ---- */
.sf-qb { display: flex; flex-direction: column; gap: .75rem; height: calc(100vh - 92px); min-height: 560px; color: var(--cx-text); }
.sf-qb-head { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.sf-qb-back { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--cx-line); color: var(--cx-text); background: var(--cx-surface); text-decoration: none; }
.sf-qb-title { flex: 1 1 auto; min-width: 0; }
.sf-qb-title h1 { font-size: 1.15rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-qb-title p { margin: 0; font-size: .82rem; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-qb-pill { flex: none; font-size: .75rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; background: rgba(59, 130, 246, .15); color: #3b82f6; }
.sf-qb-pill.is-done { background: rgba(34, 197, 94, .15); color: #16a34a; }
.sf-qb-pill.is-failed { background: rgba(239, 68, 68, .15); color: #dc2626; }
.sf-qb-engine { flex: none; font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; background: rgba(124, 58, 237, .14); color: #7c3aed; }
.sf-qb-engine[hidden] { display: none; }
.sf-qb-cost { flex: none; font-size: .8rem; color: var(--cx-muted); font-variant-numeric: tabular-nums; }

.sf-qb-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .9rem; }
.sf-qb-panes { min-height: 0; display: grid; gap: .7rem; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); }
.sf-qb-panes[data-count="3"], .sf-qb-panes[data-count="4"] { grid-template-columns: 1fr 1fr; }
.sf-qb-panes .is-planner.is-compact { grid-column: 1 / -1; max-height: 92px; }
.sf-qb-panes:has(.is-planner.is-compact) { grid-template-rows: auto; }

.sf-qb-pane { --tier: #a78bfa; display: flex; flex-direction: column; min-height: 0; border-radius: 14px; background: #0d0b16; color: #ddd8ef;
    border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); box-shadow: 0 10px 30px rgba(10, 6, 24, .25); overflow: hidden; }
.sf-qb-pane.tier-simple { --tier: #22c55e; }
.sf-qb-pane.tier-medium { --tier: #3b82f6; }
.sf-qb-pane.tier-complex { --tier: #f97316; }
.sf-qb-pane.is-running { animation: sf-qb-glow 2.2s ease-in-out infinite; }
@keyframes sf-qb-glow { 50% { box-shadow: 0 0 0 1px var(--tier), 0 10px 34px color-mix(in srgb, var(--tier) 30%, transparent); } }
.sf-qb-pane-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .82rem; }
.sf-qb-pane-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sf-qb-state { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.is-running .sf-qb-state { background: var(--tier); box-shadow: 0 0 8px var(--tier); }
.is-done .sf-qb-state { background: #22c55e; }
.is-failed .sf-qb-state { background: #ef4444; }
.is-planner .sf-qb-state { background: #a78bfa; }
.sf-qb-model { flex: none; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 6px; color: var(--tier); border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); }
.sf-qb-meter { margin-left: auto; flex: none; font-size: .72rem; color: #9b93b8; font-variant-numeric: tabular-nums; }
.sf-qb-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .55rem .75rem; font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.sf-qb-line { display: flex; gap: .45rem; padding: .1rem 0; }
.sf-qb-line i { flex: none; opacity: .75; }
.sf-qb-line span { overflow-wrap: anywhere; white-space: pre-wrap; }
.sf-qb-line.is-tool i { color: var(--tier); }
.sf-qb-line.is-text { color: #f1edff; }
.sf-qb-line.is-sys { color: #a59cc7; }
.sf-qb-line.is-done { color: #4ade80; font-weight: 600; }
.sf-qb-line.is-error { color: #f87171; }
.sf-qb-pane-foot { padding: .35rem .75rem; font-size: .72rem; color: #8f88aa; border-top: 1px solid rgba(255, 255, 255, .06); }
.is-planner.is-compact .sf-qb-pane-foot { display: none; }

.sf-qb-preview { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--cx-line); background: #15121f; box-shadow: 0 12px 34px rgba(10, 6, 24, .25); }
.sf-qb-bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; background: #1d1929; color: #cfc8e6; font-size: .78rem; }
.sf-qb-dots { display: flex; gap: .3rem; }
.sf-qb-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3b3550; }
.sf-qb-url { flex: 1 1 auto; min-width: 0; padding: .2rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-qb-open { color: #cfc8e6; }
.sf-qb-admin { border: 0; padding: 0; background: transparent; color: #cfc8e6; line-height: 1; cursor: pointer; }
.sf-qb-admin:hover { color: #fff; }
.sf-qb-admin:disabled { opacity: .5; cursor: wait; }
.sf-qb-live { flex: none; font-weight: 700; color: #f87171; font-size: .72rem; }
.sf-qb-live i { font-size: .45rem; vertical-align: middle; animation: sf-qb-blink 1.4s ease-in-out infinite; }
@keyframes sf-qb-blink { 50% { opacity: .25; } }
.sf-qb-frame { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; }
.sf-qb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-qb-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: #6b6485; background: #faf8ff; font-size: .9rem; }
.sf-qb-wait[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .sf-qb-pane.is-running, .sf-qb-live i { animation: none; } }
@media (max-width: 991.98px) {
    .sf-qb { height: auto; }
    .sf-qb-body { grid-template-columns: 1fr; }
    .sf-qb-panes, .sf-qb-panes[data-count="3"], .sf-qb-panes[data-count="4"] { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .sf-qb-preview { height: 70vh; }
    .sf-qb-head { flex-wrap: wrap; }
}

/* "Minha IA": step-by-step to connect the viber's AI CLI */
.sf-engine-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.sf-engine-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.sf-engine-steps > li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); }
.sf-engine-steps > li > b { display: block; margin-bottom: .25rem; }
.sf-engine-steps p { margin: 0 0 .45rem; font-size: .9rem; color: var(--sf-muted, #6b6485); }
.sf-engine-cmd { margin: .3rem 0; max-width: 620px; }
.sf-engine-ai { height: 100%; border: 1px solid rgba(124, 58, 237, .2); border-radius: 12px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.sf-engine-ai-name { font-weight: 700; }