/*
 * Custom UI tweaks for the Triton Chainlit app.
 *
 * Readme button icon — Chainlit's built-in Readme button (id="readme-button") is text-only and
 * exposes no icon setting, so we inject one via ::before for visual parity with the "Mentions
 * légales" header link (both use the brand green icon at ~24px). Anchored on the "readme-button"
 * id: if a future Chainlit release renames it, the icon silently disappears without breaking the app.
 */
#readme-button::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
    background: url("/public/readme.svg") center / contain no-repeat;
    vertical-align: middle;
}
/* Login page: remove the right-hand cover-image panel and center the sign-in form.
 *
 * Chainlit's default login layout is a two-column grid on large screens: the form on the
 * left and an image panel on the right. When `login_page_image` is unset, that panel falls
 * back to the favicon stretched as a cover image. We hide the panel (`div.bg-muted`) and
 * collapse the grid to a single full-width column. The selector is scoped to the login page
 * only via `.grid.min-h-svh` (a full-viewport grid used nowhere else in the app), so the
 * chat UI is untouched. */
.grid.min-h-svh > div.bg-muted {
  display: none !important;
}

.grid.min-h-svh {
  grid-template-columns: 1fr !important;
}

/* Login page: hide the logo above the sign-in form. Chainlit renders it as <img class="logo">
 * and reuses that class in the chat header, so the rule is scoped to the login grid. */
.grid.min-h-svh img.logo {
  display: none;
}

/* Login page: the "S'inscrire à la beta" link injected by public/custom.js copies the
 * sign-in button's classes, so it lands styled as a second primary button. Downgrade it to
 * a grey one: signing in is the main action, asking for an account is the secondary one.
 * The palette holds no neutral grey (it is beige and green), so this uses --muted, its own
 * neutral, which stays right in both the light and dark themes. The id beats Tailwind's
 * utility classes on specificity, so no !important is needed. */
#signup-button {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  text-decoration: none;
}

#signup-button:hover {
  color: hsl(var(--foreground));
}

/* Login page: both actions in bold, overriding the `font-medium` (500) that Chainlit's
 * button component sets. The sign-in button is Chainlit's own and exposes no styling hook,
 * so it is reached through the login-page grid; the id covers the injected sign-up link. */
.grid.min-h-svh form button[type="submit"],
#signup-button {
  font-weight: 700;
}

/* Waiting indicator: three bouncing dots instead of the default single pulsing one.
 *
 * Chainlit renders <BlinkingCursor /> as <span class="loading-cursor"> and drives it through
 * four custom properties (--loading-cursor-size / -color / -mask / -animation), so the size,
 * colour and animation below are its own documented hooks: no !important, and nothing depends
 * on a class name that a Chainlit upgrade could rename.
 *
 * That span is already a round filled disc, so it serves as the middle dot as-is — shrunk from
 * 0.875rem to 0.375rem — and the two side dots are ::before / ::after. Those only work because
 * it is a <span>: pseudo-elements render nothing on the <svg> loaders used elsewhere in the UI.
 *
 * The three animation delays (0s / 0.2s / 0.4s, left to right) are what turn three dots blinking
 * in unison into a wave travelling across them. The middle dot takes its delay from inside the
 * --loading-cursor-animation shorthand, since that property is the only way to reach it.
 *
 * Geometry: the side dots sit at ±0.75rem, so they overflow the 0.375rem-wide span by 0.75rem on
 * each side; the horizontal margin gives that overflow its room, and keeps the neighbouring text
 * from overlapping them. */
:root {
  --loading-cursor-size: 0.375rem;
  --loading-cursor-color: hsl(var(--primary));
  --loading-cursor-animation: loading-dot-bounce 1.4s ease-in-out 0.2s infinite;
}

.loading-cursor {
  position: relative;
  margin: 0 0.75rem;
  vertical-align: middle;
}

.loading-cursor::before,
.loading-cursor::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary));
  animation: loading-dot-bounce 1.4s ease-in-out infinite;
}

.loading-cursor::before {
  left: -0.75rem;
  animation-delay: 0s;
}

.loading-cursor::after {
  left: 0.75rem;
  animation-delay: 0.4s;
}

@keyframes loading-dot-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-0.3rem);
    opacity: 1;
  }
}