.osx-chat {
  --chat-field: #f6f8fa;
  --chat-ink: #101828;
  --chat-muted: #667085;
  --chat-line: #e4e7ec;
  --chat-accent: #1d4ed8;
  --chat-accent-hover: #1b3fae;
  --chat-assistant: #eef3fe;
  --chat-assistant-line: #d7e2fb;
  --chat-mark-font: Georgia, serif;
  --chat-shadow-lift: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px rgba(16, 24, 40, 0.07);
  --chat-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chat-surface: #ffffff;
  --chat-head-surface: var(--chat-surface);
  --chat-head-ink: var(--chat-ink);
  --chat-head-muted: var(--chat-muted);
  --chat-button-fill: var(--chat-accent);
  --chat-button-hover: var(--chat-accent-hover);
  --chat-button-ink: #ffffff;
  --chat-button-border: var(--chat-accent);
  --chat-button-border-hover: var(--chat-accent-hover);
  --chat-link: var(--chat-accent);
  --chat-form-surface: var(--chat-surface);
  --chat-user-surface: var(--chat-field);
  --chat-user-ink: var(--chat-ink);
  --chat-mark-surface: var(--chat-button-fill);
  --chat-mark-ink: var(--chat-button-ink);
  --chat-body-font: "Albert Sans", -apple-system, "Segoe UI", sans-serif;
  --chat-title-font: var(--chat-body-font);
  --chat-status-font: var(--chat-body-font);
  --chat-control-font: var(--chat-body-font);
  --chat-title-size: 14px;
  --chat-title-weight: 600;
  --chat-panel-radius: 6px;
  --chat-bubble-radius: 6px;
  --chat-control-radius: 4px;
  --chat-mark-radius: 5px;
  --chat-launcher-radius: 50%;
  --chat-launcher-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 10px 28px rgba(29, 78, 216, 0.24);
  --chat-panel-shadow: var(--chat-shadow-lift), 0 24px 64px rgba(16, 24, 40, 0.14);
  color-scheme: light;
  color: var(--chat-ink);
  font-family: var(--chat-body-font);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
}
.osx-chat, .osx-chat *, .osx-chat *::before, .osx-chat *::after { box-sizing: border-box; }
.osx-chat[hidden] { display: none; }
.osx-chat button, .osx-chat input { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
.osx-chat svg { display: block; max-width: 100%; }
.osx-chat button:focus-visible, .osx-chat a:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 3px; }

/* ---------- assistant chat widget ---------- */
.osx-chat .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.osx-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10000;
}
.osx-chat-launcher {
  width: 56px;
  height: 56px;
  border-radius: var(--chat-launcher-radius);
  border: 1px solid var(--chat-button-border);
  background: var(--chat-button-fill);
  color: var(--chat-button-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--chat-launcher-shadow);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--chat-ease);
}
.osx-chat-launcher:hover {
  background: var(--chat-button-hover);
  border-color: var(--chat-button-border-hover);
  transform: translateY(-2px);
}
.osx-chat-launcher svg { width: 26px; height: 26px; }

.osx-chat-panel {
  position: absolute;
  right: 0;
  bottom: 70px; /* floats above the 56px launcher */
  width: min(390px, calc(100vw - 32px));
  height: min(540px, calc(100dvh - 118px));
  display: flex;
  flex-direction: column;
  background: var(--chat-surface);
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-panel-radius);
  box-shadow: var(--chat-panel-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s var(--chat-ease);
}
.osx-chat-panel[hidden] { display: none; }
.osx-chat.open .osx-chat-panel {
  opacity: 1;
  transform: none;
}
.osx-chat-conversation {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.osx-bubble a { color: var(--chat-link); text-decoration: underline; text-underline-offset: 3px; }
.osx-chat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 14px 16px;
  flex: none;
  background: var(--chat-head-surface);
  border-bottom: 1px solid var(--chat-line);
  color: var(--chat-ink);
}
.osx-chat-mark {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--chat-mark-radius);
  background: var(--chat-mark-surface);
  color: var(--chat-mark-ink);
  font-family: var(--chat-mark-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.osx-chat-mark[hidden] { display: none; }
.osx-chat-mark svg { width: 100%; height: 100%; }
.osx-chat-identity {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.osx-chat-title {
  overflow: hidden;
  color: var(--chat-head-ink);
  font-family: var(--chat-title-font);
  font-size: var(--chat-title-size);
  font-weight: var(--chat-title-weight);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osx-chat-status {
  overflow: hidden;
  color: var(--chat-head-muted);
  font-family: var(--chat-status-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osx-chat .osx-chat-close {
  margin-left: auto;
  background: none;
  border: none;
  border-radius: var(--chat-control-radius);
  color: var(--chat-head-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 7px;
}
.osx-chat-close:hover {
  background: var(--chat-field);
  color: var(--chat-ink);
}

.osx-chat-log {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--chat-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.osx-msg { display: flex; flex-direction: column; }
.osx-msg-user { align-items: flex-end; }
.osx-msg-assistant { align-items: flex-start; }
.osx-bubble {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: var(--chat-bubble-radius);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.osx-msg-user .osx-bubble {
  background: var(--chat-user-surface);
  border: 1px solid var(--chat-line);
  color: var(--chat-user-ink);
  border-bottom-right-radius: 2px;
}
.osx-msg-assistant .osx-bubble {
  background: var(--chat-assistant);
  border: 1px solid var(--chat-assistant-line);
  color: var(--chat-ink);
  border-bottom-left-radius: 2px;
}
.osx-msg-error .osx-bubble {
  max-width: 100%;
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
}

.osx-typing { display: flex; gap: 4px; align-items: center; }
.osx-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chat-muted);
  animation: osx-blink 1.2s infinite;
}
.osx-typing i:nth-child(2) { animation-delay: 0.2s; }
.osx-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes osx-blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.osx-chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
}
.osx-chat-starters[hidden] { display: none; }
.osx-starter {
  border: 1px solid var(--chat-assistant-line);
  border-radius: var(--chat-control-radius);
  background: var(--chat-assistant);
  color: var(--chat-link);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.osx-starter:hover {
  background: var(--chat-surface);
  border-color: var(--chat-accent);
}
.osx-chat .osx-starter { font-family: var(--chat-control-font); }

.osx-chat-form {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--chat-line);
  background: var(--chat-form-surface);
}
.osx-turnstile:not(:empty) { margin-bottom: 10px; }
.osx-chat-controls {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.osx-chat-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--chat-ink);
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-control-radius);
  background: var(--chat-field);
  padding: 10px 12px;
}
.osx-chat-form input::placeholder { color: var(--chat-muted); opacity: 1; }
.osx-chat-form input:focus {
  outline: none;
  border-color: var(--chat-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 12%, transparent);
}
.osx-chat-send {
  width: 44px;
  flex: none;
  border: none;
  border-radius: var(--chat-control-radius);
  background: var(--chat-button-fill);
  color: var(--chat-button-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.osx-chat-send:hover { background: var(--chat-button-hover); }
.osx-chat-send:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.osx-chat-send svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .osx-chat {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .osx-chat-panel {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(70px + max(14px, env(safe-area-inset-bottom)));
    width: auto;
    height: min(540px, calc(100dvh - 96px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .osx-chat *, .osx-chat *::before, .osx-chat *::after { animation: none; transition: none; }
}

.osx-turnstile {
  width: 100%;
}
.osx-chat-form.is-busy .osx-turnstile {
  opacity: 0.65;
  pointer-events: none;
}

/* Each support surface follows the design tokens of its published demo. */
.osx-chat[data-demo-support] {
  --chat-launcher-shadow: 0 8px 24px color-mix(in srgb, var(--chat-button-border) 24%, transparent);
  --chat-panel-shadow: 0 18px 56px color-mix(in srgb, var(--chat-ink) 18%, transparent);
}
.osx-chat[data-demo-support] .osx-chat-mark { width: 28px; height: 28px; }

/* Clearline: its white product cards, blue identity and dark primary controls. */
.osx-chat[data-demo-support="clearline"] {
  --chat-body-font: "Hanken Grotesk", sans-serif;
  --chat-title-font: "Bricolage Grotesque", sans-serif;
  --chat-status-font: "Geist Mono", monospace;
  --chat-ink: #0e1726;
  --chat-muted: #46556a;
  --chat-field: #f5f7fa;
  --chat-line: #e5e9f0;
  --chat-accent: #2563eb;
  --chat-accent-hover: #1d4ed8;
  --chat-assistant: #f5f7fa;
  --chat-assistant-line: #e5e9f0;
  --chat-button-fill: #0e1726;
  --chat-button-hover: #24334a;
  --chat-button-border: #0e1726;
  --chat-button-border-hover: #24334a;
  --chat-panel-radius: 12px;
  --chat-bubble-radius: 12px;
  --chat-control-radius: 8px;
  --chat-mark-surface: transparent;
  --chat-title-size: 16px;
  --chat-title-weight: 650;
}

/* Mentora: the evergreen learner account, Onest wordmark and pill controls. */
.osx-chat[data-demo-support="mentora"] {
  --chat-body-font: "Onest", sans-serif;
  --chat-title-font: "Onest", sans-serif;
  --chat-status-font: "Spline Sans Mono", monospace;
  --chat-ink: #121c19;
  --chat-muted: #46574f;
  --chat-field: #f4f7f5;
  --chat-line: #e1e8e5;
  --chat-accent: #0e7c70;
  --chat-accent-hover: #0a5f55;
  --chat-assistant: #f4f7f5;
  --chat-assistant-line: #e1e8e5;
  --chat-head-surface: #0e1f1a;
  --chat-head-ink: #ffffff;
  --chat-head-muted: #c3d2cb;
  --chat-user-surface: #0e7c70;
  --chat-user-ink: #ffffff;
  --chat-panel-radius: 14px;
  --chat-bubble-radius: 14px;
  --chat-control-radius: 999px;
  --chat-mark-surface: transparent;
  --chat-title-size: 16px;
  --chat-title-weight: 650;
}

/* Maître: the diner cream and copper palette with its restaurant console variant. */
.osx-chat[data-demo-support="maitre"] {
  --chat-body-font: "Hanken Grotesk", sans-serif;
  --chat-title-font: "Instrument Serif", serif;
  --chat-status-font: "Spline Sans Mono", monospace;
  --chat-surface: #fbf8f1;
  --chat-ink: #201913;
  --chat-muted: #59503f;
  --chat-field: #efe8da;
  --chat-line: rgba(32, 25, 19, .14);
  --chat-accent: #c2511f;
  --chat-accent-hover: #a03f12;
  --chat-link: #a03f12;
  --chat-assistant: #f5f0e6;
  --chat-assistant-line: rgba(32, 25, 19, .14);
  --chat-button-fill: #201913;
  --chat-button-hover: #59503f;
  --chat-button-border: #201913;
  --chat-button-border-hover: #59503f;
  --chat-button-ink: #fbf8f1;
  --chat-panel-radius: 18px;
  --chat-bubble-radius: 14px;
  --chat-control-radius: 999px;
  --chat-mark-surface: transparent;
  --chat-title-size: 22px;
  --chat-title-weight: 400;
}
.osx-chat[data-demo-support="maitre"] .osx-chat-mark {
  --ink: #201913;
  --paper: #f5f0e6;
  --copper: #c2511f;
}
body:has(.boh) .osx-chat[data-demo-support="maitre"] {
  color-scheme: dark;
  --chat-surface: #1d1712;
  --chat-head-surface: #14100c;
  --chat-ink: #f0e9dc;
  --chat-muted: #b5a996;
  --chat-field: #0e0b08;
  --chat-line: rgba(240, 233, 220, .14);
  --chat-accent: #e06a38;
  --chat-accent-hover: #ea8149;
  --chat-link: #ea8149;
  --chat-assistant: #14100c;
  --chat-assistant-line: rgba(240, 233, 220, .14);
  --chat-button-fill: #e06a38;
  --chat-button-hover: #ea8149;
  --chat-button-border: #e06a38;
  --chat-button-border-hover: #ea8149;
  --chat-button-ink: #14100c;
  --chat-panel-radius: 12px;
  --chat-panel-shadow: 0 18px 56px rgba(0, 0, 0, .5);
}
body:has(.boh) .osx-chat[data-demo-support="maitre"] .osx-chat-mark {
  --ink: #f0e9dc;
  --paper: #14100c;
  --copper: #e06a38;
}

/* Meridian: the Zephyr cream conversation shell. */
.osx-chat[data-demo-support="meridian-air"] {
  --chat-body-font: "Schibsted Grotesk", sans-serif;
  --chat-title-font: "Bricolage Grotesque", sans-serif;
  --chat-status-font: "Fragment Mono", monospace;
  --chat-surface: #faf8f2;
  --chat-head-surface: #f2efe6;
  --chat-form-surface: #f2efe6;
  --chat-ink: #16262f;
  --chat-muted: #4c5c64;
  --chat-field: #eae6d9;
  --chat-line: rgba(13, 31, 41, .09);
  --chat-assistant: #f2efe6;
  --chat-assistant-line: rgba(13, 31, 41, .09);
  --chat-link: #235f7f;
  --chat-button-fill: #0d1f29;
  --chat-button-hover: #253c47;
  --chat-button-border: #0d1f29;
  --chat-button-border-hover: #253c47;
  --chat-button-ink: #ecf2f3;
  --chat-user-surface: #0d1f29;
  --chat-user-ink: #ecf2f3;
  --chat-panel-radius: 18px;
  --chat-bubble-radius: 16px;
  --chat-control-radius: 999px;
  --chat-mark-surface: #0d1f29;
  --chat-mark-radius: 10px;
  --chat-title-size: 16px;
}
.osx-chat[data-demo-support="meridian-air"] {
  --chat-accent: #e4572e;
  --chat-accent-hover: #be4020;
}
.osx-chat[data-demo-support="meridian-air"] .osx-msg-user .osx-bubble { border-bottom-right-radius: 5px; }
.osx-chat[data-demo-support="meridian-air"] .osx-msg-assistant .osx-bubble { border-bottom-left-radius: 5px; }

/* Manifold: white enterprise surfaces, carbon ink and the volt primary control. */
.osx-chat[data-demo-support="manifold"] {
  --chat-body-font: "Manrope", sans-serif;
  --chat-title-font: "Manrope", sans-serif;
  --chat-status-font: "JetBrains Mono", monospace;
  --chat-surface: #ffffff;
  --chat-ink: #0a0f14;
  --chat-muted: #4a5462;
  --chat-field: #f5f7f9;
  --chat-line: #e1e6eb;
  --chat-accent: #3d5f00;
  --chat-accent-hover: #2d4700;
  --chat-link: #3d5f00;
  --chat-assistant: #f5f7f9;
  --chat-assistant-line: #e1e6eb;
  --chat-button-fill: #c5f03c;
  --chat-button-hover: #b3e021;
  --chat-button-border: #c5f03c;
  --chat-button-border-hover: #b3e021;
  --chat-button-ink: #0a0f14;
  --chat-user-surface: #0a0f14;
  --chat-user-ink: #ffffff;
  --chat-panel-radius: 18px;
  --chat-bubble-radius: 14px;
  --chat-control-radius: 10px;
  --chat-mark-surface: transparent;
  --chat-title-size: 16px;
  --chat-title-weight: 800;
}

/* TorqIQ: orange controls and condensed type on its navy operations chrome. */
.osx-chat[data-demo-support="torqiq"] {
  --chat-body-font: "Source Sans 3", sans-serif;
  --chat-title-font: "Oswald", sans-serif;
  --chat-control-font: "Oswald", sans-serif;
  --chat-ink: #18233a;
  --chat-muted: #4c5b74;
  --chat-field: #f8fafc;
  --chat-line: #e3e8ef;
  --chat-accent: #f26419;
  --chat-accent-hover: #d4530f;
  --chat-link: #1c5cab;
  --chat-assistant: #eaf2fc;
  --chat-assistant-line: #e3e8ef;
  --chat-head-surface: #122142;
  --chat-head-ink: #ffffff;
  --chat-head-muted: #c3d0e3;
  --chat-button-ink: #122142;
  --chat-panel-radius: 10px;
  --chat-bubble-radius: 10px;
  --chat-control-radius: 6px;
  --chat-launcher-radius: 10px;
  --chat-mark-surface: #f26419;
  --chat-mark-ink: #ffffff;
  --chat-title-size: 18px;
  --chat-title-weight: 600;
}

/* Lumina: gallery card rounding and its rouge storefront accent. */
.osx-chat[data-demo-support="lumina"] {
  --chat-body-font: "Hanken Grotesk", sans-serif;
  --chat-title-font: "Bricolage Grotesque", sans-serif;
  --chat-ink: #101014;
  --chat-muted: #4b4b52;
  --chat-field: #f0f0ee;
  --chat-line: rgba(16, 16, 20, .1);
  --chat-accent: #d82750;
  --chat-accent-hover: #b81940;
  --chat-link: #b81940;
  --chat-assistant: #fafafa;
  --chat-assistant-line: rgba(16, 16, 20, .1);
  --chat-panel-radius: 28px;
  --chat-bubble-radius: 20px;
  --chat-control-radius: 999px;
  --chat-title-size: 20px;
  --chat-title-weight: 800;
  --chat-panel-shadow: 0 20px 64px rgba(16, 16, 20, .14);
}

/* Evergreen Life: corporate navy, cobalt and Source Serif display type. */
.osx-chat[data-demo-support="evergreen-life"] {
  --chat-body-font: "Public Sans", sans-serif;
  --chat-title-font: "Source Serif 4", serif;
  --chat-ink: #0c1b2a;
  --chat-muted: #46586d;
  --chat-field: #f8fafd;
  --chat-line: rgba(12, 27, 42, .14);
  --chat-accent: #1250c4;
  --chat-accent-hover: #0c3a8e;
  --chat-assistant: #eef4fc;
  --chat-assistant-line: #dde9f8;
  --chat-head-surface: #0a1d33;
  --chat-head-ink: #ffffff;
  --chat-head-muted: #c7d6ea;
  --chat-panel-radius: 14px;
  --chat-bubble-radius: 12px;
  --chat-control-radius: 9px;
  --chat-mark-surface: transparent;
  --chat-title-size: 18px;
  --chat-title-weight: 600;
}

/* Bravura: compact clinical cards with the practice's petrol teal. */
.osx-chat[data-demo-support="bravura"] {
  --chat-body-font: "Hanken Grotesk", sans-serif;
  --chat-status-font: "IBM Plex Mono", monospace;
  --chat-ink: #16282e;
  --chat-muted: #4a626c;
  --chat-field: #f4f7f8;
  --chat-line: #dfe7e9;
  --chat-accent: #0d7377;
  --chat-accent-hover: #0a5a5e;
  --chat-assistant: #e3f1f1;
  --chat-assistant-line: #dfe7e9;
  --chat-panel-radius: 8px;
  --chat-bubble-radius: 8px;
  --chat-control-radius: 6px;
  --chat-launcher-radius: 8px;
  --chat-mark-radius: 6px;
  --chat-title-size: 17px;
  --chat-title-weight: 800;
  --chat-panel-shadow: 0 2px 5px rgba(22, 40, 46, .04), 0 16px 40px rgba(22, 40, 46, .15);
}

/* Sprike: its black console, cyan controls and square technical panels. */
.osx-chat[data-demo-support="sprike-hft"] {
  color-scheme: dark;
  --chat-body-font: "Instrument Sans", sans-serif;
  --chat-title-font: "Archivo", sans-serif;
  --chat-status-font: "Fragment Mono", monospace;
  --chat-control-font: "Fragment Mono", monospace;
  --chat-surface: #05070b;
  --chat-head-surface: #0b111a;
  --chat-ink: #e9eef3;
  --chat-muted: #a4afbe;
  --chat-field: #0b111a;
  --chat-line: #2a3442;
  --chat-accent: #3ce8da;
  --chat-accent-hover: #5ff0e4;
  --chat-assistant: #0b111a;
  --chat-assistant-line: #2a3442;
  --chat-button-ink: #041012;
  --chat-panel-radius: 0;
  --chat-bubble-radius: 0;
  --chat-control-radius: 0;
  --chat-launcher-radius: 0;
  --chat-title-size: 16px;
  --chat-panel-shadow: 0 18px 56px rgba(0, 0, 0, .5);
  --chat-launcher-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.osx-chat[data-demo-support="sprike-hft"] .osx-chat-title { letter-spacing: .04em; }
.osx-chat[data-demo-support="sprike-hft"] .osx-bubble { border-radius: 0; }
.osx-chat[data-demo-support="sprike-hft"] * { animation: none; transition: none; }

/* The Gilded Room: the casino's midnight panels and metallic gold controls. */
.osx-chat[data-demo-support="gilded-room"] {
  color-scheme: dark;
  --chat-body-font: "Jost", sans-serif;
  --chat-title-font: "Cinzel", serif;
  --chat-mark-font: "Cinzel", serif;
  --chat-surface: #10151a;
  --chat-head-surface: #080b0e;
  --chat-ink: #f1e8d4;
  --chat-muted: #b8ad93;
  --chat-field: #171e25;
  --chat-line: rgba(201, 164, 76, .22);
  --chat-accent: #c9a44c;
  --chat-accent-hover: #ecd28a;
  --chat-link: #ecd28a;
  --chat-assistant: #171e25;
  --chat-assistant-line: rgba(201, 164, 76, .22);
  --chat-button-fill: linear-gradient(180deg, #fff3cd, #c9a44c 55%, #96772e);
  --chat-button-hover: linear-gradient(180deg, #fff3cd, #ecd28a 55%, #c9a44c);
  --chat-button-ink: #080b0e;
  --chat-mark-surface: transparent;
  --chat-mark-ink: #ecd28a;
  --chat-panel-radius: 14px;
  --chat-bubble-radius: 9px;
  --chat-control-radius: 9px;
  --chat-title-size: 14px;
  --chat-panel-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.osx-chat[data-demo-support="gilded-room"] .osx-chat-panel { border-color: rgba(201, 164, 76, .45); }

/* Corbel: graphite site chrome, safety yellow controls and square construction details. */
.osx-chat[data-demo-support="corbel"] {
  --chat-body-font: "Mona Sans", sans-serif;
  --chat-title-font: "Mona Sans", sans-serif;
  --chat-ink: #16191d;
  --chat-muted: #535b64;
  --chat-field: #f2f3f4;
  --chat-line: #dfe2e5;
  --chat-accent: #16191d;
  --chat-accent-hover: #2c3238;
  --chat-assistant: #f2f3f4;
  --chat-assistant-line: #dfe2e5;
  --chat-head-surface: #16191d;
  --chat-head-ink: #ffffff;
  --chat-head-muted: #b9c0c7;
  --chat-button-fill: #f5b50a;
  --chat-button-hover: #e3a600;
  --chat-button-border: #f5b50a;
  --chat-button-border-hover: #e3a600;
  --chat-button-ink: #16191d;
  --chat-user-surface: #16191d;
  --chat-user-ink: #ffffff;
  --chat-mark-surface: transparent;
  --chat-panel-radius: 4px;
  --chat-bubble-radius: 4px;
  --chat-control-radius: 2px;
  --chat-launcher-radius: 4px;
  --chat-mark-radius: 3px;
  --chat-title-size: 16px;
  --chat-title-weight: 750;
}
.osx-chat[data-demo-support="corbel"] .osx-chat-title { font-stretch: 112%; }
.osx-chat[data-demo-support="corbel"] .osx-chat-close:hover { background: #2c3238; color: #ffffff; }

/* Sorrel Health: white clinical surfaces, Parkinsans titles and the clinic green. */
.osx-chat[data-demo-support="sorrel"] {
  --chat-body-font: "Atkinson Hyperlegible Next", sans-serif;
  --chat-title-font: "Parkinsans", sans-serif;
  --chat-ink: #13252f;
  --chat-muted: #4a5d67;
  --chat-field: #f3f7f5;
  --chat-line: #dce6e1;
  --chat-accent: #17734f;
  --chat-accent-hover: #105a3d;
  --chat-assistant: #eef6f1;
  --chat-assistant-line: #d6e8de;
  --chat-user-surface: #17734f;
  --chat-user-ink: #ffffff;
  --chat-mark-surface: transparent;
  --chat-panel-radius: 16px;
  --chat-bubble-radius: 14px;
  --chat-control-radius: 999px;
  --chat-mark-radius: 8px;
  --chat-title-size: 17px;
  --chat-title-weight: 600;
}

/* Marlow Studio: editorial Bodoni titles, plum controls and pill buttons. */
.osx-chat[data-demo-support="marlow"] {
  --chat-body-font: "Red Hat Text", sans-serif;
  --chat-title-font: "Bodoni Moda", serif;
  --chat-ink: #18121a;
  --chat-muted: #5a4f5c;
  --chat-field: #f8f4f6;
  --chat-line: #eadfe5;
  --chat-accent: #6a2459;
  --chat-accent-hover: #521b45;
  --chat-assistant: #f8f1f4;
  --chat-assistant-line: #eadfe5;
  --chat-user-surface: #6a2459;
  --chat-user-ink: #ffffff;
  --chat-mark-surface: transparent;
  --chat-panel-radius: 6px;
  --chat-bubble-radius: 6px;
  --chat-control-radius: 999px;
  --chat-title-size: 20px;
  --chat-title-weight: 500;
}