/* Payzilla chat, design preview. Mobile first; the review card sits in the flow, and docks to the right on a wide screen. */
.chatwrap{max-width:68rem;margin:0 auto;padding:16px 16px 40px}
.chatgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.chatgrid h1{margin:0;font-size:1.5rem}
.col.wide{max-width:46rem;margin:0 auto}.col.wide h1{margin:0 0 8px}.lead{color:var(--t2);margin:0 0 14px}
.msgs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.m{max-width:100%;padding:12px 14px;border:1px solid var(--ln2);border-radius:var(--r3);background:var(--bg2)}
.m.user{justify-self:end;background:var(--acc-soft);border-color:var(--acc-line);max-width:88%}
.m .who{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t3,var(--t2));margin:0 0 4px}
.m p{margin:0 0 8px;overflow-wrap:anywhere}.m p:last-child{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{min-height:44px;padding:0 16px;border:1px solid var(--ln3);border-radius:999px;background:var(--bg0);color:var(--t1);font:600 .9375rem/1 inherit;cursor:pointer}
.chip:hover{background:var(--acc-soft)}.chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.svc{margin:10px 0 0;padding:12px 14px;border:1px solid var(--ln2);border-radius:var(--r3);background:var(--bg0)}
.svc.ver{border-color:var(--acc-line);background:var(--bg1)}
.svc .top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.svc h3{margin:0;font-size:1.0625rem;color:var(--t1);overflow-wrap:anywhere}.svc .price{white-space:nowrap;font-weight:600;color:var(--t1)}
.svc .tags{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:6px 0}.svc .host{color:var(--t2);font-size:.8125rem;overflow-wrap:anywhere}
.svc .desc{margin:0 0 6px;color:var(--t2)}
.svc .notchecked{margin:0 0 6px;padding:8px 10px;border-left:3px solid var(--ln3);background:var(--bg2);color:var(--t1);font-size:.9375rem}
.svc .mark{margin:0 0 6px;color:var(--t2);font-size:.875rem}.svc .acts{margin:8px 0 0}
.btn.sm{min-height:44px;padding:0 18px}
.result{margin:10px 0 0;padding:10px 12px;border:1px dashed var(--ln3);border-radius:var(--r2)}
.result .rlabel{font-size:.8125rem;color:var(--t2);margin:0 0 4px}.result .rtext{margin:0;color:var(--t1);white-space:pre-wrap;overflow-wrap:anywhere}
.panel{padding:16px;border:1px solid var(--ln2);border-radius:var(--r3);background:var(--bg1)}
.panel h2{margin:0 0 10px;font-size:1.125rem}.panel.live{border-color:var(--acc-line)}
.panel .details{margin:0 0 12px}.panel .repfoot{margin:10px 0 0}
.panel .paybtn{width:100%}.panel .paybtn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.amtbig{font-size:1.375rem;color:var(--t1)}
.wfull{display:block;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;word-break:break-all;color:var(--t1);padding:4px 0}
.composer{display:grid;gap:6px}.composer label{font-weight:600;color:var(--t1)}
.crow{display:flex;gap:10px}.crow input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:1px solid var(--ln3);border-radius:var(--r2);background:var(--bg0);color:var(--t1);font:inherit}
.crow input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.composer .hint{margin:0;color:var(--t2);font-size:.875rem}
.scn{margin:0 0 22px}.scn h2{margin:0 0 8px;font-size:1.0625rem}
.catalog{margin:0 0 18px}.catalog .label{font-weight:600;color:var(--t1);margin:0 0 8px}.catalog .msg{margin:0 0 8px}
.designnote{color:var(--t2)}
@media (min-width:960px){
 .chatgrid{grid-template-columns:minmax(0,1fr) 24rem;grid-template-areas:"h p" "m p" "f p";align-items:start;gap:14px 24px}
 .chatgrid h1{grid-area:h}.msgs{grid-area:m}.panel{grid-area:p;position:sticky;top:12px;align-self:start}.composer{grid-area:f}
 .chatgrid{grid-template-rows:auto auto 1fr}
}
.panel .details{display:block;padding:0;border:0;background:none}
.panel .details dt{margin:10px 0 2px;color:var(--t3,var(--t2));font-size:.8125rem;font-weight:600}
.panel .details dd{margin:0;color:var(--t1)}.panel .details dd small{display:block;color:var(--t2);font-size:.8125rem;margin-top:2px}

/* the one-line notice that the chat is automated (founder, 22 Oct: option A) */
.ainote{margin:0;padding:10px 14px;border-left:3px solid var(--acc-line);background:var(--bg2);color:var(--t1);border-radius:var(--r2)}
@media (min-width:960px){.chatgrid{grid-template-areas:"h p" "n p" "m p" "f p"}.ainote{grid-area:n}}
/* ---- additions of the live page (C1 step 4); everything above this line is the confirmed design file, byte for byte ---- */
[hidden]{display:none!important}
.panel:not(.live){display:none}
@media (min-width:960px){.panel:not(.live){display:block}}
.panel .status{margin:10px 0 0;color:var(--t2);font-size:.9375rem}
.panel .walletpick .chips{margin:0}
.panel .human{margin:10px 0 0;min-height:65px}
.panel .paybtn[aria-disabled="true"]{pointer-events:auto}
.m .num{color:var(--t2);font-weight:400;margin-right:6px}
.m .lead{font-weight:700}
.composer .crow .btn{min-width:88px}
.who-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.look label{min-height:44px}
.brand{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.m p a,.panel .msg a{display:inline-block;padding:13px 0}
.svc .btn:disabled,.svc .linkbtn:disabled{opacity:.5;cursor:not-allowed}
/* the d1 logo at the site header's proportions (site/assets/logo/lockup.svg drawn 30px high): the shared .app-hdr .brand svg rule (36px square) would squeeze the wordmark */
.app-hdr .brand{gap:5px}.app-hdr .brand .brand-mark{width:24px;height:24px}.app-hdr .brand .brand-wm{width:92px;height:25px}