/*
 * Chainlit element sidebar / sheet: long rubrics and scoring reports should
 * scroll instead of clipping. Parent flex layouts often need min-height: 0
 * so the Radix ScrollArea can shrink and scroll (see flexbox min-height quirk).
 *
 * Energy Systems Catapult–inspired accents (approximate hex — verify against
 * ESC brand guidelines / es.catapult.org.uk before production).
 *
 * Body font: prefer Roboto when installed locally; avoid @import from Google
 * Fonts here — some corporate networks block fonts.googleapis.com, which can
 * delay or break loading of the rest of this file in strict environments.
 */

html,
body {
  font-family:
    "Roboto",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif !important;
}

:root {
  --esc-pink: #e84e8a;
  --esc-cyan: #5ce0d2;
  --esc-charcoal: #2d2d2d;
  --esc-beige: #f5f0eb;
  --esc-text: var(--esc-charcoal);
  --esc-text-muted: #666666;
}

/*
 * Main app copy uses Chainlit/shadcn tokens (hsl() var(--foreground), etc.).
 * Map them to brand charcoal (~#2d2d2d). `.dark` from the bundle beats `html`
 * specificity, so dark theme keeps its light-on-dark foreground.
 */
html {
  --foreground: 0 0% 18%;
  --card-foreground: 0 0% 18%;
  --popover-foreground: 0 0% 18%;
  --secondary-foreground: 0 0% 18%;
  --accent-foreground: 0 0% 18%;
}

/*
 * Welcome screen logo: Chainlit uses ~200px width on a small source asset → harsh
 * upscaling. Cap display size until ``public/logo_light.png`` is replaced with a
 * higher-resolution file (e.g. 128×128 or larger).
 */
.welcome-screen img[alt="logo"] {
  max-width: 64px !important;
  width: 64px !important;
  height: auto !important;
  object-fit: contain;
}

/* Help link in header: pink text, stronger on hover */
#readme-button {
  color: var(--esc-pink) !important;
}

#readme-button:hover {
  color: color-mix(in srgb, var(--esc-pink) 85%, var(--esc-charcoal)) !important;
  background-color: color-mix(in srgb, var(--esc-pink) 12%, transparent) !important;
}

/*
 * Help / readme full-screen view: Chainlit shows SheetTitle "Help" then
 * chainlit.md (which opens with # Help). Hide the first row so only the
 * markdown heading remains. This layout wrapper is unique in Chainlit’s bundle.
 */
.mx-auto.flex.flex-col.flex-grow.gap-6:has(> :nth-child(2) h1) > *:first-child {
  display: none !important;
}

/* Help content: pink main title, cyan accent rule, warm backdrop for readability */
.mx-auto.flex.flex-col.flex-grow.gap-6 > :nth-child(2) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--esc-beige) 55%, transparent) 0%,
    transparent 12rem
  );
  border-radius: 0.75rem;
  padding: 0.5rem 1rem 1.5rem;
}

.mx-auto.flex.flex-col.flex-grow.gap-6 .prose h1 {
  color: var(--esc-pink);
  font-weight: 700;
  border-bottom: 2px solid var(--esc-cyan);
  padding-bottom: 0.4em;
  margin-bottom: 0.75em;
}

.mx-auto.flex.flex-col.flex-grow.gap-6 .prose h2 {
  color: var(--esc-charcoal);
  border-left: 3px solid var(--esc-cyan);
  padding-left: 0.65rem;
  margin-top: 1.25em;
}

.mx-auto.flex.flex-col.flex-grow.gap-6 .prose {
  color: var(--esc-charcoal);
}

.mx-auto.flex.flex-col.flex-grow.gap-6 .prose :where(strong) {
  color: var(--esc-charcoal);
}

/* Sheet / dialog shell: cap height and column flex so inner area can scroll */
[role="dialog"],
[data-radix-dialog-content],
[data-slot="sheet-content"] {
  max-height: 95vh !important;
  max-height: 95dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/*
 * Document / element panel (side sheet): half the viewport width.
 * Chainlit bundles shadcn Sheet: right drawer uses classes like
 * inset-y-0 right-0 h-full w-3/4 + sm:max-w-sm (not always data-slot).
 */
[data-slot="sheet-content"] {
  width: 50vw !important;
  min-width: 50vw !important;
  max-width: 50vw !important;
}

/* When width is applied on the dialog root instead of sheet-content */
[role="dialog"]:has([data-slot="sheet-content"]) {
  width: 50vw !important;
  min-width: 50vw !important;
  max-width: 50vw !important;
}

/* Chainlit 2.x: SheetContent dialog (fixed, full-height, anchored right) */
body [role="dialog"].fixed[class*="inset-y-0"][class*="right-0"] {
  width: 50vw !important;
  min-width: 50vw !important;
  max-width: 50vw !important;
}

[data-radix-scroll-area-viewport] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Fallback when sheet wrapper is not matched */
[role="dialog"] [data-radix-scroll-area-viewport] {
  max-height: calc(95dvh - 4rem) !important;
}

/* Markdown body inside element views */
.prose {
  max-width: none !important;
  overflow-wrap: anywhere;
}