/* JEAI Glass / Studio — local styles. Load after the existing styles.
   The Studio section owns the chat spacing and composer layout.
   The sky uses small dots, never a clickable overlay. */

:root,
body.workspace-v4 {
  color-scheme: dark;
  --bg: #070e22;
  --panel: rgba(15, 29, 65, .62);
  --panel-solid: #101d3b;
  --panel-2: #17284c;
  --text: #edf5ff;
  --muted: #b0c2e0;
  --muted-2: #9aacd0;
  --line: rgba(153, 188, 255, .2);
  --line-strong: rgba(164, 199, 255, .4);
  --accent: #b6a4ff;
  --cyan: #8cddff;
  --blue: #7daaff;
  --violet: #b6a4ff;
  --green: #8cddff;
  --warning: #c8b6ff;
  --danger: #d1beff;
  --glass: linear-gradient(135deg, rgba(132, 187, 255, .11), rgba(143, 116, 255, .09) 48%, rgba(77, 153, 241, .06)), rgba(12, 24, 54, .6);
  --glass-hover: linear-gradient(135deg, rgba(132, 195, 255, .18), rgba(151, 125, 255, .16)), rgba(16, 31, 65, .7);
  --glass-shadow: 0 16px 44px rgba(2, 7, 24, .24), inset 0 1px 0 rgba(210, 233, 255, .12), inset 0 -1px 0 rgba(124, 151, 255, .035);
  --button-fill: linear-gradient(115deg, #94e0ff, #99baff 52%, #bdaaff);
  --shadow: 0 24px 64px rgba(2, 7, 24, .38);
}

/* One dot sky behind the content. Motion is opt-in below; no external images. */
body:is(.workspace-v4, .api-page, .auth-page, .admin-page) {
  position: relative;
  isolation: isolate;
  color: var(--text);
  background: linear-gradient(135deg, #070d21 0%, #0a1731 52%, #151330 100%);
}
body:is(.workspace-v4, .api-page, .auth-page, .admin-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  background-image:
    radial-gradient(circle at 23px 39px, #9addff 0 .8px, transparent 1.35px),
    radial-gradient(circle at 127px 91px, #6f9eff 0 .75px, transparent 1.35px),
    radial-gradient(circle at 76px 164px, #b6a4ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 219px 52px, #a9e4ff 0 .8px, transparent 1.5px),
    radial-gradient(circle at 157px 219px, #947cff 0 .8px, transparent 1.45px),
    radial-gradient(circle at 42px 286px, #72acff 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 283px 187px, rgba(170, 223, 255, .48) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 319px 327px, rgba(165, 142, 255, .55) 0 .65px, transparent 1.3px);
  background-size: 211px 229px, 307px 277px, 379px 337px, 461px 389px, 419px 463px, 541px 509px, 347px 401px, 613px 557px;
  background-repeat: repeat;
}
body:is(.workspace-v4, .api-page, .auth-page, .admin-page)::after {
  content: none;
}
body:is(.auth-page, .admin-page) .ambient { display: none; }
body:is(.workspace-v4, .admin-page, .auth-page) :is(.app-shell, .admin-shell, .auth-layout) {
  position: relative;
  z-index: 1;
}
::selection { color: #091633; background: #a5deff; }
body :focus-visible { outline-color: var(--cyan); }
body :is(input, select, textarea) { accent-color: var(--cyan); }
body :is(select, option) { color-scheme: dark; }
body option { color: var(--text); background: #122142; }
body :is(.chat-stage, .sidebar, .workspace-dialog, pre, .table-wrap) {
  scrollbar-color: #516a9b transparent;
  scrollbar-width: thin;
}

/* Glass panels, with enough tint to keep text legible above the stars. */
body.workspace-v4 :is(.main-panel, .chat-stage) { background: transparent; }
body.workspace-v4 .sidebar,
body.admin-page .admin-nav {
  background: linear-gradient(160deg, rgba(40, 60, 108, .36), rgba(49, 38, 95, .25)), rgba(8, 17, 41, .73);
  border-color: var(--line);
  box-shadow: inset -1px 0 0 rgba(194, 220, 255, .035), 14px 0 48px rgba(2, 7, 24, .12);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}
body.workspace-v4 .workspace-header {
  background: linear-gradient(100deg, rgba(81, 133, 220, .07), rgba(122, 95, 207, .07)), rgba(8, 18, 42, .63);
  border-color: var(--line);
  box-shadow: inset 0 -1px 0 rgba(190, 217, 255, .025);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
body.workspace-v4 :is(.suggestion, .cluster-card, .composer),
body.auth-page .auth-card,
body.admin-page :is(.stat-card, .dashboard-section),
body.api-page .api-card {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
body.workspace-v4 .suggestion { border-radius: 16px; border-color: var(--line); }
body.workspace-v4 .cluster-card { border-radius: 14px; border-color: var(--line); }
body.workspace-v4 .composer { border-radius: 20px; }
body.workspace-v4 .composer-zone {
  background: linear-gradient(0deg, rgba(7, 14, 34, .9), rgba(7, 14, 34, .65) 65%, rgba(7, 14, 34, 0));
}
body.workspace-v4 .composer:focus-within {
  border-color: rgba(144, 217, 255, .7);
  box-shadow: var(--glass-shadow), 0 0 0 3px rgba(140, 221, 255, .075), 0 0 34px rgba(118, 102, 225, .1);
}
body.workspace-v4 .composer.drag-active {
  background: linear-gradient(130deg, rgba(57, 109, 172, .5), rgba(88, 66, 154, .45)), #0d1b38;
  border-color: var(--cyan);
}
body.workspace-v4 .composer textarea { color: var(--text); }
body.workspace-v4 .composer textarea::placeholder { color: var(--muted); }

/* Small controls keep their existing sizes and positions. */
body.workspace-v4 :is(.new-chat, .settings-button, .icon-button, .attach-button),
body.workspace-v4 :is(.answer-actions, .code-actions) button,
body .secondary-button {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(120deg, rgba(131, 188, 255, .12), rgba(151, 127, 255, .12)), rgba(19, 35, 72, .56);
  box-shadow: inset 0 1px 0 rgba(208, 231, 255, .09);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.workspace-v4 .new-chat {
  border-color: rgba(154, 179, 255, .45);
  background: linear-gradient(110deg, rgba(86, 151, 243, .23), rgba(153, 119, 248, .22));
}
body.workspace-v4 :is(.new-chat, .settings-button, .icon-button, .attach-button):hover,
body.workspace-v4 :is(.answer-actions, .code-actions) button:hover,
body .secondary-button:hover,
body.workspace-v4 .suggestion:hover {
  color: var(--text);
  border-color: rgba(156, 213, 255, .62);
  background: var(--glass-hover);
  box-shadow: inset 0 1px 0 rgba(218, 237, 255, .15), 0 5px 24px rgba(42, 81, 162, .11);
}
body.workspace-v4 .feedback-form {
  display: grid;
  gap: 8px;
  width: min(440px, 100%);
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(157, 181, 255, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(65, 83, 157, .16), rgba(111, 73, 170, .12)), rgba(9, 16, 39, .45);
  box-shadow: inset 0 1px 0 rgba(225, 235, 255, .06);
}
body.workspace-v4 .feedback-label { color: var(--muted); font-size: 11px; }
body.workspace-v4 .feedback-input {
  width: 100%; min-height: 58px; box-sizing: border-box; resize: vertical;
  padding: 9px 10px; border: 1px solid rgba(148, 171, 245, .28); border-radius: 10px;
  color: var(--text); background: rgba(3, 9, 27, .52); outline: none; font-size: 12px; line-height: 1.45;
}
body.workspace-v4 .feedback-input:focus { border-color: rgba(144, 217, 255, .68); box-shadow: 0 0 0 3px rgba(140, 221, 255, .08); }
body.workspace-v4 .feedback-form-actions { display: flex; gap: 7px; flex-wrap: wrap; }
body.workspace-v4 .feedback-form-actions button { min-height: 36px; padding: 7px 10px; border-radius: 9px; font-size: 11px; }
body.workspace-v4 .feedback-submit { color: #071535; border: 1px solid rgba(204, 229, 255, .55); background: linear-gradient(120deg, #9ee5ff, #c4b5ff); }
body.workspace-v4 .feedback-cancel { color: var(--muted); border: 1px solid var(--line); background: rgba(123, 145, 211, .11); }
body.workspace-v4 .feedback-form button:disabled { cursor: wait; opacity: .58; }
body.workspace-v4 .feedback-error { color: #ffafc0; font-size: 11px; }
body.workspace-v4 .feedback-success { color: #8df6cf; font-size: 11px; }
body.workspace-v4 :is(.send-button, .dialog-primary),
body .primary-button,
body.api-page .api-card .primary-button {
  color: #0a1634;
  background: var(--button-fill);
  box-shadow: inset 0 1px 0 rgba(218, 241, 255, .55), 0 6px 24px rgba(106, 153, 255, .23);
  border-color: rgba(200, 225, 255, .55);
}
body.workspace-v4 :is(.send-button, .dialog-primary):hover,
body .primary-button:hover,
body.api-page .api-card .primary-button:hover {
  color: #0a1634;
  background: linear-gradient(115deg, #b2eaff, #b0cbff 52%, #d0c3ff);
  box-shadow: inset 0 1px 0 rgba(225, 242, 255, .7), 0 8px 28px rgba(120, 166, 255, .3);
}
body.workspace-v4 .history-item.active,
body.admin-page .admin-nav nav a.active {
  color: var(--text);
  background: linear-gradient(110deg, rgba(104, 165, 255, .15), rgba(153, 123, 255, .14));
  border-color: rgba(157, 186, 255, .3);
  box-shadow: inset 0 1px 0 rgba(196, 220, 255, .055);
}
body.workspace-v4 .history-item:hover { color: var(--text); background: rgba(126, 164, 240, .12); }
body.workspace-v4 .new-chat kbd,
body kbd { color: var(--muted); }
body.workspace-v4 .new-chat kbd { background: transparent; }
body.workspace-v4 .sidebar-bottom,
body.workspace-v4 .setting-switch { border-color: var(--line); }

/* Existing logo.png is displayed without recolouring or replacing it. */
body .brand-mark,
body.workspace-v4 :is(.brand-mark, .welcome-mark, .message-avatar),
body.api-page .api-card .brand-mark,
body.auth-page .auth-icon {
  color: var(--cyan);
  border: 1px solid rgba(173, 204, 255, .36);
  background: linear-gradient(140deg, rgba(128, 207, 255, .18), rgba(132, 111, 223, .22));
  box-shadow: inset 0 1px 0 rgba(211, 237, 255, .19), 0 6px 24px rgba(89, 117, 224, .15);
}
body.workspace-v4 .welcome-mark { border-radius: 16px; }
body .brand-mark::before { border-color: rgba(174, 200, 255, .2); }
body .brand,
body.api-page .api-card .brand { color: var(--text); }
body.workspace-v4 .welcome h2 span {
  color: #accfff;
  background: linear-gradient(105deg, #98e0ff 2%, #93baff 45%, #baa6ff 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
body.workspace-v4 .suggestion-symbol { color: var(--cyan); text-shadow: none; }
body .eyebrow,
body.workspace-v4 .eyebrow,
body.api-page .api-card .eyebrow { color: #a5d8ff; }
body.workspace-v4 :is(.message-content, .cluster-card-head, .attachment-details strong) { color: var(--text); }
body.workspace-v4 .attachment-details small,
body.api-page .api-card p,
body.auth-page .auth-card label,
body.admin-page td { color: var(--muted); }
body.workspace-v4 .privacy-note span { color: var(--muted-2); }
body.workspace-v4 :is(.pulse-dot, .network-badge i),
body .pulse-dot {
  background: var(--cyan);
  box-shadow: 0 0 9px rgba(140, 221, 255, .4);
  animation: none;
}
body.workspace-v4 .pulse-dot.offline { background: var(--violet); box-shadow: none; }
body.workspace-v4 .capacity-track,
body .mini-track,
body .slot-visual i { background: rgba(146, 174, 237, .16); }
body.workspace-v4 .capacity-track span,
body .mini-track i,
body .slot-visual i.busy {
  background: linear-gradient(90deg, #86d7ff, #8baeff 48%, #b29aff);
  box-shadow: 0 0 12px rgba(140, 174, 255, .16);
}

/* Readable code and messages; code copy/download controls are untouched. */
body.workspace-v4 .message.user .message-body {
  background: linear-gradient(120deg, rgba(91, 153, 248, .15), rgba(139, 109, 227, .2)), rgba(17, 31, 64, .76);
  border-color: rgba(151, 187, 255, .34);
  box-shadow: inset 0 1px 0 rgba(195, 220, 255, .09), 0 8px 24px rgba(2, 7, 24, .14);
}
body.workspace-v4 .message-text code {
  background: rgba(110, 149, 229, .13);
  border-color: var(--line);
  color: #b4deff;
}
body.workspace-v4 .message-text blockquote { border-color: var(--violet); color: var(--muted); }
body.workspace-v4 .message-text a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
body.workspace-v4 .code-block {
  background: rgba(6, 14, 33, .94);
  border-color: var(--line-strong);
  box-shadow: 0 12px 32px rgba(2, 7, 24, .18);
}
body.workspace-v4 .code-block-head {
  background: linear-gradient(110deg, rgba(100, 169, 244, .14), rgba(140, 113, 235, .14));
  border-color: var(--line);
}
body.workspace-v4 .code-block-head > span:first-child { color: #c9ddff; }
body.workspace-v4 .code-block code { color: #dceaff; background: none; }
body.workspace-v4 .attachment-item {
  background: linear-gradient(120deg, rgba(101, 164, 238, .1), rgba(144, 122, 238, .13)), rgba(15, 28, 59, .62);
  border-color: var(--line-strong);
}
body.workspace-v4 :is(.file-preview-button, .attachment-remove):hover { background: rgba(153, 179, 245, .17); color: var(--text); }

/* Dialogs remain in the browser's top layer, above the mobile drawer. */
body.workspace-v4 .workspace-dialog {
  color: var(--text);
  background: linear-gradient(135deg, rgba(116, 176, 250, .12), rgba(146, 119, 233, .15)), rgba(10, 21, 47, .88);
  border-color: rgba(174, 201, 255, .4);
  box-shadow: var(--glass-shadow), 0 32px 100px rgba(2, 7, 24, .6);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
}
body.workspace-v4 .workspace-dialog::backdrop {
  background: rgba(4, 10, 28, .65);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
body.workspace-v4 :is(.setting-field select, .settings-info),
body.auth-page .field,
body.api-page .api-card :is(code, .key-result textarea) {
  color: var(--text);
  background: rgba(10, 23, 52, .66);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 2px rgba(2, 7, 24, .16);
}
body.auth-page .field:focus-within { border-color: var(--cyan); }
body.workspace-v4 #file-preview-text { background: #0a1731; color: #dceaff; border-color: var(--line); }
body.workspace-v4 .sidebar-backdrop {
  /* Keep z-index 25 from workspace.css; the drawer stays above it at 30. */
  background: rgba(4, 11, 29, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Status text still names the state; colour is never the only indicator. */
body.workspace-v4 .stop-button,
body.workspace-v4 .inline-notice,
body.workspace-v4 .attachment-item.has-error,
body .form-error,
body .secondary-button.danger {
  color: var(--danger);
  background: rgba(121, 91, 198, .16);
  border-color: rgba(184, 156, 255, .54);
}
body.workspace-v4 .message-error,
body.api-page .api-card .error { color: var(--danger) !important; }
body.admin-page :is(.model-meta .online, .status-tag.ready) { color: var(--cyan); border-color: rgba(140, 221, 255, .3); }
body.admin-page :is(.model-meta .offline, .status-tag.locked) { color: var(--danger); border-color: rgba(184, 156, 255, .44); }
body.admin-page .switch span { background: #223354; border-color: var(--line-strong); }
body.admin-page .switch span::after { background: #a6b9df; }
body.admin-page .switch input:checked + span { background: rgba(134, 203, 255, .2); border-color: rgba(156, 219, 255, .5); }
body.admin-page .switch input:checked + span::after { background: var(--cyan); box-shadow: 0 0 10px rgba(140, 221, 255, .28); }
body.admin-page .model-admin-card { background: rgba(139, 169, 255, .045); }
body.admin-page .toast { background: #142548; color: var(--text); border-color: var(--line-strong); }
body.api-page .api-card { --api-blue: #98dcff; --api-violet: #b6a4ff; }
body.api-page .api-card .key-result { background: rgba(144, 126, 244, .12); border-color: rgba(175, 157, 255, .42); }
body.api-page .api-card .key-result textarea { color: var(--text); }
body.api-page .api-actions a { color: #aad9ff; }
body.api-page .api-actions a:hover { color: #d2c4ff; }

/* Reduced blur on phones; existing layout/media rules stay in workspace.css. */
@media (max-width: 850px) {
  body.workspace-v4 .sidebar {
    background: linear-gradient(160deg, rgba(61, 102, 175, .17), rgba(125, 91, 203, .15)), rgba(8, 17, 41, .93);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  body.workspace-v4 :is(.suggestion, .cluster-card) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.workspace-v4 :is(.composer, .workspace-header) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.workspace-v4 :is(.sidebar, .workspace-header, .suggestion, .cluster-card, .composer, .workspace-dialog),
  body.auth-page .auth-card,
  body.admin-page :is(.admin-nav, .stat-card, .dashboard-section),
  body.api-page .api-card { background: linear-gradient(135deg, #14284a, #201e44); }
}
@media (prefers-reduced-transparency: reduce) {
  body.workspace-v4 :is(.sidebar, .workspace-header, .suggestion, .cluster-card, .composer, .workspace-dialog),
  body.auth-page .auth-card,
  body.admin-page :is(.admin-nav, .stat-card, .dashboard-section),
  body.api-page .api-card {
    background: #132341;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  body:is(.workspace-v4, .api-page, .auth-page, .admin-page)::before { display: none; }
  body.workspace-v4 .welcome h2 span,
  body.api-page .api-card h1 {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* Motion: short interactions, no continuously moving glass/blur/shadows.
   Leave the shell and main panel untransformed: the mobile drawer relies on
   their existing stacking and positioning. No permanent will-change layers. */
:root {
  --jeai-ease: cubic-bezier(.2, .75, .25, 1);
  --jeai-fast: 150ms;
  --jeai-enter: 240ms;
}
@keyframes jeai-appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

body.workspace-v4 .run-trace {
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(8, 17, 39, .94);
}
body.workspace-v4 .run-trace summary {
  padding: 10px 14px;
  color: var(--cyan);
  background: linear-gradient(110deg, rgba(97, 172, 242, .12), rgba(159, 127, 242, .12));
  font-size: 13px;
  cursor: pointer;
}
body.workspace-v4 .run-trace pre {
  max-height: 240px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #cee4ff;
  font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
}
@keyframes jeai-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes jeai-stars {
  from { opacity: .66; }
  to { opacity: .88; }
}
@keyframes jeai-loading {
  from { opacity: .5; }
  to { opacity: .9; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Only static welcome/header items enter on page load, never a whole chat
     history or the admin rows that refresh periodically. No forwards fill. */
  body.workspace-v4 :is(.brand-row, .workspace-heading, .header-actions),
  body.workspace-v4 .welcome > :is(.welcome-mark, .eyebrow, h2, .hero-copy, .welcome-footnote),
  body.auth-page :is(.auth-brand, .auth-card, .back-link),
  body.admin-page :is(.dashboard-header, .stat-card),
  body.api-page .api-card > :is(.brand, .eyebrow, h1, p, form, code, .api-actions) {
    animation: jeai-appear var(--jeai-enter) var(--jeai-ease) both;
    animation-fill-mode: backwards;
  }
  body.workspace-v4 .suggestion {
    animation: jeai-fade var(--jeai-enter) ease-out backwards;
    animation-delay: 30ms;
  }
  body.workspace-v4 .suggestion:nth-child(2) { animation-delay: 55ms; }
  body.workspace-v4 .suggestion:nth-child(3) { animation-delay: 80ms; }
  body.workspace-v4 .suggestion:nth-child(4) { animation-delay: 105ms; }

  /* Transform/opacity are the only continuously interpolated properties. */
  body.workspace-v4 :is(.suggestion, .new-chat, .settings-button, .icon-button, .attach-button, .send-button, .stop-button, .dialog-primary, .history-item, .attachment-remove, .file-preview-button),
  body.workspace-v4 :is(.answer-actions, .code-actions) button,
  body :is(.primary-button, .secondary-button, .back-link),
  body.admin-page :is(.admin-nav a, .admin-nav button),
  body.api-page .api-actions a {
    transition: transform var(--jeai-fast) var(--jeai-ease), opacity var(--jeai-fast) ease;
  }
  body.workspace-v4 :is(.composer, .settings-info),
  body.auth-page .field,
  body.admin-page .switch span,
  body .slot-visual i {
    transition: opacity var(--jeai-fast) ease;
  }
  /* Do not animate width on the periodically updated status bars. */
  body :is(.capacity-track span, .mini-track i) { transition: none; }
  body.admin-page .switch span::after {
    transition: transform var(--jeai-fast) var(--jeai-ease);
  }
  body.workspace-v4 .suggestion-arrow,
  body.workspace-v4 .send-button > span,
  body .primary-button > :last-child,
  body.api-page .api-actions a {
    transition: transform var(--jeai-fast) var(--jeai-ease);
  }

  body.workspace-v4 :is(.new-chat, .settings-button, .icon-button, .attach-button, .send-button, .stop-button, .dialog-primary, .suggestion):active:not(:disabled),
  body.workspace-v4 :is(.answer-actions, .code-actions) button:active:not(:disabled),
  body :is(.primary-button, .secondary-button):active:not(:disabled) {
    transform: scale(.98);
  }
  body.workspace-v4 :is(.attach-button, .send-button, .new-chat):disabled,
  body :is(.primary-button, .secondary-button):disabled { transform: none; }

  /* The observer marks at most two new articles, not streaming token nodes. */
  html:not(.jeai-motion-off) body.workspace-v4 .message.jeai-enter {
    animation: jeai-appear var(--jeai-enter) var(--jeai-ease);
  }
  body.workspace-v4 .workspace-dialog[open] {
    animation: jeai-appear 180ms var(--jeai-ease);
  }
  body.workspace-v4 .workspace-dialog[open]::backdrop,
  body.workspace-v4 .sidebar-backdrop:not([hidden]) {
    animation: jeai-fade 140ms ease-out;
  }
  body.workspace-v4 :is(.attachment-list, .inline-notice):not([hidden]),
  body .form-error:not([hidden]),
  body.admin-page .toast:not([hidden]),
  body.api-page .key-result {
    animation: jeai-appear 180ms var(--jeai-ease);
  }
  body.admin-page .skeleton {
    background: rgba(153, 185, 255, .09);
    animation: jeai-loading 1.6s steps(12, end) infinite alternate;
  }
}

/* Hover is intentionally limited to devices with an actual hover pointer. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  body.workspace-v4 :is(.suggestion, .new-chat, .settings-button, .attach-button):hover:not(:disabled),
  body :is(.primary-button, .secondary-button):hover:not(:disabled) { transform: translateY(-2px); }
  body.workspace-v4 .suggestion:hover .suggestion-arrow,
  body .primary-button:hover > :last-child { transform: translate(2px, -1px); }
  body.workspace-v4 :is(.icon-button, .send-button):hover:not(:disabled) { transform: translateY(-1px); }
  body.workspace-v4 .history-item:hover { transform: translateX(2px); }
  body :is(.back-link, .api-actions a):hover { transform: translateX(-2px); }
  body.workspace-v4 :is(.new-chat, .settings-button, .icon-button, .attach-button, .send-button, .suggestion):active:not(:disabled),
  body :is(.primary-button, .secondary-button):active:not(:disabled) { transform: scale(.98); }
}

/* The full sky changes opacity only twice per second, and only on desktop.
   Do not translate the star layer under backdrop-filtered surfaces. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 851px) {
  html.jeai-motion-ready:not(.jeai-motion-lite):not(.jeai-motion-off) body:is(.workspace-v4, .api-page, .auth-page, .admin-page)::before {
    animation: jeai-stars 12s steps(24, end) infinite alternate;
  }
}

@media (max-width: 850px) and (prefers-reduced-motion: no-preference) {
  body.workspace-v4 .sidebar {
    transition: transform 180ms var(--jeai-ease), visibility 0s linear 180ms;
    pointer-events: none;
  }
  body.workspace-v4 .sidebar.open {
    transition: transform 180ms var(--jeai-ease), visibility 0s;
    pointer-events: auto;
  }
}

/* A lightweight device keeps the immediate interactions but drops decorative
   entrance sequences and uses an opaque tint instead of background blur. */
html.jeai-motion-lite {
  --jeai-fast: 110ms;
  --jeai-enter: 150ms;
}
html.jeai-motion-lite body.workspace-v4 :is(.brand-row, .workspace-heading, .header-actions),
html.jeai-motion-lite body.workspace-v4 .welcome > *,
html.jeai-motion-lite body.workspace-v4 .suggestion,
html.jeai-motion-lite body.auth-page :is(.auth-brand, .auth-card, .back-link),
html.jeai-motion-lite body.admin-page :is(.dashboard-header, .stat-card),
html.jeai-motion-lite body.api-page .api-card > * { animation: none; }
html.jeai-motion-lite body.workspace-v4 :is(.sidebar, .workspace-header, .suggestion, .cluster-card, .composer, .workspace-dialog),
html.jeai-motion-lite body.auth-page .auth-card,
html.jeai-motion-lite body.admin-page :is(.admin-nav, .stat-card, .dashboard-section),
html.jeai-motion-lite body.api-page .api-card {
  background: linear-gradient(135deg, rgba(132, 187, 255, .11), rgba(143, 116, 255, .09)), #101d38;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.jeai-motion-lite body.workspace-v4 .sidebar-backdrop,
html.jeai-motion-lite body.workspace-v4 .workspace-dialog::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.jeai-motion-lite body.admin-page .skeleton { animation: none; }
html.jeai-motion-busy body::before,
html.jeai-motion-paused body::before { animation-play-state: paused !important; }
html.jeai-motion-paused body *,
html.jeai-motion-paused body *::before,
html.jeai-motion-paused body *::after { animation-play-state: paused !important; }
html.jeai-motion-off body *,
html.jeai-motion-off body::before,
html.jeai-motion-off body *::before,
html.jeai-motion-off body *::after { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  body *, body::before, body::after, body *::before, body *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  body :is(button, a):hover { transform: none !important; }
}

/* JEAI Studio — one layout for the composer, with room for every control.
   Two rows are the safe default. A wide composer can place both groups beside
   each other; the breakpoint follows its own width, not the whole screen. */
body.workspace-v4 {
  --studio-width: 840px;
  --studio-gutter: 32px;
  height: 100dvh; min-height: 0;
}
body.workspace-v4 .workspace-header { gap: 24px; padding: 20px 32px; border-bottom-color: #b6ccff12; }
body.workspace-v4 .workspace-heading { flex: 1; min-width: 0; }
body.workspace-v4 .workspace-heading > div { min-width: 0; }
body.workspace-v4 .workspace-header h1 { max-width: none; font-size: 16px; font-weight: 550; }
body.workspace-v4 .section-kicker { font-size: 10px; letter-spacing: .13em; color: #93a5c8; }
body.workspace-v4 .header-actions { gap: 10px; }
body.workspace-v4 .header-actions .network-badge { margin-right: 14px; white-space: nowrap; }
body.workspace-v4 .settings-button { border-radius: 13px; border-color: #b2c8ff22; padding-inline: 12px; }
body.workspace-v4 .settings-button svg, body.workspace-v4 .icon-button svg { width: 19px; height: 19px; flex-shrink: 0; }
body.workspace-v4 #selected-profile { max-width: 155px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.workspace-v4 .sidebar { padding: 28px 20px 18px; }
body.workspace-v4 .brand-row { margin-bottom: 32px; }
body.workspace-v4 .brand small { text-transform: none; letter-spacing: .01em; }
body.workspace-v4 .new-chat { min-height: 48px; border-radius: 14px; padding: 12px 14px; }
body.workspace-v4 .cluster-card { padding: 17px; border-color: #a9bdff20; background: #16213b85; box-shadow: inset 0 1px 0 #c7ddff08; }
body.workspace-v4 .history-item { border-radius: 12px; padding-inline: 14px; }
body.workspace-v4 .sidebar-section-head { font-size: 10px; letter-spacing: .12em; }
body.workspace-v4 .chat-stage {
  padding: 28px max(var(--studio-gutter), calc((100% - var(--studio-width))/2));
  scroll-padding: 24px;
}
body.workspace-v4 .welcome { align-items: center; text-align: center; padding: 28px 0 32px; }
body.workspace-v4 .welcome-mark { width: 56px; height: 56px; margin-bottom: 24px; border-radius: 19px; }
body.workspace-v4 .welcome-mark img { width: 36px; height: 36px; }
body.workspace-v4 .eyebrow { margin: 0 0 18px; font-size: 10px; letter-spacing: .18em; color: #a8c9f3; }
body.workspace-v4 .welcome h2 { max-width: 680px; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.17; letter-spacing: -.045em; font-weight: 550; }
body.workspace-v4 .hero-copy { margin: 22px 0 30px; max-width: 560px; font-size: 15px; line-height: 1.8; color: #aebbd5; }
body.workspace-v4 .suggestion-grid { max-width: 690px; gap: 14px; }
body.workspace-v4 .suggestion { padding: 19px; gap: 14px; border-radius: 18px; text-align: left; background: linear-gradient(145deg, #91baff09, #a38cff07), #111d344f; box-shadow: inset 0 1px 0 #c8ddff07; }
body.workspace-v4 .suggestion-symbol { display: grid; place-items: center; width: 32px; height: 36px; font-size: 22px; }
body.workspace-v4 .suggestion strong { line-height: 1.45; }
body.workspace-v4 .suggestion small { line-height: 1.6; }
body.workspace-v4 .welcome-footnote { margin-top: 24px; max-width: 560px; font-size: 11px; line-height: 1.7; color: #899bbd; }
body.workspace-v4 .messages { gap: 36px; padding-block: 10px 24px; }
body.workspace-v4 .message-content { font-size: 16px; line-height: 1.8; }
body.workspace-v4 .message.user .message-body { border-radius: 22px 22px 7px 22px; padding: 16px 22px; border-color: #a9c1ff26; }
body.workspace-v4 .answer-actions { gap: 8px; margin-top: 18px; }
body.workspace-v4 .answer-actions button { border-radius: 11px; }

body.workspace-v4 .composer-zone {
  container: jeai-composer / inline-size;
  padding: 8px max(var(--studio-gutter), calc((100% - var(--studio-width))/2)) max(14px, env(safe-area-inset-bottom));
}
body.workspace-v4 .composer-status { min-width: 0; gap: 16px; padding: 0 8px 10px; font-size: 11px; line-height: 1.5; }
body.workspace-v4 #request-status { min-width: 0; overflow-wrap: anywhere; }
body.workspace-v4 #scroll-bottom { flex-shrink: 0; }
body.workspace-v4 .composer {
  position: relative; width: 100%; max-width: none; margin: 0; padding: 16px 18px 14px; overflow: visible;
  border: 1px solid #aec8ff30; border-radius: 26px;
  background: linear-gradient(115deg, #87c7ff09, #a78bff09), #101c32e8;
  box-shadow: inset 0 1px 0 #e3eeff0d, 0 16px 48px #02081738;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.workspace-v4 .composer:focus-within { border-color: #a5caff66; box-shadow: inset 0 1px 0 #e3eeff14, 0 0 0 3px #91b7ff08, 0 16px 48px #02081738; }
body.workspace-v4 .composer textarea {
  min-height: 72px; max-height: min(170px, 24dvh); padding: 8px 4px 16px;
  font-size: 16px; line-height: 1.7; letter-spacing: .005em;
}
body.workspace-v4 .composer textarea::placeholder { color: #98abc8; }
body.workspace-v4 .composer-footer { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #b4d0ff10; }
body.workspace-v4 .composer-preferences { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
body.workspace-v4 .composer-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.workspace-v4 .composer-actions .attach-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  width: auto; min-width: 44px; min-height: 44px; margin: 0 auto 0 0; padding: 10px 12px;
  color: #b9cce7; border: 1px solid transparent; border-radius: 13px; background: transparent; box-shadow: none; font-size: 13px;
}
body.workspace-v4 .attach-button svg { width: 19px; height: 19px; flex-shrink: 0; }
body.workspace-v4 .composer-actions .send-button { display: grid; place-items: center; flex-shrink: 0; width: 46px; min-width: 46px; height: 46px; border-radius: 15px; }
body.workspace-v4 .send-button svg { width: 22px; height: 22px; }
body.workspace-v4 .composer-actions .stop-button { flex: 0 1 auto; min-width: 0; margin: 0; border-radius: 12px; padding: 10px 12px; font-size: 12px; overflow-wrap: anywhere; }
body.workspace-v4 .composer-meta { display: flex; align-items: center; gap: 16px; min-height: 24px; padding: 8px 8px 0; }
body.workspace-v4 .composer-meta .composer-hint, body.workspace-v4 .composer-meta .input-count { display: block; font-size: 10px; line-height: 1.5; color: #8296b7; }
body.workspace-v4 .composer-meta .composer-hint { min-width: 0; flex: 1; }
body.workspace-v4 .composer-meta .input-count { flex-shrink: 0; margin-left: auto; font-variant-numeric: tabular-nums; }
body.workspace-v4 .privacy-note { margin: 7px 8px 0; font-size: 10px; line-height: 1.6; color: #8d9cba; }
body.workspace-v4 .attachment-list { margin: 0 0 12px; gap: 10px; }

/* Native model selection and a real range input keep keyboard/touch support. */
body.workspace-v4 .composer-model-picker { position: relative; min-width: 0; }
body.workspace-v4 #composer-model-select, body.workspace-v4 .speed-toggle {
  min-width: 0; width: 100%; min-height: 46px; margin: 0; border: 1px solid #b4caff20; border-radius: 14px;
  background: #afc9ff06; color: #dce9fb; font: inherit; font-size: 13px; line-height: 1.3;
}
body.workspace-v4 #composer-model-select { display: block; padding: 10px 32px 10px 13px; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; cursor: pointer; color-scheme: dark; }
body.workspace-v4 #composer-model-select option { background: #13213b; color: #e1edff; }
body.workspace-v4 .composer-model-picker > svg { position: absolute; right: 12px; top: 50%; width: 12px; height: 12px; color: #97a9ca; transform: translateY(-50%); pointer-events: none; }
body.workspace-v4 .speed-picker { position: static; min-width: 0; margin: 0; }
body.workspace-v4 .speed-toggle { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 12px; overflow: hidden; cursor: pointer; }
body.workspace-v4 #speed-chip-value { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
body.workspace-v4 .speed-toggle svg { flex-shrink: 0; width: 18px; height: 18px; color: #92d5ff; }
body.workspace-v4 .speed-toggle .speed-chip-chevron { width: 12px; height: 12px; color: #97a9ca; }
body.workspace-v4 .speed-toggle[aria-expanded="true"] { border-color: #adbdff70; background: #a3b7ff12; }
body.workspace-v4 .speed-toggle[data-pace="turbo"] .speed-chip-icon { color: #ceb6ff; }
body.workspace-v4 .speed-toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 20%, #d1f0ff28 48%, transparent 78%); transform: translateX(-120%); }
body.workspace-v4 .speed-control.speed-picker-panel {
  --speed-progress: .55;
  position: absolute; z-index: 20; left: 8px; bottom: 70px; width: min(310px, calc(100% - 16px)); max-width: calc(100% - 16px);
  max-height: min(330px, calc(100dvh - 120px)); overflow: auto; overscroll-behavior: contain;
  margin: 0; padding: 16px; border: 1px solid #acc5ff40; border-radius: 20px;
  background: radial-gradient(ellipse at top right, #9574dd16, transparent 70%), #13213bf7;
  box-shadow: 0 18px 46px #03071480, inset 0 1px 0 #d6edff12;
  opacity: 0; transform: translateY(6px) scale(.985); transform-origin: bottom center; pointer-events: none;
}
body.workspace-v4 .speed-picker-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
body.workspace-v4 .speed-heading { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px 12px; align-items: center; }
body.workspace-v4 .speed-heading label { grid-column: 1; min-width: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: #ecf4ff; overflow-wrap: anywhere; }
body.workspace-v4 .speed-heading output { grid-column: 1; grid-row: 2; width: fit-content; max-width: 100%; padding: 4px 8px; border-radius: 7px; background: #a996ff12; color: #c9bdff; font-size: 11px; overflow-wrap: anywhere; }
body.workspace-v4 .speed-dismiss { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; border-radius: 11px; color: #b9cce8; background: transparent; }
body.workspace-v4 .speed-dismiss svg { width: 16px; height: 16px; }
body.workspace-v4 .speed-dismiss:hover { background: #acd6ff12; }
body.workspace-v4 .speed-slider { position: relative; height: 48px; margin: 10px 0 4px; }
body.workspace-v4 .speed-rail { position: absolute; left: 11px; right: 11px; top: 22px; height: 4px; border-radius: 8px; overflow: hidden; background: #7ca8eb24; pointer-events: none; }
body.workspace-v4 .speed-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #63b7ff, #9ee8ff 48%, #bb9cff); transform-origin: left center; transform: scaleX(var(--speed-progress)); }
body.workspace-v4 .speed-shimmer { position: absolute; inset: 0; opacity: 0; background: linear-gradient(100deg, transparent 20%, #f3f9ffae 50%, transparent 80%); transform: translateX(-100%); }
body.workspace-v4 #speed-range { position: relative; display: block; width: 100%; height: 48px; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; border: 0; border-radius: 10px; background: transparent; cursor: ew-resize; touch-action: pan-y; box-shadow: none; }
body.workspace-v4 #speed-range::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 8px; background: transparent; }
body.workspace-v4 #speed-range::-moz-range-track { height: 4px; border: 0; border-radius: 8px; background: transparent; }
body.workspace-v4 #speed-range::-moz-range-progress { background: transparent; }
body.workspace-v4 #speed-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border: 2px solid #dff6ff; border-radius: 50%; background: linear-gradient(135deg, #bdeaff, #b5a3ff); box-shadow: 0 0 0 4px #8fc9ff12, 0 3px 10px #03071980; }
body.workspace-v4 #speed-range::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #dff6ff; border-radius: 50%; background: linear-gradient(135deg, #bdeaff, #b5a3ff); box-shadow: 0 0 0 4px #8fc9ff12, 0 3px 10px #03071980; }
body.workspace-v4 #speed-range:focus-visible, body.workspace-v4 #composer-model-select:focus-visible { outline: 2px solid #a4e5ff; outline-offset: 3px; }
body.workspace-v4 .speed-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.workspace-v4 .speed-presets button { min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 10px; color: #b1c5e5; background: transparent; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
body.workspace-v4 .speed-presets button[aria-pressed="true"] { color: #e0eeff; border-color: #adc5ff30; background: #a4baff12; }
body.workspace-v4 .speed-inline-hint { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #c6d4ff12; color: #a3b6d5; font-size: 11px; line-height: 1.6; text-align: center; }
@container jeai-composer (min-width: 620px) {
  body.workspace-v4 .composer-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  body.workspace-v4 .composer-preferences { max-width: 360px; }
  body.workspace-v4 .composer-actions .attach-button { width: 44px; padding: 10px; margin-right: 0; }
  body.workspace-v4 .composer-actions .attach-button [data-i18n="files"] { display: none; }
}
@media (max-width: 1100px) {
  body.workspace-v4 { --studio-gutter: 24px; }
  body.workspace-v4 .workspace-header { padding: 16px 24px; gap: 16px; }
}
@media (max-width: 700px) {
  body.workspace-v4 .header-actions { gap: 8px; }
  body.workspace-v4 #settings-open, body.workspace-v4 #export-chat { width: 44px; padding: 0; justify-content: center; }
  body.workspace-v4 #settings-open #selected-profile, body.workspace-v4 #settings-open .settings-chevron, body.workspace-v4 #export-chat [data-i18n="exportChat"] { display: none; }
}
@media (max-width: 520px) {
  body.workspace-v4 { --studio-gutter: 14px; }
  body.workspace-v4 .workspace-header { padding: 12px 14px; gap: 14px; }
  body.workspace-v4 .workspace-header h1 { font-size: 14px; }
  body.workspace-v4 .chat-stage { padding-top: 22px; padding-bottom: 22px; }
  body.workspace-v4 .welcome { padding: 18px 0 24px; }
  body.workspace-v4 .welcome-mark { width: 46px; height: 46px; border-radius: 16px; margin-bottom: 22px; }
  body.workspace-v4 .welcome-mark img { width: 30px; height: 30px; }
  body.workspace-v4 .eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 14px; }
  body.workspace-v4 .welcome h2 { font-size: 33px; }
  body.workspace-v4 .hero-copy { font-size: 14px; margin: 18px 0 26px; }
  body.workspace-v4 .suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.workspace-v4 .suggestion { grid-template-columns: minmax(0, 1fr) 12px; gap: 10px; padding: 15px 13px; align-items: start; }
  body.workspace-v4 .suggestion-symbol { grid-row: 1; grid-column: 1; width: 26px; height: 28px; justify-content: start; font-size: 20px; }
  body.workspace-v4 .suggestion > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; min-width: 0; }
  body.workspace-v4 .suggestion-arrow { grid-row: 1; grid-column: 2; }
  body.workspace-v4 .suggestion strong { font-size: 12px; overflow-wrap: anywhere; }
  body.workspace-v4 .suggestion small { display: none; }
  body.workspace-v4 .welcome-footnote { font-size: 10px; }
  body.workspace-v4 .composer { padding: 12px; border-radius: 23px; }
  body.workspace-v4 .composer textarea { min-height: 66px; padding: 6px 3px 14px; }
  body.workspace-v4 .composer-footer { gap: 10px; padding-top: 10px; }
  body.workspace-v4 #composer-model-select { font-size: 16px; padding-left: 11px; }
  body.workspace-v4 .speed-toggle { font-size: 14px; }
  body.workspace-v4 .composer-actions .attach-button { padding-inline: 8px; }
  body.workspace-v4 .composer-meta { padding: 7px 5px 0; min-height: 20px; }
  body.workspace-v4 .privacy-note { margin: 5px 5px 0; font-size: 10px; }
  body.workspace-v4 .message.user .message-body { max-width: 94%; padding: 14px 17px; }
  body.workspace-v4 .messages { gap: 30px; }
}
@media (max-width: 380px) {
  body.workspace-v4 { --studio-gutter: 10px; }
  body.workspace-v4 .header-actions { gap: 6px; }
  body.workspace-v4 .workspace-header { padding-inline: 10px; gap: 10px; }
  body.workspace-v4 .welcome h2 { font-size: 30px; }
  body.workspace-v4 .speed-toggle .speed-chip-chevron { display: none; }
  body.workspace-v4 .composer-meta .composer-hint { display: none; }
}
@media (max-height: 560px) {
  body.workspace-v4 .workspace-header { padding-top: 6px; padding-bottom: 6px; }
  body.workspace-v4 .composer-zone { padding-top: 4px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  body.workspace-v4 .composer { padding: 10px; border-radius: 20px; }
  body.workspace-v4 .composer textarea { min-height: 44px; max-height: min(80px, 20dvh); padding-top: 2px; padding-bottom: 8px; }
  body.workspace-v4 .composer-footer { padding-top: 6px; gap: 6px; }
  body.workspace-v4 .composer-status { padding-bottom: 6px; }
  body.workspace-v4 .composer-meta, body.workspace-v4 .privacy-note { display: none; }
}
@keyframes jeai-chip-shine { 0% { opacity: 0; transform: translateX(-120%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }
@keyframes jeai-chip-spark { 0% { transform: scale(.85) rotate(-10deg); } 55% { transform: scale(1.1) rotate(5deg); } 100% { transform: none; } }
@keyframes jeai-speed-sweep { 0% { opacity: 0; transform: translateX(-100%); } 35% { opacity: .7; } 100% { opacity: 0; transform: translateX(100%); } }
@media (prefers-reduced-motion: no-preference) {
  body.workspace-v4 .speed-picker-panel { transition: opacity 150ms ease, transform 150ms cubic-bezier(.2,.8,.3,1); }
  body.workspace-v4 .speed-toggle { transition: transform 130ms ease, border-color 150ms ease; }
  body.workspace-v4 .speed-toggle:active { transform: scale(.975); }
  body.workspace-v4 .speed-toggle .speed-chip-chevron { transition: transform 170ms ease; }
  body.workspace-v4 .speed-toggle[aria-expanded="true"] .speed-chip-chevron { transform: rotate(180deg); }
  body.workspace-v4 .speed-toggle[aria-expanded="true"]::before { animation: jeai-chip-shine 600ms ease-out; }
  body.workspace-v4 .speed-toggle[aria-expanded="true"] .speed-chip-icon { animation: jeai-chip-spark 330ms ease-out; }
  body.workspace-v4 .speed-fill { transition: transform 140ms ease-out; }
  body.workspace-v4 .speed-control:focus-within .speed-shimmer { animation: jeai-speed-sweep 600ms ease-out; }
}
@media (hover: hover) and (pointer: fine) {
  body.workspace-v4 #composer-model-select:hover, body.workspace-v4 .speed-toggle:hover { border-color: #a8caff50; background: #b1caff0c; }
  body.workspace-v4 .composer-actions .attach-button:hover { border-color: #b2caff20; background: #accbff0d; }
  body.workspace-v4 .speed-presets button:hover { color: #edf7ff; background: #9fcaff12; }
}

/* One menu contains both the model selection and the response preference. */
body.workspace-v4 .composer-preferences { grid-template-columns: minmax(0, 1fr); }
body.workspace-v4 #speed-chip-model { min-width: 0; max-width: 52%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 550; }
body.workspace-v4 .speed-chip-divider { flex-shrink: 0; color: #859abb; }
body.workspace-v4 #speed-chip-value { color: #adbcda; font-size: 12px; }
body.workspace-v4 .picker-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
body.workspace-v4 .picker-menu-heading strong { color: #edf5ff; font-size: 14px; font-weight: 600; }
body.workspace-v4 .picker-menu-heading .speed-dismiss { flex-shrink: 0; }
body.workspace-v4 .picker-model-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #c6d4ff16; }
body.workspace-v4 .picker-model-section > label { display: block; margin-bottom: 8px; color: #b9cce6; font-size: 12px; }
body.workspace-v4 .speed-heading { grid-template-columns: minmax(0, 1fr) auto; }
body.workspace-v4 .speed-heading output { grid-column: 2; grid-row: 1; }
body.workspace-v4 .speed-control.speed-picker-panel { max-height: min(440px, calc(100dvh - 120px)); }