/* ---------------------------------------------------------------------------
   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: .95rem 1.05rem;
  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;
}

/* Three separate things, and they have to LOOK like three separate things.
   They were technically stacked before — display:block, a 4px gap — but at
   .92 / .82 / .7rem they were near enough in size to read as one paragraph,
   which is what an English title above a Greek label actually did. The
   audience is 50+ (§16), so the fix is hierarchy and air, not more rules. */
.result__title {
  display: block;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.result__label {
  display: block;
  margin-top: .45rem;
  padding-left: .7rem;
  border-left: 2px solid hsl(0 0% 100% / .22);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--fg-soft, hsl(0 0% 100% / .82));
}

.result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
}

/* Chips rather than a dot-separated run. Three short facts side by side are
   scannable; the same three joined by middots are a sentence you have to read.
   Each also gets a real edge, which matters on a background that shifts hue. */
.result__meta span {
  padding: .2rem .55rem;
  border: 1px solid hsl(0 0% 100% / .2);
  border-radius: 999px;
  font-size: .76rem;
  line-height: 1.35;
  white-space: nowrap;
}

.result__meta .meta--creator {
  border-color: hsl(0 0% 100% / .34);
  font-weight: 600;
}

/* Cross-language is the one that changes what a person will experience when
   they click, so it is the one allowed to stand out. */
.result__meta .tag--lang {
  border-color: hsl(45 90% 70% / .5);
  background: hsl(45 90% 60% / .12);
}

/* 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);
  /* The only colour in this file that is not a white or black alpha over
     whatever ground the host page sets — and so the only line here that had
     to move when the ground went from wine to eucalyptus. Everything else
     followed on its own, which is why the panel and the landing never
     disagreed before now. Dark enough to read on the white pill: 14.7:1. */
  color: hsl(160 20% 14%);
  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;
}

/* ---- the register toggle: the person picks the depth (§14.4) ---- */

/* Deliberately NOT a small chat-bubble affordance. The audience is 50+, often
   reading with fatigue (§16), so this is a full-width target with words on it
   — 3.25rem tall, the same reading size as a result title. It sits under the
   list it swaps, because that is the thing it acts on. */
.deeper {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin-top: .7rem;
  padding: .85rem 1.1rem;
  border: 1px solid hsl(0 0% 100% / .38);
  border-radius: .8rem;
  background: hsl(0 0% 0% / .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

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

.deeper: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), .deeper:hover { transform: none; }
}