/* PRDEDC Brand Theme — matches www.desarrollo.pr.gov
   Primary navy:  #053E67
   Gold accent:   #C8982D
   Background:    #F5F6F8  */

/* Force override Chainlit's CSS variables using !important */
:root,
html {
  --primary: 205.1 90.7% 21.2% !important;
  --primary-foreground: 0 0% 100% !important;
  --ring: 205.1 90.7% 21.2% !important;
  --background: 220 17.6% 96.7% !important;
  --foreground: 205 50% 10% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 205 50% 10% !important;
  --secondary: 210 20% 93% !important;
  --secondary-foreground: 205.1 90.7% 21.2% !important;
  --muted: 210 15% 90% !important;
  --muted-foreground: 205 30% 35% !important;
  --accent: 210 20% 95% !important;
  --accent-foreground: 205.1 90.7% 21.2% !important;
  --border: 210 15% 88% !important;
  --input: 210 15% 88% !important;
  --sidebar-background: 205.4 92.2% 15.1% !important;
  --sidebar-foreground: 0 0% 100% !important;
  --sidebar-primary: 0 0% 100% !important;
  --sidebar-primary-foreground: 205.4 92.2% 15.1% !important;
  --sidebar-accent: 205.1 90.7% 21.2% !important;
  --sidebar-accent-foreground: 0 0% 100% !important;
  --sidebar-border: 205.4 60% 25% !important;
}

/* Dark mode overrides — keep PRDEDC branding with dark backgrounds */
.dark,
.dark html {
  --background: 210 15% 12% !important;
  --foreground: 210 15% 90% !important;
  --card: 210 15% 15% !important;
  --card-foreground: 210 15% 90% !important;
  --secondary: 210 15% 18% !important;
  --secondary-foreground: 210 15% 85% !important;
  --muted: 210 10% 22% !important;
  --muted-foreground: 210 10% 65% !important;
  --accent: 210 15% 20% !important;
  --accent-foreground: 210 15% 90% !important;
  --border: 210 10% 25% !important;
  --input: 210 10% 25% !important;
}

/* Direct element overrides as fallback */

/* Page background — target body and all major containers (light mode only) */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) #root,
html:not(.dark) main,
html:not(.dark) div[class*="bg-background"] {
  background-color: #F5F6F8 !important;
}

/* Dark mode background */
html.dark,
html.dark body,
html.dark #root,
html.dark main,
html.dark div[class*="bg-background"] {
  background-color: #1a2332 !important;
}

/* Send button — force navy */
button.bg-primary,
button[class*="bg-primary"] {
  background-color: #053E67 !important;
  color: #ffffff !important;
}

button.bg-primary:hover,
button[class*="bg-primary"]:hover {
  background-color: #0A5A8E !important;
}

/* New chat / header icons */
button.text-primary,
[class*="text-primary"] {
  color: #053E67 !important;
}

/* Links — navy blue, gold on hover */
a {
  color: #053E67;
}

a:hover {
  color: #C8982D;
}

/* User message bubble */
div[class*="bg-primary"] {
  background-color: #053E67 !important;
  color: #ffffff !important;
}

/* Ensure send button arrow icon stays white */
button.bg-primary svg,
button[class*="bg-primary"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Hide Chainlit watermark / branding */
a[href*="chainlit.io"],
a[href*="github.com/Chainlit"],
[class*="watermark"],
[class*="Watermark"] {
  display: none !important;
}

footer,
div[class*="powered"] {
  display: none !important;
}

/* Action bar container — stack suggestion pills vertically.
   Use :has() to only target containers that hold suggestion buttons,
   NOT the composer footer which also uses -ml-1.5 class. */
div[class*="-ml-1"]:has(button[id^="suggestion-"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-top: 12px !important;
  margin-left: 0 !important;
}

/* Hide copy button when suggestion pills are present */
div[class*="-ml-1"]:has(button[id^="suggestion-"]) button:not([id^="suggestion-"]) {
  display: none !important;
}

/* Suggested question pills — navy outline (light mode) */
button[id^="suggestion-"] {
  background-color: #ffffff !important;
  color: #053E67 !important;
  border: 1.5px solid #053E67 !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  height: auto !important;
  white-space: normal !important;
  text-align: left !important;
  line-height: 1.4 !important;
  transition: all 0.15s ease !important;
}

button[id^="suggestion-"]:hover {
  background-color: #053E67 !important;
  color: #ffffff !important;
  border-color: #C8982D !important;
}

button[id^="suggestion-"] svg {
  display: none !important;
}

/* === Dark mode overrides for specific elements === */

/* Suggestion pills in dark mode — lighter border and text */
.dark button[id^="suggestion-"] {
  background-color: #1a2332 !important;
  color: #a8c8e8 !important;
  border-color: #a8c8e8 !important;
}

.dark button[id^="suggestion-"]:hover {
  background-color: #053E67 !important;
  color: #ffffff !important;
  border-color: #C8982D !important;
}

/* Links in dark mode */
.dark a {
  color: #7bb8e0;
}

.dark a:hover {
  color: #C8982D;
}

/* Message text in dark mode */
.dark .message-content {
  color: #e0e4e8 !important;
}