/* ═══════════════════════════════════════════════════════════════════
   chat.css — conversational onboarding (/onboard).

   This screen is the app's own kit: base.css tokens, the page layer + header
   (overlay.css), sections / cards / rows / buttons / chips (detail.css), inputs
   and tags (bookingform.css), progress rows (overlay.css). Only the pieces the
   app has no element for live here — the message thread and the composer row —
   and they are drawn from the same tokens, never their own colours.
   ═══════════════════════════════════════════════════════════════════ */
/* The page never scrolls — only the thread does. Every layer is pinned to the visible
   area (chat.js keeps --oc-top/--oc-h in step with the on-screen keyboard), so the
   keyboard squeezes the thread and leaves the header and composer where they are. */
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }
.layer{ top:var(--oc-top, 0); bottom:auto; height:var(--oc-h, 100dvh); }
.oc-thread{ overscroll-behavior:contain; }

.oc-col{ width:100%; max-width:640px; margin:0 auto; }

/* Header: the RelayLeads mark, same lockup as the classic setup next door. */
/* Either side of the mark: Start over (left) and Sign out (right) — quiet text
   buttons, equal width so the logo stays centred. */
.oc-head-side{ width:76px; flex-shrink:0; display:flex; } .oc-head-side.end{ justify-content:flex-end; }
.oc-head-btn{ min-height:44px; padding:0 2px; background:none; border:0; font:inherit; font-size:.8125rem; font-weight:500; color:var(--muted2); cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.oc-head-btn:hover{ color:var(--text); } .oc-head-btn:disabled{ opacity:.45; cursor:default; }
.oc-brand{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.oc-brand-logo{ height:22px; width:auto; display:block; }
.oc-brand-mark{ font-family:"Bebas Neue", Inter, sans-serif; font-size:1.4rem; letter-spacing:.2em; line-height:1; color:var(--text); }
.oc-brand-sub{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); }

/* Thread — fills the page between the header and the composer. */
.oc-thread{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 8px; }
.oc-thread > .oc-col{ display:flex; flex-direction:column; gap:10px; }
.oc-msg{ max-width:86%; padding:11px 14px; border-radius:var(--radius-xl); font-size:.9375rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.oc-msg.relay{ align-self:flex-start; background:var(--card); border:1px solid var(--border); border-bottom-left-radius:var(--radius-badge); }
.oc-msg.me{ align-self:flex-end; background:var(--card2); border:1px solid var(--border); color:var(--text); font-weight:500; border-bottom-right-radius:var(--radius-badge); }
.oc-msg.note{ align-self:center; max-width:100%; padding:2px 0; font-size:.8125rem; color:var(--muted2); text-align:center; }
.oc-msg.note a{ color:var(--text); }
.oc-typing{ align-self:flex-start; display:flex; gap:5px; padding:14px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl); border-bottom-left-radius:var(--radius-badge); }
.oc-typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:ocBlink 1.2s infinite both; }
.oc-typing i:nth-child(2){ animation-delay:.2s; } .oc-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes ocBlink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }
/* Everything new in the thread eases in — a turn should arrive, not appear. A
   question's own text is already on screen when it becomes a bubble (.still). */
@keyframes ocIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.oc-msg, .oc-typing, .oc-thread .sect{ animation:ocIn .32s cubic-bezier(.2,.9,.3,1) both; }
.oc-msg.me{ animation-duration:.22s; }
.oc-msg.still{ animation:none; }
.oc-q .oc-opt{ animation:ocIn .28s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(90ms + var(--i, 0) * 35ms); }
.oc-foot{ animation:ocIn .28s ease both; }
@media (prefers-reduced-motion: reduce){
  .oc-typing i{ animation:none; opacity:.6; }
  .oc-msg, .oc-typing, .oc-thread .sect, .oc-q .oc-opt, .oc-foot, .oc-pane{ animation:none; }
}

/* A multiple-choice question: Relay's bubble holds the choices. Native radios and
   checkboxes wear the brand accent (base.css); rows are full-width tap targets. */
.oc-msg.oc-q{ align-self:stretch; max-width:100%; white-space:normal; padding:14px; }
.oc-q-text{ font-weight:600; }
.oc-q-hint{ font-size:.75rem; color:var(--muted2); margin-top:2px; }
.oc-opts{ display:flex; flex-direction:column; margin-top:8px; }
.oc-opt{ display:flex; align-items:center; gap:12px; min-height:var(--ui-control-height); padding:8px 2px; cursor:pointer; border-top:1px solid var(--border); -webkit-tap-highlight-color:transparent; }
.oc-opt:first-child{ border-top:0; }
.oc-opt input{ flex:none; width:20px; height:20px; margin:0; }
.oc-opt span{ font-size:.9375rem; line-height:1.35; }
.oc-opt small{ display:block; font-size:.75rem; color:var(--muted2); }
.oc-opt input{ accent-color:var(--text); }
/* A list the operator owns: each name is a field (prefilled, retypable), plus their own. */
.oc-opt.edit{ cursor:default; padding:5px 2px; }
.oc-name.af-in{ flex:1; min-width:0; font-size:16px; padding:9px 12px; border-radius:var(--radius); }
.oc-name.af-in:focus{ outline:none; border-color:var(--muted2); }
.oc-name.af-in:disabled{ opacity:.45; text-decoration:line-through; }
.oc-opt.added{ animation:ocIn .22s ease both; }
.oc-opt.added > input[type=checkbox]{ pointer-events:none; }
.oc-add.af-optadd{ margin-top:8px; color:var(--text); min-height:var(--ui-control-height); }
.oc-add.af-optadd:disabled{ opacity:.45; cursor:default; }
/* Info + disclaimer under a question — plain text on the page, outside the card. */
.oc-q-note{ margin-top:2px; padding:0 4px; font-size:.8125rem; line-height:1.5; color:var(--muted2); animation:ocIn .3s ease .45s both; }
.oc-q-note p{ margin:0 0 8px; } .oc-q-note p:last-child{ margin:0; }
.oc-q-note b{ color:var(--text); font-weight:600; }
.oc-q-note .fine{ font-size:.75rem; color:var(--muted); }
.oc-q-note a{ color:var(--text); }
.oc-other.af-in{ margin-top:8px; font-size:16px; resize:none; border-radius:var(--radius); }
.oc-q .l-btn{ margin-top:12px; }
/* The conversation stays neutral: answers, Continue and Send are light-on-dark, not
   brand yellow. The accent is kept for the one commitment — "set it up". */
.oc-q .l-btn.primary{ background:var(--text); border-color:var(--text); color:var(--bg); }
.oc-q .l-btn.primary:hover{ filter:brightness(.92); }

/* Sections inside the thread run edge to edge of the column (the thread supplies the gutter). */
.oc-thread .sect{ padding:8px 0 0; align-self:stretch; }
.oc-thread .row{ align-items:center; }
.oc-thread .row-lbl{ color:var(--text); font-weight:600; flex-shrink:1; }
.oc-thread .pg-row{ cursor:default; }
.oc-link{ display:block; margin:2px 0 4px; font-family:"Bebas Neue", Inter, sans-serif; font-size:1.9rem; letter-spacing:.02em; overflow-wrap:anywhere; text-decoration:none; }
.oc-link .pre{ color:var(--muted); } .oc-link .slug{ color:var(--accent-light); }

/* Composer — pinned under the thread, above the keyboard. */
.oc-foot{ flex-shrink:0; padding:10px 16px max(12px, env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--border); }
.oc-foot .cj-chips{ margin:0 0 10px; }
.oc-foot .cj-chip{ min-height:var(--ui-control-height); font-size:.8125rem; }
.oc-foot .cj-chip:disabled{ opacity:.5; cursor:default; }
.oc-compose{ display:flex; gap:8px; align-items:flex-end; }
.oc-compose .af-in{ font-size:16px; line-height:1.4; resize:none; max-height:132px; min-height:var(--ui-control-height); border-radius:var(--radius); }   /* 16px: no iOS zoom on focus */
.oc-prefix{ display:flex; align-items:center; padding:0 0 0 13px; }
.oc-prefix:focus-within{ border-color:var(--muted2); }   /* one field for every typed turn, so focus (and the phone keyboard) carries from turn to turn */
.oc-prefix span{ color:var(--muted2); white-space:nowrap; }
.oc-prefix input{ flex:1; min-width:0; font:inherit; color:var(--text); background:none; border:0; padding:12px 13px 12px 2px; }
.oc-prefix input:focus{ outline:none; }
.oc-prefix input::placeholder{ color:var(--muted); }
.oc-prefix{ cursor:text; }
.oc-send.layer-icon-btn{ background:var(--text); border-color:var(--text); color:var(--bg); }
.oc-send.layer-icon-btn:hover{ background:var(--text); color:var(--bg); filter:brightness(.92); }
.oc-send.layer-icon-btn:disabled{ background:var(--border); border-color:var(--border); color:var(--muted); cursor:not-allowed; }
.oc-send svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.oc-hint{ font-size:.75rem; color:var(--muted2); margin:6px 2px 0; }
.oc-hint.bad{ color:var(--red); } .oc-hint.ok{ color:var(--green); }

/* Review — a few lines and the way into the form. */
.oc-review .row-val{ font-weight:500; color:var(--muted2); max-width:68%; }
.oc-try.l-btn{ margin-top:12px; }

/* Try-it drawer — the app's panel layer; the form inside reuses the question rows. */
.oc-drawer .layer-card{ position:relative; }
.oc-tabs.cj-chips{ margin:12px 16px 0; flex-shrink:0; }
.oc-pane{ padding-top:4px; animation:ocIn .24s ease both; }
.oc-f{ display:block; padding:0 16px; }
.oc-pad{ padding:0 16px; }
.oc-pane > .bf-hint{ margin-top:14px; }
.oc-f .sect-card.oc-opts{ margin-top:0; padding-top:4px; padding-bottom:4px; }
.oc-qty{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.oc-qty b{ font-size:.9375rem; font-weight:600; } .oc-qty small{ display:block; font-size:.75rem; color:var(--muted2); }
.oc-step{ display:flex; align-items:center; gap:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.oc-step .layer-icon-btn{ font-size:1.1rem; } .oc-step .layer-icon-btn:disabled{ opacity:.4; cursor:default; }
.oc-item{ margin-bottom:8px; } .oc-item .oc-f{ padding:0; } .oc-item .bf-fl{ display:none; }
.oc-item-h{ display:flex; align-items:center; justify-content:space-between; min-height:42px; margin-bottom:6px; font-size:.875rem; }
.oc-asked.cj-chips{ margin:0; } .oc-asked .cj-chip{ cursor:default; font-weight:500; color:var(--muted2); }
.oc-picked{ margin-top:14px; }