/**
 * @oxpulse/chat-widget — Shadow DOM CSS theme foundation (W2.2 slice 1).
 *
 * Defines CSS custom-property palette for the widget's Shadow DOM.
 * Light defaults via :host, dark via :host([data-theme='dark']),
 * auto via @media (prefers-color-scheme: dark).
 */
/** CSS for the Shadow DOM <style> block — theme variables + dark overrides. */
export declare const THEME_CSS = "\n:host {\n  /* \u2500\u2500 Light theme defaults \u2500\u2500 */\n  --oxp-bg: #ffffff;\n  --oxp-fg: #1a1a1a;\n  --oxp-accent: #0088cc;\n  /* F2: #767676 \u2248 4.55:1 on #fff PASS (prior #8a8a8a = 3.45:1 FAIL) */\n  --oxp-muted: #767676;\n  --oxp-border: #e0e0e0;\n  --oxp-bubble-self-bg: #dcf8c6;\n  --oxp-bubble-other-bg: #f1f0f0;\n  --oxp-surface: #ffffff;\n  --oxp-tint: #f1f5f9;\n  --oxp-radius: 12px;\n  --oxp-font: system-ui, -apple-system, sans-serif;\n  --oxp-spacing-unit: 8px;\n  /* danger token \u2014 light mode #c00 (contrast \u22654.5:1 on white bg) */\n  --oxp-danger: #c00000;\n  /* B2 (BLOCKER WCAG 1.4.3): --oxp-on-danger for text ON danger-colored backgrounds.\n   * Light #ffffff on #c00000 = 6.48:1 PASS. Dark #ffffff on #ff6b6b = 5.05:1 PASS.\n   * Do NOT reuse --oxp-on-accent (#000 on #c00000 = 3.24:1 FAIL for normal text). */\n  --oxp-on-danger: #ffffff;\n  /* Design M5: --oxp-success \u2014 light #16a34a \u22654.5:1 on banner bg (#fff + 15% mix).\n   * 2B: tint source only \u2014 do not use as color: in light mode (2.78:1 fail on white bg). */\n  --oxp-success: #16a34a;\n  /* DM5: --oxp-success-text \u2014 WCAG-safe fg for success text content (not tint use).\n   * Light #0f7a35: vs #ffffff \u22487:1 PASS, vs bubble-self #dcf8c6 \u22484.8:1 PASS.\n   * Dark  #4ade80: 7.11:1 on #1c1c1e PASS. Prevents authors reaching for --oxp-success. */\n  --oxp-success-text: #0f7a35;\n  /* F1: on-accent \u2014 #000 passes 5.39:1 on #0088cc (light) and 5.82:1 on #0a84ff (dark).\n   * Prior #fff failed both (3.89:1 / 3.61:1). Single value for both themes. */\n  --oxp-on-accent: #000;\n  /* B2: fg-secondary for secondary text. Light #5a5a5a \u22654.5:1 on all bubble bgs:\n   *   vs #dcf8c6 (self-light): 4.55:1 PASS\n   *   vs #f1f0f0 (other-light): 4.58:1 PASS\n   * Much better than --oxp-muted (#767676) on bubble bgs which fails at small sizes. */\n  --oxp-fg-secondary: #5a5a5a;\n  /* DB1: --oxp-link \u2014 WCAG-passing link color distinct from --oxp-accent.\n   * Light #0066a3: contrast vs #dcf8c6 (self-bubble) = 5.36:1 PASS,\n   *               vs #f1f0f0 (other-bubble) = 5.14:1 PASS,\n   *               vs #ffffff (bg) = 6.23:1 PASS \u2014 all \u22654.5:1. */\n  --oxp-link: #0066a3;\n  /* 2A: --oxp-code-bg \u2014 semantic token for code surface background.\n   * Light #f5f5f5: contrast vs --oxp-fg #1a1a1a = ~18:1 PASS (background token, not fg). */\n  --oxp-code-bg: #f5f5f5;\n  /* B3 (BLOCKER): --oxp-code-border \u2014 guarantees code region boundary independent of bg match.\n   * Light: rgba(0,0,0,0.50) blends to #808080 on white \u2192 3.95:1 on widget-bg, ~3.87:1 on\n   * bubble-other #f1f0f0 \u2014 all \u22653:1 PASS (prior 0.40 \u2192 2.85:1 FAIL). */\n  --oxp-code-border: rgba(0, 0, 0, 0.50);\n  /* B1 (BLOCKER WCAG 1.4.11): --oxp-spinner-track for the inactive arc of the CSS spinner.\n   * Light: rgba(0,0,0,0.55) blends to #737373 on white \u2192 3.15:1 PASS (non-text \u22653:1).\n   * Prior --oxp-border (#e0e0e0 on white) = 1.32:1 FAIL. */\n  --oxp-spinner-track: rgba(0, 0, 0, 0.55);\n  /* WCAG 1.4.11: --oxp-waveform-inactive for the unplayed bars of the voice\n   * waveform (rendered on bubble backgrounds, NOT the widget bg). Light\n   * rgba(0,0,0,0.55) blends to:\n   *   #637059 on #dcf8c6 (self-light)  \u2192 4.58:1 PASS\n   *   #6c6c6c on #f1f0f0 (other-light) \u2192 4.53:1 PASS\n   * Both \u22653:1 (non-text UI components). Mirrors --oxp-spinner-track's alpha. */\n  --oxp-waveform-inactive: rgba(0, 0, 0, 0.55);\n\n  display: block;\n  box-sizing: border-box;\n  font-family: var(--oxp-font);\n  background: var(--oxp-bg);\n  color: var(--oxp-fg);\n}\n\n/* W7: [hidden] attribute must win over any component display style.\n * Without this, classes like .oxp-composer-reply { display: flex; } keep the\n * element visible even when hidden=\"\" is set. */\n[hidden] {\n  display: none !important;\n}\n\n:host([data-theme='dark']) {\n  --oxp-bg: #1c1c1e;\n  --oxp-fg: #ebebf5;\n  --oxp-accent: #0a84ff;\n  --oxp-muted: #8e8e93;\n  --oxp-border: #38383a;\n  --oxp-bubble-self-bg: #1e4e31;\n  --oxp-bubble-other-bg: #2c2c2e;\n  --oxp-surface: #2c2c2e;\n  --oxp-tint: #38383a;\n  /* danger token \u2014 dark mode #ff6b6b (contrast \u22654.5:1 on #1c1c1e bg) */\n  --oxp-danger: #ff6b6b;\n  /* B2 (BLOCKER WCAG 1.4.3): dark on-danger \u2014 #000000 on #ff6b6b = 7.57:1 PASS.\n   * Note: #ff6b6b is a light-ish red; dark text provides higher contrast than white. */\n  --oxp-on-danger: #000000;\n  /* Design M5: --oxp-success \u2014 dark #4ade80 \u22654.5:1 on dark banner bg */\n  --oxp-success: #4ade80;\n  /* DM5: dark --oxp-success-text \u2014 #4ade80: 7.11:1 on #1c1c1e PASS. */\n  --oxp-success-text: #4ade80;\n  /* F1: on-accent #000 \u2014 5.82:1 on #0a84ff PASS */\n  --oxp-on-accent: #000;\n  /* B2: dark fg-secondary \u2014 #cccccc \u22654.5:1 on dark bubble bgs:\n   *   vs #1e4e31 (self-dark): 5.12:1 PASS\n   *   vs #2c2c2e (other-dark): 5.48:1 PASS */\n  --oxp-fg-secondary: #cccccc;\n  /* DB1: dark --oxp-link \u2014 #7cc4ff: contrast vs #1e4e31 (self-dark) \u22654.5:1 PASS,\n   *                          vs #2c2c2e (other-dark) \u22654.5:1 PASS \u2014 all \u22654.5:1.\n   * Prior #5eb3ff on #1e4e31 = 4.28:1 FAIL (comment claimed 5.42:1 \u2014 wrong math). */\n  --oxp-link: #7cc4ff;\n  /* B3 (BLOCKER): dark --oxp-code-bg shifted away from --oxp-bubble-other-bg (#2c2c2e).\n   * Prior value was IDENTICAL to bubble-other-bg \u2192 1:1 zero contrast inside other-person bubble.\n   * #1a1a1c: darker, visually distinct; fg #ebebf5 vs #1a1a1c \u22654.5:1 PASS. */\n  --oxp-code-bg: #1a1a1c;\n  /* B3 (BLOCKER): dark --oxp-code-border provides guaranteed boundary regardless of bg match.\n   * rgba(255,255,255,0.40) \u2192 3.83:1 on #1a1a1c code-bg, 3.54:1 on #2c2c2e bubble-other \u2014 all\n   * \u22653:1 PASS (prior 0.30 \u2192 2.72:1 / 2.62:1 FAIL). */\n  --oxp-code-border: rgba(255, 255, 255, 0.40);\n  /* B1 (BLOCKER WCAG 1.4.11): dark spinner track token.\n   * rgba(255,255,255,0.50) on #1c1c1e \u2192 ~4.76:1 PASS (non-text \u22653:1 per WCAG 1.4.11).\n   * Note: spec suggested 0.30 (3.50:1) but actual calculation shows 0.30 \u2192 2.71:1 FAIL;\n   * using 0.50 is empirically verified.\n   * Prior --oxp-border (#38383a on #1c1c1e) = 1.45:1 FAIL. */\n  --oxp-spinner-track: rgba(255, 255, 255, 0.50);\n  /* WCAG 1.4.11: dark --oxp-waveform-inactive for unplayed waveform bars on\n   * dark bubble backgrounds. rgba(255,255,255,0.55) blends to:\n   *   #9aafa2 on #1e4e31 (self-dark)  \u2192 4.26:1 PASS\n   *   #a0a0a1 on #2c2c2e (other-dark) \u2192 5.31:1 PASS\n   * Both \u22653:1 (non-text UI components). Alpha 0.55 mirrors the light token. */\n  --oxp-waveform-inactive: rgba(255, 255, 255, 0.55);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme='auto']), :host(:not([data-theme])) {\n    --oxp-bg: #1c1c1e;\n    --oxp-fg: #ebebf5;\n    --oxp-accent: #0a84ff;\n    --oxp-muted: #8e8e93;\n    --oxp-border: #38383a;\n    --oxp-bubble-self-bg: #1e4e31;\n    --oxp-bubble-other-bg: #2c2c2e;\n  --oxp-surface: #2c2c2e;\n  --oxp-tint: #38383a;\n    --oxp-danger: #ff6b6b;\n    /* B2: dark on-danger matching dark theme block \u2014 #000 on #ff6b6b = 7.57:1 PASS */\n    --oxp-on-danger: #000000;\n    /* F1: on-accent #000 \u2014 5.82:1 on #0a84ff PASS */\n    --oxp-on-accent: #000;\n    /* B2: dark fg-secondary matching dark theme block */\n    --oxp-fg-secondary: #cccccc;\n    /* DB1: dark link token matching dark theme block \u2014 #7cc4ff WCAG \u22654.5:1 */\n    --oxp-link: #7cc4ff;\n    /* Design M5: dark success matching dark theme block */\n    --oxp-success: #4ade80;\n    /* DM5: dark success-text matching dark theme block */\n    --oxp-success-text: #4ade80;\n    /* B3: dark code-bg shifted from #2c2c2e (collision with bubble-other-bg) */\n    --oxp-code-bg: #1a1a1c;\n    /* B3: dark code-border \u2014 rgba(255,255,255,0.40) mirrors dark theme block (prior 0.30 FAIL) */\n    --oxp-code-border: rgba(255, 255, 255, 0.40);\n    /* B1: dark spinner-track matching dark theme block */\n    --oxp-spinner-track: rgba(255, 255, 255, 0.50);\n    /* WCAG 1.4.11: dark waveform-inactive matching dark theme block */\n    --oxp-waveform-inactive: rgba(255, 255, 255, 0.55);\n  }\n}\n\n/* \u2500\u2500 Message list container \u2500\u2500 */\n.oxp-message-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: calc(var(--oxp-spacing-unit) * 1.5);\n  overflow-y: auto;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500 Bubble base \u2500\u2500 */\n.oxp-bubble {\n  display: flex;\n  flex-direction: column;\n  max-width: 75%;\n  padding: calc(var(--oxp-spacing-unit) * 0.75) var(--oxp-spacing-unit);\n  border-radius: var(--oxp-radius);\n  font-size: 0.9rem;\n  line-height: 1.4;\n  word-break: break-word;\n  margin-bottom: calc(var(--oxp-spacing-unit) * 0.5);\n}\n\n.oxp-bubble[data-self='true'] {\n  align-self: flex-end;\n  background: var(--oxp-bubble-self-bg);\n}\n\n.oxp-bubble[data-self='false'] {\n  align-self: flex-start;\n  background: var(--oxp-bubble-other-bg);\n}\n\n/* Chained bubbles \u2014 tighter margin, no sender label gap */\n.oxp-bubble[data-chained='true'] {\n  margin-bottom: 1px;\n}\n\n/* T18-avatar: message row = leading avatar + bubble (avatar for OTHER writers). */\n.oxp-row {\n  display: flex;\n  align-items: flex-start;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  max-width: 80%;\n}\n.oxp-row[data-self='true'] {\n  align-self: flex-end;\n}\n.oxp-row[data-self='false'] {\n  align-self: flex-start;\n}\n/* The row now owns left/right placement; let the bubble fill the row width. */\n.oxp-row .oxp-bubble {\n  max-width: 100%;\n}\n.oxp-bubble-avatar {\n  flex: 0 0 auto;\n  width: 28px;\n  height: 28px;\n  margin-top: 2px;\n  border-radius: 50%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.7rem;\n  font-weight: 600;\n  line-height: 1;\n  color: #fff;\n  user-select: none;\n}\n.oxp-bubble-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n/* Chained rows: keep the avatar footprint but hide it so bubbles stay aligned. */\n/* \u2500\u2500 Presence dot (#121) \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\u2500\u2500\u2500\u2500 */\n.oxp-bubble-avatar { position: relative; }\n.oxp-presence-dot {\n  position: absolute;\n  bottom: -1px;\n  right: -1px;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  border: 2px solid var(--oxp-surface, #fff);\n  background: var(--oxp-muted);\n  z-index: 1;\n}\n.oxp-presence-dot[data-status='online'] { background: #22c55e; }\n.oxp-presence-dot[data-status='away']   { background: var(--oxp-muted); }\n\n.oxp-row[data-chained='true'] .oxp-bubble-avatar {\n  visibility: hidden;\n}\n\n/* Placeholder + error states using theme tokens */\n.oxp-placeholder {\n  font-family: var(--oxp-font);\n  padding: 16px;\n  color: var(--oxp-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* 1C: CSS spinner via ::after \u2014 respects prefers-reduced-motion */\n/* B1 (BLOCKER WCAG 1.4.11): track uses --oxp-spinner-track (\u22653:1) not --oxp-border (1.32:1 FAIL). */\n.oxp-placeholder::after {\n  content: '';\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--oxp-spinner-track);\n  border-top-color: var(--oxp-accent);\n  border-radius: 50%;\n  animation: oxp-spin 0.8s linear infinite;\n  flex-shrink: 0;\n}\n\n@keyframes oxp-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* Minor: prefers-reduced-motion \u2014 replace opacity:0.5 (renders 1.14:1 invisible) with static\n * accent-colored arc. Spinner stops but remains visible as an indicator. */\n@media (prefers-reduced-motion: reduce) {\n  .oxp-placeholder::after {\n    animation: none;\n    border-top-color: var(--oxp-accent);\n    opacity: 1;\n  }\n}\n\n/* Review finding (MEDIUM): data-hydrate-failed='true' is set by hydrateMediaSrc\n * on final retry exhaustion (and on permanent 403/404/410) so CSS can show a\n * placeholder instead of a bare broken-image icon. Reuses the existing\n * .oxp-placeholder broken/error visual language (muted token + font + padding)\n * \u2014 applied to the failed <img>/<audio> element itself. */\n[data-hydrate-failed='true'] {\n  font-family: var(--oxp-font);\n  color: var(--oxp-muted);\n  padding: 16px;\n  min-height: 80px;\n  background: var(--oxp-border);\n  /* Hide the browser's bare broken-image icon + alt text so the placeholder\n   * box reads as an intentional unavailable-state affordance, not a crash. */\n  font-size: 0;\n  box-sizing: border-box;\n}\n\n.oxp-error {\n  font-family: var(--oxp-font);\n  padding: 16px;\n  color: var(--oxp-danger);\n  border: 1px solid var(--oxp-danger);\n  border-radius: 4px;\n}\n\n/* 1D: Inline message list error state */\n.oxp-message-list-error {\n  font-family: var(--oxp-font);\n  padding: 16px;\n  color: var(--oxp-danger);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n/* B2 (BLOCKER WCAG 1.4.3): use --oxp-on-danger (not --oxp-on-accent) for text on danger bg.\n * Light #000 on #c00000 = 3.24:1 FAIL; #ffffff on #c00000 = 6.48:1 PASS. */\n.oxp-message-list-error button {\n  font-family: var(--oxp-font);\n  font-size: 0.85rem;\n  padding: calc(var(--oxp-spacing-unit) * 0.5) var(--oxp-spacing-unit);\n  background: var(--oxp-danger);\n  color: var(--oxp-on-danger);\n  border: none;\n  border-radius: calc(var(--oxp-radius) * 0.5);\n  cursor: pointer;\n  min-height: 40px;\n  /* DM list error minor: min-width for consistent touch target */\n  min-width: 64px;\n}\n\n/* \u2500\u2500 Typing indicator (#120) \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\u2500\u2500 */\n.oxp-typing-indicator {\n  display: none;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 16px 8px;\n  font-size: 12px;\n  color: var(--oxp-muted);\n  font-family: var(--oxp-font);\n  min-height: 24px;\n}\n.oxp-typing-dots {\n  display: inline-flex;\n  gap: 3px;\n  flex-shrink: 0;\n}\n.oxp-typing-dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--oxp-muted);\n  animation: oxp-typing-bounce 1.4s infinite ease-in-out both;\n}\n.oxp-typing-dot:nth-child(1) { animation-delay: -0.32s; }\n.oxp-typing-dot:nth-child(2) { animation-delay: -0.16s; }\n.oxp-typing-dot:nth-child(3) { animation-delay: 0s; }\n@keyframes oxp-typing-bounce {\n  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n  40% { transform: scale(1); opacity: 1; }\n}\n.oxp-typing-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n@media (prefers-reduced-motion: reduce) {\n  .oxp-typing-dot { animation: none; opacity: 0.7; }\n}\n\n/* \u2500\u2500 Pinned messages banner (#228) \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 */\n.oxp-pinned-banner {\n  display: none;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--oxp-surface);\n  border-bottom: 1px solid var(--oxp-border);\n  font-size: 13px;\n  color: var(--oxp-fg-secondary);\n  font-family: var(--oxp-font);\n  flex-shrink: 0;\n}\n.oxp-pinned-banner-icon {\n  flex-shrink: 0;\n  font-size: 14px;\n  line-height: 1;\n}\n.oxp-pinned-banner-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  overflow: hidden;\n}\n.oxp-pinned-banner-preview {\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  padding: 0;\n  color: var(--oxp-fg);\n  font-family: var(--oxp-font);\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n.oxp-pinned-banner-preview:hover {\n  text-decoration: underline;\n  color: var(--oxp-accent);\n}\n.oxp-pinned-banner-preview:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n.oxp-pinned-banner-preview[data-not-loaded='true'] {\n  color: var(--oxp-muted);\n  font-style: italic;\n  cursor: default;\n}\n.oxp-pinned-banner-preview[data-not-loaded='true']:hover {\n  text-decoration: none;\n  color: var(--oxp-muted);\n}\n.oxp-pinned-banner-meta {\n  font-size: 11px;\n  color: var(--oxp-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.oxp-pinned-banner-nav {\n  display: none;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n.oxp-pinned-banner[data-multi='true'] .oxp-pinned-banner-nav {\n  display: flex;\n}\n.oxp-pinned-banner-nav-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--oxp-fg-secondary);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 12px;\n  line-height: 1;\n}\n.oxp-pinned-banner-nav-btn:hover {\n  color: var(--oxp-accent);\n  background: var(--oxp-surface-hover, rgba(0, 0, 0, 0.05));\n}\n.oxp-pinned-banner-nav-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n.oxp-pinned-banner-counter {\n  font-size: 11px;\n  color: var(--oxp-muted);\n  min-width: 28px;\n  text-align: center;\n}\n.oxp-pinned-banner-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--oxp-fg-secondary);\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 1;\n  flex-shrink: 0;\n}\n.oxp-pinned-banner-close:hover {\n  color: var(--oxp-fg);\n  background: var(--oxp-surface-hover, rgba(0, 0, 0, 0.05));\n}\n.oxp-pinned-banner-close:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* #232: highlight animation for jump-to-message from pinned banner */\n.oxp-pinned-jump-highlight {\n  animation: oxp-pinned-jump-flash 2s ease-out;\n}\n@keyframes oxp-pinned-jump-flash {\n  0% { background-color: var(--oxp-accent); }\n  30% { background-color: var(--oxp-accent); }\n  100% { background-color: transparent; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .oxp-pinned-jump-highlight { animation: none; }\n  .oxp-pinned-jump-highlight { background-color: var(--oxp-accent); opacity: 0.3; }\n}\n\n.oxp-message-list-error button:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* P5: sender label + optional role badge (senderEl is prepended into this row). */\n.oxp-bubble-sender-row {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  margin-bottom: 2px;\n}\n\n.oxp-bubble-sender {\n  font-size: 0.75rem;\n  font-weight: 600;\n  /* B5: Use fg with opacity instead of accent \u2014 contrast \u22654.5:1 on both\n   * self-bubble (#dcf8c6 light / #1e4e31 dark) and other-bubble\n   * (#f1f0f0 light / #2c2c2e dark) backgrounds. */\n  color: var(--oxp-fg);\n  opacity: 0.7;\n}\n\n.oxp-bubble[data-chained='true'] .oxp-bubble-sender-row {\n  display: none;\n}\n\n/* P5: privileged-role badge (moderator/owner) next to the sender name.\n * background/color pairing mirrors .oxp-composer-send (F1: --oxp-on-accent on\n * --oxp-accent verified 5.39:1 light / 5.82:1 dark \u2014 WCAG AA for normal text). */\n.oxp-role-badge {\n  display: inline-flex;\n  align-items: center;\n  flex: 0 0 auto;\n  font-size: 0.65rem;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 6px;\n  border-radius: 999px;\n  background: var(--oxp-accent);\n  color: var(--oxp-on-accent);\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n  user-select: none;\n}\n\n.oxp-bubble-body {\n  color: var(--oxp-fg);\n}\n\n.oxp-bubble-time {\n  font-size: 0.7rem;\n  /* design-empirical review of starthey.com/demo 2026-07-14 (WCAG 1.4.3):\n   * --oxp-muted measured 3.99:1 light / 4.27:1 dark at this size \u2014 below the\n   * 4.5:1 AA floor on every message, both themes. --oxp-fg-secondary is this\n   * file's own designated on-bubble text token (see :40-44 / :95-98) and\n   * passes \u22654.5:1 on all four self/other \u00D7 light/dark bubble backgrounds. */\n  color: var(--oxp-fg-secondary);\n  align-self: flex-end;\n  margin-top: 2px;\n}\n\n/* \u2500\u2500 Read receipts (#122) \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\u2500\u2500\u2500 */\n.oxp-read-receipt {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-size: 0.65rem;\n  color: var(--oxp-fg-secondary);\n  align-self: flex-end;\n  margin-top: 2px;\n  white-space: nowrap;\n}\n.oxp-read-receipt svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n.oxp-read-receipt[data-status='read'] { color: var(--oxp-accent, #3b82f6); }\n.oxp-read-receipt[data-status='read'] svg { color: var(--oxp-accent, #3b82f6); }\n\n/* \u2500\u2500 Emoji picker (#127) \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\u2500\u2500\u2500\u2500 */\n.oxp-emoji-picker {\n  background: var(--oxp-surface, #fff);\n  border: 1px solid var(--oxp-border, #e2e8f0);\n  border-radius: 12px;\n  box-shadow: 0 4px 24px rgba(0,0,0,0.12);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  max-height: 280px;\n}\n.oxp-emoji-picker-search { padding: 8px; }\n.oxp-emoji-picker-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 6px 10px;\n  border: 1px solid var(--oxp-border, #e2e8f0);\n  border-radius: 8px;\n  font-size: 0.8rem;\n  background: var(--oxp-surface, #fff);\n  color: var(--oxp-fg, #1a1a1a);\n}\n.oxp-emoji-picker-nav {\n  display: flex;\n  gap: 2px;\n  padding: 0 8px 4px;\n  overflow-x: auto;\n  flex-shrink: 0;\n}\n.oxp-emoji-picker-tab {\n  flex: 0 0 auto;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 1rem;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.5;\n}\n.oxp-emoji-picker-tab[aria-selected='true'] {\n  opacity: 1;\n  background: var(--oxp-tint, #f1f5f9);\n}\n.oxp-emoji-picker-grid {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 8px 8px;\n}\n.oxp-emoji-picker-category-label {\n  font-size: 0.65rem;\n  font-weight: 600;\n  color: var(--oxp-fg-secondary, #64748b);\n  padding: 6px 0 2px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.oxp-emoji-picker-emoji {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 1.25rem;\n  padding: 0;\n}\n.oxp-emoji-picker-emoji:hover {\n  background: var(--oxp-tint, #f1f5f9);\n}\n.oxp-emoji-picker-emoji:focus-visible {\n  outline: 2px solid var(--oxp-accent, #3b82f6);\n  outline-offset: -1px;\n}\n.oxp-emoji-picker-empty {\n  text-align: center;\n  padding: 24px 0;\n  color: var(--oxp-fg-secondary, #64748b);\n  font-size: 0.8rem;\n}\n.oxp-composer-emoji-btn {\n  flex: 0 0 auto;\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--oxp-fg-secondary, #64748b);\n}\n.oxp-composer-emoji-btn:hover {\n  background: var(--oxp-tint);\n}\n\n/* \u2500\u2500 Product picker (seller catalog, #196/#197) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* Mirrors .oxp-emoji-picker 1:1 (container surface/border/radius/shadow) +\n   list-item flex row with space-between + ellipsis so title and price never\n   collide into \"Widget19.99\". Uses existing tokens only \u2014 no new tokens. */\n.oxp-product-picker {\n  background: var(--oxp-surface, #fff);\n  border: 1px solid var(--oxp-border, #e2e8f0);\n  border-radius: 12px;\n  box-shadow: 0 4px 24px rgba(0,0,0,0.12);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  max-height: 320px;\n}\n.oxp-product-picker-search { padding: 8px; }\n.oxp-product-picker-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 6px 10px;\n  border: 1px solid var(--oxp-border, #e2e8f0);\n  border-radius: 8px;\n  font-size: 0.8rem;\n  background: var(--oxp-surface, #fff);\n  color: var(--oxp-fg, #1a1a1a);\n}\n.oxp-product-picker-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 8px 8px;\n}\n.oxp-product-picker-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 6px 8px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 0.85rem;\n  color: var(--oxp-fg, #1a1a1a);\n  text-align: left;\n}\n.oxp-product-picker-item:hover {\n  background: var(--oxp-tint, #f1f5f9);\n}\n.oxp-product-picker-item:focus-visible {\n  outline: 2px solid var(--oxp-accent, #3b82f6);\n  outline-offset: -1px;\n}\n.oxp-product-picker-item-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.oxp-product-picker-item-price {\n  flex: 0 0 auto;\n  color: var(--oxp-fg-secondary, #64748b);\n  font-size: 0.8rem;\n  white-space: nowrap;\n}\n.oxp-product-picker-loading,\n.oxp-product-picker-error,\n.oxp-product-picker-empty {\n  text-align: center;\n  padding: 24px 0;\n  color: var(--oxp-fg-secondary, #64748b);\n  font-size: 0.8rem;\n}\n.oxp-product-picker-error {\n  color: var(--oxp-danger, #dc2626);\n}\n.oxp-composer-product-btn {\n  flex: 0 0 auto;\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--oxp-fg-secondary, #64748b);\n}\n.oxp-composer-product-btn:hover {\n  background: var(--oxp-tint);\n}\n\n/* \u2500\u2500 Thread panel (#126) \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\u2500\u2500\u2500\u2500 */\n.oxp-thread-panel {\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 320px;\n  max-width: 100%;\n  background: var(--oxp-surface, #fff);\n  border-left: 1px solid var(--oxp-border, #e2e8f0);\n  display: flex;\n  flex-direction: column;\n  z-index: 30;\n  box-shadow: -4px 0 24px rgba(0,0,0,0.08);\n}\n.oxp-thread-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--oxp-border, #e2e8f0);\n  flex-shrink: 0;\n}\n.oxp-thread-title {\n  font-weight: 600;\n  font-size: 0.9rem;\n  color: var(--oxp-fg, #1a1a1a);\n}\n.oxp-thread-close {\n  border: none;\n  background: transparent;\n  font-size: 1.3rem;\n  cursor: pointer;\n  color: var(--oxp-fg-secondary, #64748b);\n  padding: 0 4px;\n  line-height: 1;\n}\n.oxp-thread-close:hover { color: var(--oxp-fg, #1a1a1a); }\n.oxp-thread-root {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--oxp-border, #e2e8f0);\n  flex-shrink: 0;\n}\n.oxp-thread-root-sender {\n  display: block;\n  font-weight: 600;\n  font-size: 0.8rem;\n  color: var(--oxp-fg, #1a1a1a);\n  margin-bottom: 2px;\n}\n.oxp-thread-root-body {\n  display: block;\n  font-size: 0.85rem;\n  color: var(--oxp-fg-secondary, #64748b);\n  line-height: 1.4;\n}\n.oxp-thread-replies {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 14px;\n}\n.oxp-thread-bubble {\n  margin-bottom: 8px;\n  padding: 6px 10px;\n  border-radius: 10px;\n  background: var(--oxp-tint, #f1f5f9);\n  max-width: 85%;\n}\n.oxp-thread-bubble[data-self='true'] {\n  margin-left: auto;\n  background: var(--oxp-accent-bg, #dbeafe);\n}\n.oxp-thread-bubble-sender {\n  display: block;\n  font-weight: 600;\n  font-size: 0.75rem;\n  color: var(--oxp-fg, #1a1a1a);\n}\n.oxp-thread-bubble-body {\n  display: block;\n  font-size: 0.85rem;\n  color: var(--oxp-fg, #1a1a1a);\n  margin-top: 2px;\n  word-wrap: break-word;\n}\n.oxp-thread-bubble-time {\n  display: block;\n  font-size: 0.65rem;\n  color: var(--oxp-fg-secondary, #94a3b8);\n  margin-top: 2px;\n}\n.oxp-thread-composer {\n  display: flex;\n  gap: 8px;\n  padding: 10px 14px;\n  border-top: 1px solid var(--oxp-border, #e2e8f0);\n  flex-shrink: 0;\n}\n.oxp-thread-input {\n  flex: 1;\n  resize: none;\n  border: 1px solid var(--oxp-border, #e2e8f0);\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-size: 0.85rem;\n  font-family: inherit;\n  background: var(--oxp-surface, #fff);\n  color: var(--oxp-fg, #1a1a1a);\n}\n.oxp-thread-send {\n  flex: 0 0 auto;\n  border: none;\n  background: var(--oxp-accent, #3b82f6);\n  color: #fff;\n  border-radius: 8px;\n  padding: 6px 14px;\n  font-size: 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n}\n.oxp-thread-send:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.oxp-thread-loading, .oxp-thread-empty, .oxp-thread-error {\n  text-align: center;\n  padding: 24px 0;\n  color: var(--oxp-fg-secondary, #64748b);\n  font-size: 0.8rem;\n}\n.oxp-thread-error { color: var(--oxp-danger, #ef4444); }\n.oxp-thread-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-size: 0.65rem;\n  color: var(--oxp-fg-secondary, #64748b);\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 2px 6px;\n  border-radius: 6px;\n}\n.oxp-thread-indicator:hover {\n  background: var(--oxp-tint, #f1f5f9);\n}\n\n.oxp-tombstone {\n  color: var(--oxp-muted);\n  font-style: italic;\n}\n\n/* U2: failed-decrypt placeholder \u2014 text color: --oxp-danger text directly on\n * --oxp-bubble-self-bg fails WCAG 1.4.3 in the dark theme (#ff6b6b on #1e4e31\n * = 3.46:1, below the 4.5:1 AA floor for italic/normal-size text \u2014 italic does\n * not qualify for the large-text exemption). --oxp-fg-secondary is the token\n * this file already designates for bubble-background text (see its own doc\n * comment: \"Much better than --oxp-muted on bubble bgs which fails at small\n * sizes\") and passes \u22655.9:1 on all four self/other \u00D7 light/dark backgrounds.\n *\n * review-fix HIGH#2: text color alone left this visually identical in weight\n * to .oxp-tombstone (both small/italic/muted) \u2014 but an unsealError, unlike a\n * benign deletion, can mean a tampered/replayed message (SDK explicitly\n * preserves it rather than masking it \u2014 see chat-sdk client.ts). Give it a\n * danger-tinted chip background so it reads as a security-relevant state, not\n * routine housekeeping. Reuses TWO existing in-file conventions rather than\n * inventing a new one: the transparent-mix idiom from\n * .oxp-reaction-chip[data-own='true'] (color-mix(..., transparent) \u2014 correct\n * here too, since this span sits on a VARYING backdrop, self or other bubble,\n * light or dark, unlike .oxp-reconnect-banner which sits on a fixed --oxp-bg\n * and can mix against it directly); and the 12% tint ratio from\n * .oxp-reconnect-banner[data-state='auth-expired'].\n * Re-verified WCAG 1.4.3 (text-on-tint, \u22654.5:1 required) with the same\n * relative-luminance math after alpha-compositing the 12% danger tint onto\n * each bubble bg: light-self 4.81:1, light-other 4.88:1, dark-self 5.42:1,\n * dark-other 7.30:1 \u2014 all PASS. */\n.oxp-unseal-error {\n  display: inline-block;\n  color: var(--oxp-fg-secondary);\n  font-style: italic;\n  background: color-mix(in srgb, var(--oxp-danger) 12%, transparent);\n  border-radius: calc(var(--oxp-radius) * 0.35);\n  padding: 2px calc(var(--oxp-spacing-unit) * 0.625);\n}\n\n/* D1/D2: send-failed message state \u2014 the bubble stays with caption text\n * preserved, and a failure notice + retry/dismiss buttons are appended.\n * Uses the same danger-tint convention as .oxp-unseal-error. */\n.oxp-send-failed {\n  margin-top: calc(var(--oxp-spacing-unit) * 0.5);\n  display: flex;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  flex-wrap: wrap;\n}\n.oxp-send-failed-reason {\n  color: var(--oxp-fg-secondary);\n  font-size: 0.85em;\n  font-style: italic;\n  background: color-mix(in srgb, var(--oxp-danger) 12%, transparent);\n  border-radius: calc(var(--oxp-radius) * 0.35);\n  padding: 2px calc(var(--oxp-spacing-unit) * 0.625);\n}\n.oxp-send-failed-retry,\n.oxp-send-failed-dismiss {\n  font-size: 0.85em;\n  border: 1px solid var(--oxp-border);\n  border-radius: calc(var(--oxp-radius) * 0.35);\n  padding: 2px calc(var(--oxp-spacing-unit) * 0.5);\n  background: var(--oxp-bg);\n  color: var(--oxp-fg);\n  cursor: pointer;\n}\n.oxp-send-failed-retry:hover,\n.oxp-send-failed-dismiss:hover {\n  background: var(--oxp-tint, #f1f5f9);\n}\n.oxp-bubble[data-send-failed='true'] {\n  border: 1px solid color-mix(in srgb, var(--oxp-danger) 30%, transparent);\n}\n\n/* \u2500\u2500 Markdown styles \u2500\u2500 */\n/* 2A: use --oxp-code-bg (semantic token) instead of --oxp-border (structural token).\n * B3 (BLOCKER): add --oxp-code-border for guaranteed code region boundary.\n *   Dark: #1a1a1c code bg now distinct from bubble-other (#2c2c2e), but border provides extra guarantee.\n *   Light: rgba(0,0,0,0.40) border on #f5f5f5 bg \u2014 visible on all surfaces. */\n.md-code { background: var(--oxp-code-bg); border: 1px solid var(--oxp-code-border); border-radius: 3px; padding: 1px 4px; font-size: 0.85em; }\n.md-pre  { background: var(--oxp-code-bg); border: 1px solid var(--oxp-code-border); border-radius: 6px; padding: 8px; overflow-x: auto; }\n.md-link { color: var(--oxp-accent); }\n.md-spoiler { background: var(--oxp-fg); color: var(--oxp-fg); border-radius: 3px; cursor: pointer; }\n.md-spoiler:hover, .md-spoiler:focus { background: transparent; }\n.md-quote { border-left: 3px solid var(--oxp-accent); margin: 0; padding-left: 8px; color: var(--oxp-muted); }\n\n/* \u2500\u2500 Widget root + composer (slice 2) \u2500\u2500 */\n.oxp-widget-root { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }\n/* The wrapper div (element.ts) sits between the root and the message list; it\n * must be the flex-growing child so the composer is pinned to the bottom. The\n * rule previously targeted only the inner list element (oxp-message-list),\n * leaving the wrapper at flex-grow:0 so it collapsed to content height and the\n * composer rode up under the last row (dead space below on a tall/mobile\n * fullscreen host). flex:1 + column on the wrapper, flex:1 on the inner list.\n * NB keep this comment backtick-free \u2014 this string is a JS template literal. */\n.oxp-widget-root .oxp-message-list-wrapper { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n.oxp-widget-root .oxp-message-list { flex: 1; min-height: 0; }\n\n.oxp-composer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--oxp-spacing-unit);\n  padding: var(--oxp-spacing-unit);\n  border-top: 1px solid var(--oxp-border);\n  background: var(--oxp-bg);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.oxp-composer-main {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  gap: var(--oxp-spacing-unit);\n}\n\n.oxp-composer-input {\n  flex: 1;\n  min-height: 44px;\n  max-height: 144px;\n  padding: calc(var(--oxp-spacing-unit) * 0.75) var(--oxp-spacing-unit);\n  border: 1px solid var(--oxp-border);\n  border-radius: var(--oxp-radius);\n  background: var(--oxp-bg);\n  color: var(--oxp-fg);\n  font-family: var(--oxp-font);\n  font-size: 0.95rem;\n  line-height: 1.4;\n  resize: none;\n  box-sizing: border-box;\n  outline: none;\n  overflow-y: auto;\n}\n\n.oxp-composer-input:focus {\n  border-color: var(--oxp-accent);\n}\n\n/* B4: placeholder contrast \u2014 override default 0.54 opacity */\n.oxp-composer-input::placeholder {\n  color: var(--oxp-muted);\n  opacity: 1;\n}\n\n.oxp-composer-send:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n.oxp-composer-send {\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  background: var(--oxp-accent);\n  /* F1: use --oxp-on-accent for WCAG contrast (#000 on both: 5.39:1 light, 5.82:1 dark) */\n  color: var(--oxp-on-accent);\n  border: none;\n  border-radius: 999px;\n  font-family: var(--oxp-font);\n  cursor: pointer;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  align-self: flex-end;\n}\n\n.oxp-composer-send:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* M9: Counter row below the input row. */\n.oxp-composer-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--oxp-spacing-unit);\n  align-self: flex-end;\n  min-height: 0;\n}\n\n.oxp-composer-counter {\n  font-size: 0.75rem;\n  color: var(--oxp-muted);\n  pointer-events: none;\n}\n\n.oxp-composer-counter[data-over-limit='true'] {\n  color: var(--oxp-danger);\n}\n\n/* W7: reply preview bar above the composer input */\n.oxp-composer-reply {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  padding: calc(var(--oxp-spacing-unit) * 0.5) var(--oxp-spacing-unit);\n  border-left: 3px solid var(--oxp-accent);\n  border-radius: calc(var(--oxp-radius) * 0.5);\n  background: color-mix(in srgb, var(--oxp-bubble-other-bg) 60%, transparent);\n  color: var(--oxp-fg);\n}\n\n.oxp-composer-reply-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.oxp-composer-reply-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--oxp-fg-secondary);\n}\n\n.oxp-composer-reply-body {\n  font-size: 0.85rem;\n  /* review pr-review-council 2026-07-14: --oxp-muted fails WCAG 1.4.3 here\n   * (light \u22484.2:1, dark \u22482.95:1, both below the 4.5:1 floor). Sibling\n   * .oxp-composer-reply-label already uses --oxp-fg-secondary. */\n  color: var(--oxp-fg-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.oxp-composer-reply-cancel {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  color: var(--oxp-fg-secondary);\n  padding: 2px 4px;\n  border-radius: 4px;\n}\n\n.oxp-composer-reply-cancel:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* #113: product-card attached chip \u2014 mirrors the reply-preview bar pattern. */\n.oxp-composer-product-chip {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  padding: calc(var(--oxp-spacing-unit) * 0.5) var(--oxp-spacing-unit);\n  border-left: 3px solid var(--oxp-accent);\n  border-radius: calc(var(--oxp-radius) * 0.5);\n  background: color-mix(in srgb, var(--oxp-bubble-other-bg) 60%, transparent);\n  color: var(--oxp-fg);\n}\n\n.oxp-composer-product-chip-label {\n  font-size: 0.85rem;\n  color: var(--oxp-fg-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  flex: 1;\n}\n\n.oxp-composer-product-chip-cancel {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  color: var(--oxp-fg-secondary);\n  padding: 2px 4px;\n  border-radius: 4px;\n}\n\n.oxp-composer-product-chip-cancel:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* M10: visually-hidden for screen-reader-only text */\n.oxp-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0,0,0,0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* \u2500\u2500 Reactions (W2.2 slice 3) \u2500\u2500 */\n.oxp-bubble-reactions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: calc(var(--oxp-spacing-unit) * 0.25);\n  margin-top: calc(var(--oxp-spacing-unit) * 0.25);\n}\n\n.oxp-reaction-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px calc(var(--oxp-spacing-unit) * 0.625);\n  border: 1px solid transparent;\n  border-radius: 999px;\n  background: var(--oxp-border);\n  color: var(--oxp-fg);\n  font-family: var(--oxp-font);\n  font-size: 0.8rem;\n  cursor: pointer;\n  line-height: 1.4;\n  box-sizing: border-box;\n}\n\n.oxp-reaction-chip[data-own='true'] {\n  background: color-mix(in srgb, var(--oxp-accent) 15%, transparent);\n  border-color: var(--oxp-accent);\n}\n\n.oxp-reaction-chip:focus-visible {\n  /* B4 / F2 (WCAG 2.4.11): double-ring pattern \u2014 outer outline + outer box-shadow ring.\n   * Prior: outermost pixel = accent (#0a84ff) on dark self-bubble (#1e4e31) = 2.63:1 FAIL.\n   * Fix: outermost box-shadow uses --oxp-fg.\n   *   light: #1a1a1a on dark self-bubble #1e4e31 >> 3:1 PASS.\n   *   dark:  #ebebf5 on #1e4e31 = 8.10:1 PASS. */\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 4px var(--oxp-fg);\n}\n\n.oxp-bubble-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  margin-top: 2px;\n}\n\n/* Heart-first reactions (spec amendment 2026-07-14): a single heart button\n * replaces the old '+\uD83D\uDE00' text trigger \u2014 outline heart by default, tap\n * instantly toggles \u2764\uFE0F, hold/ArrowUp opens the full ReactionQuickBar. */\n/* L3: shared base for bubble-footer icon buttons (heart, pin, reply). All use\n * opacity:0 + hover/focus reveal, same padding/radius/color. */\n.oxp-icon-btn,\n.oxp-reaction-heart-btn,\n.oxp-pin-btn,\n.oxp-reply-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* B2 (carried from .oxp-reaction-add-btn): --oxp-fg-secondary, not --oxp-muted.\n   * Light #5a5a5a \u22654.5:1 on all bubble bgs; dark #cccccc \u22654.5:1 on dark bubble bgs. */\n  color: var(--oxp-fg-secondary);\n  padding: 2px 4px;\n  border-radius: 4px;\n  line-height: 1;\n  opacity: 0;\n  transition: opacity 0.1s, color 0.15s;\n}\n\n.oxp-icon-btn svg,\n.oxp-reaction-heart-btn svg,\n.oxp-pin-btn svg,\n.oxp-reply-btn svg {\n  fill: none;\n  stroke: currentColor;\n}\n\n/* Own-\u2764\uFE0F state: aria-pressed reflects #ownReactionFor(msgId) === HEART_EMOJI\n * (kept live by MessageList#syncHeartButton). Accent-tinted, filled heart \u2014\n * mirrors .oxp-reaction-chip[data-own='true']'s own-highlight token choice. */\n.oxp-reaction-heart-btn[aria-pressed='true'] {\n  color: var(--oxp-accent);\n}\n\n.oxp-reaction-heart-btn[aria-pressed='true'] svg {\n  fill: currentColor;\n}\n\n.oxp-bubble:hover .oxp-reaction-heart-btn,\n.oxp-bubble:focus-within .oxp-reaction-heart-btn {\n  opacity: 1;\n}\n\n/* When the caller already has a \u2764\uFE0F reaction, the reaction chip\n * (\u201C\u2764\uFE0F N\u201D) is the visible indicator + toggle. Suppress the\n * heart button on hover/focus-within so the user doesn\u2019t see two\n * heart icons stacked vertically. The chip click removes the reaction;\n * once removed, the heart button reappears for re-reacting / quick-bar.\n * Keyboard users still reach the button via Tab (focus-visible below). */\n.oxp-bubble:hover .oxp-reaction-heart-btn[aria-pressed=true],\n.oxp-bubble:focus-within .oxp-reaction-heart-btn[aria-pressed=true] {\n  opacity: 0;\n}\n\n.oxp-reaction-heart-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  opacity: 1;\n}\n\n/* Heart-add pulse (reuse-update 2026-07-14) \u2014 ported verbatim from\n * oxpulse-chat web's Bubble.svelte '.qa-heart.on.pulse' keyframe\n * (0%/50%/100% scale(1)/scale(1.18)/scale(1), 240ms \u2014 see HEART_PULSE_MS\n * in message-list.ts, MessageList#pulseHeart). */\n.oxp-reaction-heart-btn--pulse {\n  animation: oxp-heart-pulse 240ms ease both;\n}\n\n@keyframes oxp-heart-pulse {\n  0%   { transform: scale(1); }\n  50%  { transform: scale(1.18); }\n  100% { transform: scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .oxp-reaction-heart-btn--pulse {\n    animation: none;\n  }\n}\n\n/* W7: reply button on each bubble */\n/* R5: .oxp-reply-btn base styles shared via .oxp-icon-btn selector above;\n * only the reply-specific font-size remains here. */\n.oxp-reply-btn {\n  font-size: 0.8rem;\n}\n\n.oxp-bubble:hover .oxp-reply-btn,\n.oxp-bubble:focus-within .oxp-reply-btn {\n  opacity: 1;\n}\n\n.oxp-reply-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  opacity: 1;\n}\n\n/* #231: pin/unpin button on each bubble \u2014 base styles shared with heart-btn\n * via .oxp-icon-btn (L3); only the aria-pressed + hover/focus rules below\n * are pin-specific. */\n.oxp-pin-btn[aria-pressed='true'] {\n  color: var(--oxp-accent);\n}\n\n.oxp-pin-btn[aria-pressed='true'] svg {\n  fill: currentColor;\n}\n\n.oxp-bubble:hover .oxp-pin-btn,\n.oxp-bubble:focus-within .oxp-pin-btn {\n  opacity: 1;\n}\n\n.oxp-pin-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  opacity: 1;\n}\n\n/* W7: reply quote inside a bubble */\n.oxp-bubble-reply {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  margin-bottom: 4px;\n  padding-left: 8px;\n  background: transparent;\n  border: none;\n  border-left: 3px solid var(--oxp-accent);\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.oxp-bubble-reply:disabled {\n  cursor: default;\n}\n\n.oxp-bubble-reply-sender {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--oxp-fg-secondary);\n}\n\n.oxp-bubble-reply-body {\n  font-size: 0.8rem;\n  /* review pr-review-council 2026-07-14: --oxp-muted fails WCAG 1.4.3 here\n   * (light \u22484.2:1, dark \u22482.95:1, both below the 4.5:1 floor). Sibling\n   * .oxp-bubble-reply-sender already uses --oxp-fg-secondary. */\n  color: var(--oxp-fg-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.oxp-reaction-quick-bar {\n  position: absolute;\n  z-index: 10;\n  background: var(--oxp-bg);\n  /* B3: border retained for shape definition.\n   * F1 (WCAG 1.4.11): discrete outer pixel via 0 0 0 1px box-shadow ring.\n   *   outline-offset:-1px was placing the ring inward (outermost pixel = --oxp-border = 1.32:1 FAIL).\n   *   box-shadow sits OUTSIDE the border-box \u2014 outermost pixel is the ring pixel.\n   *   Light: rgba(0,0,0,0.50) on #fff \u2192 rgb(128,128,128) \u2192 L=0.216 \u2192 contrast vs #fff = 3.95:1 PASS.\n   *   Dark:  rgba(255,255,255,0.50) on #1c1c1e \u2192 rgb(141,141,142) \u2192 L=0.266 \u2192 4.39:1 PASS. */\n  border: 1px solid var(--oxp-border);\n  border-radius: var(--oxp-radius);\n  padding: calc(var(--oxp-spacing-unit) * 0.5);\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  /* DM3 (design MAJOR): explicit width so offsetWidth in #position() returns a stable non-zero\n   * value pre-paint. Without this, clamp formula uses 0 \u2192 effectively disabled on narrow viewports.\n   * 256px fits 6 emojis at 36px each + gap + padding. */\n  width: 256px;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.50),\n    0 4px 12px rgba(0, 0, 0, 0.25),\n    0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n:host([data-theme='dark']) .oxp-reaction-quick-bar {\n  /* F1: dark theme \u2014 rgba(255,255,255,0.50) on #1c1c1e \u2192 4.39:1 PASS */\n  box-shadow:\n    0 0 0 1px rgba(255, 255, 255, 0.50),\n    0 4px 12px rgba(0, 0, 0, 0.60);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme='auto']) .oxp-reaction-quick-bar,\n  :host(:not([data-theme])) .oxp-reaction-quick-bar {\n    box-shadow:\n      0 0 0 1px rgba(255, 255, 255, 0.50),\n      0 4px 12px rgba(0, 0, 0, 0.60);\n  }\n}\n\n.oxp-reaction-quick-bar-button {\n  min-width: 36px;\n  min-height: 36px;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: calc(var(--oxp-radius) * 0.5);\n  cursor: pointer;\n  font-size: 1.2rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n}\n\n/* Review fix (CRITICAL, PR #88; reopened on re-review \u2014 source-order cascade):\n * desktop floor for .oxp-attachment-cancel (>=24px, WCAG 2.5.8 AA) MUST\n * appear BEFORE the @media(hover:none),(pointer:coarse) block below, not\n * after. Both rules have equal specificity (0,1,0), neither has !important,\n * and a media condition adds NO specificity \u2014 the cascade breaks the tie by\n * SOURCE ORDER alone. An earlier version of this fix placed this block\n * AFTER the media query (further down the file); on a coarse-pointer\n * device BOTH rules then matched, and being later in source, the\n * unconditional 24px rule silently WON over the 44px touch rule \u2014 the\n * exact bug this fix closes, reopened by fixing it in the wrong place.\n * Base 24px here, THEN the 44px touch override cascades last and wins on\n * touch. (cancelBtn also used to set min-width/min-height INLINE \u2014 higher\n * specificity than any class rule, touch or not; see attachment-picker.ts.) */\n.oxp-attachment-cancel {\n  min-width: 24px;\n  min-height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n}\n\n/* FYI fix (PR #88 re-review): .oxp-attachment-retry had no desktop floor at\n * all. Same source-order requirement as above; kept separate from cancel's\n * flex-centering since retry is a text pill with its own padding, not an\n * icon button. */\n.oxp-attachment-retry {\n  min-width: 24px;\n  min-height: 24px;\n}\n\n@media (hover: none), (pointer: coarse) {\n  /* P2 design-review fix (starthey demo, widget 0.8.0, 2026-07-14): the\n   * heart button measured 26x22px live despite the min-width/min-height:44px\n   * rules below \u2014 hover:none alone is not a reliable touch signal on every\n   * device (some touch/hybrid hardware and embedded webviews report\n   * hover:hover while still being pointer:coarse). Widened this SAME\n   * condition instead of adding a second block, so the 44px rules below\n   * apply whenever EITHER signals a non-precise pointer. */\n  .oxp-reaction-quick-bar-button {\n    min-width: 44px;\n    min-height: 44px;\n  }\n  /* M1 (carried into the heart-first redesign): the heart button is hidden\n   * by opacity:0 with only :hover reveal \u2014 invisible on touch without this.\n   * M3/M4: heart-btn and chips fail Apple HIG 44px on mobile.\n   * Merged into one declaration to avoid duplicate selector (prior had split opacity + size). */\n  .oxp-reaction-heart-btn { opacity: 1; min-height: 44px; min-width: 44px; }\n  .oxp-reaction-chip { min-height: 44px; }\n  /* W7: reply button visible + 44px touch target on mobile. */\n  .oxp-reply-btn { opacity: 1; min-height: 44px; min-width: 44px; }\n  /* #231: pin button visible + 44px touch target on mobile \u2014 mirrors heart-btn. */\n  .oxp-pin-btn { opacity: 1; min-height: 44px; min-width: 44px; }\n  /* #228: pinned banner nav/close buttons must meet 44px touch target on mobile. */\n  .oxp-pinned-banner-nav-btn,\n  .oxp-pinned-banner-close { min-height: 44px; min-width: 44px; }\n  /* DM1: cancel/retry buttons must meet Apple HIG 44px touch target on mobile. */\n  .oxp-attachment-cancel,\n  .oxp-attachment-retry { min-height: 44px; min-width: 44px; }\n}\n\n.oxp-reaction-quick-bar-button:hover,\n.oxp-reaction-quick-bar-button:focus {\n  background: var(--oxp-border);\n}\n\n.oxp-reaction-quick-bar-button:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* Own-emoji accent ring (review fix HIGH#3, 2026-07-14) \u2014 mirrors the heart\n * button's own-state pattern (:672). aria-pressed='true' is set by\n * reaction-quick-bar.ts#buildBar for the button matching ownEmoji. */\n.oxp-reaction-quick-bar-button[aria-pressed='true'] {\n  border-color: var(--oxp-accent);\n  box-shadow: 0 0 0 1px var(--oxp-accent);\n}\n\n/* \u2500\u2500 Reactions quick-bar MOTION (spec 2026-07-14) \u2500\u2500\n * Bar scale/fade in; each emoji button staggers in on top of that (6 fixed\n * REACTION_EMOJIS slots \u2014 nth-child delays need no JS). Stagger span (last\n * delay 75ms + each button's own 100ms) \u2248 175ms, within the ~120-180ms\n * budget. Select fires a burst/scale-pop on the chosen button before\n * ReactionQuickBar's own SELECT_DISMISS_DELAY_MS-timed removal. */\n@keyframes oxp-quickbar-in {\n  from { opacity: 0; transform: scale(0.85); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.oxp-reaction-quick-bar {\n  animation: oxp-quickbar-in 140ms ease-out;\n}\n\n@keyframes oxp-quickbar-button-in {\n  from { opacity: 0; transform: scale(0.5); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.oxp-reaction-quick-bar-button {\n  animation: oxp-quickbar-button-in 100ms ease-out backwards;\n}\n\n.oxp-reaction-quick-bar-button:nth-child(1) { animation-delay: 0ms; }\n.oxp-reaction-quick-bar-button:nth-child(2) { animation-delay: 15ms; }\n.oxp-reaction-quick-bar-button:nth-child(3) { animation-delay: 30ms; }\n.oxp-reaction-quick-bar-button:nth-child(4) { animation-delay: 45ms; }\n.oxp-reaction-quick-bar-button:nth-child(5) { animation-delay: 60ms; }\n.oxp-reaction-quick-bar-button:nth-child(6) { animation-delay: 75ms; }\n\n@keyframes oxp-quickbar-burst {\n  0%   { transform: scale(1); }\n  40%  { transform: scale(1.35); }\n  100% { transform: scale(1); }\n}\n\n.oxp-reaction-quick-bar-button--burst {\n  animation: oxp-quickbar-burst 160ms ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .oxp-reaction-quick-bar {\n    animation: none;\n  }\n  .oxp-reaction-quick-bar-button {\n    animation: none;\n  }\n  .oxp-reaction-quick-bar-button--burst {\n    animation: none;\n  }\n}\n\n/* B2: Inline error chip */\n.oxp-composer-error {\n  font-family: var(--oxp-font);\n  font-size: 0.85rem;\n  color: var(--oxp-danger);\n  padding: calc(var(--oxp-spacing-unit) * 0.5) var(--oxp-spacing-unit);\n  display: flex;\n  align-items: center;\n  gap: var(--oxp-spacing-unit);\n}\n\n/* \u2500\u2500 W2.2 slice 4: Attachment styles \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 */\n\n/* Paperclip button \u2014 40px desktop baseline, 44px mobile (1I) */\n.oxp-composer-attachment-btn {\n  font-family: var(--oxp-font);\n  min-width: 40px;\n  min-height: 40px;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--oxp-radius);\n  cursor: pointer;\n  font-size: 1.1rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 calc(var(--oxp-spacing-unit) * 0.5);\n  color: var(--oxp-fg-secondary);\n  flex-shrink: 0;\n}\n\n.oxp-composer-attachment-btn:hover {\n  background: var(--oxp-border);\n  color: var(--oxp-fg);\n}\n\n.oxp-composer-attachment-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n@media (hover: none) {\n  .oxp-composer-attachment-btn { min-width: 44px; min-height: 44px; }\n  .oxp-composer-mic-btn { min-width: 44px; min-height: 44px; }\n}\n\n/* Voice messages (P0): mic trigger, recording row, controls. */\n.oxp-composer-mic-btn {\n  font-family: var(--oxp-font);\n  min-width: 40px;\n  min-height: 40px;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--oxp-radius);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 calc(var(--oxp-spacing-unit) * 0.5);\n  color: var(--oxp-fg-secondary);\n  flex-shrink: 0;\n  /* Hold-to-record: swallow touch pan/scroll so slide-to-lock / slide-up-to-\n   * cancel pointermove events reach the gesture instead of scrolling the host. */\n  touch-action: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.oxp-composer-mic-btn:hover {\n  background: var(--oxp-border);\n  color: var(--oxp-fg);\n}\n\n.oxp-composer-mic-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* Burner-parity recording chip: pulsing dot + tabular timer + live waveform\n * + slide-hint (held) / lock-controls (locked), with a will-cancel red state. */\n.oxp-composer-recording {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.75);\n  min-height: 44px;\n  padding: calc(var(--oxp-spacing-unit) * 0.5) var(--oxp-spacing-unit);\n  background: color-mix(in srgb, var(--oxp-accent) 10%, transparent);\n  border-radius: var(--oxp-radius);\n  transition: background 160ms ease;\n}\n\n.oxp-recording-dot {\n  flex: 0 0 auto;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--oxp-danger);\n  animation: oxp-rec-pulse 1s ease-in-out infinite;\n}\n\n@keyframes oxp-rec-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.3; }\n}\n\n.oxp-recording-timer {\n  flex: 0 0 auto;\n  font-size: 0.9rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--oxp-fg);\n  min-width: 40px;\n}\n\n/* Live waveform \u2014 fills the chip; the backing store is sized per-DPR inside\n * renderStaticWaveform from the rendered CSS width, so this stays responsive. */\n.oxp-recording-wave {\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 28px;\n  align-self: center;\n}\n\n.oxp-recording-hint {\n  flex: 0 0 auto;\n  font-size: 0.72rem;\n  color: var(--oxp-fg-secondary);\n  letter-spacing: 0.01em;\n  white-space: nowrap;\n  transition: color 160ms ease;\n}\n\n/* Will-cancel (slide-up armed): red chip + red hint/timer. */\n.oxp-composer-recording.oxp-recording--will-cancel {\n  background: color-mix(in srgb, var(--oxp-danger) 14%, transparent);\n}\n.oxp-recording--will-cancel .oxp-recording-hint,\n.oxp-recording--will-cancel .oxp-recording-timer {\n  color: var(--oxp-danger);\n}\n\n/* Locked: brand-tinted, Stop/Cancel revealed. */\n.oxp-composer-recording.oxp-recording--locked {\n  background: color-mix(in srgb, var(--oxp-accent) 14%, transparent);\n}\n\n.oxp-recording-lock-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  flex: 0 0 auto;\n}\n\n.oxp-recording-lock-icon {\n  display: inline-flex;\n  color: var(--oxp-accent);\n}\n\n/* Stop finalizes \u2192 preview (primary action) \u2192 accent. Cancel (\u00D7) is the ghost\n * destructive control. Mirrors .oxp-voice-preview-send/-discard. */\n.oxp-recording-stop-btn {\n  width: 36px;\n  height: 36px;\n  background: var(--oxp-accent);\n  color: var(--oxp-on-accent);\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: opacity 160ms ease, transform 120ms ease;\n}\n\n.oxp-recording-stop-btn:hover { opacity: 0.92; }\n.oxp-recording-stop-btn:active { transform: scale(0.94); }\n\n.oxp-recording-stop-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n.oxp-recording-cancel-btn {\n  width: 36px;\n  height: 36px;\n  background: none;\n  border: none;\n  border-radius: 999px;\n  color: var(--oxp-fg-secondary);\n  cursor: pointer;\n  font-size: 1.2rem;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: color 160ms ease, background 160ms ease;\n}\n\n.oxp-recording-cancel-btn:hover {\n  color: var(--oxp-fg);\n  background: color-mix(in srgb, var(--oxp-fg) 8%, transparent);\n}\n\n.oxp-recording-cancel-btn:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .oxp-recording-dot { animation: none; }\n}\n\n@media (hover: none), (pointer: coarse) {\n  .oxp-recording-stop-btn,\n  .oxp-recording-cancel-btn { min-width: 44px; min-height: 44px; }\n}\n\n/* Voice pre-send preview (P0 follow-up): card above the input row,\n * reusing attachment-tray/card tokens. */\n.oxp-composer-voice-preview {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--oxp-spacing-unit);\n  padding: var(--oxp-spacing-unit);\n  background: var(--oxp-bg);\n  border: 1px solid var(--oxp-border);\n  border-radius: var(--oxp-radius);\n  flex-wrap: wrap;\n}\n\n/* Voice pre-send preview host \u2014 mirrors the retired .oxp-voice-preview-audio\n * (native <audio> is gone; the VoiceBubble shell lives inside this host). */\n.oxp-voice-preview-host {\n  flex: 1;\n  min-width: 120px;\n  display: block;\n}\n\n.oxp-voice-preview-send {\n  width: 40px;\n  height: 40px;\n  background: var(--oxp-accent);\n  color: var(--oxp-on-accent);\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.oxp-voice-preview-send:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.oxp-voice-preview-send:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n.oxp-voice-preview-discard {\n  width: 40px;\n  height: 40px;\n  background: none;\n  border: none;\n  color: var(--oxp-fg-secondary);\n  cursor: pointer;\n  font-size: 1.2rem;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.oxp-voice-preview-discard:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n@media (hover: none) {\n  .oxp-voice-preview-send,\n  .oxp-voice-preview-discard { min-width: 44px; min-height: 44px; }\n}\n\n/* \u2500\u2500 VoiceBubble (audio attachment playback shell) \u2500\u2500\n * Row layout: play button | waveform canvas | speed button | duration. */\n.oxp-voice-bubble {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--oxp-spacing-unit);\n  min-width: 0;\n}\n\n.oxp-voice-bubble-play {\n  width: 40px;\n  height: 40px;\n  background: var(--oxp-accent);\n  color: var(--oxp-on-accent);\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n  font-size: 1rem;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.oxp-voice-bubble-play:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.oxp-voice-bubble-play:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n.oxp-voice-bubble-speed {\n  width: 40px;\n  height: 40px;\n  background: none;\n  border: none;\n  color: var(--oxp-fg-secondary);\n  cursor: pointer;\n  font-size: 0.85rem;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.oxp-voice-bubble-speed:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* Responsive waveform canvas \u2014 CSS width fills the row, backing-store set\n * from clientWidth \u00D7 DPR in renderStaticWaveform (already DPR-aware).\n * max-width prevents overflow on very wide bubbles; the flex row caps it. */\n.oxp-voice-bubble-waveform {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  max-width: 220px;\n  height: 36px;\n  cursor: pointer;\n  border-radius: calc(var(--oxp-radius) * 0.25);\n  border: 1px solid var(--oxp-border);\n  box-sizing: border-box;\n}\n\n.oxp-voice-bubble-waveform:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n@media (pointer: coarse) {\n  .oxp-voice-bubble-play,\n  .oxp-voice-bubble-speed { min-width: 44px; min-height: 44px; }\n}\n\n/* Drag-over visual indicator \u2014 DM2: color-only outline fails WCAG 1.4.1.\n * Add ::after overlay with text label for non-color signal. */\n.oxp-composer-dragover {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: -2px;\n  border-radius: var(--oxp-radius);\n  position: relative;\n}\n\n.oxp-composer-dragover::after {\n  content: 'Drop files here';\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.70);\n  color: #ffffff;\n  font-family: var(--oxp-font);\n  font-size: 0.9rem;\n  font-weight: 600;\n  border-radius: var(--oxp-radius);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Staged attachment tray \u2014 DM3: position:absolute so it doesn't displace composer flex layout.\n * DB2: box-shadow 0 0 0 1px discrete ring (same pattern as reaction picker \u2014 F1 WCAG 1.4.11).\n *   Light: rgba(0,0,0,0.50) on #fff \u2192 rgb(128,128,128) \u2192 3.95:1 PASS.\n *   Dark:  rgba(255,255,255,0.50) on #1c1c1e \u2192 rgb(141,141,142) \u2192 4.39:1 PASS. */\n.oxp-attachment-queue {\n  font-family: var(--oxp-font);\n  background: var(--oxp-bg);\n  border: 1px solid var(--oxp-border);\n  border-radius: var(--oxp-radius);\n  padding: calc(var(--oxp-spacing-unit) * 0.5);\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n  max-height: 92px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.50),\n    0 4px 12px rgba(0, 0, 0, 0.25),\n    0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n:host([data-theme='dark']) .oxp-attachment-queue {\n  box-shadow:\n    0 0 0 1px rgba(255, 255, 255, 0.50),\n    0 4px 12px rgba(0, 0, 0, 0.60);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme='auto']) .oxp-attachment-queue,\n  :host(:not([data-theme])) .oxp-attachment-queue {\n    box-shadow:\n      0 0 0 1px rgba(255, 255, 255, 0.50),\n      0 4px 12px rgba(0, 0, 0, 0.60);\n  }\n}\n\n/* Per-file row */\n.oxp-attachment-item {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  font-size: 0.85rem;\n  color: var(--oxp-fg);\n}\n\n.oxp-attachment-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Progress bar \u2014 DB4: indeterminate animation (SDK has no real progress callback yet).\n * role=\"progressbar\" + aria-valuetext=\"Uploading\u2026\" set in JS (no aria-valuenow). */\n.oxp-attachment-progress {\n  position: relative;\n  overflow: hidden;\n  background: var(--oxp-border);\n  height: 4px;\n  border-radius: 2px;\n}\n\n.oxp-attachment-progress::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  width: 40%;\n  background: var(--oxp-accent);\n  animation: oxp-progress-indeterminate 1.4s ease-in-out infinite;\n}\n\n@keyframes oxp-progress-indeterminate {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(250%); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .oxp-attachment-progress::after {\n    animation: none;\n    opacity: 0.5;\n  }\n}\n\n.oxp-attachment-error {\n  color: var(--oxp-danger);\n  font-size: 0.8rem;\n  flex: 1;\n}\n\n.oxp-attachment-cancel,\n.oxp-attachment-retry {\n  font-family: var(--oxp-font);\n  font-size: 0.75rem;\n  background: none;\n  border: 1px solid var(--oxp-border);\n  border-radius: calc(var(--oxp-radius) * 0.5);\n  cursor: pointer;\n  padding: 2px 6px;\n  color: var(--oxp-fg-secondary);\n  flex-shrink: 0;\n}\n\n.oxp-attachment-cancel:hover,\n.oxp-attachment-retry:hover { background: var(--oxp-border); }\n\n.oxp-attachment-cancel:focus-visible,\n.oxp-attachment-retry:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n}\n\n/* Bubble attachment container */\n.oxp-bubble-attachments {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  margin-top: calc(var(--oxp-spacing-unit) * 0.5);\n}\n\n/* Inline image */\n.oxp-attachment-image img {\n  max-width: 300px;\n  max-height: 400px;\n  border-radius: var(--oxp-radius);\n  display: block;\n  object-fit: contain;\n}\n\n/* Audio */\n.oxp-attachment-audio audio { width: 100%; display: block; }\n\n.oxp-attachment-audio-duration {\n  font-size: 0.75rem;\n  color: var(--oxp-fg-secondary);\n  margin-top: 2px;\n}\n\n/* File download link \u2014 DB1: use --oxp-link (WCAG \u22654.5:1 on all bubble backgrounds).\n * Permanent underline (not hover-only) for WCAG 1.4.1 non-color link differentiation. */\n.oxp-attachment-file {\n  font-family: var(--oxp-font);\n  font-size: 0.9rem;\n  color: var(--oxp-link);\n  text-decoration: underline;\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n}\n\n.oxp-attachment-file:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Multi-image collage grid (staged attachment tray slice 2).\n * N=2: 1x1 side-by-side; N=3: 2x1 hero + two 1x1 tiles;\n * N=4: 2x2 3:2; N>=5: 2x2 3:2 with a blurred fourth tile + \"+N\" overlay. */\n.oxp-attachment-collage {\n  border-radius: var(--oxp-radius);\n  max-width: min(100%, 550px);\n  max-height: 400px;\n  overflow: hidden;\n}\n\n.oxp-attachment-collage-tile {\n  position: relative;\n  min-width: 0;\n  overflow: hidden;\n  display: flex;\n  /* Review fix (MEDIUM, PR #88): spec \u00A7B calls for \"radius var per tile\" \u2014\n   * only the outer .oxp-attachment-collage container had one. */\n  border-radius: var(--oxp-radius);\n}\n\n.oxp-attachment-collage-tile img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n/* Review fix (HIGH, PR #88): tile aspect-ratio now lives here (a real,\n * reactive CSS media query) instead of a one-time JS matchMedia() snapshot\n * baked into an inline style at row-build time in message-list.ts \u2014 an\n * inline value can't react to the widget iframe/container crossing this\n * breakpoint after the row already rendered, unlike every other responsive\n * rule in this file. */\n.oxp-attachment-collage-tile--square {\n  aspect-ratio: 1 / 1;\n}\n\n.oxp-attachment-collage-tile--wide {\n  aspect-ratio: 3 / 2;\n}\n\n@media (max-width: 640px) {\n  .oxp-attachment-collage-tile--wide {\n    aspect-ratio: 1 / 1;\n  }\n}\n\n.oxp-attachment-collage-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  font-size: 1.25rem;\n  font-weight: 600;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);\n  pointer-events: none;\n}\n\n/* \u2500\u2500 W2.2 slice 5: Reconnect banner \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 */\n\n/* Sticky banner above message list \u2014 z-index 5 sits above messages but below picker (10) */\n.oxp-reconnect-banner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: var(--oxp-spacing-unit);\n  padding: calc(var(--oxp-spacing-unit) * 0.75) var(--oxp-spacing-unit);\n  font-family: var(--oxp-font);\n  font-size: 0.85rem;\n  color: var(--oxp-fg);\n  box-sizing: border-box;\n  /* DM4 (design MAJOR): 4-side ring guarantees boundary regardless of host page bg.\n   * Prior patch used bottom-only shadow assuming host contrasts on other 3 sides \u2014 not guaranteed.\n   * Fix: restore full all-sides 0 0 0 1px ring.\n   * Light: rgba(0,0,0,0.50) \u2192 rgb(128,128,128) \u2192 3.95:1 PASS.\n   * Structural separator is now the ring alone (no redundant directional rule). */\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.50);\n}\n\n:host([data-theme='dark']) .oxp-reconnect-banner {\n  /* DM4: dark 4-side ring. rgba(255,255,255,0.50) \u2192 4.39:1 PASS */\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.50);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme='auto']) .oxp-reconnect-banner,\n  :host(:not([data-theme])) .oxp-reconnect-banner {\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.50);\n  }\n}\n\n/* Reconnecting state \u2014 accent-tinted background */\n.oxp-reconnect-banner[data-state='reconnecting'] {\n  background: color-mix(in srgb, var(--oxp-accent) 15%, var(--oxp-bg));\n}\n\n/* Auth-expired state \u2014 danger accent */\n.oxp-reconnect-banner[data-state='auth-expired'] {\n  background: color-mix(in srgb, var(--oxp-danger) 12%, var(--oxp-bg));\n  color: var(--oxp-fg);\n}\n\n/* Connected toast \u2014 green tint via --oxp-success token (Design M5) */\n.oxp-reconnect-banner[data-state='connected'] {\n  background: color-mix(in srgb, var(--oxp-success) 15%, var(--oxp-bg));\n}\n\n/* 1I: 40px desktop baseline for reconnect button */\n.oxp-reconnect-btn {\n  font-family: var(--oxp-font);\n  font-size: 0.85rem;\n  padding: calc(var(--oxp-spacing-unit) * 0.5) var(--oxp-spacing-unit);\n  min-height: 40px;\n  background: var(--oxp-accent);\n  color: var(--oxp-on-accent);\n  border: none;\n  border-radius: calc(var(--oxp-radius) * 0.5);\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.oxp-reconnect-btn:focus-visible {\n  /* Design B1 (WCAG 2.4.11 BLOCKER): button bg = --oxp-accent, plain outline invisible.\n   * Double-ring pattern: outline (inner) + box-shadow 4px outer ring using --oxp-fg.\n   * Same pattern as slice 3 .oxp-reaction-chip:focus-visible. */\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 4px var(--oxp-fg);\n}\n\n@media (hover: none) {\n  /* DM1: touch targets \u226544px on mobile */\n  .oxp-reconnect-btn { min-height: 44px; }\n}\n\n/* W9: product card inside message bubble */\n.oxp-bubble-product {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--oxp-spacing-unit) * 0.5);\n  margin-top: calc(var(--oxp-spacing-unit) * 0.5);\n  padding: var(--oxp-spacing-unit);\n  border: 1px solid var(--oxp-border);\n  border-radius: var(--oxp-radius);\n  background: var(--oxp-bg);\n  color: var(--oxp-fg);\n  max-width: 300px;\n  font-family: var(--oxp-font);\n}\n\n.oxp-product-image {\n  width: 100%;\n  height: auto;\n  max-height: 200px;\n  object-fit: contain;\n  border-radius: calc(var(--oxp-radius) * 0.5);\n}\n\n.oxp-product-title {\n  font-weight: 600;\n  font-size: 0.95rem;\n  line-height: 1.3;\n}\n\n.oxp-product-price {\n  font-size: 0.9rem;\n  /* design-empirical review of starthey.com/demo 2026-07-14: same latent\n   * --oxp-muted-on-tinted-bg contrast issue as .oxp-bubble-time above \u2014 the\n   * product card renders inside a message bubble (:1116). --oxp-fg-secondary\n   * is this file's designated on-bubble text token; see its doc comment at\n   * :40-44 / :95-98. */\n  color: var(--oxp-fg-secondary);\n}\n\n.oxp-product-link {\n  font-size: 0.85rem;\n  color: var(--oxp-link);\n  text-decoration: underline;\n  align-self: flex-start;\n}\n\n.oxp-product-link:focus-visible {\n  outline: 2px solid var(--oxp-accent);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n";
/** Resolve theme attribute → 'light' | 'dark' | 'auto'. */
/** @internal Not part of the package's public API surface; not re-exported from index.ts. Kept exported for cross-file use within the package. */
export declare function resolveTheme(themeAttr: string | null): 'light' | 'dark' | 'auto';
/** Apply data-theme to host element.
 *  M11: 'auto' writes data-theme='auto' and lets CSS @media handle live
 *  switching — no matchMedia snapshot, no listener leak.
 *  F8: delegates resolution to resolveTheme() (the canonical primitive) instead
 *  of duplicating the auto/light/dark branch inline. */
export declare function applyTheme(host: HTMLElement, themeAttr: string | null): void;
//# sourceMappingURL=theme.d.ts.map