@data-club/ai-hub 0.0.1

package/src/styles/default.css

@@ -0,0 +1,2937 @@
+/**
+ * @data-club/ai-hub — default stylesheet.
+ *
+ * The library ships plain CSS (§7.6). Components scope their classes under
+ * `.data-club-ai-hub` and `.data-club-ai-hub-admin`. Themes are selected
+ * via the `data-theme` attribute on the component root, which the
+ * <AIHubProvider> sets based on the resolved theme per §7.6.
+ *
+ * Per-customer wrappers override individual custom properties to brand
+ * the UI; they don't fork this file. Examples:
+ *
+ *   bankxyz-chat::part(root),
+ *   .data-club-ai-hub {
+ *     --dc-aih-accent: #0066cc;
+ *     --dc-aih-radius-md: 12px;
+ *   }
+ *
+ * See CLASSES.md for the full BEM contract.
+ */
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Tokens — defaults (light theme is the implicit fallback)             */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub,
+.data-club-ai-hub-admin {
+  /* The root wrapper fills its host container (Web Component, dev
+     harness `#root`, embedding `<div>`, …) so the chat shell inside
+     can use `height: 100%` and the messages_area becomes the only
+     scrollable region. Without this, the wrapper collapsed to
+     `height: auto` and the shell pinned its `height: 100%` to zero. */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  /* Surface colors */
+  --dc-aih-bg: #ffffff;
+  --dc-aih-bg-elevated: #f8f9fb;
+  --dc-aih-bg-overlay: rgba(255, 255, 255, 0.92);
+  --dc-aih-border: #e2e5ec;
+  --dc-aih-border-strong: #c8ccd6;
+
+  /* Text */
+  --dc-aih-fg: #1a1d24;
+  --dc-aih-fg-muted: #5c6473;
+  --dc-aih-fg-subtle: #8a909c;
+  --dc-aih-fg-inverse: #ffffff;
+
+  /* Accent (per-customer wrappers override this) */
+  --dc-aih-accent: #4a6cf7;
+  --dc-aih-accent-hover: #3b58d8;
+  --dc-aih-accent-fg: #ffffff;
+
+  /* State */
+  --dc-aih-success: #2f9e44;
+  --dc-aih-warning: #d97706;
+  --dc-aih-danger: #d92d20;
+  --dc-aih-focus-ring: rgba(74, 108, 247, 0.4);
+
+  /* Scrollbar — themable per-customer via these custom properties.
+     `--dc-aih-scrollbar-thumb` (and the hover variant) is the visible
+     bar; `--dc-aih-scrollbar-track` is the gutter behind it. Wrappers
+     override these on `.data-club-ai-hub` to match brand chrome. */
+  --dc-aih-scrollbar-thumb: #c8ccd6;
+  --dc-aih-scrollbar-thumb-hover: #a1a7b3;
+  --dc-aih-scrollbar-track: transparent;
+
+  /* Sizing */
+  --dc-aih-radius-sm: 4px;
+  --dc-aih-radius-md: 8px;
+  --dc-aih-radius-lg: 12px;
+  --dc-aih-space-xs: 4px;
+  --dc-aih-space-sm: 8px;
+  --dc-aih-space-md: 16px;
+  --dc-aih-space-lg: 24px;
+  --dc-aih-space-xl: 32px;
+
+  /* Type */
+  --dc-aih-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --dc-aih-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --dc-aih-font-size-sm: 0.875rem;
+  --dc-aih-font-size-md: 1rem;
+  --dc-aih-font-size-lg: 1.125rem;
+
+  /* Motion */
+  --dc-aih-transition: 150ms ease-in-out;
+
+  font-family: var(--dc-aih-font-sans);
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Dark theme overrides                                                 */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub[data-theme="dark"],
+.data-club-ai-hub-admin[data-theme="dark"] {
+  --dc-aih-bg: #0f1117;
+  --dc-aih-bg-elevated: #181b23;
+  --dc-aih-bg-overlay: rgba(15, 17, 23, 0.9);
+  --dc-aih-border: #2a2e38;
+  --dc-aih-border-strong: #3c4250;
+
+  --dc-aih-fg: #e8eaef;
+  --dc-aih-fg-muted: #a1a7b3;
+  --dc-aih-fg-subtle: #6c727e;
+  --dc-aih-fg-inverse: #0f1117;
+
+  --dc-aih-accent: #7a96ff;
+  --dc-aih-accent-hover: #95acff;
+  --dc-aih-accent-fg: #0f1117;
+
+  --dc-aih-success: #51cf66;
+  --dc-aih-warning: #f59f00;
+  --dc-aih-danger: #ff6b6b;
+  --dc-aih-focus-ring: rgba(122, 150, 255, 0.4);
+
+  --dc-aih-scrollbar-thumb: #3c4250;
+  --dc-aih-scrollbar-thumb-hover: #4a5160;
+  --dc-aih-scrollbar-track: transparent;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Base elements + reset                                                */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub *,
+.data-club-ai-hub *::before,
+.data-club-ai-hub *::after,
+.data-club-ai-hub-admin *,
+.data-club-ai-hub-admin *::before,
+.data-club-ai-hub-admin *::after {
+  box-sizing: border-box;
+}
+
+.data-club-ai-hub button,
+.data-club-ai-hub-admin button {
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Themable scrollbars — Firefox + WebKit. Applied to every scrollable
+   region inside the chat / admin scope so the chat doesn't get a stark
+   white system scrollbar on dark themes. Customers override the colors
+   via the `--dc-aih-scrollbar-*` custom properties. */
+.data-club-ai-hub *,
+.data-club-ai-hub-admin * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--dc-aih-scrollbar-thumb) var(--dc-aih-scrollbar-track);
+}
+
+.data-club-ai-hub *::-webkit-scrollbar,
+.data-club-ai-hub-admin *::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.data-club-ai-hub *::-webkit-scrollbar-track,
+.data-club-ai-hub-admin *::-webkit-scrollbar-track {
+  background: var(--dc-aih-scrollbar-track);
+}
+
+.data-club-ai-hub *::-webkit-scrollbar-thumb,
+.data-club-ai-hub-admin *::-webkit-scrollbar-thumb {
+  background-color: var(--dc-aih-scrollbar-thumb);
+  border-radius: 999px;
+  border: 2px solid var(--dc-aih-bg);
+}
+
+.data-club-ai-hub *::-webkit-scrollbar-thumb:hover,
+.data-club-ai-hub-admin *::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dc-aih-scrollbar-thumb-hover);
+}
+
+.data-club-ai-hub *::-webkit-scrollbar-corner,
+.data-club-ai-hub-admin *::-webkit-scrollbar-corner {
+  background: var(--dc-aih-scrollbar-track);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .data-club-ai-hub *,
+  .data-club-ai-hub-admin * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Shared spinner glyph (used by submit buttons across screens)         */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: var(--dc-aih-space-sm);
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  vertical-align: middle;
+  animation: data-club-ai-hub-spin 0.7s linear infinite;
+}
+
+@keyframes data-club-ai-hub-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Login screen — Step 8                                                 */
+/*  ui-sketches/01-login.md                                              */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__login,
+.data-club-ai-hub__change-password {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub__login-card,
+.data-club-ai-hub__change-password-card {
+  width: 100%;
+  max-width: 400px;
+  padding: var(--dc-aih-space-xl);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-lg);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
+}
+
+.data-club-ai-hub[data-theme="dark"] .data-club-ai-hub__login-card,
+.data-club-ai-hub[data-theme="dark"] .data-club-ai-hub__change-password-card {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.data-club-ai-hub__login-card__title,
+.data-club-ai-hub__change-password-card__title {
+  margin: 0 0 var(--dc-aih-space-lg) 0;
+  font-size: 1.75rem;
+  font-weight: 700;
+  text-align: center;
+  /* "Gradient title" per the sketch — uses the accent color so per-customer
+     wrappers can override --dc-aih-accent and get a branded title for free. */
+  background: linear-gradient(
+    90deg,
+    var(--dc-aih-accent) 0%,
+    var(--dc-aih-accent-hover) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  /* Fallback for browsers that don't support background-clip:text — the
+     accent color on the text body is still on-brand. */
+  -webkit-text-fill-color: transparent;
+}
+
+.data-club-ai-hub__login-card__error,
+.data-club-ai-hub__change-password-card__error {
+  margin: 0 0 var(--dc-aih-space-md) 0;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-danger);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dc-aih-danger) 35%, transparent);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__login-card__form,
+.data-club-ai-hub__change-password-card__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub__login-card__field,
+.data-club-ai-hub__change-password-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub__login-card__label,
+.data-club-ai-hub__change-password-card__label {
+  font-size: var(--dc-aih-font-size-sm);
+  font-weight: 500;
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__login-card__input,
+.data-club-ai-hub__change-password-card__input {
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-md);
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+  transition: border-color var(--dc-aih-transition),
+    box-shadow var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__login-card__input:focus-visible,
+.data-club-ai-hub__change-password-card__input:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__login-card__input:disabled,
+.data-club-ai-hub__change-password-card__input:disabled {
+  background-color: var(--dc-aih-bg-elevated);
+  color: var(--dc-aih-fg-muted);
+  cursor: not-allowed;
+}
+
+/* Password input wrapper holds the input + show toggle side-by-side. The
+   toggle is absolutely positioned over the input's right edge so the
+   show/hide eye sits inside the input visually without the input having
+   to know about it. */
+.data-club-ai-hub__login-card__password,
+.data-club-ai-hub__change-password-card__password {
+  position: relative;
+}
+
+.data-club-ai-hub__login-card__input--password,
+.data-club-ai-hub__change-password-card__input--password {
+  /* Reserve space for the toggle button on the right. */
+  padding-right: calc(var(--dc-aih-space-xl) + var(--dc-aih-space-sm));
+}
+
+.data-club-ai-hub__login-card__toggle,
+.data-club-ai-hub__change-password-card__toggle {
+  position: absolute;
+  top: 50%;
+  right: var(--dc-aih-space-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--dc-aih-radius-sm);
+  color: var(--dc-aih-fg-muted);
+  transform: translateY(-50%);
+  transition: color var(--dc-aih-transition),
+    background-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__login-card__toggle:hover,
+.data-club-ai-hub__change-password-card__toggle:hover {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__login-card__toggle:focus-visible,
+.data-club-ai-hub__change-password-card__toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__login-card__submit,
+.data-club-ai-hub__change-password-card__submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-md);
+  font-weight: 600;
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border: none;
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__login-card__submit:hover:not(:disabled),
+.data-club-ai-hub__change-password-card__submit:hover:not(:disabled) {
+  background-color: var(--dc-aih-accent-hover);
+}
+
+.data-club-ai-hub__login-card__submit:focus-visible,
+.data-club-ai-hub__change-password-card__submit:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__login-card__submit:disabled,
+.data-club-ai-hub__change-password-card__submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.data-club-ai-hub__login-card__forgot {
+  margin: var(--dc-aih-space-lg) 0 0 0;
+  padding-top: var(--dc-aih-space-md);
+  border-top: 1px solid var(--dc-aih-border);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  text-align: center;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Change-password screen — Step 8                                      */
+/*  ui-sketches/02-change-password.md                                    */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__change-password-card__intro {
+  margin: 0 0 var(--dc-aih-space-lg) 0;
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  text-align: center;
+}
+
+.data-club-ai-hub__change-password-card__field-error {
+  margin-top: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-danger);
+}
+
+.data-club-ai-hub__change-password-card__cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-md);
+  font-weight: 500;
+  color: var(--dc-aih-fg-muted);
+  background-color: transparent;
+  border: 1px solid var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+  transition: color var(--dc-aih-transition),
+    border-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__change-password-card__cancel:hover:not(:disabled) {
+  color: var(--dc-aih-fg);
+  border-color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__change-password-card__cancel:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__change-password-card__cancel:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Chat-placeholder (Step 8) — replaced by the real chat in Step 9      */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__chat-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50vh;
+  padding: var(--dc-aih-space-xl);
+}
+
+.data-club-ai-hub__chat-placeholder__body {
+  max-width: 480px;
+  padding: var(--dc-aih-space-xl);
+  font-size: var(--dc-aih-font-size-md);
+  color: var(--dc-aih-fg-muted);
+  text-align: center;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px dashed var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Shell — Step 9                                                       */
+/*  ui-sketches/00-shell.md                                              */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  /* Bound the shell to its host element so the messages_area becomes
+     the only scrollable region (the input area stays put at the bottom
+     of `main-column`). The host — the Web Component element, the dev
+     harness's `#root`, or a wrapper page's container div — supplies
+     the height; the shell honors it. Without this, `min-height: 100vh`
+     made the page itself scroll when the chat grew. */
+  overflow: hidden;
+  background-color: var(--dc-aih-bg);
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dc-aih-space-md);
+  padding: 0 var(--dc-aih-space-lg);
+  height: 56px;
+  background-color: var(--dc-aih-bg-overlay);
+  border-bottom: 1px solid var(--dc-aih-border);
+  backdrop-filter: blur(6px);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.data-club-ai-hub__shell-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-md);
+  min-width: 0;
+}
+
+.data-club-ai-hub__shell-header-logo {
+  font-size: var(--dc-aih-font-size-lg);
+  font-weight: 700;
+  background: linear-gradient(
+    90deg,
+    var(--dc-aih-accent) 0%,
+    var(--dc-aih-accent-hover) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+.data-club-ai-hub__shell-header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub__shell-main {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.data-club-ai-hub__shell-footer {
+  padding: var(--dc-aih-space-md) var(--dc-aih-space-lg);
+  border-top: 1px solid var(--dc-aih-border);
+  background-color: var(--dc-aih-bg-elevated);
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+/* ── User menu (right side of shell header) ─────────────────────────── */
+
+.data-club-ai-hub__user-menu {
+  position: relative;
+}
+
+.data-club-ai-hub__user-menu__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition),
+    border-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__user-menu__button:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__user-menu__button:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__user-menu__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: var(--dc-aih-font-size-sm);
+  font-weight: 600;
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border-radius: 50%;
+}
+
+.data-club-ai-hub__user-menu__username {
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+@media (max-width: 480px) {
+  .data-club-ai-hub__user-menu__username {
+    display: none;
+  }
+}
+
+.data-club-ai-hub__user-menu__dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + var(--dc-aih-space-xs));
+  min-width: 220px;
+  padding: var(--dc-aih-space-sm) 0;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  z-index: 30;
+}
+
+.data-club-ai-hub__user-menu__header {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  border-bottom: 1px solid var(--dc-aih-border);
+}
+
+.data-club-ai-hub__user-menu__username-large {
+  font-weight: 600;
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__user-menu__role {
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__user-menu__item {
+  display: block;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  text-align: left;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__user-menu__item:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__user-menu__item:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 12%, transparent);
+}
+
+.data-club-ai-hub__user-menu__item--link {
+  text-decoration: none;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Admin shell + Users sub-page — Step 11                               */
+/*  ui-sketches/04-admin-overview.md, ui-sketches/05-admin-users.md      */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub-admin {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--dc-aih-bg);
+  color: var(--dc-aih-fg);
+  font-family: var(--dc-aih-font-sans);
+}
+
+.data-club-ai-hub-admin__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+.data-club-ai-hub-admin__nav {
+  flex: 0 0 220px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-lg) var(--dc-aih-space-md);
+  border-right: 1px solid var(--dc-aih-border);
+  background-color: var(--dc-aih-bg-elevated);
+}
+
+.data-club-ai-hub-admin__nav-heading {
+  margin: 0 0 var(--dc-aih-space-sm) 0;
+  padding: 0 var(--dc-aih-space-sm);
+  font-size: var(--dc-aih-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub-admin__nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__nav-item {
+  appearance: none;
+  display: block;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  text-align: left;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--dc-aih-radius-sm);
+  cursor: pointer;
+}
+
+.data-club-ai-hub-admin__nav-item:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub-admin__nav-item:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub-admin__nav-item--active {
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--dc-aih-accent) 35%, transparent);
+  font-weight: 600;
+}
+
+.data-club-ai-hub-admin__nav-exit {
+  margin-top: auto;
+  appearance: none;
+  display: block;
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  text-align: left;
+  color: var(--dc-aih-fg-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--dc-aih-radius-sm);
+  cursor: pointer;
+}
+
+.data-club-ai-hub-admin__nav-exit:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub-admin__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  padding: var(--dc-aih-space-xl);
+  gap: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub-admin__placeholder {
+  padding: var(--dc-aih-space-xl);
+  border: 1px dashed var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+  color: var(--dc-aih-fg-muted);
+  font-style: italic;
+}
+
+.data-club-ai-hub-admin__page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub-admin__page-heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(
+    90deg,
+    var(--dc-aih-accent) 0%,
+    color-mix(in srgb, var(--dc-aih-accent) 65%, var(--dc-aih-fg)) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.data-club-ai-hub-admin__button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-weight: 600;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+  cursor: pointer;
+}
+
+.data-club-ai-hub-admin__button:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, var(--dc-aih-bg-elevated));
+}
+
+.data-club-ai-hub-admin__button:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub-admin__button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.data-club-ai-hub-admin__button--primary {
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border-color: transparent;
+}
+
+.data-club-ai-hub-admin__button--primary:hover:not(:disabled) {
+  background-color: var(--dc-aih-accent-hover);
+}
+
+.data-club-ai-hub-admin__loading,
+.data-club-ai-hub-admin__empty,
+.data-club-ai-hub-admin__error {
+  padding: var(--dc-aih-space-lg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub-admin__error {
+  border-color: var(--dc-aih-danger);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 8%, var(--dc-aih-bg-elevated));
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub-admin__users-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  overflow: hidden;
+}
+
+.data-club-ai-hub-admin__users-table thead {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 4%, var(--dc-aih-bg-elevated));
+  text-align: left;
+}
+
+.data-club-ai-hub-admin__users-table th,
+.data-club-ai-hub-admin__users-table td {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  border-bottom: 1px solid var(--dc-aih-border);
+  vertical-align: middle;
+}
+
+.data-club-ai-hub-admin__users-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.data-club-ai-hub-admin__users-row--initial-password td {
+  background-color: color-mix(in srgb, var(--dc-aih-warning, #facc15) 6%, transparent);
+}
+
+.data-club-ai-hub-admin__initial-password-indicator {
+  color: var(--dc-aih-warning, #facc15);
+  margin-right: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__role-select {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub-admin__role-static {
+  display: inline-block;
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  color: var(--dc-aih-fg-muted);
+  font-style: italic;
+}
+
+.data-club-ai-hub-admin__row-action {
+  appearance: none;
+  margin-right: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--dc-aih-radius-sm);
+  cursor: pointer;
+}
+
+.data-club-ai-hub-admin__row-action:hover:not(:disabled) {
+  border-color: var(--dc-aih-border);
+  background-color: var(--dc-aih-bg);
+}
+
+.data-club-ai-hub-admin__row-action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.data-club-ai-hub-admin__row-action--delete:hover:not(:disabled) {
+  border-color: var(--dc-aih-danger);
+}
+
+.data-club-ai-hub-admin__row-flash {
+  margin-left: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font-size: var(--dc-aih-font-size-sm);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub-admin__row-flash--success {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 18%, transparent);
+}
+
+.data-club-ai-hub-admin__row-flash--error {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 18%, transparent);
+}
+
+/* Modal scaffold reused for create-user / reset-confirm / password-reveal. */
+
+.data-club-ai-hub-admin__modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: color-mix(in srgb, #000000 50%, transparent);
+}
+
+.data-club-ai-hub-admin__modal {
+  width: min(420px, calc(100vw - 2 * var(--dc-aih-space-lg)));
+  max-height: calc(100vh - 2 * var(--dc-aih-space-lg));
+  overflow: auto;
+  padding: var(--dc-aih-space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-md);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
+}
+
+.data-club-ai-hub-admin__modal-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.data-club-ai-hub-admin__modal-warning {
+  margin: 0;
+  padding: var(--dc-aih-space-sm);
+  background-color: color-mix(in srgb, var(--dc-aih-warning, #facc15) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dc-aih-warning, #facc15) 50%, transparent);
+  border-radius: var(--dc-aih-radius-sm);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__modal-body {
+  margin: 0;
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__modal-error {
+  padding: var(--dc-aih-space-sm);
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 12%, transparent);
+  border: 1px solid var(--dc-aih-danger);
+  border-radius: var(--dc-aih-radius-sm);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__modal-label {
+  font-weight: 600;
+}
+
+.data-club-ai-hub-admin__modal-input {
+  padding: var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub-admin__modal-input:focus {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub-admin__modal-input--password {
+  font-family: var(--dc-aih-font-mono);
+  letter-spacing: 0.05em;
+}
+
+.data-club-ai-hub-admin__modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dc-aih-space-sm);
+  margin-top: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub-admin__password-reveal-row {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__password-reveal-row .data-club-ai-hub-admin__modal-input {
+  flex: 1 1 auto;
+}
+
+.data-club-ai-hub-admin__copy-button {
+  appearance: none;
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+  cursor: pointer;
+}
+
+.data-club-ai-hub-admin__copy-button:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, var(--dc-aih-bg));
+}
+
+.data-club-ai-hub-admin__copy-flash {
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-accent);
+  font-weight: 600;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Agents picker — Step 9                                               */
+/*  ui-sketches/03-chat.md                                               */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__agents-picker {
+  width: 100%;
+  padding: var(--dc-aih-space-xl);
+  overflow-y: auto;
+}
+
+.data-club-ai-hub__agents-picker__heading {
+  margin: 0 0 var(--dc-aih-space-lg) 0;
+  font-size: 1.75rem;
+  font-weight: 700;
+  background: linear-gradient(
+    90deg,
+    var(--dc-aih-accent) 0%,
+    var(--dc-aih-accent-hover) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+.data-club-ai-hub__agents-picker__loading,
+.data-club-ai-hub__agents-picker__error {
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__agents-picker__empty {
+  max-width: 480px;
+  padding: var(--dc-aih-space-xl);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px dashed var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__agents-picker__empty-heading {
+  margin: 0 0 var(--dc-aih-space-sm) 0;
+  color: var(--dc-aih-fg);
+  font-size: var(--dc-aih-font-size-lg);
+}
+
+.data-club-ai-hub__agents-picker__empty-body {
+  margin: 0;
+}
+
+.data-club-ai-hub__agents-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub__agent-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-lg);
+  text-align: left;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  cursor: pointer;
+  transition: border-color var(--dc-aih-transition),
+    background-color var(--dc-aih-transition),
+    transform var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__agent-card:hover {
+  border-color: var(--dc-aih-accent);
+  transform: translateY(-2px);
+}
+
+.data-club-ai-hub__agent-card:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__agent-card__name {
+  font-size: var(--dc-aih-font-size-lg);
+  font-weight: 600;
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__agent-card__subtitle {
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Chat layout — Step 9                                                 */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.data-club-ai-hub__layout--panel-right {
+  flex-direction: row-reverse;
+}
+
+/* ── Sessions panel ─────────────────────────────────────────────────── */
+
+.data-club-ai-hub__sessions-panel {
+  display: flex;
+  flex-direction: column;
+  width: var(--dc-aih-sessions-panel-width, 25%);
+  min-width: 220px;
+  max-width: 480px;
+  border-right: 1px solid var(--dc-aih-border);
+  background-color: var(--dc-aih-bg-elevated);
+  overflow: hidden;
+}
+
+.data-club-ai-hub__layout--panel-right .data-club-ai-hub__sessions-panel {
+  border-right: none;
+  border-left: 1px solid var(--dc-aih-border);
+}
+
+.data-club-ai-hub__sessions-panel--collapsed {
+  width: 40px;
+  min-width: 40px;
+  align-items: center;
+  padding-top: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub__sessions-panel__reveal {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: var(--dc-aih-font-size-md);
+  color: var(--dc-aih-fg-muted);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__sessions-panel__custom-header,
+.data-club-ai-hub__sessions-panel__custom-footer {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub__sessions-panel__new-button {
+  margin: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-sm);
+  font: inherit;
+  font-weight: 500;
+  color: var(--dc-aih-accent);
+  background-color: transparent;
+  border: 1px dashed var(--dc-aih-accent);
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__sessions-panel__new-button:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 8%, transparent);
+}
+
+.data-club-ai-hub__sessions-panel__collapse-toggle {
+  align-self: flex-end;
+  margin: var(--dc-aih-space-xs) var(--dc-aih-space-sm) 0 0;
+  padding: 0 var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg-muted);
+  background: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__sessions-panel__list {
+  flex: 1;
+  margin: 0;
+  padding: var(--dc-aih-space-sm);
+  list-style: none;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub__sessions-panel__loading,
+.data-club-ai-hub__sessions-panel__empty {
+  padding: var(--dc-aih-space-md);
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__sessions-panel__item {
+  display: flex;
+  align-items: stretch;
+  gap: var(--dc-aih-space-xs);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__sessions-panel__item:hover {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 4%, transparent);
+}
+
+.data-club-ai-hub__sessions-panel__item--active {
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 14%, transparent);
+}
+
+.data-club-ai-hub__sessions-panel__item--archived {
+  opacity: 0.6;
+}
+
+.data-club-ai-hub__sessions-panel__item-title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+  padding: var(--dc-aih-space-xs);
+  font: inherit;
+  text-align: left;
+  color: var(--dc-aih-fg);
+  background: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__sessions-panel__item-title > span:first-child {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.data-club-ai-hub__sessions-panel__item-meta {
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__sessions-panel__item-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__sessions-panel__item:hover .data-club-ai-hub__sessions-panel__item-actions,
+.data-club-ai-hub__sessions-panel__item:focus-within .data-club-ai-hub__sessions-panel__item-actions {
+  opacity: 1;
+}
+
+.data-club-ai-hub__sessions-panel__action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub__sessions-panel__action-button:hover {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 8%, transparent);
+}
+
+.data-club-ai-hub__sessions-panel__footer {
+  padding: var(--dc-aih-space-sm);
+  border-top: 1px solid var(--dc-aih-border);
+}
+
+.data-club-ai-hub__sessions-panel__archived-toggle {
+  width: 100%;
+  padding: var(--dc-aih-space-xs);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  background: transparent;
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__sessions-panel__archived-toggle:hover {
+  color: var(--dc-aih-fg);
+}
+
+/* ── Main column ────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__main-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background-color: var(--dc-aih-bg);
+}
+
+.data-club-ai-hub__chat-header {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-md);
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-lg);
+  border-bottom: 1px solid var(--dc-aih-border);
+  background-color: var(--dc-aih-bg-overlay);
+}
+
+.data-club-ai-hub__chat-header__back {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub__chat-header__back:hover {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+}
+
+.data-club-ai-hub__chat-header__title {
+  margin: 0;
+  font-size: var(--dc-aih-font-size-md);
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.data-club-ai-hub__chat-header__extras {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub__main-column__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* ── Message list ───────────────────────────────────────────────────── */
+
+/* Wrapper around the scroll container. Exists so `<ScrollToPresentButton>`
+   can be a sibling of the scrolling element instead of a child — children
+   of a `overflow: scroll` element scroll with the content even when
+   `position: absolute`-positioned, so the button would have slid off
+   screen as the user scrolled. Anchoring it here keeps it fixed to the
+   visible chat area. */
+.data-club-ai-hub__messages-wrapper {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.data-club-ai-hub__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub__messages__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-md);
+  max-width: 760px;
+  margin: 0 auto;
+}
+
+.data-club-ai-hub__messages__empty,
+.data-club-ai-hub__messages__no-session,
+.data-club-ai-hub__messages__loading {
+  margin: 0;
+  padding: var(--dc-aih-space-xl);
+  color: var(--dc-aih-fg-muted);
+  text-align: center;
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+/* Turn-failure banner — surfaced when sendMessage's loop ended with an
+   error OR with no assistant output. Step 10 will add a Retry button +
+   the `--failed` bubble modifier. */
+.data-club-ai-hub__messages__error {
+  align-self: flex-start;
+  max-width: 80%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-danger);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dc-aih-danger) 40%, transparent);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__message-bubble {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+  max-width: 80%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  border-radius: var(--dc-aih-radius-md);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.data-club-ai-hub__message-bubble--user {
+  align-self: flex-end;
+  background-color: var(--dc-aih-accent);
+  color: var(--dc-aih-accent-fg);
+}
+
+.data-club-ai-hub__message-bubble--assistant {
+  align-self: flex-start;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__message-bubble__role {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, currentColor 65%, transparent);
+}
+
+.data-club-ai-hub__message-bubble__body {
+  font-size: var(--dc-aih-font-size-md);
+  line-height: 1.5;
+}
+
+/* Streaming caret — a thin blinking bar at the end of the in-progress
+   assistant bubble's text. Replaced in Step 10 by the proper §10.4
+   streaming-dots affordance; until then this is the user-visible signal
+   that the agent is still typing. The width / color / animation are
+   themable (and the @media reduced-motion rule already in this stylesheet
+   suppresses the animation when the user has asked for it). */
+.data-club-ai-hub__message-bubble__caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  background-color: currentColor;
+  animation: data-club-ai-hub-blink 1s steps(2, start) infinite;
+}
+
+@keyframes data-club-ai-hub-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+/* ── Input area ─────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__input-area {
+  padding: var(--dc-aih-space-md) var(--dc-aih-space-lg);
+  border-top: 1px solid var(--dc-aih-border);
+  background-color: var(--dc-aih-bg-overlay);
+}
+
+.data-club-ai-hub__input-area__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-sm);
+  max-width: 760px;
+  margin: 0 auto;
+}
+
+.data-club-ai-hub__input-area__row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub__input-area__textarea {
+  flex: 1;
+  min-height: 44px;
+  max-height: 240px;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-md);
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+  resize: none;
+  transition: border-color var(--dc-aih-transition),
+    box-shadow var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__input-area__textarea:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__input-area__textarea:disabled {
+  background-color: var(--dc-aih-bg-elevated);
+  color: var(--dc-aih-fg-muted);
+  cursor: not-allowed;
+}
+
+.data-club-ai-hub__input-area__send,
+.data-club-ai-hub__input-area__stop {
+  /* Match the textarea's resting min-height so the button doesn't look
+     squashed next to it. `flex-end` alignment on the row keeps the
+     button anchored to the bottom when the textarea grows, so the
+     visual relationship stays right for multi-line inputs too. */
+  min-height: 44px;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-lg);
+  font: inherit;
+  font-weight: 600;
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border: none;
+  border-radius: var(--dc-aih-radius-md);
+  transition: background-color var(--dc-aih-transition);
+}
+
+.data-club-ai-hub__input-area__stop {
+  background-color: var(--dc-aih-danger);
+}
+
+/* "Stopping…" state — visible from the moment the user clicks Stop
+   until the server's terminal event lands (typically ~300ms while the
+   Letta-side cancel propagates). Locked-out so the cancel POST can't
+   double-fire; the muted opacity is the visual cue. */
+.data-club-ai-hub__input-area__stop[data-stopping="true"] {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+.data-club-ai-hub__input-area__send:hover:not(:disabled),
+.data-club-ai-hub__input-area__stop:hover {
+  background-color: var(--dc-aih-accent-hover);
+}
+
+.data-club-ai-hub__input-area__send:focus-visible,
+.data-club-ai-hub__input-area__stop:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__input-area__send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.data-club-ai-hub__input-area__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Generic modal (used by SessionTitleModal — Step 9; reused by Step    */
+/*  11/12 admin modals)                                                  */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__modal-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dc-aih-space-lg);
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 40;
+}
+
+.data-club-ai-hub__modal {
+  width: 100%;
+  max-width: 440px;
+  padding: var(--dc-aih-space-xl);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-lg);
+  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
+}
+
+.data-club-ai-hub__modal__title {
+  margin: 0 0 var(--dc-aih-space-lg) 0;
+  font-size: var(--dc-aih-font-size-lg);
+  font-weight: 700;
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__modal__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub__modal__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub__modal__label {
+  font-size: var(--dc-aih-font-size-sm);
+  font-weight: 500;
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__modal__input {
+  width: 100%;
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-size: var(--dc-aih-font-size-md);
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__modal__input:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__modal__field-error {
+  margin: 0;
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-danger);
+}
+
+.data-club-ai-hub__modal__actions {
+  display: flex;
+  gap: var(--dc-aih-space-sm);
+  justify-content: flex-end;
+}
+
+.data-club-ai-hub__modal__cancel,
+.data-club-ai-hub__modal__confirm {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-lg);
+  font: inherit;
+  font-weight: 500;
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__modal__cancel {
+  color: var(--dc-aih-fg-muted);
+  background-color: transparent;
+  border: 1px solid var(--dc-aih-border-strong);
+}
+
+.data-club-ai-hub__modal__cancel:hover:not(:disabled) {
+  color: var(--dc-aih-fg);
+  border-color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub__modal__confirm {
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border: none;
+}
+
+.data-club-ai-hub__modal__confirm:hover:not(:disabled) {
+  background-color: var(--dc-aih-accent-hover);
+}
+
+.data-club-ai-hub__modal__confirm:disabled,
+.data-club-ai-hub__modal__cancel:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Turn-status indicator (Step 10)                                       */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__turn-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  margin-left: auto;
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__turn-status__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--dc-aih-fg-subtle);
+}
+
+.data-club-ai-hub__turn-status__dot--idle {
+  background-color: var(--dc-aih-fg-subtle);
+}
+
+.data-club-ai-hub__turn-status__dot--running {
+  background-color: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub__turn-status__dot--warning {
+  background-color: var(--dc-aih-warning);
+}
+
+.data-club-ai-hub__turn-status__dot--error {
+  background-color: var(--dc-aih-danger);
+}
+
+.data-club-ai-hub__turn-status__dot--pulse {
+  animation: data-club-ai-hub-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes data-club-ai-hub-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.25);
+  }
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Theme switcher (Step 10)                                              */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__theme-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__theme-switcher:hover {
+  background-color: var(--dc-aih-bg);
+  border-color: var(--dc-aih-border);
+}
+
+.data-club-ai-hub__theme-switcher:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+.data-club-ai-hub__theme-switcher__icon {
+  font-size: var(--dc-aih-font-size-lg);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  System notice / TPM banner (Step 10)                                  */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__system-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub__system-notice--tpm-wait {
+  color: color-mix(in srgb, var(--dc-aih-warning) 70%, var(--dc-aih-fg));
+  border-color: var(--dc-aih-warning);
+  background-color: color-mix(
+    in srgb,
+    var(--dc-aih-warning) 12%,
+    var(--dc-aih-bg)
+  );
+}
+
+.data-club-ai-hub__system-notice--resumed {
+  color: color-mix(in srgb, var(--dc-aih-success) 70%, var(--dc-aih-fg));
+  border-color: var(--dc-aih-success);
+  background-color: color-mix(
+    in srgb,
+    var(--dc-aih-success) 12%,
+    var(--dc-aih-bg)
+  );
+}
+
+.data-club-ai-hub__system-notice--error {
+  color: color-mix(in srgb, var(--dc-aih-danger) 70%, var(--dc-aih-fg));
+  border-color: var(--dc-aih-danger);
+  background-color: color-mix(
+    in srgb,
+    var(--dc-aih-danger) 12%,
+    var(--dc-aih-bg)
+  );
+}
+
+.data-club-ai-hub__system-notice__icon {
+  font-size: var(--dc-aih-font-size-lg);
+}
+
+.data-club-ai-hub__system-notice__body {
+  flex: 1;
+}
+
+.data-club-ai-hub__system-notice__action {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  font-weight: 600;
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border: none;
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub__system-notice__action:hover {
+  background-color: var(--dc-aih-accent-hover);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Reasoning block (Step 10)                                             */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__reasoning-block {
+  margin-top: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-sm);
+  background-color: var(--dc-aih-bg);
+  border: 1px dashed var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-md);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__reasoning-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub__reasoning-block__title {
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__reasoning-block__toggle {
+  font: inherit;
+  color: var(--dc-aih-fg-muted);
+  background-color: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__reasoning-block__body {
+  margin-top: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-sm);
+  font-family: var(--dc-aih-font-mono);
+  white-space: pre-wrap;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg-elevated);
+  border-radius: var(--dc-aih-radius-sm);
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Tool-call card (Step 10)                                              */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__tool-call-card {
+  margin-top: var(--dc-aih-space-sm);
+  padding: var(--dc-aih-space-sm);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__tool-call-card--error {
+  border-color: var(--dc-aih-danger);
+}
+
+.data-club-ai-hub__tool-call-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub__tool-call-card__tool-name {
+  font-weight: 600;
+}
+
+.data-club-ai-hub__tool-call-card__status {
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__tool-call-card--error .data-club-ai-hub__tool-call-card__status {
+  color: var(--dc-aih-danger);
+}
+
+.data-club-ai-hub__tool-call-card--done .data-club-ai-hub__tool-call-card__status {
+  color: var(--dc-aih-success);
+}
+
+.data-club-ai-hub__tool-call-card__duration {
+  color: var(--dc-aih-fg-subtle);
+  font-family: var(--dc-aih-font-mono);
+}
+
+.data-club-ai-hub__tool-call-card__toggle {
+  margin-left: auto;
+  font: inherit;
+  color: var(--dc-aih-fg-muted);
+  background-color: transparent;
+  border: none;
+}
+
+.data-club-ai-hub__tool-call-card__body {
+  margin-top: var(--dc-aih-space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub__tool-call-card__section-label {
+  font-weight: 600;
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__tool-call-card__section-content {
+  margin: 0;
+  padding: var(--dc-aih-space-sm);
+  font-family: var(--dc-aih-font-mono);
+  white-space: pre-wrap;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg-elevated);
+  border-radius: var(--dc-aih-radius-sm);
+  overflow-x: auto;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Scroll-to-present button (Step 10)                                    */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__scroll-to-present-button {
+  /* Anchored to the bottom-center of the message-list wrapper (which is
+     a non-scrolling parent of the scroll container — see the wrapper
+     class above). `absolute` positioning here is fixed against the
+     wrapper, so the button stays put as the user scrolls through the
+     chat. Horizontal-centered via the `left: 50%; translateX(-50%)`
+     pattern; vertical offset gives a comfortable gap above the input
+     area. */
+  position: absolute;
+  bottom: var(--dc-aih-space-lg);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  font-weight: 600;
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border: none;
+  border-radius: 999px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
+  z-index: 5;
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Effort dropdown (Step 10)                                             */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__effort-control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__effort-control__label {
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__effort-control__select {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub__effort-control__select:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  ReasoningSelector — capability-driven per-session dropdowns           */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__reasoning-selector {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+  flex-wrap: wrap;
+}
+
+.data-club-ai-hub__reasoning-selector__field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__reasoning-selector__label {
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__reasoning-selector__select,
+.data-club-ai-hub__reasoning-selector__input {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border-strong);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub__reasoning-selector__input {
+  width: 6rem;
+}
+
+.data-club-ai-hub__reasoning-selector__select:focus-visible,
+.data-club-ai-hub__reasoning-selector__input:focus-visible {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+  box-shadow: 0 0 0 3px var(--dc-aih-focus-ring);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Step-10 message-bubble extensions                                     */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub__message-bubble--system {
+  align-self: center;
+  font-style: italic;
+  color: var(--dc-aih-fg-muted);
+  background-color: transparent;
+  border: 1px dashed var(--dc-aih-border-strong);
+}
+
+.data-club-ai-hub__message-bubble--tool {
+  align-self: flex-start;
+  background-color: var(--dc-aih-bg);
+  border: 1px dashed var(--dc-aih-border-strong);
+  font-family: var(--dc-aih-font-mono);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub__message-bubble--failed {
+  border-color: var(--dc-aih-danger);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 8%, var(--dc-aih-bg-elevated));
+}
+
+.data-club-ai-hub__message-bubble--cancelled {
+  opacity: 0.75;
+}
+
+.data-club-ai-hub__message-bubble__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub__message-bubble__retry {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  font-weight: 600;
+  color: var(--dc-aih-accent-fg);
+  background-color: var(--dc-aih-accent);
+  border: none;
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub__message-bubble__retry:hover {
+  background-color: var(--dc-aih-accent-hover);
+}
+
+.data-club-ai-hub__message-bubble__cancelled-stamp {
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ─────────────────────────────────────────────────────────────────── */
+/*  Cache badge — per-assistant-message prompt-cache hit indicator       */
+/*                                                                       */
+/*  Renders as a small chip in the bottom-right corner of the assistant  */
+/*  bubble, showing the cache-hit % over the prompt-side tokens. The     */
+/*  `data-cache-state` attribute (none|cold|warm|hot) drives the color   */
+/*  so skinners can override per-state via the CSS-vars without          */
+/*  duplicating the layout rules.                                        */
+/* ─────────────────────────────────────────────────────────────────── */
+.data-club-ai-hub__cache-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  margin-top: 0.4em;
+  margin-left: auto;
+  align-self: flex-end;
+  padding: 0.1em 0.5em;
+  font-size: 0.75em;
+  line-height: 1.2;
+  border-radius: 999px;
+  background: var(--dc-aih-cache-badge-bg, rgba(127, 127, 127, 0.12));
+  color: var(--dc-aih-cache-badge-fg, var(--dc-aih-text-muted, #888));
+  border: 1px solid var(--dc-aih-cache-badge-border, transparent);
+  cursor: help; /* signals the title-attribute tooltip */
+  user-select: none;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.data-club-ai-hub__cache-badge[data-cache-state="hot"] {
+  background: var(--dc-aih-cache-badge-hot-bg, rgba(40, 180, 99, 0.14));
+  color: var(--dc-aih-cache-badge-hot-fg, #28b463);
+}
+.data-club-ai-hub__cache-badge[data-cache-state="warm"] {
+  background: var(--dc-aih-cache-badge-warm-bg, rgba(255, 142, 78, 0.14));
+  color: var(--dc-aih-cache-badge-warm-fg, #ff8e4e);
+}
+.data-club-ai-hub__cache-badge[data-cache-state="cold"] {
+  background: var(--dc-aih-cache-badge-cold-bg, rgba(160, 160, 160, 0.14));
+  color: var(--dc-aih-cache-badge-cold-fg, #888);
+}
+.data-club-ai-hub__cache-badge[data-cache-state="miss"] {
+  /* Full cache miss — provider had to reinitialize the whole prompt.
+     Red-tinted to signal "nothing cached this turn". */
+  background: var(--dc-aih-cache-badge-miss-bg, rgba(216, 44, 246, 0.12));
+  color: var(--dc-aih-cache-badge-miss-fg, #d82cf6);
+}
+.data-club-ai-hub__cache-badge[data-cache-state="priming"] {
+  /* This turn WROTE to the provider's cache. Next turn benefits.
+     Blue-tinted to distinguish from cold miss. */
+  background: var(--dc-aih-cache-badge-priming-bg, rgba(41, 189, 239, 0.14));
+  color: var(--dc-aih-cache-badge-priming-fg, #29bdef);
+}
+.data-club-ai-hub__cache-badge[data-cache-state="none"] {
+  font-style: italic;
+  opacity: 0.7;
+}
+.data-club-ai-hub__cache-badge__icon {
+  font-size: 0.9em;
+}
+.data-club-ai-hub__cache-badge__label {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+/*  Step 12 — admin Agents / Sessions overview / Settings sub-pages           */
+/* ────────────────────────────────────────────────────────────────────────── */
+
+/* Shared form fields (used by AgentEditorModal + settings page sections). */
+
+.data-club-ai-hub-admin__form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+  margin-bottom: var(--dc-aih-space-md);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__form-label {
+  font-weight: 600;
+}
+
+.data-club-ai-hub-admin__form-input {
+  padding: var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub-admin__form-input:focus {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub-admin__form-helper {
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__form-error {
+  color: var(--dc-aih-danger);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__mono {
+  font-family: var(--dc-aih-font-mono);
+  font-size: 0.9em;
+}
+
+.data-club-ai-hub-admin__page-header-actions {
+  display: flex;
+  gap: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub-admin__button--danger {
+  color: var(--dc-aih-danger-fg, #ffffff);
+  background-color: var(--dc-aih-danger);
+  border-color: transparent;
+}
+
+.data-club-ai-hub-admin__button--danger:hover:not(:disabled) {
+  background-color: color-mix(in srgb, #000000 12%, var(--dc-aih-danger));
+}
+
+/* Agents sub-page. */
+
+.data-club-ai-hub-admin__agents-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub-admin__agents-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  overflow: hidden;
+}
+
+.data-club-ai-hub-admin__agents-table thead {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, var(--dc-aih-bg-elevated));
+}
+
+.data-club-ai-hub-admin__agents-table th,
+.data-club-ai-hub-admin__agents-table td {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  text-align: left;
+  border-bottom: 1px solid var(--dc-aih-border);
+  vertical-align: top;
+}
+
+.data-club-ai-hub-admin__agents-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.data-club-ai-hub-admin__agents-row--archived td {
+  opacity: 0.55;
+}
+
+.data-club-ai-hub-admin__status-pill {
+  display: inline-block;
+  padding: 2px var(--dc-aih-space-sm);
+  font-size: var(--dc-aih-font-size-sm);
+  border-radius: 999px;
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+}
+
+.data-club-ai-hub-admin__status-pill--active {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--dc-aih-accent) 30%, transparent);
+}
+
+.data-club-ai-hub-admin__status-pill--archived {
+  color: var(--dc-aih-fg-muted);
+}
+
+.data-club-ai-hub-admin__filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  cursor: pointer;
+}
+
+.data-club-ai-hub-admin__footnote {
+  margin: 0;
+  padding: var(--dc-aih-space-md);
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 4%, var(--dc-aih-bg-elevated));
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__modal-body {
+  margin: 0;
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+/* Sessions overview sub-page. */
+
+.data-club-ai-hub-admin__sessions-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub-admin__search {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+  min-width: 220px;
+}
+
+.data-club-ai-hub-admin__search:focus {
+  outline: none;
+  border-color: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub-admin__filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dc-aih-space-md);
+  padding: var(--dc-aih-space-md);
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 3%, var(--dc-aih-bg-elevated));
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub-admin__filter {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__filter select {
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  font: inherit;
+  color: var(--dc-aih-fg);
+  background-color: var(--dc-aih-bg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+.data-club-ai-hub-admin__sessions-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  overflow: hidden;
+}
+
+.data-club-ai-hub-admin__sessions-table thead {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, var(--dc-aih-bg-elevated));
+}
+
+.data-club-ai-hub-admin__sessions-table th,
+.data-club-ai-hub-admin__sessions-table td {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  text-align: left;
+  border-bottom: 1px solid var(--dc-aih-border);
+  vertical-align: top;
+}
+
+.data-club-ai-hub-admin__sessions-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.data-club-ai-hub-admin__pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub-admin__page-number {
+  color: var(--dc-aih-fg-muted);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+/* Sessions overview — detail view (read-only). */
+
+.data-club-ai-hub-admin__session-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub-admin__detail-header {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub-admin__detail-heading {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.data-club-ai-hub-admin__back-link {
+  appearance: none;
+  background: none;
+  border: none;
+  color: var(--dc-aih-accent);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
+.data-club-ai-hub-admin__back-link:hover {
+  text-decoration: underline;
+}
+
+.data-club-ai-hub-admin__readonly-messages {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub-admin__readonly-bubble {
+  padding: var(--dc-aih-space-md);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub-admin__readonly-bubble--user {
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 8%, var(--dc-aih-bg-elevated));
+}
+
+.data-club-ai-hub-admin__readonly-meta {
+  display: flex;
+  gap: var(--dc-aih-space-sm);
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-fg-muted);
+  margin-bottom: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__readonly-content {
+  white-space: pre-wrap;
+}
+
+/* Settings sub-page. */
+
+.data-club-ai-hub-admin__settings-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xl);
+}
+
+.data-club-ai-hub-admin__settings-section {
+  padding: var(--dc-aih-space-lg);
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-md);
+}
+
+.data-club-ai-hub-admin__settings-section-heading {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--dc-aih-fg-muted);
+  border-bottom: 1px solid var(--dc-aih-border);
+  padding-bottom: var(--dc-aih-space-sm);
+}
+
+.data-club-ai-hub-admin__radio-group,
+.data-club-ai-hub-admin__toggle-group {
+  border: none;
+  padding: 0;
+  margin: 0 0 var(--dc-aih-space-sm) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__radio-group {
+  flex-direction: row;
+  gap: var(--dc-aih-space-md);
+  align-items: center;
+}
+
+.data-club-ai-hub-admin__radio,
+.data-club-ai-hub-admin__checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__warning {
+  margin: 0;
+  padding: var(--dc-aih-space-md);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 8%, var(--dc-aih-bg-elevated));
+  border: 1px solid color-mix(in srgb, var(--dc-aih-danger) 45%, transparent);
+  border-radius: var(--dc-aih-radius-sm);
+  color: var(--dc-aih-fg);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__flash {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  border-radius: var(--dc-aih-radius-sm);
+  font-size: var(--dc-aih-font-size-sm);
+}
+
+.data-club-ai-hub-admin__flash--success {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 18%, transparent);
+}
+
+.data-club-ai-hub-admin__flash--error {
+  color: var(--dc-aih-fg);
+  background-color: color-mix(in srgb, var(--dc-aih-danger) 18%, transparent);
+}
+
+.data-club-ai-hub-admin__reveal-row {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__reveal-row .data-club-ai-hub-admin__form-input {
+  flex: 1 1 auto;
+}
+
+.data-club-ai-hub-admin__copied-flash {
+  font-size: var(--dc-aih-font-size-sm);
+  color: var(--dc-aih-accent);
+}
+
+/* ────────────────────────────────────────────────────────────────────── */
+/*  Markdown renderer — assistant bubble bodies                          */
+/*                                                                       */
+/*  `<MarkdownRenderer />` produces a real block tree (paragraphs,       */
+/*  headings, tables, code blocks, KaTeX equations). The message bubble  */
+/*  has `white-space: pre-wrap` so user input keeps its line breaks;     */
+/*  inside the markdown root we revert that so paragraphs don't get      */
+/*  double-spaced.                                                       */
+/*                                                                       */
+/*  Per-customer wrappers theme by overriding `--dc-aih-markdown-*`     */
+/*  custom properties on `.data-club-ai-hub`; only those land here as    */
+/*  variables, the rest read the shared `--dc-aih-*` tokens.             */
+/* ────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub {
+  --dc-aih-markdown-code-bg: color-mix(in srgb, var(--dc-aih-fg) 6%, transparent);
+  --dc-aih-markdown-code-fg: var(--dc-aih-fg);
+  --dc-aih-markdown-quote-border: var(--dc-aih-border-strong);
+  --dc-aih-markdown-table-border: var(--dc-aih-border);
+  --dc-aih-markdown-table-header-bg: var(--dc-aih-bg-elevated);
+  --dc-aih-markdown-link-fg: var(--dc-aih-accent);
+}
+
+.data-club-ai-hub__markdown {
+  /* Reset `white-space: pre-wrap` inherited from the bubble — the        */
+  /* renderer emits real block elements, so newlines in the markdown      */
+  /* source shouldn't render as visible spaces.                           */
+  white-space: normal;
+  font-size: var(--dc-aih-font-size-md);
+  line-height: 1.55;
+}
+
+/* Collapse the first/last block's margins so the bubble's own padding   */
+/* still feels tight around the rendered content.                        */
+.data-club-ai-hub__markdown > :first-child {
+  margin-top: 0;
+}
+.data-club-ai-hub__markdown > :last-child {
+  margin-bottom: 0;
+}
+
+/* Paragraphs */
+.data-club-ai-hub__markdown__p {
+  margin: 0.5em 0;
+}
+
+/* Headings */
+.data-club-ai-hub__markdown__heading {
+  margin: 1em 0 0.4em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.data-club-ai-hub__markdown__heading--1 {
+  font-size: 1.4em;
+}
+.data-club-ai-hub__markdown__heading--2 {
+  font-size: 1.25em;
+}
+.data-club-ai-hub__markdown__heading--3 {
+  font-size: 1.1em;
+}
+.data-club-ai-hub__markdown__heading--4,
+.data-club-ai-hub__markdown__heading--5,
+.data-club-ai-hub__markdown__heading--6 {
+  font-size: 1em;
+}
+
+/* Lists */
+.data-club-ai-hub__markdown__ul,
+.data-club-ai-hub__markdown__ol {
+  margin: 0.4em 0;
+  padding-left: 1.6em;
+}
+.data-club-ai-hub__markdown__li {
+  margin: 0.2em 0;
+}
+.data-club-ai-hub__markdown__li > .data-club-ai-hub__markdown__p {
+  margin: 0;
+}
+
+/* Links */
+.data-club-ai-hub__markdown__a {
+  color: var(--dc-aih-markdown-link-fg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.data-club-ai-hub__markdown__a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Blockquotes */
+.data-club-ai-hub__markdown__blockquote {
+  margin: 0.6em 0;
+  padding: 0.2em 0 0.2em 0.9em;
+  border-left: 3px solid var(--dc-aih-markdown-quote-border);
+  color: var(--dc-aih-fg-muted);
+  font-style: italic;
+}
+
+/* Horizontal rule */
+.data-club-ai-hub__markdown__hr {
+  margin: 1em 0;
+  border: none;
+  border-top: 1px solid var(--dc-aih-border);
+}
+
+/* Inline code */
+.data-club-ai-hub__markdown__code--inline {
+  padding: 0.1em 0.4em;
+  font-family: var(--dc-aih-font-mono);
+  font-size: 0.92em;
+  background-color: var(--dc-aih-markdown-code-bg);
+  color: var(--dc-aih-markdown-code-fg);
+  border-radius: var(--dc-aih-radius-sm);
+}
+
+/* Fenced code block */
+.data-club-ai-hub__markdown__pre {
+  margin: 0.6em 0;
+  padding: 0.8em 1em;
+  font-family: var(--dc-aih-font-mono);
+  font-size: 0.88em;
+  line-height: 1.45;
+  background-color: var(--dc-aih-markdown-code-bg);
+  color: var(--dc-aih-markdown-code-fg);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  overflow-x: auto;
+  /* Codeblocks honour the source's own line breaks. */
+  white-space: pre;
+}
+.data-club-ai-hub__markdown__pre > code {
+  /* The inner <code class="language-…"> from react-markdown — let the    */
+  /* <pre> own the background; the code element is just a semantic       */
+  /* wrapper.                                                            */
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+/* Tables — wrapped in a horizontal-scroll div so wide tables don't push  */
+/* the bubble past its max-width.                                         */
+.data-club-ai-hub__markdown__table-wrapper {
+  margin: 0.7em 0;
+  overflow-x: auto;
+  border: 1px solid var(--dc-aih-markdown-table-border);
+  border-radius: var(--dc-aih-radius-md);
+}
+.data-club-ai-hub__markdown__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.92em;
+}
+.data-club-ai-hub__markdown__thead {
+  background-color: var(--dc-aih-markdown-table-header-bg);
+}
+.data-club-ai-hub__markdown__th,
+.data-club-ai-hub__markdown__td {
+  padding: 0.45em 0.75em;
+  text-align: left;
+  border-bottom: 1px solid var(--dc-aih-markdown-table-border);
+  vertical-align: top;
+}
+.data-club-ai-hub__markdown__th {
+  font-weight: 600;
+  color: var(--dc-aih-fg);
+}
+.data-club-ai-hub__markdown__tbody .data-club-ai-hub__markdown__tr:last-child .data-club-ai-hub__markdown__td {
+  border-bottom: none;
+}
+
+/* KaTeX block-math centering. KaTeX ships its own CSS for the actual    */
+/* equation typography — consumers import `katex/dist/katex.min.css`     */
+/* alongside this stylesheet (the dev harness + library README both      */
+/* call this out). Here we only style the wrapping `.katex-display` so   */
+/* block-math equations sit nicely inside a bubble.                      */
+.data-club-ai-hub__markdown .katex-display {
+  margin: 0.7em 0;
+  padding: 0.2em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* User bubbles invert the surface, so inline code / quote chrome would  */
+/* otherwise vanish against the accent background. Override the markdown */
+/* variables under the --user modifier. (User messages don't currently   */
+/* route through MarkdownRenderer, but this future-proofs the contract   */
+/* and also covers Tier-3 wrappers that opt user content in.)            */
+.data-club-ai-hub__message-bubble--user .data-club-ai-hub__markdown {
+  --dc-aih-markdown-code-bg: color-mix(in srgb, var(--dc-aih-accent-fg) 18%, transparent);
+  --dc-aih-markdown-code-fg: var(--dc-aih-accent-fg);
+  --dc-aih-markdown-quote-border: color-mix(in srgb, var(--dc-aih-accent-fg) 40%, transparent);
+  --dc-aih-markdown-link-fg: var(--dc-aih-accent-fg);
+}
+
+/* ───────────────────────────────────────────────────────────────────────── */
+/*  Rotating messages (admin) + base-conversation picker                     */
+/* ───────────────────────────────────────────────────────────────────────── */
+
+.data-club-ai-hub-admin__rotating-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-lg);
+}
+
+.data-club-ai-hub-admin__rotating-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--dc-aih-bg-elevated);
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+  overflow: hidden;
+}
+
+.data-club-ai-hub-admin__rotating-table thead {
+  background-color: color-mix(in srgb, var(--dc-aih-fg) 6%, var(--dc-aih-bg-elevated));
+}
+
+.data-club-ai-hub-admin__rotating-table th,
+.data-club-ai-hub-admin__rotating-table td {
+  padding: var(--dc-aih-space-sm) var(--dc-aih-space-md);
+  text-align: left;
+  border-bottom: 1px solid var(--dc-aih-border);
+  vertical-align: top;
+}
+
+.data-club-ai-hub-admin__rotating-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.data-club-ai-hub-admin__rotating-row--archived td {
+  opacity: 0.55;
+}
+
+/* Schedule radio rows + inline value/unit rows in the editor modal. */
+.data-club-ai-hub-admin__radio-row {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-xs);
+  margin-top: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__inline-row {
+  display: flex;
+  align-items: center;
+  gap: var(--dc-aih-space-sm);
+  margin: var(--dc-aih-space-xs) 0 var(--dc-aih-space-xs) var(--dc-aih-space-lg);
+  flex-wrap: wrap;
+}
+
+.data-club-ai-hub-admin__form-input--narrow {
+  width: auto;
+  min-width: 5rem;
+  flex: 0 0 auto;
+}
+
+/* Searchable rotating-message picker inside the agent editor. */
+.data-club-ai-hub-admin__fork-rotating {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dc-aih-space-xs);
+  margin-top: var(--dc-aih-space-xs);
+}
+
+.data-club-ai-hub-admin__fork-rotating-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 12rem;
+  overflow-y: auto;
+  border: 1px solid var(--dc-aih-border);
+  border-radius: var(--dc-aih-radius-md);
+}
+
+.data-club-ai-hub-admin__fork-rotating-item {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--dc-aih-space-sm);
+  width: 100%;
+  padding: var(--dc-aih-space-xs) var(--dc-aih-space-sm);
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--dc-aih-border);
+  text-align: left;
+  cursor: pointer;
+  color: var(--dc-aih-fg);
+}
+
+.data-club-ai-hub-admin__fork-rotating-item:last-child {
+  border-bottom: none;
+}
+
+.data-club-ai-hub-admin__fork-rotating-item:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 8%, transparent);
+}
+
+.data-club-ai-hub-admin__fork-rotating-item--selected {
+  background-color: color-mix(in srgb, var(--dc-aih-accent) 16%, transparent);
+}