
/*
|--------------------------------------------------------------------------
| Phase 18.9.5.28.5.8.5.7
| AI Assistant + Header Hover Premium Hotfix
|--------------------------------------------------------------------------
| Scope: visual/layer polish only.
| - Stabilizes AI assistant trigger/window/input on mobile and desktop.
| - Refines desktop header category hover without bleeding into the top header.
| Protected: cart, checkout, payments, orders, DB, security.
*/

/* -----------------------------
   AI Assistant: stable trigger
------------------------------ */
.ai-assistant-launcher,
.ai-chat-launcher,
.ai-assistant-toggle,
.ai-floating-button,
#aiAssistantToggle,
#ai-assistant-toggle,
.ai-assistant-fab,
.assistant-fab,
.ai-widget-toggle,
.ai-bot-toggle,
[class*="ai"][class*="floating"],
[class*="assistant"][class*="floating"] {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  border-radius: 999px !important;
  z-index: 2147482500 !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  will-change: auto !important;
  box-shadow: 0 16px 38px rgba(0, 148, 118, .24), 0 4px 14px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
}

/* stop motion on nested parts too */
.ai-assistant-launcher *,
.ai-chat-launcher *,
.ai-assistant-toggle *,
.ai-floating-button *,
#aiAssistantToggle *,
#ai-assistant-toggle *,
.ai-assistant-fab *,
.assistant-fab *,
.ai-widget-toggle *,
.ai-bot-toggle * {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-property: background-color, border-color, box-shadow, color, opacity !important;
}

/* -----------------------------
   AI Assistant: window + input
------------------------------ */
.ai-assistant-panel,
.ai-chat-panel,
.ai-assistant-window,
.ai-widget-panel,
#aiAssistantPanel,
#ai-assistant-panel,
.ai-chat-box,
.assistant-chat-box,
.ai-modal,
[class*="assistant"][class*="panel"],
[class*="assistant"][class*="window"] {
  position: fixed !important;
  z-index: 2147482600 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22), 0 0 0 1px rgba(226, 232, 240, .92) !important;
  contain: layout paint !important;
}

.ai-assistant-panel form,
.ai-chat-panel form,
.ai-assistant-window form,
.ai-widget-panel form,
#aiAssistantPanel form,
#ai-assistant-panel form,
.ai-chat-box form,
.assistant-chat-box form,
.ai-modal form,
[class*="assistant"][class*="panel"] form,
[class*="assistant"][class*="window"] form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.96) !important;
  border-top: 1px solid rgba(226,232,240,.95) !important;
}

.ai-assistant-panel input,
.ai-assistant-panel textarea,
.ai-chat-panel input,
.ai-chat-panel textarea,
.ai-assistant-window input,
.ai-assistant-window textarea,
.ai-widget-panel input,
.ai-widget-panel textarea,
#aiAssistantPanel input,
#aiAssistantPanel textarea,
#ai-assistant-panel input,
#ai-assistant-panel textarea,
.ai-chat-box input,
.ai-chat-box textarea,
.assistant-chat-box input,
.assistant-chat-box textarea,
.ai-modal input,
.ai-modal textarea,
[class*="assistant"][class*="panel"] input,
[class*="assistant"][class*="panel"] textarea,
[class*="assistant"][class*="window"] input,
[class*="assistant"][class*="window"] textarea {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 110px !important;
  border-radius: 18px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(203, 213, 225, .95) !important;
  background: #fff !important;
  overflow: auto !important;
  resize: none !important;
  text-align: right !important;
}

.ai-assistant-panel button,
.ai-chat-panel button,
.ai-assistant-window button,
.ai-widget-panel button,
#aiAssistantPanel button,
#ai-assistant-panel button,
.ai-chat-box button,
.assistant-chat-box button,
.ai-modal button,
[class*="assistant"][class*="panel"] button,
[class*="assistant"][class*="window"] button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Desktop panel: neat and away from edges */
@media (min-width: 769px) {
  .ai-assistant-panel,
  .ai-chat-panel,
  .ai-assistant-window,
  .ai-widget-panel,
  #aiAssistantPanel,
  #ai-assistant-panel,
  .ai-chat-box,
  .assistant-chat-box,
  .ai-modal,
  [class*="assistant"][class*="panel"],
  [class*="assistant"][class*="window"] {
    right: 24px !important;
    left: auto !important;
    bottom: 96px !important;
    width: min(420px, calc(100vw - 48px)) !important;
    max-width: 420px !important;
    max-height: min(690px, calc(100vh - 130px)) !important;
  }
}

/* Mobile panel: inside viewport, input aligned */
@media (max-width: 768px) {
  .ai-assistant-launcher,
  .ai-chat-launcher,
  .ai-assistant-toggle,
  .ai-floating-button,
  #aiAssistantToggle,
  #ai-assistant-toggle,
  .ai-assistant-fab,
  .assistant-fab,
  .ai-widget-toggle,
  .ai-bot-toggle,
  [class*="ai"][class*="floating"],
  [class*="assistant"][class*="floating"] {
    right: auto !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }

  .ai-assistant-panel,
  .ai-chat-panel,
  .ai-assistant-window,
  .ai-widget-panel,
  #aiAssistantPanel,
  #ai-assistant-panel,
  .ai-chat-box,
  .assistant-chat-box,
  .ai-modal,
  [class*="assistant"][class*="panel"],
  [class*="assistant"][class*="window"] {
    left: 14px !important;
    right: 14px !important;
    bottom: 86px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, 620px) !important;
    border-radius: 24px !important;
  }

  .ai-assistant-panel form,
  .ai-chat-panel form,
  .ai-assistant-window form,
  .ai-widget-panel form,
  #aiAssistantPanel form,
  #ai-assistant-panel form,
  .ai-chat-box form,
  .assistant-chat-box form,
  .ai-modal form,
  [class*="assistant"][class*="panel"] form,
  [class*="assistant"][class*="window"] form {
    padding: 10px !important;
    gap: 8px !important;
  }

  .ai-assistant-panel input,
  .ai-assistant-panel textarea,
  .ai-chat-panel input,
  .ai-chat-panel textarea,
  .ai-assistant-window input,
  .ai-assistant-window textarea,
  .ai-widget-panel input,
  .ai-widget-panel textarea,
  #aiAssistantPanel input,
  #aiAssistantPanel textarea,
  #ai-assistant-panel input,
  #ai-assistant-panel textarea,
  .ai-chat-box input,
  .ai-chat-box textarea,
  .assistant-chat-box input,
  .assistant-chat-box textarea,
  .ai-modal input,
  .ai-modal textarea,
  [class*="assistant"][class*="panel"] input,
  [class*="assistant"][class*="panel"] textarea,
  [class*="assistant"][class*="window"] input,
  [class*="assistant"][class*="window"] textarea {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }
}

/* -----------------------------
   Header hover: premium, clean
------------------------------ */
@media (min-width: 992px) {
  .site-nav,
  .main-nav,
  .nav-categories,
  .category-nav,
  .header-nav,
  .public-nav {
    isolation: isolate !important;
    position: relative !important;
    z-index: 900 !important;
    overflow: visible !important;
  }

  .site-nav a,
  .main-nav a,
  .nav-categories a,
  .category-nav a,
  .header-nav a,
  .public-nav a,
  .site-nav .nav-link,
  .main-nav .nav-link,
  .nav-categories .nav-link,
  .category-nav .nav-link,
  .header-nav .nav-link,
  .public-nav .nav-link {
    border-radius: 14px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  .site-nav a:hover,
  .main-nav a:hover,
  .nav-categories a:hover,
  .category-nav a:hover,
  .header-nav a:hover,
  .public-nav a:hover,
  .site-nav .nav-link:hover,
  .main-nav .nav-link:hover,
  .nav-categories .nav-link:hover,
  .category-nav .nav-link:hover,
  .header-nav .nav-link:hover,
  .public-nav .nav-link:hover,
  .site-nav li:hover > a,
  .main-nav li:hover > a,
  .nav-categories li:hover > a,
  .category-nav li:hover > a,
  .header-nav li:hover > a,
  .public-nav li:hover > a {
    color: #0b66ff !important;
    background: linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.92)) !important;
    box-shadow: inset 0 0 0 1px rgba(147,197,253,.58), 0 10px 24px rgba(37,99,235,.10) !important;
    transform: translateY(-1px) !important;
  }

  /* keep active/hover block inside nav row, not bleeding into blue header */
  .site-nav li,
  .main-nav li,
  .nav-categories li,
  .category-nav li,
  .header-nav li,
  .public-nav li {
    position: relative !important;
    overflow: visible !important;
  }

  /* Mega/dropdown visual refinement */
  .site-nav .dropdown-menu,
  .main-nav .dropdown-menu,
  .nav-categories .dropdown-menu,
  .category-nav .dropdown-menu,
  .header-nav .dropdown-menu,
  .public-nav .dropdown-menu,
  .mega-menu,
  .categories-mega,
  .header-mega,
  [class*="mega-menu"],
  [class*="dropdown-menu"] {
    border-radius: 0 0 24px 24px !important;
    border: 1px solid rgba(219,234,254,.95) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 24px 50px rgba(15,23,42,.14), 0 4px 12px rgba(37,99,235,.08) !important;
    backdrop-filter: blur(10px) !important;
    margin-top: 0 !important;
  }

  .site-nav .dropdown-menu a:hover,
  .main-nav .dropdown-menu a:hover,
  .nav-categories .dropdown-menu a:hover,
  .category-nav .dropdown-menu a:hover,
  .header-nav .dropdown-menu a:hover,
  .public-nav .dropdown-menu a:hover,
  .mega-menu a:hover,
  .categories-mega a:hover,
  .header-mega a:hover,
  [class*="mega-menu"] a:hover,
  [class*="dropdown-menu"] a:hover {
    background: rgba(239,246,255,.92) !important;
    box-shadow: inset 0 0 0 1px rgba(191,219,254,.75) !important;
    transform: none !important;
  }
}

/* Prevent nav hover background from covering upper gradient header */
.site-header,
.main-header,
.header-main,
.top-header,
.public-header {
  overflow: visible !important;
}
