/* ================================================================
   NEO CHATBOT — DEFENCE/AEROSPACE REDESIGN OVERRIDE
   Matches neometrixgroup.com dark navy aesthetic
   ================================================================ */

/* ---- SCOPE: all overrides live inside #root ---- */

/* ---- TYPOGRAPHY ---- */
#root,
#root * {
  font-family: 'Montserrat', sans-serif !important;
}

/* ================================================================
   FAB BUTTON (bottom-right circle)
   Old: generic blue gradient
   New: deep navy with gold ring accent + HUD pulse
   ================================================================ */
#root button.avtarcutomize,
#root button[class*="avtarcutomize"] {
  background: linear-gradient(135deg, #001a3a 0%, #002d5c 60%, #004ba6 100%) !important;
  border: 3px solid rgba(180, 160, 110, 0.6) !important;
  box-shadow:
    0 0 20px rgba(0, 75, 166, 0.4),
    0 0 40px rgba(0, 75, 166, 0.15),
    0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

#root button.avtarcutomize:hover,
#root button[class*="avtarcutomize"]:hover {
  border-color: rgba(180, 160, 110, 0.9) !important;
  box-shadow:
    0 0 25px rgba(0, 75, 166, 0.6),
    0 0 50px rgba(0, 75, 166, 0.25),
    0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transform: scale(1.05) !important;
}

/* Notification dot — gold instead of red */
#root button.avtarcutomize .bg-red-500,
#root button.avtarcutomize div[class*="bg-red-500"] {
  background: linear-gradient(135deg, #c5a44e, #e8c95a) !important;
  border-color: #001a3a !important;
  box-shadow: 0 0 8px rgba(197, 164, 78, 0.6) !important;
}

/* ================================================================
   POPUP GREETING CARD (hovers above FAB)
   Old: blue-purple gradient border, plain white
   New: navy glass card with gold accent line
   ================================================================ */

/* Outer gradient border wrapper */
#root .origin-bottom-right > div:first-child {
  background: linear-gradient(135deg, #004ba6, #c5a44e 50%, #004ba6) !important;
  border-radius: 16px !important;
}

/* Inner card — dark navy glass */
#root .origin-bottom-right .backdrop-blur-sm {
  background: rgba(0, 20, 50, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Popup main text — bright white */
#root .origin-bottom-right .text-gray-800 {
  color: #ffffff !important;
}

/* Popup subtitle — gold */
#root .origin-bottom-right .text-gray-500,
#root .origin-bottom-right .tracking-wide {
  color: #c5a44e !important;
  opacity: 1 !important;
}

/* Popup icon bg */
#root .origin-bottom-right .bg-blue-50 {
  background: rgba(0, 75, 166, 0.25) !important;
}

#root .origin-bottom-right .bg-blue-50.text-blue-600 {
  color: #60a5fa !important;
}


/* ================================================================
   CHAT WINDOW CONTAINER
   Old: plain white
   New: dark navy
   ================================================================ */
#root .w-\[384px\] {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 75, 166, 0.3) !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 75, 166, 0.15) !important;
}


/* ================================================================
   CHAT HEADER
   Old: bg-gradient blue-600 → blue-800
   New: deep navy with subtle gold bottom border
   ================================================================ */
#root div[class*="from-blue-600"][class*="to-blue-800"],
#root div.bg-gradient-to-r.from-blue-600.to-blue-800 {
  background: linear-gradient(135deg, #001028 0%, #001a3a 40%, #002d5c 100%) !important;
  border-bottom: 2px solid rgba(180, 160, 110, 0.35) !important;
  padding: 16px 20px !important;
}

/* Header title "NEO" */
#root div[class*="from-blue-600"] .font-bold,
#root div[class*="from-blue-600"] div[class*="font-bold"] {
  color: #ffffff !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
}

/* Header subtitle */
#root div[class*="from-blue-600"] div[class*="text-blue-100"],
#root div[class*="from-blue-600"] div[class*="opacity-90"] {
  color: rgba(180, 160, 110, 0.8) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

/* Header avatar ring */
#root div[class*="from-blue-600"] div[class*="border-white\\/30"] {
  border-color: rgba(180, 160, 110, 0.5) !important;
}

/* Header expand/close buttons */
#root div[class*="from-blue-600"] button.expandcustombtn,
#root div[class*="from-blue-600"] button.closecustombtn {
  color: rgba(180, 160, 110, 0.7) !important;
  transition: all 0.2s ease !important;
}

#root div[class*="from-blue-600"] button.expandcustombtn:hover,
#root div[class*="from-blue-600"] button.closecustombtn:hover {
  color: #c5a44e !important;
  background: rgba(180, 160, 110, 0.15) !important;
}


/* ================================================================
   MESSAGES AREA
   Old: bg-gray-50/50 (light grey)
   New: dark navy background
   ================================================================ */
#root .flex-1.overflow-y-auto {
  background: linear-gradient(180deg, #000d1f 0%, #001028 100%) !important;
}

/* Scrollbar styling */
#root .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}
#root .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
#root .overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(0, 75, 166, 0.3);
  border-radius: 3px;
}
#root .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 75, 166, 0.5);
}


/* ================================================================
   BOT MESSAGE BUBBLES
   Old: bg-white border-gray-100 (plain white)
   New: dark translucent navy with blue-left-accent
   ================================================================ */
#root .rounded-bl-none {
  background: rgba(0, 40, 80, 0.6) !important;
  border: 1px solid rgba(0, 75, 166, 0.3) !important;
  border-left: 3px solid #004ba6 !important;
  color: #d0dae8 !important;
  backdrop-filter: blur(4px) !important;
}

/* Bot message prose/markdown content */
#root .rounded-bl-none .prose,
#root .rounded-bl-none p,
#root .rounded-bl-none span {
  color: #d0dae8 !important;
}

#root .rounded-bl-none strong,
#root .rounded-bl-none b {
  color: #e8edf5 !important;
}

#root .rounded-bl-none a {
  color: #60a5fa !important;
}

#root .rounded-bl-none code {
  background: rgba(0, 75, 166, 0.2) !important;
  color: #7cb3f0 !important;
}

#root .rounded-bl-none ul,
#root .rounded-bl-none ol,
#root .rounded-bl-none li {
  color: #d0dae8 !important;
}

/* Bot avatar border */
#root .overflow-y-auto .w-\[32px\].border-gray-200 {
  border-color: rgba(0, 75, 166, 0.4) !important;
}


/* ================================================================
   USER MESSAGE BUBBLES
   Old: bg-blue-600 (generic blue)
   New: subtle gold-accent gradient
   ================================================================ */
#root .rounded-br-none.bg-blue-600 {
  background: linear-gradient(135deg, #003366 0%, #004ba6 100%) !important;
  border: 1px solid rgba(180, 160, 110, 0.25) !important;
  border-right: 3px solid rgba(180, 160, 110, 0.5) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}


/* ================================================================
   TYPING INDICATOR
   Old: blue-400 bouncing dots on white bg
   New: gold dots on dark bg
   ================================================================ */
#root .rounded-bl-none.space-x-1\.5 {
  background: rgba(0, 40, 80, 0.6) !important;
  border: 1px solid rgba(0, 75, 166, 0.3) !important;
  border-left: 3px solid #004ba6 !important;
}

#root .bg-blue-400.rounded-full.animate-bounce {
  background: #c5a44e !important;
  box-shadow: 0 0 6px rgba(197, 164, 78, 0.4) !important;
}

/* "Thinking..." text */
#root .animate-pulse.ml-11 {
  color: rgba(180, 160, 110, 0.7) !important;
}

/* Thinking spinner */
#root .animate-pulse .animate-spin {
  color: #c5a44e !important;
}


/* ================================================================
   INPUT AREA
   Old: bg-white with gray border
   New: dark navy with subtle blue border
   ================================================================ */
#root .p-4.bg-white.border-t {
  background: #000d1f !important;
  border-top: 1px solid rgba(0, 75, 166, 0.3) !important;
}

/* Input field */
#root input.bg-gray-50,
#root input.text-sm {
  background: rgba(0, 25, 55, 0.8) !important;
  border: 1px solid rgba(0, 75, 166, 0.35) !important;
  color: #e8edf5 !important;
  font-size: 14px !important;
}

#root input.bg-gray-50::placeholder,
#root input.text-sm::placeholder {
  color: rgba(150, 170, 200, 0.5) !important;
}

#root input.bg-gray-50:focus,
#root input.text-sm:focus {
  background: rgba(0, 30, 65, 0.9) !important;
  border-color: #004ba6 !important;
  box-shadow: 0 0 0 2px rgba(0, 75, 166, 0.2) !important;
}

/* Send button */
#root button.bg-blue-600.rounded-xl:not(.avtarcutomize) {
  background: linear-gradient(135deg, #003366, #004ba6) !important;
  border: 1px solid rgba(180, 160, 110, 0.3) !important;
  box-shadow: 0 0 10px rgba(0, 75, 166, 0.3) !important;
  transition: all 0.2s ease !important;
}

#root button.bg-blue-600.rounded-xl:not(.avtarcutomize):hover {
  background: linear-gradient(135deg, #004ba6, #0060d0) !important;
  border-color: rgba(180, 160, 110, 0.5) !important;
  box-shadow: 0 0 15px rgba(0, 75, 166, 0.5) !important;
}


/* ================================================================
   FOOTER INFO ROW (model badge + branding)
   ================================================================ */
#root .text-gray-400.tracking-wider {
  color: rgba(100, 120, 150, 0.5) !important;
}

#root .bg-blue-50.text-blue-600.border-blue-100 {
  background: rgba(0, 75, 166, 0.15) !important;
  color: #4a90d9 !important;
  border-color: rgba(0, 75, 166, 0.3) !important;
}


/* ================================================================
   EXPANDED MODE (w-[800px])
   ================================================================ */
#root .w-\[800px\] {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 75, 166, 0.3) !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 75, 166, 0.15) !important;
}


/* ================================================================
   QUICK SUGGESTION CHIPS (if any)
   ================================================================ */
#root .rounded-lg.text-blue-600.border {
  background: rgba(0, 40, 80, 0.4) !important;
  border-color: rgba(0, 75, 166, 0.3) !important;
  color: #60a5fa !important;
}

#root .rounded-lg.text-blue-600.border:hover {
  background: rgba(0, 75, 166, 0.2) !important;
  border-color: rgba(0, 75, 166, 0.5) !important;
}


/* ================================================================
   ERROR STATE
   ================================================================ */
#root .bg-red-50 {
  background: rgba(80, 20, 20, 0.4) !important;
  border-color: rgba(180, 60, 60, 0.3) !important;
}

#root .text-red-600,
#root .text-red-700 {
  color: #f08080 !important;
}

#root .bg-red-600 {
  background: linear-gradient(135deg, #5c1a1a, #8b2020) !important;
}