/* ---------------------------------------------------------------------------
   Chat surface — shared by / and /embed.

   Same file on both pages, deliberately. The landing page and the embed are two
   views of one bot (§16); a copied stylesheet is a copy that drifts. The
   self-contained rule in CLAUDE.md is about external dependencies — no CDN, no
   build step — and that still holds: this is one same-origin file with no
   dependencies of its own.

   Colour tokens (--fg, --c1 …) are declared by each host page.
   --------------------------------------------------------------------------- */

.chat {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.chat__thread {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-height: min(56svh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 100% / .3) transparent;
}

.chat__thread:not(:empty) { margin-bottom: 1.25rem; }

/* ---- turns ---- */

.turn { animation: turn-in .35s cubic-bezier(.16, 1, .3, 1) both; }

.turn--you {
  align-self: flex-end;
  max-width: 85%;
  padding: .55rem .95rem;
  border-radius: 1.1rem 1.1rem .25rem 1.1rem;
  background: hsl(0 0% 100% / .14);
  font-size: .95rem;
}

.turn--bot { max-width: 100%; }

.turn__copy {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--fg, #fff);
  text-wrap: pretty;
}

/* ---- the links: the actual product ---- */

.results {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .9rem;
  list-style: none;
}

.result {
  display: block;
  padding: .7rem .9rem;
  border: 1px solid hsl(0 0% 100% / .16);
  border-radius: .8rem;
  background: hsl(0 0% 0% / .26);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.result:hover,
.result:focus-visible {
  border-color: hsl(0 0% 100% / .4);
  background: hsl(0 0% 0% / .38);
  transform: translateY(-1px);
}

.result:focus-visible {
  outline: 2px solid hsl(0 0% 100% / .75);
  outline-offset: 2px;
}

/* Spans, so they need saying: the anchor's children are inline by default and
   the label would otherwise run on from the end of the title. */
.result__title {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

.result__label {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--fg-soft, hsl(0 0% 100% / .82));
}

.result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: hsl(0 0% 100% / .62);
}

.result__meta span::after {
  content: "·";
  margin-left: .45rem;
  opacity: .55;
}

.result__meta span:last-child::after { content: none; }

/* Cross-language is stated, never hidden — and never a reason to drop a link. */
.tag--lang {
  padding: .1rem .4rem;
  border: 1px solid hsl(0 0% 100% / .3);
  border-radius: 999px;
  letter-spacing: .06em;
}

.tag--lang::after { content: none !important; }

.fallback {
  display: inline-block;
  margin-top: .8rem;
  color: var(--fg, #fff);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
}

/* ---- ask box ---- */

.chat__form {
  display: flex;
  gap: .5rem;
  padding: .35rem;
  border: 1px solid hsl(0 0% 100% / .22);
  border-radius: 999px;
  background: hsl(0 0% 0% / .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.chat__form:focus-within { border-color: hsl(0 0% 100% / .55); }

.chat__input {
  flex: 1;
  min-width: 0;
  padding: .6rem .35rem .6rem .95rem;
  background: none;
  color: var(--fg, #fff);
  font: inherit;
  font-size: .95rem;
}

.chat__input::placeholder { color: hsl(0 0% 100% / .5); }
.chat__input:focus { outline: none; }

.chat__send {
  flex: none;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  background: var(--fg, #fff);
  color: hsl(343 40% 16%);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}

.chat__send:hover:not(:disabled) { transform: translateY(-1px); }
.chat__send:disabled { opacity: .5; cursor: default; }

.chat__send:focus-visible {
  outline: 2px solid hsl(0 0% 100% / .75);
  outline-offset: 2px;
}

/* ---- notes: disclaimer, waiting state, warnings ---- */

.chat__note {
  margin-top: .8rem;
  color: var(--fg-soft, hsl(0 0% 100% / .82));
  font-size: .72rem;
  line-height: 1.5;
  text-align: center;
  opacity: .72;
  text-wrap: balance;
}

.waiting {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  font-size: .85rem;
  color: var(--fg-soft, hsl(0 0% 100% / .82));
}

.waiting i {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: currentcolor;
  animation: waiting-pulse 1.2s ease-in-out infinite;
}

.waiting i:nth-child(2) { animation-delay: .15s; }
.waiting i:nth-child(3) { animation-delay: .3s; }

.notice {
  margin-bottom: 1rem;
  padding: .6rem .9rem;
  border: 1px solid hsl(45 90% 70% / .5);
  border-radius: .7rem;
  background: hsl(45 90% 50% / .14);
  font-size: .78rem;
  line-height: 1.5;
  text-align: left;
}

.turn--error .turn__copy { color: hsl(20 100% 92%); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes turn-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes waiting-pulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .turn, .waiting i { animation: none !important; }
  .result:hover, .chat__send:hover:not(:disabled) { transform: none; }
}