:root {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5c6270;
  --accent: #2f6fed;
  --surface: #fafafa;
  --bubble-user: #d6eaff;
  --bubble-assistant: #eeeeee;
  --on-accent: #ffffff;
  /* one step past --fg, for the few places that should carry more weight than body text */
  --fg-strong: #222222;
  --projects: #535353;
  --project-name: #5e8167;
  --demo: #2f6fed;
  --border: #dddddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101216;
    --fg: #f2f4f8;
    --muted: #9aa1b0;
    --accent: #7aa2f7;
    --surface: #171a20;
    --bubble-user: #1d3a5c;
    --bubble-assistant: #23272f;
    /* dark text on the lighter dark-mode accent keeps the Send button readable */
    --on-accent: #101216;
    /* Pure white read as harsh against the muted blurb beside it, so the project name
       sits at the same value as that text and leans on its weight to stand out. */
    --fg-strong: #dddddd;
    --projects: #cccccc;
    --project-name: #5e8167;
    --demo: #7aa2f7;
    --border: #2a2f3a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  line-height: 1.6;
}

.page {
  max-width: 36rem;
  text-align: center;
}

.avatar {
  width: 96px;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
}

.page h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.links a {
  color: var(--accent);
  text-decoration: none;
}

.links a:hover,
.links a:focus-visible {
  text-decoration: underline;
}

.projects {
  margin-top: 3rem;
  text-align: left;
}

.projects h2 {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--projects);
}

.project h3 {
  font-size: 1.05rem;
  color: var(--project-name);
  display: inline;
}

.project-seperator {
  color: var(--fg-strong);
  margin-left: .75rem;
  display: inline;
}

.project-blurb {
  color: var(--muted);
  display: inline;
  margin-left: .75rem;
}

/* vertical margins do not apply to the inline elements above, so the gap down to
   the toggle lives here */
.chat-disclosure {
  display: block;
  margin-top: 0.85rem;
}

/* The chat stays collapsed until asked for, so the page still reads as a short
   profile rather than opening straight into an app. <details> gives us the
   toggle, the keyboard handling and the open/closed state for free. */
.chat-disclosure summary {
  /* flex + fit-content + auto margins centers the pill itself, rather than setting
     text-align on the parent, which would also centre everything inside the panel */
  display: flex;
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  /* suppress the default triangle in both the WebKit and standard forms so the
     chevron below is the only marker */
  list-style: none;
}

/* temporary locator: the "Try it" label only, leaving the chevron on --accent */
.chat-disclosure summary span {
  color: var(--demo);
}

/* only the label matching the current state is shown */
.chat-disclosure:not([open]) .chat-label-open,
.chat-disclosure[open] .chat-label-closed {
  display: none;
}

.chat-disclosure summary::-webkit-details-marker {
  display: none;
}

/* the open state holds the same emphasis hover gives, so the control stays lit for as
   long as the panel it opened is on screen */
.chat-disclosure summary:hover,
.chat-disclosure[open] summary {
  border-color: var(--accent);
}

.chat-disclosure summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-disclosure summary {
  transition: border-color 150ms ease;
}

.chat-chevron {
  transition: transform 150ms ease;
}

.chat-disclosure[open] .chat-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .chat-disclosure summary,
  .chat-chevron {
    transition: none;
  }
}

/* The chat markup is built by rag-server's widget.js. Nothing here restyles its
   internals -- the widget reads these --rag-* properties itself, so pointing them
   at the page's own tokens is all it takes to make it match the site in both
   light and dark. */
.chat {
  height: 30rem;
  margin-top: 1rem;
  /* accent to match the toggle's open state, so the button and the panel it controls
     read as one unit; the radius is larger than the 6px on the widget's inner panels
     so the nested corners stay concentric rather than clashing */
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 0.75rem;

  --rag-surface: var(--surface);
  --rag-border: var(--border);
  --rag-text: var(--fg);
  --rag-muted: var(--muted);
  --rag-accent: var(--accent);
  --rag-user: var(--bubble-user);
  --rag-assistant: var(--bubble-assistant);
  --rag-on-accent: var(--on-accent);
}

/* The widget's title heads its own standalone page, where nothing sits above it.
   Here the h3 and blurb already say what this is, so it would only repeat them. */
.chat .rag-title {
  display: none;
}

.chat-loading {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* widget.js sets data-rag-mounted on its host as soon as it has built the UI, so the
   message clears itself with no extra scripting on this side */
.chat[data-rag-mounted="true"] .chat-loading {
  display: none;
}