/** Shopify CDN: Minification failed

Line 202:0 Unexpected "}"

**/
/* ── Floating contact — attached drawer ────────────────────────────────────────
   Dual-theme: Light (Ivory/Espresso) + Dark (Noir/Bronze).
   Two genuinely different surface treatments via CSS custom properties.
   Light = warm ivory surface (#FAFAF8), deep espresso glyph (#1E1510).
   Dark  = espresso surface (#1A1512), warm ivory glyph (#FAEFDD), bronze ring.
   Theme source: html[data-theme="dark"] primary, prefers-color-scheme fallback.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Layout constants ────────────────────────────────────────────────────────
   Shopify Inbox launcher: bottom:88px, height:47px, right:20px.
   If the merchant changes button_vertical_position in Shopify Admin, update
   --tla-inbox-bottom/height to match.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --tla-inbox-bottom:    88px;   /* Shopify launcher CSS bottom edge */
  --tla-inbox-height:    47px;   /* Shopify launcher height */
  --tla-ai-cover-size:   45px;   /* #tla-ai-cover diameter (1px inset each side) */
  --tla-fc-pill-height:  48px;   /* .tla-fc trigger/pill height (46px content + 2×1px border) */
  --tla-floating-gap:    14px;   /* gap between every element in the stack */

  /* ── Light mode color tokens (Ivory/Espresso) ─────────────────────────── */
  --tla-surface:           #FAEFDD;
  --tla-glyph:             #1E1510;
  --tla-ring:              rgba(53, 38, 32, 0.18);
  --tla-ring-hover:        rgba(53, 38, 32, 0.35);
  --tla-shadow-a:          rgba(30, 21, 16, 0.12);
  --tla-shadow-b:          rgba(30, 21, 16, 0.07);
  --tla-highlight:         rgba(255, 255, 255, 0.72);
  --tla-link:              rgba(30, 21, 16, 0.55);
  --tla-link-hover-bg:     rgba(30, 21, 16, 0.07);
  --tla-divider:           rgba(30, 21, 16, 0.14);
  --tla-sweep:             rgba(30, 21, 16, 0.04);
  --tla-trigger-hover-bg:  #F0E5CB;
  --tla-trigger-active-bg: #E6D5B0;
  --tla-focus-ring:        rgba(30, 21, 16, 0.60);
  --tla-panel-border:      rgba(30, 21, 16, 0.10);
  --tla-panel-shadow:      rgba(30, 21, 16, 0.12);
}

/* ── Dark mode tokens (Noir/Bronze) ──────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tla-surface:           #1A1512;
    --tla-glyph:             #FAEFDD;
    --tla-ring:              rgba(196, 168, 130, 0.28);
    --tla-ring-hover:        rgba(196, 168, 130, 0.52);
    --tla-shadow-a:          rgba(0, 0, 0, 0.38);
    --tla-shadow-b:          rgba(0, 0, 0, 0.22);
    --tla-highlight:         rgba(250, 239, 221, 0.07);
    --tla-link:              rgba(250, 239, 221, 0.60);
    --tla-link-hover-bg:     rgba(250, 239, 221, 0.10);
    --tla-divider:           rgba(250, 239, 221, 0.12);
    --tla-sweep:             rgba(250, 239, 221, 0.09);
    --tla-trigger-hover-bg:  #1E1814;
    --tla-trigger-active-bg: #151210;
    --tla-focus-ring:        rgba(250, 239, 221, 0.60);
    --tla-panel-border:      rgba(196, 168, 130, 0.32);
    --tla-panel-shadow:      rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --tla-surface:           #1A1512;
  --tla-glyph:             #FAEFDD;
  --tla-ring:              rgba(196, 168, 130, 0.28);
  --tla-ring-hover:        rgba(196, 168, 130, 0.52);
  --tla-shadow-a:          rgba(0, 0, 0, 0.38);
  --tla-shadow-b:          rgba(0, 0, 0, 0.22);
  --tla-highlight:         rgba(250, 239, 221, 0.07);
  --tla-link:              rgba(250, 239, 221, 0.60);
  --tla-link-hover-bg:     rgba(250, 239, 221, 0.10);
  --tla-divider:           rgba(250, 239, 221, 0.12);
  --tla-sweep:             rgba(250, 239, 221, 0.09);
  --tla-trigger-hover-bg:  #1E1814;
  --tla-trigger-active-bg: #151210;
  --tla-focus-ring:        rgba(250, 239, 221, 0.60);
  --tla-panel-border:      rgba(196, 168, 130, 0.32);
  --tla-panel-shadow:      rgba(0, 0, 0, 0.45);
}

/* ── Outer container — positioning only ─────────────────────────────────── */
/* Stack vertical repositioning (SATC lift) is INSTANT on mobile — no transition
   on translate/bottom — because animated repositioning on different compositing
   paths (.activator-nudge uses main-thread `bottom`; .tla-fc uses composited
   `translate`) causes transient gaps and overlaps during real scroll on device.
   Opacity and hover/active micro-interactions keep their transitions. */

.tla-fc {
  position: fixed;
  right: 20px;
  bottom: calc(
    env(safe-area-inset-bottom, 0px)
    + var(--tla-inbox-bottom, 88px)
    + var(--tla-inbox-height, 47px)
    + var(--tla-floating-gap, 14px)
  );
  z-index: 200;
  /* NO position transitions — JS sets style.bottom directly (Chat-anchored sync) */
  transition: opacity 0.15s ease;
}

/* Desktop: same formula (SATC is mobile-only so translate resolves to 0). */
@media screen and (min-width: 750px) {
  .tla-fc {
    bottom: calc(
      env(safe-area-inset-bottom, 0px)
      + var(--tla-inbox-bottom, 88px)
      + var(--tla-inbox-height, 47px)
      + var(--tla-floating-gap, 14px)
    );
  }
}

/* ── Suppress entire floating stack when a drawer / overlay is open ─────────
   Targets: social pill, AI cover, and native Shopify launcher.
   body[class*="overflow-hidden"] fires when cart / nav drawers add their
   overflow-hidden-drawer class. All three must hide together and return together.
   Return: removing the body class ends the rule; each element's own opacity
   transition fades it back (0.15–0.18s). The shopify-chat host itself is NOT
   hidden — only the activator part — so any open dialog panel is unaffected.
   ─────────────────────────────────────────────────────────────────────────── */

/* Explicit allowlist: suppress on drawer/overlay classes only.
   overflow-hidden-notify (stock notification) intentionally excluded. */
body.overflow-hidden .tla-fc,
body.overflow-hidden-drawer .tla-fc,
body.overflow-hidden-aside .tla-fc,
body.overflow-hidden-modal .tla-fc,
body.overflow-hidden-pickup .tla-fc,
body.overflow-hidden-lg .tla-fc,
body.overflow-hidden-md .tla-fc {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
}
/* shopify-chat::part(activator) + its child #tla-ai-visual are hidden below. */

body.overflow-hidden shopify-chat::part(activator),
body.overflow-hidden-drawer shopify-chat::part(activator),
body.overflow-hidden-aside shopify-chat::part(activator),
body.overflow-hidden-modal shopify-chat::part(activator),
body.overflow-hidden-pickup shopify-chat::part(activator),
body.overflow-hidden-lg shopify-chat::part(activator),
body.overflow-hidden-md shopify-chat::part(activator) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── COD popup open — suppress all floating controls ────────────────────────
   The COD app adds body.cod-buy-now-popup--open when its form overlay is open.
   Hide Social tray, AI cover, and Shopify Inbox activator during the popup
   so they don't overlap the form. NOT hiding any COD app UI elements.
   ─────────────────────────────────────────────────────────────────────────── */
body.cod-buy-now-popup--open .tla-fc {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
}

body.cod-buy-now-popup--open shopify-chat::part(activator) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── COD popup ISSUE 3: prevent sticky ORDER NOW bar from covering APPLY ────
   Root cause: .cod-buy-now-popup__dialog has max-height ≈ 88dvh (COD app CSS).
   At viewport heights ≤ 800px, this leaves insufficient dialog height for the
   coupon/APPLY section to appear above the position:sticky ORDER NOW bar
   (which permanently occupies the bottom 87px of the dialog viewport).

   Fix A — raise dialog max-height:
     The popup is position:fixed, full viewport, padding:24px 16px.
     Dialog should fill popup's interior: 100dvh − 48px (top + bottom padding).
     At 375×812+: gap between APPLY bottom and ORDER NOW top ≥ 46px. ✓
     At 360×800:  gap = 46px. ✓
     At 320×568:  dialog limited to 520px; APPLY (scroll-content-y=575) still
                  requires scrolling — residual transition overlap at mid-scroll
                  is a physical constraint of the 320×568 form length.

   Fix B — extend scrollable body below ORDER NOW:
     padding-bottom = ORDER NOW height (87px) + minimum gap (16px) = 103px.
     Ensures the last visible scroll position shows APPLY well above ORDER NOW
     rather than ORDER NOW sitting on active form content.

   Both fixes are scoped to body.cod-buy-now-popup--open.
   ─────────────────────────────────────────────────────────────────────────── */
body.cod-buy-now-popup--open .cod-buy-now-popup__dialog {
  max-height: calc(100dvh - 48px) !important;
}

/* body.cod-buy-now-popup--open .cod-bn-body {
  padding-bottom: 103px !important; /* ORDER NOW height (87px) + 16px gap */
} */

/* ── Body — the unified pill ─────────────────────────────────────────────── */

.tla-fc__body {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 99px;
  overflow: hidden;
  background: var(--tla-surface);
  border: 1px solid var(--tla-ring);
  box-shadow:
    0 6px 22px var(--tla-shadow-a),
    0 2px 6px var(--tla-shadow-b),
    inset 0 1px 0 var(--tla-highlight);
}

/* ── Tray — collapses/expands leftward ───────────────────────────────────── */

.tla-fc__tray {
  max-width: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0.22s;
}

.tla-fc[data-open] .tla-fc__tray {
  max-width: 220px;
  visibility: visible;
  transition: max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
}

/* ── Icon list ───────────────────────────────────────────────────────────── */

.tla-fc__list {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

.tla-fc__item {
  margin: 0;
  flex-shrink: 0;
}

/* ── Icon links — 40×46px touch targets ─────────────────────────────────── */

.tla-fc__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 46px;
  text-decoration: none;
  color: var(--tla-link);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.16s ease,
              transform 0.16s cubic-bezier(0.34, 1.0, 0.64, 1),
              color 0.14s ease,
              background 0.14s ease;
}

.tla-fc[data-open] .tla-fc__link {
  opacity: 1;
  transform: scale(1);
}

/* Staggered reveal as tray expands */
.tla-fc[data-open] .tla-fc__item:nth-child(1) .tla-fc__link { transition-delay: 0.07s; }
.tla-fc[data-open] .tla-fc__item:nth-child(2) .tla-fc__link { transition-delay: 0.11s; }
.tla-fc[data-open] .tla-fc__item:nth-child(3) .tla-fc__link { transition-delay: 0.15s; }
.tla-fc[data-open] .tla-fc__item:nth-child(4) .tla-fc__link { transition-delay: 0.19s; }

.tla-fc__link:hover {
  background: var(--tla-link-hover-bg);
  color: var(--tla-glyph);
  transform: scale(1) translateY(-1px);
}

/* Platform identity colors on hover — same in both themes */
.tla-fc__link--whatsapp:hover  { color: rgba(37, 211, 102, 0.95); }
.tla-fc__link--instagram:hover { color: rgba(210, 85, 105, 0.92); }
.tla-fc__link--facebook:hover  { color: rgba(80, 130, 215, 0.92); }
.tla-fc__link--tiktok:hover    { color: rgba(100, 195, 205, 0.92); }

.tla-fc__link:focus-visible {
  outline: 1.5px solid var(--tla-focus-ring);
  outline-offset: -2px;
}

.tla-fc__link:active {
  transform: scale(0.93);
}

/* ── Icon wrap ───────────────────────────────────────────────────────────── */

.tla-fc__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.tla-fc__icon-wrap svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ── Divider — hairline between last icon and trigger ────────────────────── */

.tla-fc__list::after {
  content: '';
  display: block;
  width: 1px;
  height: 20px;
  background: var(--tla-divider);
  margin: 0 2px 0 4px;
  flex-shrink: 0;
}

/* ── Trigger — the circle at the right end ───────────────────────────────── */

.tla-fc__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--tla-surface);
  color: var(--tla-glyph);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.18s ease;
}

/* Specular sweep — diagonal highlight that crosses on hover */
.tla-fc__trigger::before {
  content: '';
  position: absolute;
  top: -55%;
  left: -85%;
  width: 44%;
  height: 210%;
  background: linear-gradient(
    to right,
    transparent,
    var(--tla-sweep),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.42s ease;
  pointer-events: none;
}

.tla-fc__trigger:hover {
  transform: translateY(-2px) scale(1.035);
  background: var(--tla-trigger-hover-bg);
}

.tla-fc__trigger:hover::before {
  left: 132%;
}

.tla-fc__trigger:focus-visible {
  outline: 1.5px solid var(--tla-focus-ring);
  outline-offset: 3px;
}

.tla-fc__trigger:active {
  transform: scale(0.95) translateY(0);
  background: var(--tla-trigger-active-bg);
}

/* ── Trigger icon crossfade — msg icon ↔ X ──────────────────────────────── */

.tla-fc__trigger-inner {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tla-fc__icon-msg,
.tla-fc__icon-x {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.20s ease, transform 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}

.tla-fc__icon-msg { opacity: 1; transform: scale(1) rotate(0deg); }
.tla-fc__icon-x   { opacity: 0; transform: scale(0.7) rotate(-45deg); }

.tla-fc[data-open] .tla-fc__icon-msg { opacity: 0; transform: scale(0.7) rotate(45deg); }
.tla-fc[data-open] .tla-fc__icon-x   { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Shopify Inbox launcher — ::part(activator) ──────────────────────────────
   CSS shadow-parts API — outer document styling of the shadow DOM button.
   Shopify exposes the launcher button with part="activator" on shopify-chat
   (via SHOPIFY-AGENT-RUNTIME exportparts="activator, dialog").
   Light: ivory surface, warm espresso ring.
   Dark:  espresso surface, bronze ring.
   #tla-ai-visual is injected by JS directly inside this button, so it moves
   with the button for free — no separate synchronization needed.
   inset box-shadow fills the button background; #tla-ai-visual sits on top.
   ─────────────────────────────────────────────────────────────────────────── */

shopify-chat::part(activator) {
  box-shadow:
    inset 0 0 0 200px var(--tla-surface),
    0 6px 22px var(--tla-shadow-a),
    0 2px 6px var(--tla-shadow-b),
    inset 0 1px 0 var(--tla-highlight) !important;
  border: 1px solid var(--tla-ring) !important;
  /* SATC stack shift is handled on .activator-nudge (the intermediate
     container that owns bottom:88px) via a bottom override injected into
     the shadow root by suppressNudgeBounce() in floating-contact.js.
     transform/translate on children of shopify-chat have no visual effect
     because shopify-chat has contain:layout — confirmed by getComputedStyle
     always returning identity even with !important. The fix extends the existing
     bottom calc: activator-offset + preview-bar-offset + --tla-satc-height.
     #tla-ai-visual (injected inside the button) follows automatically. */
  transition:
    transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease !important;
}

shopify-chat::part(activator):hover {
  /* Hover lift only — SATC offset is in `translate`, not here. */
  transform: translateY(-2px) scale(1.035) !important;
  border-color: var(--tla-ring-hover) !important;
  box-shadow:
    inset 0 0 0 200px var(--tla-trigger-hover-bg),
    0 10px 32px var(--tla-shadow-a),
    0 3px 10px var(--tla-shadow-b),
    inset 0 1px 0 var(--tla-highlight) !important;
  opacity: 0.95 !important;
}

shopify-chat::part(activator):active {
  /* Active press only — SATC offset is in `translate`, not here. */
  transform: scale(0.96) !important;
  box-shadow:
    inset 0 0 0 200px var(--tla-trigger-active-bg),
    0 2px 8px var(--tla-shadow-b) !important;
  opacity: 0.88 !important;
}

shopify-chat::part(activator):focus-visible {
  outline: 1.5px solid var(--tla-focus-ring) !important;
  outline-offset: 3px !important;
}

/* ── Shopify Inbox panel — ::part(dialog) ────────────────────────────────────
   Outer dialog shell (header area) is styleable via exported ::part(dialog).
   Inner iframe (message thread, input field) uses settings_data.json values
   background_color:#FAEFDD / font_color:#352620 — NOT dynamically themeable.
   This is a Shopify platform limitation (iframe served from shop URL, colors
   baked in at page render from app block settings).
   Treatment: warm ivory panel with branded espresso text is Threadline's neutral
   identity — works as a floating card in both light and dark page contexts.
   Dark mode: bronze border + deeper shadow to anchor it on dark backgrounds.
   ─────────────────────────────────────────────────────────────────────────── */

shopify-chat::part(dialog) {
  border-color: var(--tla-panel-border) !important;
  box-shadow:
    0 16px 48px var(--tla-panel-shadow),
    0 4px 12px var(--tla-shadow-b) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

/* Dark mode: Shopify Inbox theme variables — cascade through two shadow DOM
   levels into shopify-agent-runtime. Confirmed via JS test:
   closeBtnBg cream→chocolate, primaryBtn cream→Threadline brown.
   Affects: icon button surfaces, new-chat-popover bg, CTA button.
   LIGHT MODE: zero effect — selectors only fire in dark mode.
   IFRAME CONTENT: NOT affected — cross-origin blocked.
   SIGN-IN BUTTON: NOT affected — hardcoded Shopify purple.
   ─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] shopify-chat {
  --shopify-chat-bg-color:          #35231A;   /* warm chocolate — icon btn bg, popover bg */
  --shopify-chat-text-color:        #FAEFDD;   /* warm ivory */
  --shopify-chat-accent-bg-color:   #43291C;   /* rich brown — CTA button */
  --shopify-chat-accent-text-color: #FAEFDD;   /* cream text on accent */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) shopify-chat {
    --shopify-chat-bg-color:          #35231A;
    --shopify-chat-text-color:        #FAEFDD;
    --shopify-chat-accent-bg-color:   #43291C;
    --shopify-chat-accent-text-color: #FAEFDD;
  }
}

/* Dark mode: outer dialog frame — luxurious chocolate leather.
   Gradient: deepest espresso at header → cocoa at body.
   Bronze edge + inset bronze highlight + warm layered shadow.
   Inner iframe content stays cream (baked by Shopify from settings_data.json —
   reads as a warm elevated assistant card inside the dark shell). */
:root[data-theme="dark"] shopify-chat::part(dialog) {
  background:
    linear-gradient(180deg, rgba(185,139,99,0.09) 0, rgba(185,139,99,0) 52px),
    linear-gradient(170deg, #1A120E 0%, #211610 18%, #2A1B14 50%, #2A1B14 100%) !important;
  border-color: rgba(185, 139, 99, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(185, 139, 99, 0.12),
    0 0 0 1px rgba(53, 35, 26, 0.50),
    0 32px 80px rgba(14, 7, 3, 0.52),
    0 12px 32px rgba(14, 7, 3, 0.34),
    0 4px 12px rgba(14, 7, 3, 0.22) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) shopify-chat::part(dialog) {
    background:
      linear-gradient(180deg, rgba(185,139,99,0.09) 0, rgba(185,139,99,0) 52px),
      linear-gradient(170deg, #1A120E 0%, #211610 18%, #2A1B14 50%, #2A1B14 100%) !important;
    border-color: rgba(185, 139, 99, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(185, 139, 99, 0.12),
      0 0 0 1px rgba(53, 35, 26, 0.50),
      0 32px 80px rgba(14, 7, 3, 0.52),
      0 12px 32px rgba(14, 7, 3, 0.34),
      0 4px 12px rgba(14, 7, 3, 0.22) !important;
  }
}

/* ── AI assistant icon overlay (legacy — superseded by shadow DOM injection) ──
   #tla-ai-cover remains in the liquid as a DOM node but is permanently hidden.
   The visual is now #tla-ai-visual, injected by JS into button[part="activator"]
   inside Shopify's shadow DOM, so it shares the button's compositing context.
   All hover/active states and animations live in the shadow-scoped CSS
   (TLA_VISUAL_CSS in floating-contact.js), not here.
   ─────────────────────────────────────────────────────────────────────────── */

#tla-ai-cover {
  display: none !important;
}

/* ── Hide floating controls while Shopify Inbox panel is open ────────────────
   When html[data-tla-inbox-open="true"] is set by JS (via aria-expanded on the
   activator button), .tla-fc and #tla-ai-cover must be fully out of the way.
   #tla-ai-cover carries z-index:2147483001 and would otherwise sit above the
   open dialog — the !important ensures these override any animation fill mode.
   Controls return (transition fade-in) as soon as the attribute is removed.
   ─────────────────────────────────────────────────────────────────────────── */

html[data-tla-inbox-open="true"] .tla-fc {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.13s ease, visibility 0s 0.13s !important;
}
/* shopify-chat::part(activator) hides itself when aria-expanded=true;
   #tla-ai-visual (inside the button) hides with it automatically. */

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html[data-tla-inbox-open="true"] .tla-fc {
    transition: none !important;
  }
  .tla-fc {
    transition: none !important;
  }

  .tla-fc,
  .tla-fc__tray,
  .tla-fc__link,
  .tla-fc__icon-msg,
  .tla-fc__icon-x,
  .tla-fc__trigger {
    transition: none !important;
  }
  .tla-fc[data-open] .tla-fc__item:nth-child(n) .tla-fc__link {
    transition-delay: 0s;
  }
  .tla-fc__tray {
    transition: visibility 0s !important;
  }
  .tla-fc[data-open] .tla-fc__tray {
    max-width: 220px;
    visibility: visible;
    transition: visibility 0s !important;
  }
  .tla-fc__trigger:hover,
  .tla-fc__trigger:active {
    transform: none;
  }
  shopify-chat::part(activator):hover,
  shopify-chat::part(activator):active {
    /* Reduced motion: remove hover/active lift. SATC shift stays on `translate`. */
    transform: none !important;
  }
  /* #tla-ai-cover is permanently hidden; #tla-ai-visual has its own reduced-
     motion rules in the shadow-scoped TLA_VISUAL_CSS in floating-contact.js. */
}

/* ── Short viewport (landscape phones) ──────────────────────────────────── */
/* Reduced gaps at landscape (SATC is typically not visible in landscape). */
@media screen and (max-height: 500px) {
  .tla-fc {
    bottom: calc(
      env(safe-area-inset-bottom, 0px)
      + var(--tla-inbox-bottom, 88px)
      + var(--tla-inbox-height, 47px)
      + 8px
    );
    /* JS Chat-anchor sync overrides bottom; CSS formula is pre-JS fallback only. */
  }
}

/* ── Shadow-DOM cluster — #tla-custom-stack ─────────────────────────────────
   Social (.tla-fc) and FATC (.tla-fatc) now live INSIDE .activator-nudge in
   Shopify Chat's shadow root (injected by floating-contact.js ensureFloatingCluster).
   #tla-custom-stack is position:absolute within .activator-nudge → all three
   elements (Chat, Social, FATC) move as ONE physical entity → zero-race design.
   The full cluster CSS is injected into the shadow root by injectClusterCSS().
   Nothing to style here in the main document for the cluster itself.            */

/* ── Narrow viewport guard ───────────────────────────────────────────────── */

@media screen and (max-width: 360px) {
  .tla-fc[data-open] .tla-fc__tray {
    max-width: 170px;
  }
}