/* =============================================================
   FAB.CSS — Back-to-top + "get in touch" floating buttons
   ============================================================= */

.fab {
  position: fixed;
  bottom: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  z-index: var(--z-fab);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--text);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast), opacity var(--dur-base);
}

.fab-top {
  left: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  background-image: conic-gradient(var(--accent-cyan) calc(var(--scroll, 0) * 1%), transparent 0);
  padding: 3px;
}
.fab-top::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bg-elevated);
}
.fab-top svg { position: relative; z-index: 1; }
.fab-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-top:hover { transform: translateY(-3px) scale(1.05); }

/* Fixed to the icon's own 52px box only — the bubble is absolutely
   positioned off to the side so it never reserves hit-test space
   over whatever sits underneath (e.g. the footer's bottom-right
   links). It's pointer-events:none, so it can't intercept clicks or
   trigger its own hover — only hovering the icon reveals it. */
.fab-chat-wrap {
  position: fixed;
  right: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  bottom: clamp(1.1rem, 0.8rem + 1vw, 1.8rem);
  z-index: var(--z-fab);
  width: 52px;
  height: 52px;
}
.fab-chat-bubble {
  position: absolute;
  right: calc(100% + 0.7rem);
  top: 50%;
  padding: 0.55rem 1rem;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.fab-chat-wrap:has(.fab-chat:hover) .fab-chat-bubble { opacity: 1; transform: translate(0, -50%); }
.fab-chat {
  position: static;
  background: var(--gradient-brand);
  color: #04110e;
  border: none;
}
.fab-chat:hover { transform: scale(1.08) rotate(-4deg); }

@media (max-width: 640px) {
  .fab-chat-bubble { display: none; }
}