/* Tailwind will be loaded from CDN in WordPress */
/* Custom styles for Gemini Chat Widget */

/* ============================================
   STYLE ISOLATION - Prevent theme interference
   ============================================ */

/* Reset all inherited styles for the widget container */
#gemini-widget-root {
  all: initial;
  position: fixed !important;
  z-index: 99999 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1f2937 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  box-sizing: border-box !important;
  /* Allow clicks to pass through to body when widget is closed */
  pointer-events: none !important;
}

/* The main widget wrapper div - must allow clicks to pass through */
#gemini-widget-root > div {
  pointer-events: none !important;
}

/* Only the toggle button and open chat panel should receive clicks */
#gemini-widget-root > div > button {
  pointer-events: auto !important;
}

/* Chat panel - only receive clicks when visible (not having opacity-0) */
#gemini-widget-root > div > div:not(.opacity-0) {
  pointer-events: auto !important;
}

/* Ensure all interactive elements inside the chat panel can receive clicks */
#gemini-widget-root button,
#gemini-widget-root input,
#gemini-widget-root textarea,
#gemini-widget-root a {
  pointer-events: auto !important;
}

/* Reset all elements inside the widget */
#gemini-widget-root *,
#gemini-widget-root *::before,
#gemini-widget-root *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Re-apply essential styles after reset */
#gemini-widget-root div,
#gemini-widget-root span,
#gemini-widget-root p,
#gemini-widget-root h1,
#gemini-widget-root h2,
#gemini-widget-root h3,
#gemini-widget-root h4,
#gemini-widget-root h5,
#gemini-widget-root h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1.5 !important;
}

#gemini-widget-root button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  cursor: pointer !important;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

#gemini-widget-root input,
#gemini-widget-root textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: transparent;
  border: none;
  outline: none;
}

#gemini-widget-root input::placeholder,
#gemini-widget-root textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

#gemini-widget-root a {
  color: inherit;
  text-decoration: none;
}

#gemini-widget-root ul,
#gemini-widget-root ol {
  list-style: none;
}

#gemini-widget-root img {
  max-width: 100%;
  height: auto;
  display: block;
}

#gemini-widget-root svg {
  display: inline-block;
  vertical-align: middle;
}

/* Chat widget specific typography */
.gemini-chat-widget {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

.gemini-chat-widget * {
  font-family: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Message text styling */
.gemini-chat-widget p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Input field styling */
.gemini-chat-widget input[type="text"],
.gemini-chat-widget input[type="email"],
.gemini-chat-widget input[type="tel"],
.gemini-chat-widget textarea {
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  width: 100% !important;
  background-color: #fff !important;
  color: #1f2937 !important;
}

/* Button styling */
.gemini-chat-widget button {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Headings in widget */
.gemini-chat-widget h1,
.gemini-chat-widget h2,
.gemini-chat-widget h3,
.gemini-chat-widget h4 {
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Custom Scrollbar for chat */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px !important;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent !important;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: #cbd5e1 !important;
  border-radius: 20px !important;
}

/* Admin panel styles */
#gemini-admin-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

/* Mobile-first responsive adjustments */
@media screen and (max-width: 480px) {
  #gemini-widget-root {
    bottom: 12px !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
    font-size: 13px !important;
  }
  
  #gemini-widget-root .gemini-chat-widget {
    position: fixed !important;
    bottom: 12px !important;
    right: 12px !important;
  }
  
  #gemini-widget-root .gemini-chat-widget > div:first-child {
    position: fixed !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    min-height: 350px !important;
    top: 50px !important;
    bottom: auto !important;
    right: 8px !important;
    left: 8px !important;
    border-radius: 12px !important;
    z-index: 999999 !important;
  }
  
  /* Compact header on mobile */
  #gemini-widget-root .p-4.flex.items-center.justify-between {
    padding: 10px 12px !important;
  }
  
  #gemini-widget-root .p-4.flex.items-center.justify-between h2,
  #gemini-widget-root .p-4.flex.items-center.justify-between span {
    font-size: 14px !important;
  }
  
  /* Compact messages container on mobile */
  #gemini-widget-root .flex-1.overflow-y-auto {
    padding: 10px !important;
  }
  
  /* Compact message spacing on mobile */
  #gemini-widget-root .space-y-4 > div {
    margin-bottom: 10px !important;
  }
  
  /* Compact message bubbles on mobile */
  #gemini-widget-root .rounded-2xl.p-3 {
    padding: 8px 12px !important;
    border-radius: 14px !important;
    max-width: 88% !important;
  }
  
  /* Smaller message text on mobile */
  #gemini-widget-root .gemini-chat-widget p,
  #gemini-widget-root .markdown-body {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  #gemini-widget-root .markdown-body p {
    margin: 0 0 6px 0 !important;
  }
  
  /* Smaller avatars on mobile */
  #gemini-widget-root .w-8.h-8.rounded-full {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
  
  /* Compact input container on mobile */
  #gemini-widget-root .p-3.border-t,
  #gemini-widget-root .border-t.bg-white {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  
  /* Compact input field on mobile */
  #gemini-widget-root .border-t input[type="text"],
  #gemini-widget-root input.flex-1,
  #gemini-widget-root .border-t input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    height: 36px !important;
    border-radius: 18px !important;
  }
  
  /* Smaller send button on mobile */
  #gemini-widget-root .border-t button.p-2,
  #gemini-widget-root .border-t .rounded-full {
    height: 36px !important;
    min-width: 36px !important;
  }
  
  /* Compact welcome form on mobile */
  #gemini-widget-root .flex-1.flex.flex-col.justify-center.p-6 {
    padding: 16px !important;
  }
  
  /* Compact form inputs on mobile */
  #gemini-widget-root input[type="text"],
  #gemini-widget-root input[type="email"],
  #gemini-widget-root input[type="tel"] {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  
  /* Compact labels on mobile */
  #gemini-widget-root label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  
  /* Compact submit button on mobile */
  #gemini-widget-root button[type="submit"] {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  /* Compact form spacing on mobile */
  #gemini-widget-root .space-y-4 > div {
    margin-bottom: 12px !important;
  }
  
  /* Smaller toggle button on mobile */
  #gemini-widget-root button.rounded-full.shadow-lg {
    width: 50px !important;
    height: 50px !important;
  }
  
  #gemini-widget-root button.rounded-full.shadow-lg svg {
    width: 22px !important;
    height: 22px !important;
  }
}

@media screen and (max-height: 700px) {
  #gemini-widget-root .gemini-chat-widget > div:first-child {
    max-height: calc(100vh - 120px) !important;
    top: 60px !important;
  }
}

/* Ensure widget is always on top */
#gemini-widget-root .gemini-chat-widget > div:first-child {
  z-index: 999999 !important;
}

/* Ensure form elements have proper styling */
#gemini-widget-root input[type="text"],
#gemini-widget-root input[type="email"],
#gemini-widget-root input[type="tel"] {
  height: auto !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: #1f2937 !important;
  width: 100% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

#gemini-widget-root input[type="text"]:focus,
#gemini-widget-root input[type="email"]:focus,
#gemini-widget-root input[type="tel"]:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Label styling */
#gemini-widget-root label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}

/* Button styling in widget */
#gemini-widget-root button[type="submit"] {
  width: 100% !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s, transform 0.1s !important;
}

#gemini-widget-root button[type="submit"]:hover {
  opacity: 0.9 !important;
}

#gemini-widget-root button[type="submit"]:active {
  transform: scale(0.98) !important;
}

/* Message input area */
#gemini-widget-root textarea,
#gemini-widget-root input[placeholder*="message"] {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ============================================
   CHAT WIDGET LAYOUT FIXES
   ============================================ */

/* Chat messages container - add padding */
#gemini-widget-root .flex-1.overflow-y-auto {
  padding: 16px !important;
}

/* Chat messages area spacing */
#gemini-widget-root .space-y-4 {
  padding: 0 !important;
}

#gemini-widget-root .space-y-4 > div {
  margin-bottom: 16px !important;
}

/* Message bubbles */
#gemini-widget-root .rounded-2xl.p-3 {
  padding: 12px 16px !important;
  border-radius: 18px !important;
  max-width: 85% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* User message bubble */
#gemini-widget-root .rounded-tr-none {
  border-top-right-radius: 4px !important;
}

/* Bot message bubble */
#gemini-widget-root .rounded-tl-none {
  border-top-left-radius: 4px !important;
}

/* Avatar icons */
#gemini-widget-root .w-8.h-8.rounded-full {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
}

/* Input container at bottom */
#gemini-widget-root .p-3.border-t,
#gemini-widget-root .border-t.bg-white {
  padding: 12px 16px !important;
  background-color: #fff !important;
  border-top: 1px solid #e5e7eb !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Input row with field and button */
#gemini-widget-root .border-t .flex.items-center {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Message input field - more specific selector */
#gemini-widget-root .border-t input[type="text"],
#gemini-widget-root input.flex-1,
#gemini-widget-root .border-t input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 24px !important;
  background-color: #f9fafb !important;
  color: #1f2937 !important;
  outline: none !important;
  height: 42px !important;
  box-sizing: border-box !important;
}

#gemini-widget-root .border-t input:focus {
  border-color: #3b82f6 !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* Send button - be more specific */
#gemini-widget-root .border-t button.p-2,
#gemini-widget-root .border-t .rounded-full {
  height: 42px !important;
  min-width: 42px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

/* Header padding */
#gemini-widget-root .p-4.flex.items-center.justify-between {
  padding: 14px 16px !important;
}

/* Welcome form container */
#gemini-widget-root .flex-1.flex.flex-col.justify-center.p-6 {
  padding: 24px !important;
}

/* Form spacing */
#gemini-widget-root .space-y-4 > div {
  margin-bottom: 16px !important;
}

/* Markdown content in messages */
#gemini-widget-root .markdown-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#gemini-widget-root .markdown-body p {
  margin: 0 0 8px 0 !important;
}

#gemini-widget-root .markdown-body p:last-child {
  margin-bottom: 0 !important;
}