/* ─────────────────────────────────────────────────────────────
   עונים לי בוואטסאפ — the dashboard (/bot/app/): the shell, the gates, home, the test chat and the room skeleton.
   Loads after family.css and ui.css; the rooms' own files load after it (app-settings.css: «מה הבוט יודע» and
   «זמינות ותורים»; app-rooms.css: צ׳אטים, תורים, מסלול, חשבון and the transcript). Everything is scoped to .page-app.

   The shell contract (for the room files)
   - .app > header.appbar + .desk + footer.appfoot. In .desk: nav#roomnav (onimli's key bar: a centred strip of keys
     sticky under the app bar from 1100px, a tab bar fixed to the bottom below that) and main#main.rooms.
   - Each room is centred at its own reading width: --room-w (1180px), narrower for settings and the account.
   - A room is a direct child of main: header.room__head (h2.room__title, p.room__lead), then its own content.
     Cards are .card (sheet, 2px ink, leaf corners, card shadow); never a card inside a card.
   - Nothing in the shell clips overflow, so a room's sticky save bar works; --app-bottom-bar is the phone tab bar's
     height (0 on a wide screen): anything sticky at the bottom sits on top of it.
   ───────────────────────────────────────────────────────────── */

/* ---------- 1. the shell ---------- */
:root { --appbar-h: 66px; --roombar-h: 0px; }
html { scroll-padding-top: calc(var(--appbar-h) + var(--roombar-h) + 14px); }
.page-app { --app-bottom-bar: 0px; --desk: 1240px; }
.page-app .app { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }

/* the top bar: the brand, whose bot this is, its state, and the way to try it */
.page-app .appbar { position: sticky; z-index: 40; top: 0; background: var(--page); border-bottom: 1px solid var(--hair); }
.page-app .appbar__in { display: flex; width: min(100% - 32px, var(--desk)); min-height: 66px; align-items: center; gap: 10px 16px; margin-inline: auto; padding-block: 10px; }
.page-app .appbar__brand { flex: none; gap: 9px; }
.page-app .appbar__brand img { width: 36px; height: 36px; }
.page-app .appbar__brand .brand__name { font-size: 22px; }
.page-app .appbar__brand .brand__channel { font-size: 13px; }
.page-app .appbar__title { min-width: 0; flex: 1 1 auto; padding-inline-start: 16px; overflow: hidden; color: var(--ink-2); border-inline-start: 1px solid var(--hair); font: 17px/1.3 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; }
.page-app .appbar__pill, .page-app .appbar__try { flex: none; }
.page-app .appbar__try-short { display: none; }
/* on home the state line says whether the bot answers, so the bar doesn't say it again */
.page-app:has(#room-home:not([hidden])) .appbar__pill { display: none; }
/* before the dashboard (the gates) the bar is the brand alone; the page's h1 stays for screen readers */
.page-app .app:has(#roomnav[hidden]) .appbar__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 699.98px) {
  /* a phone: the bar scrolls away with the page (the rooms stay one tap away in the bottom bar) */
  :root { --appbar-h: 0px; }
  .page-app .appbar { position: static; }
  .page-app .appbar__in { min-height: 60px; gap: 8px; padding-block: 8px; }
  .page-app .appbar__brand { margin-inline-end: auto; }
  .page-app .appbar__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-app .appbar__try { gap: 6px; padding-inline: 12px; }
  .page-app .appbar__try-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-app .appbar__try-short { display: inline; }
}
/* a narrow phone (iPhone SE and mini, most Androids): the mark, the state pill and the try key fit on one line, so
   the page never scrolls sideways; the key keeps its full name for screen readers */
@media (max-width: 399.98px) {
  .page-app .appbar__brand { gap: 7px; }
  .page-app .appbar__brand img { width: 32px; height: 32px; }
  .page-app .appbar__brand .brand__name { font-size: 20px; }
  .page-app .appbar__try { padding-inline: 11px; }
  .page-app .appbar__try-short { display: none; }
}
@media (max-width: 349.98px) {
  .page-app .appbar__pill { display: none; }
}

.page-app .desk { width: min(100% - 32px, var(--desk)); flex: 1 0 auto; margin-inline: auto; padding-block: 32px 72px; }
.page-app .rooms { min-width: 0; }
.page-app .noscript { padding: 22px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.page-app .flash { margin-bottom: 22px; }

/* the rooms: onimli's key bar — one strip of keys, the room you are in raised in yellow */
.page-app .roomtabs { display: flex; width: fit-content; gap: 4px; margin: 0 auto; padding: 5px; list-style: none; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.page-app .roomtabs a { position: relative; display: flex; min-height: 46px; align-items: center; gap: 8px; padding: 8px 15px; color: var(--ink-2); border-radius: 12px 4px 12px 4px; font: 16px/1.2 var(--f-ui); text-decoration: none; white-space: nowrap; }
.page-app .roomtabs a:hover { color: var(--ink); background: var(--ivory); }
.page-app .roomtabs a[aria-current="page"] { color: var(--ink); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-key-sm); }
.page-app .roomtabs__ic { display: grid; flex: none; place-items: center; }
.page-app .roomtabs__short { display: none; }
/* a settings room with something not saved yet: a dashed ring beside its name ("not real yet") */
.page-app:has(#room-bot form[data-dirty="1"]) [data-room-link="bot"] > span:not(.roomtabs__ic),
.page-app:has(#room-availability form[data-dirty="1"]) [data-room-link="availability"] > span:not(.roomtabs__ic),
.page-app:has(#f-who[data-dirty="1"]) [data-room-link="chats"] > span:not(.roomtabs__ic, .roomtabs__n) { text-decoration: underline dashed 2px; text-underline-offset: 0.3em; }
/* how many inquiries wait for you (the bot passed them on): a number in an ink disc */
.page-app .roomtabs__n { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; color: var(--on-band); background: var(--ink); border-radius: 999px; font: 13px/1 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }

@media (min-width: 1100px) {
  :root { --roombar-h: 74px; }
  /* sticky under the app bar, on a band of the page colour so nothing shows around the keys */
  .page-app .roomnav { position: sticky; z-index: 35; top: var(--appbar-h); margin: -32px 0 28px; padding-block: 14px; background: var(--page); }
}
/* a tab bar at the bottom of a phone or a tablet: the room you are in stands up as a yellow key */
@media (max-width: 1099.98px) {
  .page-app { --app-bottom-bar: calc(68px + env(safe-area-inset-bottom)); }
  .page-app .roomnav { position: fixed; z-index: 45; inset-inline: 0; bottom: 0; padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); background: var(--sheet); border-top: 2px solid var(--ink); }
  .page-app .roomtabs { display: grid; width: auto; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .page-app .roomtabs a { display: grid; min-height: 58px; justify-items: center; align-content: center; gap: 3px; padding: 3px 1px; border-radius: 0; font-size: 13px; line-height: 1.15; text-align: center; white-space: normal; -webkit-tap-highlight-color: transparent; }
  .page-app .roomtabs a:hover { background: none; }
  .page-app .roomtabs__ic { width: 50px; height: 30px; border: 2px solid transparent; border-radius: 999px; }
  .page-app .roomtabs a[aria-current="page"] { background: none; box-shadow: none; }
  .page-app .roomtabs a[aria-current="page"] .roomtabs__ic { background: var(--yellow); border-color: var(--ink); box-shadow: var(--shadow-key-sm); }
  .page-app .roomtabs__n { position: absolute; top: 1px; inset-inline-start: calc(50% + 9px); min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; box-shadow: 0 0 0 2px var(--sheet); }
  .page-app .app:not(:has(#roomnav[hidden])) .appfoot { padding-bottom: calc(var(--app-bottom-bar) + 18px); }
}
@media (max-width: 639.98px) {
  .page-app .roomtabs__full { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-app .roomtabs__short { display: block; }
  .page-app .roomtabs a { font-size: 12.5px; }
  .page-app .roomtabs__ic { width: 44px; }
}

/* the closing strip: help, the legal links, the family line */
.page-app .appfoot { border-top: 1px solid var(--hair); color: var(--ink-soft); font-size: 15px; }
.page-app .appfoot__in { display: flex; width: min(100% - 32px, var(--desk)); flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 24px; margin-inline: auto; padding-block: 14px 24px; }
.page-app .appfoot a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); }
.page-app .appfoot__help a { font-family: var(--f-ui); color: var(--ink); }
.page-app .appfoot__links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.page-app .appfoot__by { width: 100%; font-size: 13.5px; }
.page-app .appfoot__by a { min-height: 0; color: var(--achiya); font-family: var(--f-ui); text-decoration: none; }
.page-app .appfoot__by a:hover { text-decoration: underline; }
.page-app .mock-badge { inset-block-end: calc(var(--app-bottom-bar) + 12px); }

/* ---------- 2. a room ---------- */
/* each room centred at its own reading width */
.page-app .room { --room-w: 1180px; width: 100%; max-width: var(--room-w); margin-inline: auto; }
.page-app .room--settings { --room-w: 1040px; }
.page-app #room-account { --room-w: 46rem; }
.page-app .room__head { margin-bottom: 32px; }
.page-app .room__title, .page-app .room__head h2 { font: 34px/1.12 var(--f-display); }
.page-app .room__lead, .page-app .room__head p { max-width: 60ch; margin-top: 10px; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
@media (min-width: 900px) { .page-app .room__title, .page-app .room__head h2 { font-size: 40px; } }
.page-app .card { position: relative; min-width: 0; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.page-app .group__title { font: 20px/1.3 var(--f-ui); }

/* shared editor pieces (the settings rooms and «למי הבוט עונה») */
.page-app .grid2 { display: grid; gap: 22px; }
.page-app .field--full { grid-column: 1 / -1; }
@media (min-width: 720px) { .page-app .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 26px; } }
.page-app .stack { display: grid; gap: 16px; }
.page-app .empty { padding: 16px 18px; color: var(--ink-2); border: var(--dash); border-radius: var(--leaf-xs); line-height: 1.6; }
.page-app .calm { max-width: 56ch; color: var(--ink-2); line-height: 1.65; }
.page-app .more { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }

/* ---------- 3. gates: one card each, centred ---------- */
.page-app .app:has(#roomnav[hidden]) .desk { max-width: 640px; }
.page-app .gate { display: block; }
.page-app .gate__card { display: grid; justify-items: start; gap: 16px; padding: clamp(24px, 5vw, 40px); background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); font-size: 17px; line-height: 1.65; }
.page-app .gate__card h3 { font: clamp(28px, 4.4vw, 34px)/1.15 var(--f-display); }
.page-app .gate__card > p:not([class]) { color: var(--ink-2); }
.page-app .gate__brand { margin-bottom: 4px; }
.page-app .gate__brand img { width: 52px; height: 52px; }
.page-app .gate__brand .brand__name { font-size: 30px; }
.page-app .gate__brand .brand__channel { font-size: 18px; }
.page-app .gate__brand .brand__by { margin-top: 6px; font-size: 13px; }
.page-app .gate__brand .brand__by a { font-size: 13px; text-decoration: none; }
.page-app .gate__app { color: var(--ink-soft); font: 14px/1.3 var(--f-ui); letter-spacing: 0.01em; }
.page-app .gate__card .btn--google { margin-top: 4px; }
.page-app .inapp { display: grid; justify-items: start; gap: 8px; margin-top: 4px; }
.page-app .gate__pair { display: grid; align-items: start; gap: 18px; }
.page-app .privacy-start { display: grid; width: 100%; gap: 16px; }
.page-app .privacy-start .btn { justify-self: start; }
/* the agreement signed right here (Documenso's embed page), over the whole screen: in a column beside the card it came
   out too small to read («פיצי»). A modal <dialog>; on top, in Hebrew, what to tap, as Documenso's own words are English. */
.page-app .privacy-document { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; color: var(--ink); background: var(--page); border: 0; }
.page-app .privacy-document[open] { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.page-app .privacy-document::backdrop { background: var(--page); }
html:has(.privacy-document[open]) { overflow: hidden; }
.page-app .sign-help > summary { display: none; }
.page-app .privacy-document__bar { display: grid; width: min(100% - 24px, 1024px); gap: 6px; margin-inline: auto; padding-block: max(10px, env(safe-area-inset-top)) 10px; }
.page-app .privacy-document__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-app .privacy-document__title { font: 21px/1.3 var(--f-display); }
.page-app .privacy-document__title:focus { outline: none; }
/* three drawn steps, each a picture of what Documenso shows and three words: a marked field, a signature, its key */
.page-app .sign-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin: 0; padding: 0; list-style: none; }
.page-app .sign-steps li { display: grid; justify-items: center; align-content: start; gap: 6px; color: var(--ink); font: 14.5px/1.35 var(--f-ui); text-align: center; }
.page-app .sign-steps__art { display: grid; height: 34px; place-items: center; }
.page-app .sg-field { padding: 3px 14px; color: var(--ink-2); background: var(--field-white); border: 1.5px dashed var(--ink); border-radius: 9px 3px 9px 3px; font: 13.5px/1.3 var(--f-ui); }
.page-app .sg-sign { width: 66px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-app .sg-key { padding: 4px 12px; color: var(--sheet); background: var(--ink); border-radius: 9px 3px 9px 3px; font: 13.5px/1.3 var(--f-ui); }
/* Documenso's own key names, as they read there */
.page-app .sign-steps b[lang="en"] { unicode-bidi: isolate; }
.page-app .sign-guide__note { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.page-app .sign-guide__note a { color: var(--ink); white-space: nowrap; }
.page-app .privacy-document .waiting.error { color: var(--err); }
.page-app .privacy-document__frame { position: relative; min-height: 0; background: #fff; border-top: 2px solid var(--ink); }
.page-app .privacy-document__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.page-app .privacy-document__wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--ink-soft); background: #fff; font: 17px/1.5 var(--f-ui); text-align: center; pointer-events: none; }
@media (max-width: 699.98px) {
  .page-app .privacy-document__bar { gap: 4px; padding-block-end: 8px; }
  .page-app .privacy-document__title { font-size: 19px; }
  .page-app .sign-steps li { font-size: 13.5px; }
  .page-app .sign-guide__note { font-size: 13px; line-height: 1.45; }
  .page-app .privacy-document__top .btn--sm { min-height: 44px; padding: 6px 14px; font-size: 15px; }
  /* a phone: the explanation folds away under «איך חותמים», for more of the agreement */
  .page-app .sign-help > summary { display: inline-flex; min-height: 32px; align-items: center; font: 15px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
  .page-app .sign-help[open] > summary { margin-bottom: 2px; }
}
.page-app .ruled-steps { display: grid; width: 100%; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ruled; }
.page-app .ruled-steps li { position: relative; padding-block: 10px; padding-inline-start: 44px; border-bottom: 1px solid var(--hair); counter-increment: ruled; }
.page-app .ruled-steps li:last-child { border-bottom: 0; }
.page-app .ruled-steps li::before { position: absolute; top: 9px; inset-inline-start: 0; display: grid; width: 30px; height: 30px; place-items: center; content: counter(ruled); background: var(--ivory); border: 2px solid var(--ink); border-radius: 50%; font: 15px/1 var(--f-ui); }
.page-app .privacy-recovery { width: 100%; padding-top: 6px; border-top: 1px solid var(--hair); }
.page-app .privacy-recovery summary { display: flex; min-height: 44px; align-items: center; color: var(--ink-2); font: 16px/1.4 var(--f-ui); cursor: pointer; }
.page-app .privacy-recovery .actions { margin-top: 8px; }
/* the sign-in card's second way in, folded under the Google key: a code in WhatsApp from עונים לי (only for owners who
   connected their own WhatsApp); then one quiet line to the other product's door */
.page-app .codein { width: 100%; padding-top: 6px; border-top: 1px solid var(--hair); }
.page-app .codein > summary { display: inline-flex; min-height: 44px; align-items: center; font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.page-app .codein__form { display: grid; max-width: 26rem; gap: 14px; margin-top: 8px; }
.page-app .codein__form input { font-variant-numeric: tabular-nums lining-nums; }
.page-app .codein__form .hint:empty { display: none; }
.page-app .gate__door { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.page-app .gate__door a { color: var(--ink); }

/* the five steps to a live bot (the gates and the home's next step): done = an ink disc with a tick, now = the yellow
   key, still to come = a dashed ring */
.journey { display: grid; width: 100%; max-width: 560px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: journey; }
.journey li { position: relative; display: grid; justify-items: center; gap: 6px; color: var(--ink-soft); font: 13.5px/1.2 var(--f-ui); text-align: center; counter-increment: journey; }
.journey li::before { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; place-items: center; content: counter(journey); color: var(--ink-soft); background: var(--sheet); border: 2px dashed var(--line-strong); border-radius: 50%; font: 14px/1 var(--f-ui); }
.journey li:not(:last-child)::after { position: absolute; top: 15px; inset-inline: calc(50% + 18px) calc(-50% + 18px); height: 2px; content: ""; background: var(--hair); }
.journey li.is-done { color: var(--ink); }
.journey li.is-done::before { content: ""; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffdf7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 17px no-repeat; border: 2px solid var(--ink); }
.journey li.is-done:not(:last-child)::after { background: var(--ink); }
.journey li.is-now { color: var(--ink); }
.journey li.is-now::before { color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: var(--shadow-key-sm); }
.journey li.is-bad { color: var(--err); }
.journey li.is-bad::before { color: var(--err); background: var(--sheet); border: 2px solid var(--err); box-shadow: none; }

/* ---------- 4. home ---------- */
.page-app .home { display: grid; align-items: start; gap: 30px; }
.page-app .home__main { display: grid; min-width: 0; gap: 30px; }
@media (min-width: 1100px) { .page-app .home { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; } }

/* the state: one dot and one sentence, the switch beside it */
/* the state: onimli's state line — one dot, one sentence, no card; the switch at its end */
.page-app .status { display: grid; gap: 4px; padding: 4px 2px 6px; }
.page-app .status__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.page-app .status__now { display: flex; align-items: center; gap: 12px; font: 22px/1.3 var(--f-ui); }
.page-app .status__dot { width: 16px; height: 16px; flex: none; border: 2px solid var(--ink); border-radius: 50%; }
.page-app .status[data-on="true"] .status__dot { background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 232, 26, 0.4); }
.page-app .status[data-on="false"] .status__now { color: var(--ink-2); }
.page-app .status__why { max-width: 60ch; padding-inline-start: 28px; font-size: 15.5px; }
@media (max-width: 639.98px) { .page-app .status__now { font-size: 19px; } .page-app .status__why { padding-inline-start: 0; } }
.page-app .status__why a { color: var(--ink); }

/* the path: one card — the five steps on top, the one step open now with its one action, then each connection as
   one quiet line. Linking WhatsApp is the open step itself (its station opens under the step's title). */
.page-app .path { display: grid; padding: 22px clamp(18px, 3vw, 30px) 6px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.page-app .path:has(> .next[data-tone="bad"]:not([hidden])) { border-color: var(--err); }
.page-app .next { display: grid; justify-items: start; gap: 10px; padding-bottom: 24px; }
.page-app .next__actions:not(:has(> :not([hidden]))), .page-app .next__line:empty, .page-app .status__why:empty { display: none; }
.page-app .path:has(#link-wa[data-current]) > .next { padding-bottom: 16px; }
.page-app .next__progress { display: grid; width: 100%; gap: 8px; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.page-app .next__step { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-app .next__title { font: clamp(24px, 3.4vw, 30px)/1.18 var(--f-display); }
.page-app .next__line { max-width: 56ch; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.page-app .next__line a, .page-app .next a:not(.btn) { color: var(--ink); }
.page-app .next__actions { margin-top: 6px; }
.page-app .next .btn--big { min-height: 64px; padding-inline: 38px; font-size: 20px; }
.page-app .next__wait { width: min(100%, 300px); }
/* the step's drawing (renderNext): one small object under the title, then one short line (6.10.2026) */
.page-app .next__art { width: 100%; max-width: 360px; margin-block: 2px 4px; }
.page-app .next__chat { max-width: 320px; margin-top: 0; }
.page-app .next__chat .settings-example__thread { padding: 12px; }
.page-app .next__chat .settings-example__question, .page-app .next__chat .settings-example__answer { font-size: 15px; }
.page-app .sample-tag { display: inline-flex; min-height: 24px; align-items: center; padding: 1px 10px; color: var(--ink-2); border: 1.5px dashed var(--ink); border-radius: 999px; font: 13px/1.2 var(--f-ui); white-space: nowrap; }
/* the agreement's three promises: a drawn mark and three words each */
.page-app .promises { display: grid; width: 100%; max-width: 380px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.page-app .promises li { display: grid; justify-items: center; align-content: start; gap: 7px; color: var(--ink); font: 14.5px/1.3 var(--f-ui); text-align: center; text-wrap: balance; }
.page-app .promises__ic { display: grid; width: 46px; height: 46px; place-items: center; background: var(--ivory); border: 1.5px solid var(--ink); border-radius: 50%; }
.page-app .promises__ic .icon { width: 23px; height: 23px; }
/* the «בוט» list where WhatsApp shows it, above the chats: a quoted screen (its own colours inside an ink frame); the
   list is ringed in ink, dashed while it is being made */
.page-app .walist { display: grid; width: fit-content; max-width: 100%; gap: 8px; padding: 10px 12px 12px; background: var(--field-white); border: 2px solid var(--ink); border-radius: 18px 6px 18px 6px; }
.page-app .walist__app { color: var(--wa-teal); font: 16px/1.2 var(--f-ui); }
.page-app .walist__chips { display: flex; gap: 6px; }
.page-app .walist__chips > span { padding: 4px 11px; color: var(--wa-meta); background: var(--wa-wall); border-radius: 999px; font: 13.5px/1.25 var(--f-ui); white-space: nowrap; }
.page-app .walist__chips > .walist__bot { color: var(--wa-chip-ink); background: var(--wa-chip); outline: 2px dashed var(--ink); outline-offset: 2px; }
.page-app .walist--ready .walist__bot { outline-style: solid; }
.page-app #list-how .walist { margin-block: 4px; }
.page-app .fill-line { display: block; height: 4px; background: linear-gradient(var(--ink), var(--ink)) right center / 0% 100% no-repeat, var(--hair); border-radius: 4px; animation: fill-line 2.4s ease-in-out infinite; }
.page-app .next[data-tone="bad"] .next__title { color: var(--err); }
/* the go-live moment: «הבוט פעיל» gets the family marker, swept on once (never with reduced motion) */
.page-app .next__title .write { position: relative; display: inline-block; }
.page-app .next__title .write__pencil { display: none; }
.page-app .next__title .write__ink { padding-inline: 0.06em; background: linear-gradient(176deg, transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%) no-repeat right / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
  .page-app .next.is-fresh .write__ink { animation: marker-sweep 0.8s var(--ease) 0.2s both; }
}
@keyframes marker-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* the connections: each one quiet line (a ring, its name, one short line, its one small key); what it means is folded.
   Locked ones wait for a plan and are not shown; under the open step their heading is only for screen readers. */
.page-app .stations-box:not(:has(.station:not([data-state="locked"]))) { display: none; }
.page-app .stations-box > .group__title { padding-bottom: 14px; }
.page-app .next:not([hidden]) + .stations-box > .group__title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-app .stations { display: grid; margin: 0; padding: 0; list-style: none; }
.page-app .station { position: relative; padding-block: 18px; padding-inline-start: 46px; border-top: 1px solid var(--hair); }
.page-app .station[data-state="locked"] { display: none; }
.page-app .station__n { position: absolute; top: 19px; inset-inline-start: 0; display: grid; width: 32px; height: 32px; place-items: center; background: var(--sheet); border: 2px dashed var(--line-strong); border-radius: 50%; }
.page-app .station[data-state="active"] .station__n { background: var(--yellow); border: 2px solid var(--ink); box-shadow: var(--shadow-key-sm); }
.page-app .station[data-state="done"] .station__n { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffdf7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 17px no-repeat; border: 2px solid var(--ink); }
.page-app .station[data-state="problem"] .station__n { border: 2px solid var(--err); }
/* a connection the plan doesn't include: shown grey, with what it does, the plans that open it and its key disabled */
.page-app .station[data-state="off-plan"] :is(.station__what, .station__sub) { color: var(--placeholder); }
.page-app .station__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "what state act" "sub sub act"; align-items: center; gap: 2px 12px; min-height: 34px; }
.page-app .station__what { grid-area: what; font: 18px/1.35 var(--f-ui); }
.page-app .station__act { grid-area: act; }
/* the open step: WhatsApp's own form and key right under the step's title (its line is the title's) */
.page-app .station[data-current] { padding: 0 0 26px; border-top: 0; }
.page-app .station[data-current] > .station__row { display: none; }
.page-app #link-wa:not([data-current]) > .station__panel { display: none; }
/* the station's state, a pill: ok = the live dot, wait = dashed, bad = red, '' = not yet */
.page-app .station__state { grid-area: state; justify-self: start; display: inline-flex; min-height: 28px; align-items: center; gap: 7px; padding: 2px 11px; color: var(--ink-soft); background: var(--sheet); border: 1.5px solid var(--line-strong); border-radius: 999px; font: 14px/1.3 var(--f-ui); white-space: nowrap; }
.page-app .station__state::before { width: 9px; height: 9px; flex: none; content: ""; border: 1.5px solid currentColor; border-radius: 50%; }
.page-app .station__state[data-kind="ok"] { color: var(--ink); border-color: var(--ink); }
.page-app .station__state[data-kind="ok"]::before { background: var(--yellow); border-color: var(--ink); }
.page-app .station__state[data-kind="wait"] { color: var(--ink-2); border-style: dashed; }
.page-app .station__state[data-kind="wait"]::before { border-style: dashed; }
.page-app .station__state[data-kind="bad"] { color: var(--err); border-color: var(--err); }
.page-app .station__state:not([data-kind="wait"]):not([data-kind="bad"]) { display: none; }
.page-app .station__sub { grid-area: sub; max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.page-app .station__sub:empty { display: none; }
.page-app .station__sub a { color: var(--ink); }
.page-app .station__panel { margin-top: 6px; }
.page-app .station[data-current] > .station__panel { margin-top: 0; }
.page-app .station__panel > div > * + * { margin-top: 14px; }
.page-app .station__panel:not(:has(> div:not([hidden]))) { display: none; }
.page-app .tabpane { margin-top: 16px; }
.page-app .tabpane > p { max-width: 56ch; margin-bottom: 14px; line-height: 1.65; }
/* the pairing code: one key per character, big enough to copy by eye */
.page-app .paircode { display: flex; width: fit-content; max-width: 100%; gap: clamp(3px, 1vw, 6px); direction: ltr; unicode-bidi: isolate; }
.page-app .paircode__c { display: grid; width: clamp(26px, 7vw, 46px); height: clamp(40px, 10.5vw, 60px); place-items: center; color: var(--ink); background: var(--field-white); border: 2px solid var(--ink); border-radius: 8px 3px 8px 3px; box-shadow: 0 2px 0 var(--ink); font: clamp(20px, 5.4vw, 30px)/1 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; }
.page-app .paircode__dash { width: 10px; height: 3px; align-self: center; overflow: hidden; color: transparent; background: var(--ink-soft); font-size: 0; }
.page-app .tipline { max-width: 58ch; padding: 12px 16px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.55 var(--f-ui); }
.page-app .qr { width: min(100%, 260px); padding: 10px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
.page-app .qr img { display: block; width: 100%; height: auto; }
/* how to link on the phone: the owner's kind of phone, then small drawings with the place to tap on a yellow key */
.page-app .linkhow { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.page-app .oschoice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.page-app .oschoice legend { width: 100%; margin: 0 0 4px; color: var(--ink-2); font: 16px/1.4 var(--f-ui); }
.page-app .oschoice__opt { position: relative; display: inline-flex; }
.page-app .oschoice__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.page-app .oschoice__opt span { display: inline-flex; min-height: 44px; align-items: center; padding: 0 18px; background: var(--field-white); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.2 var(--f-ui); }
.page-app .oschoice__opt input:checked + span { background: var(--yellow); box-shadow: var(--shadow-key-sm); }
.page-app .oschoice__opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.page-app .linksteps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: linkstep; }
.page-app .linksteps li { display: grid; grid-template-columns: 26px 48px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 16.5px; line-height: 1.55; counter-increment: linkstep; }
.page-app .linksteps li::before { display: grid; width: 26px; height: 26px; place-items: center; content: counter(linkstep); border: 1.5px solid var(--ink); border-radius: 50%; font: 13.5px/1 var(--f-ui); }
.page-app .linksteps b { color: var(--ink); }
.page-app .linksteps__art { width: 48px; height: 48px; color: var(--ink); }
.page-app .linksteps__art--wa { padding: 11px; color: var(--ink-2); }
@media (max-width: 699.98px) {
  .page-app .station { padding-inline-start: 42px; }
  .page-app .station[data-current] { padding-inline-start: 0; }
  .page-app .station__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "what state" "sub sub" "act act"; }
  .page-app .station__act { margin-top: 10px; }
  .page-app .linksteps li { grid-template-columns: 24px 40px minmax(0, 1fr); gap: 8px; font-size: 16px; }
  .page-app .linksteps__art { width: 40px; height: 40px; }
  .page-app .linksteps__art--wa { padding: 9px; }
}
/* the same steps without drawings: the three taps of the «בוט» list (home, station 3) */
.page-app .linksteps--plain li { grid-template-columns: auto minmax(0, 1fr); }
/* the two ways to type the code: the phone's own notification first, the steps under «אין התראה?»; what the phone shows
   on the way is a second line of its step */
.page-app .linkhow__lead { font: 17px/1.45 var(--f-ui); }
.page-app .linksteps__see { display: block; margin-top: 2px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.page-app .linkhow:has(#wa-os-ios:checked) [data-os="android"],
.page-app .linkhow:has(#wa-os-android:checked) [data-os="ios"],
.page-app #link-wa[data-view="code"] [data-how="qr"],
.page-app #link-wa[data-view="qr"] [data-how="code"] { display: none; }
/* what Google will show, before the button that goes there */
.page-app .gsheet { width: 100%; max-width: 60ch; }
.page-app .gsheet__title { display: inline-flex; min-height: 44px; align-items: center; font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.page-app .gsheet[open] .gsheet__steps { padding: 14px 18px 14px 14px; padding-inline-start: 2.2rem; background: var(--ivory); border-radius: var(--leaf-xs); }
.page-app .gsheet__steps { display: grid; gap: 6px; margin-top: 8px; padding-inline-start: 1.3rem; font-size: 16px; line-height: 1.6; }
.page-app .gsheet__steps li::marker { font-family: var(--f-ui); }
/* the «בוט» list, explained */
.page-app .explain { margin-top: 4px; }
.page-app .explain > summary { display: inline-flex; min-height: 44px; align-items: center; font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.page-app .explain__list { display: grid; gap: 12px; margin: 8px 0 12px; padding: 16px 18px; list-style: none; background: var(--ivory); border-radius: var(--leaf-xs); }
.page-app .explain__list li { font-size: 16px; line-height: 1.65; }
.page-app .explain .hint a, .page-app .explain__list a { color: var(--ink); }
/* a short video of the same thing on a phone: one underlined line with a play mark; open, the player in the ink frame of
   a quoted screen. Nothing loads before it is played (preload="none", a poster frame). */
.page-app .howvideo > summary { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.page-app .howvideo > summary .icon { width: 24px; height: 24px; }
.page-app .howvideo__player { display: block; width: min(100%, 270px); height: auto; margin-block: 8px 12px; background: var(--ivory); border: 2px solid var(--ink); border-radius: 18px 6px 18px 6px; }

/* today: a card with its parts one under the other */
.page-app .home__today { display: grid; min-width: 0; align-content: start; gap: 0; padding: 24px clamp(18px, 3vw, 28px) 12px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.page-app .today__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 12px; }
.page-app .today__title { font: 28px/1.15 var(--f-display); }
.page-app .today__date { color: var(--ink-soft); font: 15.5px/1.3 var(--f-ui); }
.page-app .today__part { display: grid; justify-items: start; gap: 12px; padding-block: 20px 22px; border-top: 1px solid var(--hair); }
.page-app .today__label { font: 18px/1.3 var(--f-ui); }
.page-app .tryout > p { max-width: 52ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.page-app :is(.tryout__asks, .tc-asks) { display: flex; flex-wrap: wrap; gap: 8px; }
/* a ready question: a customer's message, waiting to be sent (dashed until you tap it) */
.page-app .ask { min-height: 44px; padding: 8px 14px; color: var(--ink); background: var(--field-white); border: 1.5px dashed var(--ink); border-radius: 16px 16px 16px 4px; font: 15.5px/1.4 var(--f-body); text-align: start; }
.page-app .ask:hover { border-style: solid; background: var(--ivory); }
/* today's appointments on the hours of the day */
.page-app .dayplan { --slot: 28px; --hourcol: 3.4rem; position: relative; display: grid; width: 100%; grid-template-columns: var(--hourcol) minmax(0, 1fr); background: repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px calc(var(--slot) * 2)); border-bottom: 1px solid var(--hair); }
.page-app .dayplan__hours, .page-app .dayplan__entries { display: grid; grid-row: 1; grid-template-rows: repeat(var(--rows, 18), var(--slot)); margin: 0; padding: 0; list-style: none; }
.page-app .dayplan__hours { grid-column: 1; }
.page-app .dayplan__entries { min-width: 0; grid-column: 2; padding-block: 2px; }
.page-app .dayplan__hours li { padding-top: 5px; color: var(--ink-soft); font: 13px/1 var(--f-body); font-variant-numeric: tabular-nums; text-align: center; }
.page-app .dayplan__entry { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 2px 0 1px; padding: 0 10px; overflow: hidden; background: var(--ivory); border: 1.5px solid var(--ink); border-radius: 9px 3px 9px 3px; }
.page-app .dayplan__entry time { flex: none; font: 14.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.page-app .dayplan__who { min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.page-app .dayplan__now { position: absolute; z-index: 1; top: calc(var(--at, 0) * var(--slot)); inset-inline: var(--hourcol) 0; height: 0; border-top: 2px solid var(--ink); }
.page-app .dayplan__now span { position: absolute; top: -11px; inset-inline-end: 0; padding: 1px 8px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; font: 12.5px/1.4 var(--f-ui); }
.page-app .dayplan__empty { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
/* what customers asked */
.page-app .notes__list { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
.page-app .note { display: grid; gap: 4px; padding-block: 12px; border-top: 1px solid var(--hair); }
.page-app .note:first-child { border-top: 0; padding-top: 2px; }
.page-app .note__who { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 16px/1.3 var(--f-ui); }
.page-app .note__who b { font-weight: 400; }
.page-app .note__who time { color: var(--ink-soft); font: 13.5px/1.3 var(--f-body); font-variant-numeric: tabular-nums; }
.page-app .note__said { font-size: 16px; line-height: 1.55; }
.page-app .note__meta { color: var(--ink-soft); font-size: 14px; }
.page-app .note__out { display: inline-flex; align-items: center; gap: 7px; font: 14.5px/1.4 var(--f-ui); }
.page-app .note__out::before { width: 9px; height: 9px; flex: none; content: ""; border: 1.5px solid currentColor; border-radius: 50%; }
.page-app .note__out.entry--ink::before { background: var(--yellow); border-color: var(--ink); }
.page-app .note__out.entry--pencil { color: var(--ink-2); }
.page-app .note__out.entry--pencil::before { border-style: dashed; }
.page-app .note__act, .page-app .note--more a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font: 15.5px/1.3 var(--f-ui); }
.page-app .notes__counts { font: 16px/1.5 var(--f-ui); }
/* the month's conversations: the family meter */
.page-app .tally { gap: 6px; }
.page-app .tally > div { width: 100%; }
.page-app .tally__nums { display: flex; align-items: baseline; gap: 8px; color: var(--ink-2); font: 16px/1 var(--f-ui); }
.page-app .tally__nums b { color: var(--ink); font: 40px/1 var(--f-display); }
.page-app .ruler { position: relative; height: 14px; margin-block: 14px 4px; }
.page-app .ruler__scale { position: absolute; top: 0; inset-inline: 0; height: 14px; background: var(--field-white); border: 2px solid var(--ink); border-radius: 999px; }
.page-app .ruler__ink { position: absolute; top: 2px; inset-inline-start: 2px; width: 0; max-width: calc(100% - 4px); height: 10px; background: var(--yellow); border-radius: 999px; transition: inline-size 0.6s var(--ease); }
.page-app .ruler__nums { display: none; }
.page-app .tally__text { font: 16px/1.55 var(--f-ui); }
.page-app .tally[data-level="warn"] .tally__text { color: var(--warn-text); }
.page-app .tally[data-level="full"] .tally__text { color: var(--err); }
.page-app .tally .hint { margin-top: 4px; }
.page-app .colophon { display: none !important; }   /* the plan and its limits live in the plan room */
.page-app .colophon a { color: var(--ink); }

/* ---------- 5. the test chat: a family panel with the WhatsApp screen drawn inside it ---------- */
.drawer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; background: transparent; border: 0; }
.drawer[open] { position: fixed; inset: 0; display: grid; }
@media (min-width: 720px) { .drawer[open] { inset-inline-start: auto; width: min(100%, 470px); } }
.drawer__screen { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--page); border-inline-start: 2px solid var(--ink); box-shadow: 0 0 60px rgba(27, 26, 23, 0.25); }
.drawer__head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--hair); }
.drawer__titles { min-width: 0; flex: 1; }
.drawer__titles h2 { font: 28px/1.15 var(--f-display); }
.drawer__sub { margin-top: 4px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.drawer__head .icon-btn { margin-top: -4px; }
.drawer__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tc-screen { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto auto; margin: 14px 16px 0; overflow: hidden; background: var(--wa-wall); border: 2px solid var(--ink); border-radius: 22px 8px 22px 8px; }
.tc-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #fff; background: var(--wa-bar); }
.tc-bar .phone__avatar { width: 34px; height: 34px; margin: 0; }
.tc-bar__who { display: grid; min-width: 0; }
.tc-bar__who b { overflow: hidden; font: 16px/1.3 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; }
.tc-bar__who small { color: #d9efeb; font-size: 12.5px; }
.tc-asks { padding: 0 10px 8px; }
.tc-note { margin: 0 10px 8px; padding: 8px 12px; color: var(--ink); background: var(--sheet); border: 1.5px dashed var(--ink); border-radius: 10px; font-size: 14.5px; line-height: 1.5; }
.tc-note:empty { margin: 0; padding: 0; border: 0; }   /* stays a live region while empty, so its next text is announced */
.tc-form { display: flex; gap: 8px; padding: 8px 10px; background: #f0ece4; }
.tc-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 46px; border-color: transparent; border-radius: 999px; font-size: 16px; }
.tc-form input:focus-visible { border-color: var(--ink); }
.tc-send { display: grid; width: 46px; height: 46px; flex: none; place-items: center; padding: 0; color: #fff; background: var(--wa-teal); border: 0; border-radius: 50%; }
.tc-send:hover { background: var(--wa-bar); }
.tc-send:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.icon--send { transform: scaleX(-1); }
.tc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; padding: 6px 16px 10px; }
@media (max-width: 719.98px) { .drawer__screen { border-inline-start: 0; } .tc-screen { margin-inline: 10px; } }

/* WhatsApp's own pieces, inside a drawn screen only */
.phone__avatar { display: grid; width: 38px; height: 38px; flex: none; place-items: center; color: var(--wa-bar); background: #fff; border-radius: 50%; font-family: var(--f-ui); }
.chat { display: grid; align-content: start; gap: 6px; margin: 0; padding: 14px 10px; list-style: none; }
.bubble { position: relative; width: fit-content; max-width: 86%; padding: 7px 11px 5px; color: #111b21; background: #fff; border-radius: 12px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.13); font-size: 15.5px; line-height: 1.5; white-space: pre-line; }
.bubble time, .bubble__meta { display: block; margin-top: 1px; color: var(--wa-meta); font-size: 11.5px; text-align: end; white-space: normal; }
.bubble--mine { justify-self: end; background: var(--wa-mine); border-start-end-radius: 3px; }
.bubble--theirs { justify-self: start; border-start-start-radius: 3px; }
.bubble--note { justify-self: center; max-width: 92%; color: var(--ink-2); background: #fdf6d8; border-radius: 9px; font-size: 14px; text-align: center; }
.bubble--typing { color: var(--wa-meta); font-style: italic; }
.bubble__who { display: block; margin-bottom: 1px; color: var(--wa-teal); font: 12.5px/1.3 var(--f-ui); }
.bubble__action { display: flex; width: calc(100% + 22px); min-height: 44px; align-items: center; justify-content: center; gap: 6px; margin: 8px -11px -5px; padding: 6px 10px; color: var(--wa-teal); background: none; border: 0; border-top: 1px solid #e6e2da; font: 15px/1.3 var(--f-ui); }
button.bubble__action:hover { background: #f6fbfa; }
.qr-btns { display: grid; width: min(86%, 300px); gap: 4px; justify-self: start; list-style: none; }
.qr-btn { display: grid; width: 100%; min-height: 44px; place-items: center; padding: 6px 12px; color: var(--wa-teal); background: #fff; border: 0; border-radius: 10px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.13); font: 15px/1.3 var(--f-ui); text-align: center; text-decoration: none; }
.qr-btn:hover { background: #f6fbfa; }
.wa-sheet { margin: 2px 0 6px; padding: 12px 14px 6px; background: #fff; border-radius: 18px 18px 14px 14px; box-shadow: 0 -2px 14px rgba(17, 27, 33, 0.12); }
.chat .wa-sheet { justify-self: stretch; }
.wa-sheet__title { font-family: var(--f-ui); text-align: center; }
.wa-sheet__day { margin-top: 8px; color: var(--wa-teal); font: 14px/1.3 var(--f-ui); }
.wa-sheet ul { list-style: none; }
.wa-row { display: grid; width: 100%; min-height: 48px; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 6px 2px; text-align: start; background: none; border: 0; border-bottom: 1px solid #efece6; }
.wa-row b { display: block; font-family: var(--f-ui); font-weight: 400; }
.wa-row small { display: block; color: var(--wa-meta); font-size: 13.5px; }
.wa-row::after { width: 18px; height: 18px; content: ""; border: 2px solid #8696a0; border-radius: 50%; }
.wa-row[aria-pressed="true"]::after { background: #00a884; border-color: #00a884; box-shadow: inset 0 0 0 3px #fff; }
.wa-row:disabled { cursor: default; }
li:last-child > .wa-row { border-bottom: 0; }
.tc-carousel { display: flex; gap: 12px; max-width: 100%; overflow-x: auto; padding: 8px 0; }
.tc-card { flex: 0 0 min(250px, 80%); padding: 12px; background: #fff; border: 1px solid #dfe5e7; border-radius: 12px; }
.tc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.tc-card h4, .tc-card p { margin-block: 8px; overflow-wrap: anywhere; }
.tc-card p { white-space: pre-line; }   /* a card's lines break where WhatsApp breaks them */
.tc-media { width: min(100%, 320px); padding: 8px; background: #fff; border: 1px solid #dfe5e7; border-radius: 10px; }
.tc-media img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 5px; }
.tc-media p { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-document { display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 12px; color: var(--ink); background: #f5f6f6; border: 1px solid #dfe5e7; border-radius: 8px; text-decoration: none; overflow-wrap: anywhere; }
.tc-document > b { padding: 10px 6px; color: #b3261e; background: #fff; border-radius: 5px; }
/* a product card from the business's catalog, as WhatsApp draws one: the picture, the name, the price, a few words */
.tc-product { display: grid; width: min(100%, 280px); gap: 2px; padding: 5px 5px 4px; color: #111b21; background: #fff; border-radius: 12px; border-start-start-radius: 3px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.13); }
.tc-product img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 6px; object-fit: cover; background: #f0f2f5; border-radius: 8px; }
.tc-product > :is(b, .tc-product__price, p, time) { padding-inline: 7px; overflow-wrap: anywhere; }
.tc-product b { font: 15.5px/1.35 var(--f-ui); }
.tc-product__price { font: 15px/1.4 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
.tc-product p { color: var(--wa-meta); font-size: 14px; line-height: 1.45; }
.tc-product time { color: var(--wa-meta); font-size: 11.5px; text-align: end; }

@media (prefers-reduced-motion: reduce) {
  .page-app .fill-line, .waiting::before { animation: none; background-size: 60% 100%, auto; }
  .page-app .ruler__ink { transition: none; }
}
@media (forced-colors: active) {
  .page-app .roomtabs a[aria-current="page"], .journey li.is-now::before, .page-app .station__n { border: 2px solid CanvasText; }
  .page-app .toggle__ui::before { border-color: CanvasText; }
}