:root {
  color-scheme: light;
  --ink:#19242c;
  --muted:#637078;
  --paper:#f1f2f0;
  --white:#fff;
  --blue:#1d527f;
  --blue-dark:#123b5d;
  --line:#ccd2d4;
  --line-dark:#9da6aa;
  --green:#2b7257;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); line-height:1.5; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid rgba(29,82,127,.3); outline-offset:2px; }

.topbar { min-height:62px; padding:0 max(20px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-size:17px; font-weight:750; letter-spacing:-.03em; text-decoration:none; }
.brand span { color:var(--blue); }
.top-actions { display:flex; align-items:center; gap:16px; }
.secure { color:var(--muted); font-size:11px; font-weight:650; }
.secure::before { content:""; display:inline-block; width:6px; height:6px; margin:0 7px 1px 0; background:var(--green); }
.text-button { min-height:42px; border:0; background:transparent; color:var(--blue-dark); font-size:12px; font-weight:700; cursor:pointer; }

main { width:min(980px,calc(100% - 36px)); margin:0 auto; padding:58px 0 90px; }
.chooser { max-width:820px; }
h1 { margin:0; max-width:720px; color:var(--ink); font-size:clamp(34px,6vw,52px); line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.lede { max-width:650px; margin:18px 0 30px; color:var(--muted); font-size:16px; }
.search { height:50px; padding:0 14px; border:1px solid var(--line-dark); background:#fff; display:flex; align-items:center; gap:10px; }
.search svg { width:20px; height:20px; flex:none; stroke:var(--blue); stroke-width:2; }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:15px; }
.shop-list { margin-top:20px; border-top:2px solid var(--ink); }
.shop-card { min-height:102px; padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; }
.shop-card h2 { margin:0 0 5px; font-size:19px; letter-spacing:-.02em; }
.shop-card p { margin:0; color:var(--muted); font-size:13px; }
.shop-card .tags { display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:9px; }
.shop-card .tags span { color:#4b575e; font-size:11px; font-weight:650; }
.shop-card .tags span::before { content:""; display:inline-block; width:4px; height:4px; margin:0 6px 2px 0; background:var(--blue); }
.shop-card a,.primary-link { min-height:42px; padding:0 14px; border:1px solid var(--blue); border-radius:4px; background:var(--blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:12px; font-weight:750; }
.demo-chip { color:#6b541d !important; }
.demo-link { display:inline-block; margin-top:22px; color:var(--blue-dark); font-size:13px; font-weight:700; text-underline-offset:4px; }
.empty { padding:30px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.retry-button { min-height:42px; margin-top:14px; padding:0 14px; border:1px solid var(--line-dark); border-radius:4px; background:#fff; color:var(--blue-dark); font-weight:700; cursor:pointer; }

.request { max-width:820px; }
.request-head { margin-bottom:28px; padding-bottom:22px; border-bottom:2px solid var(--ink); display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.request-head h1 { font-size:clamp(31px,5vw,46px); }
.request-location { margin:8px 0 0; color:var(--muted); font-size:12px; font-weight:650; }
.status { padding:6px 9px; border:1px solid #8eaa9e; border-radius:3px; background:#edf4f0; color:var(--green); font-size:11px; font-weight:800; text-transform:uppercase; white-space:nowrap; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-dark); }
.summary-card { min-height:86px; padding:17px 16px; border-bottom:1px solid var(--line); }
.summary-card:first-child { border-right:1px solid var(--line); }
.summary-card span,.concern>span { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.summary-card strong { color:var(--ink); font-size:15px; }
.concern { padding:18px 16px; border-bottom:1px solid var(--line); }
.concern p { margin:0; color:#3f4b52; }
.conversation { margin-top:32px; border:1px solid var(--line-dark); background:#fff; }
.conversation-head { min-height:62px; padding:0 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.conversation h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.conversation-head a { color:var(--blue-dark); font-size:12px; font-weight:700; }
.thread { min-height:260px; max-height:440px; padding:20px; overflow:auto; display:flex; flex-direction:column; gap:12px; background:#f6f7f5; }
.bubble { max-width:min(78%,520px); padding:11px 13px; border:1px solid var(--line); background:#fff; font-size:14px; line-height:1.45; }
.bubble p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble time { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.bubble.customer { align-self:flex-end; border-color:var(--blue); background:var(--blue); color:#fff; }
.bubble.customer time { color:#d9e7f1; }
.bubble.shop { align-self:flex-start; }
.thread-empty { margin:auto; max-width:310px; color:var(--muted); text-align:center; }
.composer { padding:14px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.composer textarea { width:100%; min-height:50px; max-height:140px; resize:vertical; padding:11px 12px; border:1px solid var(--line-dark); border-radius:3px; color:var(--ink); }
.composer textarea:focus { border-color:var(--blue); outline:0; box-shadow:0 0 0 2px rgba(29,82,127,.12); }
.composer button { min-height:50px; padding:0 20px; border:1px solid var(--blue); border-radius:3px; background:var(--blue); color:#fff; font-weight:750; cursor:pointer; }
.composer button:disabled { opacity:.55; cursor:wait; }
.composer-note { margin:0; padding:0 14px 14px; color:var(--muted); font-size:10px; }
.access-error { max-width:620px; }
.access-error p { color:var(--muted); font-size:16px; }
.primary-link { margin-top:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media(max-width:620px){
  .topbar { min-height:58px; }
  .secure { display:none; }
  main { width:min(100% - 24px,980px); padding:34px 0 70px; }
  h1 { font-size:34px; }
  .shop-card { grid-template-columns:1fr; gap:14px; }
  .shop-card a { width:100%; }
  .request-head { align-items:center; }
  .summary-grid { grid-template-columns:1fr; }
  .summary-card:first-child { border-right:0; }
  .bubble { max-width:88%; }
  .thread { padding:14px; }
  .composer { grid-template-columns:1fr; }
  .composer button { width:100%; }
}