/* The box lives in the portfolio's Lab, which is always a night room, so it has one palette:
   the --lab-* tokens from portfolio css/site.css (dark-mode values). */
:root {
  --bg: #150f24;
  --surface: #1d1532;
  --surface-2: #231a3a;
  --ink: #f5eef2;
  --ink-2: #cdc1d3;
  --ink-3: #a093ab;
  --line: rgba(245, 238, 242, 0.12);
  --line-2: rgba(245, 238, 242, 0.06);
  --line-strong: rgba(245, 238, 242, 0.24);
  --accent: #ff7a45;
  --accent-ink: #ff9464;
  --accent-soft: rgba(255, 122, 69, 0.12);
  --bloom: #ff5c93;
  --gold: #ffb547;
  --on-accent: #150f24;
  --support: #a9c46c;
  --select: rgba(255, 122, 69, 0.32);
  --sans: "Archivo", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --display: "Archivo", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--select); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- frame ---------- */
.chat {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
}
.is-embed .chat { max-width: none; height: 100vh; }

.head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.head .avatar { width: 34px; height: 34px; }
.title { font: 800 semi-expanded 1.05rem/1.15 var(--display); letter-spacing: -0.02em; }
.sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font: 500 semi-condensed 0.625rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.is-ready .dot { background: var(--support); box-shadow: 0 0 0 3px rgba(169, 196, 108, 0.18); }
.is-error .dot { background: var(--accent); }

/* the avatar: a small sunset orb, the Lab's palette in one circle */
.avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.55), transparent 32%),
    radial-gradient(circle at 50% 60%, var(--accent), var(--bloom) 62%, #6b2d7a 100%);
  box-shadow: 0 0 18px rgba(255, 122, 69, 0.28);
}

/* ---------- conversation ---------- */
.log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior: contain;
}
/* Embedded in the portfolio, a log that hits its end hands the scroll back to the page. */
.is-embed .log { overscroll-behavior: auto; }
.msg { display: flex; gap: 10px; animation: rise 0.35s var(--ease); }
.msg.me { justify-content: flex-end; }
.bubble { min-width: 0; max-width: min(560px, 88%); }
.msg.bot .bubble { flex: 1; padding-top: 3px; }
.msg.me .bubble {
  padding: 10px 14px;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.answer { font-size: 0.9688rem; line-height: 1.62; color: var(--ink); text-wrap: pretty; }
.answer + .answer { margin-top: 8px; }
.aside { margin-bottom: 4px; font-size: 0.875rem; font-style: italic; color: var(--ink-3); }
.loading { margin-top: 10px; font: 400 0.75rem/1.4 var(--mono); color: var(--ink-3); }
.w { animation: word 0.32s var(--ease) both; animation-delay: calc(var(--i) * var(--wms, 16ms)); }
.more { display: inline-flex; gap: 6px; margin-top: 10px; font-weight: 500; font-size: 0.9063rem; text-decoration: none; animation: rise 0.35s var(--ease); }
.more span { transition: transform 0.25s var(--ease); }
.more:hover span { transform: translateX(3px); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; animation: rise 0.4s var(--ease); }
.chip {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 0.8125rem/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.chip:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }

/* ---------- the trace ---------- */
.trace {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 0.8125rem;
}
.trace-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  font: 500 semi-condensed 0.6875rem/1.3 var(--mono);
  white-space: nowrap;
  user-select: none;
}
.trace-sum::-webkit-details-marker { display: none; }
.trace-sum::after { content: "▾"; margin-left: auto; color: var(--ink-3); transition: transform 0.2s; }
.trace:not([open]) .trace-sum::after { transform: rotate(-90deg); }
.spin {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.6px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.trace.is-done .spin { border-color: var(--support); background: var(--support); animation: none; transform: scale(0.6); }

.steps { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; list-style: none; }
.step { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; row-gap: 6px; align-items: center; animation: rise 0.3s var(--ease); }
.step > :nth-child(n + 3) { grid-column: 2; }
.tick { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--line-strong); }
.step.is-running .tick { border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.step.is-done .tick { border: 0; background: var(--support) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23150f24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.step-title { color: var(--ink); font-weight: 500; }
.step.is-running .step-title { color: var(--ink-2); }
.detail { color: var(--ink-3); font: 400 0.6875rem/1.4 var(--mono); }

.pieces { display: flex; flex-wrap: wrap; gap: 4px; }
.pieces code, .more-pieces {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 500 0.6875rem/1.5 var(--mono);
  animation: pop 0.25s var(--ease) both;
}
.pieces code.unk { background: var(--line-2); color: var(--ink-3); text-decoration: line-through; }
.pieces code.cont { margin-left: -4px; border-left: 1px dashed rgba(255, 148, 100, 0.45); border-radius: 0 4px 4px 0; }
.pieces code:has(+ .cont) { border-radius: 4px 0 0 4px; }
.more-pieces { background: none; color: var(--ink-3); }

.vec { display: block; width: 100%; max-width: 420px; height: 28px; }
.vec .pos { fill: var(--accent); }
.vec .neg { fill: var(--bloom); opacity: 0.65; }
.vec rect { transform-origin: 50% 50%; transform-box: fill-box; animation: grow 0.4s var(--ease) both; }

.matches { display: flex; flex-direction: column; gap: 5px; list-style: none; }
.matches li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 34px; gap: 8px; align-items: center; color: var(--ink-3); }
.matches li.is-best { color: var(--ink); }
.m-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
.bar { position: relative; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--ink-3); animation: fill 0.5s var(--ease) both; }
.is-best .bar::after { background: linear-gradient(90deg, var(--gold), var(--accent)); }
.m-score { font: 500 0.6875rem/1 var(--mono); text-align: right; }
.matches .m-note { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-2); }

/* ---------- composer ---------- */
.ask { display: flex; gap: 8px; padding: 10px 20px 6px; }
.ask input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS Safari from zooming on focus */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ask input::placeholder { color: var(--ink-3); }
.ask input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
/* The send button, drawn like the portfolio's illustrations: a paper disc with a 1.6px ink line
   and a red-rock arrow; hover fills it with red rock. It draws itself in on load (the dash
   pattern exists only while drawing, or its seam would notch the finished circle). Same as the
   portfolio's ask bar. */
#send {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
#send svg { display: block; width: 46px; height: 46px; overflow: visible; }
.send-disc { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1.6; transition: fill 0.25s, stroke 0.25s; animation: draw 1.1s var(--ease) 0.3s backwards; }
.send-arrow { fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; animation: draw 0.6s var(--ease) 1.15s backwards; }
@keyframes draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
#send:hover:not(:disabled) .send-disc { fill: #a8401d; stroke: #a8401d; }
#send:hover:not(:disabled) .send-arrow { stroke: #fff3e6; }
#send:active:not(:disabled) { transform: scale(0.94); }

/* an answer's highlights, marked with small red-rock diamonds */
.answer-block .points { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; list-style: none; }
.points li { position: relative; padding-left: 18px; font-size: 0.9063rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.points li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 6px; height: 6px; border-radius: 1.5px; background: linear-gradient(135deg, #e8885a, #a8401d); transform: rotate(45deg); }
.ask :disabled { opacity: 0.5; cursor: progress; }
.how { padding: 2px 20px 12px; font-size: 0.6875rem; line-height: 1.5; color: var(--ink-3); text-align: center; }
.how a { text-decoration: none; white-space: nowrap; }

@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
@keyframes word { from { opacity: 0; filter: blur(3px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes fill { from { width: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .head { padding: 12px 16px; }
  .log { padding: 16px 16px 6px; }
  .ask { padding: 8px 12px 4px; }
  .how { padding: 2px 16px 10px; }
  .bubble { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}