/* Colors, font and radius live in theme.css (edit that file for look & feel). */

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

html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  font: 16px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

button, textarea, input { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.icon { width: 20px; height: 20px; flex: none; }
.icon--lg { width: 28px; height: 28px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--muted);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--header-hover); color: var(--text); }
a.icon-btn { text-decoration: none; }

/* "Enlarge" and "open in a new tab" only make sense inside the embedded widget;
   on phones the widget already takes the whole screen, so it cannot grow. */
body:not([data-surface="embed"]) .chat__embed-only { display: none; }
body[data-phone="true"] #enlarge-chat { display: none; }

/* --------------------------------------------------------------- launcher */
/* Closed: the mascot on its own. Open: a round button with an X. */
.launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: grid; place-items: center; width: 104px; height: 96px; padding: 0; border: 0;
  background: transparent; color: var(--accent-contrast);
  transition: transform .15s;
}
.launcher:hover { transform: scale(1.06); }
/* Closed: the mascot floats gently and, every few seconds, tilts as if waving. */
body:not([data-open="true"]) .launcher__logo { transform-origin: 50% 90%; animation: launcher-float 3.2s ease-in-out infinite, launcher-wave 7s ease-in-out 2s infinite; }
@keyframes launcher-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes launcher-wave {
  0%, 82%, 100% { rotate: 0deg; }
  86% { rotate: -9deg; } 90% { rotate: 8deg; } 94% { rotate: -6deg; } 97% { rotate: 3deg; }
}
@media (prefers-reduced-motion: reduce) { .launcher__logo { animation: none !important; } }
.launcher__logo { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28)); }
.launcher__close { display: none; }
body[data-open="true"] .launcher {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-lg);
}
body[data-open="true"] .launcher:hover { background: var(--accent-hover); }
body[data-open="true"] .launcher__open { display: none; }
body[data-open="true"] .launcher__close { display: block; }
body[data-view="full"] .launcher { display: none; }

/* ------------------------------------------------------------------- chat */
.chat {
  display: flex; background: var(--surface); color: var(--text);
  overflow: hidden; z-index: 70;
}

.chat__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }

/* mini: popup anchored above the launcher, bottom right */
body[data-view="mini"] .chat {
  position: fixed; right: 24px; bottom: 100px;
  width: min(400px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 124px));
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  transform: translateY(14px) scale(.97); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
body[data-view="mini"][data-open="true"] .chat {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .2s ease, opacity .2s ease, visibility 0s;
}

/* full: the chat is the page (direct access) */
body[data-view="full"] .chat { position: fixed; inset: 0; border: 0; border-radius: 0; }
body[data-view="full"] #close-chat { display: none; }
body[data-view="full"] #theme-toggle { display: none; }

/* ----------------------------------------------------------------- header */
.chat__header {
  flex: none; display: flex; align-items: center; gap: 12px;
  background: var(--header-bg); color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
  position: relative; z-index: 1;
}
.chat__actions { display: flex; gap: 2px; margin-left: auto; }

/* full page: the institute's identity, help links and the "new conversation" button */
body[data-view="full"] .chat__header {
  min-height: 108px;
  padding: 10px max(20px, calc((100% - 1500px) / 2));
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand__emblem { height: 80px; width: auto; flex: none; filter: var(--emblem-filter); }
.brand__rule { width: 1px; height: 62px; background: var(--border); flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand__text strong {
  font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase; color: var(--brand-name);
}
.brand__text span { font-size: 17px; line-height: 1.3; color: var(--muted); }

.topbar__links { display: flex; gap: 10px; margin-left: auto; }
.topbar__links:empty { display: none; }
.topbar__links:not(:empty) ~ .chat__actions { margin-left: 4px; }
.topbar__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 14px; text-decoration: none; background: var(--surface);
  transition: background .15s;
}
.topbar__link:hover { background: var(--header-hover); }
.topbar__link .icon { width: 22px; height: 22px; }

.topbar__lang {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.topbar__lang:hover { background: var(--header-hover); }
.topbar__lang .icon { width: 22px; height: 22px; }
.topbar__lang select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit;
  font-size: 14px; padding: 12px 26px 12px 0; cursor: pointer;
}
.topbar__lang select:focus-visible { outline: none; }
.topbar__lang:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.topbar__chevron { position: absolute; right: 8px; width: 18px !important; height: 18px !important; pointer-events: none; color: var(--muted); }

/* Landing: the institute's identity. Once the conversation starts the header shows the
   assistant instead (the mascot and its name); the buttons on the right stay. */
body[data-view="mini"] .brand,
body[data-view="mini"] .topbar__links { display: none; }
body[data-view="full"]:not([data-started="true"]) .chat__title { display: none; }
body[data-view="full"][data-started="true"] .brand { display: none; }
body[data-view="full"][data-started="true"] .chat__title { flex: none; gap: 16px; }
body[data-view="full"] .title__img--face { display: none; }
body[data-view="full"] .title__img--body { height: 92px; width: auto; }
body[data-view="full"] .chat__title h2 { font-size: 26px; color: var(--muted); letter-spacing: -.005em; }
body[data-view="mini"] .title__img--body { display: none; }

/* popup: the assistant's name and the small buttons */
body[data-view="mini"] .chat__header { padding: 10px 10px 10px 14px; gap: 4px; }
.chat__title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.title__img--face { width: 38px; height: 35px; object-fit: contain; flex: none; }
.chat__title h2 {
  font-size: 14px; line-height: 1.2; font-weight: 700; color: var(--brand-title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-view="mini"] .chat__header .icon-btn { width: 32px; height: 32px; }
body[data-view="mini"] .chat__header .icon { width: 18px; height: 18px; }

.chat__demo {
  padding: 8px 14px; font-size: 13px;
  background: var(--warn-bg); color: var(--warn-text); border-bottom: 1px solid var(--warn-border);
}

/* ---------------------------------------------------------------- history
   drawer in the popup, sidebar in full screen */
.chat__history {
  display: flex; flex-direction: column; background: var(--surface);
  border-right: 1px solid var(--border);
}
body[data-view="mini"] .chat__history {
  position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: min(300px, 82%);
  transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-lg);
}
body[data-view="mini"][data-history-open="true"] .chat__history { transform: none; }
body[data-view="full"] .chat__history { width: 290px; flex: none; }
body[data-view="full"][data-history-open="false"] .chat__history { display: none; }

.chat__scrim { display: none; position: absolute; inset: 0; z-index: 4; background: var(--scrim); }
body[data-view="mini"][data-history-open="true"] .chat__scrim { display: block; }

body[data-history="off"] .chat__history,
body[data-history="off"] .chat__scrim,
body[data-history="off"] #history-toggle-btn { display: none !important; }

.history__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; }
.history__head h2 { flex: 1; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* the sidebar of the full-screen view has its own toggle in the header; the drawer needs this one */
body[data-view="full"] .history__close { display: none; }
.history__list { list-style: none; margin: 0; padding: 4px 8px 12px; overflow-y: auto; flex: 1; }
.history__empty { padding: 8px 16px; font-size: 13.5px; color: var(--muted); }
.history__list:not(:empty) + .history__empty { display: none; }

.convo { display: flex; align-items: center; gap: 2px; border-radius: var(--radius); }
.convo:hover, .convo[aria-current="true"] { background: var(--surface-2); }
.convo[aria-current="true"] { box-shadow: inset 3px 0 0 var(--accent); }
.convo__open {
  flex: 1; min-width: 0; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: var(--radius);
}
.convo__title { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo__meta { display: block; font-size: 12px; color: var(--muted); }
.convo__delete { opacity: 0; width: 30px; height: 30px; }
.convo:hover .convo__delete, .convo:focus-within .convo__delete { opacity: 1; }
@media (hover: none) { .convo__delete { opacity: .7; } }

/* ------------------------------------------------------------------- hero */
.chat__scroll { flex: 1; overflow-y: auto; padding: 24px 24px 8px; display: flex; flex-direction: column; scroll-behavior: smooth; }
.chat__empty {
  margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px; max-width: 700px;
}
.hero__img { width: clamp(190px, 21vw, 340px); height: auto; }
.chat__empty h3 {
  margin-top: 10px; font-size: clamp(28px, 2.3vw, 40px); line-height: 1.15; font-weight: 700;
  letter-spacing: -.01em; color: var(--brand-title);
}
.hero__text { color: var(--muted); font-size: clamp(15px, 1.05vw, 19px); line-height: 1.38; max-width: 620px; }
.hero__text--mini { display: none; }
.chat__scroll[data-empty="false"] .chat__empty { display: none; }

body[data-view="mini"] .chat__scroll { padding: 14px 14px 6px; }
body[data-view="mini"] .hero__img { width: 120px; }
body[data-view="mini"] .chat__empty h3 { font-size: 22px; margin-top: 4px; }
body[data-view="mini"] .hero__text { font-size: 13.5px; }
body[data-view="mini"] .hero__text--full { display: none; }
body[data-view="mini"] .hero__text--mini { display: block; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.chips:empty { display: none; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font-size: 14px; text-align: left; transition: background .15s, border-color .15s;
}
.chip:hover { background: var(--accent-soft); border-color: var(--accent); }

/* --------------------------------------------------------------- messages */
.messages { width: 100%; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg--user { justify-content: flex-end; }
.msg--bot { position: relative; }
/* while the agent is working, its avatar breathes */
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .75; } }
.msg--bot:has(.status) .msg__avatar { animation: breathe 1.4s ease-in-out infinite; }
.msg__avatar { flex: none; width: 52px; height: 48px; object-fit: contain; }
.msg__bubble {
  max-width: min(100%, 720px); padding: 16px 26px; border-radius: var(--radius); overflow-wrap: anywhere;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font-size: 17px; line-height: 1.5;
}
.msg--user .msg__bubble { max-width: min(78%, 520px); white-space: pre-wrap; }
.msg--error .msg__bubble { border-color: var(--danger); color: var(--danger); }

/* wide screens: the mascot hangs to the left of the column, as in the design */
@media (min-width: 1180px) {
  body[data-view="full"] .msg--bot .msg__avatar { position: absolute; left: -108px; top: -6px; width: 92px; height: 84px; }
}

body[data-view="mini"] .messages { gap: 14px; }
body[data-view="mini"] .msg__avatar { width: 38px; height: 35px; }
body[data-view="mini"] .msg__bubble { padding: 10px 14px; font-size: 14.5px; max-width: min(100%, 680px); }
body[data-view="mini"] .msg--user .msg__bubble { max-width: 86%; }

.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7em; }
.md ul, .md ol { margin: 0 0 .7em; padding-left: 1.3em; }
.md li { margin: .2em 0; }
.md h3, .md h4, .md h5 { margin: .9em 0 .35em; font-size: 1em; }
.md a { color: var(--accent); text-underline-offset: 2px; }
.md code { padding: 1px 5px; border-radius: 5px; background: var(--code-bg); font: .92em ui-monospace, SFMono-Regular, Menlo, monospace; }

.status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9em; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: dot 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.sources { margin-top: 12px; font-size: .86em; }
.sources summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 5px 14px; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-weight: 600; user-select: none;
  transition: background-color .15s;
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: "▾"; font-size: .85em; transition: transform .15s; }
.sources[open] summary::after { transform: rotate(180deg); }
.sources summary:hover { background: var(--accent-soft); }
.sources summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sources ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sources li { margin: 0; }
.sources a {
  display: inline-block; padding: 3px 0; color: var(--accent); text-decoration: none;
  overflow-wrap: anywhere;
}
.sources a::after { content: " ↗"; font-size: .85em; }
.sources a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- composer */
.composer {
  flex: none; display: flex; align-items: center; gap: 12px;
  width: min(880px, calc(100% - 48px)); margin: 18px auto 0; padding: 12px 14px 12px 20px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.composer__icon { width: 32px; height: 32px; flex: none; color: var(--text); }
.composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 140px; padding: 8px 4px; border: 0; background: transparent;
  font-size: 18px; line-height: 1.4;
}
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--text); opacity: .85; }
.send {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast); transition: background .15s, opacity .15s;
}
.send .icon { width: 26px; height: 26px; }
.send:hover { background: var(--accent-hover); }
.send:disabled { opacity: .4; cursor: not-allowed; }

body[data-view="mini"] .composer { width: auto; margin: 8px 14px 14px; padding: 6px 8px 6px 14px; }
body[data-view="mini"] .composer__icon { display: none; }
body[data-view="mini"] .composer textarea { font-size: 14.5px; }
body[data-view="mini"] .composer textarea::placeholder { color: var(--muted); }
body[data-view="mini"] .send { width: 38px; height: 38px; }
body[data-view="mini"] .send .icon { width: 20px; height: 20px; }

/* the sentence under the question box and the band at the bottom (full page only) */
.chat__notice {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 24px 22px; color: var(--muted); font-size: 17px; text-align: center;
}
.chat__notice .icon { width: 24px; height: 24px; }
.chat__band {
  flex: none; display: flex; align-items: center; justify-content: center; gap: .3em; min-height: 32px;
  padding: 4px 16px; background: var(--band-bg); color: var(--band-text); font-size: 12.5px; text-align: center;
}
body[data-view="mini"] .chat__notice, body[data-view="mini"] .chat__band { display: none; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  body[data-view="full"] .chat__history { position: absolute; z-index: 5; inset: 0 auto 0 0; width: min(300px, 86%); box-shadow: var(--shadow-lg); }
  body[data-view="full"] .history__close { display: inline-grid; }
  body[data-view="full"][data-history-open="true"] .chat__scrim { display: block; }

  body[data-view="full"] .chat__header { min-height: 84px; gap: 12px; }
  .brand__emblem { height: 60px; }
  .brand__rule { height: 46px; }
  .brand__text strong { font-size: 15px; }
  .brand__text span { font-size: 13px; }
  .topbar__link span { display: none; }
  .topbar__link { padding: 10px; }
  body[data-view="full"] .title__img--body { height: 64px; }
  body[data-view="full"] .chat__title h2 { font-size: 20px; }
  .composer { padding: 8px 10px 8px 14px; }
  .composer textarea { font-size: 16px; }
  .send { width: 46px; height: 46px; }
  .chat__notice { font-size: 14.5px; margin: 10px 16px 16px; }
  .msg__bubble { padding: 12px 16px; font-size: 16px; }
}

@media (max-width: 520px) {
  /* one line in the question box: a placeholder that wraps would be cut off */
  .composer textarea { font-size: 15px; }
  .composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero__img { width: 190px; }
  .chat__scroll { padding: 12px 16px 8px; }
  .chat__notice { align-items: flex-start; font-size: 13.5px; text-align: left; }
  .chat__notice .icon { width: 20px; height: 20px; margin-top: 1px; }
  body[data-view="mini"] .chat {
    right: 8px; left: 8px; width: auto; bottom: 88px; height: calc(100vh - 104px);
  }
  .launcher { right: 16px; bottom: 16px; }
  .brand__text span, .brand__rule { display: none; }
  .brand__text strong { font-size: 13px; }
  body[data-view="full"] .chat__title h2 { font-size: 17px; }
  body[data-view="full"] .title__img--body { height: 52px; }
  .topbar__links { gap: 6px; }
}

@media (max-width: 400px) {
  .composer textarea { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ embedded in an iframe
   widget.js sizes the iframe: 120x120 while closed (just the launcher), about
   416x696 while open (the popup), the whole screen on phones. Everything is
   laid out inside that box, with 8px of margin so the shadows are not clipped. */
html:has(body[data-surface="embed"]) { background: transparent; color-scheme: normal; }
body[data-surface="embed"] { background: transparent; }

/* Shadows must fit inside the 8px margin or the iframe's edge cuts them off
   and leaves a visible rectangle on the host page. */
body[data-surface="embed"] { --shadow-lg: 0 1px 6px rgba(0, 0, 0, .30); }
body[data-surface="embed"] .launcher { right: 6px; bottom: 6px; }
body[data-surface="embed"] .launcher__logo { filter: none; }
body[data-surface="embed"][data-view="mini"] .chat {
  top: 8px; left: 8px; right: 8px; bottom: 80px; width: auto; height: auto;
  box-shadow: var(--shadow-lg);
}