@quilltap/theme-storybook 1.0.96 → 1.0.98

package/src/css/qt-components.css

@@ -1057,13 +1057,11 @@
 
 /**
  * NanoGPT provider badge (primary/accent semantic)
- * Same border quirk as the ollama badge: --qt-badge-primary-border has no
- * default definition.
  */
 .qt-badge-provider-nanogpt {
   background: var(--qt-badge-primary-bg);
   color: var(--qt-badge-primary-fg);
-  border: 1px solid var(--qt-badge-primary-border);
+  border: 1px solid var(--qt-badge-primary-border, var(--color-primary));
 }
 
 /**
@@ -1403,7 +1401,7 @@
 
 .qt-floating-dialog-close:hover {
   background: var(--color-accent);
-  color: var(--color-foreground);
+  color: var(--color-accent-foreground);
 }
 
 .qt-floating-dialog-body {
@@ -1416,1256 +1414,2715 @@
 }
 
 /* ==========================================================================
-   BRAHMA CONSOLE LAUNCHER - The always-on button beside the left rail
-   Sits in the topmost floating layer so it stays reachable over any modal.
+   HELP CHAT - Message bubbles, composer, and UI elements
+   Used by the contextual help chat system
    ========================================================================== */
 
-.qt-brahma-launcher {
-  position: fixed;
-  left: calc(var(--qt-left-sidebar-collapsed-width) + var(--qt-brahma-launcher-offset));
-  bottom: var(--qt-brahma-launcher-offset);
-  z-index: var(--qt-floating-layer-z);
-  width: var(--qt-brahma-launcher-size);
-  height: var(--qt-brahma-launcher-size);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: var(--qt-brahma-launcher-bg);
-  color: var(--qt-brahma-launcher-fg);
-  border: 2px solid var(--qt-brahma-launcher-ring);
-  box-shadow: var(--qt-brahma-launcher-shadow);
-  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
-}
-
-.qt-brahma-launcher:hover {
-  background: var(--qt-brahma-launcher-hover-bg);
-  transform: scale(1.06);
+/**
+ * Help chat message bubble — user messages
+ */
+.qt-help-msg-user {
+  border-radius: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  max-width: 80%;
 }
 
-.qt-brahma-launcher:focus-visible {
-  outline: 2px solid var(--qt-brahma-launcher-ring);
-  outline-offset: 3px;
+.qt-help-msg-user :last-child,
+.qt-help-msg-assistant :last-child {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
 }
 
-.qt-brahma-launcher-active,
-.qt-brahma-launcher-active:hover {
-  background: var(--qt-brahma-launcher-active-bg);
-  color: var(--qt-brahma-launcher-active-fg);
+/**
+ * User bubbles render markdown through MessageContent, whose `.qt-prose-auto`
+ * pins `--tw-prose-body` to the global foreground in dark themes. Left alone,
+ * that prose colour overrides the bubble's `text-primary-foreground`, leaving
+ * light prose on the primary fill — unreadable in dark themes such as
+ * Madman's Box. Pin the prose body (and plain text) back to the primary
+ * foreground, mirroring the Salon's user-bubble treatment.
+ */
+.qt-help-msg-user .qt-chat-message-content {
+  --tw-prose-body: var(--color-primary-foreground);
+  --tw-prose-invert-body: var(--color-primary-foreground);
+  color: var(--color-primary-foreground);
 }
 
-.qt-brahma-launcher-icon {
-  width: 60%;
-  height: 60%;
+/**
+ * Help chat message bubble — assistant messages
+ */
+.qt-help-msg-assistant {
+  border-radius: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  background-color: var(--color-muted);
+  color: var(--color-foreground);
+  max-width: 80%;
 }
 
-/* ==========================================================================
-   SLIDE-OVER PANELS
-   ========================================================================== */
-
-.qt-slide-over-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 55;
-  background-color: var(--qt-dialog-backdrop);
-  opacity: 0;
-  transition: opacity 200ms ease;
-  pointer-events: none;
+/**
+ * Help chat bubble tail — triangular pointer toward sender
+ */
+.qt-help-tail {
+  flex-shrink: 0;
+  width: 8px;
+  height: 12px;
+  align-self: flex-start;
+  margin-top: 12px;
 }
 
-.qt-slide-over-overlay[data-open="true"] {
-  opacity: 1;
-  pointer-events: auto;
+.qt-help-tail-user {
+  color: var(--theme-primary);
 }
 
-.qt-slide-over-panel {
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 55;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--qt-dialog-bg);
-  border-left: 1px solid var(--qt-dialog-border);
-  box-shadow: var(--qt-dialog-shadow);
-  transform: translateX(100%);
-  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+.qt-help-tail-assistant {
+  color: var(--theme-muted);
 }
 
-.qt-slide-over-panel[data-open="true"] {
-  transform: translateX(0);
+/**
+ * Help chat message character name label
+ */
+.qt-help-msg-character-name {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  color: var(--color-muted-foreground);
+  margin-bottom: 0.25rem;
 }
 
-.qt-slide-over-header {
+/**
+ * Help chat avatar — small circular avatar in message list
+ */
+.qt-help-avatar {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  background-color: var(--color-muted);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--qt-dialog-border);
-}
-
-.qt-inspector-entry {
-  transition: all 150ms ease;
-  border-radius: var(--qt-card-radius);
-  background: var(--qt-card-bg);
-  border: 1px solid color-mix(in srgb, var(--qt-card-border) calc(var(--qt-card-border-opacity, 1) * 100%), transparent);
+  justify-content: center;
+  overflow: hidden;
+  margin-top: 2px;
+  margin-right: 4px;
 }
 
-.qt-inspector-entry:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+/**
+ * Help chat composer — input area at bottom
+ */
+.qt-help-composer {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid var(--qt-dialog-border);
+  background: var(--qt-dialog-bg);
 }
 
-.qt-inspector-entry-highlight {
-  animation: qt-inspector-highlight 2s ease-out;
+.qt-help-composer-input {
+  flex: 1 1 0%;
+  resize: none;
+  border-radius: var(--radius-lg);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border: 1px solid var(--qt-input-border, var(--color-input));
+  background: var(--qt-input-bg, var(--color-background));
 }
 
-@keyframes qt-inspector-highlight {
-  0% {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent);
-  }
-  100% {
-    box-shadow: 0 0 0 0px transparent;
-  }
+.qt-help-composer-input::placeholder {
+  color: var(--color-muted-foreground);
 }
 
-/* ==========================================================================
-   TAB COMPONENTS
-   ========================================================================== */
-
-.qt-tab-group {
-  display: flex;
-  gap: var(--qt-tab-group-gap);
-  border-bottom: 1px solid var(--color-border);
+.qt-help-composer-input:focus-visible {
+  outline-style: none;
+  box-shadow: 0 0 0 2px var(--color-ring);
 }
 
-.qt-tab {
-  padding: var(--qt-tab-padding-y) var(--qt-tab-padding-x);
-  font-size: var(--qt-tab-font-size);
-  font-weight: var(--qt-tab-font-weight);
-  color: var(--qt-tab-fg);
-  background-color: var(--qt-tab-bg);
-  border: none;
-  border-radius: var(--qt-tab-radius);
-  cursor: pointer;
-  transition: all 150ms;
+.qt-help-composer-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-.qt-tab:hover {
-  color: var(--color-foreground);
+.qt-help-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  height: 38px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
 }
 
-.qt-tab-active {
-  background-color: var(--qt-tab-active-bg);
-  color: var(--qt-tab-active-fg);
+.qt-help-composer-send:disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.qt-tab-content {
-  padding: 1rem 0;
+.qt-help-composer-send:hover:not(:disabled) {
+  opacity: 0.9;
 }
 
-/* ==========================================================================
-   CHAT COMPONENTS
-   ========================================================================== */
-
-.qt-chat-message {
-  padding: var(--qt-chat-message-padding);
-  border-radius: var(--qt-chat-message-radius);
-  max-width: 80%;
+/**
+ * Help chat character selection pill
+ */
+.qt-help-char-pill {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  color: var(--color-muted-foreground);
+  border: 1px solid var(--qt-dialog-border);
 }
 
-.qt-chat-message-user {
-  background-color: var(--qt-chat-user-bg);
-  color: var(--qt-chat-user-fg);
-  margin-left: auto;
+.qt-help-char-pill:hover {
+  border-color: var(--theme-primary);
+  opacity: 0.7;
 }
 
-.qt-chat-message-assistant {
-  background-color: var(--qt-chat-assistant-bg);
-  color: var(--qt-chat-assistant-fg);
-  border: 1px solid var(--color-border);
+.qt-help-char-pill[data-selected="true"] {
+  border-color: var(--theme-primary);
+  background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
+  color: var(--theme-primary);
 }
 
 /**
- * Whisper message — private messages between characters, not heard by all.
+ * Help chat past chat list item
  */
-.qt-chat-message-whisper {
-  background: var(--qt-chat-whisper-bg);
-  color: var(--qt-chat-whisper-fg);
-  border: 2px dashed var(--qt-chat-whisper-border);
-  font-style: italic;
+.qt-help-past-chat {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
 }
 
-.qt-chat-whisper-label {
-  font-size: 0.75rem;
-  color: var(--qt-chat-whisper-label-fg);
-  font-style: italic;
-  margin-bottom: 0.25rem;
+.qt-help-past-chat:hover {
+  background: var(--color-accent);
 }
 
-.qt-chat-message-whisper-overheard {
-  opacity: 0.6;
+/**
+ * Help chat section label
+ */
+.qt-help-section-label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  color: var(--color-muted-foreground);
+  margin-bottom: 0.5rem;
 }
 
 /**
- * Pascal result — the outcome of a custom tool (pseudo-tool) roll, announced by
- * Pascal the Croupier. The accent carries the outcome's semantic `state`.
- * Built on the --qt-alert-* families, which every bundled theme defines.
+ * Help chat error banner
  */
-.qt-pascal-result {
-  border-left: 3px solid var(--qt-alert-info-border);
+.qt-help-error {
   padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
+  color: var(--color-destructive);
+  border-bottom: 1px solid color-mix(in srgb, var(--color-destructive) 20%, transparent);
 }
 
-.qt-pascal-result--success {
-  border-left-color: var(--qt-alert-success-border);
-}
-
-.qt-pascal-result--partial {
-  border-left-color: var(--qt-alert-warning-border);
-}
-
-.qt-pascal-result--failure {
-  border-left-color: var(--qt-alert-error-border);
+.qt-help-nav-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  background: var(--qt-help-nav-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
+  color: var(--qt-help-nav-fg, var(--color-primary));
+  border: 1px solid var(--qt-help-nav-border, color-mix(in srgb, var(--color-primary) 20%, transparent));
 }
 
-.qt-pascal-result--info {
-  border-left-color: var(--qt-alert-info-border);
+.qt-help-nav-button:hover {
+  background: var(--qt-help-nav-hover-bg, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  border-color: var(--qt-help-nav-hover-border, color-mix(in srgb, var(--color-primary) 40%, transparent));
 }
 
-/* --------------------------------------------------------------------------
-   ANSWER-CONFIRMATION BADGE
-   A quiet per-message verdict marker (Vouched / Amended / Stood by /
-   Unvetted). The glyph carries the state; a tooltip holds the discrepancy
-   notes. Metadata, not an alarm.
-   -------------------------------------------------------------------------- */
+/* Suggested links container — appears below messages with search-derived links */
+.qt-help-suggested-links {
+  padding-left: 2.5rem;
+  padding-top: 0.25rem;
+}
 
-.qt-confirmation-badge {
+.qt-help-suggested-links-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+  color: var(--qt-help-suggested-label, var(--color-muted-foreground));
+}
+
+.qt-help-suggested-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.2rem;
-  padding: 0.05rem 0.4rem;
-  border-radius: 0.375rem;
-  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
-  background: transparent;
-  font: inherit;
-  line-height: 1.4;
-  cursor: help;
-  color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
-  opacity: 0.8;
-  user-select: none;
-  white-space: nowrap;
-  transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
+  gap: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 11px;
+  border-radius: 0.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  background: var(--qt-help-suggested-bg, color-mix(in srgb, var(--color-muted) 50%, transparent));
+  color: var(--qt-help-suggested-fg, var(--color-muted-foreground));
+  border: 1px solid var(--qt-help-suggested-border, var(--color-border));
 }
 
-/* The badge sits among the message action icons and answers the pointer the
-   same way they do. */
-.qt-confirmation-badge:hover,
-.qt-confirmation-badge:focus-visible {
-  opacity: 1;
-  border-color: color-mix(in srgb, currentColor 45%, transparent);
-  background: color-mix(in srgb, var(--color-muted) 50%, transparent);
+.qt-help-suggested-link:hover {
+  background: var(--qt-help-suggested-hover-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
+  color: var(--qt-help-suggested-hover-fg, var(--color-primary));
+  border-color: var(--qt-help-suggested-hover-border, color-mix(in srgb, var(--color-primary) 30%, transparent));
 }
 
-/* The tinted states (stood-by, amended) keep their own colour on hover; the
-   quiet ones brighten to the foreground the way the action icons do. */
-.qt-confirmation-badge[data-confirmation-state="vouched"]:hover,
-.qt-confirmation-badge[data-confirmation-state="vouched"]:focus-visible,
-.qt-confirmation-badge[data-confirmation-state="unvetted"]:hover,
-.qt-confirmation-badge[data-confirmation-state="unvetted"]:focus-visible {
-  color: var(--color-foreground);
+/* Entity picker — overlay for resolving parameterised help URLs */
+.qt-help-entity-picker-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(0 0% 0% / 0.7);
+  backdrop-filter: blur(4px);
 }
 
-.qt-confirmation-badge:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--color-foreground) 45%, transparent);
-  outline-offset: 2px;
+.qt-help-entity-picker {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  overflow: hidden;
+  width: min(320px, calc(100% - 2rem));
+  max-height: min(400px, calc(100% - 2rem));
+  background: var(--qt-help-picker-bg, var(--color-card));
+  border: 1px solid var(--qt-help-picker-border, var(--color-border));
 }
 
-.qt-chat-message-user .qt-confirmation-badge:hover,
-.qt-chat-message-user .qt-confirmation-badge:focus-visible {
-  color: var(--qt-chat-user-fg);
-  background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
+.qt-help-entity-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  border-bottom: 1px solid var(--qt-help-picker-border, var(--color-border));
 }
 
-.qt-confirmation-badge-glyph {
-  font-weight: 600;
+.qt-help-entity-picker-filter {
+  width: 100%;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-radius: 0.25rem;
+  background: var(--qt-help-picker-filter-bg, var(--color-muted));
+  border: 1px solid var(--qt-help-picker-border, var(--color-border));
+  color: inherit;
+  outline: none;
 }
 
-.qt-confirmation-badge[data-confirmation-state="stood-by"] {
-  color: var(--qt-warning-box-fg, var(--qt-text-secondary-fg));
-  opacity: 1;
+.qt-help-entity-picker-filter:focus {
+  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
 }
 
-.qt-confirmation-badge[data-confirmation-state="amended"] {
-  opacity: 1;
+.qt-help-entity-picker-list {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.qt-help-entity-picker-item {
+  width: 100%;
+  text-align: left;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  color: var(--qt-help-picker-fg, var(--color-foreground));
+}
+
+.qt-help-entity-picker-item:hover {
+  background: var(--qt-help-picker-hover-bg, color-mix(in srgb, var(--color-primary) 10%, transparent));
+  color: var(--qt-help-picker-hover-fg, var(--color-primary));
 }
 
 /* ==========================================================================
-   CHAT — STAFF ANNOUNCEMENTS
-   Messages authored by a personified feature (the Librarian, the Host, Pascal
-   the Croupier, …) rather than by a character. They summarise to a one-line
-   bar, and a run of consecutive ones packs into a row of content-width chips.
+   HELP GUIDE TAB - Browseable documentation view
+
+   The Guide tab always renders in Art Deco style regardless of the active
+   theme. Variables are hardcoded from the Art Deco token palette so the
+   guide feels like a consistent, branded reading experience.
    ========================================================================== */
 
-/**
- * Collapsed bar for Staff-authored messages.
- * Single-line summary: dot · sender name · kind · timestamp · chevron.
- * Click to expand into the regular message body.
- */
-.qt-chat-system-bar {
+/* --- Art Deco variable scope (light mode) --- */
+.qt-help-guide-deco {
+  --deco-bg: hsl(45 28% 78%);
+  --deco-fg: hsl(222 40% 12%);
+  --deco-fg-muted: hsl(222 25% 38%);
+  --deco-primary: hsl(222 47% 18%);
+  --deco-primary-fg: hsl(43 85% 55%);
+  --deco-accent: hsl(43 85% 48%);
+  --deco-border: hsl(43 30% 60%);
+  --deco-border-subtle: hsl(43 30% 60% / 0.5);
+  --deco-card: hsl(45 28% 75%);
+  --deco-muted: hsl(222 16% 72%);
+  --deco-input-bg: hsl(45 28% 82%);
+  --deco-code-bg: hsl(45 20% 72%);
+  --deco-gold: hsl(222 47% 18%);
+  --deco-welcome-bg: hsl(222 47% 18% / 0.06);
+  --deco-welcome-border: hsl(43 85% 48% / 0.3);
+  --deco-table-header: hsl(45 25% 72%);
+  --deco-hover-bg: hsl(43 30% 72% / 0.5);
+  --deco-font-serif: "Cormorant Garamond", Georgia, Cambria, "Times New Roman", Times, serif;
+  --deco-font-sans: Raleway, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+/* --- Art Deco variable scope (dark mode) --- */
+.dark .qt-help-guide-deco,
+.qt-help-guide-deco.dark {
+  --deco-bg: hsl(222 47% 7%);
+  --deco-fg: hsl(45 15% 90%);
+  --deco-fg-muted: hsl(222 12% 55%);
+  --deco-primary: hsl(43 85% 55%);
+  --deco-primary-fg: hsl(222 47% 7%);
+  --deco-accent: hsl(43 90% 58%);
+  --deco-border: hsl(43 35% 25%);
+  --deco-border-subtle: hsl(43 35% 25% / 0.5);
+  --deco-card: hsl(222 40% 12%);
+  --deco-muted: hsl(222 25% 15%);
+  --deco-input-bg: hsl(222 30% 14%);
+  --deco-code-bg: hsl(222 25% 15%);
+  --deco-gold: hsl(43 90% 58%);
+  --deco-welcome-bg: hsl(43 85% 55% / 0.06);
+  --deco-welcome-border: hsl(43 90% 58% / 0.2);
+  --deco-table-header: hsl(222 30% 16%);
+  --deco-hover-bg: hsl(222 25% 18% / 0.6);
+  --deco-font-serif: "Cormorant Garamond", Georgia, Cambria, "Times New Roman", Times, serif;
+  --deco-font-sans: Raleway, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+/* --- Apply Art Deco palette to all guide components --- */
+.qt-help-guide-deco {
+  background:
+    linear-gradient(hsl(45 28% 75% / 0.88), hsl(45 28% 75% / 0.88)),
+    url('/api/themes/assets/bundle:art-deco/textures/background-light.webp');
+  background-size: cover;
+  background-position: center center;
+  color: var(--deco-fg);
+  font-family: var(--deco-font-serif);
+
+  --qt-help-guide-search-bg: var(--deco-input-bg);
+  --qt-help-guide-search-border: var(--deco-border);
+  --qt-help-guide-search-fg: var(--deco-fg);
+  --qt-help-guide-search-placeholder: var(--deco-fg-muted);
+  --qt-help-guide-search-icon: var(--deco-fg-muted);
+  --qt-help-guide-border: var(--deco-border-subtle);
+  --qt-help-guide-category-fg: var(--deco-fg);
+  --qt-help-guide-category-hover: var(--deco-gold);
+  --qt-help-guide-badge-fg: var(--deco-fg-muted);
+  --qt-help-guide-topic-fg: var(--deco-fg-muted);
+  --qt-help-guide-topic-hover: var(--deco-fg);
+  --qt-help-guide-topic-hover-bg: var(--deco-hover-bg);
+  --qt-help-guide-topic-active-fg: var(--deco-gold);
+  --qt-help-guide-back-fg: var(--deco-gold);
+  --qt-help-guide-back-hover-bg: var(--deco-hover-bg);
+  --qt-help-guide-reader-fg: var(--deco-fg);
+  --qt-help-guide-heading-fg: var(--deco-fg);
+  --qt-help-guide-code-bg: var(--deco-code-bg);
+  --qt-help-guide-code-fg: var(--deco-fg);
+  --qt-help-guide-link-fg: var(--deco-gold);
+  --qt-help-guide-table-header-bg: var(--deco-table-header);
+  --qt-help-welcome-bg: var(--deco-welcome-bg);
+  --qt-help-welcome-border: var(--deco-welcome-border);
+  --qt-help-welcome-title-fg: var(--deco-fg);
+  --qt-help-welcome-text-fg: var(--deco-fg-muted);
+  --qt-help-welcome-link-fg: var(--deco-gold);
+}
+
+.dark .qt-help-guide-deco,
+.qt-help-guide-deco.dark {
+  background:
+    linear-gradient(hsl(222 40% 12% / 0.88), hsl(222 40% 12% / 0.88)),
+    url('/api/themes/assets/bundle:art-deco/textures/background-dark.webp');
+  background-size: cover;
+  background-position: center center;
+}
+
+.qt-help-guide-deco .qt-help-guide-category-label {
+  font-family: var(--deco-font-sans);
+  letter-spacing: 0.025em;
+}
+
+.qt-help-guide-deco .qt-help-guide-reader h1,
+.qt-help-guide-deco .qt-help-guide-reader h2,
+.qt-help-guide-deco .qt-help-guide-reader h3 {
+  font-family: var(--deco-font-sans);
+  letter-spacing: 0.015em;
+}
+
+.qt-help-guide-deco .qt-help-guide-back {
+  font-family: var(--deco-font-sans);
+  letter-spacing: 0.025em;
+}
+
+.qt-help-guide-search {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.25rem 0.625rem;
-  margin: 0.125rem 0;
-  background: var(--qt-chat-system-bar-bg);
-  color: var(--qt-chat-system-bar-fg);
-  border: 1px solid var(--qt-chat-system-bar-border);
-  border-radius: var(--radius-sm, 0.25rem);
-  font-size: 0.75rem;
-  line-height: 1.2;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 120ms ease;
 }
 
-.qt-chat-system-bar:hover,
-.qt-chat-system-bar:focus-visible {
-  background: var(--qt-chat-system-bar-hover-bg);
-  outline: none;
+.qt-help-guide-search-icon {
+  position: absolute;
+  left: 0.625rem;
+  width: 1rem;
+  height: 1rem;
+  pointer-events: none;
+  color: var(--qt-help-guide-search-icon, var(--color-muted-foreground));
 }
 
-.qt-chat-system-bar-sender {
-  color: var(--qt-chat-system-bar-sender-fg);
-  font-weight: 600;
-  white-space: nowrap;
+.qt-help-guide-search-input {
+  width: 100%;
+  padding-left: 2.25rem;
+  padding-right: 2rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-style: solid;
+  background: var(--qt-help-guide-search-bg, var(--color-background));
+  border-color: var(--qt-help-guide-search-border, var(--color-border));
+  color: var(--qt-help-guide-search-fg, var(--color-foreground));
 }
 
-.qt-chat-system-bar-kind {
-  flex: 1 1 auto;
-  min-width: 0;
-  font-style: italic;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.qt-help-guide-search-input::placeholder {
+  color: var(--qt-help-guide-search-placeholder, var(--color-muted-foreground));
 }
 
-/**
- * Whisper audience on an announcement bar or chip ("to Alice, Bob"). Wears the
- * same ink as the message body's whisper label so a private aside reads the
- * same whether it is collapsed to a chip or opened in full.
- */
-.qt-chat-system-bar-whisper {
-  flex: 0 1 auto;
-  min-width: 0;
-  color: var(--qt-chat-whisper-label-fg);
-  font-style: italic;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.qt-help-guide-search-input:focus {
+  outline-style: none;
+  box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-ring);
 }
 
-.qt-chat-system-bar-time {
-  color: var(--qt-chat-system-bar-fg);
-  opacity: 0.75;
-  white-space: nowrap;
+.qt-help-guide-search-clear {
+  position: absolute;
+  right: 0.5rem;
+  padding: 0.125rem;
+  border-radius: var(--radius-sm);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  color: var(--qt-help-guide-search-icon, var(--color-muted-foreground));
 }
 
-.qt-chat-system-bar-chevron {
-  flex-shrink: 0;
-  width: 0.875rem;
-  height: 0.875rem;
-  opacity: 0.7;
+.qt-help-guide-search-clear:hover {
+  color: var(--qt-help-guide-search-fg, var(--color-foreground));
 }
 
-/**
- * Variant rendered at the top of an *expanded* Staff-authored message, giving
- * the reader a prominent click target to re-collapse it.
- */
-.qt-chat-system-bar-expanded {
-  margin-bottom: 0.25rem;
+/* Category accordion */
+
+.qt-help-guide-category {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
 }
 
-/**
- * Packed announcement chips. A run of consecutive *collapsed* Staff messages
- * renders as one flex-wrapping row of content-width chips instead of a
- * full-width bar each.
- */
-.qt-chat-announcement-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  width: 95%;
-  max-width: var(--qt-chat-message-row-max-width);
-  margin: 1.5rem auto 0;
-  align-items: flex-start;
+.qt-help-guide-category:last-child {
+  border-bottom-width: 0;
 }
 
-/**
- * A single collapsed announcement, sized to its content (never full width).
- * Reuses the -sender / -kind / -time / -chevron element classes above; only the
- * -kind sizing differs (see the override below).
- */
-.qt-chat-announcement-chip {
-  display: inline-flex;
+.qt-help-guide-category-header {
+  width: 100%;
+  display: flex;
   align-items: center;
   gap: 0.5rem;
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  padding: 0.25rem 0.625rem;
-  background: var(--qt-chat-system-bar-bg);
-  color: var(--qt-chat-system-bar-fg);
-  border: 1px solid var(--qt-chat-system-bar-border);
-  border-radius: var(--radius-sm, 0.25rem);
-  font-size: 0.75rem;
-  line-height: 1.2;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
   text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
   cursor: pointer;
-  transition: background-color 120ms ease;
-}
-
-.qt-chat-announcement-chip:hover,
-.qt-chat-announcement-chip:focus-visible {
-  background: var(--qt-chat-system-bar-hover-bg);
-  outline: none;
+  color: var(--qt-help-guide-category-fg, var(--color-foreground));
 }
 
-/* Inside a chip the kind must not greedily fill the row; cap it so a long kind
-   doesn't dominate a packed row. */
-.qt-chat-announcement-chip .qt-chat-system-bar-kind {
-  flex: 0 1 auto;
-  max-width: 22ch;
+.qt-help-guide-category-header:hover {
+  color: var(--qt-help-guide-category-hover, var(--color-primary));
 }
 
-/* Same cap for a long audience list — a whisper to five people must not push
-   the timestamp and chevron off the chip. */
+.qt-help-guide-category-chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.qt-help-guide-category-chevron-open {
+  transform: rotate(90deg);
+}
+
+.qt-help-guide-category-label {
+  flex: 1 1 0%;
+  font-weight: 500;
+}
+
+.qt-help-guide-category-badge {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  flex-shrink: 0;
+  color: var(--qt-help-guide-badge-fg, var(--color-muted-foreground));
+}
+
+.qt-help-guide-category-topics {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0.25rem;
+}
+
+/* Topic rows */
+
+.qt-help-guide-topic {
+  width: 100%;
+  text-align: left;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 1.75rem;
+  padding-right: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  color: var(--qt-help-guide-topic-fg, var(--color-muted-foreground));
+}
+
+.qt-help-guide-topic:hover {
+  color: var(--qt-help-guide-topic-hover, var(--color-foreground));
+  background: var(--qt-help-guide-topic-hover-bg, color-mix(in srgb, var(--color-accent) 50%, transparent));
+}
+
+.qt-help-guide-topic-active {
+  color: var(--qt-help-guide-topic-active-fg, var(--color-primary));
+  font-weight: 500;
+}
+
+/* Reader view */
+
+.qt-help-guide-back {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  flex-shrink: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  color: var(--qt-help-guide-back-fg, var(--color-primary));
+  border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
+}
+
+.qt-help-guide-back:hover {
+  background: var(--qt-help-guide-back-hover-bg, color-mix(in srgb, var(--color-accent) 30%, transparent));
+}
+
+.qt-help-guide-reader {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.625;
+  color: var(--qt-help-guide-reader-fg, var(--color-foreground));
+  overflow-x: hidden;
+  min-width: 0;
+}
+
+.qt-help-guide-reader h1 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+}
+
+.qt-help-guide-reader h2 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--qt-help-guide-heading-fg, var(--color-foreground));
+}
+
+.qt-help-guide-reader h3 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  margin-top: 1rem;
+  margin-bottom: 0.375rem;
+}
+
+.qt-help-guide-reader p {
+  margin-bottom: 0.5rem;
+}
+
+.qt-help-guide-reader ul,
+.qt-help-guide-reader ol {
+  margin-bottom: 0.5rem;
+  padding-left: 1.25rem;
+}
+
+.qt-help-guide-reader li {
+  margin-bottom: 0.125rem;
+}
+
+.qt-help-guide-reader strong {
+  font-weight: 600;
+}
+
+.qt-help-guide-reader table {
+  width: 100%;
+  margin-bottom: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-collapse: collapse;
+  table-layout: fixed;
+  word-break: break-word;
+}
+
+.qt-help-guide-reader th,
+.qt-help-guide-reader td {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  text-align: left;
+  border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
+}
+
+.qt-help-guide-reader th {
+  font-weight: 600;
+  background: var(--qt-help-guide-table-header-bg, color-mix(in srgb, var(--color-muted) 50%, transparent));
+}
+
+.qt-help-guide-reader hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border-color: var(--qt-help-guide-border, color-mix(in srgb, var(--color-border) 50%, transparent));
+}
+
+.qt-help-guide-inline-code {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: var(--qt-help-guide-code-bg, var(--color-muted));
+  color: var(--qt-help-guide-code-fg, var(--color-foreground));
+}
+
+.qt-help-guide-code-block {
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: var(--qt-help-guide-code-bg, var(--color-muted));
+  white-space: pre-wrap !important;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--qt-help-guide-code-fg, var(--color-foreground));
+}
+
+/* Navigation callout button (replaces "Open this page in Quilltap" blockquote) */
+
+.qt-help-guide-nav-callout {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+/* Doc links and page links within reader */
+
+.qt-help-guide-doc-link {
+  cursor: pointer;
+  text-decoration-line: underline;
+  color: var(--qt-help-guide-link-fg, var(--color-primary));
+}
+
+.qt-help-guide-doc-link:hover {
+  opacity: 0.8;
+}
+
+.qt-help-guide-page-link {
+  cursor: pointer;
+  text-decoration-line: underline;
+  color: var(--qt-help-guide-link-fg, var(--color-primary));
+}
+
+.qt-help-guide-page-link:hover {
+  opacity: 0.8;
+}
+
+/* Welcome card */
+
+.qt-help-welcome-card {
+  border-radius: var(--radius-lg);
+  border-width: 1px;
+  border-style: solid;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  background: var(--qt-help-welcome-bg, color-mix(in srgb, var(--color-primary) 5%, transparent));
+  border-color: var(--qt-help-welcome-border, color-mix(in srgb, var(--color-primary) 20%, transparent));
+}
+
+.qt-help-welcome-title {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  color: var(--qt-help-welcome-title-fg, var(--color-foreground));
+}
+
+.qt-help-welcome-text {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  margin-bottom: 0.5rem;
+  color: var(--qt-help-welcome-text-fg, var(--color-muted-foreground));
+}
+
+.qt-help-welcome-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin-bottom: 0.5rem;
+}
+
+.qt-help-welcome-link {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+  text-align: left;
+  color: var(--qt-help-welcome-link-fg, var(--color-primary));
+}
+
+.qt-help-welcome-link:hover {
+  opacity: 0.8;
+}
+
+.qt-help-welcome-footer {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--qt-help-welcome-text-fg, var(--color-muted-foreground));
+}
+
+/* ==========================================================================
+   BRAHMA CONSOLE LAUNCHER - The always-on button beside the left rail
+   Sits in the topmost floating layer so it stays reachable over any modal.
+   ========================================================================== */
+
+.qt-brahma-launcher {
+  position: fixed;
+  left: calc(var(--qt-left-sidebar-collapsed-width) + var(--qt-brahma-launcher-offset));
+  bottom: var(--qt-brahma-launcher-offset);
+  z-index: var(--qt-floating-layer-z);
+  width: var(--qt-brahma-launcher-size);
+  height: var(--qt-brahma-launcher-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--qt-brahma-launcher-bg);
+  color: var(--qt-brahma-launcher-fg);
+  border: 2px solid var(--qt-brahma-launcher-ring);
+  box-shadow: var(--qt-brahma-launcher-shadow);
+  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+}
+
+.qt-brahma-launcher:hover {
+  background: var(--qt-brahma-launcher-hover-bg);
+  transform: scale(1.06);
+}
+
+.qt-brahma-launcher:focus-visible {
+  outline: 2px solid var(--qt-brahma-launcher-ring);
+  outline-offset: 3px;
+}
+
+.qt-brahma-launcher-active,
+.qt-brahma-launcher-active:hover {
+  background: var(--qt-brahma-launcher-active-bg);
+  color: var(--qt-brahma-launcher-active-fg);
+}
+
+.qt-brahma-launcher-icon {
+  width: 60%;
+  height: 60%;
+}
+
+/* ==========================================================================
+   SLIDE-OVER PANELS
+   ========================================================================== */
+
+.qt-slide-over-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 55;
+  background-color: var(--qt-dialog-backdrop);
+  opacity: 0;
+  transition: opacity 200ms ease;
+  pointer-events: none;
+}
+
+.qt-slide-over-overlay[data-open="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.qt-slide-over-panel {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 55;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--qt-dialog-bg);
+  border-left: 1px solid var(--qt-dialog-border);
+  box-shadow: var(--qt-dialog-shadow);
+  transform: translateX(100%);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.qt-slide-over-panel[data-open="true"] {
+  transform: translateX(0);
+}
+
+.qt-slide-over-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--qt-dialog-border);
+}
+
+.qt-inspector-entry {
+  transition: all 150ms ease;
+  border-radius: var(--qt-card-radius);
+  background: var(--qt-card-bg);
+  border: 1px solid color-mix(in srgb, var(--qt-card-border) calc(var(--qt-card-border-opacity, 1) * 100%), transparent);
+}
+
+.qt-inspector-entry:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
+
+.qt-inspector-entry-highlight {
+  animation: qt-inspector-highlight 2s ease-out;
+}
+
+@keyframes qt-inspector-highlight {
+  0% {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0px transparent;
+  }
+}
+
+/* ==========================================================================
+   TAB COMPONENTS
+   ========================================================================== */
+
+.qt-tab-group {
+  display: flex;
+  gap: var(--qt-tab-group-gap);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.qt-tab {
+  padding: var(--qt-tab-padding-y) var(--qt-tab-padding-x);
+  font-size: var(--qt-tab-font-size);
+  font-weight: var(--qt-tab-font-weight);
+  color: var(--qt-tab-fg);
+  background-color: var(--qt-tab-bg);
+  border: none;
+  border-radius: var(--qt-tab-radius);
+  cursor: pointer;
+  transition: all 150ms;
+}
+
+.qt-tab:hover {
+  color: var(--color-foreground);
+}
+
+.qt-tab-active {
+  background-color: var(--qt-tab-active-bg);
+  color: var(--qt-tab-active-fg);
+}
+
+.qt-tab-content {
+  padding: 1rem 0;
+}
+
+/* ==========================================================================
+   CHAT COMPONENTS
+   ========================================================================== */
+
+.qt-chat-message {
+  padding: var(--qt-chat-message-padding);
+  border-radius: var(--qt-chat-message-radius);
+  max-width: 80%;
+}
+
+.qt-chat-message-user {
+  background-color: var(--qt-chat-user-bg);
+  color: var(--qt-chat-user-fg);
+  margin-left: auto;
+}
+
+.qt-chat-message-assistant {
+  background-color: var(--qt-chat-assistant-bg);
+  color: var(--qt-chat-assistant-fg);
+  border: 1px solid var(--color-border);
+}
+
+/**
+ * Whisper message — private messages between characters, not heard by all.
+ */
+.qt-chat-message-whisper {
+  background: var(--qt-chat-whisper-bg);
+  color: var(--qt-chat-whisper-fg);
+  border: 2px dashed var(--qt-chat-whisper-border);
+  font-style: italic;
+}
+
+.qt-chat-whisper-label {
+  font-size: 0.75rem;
+  color: var(--qt-chat-whisper-label-fg);
+  font-style: italic;
+  margin-bottom: 0.25rem;
+}
+
+.qt-chat-message-whisper-overheard {
+  opacity: 0.6;
+}
+
+/**
+ * Pascal result — the outcome of a custom tool (pseudo-tool) roll, announced by
+ * Pascal the Croupier. The accent carries the outcome's semantic `state`.
+ * Built on the --qt-alert-* families, which every bundled theme defines.
+ */
+.qt-pascal-result {
+  border-left: 3px solid var(--qt-alert-info-border);
+  padding-left: 0.75rem;
+}
+
+.qt-pascal-result--success {
+  border-left-color: var(--qt-alert-success-border);
+}
+
+.qt-pascal-result--partial {
+  border-left-color: var(--qt-alert-warning-border);
+}
+
+.qt-pascal-result--failure {
+  border-left-color: var(--qt-alert-error-border);
+}
+
+.qt-pascal-result--info {
+  border-left-color: var(--qt-alert-info-border);
+}
+
+/* --------------------------------------------------------------------------
+   ANSWER-CONFIRMATION BADGE
+   A quiet per-message verdict marker (Vouched / Amended / Stood by /
+   Unvetted). The glyph carries the state; a tooltip holds the discrepancy
+   notes. Metadata, not an alarm.
+   -------------------------------------------------------------------------- */
+
+.qt-confirmation-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 0.375rem;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  background: transparent;
+  font: inherit;
+  line-height: 1.4;
+  cursor: help;
+  color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
+  opacity: 0.8;
+  user-select: none;
+  white-space: nowrap;
+  transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
+}
+
+/* The badge sits among the message action icons and answers the pointer the
+   same way they do. */
+.qt-confirmation-badge:hover,
+.qt-confirmation-badge:focus-visible {
+  opacity: 1;
+  border-color: color-mix(in srgb, currentColor 45%, transparent);
+  background: color-mix(in srgb, var(--color-muted) 50%, transparent);
+}
+
+/* The tinted states (stood-by, amended) keep their own colour on hover; the
+   quiet ones brighten to the foreground the way the action icons do. */
+.qt-confirmation-badge[data-confirmation-state="vouched"]:hover,
+.qt-confirmation-badge[data-confirmation-state="vouched"]:focus-visible,
+.qt-confirmation-badge[data-confirmation-state="unvetted"]:hover,
+.qt-confirmation-badge[data-confirmation-state="unvetted"]:focus-visible {
+  color: var(--color-foreground);
+}
+
+.qt-confirmation-badge:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--color-foreground) 45%, transparent);
+  outline-offset: 2px;
+}
+
+.qt-chat-message-user .qt-confirmation-badge:hover,
+.qt-chat-message-user .qt-confirmation-badge:focus-visible {
+  color: var(--qt-chat-user-fg);
+  background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
+}
+
+.qt-confirmation-badge-glyph {
+  font-weight: 600;
+}
+
+.qt-confirmation-badge[data-confirmation-state="stood-by"] {
+  color: var(--qt-warning-box-fg, var(--qt-text-secondary-fg));
+  opacity: 1;
+}
+
+.qt-confirmation-badge[data-confirmation-state="amended"] {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   CHAT — STAFF ANNOUNCEMENTS
+   Messages authored by a personified feature (the Librarian, the Host, Pascal
+   the Croupier, …) rather than by a character. They summarise to a one-line
+   bar, and a run of consecutive ones packs into a row of content-width chips.
+   ========================================================================== */
+
+/**
+ * Collapsed bar for Staff-authored messages.
+ * Single-line summary: dot · sender name · kind · timestamp · chevron.
+ * Click to expand into the regular message body.
+ */
+.qt-chat-system-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.25rem 0.625rem;
+  margin: 0.125rem 0;
+  background: var(--qt-chat-system-bar-bg);
+  color: var(--qt-chat-system-bar-fg);
+  border: 1px solid var(--qt-chat-system-bar-border);
+  border-radius: var(--radius-sm, 0.25rem);
+  font-size: 0.75rem;
+  line-height: 1.2;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.qt-chat-system-bar:hover,
+.qt-chat-system-bar:focus-visible {
+  background: var(--qt-chat-system-bar-hover-bg);
+  outline: none;
+}
+
+/* The tint alone was too faint to find; keyboard focus also gets the ring
+   every other control wears (WCAG 2.4.7). */
+.qt-chat-system-bar:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+.qt-chat-system-bar-sender {
+  color: var(--qt-chat-system-bar-sender-fg);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.qt-chat-system-bar-kind {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * Whisper audience on an announcement bar or chip ("to Alice, Bob"). Wears the
+ * same ink as the message body's whisper label so a private aside reads the
+ * same whether it is collapsed to a chip or opened in full.
+ */
+.qt-chat-system-bar-whisper {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--qt-chat-whisper-label-fg);
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Full strength: at 0.75 opacity the timestamp fell to ~3:1 on the bar. */
+.qt-chat-system-bar-time {
+  color: var(--qt-chat-system-bar-fg);
+  white-space: nowrap;
+}
+
+.qt-chat-system-bar-chevron {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.7;
+}
+
+/**
+ * Variant rendered at the top of an *expanded* Staff-authored message, giving
+ * the reader a prominent click target to re-collapse it.
+ */
+.qt-chat-system-bar-expanded {
+  margin-bottom: 0.25rem;
+}
+
+/**
+ * Packed announcement chips. A run of consecutive *collapsed* Staff messages
+ * renders as one flex-wrapping row of content-width chips instead of a
+ * full-width bar each.
+ */
+.qt-chat-announcement-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  width: 95%;
+  max-width: var(--qt-chat-message-row-max-width);
+  margin: 1.5rem auto 0;
+  align-items: flex-start;
+}
+
+/**
+ * A single collapsed announcement, sized to its content (never full width).
+ * Reuses the -sender / -kind / -time / -chevron element classes above; only the
+ * -kind sizing differs (see the override below).
+ */
+.qt-chat-announcement-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.25rem 0.625rem;
+  background: var(--qt-chat-system-bar-bg);
+  color: var(--qt-chat-system-bar-fg);
+  border: 1px solid var(--qt-chat-system-bar-border);
+  border-radius: var(--radius-sm, 0.25rem);
+  font-size: 0.75rem;
+  line-height: 1.2;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.qt-chat-announcement-chip:hover,
+.qt-chat-announcement-chip:focus-visible {
+  background: var(--qt-chat-system-bar-hover-bg);
+  outline: none;
+}
+
+/* The tint alone was too faint to find; keyboard focus also gets the ring
+   every other control wears (WCAG 2.4.7). */
+.qt-chat-announcement-chip:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+/* Inside a chip the kind must not greedily fill the row; cap it so a long kind
+   doesn't dominate a packed row. */
+.qt-chat-announcement-chip .qt-chat-system-bar-kind {
+  flex: 0 1 auto;
+  max-width: 22ch;
+}
+
+/* Same cap for a long audience list — a whisper to five people must not push
+   the timestamp and chevron off the chip. */
 .qt-chat-announcement-chip .qt-chat-system-bar-whisper {
   max-width: 18ch;
 }
 
-/* A whispered announcement carries the whisper's border colour, so a private
-   aside is distinguishable from a public one before it is ever expanded. */
-.qt-chat-announcement-chip-whisper {
-  border-color: var(--qt-chat-whisper-label-fg);
+/* A whispered announcement carries the whisper's border colour, so a private
+   aside is distinguishable from a public one before it is ever expanded. */
+.qt-chat-announcement-chip-whisper {
+  border-color: var(--qt-chat-whisper-label-fg);
+}
+
+/**
+ * Importance dot before the sender name. Filled for high/medium, hollow for
+ * low, so the eye lands on what matters and skims past the low-noise chatter.
+ */
+.qt-chat-announcement-dot {
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+}
+
+.qt-chat-announcement-dot-high {
+  background: var(--qt-chat-announcement-dot-high);
+}
+
+.qt-chat-announcement-dot-medium {
+  background: var(--qt-chat-announcement-dot-medium);
+}
+
+.qt-chat-announcement-dot-low {
+  background: transparent;
+  border-color: var(--qt-chat-announcement-dot-low);
+}
+
+/**
+ * Outcome dot for a Pascal roll announcement, which replaces the importance dot:
+ * a roll has a verdict of its own — success / partial / failure / info — and
+ * that verdict is what the reader is looking for. Filled with the solid
+ * --qt-alert-*-fg (the -border tints are alpha-thin and vanish at 8px); the
+ * bar's leading accent below uses the -border tints, as .qt-pascal-result does.
+ */
+.qt-chat-announcement-dot-outcome-success {
+  background: var(--qt-alert-success-fg);
+}
+
+.qt-chat-announcement-dot-outcome-partial {
+  background: var(--qt-alert-warning-fg);
+}
+
+.qt-chat-announcement-dot-outcome-failure {
+  background: var(--qt-alert-error-fg);
+}
+
+.qt-chat-announcement-dot-outcome-info {
+  background: var(--qt-alert-info-fg);
+}
+
+/**
+ * The bar/chip of a Pascal roll wears the same .qt-pascal-result accent as the
+ * outcome bubble itself, so one outcome reads identically wherever it is shown.
+ *
+ * These compound selectors only restate that accent: .qt-pascal-result is
+ * declared above, and both wrappers set `border` and `padding` SHORTHANDS at
+ * equal specificity, so the plain family would lose on source order. Nothing
+ * new is styled here — change the accent itself at .qt-pascal-result.
+ */
+.qt-chat-system-bar.qt-pascal-result,
+.qt-chat-announcement-chip.qt-pascal-result {
+  border-left-width: 3px;
+  border-left-color: var(--qt-alert-info-border);
+  padding-left: 0.75rem;
+}
+
+.qt-chat-system-bar.qt-pascal-result--success,
+.qt-chat-announcement-chip.qt-pascal-result--success {
+  border-left-color: var(--qt-alert-success-border);
+}
+
+.qt-chat-system-bar.qt-pascal-result--partial,
+.qt-chat-announcement-chip.qt-pascal-result--partial {
+  border-left-color: var(--qt-alert-warning-border);
+}
+
+.qt-chat-system-bar.qt-pascal-result--failure,
+.qt-chat-announcement-chip.qt-pascal-result--failure {
+  border-left-color: var(--qt-alert-error-border);
+}
+
+.qt-chat-system-bar.qt-pascal-result--info,
+.qt-chat-announcement-chip.qt-pascal-result--info {
+  border-left-color: var(--qt-alert-info-border);
+}
+
+/**
+ * Deus Ex Machina — established facts in the Salon.
+ *
+ * Mirrors app/styles/qt-components/_chat.css. Built on existing tokens only (the --qt-alert-info-* family and --color-ring,
+ * the focus-ring colour), so every bundled theme renders it without per-theme
+ * work and the armed frame holds the focus ring's own contrast.
+ *
+ * - .qt-chat-composer-established-fact: the composer's editor wrapper while
+ *   `/deus` is armed — a frame and a faint tint, so the operator can see the
+ *   next line will be posted as fact.
+ * - .qt-chat-message-established-fact: the small ribbon on an operator line
+ *   posted as fact.
+ * - .qt-chat-established-fact: the accent on a machine fact's bar/chip.
+ * - .qt-chat-established-fact-row / -band: a machine fact renders as a
+ *   full-width band (no avatar) rather than a speech bubble.
+ */
+.qt-chat-composer-established-fact .qt-chat-composer-input {
+  border-color: var(--color-ring);
+  box-shadow: inset 0 0 0 1px var(--color-ring);
+  background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
+}
+
+/* The ribbon sits on whatever the theme paints the speaker's bubble, so it
+   takes the bubble's own text colour (every theme pairs those) and stands
+   apart by weight and small caps rather than by a hue of its own. */
+.qt-chat-message-established-fact {
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+  color: inherit;
+  margin-bottom: 0.25rem;
+}
+
+.qt-chat-system-bar.qt-chat-established-fact,
+.qt-chat-announcement-chip.qt-chat-established-fact {
+  border-left-width: 3px;
+  border-left-color: var(--color-ring);
+  padding-left: 0.75rem;
+}
+
+.qt-chat-established-fact-row {
+  width: 100%;
+  max-width: none;
+}
+
+.qt-chat-established-fact-band {
+  width: 100%;
+  background: var(--qt-alert-info-bg);
+  border: 1px solid var(--qt-alert-info-border);
+  border-left: 3px solid var(--color-ring);
+  box-shadow: none;
+}
+
+/* The toggle that arms Deus Ex Machina, seated in the corner of the composer's
+   "speaking as" portrait. A small frosted tile at rest; armed, it wears the
+   composer frame's own ring and tint so the two read as one state. */
+.qt-chat-established-fact-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
+  color: var(--color-foreground);
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.qt-chat-established-fact-toggle:hover,
+.qt-chat-established-fact-toggle:focus-visible {
+  opacity: 1;
+}
+
+.qt-chat-established-fact-toggle:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 1px;
+}
+
+.qt-chat-established-fact-toggle[aria-pressed="true"] {
+  opacity: 1;
+  border-color: var(--color-ring);
+  box-shadow: inset 0 0 0 1px var(--color-ring);
+  background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
+}
+
+.qt-chat-established-fact-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/**
+ * Silent message — inner thoughts and actions from character in silent mode.
+ * Distinguished from whispers by a dotted border (vs dashed) and sage/teal tones.
+ */
+.qt-chat-message-silent {
+  background: var(--qt-chat-silent-bg);
+  color: var(--qt-chat-silent-fg);
+  border: 2px dotted var(--qt-chat-silent-border);
+  font-style: italic;
+}
+
+.qt-chat-silent-label {
+  font-size: 0.75rem;
+  color: var(--qt-chat-silent-label-fg);
+  font-style: italic;
+  margin-bottom: 0.25rem;
+}
+
+/**
+ * Regeneration — a line being re-rolled in place.
+ *
+ * Two states, one bubble. Before the first token the old line is still there
+ * but visibly out of service (dimmed, desaturated, unselectable) under a plate
+ * that says what is happening. From the first token the plate and the old line
+ * are both gone and the new prose streams in their place.
+ */
+.qt-chat-message-regenerating {
+  border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 45%, transparent);
+}
+
+.qt-chat-regenerating {
+  position: relative;
+}
+
+.qt-chat-regenerating-original {
+  opacity: 0.3;
+  filter: grayscale(0.8);
+  pointer-events: none;
+  user-select: none;
+}
+
+.qt-chat-regenerating-plate {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--qt-response-status-streaming-fg);
+}
+
+/* The words are in the bubble's own ink: the streaming green is a status
+   accent, and on a mid-tone bubble it fell below 3:1. The green stays on the
+   border and the quill. */
+.qt-chat-regenerating-plate-text {
+  color: var(--qt-chat-regenerating-plate-fg, var(--qt-chat-assistant-fg, var(--color-foreground)));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--qt-chat-assistant-bg) 88%, transparent);
+  border: 1px solid color-mix(in srgb, var(--qt-response-status-streaming-fg) 35%, transparent);
+  letter-spacing: 0.02em;
+}
+
+/**
+ * Message action bar — the per-message toolbar (copy, source, edit, delete,
+ * regenerate, swipe arrows) along the bottom of a bubble.
+ */
+.qt-chat-message-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+}
+
+.qt-chat-message-action-bar-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/** The bar of a line that is mid-replacement: nothing on it is safe to press. */
+.qt-chat-message-action-bar-disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.qt-chat-message-action-icon {
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+
+.qt-chat-message-action-icon:hover {
+  color: var(--color-foreground);
+  background: color-mix(in srgb, var(--color-muted) 50%, transparent);
+}
+
+.qt-chat-message-action-icon-danger:hover {
+  color: var(--qt-status-danger-fg);
+  background: color-mix(in srgb, var(--qt-status-danger-bg) 50%, transparent);
+}
+
+.qt-chat-message-action-icon svg,
+.qt-chat-message-action-icon .qt-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+/** User message action icons — light colours on the user bubble's ground. */
+.qt-chat-message-user .qt-chat-message-action-bar {
+  border-top-color: color-mix(in srgb, var(--qt-chat-user-fg) 30%, transparent);
+}
+
+.qt-chat-message-user .qt-chat-message-action-icon {
+  color: color-mix(in srgb, var(--qt-chat-user-fg) 70%, transparent);
+}
+
+.qt-chat-message-user .qt-chat-message-action-icon:hover {
+  color: var(--qt-chat-user-fg);
+  background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
+}
+
+.qt-chat-message-user .qt-chat-message-action-icon-danger:hover {
+  color: hsl(0 100% 85%);
+  background: color-mix(in srgb, hsl(0 70% 50%) 25%, transparent);
+}
+
+.qt-chat-message-action-timestamp {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--color-muted-foreground);
+  margin-left: auto;
+}
+
+.qt-chat-message-user .qt-chat-message-action-timestamp {
+  color: color-mix(in srgb, var(--qt-chat-user-fg) 70%, transparent);
+}
+
+/**
+ * Response status strip — the line above the composer that narrates a turn as
+ * it happens ("Gathering memories and context...", "Ada is responding...",
+ * "Regenerating Ada's reply..."). Coloured per stage.
+ */
+.qt-chat-response-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.375rem;
+  background: var(--qt-response-status-bg);
+  color: var(--qt-response-status-fg);
+  border: 1px solid var(--qt-response-status-border);
+  animation: qt-status-fade-in 150ms ease-out;
+}
+
+.qt-chat-response-status-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.qt-chat-response-status-text {
+  font-weight: 500;
+}
+
+.qt-chat-response-status[data-stage="compressing"] {
+  color: var(--qt-response-status-compressing-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-compressing-fg) 30%, transparent);
+}
+
+.qt-chat-response-status[data-stage="gathering"] {
+  color: var(--qt-response-status-gathering-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-gathering-fg) 30%, transparent);
+}
+
+.qt-chat-response-status[data-stage="building"] {
+  color: var(--qt-response-status-building-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-building-fg) 30%, transparent);
+}
+
+.qt-chat-response-status[data-stage="sending"] {
+  color: var(--qt-response-status-sending-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-sending-fg) 30%, transparent);
+}
+
+.qt-chat-response-status[data-stage="streaming"] {
+  color: var(--qt-response-status-streaming-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
 }
 
-/**
- * Importance dot before the sender name. Filled for high/medium, hollow for
- * low, so the eye lands on what matters and skims past the low-noise chatter.
- */
-.qt-chat-announcement-dot {
-  flex-shrink: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
-  border: 1px solid transparent;
+.qt-chat-response-status[data-stage="regenerating"],
+.qt-chat-response-status[data-stage="saving"] {
+  color: var(--qt-response-status-streaming-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
 }
 
-.qt-chat-announcement-dot-high {
-  background: var(--qt-chat-announcement-dot-high);
+.qt-chat-response-status[data-stage="tool_executing"] {
+  color: var(--qt-response-status-tool-fg);
+  border-color: color-mix(in srgb, var(--qt-response-status-tool-fg) 30%, transparent);
 }
 
-.qt-chat-announcement-dot-medium {
-  background: var(--qt-chat-announcement-dot-medium);
+@keyframes qt-status-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.qt-chat-announcement-dot-low {
-  background: transparent;
-  border-color: var(--qt-chat-announcement-dot-low);
+@media (prefers-reduced-motion: reduce) {
+  .qt-chat-response-status { animation: none; }
+  .qt-chat-response-status-icon .animate-pulse { animation: none; }
 }
 
 /**
- * Outcome dot for a Pascal roll announcement, which replaces the importance dot:
- * a roll has a verdict of its own — success / partial / failure / info — and
- * that verdict is what the reader is looking for. Filled with the solid
- * --qt-alert-*-fg (the -border tints are alpha-thin and vanish at 8px); the
- * bar's leading accent below uses the -border tints, as .qt-pascal-result does.
+ * Wardrobe action notice — inline summary of outfit changes.
+ * Double border with warm amber/gold tones, distinct from whisper (dashed) and silent (dotted).
  */
-.qt-chat-announcement-dot-outcome-success {
-  background: var(--qt-alert-success-fg);
+.qt-chat-wardrobe-notice {
+  background: var(--qt-chat-wardrobe-bg);
+  color: var(--qt-chat-wardrobe-fg);
+  border: 3px double var(--qt-chat-wardrobe-border);
+  border-radius: var(--radius-md, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
 }
 
-.qt-chat-announcement-dot-outcome-partial {
-  background: var(--qt-alert-warning-fg);
+.qt-chat-wardrobe-label {
+  font-size: 0.6875rem;
+  color: var(--qt-chat-wardrobe-label-fg);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
 }
 
-.qt-chat-announcement-dot-outcome-failure {
-  background: var(--qt-alert-error-fg);
+.qt-chat-wardrobe-summary {
+  color: var(--qt-chat-wardrobe-fg);
 }
 
-.qt-chat-announcement-dot-outcome-info {
-  background: var(--qt-alert-info-fg);
+/**
+ * Status badges for silent/absent participants
+ */
+.qt-badge-silent {
+  background: var(--qt-chat-silent-bg);
+  color: var(--qt-chat-silent-label-fg);
+  border: 1px solid var(--qt-chat-silent-border);
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+  font-weight: 600;
+  font-size: 0.75rem;
+}
+
+.qt-badge-absent {
+  background: color-mix(in srgb, var(--color-muted) 40%, transparent);
+  color: var(--color-muted-foreground);
+  border: 1px solid var(--color-muted);
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+  font-weight: 600;
+  font-size: 0.75rem;
+  opacity: 0.8;
 }
 
 /**
- * The bar/chip of a Pascal roll wears the same .qt-pascal-result accent as the
- * outcome bubble itself, so one outcome reads identically wherever it is shown.
- *
- * These compound selectors only restate that accent: .qt-pascal-result is
- * declared above, and both wrappers set `border` and `padding` SHORTHANDS at
- * equal specificity, so the plain family would lose on source order. Nothing
- * new is styled here — change the accent itself at .qt-pascal-result.
+ * Status overlay on participant avatar — small icon badge in the
+ * bottom-right corner, visible when sidebar is collapsed.
  */
-.qt-chat-system-bar.qt-pascal-result,
-.qt-chat-announcement-chip.qt-pascal-result {
-  border-left-width: 3px;
-  border-left-color: var(--qt-alert-info-border);
-  padding-left: 0.75rem;
+.qt-participant-status-overlay {
+  position: absolute;
+  bottom: -0.125rem;
+  right: -0.125rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid var(--color-background);
+  z-index: 2;
 }
 
-.qt-chat-system-bar.qt-pascal-result--success,
-.qt-chat-announcement-chip.qt-pascal-result--success {
-  border-left-color: var(--qt-alert-success-border);
+.qt-participant-status-overlay-silent {
+  background: var(--qt-chat-silent-border);
+  color: white;
 }
 
-.qt-chat-system-bar.qt-pascal-result--partial,
-.qt-chat-announcement-chip.qt-pascal-result--partial {
-  border-left-color: var(--qt-alert-warning-border);
+.qt-participant-status-overlay-absent {
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
 }
 
-.qt-chat-system-bar.qt-pascal-result--failure,
-.qt-chat-announcement-chip.qt-pascal-result--failure {
-  border-left-color: var(--qt-alert-error-border);
+.qt-participant-card-silent {
+  border-color: var(--qt-chat-silent-border);
 }
 
-.qt-chat-system-bar.qt-pascal-result--info,
-.qt-chat-announcement-chip.qt-pascal-result--info {
-  border-left-color: var(--qt-alert-info-border);
+.qt-chat-composer {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 1rem;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
 }
 
-/**
- * Deus Ex Machina — established facts in the Salon.
- *
- * Mirrors app/styles/qt-components/_chat.css. Built on existing tokens only (the --qt-alert-info-* family and --color-ring,
- * the focus-ring colour), so every bundled theme renders it without per-theme
- * work and the armed frame holds the focus ring's own contrast.
- *
- * - .qt-chat-composer-established-fact: the composer's editor wrapper while
- *   `/deus` is armed — a frame and a faint tint, so the operator can see the
- *   next line will be posted as fact.
- * - .qt-chat-message-established-fact: the small ribbon on an operator line
- *   posted as fact.
- * - .qt-chat-established-fact: the accent on a machine fact's bar/chip.
- * - .qt-chat-established-fact-row / -band: a machine fact renders as a
- *   full-width band (no avatar) rather than a speech bubble.
- */
-.qt-chat-composer-established-fact .qt-chat-composer-input {
-  border-color: var(--color-ring);
-  box-shadow: inset 0 0 0 1px var(--color-ring);
-  background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
+.qt-chat-composer-input {
+  flex: 1;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: transparent;
+  border: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-foreground);
 }
 
-/* The ribbon sits on whatever the theme paints the speaker's bubble, so it
-   takes the bubble's own text colour (every theme pairs those) and stands
-   apart by weight and small caps rather than by a hue of its own. */
-.qt-chat-message-established-fact {
-  font-size: 0.75rem;
-  font-weight: 600;
-  font-variant-caps: all-small-caps;
-  letter-spacing: 0.04em;
-  color: inherit;
-  margin-bottom: 0.25rem;
+.qt-chat-composer-input:focus,
+.qt-chat-composer-input:focus-within {
+  outline: none;
 }
 
-.qt-chat-system-bar.qt-chat-established-fact,
-.qt-chat-announcement-chip.qt-chat-established-fact {
-  border-left-width: 3px;
-  border-left-color: var(--color-ring);
-  padding-left: 0.75rem;
+/* Composer action buttons: Send, the soft interrupt (raise a hand) and the
+   hard Stop. Mirrors app/styles/qt-components/_chat.css. */
+.qt-chat-composer-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
 }
 
-.qt-chat-established-fact-row {
-  width: 100%;
-  max-width: none;
+.qt-chat-composer-actions .qt-chat-composer-send {
+  height: 2.5rem;
+  width: 2.5rem;
 }
 
-.qt-chat-established-fact-band {
-  width: 100%;
-  background: var(--qt-alert-info-bg);
-  border: 1px solid var(--qt-alert-info-border);
-  border-left: 3px solid var(--color-ring);
-  box-shadow: none;
+.qt-chat-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  width: 3rem;
+  border-radius: 9999px;
+  transition: all 200ms;
+  cursor: pointer;
+  background: var(--qt-button-primary-bg);
+  color: var(--qt-button-primary-fg);
+  box-shadow: var(--qt-button-primary-shadow);
+}
+
+.qt-chat-composer-send:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);
+}
+
+.qt-chat-composer-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.qt-chat-composer-send:hover:not(:disabled) {
+  background: var(--qt-button-primary-hover-bg);
+}
+
+.qt-chat-continue-button {
+  background: var(--qt-status-info-bg);
+  color: var(--qt-status-info-fg);
+  border: 1px solid var(--qt-status-info-border);
+}
+
+.qt-chat-stop-button {
+  background: var(--qt-status-danger-bg);
+  color: var(--qt-status-danger-fg);
+  border: 1px solid var(--qt-status-danger-border);
+}
+
+.qt-chat-stop-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--qt-status-danger-bg) 70%, black);
 }
 
-/* The toggle that arms Deus Ex Machina, seated in the corner of the composer's
-   "speaking as" portrait. A small frosted tile at rest; armed, it wears the
-   composer frame's own ring and tint so the two read as one state. */
-.qt-chat-established-fact-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.625rem;
-  height: 1.625rem;
-  padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
-  color: var(--color-foreground);
-  cursor: pointer;
-  opacity: 0.85;
-  transition: opacity 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+.qt-chat-interrupt-button {
+  background: var(--qt-status-warning-bg);
+  color: var(--qt-status-warning-fg);
+  border: 1px solid var(--qt-status-warning-border);
 }
 
-.qt-chat-established-fact-toggle:hover,
-.qt-chat-established-fact-toggle:focus-visible {
-  opacity: 1;
+.qt-chat-interrupt-button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--qt-status-warning-bg) 70%, black);
 }
 
-.qt-chat-established-fact-toggle:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 1px;
+.qt-chat-interrupt-button-raised {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
+  animation: qt-hand-raised-pulse 1.6s ease-in-out infinite;
 }
 
-.qt-chat-established-fact-toggle[aria-pressed="true"] {
-  opacity: 1;
-  border-color: var(--color-ring);
-  box-shadow: inset 0 0 0 1px var(--color-ring);
-  background-image: linear-gradient(var(--qt-alert-info-bg), var(--qt-alert-info-bg));
+@keyframes qt-hand-raised-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent); }
+  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--qt-status-warning-border) 15%, transparent); }
 }
 
-.qt-chat-established-fact-toggle:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+@media (prefers-reduced-motion: reduce) {
+  .qt-chat-interrupt-button-raised { animation: none; }
 }
 
-/**
- * Silent message — inner thoughts and actions from character in silent mode.
- * Distinguished from whispers by a dotted border (vs dashed) and sage/teal tones.
- */
-.qt-chat-message-silent {
-  background: var(--qt-chat-silent-bg);
-  color: var(--qt-chat-silent-fg);
-  border: 2px dotted var(--qt-chat-silent-border);
-  font-style: italic;
+/* Composer punctuation warnings — painted by PunctuationLintPlugin through the
+   CSS Custom Highlight API, so no element carries a class. Only background and
+   text-decoration are styleable on a ::highlight. */
+::highlight(qt-punctuation-warning) {
+  background-color: var(--qt-punctuation-warning-bg);
+  text-decoration: underline wavy var(--qt-punctuation-warning-underline);
+  text-decoration-thickness: 2px;
 }
 
-.qt-chat-silent-label {
-  font-size: 0.75rem;
-  color: var(--qt-chat-silent-label-fg);
-  font-style: italic;
-  margin-bottom: 0.25rem;
+/* Prose mode (a template like Novel: unmarked narration, quoted dialogue).
+   The no-dialogue tint covers every narrated run while the draft has no
+   dialogue at all; the preview marks narration and ((asides)) the way the
+   rendered message will set them. ::highlight cannot set font-style, so
+   narration is told apart by colour rather than italics. */
+::highlight(qt-punctuation-no-dialogue) {
+  background-color: var(--qt-punctuation-no-dialogue-bg);
+  text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
+  text-decoration-thickness: 2px;
 }
 
-/**
- * Regeneration — a line being re-rolled in place.
- *
- * Two states, one bubble. Before the first token the old line is still there
- * but visibly out of service (dimmed, desaturated, unselectable) under a plate
- * that says what is happening. From the first token the plate and the old line
- * are both gone and the new prose streams in their place.
- */
-.qt-chat-message-regenerating {
-  border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 45%, transparent);
+::highlight(qt-composer-narration) {
+  color: var(--qt-composer-narration-fg);
+  background-color: var(--qt-composer-narration-bg);
 }
 
-.qt-chat-regenerating {
+::highlight(qt-composer-ooc) {
+  color: var(--qt-composer-ooc-fg);
+  background-color: var(--qt-composer-ooc-bg);
+}
+
+/* Lexical editor rich text node styles */
+.qt-lexical-contenteditable {
+  overflow-y: auto;
   position: relative;
 }
 
-.qt-chat-regenerating-original {
-  opacity: 0.3;
-  filter: grayscale(0.8);
-  pointer-events: none;
-  user-select: none;
+.qt-lexical-contenteditable [contenteditable] {
+  outline: none;
+  min-height: 1.5em;
 }
 
-.qt-chat-regenerating-plate {
+.qt-lexical-placeholder {
+  color: var(--color-muted-foreground);
+  font-size: 0.875rem;
+  pointer-events: none;
   position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  color: var(--qt-response-status-streaming-fg);
+  top: 0;
+  left: 0;
+  padding: var(--qt-input-padding-y, 0.5rem) var(--qt-input-padding-x, 0.75rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* The words are in the bubble's own ink: the streaming green is a status
-   accent, and on a mid-tone bubble it fell below 3:1. The green stays on the
-   border and the quill. */
-.qt-chat-regenerating-plate-text {
-  color: var(--qt-chat-regenerating-plate-fg, var(--qt-chat-assistant-fg, var(--color-foreground)));
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.375rem;
-  background: color-mix(in srgb, var(--qt-chat-assistant-bg) 88%, transparent);
-  border: 1px solid color-mix(in srgb, var(--qt-response-status-streaming-fg) 35%, transparent);
-  letter-spacing: 0.02em;
+.qt-lexical-root {
+  outline: none;
+  min-height: 1.5em;
 }
 
-/**
- * Message action bar — the per-message toolbar (copy, source, edit, delete,
- * regenerate, swipe arrows) along the bottom of a bubble.
- */
-.qt-chat-message-action-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-  border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+.qt-lexical-paragraph {
+  margin: 0;
 }
 
-.qt-chat-message-action-bar-icons {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
+.qt-lexical-bold {
+  font-weight: 700;
 }
 
-/** The bar of a line that is mid-replacement: nothing on it is safe to press. */
-.qt-chat-message-action-bar-disabled {
-  pointer-events: none;
-  opacity: 0.4;
+.qt-lexical-italic {
+  font-style: italic;
 }
 
-.qt-chat-message-action-icon {
-  padding: 0.375rem;
-  border-radius: 0.25rem;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  color: var(--color-muted-foreground);
-  cursor: pointer;
+.qt-lexical-underline {
+  text-decoration: underline;
 }
 
-.qt-chat-message-action-icon:hover {
-  color: var(--color-foreground);
-  background: color-mix(in srgb, var(--color-muted) 50%, transparent);
+.qt-lexical-strikethrough {
+  text-decoration: line-through;
 }
 
-.qt-chat-message-action-icon-danger:hover {
-  color: var(--qt-status-danger-fg);
-  background: color-mix(in srgb, var(--qt-status-danger-bg) 50%, transparent);
+.qt-lexical-code {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.1em 0.3em;
+  border-radius: 0.2em;
 }
 
-.qt-chat-message-action-icon svg,
-.qt-chat-message-action-icon .qt-icon {
-  width: 1rem;
-  height: 1rem;
+.qt-lexical-h1 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 0.5em 0 0.25em;
 }
 
-/** User message action icons — light colours on the user bubble's ground. */
-.qt-chat-message-user .qt-chat-message-action-bar {
-  border-top-color: color-mix(in srgb, var(--qt-chat-user-fg) 30%, transparent);
+.qt-lexical-h2 {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0.4em 0 0.2em;
 }
 
-.qt-chat-message-user .qt-chat-message-action-icon {
-  color: color-mix(in srgb, var(--qt-chat-user-fg) 70%, transparent);
+.qt-lexical-h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0.3em 0 0.15em;
 }
 
-.qt-chat-message-user .qt-chat-message-action-icon:hover {
-  color: var(--qt-chat-user-fg);
-  background: color-mix(in srgb, var(--qt-chat-user-fg) 15%, transparent);
+.qt-lexical-h4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0.25em 0 0.1em;
 }
 
-.qt-chat-message-user .qt-chat-message-action-icon-danger:hover {
-  color: hsl(0 100% 85%);
-  background: color-mix(in srgb, hsl(0 70% 50%) 25%, transparent);
+.qt-lexical-h5 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin: 0.2em 0 0.1em;
 }
 
-.qt-chat-message-action-timestamp {
+.qt-lexical-h6 {
   font-size: 0.75rem;
-  line-height: 1rem;
-  color: var(--color-muted-foreground);
-  margin-left: auto;
+  font-weight: 500;
+  margin: 0.2em 0 0.1em;
 }
 
-.qt-chat-message-user .qt-chat-message-action-timestamp {
-  color: color-mix(in srgb, var(--qt-chat-user-fg) 70%, transparent);
+.qt-lexical-ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
 }
 
-/**
- * Response status strip — the line above the composer that narrates a turn as
- * it happens ("Gathering memories and context...", "Ada is responding...",
- * "Regenerating Ada's reply..."). Coloured per stage.
- */
-.qt-chat-response-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  margin-bottom: 0.5rem;
-  border-radius: 0.375rem;
-  background: var(--qt-response-status-bg);
-  color: var(--qt-response-status-fg);
-  border: 1px solid var(--qt-response-status-border);
-  animation: qt-status-fade-in 150ms ease-out;
+.qt-lexical-ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
 }
 
-.qt-chat-response-status-icon {
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
+.qt-lexical-li {
+  margin: 0.1em 0;
 }
 
-.qt-chat-response-status-text {
-  font-weight: 500;
+/*
+ * Wrapper item for a sub-list. Lexical represents nesting as a list item whose
+ * only child is another list, so this <li> is structure rather than content —
+ * left to itself it draws the parent list's bullet right beside the sub-list's
+ * own first bullet.
+ */
+.qt-lexical-li-nested {
+  list-style-type: none;
+  margin: 0;
 }
 
-.qt-chat-response-status[data-stage="compressing"] {
-  color: var(--qt-response-status-compressing-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-compressing-fg) 30%, transparent);
+.qt-lexical-li-nested::before,
+.qt-lexical-li-nested::after {
+  display: none;
 }
 
-.qt-chat-response-status[data-stage="gathering"] {
-  color: var(--qt-response-status-gathering-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-gathering-fg) 30%, transparent);
+/* Checklist items */
+.qt-lexical-checklist {
+  list-style: none;
+  padding-left: 0;
 }
 
-.qt-chat-response-status[data-stage="building"] {
-  color: var(--qt-response-status-building-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-building-fg) 30%, transparent);
+.qt-lexical-li-checked,
+.qt-lexical-li-unchecked {
+  position: relative;
+  padding-left: 1.5rem;
+  list-style: none;
+  margin: 0.15em 0;
 }
 
-.qt-chat-response-status[data-stage="sending"] {
-  color: var(--qt-response-status-sending-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-sending-fg) 30%, transparent);
+.qt-lexical-li-checked::before,
+.qt-lexical-li-unchecked::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--qt-border-color, var(--color-border));
+  cursor: pointer;
 }
 
-.qt-chat-response-status[data-stage="streaming"] {
-  color: var(--qt-response-status-streaming-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
+.qt-lexical-li-checked::before {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+  background-size: 12px 12px;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-.qt-chat-response-status[data-stage="regenerating"],
-.qt-chat-response-status[data-stage="saving"] {
-  color: var(--qt-response-status-streaming-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-streaming-fg) 30%, transparent);
+.qt-lexical-li-checked {
+  opacity: 0.6;
+  text-decoration: line-through;
 }
 
-.qt-chat-response-status[data-stage="tool_executing"] {
-  color: var(--qt-response-status-tool-fg);
-  border-color: color-mix(in srgb, var(--qt-response-status-tool-fg) 30%, transparent);
+.qt-lexical-blockquote {
+  border-left: 4px solid rgba(0, 0, 0, 0.2);
+  padding-left: 0.75rem;
+  font-style: italic;
+  margin: 0.25em 0;
 }
 
-@keyframes qt-status-fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
+.qt-lexical-link {
+  text-decoration: underline;
+  color: var(--color-primary);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .qt-chat-response-status { animation: none; }
-  .qt-chat-response-status-icon .animate-pulse { animation: none; }
+.qt-lexical-code-block {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.5em 0.75em;
+  border-radius: 0.3em;
+  margin: 0.25em 0;
+  overflow-x: auto;
+  tab-size: 2;
 }
 
+/* ==========================================================================
+   CHAT MESSAGE LINKS
+   ========================================================================== */
+
 /**
- * Wardrobe action notice — inline summary of outfit changes.
- * Double border with warm amber/gold tones, distinct from whisper (dashed) and silent (dotted).
+ * Links inside rendered chat messages must be visibly clickable. The default
+ * .qt-link decoration is `none`, which leaves markdown links indistinguishable
+ * from surrounding prose. Force a colored, underlined treatment in this scope.
  */
-.qt-chat-wardrobe-notice {
-  background: var(--qt-chat-wardrobe-bg);
-  color: var(--qt-chat-wardrobe-fg);
-  border: 3px double var(--qt-chat-wardrobe-border);
-  border-radius: var(--radius-md, 0.375rem);
-  padding: 0.5rem 0.75rem;
-  margin-bottom: 0.5rem;
-  font-size: 0.8125rem;
-  line-height: 1.4;
+.qt-chat-message-content a,
+.qt-chat-message-content a.qt-link {
+  color: var(--qt-link-color, var(--color-primary));
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
-
-.qt-chat-wardrobe-label {
-  font-size: 0.6875rem;
-  color: var(--qt-chat-wardrobe-label-fg);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.25rem;
+.qt-chat-message-content a:hover,
+.qt-chat-message-content a.qt-link:hover {
+  color: var(--qt-link-hover-color, var(--color-primary));
+  text-decoration: underline;
 }
 
-.qt-chat-wardrobe-summary {
-  color: var(--qt-chat-wardrobe-fg);
-}
+/* ==========================================================================
+   DOCUMENT MODE - Split-panel layout (Scriptorium Phase 3.5)
+   ========================================================================== */
 
 /**
- * Status badges for silent/absent participants
+ * Split layout container for Document Mode
+ * Wraps the chat pane + divider + document pane inside .qt-chat-main
  */
-.qt-badge-silent {
-  background: var(--qt-chat-silent-bg);
-  color: var(--qt-chat-silent-label-fg);
-  border: 1px solid var(--qt-chat-silent-border);
-  border-radius: 9999px;
-  padding: 0.125rem 0.5rem;
-  font-weight: 600;
-  font-size: 0.75rem;
+.qt-doc-split-layout {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
 }
 
-.qt-badge-absent {
-  background: color-mix(in srgb, var(--color-muted) 40%, transparent);
-  color: var(--color-muted-foreground);
-  border: 1px solid var(--color-muted);
-  border-radius: 9999px;
-  padding: 0.125rem 0.5rem;
-  font-weight: 600;
-  font-size: 0.75rem;
-  opacity: 0.8;
+/**
+ * Chat pane in split mode
+ * Min-width prevents the chat from becoming unusable
+ */
+.qt-doc-chat-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  min-width: 320px;
 }
 
 /**
- * Status overlay on participant avatar — small icon badge in the
- * bottom-right corner, visible when sidebar is collapsed.
+ * Draggable divider between chat and document panes
+ * 6px wide handle with a visible grip indicator
  */
-.qt-participant-status-overlay {
-  position: absolute;
-  bottom: -0.125rem;
-  right: -0.125rem;
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 9999px;
+.qt-doc-divider {
+  flex-shrink: 0;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1.5px solid var(--color-background);
-  z-index: 2;
-}
-
-.qt-participant-status-overlay-silent {
-  background: var(--qt-chat-silent-border);
-  color: white;
-}
-
-.qt-participant-status-overlay-absent {
-  background: var(--color-muted);
-  color: var(--color-muted-foreground);
+  width: 6px;
+  cursor: col-resize;
+  background: var(--color-border);
+  transition: background 0.15s ease;
+  user-select: none;
+  touch-action: none;
 }
 
-.qt-participant-card-silent {
-  border-color: var(--qt-chat-silent-border);
+.qt-doc-divider:hover,
+.qt-doc-divider.qt-doc-divider-active {
+  background: var(--color-primary);
 }
 
-.qt-chat-composer {
+/** Grip dots indicator on the divider */
+.qt-doc-divider-grip {
   display: flex;
-  align-items: flex-end;
-  gap: 0.5rem;
-  padding: 1rem;
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
-.qt-chat-composer-input {
-  flex: 1;
-  min-height: 2.5rem;
-  padding: 0.5rem 0.75rem;
-  background-color: transparent;
-  border: none;
-  resize: none;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--color-foreground);
+.qt-doc-divider-grip span {
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-muted-foreground);
 }
 
-.qt-chat-composer-input:focus,
-.qt-chat-composer-input:focus-within {
-  outline: none;
+.qt-doc-divider:hover .qt-doc-divider-grip span,
+.qt-doc-divider.qt-doc-divider-active .qt-doc-divider-grip span {
+  background: var(--qt-primary-fg, var(--color-primary-foreground));
 }
 
-/* Composer action buttons: Send, the soft interrupt (raise a hand) and the
-   hard Stop. Mirrors app/styles/qt-components/_chat.css. */
-.qt-chat-composer-actions {
+/**
+ * Document pane container
+ * Sits to the right of the divider in split mode
+ */
+.qt-doc-pane {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-}
-
-.qt-chat-composer-actions .qt-chat-composer-send {
-  height: 2.5rem;
-  width: 2.5rem;
-}
-
-.qt-chat-composer-send {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 3rem;
-  width: 3rem;
-  border-radius: 9999px;
-  transition: all 200ms;
-  cursor: pointer;
-  background: var(--qt-button-primary-bg);
-  color: var(--qt-button-primary-fg);
-  box-shadow: var(--qt-button-primary-shadow);
+  height: 100%;
+  overflow: hidden;
+  min-width: 360px;
+  background: color-mix(in srgb, var(--qt-content-bg) 92%, transparent);
+  border-left: 1px solid var(--color-border);
 }
 
-.qt-chat-composer-send:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);
+/**
+ * Vertical (top/bottom) split inside the right pane — used when both
+ * Document Mode and Terminal Mode are active. Document on top, terminal
+ * on bottom, with a draggable horizontal divider between them.
+ */
+.qt-doc-vertical-split-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
 
-.qt-chat-composer-send:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.qt-doc-vertical-pane {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  min-height: 200px;
 }
 
-.qt-chat-composer-send:hover:not(:disabled) {
-  background: var(--qt-button-primary-hover-bg);
+.qt-doc-vertical-divider {
+  flex-shrink: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 6px;
+  cursor: row-resize;
+  background: var(--color-border);
+  transition: background 0.15s ease;
+  user-select: none;
+  touch-action: none;
 }
 
-.qt-chat-continue-button {
-  background: var(--qt-status-info-bg);
-  color: var(--qt-status-info-fg);
-  border: 1px solid var(--qt-status-info-border);
+.qt-doc-vertical-divider:hover,
+.qt-doc-vertical-divider.qt-doc-vertical-divider-active {
+  background: var(--color-primary);
 }
 
-.qt-chat-stop-button {
-  background: var(--qt-status-danger-bg);
-  color: var(--qt-status-danger-fg);
-  border: 1px solid var(--qt-status-danger-border);
+.qt-doc-vertical-divider-grip {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
 }
 
-.qt-chat-stop-button:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--qt-status-danger-bg) 70%, black);
+.qt-doc-vertical-divider-grip span {
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-muted-foreground);
 }
 
-.qt-chat-interrupt-button {
-  background: var(--qt-status-warning-bg);
-  color: var(--qt-status-warning-fg);
-  border: 1px solid var(--qt-status-warning-border);
+.qt-doc-vertical-divider:hover .qt-doc-vertical-divider-grip span,
+.qt-doc-vertical-divider.qt-doc-vertical-divider-active .qt-doc-vertical-divider-grip span {
+  background: var(--qt-primary-fg, var(--color-primary-foreground));
 }
 
-.qt-chat-interrupt-button:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--qt-status-warning-bg) 70%, black);
+/**
+ * Focus mode — document pane fills the entire main area
+ * Chat pane is hidden
+ */
+.qt-doc-focus-mode .qt-doc-editor-area {
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.qt-chat-interrupt-button-raised {
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent);
-  animation: qt-hand-raised-pulse 1.6s ease-in-out infinite;
+/**
+ * Document header bar
+ * Contains title, badges, and mode toggle buttons
+ */
+.qt-doc-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
 }
 
-@keyframes qt-hand-raised-pulse {
-  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qt-status-warning-border) 45%, transparent); }
-  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--qt-status-warning-border) 15%, transparent); }
+/** Green "Document" badge in the header */
+.qt-doc-badge {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  background: var(--qt-success-bg, color-mix(in srgb, #22c55e 15%, var(--qt-content-bg)));
+  color: var(--qt-success-fg, #22c55e);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .qt-chat-interrupt-button-raised { animation: none; }
+/** Editable document title in the header */
+.qt-doc-title {
+  flex: 1 1 0%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-foreground);
 }
 
-/* Composer punctuation warnings — painted by PunctuationLintPlugin through the
-   CSS Custom Highlight API, so no element carries a class. Only background and
-   text-decoration are styleable on a ::highlight. */
-::highlight(qt-punctuation-warning) {
-  background-color: var(--qt-punctuation-warning-bg);
-  text-decoration: underline wavy var(--qt-punctuation-warning-underline);
-  text-decoration-thickness: 2px;
+.qt-doc-title-input {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  width: 100%;
+  background-color: transparent;
+  border-width: 0 0 1px;
+  border-style: dashed;
+  border-color: var(--color-border);
+  color: var(--color-foreground);
+  outline: none;
 }
 
-/* Prose mode (a template like Novel: unmarked narration, quoted dialogue).
-   The no-dialogue tint covers every narrated run while the draft has no
-   dialogue at all; the preview marks narration and ((asides)) the way the
-   rendered message will set them. ::highlight cannot set font-style, so
-   narration is told apart by colour rather than italics. */
-::highlight(qt-punctuation-no-dialogue) {
-  background-color: var(--qt-punctuation-no-dialogue-bg);
-  text-decoration: underline dotted var(--qt-punctuation-no-dialogue-underline);
-  text-decoration-thickness: 2px;
+.qt-doc-title-input:focus {
+  border-color: var(--color-primary);
 }
 
-::highlight(qt-composer-narration) {
-  color: var(--qt-composer-narration-fg);
-  background-color: var(--qt-composer-narration-bg);
+/** Header action buttons (maximize, show chat, exit) */
+.qt-doc-header-button {
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  color: var(--color-muted-foreground);
 }
 
-::highlight(qt-composer-ooc) {
-  color: var(--qt-composer-ooc-fg);
-  background-color: var(--qt-composer-ooc-bg);
+.qt-doc-header-button:hover {
+  color: var(--color-foreground);
+  background: var(--qt-hover-bg, color-mix(in srgb, var(--color-foreground) 10%, transparent));
 }
 
-/* Lexical editor rich text node styles */
-.qt-lexical-contenteditable {
-  overflow-y: auto;
-  position: relative;
+/** Compact qtap:// URL line shown under the document header */
+.qt-doc-uri-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
 }
 
-.qt-lexical-contenteditable [contenteditable] {
-  outline: none;
-  min-height: 1.5em;
+.qt-doc-uri-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--color-muted-foreground);
 }
 
-.qt-lexical-placeholder {
-  color: var(--color-muted-foreground);
-  font-size: 0.875rem;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: var(--qt-input-padding-y, 0.5rem) var(--qt-input-padding-x, 0.75rem);
+.qt-doc-uri-value {
+  min-width: 0;
+  flex: 1 1 0%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-family: var(--font-mono);
+  color: var(--color-muted-foreground);
 }
 
-.qt-lexical-root {
-  outline: none;
-  min-height: 1.5em;
+.qt-doc-uri-copy-button {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  color: var(--color-muted-foreground);
 }
 
-.qt-lexical-paragraph {
-  margin: 0;
+.qt-doc-uri-copy-button:hover {
+  color: var(--color-foreground);
+  background: var(--qt-hover-bg, color-mix(in srgb, var(--color-foreground) 10%, transparent));
 }
 
-.qt-lexical-bold {
-  font-weight: 700;
+/**
+ * Document editor toolbar
+ * Formatting buttons for the document pane, always visible
+ */
+.qt-doc-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
 }
 
-.qt-lexical-italic {
-  font-style: italic;
+/**
+ * Document editor area
+ * Fills available vertical space, independently scrollable
+ */
+.qt-doc-editor-area {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  position: relative;
+  padding: 1rem 1.5rem;
+  background: var(--color-background);
 }
 
-.qt-lexical-underline {
-  text-decoration: underline;
+/**
+ * Status bar at the bottom of the document pane
+ */
+.qt-doc-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-muted-foreground);
+  background: color-mix(in srgb, var(--qt-content-bg) 95%, transparent);
 }
 
-.qt-lexical-strikethrough {
-  text-decoration: line-through;
+.qt-doc-status-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
-.qt-lexical-code {
-  font-family: monospace;
-  font-size: 0.75rem;
-  background: rgba(0, 0, 0, 0.1);
-  padding: 0.1em 0.3em;
-  border-radius: 0.2em;
+/** Saving indicator dot animation */
+.qt-doc-status-saving {
+  display: inline-block;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--qt-warning-fg, #f59e0b);
+  animation: qt-doc-pulse 1s ease-in-out infinite;
 }
 
-.qt-lexical-h1 {
-  font-size: 1.25rem;
-  font-weight: bold;
-  margin: 0.5em 0 0.25em;
+@keyframes qt-doc-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
 }
 
-.qt-lexical-h2 {
-  font-size: 1.125rem;
-  font-weight: bold;
-  margin: 0.4em 0 0.2em;
+/** Saved indicator dot */
+.qt-doc-status-saved {
+  display: inline-block;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--qt-success-fg, #22c55e);
 }
 
-.qt-lexical-h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 0.3em 0 0.15em;
+/**
+ * "Open document" button in composer toolbar
+ * Hidden at viewport widths below 1026px (not enough space for split pane)
+ * When used inside qt-chat-toolbar, inherits toolbar button styling
+ */
+@media (max-width: 1025px) {
+  .qt-doc-open-button {
+    display: none !important;
+  }
 }
 
-.qt-lexical-h4 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  margin: 0.25em 0 0.1em;
+/* Document Gutter */
+.qt-doc-editor-with-gutter {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 
-.qt-lexical-h5 {
-  font-size: 0.75rem;
-  font-weight: 600;
-  margin: 0.2em 0 0.1em;
+.qt-doc-gutter {
+  position: relative;
+  flex-shrink: 0;
+  width: 20px;
+  border-right: 1px solid var(--qt-border-color, rgba(128, 128, 128, 0.2));
 }
 
-.qt-lexical-h6 {
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin: 0.2em 0 0.1em;
+.qt-doc-gutter-change {
+  position: absolute;
+  left: 6px;
+  width: 3px;
+  border-radius: 1.5px;
+  background-color: var(--qt-gutter-change-color, #3b82f6);
+  opacity: 0.6;
 }
 
-.qt-lexical-ul {
-  list-style-type: disc;
-  padding-left: 1.5rem;
-  margin: 0.25em 0;
+.qt-doc-gutter-eye {
+  position: absolute;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  color: var(--qt-gutter-eye-color, #f59e0b);
+  opacity: 0.85;
+  pointer-events: none;
 }
 
-.qt-lexical-ol {
-  list-style-type: decimal;
-  padding-left: 1.5rem;
-  margin: 0.25em 0;
-}
+/* ==========================================================================
+   CHAT SIDEBAR RESIZER
+   ========================================================================== */
 
-.qt-lexical-li {
-  margin: 0.1em 0;
+/**
+ * Drag handle on the inner (left) edge of the expanded sidebar.
+ * Transparent until hovered/active so it doesn't read as a second border.
+ * Visuals mirror .qt-doc-divider / .qt-doc-divider-grip.
+ */
+.qt-chat-sidebar-resizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 10px;
+  transform: translateX(-50%);
+  z-index: 20;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/*
- * Wrapper item for a sub-list. Lexical represents nesting as a list item whose
- * only child is another list, so this <li> is structure rather than content —
- * left to itself it draws the parent list's bullet right beside the sub-list's
- * own first bullet.
- */
-.qt-lexical-li-nested {
-  list-style-type: none;
-  margin: 0;
+.qt-chat-sidebar-resizer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background 0.15s ease;
 }
 
-.qt-lexical-li-nested::before,
-.qt-lexical-li-nested::after {
-  display: none;
+.qt-chat-sidebar-resizer:hover::before,
+.qt-chat-sidebar-resizer:focus-visible::before,
+.qt-chat-sidebar-resizer-active::before {
+  background: var(--color-primary);
 }
 
-/* Checklist items */
-.qt-lexical-checklist {
-  list-style: none;
-  padding-left: 0;
+.qt-chat-sidebar-resizer:focus-visible {
+  outline: none;
 }
 
-.qt-lexical-li-checked,
-.qt-lexical-li-unchecked {
+.qt-chat-sidebar-resizer-grip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   position: relative;
-  padding-left: 1.5rem;
-  list-style: none;
-  margin: 0.15em 0;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.15s ease;
 }
 
-.qt-lexical-li-checked::before,
-.qt-lexical-li-unchecked::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0.25rem;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--qt-border-color, rgba(0, 0, 0, 0.3));
-  cursor: pointer;
+.qt-chat-sidebar-resizer:hover .qt-chat-sidebar-resizer-grip,
+.qt-chat-sidebar-resizer:focus-visible .qt-chat-sidebar-resizer-grip,
+.qt-chat-sidebar-resizer-active .qt-chat-sidebar-resizer-grip {
+  opacity: 1;
 }
 
-.qt-lexical-li-checked::before {
-  background: hsl(var(--primary, 220 90% 56%));
-  border-color: hsl(var(--primary, 220 90% 56%));
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
-  background-size: 12px 12px;
-  background-position: center;
-  background-repeat: no-repeat;
+.qt-chat-sidebar-resizer-grip span {
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-muted-foreground);
 }
 
-.qt-lexical-li-checked {
-  opacity: 0.6;
-  text-decoration: line-through;
+/* ==========================================================================
+   MEMORY SOURCE HIGHLIGHT
+   Applied when scrolling to a message from memory provenance link
+   ========================================================================== */
+
+/**
+ * Highlight animation for message when navigated from memory source link
+ */
+.qt-memory-source-highlight {
+  animation: memory-highlight-pulse 1s ease-in-out 2;
+  position: relative;
 }
 
-.qt-lexical-blockquote {
-  border-left: 4px solid rgba(0, 0, 0, 0.2);
-  padding-left: 0.75rem;
-  font-style: italic;
-  margin: 0.25em 0;
+.qt-memory-source-highlight::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border: 2px solid var(--color-primary);
+  border-radius: var(--qt-chat-message-radius);
+  pointer-events: none;
+  animation: memory-highlight-border 3s ease-out forwards;
 }
 
-.qt-lexical-link {
-  text-decoration: underline;
-  color: hsl(var(--primary, 220 90% 56%));
+@keyframes memory-highlight-pulse {
+  0%, 100% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  }
 }
 
-.qt-lexical-code-block {
-  font-family: monospace;
-  font-size: 0.75rem;
-  background: rgba(0, 0, 0, 0.15);
-  padding: 0.5em 0.75em;
-  border-radius: 0.3em;
-  margin: 0.25em 0;
-  overflow-x: auto;
-  tab-size: 2;
+@keyframes memory-highlight-border {
+  0% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 /* ==========================================================================
@@ -2715,7 +4172,7 @@
 }
 
 .qt-formatting-button:hover:not(:disabled) {
-  background: var(--qt-content-bg-hover);
+  background: var(--qt-content-bg-hover, var(--color-muted));
   border-color: var(--color-foreground);
 }
 
@@ -2927,6 +4384,13 @@
   outline: none;
 }
 
+/* The tint alone was too faint to find; keyboard focus also gets the ring
+   every other control wears (WCAG 2.4.7). */
+.qt-mention-chip:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
 /* ==========================================================================
    TYPEAHEAD MENU
    ==========================================================================
@@ -3005,7 +4469,7 @@
   flex: none;
   font-size: 0.75rem;
   line-height: 1rem;
-  color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
+  color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
 }
 
 .qt-typeahead-empty {
@@ -3013,7 +4477,7 @@
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
+  color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
 }
 
 /* ==========================================================================
@@ -3052,7 +4516,7 @@
   line-height: 1rem;
   font-weight: 600;
   background: var(--qt-popover-bg);
-  color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
+  color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
 }
 
 .qt-emoji-picker-row {
@@ -3075,7 +4539,7 @@
 }
 
 .qt-emoji-picker-cell:hover {
-  background: var(--qt-content-bg-hover);
+  background: var(--qt-content-bg-hover, var(--color-muted));
 }
 
 .qt-emoji-picker-cell:focus-visible {
@@ -3090,7 +4554,7 @@
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: var(--qt-text-secondary-fg, var(--qt-text-secondary));
+  color: var(--qt-text-secondary-fg, var(--color-muted-foreground));
 }
 
 /* Lexical table styling */
@@ -4947,6 +6411,31 @@
   box-shadow: 0 3px 0 0 var(--qt-tab-active-border) inset;
 }
 
+/* The tab's selectable part: a bare button carrying the icon and label, so
+   the tab is keyboard-operable without nesting the close button inside it.
+   Its focus ring is drawn on the whole tab, which is what the eye reads. */
+.qt-tab-select {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.qt-tab-select:focus-visible {
+  outline: none;
+}
+
+.qt-tab-strip .qt-tab:has(.qt-tab-select:focus-visible) {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
 .qt-tab-label {
   max-width: 14rem;
   overflow: hidden;
@@ -4963,7 +6452,8 @@
   height: 1.5rem;
   margin: -0.175rem -0.25rem -0.175rem 0;
   border-radius: 0.25rem;
-  opacity: 0.55;
+  /* 0.8, not 0.55: the dimmer cross fell under the 3:1 a control's icon needs. */
+  opacity: 0.8;
   transition: opacity 0.15s ease, background 0.15s ease;
 }
 
@@ -5388,7 +6878,7 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
 
 .qt-storyteller-mode-option:hover {
   background: var(--qt-storyteller-mode-hover-bg, var(--color-accent));
-  color: var(--qt-storyteller-mode-hover-fg, var(--color-foreground));
+  color: var(--qt-storyteller-mode-hover-fg, var(--color-accent-foreground));
 }
 
 .qt-storyteller-mode-option-active,
@@ -5649,6 +7139,7 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
 
 .qt-intervene-toggle:hover {
   background-color: var(--qt-intervene-toggle-hover-bg, var(--color-accent));
+  color: var(--qt-intervene-toggle-hover-fg, var(--color-accent-foreground));
 }
 
 /* A field the author has hidden from the dialog. */
@@ -5666,6 +7157,271 @@ li:is(.qt-chat-narration, .qt-chat-ooc, .qt-chat-inner-monologue) {
   );
 }
 
+/* ============================================================================
+   ALERTS
+   ============================================================================ */
+
+.qt-alert,
+.qt-alert-success,
+.qt-alert-warning,
+.qt-alert-error,
+.qt-alert-info {
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.qt-alert-success {
+  background-color: var(--qt-alert-success-bg);
+  color: var(--qt-alert-success-fg);
+  border-color: var(--qt-alert-success-border);
+}
+
+.qt-alert-warning {
+  background-color: var(--qt-alert-warning-bg);
+  color: var(--qt-alert-warning-fg);
+  border-color: var(--qt-alert-warning-border);
+}
+
+.qt-alert-error {
+  background-color: var(--qt-alert-error-bg);
+  color: var(--qt-alert-error-fg);
+  border-color: var(--qt-alert-error-border);
+}
+
+.qt-alert-info {
+  background-color: var(--qt-alert-info-bg);
+  color: var(--qt-alert-info-fg);
+  border-color: var(--qt-alert-info-border);
+}
+
+/* Secondary-text helpers inside an alert take the alert's own foreground.
+   qt-text-small and its kin paint the muted grey, which on an alert's tint
+   fell to ~3.6:1 (Art Deco dark) and ~4.1:1 (default dark); the alert's
+   foreground is the colour chosen to sit on that tint. Specificity is two
+   classes — enough to outrank the helper, no more. */
+:is(.qt-alert, .qt-alert-success, .qt-alert-warning, .qt-alert-error, .qt-alert-info)
+  :is(.qt-text-small, .qt-text-muted, .qt-text-secondary, .qt-text-xs) {
+  color: inherit;
+}
+
+/* A link inside an alert's running text takes the alert's colour (qt-link's
+   muted grey fell to ~3.6:1 on the tint) and is underlined, so it is not
+   told from the words around it by colour alone (WCAG 1.4.1). */
+:is(.qt-alert, .qt-alert-success, .qt-alert-warning, .qt-alert-error, .qt-alert-info) a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ============================================================================
+   SETTINGS PAGE - Background image readability
+   When a subsystem background image is shown on the settings page,
+   tabs and header text need opaque/contrasted treatments to remain legible.
+   ============================================================================ */
+
+/* Frosted header banner behind title and subtitle */
+.qt-page-container[style*="--story-background-url"] .qt-settings-header {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  background: color-mix(in srgb, var(--color-background) 80%, transparent);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Opaque inactive tab backgrounds. 90/10, not 85/15: the stronger tint left
+   the muted tab label at 4.3:1 on the default and Rains light palettes. */
+.qt-page-container[style*="--story-background-url"] .qt-tab-group .qt-tab {
+  background: color-mix(in srgb, var(--color-background) 90%, var(--color-muted-foreground) 10%);
+  border-color: var(--color-border);
+}
+
+.qt-page-container[style*="--story-background-url"] .qt-tab-group .qt-tab:hover:not(.qt-tab-active) {
+  background: color-mix(in srgb, var(--color-background) 84%, var(--color-muted-foreground) 16%);
+}
+
+/* Active tab matches the panel background so it merges into it */
+.qt-page-container[style*="--story-background-url"] .qt-tab-group .qt-tab.qt-tab-active {
+  background: color-mix(in srgb, var(--color-background) 88%, transparent);
+  border-color: var(--color-border);
+}
+
+.qt-page-container[style*="--story-background-url"] .qt-tab-group .qt-tab.qt-tab-active::after {
+  background: color-mix(in srgb, var(--color-background) 88%, transparent);
+}
+
+/* Remove gap between tabs and panel so they connect as a folder */
+.qt-page-container[style*="--story-background-url"] .qt-tab-divider {
+  display: none;
+}
+
+/* Collapse the margin between tab nav wrapper and content panel */
+.qt-page-container[style*="--story-background-url"] :has(> .qt-tab-group) {
+  margin-bottom: 0 !important;
+}
+
+.qt-page-container[style*="--story-background-url"] .qt-tab-group {
+  /* Nudge tabs down onto the panel border so the active tab overlaps it */
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+}
+
+/* Settings content panel - the "folder" body below the tabs. */
+.qt-page-container[style*="--story-background-url"] .qt-settings-panel {
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  padding: 1.5rem 1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  background: color-mix(in srgb, var(--color-background) 88%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+  min-height: 40vh;
+}
+
+/* ============================================================================
+   FOOTER
+   ============================================================================ */
+
+.qt-footer {
+  border-top-width: 1px;
+  border-top-style: solid;
+  padding: 1rem;
+  background: var(--qt-app-header-bg);
+  border-color: var(--qt-footer-border);
+  backdrop-filter: var(--qt-app-header-blur);
+  -webkit-backdrop-filter: var(--qt-app-header-blur);
+  position: relative;
+  z-index: 20;
+}
+
+.qt-footer-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--qt-footer-fg);
+}
+
+.qt-footer-link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  color: var(--qt-footer-fg);
+}
+
+.qt-footer-link:hover {
+  color: var(--qt-footer-link-hover);
+}
+
+.qt-footer-path {
+  font-family: monospace;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 24rem;
+  color: var(--qt-footer-fg);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: color 0.15s ease;
+}
+
+/* Full strength at rest: the old 0.7 opacity left the path at ~2.9:1 on the
+   footer. Hover marks itself by colour and underline instead. */
+.qt-footer-path:hover {
+  color: var(--qt-footer-link-hover);
+  text-decoration: underline;
+}
+
+.qt-footer-separator {
+  display: none;
+}
+
+@media (min-width: 40rem) {
+  .qt-footer-path,
+  .qt-footer-separator {
+    display: inline;
+  }
+}
+
+/* ============================================================================
+   SETTINGS FORM SHELLS
+   Shared semantic wrappers for settings cards and toggle rows.
+   ============================================================================ */
+
+.qt-settings-shell {
+  padding: 1rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.25rem;
+  border-color: var(--qt-card-border);
+  background: color-mix(in srgb, var(--color-card) 96%, transparent);
+}
+
+.qt-settings-shell-tight {
+  padding: 0.75rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.25rem;
+  border-color: var(--qt-card-border);
+  background: color-mix(in srgb, var(--color-card) 96%, transparent);
+}
+
+.qt-settings-section-heading {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--qt-text-primary-fg, var(--color-foreground));
+}
+
+.qt-settings-field-group > :not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+.qt-settings-toggle-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  border-color: var(--qt-card-border);
+  transition: background-color 150ms ease;
+}
+
+/* The accent fill carries its own foreground: on themes with a bold accent
+   (Art Deco and Great Estate dark, Madman's Box) the row's ordinary text
+   fell to ~1.4:1 on hover. */
+.qt-settings-toggle-row:hover {
+  background: var(--qt-card-hover-bg, var(--color-accent));
+  color: var(--qt-card-hover-fg, var(--color-accent-foreground));
+}
+
+.qt-settings-toggle-row:hover :where(*) {
+  color: var(--qt-card-hover-fg, var(--color-accent-foreground));
+}
+
 /* ============================================================================
    REDUCED MOTION — every theme honours the OS setting
    ============================================================================ */