/* FGS Chatbot Theme Styles */
/* ===== BUTTON STYLES ===== */
button, .cl-button {
  background-color: #ee7202 !important; /* Uniek Sporten orange */
  color: #fff !important;
  border-radius: 6px !important;
  border: none !important;
  padding: 4px 8px !important;
  font-size: 1rem !important;
  transition: background 0.2s;
  margin: 8px 4px !important;
}

/* Make keyboard focus clearly visible on all buttons (accessibility) */
button:focus-visible,
.cl-button:focus-visible {
  outline: 2px solid #27344B !important;   /* Blue line like other site buttons */
  outline-offset: 2px !important;
}
button:hover, .cl-button:hover {
  background-color: #d46302 !important; /* Slightly darker orange for hover */
}
/* Specific button styling for chat interface */
button.inline-flex.items-center.justify-center.gap-2.whitespace-nowrap.rounded-md {
  background-color: white !important;
  color: #ee7202 !important;
}
#upload-button {
  background-color: white !important;
}
#upload-button > svg {
  color: #ee7202 !important;
}
#upload-button:hover {
  background-color: #f6f6f6 !important;
}
#upload-button-input {
  background-color: #f6f6f6 !important;
}
button.inline-flex.items-center.justify-center.gap-2.whitespace-nowrap.rounded-md > svg {
  color: #ee7202 !important;
}
button.inline-flex.items-center.justify-center.gap-2.whitespace-nowrap.rounded-md:hover {
  background-color: #f6f6f6 !important;
}
.inline-flex.items-center.justify-center.gap-2.whitespace-nowrap.rounded-md.text-sm.font-medium.ring-offset-background.transition-colors.focus-visible:outline-none.focus-visible:ring-2.focus-visible:ring-ring.focus-visible:ring-offset-2.disabled:pointer-events-none.disabled:opacity-50.hover:text-accent-foreground.h-9.w-9.hover:bg-muted {
  background-color: #f6f6f6 !important;
}
.custom-button {
  color: white;
}
/* ===== THINKING INDICATOR DOT ===== */
/* Change the color of the thinking indicator dot */
.inline-block.h-3\.5.w-3\.5.bg-foreground.rounded-full.animate-pulse {
  background-color: #ee7202 !important; /* Uniek Sporten orange */
}
/* Alternative: Target just the bg-foreground class */
.bg-foreground {
  background-color: #ee7202 !important; /* Uniek Sporten orange */
}
/* ===== BACKGROUND IMAGE ===== */
/* Top Navigation Bar */
#topbar.navbar.bg-inverse-top {
  background-color: #27344B !important;
}
/* Toggleable Navbar */
.navbar-toggleable-md.navbar-inverse.bg-inverse {
  background-color: #EE7203 !important;
}
/* Main Section with white background */
.section.white.orange-dot.s-top {
  background-color: #FFFFFF !important;
}
/* ===== HIDE WATERMARK ===== */
.watermark {
  display: none !important;
}
/* ===== CHAT CONTAINER STYLES ===== */
/* Main chat container backgrounds */
.flex.flex-col.mx-auto.w-full,
.flex.flex-col.mx-auto.w-full.flex-grow.px-4.pt-4,
.flex.flex-col.mx-auto.w-full.px-4.pb-4 {
  background: transparent !important;
  color: #000 !important;
  /* background-image: url('/public/background-image-bottom.png') !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important; */
}
/* Chat header area */
.flex.align-center.justify-between.p-4.pb-0 {
  background: url('/public/background-image-top.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  padding-top: 10px !important;
  padding-bottom: 2px !important;
}

/* Hide only the expand/maximize chat button */
.flex.align-center.justify-between.p-4.pb-0 button:has(svg.lucide-maximize),
button:has(svg.lucide-maximize),
button svg.lucide-maximize {
  display: none !important;
}
/* Chat input area */
#message-composer {
  background: #fff !important;
  border: 1px solid rgba(24, 32, 87, .10) !important;
  border-radius: 16px !important;
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 16px !important;
  box-shadow: 6px 6px 21px -5px rgba(43,43,43,0.12) !important;
}
#chat-input {
  background-color: #ffffff !important;
  color: #000 !important;
  z-index: 20 !important;
  position: relative !important;
}

/* Main chat panel border */
div.border {
  border: none;
  border-radius: 12px !important;
}

/* Answer area after user message */
.flex-shrink-0 {
  background: #ffffff !important;
}
/* User message bubble */
.bg-accent {
  background: rgba(238, 114, 2, .15) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  color: #000 !important;
  border-radius: 16px !important;
}
/* Expanded chat areas */
.flex.flex-col.flex-grow.overflow-y-auto {
  background-image: url('/public/background-image-bottom.png') !important;
  background-size: calc(579px / 1.5) !important;
  background-color: #ffffff !important;
  background-repeat: repeat-x !important;
  background-attachment: fixed !important;
  color: #000 !important;
}
/* ===== DIALOG STYLES ===== */
/* New chat dialog */
#new-chat-dialog,
div[role="dialog"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #27344B !important;
  border-radius: 12px !important;
  z-index: 1000 !important;
}
/* Dialog backdrop */
div[data-state="open"] {
  background-color: rgba(255, 255, 255, 0.9) !important;
}
/* Overlay and backdrop elements */
.fixed.inset-0,
div[class*="backdrop"],
div[class*="overlay"] {
  background-color: rgba(255, 255, 255, 0.9) !important;
}
#starters > button > .flex.gap-2 > p {
  color: white !important;
}
#starters {
  gap: 0px !important;
}
.ai-message {
  background-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  padding: 5px !important;
  border-radius: 16px !important; 
}
.flex.flex-col.mx-auto.w-full.px-4.pb-4 {
  background-color: white !important;
  background-image: none !important;
}
/* ===== HEADER LOGO SIZE ===== */
/* Override the Tailwind width class w-[100px] */
img.logo {
  width: 70px !important; /* Change this value to adjust the logo size */
  height: auto !important;
}

div[data-radix-popper-content-wrapper] {
  border: none !important;
  border-radius: 16px !important;
  z-index: 1000 !important;
  max-height: 8000px !important;
}

#chainlit-copilot-chat {
  border: 1px solid #27344B !important;
  border-radius: 10px !important;
  background-color: white;
}

/* Make the inset/dialog variant wide by default: set the dialog container wide */
div[role="dialog"]:has(#chainlit-copilot-chat) {
  width: 90vw !important;
  max-width: 1100px !important;
}

/* Ensure the internal chat fills the dialog width without overflowing */
div[role="dialog"] #chainlit-copilot-chat {
  width: 100% !important;
  max-width: none !important;
}

/* If the popover wrapper momentarily contains the chat, widen it as well */
div[data-radix-popper-content-wrapper]:has(#chainlit-copilot-chat) {
  width: 90vw !important;
  max-width: 1100px !important;
}

/* Force dialog mode - hide popover mode */
#chainlit-copilot-popover:has(#chainlit-copilot-chat) {
  display: none !important;
}

/* Ensure dialog is always visible when chat exists */
div[role="dialog"]:has(#chainlit-copilot-chat) {
  display: block !important;
  visibility: visible !important;
}

.flex .align-center {
  border-radius: 3px 3px 0px 0px;
}

.flex .flex-col {
  border-radius: 0px 0px 15px 15px;
}

.truncate {
  color: white !important;
}

/* Selecteert de 'message composer' (de invoerbalk-container) */
#chainlit-copilot-chat::after {

  /* Hier komt je disclaimer-tekst */
  content: "Let op: Deze chatbot kan fouten maken. Controleer belangrijke informatie.";

  /* Styling om het er goed uit te laten zien: */

  display: flex;     /* Zorgt dat de tekst op een eigen regel komt */
  width: 90%;        /* Zorgt dat het de volle breedte pakt */
  text-align: center; /* Centreert de tekst */
  font-size: 0.75rem; /* Maakt de tekst iets kleiner */
  color: black;     /* Geeft het een subtiele grijze kleur */
  background-color: white !important;
  align-self: center;
  margin-top: -20px;
  margin-bottom: 5px;
  display: flex;
  align-content: center;
  justify-content: center;
}