/* JEAI Design Studio. Loaded last; colors are validated and derived in design.js.
   Scope deliberately excludes API/admin authentication and inference settings. */
body.workspace-v4[data-jeai-design] {
  font-family: var(--design-font); font-size: var(--design-font-size); color: var(--text);
  background: radial-gradient(ellipse at 12% 10%, var(--design-page-glow-two), transparent 50%),
    radial-gradient(ellipse at 88% 85%, var(--design-page-glow), transparent 55%), var(--bg);
  --glass-shadow: var(--design-shadow); --shadow: var(--design-shadow);
}
body.workspace-v4[data-jeai-design][data-design-background="solid"] { background: var(--bg); }
body.workspace-v4[data-jeai-design]::before,
body.workspace-v4[data-jeai-design] .design-preview::before {
  opacity: var(--design-stars); animation: none;
  background-image: radial-gradient(circle at 17px 29px, var(--design-primary) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 87px 113px, var(--design-secondary) 0 1px, transparent 1.6px),
    radial-gradient(circle at 139px 59px, var(--design-primary) 0 .65px, transparent 1.25px);
  background-size: var(--design-star-spacing) calc(var(--design-star-spacing) * 1.17),
    calc(var(--design-star-spacing) * 1.67) calc(var(--design-star-spacing) * 1.83),
    calc(var(--design-star-spacing) * 2.1) calc(var(--design-star-spacing) * 2.43);
}
body.workspace-v4[data-jeai-design]:not([data-design-background="stars"])::before,
body.workspace-v4[data-jeai-design]:not([data-design-background="stars"]) .design-preview::before { display: none; }
body.workspace-v4[data-jeai-design] ::selection { color: var(--design-button-ink); background: var(--design-primary); }
body.workspace-v4[data-jeai-design] :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
body.workspace-v4[data-jeai-design] :is(button,input,select,textarea) { font-family: var(--design-font); }
body.workspace-v4[data-jeai-design] :is(select,option) { color-scheme: inherit; color: var(--text); background: var(--panel-solid); }
body.workspace-v4[data-jeai-design] :is(.sidebar,.workspace-header,.composer,.suggestion,.cluster-card,.workspace-dialog) {
  background: var(--glass); color: var(--text); border-color: var(--line);
  box-shadow: var(--design-shadow); -webkit-backdrop-filter: blur(var(--design-blur)); backdrop-filter: blur(var(--design-blur));
}
body.workspace-v4[data-jeai-design] :is(.composer,.suggestion,.cluster-card,.workspace-dialog,.code-block,.feedback-form,.design-preview) { border-radius: var(--design-radius); }
body.workspace-v4[data-jeai-design] :is(.settings-button,.icon-button,.attach-button,.new-chat,.speed-toggle,.history-item,.attachment-item,.settings-info,.feedback-input,.stop-button,.dialog-primary,.secondary-button),
body.workspace-v4[data-jeai-design] :is(.answer-actions,.code-actions) button,
body.workspace-v4[data-jeai-design] :is(.setting-field select,.setting-field input,.setting-field textarea) { border-radius: var(--design-radius-small); }
body.workspace-v4[data-jeai-design] .composer-zone { background: linear-gradient(0deg, var(--design-page-fade), transparent); }
body.workspace-v4[data-jeai-design] .composer { padding: var(--design-gap); }
body.workspace-v4[data-jeai-design] .composer:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--design-focus), var(--design-shadow); }
body.workspace-v4[data-jeai-design] .composer.drag-active { background: var(--panel-solid); border-color: var(--cyan); }
body.workspace-v4[data-jeai-design] .composer textarea { font-size: max(16px, var(--design-font-size)); color: var(--text); }
body.workspace-v4[data-jeai-design] .composer textarea::placeholder { color: var(--muted); }
body.workspace-v4[data-jeai-design] :is(.composer-footer,.picker-model-section,.picker-menu-heading,.speed-inline-hint,.sidebar-bottom) { border-color: var(--line); }
body.workspace-v4[data-jeai-design] :is(.new-chat,.settings-button,.icon-button,.attach-button,.speed-toggle,.secondary-button,.feedback-cancel),
body.workspace-v4[data-jeai-design] :is(.answer-actions,.code-actions) button {
  color: var(--text); background: var(--design-tint); border-color: var(--line); box-shadow: none;
}
body.workspace-v4[data-jeai-design] :is(.new-chat,.settings-button,.icon-button,.attach-button,.speed-toggle,.secondary-button,.suggestion):hover,
body.workspace-v4[data-jeai-design] :is(.answer-actions,.code-actions) button:hover,
body.workspace-v4[data-jeai-design] .history-item:hover { background: var(--glass-hover); color: var(--text); border-color: var(--cyan); }
body.workspace-v4[data-jeai-design] :is(.send-button,.dialog-primary,.feedback-submit) {
  background: var(--design-primary); color: var(--design-button-ink); border-color: var(--design-primary);
  border-radius: var(--design-radius-small); box-shadow: var(--design-shadow);
}
body.workspace-v4[data-jeai-design] :is(.send-button,.dialog-primary,.feedback-submit):hover { background: var(--design-primary); color: var(--design-button-ink); filter: brightness(1.05); }
body.workspace-v4[data-jeai-design] :is(.history-item.active,.speed-toggle[aria-expanded="true"],.speed-presets button[aria-pressed="true"]) { background: var(--design-tint); color: var(--text); border-color: var(--cyan); }
body.workspace-v4[data-jeai-design] :is(.speed-presets button,.speed-dismiss):hover { background: var(--design-tint); color: var(--text); }
body.workspace-v4[data-jeai-design] #composer-model-select:hover { background: var(--design-tint); border-color: var(--cyan); }
body.workspace-v4[data-jeai-design] :is(.speed-heading label,.picker-menu-heading strong,.picker-model-section label,.message-content,.suggestion strong,.attachment-details strong,.cluster-card-head,.code-block-head > span:first-child) { color: var(--text); }
body.workspace-v4[data-jeai-design] :is(.section-kicker,.hero-copy,.welcome-footnote,.eyebrow,.suggestion small,.suggestion-arrow,.privacy-note,.composer-meta .composer-hint,.composer-meta .input-count,.speed-inline-hint,.speed-chip-divider,#speed-chip-value,.attachment-details small,.message-head span,.network-badge,.cluster-caption) { color: var(--muted); }
body.workspace-v4[data-jeai-design] .welcome h2 span { background: linear-gradient(105deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; }
body.workspace-v4[data-jeai-design] :is(.brand-mark,.welcome-mark,.message-avatar,.message.user .message-avatar) { background: var(--design-tint); border-color: var(--line-strong); color: var(--cyan); box-shadow: var(--design-shadow); }
body.workspace-v4[data-jeai-design] :is(.suggestion-symbol,.speed-toggle svg,.speed-toggle[data-pace="turbo"] .speed-chip-icon,.composer-model-picker > svg) { color: var(--cyan); }
body.workspace-v4[data-jeai-design] :is(.capacity-track,.speed-rail) { background: var(--line); }
body.workspace-v4[data-jeai-design] :is(.capacity-track span,.speed-fill) { background: linear-gradient(90deg,var(--design-primary),var(--design-secondary)); box-shadow: none; }
body.workspace-v4[data-jeai-design] .speed-control.speed-picker-panel { background: var(--panel-solid); border-color: var(--line-strong); border-radius: var(--design-radius); box-shadow: var(--design-shadow); }
body.workspace-v4[data-jeai-design] #composer-model-select { color: var(--text); background: var(--design-tint); border-color: var(--line); color-scheme: inherit; border-radius: var(--design-radius-small); }
body.workspace-v4[data-jeai-design] #composer-model-select option { background: var(--panel-solid); color: var(--text); }
body.workspace-v4[data-jeai-design] :is(.speed-heading output,.speed-presets button,.speed-dismiss) { color: var(--muted); background: transparent; }
body.workspace-v4[data-jeai-design] #speed-range::-webkit-slider-thumb { background: var(--design-primary); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--design-focus); }
body.workspace-v4[data-jeai-design] #speed-range::-moz-range-thumb { background: var(--design-primary); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--design-focus); }
body.workspace-v4[data-jeai-design] :is(.feedback-form,.settings-info,.attachment-item,.setting-field select,.setting-field input,.setting-field textarea,.feedback-input) { background: var(--panel-solid); color: var(--text); border-color: var(--line-strong); }
body.workspace-v4[data-jeai-design] .message.user .message-body { background: var(--design-tint); border-color: var(--line); border-radius: var(--design-radius); padding: var(--design-gap) calc(var(--design-gap) + 4px); box-shadow: var(--design-shadow); }
body.workspace-v4[data-jeai-design] .message-content { font-size: var(--design-font-size); }
body.workspace-v4[data-jeai-design] :is(.code-block,#file-preview-text) { background: var(--design-code); color: var(--text); border-color: var(--line); box-shadow: var(--design-shadow); }
body.workspace-v4[data-jeai-design] .run-trace { background: var(--design-code); color: var(--text); border-color: var(--line); border-radius: var(--design-radius); }
body.workspace-v4[data-jeai-design] .run-trace summary { background: var(--design-tint); color: var(--text); }
body.workspace-v4[data-jeai-design] .run-trace pre { background: transparent; color: var(--text); }
body.workspace-v4[data-jeai-design] .code-block-head { background: var(--design-tint); border-color: var(--line); color: var(--muted); }
body.workspace-v4[data-jeai-design] :is(.code-block pre,.code-block code) { color: var(--text); font-size: max(12px,calc(var(--design-font-size) - 2px)); }
body.workspace-v4[data-jeai-design] .message-text code { background: var(--design-tint); color: var(--cyan); }
body.workspace-v4[data-jeai-design] :is(.stop-button,.inline-notice,.attachment-item.has-error) { color: var(--violet); background: var(--design-tint-two); border-color: var(--violet); }
body.workspace-v4[data-jeai-design] :is(.feedback-error,.feedback-success) { color: var(--text); }
body.workspace-v4[data-jeai-design] .messages { gap: calc(var(--design-gap) + 16px); }
body.workspace-v4[data-jeai-design] .suggestion { padding: max(12px,var(--design-gap)); }
body.workspace-v4[data-jeai-design] .suggestion-grid { gap: max(10px,var(--design-gap)); }
body.workspace-v4[data-jeai-design] :is(.history-item,.sidebar-link,.settings-button,.speed-toggle,.speed-presets button,.attach-button) { font-size: max(12px,calc(var(--design-font-size) - 3px)); }
body.workspace-v4[data-jeai-design] :is(.hero-copy,.suggestion strong,.setting-field label,.setting-switch strong) { font-size: max(13px,calc(var(--design-font-size) - 1px)); }
body.workspace-v4[data-jeai-design] :is(.privacy-note,.composer-meta .composer-hint,.composer-meta .input-count,.welcome-footnote,.suggestion small) { font-size: max(11px,calc(var(--design-font-size) - 5px)); }
body.workspace-v4[data-jeai-design] :is(.history-item,.sidebar-link) { padding-block: max(10px,calc(var(--design-gap) * .7)); }

/* Entry point and a native modal: keyboard focus stays within the editor. */
body.workspace-v4 .design-open { flex-shrink: 0; min-height: 44px; }
body.workspace-v4 .design-sidebar-link { width: 100%; min-height: 44px; border: 0; border-radius: var(--design-radius-small); background: transparent; text-align: left; align-items: center; cursor: pointer; }
body.workspace-v4 .design-sidebar-link:hover { color: var(--text); background: var(--design-tint); }
.design-sidebar-link svg { width: 18px; height: 18px; }
body.workspace-v4 .workspace-dialog.design-dialog {
  width: min(740px,calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; margin: auto;
  border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--text);
  font-size: 14px; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.workspace-v4 .design-dialog[open] { display: flex; flex-direction: column; }
body.workspace-v4 .design-dialog::backdrop { background: rgba(0,0,0,.30); -webkit-backdrop-filter: none; backdrop-filter: none; }
.design-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 24px 24px 16px; flex-shrink: 0; }
.design-heading > div { min-width: 0; }
.design-heading h2 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; }
.design-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.design-heading .icon-button { flex-shrink: 0; width: 44px; height: 44px; }
.design-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin: 0 24px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; flex-shrink: 0; }
.design-tabs button { min-width: 0; min-height: 44px; padding: 9px 6px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; }
.design-tabs button[aria-selected="true"] { color: var(--text); background: var(--design-tint); border-color: var(--line-strong); }
.design-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 24px 24px; }
.design-preview { position: relative; display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); margin-bottom: 22px; overflow: hidden; background: linear-gradient(125deg,var(--design-tint),var(--design-tint-two)),var(--bg); box-shadow: var(--design-shadow); }
.design-preview::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.design-preview > * { position: relative; }
body.workspace-v4[data-jeai-design][data-design-background="solid"] .design-preview { background: var(--bg); }
.design-preview-label { font: 600 10px/1.5 system-ui,sans-serif; letter-spacing: .15em; color: var(--muted); }
.design-preview-message { justify-self: end; max-width: 95%; padding: 9px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--design-radius-small); color: var(--text); font-size: var(--design-font-size); }
.design-preview-answer { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: var(--design-font-size); line-height: 1.5; }
.design-preview-answer > i { width: 8px; height: 8px; border-radius: 50%; background: var(--design-primary); flex-shrink: 0; box-shadow: 0 0 12px var(--design-secondary); }
.design-section-title { margin: 0 0 13px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.design-section-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.design-section-title-row .design-section-title { margin: 0; }
.design-section-title-row > span { color: var(--cyan); font-size: 12px; }
.design-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 24px; }
.design-preset { display: grid; gap: 10px; min-width: 0; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; }
.design-preset[aria-pressed="true"] { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--design-focus); }
.design-preset-art { height: 50px; position: relative; display: block; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: #070e22; }
.design-preset-art::before { content: ""; position: absolute; inset: 10px 28% 24px 10px; border-radius: 4px; background: #8cddff; }
.design-preset-art::after { content: ""; position: absolute; inset: 31px 10px 10px 35%; border-radius: 4px; background: #b6a4ff; }
[data-design-preset="ocean"] .design-preset-art { background: #071a29; }
[data-design-preset="ocean"] .design-preset-art::before { background: #72dcff; }
[data-design-preset="ocean"] .design-preset-art::after { background: #6d9aff; }
[data-design-preset="violet"] .design-preset-art { background: #170f29; }
[data-design-preset="violet"] .design-preset-art::before { background: #c2a5ff; }
[data-design-preset="violet"] .design-preset-art::after { background: #8ddcff; }
[data-design-preset="daylight"] .design-preset-art { background: #f4f6fc; }
[data-design-preset="daylight"] .design-preset-art::before { background: #2457c5; }
[data-design-preset="daylight"] .design-preset-art::after { background: #8151ca; }
.design-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 24px; }
.design-colors { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.design-field { display: grid; align-content: start; min-width: 0; gap: 9px; }
.design-field-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 8px; align-items: baseline; }
.design-field label { color: var(--text); font-size: 13px; line-height: 1.4; }
.design-field output { color: var(--muted); font: 12px/1.4 ui-monospace,Consolas,monospace; font-variant-numeric: tabular-nums; }
.design-field input[type="color"] { display: block; width: 100%; height: 46px; padding: 4px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 9px; cursor: pointer; }
.design-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.design-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.design-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }
.design-field select { width: 100%; min-width: 0; min-height: 46px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 9px; font-size: 16px; }
.design-field input[type="range"] { width: 100%; min-width: 0; height: 44px; padding: 0; margin: 0; accent-color: var(--cyan); cursor: pointer; touch-action: pan-y; background: transparent; box-shadow: none; }
.design-field input:disabled { opacity: .38; cursor: default; }
.design-wide { grid-column: 1 / -1; }
.design-hint { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.design-glass-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.design-glass-toggle input { width: 44px; height: 44px; accent-color: var(--cyan); margin: 0; cursor: pointer; }
.design-footer { flex-shrink: 0; padding: 16px 24px max(18px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.design-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.workspace-v4 .design-footer button { width: auto; min-height: 44px; padding: 10px 16px; margin: 0; font-size: 13px; line-height: 1.5; }
.design-status { margin: 10px 0 0; min-height: 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.design-tab-panel[hidden] { display: none !important; }

/* Only composited opacity/transform animations. No scrolling backgrounds. */
@keyframes jeai-design-stars { from { opacity: calc(var(--design-stars) * .65); } to { opacity: var(--design-stars); } }
html[data-design-motion="full"]:not(.jeai-motion-lite):not(.jeai-motion-off):not(.jeai-motion-paused):not(.jeai-motion-busy) body.workspace-v4[data-jeai-design]::before { animation: jeai-design-stars 8s ease-in-out infinite alternate; }
html[data-design-motion="subtle"] :is(.speed-shimmer,.pulse-dot,.network-badge i),
html[data-design-motion="subtle"] .speed-toggle::before { animation: none !important; }
html[data-design-motion="off"] *, html[data-design-motion="off"] *::before, html[data-design-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-design-motion="off"] .jeai-enter { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  body.workspace-v4[data-jeai-design], body.workspace-v4[data-jeai-design] *, body.workspace-v4[data-jeai-design]::before,
  body.workspace-v4[data-jeai-design] *::before, body.workspace-v4[data-jeai-design] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1100px) {
  body.workspace-v4 .header-actions { gap: 6px; }
  body.workspace-v4 #design-open { width: 44px; padding: 0; justify-content: center; }
  body.workspace-v4 #design-open > span { display: none; }
}
@media (max-width: 850px) {
  body.workspace-v4[data-jeai-design] :is(.sidebar,.workspace-header,.composer) { -webkit-backdrop-filter: blur(var(--design-blur-mobile)); backdrop-filter: blur(var(--design-blur-mobile)); }
  body.workspace-v4[data-jeai-design] :is(.suggestion,.cluster-card,.workspace-dialog) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.workspace-v4[data-jeai-design] .sidebar { background: var(--panel-solid); }
}
@media (max-width: 520px) {
  body.workspace-v4 .header-actions { gap: 3px; }
  body.workspace-v4 .workspace-header { gap: 8px; padding-inline: 10px; }
  body.workspace-v4[data-jeai-design] .composer { padding: min(16px,var(--design-gap)); }
  body.workspace-v4[data-jeai-design] #composer-model-select { font-size: max(16px, var(--design-font-size)); }
  .design-heading { padding: 18px 16px 14px; }
  .design-heading h2 { font-size: 22px; }
  .design-tabs { margin-inline: 12px; gap: 1px; padding: 3px; }
  .design-tabs button { font-size: 11px; padding-inline: 3px; }
  .design-scroll { padding: 16px; }
  .design-fields { gap: 18px 14px; }
  .design-colors { grid-template-columns: minmax(0,1fr); }
  .design-colors .design-field { grid-template-columns: minmax(0,1fr) 56px; align-items: center; }
  .design-colors .design-field-heading { display: grid; gap: 4px; }
  .design-presets { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .design-preset-art { height: 42px; }
  .design-preset-art::before { bottom: 19px; }
  .design-preset-art::after { top: 26px; bottom: 7px; }
  .design-footer { padding: 12px 16px max(12px,env(safe-area-inset-bottom)); }
  .design-preview { padding: 13px; }
}
@media (max-width: 360px) {
  .design-fields:not(.design-colors) { grid-template-columns: minmax(0,1fr); }
  body.workspace-v4 .header-actions { gap: 0; }
}
@media (max-height: 560px) {
  .design-preview { display: none; }
  .design-heading { padding-block: 10px; }
  .design-heading p { display: none; }
  .design-footer { padding-block: 8px; }
  .design-status { margin-top: 5px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.workspace-v4[data-jeai-design] :is(.sidebar,.workspace-header,.composer,.suggestion,.cluster-card,.workspace-dialog) { background: var(--panel-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  body.workspace-v4[data-jeai-design] :is(.sidebar,.workspace-header,.composer,.suggestion,.cluster-card,.workspace-dialog) { background: var(--panel-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  body.workspace-v4[data-jeai-design] { color: CanvasText; background: Canvas; }
  body.workspace-v4[data-jeai-design]::before, .design-preset-art { display: none; }
  body.workspace-v4[data-jeai-design] :is(.workspace-dialog,.composer,.sidebar,.workspace-header) { background: Canvas; color: CanvasText; }
  .design-tabs button[aria-selected="true"], .design-preset[aria-pressed="true"] { outline: 2px solid Highlight; }
}