@import url("/brand-tokens.css");
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-body); line-height: 1.5; padding: 24px 16px 64px; }
main { max-width: 760px; margin: 0 auto; display: grid; gap: 20px; }
.site-logo { display: block; width: min(230px, 70vw); }
.site-logo img { display: block; width: 100%; height: auto; }
h1, h2 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
h2 { font-size: 1.4rem; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
label { display: grid; gap: 6px; font-weight: 600; }
input, textarea, button { font: inherit; }
input, textarea { padding: 10px; border: 1px solid var(--line); background: var(--page); color: var(--text); border-radius: 8px; width: 100%; }
button, .button-link { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--action); color: var(--action-text); font-weight: 600; cursor: pointer; }
.button-link { display: inline-block; text-decoration: none; }
button:disabled { opacity: 0.6; cursor: default; }
button:focus-visible, .button-link:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .row { grid-template-columns: minmax(0, 1fr); } }
.error { color: var(--error); min-height: 1.5em; }
.thread { display: grid; gap: 10px; }
.bubble { padding: 10px 12px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.host { justify-self: end; background: var(--payment-bubble); }
.bubble.agent { justify-self: start; background: var(--agent-bubble); }
.bubble.system { justify-self: center; font-size: 0.85rem; color: var(--text-muted); background: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--font-mono); font-size: 0.8rem; border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
#turnstile { max-width: 100%; }
@media (max-width: 400px) { body { padding-left: 12px; padding-right: 12px; } .sheet { padding: 14px; } }

/* Links, spacing and small helpers shared by the app pages. */
:root { --link: #2466c4; --success: #1f7a4d; }
@media (prefers-color-scheme: dark) { :root { --link: #8fb3ff; --success: #6fd3a0; } }
a { color: var(--link); text-underline-offset: 2px; }
.sheet p, .order-head p, .footnote { margin: 0; }
.small { font-size: 0.875rem; }
.wide { width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.copy, .button-secondary { background: transparent; color: var(--text); border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.button-secondary { display: inline-block; }
div:has(> input.visually-hidden:focus-visible) > .button-secondary { outline: 2px solid var(--focus); outline-offset: 2px; }
details summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; }
details[open] summary { margin-bottom: 8px; }
main > .error:empty { display: none; }

/* Order page. */
.order-head { display: grid; gap: 6px; }
.status-box { border-left: 4px solid var(--action); gap: 8px; }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.steps span { height: 6px; border-radius: 3px; background: var(--line); }
.steps span.done { background: var(--brand-usdc); }
.steps span.current { background: var(--action); }
.price { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; line-height: 1.05; }
.price .unit, .amount .unit { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.pay-due { display: grid; gap: 10px; }
.copy-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.copy-row > p { min-width: 0; }
.amount { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.address { font-size: 0.95rem; }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--brand-usdc); }
.paid-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.paid-list li:not(.muted) { color: var(--success); font-weight: 600; }
.chip.ok { border-color: var(--success); color: var(--success); }
.chip.warn { border-color: var(--error); color: var(--error); }
.spec { display: grid; gap: 4px; }

/* Public decision log. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.stat strong { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.log-table th, .log-table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.log-table th { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.log-table td.when { white-space: nowrap; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 400px) { .copy-row { flex-wrap: wrap; } .price { font-size: 2rem; } .amount { font-size: 1.5rem; } }

/* Chat: a launcher and a panel in the lower right; full screen on phones. */
.chat-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(23, 26, 56, 0.28); }
.chat-launcher .badge { background: var(--surface); color: var(--action); border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(400px, calc(100vw - 40px)); height: min(620px, calc(100dvh - 40px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(23, 26, 56, 0.3); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-head .who { display: grid; gap: 2px; }
.chat-close { background: transparent; color: var(--text); padding: 4px 8px; font-size: 1.1rem; line-height: 1; }
.chat-body { overflow-y: auto; padding: 14px 16px; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form textarea { resize: none; max-height: 140px; }
.chat-form .error { grid-column: 1 / -1; margin: 0; min-height: 0; }
.chat-form .error:empty { display: none; }
body:has(.chat-launcher) main { padding-bottom: 64px; }
body.chat-lock { overflow: hidden; }
@media (max-width: 560px) {
  .chat-panel { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
  .chat-launcher { right: 16px; bottom: 16px; }
}