/* Mirror the product-feedback FAB and the live-chat orb.
 *
 * Feedback was 52px at 16px from the left; live chat was 62px at 28px
 * from the right. Both now share one size and the same inset from their
 * opposite corners.
 */

:root {
  --erp-corner-orb-size: 62px;
  --erp-corner-orb-inset: 28px;
}

@media (max-width: 900px), (max-height: 760px) {
  :root {
    --erp-corner-orb-size: 52px;
    --erp-corner-orb-inset: 12px;
  }
}

/* Same selectors as erp-copilot-command so landing cannot pin chat at 28px
   while feedback uses the compact inset. Do not override the Copilot FAB
   lift on standalone module pages where #elin-ai-fab is visible. */
html.elin-ai-nav-entry #chatWidget,
html[data-active-module="landing"] #chatWidget,
html[data-active-module="copilot"] #chatWidget,
html:has(#elinom-copilot-workspace) #chatWidget,
html body #chatWidget,
html[data-active-module="landing"]:has(#elin-ai-fab):not(.elin-ai-nav-entry) #chatWidget,
html[data-active-module="landing"]:has(#elin-ai-root):not(.elin-ai-nav-entry) #chatWidget,
html[data-active-module="copilot"]:has(#elin-ai-fab):not(.elin-ai-nav-entry) #chatWidget {
  position: fixed !important;
  right: max(var(--erp-corner-orb-inset), env(safe-area-inset-right, 0px)) !important;
  bottom: max(var(--erp-corner-orb-inset), env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  top: auto !important;
}

html body #chatToggleBtn,
html[data-active-module="landing"] body #chatToggleBtn,
html[data-active-module="landing"]:not(.erp-nav-drawer-open):not([data-active-shell-mode="app"]) body #chatToggleBtn {
  box-sizing: border-box !important;
  width: var(--erp-corner-orb-size) !important;
  height: var(--erp-corner-orb-size) !important;
  min-width: var(--erp-corner-orb-size) !important;
  min-height: var(--erp-corner-orb-size) !important;
  max-width: var(--erp-corner-orb-size) !important;
  max-height: var(--erp-corner-orb-size) !important;
  padding: 0 !important;
}

html body #pf-launcher,
html[data-active-module="landing"] body #pf-launcher {
  position: absolute !important;
  left: max(var(--erp-corner-orb-inset), env(safe-area-inset-left, 0px)) !important;
  bottom: max(var(--erp-corner-orb-inset), env(safe-area-inset-bottom, 0px)) !important;
  right: auto !important;
  top: auto !important;
  /* Extra room so the dismiss badge sits outside the F, not on it. */
  width: calc(var(--erp-corner-orb-size) + 1.25rem) !important;
  height: calc(var(--erp-corner-orb-size) + 1.25rem) !important;
  overflow: visible !important;
}

html body #pf-fab,
html[data-active-module="landing"] body #pf-fab {
  box-sizing: border-box !important;
  width: var(--erp-corner-orb-size) !important;
  height: var(--erp-corner-orb-size) !important;
  min-width: var(--erp-corner-orb-size) !important;
  min-height: var(--erp-corner-orb-size) !important;
  max-width: var(--erp-corner-orb-size) !important;
  max-height: var(--erp-corner-orb-size) !important;
  left: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  font-size: calc(var(--erp-corner-orb-size) * 0.42) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  border: 1px solid var(--erp-chat-orb-border, rgba(196, 181, 253, 0.55)) !important;
  background: var(
    --erp-chat-orb-bg,
    radial-gradient(circle at 30% 26%, #7dd3fc 0%, #6366f1 48%, #db2777 100%)
  ) !important;
  background-color: var(--erp-chat-orb-indigo, #6366f1) !important;
  color: var(--erp-chat-icon-ink, #ffffff) !important;
  text-shadow: 0 2px 3px rgba(15, 23, 42, 0.35);
  overflow: visible !important;
  isolation: isolate;
  z-index: 1;
  box-shadow:
    0 20px 42px -8px rgba(99, 102, 241, 0.45),
    0 10px 24px -6px rgb(15, 23, 42, 0.55),
    0 4px 12px rgb(236, 72, 153, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 18px rgba(79, 70, 229, 0.18) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
  animation: erpCornerOrbBreathe 3.4s ease-in-out infinite;
}

html body #pf-fab::before,
html[data-active-module="landing"] body #pf-fab::before {
  content: "" !important;
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0) 0deg,
    rgba(56, 189, 248, 0.8) 70deg,
    rgba(99, 102, 241, 1) 140deg,
    rgba(236, 72, 153, 0) 200deg,
    rgba(236, 72, 153, 0) 240deg,
    rgba(236, 72, 153, 0.75) 300deg,
    rgba(56, 189, 248, 0) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 72%, transparent 76%);
  mask: radial-gradient(circle, transparent 54%, #000 58%, #000 72%, transparent 76%);
  filter:
    blur(1.5px)
    drop-shadow(0 0 6px rgba(56, 189, 248, 0.55))
    drop-shadow(0 0 12px rgba(99, 102, 241, 0.5))
    drop-shadow(0 0 18px rgba(236, 72, 153, 0.35));
  opacity: 0.95;
  z-index: -1;
  animation: erpCornerOrbSpiral 4s linear infinite;
  pointer-events: none;
}

html body #pf-fab::after,
html[data-active-module="landing"] body #pf-fab::after {
  content: " " !important;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, 0.55);
  opacity: 0;
  animation: erpCornerOrbRing 2.6s ease-out infinite;
  pointer-events: none;
}

html body #pf-fab:hover,
html[data-active-module="landing"] body #pf-fab:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow:
    0 28px 52px -8px rgba(99, 102, 241, 0.55),
    0 14px 28px -6px rgb(15, 23, 42, 0.6),
    0 6px 16px rgba(236, 72, 153, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html body #pf-launcher-close,
html[data-active-module="landing"] body #pf-launcher-close {
  top: 0 !important;
  right: 0 !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
  padding: 0 !important;
  z-index: 2;
}

@keyframes erpCornerOrbBreathe {
  0%,
  100% {
    box-shadow:
      0 18px 38px -10px rgba(99, 102, 241, 0.32),
      0 6px 14px -4px rgb(15, 23, 42, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 -8px 18px rgba(236, 72, 153, 0.1);
  }
  50% {
    box-shadow:
      0 22px 46px -10px rgba(99, 102, 241, 0.5),
      0 8px 16px -4px rgb(15, 23, 42, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -8px 18px rgba(236, 72, 153, 0.16);
  }
}

@keyframes erpCornerOrbSpiral {
  to {
    transform: rotate(360deg);
  }
}

@keyframes erpCornerOrbRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}