/* ===================================================================
   Neon Public — Chainlit Custom Branding
   Colors and fonts are handled by public/theme.json.
   This file covers things theme.json cannot: gradient buttons,
   login panel layout, message bubbles, and scrollbar styling.
   =================================================================== */

/* === BRAND GRADIENT (cannot be expressed as HSL token) === */
:root {
  --brand-gradient: linear-gradient(135deg, #f05a7a 0%, #e13662 100%);
}

/* === LOGIN PAGE — center the logo on a white panel === */

/* Right panel: override cover behaviour so the logo is centered, not stretched */
.relative.bg-muted.overflow-hidden {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: hsl(var(--background)) !important;
}

.relative.bg-muted.overflow-hidden img {
  position: static !important;
  inset: unset !important;
  width: auto !important;
  height: auto !important;
  max-width: 60% !important;
  max-height: 60% !important;
  object-fit: contain !important;
  /* Cancel the default dark-mode brightness-[0.2] grayscale filter Chainlit applies */
  filter: none !important;
}

/* Hide the redundant app logo in the login left panel.
   The right panel already shows our brand. In chat, the logo lives in <header>
   so this selector is login-page-only. */
div.flex.justify-center.gap-2 img.logo {
  display: none !important;
}

/* Login form heading */
form h1,
form h2 {
  font-weight: 700 !important;
}

/* Login submit button — brand gradient */
button[type="submit"] {
  background: var(--brand-gradient) !important;
  border: none !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: #ffffff !important;
}

button[type="submit"]:hover {
  opacity: 0.9 !important;
}

/* === SEND BUTTON — brand gradient === */
button[data-testid="send-button"] {
  background: var(--brand-gradient) !important;
  border: none !important;
  color: #ffffff !important;
}

button[data-testid="send-button"]:hover {
  opacity: 0.9 !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.6);
}