/* Arisecraft Chatbot Widget - Ultra-Robust CSS for Angular/Material Sites */
/* CSS Reset and Isolation Layer - Version 2.0 */

:root {
  --chatbot-primary: #2563eb;
  --chatbot-primary-hover: #1d4ed8;
  --chatbot-background: #ffffff;
  --chatbot-text: #111827;
  --chatbot-text-light: #6b7280;
  --chatbot-border: #e5e7eb;
  --chatbot-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  --chatbot-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
  --chatbot-radius: 16px;
  --chatbot-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --chatbot-z-index: 2147483647;
}

/* CSS Isolation Container - Creates a new stacking context */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] {
  /* Position and isolation */
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: var(--chatbot-z-index) !important;
  
  /* Reset all possible inherited styles */
  all: initial !important;
  
  /* Re-establish essential properties after reset */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  
  /* Font and text properties */
  font-family: var(--chatbot-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--chatbot-text) !important;
  text-align: left !important;
  direction: ltr !important;
  
  /* Box model */
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  
  /* Interaction */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Block Angular Material from interfering */
  transform: none !important;
  filter: none !important;
  clip: none !important;
  overflow: visible !important;
  
  /* Disable Angular Material ripples and animations */
  animation: none !important;
  transition: none !important;
  
  /* Size constraints */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* Universal reset for all child elements */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] *,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] *::before,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] *::after {
  /* Reset everything */
  all: unset !important;
  
  /* Re-establish box model */
  box-sizing: border-box !important;
  display: block !important;
  
  /* Font inheritance */
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-align: inherit !important;
  
  /* Disable Angular Material features */
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  
  /* Position and layout */
  position: static !important;
  float: none !important;
  clear: none !important;
  
  /* Flexbox and grid reset */
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  grid: none !important;
  grid-area: auto !important;
  
  /* Transform and animation reset */
  transform: none !important;
  transform-origin: 50% 50% 0 !important;
  animation: none !important;
  transition: none !important;
  
  /* Filter and clip reset */
  filter: none !important;
  clip: auto !important;
  clip-path: none !important;
  mask: none !important;
  
  /* Overflow and scrolling */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  scroll-behavior: auto !important;
  
  /* Interaction */
  pointer-events: auto !important;
  user-select: auto !important;
  touch-action: auto !important;
  
  /* Content and text */
  content: normal !important;
  quotes: auto !important;
  counter-reset: none !important;
  counter-increment: none !important;
  
  /* Table reset */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  empty-cells: show !important;
  table-layout: auto !important;
  
  /* List reset */
  list-style: none !important;
  list-style-type: none !important;
  list-style-position: outside !important;
  list-style-image: none !important;
  
  /* Form reset */
  resize: none !important;
  cursor: auto !important;
  
  /* Misc resets */
  zoom: 1 !important;
  object-fit: fill !important;
  object-position: 50% 50% !important;
  tab-size: 4 !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  text-overflow: clip !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  unicode-bidi: normal !important;
  
  /* Border and background reset */
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  
  /* Margin and padding reset */
  margin: 0 !important;
  padding: 0 !important;
  
  /* Size reset */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  
  /* Visibility and opacity reset */
  opacity: 1 !important;
  visibility: inherit !important;
  
  /* Z-index reset */
  z-index: auto !important;
}

/* Override Angular Material classes specifically */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-button,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-raised-button,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-fab,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-mini-fab,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-icon-button,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-stroked-button,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-flat-button,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-form-field,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-input-element,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-card,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-toolbar,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-dialog-container,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-chip,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-menu,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-list,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-table {
  all: unset !important;
  display: block !important;
}

/* Remove Angular Material ripple effects */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-ripple,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-button-ripple,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-button-focus-overlay,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-button-wrapper,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .cdk-overlay-container,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .cdk-overlay-backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Toggle Button - Bulletproof Design */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] button#chatbot-toggle {
  /* Reset and positioning */
  all: unset !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Size and shape */
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  
  /* Appearance */
  background: var(--chatbot-primary) !important;
  color: white !important;
  border: none !important;
  box-shadow: var(--chatbot-shadow) !important;
  
  /* Interaction */
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  
  /* Transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Font */
  font-family: var(--chatbot-font) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  
  /* Layout */
  box-sizing: border-box !important;
  overflow: hidden !important;
  
  /* Disable system styling */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Positioning in stack */
  z-index: calc(var(--chatbot-z-index) + 1) !important;
  
  /* Text alignment */
  text-align: center !important;
  vertical-align: middle !important;
  
  /* Prevent text selection */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] button#chatbot-toggle:hover {
  background: var(--chatbot-primary-hover) !important;
  box-shadow: var(--chatbot-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] button#chatbot-toggle:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: var(--chatbot-shadow) !important;
}

/* Button Icons */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-icon,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-close-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 24px !important;
  height: 24px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-close-icon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"].open .chatbot-icon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) rotate(-90deg) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"].open .chatbot-close-icon {
  opacity: 1 !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
}

/* Chat Window Container */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] div#chatbot-window {
  /* Reset and positioning */
  all: unset !important;
  position: absolute !important;
  bottom: 80px !important;
  right: 0 !important;
  
  /* Size */
  width: 380px !important;
  height: 500px !important;
  
  /* Appearance */
  background: var(--chatbot-background) !important;
  border: 1px solid var(--chatbot-border) !important;
  border-radius: var(--chatbot-radius) !important;
  box-shadow: var(--chatbot-shadow) !important;
  
  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  
  /* Initial state */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) scale(0.95) !important;
  pointer-events: none !important;
  
  /* Transitions */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Stack order */
  z-index: var(--chatbot-z-index) !important;
  
  /* Font */
  font-family: var(--chatbot-font) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--chatbot-text) !important;
  
  /* Disable system features */
  -webkit-tap-highlight-color: transparent !important;
  user-select: text !important;
  
  /* Mobile responsiveness */
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 120px) !important;
}

/* Chat Window Open State */
html body div#arisecraft-chatbot-widget[data-chatbot="true"].open div#chatbot-window {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Chat Window Components */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-window {
  position: absolute !important;
  bottom: 80px !important;
  right: 0 !important;
  width: 360px !important;
  max-height: 600px !important;
  background: var(--chatbot-background) !important;
  border-radius: var(--chatbot-radius) !important;
  box-shadow: var(--chatbot-shadow) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-toggle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--chatbot-primary) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: var(--chatbot-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--chatbot-shadow-hover) !important;
  background: var(--chatbot-primary-hover) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-header {
  padding: 16px !important;
  background: var(--chatbot-primary) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-header-title h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 300px !important;
  max-height: 400px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .message {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 85% !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .message.user {
  margin-left: auto !important;
  flex-direction: row-reverse !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .message-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--chatbot-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .message.user .message-avatar {
  background: var(--chatbot-text-light) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .message-content {
  background: var(--chatbot-border) !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--chatbot-text) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .message.user .message-content {
  background: var(--chatbot-primary) !important;
  color: white !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-input-container {
  padding: 16px !important;
  border-top: 1px solid var(--chatbot-border) !important;
  background: var(--chatbot-background) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] #chatbot-input {
  flex: 1 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--chatbot-border) !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: none !important;
  max-height: 100px !important;
  overflow-y: auto !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] #chatbot-input:focus {
  outline: none !important;
  border-color: var(--chatbot-primary) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] #chatbot-send {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--chatbot-primary) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] #chatbot-send:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] #chatbot-send svg {
  width: 20px !important;
  height: 20px !important;
}

/* SVG Icon Fixes */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-close {
  cursor: pointer !important;
  padding: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Typing Indicator */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-typing {
  padding: 8px 16px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-typing-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-typing-indicator span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--chatbot-text-light) !important;
  animation: typing 1s infinite ease-in-out !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] .chatbot-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s !important;
}

@keyframes typing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] div#chatbot-window {
    width: calc(100vw - 40px) !important;
    height: calc(100vh - 120px) !important;
    bottom: 80px !important;
    right: 20px !important;
    left: 20px !important;
    margin: 0 auto !important;
  }
  
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] button#chatbot-toggle {
    width: 56px !important;
    height: 56px !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] {
    --chatbot-border: #000000;
    --chatbot-text: #000000;
    --chatbot-background: #ffffff;
  }
  
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] div#chatbot-window {
    border-width: 2px !important;
  }
  
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] textarea#chatbot-input {
    border-width: 2px !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] *,
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] *::before,
  html body div#arisecraft-chatbot-widget[data-chatbot="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus management for accessibility */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] *:focus {
  outline: 2px solid var(--chatbot-primary) !important;
  outline-offset: 2px !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"] button:focus,
html body div#arisecraft-chatbot-widget[data-chatbot="true"] textarea:focus {
  outline: 2px solid var(--chatbot-primary) !important;
  outline-offset: 2px !important;
}

/* Prevent Angular Material from overriding our focus styles */
html body div#arisecraft-chatbot-widget[data-chatbot="true"] .mat-focus-indicator:focus {
  outline: 2px solid var(--chatbot-primary) !important;
  outline-offset: 2px !important;
}

/* Emergency visibility fix - last resort */
html body div#arisecraft-chatbot-widget[data-chatbot="true"][style*="display: none"] {
  display: block !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"][style*="visibility: hidden"] {
  visibility: visible !important;
}

html body div#arisecraft-chatbot-widget[data-chatbot="true"][style*="opacity: 0"] {
  opacity: 1 !important;
}