/* The example conversation with mr-bill inside a demo (chat.js). It sits at
   z-index 55: over a demo's bars and tab bars (keep those below 55), under
   its sheets, drawers and scrims (keep those at 60 and up). Neutral
   ink and white so it sits on any demo's brand; the demo's own accent shows
   through --mb-accent when the demo sets it. */
.mb-chat { --mb-accent: #2563eb; --mb-ink: #0f172a; --mb-ink-2: #475569; --mb-line: rgba(15, 23, 42, .12); position: fixed; right: 16px; bottom: var(--mb-bottom, 16px); z-index: 55; font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--mb-ink); }
.mb-launch { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; background: var(--mb-ink); color: #fff; font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 23, 42, .28), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.mb-launch img { width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; }
.mb-launch em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #e2e8f0; }
.mb-launch:hover { background: #1e293b; }
.mb-launch:focus-visible, .mb-chip:focus-visible, .mb-send:focus-visible, .mb-close:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 2px; }
.mb-chat.open .mb-launch { display: none; }
.mb-panel { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(500px, calc(100dvh - var(--mb-bottom, 16px) - 24px)); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 0 0 1px var(--mb-line); overflow: hidden; }
.mb-panel[hidden] { display: none; }
.mb-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--mb-line); }
.mb-head img { width: 36px; height: 36px; border-radius: 50%; background: #e2e8f0; flex: none; }
.mb-head div { display: grid; min-width: 0; flex: 1; }
.mb-head b { font-size: 15px; }
.mb-head span { font-size: 12px; color: var(--mb-ink-2); }
.mb-close { width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; font-size: 24px; line-height: 1; color: var(--mb-ink-2); cursor: pointer; flex: none; }
.mb-close:hover { background: #f1f5f9; }
.mb-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; overscroll-behavior: contain; }
.mb-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.mb-msg img { width: 24px; height: 24px; border-radius: 50%; flex: none; background: #e2e8f0; }
.mb-b { padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--mb-line); }
.mb-you { align-self: flex-end; }
.mb-you .mb-b { background: var(--mb-ink); color: #fff; box-shadow: none; border-bottom-right-radius: 4px; }
.mb-bill .mb-b { border-bottom-left-radius: 4px; }
.mb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--mb-ink-2); }
.mb-steps li { display: flex; gap: 6px; animation: mb-in .25s ease-out; }
.mb-steps li::before { content: "✓"; color: #16a34a; font-weight: 700; }
.mb-ok { color: #16a34a; font-weight: 700; }
.mb-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 600; color: var(--mb-ink); text-decoration: underline; text-underline-offset: 3px; }
.mb-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.mb-dots i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: mb-dot 1s infinite ease-in-out; }
.mb-dots i:nth-child(2) { animation-delay: .15s; }
.mb-dots i:nth-child(3) { animation-delay: .3s; }
.mb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--mb-line); }
.mb-chip { min-height: 34px; padding: 5px 11px; border: 0; border-radius: 999px; background: #eef2ff; color: #1e3a8a; font: 500 13px/1.25 inherit; font-family: inherit; text-align: left; cursor: pointer; }
.mb-chip:hover { background: #e0e7ff; }
.mb-chip.done { background: #f1f5f9; color: #64748b; }
.mb-chip.done::before { content: "✓ "; color: #16a34a; }
.mb-busy .mb-chip, .busy .mb-chip { opacity: .55; pointer-events: none; }
.mb-form { display: flex; gap: 8px; padding: 8px 12px 12px; }
.mb-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--mb-line); border-radius: 12px; font: 400 15px/1 inherit; font-family: inherit; color: var(--mb-ink); background: #fff; }
.mb-input:focus { outline: 2px solid var(--mb-accent); outline-offset: -1px; }
.mb-send { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--mb-ink); color: #fff; font: 700 18px/1 inherit; cursor: pointer; flex: none; }
/* what a scenario changed, pulsed in the demo */
.mb-flash { animation: mb-flash 2.2s ease-out; }
@keyframes mb-flash { 0%, 40% { background-color: #fef3a0; } }
@keyframes mb-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes mb-in { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 600px) {
  .mb-chat { right: 12px; left: auto; }
  .mb-chat.open { left: 0; right: 0; bottom: 0; }
  .mb-panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: min(78dvh, 600px); border-radius: 16px 16px 0 0; }
  /* on a phone the button is the avatar alone, so it covers less of the app */
  .mb-launch em, .mb-launch span { display: none; }
  .mb-launch { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .mb-launch img { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-flash, .mb-steps li, .mb-dots i { animation: none; }
  .mb-flash { box-shadow: 0 0 0 3px rgba(37, 99, 235, .55); }
}
/* "Running on its own" feed (activity) */
.mb-feed { font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; }
.mb-feed-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mb-feed-h b { font-size: 13px; font-weight: 650; }
.mb-feed-h em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #64748b; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; }
.mb-live { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: mb-live 2s infinite; }
.mb-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mb-feed-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 10px; background: #f8fafc; }
.mb-feed-list li.mb-new { animation: mb-in .35s ease-out, mb-new 2.4s ease-out; }
.mb-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e0f2fe; color: #0369a1; font-size: 12px; font-weight: 700; }
.mb-txt { min-width: 0; }
.mb-feed-list time { font-size: 11px; color: #94a3b8; white-space: nowrap; padding-top: 2px; }
@keyframes mb-live { 70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@keyframes mb-new { 0%, 40% { background: #fef9c3; } }
@media (prefers-reduced-motion: reduce) { .mb-live, .mb-feed-list li.mb-new { animation: none; } }
/* dock: on a wide screen the open panel takes a column of its own and the
   page narrows beside it (fixed bars of the page stay full width) */
@media (min-width: 1100px) {
  html.mb-docked { padding-right: 412px; }
  /* docked, the panel is the column: full height, header at the top, the
     conversation, the input at the bottom */
  html.mb-docked .mb-chat.open .mb-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 412px; height: auto; border-radius: 0; box-shadow: -1px 0 0 var(--mb-line), -16px 0 40px rgba(15, 23, 42, .08); }
}