/* Workspace recipes paint one static ambient frame around the active chat.
   They never repaint message/card semantics and contain no animation, images,
   filters or large shadows. The same variables render the editor previews, so
   the concept a user picks is the surface they actually receive. */
[data-workspace-theme] {
  --workspace-head: color-mix(in srgb, var(--row-accent) 7%, var(--surface-0));
  --workspace-composer: color-mix(in srgb, var(--row-accent) 5%, var(--surface-1));
  --workspace-dock: linear-gradient(0deg, color-mix(in srgb, var(--row-accent) 4%, var(--bg)) 72%, transparent);
  --workspace-composer-border: color-mix(in srgb, var(--row-accent) 64%, var(--border));
  --workspace-composer-focus-border: color-mix(in srgb, var(--row-accent) 88%, white);
  --workspace-composer-shadow: 0 0 0 3px color-mix(in srgb, var(--row-accent) 9%, transparent), 0 -8px 34px color-mix(in srgb, var(--row-accent) 7%, transparent), 0 12px 34px rgb(0 0 0 / 18%);
  --workspace-composer-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--row-accent) 16%, transparent), 0 -10px 40px color-mix(in srgb, var(--row-accent) 11%, transparent), 0 16px 40px rgb(0 0 0 / 22%);
  --workspace-swatch-art: radial-gradient(circle at 70% 28%, rgb(255 255 255 / 38%) 0 1px, transparent 1.5px);
}

.main-canvas[data-workspace-custom="true"],
.organization-theme-preview[data-workspace-custom="true"] {
  background-color: var(--workspace-canvas-color, var(--bg));
}

[data-workspace-theme="orbit"] {
  --workspace-canvas-art:
    radial-gradient(circle at 78% 19%, color-mix(in srgb, var(--row-accent) 32%, transparent) 0 1px, transparent 1.7px) 0 0 / 54px 54px,
    radial-gradient(circle at 82% 36%, color-mix(in srgb, var(--row-accent) 22%, transparent) 0 1px, transparent 1.5px) 12px 8px / 76px 76px,
    radial-gradient(760px 460px at 8% -5%, color-mix(in srgb, var(--row-accent) 15%, transparent), transparent 70%);
  --workspace-swatch-art: radial-gradient(circle at 65% 30%, white 0 1px, transparent 1.5px), radial-gradient(circle at 35% 65%, rgb(255 255 255 / 60%) 0 1px, transparent 1.5px);
}

[data-workspace-theme="grid"] {
  --workspace-canvas-art:
    linear-gradient(color-mix(in srgb, var(--row-accent) 5%, transparent) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, color-mix(in srgb, var(--row-accent) 5%, transparent) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(680px 360px at 10% 0, color-mix(in srgb, var(--row-accent) 13%, transparent), transparent 72%);
  --workspace-swatch-art: repeating-linear-gradient(0deg, transparent 0 8px, rgb(255 255 255 / 34%) 8px 9px), repeating-linear-gradient(90deg, transparent 0 8px, rgb(255 255 255 / 34%) 8px 9px);
}

[data-workspace-theme="horizon"] {
  --workspace-canvas-art:
    linear-gradient(180deg, color-mix(in srgb, var(--row-accent) 9%, transparent), transparent 24%),
    linear-gradient(180deg, transparent 71%, color-mix(in srgb, var(--row-accent) 4%, transparent) 72%, transparent 73%),
    radial-gradient(1100px 260px at 58% 101%, color-mix(in srgb, var(--row-accent) 12%, transparent), transparent 72%);
  --workspace-swatch-art: linear-gradient(180deg, transparent 57%, rgb(255 255 255 / 68%) 59% 65%, transparent 67%);
}

[data-workspace-theme="signal"] {
  --workspace-canvas-art:
    linear-gradient(116deg, transparent 0 68%, color-mix(in srgb, var(--row-accent) 5%, transparent) 68.15% 68.55%, transparent 68.7%),
    linear-gradient(116deg, transparent 0 77%, color-mix(in srgb, var(--row-accent) 4%, transparent) 77.15% 77.38%, transparent 77.55%),
    radial-gradient(720px 330px at 4% 0, color-mix(in srgb, var(--row-accent) 14%, transparent), transparent 70%);
  --workspace-swatch-art: linear-gradient(125deg, transparent 0 43%, rgb(255 255 255 / 72%) 45% 51%, transparent 53%);
}

[data-workspace-theme="halo"] {
  --workspace-canvas-art:
    radial-gradient(circle 540px at 76% 48%, transparent 0 48%, color-mix(in srgb, var(--row-accent) 5%, transparent) 48.4% 49%, transparent 49.4%),
    radial-gradient(circle 390px at 76% 48%, transparent 0 48%, color-mix(in srgb, var(--row-accent) 3%, transparent) 48.4% 48.9%, transparent 49.3%),
    radial-gradient(720px 360px at 5% 0, color-mix(in srgb, var(--row-accent) 13%, transparent), transparent 70%);
  --workspace-swatch-art: radial-gradient(circle, transparent 0 35%, rgb(255 255 255 / 72%) 39% 49%, transparent 53%);
}

[data-workspace-theme="facet"] {
  --workspace-canvas-art:
    linear-gradient(142deg, color-mix(in srgb, var(--row-accent) 8%, transparent) 0 16%, transparent 16.2%),
    linear-gradient(211deg, transparent 0 72%, color-mix(in srgb, var(--row-accent) 4%, transparent) 72.2% 86%, transparent 86.2%),
    radial-gradient(700px 360px at 2% 0, color-mix(in srgb, var(--row-accent) 12%, transparent), transparent 70%);
  --workspace-swatch-art: linear-gradient(145deg, rgb(255 255 255 / 54%) 0 36%, transparent 38%), linear-gradient(215deg, transparent 0 56%, rgb(255 255 255 / 38%) 58%);
}

/* Tiny identity tiles reuse recipe geometry without turning list rows into six
   miniature backgrounds. The accent rail remains the primary list signal. */
[data-workspace-theme] :is(.workspace-theme-toggle i) {
  background-color: color-mix(in srgb, var(--row-accent) 13%, var(--surface-0));
  background-image: var(--workspace-swatch-art);
}

@media (prefers-contrast: more), (forced-colors: active) {
  [data-workspace-theme] { --workspace-canvas-art: linear-gradient(transparent, transparent) !important; }
}