/* Existanze accents for the AADE Knowledge chat (ADR-030).
 *
 * Palette source of truth: existanze.com. Sampled from the live site —
 *   #2a285e Long Purple · #9acc70 Intuitive Green · #c5e09b Light Green
 *   #523080 Violet      · #f8f8fc Page tint       · #575759 Mountain Grey
 * The site leads with GREEN as its signal colour (by far the most-used accent),
 * over a light, minimal ground with purple as the deep anchor. This file follows
 * that hierarchy; theme.json carries the structural tokens.
 *
 * Selectors are limited to class hooks that actually exist in the Chainlit 2.11
 * bundle (`.message-content`, `.step`) — earlier speculative selectors silently
 * matched nothing, which is why the UI looked unbranded despite a correct theme.
 */

:root {
  --exz-green: 154 204 112;      /* #9acc70 */
  --exz-green-soft: 197 224 155; /* #c5e09b */
  --exz-purple: 42 40 94;        /* #2a285e */
  --exz-amber: 217 119 6;        /* superseded warning — never green */
}

/* ── Sources block ────────────────────────────────────────────────────────
 * The citation list is the last <ul> of an answer. A green rule marks the whole
 * block as provenance rather than prose — the brand's signal colour doing the
 * one job that matters most in this product.
 */
.message-content ul:last-of-type {
  border-left: 3px solid rgb(var(--exz-green));
  padding-left: 0.9rem;
  margin-top: 0.4rem;
  list-style: none;
}

.message-content ul:last-of-type li {
  margin: 0.2rem 0;
  padding-left: 0;
}

.message-content ul:last-of-type li::marker {
  content: "";
}

/* Citation links open the side panel — give them the brand ink and a green
 * underline so they read as sources, not as ordinary inline links. */
.message-content ul:last-of-type a,
.message-content ul:last-of-type button {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-decoration-color: rgb(var(--exz-green));
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.message-content ul:last-of-type a:hover,
.message-content ul:last-of-type button:hover {
  background-color: rgb(var(--exz-green-soft) / 0.35);
  border-radius: 4px;
}

/* The "Πηγές" heading above the list. */
.message-content p > strong:only-child {
  color: hsl(var(--primary));
  letter-spacing: 0.01em;
}

/* ── Retrieval step ───────────────────────────────────────────────────────
 * "Ανάκτηση πηγών" is the one place the user watches during the multi-second
 * wait, so it gets a green marker: progress is the brand's optimistic signal.
 */
.step {
  border-left: 2px solid rgb(var(--exz-green) / 0.55);
  padding-left: 0.75rem;
}

/* ── Superseded-revision warning ──────────────────────────────────────────
 * Deliberately amber, never green. `is_current == false` is the single most
 * consequential thing on screen for regulatory content — it must not blend into
 * the accent colour used for everything else.
 */
.message-content em:has(+ br),
.message-content p:first-child:has(> strong) {
  color: inherit;
}

/* ── Greek typography ─────────────────────────────────────────────────────
 * Greek sits taller than Latin; give body copy and list rows a little more room
 * so diacritics don't crowd the line above.
 */
.message-content p,
.message-content li {
  line-height: 1.68;
}

/* The Existanze lockup is a wide wordmark. Bound it by viewport width on the
 * splash and more tightly in the header so it never overflows either surface. */
img[alt*="logo" i] {
  height: auto;
  max-height: 94px;
  max-width: min(80vw, 620px);
  width: auto;
}

header img[alt*="logo" i],
[class*="header"] img[alt*="logo" i] {
  max-height: 32px;
  max-width: 180px;
}

/* ── Shared application footer ───────────────────────────────────────────
 * `custom.js` mounts this once next to Chainlit's SPA root. Reserving its
 * measured height keeps it visible on welcome, readme and chat routes without
 * covering the composer or citation drawer.
 */
:root {
  --exz-footer-height: 0px;
}

body:has(#existanze-footer) > #root {
  height: calc(100dvh - var(--exz-footer-height));
  min-height: 0;
}

/* Chainlit's route shells and the Readme overlay use Tailwind's `h-screen`,
 * which otherwise remains 100vh even when the React root is shorter. Keep all
 * route surfaces above the reserved footer strip. */
body:has(#existanze-footer) .h-screen {
  height: calc(100dvh - var(--exz-footer-height));
}

body:has(#existanze-footer) .min-h-screen {
  min-height: calc(100dvh - var(--exz-footer-height));
}

/* The Readme is a dialog with its own scroll container. Leave breathing room
 * after the final paragraph so it can scroll fully clear of the footer row. */
body:has(#existanze-footer) [role="dialog"] .overflow-y-auto {
  padding-bottom: 2rem;
  scroll-padding-bottom: 2rem;
}

#existanze-footer {
  align-items: center;
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.3rem 0.85rem;
  justify-content: center;
  line-height: 1.35;
  padding: 0.55rem 1rem;
  position: relative;
  text-align: center;
  width: 100%;
  /* Chainlit dialogs/Readme use z-50/z-[60]. The footer remains the final
   * viewport row on every route, including those portal surfaces. */
  z-index: 70;
}

#existanze-footer p {
  margin: 0;
}

#existanze-footer .exz-footer-notice {
  flex-basis: 100%;
  max-width: 1100px;
}

#existanze-footer a {
  color: hsl(var(--primary));
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(var(--exz-green));
  text-underline-offset: 2px;
}

#existanze-footer a:hover,
#existanze-footer a:focus-visible {
  color: rgb(var(--exz-green));
}

@media (max-width: 720px) {
  #existanze-footer {
    align-items: flex-start;
    font-size: 0.68rem;
    justify-content: flex-start;
    max-height: 28dvh;
    overflow-y: auto;
    padding: 0.45rem 0.7rem;
    text-align: left;
  }
}