/* =================================================================
   Floating ออมสิน AI button (Figma "chat-fab", 60×60 @1360,524).
   Live: fixed bottom-right, scales in once the hero search leaves the
   viewport. Static (?static=1): drawn exactly at its design position.
   ================================================================= */
.s-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 70;
  width: 60px;
  height: 60px;
  pointer-events: none;
}
.s-fab__btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gsb-pink);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6) translateY(12px);
  transition:
    opacity 280ms var(--ease-out),
    transform 420ms var(--ease-spring),
    box-shadow var(--t-med) var(--ease-out),
    visibility 0s linear 420ms;
}
.s-fab.is-visible .s-fab__btn {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 280ms var(--ease-out),
    transform 420ms var(--ease-spring),
    box-shadow var(--t-med) var(--ease-out),
    visibility 0s;
}
.s-fab__icon { width: 28px; height: 28px; transition: transform var(--t-med) var(--ease-spring); }
@media (hover: hover) {
  .s-fab.is-visible .s-fab__btn:hover { transform: translateY(-2px); box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 14px 28px -12px rgba(237, 0, 140, 0.55); }
  .s-fab__btn:hover .s-fab__icon { transform: rotate(-8deg) scale(1.06); }
}
.s-fab.is-visible .s-fab__btn:active { transform: scale(0.94); }
.s-fab__btn:focus-visible { outline-offset: 4px; border-radius: 50%; }

/* one soft pulse ring the first time it appears */
.s-fab__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.s-fab.is-pulse .s-fab__pulse { animation: s-fab-pulse 1500ms var(--ease-out) 260ms 2 both; }
@keyframes s-fab-pulse {
  from { box-shadow: 0 0 0 0 rgba(237, 0, 140, 0.42); }
  to { box-shadow: 0 0 0 18px rgba(237, 0, 140, 0); }
}

/* tooltip */
.s-fab__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.s-fab__tip::after {
  content: ""; position: absolute; right: -4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  background: inherit; border-radius: 2px; transform: rotate(45deg);
}
@media (hover: hover) {
  .s-fab__btn:hover .s-fab__tip { opacity: 1; transform: translate(0, -50%); transition-delay: 120ms; }
}
.s-fab__btn:focus-visible .s-fab__tip { opacity: 1; transform: translate(0, -50%); }

/* static diff render: exactly where Figma draws it */
html.static .s-fab {
  position: absolute;
  top: 524px;
  bottom: auto;
  right: auto;
  left: min(calc(50% + 640px), calc(100% - 80px));
}
html.static .s-fab__btn { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 767px) {
  .s-fab { right: 16px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); width: 56px; height: 56px; }
  .s-fab__btn { width: 56px; height: 56px; }
  .s-fab__icon { width: 26px; height: 26px; }
}

/* Phones: once the ออมสิน AI thread is on screen its docked composer takes over the FAB's job. */
@media (max-width: 767px) {
  /* Hide the button itself — .s-fab.is-visible .s-fab__btn would otherwise keep it visible and tappable
     on top of the docked composer's send button. */
  body.ai-thread-in-view .s-fab,
  body.ai-thread-in-view .s-fab.is-visible .s-fab__btn { opacity: 0; visibility: hidden; pointer-events: none; }
  body.ai-thread-in-view .s-fab.is-visible .s-fab__btn { transform: scale(0.8); }
}