/* store_chat.css — «شات المتجر» (point 40). Linked by layouts/store ONLY while the restaurant's setting is on
   (Tenant#store_chat_on?), so a store without it gains no byte.

   Field for field from the mockup (Claude-code-UI/mockups/2026-10-02-store-chat/_build): sc.css (the panel),
   r3.css م1 + r4.css ح2 (the launcher and its pulse, Mohamed's FINAL 23:12), r7.css ف2 (the home message, 23:53).

   ROUND IS THE EXCEPTION, AND IT IS NAMED. The store is sharp (store.css's one radius rule, Mohamed 30/9); the
   launcher's circle, its pulse ring and the «1» are round (Mohamed 21:54 / 22:20), so they carry .sc-round, which
   store.css's rule leaves alone. The panel itself is sharp like every store card. */

/* ── THE LAUNCHER — م1: #111827, the white chat mark, 56×56, bottom-left of the store column (the RTL side) ── */
.sc-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
.sc-col { max-width: 30rem; margin: 0 auto; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: flex-end; }
/* On a page with the sticky bar (the menu's «راجع الطلب», …) the dock rides ON the bar: its floor is the bar's top
   + 12px whatever the bar's height (the mockup's gap.mjs: 12px at 390 and 1440). The bar is position:fixed, so it
   is the dock's containing block; +1px is the bar's top border. */
.s-bar .sc-dock { position: absolute; bottom: calc(100% + 1px); z-index: 1; }
.s-bar .sc-col { padding-bottom: 0.75rem; }
.sc-anchor { position: relative; display: inline-flex; pointer-events: auto; }
.sc-launch { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 999px; box-sizing: border-box; text-decoration: none;
  background: #111827; color: #fff; border: 0; box-shadow: 0 6px 18px rgba(15, 23, 42, .28), 0 1px 4px rgba(15, 23, 42, .18); }
.sc-launch svg { width: 1.75rem; height: 1.75rem; flex: none; }
.sc-launch:focus-visible { outline: 3px solid #0369a1; outline-offset: 3px; }
/* «1» — orange #C2410C, white on it 5.18:1 (above 4.5:1 for 12px). */
.sc-badge { position: absolute; top: -0.3125rem; right: -0.3125rem; min-width: 1.375rem; height: 1.375rem; padding: 0 0.3125rem;
  border-radius: 999px; background: #c2410c; color: #fff; border: 2px solid #fff; box-sizing: border-box;
  font: 800 0.75rem/1.125rem 'Cairo', system-ui, sans-serif; text-align: center; }
/* The page keeps room for the launcher, so it never sits on the last line (5.5rem; on a bar page, the bar's
   6.5rem + the launcher and its gap). */
.sc-on .s-main { padding-bottom: 5.5rem; }
.sc-on .s-main-bar { padding-bottom: calc(10.75rem + env(safe-area-inset-bottom, 0px)); }

/* ── ح2 — the pulse: a ring in the circle's own colour grows to ×1.25 and fades, 0.8 s, every 8 s, first at 1 s.
   transform/opacity only on a pseudo-element of a fixed element: nothing in the page moves. Drawn only until
   the chat is opened in this visit (the class is not rendered after store_sessions.chat_opened_at). ── */
.sc-pulse::before { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 3px solid #111827;
  box-sizing: border-box; opacity: 0; pointer-events: none; animation: sc-ring 8s ease-out 1s infinite; }
@keyframes sc-ring { 0% { transform: scale(1); opacity: .6; } 10% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; } }

/* ── THE HOME MESSAGE — ف2, ONE ISOLATED COMPONENT (store/home/_chat_hello; Mohamed 23:53, the mockup's r7.css .r7-v2,
   field for field). Above the circle, its tail pointing down at it, its left edge on the circle's left edge (the
   column's inside: the right edge in English), 14px above it, never wider than min(280px, the screen − 32px).
   Round like the circle (the floating chat element is the store's one round exception; it sits outside .s-shell).
   Timing, on the pulse's clock: a 24 s cycle = every 3rd pulse, first at 1 s (1% = 0.24 s) —
     typing  in 0.24 s, the dots bounce (0.9 s loop, staggered 0.15 s), gone by 1.3 s;
     message opens from the tail (scale 0.86 → 1) at 1.1–1.35 s, held 3 s, out in 0.3 s.
   pointer-events: none — an invisible bubble must never take a tap meant for the page under it. ── */
.sc-bub { position: absolute; z-index: 3; left: 0; bottom: calc(100% + 0.875rem);
  width: max-content; max-width: min(17.5rem, calc(100vw - 2rem)); box-sizing: border-box;
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem 0.6875rem 0.75rem;
  border-radius: 1.125rem 1.125rem 1.125rem 0.375rem; pointer-events: none;
  font-family: 'Cairo', system-ui, sans-serif; opacity: 0; transform-origin: 1.75rem calc(100% + 0.875rem);
  background: #fff; color: #111827; border: 1px solid #eceff3;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08); }
.sc-bub::after { /* the tail, pointing down at the circle */
  content: ""; position: absolute; left: 1.375rem; bottom: -0.3125rem; width: 0.75rem; height: 0.75rem;
  transform: rotate(45deg); border-radius: 0 0 0.1875rem 0;
  background: #fff; border-right: 1px solid #eceff3; border-bottom: 1px solid #eceff3; }
.sc-bub-av { flex: none; width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.875rem; background: #111827; color: #fff; overflow: hidden; }
.sc-bub-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sc-bub-tx { min-width: 0; display: flex; flex-direction: column; }
.sc-bub-nm { font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: #64748b; }
.sc-bub-t { font-size: 0.9375rem; font-weight: 700; line-height: 1.5; }
.sc-typing { padding: 0.75rem 0.875rem; gap: 0.3125rem; animation: sc-type 24s ease-out 1s infinite; }
.sc-typing i { display: block; width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: #64748b;
  animation: sc-dot 0.9s ease-in-out infinite; }
.sc-typing i:nth-child(2) { animation-delay: .15s; }
.sc-typing i:nth-child(3) { animation-delay: .3s; }
.sc-bub-msg { animation: sc-arrive 24s ease-out 1s infinite; }
html[dir="ltr"] .sc-bub { left: auto; right: 0; border-radius: 1.125rem 1.125rem 0.375rem 1.125rem;
  transform-origin: calc(100% - 1.75rem) calc(100% + 0.875rem); }
html[dir="ltr"] .sc-bub::after { left: auto; right: 1.375rem; }
@keyframes sc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-0.1875rem); opacity: 1; } }
@keyframes sc-type {
  0% { opacity: 0; transform: translateY(0.375rem) scale(.9); }
  1% { opacity: 1; transform: none; }
  4.6% { opacity: 1; transform: none; }
  5.4% { opacity: 0; transform: scale(.92); }
  100% { opacity: 0; transform: scale(.92); }
}
@keyframes sc-arrive {
  0%, 4.6% { opacity: 0; transform: translateY(0.375rem) scale(.86); }
  5.6% { opacity: 1; transform: none; }
  18.1% { opacity: 1; transform: none; }
  19.4% { opacity: 0; transform: translateY(0.25rem); }
  100% { opacity: 0; transform: translateY(0.25rem); }
}

/* No motion at all for a customer who asked for none: no pulse, no home message. */
@media (prefers-reduced-motion: reduce) {
  .sc-pulse::before { animation: none !important; display: none; }
  .sc-bub, .sc-bub * { animation: none !important; }
  .sc-bub { display: none; }
}

/* ── state 9: the home's line when a reply waits ── */
.sc-wait { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.875rem; padding: 0.75rem 0.875rem;
  border: 1px solid #bae6fd; background: #f0f9ff; color: #0c4a6e; }
.sc-wait-tx { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.6; }
.sc-wait-tx small { display: block; font-size: 0.75rem; font-weight: 600; color: #075985; overflow-wrap: anywhere; }
.sc-wait-go { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem;
  background: #0369a1; color: #fff; font-size: 0.875rem; font-weight: 700; text-decoration: none; }

/* The receipt's «محتاج تكلّم المطعم؟» card gets the same door. */
.sc-card-btn { margin-top: 0.625rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sc-card-btn svg { width: 1.125rem; height: 1.125rem; }

/* ── THE PANEL — a sheet over the store column (full screen at 390; a 30rem card over the dimmed page wider) ── */
.sc-sheet-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .32); z-index: 30; }
.sc-sheet { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 30rem; margin: 0 auto; z-index: 31;
  display: flex; flex-direction: column; background: #f8fafc; }
@media (min-width: 40rem) { .sc-sheet { top: 1.5rem; bottom: 1.5rem; overflow: hidden; box-shadow: 0 18px 50px rgba(15, 23, 42, .28); } }
.sc-head { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; background: #fff; border-bottom: 1px solid #e5e7eb; }
.sc-av { flex: none; width: 2.5rem; height: 2.5rem; background: #e0f2fe; color: #0c4a6e;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9375rem; overflow: hidden; }
.sc-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sc-id { flex: 1 1 auto; min-width: 0; }
.sc-name { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.5; }
.sc-sub { font-size: 0.75rem; font-weight: 600; color: #64748b; line-height: 1.5; display: flex; align-items: center; gap: 0.375rem; }
.sc-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #16a34a; flex: none; }
.sc-x { flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid #e5e7eb; background: #fff;
  color: #334155; display: flex; align-items: center; justify-content: center; }
.sc-x svg { width: 1.125rem; height: 1.125rem; }

.sc-body { flex: 1 1 auto; overflow: auto; padding: 0.875rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.sc-list { display: flex; flex-direction: column; gap: 0.625rem; }
.sc-who { align-self: center; max-width: 100%; margin: 0; font-size: 0.75rem; font-weight: 600; color: #64748b; text-align: center; line-height: 1.6; }
.sc-who bdi { color: #334155; }

/* The order card on top (state 3) — the home card's words. */
.sc-order { border: 1px solid #e5e7eb; background: #fff; padding: 0.75rem 0.875rem; }
.sc-order-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sc-order-t { font-size: 0.9375rem; font-weight: 700; color: #111827; }
.sc-order-m { margin-top: 0.125rem; font-size: 0.75rem; font-weight: 600; color: #64748b; }
.sc-order-go { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.25rem; color: #0369a1;
  font-size: 0.875rem; font-weight: 700; text-decoration: none; }

.sc-msg { max-width: 82%; padding: 0.5rem 0.75rem 0.375rem; font-size: 0.9375rem; line-height: 1.65; color: #111827; overflow-wrap: anywhere; }
.sc-msg-t { display: block; white-space: pre-line; }
.sc-msg-m { display: block; margin-top: 0.125rem; font-size: 0.6875rem; font-weight: 600; color: #64748b; }
/* RTL, as WhatsApp draws Arabic: the restaurant on the right, the customer's own on the left. */
.sc-in { align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; }
.sc-out { align-self: flex-end; background: #0369a1; color: #fff; }
.sc-out .sc-msg-m { color: #e0f2fe; }
.sc-out.sc-failed { background: #fff; color: #111827; border: 1px solid #fecaca; }
.sc-out.sc-failed .sc-msg-m { color: #b91c1c; }
.sc-day { align-self: center; font-size: 0.6875rem; font-weight: 700; color: #64748b; background: #eef2f6; padding: 0.125rem 0.625rem; }
.sc-from { display: block; font-size: 0.75rem; font-weight: 700; color: #0369a1; }

.sc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; margin: 0; }
.sc-chip { min-height: 2.75rem; padding: 0 1rem; border: 1px solid #bae6fd; background: #fff; color: #0c4a6e;
  font: 700 0.875rem/1 'Cairo', system-ui, sans-serif; cursor: pointer; }

.sc-comp { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin: 0;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e5e7eb; }
.sc-err { flex: 1 0 100%; margin: 0; font-size: 0.8125rem; font-weight: 700; color: #b91c1c; }
/* 1rem, not the mockup's 0.9375rem: iOS zooms into a field under 16px (store.css, no zoom 28/9). */
.sc-in-box { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; max-height: 8rem; padding: 0.5rem 0.875rem; border: 1px solid #cbd5e1;
  font: 600 1rem/1.6 'Cairo', system-ui, sans-serif; color: #111827; background: #fff; box-sizing: border-box; resize: none; }
.sc-in-box::placeholder { color: #64748b; }
.sc-send { flex: none; width: 2.75rem; height: 2.75rem; border: 0; background: #0369a1; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sc-send svg { width: 1.25rem; height: 1.25rem; transform: scaleX(-1); }
html[dir="ltr"] .sc-send svg { transform: none; }

/* ── THE TOPICS (#32 · متجر 52, Part B; the mockup's topics.css, field for field) — three full-width choices before
   the customer can type (Mohamed 01:24 «أخليه يختار … مش هستناه يكتب»), the store's blue, 56px tall, 44px floors. ── */
.tp-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.125rem 0 0; }
.tp-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.5rem; padding: 0.625rem 0.875rem;
  border: 1px solid #bae6fd; background: #fff; color: #0c4a6e; text-align: start; cursor: pointer;
  font-family: 'Cairo', system-ui, sans-serif; box-sizing: border-box; }
.tp-btn:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
.tp-ic { flex: none; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  background: #f0f9ff; color: #0369a1; }
.tp-ic svg { width: 1.25rem; height: 1.25rem; }
.tp-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tp-t { font-size: 0.9375rem; font-weight: 800; line-height: 1.5; color: #0c4a6e; }
.tp-h { font-size: 0.75rem; font-weight: 600; line-height: 1.5; color: #64748b; }
.tp-go { flex: none; width: 1rem; height: 1rem; color: #0369a1; }
.tp-go svg { width: 1rem; height: 1rem; }
html[dir="ltr"] .tp-go svg { transform: scaleX(-1); }
/* The chosen topic: a slim line under the head, with «غيّر» (back to the three). */
.tp-bar { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; background: #f0f9ff;
  border-bottom: 1px solid #bae6fd; font-size: 0.8125rem; font-weight: 700; color: #0c4a6e; }
.tp-bar b { font-weight: 800; }
.tp-bar a { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem;
  color: #0369a1; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* The routing line the store draws after the choice (a store line, not a Chatwoot message). */
.tp-routed { align-self: center; max-width: 100%; margin: 0; padding: 0.375rem 0.75rem; background: #eef2f6;
  font-size: 0.75rem; font-weight: 700; color: #334155; text-align: center; line-height: 1.6; }
/* Before a choice the composer is shut: no typing until a topic is picked. */
.tp-locked .sc-in-box { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.tp-locked .sc-send { background: #cbd5e1; cursor: default; }

/* SHARP — the panel and the line sit outside .s-shell or beside it; they take the store's rule here. */
.sc-sheet, .sc-sheet *:not(.sc-dot), .sc-wait, .sc-wait * { border-radius: 0 !important; }