/**
 * Companion Z-Index Fix - Critical CSS for ensuring companion is always clickable
 * 
 * This file contains the highest priority z-index rules to ensure the companion
 * floating ball and chat panel are always above all other page elements and
 * remain clickable regardless of what other components are on the page.
 */

/* CRITICAL: Highest z-index values to ensure companion is always on top */
:root {
  --companion-z-critical: 2147483647; /* Maximum z-index value */
  --companion-z-floating-critical: 2147483646;
  --companion-z-panel-critical: 2147483645;
  --companion-z-modal-critical: 2147483644;
}

/* Override all companion z-index values with maximum priority */
.companion-floating-ball {
  z-index: var(--companion-z-floating-critical) !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  pointer-events: auto !important;
  /* Ensure it stays in viewport regardless of page content */
  margin: 0 !important;
  transform: none !important;
}

/* ULTRA HIGH SPECIFICITY: Force position with multiple selectors */
html body .companion-floating-ball,
html body div.companion-floating-ball,
html body #companion-floating-ball,
body .companion-floating-ball,
div.companion-floating-ball,
#companion-floating-ball,
[class*="companion-floating-ball"] {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2147483646 !important;
  transform: none !important;
  margin: 0 !important;
}

.companion-chat-panel {
  z-index: var(--companion-z-panel-critical) !important;
  position: fixed !important;
  pointer-events: auto !important;
}

/* Ensure all companion interactive elements are clickable */
.companion-floating-ball,
.companion-floating-ball *,
.companion-chat-panel,
.companion-chat-panel *,
.chat-panel-header,
.chat-panel-header *,
.chat-panel-actions,
.chat-panel-actions *,
.chat-panel-close,
.chat-panel-clear,
.chat-panel-fullscreen,
.chat-messages,
.chat-panel-input,
.chat-panel-input *,
.companion-quick-actions,
.companion-quick-actions *,
.companion-quick-action,
.companion-input-container,
.companion-input-container *,
.companion-send-button {
  z-index: var(--companion-z-panel-critical) !important;
}

/* Companion modals must be above everything */
.companion-modal-overlay,
.companion-modal,
.companion-confirmation-modal {
  z-index: var(--companion-z-modal-critical) !important;
  position: fixed !important;
  pointer-events: auto !important;
}

/* Notification badges and visual indicators */
.companion-notification-badge,
.companion-visual-indicator {
  z-index: var(--companion-z-critical) !important;
  position: absolute !important;
  pointer-events: auto !important;
}

/* CRITICAL: Ensure buttons are always clickable */
.companion-floating-ball button,
.companion-chat-panel button,
.companion-modal button,
.chat-panel-close,
.chat-panel-clear,
.chat-panel-fullscreen,
.companion-send-button,
.companion-quick-action,
button[class*="companion"],
[class*="companion"] button {
  z-index: var(--companion-z-critical) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
}

/* Override any styles that might interfere with companion clicks */
.companion-floating-ball,
.companion-chat-panel {
  transform: translateZ(0) !important; /* Force hardware acceleration */
  will-change: transform !important;
}

/* Ensure companion elements are not affected by parent transforms or z-index contexts */
.companion-floating-ball,
.companion-chat-panel,
.companion-modal-overlay {
  isolation: isolate !important;
}

/* Fix for any backdrop or overlay elements that might block clicks */
.modal-backdrop,
.overlay,
[class*="backdrop"],
[class*="overlay"] {
  pointer-events: none !important;
}

/* But allow companion overlays to be interactive */
.companion-modal-overlay {
  pointer-events: auto !important;
}

/* NOTE: transform-style removed - it can break fixed positioning.
   Transforms on body/html are now reset in companion-position-nuclear.css */

/* Emergency fallback: If companion is still not clickable, make it semi-transparent but functional */
.companion-floating-ball.emergency-clickable,
.companion-chat-panel.emergency-clickable {
  opacity: 0.95 !important;
  backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Debug mode: Add visible border to companion elements for troubleshooting */
.companion-debug .companion-floating-ball {
  border: 3px solid red !important;
  box-shadow: 0 0 10px red !important;
}

.companion-debug .companion-chat-panel {
  border: 3px solid blue !important;
  box-shadow: 0 0 10px blue !important;
}

/* Responsive fixes for mobile devices */
@media (max-width: 768px) {
  .companion-floating-ball,
  .companion-chat-panel {
    z-index: var(--companion-z-critical) !important;
    touch-action: manipulation !important;
  }
  
  /* Ensure floating ball stays in bottom-right on mobile */
  .companion-floating-ball {
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    top: auto !important;
    left: auto !important;
    /* Smaller size on mobile if needed */
    width: 50px !important;
    height: 50px !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .companion-floating-ball {
    bottom: 10px !important;
    right: 10px !important;
    width: 45px !important;
    height: 45px !important;
  }
}

/* Print media: Hide companion during printing */
@media print {
  .companion-floating-ball,
  .companion-chat-panel,
  .companion-modal-overlay {
    display: none !important;
  }
}

/* Additional fixes for common interference patterns */

/* Fix for Bootstrap modals that might interfere */
.modal.show ~ .companion-floating-ball,
.modal.show ~ .companion-chat-panel {
  z-index: var(--companion-z-critical) !important;
}

/* Fix for fixed/sticky headers that might cover companion */
.fixed-top ~ .companion-floating-ball,
.sticky-top ~ .companion-floating-ball,
.navbar-fixed-top ~ .companion-floating-ball {
  z-index: var(--companion-z-critical) !important;
}

/* Fix for fullscreen overlays */
.fullscreen-overlay ~ .companion-floating-ball,
.fullscreen-overlay ~ .companion-chat-panel {
  z-index: var(--companion-z-critical) !important;
}

/* Fix for any element with transform that might create new stacking context */
[style*="transform"] .companion-floating-ball,
[style*="transform"] .companion-chat-panel {
  z-index: var(--companion-z-critical) !important;
  transform: translateZ(1px) !important;
}

/* Emergency override: If companion is still not working, use this class */
.companion-emergency-override .companion-floating-ball,
.companion-emergency-override .companion-chat-panel {
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* CRITICAL: Ensure floating ball always stays in bottom-right corner of viewport */
.companion-floating-ball {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  /* Prevent any transforms from moving it out of position */
  transform: none !important;
  /* Prevent margin/padding from affecting position */
  margin: 0 !important;
  /* Ensure it's not affected by parent positioning */
  top: auto !important;
  left: auto !important;
  /* Force it to stay in viewport regardless of page scroll */
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
}

/* Override all corner positioning classes to force bottom-right */
.companion-floating-ball.top-left,
.companion-floating-ball.top-right,
.companion-floating-ball.bottom-left,
.companion-floating-ball.bottom-right {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
}

/* Override any hover/active transforms that might move the ball */
.companion-floating-ball:hover {
  transform: scale(1.05) !important;
  bottom: 20px !important;
  right: 20px !important;
}

.companion-floating-ball:active {
  transform: scale(0.95) !important;
  bottom: 20px !important;
  right: 20px !important;
}

/* Ensure dragging state doesn't permanently move the ball */
.companion-floating-ball.dragging {
  transform: scale(1.1) !important;
}

/* After dragging, ensure it returns to fixed position */
.companion-floating-ball:not(.dragging) {
  bottom: 20px !important;
  right: 20px !important;
  transform: none !important;
}

/* Ensure companion works with CSS Grid and Flexbox containers */
.companion-floating-ball,
.companion-chat-panel {
  contain: layout style !important;
}

/* Fix for iOS Safari z-index issues */
@supports (-webkit-touch-callout: none) {
  .companion-floating-ball,
  .companion-chat-panel {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
}

/* Additional positioning fixes for edge cases */

/* Prevent any CSS animations from moving the ball */
.companion-floating-ball * {
  animation-fill-mode: none !important;
}

/* Override any CSS Grid or Flexbox that might affect positioning */
.companion-floating-ball {
  grid-area: unset !important;
  flex: none !important;
  align-self: unset !important;
  justify-self: unset !important;
}

/* Ensure floating ball works with sticky/fixed parent elements */
.sticky .companion-floating-ball,
.fixed .companion-floating-ball,
[style*="position: sticky"] .companion-floating-ball,
[style*="position: fixed"] .companion-floating-ball {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
}

/* Handle cases where body or html has transforms */
body[style*="transform"] .companion-floating-ball,
html[style*="transform"] .companion-floating-ball {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  transform: none !important;
}

/* Ensure floating ball is not affected by CSS containment */
.companion-floating-ball {
  contain: none !important;
}

/* Force visibility and display */
.companion-floating-ball {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* NUCLEAR OPTION: Override everything with attribute selectors */
[class="companion-floating-ball"],
[class*="companion-floating-ball"],
div[class*="companion-floating-ball"],
.companion-floating-ball[style],
.companion-floating-ball[class] {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2147483646 !important;
}

/* Override any inline styles */
.companion-floating-ball[style*="position"],
.companion-floating-ball[style*="bottom"],
.companion-floating-ball[style*="right"],
.companion-floating-ball[style*="top"],
.companion-floating-ball[style*="left"] {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
}