/* custom.css */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f6f8;
}

/* Style the header */
.header {
    background-color: #004080 !important;
}

/* Change chat bubble colors */
.message-bubble.user {
    background-color: #d1e4ff !important;
    color: #001f4d;
}
.message-bubble.bot {
    background-color: #004080 !important;
    color: #ffffff;
}

/* Logo styling in header */
.header img {
    height: 40px;
    margin-right: 8px;
}

/* Hide the “Built with Chainlit” watermark */
.watermark {
    display: none !important;
}  

.disclaimer-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 7px 0;
  font-size: 0.75rem;
  z-index: 9999;
  pointer-events: none;

  visibility: visible !important;
  color: #a0a0a0 !important;
  text-align: center !important;
  width: 100% !important;
}

/* Make sure the real <main> is positioned and has bottom padding */
main {
  position: relative !important;
  padding-bottom: 1.6rem !important;  /* leave room for the disclaimer */
}
main {
  /* somehow define your background color here as a custom property… */
  /* e.g. --bg: #222; or --bg: #fafafa; */
  --bg: inherit;
  position: relative;
  background-color: var(--bg);
}

main::after {
  content: "Language models can make mistakes. Check important info.";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 7px 0;
  font-size: 0.75rem;

  /* pick the color (first value is best contrast) */
  color: color-contrast(var(--bg) vs #fff, #000);

  pointer-events: none;
  z-index: 999;
}


/* collapse to one column */
#root > div.grid {
  grid-template-columns: 1fr !important;
  place-items: center !important;
  min-height: 100vh !important;
}

/* hide the image column */
#root > div.grid > div:nth-child(2) {
  display: none !important;
}