/* VMAC Brand Theme — VMAC brand from www.vmacair.com
   Primary red:   #E2001D
   Gold accent:   #21222A
   Background:    #F5F6F8  */

/* Force override Chainlit's CSS variables using !important */
:root,
html {
  --primary: 352.3 100% 44.3% !important;
  --primary-foreground: 0 0% 100% !important;
  --ring: 352.3 100% 44.3% !important;
  --background: 220 17.6% 96.7% !important;
  --foreground: 233 15% 10% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 233 15% 10% !important;
  --secondary: 210 20% 93% !important;
  --secondary-foreground: 352.3 100% 44.3% !important;
  --muted: 210 15% 90% !important;
  --muted-foreground: 233 8% 35% !important;
  --accent: 210 20% 95% !important;
  --accent-foreground: 352.3 100% 44.3% !important;
  --border: 210 15% 88% !important;
  --input: 210 15% 88% !important;
  --sidebar-background: 233.3 12% 14.7% !important;
  --sidebar-foreground: 0 0% 100% !important;
  --sidebar-primary: 0 0% 100% !important;
  --sidebar-primary-foreground: 233.3 12% 14.7% !important;
  --sidebar-accent: 352.3 100% 44.3% !important;
  --sidebar-accent-foreground: 0 0% 100% !important;
  --sidebar-border: 233.3 12% 28% !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: #1B1C22 !important;
}

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

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

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

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

a:hover {
  color: #21222A;
}

/* User message bubble */
div[class*="bg-primary"] {
  background-color: #E2001D !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;
}

/* Header logo — make wider for the full PRDEDC wordmark */
img[src*="logo"] {
  width: 110px !important;
  max-width: 90vw !important;
  height: auto !important;
}

/* Dark mode: swap to white-text logo variant */
.dark img[src*="logo"] {
  content: url("/public/logo-light.svg") !important;
}

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

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

#readme-button {
  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: #E2001D !important;
  border: 1.5px solid #E2001D !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: #E2001D !important;
  color: #ffffff !important;
  border-color: #21222A !important;
}

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

/* === Feedback bar (thumbs up/down + share) === */
.feedback-bar {
  font-family: Inter, -apple-system, sans-serif;
}

.feedback-btn:hover {
  border-color: #999 !important;
  color: #333 !important;
}

.share-btn:hover {
  border-color: #999 !important;
  color: #333 !important;
}

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

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

.dark button[id^="suggestion-"]:hover {
  background-color: #E2001D !important;
  color: #ffffff !important;
  border-color: #21222A !important;
}

/* Links in dark mode — ensure visibility in message content and Shadow DOM */
.dark a,
.dark .message-content a {
  color: #FF8896 !important;
}

.dark a:hover,
.dark .message-content a:hover {
  color: #21222A !important;
}

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

/* Appointment form in dark mode */
.dark #appt-container {
  background-color: #1e2a3a !important;
  border-color: #3a5068 !important;
}

.dark #appt-container > div:first-child {
  color: #21222A !important;
}

/* Loading indicator in dark mode — brighter for visibility */
.dark .thinking-text {
  color: #F2A0AA !important;
}

.dark .thinking-dot {
  background: #FF8896 !important;
}

.dark #appt-container label {
  color: #b0c0d0 !important;
}

.dark #appt-container input,
.dark #appt-container textarea {
  background-color: #253345 !important;
  color: #e0e4e8 !important;
  border-color: #3a4d63 !important;
}

.dark #appt-container input::placeholder,
.dark #appt-container textarea::placeholder {
  color: #6b7d8f !important;
}

/* Feedback bar in dark mode */
.dark .feedback-bar {
  border-top-color: #2a3442 !important;
}

.dark .feedback-btn,
.dark .share-btn {
  border-color: #3a4555 !important;
  color: #8899aa !important;
}

.dark .feedback-btn:hover,
.dark .share-btn:hover {
  border-color: #667788 !important;
  color: #b0c0d0 !important;
}