/* ─────────────────────────────────────────────────────────────
   עונים לי בוואטסאפ — the settings rooms: «מה הבוט יודע» (#room-bot) and «זמינות ותורים» (#room-availability).
   Loads after app.css. One topic at a time: the topic keys on top (the open one is the yellow key, a topic with
   unsaved changes carries a dashed «עוד לא נשמר»), then that topic's card with its fields, its live WhatsApp example
   and its own save bar.
   The save contract, made visible:
   - not saved: a dashed ring and «עוד לא נשמר» on the topic key and in the save bar; while a topic has changes its bar
     sticks to the bottom of the screen (above the phone's tab bar), so «שמירה» is always one tap away;
   - saved: «נשמר» swept with the family marker, «— הבוט כבר עונה לפי זה», and «נסו את הבוט»
     (forms.js writes .save-ink and keeps form[data-just-saved] for a moment).
   The WhatsApp illustrations (the examples, the live message preview) keep WhatsApp's own colours inside their frame.
   ───────────────────────────────────────────────────────────── */

/* ---------- the topics: a strip of keys ---------- */
.page-app .settings-topic-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.page-app .settings-topic-nav button { display: inline-flex; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 18px; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); font: 16.5px/1.2 var(--f-ui); text-align: center; cursor: pointer; transition: background-color 0.14s ease, box-shadow 0.14s ease; }
.page-app .settings-topic-nav button:hover { background: var(--ivory); }
.page-app .settings-topic-nav button[aria-pressed="true"] { background: var(--yellow); border-width: 2px; padding-inline: 17.5px; box-shadow: var(--shadow-key-sm); }
/* not saved yet: the key turns dashed and says so under its name (settings-navigation.js adds the words; they are part
   of the key's name for screen readers) */
.topic-tab__draft { display: block; color: var(--ink-2); font: 13.5px/1.4 var(--f-ui); white-space: nowrap; }
.page-app .settings-topic-nav button:has(> .topic-tab__draft:not([hidden])) { border-style: dashed; }
.topic-tab__draft[hidden] { display: none; }
/* a topic the plan doesn't include: a grey key that still opens it (to read what it does), «לא במסלול שלכם» under its
   name (forms.js) */
.topic-tab__plan { display: block; color: var(--placeholder); font: 13.5px/1.4 var(--f-ui); white-space: nowrap; }
.topic-tab__plan[hidden] { display: none; }
.page-app .settings-topic-nav button:not([aria-pressed="true"]):has(> .topic-tab__plan:not([hidden])) { color: var(--placeholder); border-color: var(--line-strong); }
@media (max-width: 639.98px) {
  .page-app .room--settings .room__head p { display: none; }
  .page-app .room--settings .room__head { margin-bottom: 16px; }
  .page-app .settings-topic-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .page-app .settings-topic-nav button { min-height: 52px; padding: 8px 10px; font-size: 16px; }
}

/* ---------- a topic: one card ---------- */
.page-app [data-settings-room] .panel { position: relative; margin: 0; padding: clamp(20px, 3vw, 30px) clamp(16px, 3vw, 30px) 0; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: var(--card-shadow); }
.page-app [data-settings-room] > [data-settings-topic] { scroll-margin-top: calc(var(--appbar-h) + var(--roombar-h) + 16px); }
.page-app [data-settings-room] .panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px; margin-bottom: 20px; }
.page-app [data-settings-room] .panel__head h3 { font: clamp(24px, 3vw, 28px)/1.2 var(--f-display); }
/* the topic's own «נסו את הבוט» stays in the DOM as the source of its sample question (forms.js copies data-try onto the
   saved note's link); on screen the app bar's key and that link are enough */
.page-app :is([data-settings-room], .chats-who) .panel__head > [data-open-test] { display: none; }
/* the test chat reads what is saved, so a topic with changes says so beside «נסו את הבוט» */
.page-app [data-settings-room] :is(form[data-settings-topic][data-dirty="1"], [data-settings-topic]:has(> form[data-dirty="1"])) > .panel__head::after { flex-basis: 100%; content: "בבדיקה הבוט עונה לפי מה שכבר נשמר."; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.page-app [data-settings-room] .panel > .hint { max-width: 64ch; margin-bottom: 18px; font-size: 15.5px; }
/* what the topic gives, in one line under its title; it stays outside the plan lock, so a locked topic still says it */
.page-app [data-settings-room] .panel > .panel__lead { max-width: 60ch; margin: -6px 0 22px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.page-app [data-settings-room] .panel > .hint + .hint { margin-top: -6px; }

/* the topic's fields and its live example beside them */
.page-app .settings-layout { display: grid; align-items: start; gap: 28px; }
.page-app .settings-content { min-width: 0; }
.page-app .settings-content > * + * { margin-top: 30px; }
.page-app .settings-content > .hint:first-child { max-width: 64ch; font-size: 15.5px; }
.page-app .settings-content .grid2 { gap: 26px 28px; }
.page-app .settings-content textarea { min-height: 120px; }
.page-app .settings-content .choices { gap: 10px; }
.page-app .settings-content .choices legend { margin-bottom: 12px; }
.page-app .choices + .choices, .page-app .choices + .field, .page-app .field + .choices, .page-app .grid2 + .choices, .page-app .check + .choices { margin-top: 24px; }
/* three short choices on a narrow phone go one under the other, never two in a row and one left alone */
@media (max-width: 479.98px) {
  .page-app .choices--inline:has(> .choice:nth-of-type(3)) { grid-template-columns: minmax(0, 1fr); }
}
/* the short free-text answers (opening hours in words, the policies, the opening line) start at two lines */
.page-app #b-hours, .page-app #f-policies textarea, .page-app .inbox textarea, .page-app #fl-opening { min-height: 84px; }
.page-app .settings-more { padding-top: 18px; border-top: 1px solid var(--hair); }
.page-app .settings-more > summary, .page-app .optional-details > 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 .settings-more[open] > summary { margin-bottom: 16px; }
.page-app .settings-more > .field, .page-app .settings-more > .choices { margin-top: 22px; }
.page-app .optional-details { color: var(--ink-2); font-size: 15.5px; }
.page-app .optional-details[open] > summary { margin-bottom: 10px; }
.page-app .optional-details > .field + .field, .page-app .optional-details > .grid2 { margin-top: 16px; }
#f-policies .settings-content .grid2 { grid-template-columns: 1fr; }

/* the live example: a WhatsApp conversation in a family frame */
.page-app .settings-example > 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 .settings-example__body { max-width: 560px; margin-top: 10px; overflow: hidden; background: var(--sheet); border: 2px solid var(--ink); border-radius: 18px 6px 18px 6px; }
.page-app .settings-example__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.page-app .settings-example__head b { overflow: hidden; font: 16px/1.3 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; }
.page-app .settings-example__thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; background: var(--wa-wall); }
.page-app .settings-example__question, .page-app .settings-example__answer { max-width: 92%; padding: 9px 12px; color: #111b21; background: #fff; border-radius: 10px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.12); font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* drawn from the customer's phone, like the test chat: the customer's question in green on the left, the bot's answer in white on the right */
.page-app .settings-example__question { align-self: flex-end; background: var(--wa-mine); border-start-end-radius: 3px; }
.page-app .settings-example__answer { align-self: flex-start; border-start-start-radius: 3px; }
/* the owner's own words inside the bot's answer carry the family marker: what you wrote, in the customer's chat */
.page-app .settings-example__answer mark, #room-chats .settings-example__answer mark { padding: 0 0.12em; color: inherit; background: linear-gradient(176deg, transparent 50%, var(--yellow) 50%, var(--yellow) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-app .settings-example__body > .hint { padding: 10px 14px 12px; font-size: 14px; }
@media (min-width: 1280px) {
  .page-app [data-settings-room] .settings-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .page-app [data-settings-room] .settings-layout > .settings-example { position: sticky; top: calc(var(--appbar-h) + var(--roombar-h) + 20px); }
  .page-app [data-settings-room] .settings-content .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 1279.98px) {
  .page-app [data-settings-room] .settings-layout > .settings-example { padding-top: 16px; border-top: 1px solid var(--hair); }
}

/* ---------- the save bar: «עוד לא נשמר» while a topic has changes, «נשמר» right after ---------- */
.page-app [data-settings-room] form[data-form] > .panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 28px calc(-1 * clamp(16px, 3vw, 30px)) 0; padding: 18px clamp(16px, 3vw, 30px) 22px; border-top: 1px solid var(--hair); }
.page-app form[data-form] > .panel__foot > .save-msg { order: 2; }
/* the key is yellow only while there is something to save; a saved topic shows it as a quiet key */
.page-app form[data-form]:not([data-dirty="1"]) > .panel__foot > [type="submit"]:not(:disabled) { --btn-bg: var(--sheet); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.16); }
.page-app form[data-form]:not([data-dirty="1"]) > .panel__foot > [type="submit"]:not(:disabled):hover { box-shadow: 3px 4px 0 rgba(27, 26, 23, 0.3); }
.page-app [data-settings-room] form[data-form]:is([data-dirty="1"], [data-just-saved]) > .panel__foot {
  position: sticky;
  z-index: 6;
  bottom: var(--app-bottom-bar, 0px);
  background: var(--sheet);
  border-top: 2px solid var(--ink);
  border-radius: 0 0 26px 6px;
  box-shadow: 0 -14px 26px -16px rgba(27, 26, 23, 0.35);
}
/* the draft: the bar's top edge turns dashed (not real yet) and says «עוד לא נשמר» beside the yellow key */
.page-app [data-settings-room] form[data-form][data-dirty="1"] > .panel__foot { border-top-style: dashed; }
.page-app [data-settings-room] form[data-form][data-dirty="1"] > .panel__foot::after { order: 1; content: "עוד לא נשמר"; color: var(--ink); font: 16.5px/1.3 var(--f-ui); }
.page-app [data-settings-room] form[data-form][data-dirty="1"] > .panel__foot:has(.save-msg.is-bad, [type="submit"]:disabled)::after { display: none; }
.page-app form[data-form][data-dirty="1"] .save-msg.is-ok { display: none; }
.page-app .save-msg { color: var(--ink-2); font: 16px/1.5 var(--f-ui); }
.page-app .save-msg.is-bad { color: var(--err); }
.page-app .save-msg:empty { display: none; }

/* saved: «נשמר» gets the family marker, then the note and the way to try it (also «למי הבוט עונה») */
.save-msg.is-ok { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--ink-2); }
.save-ink { position: relative; display: inline-block; }
.save-ink__pencil { display: none; }
.save-ink__word { padding-inline: 0.12em; color: var(--ink); background: linear-gradient(176deg, transparent 56%, var(--yellow) 56%, var(--yellow) 94%, transparent 94%) no-repeat right / 100% 100%; font: 18px/1.3 var(--f-ui); }
.save-ink__note { font-family: var(--f-ui); }
.save-msg.is-ok > .text-btn { min-height: 44px; }
/* during the setup, a save leads straight on to the next step (forms.js): the one yellow key left in the bar */
.save-msg.is-ok > .save-next { align-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .save-ink__word { animation: marker-sweep 0.7s var(--ease) 0.1s both; }
  .save-ink ~ * { animation: settle-in 0.4s var(--ease) 0.55s both; }
}
@keyframes settle-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 639.98px) {
  .page-app [data-settings-room] form[data-form]:is([data-dirty="1"], [data-just-saved]) > .panel__foot { gap: 6px 14px; padding-block: 12px 14px; border-radius: 0; }
  .page-app [data-settings-room] form[data-form] > .panel__foot .btn--primary { min-height: 52px; }
}

/* ---------- the website import and the questions the bot couldn't answer ---------- */
.page-app .import { margin: 0 0 24px; background: var(--ivory); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); }
.page-app .import summary { display: flex; min-height: 52px; align-items: center; padding: 10px 16px; font: 16.5px/1.3 var(--f-ui); cursor: pointer; }
.page-app .import__body { display: grid; gap: 12px; padding: 0 16px 16px; }
@media (min-width: 720px) {
  .page-app .import__body { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .page-app .import__body .hint { grid-column: 1 / -1; }
}
.page-app #import-msg { max-width: 70ch; font-size: 15.5px; line-height: 1.7; }
.page-app #import-msg a { color: var(--ink); font-family: var(--f-ui); white-space: nowrap; }

/* the customers' own questions, waiting for the owner's answer (a dashed card: not answered yet) */
.page-app .inbox { margin: 0 0 26px; padding: 18px 18px 6px; background: var(--ivory); border: 2px dashed var(--ink); border-radius: var(--leaf-sm); }
.page-app .inbox h4 { font: 19px/1.35 var(--f-ui); }
.page-app .inbox > .hint { margin-top: 4px; }
.page-app .inbox__list { display: grid; gap: 0; margin-top: 10px; list-style: none; }
.page-app .inbox__item { display: grid; gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--line-strong); }
.page-app .inbox__meta { color: var(--ink-2); font: 15px/1.4 var(--f-ui); }

/* ---------- the records (questions, services, closed days): a list of lines, the open one under its line ---------- */
/* each line says what the record is at a glance (a service's length and price, the dates); a tap opens its fields in
   an ivory block right under it, and a dashed «לא נשמר» marks a line with changes. At most one record is open. */
.page-app .edit-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.page-app .edit-row { display: grid; gap: 22px; }
.page-app .edit-row__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.page-app .edit-row__tools .text-btn[data-remove] { color: var(--err); }
.page-app .edit-row__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-app .edit-row__pair--dates { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.page-app .edit-list + .empty, .page-app .edit-list + .btn, .page-app .edit-list + .empty + .btn { margin-top: 16px; }
.page-app .edit-list.record-editor { gap: 0; border-top: 1px solid var(--hair); }
.page-app .record-editor > .edit-row { display: block; border-bottom: 1px solid var(--hair); }
.page-app .record-editor > .edit-row.is-open { margin-block: 8px; background: var(--ivory); border-bottom-color: transparent; border-radius: var(--leaf-xs); }
.page-app .record-head { display: grid; width: 100%; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 10px 8px; color: var(--ink); background: transparent; border: 0; border-radius: var(--leaf-xs); font: 17px/1.4 var(--f-ui); text-align: start; cursor: pointer; }
.page-app .record-head:hover { background: var(--ivory); }
.page-app .record-head__title { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.page-app .record-head__meta { grid-column: 1; color: var(--ink-2); font: 16px/1.4 var(--f-body); font-variant-numeric: tabular-nums lining-nums; }
.page-app .record-head__draft { grid-column: 1; justify-self: start; padding: 0 10px; border: 1.5px dashed var(--ink); border-radius: 999px; font: 13.5px/1.6 var(--f-ui); }
.page-app .record-head > [hidden] { display: none; }
/* the chevron is drawn with physical edges on purpose: it points down (closed) or up (open) in either direction */
.page-app .record-head::after { grid-column: 2; grid-row: 1 / span 3; width: 9px; height: 9px; margin-inline: 4px; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.page-app .record-head[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.page-app .record-body { display: grid; gap: 20px; padding: 4px 16px 18px; }
.page-app .record-body[hidden] { display: none; }
@media (min-width: 640px) {
  /* a wide line: the name, then «לא נשמר», the length and price (or the dates) and the chevron, all on one line */
  .page-app .record-head { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .page-app .record-head__title { grid-row: 1; }
  .page-app .record-head__draft { grid-column: 2; grid-row: 1; }
  .page-app .record-head__meta { grid-column: 3; grid-row: 1; }
  .page-app .record-head::after { grid-column: 4; grid-row: 1; }
}

/* ---------- the week of booking hours: one line per day ---------- */
/* the day's name is the fieldset's legend, placed absolutely: a rendered legend never takes part in a flex or grid */
.page-app #hours { display: grid; margin-top: 4px; border-top: 1px solid var(--hair); }
.page-app #hours .day { position: relative; min-height: 74px; padding: 14px 0; padding-inline-start: 8rem; border-bottom: 1px solid var(--hair); }
.page-app #hours .day__name { position: absolute; top: 14px; inset-inline-start: 0; display: flex; width: 7.5rem; min-height: 44px; align-items: center; margin: 0; padding: 0; font: 17px/1.3 var(--f-ui); }
.page-app #hours .day__body { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.page-app #hours .day__ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.page-app #hours .day.is-closed .day__ranges { display: none; }
.page-app #hours .day.is-closed .day__name { color: var(--ink-soft); }
.page-app #hours .day > .error { margin-top: 8px; }
.page-app #hours .range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.page-app #hours .range__time { display: inline-flex; align-items: center; gap: 8px; }
.page-app #hours .range__word, .page-app #hours .range__break { color: var(--ink-2); font: 16px/1.3 var(--f-ui); }
.page-app #hours .range__time input { width: 7.4rem; min-height: 46px; padding: 8px 10px; font-size: 17px; text-align: center; }
.page-app #hours .day__tools { display: flex; flex-wrap: wrap; gap: 0 18px; }
.page-app #hours .day__tools .text-btn { font-size: 15px; }
/* «אותן שעות לכל הימים» once, on the first open day: set one day, then copy it to the rest of the week */
.page-app #hours .day:not(:nth-child(1 of :not(.is-closed))) [data-copy-day] { display: none; }
@media (max-width: 719.98px) {
  /* a phone: the day and its switch share the first line, the hours go under them */
  .page-app #hours .day { padding-inline-start: 0; }
  .page-app #hours .day__name { width: auto; }
  .page-app #hours .day__open { margin-inline-start: auto; }
  .page-app #hours .day__ranges { flex-basis: 100%; }
}

/* ---------- services and the booking rules ---------- */
.page-app .edit-row--svc .check { padding-block: 6px; }
.page-app .edit-row--svc .check + .hint { margin-top: -14px; }
.page-app #f-rules > .settings-layout .check, .page-app #f-rules .settings-content > .check { padding: 12px 16px; background: var(--ivory); border-radius: var(--leaf-xs); }
/* the booking rules on a wide screen read as a settings list: the question at the start, its answer at the end */
@media (min-width: 720px) {
  .page-app #f-rules .settings-content .grid2 { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair); }
  .page-app #f-rules .grid2 > .field { grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem); align-items: center; gap: 6px 18px; padding-block: 12px; border-bottom: 1px solid var(--hair); }
  .page-app #f-rules .grid2 > .field > .hint { grid-column: 1 / -1; }
  .page-app #f-rules .grid2 > .field:last-child { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- a switch with its one or two lines (the tag next to the time in «סגנון המענה», the catalog) ---------- */
.page-app .setting-switch { display: grid; gap: 8px; }
.page-app .setting-switch > .check { padding: 12px 16px; background: var(--ivory); border-radius: var(--leaf-xs); font: 16.5px/1.45 var(--f-ui); }
.page-app .setting-switch > .hint { max-width: 64ch; }

/* ---------- «קטלוג מוצרים»: the state line (a word and a dot), the key to read again, what the bot knows ---------- */
.page-app .catalog-now { display: grid; justify-items: start; gap: 10px; }
.page-app .catalog-now__line { display: flex; align-items: center; gap: 10px; font: 18px/1.4 var(--f-ui); }
.page-app .catalog-now__line::before { width: 14px; height: 14px; flex: none; content: ""; border: 2px solid var(--line-strong); border-radius: 50%; }
.page-app .catalog-now__line[data-state="on"]::before { background: var(--yellow); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 232, 26, 0.4); }
.page-app .catalog-now__line[data-state="wait"]::before { border-style: dashed; border-color: var(--ink-soft); }
.page-app .catalog-now__line[data-state="bad"] { color: var(--err); }
.page-app .catalog-now__line[data-state="bad"]::before { border-color: var(--err); }
.page-app .catalog-now__line:empty, .page-app .catalog-now > .hint:empty { display: none; }
.page-app .catalog-now > .hint { max-width: 64ch; }
.page-app .catalog-list { justify-self: stretch; margin: 6px 0 0; padding: 0 16px; list-style: none; background: var(--ivory); border-radius: var(--leaf-xs); }
.page-app .catalog-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.page-app .catalog-item:first-child { border-top: 0; }
.page-app .catalog-item__img { display: block; width: 48px; height: 48px; overflow: hidden; background: var(--sheet); border: 1.5px solid var(--line-strong); border-radius: 9px 3px 9px 3px; }
.page-app .catalog-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-app .catalog-item__main { display: grid; min-width: 0; gap: 2px; }
.page-app .catalog-item__main b { font: 16.5px/1.35 var(--f-ui); overflow-wrap: anywhere; }
.page-app .catalog-item__about { overflow: hidden; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.page-app .catalog-item__price { font: 16.5px/1.3 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.page-app .catalog-item__was { display: block; color: var(--ink-soft); font: 14px/1.3 var(--f-body); text-decoration: line-through; }

/* ---------- the catalog's two places (6.10.2026): the store on the site, then the WhatsApp Business catalog ---------- */
/* Each is a small heading, its switch and what the bot knows from it, as before; a hairline between them. */
.page-app .catalog-source { display: grid; gap: 14px; }
.page-app .catalog-source + .catalog-source { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.page-app .catalog-source h4 { font: 19px/1.35 var(--f-ui); }
.page-app .catalog-source__url { max-width: 30rem; }
/* Konimbo's three steps fold like the website import in «פרטי העסק»: the field and its key on one line on wide screens. */
.page-app .site-key { justify-self: stretch; max-width: 42rem; margin: 0; }
.page-app .site-key__steps { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.25em; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (min-width: 720px) { .page-app .site-key__steps { grid-column: 1 / -1; } }

/* ---------- «הבוט כותב כמוכם»: the bot and you on one line — dashed until it learns, then the slider ---------- */
/* An ivory sub-block (the Printed Sheet Rule: no second card). Its one strong move is the signature: two discs, the bot's
   paper one and your yellow one (yellow = the owner's own), joined by a line whose yellow grows toward you, pressed like
   any family key. Everything around it stays plain. */
.page-app .learn { display: grid; gap: 18px; margin-bottom: 30px; padding: 24px clamp(16px, 3vw, 28px) 22px; background: var(--ivory); border-radius: var(--leaf-sm); }
.page-app .learn h4 { font: 21px/1.3 var(--f-ui); }
.page-app .learn__lead { max-width: 56ch; margin-top: -8px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.page-app .learn__got { margin-top: -8px; color: var(--ink-2); font-size: 16.5px; }
.page-app .learn__got b { font: 16.5px/1.4 var(--f-ui); }
/* the signature */
.page-app .voices { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: center; column-gap: 12px; row-gap: 6px; max-width: 560px; }
.page-app .voices__who { display: grid; width: 50px; height: 50px; place-items: center; color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; }
.page-app .voices__who--bot { background: var(--sheet); }
.page-app .voices__who--you { background: var(--yellow); font: 23px/1 var(--f-display); }
.page-app .voices__who .icon { width: 24px; height: 24px; }
.page-app .voices__end { color: var(--ink-2); font: 15px/1.3 var(--f-ui); text-align: center; }
.page-app .voices__word { justify-self: center; padding: 0 0.2em; font: 16.5px/1.4 var(--f-ui); background: linear-gradient(176deg, transparent 52%, var(--yellow) 52%, var(--yellow) 92%, transparent 92%); }
.page-app .voices__word:empty { visibility: hidden; }
.page-app .voices__dash { position: relative; grid-column: 2; grid-row: 1; height: 0; border-top: 2px dashed var(--line-strong); }
.page-app .voices__dash[hidden] { display: none; }
.page-app .voices__dash > i { position: absolute; top: -8px; inset-inline-start: calc(100% - 14px); display: none; width: 14px; height: 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.page-app #learn[data-state="running"] .voices__dash > i { display: block; animation: learn-travel 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes learn-travel { from { inset-inline-start: calc(100% - 14px); } to { inset-inline-start: 0; } }
/* the slider: stronger than ui.css's field rule (input:not(…)×4), a slider is no text field */
.page-app .voices input[type="range"]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { --f: 0.75; -webkit-appearance: none; appearance: none;
  grid-column: 2; grid-row: 1; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.page-app .voices input[type="range"][hidden] { display: none; }
.page-app .voices input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink);
  background: linear-gradient(to left, var(--yellow) calc(14px + (100% - 28px) * var(--f)), var(--sheet) 0); }
.page-app .voices input[type="range"]::-moz-range-track { height: 12px; background: var(--sheet); border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); }
.page-app .voices input[type="range"]::-moz-range-progress { height: 12px; background: var(--yellow); border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); }
.page-app .voices input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); transition: transform 0.14s ease, box-shadow 0.14s ease; }
.page-app .voices input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
.page-app .voices input[type="range"]:hover::-webkit-slider-thumb { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 rgba(27, 26, 23, 0.86); }
.page-app .voices input[type="range"]:active::-webkit-slider-thumb { transform: translate(1px, 2px); box-shadow: 1px 1px 0 rgba(27, 26, 23, 0.86); }
.page-app .voices input[type="range"]:focus-visible { outline: none; }
.page-app .voices input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--ink); outline-offset: 3px; }
.page-app .voices input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--ink); outline-offset: 3px; }
/* before it learns */
.page-app .learn__start { display: grid; justify-items: start; gap: 10px; margin-top: 4px; }
.page-app .learn__start > .hint { max-width: 56ch; }
.page-app .learn .lockline { margin-bottom: 0; background: var(--sheet); }
.page-app .learn__line { max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.page-app .learn__line[data-tone="bad"] { color: var(--err); }
.page-app .learn__line:empty { display: none; }
/* the bot's own answers: a drawn WhatsApp screen in an ink frame (the Quoted Screen Rule), the customer's side of it */
.page-app .learn__done { display: grid; gap: 18px; }
.page-app .learn__preview { display: grid; gap: 8px; }
.page-app .learn__screen { width: 100%; max-width: 560px; }
.page-app .learn__screen .settings-example__thread { min-height: 130px; }
.page-app .learn__screen .settings-example__question:not(:first-child) { margin-top: 10px; }
.page-app .learn__screen .settings-example__answer.is-new { animation: learn-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes learn-in { from { opacity: 0; transform: translateY(6px); } }
.page-app .learn__typing { display: inline-flex; align-self: flex-start; gap: 5px; padding: 13px 14px; background: #fff; border-radius: 10px; border-start-start-radius: 3px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.12); }
.page-app .learn__typing > i { width: 7px; height: 7px; background: var(--wa-meta); border-radius: 50%; animation: learn-dot 1.1s ease-in-out infinite; }
.page-app .learn__typing > i:nth-child(2) { animation-delay: 0.18s; }
.page-app .learn__typing > i:nth-child(3) { animation-delay: 0.36s; }
@keyframes learn-dot { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.page-app .learn__btns { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 6px; }
.page-app .learn__btns > span { padding: 7px 14px; color: var(--wa-teal); background: #fff; border-radius: 10px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.12); font: 14.5px/1.3 var(--f-ui); }
.page-app .learn__note { align-self: flex-start; color: var(--wa-meta); font-size: 13.5px; }
.page-app .learn__preview > .hint:empty { display: none; }
/* the questions waiting (a count in ink), and what exactly it learned, folded */
.page-app .learn__more { display: grid; justify-items: start; gap: 2px; }
.page-app .learn__waiting { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: none; }
.page-app .learn__waiting-text { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.page-app .learn__waiting:hover .learn__waiting-text { text-decoration-thickness: 3px; }
.page-app .learn__count { display: inline-grid; min-width: 30px; height: 30px; place-items: center; padding: 0 7px; color: var(--on-band); background: var(--ink); border-radius: 999px; font: 15px/1 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
.page-app .learn__what > 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 .learn__what[open] { display: grid; justify-self: stretch; gap: 12px; }
.page-app .learn__rules { max-width: 62ch; padding: 12px 14px; background: var(--sheet); border-radius: var(--leaf-xs); font-size: 16px; line-height: 1.7; white-space: pre-line; }
.page-app .learn__label { margin-top: 4px; font: 16px/1.35 var(--f-ui); }
.page-app .learn__examples { display: grid; margin: 0; padding: 0; list-style: none; }
.page-app .learn__example { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 16px; line-height: 1.55; }
.page-app .learn__example:first-child { border-top: 0; }
.page-app .learn__example .text-btn { flex: none; }
.page-app .learn__actions { display: flex; flex-wrap: wrap; gap: 4px 22px; }
/* learned: its real answers are the topic's example, so the drawn one steps aside and the fields take the width */
.page-app #f-style.is-learned .settings-layout > .settings-example { display: none; }
.page-app [data-settings-room] #f-style.is-learned .settings-layout { grid-template-columns: minmax(0, 1fr); }
.page-app #f-style.is-learned .settings-content { max-width: 760px; }
/* the bot's own tone: unchanged until it learns; then one quiet line that opens it */
.page-app .style-presets > summary { display: none; }
.page-app .style-presets > fieldset + fieldset { margin-top: 30px; }
.page-app #f-style.is-learned .style-presets > summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); font: 15.5px/1.4 var(--f-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; cursor: pointer; }
.page-app #f-style.is-learned .style-presets[open] > summary { margin-bottom: 16px; }
/* «שאלות שמצאנו בצ׳אטים»: the family inbox (dashed ink = not real yet); a question, its answer, «הוספה» or «לא צריך» */
.page-app .sugg { gap: 4px; }
.page-app .sugg__q { font: 17px/1.4 var(--f-ui); }
.page-app .sugg__a { max-width: 62ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.page-app .sugg > .actions { margin-top: 8px; }

/* ---------- «כפתורים ותמונות»: the message workbench ---------- */
.page-app .interactive-panel { min-width: 0; }
.page-app .lockline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 70ch; margin-bottom: 18px; padding: 12px 16px; color: var(--ink-2); background: var(--ivory); border: 1.5px dashed var(--ink); border-radius: var(--leaf-xs); line-height: 1.6; }
#interactive-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
/* not in the plan: the fields stay readable, so their own words say what each one does, but grey and inert. Grey by
   colour (the placeholder grey, still 5:1 on the sheet), not by fading: the explanations keep their contrast. */
.page-app :is(.plan-lock, #interactive-controls):disabled { color: var(--placeholder); filter: grayscale(1); }
.page-app :is(.plan-lock, #interactive-controls):disabled :is(.field__label, legend, .hint, .empty, .check, .choice, .choice small, .record-head, .record-head__meta, .day__name, .range__word, .range__break, .btn, .text-btn) { color: var(--placeholder); }
/* ui.css's disabled field look loses to its own base selector for text inputs, so it is spelled out here */
.page-app :is(.plan-lock, #interactive-controls):disabled :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { color: var(--placeholder); background-color: var(--ivory); border-style: dashed; border-color: var(--line-strong); }
.page-app :is(.plan-lock, #interactive-controls):disabled :is(.choice, .btn) { border-color: var(--line-strong); box-shadow: none; }
.page-app :is(.plan-lock, #interactive-controls):disabled :is(.check, .choice, .record-head) { cursor: not-allowed; }
.page-app [data-settings-room] .check:has(> input:disabled) { color: var(--placeholder); cursor: not-allowed; }
#f-interactive .message-workbench-picker { margin-top: 6px; }
#f-interactive .message-workbench-picker > h4 { margin-bottom: 14px; font: 19px/1.35 var(--f-ui); }
#f-interactive .message-type-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; overflow: visible; }
#f-interactive .message-type-picker > button { display: grid; min-height: 76px; align-content: center; gap: 6px; padding: 12px 14px; color: var(--ink); background: var(--field-white); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.3 var(--f-ui); text-align: start; white-space: normal; transition: background-color 0.14s ease; }
#f-interactive .message-type-picker > button:hover { background: var(--ivory); }
#f-interactive .message-type-picker > button[aria-pressed="true"] { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-key-sm); }
/* on in the bot = the live dot, off = a dashed ring */
#f-interactive .message-type-picker small { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font: 13.5px/1.3 var(--f-ui); }
#f-interactive .message-type-picker small::before { width: 9px; height: 9px; flex: none; content: ""; border: 1.5px dashed currentColor; border-radius: 50%; }
#f-interactive .message-type-picker small.is-on { color: var(--ink); }
#f-interactive .message-type-picker small.is-locked { color: var(--placeholder); }
#f-interactive .message-type-picker small.is-locked::before { display: none; }
#f-interactive:has(#interactive-controls:disabled) .message-type-picker > button { color: var(--placeholder); border-color: var(--line-strong); }
#f-interactive .message-type-picker small.is-on::before { background: var(--ink); border: 1.5px solid var(--ink); }
#f-interactive .message-type-mobile { display: none; }
#f-interactive .message-workbench-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; margin: 26px calc(-1 * clamp(16px, 3vw, 30px)) 0; padding: 16px clamp(16px, 3vw, 30px); background: var(--sheet); border-block: 1px solid var(--hair); }
#f-interactive .message-workbench-bar > div { flex: 1 1 260px; }
#f-interactive .message-workbench-bar h4 { font: 21px/1.35 var(--f-ui); }
#f-interactive .message-workbench-bar .hint { max-width: 56ch; margin-top: 4px; }
#f-interactive .message-workbench-bar .check { align-items: center; padding: 10px 16px; background: var(--ivory); border-radius: var(--leaf-xs); font-family: var(--f-ui); }
#f-interactive .interactive-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; margin-top: 24px; }
#f-interactive #interactive-controls { grid-column: auto; grid-row: auto; }
#f-interactive .message-editor-section { margin: 0; padding: 0; border: 0; }
#f-interactive .message-editor-section > .hint { max-width: 58ch; margin: 0 0 20px; font-size: 15.5px; line-height: 1.7; }
#f-interactive .message-editor-section[data-editor-group="choices"] > h4 { margin-bottom: 12px; font: 19px/1.4 var(--f-ui); }
#f-interactive .message-editor-section .edit-list { gap: 24px; }
#f-interactive .message-editor-section .edit-row { gap: 20px; }
#f-interactive .message-editor-section .edit-row + .edit-row { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--hair); }
#f-interactive .card-editor__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
#f-interactive .card-editor__head > b { font: 20px/1.3 var(--f-ui); }
#f-interactive .card-editor__head .text-btn { min-height: 44px; font-size: 15px; }
#f-interactive .message-item-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
#f-interactive .message-item-nav:empty { display: none; }
#f-interactive .message-item-tab { display: flex; min-width: 0; min-height: 64px; align-items: center; gap: 10px; padding: 8px; color: var(--ink-2); background: var(--field-white); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); font: 15px/1.35 var(--f-ui); text-align: start; }
#f-interactive .message-item-tab > img, #f-interactive .message-item-tab__number { display: grid; width: 42px; height: 42px; flex: none; object-fit: cover; place-items: center; background: var(--ivory); border-radius: 8px 3px 8px 3px; font-family: var(--f-ui); }
#f-interactive .message-item-tab > span:last-child { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
#f-interactive .message-item-tab:hover { background: var(--ivory); }
#f-interactive .message-item-tab[aria-pressed="true"] { color: var(--ink); background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-key-sm); }
#f-interactive .action-header-upload { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 22px; }
#f-interactive .action-header-upload [data-upload-status] { flex-basis: 100%; }
[data-upload-status]:empty { display: none; }
#f-interactive #action-add, #f-interactive #card-add, #f-interactive #media-add { min-height: 48px; margin-top: 22px; }
#f-interactive .message-preview { display: none; }
@media (max-width: 680px) {
  #f-interactive .message-type-picker, #f-interactive .message-workbench-picker > h4 { display: none; }
  #f-interactive .message-type-mobile { display: grid; gap: 8px; }
  #f-interactive .message-workbench-bar { gap: 12px; padding-block: 12px; }
  #f-interactive .message-workbench-bar > div { flex-basis: 100%; }
  #f-interactive .message-workbench-bar .hint { display: none; }
  #f-interactive .message-workbench-bar h4 { font-size: 19px; }
  #f-interactive .message-item-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* where a picture goes: a dashed tile until there is one */
.page-app .media-tile { position: relative; display: grid; width: 100%; min-height: 160px; padding: 0; overflow: hidden; place-items: center; color: var(--ink-2); background: var(--ivory); border: 2px dashed var(--ink); border-radius: var(--leaf-xs); cursor: pointer; }
.page-app .media-tile:hover { background: var(--sheet); }
.page-app .media-tile img { display: block; width: 100%; height: 190px; object-fit: cover; }
.page-app .media-tile__empty { display: grid; justify-items: center; gap: 8px; padding: 22px; text-align: center; }
.page-app .media-tile__empty b { font: 16.5px/1.3 var(--f-ui); color: var(--ink); }
.page-app .media-tile__empty small { font-size: 14px; }
.page-app .media-tile__icon { width: 30px; height: 30px; padding: 4px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.page-app .media-tile__change { position: absolute; bottom: 8px; left: 8px; padding: 6px 12px; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 999px; font: 14px/1.2 var(--f-ui); }
.page-app .media-tile--attachment { min-height: 120px; }
.page-app .media-file { display: flex; width: 100%; align-items: center; gap: 12px; padding: 22px 16px; overflow-wrap: anywhere; }
.page-app .media-file > b, .page-app .media-library__pdf { color: var(--err); }
.page-app .media-file > b { padding: 12px 8px; background: var(--sheet); border: 1.5px solid var(--err); border-radius: 6px; font-size: 14px; }
.page-app :is(.is-dragging, .media-tile.is-dragging) { outline: 3px solid var(--ink); outline-offset: -3px; background: var(--yellow); }

/* the live preview: WhatsApp inside a family frame */
.page-app .message-preview { min-width: 0; padding: 14px; background: var(--ivory); border: 2px solid var(--ink); border-radius: 18px 6px 18px 6px; }
.page-app .message-preview__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 12px; }
.page-app .message-preview__heading > b { font: 16.5px/1.3 var(--f-ui); }
.page-app .preview-state { padding: 2px 9px; color: var(--ink-2); background: var(--sheet); border: 1.5px solid var(--line-strong); border-radius: 999px; font: 12.5px/1.45 var(--f-ui); }
.page-app .preview-chat { min-width: 0; overflow: hidden; background: var(--wa-wall); border: 1.5px solid var(--ink); border-radius: 14px; }
.page-app .preview-chat__head { display: flex; align-items: center; gap: 9px; padding: 11px 12px; color: #fff; background: var(--wa-bar); }
.page-app .preview-chat__head .phone__avatar { width: 36px; height: 36px; margin: 0; color: var(--wa-bar); background: #d6e9de; font-size: 18px; }
.page-app .preview-chat__head > span:nth-child(2) { min-width: 0; flex: 1; }
.page-app .preview-chat__head b { display: block; overflow: hidden; font: 15px/1.3 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; }
.page-app .preview-chat__head small { display: block; margin-top: 2px; color: #d5ebe4; font-size: 12px; }
.page-app .preview-chat__head > .icon { width: 20px; height: 20px; }
.page-app .preview-chat__body { display: flex; min-height: 252px; max-height: 460px; flex-direction: column; gap: 10px; padding: 16px 10px; overflow-x: hidden; overflow-y: auto; }
.page-app .preview-chat__body > * { flex-shrink: 0; }
.page-app .preview-chat__compose { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #f0f2ef; }
.page-app .preview-chat__compose > span { flex: 1; padding: 7px 12px; color: #75807a; background: #fff; border-radius: 20px; font-size: 13px; }
.page-app .preview-chat__compose .icon { width: 21px; height: 21px; color: var(--wa-teal); }
.page-app .preview-note { min-height: 38px; margin-top: 12px; font: 15px/1.6 var(--f-ui); overflow-wrap: anywhere; }
.page-app .message-preview > .hint { margin-top: 8px; font-size: 13.5px; }
/* the WhatsApp message pieces the preview draws (visual-editor.js) */
.vp-bubble { position: relative; max-width: 94%; align-self: flex-start; padding: 10px 10px 5px; color: #111b21; background: #fff; border-radius: 9px 0 9px 9px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.1); font-size: 14.5px; text-align: start; }
.vp-bubble--mine { align-self: flex-end; max-width: 86%; background: var(--wa-mine); border-radius: 0 9px 9px 9px; }
.vp-bubble p { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.vp-time { display: block; margin-top: 4px; color: #667781; font-size: 11px; text-align: end; direction: ltr; }
.vp-actions { margin: 8px -10px -1px; }
.vp-action { display: block; width: 100%; min-height: 44px; padding: 10px 8px; color: #027eb5; background: #fff; border: 0; border-top: 1px solid #e9edef; font-size: 14.5px; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.vp-action:hover { background: #f5f6f6; }
.vp-carousel { display: flex; gap: 9px; max-width: 100%; padding: 2px 1px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.vp-card { display: flex; flex: 0 0 83%; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dbe0d8; border-radius: 10px; scroll-snap-align: start; }
.vp-card > * { flex-shrink: 0; }
.vp-card__copy { flex: 1; padding: 10px; }
.vp-card__copy b { display: block; font: 14.5px/1.35 var(--f-ui); overflow-wrap: anywhere; }
.vp-card__copy p { margin-top: 5px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.vp-scroll-hint { padding-inline: 2px; color: #54656f; font-size: 12px; }
.vp-upload { position: relative; display: grid; width: 100%; min-height: 148px; padding: 0; overflow: hidden; place-items: center; color: var(--ink-2); background: #eef1ec; border: 0; border-bottom: 1px solid #e0e7df; cursor: pointer; }
.vp-upload img { display: block; width: 100%; height: 148px; object-fit: cover; }
.vp-upload__empty { display: grid; justify-items: center; gap: 8px; padding: 24px 12px 30px; }
.vp-upload__empty > span { font-size: 2rem; line-height: 1; }
.vp-upload__empty b { font: 14px/1.3 var(--f-ui); }
.vp-upload__label { position: absolute; bottom: 6px; padding: 3px 8px; color: var(--ink); background: rgba(255, 253, 247, 0.94); border-radius: 999px; font-size: 12px; }
.vp-upload--header { min-height: 92px; margin-top: 8px; border-radius: 5px; }
.vp-upload--header img { height: 140px; }
.vp-upload--header .vp-upload__empty { gap: 4px; padding: 10px 8px 25px; }
.vp-upload--header .vp-upload__empty > span { font-size: 1.4rem; }
.vp-upload:disabled { cursor: default; }
.vp-list-sheet { margin-top: 4px; padding: 12px; background: #fff; border: 1px solid #d4ddd4; border-radius: 10px; font-size: 14px; }
.vp-list-sheet > b { display: block; margin-bottom: 8px; font-family: var(--f-ui); }
.vp-list-row { display: block; width: 100%; min-height: 44px; padding: 10px 4px; color: #111b21; background: #fff; border: 0; border-top: 1px solid #e9edef; font-size: 14px; text-align: start; cursor: pointer; }
.vp-list-row:hover { background: #f5f6f6; }
.vp-media-tabs { display: flex; gap: 4px; overflow-x: auto; }
.vp-media-tabs button { flex: none; min-height: 44px; padding: 6px 10px; color: var(--ink-2); background: transparent; border: 1.5px solid transparent; border-radius: 8px; font: 13.5px/1.2 var(--f-ui); cursor: pointer; }
.vp-media-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--sheet); border-color: var(--ink); }
.vp-document { display: flex; width: 100%; align-items: center; gap: 10px; margin-top: 8px; padding: 12px; color: #111b21; background: #f5f6f6; border: 1px solid #e1e7dc; border-radius: 6px; text-align: start; cursor: pointer; }
.vp-document > b { padding: 14px 7px; color: #b3261e; background: #fff; border-radius: 4px; font-size: 12.5px; }
.vp-document span { min-width: 0; overflow-wrap: anywhere; }
.vp-document small { display: block; margin-top: 4px; color: #667781; font-size: 12px; }
.vp-map { position: relative; display: grid; height: 130px; margin-top: 8px; overflow: hidden; place-items: center; background: repeating-linear-gradient(35deg, transparent 0 48px, #fff 49px 59px, transparent 60px 100px), repeating-linear-gradient(-35deg, #e6ecde 0 57px, #fff 58px 68px, #dae4d5 69px 110px); border: 1px solid #d7e1ce; border-radius: 5px; }
.vp-map__pin { position: absolute; top: 36px; left: calc(50% - 10px); width: 20px; height: 28px; padding-top: 1px; color: #fff; background: #da4c40; border: 2px solid #fff; border-radius: 12px 12px 12px 0; box-shadow: 0 1px 4px #758270; transform: rotate(-45deg); text-align: center; }
.vp-map > span:last-child { align-self: end; margin-bottom: 7px; padding: 3px 8px; color: var(--ink); background: #fff; border-radius: 999px; font-size: 12px; text-align: center; }
.vp-map-title { display: block; margin-top: 7px; font-family: var(--f-ui); }
@media (min-width: 1280px) {
  #f-interactive .interactive-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); gap: 30px; }
  #f-interactive .message-preview { position: sticky; top: calc(var(--appbar-h) + var(--roombar-h) + 20px); display: block; grid-column: 2; grid-row: 1; width: 100%; max-width: none; margin: 0; padding: 16px; }
  #f-interactive #interactive-controls { grid-column: 1; grid-row: 1; }
  #f-interactive #editor-preview-toggle { display: none; }
}
@media (max-width: 560px) {
  .page-app .message-preview { padding: 10px; }
  .page-app .preview-chat__body { min-height: 190px; max-height: 320px; }
  .vp-card { flex-basis: 77%; }
  .vp-upload, .vp-upload img { min-height: 112px; height: 112px; }
  .vp-upload--header { min-height: 90px; height: auto; }
}

/* the workbench's dialogs: family cards over the dimmed page */
.page-app :is(.media-picker, .editor-live-preview) { margin: auto; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); box-shadow: 0 24px 60px rgba(27, 26, 23, 0.22), 6px 8px 0 rgba(27, 26, 23, 0.16); }
.page-app .editor-live-preview { width: min(calc(100% - 24px), 470px); max-height: calc(100dvh - 24px); padding: 16px; overflow-y: auto; }
.page-app .editor-live-preview__bar { position: sticky; z-index: 3; top: -16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -16px -16px 14px; padding: 12px 16px; background: var(--sheet); border-bottom: 1px solid var(--hair); }
.page-app .editor-live-preview__bar > b { font: 17px/1.3 var(--f-ui); }
.page-app .editor-live-preview .message-preview { position: static; display: block; width: 100%; max-width: none; margin: 0; padding: 12px; }
.page-app .editor-live-preview .preview-chat__body { min-height: 220px; max-height: min(58dvh, 460px); }
.page-app .media-picker { width: min(calc(100% - 32px), 660px); max-height: calc(100dvh - 48px); padding: 24px; overflow-y: auto; }
.page-app .media-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.page-app .media-picker__head h3 { font: 26px/1.2 var(--f-display); }
.page-app :is(.media-picker__upload, .contacts__file) { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 14px; background: var(--ivory); border: 2px dashed var(--ink); border-radius: var(--leaf-sm); text-align: center; cursor: pointer; }
.page-app :is(.media-picker__upload, .contacts__file):hover { background: var(--yellow); }
.page-app :is(.media-picker__upload, .contacts__file) input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.page-app :is(.media-picker__upload, .contacts__file):focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.page-app :is(.media-picker__upload, .contacts__file) b { font: 18px/1.3 var(--f-ui); }
.page-app :is(.media-picker__upload, .contacts__file) span { color: var(--ink-2); font-size: 15px; }
.page-app .media-picker > :is(.hint, .error, .waiting) { margin-top: 12px; }
.page-app .media-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 24px; }
.page-app .media-library h4 { grid-column: 1 / -1; color: var(--ink-2); font: 16px/1.3 var(--f-ui); }
.page-app .media-library__entry { display: grid; min-width: 0; align-content: start; gap: 2px; }
.page-app .media-library__item { display: grid; width: 100%; min-width: 0; overflow: hidden; color: var(--ink); background: var(--field-white); border: 2px solid var(--line-strong); border-radius: var(--leaf-xs); text-align: start; cursor: pointer; }
.page-app .media-library__item:hover { border-color: var(--ink); }
.page-app .media-library__item img { width: 100%; height: 100px; object-fit: cover; }
.page-app .media-library__item > span:last-child { padding: 8px; font-size: 13.5px; overflow-wrap: anywhere; }
.page-app .media-library__pdf { display: grid; height: 100px; place-items: center; font: 24px/1 var(--f-ui); }
.page-app .media-library__remove { min-height: 44px; justify-content: center; font-size: 14px; }
.page-app .media-library__remove:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; }

/* ---------- «מה לשנות בבוט?» (6.10.2026): the owner's words → a change, before → after ---------- */
/* An ivory block over the topic keys (the Printed Sheet Rule: no second card). Idle it is one line to write in and its
   key; the change comes back in the same block under a hairline: where it is (a link to the topic), then the field as it
   will be, new words in the family marker (the owner's own), old ones struck. The yellow key is «לשמור» alone. */
.page-app .tell { display: grid; gap: 14px; margin-bottom: 22px; padding: 18px clamp(16px, 3vw, 24px); background: var(--ivory); border-radius: var(--leaf-sm); }
.page-app .tell__ask { display: grid; gap: 10px; }
.page-app .tell__title { font: 19px/1.35 var(--f-ui); }
.page-app .tell__quote { max-width: 70ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.page-app .tell__quote q { font-style: normal; }
.page-app .tell__row { display: grid; gap: 10px; }
.page-app .tell__row textarea { min-height: 60px; resize: vertical; }
.page-app .tell__row .btn { justify-self: start; }
@media (min-width: 720px) {
  .page-app .tell__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.page-app #tell-msg:empty { display: none; }
.page-app .tell__out { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.page-app .tell__out[hidden] { display: none; }
.page-app .tell__explain { max-width: 70ch; font: 16.5px/1.6 var(--f-ui); outline: none; }
.page-app .tell__explain:empty { display: none; }
.page-app .tell__changes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.page-app .tell__change { display: grid; gap: 6px; }
.page-app .tell__where { color: var(--ink-2); font: 14.5px/1.4 var(--f-ui); }
.page-app .tell__where a { color: var(--ink); }
.page-app .tell__text, .page-app .tell__items { max-width: 70ch; font-size: 16.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-app .tell__items { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.2em; }
.page-app .tell mark { padding: 0 0.12em; color: inherit; background: linear-gradient(176deg, transparent 50%, var(--yellow) 50%, var(--yellow) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-app .tell del { color: var(--ink-soft); text-decoration-thickness: 1.5px; }
.page-app .tell__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* ---------- «מהלך השיחה» (6.10.2026): the conversation as a path of three stops ---------- */
/* Its signature: numbered paper discs on one ink line down the start side, in the order a conversation goes (opening, what
   to find out, the owner's situations); the line runs out dashed after the last stop. Each stop's title sits beside its
   disc, its fields under the title; the rest is the topic's usual parts (a field, choices, the record list, chips). An
   empty list says so in a plain grey line, no dashed box: the ideas and the add keys already show what goes there. */
.page-app .flow-path { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: flow-stop; }
.page-app .flow-stop { position: relative; display: grid; align-content: start; gap: 16px; padding-bottom: 36px; padding-inline-start: 58px; counter-increment: flow-stop; }
.page-app .flow-stop::before { position: absolute; top: 0; inset-inline-start: 0; display: grid; width: 40px; height: 40px; place-items: center; content: counter(flow-stop); color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; font: 20px/1 var(--f-display); }
.page-app .flow-stop::after { position: absolute; top: 46px; bottom: 6px; inset-inline-start: 19px; content: ""; border-inline-start: 2px solid var(--ink); }
.page-app .flow-stop:last-child { padding-bottom: 6px; }
.page-app .flow-stop:last-child::after { border-inline-start: 2px dashed var(--line-strong); }
.page-app .flow-stop__title { display: flex; min-height: 40px; align-items: center; font: 20px/1.3 var(--f-ui); }
.page-app .flow-stop > .btn { justify-self: start; }
.page-app .flow-stop > .empty { padding: 0; border: 0; }
.page-app .flow-stop > .choices { margin-top: 8px; }
.page-app .flow-asks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.page-app .flow-asks:empty { display: none; }
.page-app .flow-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.page-app .flow-ask__field { display: block; min-width: 0; }
.page-app .flow-ideas { display: flex; flex-wrap: wrap; gap: 8px; }
/* the ads' fixed messages, under the opening line they are answered with */
.page-app .flow-ads { display: grid; gap: 8px; }
.page-app .flow-ads > h5 { margin: 0; }
.page-app .flow-ads > .hint { max-width: 60ch; margin: 0; }
.page-app .flow-ads > .btn { justify-self: start; }
.page-app .flow-ads > .empty { display: none; }
.page-app .flow-ideas .chip { min-height: 42px; padding-inline: 14px; font-size: 15px; }
.page-app .settings-content > .flow-path + .field { padding-top: 26px; border-top: 1px solid var(--hair); }
/* a phone: the fields take the whole width, so the numbered discs stay beside the titles and the line between them goes */
@media (max-width: 479.98px) {
  .page-app .flow-stop { padding-inline-start: 0; }
  .page-app .flow-stop::before { width: 34px; height: 34px; font-size: 18px; }
  .page-app .flow-stop::after { display: none; }
  .page-app .flow-stop__title { min-height: 34px; padding-inline-start: 46px; font-size: 18.5px; }
  .page-app .flow-stop .choices--inline { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .vp-carousel { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .page-app .settings-topic-nav button[aria-pressed="true"], #f-interactive .message-type-picker > button[aria-pressed="true"] { border: 2px solid CanvasText; }
}