/* ==========================================================
   Sysprotech Floating Social Chat
   Desktop: radial popover
   Mobile: draggable AssistiveTouch-style control
   ========================================================== */

.floating-chat {
  --chat-size: 52px;
  --chat-item-size: 46px;
  --item-x: 0px;
  --item-y: 0px;
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: var(--chat-size);
  height: var(--chat-size);
  z-index: 100001;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.floating-chat__toggle,
.floating-chat__item {
  -webkit-tap-highlight-color: transparent;
}

.floating-chat__toggle {
  position: absolute;
  inset: 0;
  width: var(--chat-size);
  height: var(--chat-size);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(145deg, #1b4f93 0%, #11315c 72%);
  box-shadow: 0 10px 26px rgba(17, 49, 92, .34), 0 3px 9px rgba(15, 23, 42, .18);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, opacity .2s ease;
  z-index: 4;
}

.floating-chat__toggle:hover,
.floating-chat__toggle:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 30px rgba(17, 49, 92, .4), 0 4px 10px rgba(15, 23, 42, .2);
}

.floating-chat__toggle:focus-visible,
.floating-chat__item:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.floating-chat__pulse {
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(27, 79, 147, .3);
  border-radius: inherit;
  animation: floating-chat-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

.floating-chat__icon {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  transition: opacity .22s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.floating-chat__icon--open { opacity: 1; transform: rotate(0) scale(1); }
.floating-chat__icon--close { opacity: 0; transform: rotate(-90deg) scale(.55); }

.floating-chat__items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floating-chat__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--chat-item-size);
  height: var(--chat-item-size);
  margin: calc(var(--chat-item-size) / -2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0) scale(.25) rotate(30deg);
  box-shadow: 0 9px 22px rgba(15, 23, 42, .22);
  transition: transform .46s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility 0s linear .46s, box-shadow .2s ease;
  will-change: transform, opacity;
  z-index: 2;
}

.floating-chat__item i { font-size: 22px; }
.floating-chat__item--messenger { background: linear-gradient(145deg, #00b2ff, #006aff 55%, #8a3ab9); }
.floating-chat__item--whatsapp { background: linear-gradient(145deg, #2ee66b, #20b958); }
.floating-chat__item--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

.floating-chat__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(5px);
  padding: 6px 9px;
  border-radius: 8px;
  color: #fff;
  background: rgba(15, 23, 42, .94);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
  z-index: 10;
}

.floating-chat__item:hover,
.floating-chat__item:focus-visible { box-shadow: 0 12px 27px rgba(15, 23, 42, .3); }
.floating-chat__item:hover .floating-chat__label,
.floating-chat__item:focus-visible .floating-chat__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.floating-chat.is-open .floating-chat__item,
.floating-chat.is-hover-open .floating-chat__item {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(var(--item-x), var(--item-y)) scale(1) rotate(0deg);
  transition-delay: var(--delay, 0s);
  transition-property: transform, opacity, visibility, box-shadow;
  transition-duration: .46s, .2s, 0s, .2s;
}

.floating-chat__item--messenger { --delay: .02s; }
.floating-chat__item--whatsapp { --delay: .07s; }
.floating-chat__item--instagram { --delay: .12s; }

.floating-chat.is-open .floating-chat__toggle {
  transform: rotate(90deg);
  background: linear-gradient(145deg, #173f73, #0c274a);
}
.floating-chat.is-open .floating-chat__icon--open { opacity: 0; transform: rotate(90deg) scale(.55); }
.floating-chat.is-open .floating-chat__icon--close { opacity: 1; transform: rotate(-90deg) scale(1); }
.floating-chat.is-open .floating-chat__pulse { animation: none; opacity: 0; }

.floating-chat.is-dragging {
  transition: none !important;
  cursor: grabbing;
}
.floating-chat.is-dragging .floating-chat__toggle {
  transform: scale(1.08);
  box-shadow: 0 16px 34px rgba(17, 49, 92, .42);
}
.floating-chat.is-snapping {
  transition: left .28s cubic-bezier(.2,.8,.2,1), top .28s cubic-bezier(.2,.8,.2,1);
}

.floating-chat-remove-zone {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 68px;
  height: 68px;
  transform: translate(-50%, 24px) scale(.72);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(28, 35, 45, .92);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 14px 34px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100002;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.floating-chat-remove-zone::before {
  content: "×";
  font: 300 38px/1 Arial, sans-serif;
}
.floating-chat-remove-zone.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.floating-chat-remove-zone.is-active {
  background: rgba(190, 35, 35, .96);
  transform: translate(-50%, 0) scale(1.16);
}

@keyframes floating-chat-pulse {
  0% { transform: scale(.88); opacity: .8; }
  70%, 100% { transform: scale(1.2); opacity: 0; }
}

/* Mobile AssistiveTouch mode */
@media screen and (max-width: 767.98px) {
  .floating-chat {
    right: auto;
    bottom: auto;
    left: calc(100vw - 64px);
    top: calc(100dvh - 132px);
    touch-action: none;
  }

  .floating-chat__label { display: none; }
  .floating-chat__item { --chat-item-size: 44px; }

  .floating-chat.is-mobile-ready {
    /* left/top are supplied by JS after safe-area and obstacle calculation */
  }

  .floating-chat.is-dragging .floating-chat__items {
    opacity: 0;
    pointer-events: none;
  }

  body.sqors-bottom-navigation-mounted .floating-chat-remove-zone {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-chat *,
  .floating-chat *::before,
  .floating-chat *::after,
  .floating-chat-remove-zone {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}