/* Webchat Widget Styles */

/* AGGRESSIVE CSS ISOLATION - Prevents inheritance from parent applications */
#virtualpbx-chat-container,
#virtualpbx-chat-container *,
.webchat-widget,
.webchat-widget * {
  all: unset;
  box-sizing: border-box;
  /* Prevent any inherited transitions or animations */
  transition: none !important;
  animation: none !important;
}

/* Re-establish essential base styles with !important to override parent styles */
.webchat-widget {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  line-height: 1.5 !important;
  -webkit-text-size-adjust: 100% !important;
  -moz-tab-size: 4 !important;
  tab-size: 4 !important;
  font-feature-settings: normal !important;
  font-variation-settings: normal !important;
  -webkit-tap-highlight-color: transparent !important;
  color-scheme: light !important;
}
.webchat-widget {
  /* Base styles */
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  --tw-border-opacity: 1;
  --tw-ring-color: rgb(20 184 166 / 0.5);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-opacity: 0.5;
  --tw-ring-inset: ;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
}

/* Layout - with !important for isolation */
.webchat-widget .fixed { position: fixed !important; }
.webchat-widget .bottom-6 { bottom: 1.5rem !important; }
.webchat-widget .right-6 { right: 1.5rem !important; }
.webchat-widget .flex { display: flex !important; }
.webchat-widget .flex-col { flex-direction: column !important; }
.webchat-widget .items-end { align-items: flex-end !important; }
.webchat-widget .items-center { align-items: center !important; }
.webchat-widget .justify-between { justify-content: space-between !important; }
.webchat-widget .justify-center { justify-content: center !important; }
.webchat-widget .space-x-2 > * + * { margin-left: 0.5rem; }
.webchat-widget .space-x-3 > * + * { margin-left: 0.75rem; }
.webchat-widget .space-y-5 > * + * { margin-top: 1.25rem; }
.webchat-widget .mt-4 { margin-top: 1rem; }
.webchat-widget .ml-2 { margin-left: 0.5rem; }
.webchat-widget .mr-2 { margin-right: 0.5rem; }
.webchat-widget .px-4 { padding-left: 1rem; padding-right: 1rem; }
.webchat-widget .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.webchat-widget .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.webchat-widget .p-1 { padding: 0.25rem; }
.webchat-widget .p-2 { padding: 0.5rem; }
.webchat-widget .p-3 { padding: 0.75rem; }
.webchat-widget .p-4 { padding: 1rem; }
.webchat-widget .pb-2 { padding-bottom: 0.5rem; }
.webchat-widget .pt-1 { padding-top: 0.25rem; }

/* Sizing - with !important for isolation */
.webchat-widget .w-7 { width: 1.75rem !important; }
.webchat-widget .h-7 { height: 1.75rem !important; }
.webchat-widget .w-10 { width: 2.5rem !important; }
.webchat-widget .h-10 { height: 2.5rem !important; }
.webchat-widget .w-350px { width: 350px !important; }
.webchat-widget .max-w-95vw { max-width: 95vw !important; }
.webchat-widget .max-h-340px { max-height: 340px !important; }

/* Typography */
.webchat-widget .text-xs { font-size: 0.75rem; line-height: 1rem; }
.webchat-widget .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.webchat-widget .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.webchat-widget .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.webchat-widget .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.webchat-widget .font-medium { font-weight: 500; }
.webchat-widget .font-semibold { font-weight: 600; }
.webchat-widget .text-white { color: rgb(255 255 255 / var(--tw-text-opacity)); }
.webchat-widget .text-gray-400 { color: rgb(156 163 175 / var(--tw-text-opacity)); }
.webchat-widget .text-gray-500 { color: rgb(107 114 128 / var(--tw-text-opacity)); }
.webchat-widget .text-gray-600 { color: rgb(75 85 99 / var(--tw-text-opacity)); }
.webchat-widget .text-gray-700 { color: rgb(55 65 81 / var(--tw-text-opacity)); }
.webchat-widget .text-gray-900 { color: rgb(17 24 39 / var(--tw-text-opacity)); }
.webchat-widget .text-teal-600 { color: rgb(13 148 136 / var(--tw-text-opacity)); }
.webchat-widget .text-teal-700 { color: rgb(15 118 110 / var(--tw-text-opacity)); }

/* Backgrounds */
.webchat-widget .bg-white { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); }
.webchat-widget .bg-gray-50 { background-color: rgb(249 250 251 / var(--tw-bg-opacity)); }
.webchat-widget .bg-gray-100 { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); }
.webchat-widget .bg-teal-600 { background-color: rgb(13 148 136 / var(--tw-bg-opacity)); }
.webchat-widget .bg-opacity-20 { --tw-bg-opacity: 0.2; }

/* Borders */
.webchat-widget .rounded-full { border-radius: 9999px; }
.webchat-widget .rounded-lg { border-radius: 0.5rem; }
.webchat-widget .rounded-xl { border-radius: 0.75rem; }
.webchat-widget .rounded-2xl { border-radius: 1rem; }
.webchat-widget .rounded-bl-none { border-bottom-left-radius: 0; }
.webchat-widget .rounded-br-none { border-bottom-right-radius: 0; }

/* Effects - with !important for isolation */
.webchat-widget .opacity-100 { opacity: 1 !important; }
.webchat-widget .z-max { z-index: 2147483647 !important; }

/* Transitions */
.webchat-widget .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.webchat-widget .duration-500 { transition-duration: 500ms; }

/* Interactive */
.webchat-widget .hover\:bg-teal-700:hover { background-color: rgb(15 118 110 / var(--tw-bg-opacity)); }
.webchat-widget .hover\:text-gray-700:hover { color: rgb(55 65 81 / var(--tw-text-opacity)); }
.webchat-widget .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.webchat-widget .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.webchat-widget .focus\:ring-teal-500:focus { --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity)); }
.webchat-widget .focus\:border-teal-500:focus { border-color: rgb(20 184 166 / var(--tw-border-opacity)); }

/* Utilities - with !important for isolation */
.webchat-widget .hidden { display: none !important; }
.webchat-widget .overflow-hidden { overflow: hidden !important; }
.webchat-widget .overflow-y-auto { overflow-y: auto !important; }
.webchat-widget .whitespace-nowrap { white-space: nowrap; }
.webchat-widget .flex-1 { flex: 1 1 0%; }
.webchat-widget .flex-shrink-0 { flex-shrink: 0; }

/* Custom Widget Styles */
.webchat-widget #webchat-widget-button {
  backdrop-filter: blur(8px);
  background: linear-gradient(135deg, rgb(13 148 136) 0%, rgb(15 118 110) 100%);
  transition: all 0.2s ease-in-out;
}

.webchat-widget #webchat-widget-button:hover {
  /* Removed transform to prevent clipping */
  transition: all 0.2s ease;
}

.webchat-widget #webchat-panel {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
  /* Shadow visible on all edges */
  box-shadow: 0 0 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  /* Smooth ease-in-out animation for open/close */
  transition: all 0.3s ease-in-out;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
}

.webchat-widget #webchat-panel.open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.webchat-widget #webchat-header {
  background: linear-gradient(135deg, rgb(249 250 251) 0%, rgb(243 244 246) 100%);
}

.webchat-widget #webchat-conversation-history {
  background: linear-gradient(180deg, rgb(249 250 251) 0%, rgb(255 255 255) 100%);
}

.webchat-widget #webchat-message-input-row {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

.webchat-widget #webchat-input {
  background: rgba(243, 244, 246, 0.5);
  transition: all 0.2s ease;
}

.webchat-widget #webchat-input:focus {
  background: white;
  border-color: rgb(20 184 166);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

.webchat-widget #webchat-send {
  background: linear-gradient(135deg, rgb(13 148 136) 0%, rgb(15 118 110) 100%);
  transition: all 0.2s ease-in-out;
}

.webchat-widget #webchat-send:hover {
  /* Removed transform animation to prevent vibration */
}

.webchat-widget .message-bubble {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.webchat-widget .message-bubble:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.webchat-widget .message-bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: inherit;
  border-radius: 0 0 0 4px;
}

.webchat-widget .message-bubble.user::before {
  left: -6px;
  transform: rotate(45deg);
}

.webchat-widget .message-bubble.agent::before {
  right: -6px;
  transform: rotate(45deg);
}

/* Responsive */
@media (min-width: 768px) {
  .webchat-widget .md\:block { display: block; }
  .webchat-widget .md\:inline-block { display: inline-block; }
}

/* Chat Widget Responsive Improvements - New Architecture */
@media (max-width: 768px) {
  #webchat-panel-container {
    right: 10px !important;
    bottom: 80px !important;
    left: 10px !important;
  }
  
  #webchat-panel-container .help-widget-card {
    width: calc(100vw - 20px) !important;
    max-width: 350px !important;
    height: calc(100vh - 140px) !important;
    max-height: 620px !important;
  }
  
  #help-widget-fab {
    right: 15px !important;
    bottom: 15px !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  #webchat-panel-container .help-widget-card {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 120px) !important;
    max-height: 580px !important;
  }
  
  #help-widget-fab {
    right: 12px !important;
    bottom: 12px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.125rem !important;
  }
  
  #webchat-panel-container {
    right: 8px !important;
    bottom: 70px !important;
    left: 8px !important;
  }
}

/* Help Widget Styles - VirtualPBX Inspired */
.help-widget-card {
  background: #fff;
  border-radius: 16px;
  /* Shadow visible on all edges (top, left, right, bottom) */
  box-shadow: 0 0 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  padding: 1.5rem;
  width: 288px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

.help-widget-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.5rem;
  font-family: 'Inter', ui-sans-serif;
}

.help-widget-subtext {
  color: #4b5563;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  font-family: 'Inter', ui-sans-serif;
}

.help-widget-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #374151;
  text-decoration: none;
  transition: color 0.2s;
  margin-bottom: 0.75rem;
  font-family: 'Inter', ui-sans-serif;
}
.help-widget-option:last-child {
  margin-bottom: 0;
}
.help-widget-option:hover {
  color: var(--option-hover-color, #2563eb);
}
.help-widget-icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg, #e0e7ff);
  transition: background 0.2s;
}
.help-widget-option:hover .help-widget-icon {
  background: var(--icon-bg-hover, #c7d2fe);
}
.help-widget-option .fa {
  font-size: 20px;
  color: var(--icon-color, #2563eb);
}
.help-widget-fab {
  width: 56px !important;
  height: 56px !important;
  border-radius: 9999px !important;
  /* Use CSS custom property for dynamic color configuration */
  background: var(--virtualpbx-fab-color, #2563eb) !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;

  position: fixed !important;
  right: 1.5rem !important;
  bottom: 1.5rem !important;
  z-index: 2147483647 !important;
  font-family: 'Inter', ui-sans-serif !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Allow hover animations */
  transition: all 0.2s ease !important;
  animation: none !important;
}
.help-widget-fab:hover {
  /* Darken the dynamic color on hover */
  background: color-mix(in srgb, var(--virtualpbx-fab-color, #2563eb) 80%, black) !important;
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(37,99,235,0.3) !important;
  /* Removed transform to prevent clipping */
  transition: all 0.2s ease !important;
}

.help-widget-fab:focus {
  border: none;
  outline: none;
  box-shadow: 0 2px 8px rgba(37,99,235,0.2);
}

.help-widget-fab:active {
  border: none;
  outline: none;
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
}

.help-widget-fab.clicking {
  transform: scale(0.95) !important;
  transition: transform 0.15s ease !important;
}

/* Smooth icon transitions */
.help-widget-fab i {
  transition: all 0.2s ease !important;
}

.help-widget-fab i.icon-transition {
  transform: scale(0.8) !important;
  opacity: 0.7 !important;
}

/* Remove old chat widget styles for cleanliness */
/* .webchat-widget, .webchat-widget * {
  all: unset;
  box-sizing: border-box;
} */