/* DABB 2 — the chat bubble (this part was the floating WhatsApp button): on every page, fixed at the bottom on the
   inline-end side, above everything but the dialogs (the menu, a work sheet).
     .wa.chat            the root — exactly the pill's box (the hero reads [data-wa]'s box; the menu makes .wa inert)
     .chat__pill         a white pill: a round ink badge with a chat glyph + "Chat with us"
     .chat__panel        the small white panel that opens above it (role="dialog", not modal)
     .chat__dot          the unread mark: THE ONE SMALL DOT (Dabb Yellow in an ink ring) in the pill's outer top corner
   States (00-wa.js):   .is-open · .is-away (the footer's end is in view: the bubble leaves) · .is-nudge (it breathes, once)
                        · .is-live (tawk.to's window is open) · .is-unread (tawk.to counts a reply the visitor has not seen)
   It stands above the phone dock (--dock-h, exported by 00-header.css). --wa-size = the pill's height.
   The panel is the one white surface (--block / --on-block): inside it the focus ring is ink with a white gap.           */

.wa {
  --wa-size: 48px;
  --wa-gap: var(--s-4);
  --chat-badge: calc(var(--wa-size) - 12px);
  --chat-r: 22px;                                               /* the panel's corner */
  --chat-soft: var(--n-100);                                    /* a chip on the white panel */
  --chat-quiet: var(--n-600);                                   /* secondary type on the white panel (AA) */
  position: fixed; z-index: calc(var(--z-band) + 5);
  inset-inline-end: max(var(--wa-gap), env(safe-area-inset-right, 0px));
  inset-block-end: calc(var(--wa-gap) + env(safe-area-inset-bottom, 0px));
  transform: translateY(calc(var(--dock-h, 0px) * -1));        /* above the dock */
  -webkit-tap-highlight-color: transparent;
}
.wa.is-away:not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(var(--dock-h, 0px) * -1 + 12px)); }
.wa.is-live:not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; }      /* tawk.to's chat window is open in this corner (00-wa.js) */

/* ── the pill ── */
.chat__pill {
  display: flex; align-items: center; gap: 10px;
  min-block-size: var(--wa-size); padding-inline: 6px 20px;
  font-family: var(--f-text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--on-btn); background: var(--btn);
  border: 0; border-radius: var(--r-pill);
  position: relative;                                           /* (for the unread dot) */
}
html[lang="ar"] .chat__pill { letter-spacing: 0; font-weight: 600; line-height: 1.4; }
/* a phone: once the page is being read the pill draws in to its round badge — on a 390 px screen the whole pill lay over
   a third of every line it passed (the word stays for assistive technology, and is back at the top of the page and when open) */
@media (max-width: 639px) {
  html.js.is-scrolled .wa:not(.is-open) .chat__pill { padding-inline: 6px; gap: 0; }
  html.js.is-scrolled .wa:not(.is-open) .chat__word { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
}
.chat__pill:hover { background: var(--btn-hover); }
html.js .chat__pill--plain, html:not(.js) .chat__pill:not(.chat__pill--plain) { display: none; }
.chat__badge {
  position: relative; flex: none; display: grid; place-items: center;
  inline-size: var(--chat-badge); block-size: var(--chat-badge); border-radius: 50%;
  background: var(--on-btn); color: var(--btn);
}
.chat__glyph {
  grid-area: 1 / 1; inline-size: 56%; block-size: 56%;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .chat__glyph--talk, [dir="rtl"] .chat__pill--plain .chat__glyph { transform: scaleX(-1); }      /* the tail of the bubble points to the page's start */
.chat__glyph--x { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.wa.is-open .chat__glyph--talk { opacity: 0; transform: rotate(45deg) scale(0.6); }
[dir="rtl"] .wa.is-open .chat__glyph--talk { transform: scaleX(-1) rotate(45deg) scale(0.6); }
.wa.is-open .chat__glyph--x { opacity: 1; transform: none; }
/* THE UNREAD MARK (.is-unread, only with the live chat): the brand's one small dot — a 10 px Dabb Yellow dot in a 2 px ink
   ring (14 px in all), its centre exactly on the pill's rounded outer top corner (the pill's ends are half circles of radius
   --wa-size / 2; the point at 45° lies --wa-size × 0.1464 in from both edges), so about half of it lies on the white pill
   and half on the ground: the ink ring carries it on both (measured: ink 17.6 : 1 on white, 6.3 to 9.7 : 1 on the sand in
   the sun, 3.3 : 1 on the page's shaded ground — a mark needs 3 : 1 — and the yellow 11.2 : 1 inside the ink). On a phone,
   drawn in to its round badge, it sits on the circle's top corner. Logical insets: in Arabic it is mirrored (the bubble
   stands at the left, the dot on its outer top-left). */
.chat__dot {
  --dot: 14px;
  display: none; position: absolute;
  inset-block-start: calc(var(--wa-size) * 0.1464 - var(--dot) / 2); inset-inline-end: calc(var(--wa-size) * 0.1464 - var(--dot) / 2);
  box-sizing: border-box; inline-size: var(--dot); block-size: var(--dot); border-radius: 50%;
  background: var(--dabb-yellow); border: 2px solid var(--dabb-ink);
  pointer-events: none;
}
.wa.is-unread .chat__dot { display: block; }
@media (forced-colors: active) { .chat__dot { forced-color-adjust: none; background: Highlight; border-color: CanvasText; } }

/* ── the panel ── */
.chat__panel {
  --focus: var(--on-block); --focus-gap: var(--block);
  position: absolute; inset-inline-end: 0; inset-block-end: calc(100% + var(--s-3));
  box-sizing: border-box;
  inline-size: min(348px, 100vw - 2 * var(--wa-gap));
  max-block-size: calc(100vh - var(--wa-size) - var(--dock-h, 0px) - var(--header-h, 64px) - 3 * var(--wa-gap));
  max-block-size: calc(100dvh - var(--wa-size) - var(--dock-h, 0px) - var(--header-h, 64px) - 3 * var(--wa-gap));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5); padding-block-end: var(--s-4);
  background: var(--block); color: var(--on-block);
  border-radius: var(--chat-r);
  transform-origin: 100% 100%;
}
[dir="rtl"] .chat__panel { transform-origin: 0 100%; }
.chat__panel:focus { outline: none; }                            /* it only receives the focus so that its words are read; the ring is for its controls */
.chat__close {
  float: inline-end; display: grid; place-items: center;
  inline-size: 36px; block-size: 36px; margin: -8px; margin-inline-start: var(--s-3); margin-block-end: var(--s-2);
  padding: 0; border: var(--hair) solid var(--n-200); border-radius: 50%;
  background: transparent; color: var(--on-block); cursor: pointer;
}
.chat__close .ico { inline-size: 16px; block-size: 16px; stroke-linecap: round; }
.chat__close:hover { background: var(--on-block); border-color: var(--on-block); color: var(--block); }
.chat__hello {
  margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; text-wrap: pretty;
}
html[lang="ar"] .chat__hello { letter-spacing: 0; font-weight: 600; line-height: 1.75; }
/* the live chat (tawk.to, only when its ids are set): one ink button, the first way — the chips under it are the second */
.chat__live { clear: both; margin-block-start: var(--s-4); }
.chat__go {
  display: inline-flex; align-items: center; gap: 10px; inline-size: 100%; justify-content: center;
  min-block-size: 46px; padding-inline: 18px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--f-text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; white-space: nowrap;
  color: var(--block); background: var(--on-block);
}
html[lang="ar"] .chat__go { font-weight: 600; }
.chat__go:hover { background: var(--n-700); }                    /* (white on it: 6.4 : 1) */
.chat__go-ico { flex: none; inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
[dir="rtl"] .chat__go-ico { transform: scaleX(-1); }
.chat__live.is-busy .chat__go { cursor: progress; }
.chat__live-note { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--chat-quiet); }
.chat__live-note:empty, .chat__live-note:not(:has(> :not([hidden]))) { display: none; }
.chat__ask { clear: both; margin: var(--s-4) 0 var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--chat-quiet); }
.chat__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.chat__chip {
  display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 16px;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none;
  color: var(--on-block); background: var(--chat-soft); border-radius: var(--r-pill);
}
html[lang="ar"] .chat__chip { font-weight: 600; }
.chat__chip:hover, .chat__chip.is-chosen { background: var(--on-block); color: var(--block); }
.chat__status { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--chat-quiet); }
.chat__status-in { display: block; padding-block-start: var(--s-3); }
.chat__status-ico { display: inline-block; inline-size: 1em; block-size: 1em; margin-inline-end: 0.45em; vertical-align: -0.14em; fill: var(--wa); }
.chat__again, .chat__mail { color: var(--on-block); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--n-400); }
html[lang="ar"] .chat__again, html[lang="ar"] .chat__mail { text-underline-offset: 0.45em; }
.chat__again:hover, .chat__mail:hover { text-decoration-color: currentColor; }
.chat__foot { margin: var(--s-4) 0 0; padding-block-start: var(--s-3); border-block-start: var(--hair) solid var(--n-200); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--chat-quiet); }
.chat__mail { color: var(--chat-quiet); }
.chat__mail:hover { color: var(--on-block); }

/* wider screens: a taller pill, a little further from the corner */
@media (min-width: 900px) {
  .wa { --wa-size: 52px; --wa-gap: var(--s-5); }
  .chat__pill { font-size: 0.9375rem; padding-inline-end: 22px; }
  .chat__panel { inline-size: 360px; }
}
/* a short window (a phone on its side): the panel lies beside the pill's corner, as tall as the window allows */
@media (max-height: 520px) {
  .chat__panel { max-block-size: calc(100vh - var(--wa-size) - 2 * var(--wa-gap) - var(--s-3)); }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .wa { transition: transform var(--t-3) var(--e-dash), opacity var(--t-2) var(--e-std), visibility 0s linear 0s; }
  html:not(.is-calm) .wa.is-away:not(.is-open) { transition: transform var(--t-3) var(--e-dash), opacity var(--t-2) var(--e-std), visibility 0s linear var(--t-2); }
  html:not(.is-calm) .chat__pill, html:not(.is-calm) .chat__chip, html:not(.is-calm) .chat__close { transition: background-color var(--t-2) var(--e-std), color var(--t-2) var(--e-std), border-color var(--t-2) var(--e-std); }
  html:not(.is-calm) .chat__glyph { transition: opacity var(--t-2) var(--e-std), transform var(--t-3) var(--e-dash); }
  html:not(.is-calm) .chat__panel { animation: chat-in var(--t-3) var(--e-dash) both; }
  html:not(.is-calm) .chat__status-in { animation: chat-line var(--t-3) var(--e-dash) both; }
  html:not(.is-calm) .wa.is-nudge .chat__pill { animation: chat-breathe 1800ms var(--e-std) 1 both; }
  html:not(.is-calm) .wa.is-unread .chat__dot { animation: chat-dot var(--t-3) var(--e-dash) 1 both; }      /* it arrives once (no pulse; calm: it is simply there) */
  html:not(.is-calm) .wa.is-nudge .chat__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: var(--hair) solid var(--btn); animation: chat-ring 1800ms var(--e-std) 1 both; pointer-events: none; }
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes chat-line {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes chat-dot {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: none; }
}
@keyframes chat-breathe {
  0%, 100% { transform: none; }
  45% { transform: scale(1.06); }
}
@keyframes chat-ring {
  0% { opacity: 0; transform: scale(1); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.5); }
}
@media print { .wa { display: none; } }