/* WebStackRank — v3 chat widget (design F "Orbit"), Laravel-side like laravel-bridge.css (not a kit copy).
   Markup: resources/views/partials/v3/chat.blade.php · behaviour: public/wsr/js/chat.js.
   Floating dock (back to top + WhatsApp + chat toggle) → contact-options panel → AI live chat. Cream poster ticket with
   an orange head, same visual family as the quick-contact popup (.qc). Colours only from the kit tokens; logical
   properties; Arabic picks up the kit faces through :lang(ar). Desktop/tablet: panel anchored above the toggle;
   phones (< 640 px): bottom sheet (options) / full-height sheet that follows the visual viewport (AI chat). */

.wdock, .wchat { --wc-edge: 20px; --wc-tog: 56px; }

/* ---------- dock ---------- */
.wdock { position: fixed; z-index: 60; bottom: max(var(--wc-edge), env(safe-area-inset-bottom)); right: max(var(--wc-edge), env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; font-family: var(--f-body); }
[dir="rtl"] .wdock { right: auto; left: max(var(--wc-edge), env(safe-area-inset-left)); }
.wdock__row { display: flex; align-items: center; gap: 10px; pointer-events: none; }
.wdock__top, .wdock__row > * { pointer-events: auto; }
.wdock__top, .wdock__wa { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream); font-size: 20px; text-decoration: none; box-shadow: 0 0 0 2px var(--cream), 0 12px 26px -12px rgb(0 0 0 / .6); transition: background-color .25s, color .25s, opacity .3s, visibility .3s, translate .45s var(--ease), scale .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.wdock__top { width: 44px; height: 44px; font-size: 18px; }
.wdock__top:not(.visible) { opacity: 0; visibility: hidden; translate: 0 10px; }

.wdock__top:active, .wdock__wa:active { scale: .94; }

/* toggle: ink pill + orange disc (icon) + online dot; icon-only circle on phones */
.wchat-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; height: var(--wc-tog); padding-inline: 6px 22px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 650 16px/1 var(--f-body); box-shadow: 0 0 0 2px var(--cream), 0 18px 36px -14px rgb(0 0 0 / .6); transition: background-color .25s, scale .35s var(--ease), opacity .3s, visibility .3s, translate .45s var(--ease); -webkit-tap-highlight-color: transparent; }
.wchat-toggle:active { scale: .96; }
.wchat-toggle__disc { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 20px; }
.wchat-toggle__disc > i { grid-area: 1 / 1; transition: opacity .25s, rotate .45s var(--ease), scale .45s var(--ease); }
.wchat-toggle__i2 { opacity: 0; rotate: -90deg; scale: .6; font-size: 17px; }
.wchat-toggle[aria-expanded="true"] .wchat-toggle__i1 { opacity: 0; rotate: 90deg; scale: .6; }
.wchat-toggle[aria-expanded="true"] .wchat-toggle__i2 { opacity: 1; rotate: 0deg; scale: 1; }
.wchat-toggle__dot { position: absolute; top: 0; inset-inline-end: 0; width: 12px; height: 12px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2.5px var(--ink); }
.wchat-toggle[aria-expanded="true"] .wchat-toggle__dot { opacity: 0; }
.wchat-toggle.has-unread::after { content: "1"; position: absolute; top: -5px; inset-inline-end: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--b1-solid); color: var(--cream); font: 700 12px/1 var(--f-body); box-shadow: 0 0 0 2px var(--cream); }
.wchat-toggle:focus-visible, .wdock__top:focus-visible, .wdock__wa:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--b1-solid), 0 18px 36px -14px rgb(0 0 0 / .6); }

/* tooltips for mouse users (the buttons are labelled with aria-label) */
@media (hover: hover) and (pointer: fine) {
  .wdock [data-tip]::after { content: attr(data-tip); position: absolute; inset-inline-end: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 7px 12px; border-radius: 10px; background: var(--ink); color: var(--cream); font: 600 13px/1.2 var(--f-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .wdock [data-tip]:hover::after, .wdock [data-tip]:focus-visible::after { opacity: 1; }
}

/* without JS the panel cannot open: keep only the WhatsApp link */
html:not(.js) .wchat-toggle, html:not(.js) .wdock__top { display: none; }

/* out of the way: over a hero call-to-action (chat.js), mobile drawer open, panel open (back to top) */
.wdock.is-away .wdock__top, .wdock.is-away .wdock__row > * { opacity: 0; visibility: hidden; translate: 0 18px; }
html.drawer-open .wdock { opacity: 0; visibility: hidden; pointer-events: none; }
html.wchat-open .wdock__top { opacity: 0; visibility: hidden; }

/* a gentle one-off cue (chat.js adds .is-nudge once per visit; never with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .wchat-toggle.is-nudge .wchat-toggle__disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: wcPing 1.5s var(--ease) 2; }
  .wchat-toggle.is-nudge .wchat-toggle__i1 { animation: wcWiggle 1s ease-in-out 1 .2s; }
}
@keyframes wcPing { from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--b2) 75%, transparent); } to { box-shadow: 0 0 0 18px color-mix(in oklab, var(--b2) 0%, transparent); } }
@keyframes wcWiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 11deg; } 60% { rotate: -7deg; } 80% { rotate: 3deg; } }

/* ---------- panel ---------- */
.wchat-scrim { position: fixed; inset: 0; z-index: 71; background: color-mix(in oklab, var(--deep) 62%, transparent); opacity: 0; transition: opacity .3s; }
html.wchat-open .wchat-scrim { opacity: 1; }
.wchat-scrim[hidden] { display: none; }

.wchat { position: fixed; z-index: 72; right: max(var(--wc-edge), env(safe-area-inset-right)); bottom: calc(max(var(--wc-edge), env(safe-area-inset-bottom)) + var(--wc-tog) + 14px);
  width: min(392px, calc(100vw - 2 * var(--wc-edge))); max-height: calc(100vh - var(--wc-tog) - 2 * var(--wc-edge) - 30px); max-height: calc(100dvh - var(--wc-tog) - 2 * var(--wc-edge) - 30px);
  display: flex; flex-direction: column; overflow: hidden; outline: none; background: var(--paper); color: var(--ink); border-radius: 28px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent), 0 50px 90px -40px rgb(0 0 0 / .62);
  font: 400 15px/1.5 var(--f-body); text-align: start; --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); --rule: var(--line);
  transform-origin: 100% 100%; opacity: 0; translate: 0 14px; scale: .96; transition: opacity .22s, translate .45s var(--ease), scale .45s var(--ease); }
[dir="rtl"] .wchat { right: auto; left: max(var(--wc-edge), env(safe-area-inset-left)); transform-origin: 0 100%; }
.wchat[hidden] { display: none; }
html.wchat-open .wchat { opacity: 1; translate: 0 0; scale: 1; }
.wchat[data-view="ai"] { height: min(640px, calc(100vh - var(--wc-tog) - 2 * var(--wc-edge) - 30px)); height: min(640px, calc(100dvh - var(--wc-tog) - 2 * var(--wc-edge) - 30px)); }
.wchat :focus-visible:not(input, textarea, select) { outline: 3px solid var(--b1-solid); outline-offset: 2px; }
.wchat [hidden] { display: none !important; }

.wchat__head { position: relative; flex: none; background: var(--b2); color: var(--ink); padding: 14px 14px 22px; padding-inline-start: 16px; }
.wchat__head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 100% at 100% 0%, var(--hot-lite) 0, transparent 70%); pointer-events: none; }
[dir="rtl"] .wchat__head::before { background: radial-gradient(60% 100% at 0% 0%, var(--hot-lite) 0, transparent 70%); }
.wchat__head :focus-visible { outline-color: var(--deep); }
.wchat__grab { display: none; }
.wchat__bar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; }
.wchat__mono { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); }
.wchat__mark { width: 30px; height: 30px; overflow: visible; }
.wchat__orbit { fill: none; stroke: var(--cream); stroke-width: 2.6; }
.wchat__core { fill: var(--b2); }
.wchat__moon { fill: var(--deep); stroke: var(--cream); stroke-width: 1.6; }
.wchat__who { flex: 1; min-width: 0; }
.wchat__name { font: 700 15.5px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wchat__status { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13px; line-height: 1.3; font-weight: 500; }
.wchat__live { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px var(--cream); }
.wchat__iconbtn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; -webkit-tap-highlight-color: transparent; }
.wchat__close { background: var(--ink); color: var(--cream); transition: rotate .45s var(--ease), background-color .25s; }
.wchat__back { background: color-mix(in oklab, var(--ink) 12%, transparent); color: var(--ink); transition: background-color .25s, color .25s; }
.wchat__q { position: relative; margin-top: 16px; font: 400 34px/.96 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); text-wrap: balance; }
.wchat__q em { font-family: var(--f-serif); font-style: var(--accent-style); text-transform: none; letter-spacing: -.01em; font-size: 1.08em; line-height: 1; color: var(--cream); background: var(--b1-solid); padding: 0 .14em .06em .1em; border-radius: .14em; display: inline-block; rotate: calc(-2deg * var(--dir)); }
:root:lang(ar) .wchat__q { font-weight: 800; font-size: 26px; line-height: 1.32; }
:root:lang(ar) .wchat__q em { font-weight: 700; line-height: 1.2; padding: .02em .16em .14em; }
.wchat[data-view="ai"] .wchat__head { padding-bottom: 20px; }
.wchat__tear { position: relative; z-index: 1; flex: none; height: 12px; margin-top: -12px; background: radial-gradient(circle at 50% 100%, var(--paper) 5.5px, transparent 6px) 0 0 / 16px 12px repeat-x; }

.wchat__view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* options */
.wchat__view--options { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 14px 14px 16px; }
.wchat__opts { display: grid; gap: 8px; }
.wchat__opt { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 68px; padding-block: 11px; padding-inline: 11px 16px; border-radius: 20px; background: var(--cream); color: var(--ink); text-decoration: none; text-align: start; transition: background-color .25s, color .25s; }
.wchat__ico { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--paper); color: var(--b1-ink); font-size: 20px; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .25s, color .25s, box-shadow .25s; }
.wchat__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wchat__t { display: block; font: 650 16px/1.3 var(--f-body); }
.wchat__d { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; transition: color .25s; }
.wchat__go { flex: none; font-size: 17px; opacity: .75; transition: translate .35s var(--ease); }
.wchat__opt--ai { min-height: 76px; background: var(--b1-solid); color: var(--cream); }
.wchat__opt--ai .wchat__d { color: var(--on-deep-2); }
.wchat__opt--ai .wchat__ico { background: var(--b2); color: var(--ink); box-shadow: none; }
:root:lang(ar) .wchat__t { font-weight: 600; }

/* ---------- AI chat ---------- */
.wchat__view--ai { overflow: hidden; }
.wchat__screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.wchat__screen--chat { position: relative; }
.wchat__log { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-mask-image: linear-gradient(#0000, #000 14px); mask-image: linear-gradient(#0000, #000 14px); overscroll-behavior: contain; scrollbar-width: thin; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; outline: none; }
.wmsg { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; gap: 4px; max-width: 88%; animation: wcIn .38s var(--ease) both; }
.wmsg--me { align-self: flex-end; align-items: flex-end; }
.wmsg__b { padding: 10px 14px; border-radius: 20px; border-end-start-radius: 6px; background: var(--cream-2); color: var(--ink); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.wmsg--me .wmsg__b { background: var(--b1-solid); color: var(--cream); border-end-start-radius: 20px; border-end-end-radius: 6px; }
.wmsg__b a { color: var(--b1-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.wmsg--me .wmsg__b a { color: inherit; }
.wmsg__b strong { font-weight: 700; }
.wmsg__m { display: flex; align-items: center; gap: 6px; padding-inline: 8px; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
.wmsg--err .wmsg__b { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--b2-ink); }
.wmsg--err .wmsg__m { color: var(--b2-ink); font-weight: 600; }
.wmsg__retry { flex: none; white-space: nowrap; min-height: 32px; padding-inline: 6px; border-radius: 8px; color: var(--b1-ink); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.wmsg--typing .wmsg__b { display: inline-flex; align-items: center; gap: 5px; padding: 15px 16px; }
.wdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: wcDot 1.2s infinite ease-in-out both; }
.wdot:nth-child(2) { animation-delay: .15s; }
.wdot:nth-child(3) { animation-delay: .3s; }
@keyframes wcDot { 0%, 80%, 100% { opacity: .35; translate: 0 0; } 40% { opacity: 1; translate: 0 -4px; } }
@keyframes wcIn { from { opacity: 0; translate: 0 8px; } }

.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchips--center { justify-content: center; margin-top: 10px; }
.wchip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 22%, transparent); font: 600 14px/1.2 var(--f-body); text-decoration: none; text-align: start; transition: background-color .2s, color .2s, box-shadow .2s; }
.wchip i { font-size: 15px; }
.wchip--more { background: transparent; box-shadow: none; color: var(--b1-ink); text-decoration: underline; text-underline-offset: .2em; }
.wchip--ticket { background: var(--cream-2); box-shadow: none; }

.wchat__compose { flex: none; display: flex; align-items: flex-end; gap: 4px; margin: 4px 12px 0; padding: 4px; border-radius: 26px; background: var(--cream); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 10%, transparent); transition: box-shadow .2s; }
.wchat__compose:focus-within { box-shadow: inset 0 0 0 2px var(--b1-solid); }
.wchat__compose textarea { flex: 1; min-width: 0; height: 44px; min-height: 44px; max-height: 112px; resize: none; border: 0; border-radius: 0; background: transparent; padding: 11px 6px; font: 400 16px/1.4 var(--f-body); color: var(--ink); outline: none; overflow-y: hidden; }
.wchat__compose textarea::placeholder { color: var(--ink-2); opacity: .9; }
.wchat__compose textarea:focus-visible { outline: none; }
.wchat__emoji { color: var(--ink-2); font-size: 20px; transition: background-color .2s, color .2s; }
.wchat__emoji[aria-expanded="true"] { background: var(--paper); color: var(--b1-ink); }
.wchat__send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 17px; transition: background-color .2s, color .2s, opacity .2s, scale .3s var(--ease); }
.wchat__send:active { scale: .92; }
.wchat__send:disabled { opacity: .45; cursor: not-allowed; background: var(--b2); color: var(--ink); }
[dir="rtl"] .wchat__send i::before { transform: scaleX(-1); }
.wchat__tools { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; padding: 6px 10px 10px; }
.wtool { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 999px; font: 600 13px/1 var(--f-body); color: var(--ink-2); text-decoration: none; transition: background-color .2s, color .2s; }
.wtool i { font-size: 15px; color: var(--b1-ink); }

.wemoji { position: absolute; inset-inline: 12px; bottom: 104px; z-index: 3; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgb(0 0 0 / .45); }
.wemoji__b { min-height: 38px; border-radius: 10px; font-size: 20px; line-height: 1; }

/* cards: lead, ticket, rating, thanks */
.wchat__screen--card { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px 14px 18px; gap: 8px; }
.wchat__screen--done { justify-content: center; }
.wcard { display: grid; gap: 2px; padding: 4px 16px 16px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.wcard--center { text-align: center; justify-items: center; padding-top: 18px; }
.wcard--center .field, .wcard--center .wcard__go { justify-self: stretch; text-align: start; }
.wcard .field { padding-top: 10px; }
.wcard .field input, .wcard .field select, .wcard .field textarea { font-size: 16px; padding: 16px 0 8px; }
.wcard .field select { padding-inline-end: 30px; }
.wcard .field > span { top: 26px; font-size: 15px; }
.wcard .field textarea { min-height: 70px; }
.wcard .field__err { font-size: 12.5px; margin-top: 4px; }
.wcard__go { margin-top: 14px; }
.wcard__err { font-size: 13.5px; font-weight: 600; color: var(--b2-ink); margin-top: 8px; }
.wcard__err:empty { display: none; }
.wcard__fine { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); text-align: center; }
.wcard__fine a { color: var(--b1-ink); }
.wcard__title { padding-top: 10px; font: 400 28px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
:root:lang(ar) .wcard__title { font-weight: 800; font-size: 22px; line-height: 1.35; }
.wcard__sub { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.wcard--center .link-arrow { margin-top: 6px; font-size: 15px; }
.wback { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-inline: 8px 14px; border-radius: 999px; font: 600 14px/1 var(--f-body); color: var(--ink-2); transition: background-color .2s, color .2s; }
.wstars { display: flex; justify-content: center; gap: 4px; margin: 12px 0 2px; padding: 0; border: 0; }
.wstars__s { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: color-mix(in oklab, var(--ink) 20%, transparent); cursor: pointer; transition: color .2s, scale .25s var(--ease); }
.wstars__s input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.wstars__s.is-on { color: var(--b2); }
.wstars__s:has(input:focus-visible) { outline: 3px solid var(--b1-solid); outline-offset: 0; }
.wstamp { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--b2); font-size: 30px; rotate: calc(-12deg * var(--dir)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--deep) 25%, transparent); }

/* hover only where a real pointer hovers (no sticky hover colour after a tap on phones) */
@media (hover: hover) {
  .wdock__top:hover, .wdock__wa:hover { background: var(--deep); color: var(--b2); }
  .wchat-toggle:hover { background: var(--deep); }
  .wchat__close:hover { rotate: 90deg; background: var(--deep); }
  .wchat__back:hover { background: var(--ink); color: var(--cream); }
  .wchat__opt:hover { background: var(--deep); color: var(--cream); }
  .wchat__opt:hover .wchat__d { color: var(--on-deep-2); }
  .wchat__opt:hover .wchat__ico { background: var(--b2); color: var(--ink); box-shadow: none; }
  .wchat__opt:hover .wchat__go { translate: calc(3px * var(--dir)) 0; }
  .wchip:hover { background: var(--ink); color: var(--cream); box-shadow: none; }
  .wchip--more:hover { background: var(--cream-2); color: var(--ink); }
  .wchat__emoji:hover { background: var(--paper); color: var(--b1-ink); }
  .wchat__send:hover { background: var(--ink); color: var(--b2); }
  .wchat__send:disabled:hover { background: var(--b2); color: var(--ink); }
  .wtool:hover { background: var(--cream-2); color: var(--ink); }
  .wemoji__b:hover { background: var(--cream-2); }
  .wback:hover { background: var(--cream-2); color: var(--ink); }
  .wstars__s:hover { scale: 1.1; }
}

/* ---------- phones: bottom sheet ---------- */
@media (max-width: 639.98px) {
  .wdock, .wchat { --wc-edge: 14px; --wc-tog: 58px; }
  .wdock { gap: 10px; }
  .wchat-toggle { width: var(--wc-tog); padding: 0; justify-content: center; }
  .wchat-toggle__label { display: none; }
  .wchat-toggle__disc { width: 46px; height: 46px; font-size: 21px; }
  .wdock__wa { width: 50px; height: 50px; font-size: 21px; }
  html.wchat-open .wdock { opacity: 0; visibility: hidden; }

  .wchat, [dir="rtl"] .wchat { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 26px 26px 0 0; max-height: calc(100vh - 12px); max-height: calc(var(--wchat-vvh, 100dvh) - 12px);
    opacity: 1; scale: 1; translate: 0 100%; transform-origin: 50% 100%; transition: translate .45s var(--ease); box-shadow: 0 -30px 60px -30px rgb(0 0 0 / .5); }
  html.wchat-open .wchat { translate: 0 var(--wchat-drag, 0px); }
  .wchat.is-dragging { transition: none; }
  .wchat[data-view="ai"] { bottom: auto; top: calc(var(--wchat-vvt, 0px) + max(10px, env(safe-area-inset-top))); max-height: none;
    height: calc(100vh - max(10px, env(safe-area-inset-top))); height: calc(var(--wchat-vvh, 100dvh) - max(10px, env(safe-area-inset-top))); }
  .wchat__head { padding-top: 6px; touch-action: none; }
  .wchat__grab { display: block; position: relative; width: 44px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 32%, transparent); }
  .wchat__q { font-size: 31px; margin-top: 12px; }
  :root:lang(ar) .wchat__q { font-size: 24px; }
  .wchat__view--options { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .wchat__opt { min-height: 66px; }
  .wchat__tools { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .wchat__screen--card { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  /* the page's last row (footer legal links) can scroll clear of the dock */
  .ft__legal { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 379.98px) {
  .wchat__bar { gap: 8px; }
  .wchat__mono { width: 40px; height: 40px; }
  .wchat__mark { width: 27px; height: 27px; }
  .wchat__name { font-size: 14.5px; }
  .wchat__status { font-size: 12.5px; }
  .wtool { gap: 5px; padding: 0 7px; font-size: 12.5px; }
}
@media (max-width: 359.98px) {
  .wchat__q { font-size: 28px; }
  .wchat__opt { gap: 12px; padding-inline: 10px 12px; }
}
@media (min-width: 640px) { .wchat-scrim { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .wchat, html.wchat-open .wchat { transition: opacity .15s; translate: none; scale: none; }
  .wmsg { animation: none; }
  .wdot { animation: none; opacity: .6; }
  .wchat-toggle__disc > i, .wchat__close, .wchat__go { transition: none; }
}
@media (forced-colors: active) {
  .wchat-toggle, .wdock__top, .wdock__wa, .wchat__opt, .wchip, .wchat__send { border: 1px solid ButtonText; }
  .wchat { border: 1px solid CanvasText; }
}
@media print { .wdock, .wchat, .wchat-scrim { display: none !important; } }