/* ---- materials.css (beebox/src/frontend/src/themes/) ---- */
/* Every surfaced card defines a complete material. Nested cards reset these
   variables; frameless embeds intentionally inherit their enclosing material.
   Selection colors are the exception: a theme without its own pair keeps the
   system theme's (chrome.css), so the base material leaves them unset. */
.bbx-card-theme {
  --bbx-paper: #fff;
  --bbx-ink: #302f2d;
  --bbx-ink-soft: #625e58;
  --bbx-pen: #455f87;
  --bbx-edge: #dedbd6;
  --bbx-underlay: #efede9;
  --bbx-font: ui-sans-serif, system-ui, sans-serif;
  --bbx-link-decoration: underline;
  --bbx-link-image: none;
  --bbx-quote-paper: transparent;
  --bbx-quote-layer-paper: #fff;
  --bbx-quote-sheet-display: none;
  --bbx-blockquote-sheet-display: none;
  --bbx-slip-angle: -0.25deg;
  --bbx-slip-grain: initial;
  /* The slip's light catch; dark papers set fainter ones. Reset here so a
     light card nested in a dark one gets its own. */
  --bbx-slip-light: #ffffff35;
  --bbx-slip-edge-light: #ffffffcc;
  --bbx-sheet-radius: 8px;
  --bbx-slip-overhang: 0px;
  --bbx-quote-shadow: none;
  --bbx-quote-edge: 0px;
  --bbx-quote-radius: 0 4px 4px 0;
  --bbx-quote-offset: 0px;
  --bbx-quote-padding-left: 0;
  --bbx-blockquote-paper: transparent;
  --bbx-blockquote-shadow: none;
  --bbx-blockquote-edge: 0px;
  --bbx-blockquote-padding: 0.5em 0;
  --bbx-content-padding: clamp(1rem, 3vw, 2rem);
  /* Prose furniture derives from the material, so every theme dresses it
     without restating it; a theme overrides one when the mix is wrong.
     Code stays a dark slab (the selection code pairs assume one), cut
     from the theme's own ink. */
  --bbx-bullet: var(--bbx-pen);
  --bbx-counter: var(--bbx-ink-soft);
  --bbx-rule: color-mix(in srgb, var(--bbx-ink) 18%, transparent);
  --bbx-rule-strong: color-mix(in srgb, var(--bbx-ink) 34%, transparent);
  --bbx-code-paper: color-mix(in srgb, var(--bbx-ink) 88%, #000);
  --bbx-code-ink: var(--bbx-paper);
  /* Light surfaces for in-card controls and panels (the Tailwind `card`
     role). Derived, because some themes' underlay is a saturated accent. */
  --bbx-tint: color-mix(in srgb, var(--bbx-ink) 7%, var(--bbx-paper));
  --bbx-sheet: color-mix(in srgb, var(--bbx-paper) 55%, #fff);
  color: var(--bbx-ink);
  font-family: var(--bbx-font);
}

/* Danger ink (the Tailwind `card-danger` role), for small error text. Each
   catalog theme sets its own red, at least 5:1 on its paper, sheet and tint.
   A theme without one gets the app's rose pulled toward its ink, which keeps
   most of the ink's contrast. Chat materials set ink too, so they derive it. */
:is(.bbx-card-theme, .bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
  --bbx-danger: color-mix(in oklab, #c2788a 50%, var(--bbx-ink, #2e2720));
}
@media print {
  /* Print is black on white for every theme, so one red serves; it outranks
     the themes' screen reds without restating each print block. */
  :is(.bbx-card-theme, .bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
    --bbx-danger: #9c1e3f !important;
  }
}

/* A card theme with its own selection pair drops the system theme's code
   pair, which was chosen for a different selection color. */
.bbx-card-theme:is([data-card-theme="paper"], [data-card-theme="post-it"]) {
  --bbx-selection-code: initial;
  --bbx-selection-code-ink: initial;
}

.bbx-card-theme[data-card-theme="paper"] {
  /* Sepia ink, inverted; parchment on dark code. */
  --bbx-selection: #6b5640;
  --bbx-selection-ink: #fbf6ea;
  --bbx-selection-code: #e8dcc4;
  --bbx-selection-code-ink: #2a2418;
  --bbx-sheet-radius: 12px;
  --bbx-slip-overhang: calc(var(--bbx-content-padding) + 0.625rem);
  --bbx-paper: #f5efe2;
  --bbx-ink: #332e27;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #4f4439;
  --bbx-pen: #2b4264;
  --bbx-edge: #d6c8af;
  --bbx-underlay: #e4dac9;
  --bbx-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --bbx-quote-paper: #fcf8ee;
  --bbx-quote-layer-paper: #fcf8ee;
  --bbx-blockquote-paper: #ffffff45;
  --bbx-link-decoration: none;
  --bbx-link-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='6' viewBox='0 0 128 6'%3E%3Cpath d='M0 4 Q19 2 39 3.7 T80 3.8 T128 3' stroke='%232b4264' stroke-width='1.25' fill='none'/%3E%3C/svg%3E");
}

.bbx-card-theme[data-card-theme="paper"][data-card-stock="manila"] {
  /* Blue pencil. */
  --bbx-selection: #2f5fa8;
  --bbx-selection-ink: #fffaf0;
  --bbx-selection-code: #9cc0f0;
  --bbx-selection-code-ink: #14202e;
  --bbx-pen: #263b59;
  --bbx-paper: #ecdbb1;
  --bbx-ink: #3d3221;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #473a29;
  --bbx-edge: #c9b58b;
  --bbx-quote-paper: #f8eacb;
  --bbx-quote-layer-paper: #f8eacb;
}
.bbx-card-theme[data-card-theme="paper"][data-card-stock="blue"] {
  /* Dusty rose. */
  --bbx-selection: #e3bcc4;
  --bbx-selection-ink: #2a1a20;
  --bbx-selection-code: initial;
  --bbx-selection-code-ink: initial;
  --bbx-paper: #e0e9ee;
  --bbx-ink: #263a44;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #34444e;
  --bbx-edge: #b6cbd5;
  --bbx-quote-paper: #f0f5f6;
  --bbx-quote-layer-paper: #f0f5f6;
}

.bbx-card-theme[data-card-theme="post-it"] {
  /* Pink highlighter on yellow. */
  --bbx-selection: #ff6fae;
  --bbx-selection-ink: #2b1a14;
  --bbx-sheet-radius: 2px 3px 9px 2px;
  --bbx-slip-overhang: calc(var(--bbx-content-padding) + 0.625rem);
  --bbx-paper: #faee9f;
  --bbx-ink: #36321b;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #625a30;
  --bbx-pen: #3c5169;
  --bbx-edge: #dacb73;
  --bbx-underlay: #e9dfa9;
  --bbx-font: "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif;
  --bbx-quote-paper: #fff8cf;
  --bbx-quote-layer-paper: #fff8cf;
  --bbx-slip-angle: 0.3deg;
  --bbx-blockquote-paper: #ffffff30;
}
.bbx-card-theme[data-card-theme="post-it"][data-card-stock="rose"] {
  /* Mint highlighter on rose. */
  --bbx-selection: #4fdbb4;
  --bbx-selection-ink: #16302a;
  --bbx-paper: #f6d1d0;
  --bbx-ink: #452d35;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #694a54;
  --bbx-edge: #d4a6ad;
  --bbx-quote-paper: #ffebea;
  --bbx-quote-layer-paper: #ffebea;
}
.bbx-card-theme[data-card-theme="post-it"][data-card-stock="mint"] {
  /* Orange highlighter on mint. */
  --bbx-selection: #ff9a3c;
  --bbx-selection-ink: #2a1a0c;
  --bbx-paper: #d7ebcd;
  --bbx-ink: #2c3d29;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #4a5e45;
  --bbx-edge: #adc4a4;
  --bbx-quote-paper: #edf6e7;
  --bbx-quote-layer-paper: #edf6e7;
}

/* Catalog-selected defaults set shape; the stock supplies the material. */
.bbx-card-theme[data-default-quote-treatment="inset"] {
  --bbx-quote-edge: 2px;
  --bbx-quote-radius: 0;
  --bbx-quote-padding-left: 1.1em;
}
.bbx-card-theme[data-default-quote-treatment="layered"] {
  --bbx-quote-sheet-display: block;
  --bbx-quote-paper: transparent;
  --bbx-quote-radius: 3px;
  --bbx-quote-offset: 3px;
  --bbx-quote-padding-left: 1.1em;
}
.bbx-card-theme[data-default-blockquote-treatment="inset"] {
  --bbx-blockquote-edge: 2px;
  --bbx-blockquote-padding: 0.5em 1em;
}
.bbx-card-theme[data-default-blockquote-treatment="layered"] {
  --bbx-blockquote-sheet-display: block;
  --bbx-blockquote-paper: transparent;
  --bbx-blockquote-padding: 0.9em 1.1em;
}

/* ---- card-themes.css (beebox/src/frontend/src/themes/) ---- */
.bbx-card-theme[data-card-theme="paper"] {
  --bbx-paper-vignette: radial-gradient(
    ellipse at 50% 35%,
    #fffaf000 50%,
    #6e553724 100%
  );
}
.bbx-card-surface {
  position: relative;
  isolation: isolate;
  min-width: 0;
  background: var(--bbx-paper);
  border: 1px solid var(--bbx-edge);
  border-radius: var(--bbx-sheet-radius);
}
.bbx-card-surface[data-card-theme="paper"] {
  border: 0;
  border-radius: var(--bbx-sheet-radius);
  box-shadow:
    0 1px 1px #3c2d191a,
    0 4px 10px #3c2d1924,
    0 14px 28px #3c2d1924,
    inset 0 0 0 1px #ffffff80,
    inset 0 0 22px #785f3c12;
}
:is(.bbx-card-surface, .bbx-interface-tab[data-active="true"])[data-card-theme="paper"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='pulp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pulp)' opacity='.18'/%3E%3C/svg%3E");
  background-size:
    240px 240px,
    700px 700px;
  opacity: 0.24;
  mix-blend-mode: multiply;
}
:is(.bbx-card-surface, .bbx-interface-tab[data-active="true"])[data-card-theme="paper"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--bbx-paper-vignette);
  mix-blend-mode: multiply;
}
.bbx-card-surface[data-card-theme="post-it"] {
  border: 0;
  border-radius: var(--bbx-sheet-radius);
  box-shadow:
    0 1px 1px #51492524,
    1px 5px 7px -4px #5149255c,
    4px 15px 18px -14px #5149258a,
    inset 0 1px 0 #ffffff55;
}
:is(.bbx-card-surface, .bbx-interface-tab[data-active="true"])[data-card-theme="post-it"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fibers'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fibers)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.1;
  mix-blend-mode: multiply;
}
:is(.bbx-card-surface, .bbx-interface-tab[data-active="true"])[data-card-theme="post-it"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      #ffffff20 0,
      transparent 13%,
      transparent 76%,
      #6c5b2212 100%
    ),
    radial-gradient(ellipse at 45% 28%, transparent 55%, #6c5b2210 100%);
  box-shadow: inset 0 0 0 1px #6a5b2310;
}
.bbx-card-surface[data-card-theme="paper"] > .bbx-card-heading,
.bbx-card-surface[data-card-theme="paper"] > .bbx-card-front,
.bbx-card-surface[data-card-theme="paper"] > .bbx-card-back,
.bbx-card-surface[data-card-theme="post-it"] > .bbx-card-heading,
.bbx-card-surface[data-card-theme="post-it"] > .bbx-card-front,
.bbx-card-surface[data-card-theme="post-it"] > .bbx-card-back {
  position: relative;
  z-index: 1;
}
.bbx-card-heading {
  padding: 1.15rem var(--bbx-content-padding) 0;
  padding-right: 4rem;
}
.bbx-card-surface[data-card-theme="paper"] > .bbx-card-heading {
  padding-top: 1.875rem;
}
.bbx-card-heading h2 {
  margin: 0;
  color: var(--bbx-ink);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.bbx-card-surface[data-card-theme="paper"] > .bbx-card-heading h2 {
  font-size: 1.6rem;
}
.bbx-card-front {
  min-width: 0;
}
/* The contents menu floats at the front's top right, below the header and so
   clear of the Properties corner, and sticks there while the card scrolls. */
.bbx-card-contents {
  position: sticky;
  top: 0.5rem;
  z-index: 3;
  float: right;
  margin: 0.5rem 1.25rem 0 0.5rem;
}
.bbx-card-contents button[aria-haspopup] {
  min-height: 0;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  gap: 0.3rem;
}
.bbx-card-contents-label {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.bbx-card-front [data-card-outline] :is(h1, h2, h3)[id] {
  scroll-margin-top: 3rem;
}
@media (max-width: 520px) {
  .bbx-card-contents-label {
    max-width: 8rem;
  }
}
/* At rest (not scrolling, not in use): icon only, faint. */
.bbx-card-contents {
  transition: opacity 0.25s ease;
}
.bbx-card-contents-label {
  transition: max-width 0.25s ease, margin 0.25s ease;
}
.bbx-card-contents[data-resting]:not(:hover, :focus-within, :has([aria-expanded="true"])) {
  opacity: 0.4;
}
.bbx-card-contents[data-resting]:not(:hover, :focus-within, :has([aria-expanded="true"])) .bbx-card-contents-label {
  max-width: 0;
  margin-left: -0.3rem;
}
@media (prefers-reduced-motion: reduce) {
  .bbx-card-contents,
  .bbx-card-contents-label {
    transition: none;
  }
}
.bbx-card-content {
  padding: var(--bbx-content-padding, 1rem);
  max-width: 54rem;
}
.bbx-card-view[data-view-layout="inset"] {
  padding: var(--bbx-content-padding, 1rem);
}
.bbx-card-front[data-card-mode="chat"] {
  max-height: 24rem;
  overflow: auto;
}
.bbx-card-back {
  padding: var(--bbx-content-padding);
  min-height: 15rem;
}
.bbx-card-back h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.bbx-card-back dl {
  display: grid;
  gap: 0.3rem 1rem;
  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  font-size: 0.875rem;
}
.bbx-card-back dt {
  color: var(--bbx-ink-soft);
}
.bbx-card-back dd {
  overflow-wrap: anywhere;
}
.bbx-card-properties {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  appearance: none;
  border: 0;
  border-radius: 0 8px 0 6px;
  background: linear-gradient(
    225deg,
    var(--bbx-underlay) 0 49%,
    var(--bbx-quote-layer-paper) 51% 100%
  );
  box-shadow: -2px 2px 3px #493c2825;
  color: var(--bbx-ink-soft);
  padding: 0;
}
.bbx-card-surface[data-card-theme="plain"] > .bbx-card-properties {
  box-shadow: none;
}
.bbx-card-properties:focus-visible,
.bbx-theme-link:focus-visible {
  outline: 2px solid var(--bbx-pen, #455f87);
  outline-offset: 3px;
}
.bbx-card-properties:hover {
  color: var(--bbx-ink);
}
.bbx-card-problem {
  border-left: 3px solid #a63d31;
  padding: 0.65rem 1rem;
  font:
    0.8rem/1.4 ui-sans-serif,
    system-ui,
    sans-serif;
  background: #fff4ee;
  color: #833127;
}
.bbx-theme-prose {
  --tw-prose-body: var(--bbx-ink, #6b5d4b);
  --tw-prose-headings: var(--bbx-ink, #302f2d);
  --tw-prose-bold: var(--bbx-ink, #302f2d);
  --tw-prose-links: var(--bbx-pen, #455f87);
  --tw-prose-quotes: var(--bbx-ink, #302f2d);
  --tw-prose-code: var(--bbx-ink, #302f2d);
  --tw-prose-quote-borders: var(--bbx-edge, #dedbd6);
  color: var(--bbx-ink, #6b5d4b);
}
/* A long unbroken token in a cell (inline code, a URL) would otherwise set the
   table's minimum width and push it past the card edge. `anywhere`, unlike
   `break-word`, lowers the token's min-content width, so the auto layout fits.
   Scoped to code and links: on every cell it lets the layout squeeze a short
   column (a date, a "Last tried" header) to a few characters. */
.bbx-theme-prose :where(td, th) :where(code, a) {
  overflow-wrap: anywhere;
}
.bbx-card-theme .bbx-theme-prose {
  --tw-prose-bullets: var(--bbx-bullet);
  --tw-prose-counters: var(--bbx-counter);
  --tw-prose-hr: var(--bbx-rule);
  --tw-prose-th-borders: var(--bbx-rule-strong);
  --tw-prose-td-borders: var(--bbx-rule);
  --tw-prose-captions: var(--bbx-ink-soft);
  --tw-prose-pre-bg: var(--bbx-code-paper);
  --tw-prose-pre-code: var(--bbx-code-ink);
}
.bbx-card-theme input[type="checkbox"] {
  accent-color: var(--bbx-pen);
}
.bbx-theme-link {
  color: var(--bbx-pen, #455f87);
  text-decoration-line: var(--bbx-link-decoration, underline);
  text-underline-offset: 3px;
  background-image: var(--bbx-link-image, none), var(--bbx-link-image, none);
  background-repeat: repeat-x, no-repeat;
  background-position:
    left bottom,
    left calc(100% + 2px);
  background-size:
    auto 6px,
    0% 6px;
  padding-bottom: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 180ms ease-out;
}
.bbx-theme-link:hover {
  background-size:
    auto 6px,
    100% 6px;
}
.bbx-quote-block {
  margin: 1.1em var(--bbx-quote-offset, 0px);
  padding: 0.85em 1.1em;
  padding-left: var(--bbx-quote-padding-left, 0);
  background: var(--bbx-quote-paper, #f5f4f1);
  border-left: var(--bbx-quote-edge, 3px) solid var(--bbx-pen, #455f87);
  border-radius: var(--bbx-quote-radius, 0 4px 4px 0);
  box-shadow: var(--bbx-quote-shadow, none);
  color: var(--bbx-ink, #302f2d);
}
.bbx-quote-block[data-treatment="layered"] {
  padding-left: 1.1em;
  background: var(--bbx-quote-layer-paper, #fff);
  border-left-width: 0;
  border-radius: 3px;
  box-shadow:
    0 1px 2px #352e2220,
    0 6px 12px #352e2218;
}
.bbx-quote-block[data-treatment="inset"] {
  padding-left: 1.1em;
  border-left-width: 2px;
  border-radius: 0;
  box-shadow: none;
}
.bbx-quote-block[data-treatment="plain"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
}
.bbx-quote-body {
  font-family: inherit;
  font-style: italic;
  color: inherit;
  border: 0;
  margin: 0;
  padding: 0;
}
.bbx-theme-prose .bbx-quote-body {
  border: 0;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
}
.bbx-quote-body::before,
.bbx-quote-body::after {
  content: none;
}
.bbx-quote-attribution {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  /* Small type on the quote's own paper: pull the soft ink toward the ink. */
  color: color-mix(in srgb, var(--bbx-ink-soft, #625e58) 60%, var(--bbx-ink, #302f2d));
  margin-top: 0.6em;
}
.bbx-quote-inline {
  font-style: italic;
}
.bbx-quote-inline .bbx-quote-attribution {
  display: inline;
  margin-left: 0.3em;
}
.bbx-quote-mark {
  color: var(--bbx-pen, #455f87);
  font-style: normal;
}
.bbx-blockquote {
  background: var(--bbx-blockquote-paper, transparent);
  box-shadow: var(--bbx-blockquote-shadow, none);
  padding: var(--bbx-blockquote-padding, 0.5em 1em);
  border-left: var(--bbx-blockquote-edge, 2px) solid var(--bbx-edge, #dedbd6);
}
@media (max-width: 520px) {
  .bbx-card-back dl {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .bbx-card-back dd {
    margin-bottom: 0.6rem;
  }
  .bbx-card-heading {
    padding-top: 1rem;
  }
  .bbx-card-surface[data-card-theme="paper"] > .bbx-card-heading {
    padding-top: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bbx-theme-link {
    transition: none;
  }
}
@media print {
  .bbx-card-surface {
    border: 0;
    box-shadow: none;
    background: transparent;
    color: #000;
  }
  .bbx-card-surface::before,
  .bbx-card-surface::after,
  .bbx-card-properties,
  .bbx-card-back {
    display: none;
  }
  .bbx-card-front[hidden] {
    display: block;
  }
  .bbx-card-front[data-card-mode="chat"] {
    max-height: none;
    overflow: visible;
  }
  .bbx-quote-block {
    box-shadow: none;
  }
  /* The Print control (lib/print-card.ts) marks one card and its ancestors;
     everything else on screen stays off the page. */
  html[data-print-scope="card"] body :not([data-print-path], [data-print-target], [data-print-target] *) {
    display: none !important;
  }
  /* The workspace around the card: no desk colour, and plain blocks, since
     its screen-height flex and grid boxes add a blank page after the card. */
  html[data-print-scope="card"] [data-print-path] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .bbx-card-print-footer {
    clear: both;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem var(--bbx-content-padding, 1rem) 0;
    padding-top: 0.5rem;
    border-top: 1px solid #999;
    font: 9pt/1.4 ui-sans-serif, system-ui, sans-serif;
    color: #333;
    break-inside: avoid;
  }
  /* Opt-in: the QR code and its hint print only from Print with "Add QR code". */
  .bbx-card-surface:not([data-print-qr]) :is(.bbx-card-print-qr, .bbx-card-print-hint) {
    display: none;
  }
  .bbx-card-print-qr svg {
    display: block;
    width: 0.9in;
    height: 0.9in;
  }
  .bbx-card-print-hint {
    color: #666;
  }
}
.bbx-theme-swatch-group {
  margin: 0.75rem 0 0.5rem;
  color: var(--bbx-ink-soft);
  font:
    600 0.7rem/1.3 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bbx-theme-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.75rem;
  max-width: 42rem;
}
.bbx-theme-swatch-button {
  padding: 0.45rem;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
/* Pressed and hover change the edge only: a light wash under the label would
   lift a dark back's paper past what its soft ink was chosen for. */
.bbx-theme-swatch-button[aria-pressed="true"] {
  border-color: var(--bbx-pen);
}
.bbx-theme-swatch-button:focus-visible {
  outline: 2px solid var(--bbx-pen);
  outline-offset: 2px;
}
.bbx-theme-swatch-button:not([aria-pressed="true"]):hover {
  border-color: var(--bbx-rule-strong);
}
.bbx-theme-swatch-button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.bbx-theme-swatch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  padding: 0.65rem;
  font-size: 0.7rem;
}
.bbx-theme-swatch-writing {
  font-weight: 600;
}
.bbx-theme-swatch .bbx-theme-link {
  align-self: flex-start;
}
.bbx-theme-swatch-label {
  display: flex;
  flex-direction: column;
  margin-top: 0.55rem;
  font:
    0.75rem/1.4 ui-sans-serif,
    system-ui,
    sans-serif;
}
.bbx-theme-swatch-label > span {
  color: var(--bbx-ink-soft);
  text-transform: capitalize;
}
@media print {
  [data-card-page-actions] {
    display: none;
  }
  .bbx-card-surface[data-card-theme],
  .bbx-quote-block[data-treatment] {
    box-shadow: none;
    background: transparent;
    border: 0;
  }
}
.bbx-card-fields {
  color: var(--bbx-ink, #4a3f32);
}
.bbx-card-field-label,
.bbx-quote-speakers {
  color: var(--bbx-ink-soft, #b8a890);
}

.bbx-card-surface[data-card-mode="companion"] {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.bbx-card-surface[data-card-mode="companion"] > .bbx-card-front {
  flex: 1;
  min-height: 0;
}
.bbx-card-heading {
  flex-shrink: 0;
}
.bbx-card-chat-path {
  min-width: 0;
  flex: 1;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--bbx-ink-soft);
}

.bbx-card-theme .bbx-theme-prose {
  font-size: inherit;
}

/* ---- quote-sheets.css (beebox/src/frontend/src/themes/) ---- */
/* A quote's words and attribution share a single slip. Only the paper behind
   them is a little askew: text stays crisp, selectable, and in normal flow. */
.bbx-quote-block,
.bbx-blockquote {
  position: relative;
  isolation: isolate;
  min-width: 0;
  --bbx-slip-reach: var(--bbx-slip-overhang, 0px);
}
.bbx-quote-block::before,
.bbx-blockquote::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--bbx-slip-reach)) 0 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid #6b573223;
  /* A light catch on the top edge and corner. Dark papers set a fainter
     one: white at these strengths greys a dark slip. */
  border-top-color: var(--bbx-slip-edge-light, #ffffffcc);
  border-radius: var(--bbx-sheet-radius, 8px);
  background-color: var(--bbx-quote-layer-paper, #fff);
  background-image:
    var(--bbx-slip-grain, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='fiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.1' filter='url(%23fiber)'/%3E%3C/svg%3E")),
    linear-gradient(175deg, var(--bbx-slip-light, #ffffff35), transparent 65%, #8467350c);
  background-size: 160px 160px, auto;
  transform: rotate(var(--bbx-slip-angle, -0.25deg));
  transform-origin: 45% 15%;
  box-shadow: 0 1px 1px #4e3d2529, 1px 4px 5px -2px #4e3d2540,
    2px 10px 14px -8px #4e3d2540;
}
.bbx-quote-block::before { display: var(--bbx-quote-sheet-display, none); }
.bbx-blockquote::before { display: var(--bbx-blockquote-sheet-display, none); }
.bbx-blockquote { margin: 1.3em 0.25rem; }
.bbx-quote-block[data-treatment="layered"] {
  background: transparent;
  box-shadow: none;
}
.bbx-quote-block[data-treatment="layered"]::before { display: block; }
.bbx-quote-block[data-treatment="inset"] {
  background: var(--bbx-quote-layer-paper, #f5f4f1);
}
.bbx-quote-block[data-treatment="inset"]::before,
.bbx-quote-block[data-treatment="plain"]::before { display: none; }
/* Para is a div so it can host card embeds. Keep its prose margins from
   making the little sheet's top and bottom appear uneven. */
.bbx-blockquote > :first-child,
.bbx-quote-body > :first-child { margin-top: 0; }
.bbx-blockquote > :last-child,
.bbx-quote-body > :last-child { margin-bottom: 0; }
/* Nested quotations stay on their enclosing slip instead of accumulating
   overhang beyond the card. Only decorative paper extends; text never does. */
.bbx-blockquote :is(.bbx-blockquote, .bbx-quote-block),
.bbx-quote-block :is(.bbx-blockquote, .bbx-quote-block) { --bbx-slip-reach: 0px; }
/* Compact chat cards scroll their front; keep the decoration inside that
   scrolling boundary instead of introducing a horizontal scrollbar. */
.bbx-card-front[data-card-mode="chat"] { --bbx-slip-overhang: 0px; }
@media (max-width: 520px) {
  .bbx-quote-block::before,
  .bbx-blockquote::before { transform: rotate(0.15deg); }
}
@media print {
  .bbx-quote-block::before,
  .bbx-quote-block[data-treatment]::before,
  .bbx-blockquote::before { display: none; }
  .bbx-blockquote { background: transparent; box-shadow: none; }
}

/* ---- card-turn.css (beebox/src/frontend/src/themes/) ---- */
/* The fold lifts on hover; clicking turns the whole sheet at its midpoint.
   Front content remains mounted and the control retains keyboard focus. */
.bbx-card-properties {
  transform-origin: top right;
  transition: transform 160ms ease-out;
}
/* The label hangs outside the fold, over whatever the heading paints, so it
   carries the card's paper and soft ink with it. */
.bbx-card-properties-label {
  position: absolute;
  pointer-events: none;
  color: var(--bbx-ink-soft);
  background: var(--bbx-paper);
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  font: 600 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bbx-card-surface[data-card-side="front"] .bbx-card-properties-label {
  top: calc(100% + 0.35rem);
  right: 0.25rem;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
}
.bbx-card-surface[data-card-side="back"] .bbx-card-properties-label {
  right: calc(100% + 0.75rem);
  top: 0;
  height: 44px;
  display: flex;
  align-items: center;
  pointer-events: auto;
  color: var(--bbx-ink);
  font-size: 0.72rem;
  font-weight: 400;
}
.bbx-card-surface[data-card-side="back"] > .bbx-card-heading {
  padding-top: 3.75rem;
}
.bbx-card-properties:hover,
.bbx-card-properties:focus-visible { transform: scale(1.12); }
.bbx-card-properties[aria-busy="true"] { transform: scale(1.2); }
.bbx-card-surface[data-card-turn] {
  transform-origin: center;
  backface-visibility: hidden;
}
.bbx-card-surface[data-card-turn="out"] {
  animation: bbx-card-turn-out 140ms ease-in both;
}
.bbx-card-surface[data-card-turn="in"] {
  animation: bbx-card-turn-in 180ms ease-out both;
}
@keyframes bbx-card-turn-out {
  from { transform: perspective(2000px) rotateY(0deg) scale(1); }
  to { transform: perspective(2000px) rotateY(-90deg) scale(.94); }
}
@keyframes bbx-card-turn-in {
  from { transform: perspective(2000px) rotateY(90deg) scale(.94); }
  to { transform: perspective(2000px) rotateY(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bbx-card-properties,
  .bbx-card-properties-label { transition: none; }
  .bbx-card-properties:hover,
  .bbx-card-properties:focus-visible,
  .bbx-card-properties[aria-busy="true"] { transform: none; }
  /* A preference change during a turn must still complete the state change. */
  .bbx-card-surface[data-card-turn] { animation-duration: 1ms; }
}
@media print {
  .bbx-card-surface[data-card-turn] { animation: none; transform: none; }
}

/* ---- question-beside.css (beebox/src/frontend/src/themes/) ---- */
/* A question beside the chat: the question pasted onto a stub card
   (docs/implemented-plans/questions-later-and-figure-it-out.md, Track A). The card keeps
   its paper, title, and folded corner for a few lines, then stops with a
   straight edge; the question sits on a rounded patch over it, and the
   pinned row's notch points at the chat (below, toward the composer, on the
   phone). Colors come from the card theme's tokens. */

.bbx-card-surface:has([data-question-beside]) {
  --bbx-question-stub: 6.5rem;
  background:
    linear-gradient(var(--bbx-edge), var(--bbx-edge)) left top / 1px var(--bbx-question-stub) no-repeat,
    linear-gradient(var(--bbx-edge), var(--bbx-edge)) right top / 1px var(--bbx-question-stub) no-repeat,
    linear-gradient(var(--bbx-edge), var(--bbx-edge)) left top / 100% 1px no-repeat,
    linear-gradient(var(--bbx-paper), var(--bbx-paper)) left top / 100% var(--bbx-question-stub) no-repeat;
  border-color: transparent;
  box-shadow: none;
}

/* A theme's full-sheet overlay (the paper vignette) is cut off with the paper. */
.bbx-card-surface:has([data-question-beside])::before {
  bottom: auto;
  height: var(--bbx-question-stub);
}

[data-question-beside] {
  --bbx-question-patch: color-mix(in srgb, var(--bbx-paper, #fff) 80%, #d9b26f);
  position: relative;
  background: var(--bbx-question-patch);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 2px 6px rgb(60 45 25 / 0.14);
}

[data-question-beside] h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 500;
  /* A path or ref in the question is one long word; it wraps inside the patch. */
  overflow-wrap: anywhere;
}

[data-question-beside] .bbx-question-choices {
  font-size: 1.125rem;
}

/* The row stays in view however long the question is; the patch's color
   paints over the text that scrolls under it. A sticky box stops at the
   scroller's padding, so the row sits that far below the stop and pads it back
   out: the text that would show in the desk's padding is under the row. */
[data-question-beside] .bbx-question-row {
  --bbx-question-row-tail: var(--bbx-card-desk-padding, 0px);
  position: sticky;
  bottom: calc(-1 * var(--bbx-question-row-tail));
  margin-bottom: calc(-1 * var(--bbx-question-row-tail));
  padding-bottom: var(--bbx-question-row-tail);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  background: var(--bbx-question-patch);
}

[data-question-beside] .bbx-question-row::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--bbx-question-row-tail) / 2);
  border: 14px solid transparent;
  transform: translateY(-50%);
}

[data-question-beside][data-chat-side="right"] .bbx-question-row::after {
  right: -34px;
  border-right: 0;
  border-left-color: var(--bbx-question-patch);
}

[data-question-beside][data-chat-side="left"] .bbx-question-row::after {
  left: -34px;
  border-left: 0;
  border-right-color: var(--bbx-question-patch);
}

[data-question-beside][data-chat-side="below"] .bbx-question-row::after {
  top: auto;
  bottom: calc(var(--bbx-question-row-tail) - 34px);
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 0;
  border-top-color: var(--bbx-question-patch);
}

/* ---- stock-textures.css (beebox/src/frontend/src/themes/) ---- */
/* Manila mixes short irregular fibers into the grain; other stocks keep their finish. */
.bbx-card-theme[data-card-theme="paper"][data-card-stock="manila"] {
  --bbx-slip-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.65%22%20numOctaves%3D%223%22%20seed%3D%2219%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Cg%20opacity%3D%220.3%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23grain%29%22%20opacity%3D%22.26%22%2F%3E%3Cpath%20d%3D%22M216.0%20250.0q2.6%200.9%205.8%200.4%20M126.4%20317.0q-0.7%20-1.8%20-2.4%20-3.2%20M84.5%2084.3q0.7%20-1.8%200.5%20-4.3%20M36.0%20104.9q1.5%201.3%203.8%201.8%20M65.7%2024.4q1.4%200.8%203.2%200.9%20M124.8%20233.8q3.6%20-1.0%206.8%20-4.0%20M33.4%20232.0q3.2%20-1.4%206.0%20-4.6%20M210.0%2096.5q-2.9%202.9%20-4.4%207.6%20M252.3%20303.4q1.4%200.9%203.4%201.0%20M233.1%20255.3q-0.9%20-2.0%20-3.1%20-3.6%20M199.9%2035.1q-3.2%20-1.0%20-7.2%20-0.3%20M145.6%20153.6q1.3%200.2%202.7%20-0.3%20M160.0%20118.6q-3.4%202.2%20-5.8%206.4%20M283.4%2079.4q0.8%20-0.5%201.4%20-1.4%20M37.9%20224.9q-0.9%20-1.6%20-2.7%20-2.7%20M91.7%20129.5q3.5%200.0%207.2%20-1.8%20M97.2%20216.0q0.0%20-1.0%20-0.5%20-2.1%20M219.2%20239.6q-0.9%20-0.8%20-2.3%20-1.0%20M161.8%20209.4q0.9%20-0.1%201.8%20-0.8%20M88.8%2028.9q0.7%20-1.3%200.7%20-3.0%20M149.6%2037.5q-2.7%201.5%20-4.7%204.5%20M218.1%2023.5q1.4%202.8%204.5%205.0%20M4.8%20123.6q-3.1%200.2%20-6.5%202.1%20M295.5%20182.0q-2.9%200.0%20-6.1%201.6%20M68.6%20162.9q-0.4%201.0%20-0.4%202.2%20M208.6%2068.5q1.4%200.6%203.3%200.5%20M239.5%2044.9q1.9%200.7%204.3%200.4%20M84.5%20281.5q-3.4%200.0%20-7.1%202.0%20M204.5%20217.3q1.8%200.5%204.0%200.1%20M137.6%20153.2q-0.8%200.7%20-1.4%201.8%20M50.8%20146.8q3.9%201.4%208.9%200.7%20M276.5%2084.3q2.2%20-1.2%203.9%20-3.7%20M104.5%20118.7q-1.8%201.6%20-2.8%204.4%20M308.8%2031.9q2.9%201.4%206.8%201.3%20M132.6%2014.9q1.4%20-1.7%201.8%20-4.2%20M118.0%20189.5q1.1%20-1.8%201.3%20-4.4%20M88.7%20310.8q-2.2%20-0.2%20-4.7%200.8%20M54.3%20211.8q-0.0%202.8%201.5%205.9%20M164.6%20278.1q-2.5%20-1.5%20-6.0%20-1.8%20M217.7%20195.8q-0.2%201.7%200.5%203.6%20M266.1%2089.6q0.7%20-1.2%200.7%20-2.8%20M188.3%20142.3q1.1%20-0.0%202.2%20-0.7%20M174.9%20184.9q-1.0%201.8%20-1.0%204.4%20M215.9%2083.7q-2.0%200.5%20-4.0%202.0%20M71.8%20143.4q1.4%201.4%203.6%202.1%20M253.3%2041.0q-1.2%20-0.9%20-3.0%20-1.3%20M41.8%20166.5q-2.6%200.2%20-5.2%201.8%20M145.2%20168.0q0.1%20-0.9%20-0.3%20-2.0%20M99.8%2079.0q3.5%20-0.9%206.8%20-3.9%20M45.1%20170.8q-0.2%20-1.4%20-1.2%20-2.7%20M194.1%2029.2q3.5%20-0.5%207.0%20-2.8%20M22.3%20215.0q-0.8%204.2%200.7%209.1%20M267.9%20298.8q1.8%200.3%203.9%20-0.3%20M236.2%20127.4q4.2%20-0.9%208.1%20-4.3%20M8.9%2032.1q-2.2%20-0.9%20-5.0%20-0.6%20M194.7%20316.3q-4.1%20-0.7%20-8.9%200.8%20M80.7%2059.0q-1.1%200.2%20-2.1%201.0%20M10.2%2024.9q-3.2%200.2%20-6.5%202.2%20M170.8%2021.9q-0.6%200.7%20-0.9%201.9%20M219.5%20100.1q1.9%20-3.9%201.8%20-9.1%20M48.9%20307.3q0.9%20-0.6%201.4%20-1.7%20M58.8%20204.2q0.7%20-2.5%200.1%20-5.5%20M200.4%2035.8q-2.0%203.9%20-1.9%209.1%20M68.0%20190.3q1.4%201.2%203.5%201.8%20M101.6%2068.4q-2.0%20-1.7%20-5.0%20-2.4%20M315.8%20251.0q1.0%201.3%202.9%202.1%20M57.9%2054.7q-0.1%202.2%201.0%204.6%20M23.9%20297.9q-0.5%20-1.7%20-1.9%20-3.2%20M156.1%20288.0q2.0%201.1%204.9%201.1%20M313.9%20168.6q-0.3%20-2.1%20-1.7%20-4.1%20M166.8%20201.4q-0.3%20-2.9%20-2.2%20-5.9%20M5.9%20307.1q-2.5%202.2%20-4.0%205.9%20M268.0%20136.5q-1.5%20-0.0%20-3.1%200.7%20M285.3%2022.8q3.0%200.8%206.6%200.0%20M9.7%20181.7q3.1%20-0.2%206.4%20-2.2%20M82.6%20282.1q1.4%20-2.9%201.3%20-6.8%20M247.9%20289.4q1.7%201.5%204.3%202.1%20M31.7%2043.9q-3.9%200.1%20-8.0%202.3%20M296.3%2049.0q3.1%20-1.4%205.6%20-4.5%20M70.0%20284.4q-0.9%20-0.8%20-2.2%20-1.2%20M112.4%2048.2q1.0%202.0%203.3%203.6%20M164.9%20293.1q-1.0%20-2.3%20-3.4%20-4.3%20M175.4%209.4q-1.0%20-3.0%20-3.7%20-5.8%20M156.0%20140.5q-2.0%20-3.6%20-6.2%20-6.4%20M91.2%20105.8q2.4%20-1.2%204.4%20-3.8%20M312.1%20294.7q1.0%204.1%204.4%207.9%20M253.5%20176.1q-0.4%20-1.5%20-1.7%20-2.9%20M61.9%20244.5q-2.9%20-1.5%20-6.8%20-1.5%20M94.3%2025.5q2.0%20-1.8%203.1%20-4.9%20M154.5%20118.9q2.3%20-0.0%204.7%20-1.4%20M250.6%2023.7q2.5%202.5%206.5%203.9%20M252.2%2051.4q-1.8%200.6%20-3.3%202.2%20M305.0%2088.3q1.6%20-1.5%202.4%20-4.0%20M105.7%20301.6q2.6%20-0.5%205.0%20-2.6%20M287.5%20202.7q1.5%203.9%205.3%207.2%20M141.7%2026.9q2.4%201.0%205.5%200.8%20M197.2%20269.7q1.8%201.2%204.4%201.4%20M262.5%20302.1q1.3%20-3.6%200.7%20-8.1%20M262.4%20214.8q1.6%201.1%204.0%201.4%20M252.8%20257.2q1.7%200.3%203.6%20-0.3%20M211.7%2056.2q-1.8%203.1%20-1.9%207.4%20M185.9%20304.0q0.9%20-1.8%200.8%20-4.1%20M309.1%20196.5q0.9%20-0.1%201.7%20-0.8%20M102.2%20263.6q-1.9%20-3.9%20-6.0%20-7.0%20M216.3%20272.3q1.3%20-0.1%202.5%20-0.9%20M12.5%20114.0q-0.0%202.9%201.6%206.0%20M88.6%20210.1q2.3%20-1.6%204.0%20-4.5%20M161.8%20255.3q3.6%20-0.9%206.8%20-3.8%20M252.6%20140.9q0.3%20-2.5%20-0.8%20-5.4%20M159.7%2020.1q3.3%20-2.0%205.7%20-6.0%20M115.6%20272.6q3.3%20-0.1%206.8%20-2.0%20M274.6%20190.8q1.3%20-3.7%200.7%20-8.4%20M250.0%20301.5q-0.7%202.2%20-0.3%204.9%20M309.7%20188.8q-2.0%20-2.9%20-5.9%20-4.9%20M38.1%20262.3q-1.2%20-3.4%20-4.4%20-6.3%20M252.5%2047.4q-3.8%200.7%20-7.5%203.6%20M170.0%2096.3q-3.0%201.9%20-5.1%205.6%20M51.3%20151.1q-1.0%203.0%20-0.5%206.8%20M6.6%20255.9q-2.0%202.3%20-2.9%205.9%20M42.8%20132.7q-2.8%201.1%20-5.3%204.0%20M132.8%20299.0q-2.6%200.7%20-5.0%203.0%20M310.6%2027.2q1.0%20-1.2%201.4%20-3.1%20M170.7%20227.4q2.2%20-1.9%203.6%20-5.2%20M57.8%20139.0q-0.4%20-4.4%20-3.2%20-8.8%20M58.3%20172.5q-0.8%201.3%20-0.9%203.1%20M152.9%2026.4q0.1%202.5%201.7%205.2%20M186.2%2073.5q-2.5%20-3.4%20-7.0%20-5.7%20M10.4%2079.0q3.6%201.6%208.5%201.4%20M209.7%20118.5q2.1%20-0.3%204.2%20-1.7%20M61.2%20189.8q-1.9%200.1%20-4.0%201.3%20M248.1%2061.7q-2.1%20-3.6%20-6.4%20-6.3%20M294.5%20143.1q3.5%201.6%208.1%201.4%20M136.7%20115.2q2.6%201.3%206.0%201.2%20M40.6%20153.5q-1.9%201.8%20-2.9%204.6%20M54.4%2063.1q1.0%20-0.5%201.9%20-1.6%20M133.9%20115.3q-1.1%200.2%20-2.2%201.1%20M18.9%20217.7q1.6%200.3%203.5%20-0.3%20M128.0%20161.7q0.0%20-1.2%20-0.5%20-2.5%20M31.2%20224.4q0.2%200.9%200.9%201.8%20M87.6%2035.9q-0.9%203.7%200.2%208.2%20M46.4%2082.2q2.1%20-2.8%202.7%20-7.0%20M237.3%20179.6q1.4%20-2.4%201.6%20-5.8%20M169.3%20278.9q1.1%200.2%202.5%20-0.3%20M156.7%206.5q-0.1%20-1.8%20-1.2%20-3.8%20M213.9%20217.5q3.0%20-0.9%205.6%20-3.5%20M254.8%20262.7q-2.7%20-1.8%20-6.8%20-2.3%20M61.9%20262.6q1.0%201.2%202.7%202.0%20M292.7%2099.5q2.1%20-1.3%203.6%20-3.7%20M175.7%20113.4q-1.6%200.1%20-3.2%201.0%20M121.6%20300.0q-1.0%20-2.2%20-3.2%20-4.0%22%20fill%3D%22none%22%20stroke%3D%22%236f5423%22%20stroke-width%3D%22.8%22%20stroke-opacity%3D%22.32%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
:is(.bbx-card-surface, .bbx-interface-tab[data-active="true"])[data-card-theme="paper"][data-card-stock="manila"]::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.65%22%20numOctaves%3D%223%22%20seed%3D%2219%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Cg%20opacity%3D%221%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23grain%29%22%20opacity%3D%22.26%22%2F%3E%3Cpath%20d%3D%22M216.0%20250.0q2.6%200.9%205.8%200.4%20M126.4%20317.0q-0.7%20-1.8%20-2.4%20-3.2%20M84.5%2084.3q0.7%20-1.8%200.5%20-4.3%20M36.0%20104.9q1.5%201.3%203.8%201.8%20M65.7%2024.4q1.4%200.8%203.2%200.9%20M124.8%20233.8q3.6%20-1.0%206.8%20-4.0%20M33.4%20232.0q3.2%20-1.4%206.0%20-4.6%20M210.0%2096.5q-2.9%202.9%20-4.4%207.6%20M252.3%20303.4q1.4%200.9%203.4%201.0%20M233.1%20255.3q-0.9%20-2.0%20-3.1%20-3.6%20M199.9%2035.1q-3.2%20-1.0%20-7.2%20-0.3%20M145.6%20153.6q1.3%200.2%202.7%20-0.3%20M160.0%20118.6q-3.4%202.2%20-5.8%206.4%20M283.4%2079.4q0.8%20-0.5%201.4%20-1.4%20M37.9%20224.9q-0.9%20-1.6%20-2.7%20-2.7%20M91.7%20129.5q3.5%200.0%207.2%20-1.8%20M97.2%20216.0q0.0%20-1.0%20-0.5%20-2.1%20M219.2%20239.6q-0.9%20-0.8%20-2.3%20-1.0%20M161.8%20209.4q0.9%20-0.1%201.8%20-0.8%20M88.8%2028.9q0.7%20-1.3%200.7%20-3.0%20M149.6%2037.5q-2.7%201.5%20-4.7%204.5%20M218.1%2023.5q1.4%202.8%204.5%205.0%20M4.8%20123.6q-3.1%200.2%20-6.5%202.1%20M295.5%20182.0q-2.9%200.0%20-6.1%201.6%20M68.6%20162.9q-0.4%201.0%20-0.4%202.2%20M208.6%2068.5q1.4%200.6%203.3%200.5%20M239.5%2044.9q1.9%200.7%204.3%200.4%20M84.5%20281.5q-3.4%200.0%20-7.1%202.0%20M204.5%20217.3q1.8%200.5%204.0%200.1%20M137.6%20153.2q-0.8%200.7%20-1.4%201.8%20M50.8%20146.8q3.9%201.4%208.9%200.7%20M276.5%2084.3q2.2%20-1.2%203.9%20-3.7%20M104.5%20118.7q-1.8%201.6%20-2.8%204.4%20M308.8%2031.9q2.9%201.4%206.8%201.3%20M132.6%2014.9q1.4%20-1.7%201.8%20-4.2%20M118.0%20189.5q1.1%20-1.8%201.3%20-4.4%20M88.7%20310.8q-2.2%20-0.2%20-4.7%200.8%20M54.3%20211.8q-0.0%202.8%201.5%205.9%20M164.6%20278.1q-2.5%20-1.5%20-6.0%20-1.8%20M217.7%20195.8q-0.2%201.7%200.5%203.6%20M266.1%2089.6q0.7%20-1.2%200.7%20-2.8%20M188.3%20142.3q1.1%20-0.0%202.2%20-0.7%20M174.9%20184.9q-1.0%201.8%20-1.0%204.4%20M215.9%2083.7q-2.0%200.5%20-4.0%202.0%20M71.8%20143.4q1.4%201.4%203.6%202.1%20M253.3%2041.0q-1.2%20-0.9%20-3.0%20-1.3%20M41.8%20166.5q-2.6%200.2%20-5.2%201.8%20M145.2%20168.0q0.1%20-0.9%20-0.3%20-2.0%20M99.8%2079.0q3.5%20-0.9%206.8%20-3.9%20M45.1%20170.8q-0.2%20-1.4%20-1.2%20-2.7%20M194.1%2029.2q3.5%20-0.5%207.0%20-2.8%20M22.3%20215.0q-0.8%204.2%200.7%209.1%20M267.9%20298.8q1.8%200.3%203.9%20-0.3%20M236.2%20127.4q4.2%20-0.9%208.1%20-4.3%20M8.9%2032.1q-2.2%20-0.9%20-5.0%20-0.6%20M194.7%20316.3q-4.1%20-0.7%20-8.9%200.8%20M80.7%2059.0q-1.1%200.2%20-2.1%201.0%20M10.2%2024.9q-3.2%200.2%20-6.5%202.2%20M170.8%2021.9q-0.6%200.7%20-0.9%201.9%20M219.5%20100.1q1.9%20-3.9%201.8%20-9.1%20M48.9%20307.3q0.9%20-0.6%201.4%20-1.7%20M58.8%20204.2q0.7%20-2.5%200.1%20-5.5%20M200.4%2035.8q-2.0%203.9%20-1.9%209.1%20M68.0%20190.3q1.4%201.2%203.5%201.8%20M101.6%2068.4q-2.0%20-1.7%20-5.0%20-2.4%20M315.8%20251.0q1.0%201.3%202.9%202.1%20M57.9%2054.7q-0.1%202.2%201.0%204.6%20M23.9%20297.9q-0.5%20-1.7%20-1.9%20-3.2%20M156.1%20288.0q2.0%201.1%204.9%201.1%20M313.9%20168.6q-0.3%20-2.1%20-1.7%20-4.1%20M166.8%20201.4q-0.3%20-2.9%20-2.2%20-5.9%20M5.9%20307.1q-2.5%202.2%20-4.0%205.9%20M268.0%20136.5q-1.5%20-0.0%20-3.1%200.7%20M285.3%2022.8q3.0%200.8%206.6%200.0%20M9.7%20181.7q3.1%20-0.2%206.4%20-2.2%20M82.6%20282.1q1.4%20-2.9%201.3%20-6.8%20M247.9%20289.4q1.7%201.5%204.3%202.1%20M31.7%2043.9q-3.9%200.1%20-8.0%202.3%20M296.3%2049.0q3.1%20-1.4%205.6%20-4.5%20M70.0%20284.4q-0.9%20-0.8%20-2.2%20-1.2%20M112.4%2048.2q1.0%202.0%203.3%203.6%20M164.9%20293.1q-1.0%20-2.3%20-3.4%20-4.3%20M175.4%209.4q-1.0%20-3.0%20-3.7%20-5.8%20M156.0%20140.5q-2.0%20-3.6%20-6.2%20-6.4%20M91.2%20105.8q2.4%20-1.2%204.4%20-3.8%20M312.1%20294.7q1.0%204.1%204.4%207.9%20M253.5%20176.1q-0.4%20-1.5%20-1.7%20-2.9%20M61.9%20244.5q-2.9%20-1.5%20-6.8%20-1.5%20M94.3%2025.5q2.0%20-1.8%203.1%20-4.9%20M154.5%20118.9q2.3%20-0.0%204.7%20-1.4%20M250.6%2023.7q2.5%202.5%206.5%203.9%20M252.2%2051.4q-1.8%200.6%20-3.3%202.2%20M305.0%2088.3q1.6%20-1.5%202.4%20-4.0%20M105.7%20301.6q2.6%20-0.5%205.0%20-2.6%20M287.5%20202.7q1.5%203.9%205.3%207.2%20M141.7%2026.9q2.4%201.0%205.5%200.8%20M197.2%20269.7q1.8%201.2%204.4%201.4%20M262.5%20302.1q1.3%20-3.6%200.7%20-8.1%20M262.4%20214.8q1.6%201.1%204.0%201.4%20M252.8%20257.2q1.7%200.3%203.6%20-0.3%20M211.7%2056.2q-1.8%203.1%20-1.9%207.4%20M185.9%20304.0q0.9%20-1.8%200.8%20-4.1%20M309.1%20196.5q0.9%20-0.1%201.7%20-0.8%20M102.2%20263.6q-1.9%20-3.9%20-6.0%20-7.0%20M216.3%20272.3q1.3%20-0.1%202.5%20-0.9%20M12.5%20114.0q-0.0%202.9%201.6%206.0%20M88.6%20210.1q2.3%20-1.6%204.0%20-4.5%20M161.8%20255.3q3.6%20-0.9%206.8%20-3.8%20M252.6%20140.9q0.3%20-2.5%20-0.8%20-5.4%20M159.7%2020.1q3.3%20-2.0%205.7%20-6.0%20M115.6%20272.6q3.3%20-0.1%206.8%20-2.0%20M274.6%20190.8q1.3%20-3.7%200.7%20-8.4%20M250.0%20301.5q-0.7%202.2%20-0.3%204.9%20M309.7%20188.8q-2.0%20-2.9%20-5.9%20-4.9%20M38.1%20262.3q-1.2%20-3.4%20-4.4%20-6.3%20M252.5%2047.4q-3.8%200.7%20-7.5%203.6%20M170.0%2096.3q-3.0%201.9%20-5.1%205.6%20M51.3%20151.1q-1.0%203.0%20-0.5%206.8%20M6.6%20255.9q-2.0%202.3%20-2.9%205.9%20M42.8%20132.7q-2.8%201.1%20-5.3%204.0%20M132.8%20299.0q-2.6%200.7%20-5.0%203.0%20M310.6%2027.2q1.0%20-1.2%201.4%20-3.1%20M170.7%20227.4q2.2%20-1.9%203.6%20-5.2%20M57.8%20139.0q-0.4%20-4.4%20-3.2%20-8.8%20M58.3%20172.5q-0.8%201.3%20-0.9%203.1%20M152.9%2026.4q0.1%202.5%201.7%205.2%20M186.2%2073.5q-2.5%20-3.4%20-7.0%20-5.7%20M10.4%2079.0q3.6%201.6%208.5%201.4%20M209.7%20118.5q2.1%20-0.3%204.2%20-1.7%20M61.2%20189.8q-1.9%200.1%20-4.0%201.3%20M248.1%2061.7q-2.1%20-3.6%20-6.4%20-6.3%20M294.5%20143.1q3.5%201.6%208.1%201.4%20M136.7%20115.2q2.6%201.3%206.0%201.2%20M40.6%20153.5q-1.9%201.8%20-2.9%204.6%20M54.4%2063.1q1.0%20-0.5%201.9%20-1.6%20M133.9%20115.3q-1.1%200.2%20-2.2%201.1%20M18.9%20217.7q1.6%200.3%203.5%20-0.3%20M128.0%20161.7q0.0%20-1.2%20-0.5%20-2.5%20M31.2%20224.4q0.2%200.9%200.9%201.8%20M87.6%2035.9q-0.9%203.7%200.2%208.2%20M46.4%2082.2q2.1%20-2.8%202.7%20-7.0%20M237.3%20179.6q1.4%20-2.4%201.6%20-5.8%20M169.3%20278.9q1.1%200.2%202.5%20-0.3%20M156.7%206.5q-0.1%20-1.8%20-1.2%20-3.8%20M213.9%20217.5q3.0%20-0.9%205.6%20-3.5%20M254.8%20262.7q-2.7%20-1.8%20-6.8%20-2.3%20M61.9%20262.6q1.0%201.2%202.7%202.0%20M292.7%2099.5q2.1%20-1.3%203.6%20-3.7%20M175.7%20113.4q-1.6%200.1%20-3.2%201.0%20M121.6%20300.0q-1.0%20-2.2%20-3.2%20-4.0%22%20fill%3D%22none%22%20stroke%3D%22%236f5423%22%20stroke-width%3D%22.8%22%20stroke-opacity%3D%22.32%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 320px 320px;
  opacity: .45;
}

/* ---- letter-set.css (beebox/src/frontend/src/themes/) ---- */
/* Letter set: pastel stationery with a stitched border, rounded type, and a
   few hearts in the corner. It pairs with the Candy system theme. */
.bbx-card-theme[data-card-theme="letter-set"] {
  --bbx-sheet-radius: 18px;
  --bbx-slip-overhang: 0px;
  --bbx-slip-angle: -0.6deg;
  --bbx-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Varela Round", ui-sans-serif, system-ui, sans-serif;
  --bbx-paper: #fff8fa;
  --bbx-ink: #4a2234;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #7a4a5e;
  --bbx-pen: #c2185b;
  --bbx-edge: #f6c3d3;
  --bbx-underlay: #fbe3ea;
  --bbx-quote-paper: #fff;
  --bbx-quote-layer-paper: #fff;
  --bbx-blockquote-paper: #ffffff80;
  --bbx-letter-stitch: #f28fb0;
  --bbx-letter-heart: #e3264a;
  --bbx-selection: #ffb3cb;
  --bbx-selection-ink: #3a1626;
  --bbx-selection-code: initial;
  --bbx-selection-code-ink: initial;
}
.bbx-card-theme[data-card-theme="letter-set"][data-card-stock="lemon"] {
  --bbx-paper: #fff8d6;
  --bbx-ink: #43381a;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #6e5e2e;
  --bbx-pen: #2d6fa8;
  --bbx-edge: #ecd98a;
  --bbx-underlay: #f6eab0;
  --bbx-quote-paper: #fffdf0;
  --bbx-quote-layer-paper: #fffdf0;
  --bbx-letter-stitch: #7cb8e6;
  --bbx-letter-heart: #4a9bd8;
  --bbx-selection: #9fd3f5;
  --bbx-selection-ink: #14304a;
}
.bbx-card-theme[data-card-theme="letter-set"][data-card-stock="sky"] {
  --bbx-paper: #eaf5fc;
  --bbx-ink: #20384a;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #4a6276;
  --bbx-edge: #b9dcf0;
  --bbx-underlay: #d6ebf7;
  --bbx-quote-paper: #f7fbfe;
  --bbx-quote-layer-paper: #f7fbfe;
  --bbx-selection: #ffc4d6;
  --bbx-selection-ink: #3a1626;
}
.bbx-card-surface[data-card-theme="letter-set"] {
  border: 0;
  box-shadow: 0 2px 0 var(--bbx-edge), 0 6px 16px #8a3a5a1f;
}
.bbx-card-surface[data-card-theme="letter-set"]::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 2px dashed var(--bbx-letter-stitch);
  border-radius: calc(var(--bbx-sheet-radius) - 6px);
  pointer-events: none;
}
.bbx-card-surface[data-card-theme="letter-set"]::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 64px;
  height: 44px;
  z-index: 0;
  pointer-events: none;
  background: var(--bbx-letter-heart);
  opacity: 0.85;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 38'%3E%3Cpath id='h' d='M12 21s-7-4.4-9.5-8.6C.8 9.3 2.6 5 6.5 5c2.1 0 3.6 1.2 5.5 3.2C13.9 6.2 15.4 5 17.5 5c3.9 0 5.7 4.3 4 7.4C19 16.6 12 21 12 21z'/%3E%3Cuse href='%23h' transform='translate(28 10) scale(1.1) rotate(14 12 12)'/%3E%3Cuse href='%23h' transform='translate(20 -3) scale(.45) rotate(-10 12 12)' opacity='.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bbx-card-surface[data-card-theme="letter-set"] > :is(.bbx-card-heading, .bbx-card-front, .bbx-card-back) {
  position: relative;
  z-index: 1;
}
/* The back keeps card-turn.css's taller top, which clears the "Back to card" label. */
.bbx-card-surface[data-card-theme="letter-set"]:not([data-card-side="back"]) > .bbx-card-heading {
  padding-top: 1.6rem;
}
.bbx-card-surface[data-card-theme="letter-set"] > .bbx-card-heading :is(h1, h2) {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bbx-card-theme[data-card-theme="letter-set"] .bbx-theme-link {
  text-decoration-style: wavy;
  text-decoration-color: var(--bbx-letter-stitch);
  text-decoration-thickness: 1.5px;
}
.bbx-card-surface[data-card-theme="letter-set"] > .bbx-card-properties {
  border-radius: 0 18px 0 12px;
}
.bbx-card-surface[data-card-theme="letter-set"].bbx-theme-swatch::after {
  right: 8px;
  bottom: 6px;
  width: 30px;
  height: 21px;
}

/* ---- chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Card preview framing and optional box-scoped chrome. */
/* Selection colors are optional theme tokens, set in pairs: a rule that sets
   a background sets its ink (test/tours/selection-pairs.test.ts). A card
   theme's pair overrides the system theme's through the cascade; with
   neither, the fallback here applies. A theme whose selection is dark adds a
   code pair that stays visible on dark code blocks. A background without an
   ink gets black or white by its relative luminance: below 0.1791, where
   both read equally (4.58:1), white reads better. The theme studio previews
   selection with the same declarations under ::highlight(), kept in separate
   rules so a browser without ::highlight() keeps ::selection. */
::selection {
  background-color: var(--bbx-selection, #bcd4f6);
  color: var(--bbx-selection-ink, color(from var(--bbx-selection, #bcd4f6) srgb-linear clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)));
}
:is(pre, pre *)::selection {
  background-color: var(--bbx-selection-code, var(--bbx-selection, #bcd4f6));
  color: var(--bbx-selection-code-ink, var(--bbx-selection-ink, color(from var(--bbx-selection-code, var(--bbx-selection, #bcd4f6)) srgb-linear clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1))));
}
::highlight(bbx-selection-preview) {
  background-color: var(--bbx-selection, #bcd4f6);
  color: var(--bbx-selection-ink, color(from var(--bbx-selection, #bcd4f6) srgb-linear clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)));
}
:is(pre, pre *)::highlight(bbx-selection-preview) {
  background-color: var(--bbx-selection-code, var(--bbx-selection, #bcd4f6));
  color: var(--bbx-selection-code-ink, var(--bbx-selection-ink, color(from var(--bbx-selection-code, var(--bbx-selection, #bcd4f6)) srgb-linear clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1) clamp(0, sign(0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1))));
}
/* Chrome owns the common desk and its saturated material palette. */
.bbx-box-presentation {
  /* Reset per presentation so a nested preview never inherits the page's
     theme tokens. */
  --bbx-desk-pattern: none;
  --bbx-selection: initial;
  --bbx-selection-ink: initial;
  --bbx-selection-code: initial;
  --bbx-selection-code-ink: initial;
  --bbx-desk-background: #e4e0d9;
  background: var(--bbx-desk-pattern, none), var(--bbx-desk-background);
}
.bbx-box-presentation[data-chrome-theme="paper"] {
  --bbx-desk-background: #e4e0d9;
  /* Sepia ink, inverted; parchment on dark code. */
  --bbx-selection: #6b5640;
  --bbx-selection-ink: #fbf6ea;
  --bbx-selection-code: #e8dcc4;
  --bbx-selection-code-ink: #2a2418;
  --bbx-bar-paper: #43536e;
  --bbx-bar-edge: #2d394d;
}
.bbx-box-presentation[data-chrome-theme="paper"][data-chrome-stock="manila"] {
  /* Blue pencil. */
  --bbx-selection: #2f5fa8;
  --bbx-selection-ink: #fffaf0;
  --bbx-selection-code: #9cc0f0;
  --bbx-selection-code-ink: #14202e;
  --bbx-bar-paper: #8b3f2c;
  --bbx-bar-edge: #602819;
}
.bbx-box-presentation[data-chrome-theme="paper"][data-chrome-stock="blue"] {
  /* Dusty rose. */
  --bbx-selection: #e3bcc4;
  --bbx-selection-ink: #2a1a20;
  --bbx-selection-code: initial;
  --bbx-selection-code-ink: initial;
  --bbx-bar-paper: #304c79;
  --bbx-bar-edge: #1d3355;
}
/* Flat is deliberately quiet: one solid ink surface and no raised/paper
   treatment. The old default gradient remains available as Spectrum. */
.bbx-box-presentation[data-chrome-theme="plain"] {
  --bbx-desk-background: #e4e1db;
  --bbx-flat-bar: #27364d;
  /* Inverted into the bar's ink. */
  --bbx-selection: #27364d;
  --bbx-selection-ink: #f6f3ec;
  --bbx-selection-code: #f6f3ec;
  --bbx-selection-code-ink: #27364d;
}
.bbx-box-presentation[data-chrome-theme="plain"] .bbx-app-nav {
  background: var(--bbx-flat-bar);
  background-image: none;
}
.bbx-box-presentation[data-chrome-theme="plain"] .bbx-composer-material {
  background: #ece8e0;
  border-color: #d5cec3;
  box-shadow: none;
}
/* Spectrum keeps the familiar colorful bar, but gives it an explicit theme
   identity so Flat can remain genuinely flat. */
.bbx-box-presentation[data-chrome-theme="spectrum"] {
  --bbx-selection: #c2187a;
  --bbx-selection-ink: #fff;
}
.bbx-box-presentation[data-chrome-theme="spectrum"] .bbx-app-nav {
  background-image: linear-gradient(to right, #5e5490, #6a4870, #6e432e);
}
/* One textured bar surface, with raised controls on top. */
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-system-control {
  background: linear-gradient(165deg, #ffffff20, #00000012), var(--bbx-bar-paper);
  color: #fff8ec;
  border: 1px solid #ffffff70;
  box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #00000030,
    0 2px 1px var(--bbx-bar-edge), 0 4px 6px #182c2840;
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-system-control:active {
  box-shadow: inset 0 1px 2px #00000025, 0 1px 0 var(--bbx-bar-edge);
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-app-nav {
  position: relative;
  /* Keep the lower shadow above both static cards and positioned chat panes. */
  z-index: 1;
  isolation: isolate;
  background: transparent;
  color: #fff8ec;
  box-shadow: none;
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-app-nav > div {
  position: relative;
  isolation: isolate;
  background: var(--bbx-bar-paper);
  border-radius: 0 0 12px 3px;
  box-shadow: inset 0 1px 0 #ffffff50, inset 0 -1px 0 #ffffff45,
    inset 0 -7px 12px -9px #000, 0 3px 5px #182c2855;
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-app-nav > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='140'%3E%3Cfilter id='pulp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .07' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pulp)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 600px 140px;
  background-blend-mode: soft-light;
  mix-blend-mode: soft-light;
  opacity: .3;
}
/* Keep the familiar capsule/circle outlines. A bright rim and contact shadow
   lift each control off the sheet without affecting its portaled menu. */
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-app-nav :is(
  .bbx-place-pill, #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo
) {
  border-radius: 9999px;
  /* Light enough to lift off the bar, dark enough for white labels. */
  background-color: color-mix(in srgb, var(--bbx-bar-paper) 93%, white);
  box-shadow: inset 0 1px 0 #ffffff70, inset 0 -1px 0 #00000030,
    0 2px 0 var(--bbx-bar-edge), 0 4px 5px #00000035;
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-place-pill {
  border-color: #ffffff60;
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-app-nav :is(
  #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo
):active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px #00000025, 0 1px 0 var(--bbx-bar-edge);
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-app-nav :is(
  #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo
):focus-visible {
  outline: 2px solid #fff8ec;
  outline-offset: 3px;
}
/* A light plate inside a chat material (raw tool input and result, debug
   text) keeps the app palette in every theme: it resets the material tokens
   the theme set on the chat material, and its bare text takes the base ink.
   Zero specificity, so a utility color on the plate still wins. */
/* A meta line ("Show earlier messages") without a paper of its own sits on
   the desk, where the app's plum misses AA; its pen is the darker plum. A
   theme that sets chat material tokens sets its own. */
:where(.bbx-chat-meta-material) {
  --bbx-pen: #7b4f8a;
}
:where(.bbx-chat-plate) {
  --bbx-ink: initial;
  --bbx-ink-soft: initial;
  --bbx-pen: initial;
  color: #302f2d;
}
.bbx-box-presentation .bbx-conversation-desk {
  background: var(--bbx-desk-pattern, none), var(--bbx-desk-background);
}
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-composer-material {
  background: #f7f1e6;
  border: 1px solid #dbcfb9;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 12px #56482c12;
}
@media print {
  .bbx-box-presentation[data-chrome-theme] .bbx-conversation-desk { background: #fff; }
  .bbx-composer-material { display: none; }
}

/* ---- candy.css (beebox/src/frontend/src/themes/) ---- */
/* Candy: a strawberry-pink system theme with polka dots and rounded,
   candy-button controls. It pairs with the Letter set card theme without
   repeating it: the chrome is saturated pink, the cards are pastel paper. */
.bbx-box-presentation[data-chrome-theme="candy"] {
  --bbx-candy-bar: #d6336c;
  --bbx-candy-bar-edge: #a8204f;
  --bbx-candy-dots: radial-gradient(circle, #ffffff38 0 2.5px, transparent 3px);
  --bbx-desk-background: #fbe6ee;
  --bbx-desk-pattern: radial-gradient(circle, #ffffff8c 0 1.5px, transparent 2px) 0 0 / 40px 40px fixed;
  --bbx-selection: #e3264a;
  --bbx-selection-ink: #fff;
  --bbx-selection-code: #ffb3cb;
  --bbx-selection-code-ink: #3a1626;
  --bbx-chat-user-paper: #d6336c;
  --bbx-chat-user-ink: #fff;
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-app-nav {
  position: relative;
  z-index: 1;
  background-color: var(--bbx-candy-bar);
  background-image: var(--bbx-candy-dots);
  background-size: 18px 18px;
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 -3px 0 var(--bbx-candy-bar-edge), 0 3px 8px #a8204f40;
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-app-nav :is(
  .bbx-place-pill, #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo, #bbx-nav-questions
) {
  border-radius: 9999px;
  border-color: #ffffffa0;
  /* Darker than the bar so small white labels keep AA contrast. */
  background-color: #b02556;
  box-shadow: inset 0 2px 0 #ffffff60, 0 2px 0 var(--bbx-candy-bar-edge);
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-app-nav :is(
  #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo,
  #bbx-nav-questions
):active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px #00000025, 0 1px 0 var(--bbx-candy-bar-edge);
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-composer-material {
  overflow: hidden;
  background: #fff7fa;
  border: 2px solid #f6b5ca;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -3px 12px #d6336c1a;
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-composer-material > section {
  border-top: 0;
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="candy"] #bbx-composer-send {
  background-color: #e3264a;
}
.bbx-box-presentation[data-chrome-theme="candy"] #bbx-composer-mic {
  background-color: #3f8fd0;
}
.bbx-box-presentation[data-chrome-theme="candy"] #bbx-composer-add {
  background-color: #fde0ea;
  color: #a8204f;
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-chat-user-paper {
  border-radius: 20px 20px 4px 20px;
  background-color: var(--bbx-chat-user-paper);
  background-image: none;
  color: var(--bbx-chat-user-ink);
  box-shadow: 0 2px 0 var(--bbx-candy-bar-edge);
  /* The theme's red selection would vanish on the pink bubble. */
  --bbx-selection: #fff;
  --bbx-selection-ink: #a8204f;
}
.bbx-box-presentation[data-chrome-theme="candy"] .bbx-chat-callout {
  border: 2px solid #f6b5ca;
  border-radius: 16px;
  background-color: #fff7fa;
  color: #4a2234;
}
.bbx-system-theme-preview[data-chrome-theme="candy"] .bbx-system-theme-toolbar {
  background-color: #d6336c;
  background-image: radial-gradient(circle, #ffffff50 0 1.5px, transparent 2px);
  background-size: 8px 8px;
}

/* ---- system-theme-picker.css (beebox/src/frontend/src/themes/) ---- */
.bbx-system-theme-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.65rem;
}
.bbx-system-theme-button {
  min-width: 0;
  padding: 0.4rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  text-align: left;
}
.bbx-system-theme-button:hover { background: var(--bbx-tint, #ffffff55); }
.bbx-system-theme-button:focus-visible { outline: 2px solid var(--bbx-focus-ring, #59489a); outline-offset: 2px; }
.bbx-system-theme-button[aria-pressed="true"] { border-color: var(--bbx-focus-ring, #59489a); }
.bbx-system-theme-button:disabled { cursor: progress; opacity: 0.6; }
.bbx-system-theme-preview {
  display: grid;
  grid-template-rows: 1rem 3.25rem;
  overflow: hidden;
  min-height: 4.25rem;
  border: 1px solid var(--bbx-desk-edge, #0003);
  border-radius: 0.35rem;
  background: var(--bbx-desk-pattern, none), var(--bbx-desk-background);
}
.bbx-system-theme-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.35rem;
  border-bottom: 1px solid var(--bbx-desk-edge, #0003);
  background: linear-gradient(90deg, #5e5490, #9b6ba6, #d4845a);
}
.bbx-system-theme-preview[data-chrome-theme="paper"] .bbx-system-theme-toolbar { background: var(--bbx-bar-paper); }
.bbx-system-theme-preview[data-chrome-theme="plain"] .bbx-system-theme-toolbar { background: #27364d; }
.bbx-system-theme-toolbar i { width: 0.7rem; height: 0.18rem; border-radius: 1rem; background: white; opacity: 0.65; }
.bbx-system-theme-desk { display: grid; place-items: center; padding: 0.65rem; }
.bbx-system-theme-desk > span {
  width: 58%;
  height: 1.2rem;
  border: 1px solid #ffffff70;
  border-radius: 0.3rem;
  background: #ffffff45;
  box-shadow: 0 2px 4px #0002;
}
.bbx-system-theme-label { display: block; margin-top: 0.35rem; font: 0.75rem/1.3 ui-sans-serif, system-ui, sans-serif; }
.bbx-landmark-system-theme { margin-top: 1.5rem; }
.bbx-landmark-system-theme > h4 { margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; }

/* ---- chat-material.css (beebox/src/frontend/src/themes/) ---- */
/* User-authored chat turns become paper slips only when the box chrome uses
   paper. The existing row keeps ownership of alignment, width, and scrolling. */
.bbx-box-presentation[data-chrome-theme="paper"] {
  --bbx-chat-user-paper: var(--bbx-bar-paper);
  --bbx-chat-user-ink: #ffffff;
}

.bbx-box-presentation[data-chrome-theme="paper"] .bbx-chat-user-paper {
  /* The stocks' dark selections would blend into the slip. */
  --bbx-selection: #fbf6ea;
  --bbx-selection-ink: #2a2418;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 13px 0 0 13px;
  background-color: var(--bbx-chat-user-paper);
  color: var(--bbx-chat-user-ink);
  box-shadow: -2px 3px 5px #353b4226, -8px 9px 15px -12px #252b3347;
}

.bbx-box-presentation[data-chrome-theme="paper"] .bbx-chat-user-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fiber)' opacity='.13'/%3E%3C/svg%3E"),
    linear-gradient(174deg, #ffffff18, transparent 58%, #00000016);
  background-size: 180px 180px, auto;
  background-blend-mode: soft-light;
  opacity: .48;
}

.bbx-box-presentation[data-chrome-theme="paper"] .bbx-chat-user-paper :is(
  .bbx-chat-user-status, .bbx-chat-user-attachment-summary
) { color: color-mix(in srgb, var(--bbx-chat-user-ink) 85%, transparent); }
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-chat-user-paper .bbx-chat-user-unsure {
  text-decoration-color: color-mix(in srgb, var(--bbx-chat-user-ink) 45%, transparent);
}


/* Callouts remain foreground sheets in the transcript and ambient replies. */
.bbx-box-presentation[data-chrome-theme="paper"] .bbx-chat-callout {
  border: 0;
  border-radius: 5px 8px 7px 4px;
  background-color: #faf3dd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.065'/%3E%3C/svg%3E");
  box-shadow: 0 1px 1px #3c2d1920, 1px 4px 9px #3c2d1924, inset 0 1px 0 #ffffffb0;
  color: #39372f;
}

/* ---- interface.css (beebox/src/frontend/src/themes/) ---- */
/* Shared framing for cards where the surrounding interface is part of the
   reading surface: sidecar panels and their tabs. */
.bbx-interface-card-desk[data-card-content="card"] {
  --bbx-card-desk-padding: 20px;
  background: var(--bbx-desk-pattern, none), var(--bbx-desk-background, #e4e0d9);
  padding: var(--bbx-card-desk-padding);
}

.bbx-interface-card-desk[data-card-content="card"] > .bbx-card-surface {
  min-height: 0;
}

.bbx-interface-tabstrip > [role="none"] {
  align-items: stretch;
  /* The compact row must not lose label height to a horizontal scrollbar. */
  scrollbar-width: none;
  gap: 3px;
  padding: 6px calc(3px + var(--bbx-tab-trailing, 0px)) 0 3px;
}

.bbx-interface-tabstrip > [role="none"]::-webkit-scrollbar {
  display: none;
}

.bbx-interface-tab {
  --bbx-tab-top-border: 1px;
  min-height: 34px;
  border-radius: 6px 6px 0 0;
  border-top: var(--bbx-tab-top-border) solid var(--bbx-edge);
  border-left: 1px solid var(--bbx-edge);
  color: var(--bbx-ink);
  background-color: color-mix(in srgb, var(--bbx-paper) 88%, #e8e3da);
  border-right: 1px solid color-mix(in srgb, var(--bbx-edge) 75%, #cbc4b9);
  border-bottom: 3px solid transparent;
}

/* A narrow unpinned tab gives its width to the label: pin and close show
   again on hover or keyboard focus, and always on the active tab. */
.bbx-interface-tab:not([data-pinned]) {
  container-type: inline-size;
}
@container (max-width: 8rem) {
  .bbx-interface-tab:not([data-active], [data-pinned], :hover, :focus-within) .bbx-interface-tab-action {
    display: none;
  }
}

.bbx-interface-tab[data-card-theme="paper"],
.bbx-interface-tab[data-card-theme="post-it"] {
  background-image: var(--bbx-interface-tab-grain);
}

.bbx-interface-tab[data-card-theme="paper"] {
  --bbx-interface-tab-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.08'/%3E%3C/svg%3E");
}

.bbx-interface-tab[data-card-theme="post-it"] {
  --bbx-interface-tab-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

.bbx-interface-tab:hover {
  background-color: color-mix(in srgb, var(--bbx-paper) 78%, white);
}

.bbx-interface-tab[data-active="true"] {
  border-bottom-color: var(--bbx-pen);
  background-color: var(--bbx-paper);
}

.bbx-interface-tab-action {
  color: var(--bbx-ink-soft);
}

.bbx-interface-tab-action:hover {
  color: var(--bbx-ink);
  background: color-mix(in srgb, var(--bbx-ink) 10%, transparent);
}

.bbx-interface-tab-pin {
  color: var(--bbx-pen);
}

@media (max-width: 640px) {
  .bbx-interface-card-desk[data-card-content="card"] {
    --bbx-card-desk-padding: 12px;
  }
}

@media print {
  .bbx-interface-card-desk[data-card-content="card"] {
    padding: 0;
    background: transparent;
  }
}

/* "Updating…" while a chat turn edits the open document. Empty otherwise,
   so the live region stays mounted without showing a blank pill. */
.bbx-companion-updating[data-editing] {
  padding: 4px 12px;
  color: var(--bbx-ink-soft);
  background: var(--bbx-paper);
  border: 1px solid var(--bbx-edge);
}

/* A selected card's tab grows from the sheet's top edge. The desk surrounds
   the whole tab-and-card assembly rather than cutting between its parts. */
.bbx-companion-desk[data-active-card] {
  --bbx-desk-gutter: 20px;
  background: var(--bbx-desk-pattern, none), var(--bbx-desk-background, #e4e0d9);
}
.bbx-companion-desk[data-active-card] > .bbx-companion-tabs {
  margin: var(--bbx-desk-gutter) var(--bbx-desk-gutter) 0;
  background: transparent;
  border-bottom: 0;
}
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk[data-card-content="card"] {
  padding-top: 0;
}
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"] {
  position: relative;
  padding: 0;
  /* Leave a sliver of breathing room after the final tab. Without it the
     scroller clips the tab's outer edge exactly where the controls begin. */
  padding-right: calc(2px + var(--bbx-tab-trailing, 0px));
  background: transparent;
  border-right: 0;
  gap: 4px;
}
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"]::before,
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"]::before {
  left: 0;
  background: linear-gradient(to right, var(--bbx-desk-background, #e4e0d9), transparent);
}
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"]::after {
  right: 0;
  background: linear-gradient(to left, var(--bbx-desk-background, #e4e0d9), transparent);
}
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"][data-overflow-left]::before,
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"][data-overflow-right]::after {
  opacity: 0.9;
}
.bbx-companion-desk[data-active-card] .bbx-interface-tabstrip > [role="none"] + [role="none"] {
  margin-left: 4px;
}
.bbx-companion-desk[data-active-card] .bbx-interface-tab {
  border-bottom-width: 0;
  /* Balance the decorative top edge so label and actions share the tab center. */
  padding-bottom: var(--bbx-tab-top-border);
}
.bbx-companion-desk[data-active-card] .bbx-interface-tab[data-active="true"] {
  z-index: 2;
}
.bbx-companion-desk[data-active-card] .bbx-interface-tab[data-active="true"] [role="tab"] {
  font-weight: 600;
}
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface {
  position: relative;
  z-index: 1;
}
.bbx-companion-desk[data-active-card]:has(.bbx-interface-tabstrip > [role="none"] > .bbx-interface-tab:first-child) .bbx-interface-card-desk[aria-hidden="false"] > .bbx-card-surface {
  border-top-left-radius: 0;
}
@media (max-width: 640px) {
  .bbx-companion-desk[data-active-card] { --bbx-desk-gutter: 12px; }
}

/* Paint the selected tab with the sheet's actual stock texture (the shared
   ::before rules), rather than a separate approximation of that material. */
.bbx-interface-tab[data-active="true"] {
  position: relative;
  isolation: isolate;
  background-image: none;
}
.bbx-interface-tab[data-active="true"] > button {
  position: relative;
  z-index: 1;
}
/* Tab and sheet sample one material canvas: the sheet keeps its full
   vignette, edge lighting, and raised shadow. Only the sampling origin differs. */
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface::after,
.bbx-companion-desk[data-active-card] .bbx-interface-tab[data-active="true"]::after {
  background-size: var(--bbx-material-width, 100%) var(--bbx-material-height, 100%);
  background-repeat: no-repeat;
}
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface::before,
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface::after {
  background-position: 0 calc(-1 * var(--bbx-material-tab-height, 0px));
}
.bbx-companion-desk[data-active-card] .bbx-interface-tab[data-active="true"]::before,
.bbx-companion-desk[data-active-card] .bbx-interface-tab[data-active="true"]::after {
  background-position: calc(-1 * var(--bbx-material-tab-x, 0px)) 0;
}
/* Continue the bright rim around the outline, not across the tab joint.
   Keep highlights on the surface: the vignette layer uses multiply blending. */
.bbx-companion-desk[data-active-card] .bbx-interface-tab[data-active="true"][data-card-theme="paper"] {
  box-shadow: inset 0 1px 0 #ffffff80;
  outline: 1px solid var(--bbx-edge);
  outline-offset: -1px;
}
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface[data-card-theme="paper"] {
  background-image: linear-gradient(to right,
    #ffffff80 0px var(--bbx-material-tab-x, 0px),
    transparent var(--bbx-material-tab-x, 0px) var(--bbx-material-tab-right, 0px),
    #ffffff80 var(--bbx-material-tab-right, 0px) 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 1px #3c2d191a, 0 4px 10px #3c2d1924,
    0 14px 28px #3c2d1924, inset 0 0 22px #785f3c12,
    inset 1px 0 0 #ffffff80, inset -1px 0 0 #ffffff80, inset 0 -1px 0 #ffffff80;
}

/* ---- bloom.css (beebox/src/frontend/src/themes/) ---- */
/* Bloom: pastel cutouts, a striped blue toolbar, and cream stationery.
   The desk artwork is painted once; nested workspace surfaces reveal it. */
.bbx-box-presentation[data-chrome-theme="bloom"] {
  --bbx-desk-background: #eaf3ee;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #9bb4b6;
  --bbx-bar-paper: #d5ebec;
  --bbx-bar-edge: #9c91b1;
  --bbx-focus-ring: #754374;
  --bbx-selection: #754374;
  --bbx-selection-ink: #fffdf5;
  --bbx-selection-code: #d8cbe9;
  --bbx-selection-code-ink: #344957;
  --bbx-chat-user-paper: #f9cbd6;
  --bbx-chat-user-ink: #344957;
  --bbx-bloom-stripes: repeating-linear-gradient(110deg, #abdbe3 0 60px, #f9cbd6 60px 120px, #ffdc94 120px 145px, #b9dfd1 145px 205px, #d8cbe9 205px 265px);
}
.bbx-box-presentation[data-chrome-theme="bloom"]:not(.bbx-system-theme-preview) {
  position: relative;
  isolation: isolate;
}
.bbx-box-presentation[data-chrome-theme="bloom"]:not(.bbx-system-theme-preview)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("./bloom-cutouts.svg") center / cover no-repeat;
}
.bbx-box-presentation[data-chrome-theme="bloom"] :is(
  .bbx-conversation-desk, .bbx-companion-desk[data-active-card],
  .bbx-interface-card-desk[data-card-content="card"]
) {
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav {
  position: relative;
  background: var(--bbx-bar-paper);
  color: #344957;
  border: 0;
  padding-bottom: 7px;
  box-shadow: 0 3px 0 #fff4df;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav > div {
  background: var(--bbx-bar-paper);
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  pointer-events: none;
  background: var(--bbx-bloom-stripes);
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav :is(
  .bbx-place-pill, #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo, #bbx-nav-questions
) {
  background-color: #e4daef;
  color: #344957;
  border-color: #9c91b1;
  border-radius: 5px;
  box-shadow: 2px 2px 0 #fff4df;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav button:active {
  box-shadow: none;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav :is(button, a):focus-visible {
  outline: 2px solid var(--bbx-focus-ring);
  outline-offset: 2px;
}
/* Keep the real composer's structure and keyboard behavior intact. */
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-composer-material {
  background: #fffdf5;
  color: #344957;
  border: 1px solid #9bb4b6;
  border-radius: 23px 23px 0 0;
  box-shadow: 4px 4px 0 #aacfd2;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-composer-material > section {
  background: transparent;
  border-top: 0;
}
/* ChatComposerSection mobile typing/transcribing subpanel. */
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-composer-material > .bbx-composer-mobile-row {
  background: #fffdf5;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-composer-material textarea {
  color: #344957;
  background-color: #fffdf5;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-composer-material textarea::placeholder {
  color: #808e90;
}
/* Only the idle mic has bg-primary; recording and paused states keep their
   danger/pulsing colors from InteractiveChat-voice-button. */
.bbx-box-presentation[data-chrome-theme="bloom"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled,
.bbx-box-presentation[data-chrome-theme="bloom"] #bbx-composer-mic[data-mic="idle"] {
  background-color: #a7d6dc;
  color: #284b58;
  border: 1px solid #739da7;
}
.bbx-box-presentation[data-chrome-theme="bloom"] #bbx-composer-add {
  background-color: #e4daef;
  color: #344957;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-user-paper {
  background: var(--bbx-chat-user-paper);
  color: var(--bbx-chat-user-ink);
  border: 1px solid #b98294;
  border-radius: 23px 23px 5px 23px;
  box-shadow: 3px 3px 0 #fff4df;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-user-paper :is(
  .bbx-chat-user-status, .bbx-chat-user-attachment-summary
) {
  color: #344957;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-user-paper :is(
  .bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge
) {
  background: #fff4df80;
  color: #344957;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-user-attachment:hover {
  background: #fff4df;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-user-unsure {
  text-decoration-color: #754374;
}
/* An opaque foreground sheet keeps cutouts out of the reading surface.
   No overflow clipping: the real reply's speech control is sticky. */
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-reply-material {
  background: #fffdf5;
  color: #344957;
  border: 1px solid #c5bda7;
  border-radius: 23px;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-callout {
  background: #dfedf3;
  color: #344957;
  border: 1px solid #9bbbc6;
  border-radius: 16px;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-callout > .bbx-chat-callout-context {
  color: #344957;
}
/* This material resets on every card, including a card on another system. */
.bbx-card-theme[data-card-theme="bloom"] {
  --bbx-paper: #fffdf5;
  --bbx-ink: #344957;
  --bbx-danger: #9c1e3f;
  --bbx-ink-soft: #596c71;
  --bbx-pen: #a33d54;
  --bbx-edge: #c5bda7;
  --bbx-underlay: #e4daef;
  --bbx-font: ui-rounded, "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
  --bbx-sheet-radius: 23px;
  --bbx-quote-paper: #e9e0f1;
  --bbx-quote-layer-paper: #e9e0f1;
  --bbx-quote-edge: 3px;
  --bbx-blockquote-paper: #e9e0f1;
  --bbx-blockquote-edge: 3px;
  --bbx-blockquote-padding: 0.65em 1em;
  --bbx-selection: #754374;
  --bbx-selection-ink: #fffdf5;
  --bbx-selection-code: #d8cbe9;
  --bbx-selection-code-ink: #344957;
}
.bbx-card-surface[data-card-theme="bloom"] {
  box-shadow: 5px 6px 0 #b8d9df;
}
.bbx-card-surface[data-card-theme="bloom"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 23px;
  right: 44px;
  height: 7px;
  pointer-events: none;
  background: linear-gradient(90deg, #e9a0af 0 33%, #f6d889 33% 66%, #a4d8dd 66%);
}
.bbx-card-surface[data-card-theme="bloom"] > .bbx-card-properties {
  border-radius: 0 23px 0 12px;
}
.bbx-interface-tab[data-card-theme="bloom"] {
  background: #e4daef;
  border-radius: 12px 12px 0 0;
}
.bbx-interface-tab[data-card-theme="bloom"][data-active="true"] {
  background: #fffdf5;
}
.bbx-interface-tab[data-card-theme="bloom"]:not([data-active="true"]):hover {
  background: #f1eaf6;
}
/* Swatches have their own small composition, not a full-page pseudo layer. */
.bbx-system-theme-preview[data-chrome-theme="bloom"] {
  background: url("./bloom-cutouts.svg") center / cover, #eaf3ee;
}
.bbx-system-theme-preview[data-chrome-theme="bloom"] .bbx-system-theme-toolbar {
  background: #d5ebec;
  border-bottom: 3px solid #f9cbd6;
}
.bbx-system-theme-preview[data-chrome-theme="bloom"] .bbx-system-theme-toolbar i {
  background: #344957;
}
.bbx-system-theme-preview[data-chrome-theme="bloom"] .bbx-system-theme-desk > span {
  background: #fffdf5;
  border-color: #c5bda7;
  box-shadow: 2px 2px 0 #b8d9df;
}
.bbx-box-presentation[data-chrome-theme="bloom"] :is(.bbx-chat-meta-material, .bbx-chat-empty-label) {
  color: #344957;
  background: #fffdf5;
}
.bbx-box-presentation[data-chrome-theme="bloom"] .bbx-chat-empty-label { padding: 6px 10px; }
@media print {
  .bbx-card-theme[data-card-theme="bloom"] :is(.bbx-blockquote, .bbx-quote-block) {
    background: transparent;
    color: #000;
    box-shadow: none;
  }
  .bbx-box-presentation[data-chrome-theme="bloom"] {
    background: transparent;
  }
  .bbx-box-presentation[data-chrome-theme="bloom"]::before,
  .bbx-box-presentation[data-chrome-theme="bloom"] .bbx-app-nav::after,
  .bbx-card-surface[data-card-theme="bloom"]::before {
    display: none;
  }
  .bbx-box-presentation[data-chrome-theme="bloom"] :is(
    .bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout
  ),
  .bbx-card-surface[data-card-theme="bloom"] {
    background: transparent;
    color: #000;
    border: 0;
    box-shadow: none;
  }
}

/* ---- ribbon.css (beebox/src/frontend/src/themes/) ---- */
/* Ribbon: directional warm bands behind cream sheets and a forest toolbar. */
.bbx-box-presentation[data-chrome-theme="ribbon"] {
  --bbx-desk-background: #f2e1bc;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #a48c60;
  --bbx-bar-paper: #173f35;
  --bbx-bar-edge: #e6a735;
  --bbx-focus-ring: #a43b0d;
  --bbx-selection: #173f35;
  --bbx-selection-ink: #fff6df;
  --bbx-selection-code: #f3dfb3;
  --bbx-selection-code-ink: #173f35;
  --bbx-chat-user-paper: #174c3e;
  --bbx-chat-user-ink: #fff6df;
}
.bbx-box-presentation[data-chrome-theme="ribbon"]:not(.bbx-system-theme-preview) {
  position: relative;
  isolation: isolate;
}
.bbx-box-presentation[data-chrome-theme="ribbon"]:not(.bbx-system-theme-preview)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("./ribbon-flow.svg") center / cover no-repeat,
    linear-gradient(125deg, #efd7a5, #fff0c9 60%, #f6e4b9);
}
.bbx-box-presentation[data-chrome-theme="ribbon"] :is(
  .bbx-conversation-desk, .bbx-companion-desk[data-active-card],
  .bbx-interface-card-desk[data-card-content="card"]
) { background: transparent; }
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-interface-tabstrip > [role="none"]::before,
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-interface-tabstrip > [role="none"]::after {
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-app-nav {
  background: var(--bbx-bar-paper);
  color: #fff3d9;
  border-bottom: 4px solid #e6a735;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-app-nav > div {
  background: var(--bbx-bar-paper);
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-app-nav :is(
  .bbx-place-pill, #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo, #bbx-nav-questions
) {
  background-color: #285446;
  color: #fff3d9;
  border: 2px solid #b74411;
  border-top-color: #f6b954;
  border-left-color: #e7a12d;
  border-radius: 19px 6px 19px 6px;
  box-shadow: inset 0 1px 0 #fff3d940;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-app-nav button:active { box-shadow: none; }
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-app-nav :is(button, a):focus-visible {
  outline: 2px solid #fff3d9;
  outline-offset: 2px;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-composer-material {
  background: #fff6dfe6;
  color: #173f35;
  border: 1px solid #a48c60;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 3px 9px #49321720;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-composer-material > section {
  background: transparent;
  border-top: 0;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-composer-material > .bbx-composer-mobile-row,
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-composer-material textarea {
  background: #fff6df;
  color: #173f35;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-composer-material textarea::placeholder { color: #8f876d; }
/* Enabled sends and the idle mic only; preserve recording and disabled cues. */
.bbx-box-presentation[data-chrome-theme="ribbon"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled,
.bbx-box-presentation[data-chrome-theme="ribbon"] #bbx-composer-mic[data-mic="idle"] {
  background-color: #173f35;
  color: #fff6df;
  border: 2px solid #b74411;
  border-top-color: #e7a12d;
  border-left-color: #e7a12d;
  border-radius: 19px 6px 19px 6px;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] #bbx-composer-add {
  background-color: #f3dfb3;
  color: #173f35;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled:hover,
.bbx-box-presentation[data-chrome-theme="ribbon"] #bbx-composer-mic[data-mic="idle"]:hover {
  background-color: #285e4b;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-user-paper {
  --bbx-selection: #fff6df;
  --bbx-selection-ink: #173f35;
  background: var(--bbx-chat-user-paper);
  color: var(--bbx-chat-user-ink);
  border: 1px solid #174c3e;
  border-radius: 20px 20px 3px 20px;
  box-shadow: none;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-user-paper :is(
  .bbx-chat-user-status, .bbx-chat-user-attachment-summary
) { color: #fff6df; }
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-user-paper :is(
  .bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge
) {
  background: #fff6df20;
  color: #fff6df;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-user-attachment:hover { background: #fff6df33; }
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-user-unsure { text-decoration-color: #f3dfb3; }
/* Material variables reach Markdown; an explicit nested card resets them.
   Darker links preserve contrast at the approved 79% cream opacity. */
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-reply-material {
  --bbx-edge: #a48c60;
  background: #fff6dfc9;
  color: var(--bbx-ink);
  backdrop-filter: blur(5px);
  border: 1px solid #fff6dfa3;
  border-radius: 15px;
  box-shadow: 0 2px 12px #49321712;
}
/* Tailwind typography declares its tokens on each prose node. Target the
   transcript prose itself, while leaving explicit nested cards independent. */
.bbx-box-presentation[data-chrome-theme="ribbon"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme .prose) {
  --bbx-ink: #173f35;
  --bbx-ink-soft: #514a34;
  --bbx-pen: #84300b;
  --tw-prose-body: #173f35;
  --tw-prose-headings: #173f35;
  --tw-prose-bold: #173f35;
  --tw-prose-links: #84300b;
  --tw-prose-quotes: #173f35;
  --tw-prose-code: #173f35;
  --tw-prose-counters: #514a34;
  --tw-prose-captions: #514a34;
  --tw-prose-bullets: #84300b;
  --tw-prose-quote-borders: #a48c60;
  --tw-prose-hr: #a48c60;
  --tw-prose-th-borders: #a48c60;
  --tw-prose-td-borders: #a48c60;
  --tw-prose-pre-bg: #173f35;
  --tw-prose-pre-code: #fff6df;
  color: #173f35;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-callout {
  background: #fff2d7bf;
  color: #173f35;
  border: 1px solid #a48c60;
  border-radius: 15px;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-callout > .bbx-chat-callout-context { color: #173f35; }
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-meta-material {
  color: #514a34;
  background: #fff6df;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-pending-material {
  background: #fff6df;
  color: #173f35;
  border-radius: 12px;
  padding: 6px 10px;
}
/* Chat material ink, read by text in the reply, pending and meta materials. */
.bbx-box-presentation[data-chrome-theme="ribbon"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
  --bbx-ink: #173f35;
  --bbx-danger: #a32745;
  --bbx-ink-soft: #514a34;
  --bbx-pen: #84300b;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) {
  color: #173f35;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] #bbx-chat-load-older:enabled {
  color: #84300b;
  text-decoration: underline;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] #bbx-chat-load-older:enabled:hover {
  color: #173f35;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] #bbx-chat-load-older:disabled {
  color: #686045;
  opacity: .6;
}
.bbx-box-presentation[data-chrome-theme="ribbon"] .bbx-chat-empty-label {
  display: inline-block;
  color: #514a34;
  background: #fff6df;
  border-radius: 5px;
  padding: 4px 8px;
}
.bbx-card-theme[data-card-theme="ribbon"] {
  --bbx-paper: #fff6df;
  --bbx-ink: #173f35;
  --bbx-danger: #a32745;
  --bbx-ink-soft: #686045;
  --bbx-pen: #a43b0d;
  --bbx-edge: #a48c60;
  --bbx-underlay: #f3dfb3;
  --bbx-font: ui-sans-serif, system-ui, sans-serif;
  --bbx-sheet-radius: 3px;
  --bbx-quote-paper: #f3dfb3;
  --bbx-quote-layer-paper: #f3dfb3;
  --bbx-quote-edge: 3px;
  --bbx-blockquote-paper: #f3dfb3;
  --bbx-blockquote-edge: 3px;
  --bbx-blockquote-padding: 0.65em 1em;
  --bbx-selection: #173f35;
  --bbx-selection-ink: #fff6df;
  --bbx-selection-code: #f3dfb3;
  --bbx-selection-code-ink: #173f35;
}
.bbx-card-surface[data-card-theme="ribbon"] {
  background-image: linear-gradient(#174c3e, #174c3e);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  box-shadow: 0 5px 12px #49321724;
}
.bbx-card-surface[data-card-theme="ribbon"] > .bbx-card-heading h2 {
  font-family: Georgia, serif;
  font-weight: 500;
}
/* Leave an opening where the active companion tab joins its sheet. */
.bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface[data-card-theme="ribbon"] {
  background-image: linear-gradient(to right,
    #174c3e 0px var(--bbx-material-tab-x, 0px),
    transparent var(--bbx-material-tab-x, 0px) var(--bbx-material-tab-right, 0px),
    #174c3e var(--bbx-material-tab-right, 0px) 100%);
}
.bbx-interface-tab[data-card-theme="ribbon"] {
  background: #f3dfb3;
  border-top-color: #a4692f;
  border-left-color: #a4692f;
  border-right-color: #a4692f;
  border-radius: 17px 5px 0 0;
}
.bbx-interface-tab[data-card-theme="ribbon"][data-active="true"] { background: #fff6df; }
.bbx-interface-tab[data-card-theme="ribbon"]:not([data-active="true"]):hover { background: #faebc8; }
.bbx-system-theme-preview[data-chrome-theme="ribbon"] {
  background: url("./ribbon-flow.svg") center / cover, #f2e1bc;
}
.bbx-system-theme-preview[data-chrome-theme="ribbon"] .bbx-system-theme-toolbar {
  background: #173f35;
  border-bottom: 3px solid #e6a735;
}
.bbx-system-theme-preview[data-chrome-theme="ribbon"] .bbx-system-theme-toolbar i { background: #fff3d9; }
.bbx-system-theme-preview[data-chrome-theme="ribbon"] .bbx-system-theme-desk > span {
  background: #fff6df;
  border-color: #a48c60;
  box-shadow: 0 2px 4px #49321724;
}
@media print {
  .bbx-card-theme[data-card-theme="ribbon"] :is(.bbx-blockquote, .bbx-quote-block) {
    background: transparent;
    color: #000;
    box-shadow: none;
  }
  .bbx-box-presentation[data-chrome-theme="ribbon"] { background: transparent; }
  .bbx-box-presentation[data-chrome-theme="ribbon"]::before { display: none; }
  .bbx-box-presentation[data-chrome-theme="ribbon"] :is(
    .bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material
  ),
  .bbx-card-surface[data-card-theme="ribbon"],
  .bbx-companion-desk[data-active-card] .bbx-interface-card-desk > .bbx-card-surface[data-card-theme="ribbon"] {
    background: transparent;
    color: #000;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* ---- deck.css (beebox/src/frontend/src/themes/) ---- */
/* Deck: worn turquoise screen printing on charcoal cloth. */
.bbx-box-presentation[data-chrome-theme="deck"] {
  --bbx-desk-background: #242925;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #44959a;
  --bbx-bar-paper: #252e2b;
  --bbx-bar-edge: #638d87;
  --bbx-focus-ring: #83e7ec;
  --bbx-selection: #78dedc;
  --bbx-selection-ink: #242f30;
  --bbx-selection-code: #78dedc;
  --bbx-selection-code-ink: #173e42;
  --bbx-chat-user-paper: #9bd8cb;
  --bbx-chat-user-ink: #173d41;
}
.bbx-box-presentation[data-chrome-theme="deck"]:not(.bbx-system-theme-preview) {
  position: relative;
  isolation: isolate;
}
.bbx-box-presentation[data-chrome-theme="deck"]:not(.bbx-system-theme-preview)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("./deck-panels.svg") center top / cover no-repeat;
}
.bbx-box-presentation[data-chrome-theme="deck"] :is(
  .bbx-conversation-desk, .bbx-companion-desk[data-active-card],
  .bbx-interface-card-desk[data-card-content="card"]
) { background: transparent; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-interface-tabstrip > [role="none"]::before,
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-interface-tabstrip > [role="none"]::after {
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav {
  background: var(--bbx-bar-paper);
  color: #d8f4ef;
  border-bottom: 3px solid #5d9690;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav > div {
  background: var(--bbx-bar-paper);
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav :is(
#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo, #bbx-nav-questions
) {
  background-color: #293e40;
  color: #d8f4ef;
  border: 1px solid #44959a;
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0 2px 0 #163c3b;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav button:active { box-shadow: none; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav :is(button, a):focus-visible {
  outline: 2px solid #d8f4ef;
  outline-offset: 2px;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material {
  background: #29312e;
  color: #d8f4ef;
  border: 1px solid #44959a;
  border-radius: 28px 28px 0 0;
  box-shadow: 4px 5px 0 #163c3b;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material > section {
  background: transparent;
  border-top: 0;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material > .bbx-composer-mobile-row,
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material textarea {
  background: #29312e;
  color: #d8f4ef;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material textarea::placeholder { color: #76918e; }
/* Enabled sends and the idle mic only; preserve recording and disabled cues. */
.bbx-box-presentation[data-chrome-theme="deck"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled,
.bbx-box-presentation[data-chrome-theme="deck"] #bbx-composer-mic[data-mic="idle"] {
  background-color: #78dedc;
  color: #173e42;
  border: 1px solid #44959a;
  border-radius: 10px 10px 5px 5px;
}
.bbx-box-presentation[data-chrome-theme="deck"] #bbx-composer-add {
  background-color: #354748;
  color: #d8f4ef;
}
.bbx-box-presentation[data-chrome-theme="deck"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled:hover,
.bbx-box-presentation[data-chrome-theme="deck"] #bbx-composer-mic[data-mic="idle"]:hover {
  background-color: #a1f0e9;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-user-paper {
  --bbx-selection: #242f30;
  --bbx-selection-ink: #d8f4ef;
  background: var(--bbx-chat-user-paper);
  color: var(--bbx-chat-user-ink);
  border: 1px solid #44959a;
  border-radius: 28px 28px 4px 28px;
  box-shadow: 4px 5px 0 #163c3b;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-user-paper :is(
  .bbx-chat-user-status, .bbx-chat-user-attachment-summary
) { color: #173d41; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-user-paper :is(
  .bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge
) {
  background: #ffffff45;
  color: #242f30;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-user-attachment:hover { background: #ffffff80; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-user-unsure { text-decoration-color: #354748; }
/* Explicit nested cards reset material variables and keep their own colors. */
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-reply-material {
  --bbx-edge: #608b83;
  background: #29312e;
  color: var(--bbx-ink);
  border: 1px solid #44959a;
  border-radius: 28px;
  box-shadow: 4px 5px 0 #163c3b;
}
/* Tailwind typography declares its tokens on each prose node. Target the
   transcript prose itself, while leaving explicit nested cards independent. */
.bbx-box-presentation[data-chrome-theme="deck"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme .prose) {
  --bbx-ink: #d8f4ef;
  --bbx-ink-soft: #b2cbc5;
  --bbx-pen: #83e7ec;
  --tw-prose-body: #d8f4ef;
  --tw-prose-headings: #d8f4ef;
  --tw-prose-bold: #d8f4ef;
  --tw-prose-links: #83e7ec;
  --tw-prose-quotes: #d8f4ef;
  --tw-prose-code: #d8f4ef;
  --tw-prose-counters: #b2cbc5;
  --tw-prose-captions: #b2cbc5;
  --tw-prose-bullets: #83e7ec;
  --tw-prose-quote-borders: #44959a;
  --tw-prose-hr: #44959a;
  --tw-prose-th-borders: #44959a;
  --tw-prose-td-borders: #44959a;
  --tw-prose-pre-bg: #10272d;
  --tw-prose-pre-code: #d8f4ef;
  color: #d8f4ef;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-callout {
  background: #29312e;
  color: #d8f4ef;
  border: 1px solid #44959a;
  border-radius: 28px;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-callout > .bbx-chat-callout-context { color: #d8f4ef; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-meta-material {
  color: #b2cbc5;
  background: #29312e;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-pending-material {
  background: #29312e;
  color: #d8f4ef;
  border-radius: 12px;
  padding: 6px 10px;
}
/* Chat material ink, read by text in the reply, pending and meta materials.
   Raw tool details are light plates (chrome.css, .bbx-chat-plate). */
.bbx-box-presentation[data-chrome-theme="deck"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
  --bbx-ink: #d8f4ef;
  --bbx-danger: #fda5af;
  --bbx-ink-soft: #b2cbc5;
  --bbx-pen: #83e7ec;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) {
  color: #d8f4ef;
}
.bbx-box-presentation[data-chrome-theme="deck"] #bbx-chat-load-older:enabled {
  color: #83e7ec;
  text-decoration: underline;
}
.bbx-box-presentation[data-chrome-theme="deck"] #bbx-chat-load-older:enabled:hover {
  color: #d8f4ef;
}
.bbx-box-presentation[data-chrome-theme="deck"] #bbx-chat-load-older:disabled {
  color: #a4cbc9;
  opacity: .6;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-empty-label {
  display: inline-block;
  color: #b2cbc5;
  background: #29312e;
  border-radius: 5px;
  padding: 4px 8px;
}
.bbx-card-theme[data-card-theme="deck"] {
  color-scheme: dark;
  --bbx-slip-light: #ffffff0c;
  --bbx-slip-edge-light: #ffffff26;
  --bbx-sheet: #3b4944;
  --bbx-tint: #35413b;
  --bbx-code-paper: #10272d;
  --bbx-code-ink: #d8f4ef;
  --bbx-paper: #29312e;
  --bbx-ink: #d8f4ef;
  --bbx-danger: #fda5af;
  --bbx-ink-soft: #a4cbc9;
  --bbx-pen: #83e7ec;
  --bbx-edge: #608b83;
  --bbx-underlay: #122e35;
  --bbx-font: ui-sans-serif, system-ui, sans-serif;
  --bbx-sheet-radius: 28px;
  --bbx-quote-paper: #354748;
  --bbx-quote-layer-paper: #354748;
  --bbx-quote-edge: 3px;
  --bbx-blockquote-paper: #354748;
  --bbx-blockquote-edge: 3px;
  --bbx-blockquote-padding: 0.65em 1em;
  --bbx-selection: #78dedc;
  --bbx-selection-ink: #242f30;
  --bbx-selection-code: #78dedc;
  --bbx-selection-code-ink: #173e42;
}
.bbx-card-surface[data-card-theme="deck"] {
  border-top: 5px solid #8acabd;
  box-shadow: 5px 6px 0 #225c59;
}
.bbx-card-surface[data-card-theme="deck"] > .bbx-card-properties {
  border-radius: 0 28px 0 12px;
}
.bbx-interface-tab[data-card-theme="deck"] {
  background: #354748;
  border-top-color: #44959a;
  border-left-color: #44959a;
  border-right-color: #44959a;
  border-radius: 16px 16px 0 0;
}
.bbx-interface-tab[data-card-theme="deck"][data-active="true"] { background: #29312e; }
.bbx-interface-tab[data-card-theme="deck"]:not([data-active="true"]):hover { background: #3a5152; }
.bbx-system-theme-preview[data-chrome-theme="deck"] {
  background: url("./deck-panels.svg") center / cover, #242925;
}
.bbx-system-theme-preview[data-chrome-theme="deck"] .bbx-system-theme-toolbar {
  background: #252e2b;
  border-bottom: 3px solid #44959a;
}
.bbx-system-theme-preview[data-chrome-theme="deck"] .bbx-system-theme-toolbar i { background: #d8f4ef; }
.bbx-system-theme-preview[data-chrome-theme="deck"] .bbx-system-theme-desk > span {
  background: #29312e;
  border-color: #44959a;
  box-shadow: 3px 3px 0 #087f8a;
}

.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav .bbx-place-pill {
  background: #78dedc;
  color: #173e42;
  border: 1px solid #44959a;
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0 2px 0 #163c3b;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #173e42; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material {
  color-scheme: dark;
  border: 1px solid #608b83;
  border-top: 3px solid #82c5bb;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material :is(textarea, input) { border-color: #44959a; }
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material :is(button, textarea):focus-visible {
  outline: 2px solid #78dedc;
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .bbx-box-presentation[data-chrome-theme="deck"]:not(.bbx-system-theme-preview)::before {
    background-size: auto max(1000px, 100%);
    background-position: left top;
  }
}


.bbx-box-presentation[data-chrome-theme="deck"] .bbx-interface-card-desk[data-card-content="neutral"] {
  background: #fbf5ee;
}
/* Fine weave belongs to Deck surfaces only; nested explicit card themes
   retain their own material. Texture is quieter underneath reading content. */
.bbx-box-presentation[data-chrome-theme="deck"] :is(
  .bbx-app-nav, .bbx-app-nav > div, .bbx-chat-reply-material,
  .bbx-composer-material, .bbx-chat-callout, .bbx-chat-user-paper
),
.bbx-card-surface[data-card-theme="deck"],
.bbx-interface-tab[data-card-theme="deck"] {
  background-image: url("./deck-weave.svg");
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-app-nav :is(
  #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill
) {
  background-image: url("./deck-weave.svg");
  border-color: #608b83;
}
.bbx-box-presentation[data-chrome-theme="deck"] :is(
  .bbx-chat-reply-material, .bbx-chat-callout
),
.bbx-interface-tab[data-card-theme="deck"] {
  border-color: #608b83;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-composer-material textarea {
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-user-paper {
  border-color: #6eaa9e;
  box-shadow: 4px 5px 0 #225c59;
}

@media print {
  .bbx-box-presentation[data-chrome-theme="deck"]::before { display: none; }
  .bbx-box-presentation[data-chrome-theme="deck"],
  .bbx-box-presentation[data-chrome-theme="deck"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material),
  .bbx-card-surface[data-card-theme="deck"] {
    background: transparent; color: #000; border: 0; box-shadow: none;
  }
  .bbx-card-theme[data-card-theme="deck"],
  .bbx-box-presentation[data-chrome-theme="deck"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme .prose) {
    color-scheme: light;
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
  .bbx-card-theme[data-card-theme="deck"] :is(.bbx-blockquote, .bbx-quote-block),
  .bbx-box-presentation[data-chrome-theme="deck"] .bbx-chat-callout > .bbx-chat-callout-context {
    color: #333; background: transparent; box-shadow: none;
  }
  .bbx-box-presentation[data-chrome-theme="deck"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
    --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
  }
}
.bbx-box-presentation[data-chrome-theme="deck"] [aria-label="Pane controls"] button {
  color: #b2cbc5;
}
.bbx-box-presentation[data-chrome-theme="deck"] [aria-label="Pane controls"] button:hover {
  color: #173e42; background: #78dedc;
}
.bbx-box-presentation[data-chrome-theme="deck"] :is(#bbx-composer-capture, #bbx-composer-keyboard) {
  background: #354748; color: #d8f4ef;
}

/* ---- night-atlas.css (beebox/src/frontend/src/themes/) ---- */
/* Night Atlas: distant warm lights over sea-green terrain and quiet teal reading surfaces. */
.bbx-box-presentation[data-chrome-theme="night-atlas"] {
  --bbx-desk-background: #167d7e;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #5caaa4;
  --bbx-bar-paper: #103e46;
  --bbx-bar-edge: #5caaa4;
  --bbx-focus-ring: #ffd38b;
  --bbx-selection: #ffd38b;
  --bbx-selection-ink: #124e53;
  --bbx-selection-code: #ffd38b;
  --bbx-selection-code-ink: #174b4d;
  --bbx-chat-user-paper: #bce6d9;
  --bbx-chat-user-ink: #174b4d;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"]:not(.bbx-system-theme-preview) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"]:not(.bbx-system-theme-preview)::before {
  content: "";
  position: absolute;
  inset: -36px auto -36px -36px;
  width: max(calc(200% + 72px), calc(300vh + 216px), 2100px);
  z-index: -1;
  pointer-events: none;
  background: url("./night-atlas-lights.webp") center top / cover no-repeat;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] :is(
  .bbx-conversation-desk, .bbx-companion-desk[data-active-card],
  .bbx-interface-card-desk[data-card-content="card"]
) { background: transparent; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-interface-tabstrip > [role="none"]::before,
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-interface-tabstrip > [role="none"]::after {
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-app-nav {
  background: linear-gradient(115deg, #12414b, #176264 58%, #245d5a);
  color: #e0f5e9;
  border-bottom: 1px solid #dbb97a;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-app-nav > div {
  background: transparent;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-app-nav :is(
  #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile,
  #bbx-nav-todo, #bbx-nav-questions
) {
  background-color: #174d53;
  color: #e0f5e9;
  border: 1px solid #5caaa4;
  border-radius: 8px;
  box-shadow: inset 0 1px #b1e9d51a;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-app-nav button:active { box-shadow: none; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-app-nav :is(button, a):focus-visible {
  outline: 2px solid #e0f5e9;
  outline-offset: 2px;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material {
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  color: #e0f5e9;
  border: 1px solid #5caaa4;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 8px 28px #063c4b66, inset 0 1px #b1e9d51a;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material > section {
  background: transparent;
  border-top: 0;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material > .bbx-composer-mobile-row,
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material textarea {
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  color: #e0f5e9;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material textarea::placeholder { color: #74a29e; }
/* Enabled sends and the idle mic only; preserve recording and disabled cues. */
.bbx-box-presentation[data-chrome-theme="night-atlas"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled,
.bbx-box-presentation[data-chrome-theme="night-atlas"] #bbx-composer-mic[data-mic="idle"] {
  background-color: #ffd38b;
  color: #174b4d;
  border: 1px solid #5caaa4;
  border-radius: 8px;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] #bbx-composer-add {
  background-color: #23666a;
  color: #e0f5e9;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] :is(#bbx-composer-send, #bbx-composer-send-mobile):enabled:hover,
.bbx-box-presentation[data-chrome-theme="night-atlas"] #bbx-composer-mic[data-mic="idle"]:hover {
  background-color: #ffe6bc;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-user-paper {
  --bbx-selection: #124e53;
  --bbx-selection-ink: #e0f5e9;
  background: linear-gradient(115deg, #c2e7d8, #9edbd2 70%, #c5dfce);
  color: var(--bbx-chat-user-ink);
  border: 1px solid #5caaa4;
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 8px 28px #063c4b66, inset 0 1px #b1e9d51a;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-user-paper :is(
  .bbx-chat-user-status, .bbx-chat-user-attachment-summary
) { color: #174b4d; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-user-paper :is(
  .bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge
) {
  background: #ffffff45;
  color: #124e53;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-user-attachment:hover { background: #ffffff80; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-user-unsure { text-decoration-color: #23666a; }
/* Explicit nested cards reset material variables and keep their own colors. */
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-reply-material {
  --bbx-edge: #5caaa4;
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  color: var(--bbx-ink);
  border: 1px solid #5caaa4;
  border-radius: 12px;
  box-shadow: 0 8px 28px #063c4b66, inset 0 1px #b1e9d51a;
}
/* Tailwind typography declares its tokens on each prose node. Target the
   transcript prose itself, while leaving explicit nested cards independent. */
.bbx-box-presentation[data-chrome-theme="night-atlas"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme .prose) {
  --bbx-ink: #e0f5e9;
  --bbx-ink-soft: #bfe2d8;
  --bbx-pen: #ffd38b;
  --tw-prose-body: #e0f5e9;
  --tw-prose-headings: #e0f5e9;
  --tw-prose-bold: #e0f5e9;
  --tw-prose-links: #ffd38b;
  --tw-prose-quotes: #e0f5e9;
  --tw-prose-code: #e0f5e9;
  --tw-prose-counters: #bfe2d8;
  --tw-prose-captions: #bfe2d8;
  --tw-prose-bullets: #ffd38b;
  --tw-prose-quote-borders: #5caaa4;
  --tw-prose-hr: #5caaa4;
  --tw-prose-th-borders: #5caaa4;
  --tw-prose-td-borders: #5caaa4;
  --tw-prose-pre-bg: #0a363d;
  --tw-prose-pre-code: #e0f5e9;
  color: #e0f5e9;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-callout {
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  color: #e0f5e9;
  border: 1px solid #5caaa4;
  border-radius: 12px;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-callout > .bbx-chat-callout-context { color: #e0f5e9; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-meta-material {
  color: #bfe2d8;
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-pending-material {
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  color: #e0f5e9;
  border-radius: 12px;
  padding: 6px 10px;
}
/* Chat material ink, read by text in the reply, pending and meta materials.
   Raw tool details are light plates (chrome.css, .bbx-chat-plate). */
.bbx-box-presentation[data-chrome-theme="night-atlas"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
  --bbx-ink: #e0f5e9;
  --bbx-danger: #fddadd;
  --bbx-ink-soft: #bfe2d8;
  --bbx-pen: #ffd38b;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) {
  color: #e0f5e9;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] #bbx-chat-load-older:enabled {
  color: #ffd38b;
  text-decoration: underline;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] #bbx-chat-load-older:enabled:hover {
  color: #e0f5e9;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] #bbx-chat-load-older:disabled {
  color: #bfe2d8;
  opacity: .6;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-empty-label {
  display: inline-block;
  color: #bfe2d8;
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  border-radius: 5px;
  padding: 4px 8px;
}
.bbx-card-theme[data-card-theme="night-atlas"] {
  --bbx-slip-light: #ffffff0c;
  --bbx-slip-edge-light: #ffffff26;
  color-scheme: dark;
  --bbx-sheet: #23666a;
  --bbx-tint: #20595c;
  --bbx-code-paper: #0a363d;
  --bbx-code-ink: #e0f5e9;
  --bbx-paper: #124e53;
  --bbx-ink: #e0f5e9;
  --bbx-danger: #fddadd;
  --bbx-ink-soft: #bfe2d8;
  --bbx-pen: #ffd38b;
  --bbx-edge: #5caaa4;
  --bbx-underlay: #0a363d;
  --bbx-font: ui-sans-serif, system-ui, sans-serif;
  --bbx-sheet-radius: 12px;
  --bbx-quote-paper: #23666a;
  --bbx-quote-layer-paper: #23666a;
  --bbx-quote-edge: 3px;
  --bbx-blockquote-paper: #23666a;
  --bbx-blockquote-edge: 3px;
  --bbx-blockquote-padding: 0.65em 1em;
  --bbx-selection: #ffd38b;
  --bbx-selection-ink: #124e53;
  --bbx-selection-code: #ffd38b;
  --bbx-selection-code-ink: #174b4d;
}
.bbx-card-surface[data-card-theme="night-atlas"] {
  background-image: linear-gradient(135deg, #24676555, transparent 48%, #0a394633);
  border-top: 1px solid #edba81;
  box-shadow: 0 8px 28px #063c4b66, inset 0 1px #b1e9d51a;
}
.bbx-card-surface[data-card-theme="night-atlas"] > .bbx-card-properties {
  border-radius: 0 12px 0 12px;
}
.bbx-interface-tab[data-card-theme="night-atlas"] {
  background: #23666a;
  border-top-color: #5caaa4;
  border-left-color: #5caaa4;
  border-right-color: #5caaa4;
  border-radius: 16px 16px 0 0;
}
.bbx-interface-tab[data-card-theme="night-atlas"][data-active="true"] { background: #124e53; }
.bbx-interface-tab[data-card-theme="night-atlas"]:not([data-active="true"]):hover { background: #2c7375; }
.bbx-system-theme-preview[data-chrome-theme="night-atlas"] {
  background: url("./night-atlas-lights.webp") center / cover, #167d7e;
}
.bbx-system-theme-preview[data-chrome-theme="night-atlas"] .bbx-system-theme-toolbar {
  background: #103e46;
  border-bottom: 3px solid #5caaa4;
}
.bbx-system-theme-preview[data-chrome-theme="night-atlas"] .bbx-system-theme-toolbar i { background: #e0f5e9; }
.bbx-system-theme-preview[data-chrome-theme="night-atlas"] .bbx-system-theme-desk > span {
  background: linear-gradient(135deg, #24676555, transparent 48%, #0a394633), #124e53;
  border-color: #5caaa4;
  box-shadow: 0 3px 8px #073e4b55;
}

.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-app-nav .bbx-place-pill {
  background: #ffd38b;
  color: #174b4d;
  border: 1px solid #5caaa4;
  border-radius: 8px;
  box-shadow: inset 0 1px #b1e9d51a;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #174b4d; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material {
  color-scheme: dark;
  border: 1px solid #5caaa4;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material :is(textarea, input) { border-color: #5caaa4; }
.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-composer-material :is(button, textarea):focus-visible {
  outline: 2px solid #ffd38b;
  outline-offset: 2px;
}


.bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-interface-card-desk[data-card-content="neutral"] {
  background: #fbf5ee;
}
@media print {
  .bbx-box-presentation[data-chrome-theme="night-atlas"]::before { display: none; }
  .bbx-box-presentation[data-chrome-theme="night-atlas"],
  .bbx-box-presentation[data-chrome-theme="night-atlas"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material),
  .bbx-card-surface[data-card-theme="night-atlas"] {
    background: transparent; color: #000; border: 0; box-shadow: none;
  }
  .bbx-card-theme[data-card-theme="night-atlas"],
  .bbx-box-presentation[data-chrome-theme="night-atlas"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme .prose) {
    color-scheme: light;
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
  .bbx-card-theme[data-card-theme="night-atlas"] :is(.bbx-blockquote, .bbx-quote-block),
  .bbx-box-presentation[data-chrome-theme="night-atlas"] .bbx-chat-callout > .bbx-chat-callout-context {
    color: #333; background: transparent; box-shadow: none;
  }
  .bbx-box-presentation[data-chrome-theme="night-atlas"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) {
    --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
  }
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] [aria-label="Pane controls"] button {
  background: #103e46;
  color: #e0f5e9;
  border: 1px solid #5caaa4;
  border-radius: 8px;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] [aria-label="Pane controls"] button:hover {
  color: #174b4d; background: #ffd38b;
}
.bbx-box-presentation[data-chrome-theme="night-atlas"] :is(#bbx-composer-capture, #bbx-composer-keyboard) {
  background: #23666a; color: #e0f5e9;
}

/* ---- night-atlas-motion.css (beebox/src/frontend/src/themes/) ---- */
/* The wide atlas drifts from fields through city to harbor, then returns.
   A constant slow horizontal pan avoids mid-flight acceleration; the small
   vertical drift stays gentle. Only the decorative compositor layer moves. */
.bbx-box-presentation[data-chrome-theme="night-atlas"]:not(.bbx-system-theme-preview)::before {
  animation: night-atlas-map-east 1800s linear infinite alternate,
    night-atlas-map-north 900s ease-in-out -450s infinite alternate;
}
@keyframes night-atlas-map-east {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 72px - 100%)); }
}
@keyframes night-atlas-map-north {
  from { translate: 0 -24px; }
  to { translate: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .bbx-box-presentation[data-chrome-theme="night-atlas"]:not(.bbx-system-theme-preview)::before {
    animation: none;
    transform: translateX(calc((100vw + 72px - 100%) / 2));
  }
}
@media print {
  .bbx-box-presentation[data-chrome-theme="night-atlas"]:not(.bbx-system-theme-preview)::before {
    animation: none;
  }
}

/* ---- textiles.css (beebox/src/frontend/src/themes/) ---- */
/* Approved textile palettes, shared by chrome and independent card materials. */
:is([data-chrome-theme="rose-trellis"], .bbx-card-theme[data-card-theme="rose-trellis"]) {
  --textile-paper: #fff7e9;
  --textile-ink: #542939;
  --textile-soft: #785563;
  --textile-danger: #b0344f;
  --textile-placeholder: #9c8187;
  --textile-edge: #c9aa91;
  --textile-accent: #973c59;
  --textile-accent-ink: #fff6e9;
  --textile-sheet: #f5e8d8;
  --textile-underlay: #d5b5a4;
  --textile-code: #492b35;
  --textile-code-ink: #fff2da;
  --textile-radius: 24px 12px 28px 14px;
  --textile-shadow: 0 7px 22px #662d3929, 2px 3px 0 #ae82723d;
  --textile-desk: #d9a58f;
  --textile-art: url("./rose-trellis-textile.webp");
  --textile-bar: #843650;
  --textile-bar-ink: #fff3df;
  --textile-user: #f5c3b7;
  --textile-user-ink: #592c3b;
}
:is([data-chrome-theme="gold-thread"], .bbx-card-theme[data-card-theme="gold-thread"]) {
  --textile-paper: #182a3e;
  --textile-ink: #f1e9d7;
  --textile-soft: #c4bda9;
  --textile-danger: #fd95a3;
  --textile-placeholder: #757978;
  --textile-edge: #4c6279;
  --textile-accent: #c9c09f;
  --textile-accent-ink: #202c3b;
  --textile-sheet: #243950;
  --textile-underlay: #0c192a;
  --textile-code: #0e1c2d;
  --textile-code-ink: #efe3c7;
  --textile-radius: 14px;
  --textile-shadow: 0 8px 24px #040e2244;
  --textile-desk: #0e2038;
  --textile-art: url("./gold-thread-textile.webp");
  --textile-bar: #142238;
  --textile-bar-ink: #eadbc1;
  --textile-user: #304d6c;
  --textile-user-ink: #f7e9cb;
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) {
  background: var(--textile-art) center top / cover, var(--textile-desk);
  --bbx-selection: var(--textile-accent);
  --bbx-selection-ink: var(--textile-accent-ink);
  --bbx-focus-ring: var(--textile-accent);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-app-nav {
  background: var(--textile-bar);
  color: var(--textile-bar-ink);
  border-bottom: 2px solid var(--textile-edge);
  padding-block: 7px;
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill) {
  background: transparent;
  color: var(--textile-bar-ink);
  border: 1px solid color-mix(in srgb, var(--textile-bar-ink) 45%, transparent);
  border-radius: 12px 8px 12px 8px;
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-composer-material) {
  background: var(--textile-paper);
  color: var(--textile-ink);
  border: 1px solid var(--textile-edge);
  border-radius: var(--textile-radius);
  box-shadow: var(--textile-shadow);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-user-paper {
  background: var(--textile-user);
  color: var(--textile-user-ink);
  border: 1px solid var(--textile-edge);
  border-radius: 22px 18px 6px 24px;
  box-shadow: var(--textile-shadow);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-body: var(--textile-ink);
  --tw-prose-bold: var(--textile-ink);
  --tw-prose-headings: var(--textile-ink);
  --tw-prose-links: var(--textile-accent);
  color: var(--textile-ink);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-callout > .bbx-chat-callout-context {
  color: var(--textile-soft);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-composer-material > section {
  background: transparent;
  border: 0;
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-composer-material textarea {
  background: var(--textile-paper);
  color: var(--textile-ink);
  border-color: var(--textile-edge);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-composer-material textarea::placeholder {
  color: var(--textile-placeholder);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled {
  background: var(--textile-accent);
  color: var(--textile-accent-ink);
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(#bbx-composer-add, #bbx-composer-capture, #bbx-composer-keyboard):enabled {
  background: var(--textile-sheet);
  color: var(--textile-ink);
  border-color: var(--textile-edge);
}
.bbx-card-theme:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) {
  --bbx-paper: var(--textile-paper);
  --bbx-ink: var(--textile-ink);
  --bbx-danger: var(--textile-danger);
  --bbx-ink-soft: var(--textile-soft);
  --bbx-pen: var(--textile-accent);
  --bbx-edge: var(--textile-edge);
  --bbx-underlay: var(--textile-underlay);
  --bbx-tint: var(--textile-sheet);
  --bbx-sheet: var(--textile-sheet);
  --bbx-quote-paper: var(--textile-sheet);
  --bbx-quote-layer-paper: var(--textile-sheet);
  --bbx-blockquote-paper: var(--textile-sheet);
  --bbx-blockquote-padding: 0.6em 1em;
  --bbx-blockquote-edge: 2px;
  --bbx-code-paper: var(--textile-code);
  --bbx-code-ink: var(--textile-code-ink);
  --bbx-sheet-radius: var(--textile-radius);
  --bbx-selection: var(--textile-accent);
  --bbx-selection-ink: var(--textile-accent-ink);
  --bbx-selection-code: var(--textile-code-ink);
  --bbx-selection-code-ink: var(--textile-code);
}
.bbx-card-surface:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) {
  box-shadow: var(--textile-shadow);
}
.bbx-card-theme[data-card-theme="rose-trellis"] {
  --bbx-bullet: #787642;
  --bbx-counter: #787642;
}
.bbx-card-surface:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) > .bbx-card-properties {
  border-radius: 0 12px 0 12px;
}
:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(button, textarea):focus-visible:not(.bbx-card-theme *) {
  outline: 2px solid var(--textile-accent);
  outline-offset: 3px;
}
@media (max-width: 639px) {
  .bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) {
    background-size: auto max(1000px, 100%);
    background-position: center top;
  }
}

/* Carry the textile gestures into the chrome, not just the desk. */
[data-chrome-theme="rose-trellis"] .bbx-app-nav {
  background: linear-gradient(100deg, #702a48ee, #933b58d9 55%, #ac574cbd),
    var(--textile-art) center 36% / cover;
  border-bottom: 3px solid #c8ba79;
}
[data-chrome-theme="rose-trellis"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill) {
  border-radius: 24px 7px 24px 7px;
  border-color: #f2ccad99;
  box-shadow: 2px 3px 0 #53203855;
}
[data-chrome-theme="rose-trellis"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice) { padding-inline: 18px; }
[data-chrome-theme="rose-trellis"] :is(#bbx-composer-add, #bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic, #bbx-composer-capture, #bbx-composer-keyboard) {
  border-radius: 27px 9px 27px 9px;
  box-shadow: 2px 3px 0 #b37f6a55;
}
[data-chrome-theme="rose-trellis"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled {
  background: linear-gradient(135deg, #762c4d, #b84e65 65%, #c37962);
}

/* Matte ink and flax: expression belongs to the cloth, controls stay quiet. */
[data-chrome-theme="gold-thread"] .bbx-app-nav {
  background: linear-gradient(100deg, #102139d9, #1b395899 55%, #18233dc9),
    var(--textile-art) center 60% / cover;
  border-bottom: 1px solid #63768a;
}
[data-chrome-theme="gold-thread"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill) {
  border-radius: 8px;
  border: 1px solid #6b7f96;
  background: #172c43;
  color: #ede7d9;
  box-shadow: none;
}
[data-chrome-theme="gold-thread"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice) { padding-inline: 14px; }
[data-chrome-theme="gold-thread"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled {
  background: #486787;
  color: #fff5df;
  border: 1px solid #859bb1;
  box-shadow: none;
}
[data-chrome-theme="gold-thread"] :is(#bbx-composer-add, #bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic, #bbx-composer-capture, #bbx-composer-keyboard) {
  border-radius: 10px;
}
[data-chrome-theme="gold-thread"] :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-composer-material),
.bbx-card-surface[data-card-theme="gold-thread"] {
  background-image: linear-gradient(125deg, #25415e50, transparent 60%);
  border-color: #4c6279;
}
[data-chrome-theme="gold-thread"] .bbx-chat-user-paper {
  background: var(--textile-user);
  border-color: #647f9a;
  border-radius: 14px 14px 5px 14px;
  box-shadow: none;
}

/* ---- textile-chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Production integration for the two approved textile palettes. */
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) {
  --bbx-desk-background: var(--textile-desk);
  --bbx-desk-pattern: none;
  --bbx-desk-edge: var(--textile-edge);
  --bbx-bar-paper: var(--textile-bar);
  --bbx-bar-edge: var(--textile-edge);
  --bbx-chat-user-ink: var(--textile-user-ink);
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-conversation-desk, .bbx-companion-desk[data-active-card], .bbx-interface-card-desk[data-card-content="card"]) { background: transparent; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-interface-tabstrip > [role="none"]::before,
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-interface-tabstrip > [role="none"]::after { background: transparent; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-interface-card-desk[data-card-content="neutral"] { background: #fbf5ee; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-app-nav > div { background: transparent; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-app-nav :is(button, a):focus-visible {
  outline: 2px solid var(--textile-bar-ink);
  outline-offset: 2px;
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: var(--textile-bar-ink); }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-composer-material > .bbx-composer-mobile-row {
  background: var(--textile-paper);
  color: var(--textile-ink);
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-user-paper {
  --bbx-selection: var(--textile-user-ink);
  --bbx-selection-ink: var(--textile-user);
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-user-paper :is(.bbx-chat-user-status, .bbx-chat-user-attachment-summary) { color: var(--textile-user-ink); }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-user-paper :is(.bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge) {
  background: #ffffff18;
  color: var(--textile-user-ink);
}
.bbx-box-presentation[data-chrome-theme="gold-thread"] .bbx-chat-user-paper .bbx-chat-user-attachment-badge { background: #00000040; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-user-attachment:hover { background: #ffffff30; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-user-unsure { text-decoration-color: var(--textile-user-ink); }
/* Nested cards supply their own material tokens. */
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-reply-material {
  --bbx-edge: var(--textile-edge);
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-quotes: var(--textile-ink);
  --tw-prose-code: var(--textile-ink);
  --tw-prose-counters: var(--textile-soft);
  --tw-prose-captions: var(--textile-soft);
  --tw-prose-bullets: var(--textile-accent);
  --tw-prose-quote-borders: var(--textile-edge);
  --tw-prose-hr: var(--textile-edge);
  --tw-prose-th-borders: var(--textile-edge);
  --tw-prose-td-borders: var(--textile-edge);
  --tw-prose-pre-bg: var(--textile-code);
  --tw-prose-pre-code: var(--textile-code-ink);
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-meta-material, .bbx-chat-pending-material, .bbx-chat-empty-label) {
  color: var(--textile-soft);
  background: var(--textile-paper);
  border-radius: 8px;
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-pending-material, .bbx-chat-empty-label) { padding: 6px 10px; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) { --bbx-ink: var(--textile-ink); --bbx-danger: var(--textile-danger); --bbx-ink-soft: var(--textile-soft); --bbx-pen: var(--textile-accent); }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) { color: var(--textile-ink); }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) #bbx-chat-load-older {
  background: var(--textile-paper);
  color: var(--textile-accent);
  border-radius: 8px;
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) #bbx-chat-load-older:enabled:hover { text-decoration: underline; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) #bbx-chat-load-older:disabled { color: var(--textile-soft); opacity: .6; }
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) [aria-label="Pane controls"] button {
  background: var(--textile-bar);
  color: var(--textile-bar-ink);
  border: 1px solid var(--textile-edge);
  border-radius: 8px;
}
.bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) [aria-label="Pane controls"] button:hover { background: var(--textile-sheet); color: var(--textile-ink); }
.bbx-card-theme[data-card-theme="gold-thread"],
[data-chrome-theme="gold-thread"] .bbx-composer-material { color-scheme: dark; }
.bbx-card-theme:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) { --bbx-font: ui-sans-serif, system-ui, sans-serif; --bbx-quote-edge: 2px; }
.bbx-interface-tab:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) {
  background-color: var(--textile-sheet);
  border-top-color: var(--textile-edge);
  border-left-color: var(--textile-edge);
  border-right-color: var(--textile-edge);
  border-radius: 14px 14px 0 0;
}
.bbx-interface-tab:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]):not([data-active="true"]):hover {
  background-color: color-mix(in srgb, var(--textile-paper) 78%, white);
}
.bbx-interface-tab:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"])[data-active="true"] { background: var(--textile-paper); }
.bbx-system-theme-preview:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) {
  background: var(--textile-art) center / cover, var(--textile-desk);
}
.bbx-system-theme-preview:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-system-theme-toolbar {
  background: var(--textile-bar);
  border-bottom: 2px solid var(--textile-edge);
}
.bbx-system-theme-preview:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-system-theme-toolbar i { background: var(--textile-bar-ink); }
.bbx-system-theme-preview:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) .bbx-system-theme-desk > span {
  background: var(--textile-paper);
  border-color: var(--textile-edge);
  border-radius: var(--textile-radius);
  box-shadow: var(--textile-shadow);
}
@media print {
  .bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]), .bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material), .bbx-card-theme:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) {
    background: transparent; color: #000; border: 0; box-shadow: none;
    --textile-paper: #fff; --textile-ink: #000; --textile-soft: #333; --textile-accent: #000;
    --textile-sheet: #fff; --textile-code: #fff; --textile-code-ink: #000;
    --textile-user: #fff; --textile-user-ink: #000;
  }
  .bbx-card-theme:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]), .bbx-box-presentation:is([data-chrome-theme="rose-trellis"], [data-chrome-theme="gold-thread"]) :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
    color-scheme: light;
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
  .bbx-card-surface:is([data-card-theme="rose-trellis"], [data-card-theme="gold-thread"]) {
    background: #fff; box-shadow: none;
  }
}

/* ---- phosphor.css (beebox/src/frontend/src/themes/) ---- */
/* Phosphor: a monochrome ANSI terminal, separated by text and tone instead of framed controls. */
.bbx-box-presentation[data-chrome-theme="phosphor"]{
  color:#80f58d;background:repeating-linear-gradient(0deg,#7eff8c0c 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 25%,#082d15,#020b05 78%);
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;--bbx-selection:#a5ffad;--bbx-selection-ink:#061009;--bbx-focus-ring:#a5ffad;--bbx-desk-background:#020b05;--bbx-desk-pattern:repeating-linear-gradient(0deg,#7eff8c0c 0 1px,transparent 1px 4px);--bbx-desk-edge:#237038;--bbx-bar-paper:#031008;--bbx-bar-edge:#237038;
}
[data-chrome-theme="phosphor"],.bbx-card-theme[data-card-theme="phosphor"]{font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace!important;}
[data-chrome-theme="phosphor"] :is(.bbx-conversation-desk,.bbx-companion-desk[data-active-card],.bbx-interface-card-desk[data-card-content="card"],.bbx-interface-tabstrip > [role="none"]::before,.bbx-interface-tabstrip > [role="none"]::after,.bbx-app-nav > div){background:transparent;}
[data-chrome-theme="phosphor"] .bbx-interface-card-desk[data-card-content="neutral"]{background:#06130a;}
[data-chrome-theme="phosphor"] :is(.bbx-chat-meta-material,.bbx-chat-pending-material,.bbx-chat-empty-label){color:#60bb70;background:#06130a;}
[data-chrome-theme="phosphor"] #bbx-chat-load-older{color:#80f58d;background:#06130a;border:1px solid #237038;}
[data-chrome-theme="phosphor"] [aria-label="Pane controls"] button{color:#80f58d;background:#031008;border:1px solid #237038;}
[data-chrome-theme="phosphor"] [aria-label="Pane controls"] button:hover{color:#020b05;background:#80f58d;}
.bbx-interface-tab[data-card-theme="phosphor"]{color:#83ed91;background:#06130a;border-color:#237038;border-radius:0;}
.bbx-interface-tab[data-card-theme="phosphor"][data-active="true"]{background:#0b2411;}
.bbx-system-theme-preview[data-chrome-theme="phosphor"]{--bbx-desk-background:#020b05;background:repeating-linear-gradient(0deg,#7eff8c0c 0 1px,transparent 1px 4px),#020b05;}
.bbx-system-theme-preview[data-chrome-theme="phosphor"] .bbx-system-theme-toolbar{background:#031008;border-color:#237038;}
.bbx-system-theme-preview[data-chrome-theme="phosphor"] .bbx-system-theme-desk>span{background:#0b2411;border-color:#328646;box-shadow:0 0 5px #55ed6c55;}

[data-chrome-theme="phosphor"] .bbx-app-nav{
  color:#8bff98;background:#031008;border:0;box-shadow:none;font:600 13px/1.4 "IBM Plex Mono","SFMono-Regular",Consolas,monospace;text-shadow:0 0 8px #45ff6766;padding-block:8px;
}
[data-chrome-theme="phosphor"] .bbx-app-nav button:not(#bbx-nav-errors){
  color:#7cf08c;background:transparent;border:0;outline:0;padding:4px 10px;box-shadow:none;font-family:inherit;text-transform:uppercase;letter-spacing:.08em;
}
[data-chrome-theme="phosphor"] .bbx-app-nav button:not(#bbx-nav-errors)::before{content:"[ ";color:#3baa55;}
[data-chrome-theme="phosphor"] .bbx-app-nav button:not(#bbx-nav-errors)::after{content:" ]";color:#3baa55;}
[data-chrome-theme="phosphor"] :is(.bbx-chat-reply-material,.bbx-chat-callout,.bbx-composer-material){color:#82ed91;background:#03130a;border:0;box-shadow:none;}
[data-chrome-theme="phosphor"] .bbx-chat-reply-material{background:#03130a;}
/* Material ink, read by text in the reply, pending and meta materials and on the neutral file desk. */
[data-chrome-theme="phosphor"] :is(.bbx-chat-reply-material,.bbx-chat-pending-material,.bbx-chat-meta-material,.bbx-interface-card-desk[data-card-content="neutral"]){--bbx-ink:#82ed91;--bbx-danger:#e36379;--bbx-ink-soft:#60bb70;--bbx-pen:#b5ffc0;}
[data-chrome-theme="phosphor"] .bbx-chat-reply-material::before{content:"┌─ INCOMING ─────────────────────────────────────────────";display:block;color:#51c468;font:11px/1 monospace;white-space:nowrap;overflow:hidden;margin:0 0 12px;}
[data-chrome-theme="phosphor"] .bbx-chat-user-paper{color:#a7ffb1;background:#071a0c;border:0;box-shadow:none;}
[data-chrome-theme="phosphor"] .bbx-chat-user-paper :is(.bbx-chat-user-token,.bbx-chat-user-attachment,.bbx-chat-user-attachment-badge){background:#ffffff1f;}
[data-chrome-theme="phosphor"] .bbx-chat-user-paper::before{content:"> ";color:#44d45d;font-weight:700;}
[data-chrome-theme="phosphor"] :is(.bbx-chat-reply-material,.bbx-chat-callout) .prose:not(.bbx-card-theme *){color:#82ed91;--tw-prose-body:#82ed91;--tw-prose-bold:#b5ffc0;--tw-prose-headings:#a4ffb0;--tw-prose-links:#b5ffc0;--tw-prose-code:#b5ffc0;font-family:inherit;}
[data-chrome-theme="phosphor"] .bbx-chat-callout{background:#05170a;}
[data-chrome-theme="phosphor"] .bbx-chat-callout>.bbx-chat-callout-context{color:#58be6d;}
[data-chrome-theme="phosphor"] .bbx-composer-material{position:relative;background:#03130a;}
[data-chrome-theme="phosphor"] .bbx-composer-material::before{content:"┌─ COMMAND ──────────────────────────────────────────────";display:block;color:#51c468;font:11px/1 monospace;white-space:nowrap;overflow:hidden;margin-bottom:9px;}
[data-chrome-theme="phosphor"] .bbx-composer-material>div.bg-gradient-to-r{background:transparent;}
[data-chrome-theme="phosphor"] .bbx-composer-material>section{background:transparent;border:0;}
[data-chrome-theme="phosphor"] .bbx-composer-material textarea{color:#a7ffb1;background:#020b05;border:0!important;box-shadow:none!important;outline:0;font-family:inherit;font-size:13px;line-height:1.5;}
[data-chrome-theme="phosphor"] .bbx-composer-material textarea::placeholder{color:#316f3e;}
[data-chrome-theme="phosphor"] :is(#bbx-composer-add,#bbx-composer-capture,#bbx-composer-keyboard,#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic,#bbx-composer-dictation-cancel,#bbx-composer-dictation-edit,#bbx-composer-dictation-cancel-mobile,#bbx-composer-dictation-edit-mobile){
  position:relative;min-width:0;padding:8px 4px;color:#78ed8a;background:transparent;border:0;box-shadow:none;font:600 11px/1 monospace;letter-spacing:-.04em;white-space:nowrap;
}
[data-chrome-theme="phosphor"]  :is(#bbx-composer-add,#bbx-composer-capture,#bbx-composer-keyboard,#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic,#bbx-composer-dictation-cancel,#bbx-composer-dictation-edit,#bbx-composer-dictation-cancel-mobile,#bbx-composer-dictation-edit-mobile) svg{display:none;}
[data-chrome-theme="phosphor"] #bbx-composer-mic[title="Resume recording (stops speech)"]>span{display:none;}
[data-chrome-theme="phosphor"] #bbx-composer-mic[title="Stop recording"]::after{content:"[STOP]";}
[data-chrome-theme="phosphor"] #bbx-composer-mic[title="Resume recording (stops speech)"]::after{content:"[RESUME]";}
[data-chrome-theme="phosphor"] #bbx-composer-mic[title="Voice input (narration mode)"]::after{content:"[NARR]";}
[data-chrome-theme="phosphor"] #bbx-composer-mic[title="Voice input"]::after{content:"[REC]";}
[data-chrome-theme="phosphor"] #bbx-composer-add::after{content:"[ + ]";}
[data-chrome-theme="phosphor"] #bbx-composer-capture::after{content:"[CAM]";}
[data-chrome-theme="phosphor"] #bbx-composer-keyboard::after{content:"[KEY]";}
[data-chrome-theme="phosphor"] :is(#bbx-composer-send,#bbx-composer-send-mobile)::after{content:"[SEND]";}
[data-chrome-theme="phosphor"] #bbx-composer-dictation-cancel::after{content:"[CANCEL]";}
[data-chrome-theme="phosphor"] #bbx-composer-dictation-edit::after{content:"[EDIT]";}
[data-chrome-theme="phosphor"] #bbx-composer-dictation-cancel-mobile::after{content:"[CANCEL]";}
[data-chrome-theme="phosphor"] #bbx-composer-dictation-edit-mobile::after{content:"[EDIT]";}
/* The cancel is a round icon button elsewhere; here it sizes to its label. */
[data-chrome-theme="phosphor"] :is(#bbx-composer-dictation-cancel,#bbx-composer-dictation-cancel-mobile){width:auto;height:auto;opacity:1;}
[data-chrome-theme="phosphor"] #bbx-composer-mic::after{content:"[REC]";}
[data-chrome-theme="phosphor"] :is(#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic,#bbx-composer-dictation-cancel,#bbx-composer-dictation-edit,#bbx-composer-dictation-cancel-mobile,#bbx-composer-dictation-edit-mobile):enabled{color:#a7ffb1;background:#092313;}
[data-chrome-theme="phosphor"] :is(#bbx-composer-send,#bbx-composer-send-mobile):disabled{color:#3f7a4a;background:transparent;}
.bbx-card-theme[data-card-theme="phosphor"]{
  --bbx-paper:#041108;--bbx-ink:#83ed91;--bbx-ink-soft:#60bb70;--bbx-pen:#a7ffb1;--bbx-edge:#328646;--bbx-underlay:#020804;--bbx-tint:#082311;--bbx-sheet:#082311;--bbx-quote-paper:#082311;--bbx-quote-layer-paper:#082311;--bbx-blockquote-paper:#082311;--bbx-blockquote-padding:.6em 1em;--bbx-blockquote-edge:0;--bbx-code-paper:#020804;--bbx-code-ink:#a7ffb1;--bbx-sheet-radius:0;--bbx-slip-light:#ffffff0c;--bbx-slip-edge-light:#ffffff26;--bbx-selection:#a7ffb1;--bbx-selection-ink:#020804;--bbx-bullet:#70ec83;--bbx-counter:#70ec83;color-scheme:dark;
  --bbx-danger:#e36379;
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
.bbx-card-surface[data-card-theme="phosphor"]{background:#041108;border:0;box-shadow:none;}
.bbx-card-theme[data-card-theme="phosphor"] .bbx-card-heading{background:#061a0b;border:0;}
/* The bracketed Properties button is wider than the default fold; the title, the line beside it, wraps clear of it. */
.bbx-card-theme[data-card-theme="phosphor"] > .bbx-card-heading h2{margin-right:4rem;}
.bbx-card-theme[data-card-theme="phosphor"] .bbx-card-heading h2{font:600 14px/1.4 "IBM Plex Mono","SFMono-Regular",Consolas,monospace;text-shadow:0 0 7px #55ed6c55;}
.bbx-card-theme[data-card-theme="phosphor"] .bbx-card-heading h2::before{content:"./ ";color:#51c468;}
.bbx-card-theme[data-card-theme="phosphor"]>.bbx-card-properties{display:flex;align-items:center;justify-content:center;width:auto;min-width:84px;height:30px;top:8px;right:8px;padding:4px 7px;background:#082311;border:0;box-shadow:none;}
.bbx-card-theme[data-card-theme="phosphor"] .bbx-card-properties-label{position:static;opacity:1;transform:none;height:auto;color:#78ed8a;font:10px/1.3 monospace;}
.bbx-card-theme[data-card-theme="phosphor"] .bbx-card-properties-label::before{content:"[ ";color:#51c468;}
.bbx-card-theme[data-card-theme="phosphor"] .bbx-card-properties-label::after{content:" ]";color:#51c468;}
.bbx-card-theme[data-card-theme="phosphor"] #bbx-studio-action{background:#0a2b15;color:#a7ffb1;border:0;}
.bbx-card-theme[data-card-theme="phosphor"] #bbx-studio-action::before{content:"[ ";}
.bbx-card-theme[data-card-theme="phosphor"] #bbx-studio-action::after{content:" ]";}
.bbx-card-theme[data-card-theme="phosphor"] #bbx-studio-disabled{background:#041108;color:#488454;border:0;}
[data-chrome-theme="phosphor"] :is(button,textarea,input):focus-visible:not(.bbx-card-theme *):not(.bbx-card-theme){outline:2px solid #b4ffbd;outline-offset:2px;}
.bbx-card-theme[data-card-theme="phosphor"] :is(button,textarea,input):focus-visible{outline:2px solid #b4ffbd;outline-offset:2px;}
@media(hover:hover){[data-chrome-theme="phosphor"] .bbx-app-nav button:hover:not(#bbx-nav-errors){color:#d0ffd4;background:#0b2e15;}}

/* Preserve semantic states and focus while keeping the terminal's text-first control language. */
[data-chrome-theme="phosphor"] :is(button,a,[role="button"],textarea,input):focus-visible:not(.bbx-card-theme *):not(.bbx-card-theme){outline:2px solid #b4ffbd!important;outline-offset:2px;background-color:#092313;}
[data-chrome-theme="phosphor"] .bbx-app-nav :is(button,a):not(#bbx-nav-errors){box-shadow:none;border:0;}
[data-chrome-theme="phosphor"] .bbx-chat-reply-material,[data-chrome-theme="phosphor"] .bbx-chat-callout,[data-chrome-theme="phosphor"] .bbx-composer-material,[data-chrome-theme="phosphor"] .bbx-chat-user-paper{border:0;box-shadow:none;border-radius:0;}
.bbx-card-theme[data-card-theme="phosphor"] :is(button,a,[role="button"]){border-radius:0;box-shadow:none;}

[data-chrome-theme="phosphor"] :is(#bbx-composer-add,#bbx-composer-capture,#bbx-composer-keyboard,#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic,#bbx-composer-dictation-cancel,#bbx-composer-dictation-edit,#bbx-composer-dictation-cancel-mobile,#bbx-composer-dictation-edit-mobile){border-radius:0!important;box-shadow:none!important;background:transparent;}
[data-chrome-theme="phosphor"] :is(#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic,#bbx-composer-dictation-cancel,#bbx-composer-dictation-edit,#bbx-composer-dictation-cancel-mobile,#bbx-composer-dictation-edit-mobile):enabled{background:#092313;}
[data-chrome-theme="phosphor"] #bbx-nav-profile{position:relative;color:#7cf08c;background:transparent;border:0;box-shadow:none;}
[data-chrome-theme="phosphor"] #bbx-nav-profile img{display:none;}
[data-chrome-theme="phosphor"] #bbx-nav-profile::before{content:"[ MENU ]";font:600 11px/1 monospace;letter-spacing:.04em;}
[data-chrome-theme="phosphor"] #bbx-nav-profile::after{content:none;}
[data-chrome-theme="phosphor"] #bbx-nav-profile>[role="img"]{display:none;}
[data-chrome-theme="phosphor"] .bbx-place-pill{font-family:inherit;color:#8bff98;background:#031008;}
[data-chrome-theme="phosphor"] .bbx-app-nav button:not(#bbx-nav-errors)::before{content:"[ ";color:#3baa55;}
[data-chrome-theme="phosphor"] .bbx-app-nav button:not(#bbx-nav-errors)::after{content:" ]";color:#3baa55;}
[data-chrome-theme="phosphor"] #bbx-nav-errors{color:#f45b58;background:#32100d;}
[data-chrome-theme="phosphor"] #bbx-nav-errors::before,[data-chrome-theme="phosphor"] #bbx-nav-errors::after{content:none;}

/* ---- overprint.css (beebox/src/frontend/src/themes/) ---- */
/* A49: the same overprinted plate shifts toward gray under translucent ink layers. */
:is([data-chrome-theme="overprint"],.bbx-card-theme[data-card-theme="overprint"]){--op-art:url("./overprint-art.webp");--op-size:800px auto;--op-ink:#18234b;--bbx-selection:#f1b63e;--bbx-selection-ink:#211c48;--bbx-focus-ring:#29204f;}
.bbx-box-presentation[data-chrome-theme="overprint"]{--bbx-desk-background:#d8d0c2;--bbx-desk-pattern:none;--bbx-desk-edge:#25224b;--bbx-bar-paper:#292552;--bbx-bar-edge:#192146;background:var(--op-art) center/cover fixed #d8492e;color:var(--op-ink);}
[data-chrome-theme="overprint"] :is(.bbx-conversation-desk,.bbx-companion-desk[data-active-card],.bbx-interface-card-desk[data-card-content="card"],.bbx-interface-tabstrip > [role="none"]::before,.bbx-interface-tabstrip > [role="none"]::after,.bbx-app-nav > div){background:transparent;}
[data-chrome-theme="overprint"] .bbx-interface-card-desk[data-card-content="neutral"]{background:#d8d0c2;}
[data-chrome-theme="overprint"] :is(.bbx-chat-meta-material,.bbx-chat-pending-material,.bbx-chat-empty-label){color:#e9e1d0;background:#292552;}
[data-chrome-theme="overprint"] #bbx-chat-load-older{color:#fff1d3;background:#292552;border:1px solid #315db7;}
[data-chrome-theme="overprint"] [aria-label="Pane controls"] button{color:#fff1d3;background:#292552;border:1px solid #e7b13e;border-radius:2px;}
[data-chrome-theme="overprint"] [aria-label="Pane controls"] button:hover{color:#24204a;background:#e9ad34;}
.bbx-interface-tab[data-card-theme="overprint"]{color:#fff1d3;background:#292552;border-color:#315db7;border-radius:2px 2px 0 0;}
.bbx-interface-tab[data-card-theme="overprint"][data-active="true"]{color:#24204a;background:#e9ad34;}
.bbx-system-theme-preview[data-chrome-theme="overprint"]{background:var(--op-art) center/cover #d8492e;}
.bbx-system-theme-preview[data-chrome-theme="overprint"] .bbx-system-theme-toolbar{color:#fff1d3;background:var(--op-art) center/var(--op-size) no-repeat #292552;border-color:#e7b13e;}
.bbx-system-theme-preview[data-chrome-theme="overprint"] .bbx-system-theme-desk>span{background:var(--op-art) center/var(--op-size) #315db7;border-color:#192146;box-shadow:3px 3px 0 #192146;}
[data-chrome-theme="overprint"] .bbx-app-nav{color:#fff1d3;background:var(--op-art) center/max(800px, 100%) auto no-repeat #292552;background-blend-mode:soft-light;border-bottom:3px solid #e7b13e;padding-block:8px;}
[data-chrome-theme="overprint"] .bbx-app-nav button:not(#bbx-nav-errors){color:#fff2d5;background:var(--op-art) center/var(--op-size) no-repeat #22468c;background-blend-mode:soft-light;border:2px solid #192146;border-radius:2px;box-shadow:3px 3px 0 #192146;font-weight:700;}
[data-chrome-theme="overprint"] :is(.bbx-chat-reply-material,.bbx-chat-callout,.bbx-composer-material){color:var(--op-ink);background-color:#a8afb6;background-image:linear-gradient(#eee7d6aa,#eee7d6aa),linear-gradient(#566b9b24,#566b9b24),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center;background-repeat:no-repeat;border:2px solid #20244c;box-shadow:4px 4px 0 #20244c;}
[data-chrome-theme="overprint"] .bbx-composer-material{border-radius:18px 18px 4px 4px;}
[data-chrome-theme="overprint"] .bbx-chat-user-paper{color:#fff4dc;background-color:#969499;background-image:linear-gradient(#8e3a35d9,#8e3a35d9),linear-gradient(#a7493f32,#a7493f32),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center,center,24% 68%;background-repeat:no-repeat;border:2px solid #24214c;border-radius:22px 5px 22px 22px;box-shadow:4px 4px 0 #24214c;}
[data-chrome-theme="overprint"] :is(.bbx-chat-reply-material,.bbx-chat-callout) .prose:not(.bbx-card-theme *){color:#18234b;--tw-prose-body:#18234b;--tw-prose-bold:#16204a;--tw-prose-headings:#18234b;--tw-prose-links:#8e2c38;--tw-prose-code:#18234b;}
[data-chrome-theme="overprint"] .bbx-chat-callout>.bbx-chat-callout-context{color:#333d59;}
/* Chat material ink: the reply is light paper, the meta and pending lines dark. */
[data-chrome-theme="overprint"] .bbx-chat-reply-material{--bbx-ink:#18234b;--bbx-danger:#7a052b;--bbx-ink-soft:#303954;--bbx-pen:#74201f;}
[data-chrome-theme="overprint"] :is(.bbx-chat-meta-material,.bbx-chat-pending-material){--bbx-ink:#fff1d3;--bbx-danger:#f27085;--bbx-ink-soft:#e9e1d0;--bbx-pen:#fff1d3;}
[data-chrome-theme="overprint"] .bbx-composer-material{color:#fff0ce;}
[data-chrome-theme="overprint"] .bbx-composer-material>section{background:transparent;border:0;}
[data-chrome-theme="overprint"] .bbx-composer-material>div.bg-gradient-to-r{background:transparent;}
[data-chrome-theme="overprint"] .bbx-composer-material textarea{color:#18234b;background-color:#b8b2a9;background-image:linear-gradient(#eee7d6b0,#eee7d6b0),linear-gradient(#ba895b24,#ba895b24),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center;background-repeat:no-repeat;border:2px solid #273357;}
[data-chrome-theme="overprint"] .bbx-composer-material textarea::placeholder{color:#505469;}
/* The cancel × takes the bar's text colour; the bar's cream is for its dark buttons, so give it the draft's ink. */
[data-chrome-theme="overprint"] :is(#bbx-composer-dictation-cancel,#bbx-composer-dictation-cancel-mobile){color:#18234b;}
[data-chrome-theme="overprint"] :is(#bbx-composer-send,#bbx-composer-send-mobile):enabled{color:#fff4d8;background-color:#909cae;background-image:linear-gradient(#344f91a8,#344f91a8),linear-gradient(#4266ad30,#4266ad30),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center,center,65% 55%;background-repeat:no-repeat;border:2px solid #192146;border-radius:9999px 9999px 5px 9999px;box-shadow:3px 3px 0 #192146;}
[data-chrome-theme="overprint"] #bbx-composer-mic:enabled{color:#fff4d8;background-color:#999396;background-image:linear-gradient(#a7493faa,#a7493faa),linear-gradient(#a7493f30,#a7493f30),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center,center,10% 62%;background-repeat:no-repeat;border:2px solid #192146;box-shadow:3px 3px 0 #192146;}
[data-chrome-theme="overprint"] :is(#bbx-composer-add,#bbx-composer-capture,#bbx-composer-keyboard):enabled{color:#1b214b;background-color:#b7b0a1;background-image:linear-gradient(#ead69ca8,#ead69ca8),linear-gradient(#d7ad4c2c,#d7ad4c2c),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center,center,55% 80%;background-repeat:no-repeat;border:2px solid #192146;box-shadow:3px 3px 0 #192146;}
.bbx-card-theme[data-card-theme="overprint"]{--bbx-paper:#a8afb6;--bbx-ink:#18234b;--bbx-danger:#7a052b;--bbx-ink-soft:#303954;--bbx-pen:#74201f;--bbx-edge:#24284d;--bbx-underlay:#283c80;--bbx-tint:#e6bc55;--bbx-sheet:#afb5b7;--bbx-quote-paper:#bdb6aa;--bbx-quote-layer-paper:#bdb6aa;--bbx-blockquote-paper:#bdb6aa;--bbx-blockquote-padding:.6em 1em;--bbx-blockquote-edge:3px;--bbx-code-paper:#25204e;--bbx-code-ink:#f6e8c8;--bbx-sheet-radius:2px;--bbx-bullet:#c43c31;--bbx-counter:#315db7;}
.bbx-card-surface[data-card-theme="overprint"]{color:var(--op-ink);background-color:#a8afb6;background-image:linear-gradient(#eee7d6aa,#eee7d6aa),linear-gradient(#566b9b24,#566b9b24),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center;background-repeat:no-repeat;border:2px solid #20244c;box-shadow:4px 5px 0 #20244c;}
.bbx-card-theme[data-card-theme="overprint"]>.bbx-card-heading{color:#172047;background-color:#b7b0a1;background-image:linear-gradient(#ead69ca8,#ead69ca8),linear-gradient(#d7ad4c2c,#d7ad4c2c),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center,center,52% 10%;background-repeat:no-repeat;border-bottom:2px solid #25224b;}
.bbx-card-surface[data-card-theme="overprint"]>.bbx-card-properties{color:#fff4dc;background-color:#999396;background-image:linear-gradient(#a7493faa,#a7493faa),linear-gradient(#a7493f30,#a7493f30),var(--op-art);background-blend-mode:normal,color,luminosity;background-size:auto,auto,cover;background-position:center,center,10% 62%;background-repeat:no-repeat;border:1px solid #25224b;border-radius:2px;}
[data-chrome-theme="overprint"] :is(button,textarea):focus-visible:not(.bbx-card-theme *){outline:3px solid #f2b840;outline-offset:2px;}
@media(max-width:639px){.bbx-box-presentation[data-chrome-theme="overprint"]{background-size:auto max(920px, 100%);background-position:52% top;background-attachment:scroll;}[data-chrome-theme="overprint"] :is(.bbx-chat-reply-material,.bbx-chat-callout,.bbx-composer-material,.bbx-app-nav,.bbx-app-nav button),.bbx-card-surface[data-card-theme="overprint"]{background-size:auto,auto,cover;background-attachment:scroll;}}

/* ---- posy.css (beebox/src/frontend/src/themes/) ---- */
/* A23: keep the painterly backdrop bold; give controls a quiet hand-drawn frame. */
:is([data-chrome-theme="posy"],.bbx-card-theme[data-card-theme="posy"]){--posy-art:url("./posy-paisley.webp");--posy-frame:url("./posy-quiet-frame.svg");--posy-ink:#201525;--bbx-selection:#d4136a;--bbx-selection-ink:#fff7ed;--bbx-focus-ring:#201525;}
.bbx-box-presentation[data-chrome-theme="posy"]{--bbx-desk-background:#f8e4e8;--bbx-desk-pattern:none;--bbx-desk-edge:#c7b6cf;--bbx-bar-paper:#ffe2e9;--bbx-bar-edge:#c7b6cf;color:var(--posy-ink);background-color:#ef3b82;background-image:linear-gradient(125deg,#f0197840,transparent 48%,#63d0ae38),var(--posy-art);background-size:auto,cover;background-position:center;background-blend-mode:normal;}
[data-chrome-theme="posy"] :is(.bbx-conversation-desk,.bbx-companion-desk[data-active-card],.bbx-interface-card-desk[data-card-content="card"],.bbx-interface-tabstrip > [role="none"]::before,.bbx-interface-tabstrip > [role="none"]::after,.bbx-app-nav > div){background:transparent;}
[data-chrome-theme="posy"] .bbx-interface-card-desk[data-card-content="neutral"]{background:#f8e4e8;}
[data-chrome-theme="posy"] :is(.bbx-chat-meta-material,.bbx-chat-pending-material,.bbx-chat-empty-label){color:#67467b;background:#fff7f0;}
[data-chrome-theme="posy"] #bbx-chat-load-older{color:#67467b;background:#fff7f0;border:1px solid #c7b6cf;}
[data-chrome-theme="posy"] [aria-label="Pane controls"] button{color:#201525;background:#ffe2e9;border:1px solid #c7b6cf;border-radius:2px;}
[data-chrome-theme="posy"] [aria-label="Pane controls"] button:hover{color:#fff4e9;background:#f01978;}
.bbx-interface-tab[data-card-theme="posy"]{color:#201525;background:#fff7f0;border-color:#c7b6cf;border-radius:2px 2px 0 0;}
.bbx-interface-tab[data-card-theme="posy"][data-active="true"]{background:#ffd6e1;}
.bbx-system-theme-preview[data-chrome-theme="posy"]{background:var(--posy-art) center/cover #ef3b82;}
.bbx-system-theme-preview[data-chrome-theme="posy"] .bbx-system-theme-toolbar{color:#201525;background:#ffe2e9;border-color:#c7b6cf;}
.bbx-system-theme-preview[data-chrome-theme="posy"] .bbx-system-theme-desk>span{background:#ffd6e1;border-color:#b8a8c2;box-shadow:2px 2px 0 #c8b9cf;}
[data-chrome-theme="posy"] .bbx-app-nav{color:var(--posy-ink);background:#ffe2e9;border-bottom:2px solid #c7b6cf;padding-block:9px;}
[data-chrome-theme="posy"] .bbx-app-nav button:not(#bbx-nav-errors){color:#201525;background:#ffdf55;border:1px solid #9b88a4;border-radius:2px;box-shadow:2px 2px 0 #c8b9cf;font-weight:700;}
[data-chrome-theme="posy"] :is(.bbx-chat-reply-material,.bbx-chat-callout,.bbx-composer-material){color:var(--posy-ink);background:#fff7f0;border:4px solid transparent;border-image:var(--posy-frame) 24 / 4px / 0 stretch;box-shadow:0 2px 5px #52374720;}
[data-chrome-theme="posy"] .bbx-chat-user-paper{color:#fff8ef;background:#c8125f;border:1px solid #b99eb1;border-radius:2px;box-shadow:2px 2px 0 #c8b9cf;}
[data-chrome-theme="posy"] :is(.bbx-chat-reply-material,.bbx-chat-callout) .prose:not(.bbx-card-theme *){color:var(--posy-ink);--tw-prose-body:var(--posy-ink);--tw-prose-headings:var(--posy-ink);--tw-prose-bold:var(--posy-ink);--tw-prose-links:#ad1557;}
[data-chrome-theme="posy"] .bbx-chat-callout>.bbx-chat-callout-context{color:#67467b;}
[data-chrome-theme="posy"] .bbx-composer-material>section{background:transparent;border:0;}
[data-chrome-theme="posy"] .bbx-composer-material>div.bg-gradient-to-r{background:transparent;}
[data-chrome-theme="posy"] .bbx-composer-material textarea{background:#fff7f0;color:var(--posy-ink);border:1px solid #b8a8c2;}
[data-chrome-theme="posy"] .bbx-composer-material textarea::placeholder{color:#998292;}
[data-chrome-theme="posy"] :is(#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic[data-mic="idle"]):enabled{background:#f01978;color:#fff5eb;border:1px solid #ad91a8;border-radius:2px;box-shadow:2px 2px 0 #c8b9cf;}
[data-chrome-theme="posy"] :is(#bbx-composer-add,#bbx-composer-capture,#bbx-composer-keyboard):enabled{background:#72cfb0;color:#201525;border:1px solid #9eaaa8;border-radius:2px;box-shadow:2px 2px 0 #c8b9cf;}
.bbx-card-theme[data-card-theme="posy"]{--bbx-paper:#fff7f0;--bbx-ink:#201525;--bbx-danger:#a82c49;--bbx-ink-soft:#624b63;--bbx-pen:#ad1557;--bbx-edge:#b8a8c2;--bbx-underlay:#f4c8d8;--bbx-tint:#ffdf55;--bbx-sheet:#fae6ec;--bbx-quote-paper:#e8daf5;--bbx-quote-layer-paper:#e8daf5;--bbx-blockquote-paper:#e8daf5;--bbx-blockquote-padding:.6em 1em;--bbx-blockquote-edge:2px;--bbx-code-paper:#d5eee3;--bbx-code-ink:#253f37;--bbx-sheet-radius:2px;--bbx-bullet:#e91e78;--bbx-counter:#7653b0;}
.bbx-card-surface[data-card-theme="posy"]{border:4px solid transparent;border-image:var(--posy-frame) 24 / 4px / 0 stretch;box-shadow:0 3px 8px #52374724;background:#fff7f0;}
.bbx-card-theme[data-card-theme="posy"] .bbx-card-heading{position:relative;overflow:hidden;padding-bottom:14px;background:#ffd6e1;border-bottom:1px solid #c7b6cf;}
.bbx-card-theme[data-card-theme="posy"] .bbx-card-heading::before{content:"";position:absolute;top:4px;right:58px;width:112px;height:42px;pointer-events:none;opacity:.32;mix-blend-mode:multiply;background:var(--posy-art) 74% 58%/250px auto no-repeat;clip-path:polygon(2% 22%,12% 10%,24% 15%,38% 2%,50% 12%,63% 4%,73% 15%,87% 11%,99% 22%,94% 39%,100% 57%,88% 69%,95% 82%,79% 96%,63% 88%,48% 100%,34% 88%,18% 96%,9% 80%,1% 65%,7% 47%);}
.bbx-card-theme[data-card-theme="posy"] .bbx-card-heading::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:5px;background:linear-gradient(90deg,#c7b6cf 0 48%,transparent 48% 52%,#b7cfc5 52%) 0 50%/12px 2px repeat-x;opacity:.75;}
.bbx-card-surface[data-card-theme="posy"]>.bbx-card-properties{background:#dff2e8;color:#36584d;border:1px solid #b8ccc3;border-radius:2px;box-shadow:1px 1px 0 #d5c8d7;}
[data-chrome-theme="posy"] :is(button,textarea):focus-visible:not(.bbx-card-theme *){outline:3px solid #201525;outline-offset:3px;}
@media(max-width:639px){.bbx-box-presentation[data-chrome-theme="posy"]{background-position:center top;background-size:auto,auto max(920px, 100%);}}

[data-chrome-theme="posy"] .bbx-chat-reply-material{position:relative;}
[data-chrome-theme="posy"] .bbx-chat-reply-material::after{content:"";position:absolute;right:14px;bottom:12px;width:36px;height:36px;pointer-events:none;opacity:.17;mix-blend-mode:multiply;background:var(--posy-art) 74% 58%/210px auto no-repeat;clip-path:polygon(10% 8%,24% 13%,34% 0,45% 11%,61% 7%,69% 21%,90% 19%,83% 38%,100% 48%,84% 61%,88% 78%,68% 74%,55% 100%,43% 81%,23% 88%,25% 68%,0 56%,16% 41%);}

/* ---- goldfish.css (beebox/src/frontend/src/themes/) ---- */
/* Goldfish: flowing veiltails, underwater light and quiet violet controls. */
.bbx-box-presentation[data-chrome-theme="goldfish"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #73bbbf;
  --bbx-selection: #f38630;
  --bbx-selection-ink: #1d3533;
  --bbx-focus-ring: #27686c;
}
.bbx-box-presentation[data-chrome-theme="goldfish"]:not(.bbx-system-theme-preview)::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -18px;
  background: url("./goldfish-underwater.webp") center bottom / cover no-repeat;
  animation: goldfish-drift 70s ease-in-out infinite alternate;
}
@keyframes goldfish-drift {
  0%, 12% { transform: translate(-5px, 2px) scale(1.015); }
  65% { transform: translate(4px, -4px) scale(1.025); }
  100% { transform: translate(7px, 2px) scale(1.015); }
}
[data-chrome-theme="goldfish"] .bbx-app-nav {
  color: #eff8ed;
  background: linear-gradient(110deg, #255c70, #317e83 58%, #586f96);
  border-bottom: 2px solid #c6d8bc;
  box-shadow: 0 3px 0 #77b6b51f;
}
[data-chrome-theme="goldfish"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill) {
  color: #f2f5eb;
  background: #30656f;
  border: 1px solid #8ebfbe;
  border-radius: 18px 18px 14px 14px;
  box-shadow: 0 2px #518d8b24;
}
[data-chrome-theme="goldfish"] :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-composer-material) {
  color: #294d4b;
  background: #f6f8ed;
  border: 1px solid #93bfaf;
  border-radius: 20px;
  box-shadow: 0 5px 0 #5f9f9826, 0 8px 24px #3b858512;
}
[data-chrome-theme="goldfish"] .bbx-chat-user-paper {
  color: #214b54;
  background: #c0e3de;
  border: 1px solid #74b7b5;
  border-radius: 25px 25px 8px 25px;
  box-shadow: 0 4px 0 #79b5a43b;
}
[data-chrome-theme="goldfish"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-body: #294d4b;
  --tw-prose-bold: #21494b;
  --tw-prose-headings: #21494b;
  --tw-prose-links: #27686c;
  color: #294d4b;
}
[data-chrome-theme="goldfish"] .bbx-chat-callout > .bbx-chat-callout-context {
  color: #566b58;
}
[data-chrome-theme="goldfish"] .bbx-composer-material > section {
  background: transparent;
  border: 0;
}
[data-chrome-theme="goldfish"] .bbx-composer-material textarea {
  color: #294d4b;
  background: #f6f8ed;
  border-color: #93bfaf;
}
[data-chrome-theme="goldfish"] .bbx-composer-material textarea::placeholder { color: #798c7f; }
[data-chrome-theme="goldfish"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled {
  color: #fff8ee;
  background: #626aab;
  border: 1px solid #4f578e;
  border-radius: 18px;
}
[data-chrome-theme="goldfish"] :is(#bbx-composer-add, #bbx-composer-capture, #bbx-composer-keyboard):enabled {
  color: #294d4b;
  background: #e1e1ef;
  border-color: #93bfaf;
  border-radius: 16px;
}
.bbx-card-theme[data-card-theme="goldfish"] {
  --bbx-paper: #f6f8ed;
  --bbx-ink: #294d4b;
  --bbx-danger: #a92d4a;
  --bbx-ink-soft: #56675a;
  --bbx-pen: #27686c;
  --bbx-edge: #93bfaf;
  --bbx-underlay: #b1d8c6;
  --bbx-tint: #dddfed;
  --bbx-sheet: #e7e8ef;
  --bbx-quote-paper: #e3e5ef;
  --bbx-quote-layer-paper: #e3e5ef;
  --bbx-blockquote-paper: #e3e5ef;
  --bbx-blockquote-padding: .6em 1em;
  --bbx-blockquote-edge: 3px;
  --bbx-code-paper: #d5e9dd;
  --bbx-code-ink: #294d4b;
  --bbx-sheet-radius: 22px;
  --bbx-selection: #f9c58b;
  --bbx-selection-ink: #294d4b;
  --bbx-selection-code: #f9c58b;
  --bbx-selection-code-ink: #294d4b;
  --bbx-bullet: #626aab;
  --bbx-counter: #626aab;
}
.bbx-card-surface[data-card-theme="goldfish"] {
  box-shadow: 0 6px 0 #629d9426, 0 10px 24px #3b858518;
}
.bbx-card-surface[data-card-theme="goldfish"] > .bbx-card-properties { border-radius: 0 18px 0 16px; }
[data-chrome-theme="goldfish"] :is(button, textarea):focus-visible:not(.bbx-card-theme *) {
  outline: 2px solid #27686c;
  outline-offset: 3px;
}
@media (hover: hover) {
  [data-chrome-theme="goldfish"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill):hover { box-shadow: 0 3px 0 #518d8b45; }
}
@media (max-width: 639px) {
  .bbx-box-presentation[data-chrome-theme="goldfish"]:not(.bbx-system-theme-preview)::before {
    background-position: 39% bottom;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bbx-box-presentation[data-chrome-theme="goldfish"]:not(.bbx-system-theme-preview)::before { animation: none; }
}

/* Waterlight travels over the toolbar independently of the illustration. */
[data-chrome-theme="goldfish"] .bbx-app-nav {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(110deg, #174e65e8, #247d83d9 58%, #525e97e3), url("./goldfish-underwater.webp") center 12% / max(1300px, 100%) auto;
}
[data-chrome-theme="goldfish"] .bbx-app-nav::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -30px -50px;
  background: url("./goldfish-waterlight.svg") center / 600px 180px repeat;
  opacity: .3;
  animation: goldfish-waterlight 24s ease-in-out infinite alternate;
}
@keyframes goldfish-waterlight {
  from { transform: translate(-20px, -8px) scale(1.05); opacity: .2; }
  to { transform: translate(25px, 10px) scale(1.12); opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  [data-chrome-theme="goldfish"] .bbx-app-nav::before { animation: none; }
}

/* ---- goldfish-chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Production surfaces retain independent card themes and semantic status colors. */
.bbx-box-presentation[data-chrome-theme="goldfish"] {
  --bbx-desk-background: #73bbbf;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #93bfaf;
  --bbx-bar-paper: #255c70;
  --bbx-bar-edge: #c6d8bc;
  --bbx-chat-user-paper: #c0e3de;
  --bbx-chat-user-ink: #214b54;
}
[data-chrome-theme="goldfish"] :is(.bbx-conversation-desk, .bbx-companion-desk[data-active-card], .bbx-interface-card-desk[data-card-content="card"]),
[data-chrome-theme="goldfish"] .bbx-interface-tabstrip > [role="none"]::before,
[data-chrome-theme="goldfish"] .bbx-interface-tabstrip > [role="none"]::after,
[data-chrome-theme="goldfish"] .bbx-app-nav > div { background: transparent; }
[data-chrome-theme="goldfish"] .bbx-interface-card-desk[data-card-content="neutral"] { background: #fbf5ee; }
[data-chrome-theme="goldfish"] .bbx-app-nav :is(button, a):focus-visible { outline: 2px solid #eff8ed; outline-offset: 2px; }
[data-chrome-theme="goldfish"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #f2f5eb; }
[data-chrome-theme="goldfish"] .bbx-composer-material > .bbx-composer-mobile-row { background: #f6f8ed; color: #294d4b; }
[data-chrome-theme="goldfish"] .bbx-chat-user-paper { --bbx-selection: #214b54; --bbx-selection-ink: #f6f8ed; }
[data-chrome-theme="goldfish"] .bbx-chat-user-paper :is(.bbx-chat-user-status, .bbx-chat-user-attachment-summary) { color: #214b54; }
[data-chrome-theme="goldfish"] .bbx-chat-user-paper :is(.bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge) { background: #ffffff45; color: #214b54; }
[data-chrome-theme="goldfish"] .bbx-chat-user-attachment:hover { background: #ffffff80; }
[data-chrome-theme="goldfish"] .bbx-chat-user-unsure { text-decoration-color: #27686c; }
[data-chrome-theme="goldfish"] .bbx-chat-reply-material {
  --bbx-edge: #93bfaf;
}
[data-chrome-theme="goldfish"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-quotes: #294d4b;
  --tw-prose-code: #294d4b;
  --tw-prose-counters: #56675a;
  --tw-prose-captions: #56675a;
  --tw-prose-bullets: #626aab;
  --tw-prose-quote-borders: #93bfaf;
  --tw-prose-hr: #93bfaf;
  --tw-prose-th-borders: #93bfaf;
  --tw-prose-td-borders: #93bfaf;
  --tw-prose-pre-bg: #d5e9dd;
  --tw-prose-pre-code: #294d4b;
}
[data-chrome-theme="goldfish"] :is(.bbx-chat-meta-material, .bbx-chat-pending-material, .bbx-chat-empty-label) { color: #56675a; background: #f6f8ed; border-radius: 8px; }
[data-chrome-theme="goldfish"] :is(.bbx-chat-pending-material, .bbx-chat-empty-label) { padding: 6px 10px; }
[data-chrome-theme="goldfish"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) { --bbx-ink: #294d4b; --bbx-danger: #a92d4a; --bbx-ink-soft: #56675a; --bbx-pen: #27686c; }
[data-chrome-theme="goldfish"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) { color: #294d4b; }
[data-chrome-theme="goldfish"] #bbx-chat-load-older { background: #f6f8ed; color: #27686c; border-radius: 8px; }
[data-chrome-theme="goldfish"] #bbx-chat-load-older:enabled:hover { text-decoration: underline; }
[data-chrome-theme="goldfish"] #bbx-chat-load-older:disabled { color: #56675a; opacity: .6; }
[data-chrome-theme="goldfish"] [aria-label="Pane controls"] button { background: #255c70; color: #eff8ed; border: 1px solid #93bfaf; border-radius: 8px; }
[data-chrome-theme="goldfish"] [aria-label="Pane controls"] button:hover { background: #626aab; }
.bbx-card-theme[data-card-theme="goldfish"] { --bbx-font: ui-sans-serif, system-ui, sans-serif; --bbx-quote-edge: 3px; }
.bbx-interface-tab[data-card-theme="goldfish"] { background: #e7e8ef; border-color: #93bfaf; border-radius: 16px 16px 0 0; }
.bbx-interface-tab[data-card-theme="goldfish"]:not([data-active="true"]):hover { background: #e3e5ef; }
.bbx-interface-tab[data-card-theme="goldfish"][data-active="true"] { background: #f6f8ed; }
.bbx-system-theme-preview[data-chrome-theme="goldfish"] { background: url("./goldfish-underwater.webp") center bottom / cover, #73bbbf; }
.bbx-system-theme-preview[data-chrome-theme="goldfish"] .bbx-system-theme-toolbar { background: #255c70; border-bottom: 2px solid #c6d8bc; }
.bbx-system-theme-preview[data-chrome-theme="goldfish"] .bbx-system-theme-toolbar i { background: #eff8ed; }
.bbx-system-theme-preview[data-chrome-theme="goldfish"] .bbx-system-theme-desk > span { background: #f6f8ed; border-color: #93bfaf; border-radius: 12px; box-shadow: 0 3px 6px #3b858530; }
@media print {
  .bbx-box-presentation[data-chrome-theme="goldfish"]::before, [data-chrome-theme="goldfish"] .bbx-app-nav::before { display: none; animation: none; }
  .bbx-box-presentation[data-chrome-theme="goldfish"], [data-chrome-theme="goldfish"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material), .bbx-card-surface[data-card-theme="goldfish"] { background: transparent; color: #000; border: 0; box-shadow: none; }
  .bbx-card-theme[data-card-theme="goldfish"], [data-chrome-theme="goldfish"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
}

/* ---- tempest.css (beebox/src/frontend/src/themes/) ---- */
/* Nocturnal pigment and distant sparks; translucent reading surfaces belong to Tempest chrome. */
:is([data-chrome-theme="tempest"], .bbx-card-theme[data-card-theme="tempest"]) {
  --tempest-paper: #0b1b2b;
  --tempest-ink: #e0eef4;
  --tempest-soft: #a4bac8;
  --tempest-edge: #456477;
  --tempest-accent: #a8d4e5;
  --tempest-art: url("./tempest-surge.webp");
}
.bbx-box-presentation[data-chrome-theme="tempest"] {
  background: var(--tempest-art) center bottom / cover, #041039;
  color: var(--tempest-ink);
  --bbx-selection: #edb49f;
  --bbx-selection-ink: #152044;
  --bbx-focus-ring: #c4ceff;
}
[data-chrome-theme="tempest"] .bbx-app-nav {
  color: #ecedff;
  background: #05172755;
  backdrop-filter: blur(3px);
  border-bottom: 0;
  box-shadow: none;
  padding-block: 5px;
}
[data-chrome-theme="tempest"] .bbx-app-nav button:not(#bbx-nav-errors) {
  background: #101d40;
  color: #dce4ff;
  border: 1px solid #6376b0;
  border-radius: 5px 3px 5px 3px;
}
[data-chrome-theme="tempest"] :is(.bbx-chat-reply-material,.bbx-chat-callout,.bbx-composer-material) {
  color: var(--tempest-ink);
  background: linear-gradient(135deg,#102c40a8,#06172bb5 75%);
  backdrop-filter: blur(12px);
  border: 0;
  border-radius: 6px 3px 6px 3px;
  box-shadow: 0 6px 16px #00091d50;
}
[data-chrome-theme="tempest"] .bbx-chat-user-paper {
  background: #24506bcc;
  backdrop-filter: blur(10px);
  color: #eef7fa;
  border: 0;
  border-radius: 8px 6px 3px 8px;
  box-shadow: 2px 3px 0 #0a1634;
}
[data-chrome-theme="tempest"] :is(.bbx-chat-reply-material,.bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-body: var(--tempest-ink);
  --tw-prose-headings: var(--tempest-ink);
  --tw-prose-bold: #fff0d5;
  --tw-prose-links: #bacdff;
  color: var(--tempest-ink);
}
[data-chrome-theme="tempest"] .bbx-chat-callout > .bbx-chat-callout-context { color: #b8c6e7; }
[data-chrome-theme="tempest"] .bbx-composer-material > section { background: transparent; border: 0; }
[data-chrome-theme="tempest"] .bbx-composer-material { backdrop-filter: none; }
[data-chrome-theme="tempest"] .bbx-composer-material textarea { background: transparent; color: #e0eef4; }
[data-chrome-theme="tempest"] .bbx-composer-material textarea::placeholder { color: #8199b4; }
[data-chrome-theme="tempest"] :is(#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic):enabled {
  color: #0c193b;
  background: #a8d4e5;
  border: 1px solid #d6ddff;
  border-radius: 6px 3px 6px 3px;
  box-shadow: 0 2px 0 #304d8c;
}
[data-chrome-theme="tempest"] :is(#bbx-composer-add,#bbx-composer-capture,#bbx-composer-keyboard):enabled {
  background: #22345d;
  color: #dce6ff;
  border: 1px solid #6376ac;
  border-radius: 12px;
}
.bbx-card-theme[data-card-theme="tempest"] {
  --bbx-slip-light: #ffffff0c;
  --bbx-slip-edge-light: #ffffff26;
  --bbx-paper: #0b1b2b;
  --bbx-ink: #e0eef4;
  --bbx-danger: #ff8093;
  --bbx-ink-soft: #a4bac8;
  --bbx-pen: #bacdff;
  --bbx-edge: #456477;
  --bbx-underlay: #0b142e;
  --bbx-tint: #24355b;
  --bbx-sheet: #24355b;
  --bbx-quote-paper: #24355b;
  --bbx-quote-layer-paper: #24355b;
  --bbx-blockquote-paper: #24355b;
  --bbx-blockquote-padding: .6em 1em;
  --bbx-blockquote-edge: 2px;
  --bbx-code-paper: #080f24;
  --bbx-code-ink: #d7e3ff;
  --bbx-sheet-radius: 6px 3px 6px 3px;
  --bbx-selection: #edb49f;
  --bbx-selection-ink: #152044;
  --bbx-bullet: #edb49f;
  --bbx-counter: #edb49f;
}
[data-chrome-theme="tempest"] .bbx-card-surface[data-card-theme="tempest"] {
  border: 0;
  background: linear-gradient(130deg,#0d263baa,#06172ba8);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px #02071966;

}
.bbx-card-theme[data-card-theme="tempest"] .bbx-card-heading { background: transparent; border-bottom: 0; }
[data-chrome-theme="tempest"] :is(button,textarea,input):focus-visible:not(.bbx-card-theme *) {
  outline: 2px solid #d4dfff;
  outline-offset: 3px;
}
.bbx-card-theme[data-card-theme="tempest"] :is(button,textarea,input):focus-visible {
  outline: 2px solid #d4dfff;
  outline-offset: 3px;
}
@media (max-width:639px) {
  .bbx-box-presentation[data-chrome-theme="tempest"] {
    background-size: auto max(1100px, 100%);
    background-position: 25% top;
    background-repeat: no-repeat;

  }
}

/* ---- tempest-chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Production surfaces retain independent card themes and semantic status colors. */
.bbx-box-presentation[data-chrome-theme="tempest"] {
  --bbx-desk-background: #041039;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #456477;
  --bbx-bar-paper: #0b1b2b;
  --bbx-bar-edge: #456477;
  --bbx-chat-user-paper: #20485c;
  --bbx-chat-user-ink: #e0eef4;
}
[data-chrome-theme="tempest"] :is(.bbx-conversation-desk, .bbx-companion-desk[data-active-card], .bbx-interface-card-desk[data-card-content="card"]),
[data-chrome-theme="tempest"] .bbx-interface-tabstrip > [role="none"]::before,
[data-chrome-theme="tempest"] .bbx-interface-tabstrip > [role="none"]::after,
[data-chrome-theme="tempest"] .bbx-app-nav > div { background: transparent; }
[data-chrome-theme="tempest"] .bbx-interface-card-desk[data-card-content="neutral"] { background: #fbf5ee; }
[data-chrome-theme="tempest"] .bbx-app-nav :is(button, a):focus-visible { outline: 2px solid #e0eef4; outline-offset: 2px; }
[data-chrome-theme="tempest"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #e0eef4; }
[data-chrome-theme="tempest"] .bbx-composer-material > .bbx-composer-mobile-row { background: #10273d; color: #e0eef4; }
[data-chrome-theme="tempest"] .bbx-chat-user-paper { --bbx-selection: #e0eef4; --bbx-selection-ink: #10273d; }
[data-chrome-theme="tempest"] .bbx-chat-user-paper :is(.bbx-chat-user-status, .bbx-chat-user-attachment-summary) { color: #e0eef4; }
[data-chrome-theme="tempest"] .bbx-chat-user-paper :is(.bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge) { background: #00000026; color: #e0eef4; }
[data-chrome-theme="tempest"] .bbx-chat-user-paper .bbx-chat-user-attachment-badge { background: #00000040; }
[data-chrome-theme="tempest"] .bbx-chat-user-attachment:hover { background: #00000040; }
[data-chrome-theme="tempest"] .bbx-chat-user-unsure { text-decoration-color: #bacdff; }
[data-chrome-theme="tempest"] .bbx-chat-reply-material {
  --bbx-edge: #456477;
}
[data-chrome-theme="tempest"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-quotes: #e0eef4;
  --tw-prose-code: #e0eef4;
  --tw-prose-counters: #a4bac8;
  --tw-prose-captions: #a4bac8;
  --tw-prose-bullets: #edb49f;
  --tw-prose-quote-borders: #456477;
  --tw-prose-hr: #456477;
  --tw-prose-th-borders: #456477;
  --tw-prose-td-borders: #456477;
  --tw-prose-pre-bg: #080f24;
  --tw-prose-pre-code: #e0eef4;
}
[data-chrome-theme="tempest"] :is(.bbx-chat-meta-material, .bbx-chat-pending-material, .bbx-chat-empty-label) { color: #a4bac8; background: #10273d; border-radius: 8px; }
[data-chrome-theme="tempest"] :is(.bbx-chat-pending-material, .bbx-chat-empty-label) { padding: 6px 10px; }
[data-chrome-theme="tempest"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) { --bbx-ink: #e0eef4; --bbx-danger: #ff8093; --bbx-ink-soft: #a4bac8; --bbx-pen: #bacdff; }
[data-chrome-theme="tempest"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) { color: #e0eef4; }
[data-chrome-theme="tempest"] #bbx-chat-load-older { background: #10273d; color: #bacdff; border-radius: 8px; }
[data-chrome-theme="tempest"] #bbx-chat-load-older:enabled:hover { text-decoration: underline; }
[data-chrome-theme="tempest"] #bbx-chat-load-older:disabled { color: #a4bac8; opacity: .6; }
[data-chrome-theme="tempest"] [aria-label="Pane controls"] button { background: #0b1b2b; color: #e0eef4; border: 1px solid #456477; border-radius: 8px; }
[data-chrome-theme="tempest"] [aria-label="Pane controls"] button:hover { background: #edb49f; color: #152044; }
.bbx-card-theme[data-card-theme="tempest"] { --bbx-font: ui-sans-serif, system-ui, sans-serif; --bbx-quote-edge: 3px; }
.bbx-interface-tab[data-card-theme="tempest"] { background: #142b40; border-color: #456477; border-radius: 6px 6px 0 0; }
.bbx-interface-tab[data-card-theme="tempest"]:not([data-active="true"]):hover { background: #20485c; }
.bbx-interface-tab[data-card-theme="tempest"][data-active="true"] { background: #10273d; }
.bbx-system-theme-preview[data-chrome-theme="tempest"] { background: url("./tempest-surge.webp") center bottom / cover, #041039; }
.bbx-system-theme-preview[data-chrome-theme="tempest"] .bbx-system-theme-toolbar { background: #0b1b2b; border-bottom: 2px solid #456477; }
.bbx-system-theme-preview[data-chrome-theme="tempest"] .bbx-system-theme-toolbar i { background: #e0eef4; }
.bbx-system-theme-preview[data-chrome-theme="tempest"] .bbx-system-theme-desk > span { background: #10273d; border-color: #456477; border-radius: 12px; box-shadow: 0 3px 6px #3b858530; }
@media print {
  .bbx-box-presentation[data-chrome-theme="tempest"]::before, [data-chrome-theme="tempest"] .bbx-app-nav::before { display: none; animation: none; }
  .bbx-box-presentation[data-chrome-theme="tempest"], [data-chrome-theme="tempest"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material, .bbx-card-surface[data-card-theme="tempest"]) { background: transparent; color: #000; border: 0; box-shadow: none; backdrop-filter: none; }
  .bbx-card-theme[data-card-theme="tempest"], [data-chrome-theme="tempest"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
}
.bbx-card-theme[data-card-theme="tempest"], [data-chrome-theme="tempest"] .bbx-composer-material { color-scheme: dark; }
@media print {
 .bbx-card-theme[data-card-theme="tempest"], [data-chrome-theme="tempest"] .bbx-composer-material { color-scheme: light; backdrop-filter: none; }
}

[data-chrome-theme="tempest"] :is(#bbx-composer-send, #bbx-composer-send-mobile):disabled { background: #173345; color: #8faab8; border: 0; border-radius: 6px; }

/* ---- veil.css (beebox/src/frontend/src/themes/) ---- */
/* Veil study: opaque painted surfaces suggest overlapping pigment, never glass. */
.bbx-box-presentation[data-chrome-theme="veil"] {
  background: url("./veil-pigment.webp") center / cover, #9dcbb9;
  --bbx-selection: #d1e64e;
  --bbx-selection-ink: #213e36;
  --bbx-focus-ring: #922552;
}
[data-chrome-theme="veil"] .bbx-app-nav {
  color: #eaf4d9;
  background: linear-gradient(100deg, #164b39e8, #155c4bd9 53%, #284a3dd9), url("./veil-pigment.webp") center 65% / max(1200px, 100%) auto;
  border-bottom: 2px solid #c4d264;
  box-shadow: 0 3px 0 #283e3a44;
  padding-block: 7px;
}
[data-chrome-theme="veil"] .bbx-app-nav button:not(#bbx-nav-errors) {
  color: #eaf4d9;
  background: #235e4f;
  border: 1px solid #87b293;
  border-radius: 24px 18px 25px 15px;
  box-shadow: 2px 2px 0 #123e35;
}
[data-chrome-theme="veil"] :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-composer-material) {
  color: #263f37;
  background: linear-gradient(110deg, #eef3deed, #e8f2e9f7 58%, #e0efe7ed), url("./veil-pigment.webp") center / auto max(1067px, 100%);
  border: 1px solid #728f77;
  border-radius: 22px 12px 25px 14px;
  box-shadow: 3px 4px 0 #50765c55, 0 8px 24px #164b3926;
}
[data-chrome-theme="veil"] .bbx-chat-user-paper {
  color: #55213b;
  background: linear-gradient(115deg, #f1bdd4f2, #e5b2cce8), url("./veil-pigment.webp") 10% 45% / auto max(800px, 100%);
  border: 1px solid #a55879;
  border-radius: 24px 24px 7px 24px;
  box-shadow: 3px 4px 0 #643e5540;
}
[data-chrome-theme="veil"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-body: #263f37;
  --tw-prose-bold: #263f37;
  --tw-prose-headings: #1f4c3e;
  --tw-prose-links: #8e2b55;
  --tw-prose-code: #263f37;
  --tw-prose-pre-bg: #243e35;
  --tw-prose-pre-code: #eaf4d9;
  color: #263f37;
}
[data-chrome-theme="veil"] .bbx-chat-callout > .bbx-chat-callout-context { color: #49674c; }
[data-chrome-theme="veil"] .bbx-composer-material > section { background: transparent; border: 0; }
[data-chrome-theme="veil"] .bbx-composer-material textarea { color: #263f37; background: #edf3e4; border-color: #91a78a; }
[data-chrome-theme="veil"] .bbx-composer-material textarea::placeholder { color: #768977; }
[data-chrome-theme="veil"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled {
  color: #edfaf1;
  background: linear-gradient(125deg, #287b75, #225e62);
  border: 1px solid #214c4d;
  border-radius: 50% 44% 47% 42%;
  box-shadow: 2px 3px 0 #4c5b3d66;
}
[data-chrome-theme="veil"] :is(#bbx-composer-add, #bbx-composer-capture, #bbx-composer-keyboard):enabled {
  color: #324d34;
  background: #d5e390;
  border: 1px solid #80954e;
  border-radius: 46% 50% 42% 47%;
  box-shadow: 2px 3px 0 #657a4a40;
}
.bbx-card-theme[data-card-theme="veil"] {
  --bbx-paper: #eff1dc;
  --bbx-ink: #2c4436;
  --bbx-danger: #ab2f4b;
  --bbx-ink-soft: #4d5843;
  --bbx-pen: #8e2b55;
  --bbx-edge: #8a9b73;
  --bbx-underlay: #bdcd9b;
  --bbx-tint: #dce8b9;
  --bbx-sheet: #dfe7cd;
  --bbx-quote-paper: #e1e9c7;
  --bbx-quote-layer-paper: #e1e9c7;
  --bbx-quote-edge: 3px;
  --bbx-blockquote-paper: #e1e9c7;
  --bbx-blockquote-padding: .6em 1em;
  --bbx-blockquote-edge: 3px;
  --bbx-code-paper: #243e35;
  --bbx-code-ink: #eaf4d9;
  --bbx-sheet-radius: 24px 12px 28px 14px;
  --bbx-selection: #d0e67a;
  --bbx-selection-ink: #263f37;
  --bbx-selection-code: #d0e67a;
  --bbx-selection-code-ink: #263f37;
  --bbx-bullet: #a1406b;
  --bbx-counter: #a1406b;
}
.bbx-card-surface[data-card-theme="veil"] {
  background: linear-gradient(120deg, #f1f2def2, #ecf1def7 65%, #dce9d7ed), url("./veil-pigment.webp") 75% 30% / auto max(1000px, 100%);
  box-shadow: 3px 5px 0 #51674755, 0 12px 24px #1d48352b;
}
.bbx-card-theme[data-card-theme="veil"] .bbx-card-heading {
  background: linear-gradient(115deg, #e1e7afe8, #c8dfbde8 58%, #bcd8c9ed), url("./veil-pigment.webp") 45% 48% / max(1000px, 100%) auto;
  border-bottom: 1px solid #91a17c;
}
.bbx-card-surface[data-card-theme="veil"] > .bbx-card-properties {
  border-radius: 0 12px 0 18px;
  background: linear-gradient(225deg, transparent 48%, #52715c80 49% 51%, transparent 52%);
  box-shadow: none;
}
[data-chrome-theme="veil"] :is(button, textarea):focus-visible:not(.bbx-card-theme *) { outline: 2px solid #922552; outline-offset: 3px; }
[data-chrome-theme="veil"] .bbx-app-nav button:focus-visible { outline-color: #e9efb3; }
@media (hover: hover) {
  [data-chrome-theme="veil"] .bbx-app-nav button:hover:not(#bbx-nav-errors) { background: #3c7158; }
  [data-chrome-theme="veil"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled:hover { background: #287b75; }
}
@media (max-width: 639px) {
  .bbx-box-presentation[data-chrome-theme="veil"] { background-size: auto max(1100px, 100%); background-position: 58% top; }
}

/* ---- veil-chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Production surfaces retain independent card themes and semantic status colors. */
.bbx-box-presentation[data-chrome-theme="veil"] {
  --bbx-desk-background: #9dcbb9;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #8a9b73;
  --bbx-bar-paper: #235e4f;
  --bbx-bar-edge: #c4d264;
  --bbx-chat-user-paper: #e5b2cc;
  --bbx-chat-user-ink: #55213b;
}
[data-chrome-theme="veil"] :is(.bbx-conversation-desk, .bbx-companion-desk[data-active-card], .bbx-interface-card-desk[data-card-content="card"]),
[data-chrome-theme="veil"] .bbx-interface-tabstrip > [role="none"]::before,
[data-chrome-theme="veil"] .bbx-interface-tabstrip > [role="none"]::after,
[data-chrome-theme="veil"] .bbx-app-nav > div { background: transparent; }
[data-chrome-theme="veil"] .bbx-interface-card-desk[data-card-content="neutral"] { background: #fbf5ee; }
[data-chrome-theme="veil"] .bbx-app-nav :is(button, a):focus-visible { outline: 2px solid #eaf4d9; outline-offset: 2px; }
[data-chrome-theme="veil"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #eaf4d9; }
[data-chrome-theme="veil"] .bbx-composer-material > .bbx-composer-mobile-row { background: #edf3e4; color: #263f37; }
[data-chrome-theme="veil"] .bbx-chat-user-paper { --bbx-selection: #55213b; --bbx-selection-ink: #edf3e4; }
[data-chrome-theme="veil"] .bbx-chat-user-paper :is(.bbx-chat-user-status, .bbx-chat-user-attachment-summary) { color: #55213b; }
[data-chrome-theme="veil"] .bbx-chat-user-paper :is(.bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge) { background: #ffffff45; color: #55213b; }
[data-chrome-theme="veil"] .bbx-chat-user-attachment:hover { background: #ffffff80; }
[data-chrome-theme="veil"] .bbx-chat-user-unsure { text-decoration-color: #8e2b55; }
[data-chrome-theme="veil"] .bbx-chat-reply-material {
  --bbx-edge: #8a9b73;
}
[data-chrome-theme="veil"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-quotes: #263f37;
  --tw-prose-code: #263f37;
  --tw-prose-counters: #647257;
  --tw-prose-captions: #647257;
  --tw-prose-bullets: #287b75;
  --tw-prose-quote-borders: #8a9b73;
  --tw-prose-hr: #8a9b73;
  --tw-prose-th-borders: #8a9b73;
  --tw-prose-td-borders: #8a9b73;
  --tw-prose-pre-bg: #243e35;
  --tw-prose-pre-code: #eaf4d9;
}
[data-chrome-theme="veil"] :is(.bbx-chat-meta-material, .bbx-chat-pending-material, .bbx-chat-empty-label) { color: #647257; background: #edf3e4; border-radius: 8px; }
[data-chrome-theme="veil"] :is(.bbx-chat-pending-material, .bbx-chat-empty-label) { padding: 6px 10px; }
[data-chrome-theme="veil"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) { --bbx-ink: #263f37; --bbx-danger: #ab2f4b; --bbx-ink-soft: #5d6a51; --bbx-pen: #8e2b55; }
[data-chrome-theme="veil"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) { color: #263f37; }
[data-chrome-theme="veil"] #bbx-chat-load-older { background: #edf3e4; color: #8e2b55; border-radius: 8px; }
[data-chrome-theme="veil"] #bbx-chat-load-older:enabled:hover { text-decoration: underline; }
[data-chrome-theme="veil"] #bbx-chat-load-older:disabled { color: #647257; opacity: .6; }
[data-chrome-theme="veil"] [aria-label="Pane controls"] button { background: #235e4f; color: #eaf4d9; border: 1px solid #8a9b73; border-radius: 8px; }
[data-chrome-theme="veil"] [aria-label="Pane controls"] button:hover { background: #287b75; }
.bbx-card-theme[data-card-theme="veil"] { --bbx-font: ui-sans-serif, system-ui, sans-serif; --bbx-quote-edge: 3px; }
.bbx-interface-tab[data-card-theme="veil"] { background: #dfe7cd; border-color: #8a9b73; border-radius: 16px 16px 0 0; }
.bbx-interface-tab[data-card-theme="veil"]:not([data-active="true"]):hover { background: #c8dfbd; }
.bbx-interface-tab[data-card-theme="veil"][data-active="true"] { background: #edf3e4; }
.bbx-system-theme-preview[data-chrome-theme="veil"] { background: url("./veil-pigment.webp") center bottom / cover, #9dcbb9; }
.bbx-system-theme-preview[data-chrome-theme="veil"] .bbx-system-theme-toolbar { background: #235e4f; border-bottom: 2px solid #c4d264; }
.bbx-system-theme-preview[data-chrome-theme="veil"] .bbx-system-theme-toolbar i { background: #eaf4d9; }
.bbx-system-theme-preview[data-chrome-theme="veil"] .bbx-system-theme-desk > span { background: #edf3e4; border-color: #8a9b73; border-radius: 12px; box-shadow: 0 3px 6px #3b858530; }
@media print {
  .bbx-box-presentation[data-chrome-theme="veil"]::before, [data-chrome-theme="veil"] .bbx-app-nav::before { display: none; animation: none; }
  .bbx-box-presentation[data-chrome-theme="veil"], [data-chrome-theme="veil"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material), .bbx-card-surface[data-card-theme="veil"] { background: transparent; color: #000; border: 0; box-shadow: none; }
  .bbx-card-theme[data-card-theme="veil"], [data-chrome-theme="veil"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
}

[data-chrome-theme="veil"] :is(#bbx-composer-send, #bbx-composer-send-mobile):disabled { background: #d9e6d6; color: #71816b; border: 0; border-radius: 6px; }

/* ---- gilt.css (beebox/src/frontend/src/themes/) ---- */
/* Gilt: worn leaf and mineral pigments; reading surfaces remain quiet. */
:is([data-chrome-theme="gilt"], .bbx-card-theme[data-card-theme="gilt"]) {
  --gilt-paper: #173f50;
  --gilt-ink: #f6ecd3;
  --gilt-soft: #c3cbbf;
  --gilt-edge: #667d79;
  --gilt-accent: #e5c77e;
  --gilt-sheet: #204c5c;
  --gilt-art: url("./gilt-leaf.webp");
  --gilt-leaf: linear-gradient(#edc75d80, #dcae4480), var(--gilt-art);
  --bbx-selection: #dfbd72;
  --bbx-selection-ink: #263c43;
  --bbx-focus-ring: #f4d389;
}
.bbx-box-presentation[data-chrome-theme="gilt"] {
  background: url("./gilt-panorama.webp") center top / cover no-repeat, #9d742f;
}
[data-chrome-theme="gilt"] .bbx-app-nav {
  background: linear-gradient(90deg, #172f39e8, #3c3c32c9 65%, #4f302dd9), var(--gilt-art) center 24% / cover;
  border-bottom: 2px solid #a68b4e;
  color: #fff0c9;
  padding-block: 8px;
}
[data-chrome-theme="gilt"] .bbx-app-nav :is(#bbx-nav-place, #bbx-nav-here, #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile) {
  background-color: #d9bd7f;
  background-image: linear-gradient(#f3e2b8cc, #e9d6a6cc), var(--gilt-art);
  background-size: auto, 480px auto;
  background-position: center, 45% 52%;
  color: #1b3037;
  border: 1px solid #e8c774;
  outline: 1px solid #483d26;
  outline-offset: 2px;
  border-radius: 3px 5px 3px 4px;
  font-weight: 650;
  box-shadow: 0 2px 0 #102a3466;
}
[data-chrome-theme="gilt"] :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-composer-material) {
  background: var(--gilt-paper);
  color: var(--gilt-ink);
  border: 0;
  border-left: 3px solid #b69a50;
  border-radius: 6px;
  box-shadow: 0 5px 18px #20191038;
}
[data-chrome-theme="gilt"] .bbx-chat-user-paper {
  background: #622b2b;
  color: #fff0d8;
  border: 0;
  border-left: 3px solid #d9b463;
  border-radius: 6px;
  box-shadow: 0 4px 12px #28181330;
}
[data-chrome-theme="gilt"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-body: var(--gilt-ink);
  --tw-prose-headings: var(--gilt-ink);
  --tw-prose-bold: var(--gilt-ink);
  --tw-prose-links: var(--gilt-accent);
  color: var(--gilt-ink);
}
[data-chrome-theme="gilt"] .bbx-chat-callout > .bbx-chat-callout-context {
  color: var(--gilt-soft);
}
[data-chrome-theme="gilt"] .bbx-composer-material > section {
  background: transparent;
  border: 0;
}
[data-chrome-theme="gilt"] .bbx-composer-material textarea {
  background: var(--gilt-paper);
  color: var(--gilt-ink);
  border-color: var(--gilt-edge);
}
[data-chrome-theme="gilt"] .bbx-composer-material textarea::placeholder {
  color: #7a8f90;
}
[data-chrome-theme="gilt"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled {
  background-color: #d9bd7f;
  background-image: var(--gilt-leaf);
  background-size: auto, 460px auto;
  background-position: center, 55% 55%;
  color: #1b3037;
  border: 1px solid #e8c774;
  outline: 1px solid #483d26;
  outline-offset: 2px;
  border-radius: 4px;
}
[data-chrome-theme="gilt"] :is(#bbx-composer-add, #bbx-composer-capture, #bbx-composer-keyboard):enabled {
  background: #2d5662;
  color: #f8edcf;
  border: 1px solid #7e938c;
  border-radius: 5px;
}
.bbx-card-theme[data-card-theme="gilt"] {
  --bbx-slip-light: #ffffff0c;
  --bbx-slip-edge-light: #ffffff26;
  --bbx-paper: var(--gilt-paper);
  --bbx-ink: var(--gilt-ink);
  --bbx-danger: #fea6b0;
  --bbx-ink-soft: var(--gilt-soft);
  --bbx-pen: var(--gilt-accent);
  --bbx-edge: var(--gilt-edge);
  --bbx-underlay: #102e3d;
  --bbx-tint: var(--gilt-sheet);
  --bbx-sheet: var(--gilt-sheet);
  --bbx-quote-paper: var(--gilt-sheet);
  --bbx-quote-layer-paper: var(--gilt-sheet);
  --bbx-blockquote-paper: var(--gilt-sheet);
  --bbx-blockquote-padding: 0.6em 1em;
  --bbx-blockquote-edge: 2px;
  --bbx-code-paper: #112c38;
  --bbx-code-ink: #eee3c5;
  --bbx-sheet-radius: 6px;
  --bbx-selection-code: #e5c77e;
  --bbx-selection-code-ink: #112c38;
  --bbx-bullet: #d9b56c;
  --bbx-counter: #d9b56c;
}
.bbx-card-surface[data-card-theme="gilt"] {
  border: 1px solid #ae8b42;
  box-shadow: 0 0 0 3px #173f50, 0 0 0 4px #ae8b4280, 0 6px 20px #231c1240;
}
.bbx-card-surface[data-card-theme="gilt"] > .bbx-card-properties {
  border-radius: 0 5px 0 5px;
}
[data-chrome-theme="gilt"] :is(button, textarea):focus-visible:not(.bbx-card-theme *) {
  outline: 2px solid #f5d88e;
  outline-offset: 3px;
}

/* The heading is a worn gilded strip, with dark lettering over the leaf. */
.bbx-card-theme[data-card-theme="gilt"] .bbx-card-heading {
  background-color: #e3ca90;
  background-image: linear-gradient(#f3e2b8d9, #e9d6a6d9), var(--gilt-art);
  background-position: center, 55% 55%;
  background-size: auto, max(850px, 100%) auto;
  color: #192c34;
  --bbx-ink: #192c34;
  --bbx-ink-soft: #304047;
  border-bottom: 1px solid #a18143;
}

@media (hover: hover) {
  [data-chrome-theme="gilt"] .bbx-app-nav :is(#bbx-nav-place, #bbx-nav-here, #bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile):hover {
    background-image: linear-gradient(#f7ebc9cc, #efdfb4cc), var(--gilt-art);
    border-color: #dec990;
    border-bottom-color: #8a693c;
  }
}
[data-chrome-theme="gilt"] :is(#bbx-composer-send, #bbx-composer-send-mobile):disabled {
  background: #8e947f;
  color: #263d43;
  border: 1px solid #acb09b;
  border-radius: 4px;
  opacity: .65;
}

/* ---- gilt-chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Production surfaces retain independent card themes and semantic status colors. */
.bbx-box-presentation[data-chrome-theme="gilt"] {
  --bbx-desk-background: #9d742f;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #667d79;
  --bbx-bar-paper: #173f50;
  --bbx-bar-edge: #a68b4e;
  --bbx-chat-user-paper: #622b2b;
  --bbx-chat-user-ink: #fff0d8;
}
[data-chrome-theme="gilt"] :is(.bbx-conversation-desk, .bbx-companion-desk[data-active-card], .bbx-interface-card-desk[data-card-content="card"]),
[data-chrome-theme="gilt"] .bbx-interface-tabstrip > [role="none"]::before,
[data-chrome-theme="gilt"] .bbx-interface-tabstrip > [role="none"]::after,
[data-chrome-theme="gilt"] .bbx-app-nav > div { background: transparent; }
[data-chrome-theme="gilt"] .bbx-interface-card-desk[data-card-content="neutral"] { background: #fbf5ee; }
[data-chrome-theme="gilt"] .bbx-app-nav :is(button, a):focus-visible { outline: 2px solid #f6ecd3; outline-offset: 2px; }
[data-chrome-theme="gilt"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #1b3037; }
[data-chrome-theme="gilt"] .bbx-composer-material > .bbx-composer-mobile-row { background: #173f50; color: #f6ecd3; }
[data-chrome-theme="gilt"] .bbx-chat-user-paper { --bbx-selection: #fff0d8; --bbx-selection-ink: #622b2b; }
[data-chrome-theme="gilt"] .bbx-chat-user-paper :is(.bbx-chat-user-status, .bbx-chat-user-attachment-summary) { color: #fff0d8; }
[data-chrome-theme="gilt"] .bbx-chat-user-paper :is(.bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge) { background: #ffffff18; color: #fff0d8; }
[data-chrome-theme="gilt"] .bbx-chat-user-attachment:hover { background: #ffffff30; }
[data-chrome-theme="gilt"] .bbx-chat-user-unsure { text-decoration-color: #e5c77e; }
[data-chrome-theme="gilt"] .bbx-chat-reply-material {
  --bbx-edge: #667d79;
}
[data-chrome-theme="gilt"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-quotes: #f6ecd3;
  --tw-prose-code: #f6ecd3;
  --tw-prose-counters: #c3cbbf;
  --tw-prose-captions: #c3cbbf;
  --tw-prose-bullets: #e5c77e;
  --tw-prose-quote-borders: #667d79;
  --tw-prose-hr: #667d79;
  --tw-prose-th-borders: #667d79;
  --tw-prose-td-borders: #667d79;
  --tw-prose-pre-bg: #112c38;
  --tw-prose-pre-code: #eee3c5;
}
[data-chrome-theme="gilt"] :is(.bbx-chat-meta-material, .bbx-chat-pending-material, .bbx-chat-empty-label) { color: #c3cbbf; background: #173f50; border-radius: 8px; }
[data-chrome-theme="gilt"] :is(.bbx-chat-pending-material, .bbx-chat-empty-label) { padding: 6px 10px; }
[data-chrome-theme="gilt"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) { --bbx-ink: #f6ecd3; --bbx-danger: #fea6b0; --bbx-ink-soft: #c3cbbf; --bbx-pen: #e5c77e; }
[data-chrome-theme="gilt"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) { color: #f6ecd3; }
[data-chrome-theme="gilt"] #bbx-chat-load-older { background: #173f50; color: #e5c77e; border-radius: 8px; }
[data-chrome-theme="gilt"] #bbx-chat-load-older:enabled:hover { text-decoration: underline; }
[data-chrome-theme="gilt"] #bbx-chat-load-older:disabled { color: #c3cbbf; opacity: .6; }
[data-chrome-theme="gilt"] [aria-label="Pane controls"] button { background: #173f50; color: #f6ecd3; border: 1px solid #667d79; border-radius: 8px; }
[data-chrome-theme="gilt"] [aria-label="Pane controls"] button:hover { background: #204c5c; }
.bbx-card-theme[data-card-theme="gilt"] { --bbx-font: ui-sans-serif, system-ui, sans-serif; --bbx-quote-edge: 3px; }
.bbx-interface-tab[data-card-theme="gilt"] { background: #204c5c; border-color: #667d79; border-radius: 6px 6px 0 0; }
.bbx-interface-tab[data-card-theme="gilt"]:not([data-active="true"]):hover { background: #2d5662; }
.bbx-interface-tab[data-card-theme="gilt"][data-active="true"] { background: #173f50; }
.bbx-system-theme-preview[data-chrome-theme="gilt"] { background: url("./gilt-panorama.webp") center bottom / cover, #9d742f; }
.bbx-system-theme-preview[data-chrome-theme="gilt"] .bbx-system-theme-toolbar { background: #173f50; border-bottom: 2px solid #a68b4e; }
.bbx-system-theme-preview[data-chrome-theme="gilt"] .bbx-system-theme-toolbar i { background: #f6ecd3; }
.bbx-system-theme-preview[data-chrome-theme="gilt"] .bbx-system-theme-desk > span { background: #173f50; border-color: #667d79; border-radius: 6px; box-shadow: 0 3px 6px #3b858530; }
/* Dark content uses native dark controls. */
.bbx-card-theme[data-card-theme="gilt"], [data-chrome-theme="gilt"] .bbx-composer-material { color-scheme: dark; }
@media print {
  .bbx-card-theme[data-card-theme="gilt"] .bbx-card-heading { background: transparent; color: #000; --bbx-ink: #000; --bbx-ink-soft: #333; }
  .bbx-card-theme[data-card-theme="gilt"] { color-scheme: light; --gilt-paper: #fff; --gilt-ink: #000; --gilt-soft: #333; --gilt-accent: #000; --gilt-sheet: #fff; --bbx-code-paper: #fff; --bbx-code-ink: #000; }


  .bbx-box-presentation[data-chrome-theme="gilt"], [data-chrome-theme="gilt"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material), .bbx-card-surface[data-card-theme="gilt"] { background: transparent; color: #000; border: 0; box-shadow: none; }
  .bbx-card-theme[data-card-theme="gilt"], [data-chrome-theme="gilt"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
}

/* ---- doodlebit.css (beebox/src/frontend/src/themes/) ---- */
/* Hand-drawn pixel paper; only the background responds to pointer movement. */
@property --doodlebit-walkers {
  syntax: "<url>";
  inherits: false;
  initial-value: url("./doodlebit-walkers.svg#frame0");
}
.bbx-box-presentation[data-chrome-theme="doodlebit"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #f8f8f4;
  color: #202020;
  --bbx-selection: #b9ef38;
  --bbx-selection-ink: #202020;
  --bbx-focus-ring: #6451cc;
}
.bbx-box-presentation[data-chrome-theme="doodlebit"]:not(.bbx-system-theme-preview)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: #f8f8f4 url("./doodlebit.svg") 0 0 / 720px 560px;
}
.bbx-box-presentation[data-chrome-theme="doodlebit"]:not(.bbx-system-theme-preview)::after {
  content: "";
  position: absolute;
  inset: 0;
  --doodlebit-walkers: inherit;
  pointer-events: none;
  z-index: -1;
  background-image: var(--doodlebit-walkers);
  background-size: 720px 560px;
  background-repeat: repeat;
}
[data-chrome-theme="doodlebit"] .bbx-app-nav {
  background: #fff;
  color: #202020;
  border-block: 2px solid #202020;
  box-shadow: 0 4px 0 #202020;
  padding-block: 4px;
  font: 600 13px/1.2 system-ui, sans-serif;
}
[data-chrome-theme="doodlebit"] .bbx-app-nav :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-nav-todo, #bbx-nav-questions, .bbx-place-pill),
[data-chrome-theme="doodlebit"] :is(#bbx-composer-add, #bbx-composer-capture, #bbx-composer-keyboard, #bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]),
.bbx-card-theme[data-card-theme="doodlebit"] > .bbx-card-properties {
  background: #fff;
  color: #202020;
  border: 2px solid #202020;
  border-radius: 0;
  box-shadow: 2px 2px 0 #202020;
  position: relative;
}
[data-chrome-theme="doodlebit"] :is(#bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"]):enabled { background: #b9ef38; }
[data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-composer-material, .bbx-chat-user-paper),
.bbx-card-surface[data-card-theme="doodlebit"] {
  background: #fff;
  color: #202020;
  border: 6px solid transparent;
  border-image: url("./pixel-frame.svg") 6 / 6px / 0 stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: 2px 3px 0 #202020;
}
/* Square pixel outlines avoid fractional border-image corner slices. */
[data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-user-paper) {
  border: 2px solid #202020;
  border-image: none;
  background-clip: border-box;
  box-shadow: 2px 2px 0 #202020;
}
[data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-callout) {
  margin: 8px 12px 12px;
  padding: 12px 16px;
}
[data-chrome-theme="doodlebit"] .bbx-chat-user-paper { background: #242424; color: #fff; filter: none; }
[data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-body: #202020;
  --tw-prose-bold: #202020;
  --tw-prose-headings: #202020;
  --tw-prose-links: #5c42b5;
  color: #202020;
}
[data-chrome-theme="doodlebit"] .bbx-chat-callout > .bbx-chat-callout-context { color: #555; }
[data-chrome-theme="doodlebit"] .bbx-composer-material > section { background: transparent; border: 0; }
[data-chrome-theme="doodlebit"] .bbx-composer-material textarea { color: #202020; background: #fff; }
.bbx-card-theme[data-card-theme="doodlebit"] {
  --bbx-paper: #fff;
  --bbx-ink: #202020;
  --bbx-danger: #b73b55;
  --bbx-ink-soft: #565656;
  --bbx-pen: #5c42b5;
  --bbx-edge: #202020;
  --bbx-underlay: #ecece6;
  --bbx-tint: #f3f3ee;
  --bbx-sheet: #f3f3ee;
  --bbx-quote-paper: #f3f3ee;
  --bbx-quote-layer-paper: #f3f3ee;
  --bbx-blockquote-paper: #f3f3ee;
  --bbx-blockquote-padding: .6em 1em;
  --bbx-blockquote-edge: 3px;
  --bbx-code-paper: #242424;
  --bbx-code-ink: #fff;
  --bbx-sheet-radius: 0;
  --bbx-selection: #b9ef38;
  --bbx-selection-ink: #202020;
  --bbx-selection-code: #b9ef38;
  --bbx-selection-code-ink: #202020;
}
.bbx-card-theme[data-card-theme="doodlebit"] > .bbx-card-heading { border-bottom: 3px dotted #202020; background: #fff; padding-right: 110px; }
.bbx-card-theme[data-card-theme="doodlebit"] > .bbx-card-heading h2 { font: 650 16px/1.25 system-ui, sans-serif; }
.bbx-card-theme[data-card-theme="doodlebit"] > .bbx-card-properties {
  position: absolute;
  top: 8px; right: 8px;
  width: auto; height: 28px;
  padding: 4px 7px;
  background: #f3f3ee;
  border: 1px solid #202020;
  box-shadow: none;
}
.bbx-card-theme[data-card-theme="doodlebit"] > .bbx-card-properties .bbx-card-properties-label {
  position: static; display: inline; opacity: 1; transform: none; transition: none;
  height: auto; color: #202020; font: 11px system-ui, sans-serif;
}
.bbx-card-theme[data-card-theme="doodlebit"] .bbx-card-properties { transform: none; }
[data-chrome-theme="doodlebit"] :is(button, textarea, input):focus-visible:not(.bbx-card-theme *),
.bbx-card-theme[data-card-theme="doodlebit"] :is(button, textarea, input):focus-visible { outline: 3px solid #6451cc; outline-offset: 3px; }

/* ---- doodlebit-controls.css (beebox/src/frontend/src/themes/) ---- */
/* Pixel icons keep normal compact control labels and live recording cues. */
[data-chrome-theme="doodlebit"] :is(#bbx-composer-add,#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic[data-mic="idle"]) svg { opacity: 0; }
[data-chrome-theme="doodlebit"] :is(#bbx-composer-add,#bbx-composer-send,#bbx-composer-send-mobile,#bbx-composer-mic[data-mic="idle"])::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); background: currentColor;
  mask: var(--pixel-icon) center / contain no-repeat;
}
[data-chrome-theme="doodlebit"] #bbx-composer-add {
  --pixel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v6h6v2H9v6H7V9H1V7h6z'/%3E%3C/svg%3E");
}
[data-chrome-theme="doodlebit"] :is(#bbx-composer-send,#bbx-composer-send-mobile) {
  --pixel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v2h2v2h2v2h2v2h-2V7h-2V5H9v10H7V5H5v2H3v2H1V7h2V5h2V3h2z'/%3E%3C/svg%3E");
}
[data-chrome-theme="doodlebit"] #bbx-composer-mic[data-mic="idle"] {
  --pixel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 0h4v2h2v6h-2v2H6V8H4V2h2zM1 6h2v4h2v2h6v-2h2V6h2v4h-2v2h-2v2H9v1h3v1H4v-1h3v-1H5v-2H3v-2H1z'/%3E%3C/svg%3E");
}
[data-chrome-theme="doodlebit"] .bbx-composer-material textarea { border-radius: 0; border-color: transparent; box-shadow: none; }
[data-chrome-theme="doodlebit"] .bbx-composer-material textarea:focus { border-color: #202020; box-shadow: none; outline: 2px solid #b9ef38; outline-offset: 1px; }
[data-chrome-theme="doodlebit"] :is(#bbx-composer-capture,#bbx-composer-keyboard) { position: relative; }
[data-chrome-theme="doodlebit"] :is(#bbx-composer-capture,#bbx-composer-keyboard) svg { opacity: 0; }
[data-chrome-theme="doodlebit"] :is(#bbx-composer-capture,#bbx-composer-keyboard)::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); background: currentColor;
  mask: var(--pixel-icon) center / contain no-repeat;
}
[data-chrome-theme="doodlebit"] #bbx-composer-capture {
  --pixel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 1h6v2h4v2h1v9H0V5h1V3h4zm0 4H2v7h12V5h-3V3H5zm2 1h3v1h1v3h-1v1H7v-1H6V7h1zm1 2v1h1V8z'/%3E%3C/svg%3E");
}
[data-chrome-theme="doodlebit"] #bbx-composer-keyboard {
  --pixel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 3h14v1h1v8h-1v1H1v-1H0V4h1zm1 2v6h12V5zm1 1h2v1H3zm4 0h2v1H7zm4 0h2v1h-2zM4 9h8v1H4z'/%3E%3C/svg%3E");
}
[data-chrome-theme="doodlebit"] #bbx-composer-keyboard {
  --pixel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 3h14v1h1v8h-1v1H1v-1H0V4h1zm1 2v6h12V5zm1 1h2v1H3zm4 0h2v1H7zm4 0h2v1h-2zM4 9h8v1H4z'/%3E%3C/svg%3E");
}

@keyframes doodlebit-control-wiggle {
  0%, 100% { transform: translateY(-2px); }
  30% { transform: translateY(-2px) rotate(-3deg); }
  65% { transform: translateY(-2px) rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  [data-chrome-theme="doodlebit"] :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-composer-add, #bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"], #bbx-composer-capture, #bbx-composer-keyboard):enabled:hover {
    animation: doodlebit-control-wiggle 280ms steps(2, end) 1;
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-chrome-theme="doodlebit"] :is(#bbx-nav-session, #bbx-nav-voice, #bbx-nav-profile, #bbx-composer-add, #bbx-composer-send, #bbx-composer-send-mobile, #bbx-composer-mic[data-mic="idle"], #bbx-composer-capture, #bbx-composer-keyboard):enabled:active {
    animation: none;
    transform: translate(2px, 2px) scaleY(.94);
    box-shadow: none;
  }
}

/* ---- doodlebit-chrome.css (beebox/src/frontend/src/themes/) ---- */
/* Production surfaces retain independent card themes and semantic status colors. */
.bbx-box-presentation[data-chrome-theme="doodlebit"] {
  --bbx-desk-background: #f8f8f4;
  --bbx-desk-pattern: none;
  --bbx-desk-edge: #202020;
  --bbx-bar-paper: #fff;
  --bbx-bar-edge: #202020;
  --bbx-chat-user-paper: #242424;
  --bbx-chat-user-ink: #fff;
}
[data-chrome-theme="doodlebit"] :is(.bbx-conversation-desk, .bbx-companion-desk[data-active-card], .bbx-interface-card-desk[data-card-content="card"]),
[data-chrome-theme="doodlebit"] .bbx-interface-tabstrip > [role="none"]::before,
[data-chrome-theme="doodlebit"] .bbx-interface-tabstrip > [role="none"]::after,
[data-chrome-theme="doodlebit"] .bbx-app-nav > div { background: transparent; }
[data-chrome-theme="doodlebit"] .bbx-interface-card-desk[data-card-content="neutral"] { background: #fbf5ee; }
[data-chrome-theme="doodlebit"] .bbx-app-nav :is(button, a):focus-visible { outline: 2px solid #202020; outline-offset: 2px; }
[data-chrome-theme="doodlebit"] .bbx-place-pill :is(#bbx-nav-place, #bbx-nav-here) { color: #202020; }
[data-chrome-theme="doodlebit"] .bbx-composer-material > .bbx-composer-mobile-row { background: #fff; color: #202020; }
[data-chrome-theme="doodlebit"] .bbx-chat-user-paper { --bbx-selection: #b9ef38; --bbx-selection-ink: #202020; }
[data-chrome-theme="doodlebit"] .bbx-chat-user-paper :is(.bbx-chat-user-status, .bbx-chat-user-attachment-summary) { color: #fff; }
[data-chrome-theme="doodlebit"] .bbx-chat-user-paper :is(.bbx-chat-user-token, .bbx-chat-user-attachment, .bbx-chat-user-attachment-badge) { background: #ffffff45; color: #fff; }
/* A light badge on the light attachment would stack two tints; a dark one keeps white text legible. */
[data-chrome-theme="doodlebit"] .bbx-chat-user-paper .bbx-chat-user-attachment-badge { background: #00000040; }
[data-chrome-theme="doodlebit"] .bbx-chat-user-attachment:hover { background: #ffffff80; }
[data-chrome-theme="doodlebit"] .bbx-chat-user-unsure { text-decoration-color: #5c42b5; }
[data-chrome-theme="doodlebit"] .bbx-chat-reply-material {
  --bbx-edge: #202020;
}
[data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
  --tw-prose-quotes: #202020;
  --tw-prose-code: #202020;
  --tw-prose-counters: #565656;
  --tw-prose-captions: #565656;
  --tw-prose-bullets: #5c42b5;
  --tw-prose-quote-borders: #202020;
  --tw-prose-hr: #202020;
  --tw-prose-th-borders: #202020;
  --tw-prose-td-borders: #202020;
  --tw-prose-pre-bg: #242424;
  --tw-prose-pre-code: #fff;
}
[data-chrome-theme="doodlebit"] :is(.bbx-chat-meta-material, .bbx-chat-pending-material, .bbx-chat-empty-label) { color: #565656; background: #fff; border-radius: 8px; }
[data-chrome-theme="doodlebit"] :is(.bbx-chat-pending-material, .bbx-chat-empty-label) { padding: 6px 10px; }
[data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-pending-material, .bbx-chat-meta-material) { --bbx-ink: #202020; --bbx-danger: #b73b55; --bbx-ink-soft: #565656; --bbx-pen: #5c42b5; }
[data-chrome-theme="doodlebit"] .bbx-chat-reply-material summary:hover:not(.bbx-card-theme *) { color: #202020; }
[data-chrome-theme="doodlebit"] #bbx-chat-load-older { background: #fff; color: #5c42b5; border-radius: 8px; }
[data-chrome-theme="doodlebit"] #bbx-chat-load-older:enabled:hover { text-decoration: underline; }
[data-chrome-theme="doodlebit"] #bbx-chat-load-older:disabled { color: #565656; opacity: .6; }
[data-chrome-theme="doodlebit"] [aria-label="Pane controls"] button { background: #fff; color: #202020; border: 1px solid #202020; border-radius: 8px; }
[data-chrome-theme="doodlebit"] [aria-label="Pane controls"] button:hover { background: #b9ef38; }
.bbx-card-theme[data-card-theme="doodlebit"] { --bbx-font: ui-sans-serif, system-ui, sans-serif; --bbx-quote-edge: 3px; }
.bbx-interface-tab[data-card-theme="doodlebit"] { background: #f3f3ee; border-color: #202020; border-radius: 0; }
.bbx-interface-tab[data-card-theme="doodlebit"]:not([data-active="true"]):hover { background: #ecece6; }
.bbx-interface-tab[data-card-theme="doodlebit"][data-active="true"] { background: #fff; }
.bbx-system-theme-preview[data-chrome-theme="doodlebit"] { background: url("./doodlebit.svg") center / 240px auto, #f8f8f4; }
.bbx-system-theme-preview[data-chrome-theme="doodlebit"] .bbx-system-theme-toolbar { background: #fff; border-bottom: 2px solid #202020; }
.bbx-system-theme-preview[data-chrome-theme="doodlebit"] .bbx-system-theme-toolbar i { background: #202020; }
.bbx-system-theme-preview[data-chrome-theme="doodlebit"] .bbx-system-theme-desk > span { background: #fff; border-color: #202020; border-radius: 0; box-shadow: 2px 2px 0 #202020; }
@media print {
  .bbx-box-presentation[data-chrome-theme="doodlebit"]::before, .bbx-box-presentation[data-chrome-theme="doodlebit"]::after, [data-chrome-theme="doodlebit"] .bbx-app-nav::before { display: none; animation: none; }
  .bbx-box-presentation[data-chrome-theme="doodlebit"], [data-chrome-theme="doodlebit"] :is(.bbx-chat-user-paper, .bbx-chat-reply-material, .bbx-chat-callout, .bbx-chat-pending-material, .bbx-chat-meta-material), .bbx-card-surface[data-card-theme="doodlebit"] { background: transparent; color: #000; border: 0; box-shadow: none; filter: none; }
  .bbx-card-theme[data-card-theme="doodlebit"], [data-chrome-theme="doodlebit"] :is(.bbx-chat-reply-material, .bbx-chat-callout) .prose:not(.bbx-card-theme *) {
    --bbx-paper: #fff; --bbx-ink: #000; --bbx-ink-soft: #333; --bbx-pen: #000;
    --tw-prose-body: #000; --tw-prose-bold: #000; --tw-prose-headings: #000;
    --tw-prose-quotes: #000; --tw-prose-counters: #333; --tw-prose-bullets: #333; --tw-prose-captions: #333;
    color: #000;
  }
}

/* Shared badge segments form one square counter, without rounded clipping. */
[data-chrome-theme="doodlebit"] .bbx-app-nav div:has(> div > :is(#bbx-nav-questions, #bbx-nav-todo, #bbx-nav-errors)) {
  border: 2px solid #202020;
  border-radius: 0;
  overflow: visible;
  background: #fff;
  color: #202020;
}
[data-chrome-theme="doodlebit"] .bbx-app-nav :is(#bbx-nav-questions, #bbx-nav-todo) {
  border: 0;
  box-shadow: none;
}
[data-chrome-theme="doodlebit"] .bbx-app-nav div:has(> :is(#bbx-nav-questions, #bbx-nav-todo)) + div {
  border-left: 2px solid #202020;
}
.bbx-interface-tab[data-card-theme="doodlebit"] {
  --bbx-tab-top-border: 3px;
  border-inline: 3px solid #202020;
  border-bottom: 0;
}
/* Keep the composer frame inside its clipped pane; no notches or outer shadow. */
[data-chrome-theme="doodlebit"] .bbx-composer-material {
  border: 3px solid #202020;
  border-image: none;
  box-shadow: none;
  background-clip: border-box;
}