/* HeyMesa — black and white: white canvas, solid black ink, flat grey fills instead of glass,
   bold tight headlines, hairline borders and shadows only on things that float. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #000000;
  --ink-2: #3f3f3f;
  --muted: #6b6b6b;
  --hair: #e6e6e6;
  --fill: #f3f3f3;
  --fill-2: #e8e8e8;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-edge: #e6e6e6;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --lift: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --ok: #05944f;
  --off: #b0661a;
  --radius: 16px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: Seravek, "Nunito Sans", "Gill Sans Nova", Ubuntu, Calibri, "Segoe UI", system-ui, sans-serif;
  --display: var(--sans);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Soft neutral shapes give the glass something to blur. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.backdrop span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; }
.backdrop span:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: -12vw; background: #e4e2dc; }
.backdrop span:nth-child(2) { width: 38vw; height: 38vw; right: -8vw; top: 18vh; background: #dfe3e6; }
.backdrop span:nth-child(3) { width: 40vw; height: 40vw; left: 30vw; bottom: -22vw; background: #e9e6e1; }

/* The glass material */
.glass {
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(28, 28, 30, 0.03);
}

/* Top bar */
.bar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(960px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 7px 7px 20px; border-radius: 999px; z-index: 10;
}
a.wordmark { color: inherit; text-decoration: none; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
.wordmark span { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bar-actions { display: flex; align-items: center; gap: 6px; }
.pill { font-size: 12px; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid var(--hair); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--muted); }
.pill.live::before { background: var(--ok); }
.pill.warn::before { background: var(--off); }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .7); display: grid; place-items: center; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.icon-btn:hover { background: #fff; }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg, .composer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:focus-visible, .chip:focus-visible, .composer button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-thumb { background: rgba(28, 28, 30, .14); border-radius: 3px; }
.dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* Conversation */
.stage { display: flex; justify-content: center; overflow: hidden; }
.chat { width: min(720px, 100%); height: 100%; display: flex; flex-direction: column; padding: 80px 16px 14px; }
.chat-tools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 4px 4px 6px; }
.messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 4px 16px; scrollbar-width: thin; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; animation: rise .28s ease both; }
.msg.bot { align-self: flex-start; border-bottom-left-radius: 8px; }
.msg.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 8px; box-shadow: 0 6px 20px rgba(28,28,30,.16); }
.msg.typing { color: var(--muted); }
.msg.typing::after { content: "…"; animation: blink 1.2s infinite; }
.msg strong { font-weight: 600; }
.msg em { color: var(--muted); font-style: normal; font-size: 13px; }
.intro { text-align: center; margin: 8vh auto 18px; max-width: 460px; animation: rise .4s ease both; }
.intro h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 6vw, 46px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -.015em; }
.intro p { color: var(--ink-2); margin: 0; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 0 12px; }
.chips:empty { display: none; }
.chip { padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); transition: transform .15s ease, background .15s ease; }
.chip:hover { background: var(--glass-strong); color: var(--ink); }
.chip:active { transform: scale(.97); }

.composer { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border-radius: 999px; }
.composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 0; }
.composer input::placeholder { color: var(--muted); }
.composer button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.composer button:active { transform: scale(.94); }
.composer button:disabled { opacity: .35; cursor: default; }
.composer:focus-within { box-shadow: var(--shadow), 0 0 0 4px rgba(28,28,30,.06), inset 0 1px 0 rgba(255,255,255,.95); }
.fineprint { text-align: center; color: var(--muted); font-size: 11.5px; margin: 10px 0 0; }

/* Drawer: what the agent did */
.scrim { position: fixed; inset: 0; background: rgba(28, 28, 30, .12); z-index: 19; }
.drawer {
  position: fixed; top: 14px; right: 14px; bottom: 14px; width: min(400px, calc(100% - 28px));
  border-radius: 28px; padding: 18px 18px 22px; overflow-y: auto; z-index: 20;
  background: var(--glass-strong);
  transform: translateX(calc(100% + 30px)); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.drawer h2 { font-family: var(--display); font-weight: 600; font-size: 26px; margin: 0; }
.drawer h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 20px 0 8px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list li { background: rgba(255, 255, 255, .7); border: 1px solid var(--hair); border-radius: 16px; padding: 10px 12px; font-size: 13.5px; }
.list li.empty { background: transparent; border-style: dashed; color: var(--muted); }
.tool { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.meta { color: var(--muted); font-size: 12px; }
.status-confirmed { color: var(--ok); font-weight: 500; }
.status-cancelled { color: var(--off); font-weight: 500; }
details { margin-top: 6px; }
summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
.line { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.line b { color: var(--ink); font-weight: 500; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ================================================================ app ==== */
[hidden] { display: none !important; }
a { color: inherit; }
.view { position: fixed; inset: 0; overflow-y: auto; scrollbar-width: thin; }
.page { width: min(960px, 100%); margin: 0 auto; padding: 96px 16px 48px; display: flex; flex-direction: column; gap: 22px; }
.page.narrow { width: min(640px, 100%); }
.page-title { font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1.05; margin: 0; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* nav tabs in the bar */
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(28,28,30,.04); }
.tabs a { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; color: var(--ink-2); transition: background .15s ease, color .15s ease; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(28,28,30,.08); }
.tabs svg, .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs a:focus-visible, .btn:focus-visible, .bcard:focus-visible, .avatar:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* avatars */
.avatar { display: grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(145deg, #e9e7e2, #d9dcdf); color: var(--ink-2); font-weight: 600; text-decoration: none; border: 1px solid var(--glass-edge); box-shadow: 0 2px 8px rgba(28,28,30,.08); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 38px; height: 38px; font-size: 13px; }
.avatar.lg { width: 64px; height: 64px; font-size: 21px; }
.avatar.xl { width: 104px; height: 104px; font-size: 32px; }

/* buttons + fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,255,255,.8); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.btn:hover { background: #fff; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 6px 20px rgba(28,28,30,.16); }
.btn.primary:hover { background: #2c2c2e; }
.btn.ghost { background: transparent; }
.btn.danger { color: #a33a2b; }
.btn.wide { width: 100%; padding: 13px 18px; font-size: 15px; }
.link-btn { border: 0; background: none; padding: 4px 2px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13.5px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field input, .field select { font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); padding: 11px 14px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(255,255,255,.78); outline: 0; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus { border-color: rgba(28,28,30,.3); box-shadow: 0 0 0 4px rgba(28,28,30,.06); }
.field input:disabled { color: var(--muted); background: rgba(255,255,255,.4); }
.hint { color: var(--muted); font-weight: 400; font-size: 12px; }
.form-error, .form-msg { margin: 0; font-size: 13.5px; padding: 10px 14px; border-radius: 12px; }
.form-error, .form-msg.error { color: #8f2f22; background: rgba(163, 58, 43, .08); }
.form-msg { color: var(--ok); background: rgba(47, 125, 87, .08); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* sign in panel (opened from the landing) */
.wordmark.big { font-size: 34px; }
.wordmark .logo-mark { width: 1em; height: 1em; align-self: center; flex: none; fill: currentColor; }
.auth-sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; }
.auth-scrim { position: absolute; inset: 0; background: rgba(28, 28, 30, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s ease both; }
.auth-card {
  position: relative; border-radius: 28px; padding: 26px 22px 22px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 16px;
  background: rgba(250, 249, 246, .96); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 #fff; animation: rise .3s cubic-bezier(.2,.8,.2,1) both;
}
.auth-heading { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.05; margin: 0 40px 0 2px; letter-spacing: -.01em; }
.auth-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; display: grid; place-items: center; cursor: pointer; }
.auth-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.auth-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.auth-card form, #codeView, #passwordView { display: flex; flex-direction: column; gap: 14px; }
#codeView[hidden], #passwordView[hidden], .auth-card form[hidden] { display: none; }
/* Google button: white with the multicolour G, per Google's sign-in branding */
.btn.google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; gap: 10px; }
.btn.google:hover { background: #f8f9fa; }
.btn.google svg { width: 18px; height: 18px; flex: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.code-sent { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.code-input { font-size: 26px !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; padding: 12px 10px !important; }
.code-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.link-btn.center { align-self: center; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(28,28,30,.05); }
.seg button { border: 0; background: none; padding: 9px; border-radius: 999px; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 14px; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(28,28,30,.1); }

/* home */
.hello { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hello > div:nth-child(2) { flex: 1; min-width: 180px; }
.hello h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 5vw, 44px); line-height: 1.05; margin: 0; letter-spacing: -.015em; }
.eyebrow { margin: 0 0 2px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 20px; border-radius: 20px; flex-wrap: wrap; }
.nudge p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }
.stats { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; }
.stat { border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.cards .empty { border: 1px dashed rgba(28,28,30,.14); border-radius: 20px; padding: 18px 20px; color: var(--muted); font-size: 14px; grid-column: 1 / -1; }
.bcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; text-decoration: none; color: inherit; transition: transform .15s ease, background .15s ease; }
.bcard:hover { background: var(--glass-strong); transform: translateY(-1px); }
.bcard.cancelled, .bcard.done { opacity: .78; }
.datechip { flex: none; width: 58px; padding: 6px 0; border-radius: 16px; background: #fff; border: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.datechip span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.datechip b { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.05; }
.cancelled .datechip b { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }
.bmain { flex: 1; min-width: 0; }
.bname { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmeta { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ref { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: rgba(28,28,30,.05); color: var(--ink-2); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.confirmed { background: rgba(47,125,87,.1); color: var(--ok); }
.badge.cancelled { background: rgba(154,107,47,.1); color: var(--off); }

/* profile */
.panel { border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.photo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photo-actions { display: flex; align-items: center; gap: 12px; }
.photo-actions label.btn { cursor: pointer; position: relative; }
.photo-actions label.btn:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.photo-actions input[type=file] { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; }

/* drawer: booking detail */
.drawer-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 22px 0 8px; }
.dhead { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.dname { font-family: var(--display); font-size: 30px; line-height: 1.05; }
.dhead .badge { margin-top: 6px; }
.facts { margin: 18px 0 0; display: grid; gap: 1px; background: var(--hair); border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); }
.facts div { background: rgba(255,255,255,.85); padding: 9px 12px; display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13.5px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.confirm-box { margin-top: 16px; padding: 14px; border-radius: 18px; background: rgba(47,125,87,.07); border: 1px solid rgba(47,125,87,.16); }
.confirm-box.cancelled { background: rgba(154,107,47,.07); border-color: rgba(154,107,47,.18); }
.confirm-box.done { background: rgba(28,28,30,.03); border-color: var(--hair); }
.confirm-box h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.confirm-box p { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); }
.sms { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--hair); font-size: 13px; color: var(--ink-2); }
.sms span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: rgba(28,28,30,.14); }
.timeline li { position: relative; padding: 0 0 12px; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: -17px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1.5px solid var(--muted); }
.timeline li.ev-restaurant_confirmed::before { background: var(--ok); border-color: var(--ok); }
.timeline li.ev-cancelled::before { background: var(--off); border-color: var(--off); }
.timeline time { display: block; font-size: 11.5px; color: var(--muted); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* restaurant photos: strip under the agent's message */
.rest-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 4px 8px; margin: -4px -4px 0; scrollbar-width: thin; flex: none; animation: rise .3s ease both; }
.rcard { flex: none; width: 216px; border-radius: 20px; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; }
.rphoto { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; background: #e6e4df; cursor: pointer; overflow: hidden; }
.rphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.rphoto:hover img { transform: scale(1.03); }
.rphoto:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rcount { position: absolute; left: 8px; bottom: 8px; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.82); color: var(--ink-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rname { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmeta { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ractions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }

/* gallery (restaurant panel and booking cover) */
.gallery-wrap { position: relative; }
.gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: 4px 0 6px; }
.gal-nav { position: absolute; top: calc(4px + 37.5%); transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--glass-edge); background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(28,28,30,.12); transition: opacity .15s ease; }
.gal-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gal-nav.prev { left: 8px; }
.gal-nav.next { right: 8px; }
.gal-nav:disabled { opacity: 0; pointer-events: none; }
.gal-nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; background: #e6e4df; }
.gallery figcaption { font-size: 11px; color: var(--muted); padding: 5px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery figcaption a { color: var(--ink-2); }
.cover:empty { display: none; }
.cover { margin-top: 4px; }
.drawer-actions.tight { margin-top: 6px; }

/* sliding strip of restaurant names */
.marquee-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.marquee {
  display: flex; overflow: hidden; padding: 14px 0; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  /* fade the names in and out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: none; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mark { flex: none; padding: 0 28px; white-space: nowrap; color: var(--ink-2); line-height: 1; position: relative; transition: color .2s ease; }
.mark:hover { color: var(--ink); }
.mark::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(28,28,30,.18); transform: translateY(-50%); }
.mark.serif { font-family: var(--serif); font-size: 26px; }
.mark.sans { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.mark.caps { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.mark.italic { font-family: var(--serif); font-style: italic; font-size: 25px; }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Reduced motion: no sliding, just a row you can scroll by hand. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track[aria-hidden] { display: none; }
}

/* ============================================================ landing ==== */
/* Same calm, light look as the app: what Mesa is, a sample chat, the restaurants. */
.landing { position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column; }
.l-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1120px, 100%); margin: 0 auto; padding: 20px max(16px, 3vw); }
.l-bar .wordmark { color: var(--ink); text-decoration: none; }
.l-bar-actions { display: flex; align-items: center; gap: 8px; }
.l-hero { width: min(1120px, 100%); margin: 0 auto; padding: clamp(16px, 5vh, 56px) max(16px, 3vw) 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; flex: 1; }
.l-copy h1 { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; margin: 10px 0 16px; }
.l-lead { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 470px; margin: 0 0 26px; }
.l-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.l-chat { border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.l-chat .msg { max-width: 88%; font-size: 14.5px; animation: none; }
.l-marquee { width: min(1120px, 100%); margin: 0 auto; padding: 8px max(16px, 3vw) 0; }
.l-footer { width: min(1120px, 100%); margin: 0 auto; padding: 22px max(16px, 3vw) 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.l-footer p { margin: 0; max-width: 620px; line-height: 1.5; }
.l-footer nav { display: flex; gap: 18px; }
.l-footer a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.l-footer a:hover { color: var(--ink); }
.l-footer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.consent { margin: -4px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.consent a { color: var(--ink-2); }
@keyframes fade { from { opacity: 0; } }

@media (max-width: 860px) {
  .l-hero { grid-template-columns: 1fr; padding-top: 8px; }
}
/* Phone: an app-like first screen. Title, short pitch and the sample chat fit above the
   fold; the main action stays pinned to the bottom (thumb reach), and "Sign in" lives only
   in the top bar so it isn't shown twice. Safe-area insets keep clear of the notch and
   the iOS home bar. */
@media (max-width: 600px) {
  .landing { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .l-bar { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .l-bar .btn { min-height: 40px; padding: 8px 16px; }
  .l-hero { gap: 20px; padding: 4px 16px 16px; flex: none; }
  .l-copy .eyebrow { font-size: 11px; }
  .l-copy h1 { font-size: 38px; margin: 6px 0 10px; }
  .l-lead { font-size: 15px; line-height: 1.5; margin: 0; }
  .l-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 70%, rgba(255, 255, 255, 0));
  }
  .l-cta .btn { flex: 1 1 100%; min-height: 50px; font-size: 16px; }
  .l-cta .btn.ghost { display: none; }
  .l-chat { padding: 12px; border-radius: 22px; gap: 8px; }
  .l-chat .msg { max-width: 94%; font-size: 13.5px; line-height: 1.45; padding: 10px 13px; }
  .l-marquee { padding-top: 0; }
  .l-footer { padding-top: 16px; flex-direction: column; align-items: flex-start; }
}

/* toast */
.toast { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-radius: 999px; background: var(--glass-strong); font-size: 14px; max-width: calc(100% - 32px); animation: rise .25s ease both; }


@media (max-width: 600px) {
  .bar { top: 10px; padding-left: 16px; width: calc(100% - 24px); }
  .tabs a { padding: 8px 11px; }
  .tabs a span { display: none; }
  .pill { max-width: 120px; }
  .chat { padding: 70px 12px 12px; }
  .page { padding: 80px 16px 40px; gap: 18px; }
  .msg { max-width: 90%; }
  .intro { margin-top: 4vh; }
  .hello .btn { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat.wide { grid-column: 1 / -1; }
  .grid2 { grid-template-columns: 1fr; }
  .bcard { gap: 12px; padding: 12px; }
  .bside .ref { display: none; }
  .facts div { grid-template-columns: 92px 1fr; }
  .drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 88vh; border-radius: 26px; transform: translateY(calc(100% + 30px)); }
}

/* Shine: the brand name and the landing headline carry a soft light sweep across the ink.
   The text is painted by a clipped gradient, so the SVG logo keeps its own solid colour. */
.wordmark, .l-copy h1 {
  background: linear-gradient(110deg, var(--ink) 0%, var(--ink) 40%, #8d8d93 46%, #f2f2f4 50%, #8d8d93 54%, var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mesa-shine 7s ease-in-out 1s infinite;
}
.wordmark .logo-mark { color: var(--ink); }
@keyframes mesa-shine {
  0% { background-position: 100% 0; }
  35%, 100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark, .l-copy h1 { animation: none; }
}

/* ============================================ black and white (v3) ==== */
/* Flat and confident, in the spirit of Uber: no glass or blur, solid black actions,
   grey fills for secondary surfaces, hairlines for structure, shadow only when floating.
   These rules sit last on purpose and override the softer glass look above. */
.backdrop { display: none; }
.glass { background: #fff; border: 1px solid var(--hair); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* type: heavier, tighter */
.wordmark { letter-spacing: -.03em; }
.l-copy h1 { font-weight: 800; font-size: clamp(40px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.045em; margin: 14px 0 20px; }
.intro h1, .hello h1, .page-title, .auth-heading, .drawer h2, .dname { font-weight: 800; letter-spacing: -.035em; }
.eyebrow, .section-title, .drawer h3, .drawer-sub { color: var(--ink); font-weight: 700; letter-spacing: .02em; text-transform: none; font-size: 14px; }
.l-copy .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--fill); }
.l-lead { color: var(--ink-2); font-size: 18px; line-height: 1.55; max-width: 500px; margin-bottom: 32px; }

/* buttons: black primary, grey secondary, all pill-shaped and a touch taller */
.btn { border: 0; background: var(--fill); color: var(--ink); font-weight: 600; padding: 12px 20px; transition: background .15s ease, transform .15s ease, opacity .15s ease; }
.btn:hover { background: var(--fill-2); }
.btn.primary { background: var(--ink); color: #fff; box-shadow: none; }
.btn.primary:hover { background: #333; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--fill); }
.l-cta .btn { padding: 15px 26px; font-size: 16px; }
.btn.google { background: #fff; box-shadow: inset 0 0 0 1px #dadce0; }
.link-btn { color: var(--ink); font-weight: 500; }

/* fields: grey well that turns white with a black edge on focus */
.field { color: var(--ink); font-weight: 600; }
.field input, .field select { background: var(--fill); border: 2px solid transparent; border-radius: 10px; padding: 12px 14px; }
.field input:focus, .field select:focus { background: #fff; border-color: var(--ink); box-shadow: none; }
.field input:disabled { background: var(--fill); color: var(--muted); }

/* landing */
.l-hero { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 860px) { .l-hero { grid-template-columns: 1fr; } }
.l-hero { padding-top: clamp(24px, 8vh, 88px); padding-bottom: clamp(32px, 7vh, 72px); }
.l-chat { background: var(--fill); border: 0; border-radius: 24px; padding: 22px; gap: 12px; }
.l-chat .msg.bot { background: #fff; border: 0; box-shadow: var(--shadow); }
.msg.me { background: var(--ink); box-shadow: none; }
.msg.bot { border-radius: 18px; border-bottom-left-radius: 6px; }
.msg.me { border-radius: 18px; border-bottom-right-radius: 6px; }
.marquee { background: none; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 22px 0; }
.mark { color: var(--ink); }
.mark::after { background: var(--ink); opacity: .25; }
/* black footer band, full width even though the content is centred */
.l-footer { margin-top: 48px; color: #a6a6a6; border-image: linear-gradient(#000, #000) fill 0 / / 0 100vmax; padding-top: 36px; padding-bottom: 40px; }
.l-footer a { color: #fff; }
.l-footer a:hover { color: #fff; text-decoration: underline; }
.l-footer a:focus-visible { outline-color: #fff; }

/* sign in sheet */
.auth-scrim { background: rgba(0, 0, 0, .5); backdrop-filter: none; -webkit-backdrop-filter: none; }
.auth-card { background: #fff; border: 0; border-radius: 20px; box-shadow: var(--lift); padding: 28px 24px 24px; }
.auth-close { border: 0; background: var(--fill); }
.seg { background: var(--fill); }
.seg button.on { background: var(--ink); color: #fff; box-shadow: none; }

/* app bar: full width, flat, hairline under it */
.bar { top: 0; left: 0; transform: none; width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid var(--hair); padding: 10px max(16px, calc((100% - 960px) / 2)); }
.tabs { background: var(--fill); }
.tabs a { color: var(--ink); font-weight: 600; }
.tabs a.on { background: var(--ink); color: #fff; box-shadow: none; }
.avatar { background: var(--fill-2); color: var(--ink); border: 0; box-shadow: none; }
.icon-btn { border: 0; background: var(--fill); }
.icon-btn:hover { background: var(--fill-2); }
.pill { background: var(--fill); border: 0; color: var(--ink); font-weight: 500; }

/* home */
.nudge { background: var(--fill); border: 0; border-radius: 16px; }
.nudge .btn { background: #fff; }
.nudge .btn:hover { background: var(--fill-2); }
.section-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.stat { background: var(--fill); border: 0; border-radius: 16px; padding: 18px 20px; }
.stat b { font-weight: 800; letter-spacing: -.03em; }
.stat span { color: var(--ink-2); }
.bcard { border-radius: 16px; }
.bcard:hover { background: var(--fill); transform: none; }
.datechip { background: var(--ink); color: #fff; border: 0; border-radius: 12px; }
.datechip span { color: #bdbdbd; }
.datechip b { font-weight: 800; }
.cancelled .datechip { background: var(--fill-2); color: var(--muted); }
.cards .empty { border: 1px dashed #cfcfcf; border-radius: 16px; }
.badge { background: var(--fill); color: var(--ink); font-weight: 600; }
.badge.confirmed { background: #e6f4ec; color: var(--ok); }
.badge.cancelled { background: #f8eee3; color: var(--off); }

/* chat */
.composer { background: var(--fill); border: 2px solid transparent; }
.composer:focus-within { background: #fff; border-color: var(--ink); box-shadow: none; }
.chip { background: #fff; border: 1px solid var(--hair); color: var(--ink); font-weight: 500; }
.chip:hover { background: var(--fill); }
.rcard { border-radius: 16px; }
.rphoto, .gallery img { background: var(--fill); }

/* profile, drawer, toast */
.panel { border-radius: 20px; }
.scrim { background: rgba(0, 0, 0, .35); }
.drawer { background: #fff; border: 0; border-radius: 20px; box-shadow: var(--lift); }
.list li { background: var(--fill); border: 0; border-radius: 12px; }
.facts { border-radius: 12px; }
.facts div { background: #fff; }
.sms { background: var(--fill); border: 0; }
.toast { background: var(--ink); color: #fff; border: 0; box-shadow: var(--lift); }

@media (max-width: 600px) {
  .l-copy h1 { font-size: 40px; }
  .l-lead { font-size: 15.5px; }
  .l-chat { padding: 14px; border-radius: 20px; }
  .bar { padding: 8px 12px; width: 100%; top: 0; }
  .drawer { border-radius: 20px 20px 0 0; left: 0; right: 0; bottom: 0; }
}

/* ============================================================ discover ==== */
/* Home: best-rated restaurants with a guests/date/time bar, Uber-style cards. */
.discover { display: flex; flex-direction: column; gap: 14px; }
.disc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.disc-title { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
.chip.near { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chip.near svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip.near[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.near:disabled { opacity: .5; cursor: progress; }

/* the search bar: one grey pill split into four fields */
.findbar { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.2fr; background: var(--fill); border-radius: 16px; padding: 4px; gap: 4px; }
.findbar label { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 12px; min-width: 0; cursor: pointer; transition: background .15s ease; }
.findbar label:hover { background: var(--fill-2); }
.findbar label:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.findbar span { font-size: 12px; font-weight: 700; color: var(--ink); }
.findbar select, .findbar input { font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 0; outline: 0; padding: 0; width: 100%; min-width: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.findbar input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

/* cards */
.disc-grid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px 18px; }
.disc-grid .empty { grid-column: 1 / -1; border: 1px dashed #cfcfcf; border-radius: 16px; padding: 18px 20px; color: var(--muted); font-size: 14px; }
.dcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dphoto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--fill); cursor: pointer; }
.dphoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.dphoto:hover img { transform: scale(1.03); }
.dphoto:focus-visible, .dname-sm:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dtop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dname-sm { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.drating { flex: none; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.star { color: var(--ink); }
.dmeta { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.dbook { flex: none; }
/* loading placeholders */
.dcard.skeleton .dphoto { cursor: default; animation: pulse 1.2s ease-in-out infinite; }
.dcard.skeleton i { display: block; height: 12px; border-radius: 6px; background: var(--fill); margin-top: 6px; width: 70%; animation: pulse 1.2s ease-in-out infinite; }
.dcard.skeleton i + i { width: 45%; }
@keyframes pulse { 50% { opacity: .5; } }

/* restaurant panel: rating, review summary, reviews and a Book bar */
.rp-head { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rp-rating { font-weight: 700; font-size: 17px; }
.rp-about { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.rp-say { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--fill); }
.rp-say .drawer-sub { margin: 0 0 6px; }
.rp-say-text { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; }
.reviews { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.review { padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.review:last-child { border-bottom: 0; padding-bottom: 0; }
.rv-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.rv-stars { color: var(--ink); letter-spacing: 1px; font-size: 13px; }
.rv-stars span { color: #cfcfcf; }
.rv-who { font-weight: 600; }
.rv-who a { color: var(--ink); text-decoration: none; }
.rv-who a:hover { text-decoration: underline; }
/* long reviews stay to five lines */
.rv-text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.rp-book { position: sticky; bottom: -22px; margin: 20px -18px -22px; padding: 14px 18px 18px; background: linear-gradient(to top, #fff 75%, rgba(255, 255, 255, 0)); }

@media (max-width: 600px) {
  .disc-title { font-size: 24px; }
  .findbar { grid-template-columns: 1fr 1fr; }
  .disc-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .dname-sm { font-size: 14.5px; }
  .drating { font-size: 13px; }
  .dmeta { font-size: 12.5px; }
  .dfoot { flex-direction: column; align-items: stretch; gap: 6px; }
  .dbook { width: 100%; }
  .rp-book { bottom: -22px; }
}
@media (max-width: 360px) {
  .disc-grid { grid-template-columns: 1fr; }
}
.discover { scroll-margin-top: 80px; }

/* ======================================================= categories ==== */
/* Home: one scrollable row of food categories above the list. */
.cat-row { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.cat-row::-webkit-scrollbar { display: none; }
.chip.cat { flex: none; white-space: nowrap; scroll-snap-align: start; }
.chip.cat[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.disc-more { align-self: center; min-width: 200px; margin-top: 6px; }

/* Chat: the quick line (food, city, day, time, guests) under the intro or the quick replies. */
.quickline { flex-basis: 100%; display: grid; grid-template-columns: 1.4fr 1fr 1.1fr .8fr 1fr auto; gap: 4px; align-items: stretch; background: var(--fill); border-radius: 16px; padding: 4px; max-width: 760px; margin: 0 auto; }
.quickline label { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; border-radius: 12px; min-width: 0; cursor: pointer; transition: background .15s ease; }
.quickline label:hover { background: var(--fill-2); }
.quickline label:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.quickline span { font-size: 11.5px; font-weight: 700; color: var(--ink); text-align: left; }
.quickline select { font: inherit; font-size: 14.5px; color: var(--ink); background: transparent; border: 0; outline: 0; padding: 0; width: 100%; min-width: 0; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.quickline .btn { align-self: center; margin: 0 4px; white-space: nowrap; }
.chip-ql { font-weight: 600; }
@media (max-width: 760px) {
  .quickline { grid-template-columns: 1fr 1fr; }
  .quickline .ql-food { grid-column: 1 / -1; }
  .quickline .btn { grid-column: 1 / -1; margin: 4px; width: calc(100% - 8px); }
}

/* ---- hand-off: finish the booking on the restaurant's own page ---- */
.handoff { align-self: flex-start; max-width: min(440px, 92%); background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: var(--shadow); animation: rise .3s ease both; }
.handoff .ho-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.handoff .ho-head { display: grid; gap: 2px; }
.handoff .ho-head b { font-size: 17px; }
.handoff .ho-head span { color: #545454; font-size: 14px; }
.handoff .ho-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.handoff .ho-note { margin: 0; font-size: 13px; line-height: 1.4; background: var(--fill); border-radius: 10px; padding: 8px 10px; }
.handoff .ho-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.handoff .ho-saved { font-weight: 600; font-size: 14px; }

/* ===================================================== landing demo ==== */
/* The scripted chat (public/app.js, demo): fixed height so the page never jumps; new lines
   push older ones up and out of view. */
.l-chat.demo { padding: 0; gap: 0; height: 460px; overflow: hidden; display: flex; flex-direction: column; }
.demo-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.demo-avatar { width: 28px; height: 28px; border-radius: 9px; background: var(--ink); position: relative; flex: none; }
.demo-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--fill); }
.demo-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: #fff; padding: 3px 9px; border-radius: 999px; }
.demo-feed { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; transition: opacity .45s ease; }
.demo-feed > :first-child { margin-top: auto; } /* lines start at the bottom, like a real chat */
.demo-feed.fading { opacity: 0; }
.demo-feed .msg { flex: none; }
.demo-done { box-shadow: inset 0 0 0 1.5px var(--ok) !important; }
.demo-done strong { color: var(--ok); }

/* typing dots */
.demo-typing { padding: 12px 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* the phone call card: ringing (pulse), live (voice wave + timer), then ok / warn */
.demo-call { flex: none; align-self: center; width: min(100%, 330px); display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--ink); color: #fff; animation: rise .28s ease both; transition: background .3s ease, color .3s ease; }
.dc-icon { width: 36px; height: 36px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; flex: none; position: relative; transition: background .3s ease; }
.dc-icon svg { width: 18px; height: 18px; fill: currentColor; }
.ringing .dc-icon { background: var(--ok); }
.ringing .dc-icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(5, 148, 79, .6); animation: ring 1.1s ease-out infinite; }
.ringing .dc-icon svg { animation: wobble .5s ease-in-out infinite; }
@keyframes ring { to { box-shadow: 0 0 0 12px rgba(5, 148, 79, 0); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.dc-text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13.5px; line-height: 1.3; }
.dc-text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sub { color: #b8b8b8; font-size: 12.5px; min-height: 1.3em; font-variant-numeric: tabular-nums; }
.dc-wave { display: none; align-items: center; gap: 3px; height: 22px; }
.live .dc-wave { display: flex; }
.live .dc-icon { background: var(--ok); }
.dc-wave i { width: 3px; height: 100%; border-radius: 2px; background: #fff; animation: wave .8s ease-in-out infinite; transform-origin: center; }
.dc-wave i:nth-child(2) { animation-delay: .1s; }
.dc-wave i:nth-child(3) { animation-delay: .25s; }
.dc-wave i:nth-child(4) { animation-delay: .4s; }
.dc-wave i:nth-child(5) { animation-delay: .15s; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.demo-call.ok, .demo-call.warn { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.demo-call.ok .dc-icon { background: var(--ok); color: #fff; }
.demo-call.warn .dc-icon { background: var(--off); color: #fff; }
.demo-call.ok .dc-sub { color: var(--ok); font-weight: 600; }
.demo-call.warn .dc-sub { color: var(--off); font-weight: 600; }

.fine-short { display: none; }

/* Phone: the whole landing fits one screen, no scrolling. Title, short pitch, the demo filling
   the space left, then the main button and the legal line. */
@media (max-width: 600px) {
  .landing { position: fixed; inset: 0; height: 100dvh; overflow: hidden; padding-bottom: 0; }
  .l-bar { padding: calc(8px + env(safe-area-inset-top)) 16px 6px; flex: none; }
  .l-bar .wordmark { font-size: 22px; }
  .l-bar .btn { min-height: 36px; padding: 7px 14px; font-size: 14px; }
  .l-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }
  .l-copy { display: contents; }
  .l-copy .eyebrow { display: none; }
  .l-copy h1 { font-size: clamp(28px, 8.4vw, 34px); line-height: 1.04; margin: 0; flex: none; }
  .l-lead { font-size: 14.5px; line-height: 1.42; margin: 0; flex: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .l-chat.demo { order: 4; flex: 1; min-height: 180px; height: auto; border-radius: 20px; }
  .demo-head { padding: 9px 14px; font-size: 13px; }
  .demo-avatar { width: 22px; height: 22px; border-radius: 7px; }
  .demo-feed { padding: 10px 12px 12px; gap: 8px; }
  .demo-feed .msg { font-size: 13px; line-height: 1.4; padding: 8px 12px; max-width: 92%; }
  .demo-call { padding: 8px 12px 8px 8px; gap: 10px; }
  .dc-icon { width: 30px; height: 30px; }
  .l-cta { order: 5; position: static; flex: none; display: flex; width: 100%; padding: 2px 0 0; background: none; }
  .l-cta .btn { min-height: 48px; padding: 12px 20px; }
  .l-marquee { display: none; }
  .l-footer { flex: none; margin: 0; border-image: none; background: none; color: var(--muted); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); flex-direction: row; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 11px; }
  .l-footer .fine-long { display: none; }
  .l-footer .fine-short { display: block; max-width: none; }
  .l-footer nav { gap: 12px; }
  .l-footer a, .l-footer a:hover { color: var(--ink-2); font-size: 11px; }
}
/* very short screens (iPhone SE, landscape): drop the pitch so the demo keeps its room */
@media (max-width: 600px) and (max-height: 620px) {
  .l-lead { display: none; }
}

/* ======================================================= chat cards ==== */
/* Under the agent's reply: photo, stars and review count, area and price, then one or two lines
   of what people say (AI summary of Google reviews). */
.rcard { width: 248px; }
.rstars { display: flex; align-items: center; gap: 5px; font-size: 12.5px; margin-top: 2px; }
.rstars b { font-weight: 700; }
.rstars span:last-child { color: var(--muted); }
.rstars .rv-stars { font-size: 12px; letter-spacing: 0; }
.rsum { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rsum.loading { color: var(--muted); font-style: italic; }
.rcard .ractions { margin-top: auto; padding-top: 10px; }
.rcard .rbody { flex: 1; }

/* "Trust me": the agent picks somewhere new */
.quickline .btn.trust { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.quickline .btn.trust span { display: inline-block; margin-right: 2px; }
.quickline .btn.trust:hover { background: var(--fill); }
@media (min-width: 761px) { .quickline { grid-template-columns: 1.4fr 1fr 1.1fr .8fr 1fr auto auto; max-width: 900px; } }
@media (max-width: 760px) { .quickline .btn.trust { grid-column: 1 / -1; } }