@veluai/velu 0.2.25 → 0.2.28

package/runtime/velu-ui/components/chatbot.css

@@ -1,687 +1,687 @@
-/* Chatbot — the Velu "Ask AI" slide-out panel. Ported from the
-   Claude-Design handoff and retokenized: every design literal is mapped
-   onto velu-ui's scale, so the panel themes for free via [data-theme].
-     crimson         → --accent-color
-     gray-100/hover  → --surface-color
-     gray-200/300    → --border-color
-     gray-500/600    → --muted-color
-     fg-1 (black)    → --text-color
-     white           → --page-bg
-     4px spacing     → --s-6 … and up the modular scale
-*/
-
-/* ── Panel + slide ──────────────────────────────────────────────────── */
-/* Fixed panel width via `--vchat-width` (overridable, like --card-min);
-   capped at 100vw so it can never exceed the viewport. */
-.velu-chatbot {
-  /* Comfortable fixed panel width. The panel slides OVER the right
-     edge (it's a floating overlay, z-50) so the article doesn't
-     reflow when it opens. (Mobile/tablet use a full-width bottom
-     sheet — see the @container override below.) */
-  --vchat-width: 24rem;
-  position: fixed;
-  inset-block: 0;
-  inset-inline-end: 0;
-  z-index: 50;
-  inline-size: var(--vchat-width);
-  max-inline-size: 100vw;
-  display: flex;
-  flex-direction: column;
-  background: var(--page-bg);
-  color: var(--text-color);
-  /* Panel edge — match the page header / TocBar / footer hairline
-     recipe (--surface-color), not the stronger card/button border
-     color. Keeps the chatbot consistent with other surface
-     containers in the product. */
-  border-inline-start: var(--border-width) solid var(--surface-color);
-  font-weight: var(--weight-light);
-  /* Closed: fully off the inline-end edge. Open: slid to 0. */
-  transform: translateX(100%);
-  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.velu-chatbot--open {
-  transform: translateX(0);
-  box-shadow:
-    0 0 var(--s2) color-mix(in srgb, #000 18%, transparent),
-    0 0 var(--s0) color-mix(in srgb, #000 8%, transparent);
-}
-/* base.css applies a global `* { max-width: 66ch }`; reset it so the
-   panel's structural elements size to flex/the panel, not 66ch. */
-.velu-chatbot * {
-  max-inline-size: none;
-}
-
-/* Drag handle is mobile-only — the @container block below flips it
-   on; this default hide keeps the desktop slide-out clean. */
-.velu-chatbot__drag-handle {
-  display: none;
-}
-
-/* ── Bottom-sheet variant (tablet + mobile, < 1024px) ─────────────── */
-/* At narrow / mobile widths the side-panel layout doesn't fit — the
-   chatbot instead opens as a bottom sheet covering most of the
-   viewport. Override the inline anchoring with block-end anchoring,
-   full-width sizing, and a translateY transform that slides up from
-   the bottom edge. The leading-edge border becomes a top-edge border
-   and the sheet picks up top corner rounding so it reads as a
-   separate surface lifting out of the viewport bottom. Threshold
-   matches the rest of the responsive layout (sidebar collapse,
-   right-rail TOC drop, etc.). */
-@container docs (max-width: 1024px) {
-  .velu-chatbot {
-    inset-inline: 0;
-    inset-block-end: 0;
-    inset-block-start: auto;
-    inline-size: 100vw;
-    max-inline-size: 100vw;
-    block-size: min(85vh, 40rem);
-    transform: translateY(100%);
-    border-inline-start: 0;
-    border-block-start: var(--border-width) solid var(--surface-color);
-    border-start-start-radius: var(--radius-md);
-    border-start-end-radius: var(--radius-md);
-    /* Make room at the top for the drag-handle pill (the ::before
-       below) so it doesn't overlap the existing header content. */
-    padding-block-start: var(--s1);
-  }
-  /* Drag handle — full-width touch-capture strip across the top of
-     the sheet. The pill VISUAL is a centered ::before pseudo; the
-     strip itself stays invisible but is tall enough to grab. Pointer
-     events here drive the drag-to-dismiss gesture (see Chatbot.jsx).
-     `touch-action: none` prevents the browser from interpreting the
-     vertical drag as a scroll / pull-to-refresh. */
-  .velu-chatbot__drag-handle {
-    display: block;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--s1);
-    touch-action: none;
-    cursor: grab;
-    z-index: 10;
-  }
-  .velu-chatbot__drag-handle::before {
-    content: '';
-    position: absolute;
-    inset-block-start: var(--s-3);
-    inset-inline-start: 50%;
-    inline-size: var(--s2);
-    block-size: var(--s-5);
-    background: var(--border-color);
-    border-radius: 999px;
-    transform: translateX(-50%);
-    pointer-events: none;
-  }
-  .velu-chatbot__drag-handle:active {
-    cursor: grabbing;
-  }
-  .velu-chatbot--open {
-    transform: translateY(0);
-  }
-}
-
-/* ── Header ─────────────────────────────────────────────────────────── */
-/* Layout (flex/gap/justify) comes from <Cluster>; this owns chrome. */
-.velu-chatbot__header {
-  flex: none;
-  padding: var(--s-2) var(--s-1);
-  /* Section divider — --surface-color hairline like the page
-     header's own bottom border, not the stronger --border-color. */
-  border-block-end: var(--border-width) solid var(--surface-color);
-  background: var(--page-bg);
-}
-.velu-chatbot__mark {
-  flex: none;
-  color: var(--accent-color);
-}
-.velu-chatbot__brand {
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--s-5);
-}
-.velu-chatbot__brand-name {
-  font-size: var(--f-h5);
-  font-weight: var(--weight-light);
-  color: var(--text-color);
-}
-.velu-chatbot__brand-sep {
-  color: var(--muted-color);
-}
-.velu-chatbot__brand-title {
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  color: var(--muted-color);
-}
-.velu-chatbot__iconbtn {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.75em;
-  block-size: 1.75em;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--muted-color);
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.velu-chatbot__iconbtn:hover {
-  background: var(--surface-color);
-  color: var(--text-color);
-}
-.velu-chatbot__iconbtn.is-active {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
-  color: var(--accent-color);
-}
-
-/* Shared eyebrow label (Suggested / Sources / Follow up / Recent chats) */
-.velu-chatbot__eyebrow {
-  font-size: var(--f-h7);
-  font-weight: var(--weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted-color);
-}
-
-/* ── History overlay ────────────────────────────────────────────────── */
-.velu-chatbot__history {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-  background: var(--page-bg);
-  /* Inherit the chatbot's corner radii — at desktop this is 0 (no
-     change); at mobile the parent has top-start / top-end rounded,
-     so the history overlay picks them up too rather than painting
-     square corners over the parent's curves. */
-  border-radius: inherit;
-}
-.velu-chatbot__history-head {
-  flex: none;
-  padding: var(--s-2) var(--s-1);
-  /* Same hairline recipe as the main chatbot header. */
-  border-block-end: var(--border-width) solid var(--surface-color);
-}
-.velu-chatbot__history-list {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: var(--s-3);
-}
-.velu-chatbot__history-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--s-6);
-  padding: var(--s-3) var(--s-2);
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  text-align: start;
-  font: inherit;
-  cursor: pointer;
-  transition: background 0.12s ease;
-}
-.velu-chatbot__history-item:hover {
-  background: var(--surface-color);
-}
-.velu-chatbot__history-item-title {
-  font-size: var(--f-h6);
-  font-weight: var(--weight-normal);
-  color: var(--text-color);
-}
-.velu-chatbot__history-item-when {
-  font-size: var(--f-h6);
-  font-weight: var(--weight-light);
-  color: var(--muted-color);
-}
-.velu-chatbot__history-empty {
-  font-size: var(--f-h6);
-  color: var(--muted-color);
-  padding: var(--s-3);
-}
-
-/* ── Body ───────────────────────────────────────────────────────────── */
-.velu-chatbot__body {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: var(--s0) var(--s-1) var(--s-3);
-  scroll-behavior: smooth;
-}
-
-/* ── Welcome / suggestions ──────────────────────────────────────────── */
-.velu-chatbot__welcome-hi {
-  margin: 0;
-  font-size: var(--f-h4);
-  font-weight: var(--weight-medium);
-  line-height: var(--lh-h4);
-  color: var(--text-color);
-}
-.velu-chatbot__suggest {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--s-2);
-  padding: var(--s-2) var(--s-1);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-light);
-  line-height: var(--lh-h6);
-  color: var(--text-color);
-  text-align: start;
-  cursor: pointer;
-  transition: border-color 0.12s ease, background 0.12s ease;
-}
-.velu-chatbot__suggest:hover {
-  border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
-}
-.velu-chatbot__suggest svg {
-  flex: none;
-  color: var(--muted-color);
-}
-.velu-chatbot__suggest:hover svg {
-  color: var(--accent-color);
-}
-
-/* ── Messages ───────────────────────────────────────────────────────── */
-.velu-chatbot__msg {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-3);
-}
-.velu-chatbot__msg--user {
-  align-items: flex-end;
-}
-.velu-chatbot__bubble {
-  max-inline-size: 84%;
-  padding: var(--s-3) var(--s-1);
-  background: var(--surface-color);
-  color: var(--text-color);
-  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm)
-    var(--radius-md);
-  font-size: var(--f-h6);
-  line-height: var(--lh-body);
-}
-.velu-chatbot__role {
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted-color);
-}
-.velu-chatbot__role svg {
-  flex: none;
-  color: var(--accent-color);
-}
-.velu-chatbot__role.is-thinking {
-  color: var(--accent-color);
-}
-/* Shimmer sweep on the "Velu is thinking" label. */
-.velu-chatbot__role.is-thinking span {
-  background: linear-gradient(
-    90deg,
-    var(--muted-color) 0%,
-    var(--muted-color) 35%,
-    var(--accent-color) 50%,
-    var(--muted-color) 65%,
-    var(--muted-color) 100%
-  );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: velu-chatbot-shimmer 1.8s linear infinite;
-}
-@keyframes velu-chatbot-shimmer {
-  0%   { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
-/* "Thinking" loader — 3x3 squares, opacity wave along the anti-diagonal. */
-.velu-chatbot__wave {
-  display: block;
-  flex: none;
-  inline-size: 1em;
-  block-size: 1em;
-}
-.velu-chatbot__wave rect {
-  fill: var(--accent-color);
-  animation: velu-chatbot-wave 1.3s ease-in-out infinite;
-}
-.velu-chatbot__wave rect[data-cell="0"] { animation-delay: 0s;    }
-.velu-chatbot__wave rect[data-cell="1"] { animation-delay: 0.1s;  }
-.velu-chatbot__wave rect[data-cell="2"] { animation-delay: 0.2s;  }
-.velu-chatbot__wave rect[data-cell="3"] { animation-delay: 0.3s;  }
-.velu-chatbot__wave rect[data-cell="4"] { animation-delay: 0.4s;  }
-@keyframes velu-chatbot-wave {
-  0%, 60%, 100% { opacity: 0.2; }
-  30%           { opacity: 1; }
-}
-
-/* ── AI answer body ─────────────────────────────────────────────────── */
-.velu-chatbot__answer {
-  font-size: var(--f-h6);
-  line-height: var(--lh-body);
-  color: var(--text-color);
-}
-.velu-chatbot__answer p {
-  margin: 0 0 var(--s-3);
-}
-.velu-chatbot__answer p:last-child {
-  margin-block-end: 0;
-}
-.velu-chatbot__answer code {
-  font-family: var(--font-mono);
-  font-size: var(--f-h7);
-  padding: 0 var(--s-5);
-  background: var(--surface-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-}
-
-/* Rendered markdown in answers */
-.velu-chatbot__answer strong {
-  font-weight: 600;
-}
-.velu-chatbot__answer em {
-  font-style: italic;
-}
-.velu-chatbot__answer a:not(.velu-chatbot__cite) {
-  color: var(--accent-color);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.velu-chatbot__answer h3,
-.velu-chatbot__answer h4,
-.velu-chatbot__answer h5,
-.velu-chatbot__answer h6 {
-  margin: var(--s-2) 0 var(--s-4);
-  font-weight: 600;
-  line-height: var(--lh-heading, 1.3);
-}
-.velu-chatbot__answer h3 { font-size: var(--f-h5); }
-.velu-chatbot__answer h4 { font-size: var(--f-h6); }
-.velu-chatbot__answer h5,
-.velu-chatbot__answer h6 { font-size: var(--f-h7); }
-.velu-chatbot__answer ul,
-.velu-chatbot__answer ol {
-  margin: 0 0 var(--s-3);
-  padding-inline-start: var(--s-1);
-}
-.velu-chatbot__answer li {
-  margin: 0 0 var(--s-5);
-}
-.velu-chatbot__answer li::marker {
-  color: var(--muted-color);
-}
-.velu-chatbot__pre {
-  margin: 0 0 var(--s-3);
-  padding: var(--s-3);
-  overflow-x: auto;
-  background: var(--surface-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-}
-.velu-chatbot__pre code {
-  padding: 0;
-  background: none;
-  border: none;
-  font-size: var(--f-h7);
-  white-space: pre;
-}
-.velu-chatbot__answer blockquote {
-  margin: 0 0 var(--s-3);
-  padding-inline-start: var(--s-3);
-  border-inline-start: 2px solid var(--border-color);
-  color: var(--muted-color);
-}
-
-/* Inline citation chip */
-.velu-chatbot__cite {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: 1.5em;
-  block-size: 1.5em;
-  padding: 0 var(--s-5);
-  font-family: var(--font-mono);
-  font-size: var(--f-h7);
-  font-weight: var(--weight-medium);
-  color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
-  border: var(--border-width) solid transparent;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.12s ease, border-color 0.12s ease;
-}
-.velu-chatbot__cite:hover {
-  background: var(--page-bg);
-  border-color: var(--accent-color);
-}
-
-/* Streaming caret */
-.velu-chatbot__caret {
-  display: inline-block;
-  inline-size: var(--s-4);
-  block-size: 1em;
-  vertical-align: text-bottom;
-  background: var(--accent-color);
-  animation: velu-chatbot-caret 0.9s steps(2) infinite;
-}
-@keyframes velu-chatbot-caret {
-  50% { opacity: 0; }
-}
-
-/* Sources card list */
-.velu-chatbot__sources {
-  margin-block-start: var(--s-2);
-}
-.velu-chatbot__source {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--s-2);
-  padding: var(--s-3) var(--s-2);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  color: inherit;
-  transition: border-color 0.12s ease;
-}
-.velu-chatbot__source:hover {
-  border-color: var(--accent-color);
-}
-.velu-chatbot__source-num {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.5em;
-  block-size: 1.5em;
-  font-family: var(--font-mono);
-  font-size: var(--f-h7);
-  font-weight: var(--weight-medium);
-  color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
-  border-radius: var(--radius-sm);
-}
-.velu-chatbot__source-meta {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-6);
-  min-inline-size: 0;
-}
-.velu-chatbot__source-title {
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-.velu-chatbot__source-path {
-  font-family: var(--font-mono);
-  font-size: var(--f-h7);
-  color: var(--muted-color);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Follow-ups */
-.velu-chatbot__followups {
-  margin-block-start: var(--s-1);
-}
-.velu-chatbot__followup {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--s-2);
-  padding: var(--s-3) var(--s-2);
-  background: transparent;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-light);
-  color: var(--text-color);
-  text-align: start;
-  cursor: pointer;
-  transition: border-color 0.12s ease, color 0.12s ease;
-}
-.velu-chatbot__followup:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-.velu-chatbot__followup svg {
-  flex: none;
-}
-
-/* Message hover actions */
-.velu-chatbot__msg-actions {
-  margin-inline-start: calc(var(--s-3) * -1);
-  opacity: 0;
-  transition: opacity 0.12s ease;
-}
-.velu-chatbot__msg--ai:hover .velu-chatbot__msg-actions,
-/* Keep the row visible once a vote is cast, so the selection stays
-   confirmed after the pointer leaves the message. */
-.velu-chatbot__msg-actions:has(.is-active) {
-  opacity: 1;
-}
-.velu-chatbot__msg-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.625em;
-  block-size: 1.625em;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--muted-color);
-  cursor: pointer;
-}
-.velu-chatbot__msg-action:hover {
-  background: var(--surface-color);
-  color: var(--text-color);
-}
-/* Chosen thumb (up/down) — accent tint so the click is clearly registered. */
-.velu-chatbot__msg-action.is-active {
-  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
-  color: var(--accent-color);
-}
-
-/* ── Composer ───────────────────────────────────────────────────────── */
-.velu-chatbot__composer {
-  flex: none;
-  padding: var(--s-1);
-  background: var(--page-bg);
-  /* Section divider — --surface-color hairline matching the
-     chatbot's other structural section borders. The input field
-     INSIDE the composer keeps its --border-color (it's an
-     interactive element, not a section divider). */
-  border-block-start: var(--border-width) solid var(--surface-color);
-}
-.velu-chatbot__input-wrap {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--s-3);
-  padding: var(--s-3);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  transition: border-color 0.12s ease, box-shadow 0.12s ease;
-}
-.velu-chatbot__input-wrap:focus-within {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 var(--border-width) var(--accent-color);
-}
-.velu-chatbot__input {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  /* ~4 lines of body leading before the textarea starts scrolling. */
-  max-block-size: calc(1em * var(--lh-body) * 4);
-  padding: 0;
-  border: 0;
-  outline: none;
-  resize: none;
-  background: transparent;
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-light);
-  line-height: var(--lh-body);
-  color: var(--text-color);
-}
-.velu-chatbot__input::placeholder {
-  color: var(--muted-color);
-}
-.velu-chatbot__send {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.75em;
-  block-size: 1.75em;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: var(--surface-color);
-  color: var(--muted-color);
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.velu-chatbot__send.is-active {
-  background: var(--accent-color);
-  color: #fff;
-}
-.velu-chatbot__send:disabled {
-  cursor: not-allowed;
-}
-.velu-chatbot__foot {
-  margin-block-start: var(--s-3);
-  padding-inline: var(--s-5);
-  font-size: var(--f-h6);
-  font-weight: var(--weight-light);
-  color: var(--muted-color);
-}
-.velu-chatbot__foot kbd {
-  font-family: var(--font-mono);
-  font-size: var(--f-h7);
-  padding: 0 var(--s-5);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  color: var(--muted-color);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .velu-chatbot { transition: none; }
-  .velu-chatbot__wave rect,
-  .velu-chatbot__role.is-thinking span,
-  .velu-chatbot__caret { animation: none; }
-}
+/* Chatbot — the Velu "Ask AI" slide-out panel. Ported from the
+   Claude-Design handoff and retokenized: every design literal is mapped
+   onto velu-ui's scale, so the panel themes for free via [data-theme].
+     crimson         → --accent-color
+     gray-100/hover  → --surface-color
+     gray-200/300    → --border-color
+     gray-500/600    → --muted-color
+     fg-1 (black)    → --text-color
+     white           → --page-bg
+     4px spacing     → --s-6 … and up the modular scale
+*/
+
+/* ── Panel + slide ──────────────────────────────────────────────────── */
+/* Fixed panel width via `--vchat-width` (overridable, like --card-min);
+   capped at 100vw so it can never exceed the viewport. */
+.velu-chatbot {
+  /* Comfortable fixed panel width. The panel slides OVER the right
+     edge (it's a floating overlay, z-50) so the article doesn't
+     reflow when it opens. (Mobile/tablet use a full-width bottom
+     sheet — see the @container override below.) */
+  --vchat-width: 24rem;
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 50;
+  inline-size: var(--vchat-width);
+  max-inline-size: 100vw;
+  display: flex;
+  flex-direction: column;
+  background: var(--page-bg);
+  color: var(--text-color);
+  /* Panel edge — match the page header / TocBar / footer hairline
+     recipe (--surface-color), not the stronger card/button border
+     color. Keeps the chatbot consistent with other surface
+     containers in the product. */
+  border-inline-start: var(--border-width) solid var(--surface-color);
+  font-weight: var(--weight-light);
+  /* Closed: fully off the inline-end edge. Open: slid to 0. */
+  transform: translateX(100%);
+  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.velu-chatbot--open {
+  transform: translateX(0);
+  box-shadow:
+    0 0 var(--s2) color-mix(in srgb, #000 18%, transparent),
+    0 0 var(--s0) color-mix(in srgb, #000 8%, transparent);
+}
+/* base.css applies a global `* { max-width: 66ch }`; reset it so the
+   panel's structural elements size to flex/the panel, not 66ch. */
+.velu-chatbot * {
+  max-inline-size: none;
+}
+
+/* Drag handle is mobile-only — the @container block below flips it
+   on; this default hide keeps the desktop slide-out clean. */
+.velu-chatbot__drag-handle {
+  display: none;
+}
+
+/* ── Bottom-sheet variant (tablet + mobile, < 1024px) ─────────────── */
+/* At narrow / mobile widths the side-panel layout doesn't fit — the
+   chatbot instead opens as a bottom sheet covering most of the
+   viewport. Override the inline anchoring with block-end anchoring,
+   full-width sizing, and a translateY transform that slides up from
+   the bottom edge. The leading-edge border becomes a top-edge border
+   and the sheet picks up top corner rounding so it reads as a
+   separate surface lifting out of the viewport bottom. Threshold
+   matches the rest of the responsive layout (sidebar collapse,
+   right-rail TOC drop, etc.). */
+@container docs (max-width: 1024px) {
+  .velu-chatbot {
+    inset-inline: 0;
+    inset-block-end: 0;
+    inset-block-start: auto;
+    inline-size: 100vw;
+    max-inline-size: 100vw;
+    block-size: min(85vh, 40rem);
+    transform: translateY(100%);
+    border-inline-start: 0;
+    border-block-start: var(--border-width) solid var(--surface-color);
+    border-start-start-radius: var(--radius-md);
+    border-start-end-radius: var(--radius-md);
+    /* Make room at the top for the drag-handle pill (the ::before
+       below) so it doesn't overlap the existing header content. */
+    padding-block-start: var(--s1);
+  }
+  /* Drag handle — full-width touch-capture strip across the top of
+     the sheet. The pill VISUAL is a centered ::before pseudo; the
+     strip itself stays invisible but is tall enough to grab. Pointer
+     events here drive the drag-to-dismiss gesture (see Chatbot.jsx).
+     `touch-action: none` prevents the browser from interpreting the
+     vertical drag as a scroll / pull-to-refresh. */
+  .velu-chatbot__drag-handle {
+    display: block;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: var(--s1);
+    touch-action: none;
+    cursor: grab;
+    z-index: 10;
+  }
+  .velu-chatbot__drag-handle::before {
+    content: '';
+    position: absolute;
+    inset-block-start: var(--s-3);
+    inset-inline-start: 50%;
+    inline-size: var(--s2);
+    block-size: var(--s-5);
+    background: var(--border-color);
+    border-radius: 999px;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+  .velu-chatbot__drag-handle:active {
+    cursor: grabbing;
+  }
+  .velu-chatbot--open {
+    transform: translateY(0);
+  }
+}
+
+/* ── Header ─────────────────────────────────────────────────────────── */
+/* Layout (flex/gap/justify) comes from <Cluster>; this owns chrome. */
+.velu-chatbot__header {
+  flex: none;
+  padding: var(--s-2) var(--s-1);
+  /* Section divider — --surface-color hairline like the page
+     header's own bottom border, not the stronger --border-color. */
+  border-block-end: var(--border-width) solid var(--surface-color);
+  background: var(--page-bg);
+}
+.velu-chatbot__mark {
+  flex: none;
+  color: var(--accent-color);
+}
+.velu-chatbot__brand {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s-5);
+}
+.velu-chatbot__brand-name {
+  font-size: var(--f-h5);
+  font-weight: var(--weight-light);
+  color: var(--text-color);
+}
+.velu-chatbot__brand-sep {
+  color: var(--muted-color);
+}
+.velu-chatbot__brand-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  color: var(--muted-color);
+}
+.velu-chatbot__iconbtn {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-chatbot__iconbtn:hover {
+  background: var(--surface-color);
+  color: var(--text-color);
+}
+.velu-chatbot__iconbtn.is-active {
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  color: var(--accent-color);
+}
+
+/* Shared eyebrow label (Suggested / Sources / Follow up / Recent chats) */
+.velu-chatbot__eyebrow {
+  font-size: var(--f-h7);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-color);
+}
+
+/* ── History overlay ────────────────────────────────────────────────── */
+.velu-chatbot__history {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  background: var(--page-bg);
+  /* Inherit the chatbot's corner radii — at desktop this is 0 (no
+     change); at mobile the parent has top-start / top-end rounded,
+     so the history overlay picks them up too rather than painting
+     square corners over the parent's curves. */
+  border-radius: inherit;
+}
+.velu-chatbot__history-head {
+  flex: none;
+  padding: var(--s-2) var(--s-1);
+  /* Same hairline recipe as the main chatbot header. */
+  border-block-end: var(--border-width) solid var(--surface-color);
+}
+.velu-chatbot__history-list {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--s-3);
+}
+.velu-chatbot__history-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-6);
+  padding: var(--s-3) var(--s-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  text-align: start;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.velu-chatbot__history-item:hover {
+  background: var(--surface-color);
+}
+.velu-chatbot__history-item-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-normal);
+  color: var(--text-color);
+}
+.velu-chatbot__history-item-when {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  color: var(--muted-color);
+}
+.velu-chatbot__history-empty {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+  padding: var(--s-3);
+}
+
+/* ── Body ───────────────────────────────────────────────────────────── */
+.velu-chatbot__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--s0) var(--s-1) var(--s-3);
+  scroll-behavior: smooth;
+}
+
+/* ── Welcome / suggestions ──────────────────────────────────────────── */
+.velu-chatbot__welcome-hi {
+  margin: 0;
+  font-size: var(--f-h4);
+  font-weight: var(--weight-medium);
+  line-height: var(--lh-h4);
+  color: var(--text-color);
+}
+.velu-chatbot__suggest {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-1);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.velu-chatbot__suggest:hover {
+  border-color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+}
+.velu-chatbot__suggest svg {
+  flex: none;
+  color: var(--muted-color);
+}
+.velu-chatbot__suggest:hover svg {
+  color: var(--accent-color);
+}
+
+/* ── Messages ───────────────────────────────────────────────────────── */
+.velu-chatbot__msg {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.velu-chatbot__msg--user {
+  align-items: flex-end;
+}
+.velu-chatbot__bubble {
+  max-inline-size: 84%;
+  padding: var(--s-3) var(--s-1);
+  background: var(--surface-color);
+  color: var(--text-color);
+  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm)
+    var(--radius-md);
+  font-size: var(--f-h6);
+  line-height: var(--lh-body);
+}
+.velu-chatbot__role {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted-color);
+}
+.velu-chatbot__role svg {
+  flex: none;
+  color: var(--accent-color);
+}
+.velu-chatbot__role.is-thinking {
+  color: var(--accent-color);
+}
+/* Shimmer sweep on the "Velu is thinking" label. */
+.velu-chatbot__role.is-thinking span {
+  background: linear-gradient(
+    90deg,
+    var(--muted-color) 0%,
+    var(--muted-color) 35%,
+    var(--accent-color) 50%,
+    var(--muted-color) 65%,
+    var(--muted-color) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: velu-chatbot-shimmer 1.8s linear infinite;
+}
+@keyframes velu-chatbot-shimmer {
+  0%   { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+/* "Thinking" loader — 3x3 squares, opacity wave along the anti-diagonal. */
+.velu-chatbot__wave {
+  display: block;
+  flex: none;
+  inline-size: 1em;
+  block-size: 1em;
+}
+.velu-chatbot__wave rect {
+  fill: var(--accent-color);
+  animation: velu-chatbot-wave 1.3s ease-in-out infinite;
+}
+.velu-chatbot__wave rect[data-cell="0"] { animation-delay: 0s;    }
+.velu-chatbot__wave rect[data-cell="1"] { animation-delay: 0.1s;  }
+.velu-chatbot__wave rect[data-cell="2"] { animation-delay: 0.2s;  }
+.velu-chatbot__wave rect[data-cell="3"] { animation-delay: 0.3s;  }
+.velu-chatbot__wave rect[data-cell="4"] { animation-delay: 0.4s;  }
+@keyframes velu-chatbot-wave {
+  0%, 60%, 100% { opacity: 0.2; }
+  30%           { opacity: 1; }
+}
+
+/* ── AI answer body ─────────────────────────────────────────────────── */
+.velu-chatbot__answer {
+  font-size: var(--f-h6);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-chatbot__answer p {
+  margin: 0 0 var(--s-3);
+}
+.velu-chatbot__answer p:last-child {
+  margin-block-end: 0;
+}
+.velu-chatbot__answer code {
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  padding: 0 var(--s-5);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+}
+
+/* Rendered markdown in answers */
+.velu-chatbot__answer strong {
+  font-weight: 600;
+}
+.velu-chatbot__answer em {
+  font-style: italic;
+}
+.velu-chatbot__answer a:not(.velu-chatbot__cite) {
+  color: var(--accent-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.velu-chatbot__answer h3,
+.velu-chatbot__answer h4,
+.velu-chatbot__answer h5,
+.velu-chatbot__answer h6 {
+  margin: var(--s-2) 0 var(--s-4);
+  font-weight: 600;
+  line-height: var(--lh-heading, 1.3);
+}
+.velu-chatbot__answer h3 { font-size: var(--f-h5); }
+.velu-chatbot__answer h4 { font-size: var(--f-h6); }
+.velu-chatbot__answer h5,
+.velu-chatbot__answer h6 { font-size: var(--f-h7); }
+.velu-chatbot__answer ul,
+.velu-chatbot__answer ol {
+  margin: 0 0 var(--s-3);
+  padding-inline-start: var(--s-1);
+}
+.velu-chatbot__answer li {
+  margin: 0 0 var(--s-5);
+}
+.velu-chatbot__answer li::marker {
+  color: var(--muted-color);
+}
+.velu-chatbot__pre {
+  margin: 0 0 var(--s-3);
+  padding: var(--s-3);
+  overflow-x: auto;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+}
+.velu-chatbot__pre code {
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: var(--f-h7);
+  white-space: pre;
+}
+.velu-chatbot__answer blockquote {
+  margin: 0 0 var(--s-3);
+  padding-inline-start: var(--s-3);
+  border-inline-start: 2px solid var(--border-color);
+  color: var(--muted-color);
+}
+
+/* Inline citation chip */
+.velu-chatbot__cite {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.5em;
+  block-size: 1.5em;
+  padding: 0 var(--s-5);
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease;
+}
+.velu-chatbot__cite:hover {
+  background: var(--page-bg);
+  border-color: var(--accent-color);
+}
+
+/* Streaming caret */
+.velu-chatbot__caret {
+  display: inline-block;
+  inline-size: var(--s-4);
+  block-size: 1em;
+  vertical-align: text-bottom;
+  background: var(--accent-color);
+  animation: velu-chatbot-caret 0.9s steps(2) infinite;
+}
+@keyframes velu-chatbot-caret {
+  50% { opacity: 0; }
+}
+
+/* Sources card list */
+.velu-chatbot__sources {
+  margin-block-start: var(--s-2);
+}
+.velu-chatbot__source {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-2);
+  padding: var(--s-3) var(--s-2);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.12s ease;
+}
+.velu-chatbot__source:hover {
+  border-color: var(--accent-color);
+}
+.velu-chatbot__source-num {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5em;
+  block-size: 1.5em;
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
+  border-radius: var(--radius-sm);
+}
+.velu-chatbot__source-meta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-6);
+  min-inline-size: 0;
+}
+.velu-chatbot__source-title {
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-chatbot__source-path {
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  color: var(--muted-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Follow-ups */
+.velu-chatbot__followups {
+  margin-block-start: var(--s-1);
+}
+.velu-chatbot__followup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+  padding: var(--s-3) var(--s-2);
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  color: var(--text-color);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color 0.12s ease, color 0.12s ease;
+}
+.velu-chatbot__followup:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+.velu-chatbot__followup svg {
+  flex: none;
+}
+
+/* Message hover actions */
+.velu-chatbot__msg-actions {
+  margin-inline-start: calc(var(--s-3) * -1);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.velu-chatbot__msg--ai:hover .velu-chatbot__msg-actions,
+/* Keep the row visible once a vote is cast, so the selection stays
+   confirmed after the pointer leaves the message. */
+.velu-chatbot__msg-actions:has(.is-active) {
+  opacity: 1;
+}
+.velu-chatbot__msg-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.625em;
+  block-size: 1.625em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+}
+.velu-chatbot__msg-action:hover {
+  background: var(--surface-color);
+  color: var(--text-color);
+}
+/* Chosen thumb (up/down) — accent tint so the click is clearly registered. */
+.velu-chatbot__msg-action.is-active {
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  color: var(--accent-color);
+}
+
+/* ── Composer ───────────────────────────────────────────────────────── */
+.velu-chatbot__composer {
+  flex: none;
+  padding: var(--s-1);
+  background: var(--page-bg);
+  /* Section divider — --surface-color hairline matching the
+     chatbot's other structural section borders. The input field
+     INSIDE the composer keeps its --border-color (it's an
+     interactive element, not a section divider). */
+  border-block-start: var(--border-width) solid var(--surface-color);
+}
+.velu-chatbot__input-wrap {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s-3);
+  padding: var(--s-3);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.velu-chatbot__input-wrap:focus-within {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 var(--border-width) var(--accent-color);
+}
+.velu-chatbot__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  /* ~4 lines of body leading before the textarea starts scrolling. */
+  max-block-size: calc(1em * var(--lh-body) * 4);
+  padding: 0;
+  border: 0;
+  outline: none;
+  resize: none;
+  background: transparent;
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-chatbot__input::placeholder {
+  color: var(--muted-color);
+}
+.velu-chatbot__send {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface-color);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-chatbot__send.is-active {
+  background: var(--accent-color);
+  color: #fff;
+}
+.velu-chatbot__send:disabled {
+  cursor: not-allowed;
+}
+.velu-chatbot__foot {
+  margin-block-start: var(--s-3);
+  padding-inline: var(--s-5);
+  font-size: var(--f-h6);
+  font-weight: var(--weight-light);
+  color: var(--muted-color);
+}
+.velu-chatbot__foot kbd {
+  font-family: var(--font-mono);
+  font-size: var(--f-h7);
+  padding: 0 var(--s-5);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .velu-chatbot { transition: none; }
+  .velu-chatbot__wave rect,
+  .velu-chatbot__role.is-thinking span,
+  .velu-chatbot__caret { animation: none; }
+}