/* ─────────────────────────────────────────────────────────────
   עונים לי בוואטסאפ — the app-side components, on top of family.css (fonts, tokens, base, .btn, the lockup).
   Loaded by the dashboard (/bot/app/), /bot/admin/, /bot/soon.html and the server's own pages (404, errors).
   The family rules, applied to controls:
   - ink on cream paper; yellow has three jobs only: the one action on screen, a live or chosen state,
     and the owner's own words (the marker);
   - a dashed outline means "not real yet": waiting, not saved, a sample;
   - status colours (--ok, --err, --warn-text) are text and rings, never fills;
   - everything starts from the right: a switch turns on toward the left.
   The WhatsApp illustrations (test chat, live previews) keep WhatsApp's own colours, inside their frame only.
   ───────────────────────────────────────────────────────────── */

:root {
  --field-h: 52px;
  --dash: 2px dashed var(--line-strong);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* WhatsApp's own colours, only inside a drawn WhatsApp screen (never our mark, never a control of ours) */
  --wa-wall: #efeae2;
  --wa-mine: #d9fdd3;
  --wa-bar: #075e54;
  --wa-teal: #00705f;
  --wa-chip: #d9fdd3;
  --wa-chip-ink: #0b4a36;
  color-scheme: light;
}

html { caret-color: var(--ink); accent-color: var(--ink); }
ul, ol { margin: 0; padding: 0; }
dl, dd, figure { margin: 0; }
h4 { margin: 0; font: 18px/1.35 var(--f-ui); font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
[tabindex="-1"]:focus { outline: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; }
.dir-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* the skip link: a yellow key that appears on the first Tab */
.skip { position: fixed; z-index: 1000; top: 8px; inset-inline-start: 8px; min-height: 44px; padding: 10px 16px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.3 var(--f-ui); text-decoration: none; clip-path: inset(0 100% 100% 0); }
.skip:focus { clip-path: none; }

/* icons: one stroke family, drawn in the page's ink */
.icon { display: inline-block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon--fill { fill: currentColor; stroke: none; }
.icon-btn { display: inline-grid; width: 44px; height: 44px; flex: none; place-items: center; padding: 0; color: var(--ink); background: none; border: 0; border-radius: 50%; }
.icon-btn:hover { background: var(--ivory); }

/* ── buttons: the family key (family.css) and the app's own kinds ── */
.btn .icon { width: 20px; height: 20px; }
.btn--secondary, .btn--paper { box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.16); }
.btn--secondary:hover, .btn--paper:hover { box-shadow: 3px 4px 0 rgba(27, 26, 23, 0.3); }
/* quiet: the family edge without the key's shadow, for actions that are not the point of the screen (move, disconnect,
   cancel a line, «חזרה») */
.btn--quiet { --btn-bg: transparent; box-shadow: none; }
.btn--quiet:hover { --btn-bg: var(--sheet); }
.btn--danger { color: var(--err); border-color: var(--err); box-shadow: none; }
.btn--danger:hover { --btn-bg: var(--err); color: #fff; }
/* connecting WhatsApp is the step's one action: the yellow key, never WhatsApp green */
.btn--wa { --btn-bg: var(--yellow); box-shadow: var(--shadow-hard); }
.btn--wa:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 rgba(27, 26, 23, 0.86); }
.btn--wa:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(27, 26, 23, 0.86); }
.btn--big { min-height: 64px; padding: 16px 36px; font-size: 20px; }
.btn--wide { width: 100%; }
/* not available: a flat key with a faint edge (dashed is kept for what is not real yet: unsaved, waiting, samples) */
.btn:disabled, .btn[aria-disabled="true"] { --btn-bg: var(--ivory); color: var(--ink-soft); border-color: var(--hair); box-shadow: none; transform: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn--wa:hover, .btn--wa:active { transform: none; } }

/* text actions: an underlined word in the label face, a 44px target */
.text-link, .text-btn { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding: 4px 2px; color: var(--ink); background: none; border: 0; font: 16px/1.35 var(--f-ui); text-align: start; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.text-link:hover, .text-btn:hover { text-decoration-thickness: 3px; }
.text-btn:disabled { color: var(--ink-soft); text-decoration: none; cursor: not-allowed; }
.text-link .icon, .text-btn .icon { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* ── fields: white wells with an ink edge; focus = ink outline in a yellow halo ── */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.field label { display: grid; gap: 8px; }
.field__label, legend { padding: 0; color: var(--ink); font: 16px/1.4 var(--f-ui); }
legend { margin-bottom: 10px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--field-h);
  padding: 12px 14px;
  color: var(--ink);
  background: var(--field-white);
  border: 2px solid var(--ink);
  border-radius: var(--leaf-xs);
  font: 17px/1.45 var(--f-body);   /* 16px and up: no zoom on focus on an iPhone */
}
textarea { min-height: 112px; line-height: 1.6; resize: vertical; }
select {
  padding-inline-end: 42px;
  background: var(--field-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 14px center / 16px;
  -webkit-appearance: none;
  appearance: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
::placeholder { color: var(--placeholder); opacity: 1; }
[aria-invalid="true"]:is(input, select, textarea) { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
:is(input, select, textarea):disabled { color: var(--ink-soft); background-color: var(--ivory); border-style: dashed; border-color: var(--line-strong); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
input[type="time"], input[type="date"], input[type="number"] { font-variant-numeric: tabular-nums lining-nums; }

.hint { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.hint a { color: var(--ink); }
.error { color: var(--err); font: 15.5px/1.5 var(--f-ui); }
.check { display: flex; min-height: 44px; align-items: flex-start; gap: 12px; padding-block: 10px; line-height: 1.55; cursor: pointer; }
.check input { margin-top: 2px; }
.check a { color: var(--ink); }

/* choices: radio cards; the chosen one is a yellow key */
.choices { display: grid; gap: 10px; }
.choices--inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice { position: relative; display: flex; min-height: 52px; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--leaf-xs); cursor: pointer; transition: background-color 0.14s ease, box-shadow 0.14s ease; }
.choice:hover { background: var(--ivory); }
.choice:has(input:checked) { background: var(--yellow); box-shadow: var(--shadow-key-sm); }
.choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.choice input { margin-top: 2px; }
.choice b { display: block; font: 17px/1.35 var(--f-ui); }
.choice small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

/* chips: a choice you press (filters, ready questions); pressed = yellow */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding: 6px 16px; color: var(--ink); background: var(--field-white); border: 1.5px solid var(--ink); border-radius: 999px; font: 15px/1.2 var(--f-ui); white-space: nowrap; cursor: pointer; }
.chip:hover { background: var(--ivory); }
.chip[aria-pressed="true"] { background: var(--yellow); box-shadow: var(--shadow-key-sm); }
.chip:disabled { color: var(--ink-soft); background: var(--ivory); border-style: dashed; border-color: var(--line-strong); cursor: not-allowed; }

/* pills: a state, one dot and a word. ok = the live yellow dot, wait = a dashed ring (not real yet), bad = red */
.pill { display: inline-flex; min-height: 28px; align-items: center; gap: 7px; padding: 2px 11px; color: var(--ink-2); background: var(--sheet); border: 1.5px solid var(--line-strong); border-radius: 999px; font: 13.5px/1.3 var(--f-ui); white-space: nowrap; }
.pill::before { width: 9px; height: 9px; flex: none; content: ""; border: 1.5px solid currentColor; border-radius: 50%; }
.pill--ok { color: var(--ink); border-color: var(--ink); }
.pill--ok::before { background: var(--yellow); border-color: var(--ink); box-shadow: 0 0 0 2px rgba(255, 232, 26, 0.35); }
.pill--wait { color: var(--ink-soft); border-style: dashed; }
.pill--wait::before { border-style: dashed; }
.pill--bad { color: var(--err); border-color: var(--err); }
.pill--plain::before { display: none; }

/* the switch: a track and a knob; on = yellow, the knob travels to the left (the end in RTL).
   Markup: label.toggle > input[type=checkbox][role=switch] + span.toggle__ui > span(off word) + span(on word).
   The word beside the track is the current state only, so a tap never contradicts what it says. */
.toggle { position: relative; display: inline-flex; min-height: 44px; align-items: center; vertical-align: middle; cursor: pointer; }
.toggle input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle__ui { position: relative; display: inline-flex; min-height: 32px; align-items: center; padding-inline-start: 66px; color: var(--ink-2); font: 16px/1.2 var(--f-ui); white-space: nowrap; }
.toggle__ui::before { position: absolute; top: 50%; inset-inline-start: 0; width: 54px; height: 32px; margin-top: -16px; content: ""; background: var(--ivory); border: 2px solid var(--ink); border-radius: 999px; transition: background-color 0.18s ease; }
.toggle__ui::after { position: absolute; top: 50%; inset-inline-start: 6px; width: 20px; height: 20px; margin-top: -10px; content: ""; background: var(--ink); border-radius: 50%; transition: inset-inline-start 0.18s var(--ease); }
.toggle input:checked + .toggle__ui { color: var(--ink); }
.toggle input:checked + .toggle__ui::before { background: var(--yellow); }
.toggle input:checked + .toggle__ui::after { inset-inline-start: 28px; }
.toggle input:checked + .toggle__ui > span:first-child, .toggle input:not(:checked) + .toggle__ui > span:last-child { display: none; }
.toggle input:focus-visible + .toggle__ui::before { outline: 3px solid var(--ink); outline-offset: 3px; }
.toggle:hover input:not(:disabled) + .toggle__ui::before { box-shadow: 0 0 0 4px rgba(255, 232, 26, 0.45); }
.toggle input:disabled { cursor: not-allowed; }
.toggle input:disabled + .toggle__ui { opacity: 0.55; }
.toggle input:disabled + .toggle__ui::before { border-style: dashed; }

/* tabs: a segmented strip, the chosen one a raised yellow key */
.tabs { display: inline-flex; max-width: 100%; gap: 4px; padding: 4px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
.tab { min-height: 44px; padding: 6px 16px; color: var(--ink-2); background: transparent; border: 0; border-radius: 9px 3px 9px 3px; font: 16px/1.2 var(--f-ui); cursor: pointer; }
.tab:hover:not([aria-selected="true"]) { background: var(--ivory); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-key-sm); }

/* ── dialogs: a family card laid over a dimmed page ── */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(27, 26, 23, 0.48); }
.modal { width: min(100% - 32px, 500px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; 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); }
.modal form { display: grid; gap: 14px; padding: 28px 26px 24px; }
.modal__title { font: 26px/1.2 var(--f-display); }
.modal__text { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.modal__actions { margin-top: 6px; }

/* the message line at the top of a page: a card with one dot — yellow when done, a red ring when not */
.flash { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 10px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); font: 16.5px/1.55 var(--f-ui); }
.flash::before { width: 14px; height: 14px; flex: none; margin-top: 6px; content: ""; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.flash > p { flex: 1; min-width: 0; }
.flash a { color: var(--ink); }
.flash .icon-btn { margin: -8px 0 -8px -2px; }
.flash.is-bad { border-color: var(--err); }
.flash.is-bad::before { background: transparent; border-color: var(--err); }

/* a waiting line: a short bar filling from the right (still with reduced motion) */
.waiting { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.waiting::before { width: 34px; height: 4px; flex: none; content: ""; background: linear-gradient(var(--ink), var(--ink)) right center / 0% 100% no-repeat, var(--hair); border-radius: 4px; animation: fill-line 1.6s ease-in-out infinite; }
.waiting:empty { display: none; }
.waiting.is-still::before { display: none; }
@keyframes fill-line { 0% { background-size: 0% 100%, auto; } 70%, 100% { background-size: 100% 100%, auto; } }

/* tables */
.table-scroll { position: relative; max-width: 100%; overflow-x: auto; }   /* positioned: a hidden label inside never widens the page */
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: 12px 10px; line-height: 1.5; text-align: start; vertical-align: top; border-bottom: 1px solid var(--hair); }
.ledger thead th { color: var(--ink-soft); border-bottom: 2px solid var(--ink); font: 15px/1.3 var(--f-ui); }
.ledger tbody th { font: 16px/1.45 var(--f-ui); }

/* admin and preview helpers (never shown to a customer) */
.mock-badge { position: fixed; z-index: 60; inset-block-end: 12px; inset-inline-end: 12px; margin: 0; padding: 4px 12px; color: var(--ink); background: var(--sheet); border: 1.5px dashed var(--ink); border-radius: 999px; font: 13px/1.4 var(--f-ui); pointer-events: none; }

/* ── a plain page of the service (soon, the server's 404 and error pages) ── */
.pagebar { border-bottom: 1px solid var(--hair); }
.pagebar__in { display: flex; width: min(100% - 2 * var(--gutter), var(--wrap)); min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; margin-inline: auto; }
.pagebar .brand img { width: 38px; height: 38px; }
.pagebar .brand__name { font-size: 24px; }
.pagebar .brand__channel { font-size: 14.5px; }
.pagefoot { margin-top: 56px; padding-block: 26px 40px; color: var(--ink-soft); border-top: 1px solid var(--hair); font-size: 15px; }
.pagefoot__in { display: flex; width: min(100% - 2 * var(--gutter), var(--wrap)); flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-inline: auto; }
.pagefoot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.pagefoot a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); }
.pagefoot .brand__by { margin: 0; font-size: 13px; }
.pagefoot .brand__by a { display: inline; min-height: 0; color: var(--achiya); font-size: inherit; }   /* the purple is the name's */