/**
 * ABAVA Asistents — Chainlit custom styles
 *
 * Design direction: "Baltic Institutional"
 *   - Light-first (navy on cream) is the authoritative look. Dark is mirrored.
 *   - Palette extracted from abava-logo.png: deep navy #0E2847, emerald #1FA789.
 *   - Typography: Fraunces (display) + IBM Plex Sans (body) + IBM Plex Mono (code).
 *   - Architectural restraint over decorative animation. One motif, used sparingly:
 *     a thin navy hairline rule with a 12px emerald tick.
 *
 * Preserves the auto-expand overrides below the "AUTO-EXPAND" banner — those are
 * functional, not cosmetic. Do not repaint them away.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');


/* =============================================================================
   Design tokens — light (default) and dark (mirror)
   ============================================================================= */

/* NOTE — specificity:
 * Chainlit bundles its own stylesheet after /public/styles.css and sets
 * :root { --primary: ...; } with the same specificity. To win the tie, light
 * mode uses :root:not(.dark) (adds one class-level bump) and dark mode uses
 * html.dark:root. Everything inside these blocks inherits that specificity. */

:root:not(.dark) {
  /* ---------------------------------------------------------------------------
   * Raw ABAVA palette (extracted from abava-logo.png).
   * ------------------------------------------------------------------------ */
  --abava-navy:        #0E2847;
  --abava-navy-deep:   #081A30;
  --abava-teal:        #1FA789;
  --abava-teal-soft:   #2BC6A4;
  --abava-cream:       #FAF7F1;
  --abava-paper:       #F2ECDF;
  --abava-slate:       #2A3E56;
  --abava-rule:        #D9CDB4;

  /* ---------------------------------------------------------------------------
   * Chainlit 2.x ships a shadcn/Radix/Tailwind theme keyed off HSL triplets
   * (no hsl() wrapper — Tailwind utilities assemble `hsl(var(--primary))`).
   * Overriding these propagates the brand to every button, card, input, ring
   * and border that Chainlit renders. Values match the raw hex above.
   * ------------------------------------------------------------------------ */
  --background:            40 53% 97%;    /* #FAF7F1 cream */
  --foreground:            214 68% 17%;   /* #0E2847 navy */

  --card:                  0 0% 100%;     /* #FFFFFF */
  --card-foreground:       214 68% 17%;

  --popover:               0 0% 100%;
  --popover-foreground:    214 68% 17%;

  --primary:               214 68% 17%;   /* navy — buttons, active states */
  --primary-foreground:    40 53% 97%;    /* cream on navy */

  --secondary:             42 40% 91%;    /* paper */
  --secondary-foreground:  214 68% 17%;

  --muted:                 42 40% 91%;    /* paper */
  --muted-foreground:      211 35% 35%;   /* deeper slate for readable hints */

  --accent:                167 69% 39%;   /* #1FA789 teal */
  --accent-foreground:     40 53% 97%;

  --destructive:           0 72% 45%;
  --destructive-foreground: 40 53% 97%;

  --border:                40 39% 78%;    /* #D9CDB4 warm rule */
  --input:                 40 39% 78%;
  --ring:                  167 69% 39%;   /* teal focus ring */

  --radius: 0.625rem;

  /* Semantic aliases for the handwritten rules below. */
  --abava-surface:         var(--abava-cream);
  --abava-surface-raised:  #FFFFFF;
  --abava-surface-muted:   var(--abava-paper);
  --abava-text:            var(--abava-navy);
  --abava-text-muted:      var(--abava-slate);
  --abava-text-subtle:     #6B7A8C;
  --abava-border:          var(--abava-rule);
  --abava-border-strong:   #BFB091;
  --abava-accent:          var(--abava-teal);
  --abava-accent-hover:    var(--abava-teal-soft);
  --abava-user-bubble-bg:  var(--abava-navy);
  --abava-user-bubble-fg:  var(--abava-cream);
  --abava-bot-bubble-bg:   var(--abava-surface-raised);
  --abava-bot-bubble-fg:   var(--abava-navy);
  --abava-shadow-sm:       0 1px 2px rgba(14, 40, 71, 0.06);
  --abava-shadow-md:       0 2px 10px rgba(14, 40, 71, 0.08);

  --abava-radius-xs: 4px;
  --abava-radius-sm: 6px;
  --abava-radius-md: 10px;
  --abava-radius-lg: 14px;

  --abava-transition: 150ms ease;

  --abava-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --abava-font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --abava-font-mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
}

/* Dark mirror — Chainlit toggles the `dark` class on <html>. Uses html.dark:root
 * so it beats Chainlit's own `.dark { --primary: ... }` rule on specificity. */
html.dark:root,
[data-theme="dark"]:root {
  --background:            213 71% 11%;   /* navy deep */
  --foreground:            40 40% 94%;

  --card:                  213 62% 16%;
  --card-foreground:       40 40% 94%;

  --popover:               213 62% 16%;
  --popover-foreground:    40 40% 94%;

  --primary:               167 69% 44%;   /* teal on dark */
  --primary-foreground:    213 71% 11%;

  --secondary:             213 50% 22%;
  --secondary-foreground:  40 40% 94%;

  --muted:                 213 50% 22%;
  --muted-foreground:      213 25% 70%;

  --accent:                167 69% 50%;
  --accent-foreground:     213 71% 11%;

  --destructive:           0 72% 55%;
  --destructive-foreground: 213 71% 11%;

  --border:                213 45% 28%;
  --input:                 213 45% 28%;
  --ring:                  167 69% 50%;

  --abava-surface:         var(--abava-navy-deep);
  --abava-surface-raised:  #0F2542;
  --abava-surface-muted:   #122E51;
  --abava-text:            #EDE6D2;
  --abava-text-muted:      #9DB0C6;
  --abava-text-subtle:     #6C819A;
  --abava-border:          #1E3A5F;
  --abava-border-strong:   #2E527F;
  --abava-accent:          var(--abava-teal-soft);
  --abava-accent-hover:    #3EE0B8;
  --abava-user-bubble-bg:  var(--abava-teal);
  --abava-user-bubble-fg:  var(--abava-navy-deep);
  --abava-bot-bubble-bg:   #0F2542;
  --abava-bot-bubble-fg:   #EDE6D2;
  --abava-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.35);
  --abava-shadow-md:       0 4px 14px rgba(0, 0, 0, 0.45);
}


/* =============================================================================
   Typography — global
   ============================================================================= */

html, body {
  font-family: var(--abava-font-body);
  color: var(--abava-text);
  background-color: var(--abava-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No global font-feature-settings — some stylistic sets shift the macron on
   * Latvian 'ē'/'ā' glyphs in IBM Plex Sans, making diacritics look off-center.
   * Opt in locally (inside .prose) where numerals/punctuation benefit. */
}

body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(31, 167, 137, 0.05), transparent 60%),
    radial-gradient(900px 400px at -5% 110%, rgba(14, 40, 71, 0.04), transparent 55%),
    var(--abava-surface);
}

html.dark body,
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(31, 167, 137, 0.08), transparent 60%),
    radial-gradient(900px 400px at -5% 110%, rgba(43, 198, 164, 0.05), transparent 55%),
    var(--abava-surface);
}

h1, h2, h3, h4 {
  font-family: var(--abava-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--abava-text);
  /* Room for Latvian macrons (ē, ā, ū, ī) + cedilla descenders (ķ, ļ, ņ, ģ).
   * Browser default (~1.1) makes them collide with the line above — visible
   * on the login heading "Pieslēdzieties, lai piekļūtu lietotnei". */
  line-height: 1.3;
  /* Pin Fraunces' optical-size axis to a display value. Default `auto` picks
   * opsz≈font-size, which for 28-px headings yields text-grade letterforms
   * with chunky, too-tall macrons (ē, ū look "off" in Latvian). opsz 48 gives
   * display-grade glyphs with lighter, properly-positioned diacritics. */
  font-variation-settings: "opsz" 48;
}

h1 { font-weight: 600; letter-spacing: -0.02em; }


/* =============================================================================
   Message bubbles — Chainlit 2.9.6 marks each `.step` wrapper with
   data-step-type="user_message" or "assistant_message". Inside, .ai-message
   wraps the assistant row and .message-content wraps both roles' payload.
   For user messages, Chainlit wraps the text in its own `.bg-accent.rounded-3xl`
   pill (right-aligned, sized to content). We repaint THAT wrapper directly —
   adding a second background layer on `.message-content` produced a nested
   "navy-inside-white-card" look.
   ============================================================================= */

/* Assistant bubble. */
[data-step-type="assistant_message"] .message-content,
.ai-message .message-content {
  background: var(--abava-bot-bubble-bg);
  color: var(--abava-bot-bubble-fg);
  border: 1px solid var(--abava-border);
  border-left: 2px solid var(--abava-accent);
  border-radius: var(--abava-radius-xs) var(--abava-radius-lg) var(--abava-radius-lg) var(--abava-radius-lg);
  padding: 14px 18px;
  box-shadow: var(--abava-shadow-sm);
  line-height: 1.6;
}

/* User bubble — repaint Chainlit's own .bg-accent wrapper. It already handles
 * sizing (max-w-[70%] flex-grow-0 ml-auto) and right-alignment; we just need
 * to recolor it navy and round it correctly. */
[data-step-type="user_message"] .bg-accent.rounded-3xl {
  background: var(--abava-user-bubble-bg) !important;
  color: var(--abava-user-bubble-fg) !important;
  border: none !important;
  border-radius: var(--abava-radius-lg) var(--abava-radius-lg) var(--abava-radius-xs) var(--abava-radius-lg) !important;
  box-shadow: var(--abava-shadow-sm);
  padding: 12px 16px !important;
  line-height: 1.55;
  font-weight: 400;
}

[data-step-type="user_message"] .bg-accent.rounded-3xl,
[data-step-type="user_message"] .bg-accent.rounded-3xl * {
  color: var(--abava-user-bubble-fg) !important;
}

/* User .message-content — the inner markdown wrapper. Let it be fully
 * transparent so the outer Chainlit wrapper alone carries the bubble look. */
[data-step-type="user_message"] .message-content {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* Fade-in on new messages. */
[data-step-type="user_message"],
[data-step-type="assistant_message"] {
  animation: abavaMessageIn 220ms ease-out;
}

@keyframes abavaMessageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulsing-dots loader for the assistant bubble between send and first token.
 * Chainlit renders the .message-content wrapper immediately but leaves it
 * textually empty while the router/retriever work; without a loader the user
 * stares at a blank navy-accented rectangle. The ::before is hidden the moment
 * the streamed Markdown produces any block-level element (p/heading/list/etc).
 * This re-uses the same background-clip:text shimmer Chainlit itself uses on
 * the step trigger "loading-shimmer" class, so the visual language matches. */
.ai-message .message-content::before {
  content: "● ● ●";
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  padding: 2px 0;
  background: linear-gradient(
    90deg,
    var(--abava-text-subtle) 0%,
    var(--abava-text-subtle) 35%,
    var(--abava-accent) 50%,
    var(--abava-text-subtle) 65%,
    var(--abava-text-subtle) 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: abavaThinkingPulse 1.6s ease-in-out infinite;
}

/* Hide the loader as soon as the streamed response renders any real content.
 * Covers the usual Markdown primitives react-markdown emits for even a single
 * partial token ("He" → `<p>He</p>`), so the loader yields as soon as tokens
 * begin arriving. */
.ai-message .message-content:has(.prose p)::before,
.ai-message .message-content:has(.prose h1)::before,
.ai-message .message-content:has(.prose h2)::before,
.ai-message .message-content:has(.prose h3)::before,
.ai-message .message-content:has(.prose ul)::before,
.ai-message .message-content:has(.prose ol)::before,
.ai-message .message-content:has(.prose li)::before,
.ai-message .message-content:has(.prose pre)::before,
.ai-message .message-content:has(.prose blockquote)::before,
.ai-message .message-content:has(.prose table)::before {
  display: none;
}

@keyframes abavaThinkingPulse {
  0%   { background-position: 220% 0; }
  100% { background-position: -20% 0; }
}


/* =============================================================================
   Thinking steps (Chain of Thought)
   ============================================================================= */

[class*="step"][class*="container"],
[class*="cot-step"],
[data-step] {
  background: var(--abava-surface-muted);
  border: 1px solid var(--abava-border);
  border-radius: var(--abava-radius-md);
  margin: 8px 0;
  padding: 12px 16px;
  transition: border-color var(--abava-transition), background var(--abava-transition);
}

[class*="step"][class*="container"]:hover,
[class*="cot-step"]:hover,
[data-step]:hover {
  border-color: var(--abava-accent);
}

/* Step trigger labels ("Analizē pieprasījumu...", "Meklē dokumentus...").
 * Force the body font and disable font-feature-settings — Fraunces' ē/ā
 * macron sits off-center in these small accordion triggers, and some Plex
 * stylistic sets shift the diacritic the same way. IBM Plex Sans with
 * default features gives us properly centered macrons. */
[id^="step-"],
[data-radix-accordion-trigger],
.MuiAccordionSummary-root,
button[aria-expanded] {
  font-family: var(--abava-font-body) !important;
  font-feature-settings: normal;
  text-rendering: optimizeLegibility;
}


/* =============================================================================
   AUTO-EXPAND — functional overrides (do not repaint away)
   ============================================================================= */

.MuiCollapse-root {
  visibility: visible !important;
  height: auto !important;
  min-height: auto !important;
}

.MuiCollapse-wrapper,
.MuiCollapse-wrapperInner {
  visibility: visible !important;
}

.MuiAccordion-root .MuiCollapse-root {
  visibility: visible !important;
  height: auto !important;
}

[class*="step"] [class*="Collapse"],
[class*="step"] [class*="collapse"],
[class*="Step"] [class*="Collapse"],
[class*="Step"] [class*="collapse"] {
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}

.cl-step-output,
[class*="stepOutput"],
[class*="step-output"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  animation: abavaThinkingIn 260ms ease-out;
}

.MuiAccordionSummary-expandIconWrapper {
  transform: rotate(180deg) !important;
  color: var(--abava-text-muted) !important;
}

@keyframes abavaThinkingIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   Chat input (the textarea wrapper uses `bg-accent dark:bg-card`)
   ============================================================================= */

/* The HSL `--accent` / `--card` overrides above already land the right surface
 * colors. These rules refine typography, the focus ring, and the submit button
 * radius so it reads as a deliberate navy/teal pill, not a generic shadcn one. */

textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
  font-family: var(--abava-font-body) !important;
  font-size: 0.95rem !important;
  color: var(--abava-text) !important;
}

textarea::placeholder,
input::placeholder {
  color: var(--abava-text-subtle) !important;
  opacity: 1;
}

/* Chainlit wraps the composer in a rounded .bg-accent block (id
 * `#message-composer`). Scope tightly by id — without this, the rule also
 * repainted every user message bubble (which shares `.bg-accent.rounded-3xl`)
 * white, producing a nested navy-inside-white card. */
#message-composer {
  border-radius: var(--abava-radius-lg) !important;
  border: 1px solid var(--abava-border);
  background: var(--abava-surface-raised) !important;
  transition: border-color var(--abava-transition), box-shadow var(--abava-transition);
}

#message-composer:focus-within {
  border-color: var(--abava-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--abava-accent) 18%, transparent);
}

html.dark #message-composer {
  background: var(--abava-surface-raised) !important;
}


/* =============================================================================
   Scrollbar
   ============================================================================= */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--abava-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--abava-border-strong); }


/* =============================================================================
   Markdown inside messages (Chainlit renders markdown in a .prose wrapper)
   ============================================================================= */

.prose h1,
.prose h2 {
  font-family: var(--abava-font-display);
  font-weight: 500;
  color: var(--abava-text);
  margin: 18px 0 10px;
  letter-spacing: -0.015em;
}

.prose h1 { font-size: 1.5rem; font-weight: 600; }
.prose h2 { font-size: 1.22rem; }
.prose h3 {
  font-family: var(--abava-font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
  margin-top: 14px;
  color: var(--abava-text);
}

.prose p { line-height: 1.65; color: var(--abava-text); }

.prose ul,
.prose ol {
  padding-left: 22px;
  margin: 8px 0;
}

.prose li {
  margin: 4px 0;
  color: var(--abava-text);
  line-height: 1.6;
}

.prose li::marker {
  color: var(--abava-accent);
}

.prose em {
  color: var(--abava-text-muted);
  font-style: italic;
}

.prose strong {
  color: var(--abava-text);
  font-weight: 600;
}

.prose a {
  color: var(--abava-navy);
  text-decoration: underline;
  text-decoration-color: var(--abava-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

html.dark .prose a {
  color: var(--abava-teal-soft);
}

.prose code {
  background: var(--abava-surface-muted);
  color: var(--abava-text);
  padding: 2px 6px;
  border-radius: var(--abava-radius-xs);
  font-family: var(--abava-font-mono);
  font-size: 0.88em;
  border: 1px solid var(--abava-border);
}

.prose pre {
  background: var(--abava-surface-muted);
  border: 1px solid var(--abava-border);
  border-left: 3px solid var(--abava-accent);
  border-radius: var(--abava-radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
}

.prose pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* Horizontal rule — the motif: hairline with a teal tick on the left. */
.prose hr {
  position: relative;
  border: none;
  border-top: 1px solid var(--abava-border);
  margin: 18px 0;
  overflow: visible;
}

.prose hr::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--abava-accent);
}


/* =============================================================================
   Heritage chrome
   =============================================================================
 * The "EST. 1993 · RĪGA" stamp used to be appended via ::after on Chainlit's
 * watermark element, but that element renders its children inline-flex, so the
 * stamp landed glued to the end of "Asistents var kļūdīties..." in a
 * mismatched font. If the heritage line comes back, render it server-side as
 * part of the welcome/markdown instead of faking it with a pseudo-element. */


/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .ai-message .message-content,
  .user-message .message-content,
  [class*="user-message"] .message-content {
    max-width: 95%;
  }

  [class*="step"][class*="container"],
  [class*="cot-step"] {
    padding: 10px 12px;
  }
}


/* =============================================================================
   Login hero — ambient motion
   Scoped to the right-panel hero via `img[src*="login_hero"]` and its parent
   (discovered at runtime via :has()). No Chainlit class-name dependencies.
   ============================================================================= */

/* Register --x / --y as angle-percentage properties so keyframes can interpolate
 * them (plain CSS vars animate as discrete 0%/100% jumps). */
@property --abava-aurora-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}
@property --abava-aurora-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

/* Layer 1 — the image itself: subtle breathing parallax */
img[src*="login_hero"] {
  /* Chainlit already sets object-fit; we only add the motion. */
  transform-origin: 55% 45%;
  will-change: transform;
}

/* Layer 2 + 3 — pseudo-elements on the parent container that wraps the img.
 * :has() is widely supported across modern Chromium/Safari/Firefox (2023+). */
div:has(> img[src*="login_hero"]) {
  position: relative;
  isolation: isolate; /* contain blend modes so they don't leak to ancestors */
}

/* Layer 3 — static paper grain (::before, sits below the aurora) */
div:has(> img[src*="login_hero"])::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055  0 0 0 0 0.157  0 0 0 0 0.278  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Layer 2 — slow teal aurora bloom (::after, sits above the grain) */
div:has(> img[src*="login_hero"])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  --abava-aurora-x: 30%;
  --abava-aurora-y: 20%;
  background: radial-gradient(
    ellipse 60% 40% at var(--abava-aurora-x) var(--abava-aurora-y),
    color-mix(in srgb, var(--abava-accent) 40%, transparent),
    transparent 70%
  );
}

@media (prefers-reduced-motion: no-preference) {
  img[src*="login_hero"] {
    animation: abavaBreathe 40s ease-in-out infinite;
  }

  div:has(> img[src*="login_hero"])::after {
    animation: abavaAurora 22s ease-in-out infinite;
  }

  @keyframes abavaBreathe {
    0%   { transform: scale(1.00) translate(0, 0); }
    50%  { transform: scale(1.03) translate(-0.6%, -0.4%); }
    100% { transform: scale(1.00) translate(0, 0); }
  }

  @keyframes abavaAurora {
    0%   { --abava-aurora-x: 30%; --abava-aurora-y: 20%; }
    50%  { --abava-aurora-x: 70%; --abava-aurora-y: 80%; }
    100% { --abava-aurora-x: 30%; --abava-aurora-y: 20%; }
  }
}