@brokr/sdk 1.0.0 → 2.1.0

package/dist/react-styles.mjs

@@ -0,0 +1,2720 @@
+// src/react/styles-entry.tsx
+import React from "react";
+
+// src/react/css/tokens.ts
+var TOKENS_CSS = `
+.brokr-root {
+  --brokr-space-1: 0.25rem;
+  --brokr-space-2: 0.5rem;
+  --brokr-space-3: 0.75rem;
+  --brokr-space-4: 1rem;
+  --brokr-space-5: 1.25rem;
+  --brokr-space-6: 1.5rem;
+  --brokr-space-8: 2rem;
+  --brokr-space-10: 2.5rem;
+  --brokr-space-12: 3rem;
+  --brokr-shadow-sm: 0 1px 2px color-mix(in srgb, var(--brokr-text-primary) 1.5%, transparent);
+  --brokr-shadow-md: 0 4px 12px color-mix(in srgb, var(--brokr-text-primary) 2.5%, transparent);
+  --brokr-shadow-lg: 0 8px 20px color-mix(in srgb, var(--brokr-text-primary) 3%, transparent);
+  --brokr-muted-border: color-mix(in srgb, var(--brokr-border) 65%, transparent);
+  --brokr-soft-surface: color-mix(in srgb, var(--brokr-surface) 92%, var(--brokr-bg));
+  --brokr-subtle-fill: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
+  --brokr-subtle-fill-strong: color-mix(in srgb, var(--brokr-text-primary) 10%, transparent);
+  --brokr-font-size-xs: 0.75rem;
+  --brokr-font-size-sm: 0.875rem;
+  --brokr-font-size-md: 1rem;
+  --brokr-font-size-lg: 1.125rem;
+  --brokr-font-size-xl: 1.5rem;
+  --brokr-font-size-2xl: clamp(2rem, 4vw, 3.5rem);
+
+  /* Z-index stacking order */
+  --brokr-z-chat-float: 4;
+  --brokr-z-drawer-backdrop: 49;
+  --brokr-z-drawer: 50;
+  --brokr-z-popover: 60;
+  --brokr-z-fab: 70;
+  --brokr-z-panel: 80;
+  --brokr-z-modal-backdrop: 90;
+  --brokr-z-dropdown: 95;
+  --brokr-z-notification: 9999;
+  --brokr-z-toast: 99999;
+
+  /* Transition durations */
+  --brokr-duration-fast: 100ms;
+  --brokr-duration-base: 150ms;
+  --brokr-duration-slow: 300ms;
+  --brokr-ease: ease;
+
+  /* Font weights */
+  --brokr-font-weight-normal: 400;
+  --brokr-font-weight-medium: 500;
+  --brokr-font-weight-semibold: 600;
+  --brokr-font-weight-bold: 700;
+
+  /* Line heights */
+  --brokr-leading-tight: 1.25;
+  --brokr-leading-snug: 1.4;
+  --brokr-leading-normal: 1.6;
+  --brokr-leading-relaxed: 1.7;
+
+  /* Font families */
+  --brokr-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+
+  /* Additional radii */
+  --brokr-radius-pill: 999px;
+  --brokr-radius-sm: 4px;
+
+  color: var(--brokr-text-primary);
+}
+`;
+
+// src/react/css/reset.ts
+var RESET_CSS = `
+.brokr-root,
+.brokr-root > * {
+  box-sizing: border-box;
+  scrollbar-color: color-mix(in srgb, var(--brokr-text-primary) 18%, transparent) transparent;
+  scrollbar-width: thin;
+}
+
+.brokr-root *::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+.brokr-root *::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--brokr-text-primary) 16%, transparent);
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+
+.brokr-root *::-webkit-scrollbar-track {
+  background: transparent;
+}
+`;
+
+// src/react/css/primitives.ts
+var PRIMITIVES_CSS = `
+.brokr-card {
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-card);
+  box-shadow: var(--brokr-shadow-sm);
+}
+
+.brokr-panel {
+  background: color-mix(in srgb, var(--brokr-surface) 96%, var(--brokr-bg));
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 2px);
+  box-shadow: var(--brokr-shadow-md);
+}
+
+.brokr-button,
+.brokr-button-secondary,
+.brokr-button-ghost {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: var(--brokr-radius-button);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--brokr-space-2);
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  font-weight: 600;
+  min-height: 44px;
+  padding: 0 var(--brokr-space-4);
+  text-decoration: none;
+  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, opacity 150ms ease;
+}
+
+.brokr-button:hover,
+.brokr-button-secondary:hover,
+.brokr-button-ghost:hover {
+  transform: translateY(-1px);
+}
+
+.brokr-button:disabled,
+.brokr-button-secondary:disabled,
+.brokr-button-ghost:disabled {
+  cursor: wait;
+  opacity: 0.65;
+  transform: none;
+}
+
+.brokr-button {
+  background: var(--brokr-primary);
+  color: var(--brokr-primary-contrast);
+}
+
+.brokr-button-secondary {
+  background: var(--brokr-subtle-fill);
+  border-color: var(--brokr-muted-border);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-button-ghost {
+  background: transparent;
+  border-color: var(--brokr-muted-border);
+  color: var(--brokr-text-secondary);
+}
+
+.brokr-input,
+.brokr-textarea,
+.brokr-select {
+  appearance: none;
+  width: 100%;
+  border: 1px solid var(--brokr-muted-border);
+  background: color-mix(in srgb, var(--brokr-surfaceMuted, var(--brokr-surface)) 75%, var(--brokr-bg));
+  color: var(--brokr-text-primary);
+  border-radius: var(--brokr-radius-input);
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  min-height: 44px;
+  padding: 0.825rem 0.95rem;
+  transition: border-color 150ms ease, background-color 150ms ease;
+}
+
+.brokr-input::placeholder,
+.brokr-textarea::placeholder {
+  color: var(--brokr-text-secondary);
+}
+
+.brokr-input:focus,
+.brokr-textarea:focus,
+.brokr-select:focus,
+.brokr-button:focus-visible,
+.brokr-button-secondary:focus-visible,
+.brokr-button-ghost:focus-visible,
+.brokr-action:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--brokr-primary) 60%, transparent);
+  outline-offset: 2px;
+}
+
+.brokr-textarea {
+  min-height: 120px;
+  padding-top: 0.95rem;
+  resize: vertical;
+}
+
+.brokr-label {
+  color: var(--brokr-text-secondary);
+  display: block;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  margin-bottom: var(--brokr-space-2);
+  text-transform: uppercase;
+}
+
+.brokr-title {
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-xl);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  margin: 0;
+}
+
+.brokr-heading {
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-2xl);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  margin: 0;
+}
+
+.brokr-copy,
+.brokr-muted {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-sm);
+  line-height: 1.6;
+}
+
+.brokr-section {
+  display: grid;
+  gap: var(--brokr-space-6);
+}
+
+.brokr-divider {
+  border: 0;
+  border-top: 1px solid var(--brokr-muted-border);
+  margin: 0;
+}
+
+.brokr-badge {
+  align-items: center;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: 999px;
+  color: var(--brokr-text-secondary);
+  display: inline-flex;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: 700;
+  gap: var(--brokr-space-1);
+  letter-spacing: 0.06em;
+  min-height: 28px;
+  padding: 0 0.7rem;
+  text-transform: uppercase;
+}
+
+.brokr-badge-sandbox {
+  background: color-mix(in srgb, var(--brokr-primary) 10%, transparent);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-inline-message {
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) - 2px);
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-sm);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+}
+
+.brokr-inline-message[data-tone="error"] {
+  border-color: color-mix(in srgb, var(--brokr-error, var(--brokr-primary)) 30%, var(--brokr-border));
+  color: var(--brokr-text-primary);
+}
+
+.brokr-grid-auto {
+  display: grid;
+  gap: var(--brokr-space-4);
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+`;
+
+// src/react/css/auth.ts
+var AUTH_CSS = `
+.brokr-auth-shell {
+  align-items: stretch;
+  background: var(--brokr-bg);
+  color: var(--brokr-text-primary);
+  display: grid;
+  min-height: 100vh;
+}
+
+.brokr-auth-shell[data-variant="1"] {
+  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
+}
+
+.brokr-auth-hero {
+  display: grid;
+  min-height: 40vh;
+  overflow: hidden;
+  padding: var(--brokr-space-8);
+  position: relative;
+}
+
+.brokr-auth-hero::after {
+  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--brokr-bg) 75%, transparent) 100%);
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.brokr-auth-hero-media {
+  background-color: var(--brokr-soft-surface);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 10px);
+  inset: var(--brokr-space-6);
+  position: absolute;
+}
+
+.brokr-auth-hero-content {
+  align-content: end;
+  display: grid;
+  gap: var(--brokr-space-4);
+  margin-top: auto;
+  max-width: 34rem;
+  padding: var(--brokr-space-6);
+  position: relative;
+  z-index: 1;
+}
+
+.brokr-brand-row {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--brokr-space-3);
+}
+
+.brokr-brand-logo {
+  border-radius: calc(var(--brokr-radius-card) + 6px);
+  display: block;
+  height: 40px;
+  object-fit: contain;
+  width: 40px;
+}
+
+.brokr-brand-name {
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.brokr-auth-form-pane {
+  align-items: center;
+  display: grid;
+  min-height: 100vh;
+  padding: var(--brokr-space-8);
+}
+
+.brokr-auth-card {
+  display: grid;
+  gap: var(--brokr-space-6);
+  margin: 0 auto;
+  max-width: 28rem;
+  padding: var(--brokr-space-8);
+  width: 100%;
+}
+
+.brokr-auth-form {
+  display: grid;
+  gap: var(--brokr-space-4);
+}
+
+.brokr-auth-footer {
+  color: var(--brokr-text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--brokr-space-2);
+  justify-content: center;
+}
+
+.brokr-auth-link,
+.brokr-action {
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.brokr-auth-link:hover,
+.brokr-action:hover {
+  opacity: 0.8;
+}
+`;
+
+// src/react/css/account.ts
+var ACCOUNT_CSS = `
+.brokr-account-trigger {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-surface) 92%, var(--brokr-bg));
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 1px);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--brokr-space-3);
+  min-height: 44px;
+  padding: 0.4rem 0.55rem 0.4rem 0.45rem;
+}
+
+.brokr-account-trigger[data-display="avatar"] {
+  border-radius: 999px;
+  gap: 0;
+  justify-content: center;
+  min-width: 44px;
+  padding: 0.35rem;
+}
+
+.brokr-avatar,
+.brokr-avatar-lg {
+  align-items: center;
+  background: var(--brokr-subtle-fill-strong);
+  border-radius: 999px;
+  color: var(--brokr-text-primary);
+  display: inline-flex;
+  font-weight: 700;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.brokr-avatar { height: 32px; width: 32px; }
+.brokr-avatar-lg { height: 72px; width: 72px; }
+
+.brokr-avatar img,
+.brokr-avatar-lg img {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.brokr-popover {
+  display: grid;
+  gap: var(--brokr-space-3);
+  max-height: min(78vh, 760px);
+  min-width: 280px;
+  overflow: auto;
+  padding: var(--brokr-space-3);
+  position: absolute;
+  right: 0;
+  top: calc(100% + 2px);
+  width: min(92vw, 320px);
+  z-index: var(--brokr-z-popover);
+}
+
+.brokr-popover[data-align="start"] {
+  left: 0;
+  right: auto;
+}
+
+.brokr-popover-actions {
+  display: grid;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-session-list,
+.brokr-stack-list {
+  display: grid;
+  gap: var(--brokr-space-3);
+}
+
+.brokr-session-item {
+  align-items: center;
+  display: grid;
+  gap: var(--brokr-space-3);
+  grid-template-columns: 1fr auto;
+}
+
+.brokr-profile-photo {
+  align-items: center;
+  cursor: pointer;
+  display: inline-grid;
+  justify-items: center;
+  position: relative;
+  width: 100%;
+}
+
+.brokr-profile-photo-shell {
+  display: grid;
+  gap: var(--brokr-space-3);
+  justify-items: center;
+}
+
+.brokr-profile-photo-frame {
+  align-items: center;
+  display: grid;
+  justify-items: center;
+  min-height: 72px;
+  width: 100%;
+}
+
+.brokr-profile-photo-overlay {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-bg) 72%, transparent);
+  backdrop-filter: blur(10px);
+  border-radius: inherit;
+  color: var(--brokr-text-primary);
+  display: grid;
+  justify-items: center;
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 150ms ease;
+}
+
+.brokr-profile-photo:hover .brokr-profile-photo-overlay,
+.brokr-profile-photo:focus-within .brokr-profile-photo-overlay {
+  opacity: 1;
+}
+
+/* ============================================================
+   Account Panel \u2014 Settings surface
+   ============================================================ */
+
+.brokr-account-panel {
+  background: color-mix(in srgb, var(--brokr-surface) 97%, var(--brokr-bg));
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 4px);
+  display: grid;
+  gap: 0;
+  margin: 0 auto;
+  max-width: 1040px;
+  min-height: 620px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.brokr-account-sidebar {
+  background: color-mix(in srgb, var(--brokr-surfaceMuted, var(--brokr-surface)) 82%, var(--brokr-bg));
+  border-right: 1px solid var(--brokr-muted-border);
+  display: grid;
+  align-content: start;
+  gap: 1.6rem;
+  padding: 1.45rem 1.1rem;
+}
+
+.brokr-account-sidebar-group {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.brokr-account-sidebar-kicker {
+  color: var(--brokr-text-secondary);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1;
+  opacity: 0.8;
+  padding: 0 0.55rem;
+  text-transform: uppercase;
+}
+
+.brokr-account-tab-list {
+  display: grid;
+  gap: 0.2rem;
+  align-content: start;
+}
+
+.brokr-account-tab {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: calc(var(--brokr-radius-card) - 1px);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  font-weight: 600;
+  gap: 0.7rem;
+  justify-content: flex-start;
+  line-height: 1;
+  min-height: 38px;
+  padding: 0 0.7rem;
+  text-align: left;
+  width: 100%;
+}
+
+.brokr-account-tab-icon {
+  align-items: center;
+  color: currentColor;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 16px;
+  justify-content: center;
+  line-height: 0;
+  width: 16px;
+}
+
+.brokr-account-tab > span:last-child {
+  align-items: center;
+  display: inline-flex;
+  min-height: 1rem;
+}
+
+.brokr-account-tab:hover,
+.brokr-account-tab[data-active="true"] {
+  background: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
+  border-color: var(--brokr-muted-border);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-account-surface {
+  display: grid;
+  align-content: start;
+  gap: 1.4rem;
+  padding: 1.5rem;
+}
+
+.brokr-account-surface-header {
+  display: block;
+  padding: 0.1rem 0;
+}
+
+.brokr-account-form,
+.brokr-account-stack {
+  display: grid;
+  gap: 1rem;
+}
+
+.brokr-account-card {
+  background: color-mix(in srgb, var(--brokr-surface) 96%, var(--brokr-bg));
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 1px);
+  display: grid;
+  gap: 1rem;
+  padding: 1.15rem;
+}
+
+.brokr-account-photo-row {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  min-height: 92px;
+}
+
+.brokr-account-photo-row .brokr-profile-photo-shell {
+  gap: 0;
+}
+
+.brokr-account-photo-copy {
+  display: grid;
+  gap: 0.35rem;
+  align-content: center;
+}
+
+.brokr-account-photo-hint {
+  align-items: center;
+  color: var(--brokr-text-secondary);
+  display: inline-flex;
+  gap: 0.45rem;
+  font-size: var(--brokr-font-size-sm);
+}
+
+.brokr-account-field-list {
+  display: grid;
+  gap: 0;
+  padding: 0;
+}
+
+.brokr-account-field-row {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: 1fr;
+  padding: 1.15rem;
+}
+
+.brokr-account-field-row + .brokr-account-field-row {
+  border-top: 1px solid var(--brokr-muted-border);
+}
+
+.brokr-account-field-head {
+  display: grid;
+  gap: 0.25rem;
+  max-width: none;
+}
+
+.brokr-account-field-body {
+  display: grid;
+  gap: var(--brokr-space-2);
+  justify-items: stretch;
+  min-width: 0;
+  width: 100%;
+}
+
+.brokr-account-field-body .brokr-input {
+  min-height: 44px;
+  width: 100%;
+}
+
+.brokr-account-field-body-static,
+.brokr-account-field-body-actions {
+  align-content: center;
+}
+
+.brokr-account-field-body-stack {
+  justify-items: stretch;
+}
+
+.brokr-account-static-value {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--brokr-space-3);
+  justify-content: space-between;
+  line-height: 1.25;
+  width: 100%;
+}
+
+.brokr-account-status-pill {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: 999px;
+  color: var(--brokr-text-secondary);
+  display: inline-flex;
+  font-size: 0.75rem;
+  font-weight: 600;
+  gap: 0.35rem;
+  min-height: 28px;
+  padding: 0 0.7rem;
+}
+
+.brokr-account-status-pill[data-verified="true"] {
+  color: var(--brokr-text-primary);
+}
+
+.brokr-account-actions-row {
+  align-items: center;
+  display: flex;
+  gap: var(--brokr-space-3);
+  justify-content: flex-end;
+  padding-top: 0.1rem;
+}
+
+.brokr-account-summary-row {
+  align-items: center;
+  display: flex;
+  gap: var(--brokr-space-4);
+  justify-content: space-between;
+}
+
+.brokr-account-summary-copy {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.brokr-account-summary-copy strong {
+  color: var(--brokr-text-primary);
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.brokr-account-summary-kicker {
+  color: var(--brokr-text-secondary);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.brokr-account-summary-icon {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: 10px;
+  color: var(--brokr-text-secondary);
+  display: inline-flex;
+  height: 40px;
+  justify-content: center;
+  width: 40px;
+}
+
+.brokr-account-session-group {
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) - 1px);
+  display: grid;
+  overflow: hidden;
+}
+
+.brokr-account-session-row {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-surface) 98%, var(--brokr-bg));
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr auto;
+  padding: 0.85rem 1rem;
+}
+
+.brokr-account-session-row + .brokr-account-session-row {
+  border-top: 1px solid var(--brokr-muted-border);
+}
+
+.brokr-account-session-info {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.brokr-account-session-info strong {
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-sm);
+  font-weight: 600;
+}
+
+.brokr-account-session-detail,
+.brokr-account-session-empty {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-sm);
+  line-height: 1.5;
+}
+
+.brokr-account-danger-zone {
+  border-color: color-mix(in srgb, var(--brokr-error, var(--brokr-primary)) 20%, var(--brokr-border));
+}
+
+.brokr-account-link-button {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: calc(var(--brokr-radius-button) - 2px);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  min-height: 34px;
+  padding: 0 0.7rem;
+  text-decoration: none;
+  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
+}
+
+.brokr-account-link-button:hover {
+  background: color-mix(in srgb, var(--brokr-text-primary) 5%, transparent);
+  border-color: var(--brokr-muted-border);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-account-link-button[data-tone="danger"] {
+  color: color-mix(in srgb, var(--brokr-error, var(--brokr-primary)) 70%, var(--brokr-text-secondary));
+}
+
+.brokr-account-link-button[data-tone="danger"]:hover {
+  color: var(--brokr-error, var(--brokr-primary));
+}
+
+.brokr-account-panel[data-density="compact"] {
+  border-radius: calc(var(--brokr-radius-card) + 2px);
+  max-width: 100%;
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-sidebar {
+  border-bottom: 1px solid var(--brokr-muted-border);
+  border-right: none;
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3);
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-tab-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-surface {
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3);
+}
+
+.brokr-account-menu {
+  display: grid;
+  gap: var(--brokr-space-3);
+}
+
+.brokr-account-menu-header {
+  align-items: center;
+  display: grid;
+  gap: var(--brokr-space-3);
+  grid-template-columns: auto minmax(0, 1fr);
+  padding-bottom: var(--brokr-space-2);
+}
+
+.brokr-account-menu-copy {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.brokr-account-menu-copy strong {
+  color: var(--brokr-text-primary);
+  font-size: 0.95rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brokr-account-menu-copy span {
+  color: var(--brokr-text-secondary);
+  font-size: 0.82rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brokr-account-menu-actions {
+  display: grid;
+  gap: var(--brokr-space-2);
+  padding-top: var(--brokr-space-2);
+  border-top: 1px solid var(--brokr-muted-border);
+}
+
+.brokr-account-menu-action {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: calc(var(--brokr-radius-card) - 1px);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  font-weight: 600;
+  gap: 0.65rem;
+  justify-content: flex-start;
+  min-height: 38px;
+  padding: 0 0.75rem;
+}
+
+.brokr-account-menu-action > span:last-child {
+  align-items: center;
+  display: inline-flex;
+  min-height: 1rem;
+}
+
+.brokr-account-menu-action:hover {
+  background: color-mix(in srgb, var(--brokr-text-primary) 5%, transparent);
+  border-color: var(--brokr-muted-border);
+}
+
+.brokr-account-menu-action-icon {
+  align-items: center;
+  color: var(--brokr-text-secondary);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.brokr-modal-backdrop {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-bg) 60%, transparent);
+  backdrop-filter: blur(10px);
+  display: grid;
+  inset: 0;
+  padding: var(--brokr-space-6);
+  position: fixed;
+  z-index: var(--brokr-z-modal-backdrop);
+}
+
+.brokr-modal-dialog {
+  max-height: min(90vh, 860px);
+  overflow: auto;
+  width: min(96vw, 1100px);
+}
+
+.brokr-account-settings-dialog {
+  display: grid;
+  gap: var(--brokr-space-4);
+  padding: var(--brokr-space-4);
+}
+
+.brokr-modal-toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-card {
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3);
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-field-row,
+.brokr-account-panel[data-density="compact"] .brokr-account-photo-row {
+  gap: var(--brokr-space-3);
+  grid-template-columns: 1fr;
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-field-body,
+.brokr-account-panel[data-density="compact"] .brokr-account-actions-row {
+  justify-items: stretch;
+  justify-content: stretch;
+  width: 100%;
+}
+
+.brokr-account-panel[data-density="compact"] .brokr-account-static-value,
+.brokr-account-panel[data-density="compact"] .brokr-account-summary-row {
+  align-items: flex-start;
+  flex-direction: column;
+}
+`;
+
+// src/react/css/chat.ts
+var CHAT_CSS = `
+.brokr-ai-chat-shell {
+  display: grid;
+  gap: 0;
+  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
+  overflow: hidden;
+  width: 100%;
+}
+
+.brokr-ai-chat-shell[data-sidebar="false"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.brokr-ai-chat-sidebar {
+  border-right: 1px solid var(--brokr-muted-border);
+  display: grid;
+  gap: var(--brokr-space-4);
+  padding: var(--brokr-space-4);
+  align-content: start;
+  overflow-y: auto;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+}
+
+.brokr-ai-chat-sidebar-empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--brokr-space-6) var(--brokr-space-4);
+}
+
+.brokr-ai-chat-sidebar-empty-text {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-xs);
+  line-height: 1.5;
+  text-align: center;
+  opacity: 0.6;
+}
+
+.brokr-ai-chat-sidebar-button {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: 500;
+  gap: var(--brokr-space-2);
+  justify-content: flex-start;
+  padding: 0.5rem 0.65rem;
+  padding-bottom: 0.65rem;
+  margin-bottom: var(--brokr-space-2);
+  border-bottom: 1px solid var(--brokr-muted-border);
+  border-radius: 0;
+  transition: color 120ms ease;
+  width: 100%;
+}
+
+.brokr-ai-chat-sidebar-button:hover {
+  color: var(--brokr-text-primary);
+}
+
+.brokr-ai-chat-conversations {
+  display: grid;
+  gap: 2px;
+}
+
+.brokr-ai-chat-conversation {
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: 400;
+  overflow: hidden;
+  padding: 0.5rem 0.65rem;
+  text-align: left;
+  text-overflow: ellipsis;
+  transition: color 120ms ease, background 120ms ease;
+  white-space: nowrap;
+}
+
+.brokr-ai-chat-conversation:hover {
+  color: var(--brokr-text-primary);
+  background: var(--brokr-subtle-fill);
+}
+
+.brokr-ai-chat-conversation[data-active="true"] {
+  color: var(--brokr-text-primary);
+  background: var(--brokr-subtle-fill);
+  font-weight: 500;
+}
+
+.brokr-ai-chat-stage {
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.brokr-ai-chat-topbar {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--brokr-space-4);
+  justify-content: space-between;
+  left: 0;
+  padding: var(--brokr-space-3);
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: var(--brokr-z-chat-float);
+}
+
+.brokr-ai-chat-topbar > * {
+  pointer-events: auto;
+}
+
+.brokr-ai-chat-header-title {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--brokr-space-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.brokr-ai-chat-title-loading {
+  align-items: center;
+  color: var(--brokr-text-secondary);
+  display: inline-flex;
+  gap: 0.3rem;
+}
+
+.brokr-ai-chat-title-loading span {
+  animation: brokrTypingBounce 1.2s ease-in-out infinite;
+  background: color-mix(in srgb, var(--brokr-text-primary) 50%, transparent);
+  border-radius: 999px;
+  display: inline-block;
+  height: 0.28rem;
+  width: 0.28rem;
+}
+
+.brokr-ai-chat-title-loading span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.brokr-ai-chat-title-loading span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.brokr-ai-chat-topbar-actions {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-ai-chat-model-select {
+  min-width: 11rem;
+}
+
+.brokr-ai-chat-thread {
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  padding: calc(var(--brokr-space-12) + var(--brokr-space-4)) 0 calc(var(--brokr-space-12) + 4.75rem);
+}
+
+.brokr-ai-chat-thread[data-empty="true"] {
+  align-content: center;
+  display: grid;
+}
+
+.brokr-ai-chat-thread-inner {
+  margin: 0 auto;
+  max-width: 860px;
+}
+
+.brokr-ai-chat-message {
+  animation: brokrFadeIn 200ms ease;
+  margin-bottom: var(--brokr-space-10);
+}
+
+.brokr-ai-chat-model-avatar {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: 28px;
+  object-fit: cover;
+  width: 28px;
+}
+
+.brokr-model-logo {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: 18px;
+  object-fit: cover;
+  width: 18px;
+}
+
+.brokr-ai-chat-message-row {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--brokr-space-3);
+  width: 100%;
+}
+
+.brokr-ai-chat-message-row[data-role="user"] {
+  justify-content: flex-end;
+}
+
+.brokr-ai-chat-message-row[data-role="assistant"] {
+  justify-content: flex-start;
+}
+
+.brokr-ai-chat-message-content {
+  color: var(--brokr-text-secondary);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  width: min(100%, 720px);
+  overflow-wrap: break-word;
+}
+
+.brokr-ai-chat-message-content-user {
+  color: var(--brokr-text-primary);
+}
+
+.brokr-ai-chat-message-error {
+  color: var(--brokr-error, #ef4444);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  opacity: 0.85;
+}
+
+.brokr-ai-chat-message-bubble {
+  background: color-mix(in srgb, var(--brokr-text-primary) 10%, var(--brokr-surface));
+  border: 1px solid color-mix(in srgb, var(--brokr-text-primary) 10%, var(--brokr-border));
+  border-radius: calc(var(--brokr-radius-card) + 2px);
+  box-shadow: var(--brokr-shadow-sm);
+  max-width: min(78%, 720px);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+}
+
+.brokr-ai-chat-empty {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--brokr-space-3);
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 720px;
+  padding: var(--brokr-space-8);
+  text-align: center;
+}
+
+.brokr-ai-chat-empty .brokr-copy {
+  max-width: 42rem;
+}
+
+.brokr-ai-chat-starters {
+  display: grid;
+  gap: var(--brokr-space-2);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: var(--brokr-space-2);
+  width: min(100%, 720px);
+}
+
+.brokr-ai-chat-starter {
+  align-items: flex-start;
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 1px);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  justify-content: flex-start;
+  min-height: 58px;
+  padding: 0.85rem 1rem;
+  text-align: left;
+}
+
+.brokr-ai-chat-starter:hover {
+  background: var(--brokr-subtle-fill);
+}
+
+.brokr-ai-chat-input-area {
+  bottom: 0;
+  left: 0;
+  padding: var(--brokr-space-4) 0 var(--brokr-space-5);
+  position: absolute;
+  right: 0;
+  z-index: var(--brokr-z-chat-float);
+}
+
+.brokr-ai-chat-textarea {
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-border);
+  border-radius: var(--brokr-radius-input);
+  color: var(--brokr-text-primary);
+  flex: 1;
+  font: inherit;
+  line-height: 1.5;
+  max-height: 168px;
+  min-height: 44px;
+  outline: none;
+  overflow: hidden;
+  padding: var(--brokr-space-3);
+  resize: none;
+}
+
+.brokr-ai-chat-textarea:focus {
+  border-color: var(--brokr-primary);
+}
+
+.brokr-ai-chat-send {
+  align-items: center;
+  align-self: stretch;
+  background: var(--brokr-primary);
+  border: none;
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-primary-contrast);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  width: 44px;
+}
+
+.brokr-ai-chat-send:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.brokr-ai-chat-typing {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4rem;
+  min-height: 28px;
+  padding: 0.25rem 0;
+}
+
+.brokr-ai-chat-typing span {
+  animation: brokrTypingBounce 1.2s ease-in-out infinite;
+  background: color-mix(in srgb, var(--brokr-text-primary) 70%, transparent);
+  border-radius: 999px;
+  display: inline-block;
+  height: 0.42rem;
+  width: 0.42rem;
+}
+
+.brokr-ai-chat-typing span:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.brokr-ai-chat-typing span:nth-child(3) {
+  animation-delay: 0.32s;
+}
+`;
+
+// src/react/css/chat-extras.ts
+var CHAT_EXTRAS_CSS = `
+/* ============================================================
+   AI Chat \u2014 Model Selector Dropdown
+   ============================================================ */
+
+.brokr-model-selector {
+  position: relative;
+}
+
+.brokr-model-trigger {
+  align-items: center;
+  background: var(--brokr-subtle-fill);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  font-weight: 600;
+  gap: var(--brokr-space-2);
+  min-height: 36px;
+  padding: 0 0.75rem;
+  transition: background-color 120ms ease;
+  white-space: nowrap;
+}
+
+.brokr-model-trigger:hover {
+  background: var(--brokr-subtle-fill-strong);
+}
+
+.brokr-model-dropdown {
+  animation: brokrModelDrop 120ms ease-out;
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 1px);
+  box-shadow: var(--brokr-shadow-md);
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  overflow: hidden;
+  padding: 0.3rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: var(--brokr-z-dropdown);
+}
+
+.brokr-model-option {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--brokr-radius-card) - 1px);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  gap: var(--brokr-space-2);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  transition: background-color 100ms ease;
+  width: 100%;
+}
+
+.brokr-model-option:hover:not([data-locked="true"]) {
+  background: var(--brokr-subtle-fill);
+}
+
+.brokr-model-option[data-active="true"] {
+  background: color-mix(in srgb, var(--brokr-primary) 8%, transparent);
+}
+
+.brokr-model-option[data-locked="true"] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.brokr-model-option-label {
+  flex: 1;
+}
+
+.brokr-model-dot {
+  border-radius: 999px;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 8px;
+  width: 8px;
+}
+
+.brokr-model-lock {
+  font-size: 0.7rem;
+}
+
+/* ============================================================
+   AI Chat \u2014 Thread row with context menu
+   ============================================================ */
+
+.brokr-ai-chat-thread-row {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  position: relative;
+}
+
+.brokr-ai-chat-thread-row .brokr-ai-chat-conversation {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.brokr-ai-chat-thread-menu-wrap {
+  flex-shrink: 0;
+  position: relative;
+}
+
+.brokr-ai-chat-thread-menu-btn {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  width: 28px;
+}
+
+.brokr-ai-chat-thread-menu-btn:hover {
+  background: var(--brokr-subtle-fill-strong);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-ai-chat-thread-dropdown {
+  animation: brokrModelDrop 120ms ease-out;
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-card);
+  box-shadow: var(--brokr-shadow-md);
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  overflow: hidden;
+  padding: 0.3rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: var(--brokr-z-dropdown);
+}
+
+.brokr-ai-chat-thread-dropdown-item {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--brokr-radius-card) - 2px);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  gap: var(--brokr-space-2);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  transition: background-color 100ms ease;
+  width: 100%;
+}
+
+.brokr-ai-chat-thread-dropdown-item:hover {
+  background: var(--brokr-subtle-fill);
+}
+
+.brokr-ai-chat-thread-dropdown-item[data-tone="danger"] {
+  color: color-mix(in srgb, var(--brokr-error, var(--brokr-primary)) 80%, var(--brokr-text-primary));
+}
+
+/* ============================================================
+   AI Chat \u2014 Message copy button
+   ============================================================ */
+
+.brokr-ai-chat-message-wrap {
+  max-width: min(100%, 720px);
+  position: relative;
+  width: 100%;
+}
+
+.brokr-ai-chat-message-wrap .brokr-ai-chat-message-content {
+  max-width: 100%;
+  width: 100%;
+}
+
+.brokr-ai-chat-copy-btn {
+  align-items: center;
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  height: 26px;
+  justify-content: center;
+  opacity: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: -4px;
+  transition: opacity 120ms ease, background-color 120ms ease;
+  width: 26px;
+}
+
+.brokr-ai-chat-message-wrap:hover .brokr-ai-chat-copy-btn {
+  opacity: 1;
+}
+
+.brokr-ai-chat-copy-btn:hover {
+  background: var(--brokr-subtle-fill-strong);
+  color: var(--brokr-text-primary);
+}
+
+/* ============================================================
+   AI Chat \u2014 Input layout
+   ============================================================ */
+
+.brokr-ai-chat-input-row {
+  align-items: stretch;
+  display: flex;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-ai-chat-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--brokr-space-2);
+  margin: 0 auto;
+  max-width: 860px;
+}
+
+.brokr-ai-chat-composer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--brokr-space-2);
+}
+
+/* ============================================================
+   AI Chat \u2014 Variant: no header (variant=3)
+   ============================================================ */
+
+.brokr-ai-chat-stage[data-noheader="true"] .brokr-ai-chat-thread {
+  padding-top: var(--brokr-space-4);
+}
+
+/* ============================================================
+   AI Chat \u2014 Mobile drawer
+   ============================================================ */
+
+.brokr-ai-chat-drawer-backdrop {
+  background: color-mix(in srgb, var(--brokr-bg) 60%, transparent);
+  backdrop-filter: blur(4px);
+  inset: 0;
+  position: fixed;
+  z-index: var(--brokr-z-drawer-backdrop);
+}
+
+.brokr-ai-chat-drawer {
+  animation: brokrDrawerSlideIn 200ms ease-out;
+  background: var(--brokr-surface);
+  border-right: 1px solid var(--brokr-muted-border);
+  display: grid;
+  gap: var(--brokr-space-4);
+  padding: var(--brokr-space-4);
+  align-content: start;
+  overflow-y: auto;
+  height: 100%;
+  left: 0;
+  max-width: 280px;
+  position: fixed;
+  top: 0;
+  width: 80vw;
+  z-index: var(--brokr-z-drawer);
+}
+
+.brokr-ai-chat-hamburger {
+  align-items: center;
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: none;
+  height: 36px;
+  justify-content: center;
+  width: 36px;
+}
+
+.brokr-ai-chat-hamburger:hover {
+  background: var(--brokr-subtle-fill);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-ai-chat-topbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--brokr-space-2);
+}
+
+/* ============================================================
+   AI Chat \u2014 Rename input
+   ============================================================ */
+
+.brokr-ai-chat-rename-input {
+  appearance: none;
+  background: var(--brokr-subtle-fill);
+  border: 1px solid var(--brokr-primary);
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-primary);
+  font: inherit;
+  font-size: var(--brokr-font-size-xs);
+  outline: none;
+  padding: 0.5rem 0.65rem;
+  width: 100%;
+}
+
+/* ============================================================
+   AI Chat \u2014 Sentinel (infinite scroll trigger)
+   ============================================================ */
+
+.brokr-ai-chat-sentinel {
+  min-height: 1px;
+}
+`;
+
+// src/react/css/composites.ts
+var COMPOSITES_CSS = `
+.brokr-chat-fab {
+  bottom: var(--brokr-space-6);
+  position: fixed;
+  right: var(--brokr-space-6);
+  z-index: var(--brokr-z-fab);
+}
+
+.brokr-chat-panel {
+  display: grid;
+  gap: var(--brokr-space-4);
+  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  max-height: 100dvh;
+  min-height: 100dvh;
+  min-width: min(100vw, 420px);
+  padding: var(--brokr-space-5);
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: min(100vw, 420px);
+  z-index: var(--brokr-z-panel);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.brokr-chat-messages {
+  display: grid;
+  gap: var(--brokr-space-3);
+  overflow: auto;
+  padding-right: var(--brokr-space-1);
+  align-content: start;
+}
+
+.brokr-chat-messages[data-empty="true"] {
+  align-content: center;
+}
+
+.brokr-chat-bubble {
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) - 2px);
+  line-height: 1.55;
+  max-width: min(100%, 34ch);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  white-space: pre-wrap;
+  width: fit-content;
+}
+
+.brokr-chat-empty {
+  align-items: center;
+  color: var(--brokr-text-secondary);
+  display: grid;
+  gap: var(--brokr-space-3);
+  justify-items: start;
+  padding: var(--brokr-space-2);
+}
+
+.brokr-chat-starters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-chat-starter {
+  background: var(--brokr-subtle-fill);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: 999px;
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  font: inherit;
+  min-height: 36px;
+  padding: 0 0.9rem;
+}
+
+.brokr-chat-bubble[data-role="user"] {
+  background: color-mix(in srgb, var(--brokr-primary) 10%, var(--brokr-surface));
+  justify-self: end;
+  max-width: min(100%, 30ch);
+}
+
+.brokr-chat-bubble[data-role="assistant"] {
+  background: color-mix(in srgb, var(--brokr-surface) 92%, var(--brokr-bg));
+  justify-self: start;
+}
+
+.brokr-chat-input {
+  min-height: 72px;
+  resize: none;
+}
+
+.brokr-feedback-shell {
+  display: grid;
+  gap: var(--brokr-space-5);
+  padding: var(--brokr-space-6);
+}
+
+.brokr-feedback-rating {
+  display: grid;
+  gap: var(--brokr-space-3);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.brokr-rating-button {
+  align-items: center;
+  background: var(--brokr-subtle-fill);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--brokr-space-2);
+  justify-content: center;
+  min-height: 44px;
+}
+
+.brokr-rating-button[data-active="true"] {
+  background: color-mix(in srgb, var(--brokr-primary) 10%, var(--brokr-bg));
+  border-color: color-mix(in srgb, var(--brokr-primary) 30%, var(--brokr-border));
+}
+
+.brokr-upload-shell {
+  display: grid;
+  gap: var(--brokr-space-4);
+  padding: var(--brokr-space-5);
+}
+
+.brokr-upload-dropzone {
+  align-items: center;
+  background: color-mix(in srgb, var(--brokr-surface) 60%, var(--brokr-bg));
+  border: 1px dashed color-mix(in srgb, var(--brokr-border) 75%, transparent);
+  border-radius: calc(var(--brokr-radius-card) + 4px);
+  display: grid;
+  gap: var(--brokr-space-3);
+  justify-items: center;
+  min-height: 220px;
+  padding: var(--brokr-space-6);
+  text-align: center;
+  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
+}
+
+.brokr-upload-dropzone[data-drag="true"] {
+  background: color-mix(in srgb, var(--brokr-primary) 8%, var(--brokr-bg));
+  border-color: color-mix(in srgb, var(--brokr-primary) 30%, var(--brokr-border));
+  transform: translateY(-1px);
+}
+
+.brokr-upload-file {
+  align-items: center;
+  display: grid;
+  gap: var(--brokr-space-3);
+  grid-template-columns: 1fr auto;
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+}
+`;
+
+// src/react/css/gates.ts
+var GATES_CSS = `
+.brokr-plan-card {
+  display: grid;
+  gap: var(--brokr-space-5);
+  min-height: 100%;
+  padding: var(--brokr-space-6);
+  position: relative;
+}
+
+.brokr-plan-card[data-highlight="true"] {
+  background: color-mix(in srgb, var(--brokr-surface) 86%, var(--brokr-bg));
+  transform: translateY(-2px);
+}
+
+.brokr-plan-price {
+  align-items: baseline;
+  display: flex;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-plan-value {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  letter-spacing: -0.05em;
+  line-height: 1;
+}
+
+.brokr-feature-list {
+  display: grid;
+  gap: var(--brokr-space-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.brokr-feature-item {
+  align-items: flex-start;
+  color: var(--brokr-text-secondary);
+  display: grid;
+  gap: var(--brokr-space-3);
+  grid-template-columns: 1rem 1fr;
+}
+
+.brokr-feature-bullet {
+  background: var(--brokr-text-primary);
+  border-radius: 999px;
+  height: 6px;
+  margin-top: 0.45rem;
+  opacity: 0.75;
+  width: 6px;
+}
+
+.brokr-gate-card {
+  display: grid;
+  gap: var(--brokr-space-4);
+  padding: var(--brokr-space-5);
+}
+
+.brokr-meter {
+  display: grid;
+  gap: var(--brokr-space-3);
+}
+
+.brokr-meter-bar {
+  background: var(--brokr-subtle-fill);
+  border-radius: 999px;
+  height: 8px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.brokr-meter-fill {
+  background: var(--brokr-primary);
+  border-radius: inherit;
+  height: 100%;
+  transition: width 150ms ease;
+}
+`;
+
+// src/react/css/skeleton.ts
+var SKELETON_CSS = `
+.brokr-skeleton {
+  animation: brokrPulse 1.4s ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--brokr-text-primary) 5%, transparent) 0%,
+    color-mix(in srgb, var(--brokr-text-primary) 10%, transparent) 50%,
+    color-mix(in srgb, var(--brokr-text-primary) 5%, transparent) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: 999px;
+  min-height: 16px;
+}
+`;
+
+// src/react/css/markdown.ts
+var MARKDOWN_CSS = `
+/* ============================================================
+   Markdown rendering \u2014 assistant messages
+   ============================================================ */
+
+.brokr-md p,
+.brokr-md-paragraph {
+  margin: 0 0 0.6em;
+  line-height: 1.7;
+}
+
+.brokr-md p:last-child,
+.brokr-md-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.brokr-md strong {
+  color: var(--brokr-text-primary);
+  font-weight: 600;
+}
+
+.brokr-md em {
+  font-style: italic;
+}
+
+.brokr-md-inline-code {
+  background: var(--brokr-subtle-fill-strong);
+  border-radius: 4px;
+  color: var(--brokr-primary);
+  font-family: var(--brokr-font-mono);
+  font-size: 0.85em;
+  padding: 0.15em 0.4em;
+}
+
+.brokr-md-link {
+  color: var(--brokr-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.brokr-md-link:hover {
+  opacity: 0.8;
+}
+
+.brokr-md-heading {
+  color: var(--brokr-text-primary);
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 1.2em 0 0.5em;
+}
+
+.brokr-md-heading:first-child {
+  margin-top: 0;
+}
+
+.brokr-md-h1 { font-size: 1.25em; }
+.brokr-md-h2 { font-size: 1.15em; }
+.brokr-md-h3 { font-size: 1.05em; }
+.brokr-md-h4,
+.brokr-md-h5,
+.brokr-md-h6 { font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; }
+
+.brokr-md-divider {
+  border: none;
+  border-top: 1px solid var(--brokr-muted-border);
+  margin: 1em 0;
+}
+
+.brokr-md-list {
+  list-style: none;
+  margin: 0.5em 0;
+  padding: 0 0 0 1.2em;
+}
+
+.brokr-md-list li {
+  line-height: 1.7;
+  margin-bottom: 0.25em;
+  position: relative;
+}
+
+.brokr-md-list li::before {
+  content: '\u2022';
+  color: var(--brokr-text-secondary);
+  left: -1em;
+  position: absolute;
+}
+
+/* \u2500\u2500\u2500 Code blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.brokr-md-codeblock {
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-card);
+  margin: 0.8em 0;
+  overflow: hidden;
+}
+
+.brokr-md-codeblock-header {
+  align-items: center;
+  background: var(--brokr-subtle-fill);
+  border-bottom: 1px solid var(--brokr-muted-border);
+  display: flex;
+  font-size: var(--brokr-font-size-xs);
+  justify-content: space-between;
+  padding: 0.4em 0.75em;
+}
+
+.brokr-md-codeblock-lang {
+  color: var(--brokr-text-secondary);
+  font-family: var(--brokr-font-mono);
+  font-weight: 500;
+  text-transform: lowercase;
+}
+
+.brokr-md-codeblock-copy {
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-xs);
+  gap: 0.35em;
+  padding: 0.15em 0.4em;
+  border-radius: var(--brokr-radius-button);
+  transition: color 120ms ease, background 120ms ease;
+}
+
+.brokr-md-codeblock-copy:hover {
+  background: var(--brokr-subtle-fill-strong);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-md-codeblock-pre {
+  color: var(--brokr-text-primary);
+  font-family: var(--brokr-font-mono);
+  font-size: 0.825em;
+  line-height: 1.6;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0.75em 1em;
+}
+
+.brokr-md-codeblock-pre code {
+  background: none;
+  border: none;
+  padding: 0;
+}
+`;
+
+// src/react/css/animations.ts
+var ANIMATIONS_CSS = `
+@keyframes brokrPulse {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes brokrFadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes brokrTypingBounce {
+  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-2px); }
+}
+
+@keyframes brokrModelDrop {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes brokrDrawerSlideIn {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+`;
+
+// src/react/css/responsive.ts
+var RESPONSIVE_CSS = `
+@media (min-width: 768px) {
+  .brokr-account-panel {
+    grid-template-columns: 214px minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 767px) {
+  .brokr-account-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .brokr-account-sidebar {
+    border-bottom: 1px solid var(--brokr-muted-border);
+    border-right: none;
+    gap: var(--brokr-space-3);
+  }
+
+  .brokr-account-tab-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .brokr-account-photo-row,
+  .brokr-account-field-row {
+    grid-template-columns: 1fr;
+  }
+
+  .brokr-account-field-body,
+  .brokr-account-actions-row {
+    justify-items: stretch;
+    justify-content: stretch;
+    width: 100%;
+  }
+
+  .brokr-account-static-value,
+  .brokr-account-summary-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 980px) {
+  .brokr-auth-shell[data-variant="1"] {
+    grid-template-columns: 1fr;
+  }
+
+  .brokr-auth-shell[data-variant="1"] .brokr-auth-hero {
+    display: none;
+  }
+
+  .brokr-auth-form-pane {
+    min-height: 100vh;
+    padding: var(--brokr-space-4) var(--brokr-space-4) var(--brokr-space-8);
+  }
+}
+
+@media (max-width: 640px) {
+  .brokr-auth-card,
+  .brokr-panel,
+  .brokr-card {
+    box-shadow: var(--brokr-shadow-sm);
+  }
+
+  .brokr-auth-card {
+    padding: var(--brokr-space-5);
+  }
+
+  .brokr-chat-fab {
+    bottom: var(--brokr-space-4);
+    right: var(--brokr-space-4);
+  }
+
+  .brokr-ai-chat-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .brokr-ai-chat-sidebar {
+    display: none;
+  }
+
+  .brokr-ai-chat-model-select,
+  .brokr-ai-chat-sidebar-button {
+    width: 100%;
+  }
+
+  .brokr-ai-chat-starters {
+    grid-template-columns: 1fr;
+  }
+
+  .brokr-ai-chat-message-bubble,
+  .brokr-ai-chat-message-content {
+    max-width: 100%;
+    width: min(100%, 100%);
+  }
+
+  .brokr-chat-panel {
+    bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    left: 0;
+    max-height: 100dvh;
+    min-height: 100dvh;
+    min-width: 100vw;
+    right: 0;
+    top: auto;
+    width: 100vw;
+  }
+
+  .brokr-popover {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: min(94vw, 380px);
+  }
+
+  .brokr-feedback-rating {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ============================================================
+   Responsive \u2014 Mobile overrides for drawer
+   ============================================================ */
+
+@media (max-width: 640px) {
+  .brokr-ai-chat-sidebar-desktop {
+    display: none;
+  }
+
+  .brokr-ai-chat-shell[data-sidebar="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .brokr-ai-chat-hamburger {
+    display: inline-flex;
+  }
+}
+`;
+
+// src/react/css/notifications.ts
+var NOTIFICATIONS_CSS = `
+/* -------------------------------------------------------------------------
+ * Toast Layer \u2014 fixed-position container for auto-fired toasts
+ * ------------------------------------------------------------------------- */
+
+.brokr-toast-layer {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: var(--brokr-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--brokr-space-2);
+  padding: var(--brokr-space-4);
+  pointer-events: none;
+  max-width: 400px;
+  width: 100%;
+}
+
+.brokr-toast-layer--bottom-right { bottom: 0; right: 0; align-items: flex-end; }
+.brokr-toast-layer--bottom-left { bottom: 0; left: 0; align-items: flex-start; }
+.brokr-toast-layer--top-right { top: 0; right: 0; align-items: flex-end; }
+.brokr-toast-layer--top-left { top: 0; left: 0; align-items: flex-start; }
+.brokr-toast-layer--top-center { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+.brokr-toast-layer--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+
+/* -------------------------------------------------------------------------
+ * Individual Toast
+ * ------------------------------------------------------------------------- */
+
+.brokr-toast {
+  box-sizing: border-box;
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  border-radius: calc(var(--brokr-radius-card) + 2px);
+  background: var(--brokr-toast-bg);
+  border: 1px solid var(--brokr-toast-border);
+  box-shadow: var(--brokr-shadow-md);
+  width: 100%;
+  max-width: 380px;
+  animation: brokr-toast-enter-bottom var(--brokr-duration-slow) ease-out;
+  transition: opacity var(--brokr-duration-slow) var(--brokr-ease), transform var(--brokr-duration-slow) var(--brokr-ease);
+}
+
+/* Top positions: slide down from top */
+.brokr-toast-layer--top-right .brokr-toast,
+.brokr-toast-layer--top-left .brokr-toast,
+.brokr-toast-layer--top-center .brokr-toast {
+  animation-name: brokr-toast-enter-top;
+}
+
+.brokr-toast-layer--top-right .brokr-toast--exit,
+.brokr-toast-layer--top-left .brokr-toast--exit,
+.brokr-toast-layer--top-center .brokr-toast--exit {
+  transform: translateY(-8px);
+}
+
+.brokr-toast--exit {
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+}
+
+@keyframes brokr-toast-enter-bottom {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes brokr-toast-enter-top {
+  from { opacity: 0; transform: translateY(-12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Variant dot */
+.brokr-toast-icon {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--brokr-radius-pill);
+  margin-top: 5px;
+  background: var(--brokr-text-secondary);
+}
+
+.brokr-toast-icon--success { background: var(--brokr-success, #22c55e); }
+.brokr-toast-icon--error { background: var(--brokr-error, #ef4444); }
+.brokr-toast-icon--warning { background: var(--brokr-warning, #f59e0b); }
+.brokr-toast-icon--default { background: var(--brokr-primary); }
+
+.brokr-toast-provider-logo {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  object-fit: contain;
+}
+
+.brokr-toast-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.brokr-toast-title {
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  color: var(--brokr-toast-text);
+  line-height: var(--brokr-leading-snug);
+}
+
+.brokr-toast-message {
+  font-size: var(--brokr-font-size-xs);
+  color: var(--brokr-toast-text-secondary);
+  line-height: var(--brokr-leading-snug);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.brokr-toast-dismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--brokr-toast-text-secondary);
+  cursor: pointer;
+  border-radius: var(--brokr-radius-button);
+  padding: 0;
+  opacity: 0.5;
+  transition: opacity var(--brokr-duration-base) var(--brokr-ease), background var(--brokr-duration-base) var(--brokr-ease);
+}
+
+.brokr-toast-dismiss:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--brokr-toast-text) 8%, transparent);
+}
+
+/* -------------------------------------------------------------------------
+ * Notification Bell
+ * ------------------------------------------------------------------------- */
+
+.brokr-notif-bell-wrap {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+}
+
+.brokr-notif-bell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  border-radius: var(--brokr-radius-button);
+  padding: 0;
+  position: relative;
+  transition: color var(--brokr-duration-base) var(--brokr-ease), background var(--brokr-duration-base) var(--brokr-ease);
+}
+
+.brokr-notif-bell:hover {
+  color: var(--brokr-text-primary);
+  background: var(--brokr-subtle-fill);
+}
+
+.brokr-notif-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--brokr-space-1);
+  border-radius: var(--brokr-radius-pill);
+  background: var(--brokr-error, #ef4444);
+  color: var(--brokr-primary-contrast);
+  font-size: 10px;
+  font-weight: var(--brokr-font-weight-bold);
+  line-height: 16px;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* -------------------------------------------------------------------------
+ * Notification Dropdown (from bell)
+ * ------------------------------------------------------------------------- */
+
+.brokr-notif-dropdown {
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: 360px;
+  max-height: 420px;
+  background: var(--brokr-surface);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 4px);
+  box-shadow: var(--brokr-shadow-lg);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  z-index: var(--brokr-z-notification);
+  animation: brokr-dropdown-enter var(--brokr-duration-base) ease-out;
+}
+
+@keyframes brokr-dropdown-enter {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.brokr-notif-dropdown-header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  border-bottom: 1px solid var(--brokr-muted-border);
+}
+
+.brokr-notif-dropdown-title {
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-notif-mark-all {
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
+  color: var(--brokr-primary);
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-medium);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--brokr-radius-sm);
+  transition: background var(--brokr-duration-base) var(--brokr-ease);
+}
+
+.brokr-notif-mark-all:hover {
+  background: color-mix(in srgb, var(--brokr-primary) 10%, transparent);
+}
+
+.brokr-notif-dropdown-list {
+  box-sizing: border-box;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--brokr-text-primary) 12%, transparent) transparent;
+}
+
+/* -------------------------------------------------------------------------
+ * Notification Item (shared between dropdown and full list)
+ * ------------------------------------------------------------------------- */
+
+.brokr-notif-item,
+.brokr-notif-list-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background var(--brokr-duration-base) var(--brokr-ease);
+  border-bottom: 1px solid color-mix(in srgb, var(--brokr-border) 50%, transparent);
+}
+
+.brokr-notif-item:hover,
+.brokr-notif-list-row:hover {
+  background: color-mix(in srgb, var(--brokr-text-primary) 4%, transparent);
+}
+
+.brokr-notif-item--unread,
+.brokr-notif-list-row--unread {
+  background: color-mix(in srgb, var(--brokr-primary) 4%, transparent);
+}
+
+.brokr-notif-item-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--brokr-radius-pill);
+  margin-top: 4px;
+  background: var(--brokr-text-secondary);
+}
+
+.brokr-notif-item-dot--success { background: var(--brokr-success, #22c55e); }
+.brokr-notif-item-dot--error { background: var(--brokr-error, #ef4444); }
+.brokr-notif-item-dot--warning { background: var(--brokr-warning, #f59e0b); }
+.brokr-notif-item-dot--default { background: var(--brokr-primary); }
+
+.brokr-notif-item-logo {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  object-fit: contain;
+  margin-top: 1px;
+}
+
+.brokr-notif-item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.brokr-notif-item-title {
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  color: var(--brokr-text-primary);
+  line-height: var(--brokr-leading-snug);
+}
+
+.brokr-notif-item-message {
+  font-size: var(--brokr-font-size-xs);
+  color: var(--brokr-text-secondary);
+  line-height: var(--brokr-leading-snug);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.brokr-notif-item-time {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--brokr-text-secondary);
+  opacity: 0.6;
+  margin-top: 2px;
+  white-space: nowrap;
+}
+
+/* -------------------------------------------------------------------------
+ * Empty State
+ * ------------------------------------------------------------------------- */
+
+.brokr-notif-empty {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--brokr-space-2);
+  padding: var(--brokr-space-10) var(--brokr-space-4);
+}
+
+.brokr-notif-empty-text {
+  font-size: var(--brokr-font-size-xs);
+  color: var(--brokr-text-secondary);
+  opacity: 0.6;
+}
+
+/* -------------------------------------------------------------------------
+ * Full-page Notification List
+ * ------------------------------------------------------------------------- */
+
+.brokr-notif-list {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 640px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 4px);
+  background: var(--brokr-surface);
+  overflow: hidden;
+}
+
+.brokr-notif-list-header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--brokr-space-4) var(--brokr-space-5);
+  border-bottom: 1px solid var(--brokr-muted-border);
+}
+
+.brokr-notif-list-title {
+  font-size: var(--brokr-font-size-md);
+  font-weight: var(--brokr-font-weight-semibold);
+  color: var(--brokr-text-primary);
+}
+
+.brokr-notif-list-items {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+`;
+
+// src/react/css/index.ts
+var BROKR_GLOBAL_CSS = TOKENS_CSS + RESET_CSS + PRIMITIVES_CSS + AUTH_CSS + GATES_CSS + ACCOUNT_CSS + COMPOSITES_CSS + CHAT_CSS + SKELETON_CSS + ANIMATIONS_CSS + CHAT_EXTRAS_CSS + MARKDOWN_CSS + RESPONSIVE_CSS + NOTIFICATIONS_CSS;
+
+// src/react/styles-entry.tsx
+function BrokrStyles() {
+  return /* @__PURE__ */ React.createElement("style", { id: "brokr-sdk-styles", dangerouslySetInnerHTML: { __html: BROKR_GLOBAL_CSS } });
+}
+export {
+  BROKR_GLOBAL_CSS,
+  BrokrStyles
+};