/* ==========================================================================
   TFA Contact — floating contact widget
   Apple HIG: League Spartan brand face, translucent material, hairline separators,
   continuous corner radii, 44pt touch targets, spring easing, light + dark.

   PORT NOTE (thefutureanalyst.com): this file is the stylesheet running on
   madzynguyen.com, byte for byte, except for the four lines marked PORT below.
   Each one only swaps a hardcoded value for a CSS variable WITH THE ORIGINAL
   VALUE AS FALLBACK, so behaviour is unchanged when the plugin sets nothing.
   ========================================================================== */

.tfa-ct {
  /* Apple's standard "smooth spring" curve — decisive out, gentle settle. */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --tint: #0E8C7F;               /* TFA brand, used as the system accent */
  --material: rgba(252, 252, 253, 0.72);
  --sep: rgba(60, 60, 67, 0.13);
  --label: #1c1c1e;
  --label-2: rgba(60, 60, 67, 0.6);
  --row-press: rgba(60, 60, 67, 0.09);
  --edge: rgba(255, 255, 255, 0.6);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.08);

  position: fixed;
  /* PORT 1: bottom offset is a setting — GeneratePress puts its own back to top
     button in this exact corner, so the widget has to be able to step aside. */
  bottom: calc(var(--tfa-ct-bottom, 20px) + env(safe-area-inset-bottom));
  z-index: 2147483000;           /* above Divi overlays and any chat widget */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* Brand face, same stack as tfa-checkout's shared.css so the widget matches
     the rest of the site rather than looking like a system dialog.
     PORT 2: thefutureanalyst.com does not load League Spartan (GeneratePress
     serves Open Sans / Inter), so the face is a variable the settings screen
     fills in: either the site's own body font, or the brand face self loaded. */
  font-family: var(--tfa-ct-face, 'League Spartan', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* PORT 3 + 4: side offset is a setting, same reason as the bottom one. */
.tfa-ct[data-pos="right"] { right: calc(var(--tfa-ct-side, 20px) + env(safe-area-inset-right)); align-items: flex-end; }
.tfa-ct[data-pos="left"]  { left:  calc(var(--tfa-ct-side, 20px) + env(safe-area-inset-left));  align-items: flex-start; }

@media (prefers-color-scheme: dark) {
  .tfa-ct {
    --material: rgba(28, 28, 30, 0.74);
    --sep: rgba(84, 84, 88, 0.5);
    --label: #f2f2f7;
    --label-2: rgba(235, 235, 245, 0.6);
    --row-press: rgba(235, 235, 245, 0.12);
    --edge: rgba(255, 255, 255, 0.12);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
  }
}

/* --------------------------------------------------------------- scrim --- */
/* Mobile only: iOS dims the content behind a presented menu. */
.tfa-ct-scrim {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0; transition: opacity 0.3s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.tfa-ct.is-open .tfa-ct-scrim { opacity: 1; }
@media (min-width: 768px) { .tfa-ct-scrim { display: none; } }

/* --------------------------------------------------------------- panel --- */
.tfa-ct-panel {
  width: 296px;
  max-width: calc(100vw - 32px);
  border-radius: 20px;
  background: var(--material);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow), inset 0 0 0 0.5px var(--edge);
  overflow: hidden;

  /* Grows out of the button it belongs to. */
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.88) translateY(8px);
  transition: opacity 0.28s var(--spring), transform 0.38s var(--spring);
}
.tfa-ct[data-pos="left"] .tfa-ct-panel { transform-origin: bottom left; }
.tfa-ct.is-open .tfa-ct-panel { opacity: 1; transform: none; }
.tfa-ct-panel[hidden] { display: none; }

.tfa-ct-head { padding: 16px 18px 12px; }
.tfa-ct-title {
  margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.02em; color: var(--label);
}
.tfa-ct-sub {
  margin: 3px 0 0; font-size: 13px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--label-2);
}

/* ---------------------------------------------------------------- rows --- */
.tfa-ct-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px;              /* comfortably past the 44pt minimum */
  padding: 10px 14px 10px 16px;
  text-decoration: none;
  position: relative;
  transition: background-color 0.18s ease, transform 0.18s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
/* Hairline inset from the text, the way iOS insets table separators. */
.tfa-ct-row + .tfa-ct-row::before {
  content: ""; position: absolute; left: 62px; right: 0; top: 0;
  height: 1px; transform: scaleY(0.5); transform-origin: top;
  background: var(--sep);
}
.tfa-ct-row:hover  { background: var(--row-press); }
.tfa-ct-row:active { background: var(--row-press); transform: scale(0.985); }
.tfa-ct-row:focus-visible { outline: none; background: var(--row-press); box-shadow: inset 0 0 0 2.5px var(--tint); }

.tfa-ct-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.tfa-ct-ico svg { width: 21px; height: 21px; display: block; }
.tfa-ct-ico[data-ch="zalo"] svg { width: 30px; height: 30px; }

/* Platform colours — the customer recognises where the tap will take them. */
.tfa-ct-ico[data-ch="messenger"] { background: linear-gradient(160deg, #00B2FF 0%, #006AFF 50%, #A033FF 100%); }
.tfa-ct-ico[data-ch="zalo"]      { background: #0068FF; }
.tfa-ct-ico[data-ch="phone"]     { background: #34C759; }  /* Apple system green */

.tfa-ct-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tfa-ct-lbl {
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--label); line-height: 1.25;
}
/* Descriptions are short by default, but the field is free text — wrap to at
   most three lines so a longer one degrades gracefully instead of being cut
   mid-word by an ellipsis. */
.tfa-ct-desc {
  font-size: 12.5px; letter-spacing: -0.005em; color: var(--label-2); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.tfa-ct-chev { flex: 0 0 auto; width: 15px; height: 15px; color: var(--label-2); opacity: 0.55; }

/* ----------------------------------------------------------------- fab --- */
/* Idle motion lives on the WRAPPER, not the button: the button's transform is
   already spoken for by hover / press / the hint nudge, and two animations
   cannot share one property. Moving the wrapper carries the caption along, so
   button and label drift as one object. */
.tfa-ct-fabwrap { position: relative; }

.tfa-ct[data-motion="float"] .tfa-ct-fabwrap { animation: tfa-ct-float 3.4s ease-in-out infinite; }
@keyframes tfa-ct-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.tfa-ct[data-motion="pulse"] .tfa-ct-fabwrap { animation: tfa-ct-pulse 2.6s ease-in-out infinite; }
@keyframes tfa-ct-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* Freeze the instant the visitor reaches for it: a target that keeps moving is
   harder to hit, and worse for anyone with a tremor. Pausing on hover/focus
   keeps the drift purely decorative and never in the way.
   The selector must out-specify the rule that starts the animation — the
   `animation` shorthand there resets play-state to running, so a plain
   `.tfa-ct-fabwrap:hover` silently loses. */
.tfa-ct[data-motion] .tfa-ct-fabwrap:hover,
.tfa-ct[data-motion] .tfa-ct-fabwrap:focus-within { animation-play-state: paused; }

/* Hold still while the panel is open — the button anchors the panel. */
.tfa-ct.is-open .tfa-ct-fabwrap { animation: none; }

/* Caption floating just above the circle. Always on screen, so the button
   explains itself without having to grow into a pill. */
.tfa-ct-cap {
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  color: var(--label);
  background: var(--material);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow), inset 0 0 0 0.5px var(--edge);
  transition: opacity 0.26s var(--spring), transform 0.34s var(--spring);
}
/* The panel takes this space when open. */
.tfa-ct.is-open .tfa-ct-cap { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.94); }

.tfa-ct-fab {
  position: relative;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--tint); color: #fff; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(14, 140, 127, 0.36), 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform 0.32s var(--spring), box-shadow 0.32s var(--spring);
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.tfa-ct-fab:hover  { transform: scale(1.05); }
.tfa-ct-fab:active { transform: scale(0.94); }
.tfa-ct-fab:focus-visible { outline: 3px solid var(--tint); outline-offset: 3px; }

.tfa-ct-fab-ico { position: relative; width: 27px; height: 27px; }
.tfa-ct-fab-ico svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity 0.24s var(--spring), transform 0.32s var(--spring);
}
.tfa-ct-fab-close { opacity: 0; transform: rotate(-90deg) scale(0.7); }
.tfa-ct.is-open .tfa-ct-fab-open  { opacity: 0; transform: rotate(90deg) scale(0.7); }
.tfa-ct.is-open .tfa-ct-fab-close { opacity: 1; transform: none; }

/* ----------------------------------------------------------- attention --- */
/* Two rings leaving the pill half a beat apart — a double ripple reads from the
   corner of the eye far better than a single one — plus a springy nudge of the
   button. Still deliberately FINITE and once-per-visit: a button that pulses
   forever becomes wallpaper, and a fake unread badge (a red "1" with no message
   behind it) is a dark pattern we will not ship. */
.tfa-ct-fab::before,
.tfa-ct-fab::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2.5px solid var(--tint);
  opacity: 0; pointer-events: none;
}
.tfa-ct.is-hinting .tfa-ct-fab::before { animation: tfa-ct-halo 2s ease-out 4; }
.tfa-ct.is-hinting .tfa-ct-fab::after  { animation: tfa-ct-halo 2s ease-out 4 0.5s; }

@keyframes tfa-ct-halo {
  0%   { opacity: 0.75; transform: scale(1); }
  65%  { opacity: 0;    transform: scale(1.55); }
  100% { opacity: 0;    transform: scale(1.55); }
}

/* Nudge, in step with the first ring. */
.tfa-ct.is-hinting .tfa-ct-fab { animation: tfa-ct-nudge 2s var(--spring) 4; }
@keyframes tfa-ct-nudge {
  0%, 22%, 100% { transform: scale(1); }
  7%            { transform: scale(1.11); }
  15%           { transform: scale(0.985); }
}
/* Lift the shadow while it is calling for attention. */
.tfa-ct.is-hinting .tfa-ct-fab {
  box-shadow: 0 12px 34px rgba(14, 140, 127, 0.5), 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------- desktop --- */
/* Phone sizes are tuned for arm's length; on a desktop the same numbers read
   small, so everything steps up about a point and the panel widens to match. */
@media (min-width: 768px) {
  .tfa-ct-cap   { font-size: 14px; padding: 7px 14px; }
  .tfa-ct-panel { width: 312px; }
  .tfa-ct-title { font-size: 17.5px; }
  .tfa-ct-sub   { font-size: 14px; }
  .tfa-ct-lbl   { font-size: 16.5px; }
  .tfa-ct-desc  { font-size: 13.5px; }
  .tfa-ct-row   { min-height: 64px; }
  .tfa-ct-chev  { width: 16px; height: 16px; }
}

/* -------------------------------------------------------------- motion --- */
@media (prefers-reduced-motion: reduce) {
  /* The caption stays (it carries the meaning); the movement goes. */
  .tfa-ct.is-hinting .tfa-ct-fab,
  .tfa-ct.is-hinting .tfa-ct-fab::before,
  .tfa-ct.is-hinting .tfa-ct-fab::after,
  .tfa-ct[data-motion="float"] .tfa-ct-fabwrap,
  .tfa-ct[data-motion="pulse"] .tfa-ct-fabwrap { animation: none; }
  .tfa-ct-cap { transition: opacity 0.15s linear; }
  .tfa-ct-panel { transition: opacity 0.15s linear; transform: none; }
  .tfa-ct.is-open .tfa-ct-panel { transform: none; }
  .tfa-ct-fab, .tfa-ct-fab svg, .tfa-ct-row, .tfa-ct-scrim { transition-duration: 0.01ms; }
  .tfa-ct-fab:hover, .tfa-ct-fab:active { transform: none; }
}

/* Older browsers without backdrop-filter get a solid surface, not a see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tfa-ct-panel { background: #fcfcfd; }
  @media (prefers-color-scheme: dark) { .tfa-ct-panel { background: #1c1c1e; } }
}