/* ---- Avenir Next LT Pro (self-hosted) -------------------------------------
   Place licensed webfonts in /public/fonts and update the src URLs below.
   If you don't have a webfont license, the stack falls back to system fonts.
----------------------------------------------------------------------------- */

@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('/public/fonts/AvenirNextLTPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('/public/fonts/AvenirNextLTPro-Demi.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('/public/fonts/AvenirNextLTPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('/public/fonts/AvenirNextLTPro-It.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}


:root {
  /* Shorthands to reference brand colors from theme.json variables */
  --brand-red: hsl(var(--primary));
  --brand-navy: hsl(244.4 62.8% 25.3%); /* #1E1869 */
  --ink-black: #000;  /* text color (guideline: black/white only) */
  --chalk-white: #fff;
}

/* Global typography & legibility rules (guidelines: Avenir Next LT Pro; text only black/white) */
html, body, .cl-root {
  font-family: var(--font-sans, 'Avenir Next LT Pro','Avenir Next','Avenir','Inter','Helvetica Neue',Helvetica,Arial,sans-serif);
  color: var(--ink-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: use Demi/Bold, keep line-height ≤ 1.5, no ALL CAPS */
h1, h2, h3 {
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none; /* Do not use all-caps in headings */
  color: var(--ink-black);
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

#readme-button {
    display: none !important;
}

#theme-toggle {
    display: none !important;
}

Buttons & links align to brand red by default (CTA & navigation as per guidelines)
a, .cl-button-primary, button[data-variant="primary"] {
  --tw-ring-color: var(--brand-red);
  --tw-ring-offset-color: transparent;
  color: hsl(var(--primary-foreground));
  background: var(--brand-red);
  border-color: var(--brand-red);
}

/* Replace the global “a, ...” rule with this narrower one */
.cl-button-primary,
button[data-variant="primary"],
a.button,
a[role="button"] {
  --tw-ring-color: var(--brand-red);
  --tw-ring-offset-color: transparent;
  color: hsl(var(--primary-foreground));
  background: var(--brand-red);
  border-color: var(--brand-red);
}

a:hover, .cl-button-primary:hover, button[data-variant="primary"]:hover {
  filter: brightness(0.95);
}

/* ---------------- Brand devices ---------------- */

/* Accent line (vertical or horizontal). Use either red or navy. 
   We approximate weights: 2.25pt≈3px, 3pt≈4px, 4.5pt≈6px (screen rendering).
   Allowed colors: brand red or navy; keep straight and aligned. */
.accent-line {
  position: relative;
}
.accent-line--v { padding-left: 12px; }
.accent-line--v::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; /* main heading weight ≈2.25pt */
  background: var(--brand-red);
}
.accent-line--v.navy::before { background: var(--brand-navy); }

.accent-line--h { padding-top: 8px; }
.accent-line--h::before {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 4px; /* picture/text box ≈3pt */
  width: 100%;
  background: var(--brand-red);
}
.accent-line--h.navy::before { background: var(--brand-navy); }

.accent-line--page { padding-top: 10px; }
.accent-line--page::before {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 6px; /* full-page accent ≈4.5pt */
  width: 100%;
  background: var(--brand-red);
}
.accent-line--page.navy::before { background: var(--brand-navy); }

/* Circle line (horizontal only): 1.25pt≈2px line + 0.4cm≈15px circle.
   The line should enter from the side and end at ~a quarter width.
   On web, '25vw' approximates document quarter width responsively. */
.circle-line {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.circle-line::before {
  content: "";
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand-red);
  margin-right: 8px;
}
.circle-line::after {
  content: "";
  display: inline-block;
  height: 2px; width: 25vw;
  background: var(--brand-red);
}
.circle-line.navy::before,
.circle-line.navy::after { background: var(--brand-navy); }

/* Ensure text never uses accent colors (guideline). Links/buttons already use primary foreground. */
p, li, h4, h5, h6 { color: var(--ink-black); }

/* Dark mode: force same appearance as light mode */
.dark body, .dark .cl-root, .dark p, .dark li, .dark h1, .dark h2, .dark h3 {
  color: var(--ink-black);
}

/* Optional: tighten message bubbles & inputs to match neutral aesthetic */
.cl-chat-input, .cl-message {
  border-radius: var(--radius, .5rem);
  border-color: hsl(var(--border));
}


/* Hide the default “Built with Chainlit” watermark */
.watermark { display: none !important; }  /* community-supported selector */ /*  */

/* ---- Login page red corner decorations ---- */
.login-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.login-corner--top-left {
  top: -20px;
  left: -20px;
}
.login-corner--bottom-right {
  bottom: -20px;
  right: -20px;
}

/* Double the login page logo size (default is 150px via Tailwind w-[150px]) */
img.logo.w-\[150px\] {
  width: 300px !important;
}

.login-image-container {
  background-image: url('/public/favicon.png');
}




a, .cl-button-primary, button[data-variant="primary"] {
/* CTA buttons only — do NOT style plain links */
.cl-button-primary,
button[data-variant="primary"],
a.button,               /* optional: you can opt-in link-as-button */
a[role="button"] {
   --tw-ring-color: var(--brand-red);
   --tw-ring-offset-color: transparent;
   color: hsl(var(--primary-foreground));
   background: var(--brand-red);
   border-color: var(--brand-red);
}
}



/* README/Markdown links: text-only, black/white per brand */
.cl-markdown a:not(.cl-button-primary),
.prose a:not(.cl-button-primary) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink-black) !important;     /* light theme: black text */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark .cl-markdown a:not(.cl-button-primary),
.dark .prose a:not(.cl-button-primary) {
  color: var(--ink-black) !important;   /* dark = light */
}

.cl-markdown a:hover,
.prose a:hover {
  background: transparent !important;
  text-decoration: none;                  /* optional hover effect */
}

/* Keep the red focus ring for accessibility but no red background */
.cl-markdown a:focus-visible,
.prose a:focus-visible {
  outline: 2px solid hsl(var(--ring));    /* uses your brand ring (red) */
  outline-offset: 2px;
}




/* Fix Tailwind preflight interfering with Plotly modebar icons */
.js-plotly-plot .plotly .modebar svg {
  display: inline; /* Tailwind sets svg to block; Plotly expects inline */
}



* Make the message footer wrap onto multiple lines */
[data-testid="cl-message-footer"] {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .5rem; /* optional spacing */
}

/* Ensure actions start on a new line below feedback/buttons */
[data-testid="cl-message-footer"] [data-testid="cl-actions"] {
  flex-basis: 100%;
  width: 100%;
  order: 3;                /* after other inline controls */
  margin-top: .25rem;      /* optional spacing */
}

/* Keep the thumbs (feedback) aligned right on the top row */
[data-testid="cl-message-footer"] [data-testid="cl-feedback"] {
  margin-left: auto;
  order: 2;
}

/* ---- Branded header (styles Chainlit's built-in #header in-place) ---- */
#header[data-branded] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  background: #ebebec !important;
  border-bottom: 1.5px solid var(--brand-navy) !important;
  height: auto !important;
  padding: 8px 16px !important;
}

#custom-header-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.dark #header[data-branded] {
  background: #ebebec !important;
}

/* Force dark mode to use the same styles as light mode everywhere */
.dark #message-composer {
  background: hsl(var(--accent)) !important;
}

/* Push the sidebar's fixed panel below the branded header */
[data-side="left"] > .fixed,
[data-side="right"] > .fixed {
  background: #f8f8f8 !important;
  border-right: 1px solid #ebebec !important;
  top: var(--header-h, 0px) !important;
  height: calc(100svh - var(--header-h, 0px)) !important;
  z-index: 41 !important;
}

/* Push the sidebar's spacer div down too so content layout stays correct */
[data-side="left"] > div.relative,
[data-side="right"] > div.relative {
  height: calc(100svh - var(--header-h, 0px)) !important;
}

/* Shrink main (and the sidebar-wrapper) so header + content = viewport */
.group\/sidebar-wrapper {
  padding-top: var(--header-h, 0px) !important;
  min-height: 100svh !important;
}
main.max-h-svh {
  max-height: calc(100svh - var(--header-h, 0px)) !important;
}
main.min-h-svh {
  min-height: calc(100svh - var(--header-h, 0px)) !important;
}

/* Make main's first child shrink so the footer fits within available space */
main > div:first-child {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* ---- Custom footer (injected by brand.js inside <main>) ---- */
#custom-footer {
  flex-shrink: 0;
  width: 100%;
  padding: 6px 16px;
  text-align: center;
  font-size: 0.7rem;
  color: #999;
  background: var(--chalk-white);
  border-top: none;
}

/* Equalize gap above and below the footer warning */
div.p-4:has(#message-composer) {
  padding-bottom: 6px !important;
}

.dark #custom-footer {
  color: #999;
  background: var(--chalk-white);
}

/* Prevent the panel content row from scrolling so the message composer
   stays pinned at the bottom. Only the inner messages area should scroll.
   NOTE: The main fix is applied via JavaScript in brand.js (fixComposerScroll)
   because Tailwind classes resist CSS-only overrides. */