@frontera-sdk/chat-ui 1.50.40

package/src/styles.css

@@ -0,0 +1,996 @@
+/**
+ * Frontera chat UI.
+ *
+ * Every colour and metric is a custom property, so a host application themes
+ * the surface without overriding rules. Class names are prefixed `fr-` because
+ * this stylesheet lands in someone else's page and must not collide with it.
+ *
+ * Import once:
+ *   import '@frontera-sdk/chat-ui/styles.css'
+ */
+
+/*
+  The outer surface: conversation on the left, artifact pane on the right.
+
+  Themed here rather than on `.fr-chat` because the pane is a sibling of the
+  conversation, not a child of it — tokens set one level down would not reach
+  it, and the pane would render in the host page's palette.
+*/
+.fr-shell {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  isolation: isolate;
+  /*
+    Tokens live HERE, not on `.fr-chat`. The pane is a SIBLING of the
+    conversation — tokens declared one level down never reach it, and every
+    `var(--fr-*)` inside the pane resolved to nothing: a transparent (black on
+    a dark host) pane with an unresolved border. See `.fr-chat` for what each
+    alias means and why the fallbacks are load-bearing.
+  */
+  --fr-bg: var(--surface-chat, hsl(0 0% 100%));
+  --fr-surface: var(--surface, hsl(0 0% 98%));
+  --fr-bubble: var(--surface-raised-active, hsl(0 0% 94%));
+  --fr-border: var(--border, hsl(240 100% 6% / 0.08));
+  --fr-text: hsl(var(--foreground, 47 13% 14%));
+  --fr-muted: var(--muted-foreground, hsl(240 4% 46%));
+  --fr-accent: var(--primary, hsl(221 83% 53%));
+  --fr-accent-text: var(--primary-foreground, hsl(0 0% 100%));
+  --fr-danger: var(--destructive, hsl(0 72% 45%));
+  --fr-code: var(--inline-code, hsl(9 62% 45%));
+  --fr-code-bg: var(--inline-code-bg, hsl(0 0% 95.5%));
+  --fr-radius: 1rem;
+  --fr-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* The answer is 15px; the prompt one step under, at 14px — see .fr-bubble. */
+  --fr-font-size: 15px;
+}
+
+/*
+  BOTH panels ease `flex-grow`, which is the platform's push: one gives up
+  exactly the width the other takes (`PANE_ANIM_CLASS` in
+  chat-content-chrome.tsx). Suspended while the handle is being dragged — an
+  eased width would leave the panel lagging behind the cursor.
+*/
+.fr-panel-anim {
+  transition: flex-grow 150ms ease-out;
+}
+.fr-split:has([data-resize-handle-state="drag"]) .fr-panel-anim,
+/* Expand/restore snaps — `.fr-snap` is set for exactly one frame while the
+   fullscreen layout commits, matching the platform's mode switch. */
+.fr-split.fr-snap .fr-panel-anim {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fr-panel-anim { transition: none; }
+}
+
+/* The panel group fills the shell; the library sets the panels' widths. */
+.fr-split {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  /* The platform's group carries `overflow-hidden`; without it anything the
+     panels fail to contain widens the page itself. */
+  overflow: hidden;
+}
+
+/* The pane holds a fixed column; the conversation takes whatever is left and
+   is allowed to shrink — `min-width: 0`, without which a long unbroken line
+   in a reply pushes the pane off the edge instead of wrapping. */
+/* Width is the panel library's; this only paints the pane and its seam. The
+   border lives on the pane rather than the handle so a collapsed pane leaves
+   no line behind. */
+.fr-side-pane {
+  min-height: 0;
+  /* min-width matters since the pane's content stays MOUNTED while shut: a
+     flex item's default `min-width: auto` refuses to shrink below the
+     content's min-content width, so the collapsed 0% panel held the viewer's
+     width and pushed the whole page into a horizontal scroll. */
+  min-width: 0;
+  overflow: hidden;
+  background: var(--fr-bg);
+  border-left: 1px solid transparent;
+  transition: border-color 150ms ease-out;
+}
+.fr-side-pane:not([data-panel-size="0.0"]) {
+  border-left-color: var(--fr-border);
+}
+/* Fullscreen: the conversation is collapsed, so the pane's leading edge is the
+   surface's own — a seam there reads as a rendering artifact. `~` because the
+   resize handle sits between the two panels. */
+.fr-split > [data-panel-size="0.0"] ~ .fr-side-pane {
+  border-left-color: transparent;
+}
+
+/*
+  On a phone the pane is a SHEET, not a column.
+
+  The platform drops its split layout entirely under 768px and surfaces the
+  same content as a full-screen overlay — the canvas, the computer panel, an
+  artifact, the sources. This package kept the split at every width, so a
+  360px screen was asked to hold a readable conversation AND a document side
+  by side: the thread squeezed to its `minSize`, the pane to a strip, and the
+  summary and files the platform shows inline were effectively unreachable.
+
+  Done here rather than by branching the tree, deliberately. The panel group
+  owns the open/closed state, the mount/unmount of the viewer and the restore
+  of a conversation's tabs; a second layout would have to reproduce all three
+  and then drift from it. Taking the pane out of flow changes where it PAINTS
+  and leaves every one of those behaviours where it already works.
+
+  `!important` because `react-resizable-panels` writes `flex` inline on each
+  panel, and inline styles outrank a stylesheet. The overrides are scoped to
+  this breakpoint and to this package's own classes.
+*/
+@media (max-width: 767px) {
+  .fr-shell .fr-side-pane:not([data-panel-size="0.0"]) {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    /* Above the composer's own stacking, and clear of the home indicator. */
+    padding-bottom: env(safe-area-inset-bottom);
+    flex: none !important;
+    width: 100% !important;
+    border-left: none;
+  }
+  /*
+    A collapsed pane is `0%` wide in the flow and invisible. Fixed, it would
+    be a full-screen transparent layer over the conversation swallowing every
+    tap — so the closed state has to leave the page rather than shrink.
+  */
+  .fr-shell .fr-side-pane[data-panel-size="0.0"] {
+    display: none;
+  }
+  /* The conversation takes the whole width once the pane no longer occupies
+     any of it — otherwise it keeps the percentage the group assigned and
+     leaves a blank column beside the sheet. */
+  .fr-shell .fr-split > [data-panel]:first-child {
+    flex: 1 1 0% !important;
+  }
+  /* Nothing to drag between a thread and an overlay. */
+  .fr-shell .fr-split > [data-panel-resize-handle-id] {
+    display: none;
+  }
+}
+
+/* The pane's content chain: `RightPanel` is `h-full` + its own ScrollArea, so
+   this must actually BE the pane's height or the panel renders collapsed —
+   which looked like a bordered box floating over a void. */
+.fr-side-pane-surface {
+  height: 100%;
+  min-height: 0;
+  background: var(--fr-bg);
+  /* The pane is OUTSIDE `.fr-chat`, so without these it renders in the host
+     page's font and colour — which is what made the Outputs list look like a
+     different product from the conversation beside it. */
+  font-family: var(--fr-font);
+  color: var(--fr-text);
+  line-height: 1.5;
+}
+
+/* The positioning context for the floating composer. */
+.fr-chat {
+  position: relative;
+  min-width: 0;
+  /*
+    DERIVED from the platform's tokens, not a second copy of them.
+
+    These used to be literal colours, with a `prefers-color-scheme` block of
+    their own — a whole parallel palette beside the one `platform.css` defines.
+    Two palettes meant two dark switches, and they disagreed: the shell turned
+    dark with the OS while the copied components waited for a `dark` class, so
+    white cards sat on a black background and the surface looked half-themed.
+
+    One source of truth now. Each `--fr-*` is an alias, so a host overriding
+    either layer moves both, and dark happens once.
+
+    Aliased to the RAW tokens (`--background`), not Tailwind's `--color-*`.
+    That is not a style preference — it is the only thing that works. Tailwind
+    declares `--color-background: hsl(var(--background))` on `:root`, where it
+    is substituted once; descendants inherit the already-computed colour. So a
+    `dark` class further down the tree changes `--background` and the `--color-*`
+    alias never notices. The raw tokens ARE redeclared inside `.dark`, which is
+    what makes them follow.
+
+    Two shapes, deliberately preserved: some tokens hold bare channels for
+    `hsl()` to wrap, others a finished colour. Wrapping a finished colour, or
+    failing to wrap bare channels, yields an invalid value and the property
+    silently drops.
+
+    The fallbacks are load-bearing: `styles.css` can be imported WITHOUT
+    `platform.css` by a consumer composing their own layout from `./message`
+    and `./composer`, and an unresolved custom property paints nothing at all.
+  */
+  /*
+    `--surface-chat`, not `--background`.
+
+    The platform paints its whole chat container `bg-surface-chat`
+    (`chat-view.tsx`), and several components lean on that: the reasoning row's
+    icon sits in a `bg-surface-chat` pill that is invisible BECAUSE it matches
+    what is behind it. Using `--background` here left those pills a shade off
+    the thread, so a spacer read as a badge around the icon.
+  */
+  /* Declared on `.fr-shell` too — the pane is a sibling of `.fr-chat` and
+     needs the same tokens. Kept here as well so a consumer composing their own
+     layout from `./message` inside a bare `.fr-chat` still gets them. */
+  --fr-bg: var(--surface-chat, hsl(0 0% 100%));
+  --fr-surface: var(--surface, hsl(0 0% 98%));
+  --fr-bubble: var(--surface-raised-active, hsl(0 0% 94%));
+  --fr-border: var(--border, hsl(240 100% 6% / 0.08));
+  --fr-text: hsl(var(--foreground, 47 13% 14%));
+  --fr-muted: var(--muted-foreground, hsl(240 4% 46%));
+  --fr-accent: var(--primary, hsl(221 83% 53%));
+  --fr-accent-text: var(--primary-foreground, hsl(0 0% 100%));
+  --fr-danger: var(--destructive, hsl(0 72% 45%));
+  --fr-code: var(--inline-code, hsl(9 62% 45%));
+  --fr-code-bg: var(--inline-code-bg, hsl(0 0% 95.5%));
+  --fr-radius: 1rem;
+  --fr-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --fr-font-size: 15px;
+
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  /*
+    The platform's `@container/chatpane` context. The vendored components
+    ship rules against this container — the summary card's gutter, the
+    composer's narrow-width folds — and every one of them was inert here
+    because nothing declared the container. Declared on `.fr-chat` because
+    that IS the pane the platform measures: it narrows when the side pane
+    opens, which is exactly what those rules respond to.
+  */
+  container: chatpane / inline-size;
+  /* The summary card is `absolute inset-y-0 right-0`, so it needs a
+     positioning context. Without one it escapes to the nearest positioned
+     ancestor — the host's page — and lands somewhere nobody chose. */
+  position: relative;
+  /* The platform's inner column carries `overflow-x-hidden`: a wide code
+     block or table scrolls INSIDE its message, never the conversation. */
+  overflow-x: hidden;
+  background: var(--fr-bg);
+  color: var(--fr-text);
+  font-family: var(--fr-font);
+  font-size: var(--fr-font-size);
+  line-height: 1.6;
+}
+
+/*
+  Dark mode lives in `platform.css`, keyed off the `dark` class that
+  `<FronteraChat>` puts on this element — the same mechanism the platform uses,
+  so every `dark:` utility inside the copied components switches with it.
+
+  There is deliberately no `prefers-color-scheme` block here any more. It was a
+  SECOND switch on a second palette, and the two could not agree; the component
+  reads the OS itself and sets the class, which keeps one decision in one place
+  and lets a host override it with the `dark` prop.
+*/
+
+.fr-chat *,
+.fr-chat *::before,
+.fr-chat *::after {
+  box-sizing: border-box;
+}
+
+/*
+  The composer on an empty conversation.
+
+  Sits directly under the greeting instead of at the bottom edge. `max-width`
+  matches the thread column so the input is the same width it will be once the
+  conversation starts — otherwise sending the first message visibly resizes the
+  control someone just typed into.
+
+  The dock's own positioning (absolute, bottom, scrollbar inset) belongs to the
+  dock; here the input is ordinary flow content.
+*/
+.fr-empty-composer {
+  width: 100%;
+  max-width: 49rem;
+  margin: 20px auto 0;
+}
+
+/* ── thread ─────────────────────────────────────────────────────────── */
+
+/*
+  The platform's TWO-LAYER thread, reproduced exactly:
+
+  `.fr-thread` is the VIEWPORT — full width, owns the scroll, carries the
+  summary-card gutter (`pr-[320px]` lives on the platform's viewport too) and
+  nothing else.
+
+  `.fr-thread-column` is the CONTENT COLUMN — `max-w-view mx-auto`, the
+  platform's `gap-6 px-3 pt-6 pb-24 md:gap-2 md:px-4 md:pt-16` plus the
+  composer-tracked bottom padding. Putting the paddings on the viewport
+  instead produced an asymmetric box (`padding: 64px 320px 166px 0`) that
+  matched the platform's numbers but not its geometry.
+*/
+.fr-thread {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  transition: padding-right 150ms ease-out;
+  /* The platform viewport's `overscroll-contain`: reaching the end of the
+     thread must not start scrolling the host page. */
+  overscroll-behavior: contain;
+}
+
+.fr-thread-column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* 49rem — `max-w-view` / `--container-3xl`, centred like `mx-auto`. */
+  max-width: 49rem;
+  margin-inline: auto;
+  /* So the empty state's `margin: auto` can centre vertically. */
+  min-height: 100%;
+  /* The platform column's `gap-6 md:gap-2`. */
+  gap: 24px;
+  /*
+    Top clears the floating header (`md:pt-16`). Bottom is the composer's
+    measured height plus THREAD_TAIL_GAP_PX (64px) — the fallback covers the
+    first frame, before the observer has measured.
+  */
+  padding: 64px 12px calc(var(--fr-composer-h, 96px) + 64px);
+}
+@media (min-width: 768px) {
+  .fr-thread-column {
+    gap: 8px;
+    padding-inline: 16px;
+  }
+}
+
+/* Burst spacing: consecutive bubbles from the person pull together, the
+   platform's `-mt-5 md:-mt-1` on the message wrapper — net ~4px against the
+   thread gap at either width. */
+.fr-turn-user + .fr-turn-user {
+  margin-top: -20px;
+}
+@media (min-width: 768px) {
+  .fr-turn-user + .fr-turn-user {
+    margin-top: -4px;
+  }
+}
+
+.fr-empty {
+  margin: auto;
+}
+
+/*
+  Room for the floating summary card — the platform's
+  `md:@max-[1520px]/chatpane:pr-[320px]` on both the thread and the composer.
+  On a wide pane the card overlays empty gutter and costs nothing; under
+  1520px the message column and the composer both step aside, or the card
+  sits on top of the conversation it is summarising.
+*/
+@container chatpane (max-width: 1520px) and (min-width: 768px) {
+  .fr-thread[data-reserve-gutter],
+  .fr-composer-dock[data-reserve-gutter] {
+    padding-right: 320px;
+  }
+}
+
+/* One turn — a plain block inside the column, like the platform's
+   `.thread-message` wrapper. Width, inset and centring all belong to
+   `.fr-thread-column` now; a turn only stacks its own parts. */
+.fr-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+/* The user's turn is a bubble; the agent's is not. An agent reply can carry
+   headings, code and tables, and boxing that reads as cramped.
+   The turn keeps the column's full width and aligns its BUBBLE right —
+   `align-self: flex-end` would instead throw the whole column to the edge of
+   the screen, away from the reply. */
+.fr-turn-user {
+  align-items: flex-end;
+}
+
+.fr-bubble {
+  background: var(--fr-bubble);
+  color: var(--fr-text);
+  /* 12px / 8px and a full 1rem radius — the platform's own bubble metrics. */
+  padding: 8px 12px;
+  border-radius: var(--fr-radius);
+  /* One step under the answer: a prompt is something you wrote and glance back
+     at, not the thing you came back to read. */
+  font-size: 0.933em;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.fr-author {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fr-muted);
+  letter-spacing: 0.01em;
+}
+
+/*
+  The composer, floating over the foot of the scroll area.
+
+  Absolute so the thread's scrollbar spans the pane's full height and reaches
+  the true bottom, the way the platform's does — a composer in the flow cuts
+  the scroll region short and leaves the thumb ending above it.
+*/
+/*
+  Content fading out under the composer.
+
+  A hard cut at the composer's top edge reads as content being clipped; the
+  gradient says it continues beneath. Matches the platform: 4rem tall, from the
+  chat surface colour to transparent.
+*/
+.fr-scroll-fade {
+  position: absolute;
+  left: 0;
+  /* ABOVE the composer, not behind it — the platform moves its fade with the
+     composer's measured height for exactly this reason. Anchored at 0 it sat
+     entirely under the opaque dock and did nothing, so content met the
+     composer at a hard edge. */
+  bottom: var(--fr-composer-h, 96px);
+  z-index: 10;
+  height: 4rem;
+  pointer-events: none;
+  background: linear-gradient(to top, var(--fr-bg), transparent);
+}
+
+/* Scroll-to-bottom, the platform's own affordance: a raised circle floating
+   just above the composer, centred on the column (nudged by half the
+   scrollbar). Shown only once the reader has scrolled away from the tail. */
+.fr-scroll-down {
+  position: absolute;
+  bottom: calc(var(--fr-composer-h, 96px) + 16px);
+  transform: translateX(-50%);
+  z-index: 30;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  border: 1px solid var(--fr-border);
+  background: var(--surface-raised, var(--fr-surface));
+  color: var(--fr-text);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
+}
+.fr-scroll-down:hover {
+  background: var(--surface-raised-hover, var(--fr-bubble));
+}
+
+.fr-composer-dock {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 20;
+  transition: padding-right 150ms ease-out;
+  /*
+    OPAQUE, and that is the point: the composer floats over the scroll area, so
+    without a background the conversation scrolls visibly through it.
+  */
+  background: var(--fr-bg);
+  /*
+    Horizontal only. The composer carries its own bottom padding —
+    `pb-4 max-md:pb-[max(1rem,env(safe-area-inset-bottom))]` — which also
+    clears the home indicator on a phone. Adding any here double-pads it and
+    breaks the safe-area handling.
+  */
+  padding: 0 20px;
+}
+
+/* ── header ─────────────────────────────────────────────────────────── */
+
+/*
+  Sits above the thread, full width, and stays put while the conversation
+  scrolls under it — the title and the summary control are about the whole
+  conversation, not the part currently in view.
+*/
+/*
+  A transparent overlay floating above the conversation, exactly the
+  platform's (`session-view.tsx`): `absolute inset-x-0 top-0 z-20 h-10` with
+  `transition-colors duration-200`. It only turns solid — background, blur and
+  a bottom border — when the centred message column would slide under the
+  title or the actions (see the clash measurement in `header.tsx`); on a wide
+  view the column clears both sides and the header stays invisible.
+*/
+.fr-header {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  z-index: 20;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 12px;
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  transition: background-color 200ms, border-color 200ms;
+}
+.fr-header[data-solid] {
+  border-bottom-color: var(--border-secondary, var(--fr-border));
+  background: color-mix(in srgb, var(--fr-bg) 95%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+/*
+  The phone's bar: solid, in the flow, and tall enough to tap.
+
+  The floating header works on a desktop because the thread has gutters for it
+  to float over. At 360px it sat directly on the first reply, and the pinned
+  pane toggle sat on the conversation. The platform's `MobileChatHeader` is
+  `sticky`, `h-13` and opaque for exactly that reason; this matches it.
+*/
+.fr-header-mobile {
+  position: sticky;
+  inset-inline: auto;
+  height: auto;
+  min-height: 52px;
+  /* Under the notch on a fullscreen phone browser, not behind it. */
+  padding-top: env(safe-area-inset-top);
+  padding-inline: 12px;
+  gap: 8px;
+}
+/*
+  The host's session control, sized like the ones opposite it.
+
+  The slot takes whatever the host passes — a bare `<button>`, their own
+  icon-button component, an anchor — so the 40px tap target lives on the
+  wrapper rather than depending on how they styled the thing inside.
+*/
+.fr-header-mobile-lead {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  min-height: 40px;
+  color: var(--fr-muted);
+}
+.fr-header-mobile-lead > * {
+  /* A host button brings its own background; inside this bar it should read
+     as part of the row, the way the platform's ghost hamburger does. */
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+/* The title takes the row; the controls keep their size at its expense. */
+.fr-header-mobile .fr-header-title {
+  flex: 1;
+}
+/*
+  The Files control, squared off rather than a pill.
+
+  The platform marks it pressed while its sheet is up — the same "the surface I
+  opened is open" mark the summary toggle wears — because the sheet docks below
+  this bar, so the button that opened it stays on screen. Left at rest, the bar
+  reads as if nothing were showing and the sheet as if it arrived on its own.
+*/
+.fr-header-files {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* 40px: a tap target smaller than a fingertip is a miss. */
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: calc(var(--fr-radius, 8px) - 2px);
+  background: transparent;
+  color: var(--fr-muted);
+  cursor: pointer;
+}
+.fr-header-files:hover {
+  color: var(--fr-text);
+}
+/* The summary shares the Files control's box but stays a pill, matching the
+   platform's round ghost button beside its squared-off Files mark. */
+.fr-header-summary-button {
+  border-radius: 999px;
+}
+.fr-header-files[data-open] {
+  background: var(--surface-raised-active, color-mix(in srgb, var(--fr-text) 10%, transparent));
+  color: var(--fr-text);
+}
+
+.fr-header-mobile-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+}
+/* No pinned overlay at this width, so the header keeps its own inset — the
+   desktop rules above reserve 44px for a control that is now in the row. */
+@media (max-width: 767px) {
+  .fr-shell:has(.fr-header-actions) .fr-header {
+    padding-right: 12px;
+  }
+}
+
+/* The platform's always-on soften at the top of the thread:
+   `h-12 bg-gradient-to-b from-surface-chat/50 to-transparent z-10`. */
+.fr-top-fade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 3rem;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--fr-bg) 50%, transparent),
+    transparent
+  );
+}
+
+/* Avatar + title hug each other so the group's right edge can be measured
+   against the message column for clash detection (see header.tsx). */
+.fr-header-title-group {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The pinned actions overlay (`.fr-header-actions`) occupies the header's
+   right edge; the in-header summary control stops short of it — but only
+   while the pane is SHUT. Open, the pinned toggle sits over the pane, the
+   chat header gets its full width back, and the summary control returns
+   flush to the column's edge exactly as the platform's does. */
+.fr-shell:has(.fr-header-actions) .fr-header {
+  padding-right: 44px;
+}
+.fr-shell:has(.fr-side-pane:not([data-panel-size="0.0"])) .fr-header {
+  padding-right: 12px;
+}
+
+.fr-header-title {
+  font-size: 14px;
+  font-weight: 550;
+  color: var(--fr-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* The summary, at the trailing edge of the CONVERSATION column — it
+   summarises the session, so it travels with it. */
+.fr-header-summary {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/*
+  The pane's own toggle, pinned across the whole surface.
+
+  `inset-inline: 0` with `justify-content: flex-end` puts these at the right
+  edge of everything on screen — the conversation when the pane is shut, the
+  pane when it is open. The controls therefore never move; the layout animates
+  underneath them, which is what makes the handover look seamless instead of
+  the buttons sliding across.
+
+  The row height and inset match the header's, so it lands exactly where a
+  trailing header button would have sat.
+*/
+.fr-header-actions {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  height: 40px;
+  padding-inline: 12px;
+  /* Click-through: the conversation and the pane's tab strip sit underneath
+     this row and must stay reachable. Only the buttons take the pointer. */
+  pointer-events: none;
+}
+.fr-header-actions > * {
+  pointer-events: auto;
+}
+
+.fr-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-wrap: anywhere;
+}
+
+.fr-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* ── markdown ───────────────────────────────────────────────────────── */
+
+.fr-markdown > *:first-child { margin-top: 0; }
+.fr-markdown > *:last-child { margin-bottom: 0; }
+.fr-markdown p { margin: 0 0 0.75em; }
+.fr-markdown h1, .fr-markdown h2, .fr-markdown h3 {
+  margin: 1.2em 0 0.5em;
+  line-height: 1.3;
+  font-weight: 650;
+}
+.fr-markdown h1 { font-size: 1.4em; }
+.fr-markdown h2 { font-size: 1.2em; }
+.fr-markdown h3 { font-size: 1.05em; }
+.fr-markdown ul, .fr-markdown ol { margin: 0 0 0.75em; padding-left: 1.4em; }
+.fr-markdown li { margin: 0.2em 0; }
+.fr-markdown a { color: var(--fr-accent); }
+.fr-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  /* A warm code accent on a fill one step off the surface, so the chip still
+     reads inside a raised bubble. */
+  color: var(--fr-code);
+  background: var(--fr-code-bg);
+  border: 1px solid var(--fr-border);
+  border-radius: 5px;
+  padding: 0.1em 0.35em;
+}
+.fr-markdown pre {
+  background: var(--fr-surface);
+  border: 1px solid var(--fr-border);
+  border-radius: 10px;
+  padding: 12px 14px;
+  overflow-x: auto;
+  margin: 0 0 0.75em;
+}
+.fr-markdown pre code { background: none; border: 0; padding: 0; color: inherit; }
+.fr-markdown blockquote {
+  margin: 0 0 0.75em;
+  padding-left: 12px;
+  border-left: 3px solid var(--fr-border);
+  color: var(--fr-muted);
+}
+/* Wide tables scroll inside the message rather than stretching the layout. */
+.fr-markdown table { display: block; overflow-x: auto; border-collapse: collapse; }
+.fr-markdown th, .fr-markdown td {
+  border: 1px solid var(--fr-border);
+  padding: 6px 10px;
+  text-align: left;
+}
+
+/* ── reasoning ──────────────────────────────────────────────────────── */
+
+.fr-reasoning {
+  border: 1px solid var(--fr-border);
+  border-radius: 10px;
+  padding: 8px 12px;
+  color: var(--fr-muted);
+  font-size: 0.93em;
+}
+.fr-reasoning summary { cursor: pointer; user-select: none; }
+.fr-reasoning-body { margin-top: 8px; white-space: pre-wrap; }
+
+/* ── tool activity ──────────────────────────────────────────────────── */
+
+.fr-tool {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  align-self: flex-start;
+  border: 1px solid var(--fr-border);
+  border-radius: 999px;
+  padding: 5px 12px;
+  font-size: 0.88em;
+  color: var(--fr-muted);
+  background: var(--fr-surface);
+}
+.fr-tool.is-running { border-color: var(--fr-accent); color: var(--fr-accent); }
+.fr-tool.is-failed { border-color: var(--fr-danger); color: var(--fr-danger); }
+.fr-tool-head { display: flex; align-items: center; gap: 7px; }
+.fr-tool-name { font-weight: 500; }
+.fr-tool-error { color: var(--fr-danger); font-size: 0.95em; }
+
+/* ── attachments and artifacts ──────────────────────────────────────── */
+
+.fr-image { max-width: 100%; border-radius: 10px; }
+
+.fr-file,
+.fr-artifact {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  align-self: flex-start;
+  border: 1px solid var(--fr-border);
+  border-radius: 10px;
+  background: var(--fr-surface);
+  color: inherit;
+  font: inherit;
+  padding: 8px 12px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.fr-artifact:disabled { cursor: default; }
+.fr-file:hover,
+.fr-artifact:not(:disabled):hover { border-color: var(--fr-accent); }
+
+/* ── typing ─────────────────────────────────────────────────────────── */
+
+.fr-typing { display: flex; gap: 4px; padding: 6px 0; }
+.fr-typing span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--fr-muted);
+  animation: fr-bounce 1.2s infinite ease-in-out;
+}
+.fr-typing span:nth-child(2) { animation-delay: 0.15s; }
+.fr-typing span:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes fr-bounce {
+  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-3px); }
+}
+
+.fr-icon { width: 15px; height: 15px; flex: none; }
+.fr-spin { animation: fr-rotate 0.9s linear infinite; }
+
+@keyframes fr-rotate { to { transform: rotate(360deg); } }
+
+/* Respect a stated preference for less motion; the states remain legible
+   without it. */
+@media (prefers-reduced-motion: reduce) {
+  .fr-typing span, .fr-spin { animation: none; }
+}
+
+/* ── errors ─────────────────────────────────────────────────────────── */
+
+.fr-error {
+  border: 1px solid var(--fr-danger);
+  border-radius: 10px;
+  padding: 10px 12px;
+  color: var(--fr-danger);
+  font-size: 0.93em;
+}
+
+/* ── composer ───────────────────────────────────────────────────────── */
+
+/* The composer sits under the conversation, in the same column — an input
+   spanning a wide screen edge to edge does not read as part of the thread
+   above it. */
+.fr-composer {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  width: 100%;
+  max-width: 46rem;
+  margin: 0 auto;
+  padding: 12px 20px 16px;
+  background: var(--fr-bg);
+}
+
+.fr-composer-input {
+  flex: 1;
+  resize: none;
+  /* Thin, and only when the text actually overflows: a full scrollbar with
+     arrows inside a one-line field reads as a broken control. */
+  scrollbar-width: thin;
+  font: inherit;
+  color: inherit;
+  background: var(--fr-surface);
+  border: 1px solid var(--fr-border);
+  border-radius: var(--fr-radius);
+  padding: 10px 14px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.fr-composer-input:focus {
+  outline: none;
+  border-color: var(--fr-accent);
+}
+.fr-composer-input::placeholder { color: var(--fr-muted); }
+
+.fr-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: var(--fr-accent);
+  color: var(--fr-accent-text);
+  cursor: pointer;
+  flex: none;
+}
+.fr-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.fr-btn-stop { background: var(--fr-surface); color: var(--fr-danger); border-color: var(--fr-border); }
+.fr-btn:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
+
+/* A delegated task is work happening on the reader's behalf, not a mechanism
+   they invoked — given a little more room than a plain tool chip. */
+.fr-tool.is-delegation {
+  border-radius: 10px;
+  padding: 7px 12px;
+}
+.fr-tool-task {
+  color: var(--fr-text);
+  opacity: 0.85;
+}
+.fr-tool-head { flex-wrap: wrap; }
+
+/* ── new session ────────────────────────────────────────────────────── */
+
+/* The empty state is centred in the thread, not pinned to the top: before a
+   conversation exists there is no reading order to respect, and a greeting at
+   the top of an empty column reads as a page that failed to load. */
+.fr-empty {
+  /* Centred in the column, which already carries the width and inset. */
+  margin: auto;
+  width: 100%;
+}
+
+.fr-new-session {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  align-items: center;
+  text-align: center;
+}
+
+.fr-new-session-title {
+  margin: 0;
+  font-size: 1.55em;
+  font-weight: 650;
+  line-height: 1.25;
+  color: var(--fr-text);
+}
+
+/* Two columns, because four cards in a row become unreadably narrow and a
+   single column pushes the composer off a short screen. */
+.fr-shortcuts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  width: 100%;
+}
+
+.fr-shortcut {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: flex-start;
+  text-align: left;
+  padding: 12px 14px;
+  border-radius: var(--fr-radius);
+  border: 1px solid var(--fr-border);
+  background: var(--fr-surface);
+  color: var(--fr-text);
+  font: inherit;
+  cursor: pointer;
+}
+.fr-shortcut:hover { border-color: var(--fr-accent); }
+.fr-shortcut:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }
+
+.fr-shortcut-label { font-weight: 550; }
+.fr-shortcut-desc { color: var(--fr-muted); font-size: 0.9em; }
+
+@media (max-width: 640px) {
+  .fr-shortcuts { grid-template-columns: 1fr; }
+}
+
+/* ── pending decisions ───────────────────────────────────────────────── */
+
+/*
+  Nothing here any more, on purpose.
+
+  The approval and connect rail is styled with the platform's own Tailwind
+  classes rather than `fr-*` rules, because it sits directly on the copied
+  composer: a hand-written near-match reads as a bug in the product, not as a
+  difference in ours. Tailwind scans this package's `src`, so those classes
+  compile into `dist/platform.css` alongside the vendored components'.
+*/
+