@import url('/public/assets/ui/chat-loading.css');
@import url('/assets/fonts/fonts.css');

@font-face {
  font-family: Inter;
  src: url('/assets/Inter-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/JetBrainsMono-Regular-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'CMU Serif';
  src: url('/assets/cmu-serif-500-roman.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --app-scale: 1;
  --canvas-width: 100vw;
  --canvas-height: 100vh;
  --scaled-width: 100vw;
  --scaled-height: 100vh;
  /* Fixed application chrome, independent of page density and sidebar width. */
  --topbar-height: 36px;
  --application-sidebar-width: 44px;
  --application-sidebar-edge-inset: 8px;
  /* The logo has 4.5px inside its button; the avatar has 3px. Match the
     logo's top-bar gap with the avatar's gap from the window bottom. */
  --application-profile-bottom-inset: calc(var(--application-sidebar-edge-inset) + 1.5px);
  --application-right-inset: 0px;
  --application-panel-radius: 14px;
  --application-chrome-surface: #000;
  --font-ui: Inter;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-scale-factor: 1;
  --code-scale-factor: 1;
  --type-body: 12px;
  --type-secondary: 12px;
  --type-caption: 12px;
  --type-heading: 12px;
  --font-weight-ui: 350;
  --control-height: 38px;
  --panel-gap: 10px;
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 22px;
  --chat-avatar-size: 20px;
  --bottom-control-inset: 8px;
  --motion-fast: .16s;
  --motion-standard: .28s;
  --motion-panel: .42s;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-emphasized: cubic-bezier(.22, 1, .36, 1);
  --platform-sidebar-offset: 0px;
  --platform-sidebar-inset: 20px;
  --sidebar-motion-duration: .46s;
  --sidebar-motion-ease: cubic-bezier(.4, 0, .2, 1);
  --black: #000000;
  --sidebar: #262626;
  --audit-panel: #212121;
  --editor: #212121;
  --connections: #363636;
  --connection-panel: #515151;
  --provider-card: #656565;
  --model-row: #7a7a7a;
  --line: #494949;
  --line-soft: #383838;
  --text: #f0f0f1;
  --muted: #b9babd;
  --dim: #9b9fa7;
  --blue: #1F48FF;
  --green-card: #3c7d68;
  --yellow-card: #7d7c3c;
  --red: #ff5d65;
  --yellow: #ffca0d;
  --green: #2bca68;
  --accent-ui: #1F48FF;
  --accent-ring: #969ba4;
  --focus-ring-offset: 1px;
  --accent-soft: rgba(31, 72, 255, .16);
  --accent-foreground: #ffffff;
  --button-primary-bg: #fff;
  --button-primary-fg: #000;
}

/* Keep keyboard focus visible with a neutral outline in both themes.
   Persistent Work/Developer hosts also receive these theme-aware colors. */
.theme-light,
#office-work-host[data-theme="light"] { --button-primary-bg: #000; --button-primary-fg: #fff; --accent-ring: #707987; }
.theme-dark,
#office-work-host[data-theme="dark"] { --button-primary-bg: #fff; --button-primary-fg: #000; }

/* Native macOS traffic lights occupy the upper-left desktop title bar.
   Browser/PWA views have their own browser chrome and need no inset. */
html[data-platform="macos"][data-desktop="true"] {
  --platform-sidebar-offset: 40px;
  /* Planned native close-button left edge; a packaged shell can override it
     with its measured value. This is not a universal macOS system constant. */
  --platform-sidebar-inset: var(--native-window-control-left, 12px);
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
}

#app { position: relative; z-index: 1; }
#app.developer-modal-open { z-index: 30; }

#developer-host {
  position: fixed;
  z-index: 20;
  overflow: hidden;
  border-radius: 10px;
  background: #212121;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,.16);
}
#developer-host[hidden] { display: none; }

body {
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-ui);
  -webkit-font-smoothing: antialiased;
}

/* First-launch authentication. JavaScript gives each CSS glow randomized,
   viewport-wide motion; the heavy blur itself never animates. */
/* The sign-in screens match the website's /login page in its dark theme. Colors
   and sizes come from its rendered styles. */
.auth-landing {
  --auth-body: #242424;
  --auth-surface: #2e2e2e;
  --auth-border: #424242;
  --auth-text: #c9c9c9;
  --auth-dimmed: #828282;
  --auth-placeholder: #696969;
  --auth-hover: #3b3b3b;
  position: fixed;
  inset: 0;
  isolation: isolate;
  min-width: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--auth-text);
  background: var(--auth-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

/* There is no title bar on this screen, so the desktop window drags from here. */
.auth-drag-region { display: none; }
html[data-desktop="true"] .auth-drag-region {
  position: fixed;
  z-index: 2;
  inset: 0 0 auto;
  display: block;
  height: 32px;
  -webkit-app-region: drag;
}

.auth-logo { position: relative; z-index: 1; display: block; width: auto; height: 48px; margin-bottom: 40px; }

.auth-backdrop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 48px 16px;
}
.auth-ambient { position: absolute; inset: 0; pointer-events: none; }
.auth-ambient canvas { display: block; width: 100%; height: 100%; }

.auth-form {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 32px;
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  background: var(--auth-surface);
}

.auth-form-heading h1,
body .auth-landing .auth-form-heading h1.auth-welcome-heading {
  margin: 0 0 6px;
  color: var(--auth-text);
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}
.auth-form-heading p { margin: 0 0 20px; color: var(--auth-dimmed); font-size: 14px; }

.auth-mode-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 4px;
  background: #1f1f1f;
}
.auth-mode-switch::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc(50% - 4px);
  border-radius: 4px;
  background: var(--auth-hover);
  transition: translate 200ms ease;
}
.auth-mode-switch[data-mode="signup"]::before { translate: 100% 0; }
.auth-landing .auth-mode-button {
  position: relative;
  padding: 3px 10px;
  border: 0;
  border-radius: 4px;
  color: #b8b8b8;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.auth-landing .auth-mode-button:hover,
.auth-landing .auth-mode-button[aria-pressed="true"] { color: #fff; }
.auth-mode-button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.auth-mode-button:disabled { cursor: wait; }

.auth-social-heading { margin: 0 0 10px; color: var(--auth-text); font-size: 14px; font-weight: 500; }
.auth-social-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auth-landing .auth-social-button,
.auth-landing .auth-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--auth-border);
  border-radius: 4px;
  color: #fff;
  background: var(--auth-surface);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.auth-landing .auth-social-button:hover:not(:disabled),
.auth-landing .auth-secondary:hover:not(:disabled) { background: var(--auth-hover); }
.auth-social-button:focus-visible, .auth-secondary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-social-button:disabled, .auth-secondary:disabled { color: var(--auth-dimmed); cursor: not-allowed; }
.auth-social-logo { flex: 0 0 16px; width: 16px; height: 16px; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 22px;
  color: var(--auth-dimmed);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--auth-border); }

.auth-fields { display: grid; gap: 12px; }
.auth-name-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.auth-form label { display: block; color: var(--auth-text); font-size: 14px; font-weight: 500; }
.auth-required { margin-left: 4px; color: #ff8787; }
.auth-field-description { display: block; color: var(--auth-dimmed); font-size: 12px; font-weight: 400; line-height: 1.2; margin-bottom: 4px; }
.auth-flow-copy { margin: 0; color: var(--auth-dimmed); font-size: 14px; }

.auth-landing .auth-form input:not([type="hidden"]),
.auth-landing .auth-form select {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--auth-border);
  border-radius: 4px;
  outline: none;
  color: var(--auth-text);
  background-color: var(--auth-surface);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 34px;
  box-shadow: none;
}
.auth-landing .auth-form select {
  padding-right: 34px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M4 6l3.5 3.5L11 6' stroke='%23828282' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.auth-landing .auth-form select:invalid { color: var(--auth-placeholder); }
.auth-landing .auth-form select option { color: var(--auth-text); background: var(--auth-surface); }
.auth-landing .auth-form input::placeholder { color: var(--auth-placeholder); opacity: 1; }
.auth-landing .auth-form input:focus,
.auth-landing .auth-form select:focus { border-color: #fff; box-shadow: none; }
.auth-landing .auth-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-text);
  box-shadow: 0 0 0 1000px var(--auth-surface) inset;
  caret-color: var(--auth-text);
}
.auth-landing .auth-password-field input[aria-invalid="true"] { border-color: #ff8787; }

.auth-password-field { position: relative; }
.auth-landing .auth-password-field input:not([type="hidden"]) { padding-right: 36px; }
.auth-landing .auth-password-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #dee2e6;
  background: transparent;
  cursor: pointer;
}
.auth-password-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.25px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.auth-landing .auth-password-toggle:hover { background: var(--auth-hover); }
.auth-password-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.auth-password-toggle[aria-pressed="true"]::after { opacity: 1; }
.auth-password-toggle .auth-password-icon { width: 18px; height: 18px; }

.auth-password-requirements { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.auth-password-requirement {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--auth-dimmed);
  font-size: 12px;
  font-weight: 400;
}
.auth-password-requirement svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--auth-border); }
.auth-password-requirement.is-met { color: var(--auth-text); }
.auth-password-requirement.is-met svg { color: #40c057; }
.auth-password-match { margin: 0; color: #ff8787; font-size: 14px; }
.auth-password-match[hidden] { display: none; }

.auth-landing .auth-text-button {
  justify-self: end;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.auth-landing .auth-text-button:hover { text-decoration: underline; }
.auth-text-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-text-button.is-centered { justify-self: center; }

.auth-notice { margin: 0; color: var(--auth-dimmed); font-size: 14px; }
.auth-error { margin: 0; color: #ff8787; font-size: 14px; }

.auth-landing .auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #000;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.auth-landing .auth-submit:hover:not(:disabled) { background: #e0e0e0; }
.auth-landing .auth-submit.is-primary-login:hover:not(:disabled) { color: #fff; background: #228be6; }
.auth-submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-landing .auth-submit:disabled { cursor: wait; opacity: .6; }
.auth-submit-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: #000;
  border-radius: 50%;
  animation: auth-submit-spin .72s linear infinite;
}
@keyframes auth-submit-spin { to { transform: rotate(360deg); } }

.auth-disclaimer { margin: 20px 0 0; color: var(--auth-dimmed); font-size: 12px; text-align: center; }
.auth-disclaimer a { color: #fff; text-decoration: none; }
.auth-disclaimer a:hover { text-decoration: underline; }
.auth-disclaimer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-switch-back { display: block; margin-top: 12px; text-align: center; }

.auth-loader {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* The app fixes one font and text size globally, so these need !important too. */
.auth-landing *, .auth-landing *::before, .auth-landing *::after, .auth-landing ::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
  font-size: 14px !important;
}
.auth-landing .auth-form-heading h1 { font-family: Inter, sans-serif !important; font-size: 28px !important; }
.auth-landing .auth-divider,
.auth-landing .auth-field-description,
.auth-landing .auth-password-requirement,
.auth-landing .auth-password-requirement span,
.auth-landing .auth-disclaimer,
.auth-landing .auth-disclaimer a { font-size: 12px !important; }

@media (max-width: 768px) {
  .auth-backdrop { padding-block: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mode-switch::before, .auth-submit { transition: none; }
  .auth-submit-spinner { animation-duration: 1.4s; }
  .auth-loader { animation-duration: 1.5s; }
}

button, input, textarea, select {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 1px solid var(--accent-ring);
  outline-offset: var(--focus-ring-offset);
}
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [contenteditable="true"]:focus-visible {
  outline: 1px solid var(--accent-ring);
  outline-offset: var(--focus-ring-offset);
}
/* Overlay the field border instead of drawing a second ring outside it. */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: -1px; }

.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.canvas-slot {
  position: relative;
  width: var(--scaled-width);
  height: var(--scaled-height);
  flex: none;
}

.design-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--canvas-width);
  height: var(--canvas-height);
  flex: none;
  transform: scale(var(--app-scale));
  transform-origin: top left;
}

.window-frame {
  position: absolute;
  left: var(--application-sidebar-width);
  top: var(--topbar-height);
  width: calc(100% - var(--application-sidebar-width) - var(--application-right-inset));
  height: calc(100% - var(--topbar-height));
  display: grid;
  overflow: hidden;
  /* No outline: the page meets the black chrome directly. */
  border: 0;
  border-radius: var(--application-panel-radius) 0 var(--application-panel-radius) 0;
  background: var(--editor);
  box-shadow: none;
  transition: left .2s, top .2s, width .2s, height .2s, border-radius .2s, grid-template-columns var(--sidebar-motion-duration) var(--sidebar-motion-ease);
}

.window-frame { --accent-ui: #1F48FF; --accent-soft: rgba(31, 72, 255, .16); --accent-foreground: #fff; }

/* One uninterrupted chrome surface surrounds the rounded page panel. */
.application-shell { position: absolute; inset: 0; background: var(--application-chrome-surface); }
.application-sidebar {
  position: absolute;
  z-index: 240;
  top: var(--topbar-height);
  bottom: 0;
  left: 0;
  width: var(--application-sidebar-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--application-sidebar-edge-inset);
  background: transparent;
}
.application-home { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; color: #fff; }
.application-home:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.application-logo { width: 23px; height: 23px; background: currentColor; -webkit-mask: url('/public/assets/logos/omnesly-mark.png') center / contain no-repeat; mask: url('/public/assets/logos/omnesly-mark.png') center / contain no-repeat; }
.theme-light .application-home { color: #000; }
.application-sidebar-button { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; margin-top: 6px; border-radius: 8px; color: var(--muted); transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.application-sidebar-button > .ui-icon { width: 20px; height: 20px; }
.application-sidebar-badge { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #d92d32; pointer-events: none; }
.application-sidebar-button[aria-current="page"] { color: var(--text); background: color-mix(in srgb, currentColor 8%, transparent); }
.application-sidebar-button:hover,
.application-sidebar-button:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.theme-light .application-sidebar-button:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 5%, transparent); }

.application-sidebar > button { position: relative; overflow: visible; }
.application-sidebar-tooltip {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(100% + 8px);
  width: max-content;
  max-width: min(240px, calc(100vw - 64px));
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--audit-panel);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font-weight: var(--font-weight-ui);
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translate(-3px, -50%);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
/* Bridge the gap so a pointer can reach the label without dismissing it. */
.application-sidebar-tooltip::before { content: ''; position: absolute; inset: 0 100% 0 auto; width: 8px; }
.application-sidebar > button:not([data-tooltip-dismissed]):not([aria-expanded="true"]):is(:hover, :focus-visible) > .application-sidebar-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
/* Long account names grow upward instead of falling below the window. */
.application-sidebar > .sidebar-profile-button > .application-sidebar-tooltip { top: auto; bottom: 0; transform: translateX(-3px); }
.application-sidebar > .sidebar-profile-button:not([data-tooltip-dismissed]):not([aria-expanded="true"]):is(:hover, :focus-visible) > .application-sidebar-tooltip { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .application-sidebar-tooltip { transition: none; }
}


/* UI glyphs are Iconoir 7.11.1 regular icons (MIT), rendered through icon().
   Provider marks and workflow connector geometry are the only intentional exceptions. */
.ui-icon {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.provider-logo {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  flex: 0 0 auto;
}

.provider-logo.ink { filter: brightness(0); }
.provider-logo-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--editor) 82%, var(--text) 6%);
  color: var(--text);
  font: 650 9px/1 var(--font-ui);
  letter-spacing: -.03em;
}
.provider-anthropic { width: 30px; height: 30px; }
.provider-deepseek { width: 31px; height: 27px; }
.provider-ibm { width: 34px; }
.theme-dark .provider-ibm { filter: brightness(1.7) saturate(1.15); }

/* Shared sidebar */
.sidebar {
  position: relative;
  z-index: 10;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sidebar);
  border-right: 1px solid #4b4b4b;
  transition: opacity var(--motion-standard) ease, visibility 0s linear, border-color var(--motion-standard) ease, background-color var(--motion-standard) ease;
}

.sidebar-toggle {
  transition: right var(--sidebar-motion-duration) var(--sidebar-motion-ease), color .18s ease, transform .18s ease;
}

.sidebar-toggle:hover { transform: scale(1.06); }
.sidebar-toggle:active { transform: scale(.94); }

.sidebar-toggle {
  position: absolute;
  top: 20px;
  right: 28px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #dedfe1;
}

.sidebar-toggle .ui-icon { width: 28px; height: 28px; stroke-width: 2.2; }

.theme-switch {
  position: absolute;
  z-index: 18;
  left: 267px;
  top: 19px;
  width: 54px;
  height: 34px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid #616161;
  border-radius: 18px;
  background: #414141;
  color: #cbd2ff;
  transition: border-color .24s ease, background-color .24s ease, color .24s ease;
}

.theme-switch span {
  position: absolute;
  top: 8px;
  left: 7px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.theme-switch .ui-icon { width: 17px; height: 17px; stroke-width: 1.8; }
.theme-switch > i {
  position: absolute;
  top: 7px;
  left: 29px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f3f4f6;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), background-color .24s ease;
}
.theme-switch[aria-pressed="true"] span { transform: translateX(23px); }
.theme-switch[aria-pressed="true"] > i { transform: translateX(-23px); }

.sidebar-rule {
  position: absolute;
  left: 26px;
  width: 338px;
  height: 2px;
  background: var(--line-soft);
}

.primary-rule { top: calc(92px + var(--platform-sidebar-offset)); }

.sidebar-nav {
  position: absolute;
  left: 25px;
  top: calc(112px + var(--platform-sidebar-offset));
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-nav button {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  border-radius: 12px;
  color: #d9dadd;
  font-size: 17px;
  font-weight: 420;
  text-align: left;
  white-space: nowrap;
}

.sidebar-nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-nav button.active { background: rgba(255, 255, 255, .12); color: #fff; }
.sidebar-nav .ui-icon { width: 24px; height: 24px; flex: 0 0 24px; stroke-width: 1.85; }

.more-links {
  width: 100%;
  max-height: 80px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height .4s var(--sidebar-motion-ease), opacity .2s ease .06s, transform .4s var(--sidebar-motion-ease), visibility 0s linear;
}

.more-links button { width: 100%; height: 40px; padding-left: 49px; border-radius: 12px; font-size: 15px; }

.more-links.is-collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: max-height .34s var(--sidebar-motion-ease), opacity .14s ease, transform .34s var(--sidebar-motion-ease), visibility 0s linear .34s;
}

.sidebar-scroll {
  position: absolute;
  left: 0;
  right: 3px;
  width: auto;
  box-sizing: border-box;
  top: calc(414px + var(--platform-sidebar-offset));
  bottom: 74px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav.more-is-open + .sidebar-scroll { top: calc(494px + var(--platform-sidebar-offset)); }

.sidebar-scrollbar {
  position: absolute;
  z-index: 15;
  right: 5px;
  top: calc(103px + var(--platform-sidebar-offset));
  width: 11px;
  height: 430px;
  padding: 0 1px;
}

.sidebar-scrollbar i { display: block; width: 9px; height: 100%; border-radius: 6px; background: #535353; }

.project-rule { top: 0; }
.sidebar-scroll h2 {
  position: relative;
  margin: 31px 0 13px 28px;
  color: #85868c;
  font-size: 19px;
  font-weight: 600;
}

.project-root {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 36px;
  color: #d7d7da;
  font-size: 17px;
  font-weight: 420;
  text-align: left;
  white-space: nowrap;
}

.tree-chevron {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform .34s var(--sidebar-motion-ease);
}

.tree-chevron .ui-icon { width: 100%; height: 100%; }
.tree-chevron.right { transform: rotate(0); }
.tree-chevron.down { transform: rotate(90deg); }
.more-options-chevron { margin: 0 8px; }

.project-children {
  position: relative;
  margin-left: 57px;
  width: 307px;
  max-height: var(--project-list-height);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transform-origin: top;
  transition: max-height .42s var(--sidebar-motion-ease), opacity .2s ease .06s, transform .42s var(--sidebar-motion-ease), visibility 0s linear;
}

.project-children.is-collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: max-height .38s var(--sidebar-motion-ease), opacity .16s ease, transform .38s var(--sidebar-motion-ease), visibility 0s linear .38s;
}

.project-child {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 18px;
  color: #d9dade;
  font-size: 17px;
  font-weight: 410;
  text-align: left;
  white-space: nowrap;
}

.project-child:hover, .project-child.selected { background: #545454; }
.status-dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; }
.status-dot.green { background: var(--green); }
.status-dot.red { background: var(--red); }
.status-dot.yellow { background: var(--yellow); }
.edge-project { margin-top: 4px; }

.project-rule + .sidebar-section-heading { margin-top: 22px; }
.chats-rule {
  position: relative;
  left: 26px;
  top: auto;
  margin: 22px 0 18px;
}

.chat-row {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 26px;
  color: #d8d9dc;
  font-size: 17px;
  font-weight: 410;
  text-align: left;
  white-space: nowrap;
}

.chat-row.selected { color: #fff; }

.sidebar-nav {
  transition: left var(--sidebar-motion-duration) var(--sidebar-motion-ease), width var(--sidebar-motion-duration) var(--sidebar-motion-ease), top var(--sidebar-motion-duration) var(--sidebar-motion-ease), gap .3s ease;
}

.sidebar-nav button {
  transition: width var(--sidebar-motion-duration) var(--sidebar-motion-ease), padding var(--sidebar-motion-duration) var(--sidebar-motion-ease), background-color .16s ease, color .16s ease;
}

.theme-switch,
.sidebar-rule,
.sidebar-scroll,
.sidebar-scrollbar,
.sidebar-nav button > span:last-child {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: top var(--sidebar-motion-duration) var(--sidebar-motion-ease), opacity .2s ease .1s, transform var(--sidebar-motion-duration) var(--sidebar-motion-ease), visibility 0s linear;
}

/* Shared page chrome */
.page-title {
  position: relative;
  z-index: 20;
  width: 385px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 19px;
  border-bottom: 1px solid var(--line);
  background: #202020;
}

.page-title-icon { display: grid; place-items: center; color: var(--muted); }
.page-title-icon .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.page-title h1 { margin: 0; color: var(--text); font-size: var(--type-body); font-weight: 540; letter-spacing: 0; white-space: nowrap; }
.circle-menu { width: 34px; height: 34px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; background: #2e2e2e; color: var(--muted); }
.circle-menu:hover { background: #3a3a3a; color: var(--text); }
.circle-menu .ui-icon { width: 18px; height: 18px; }
.page-menu { position: absolute; z-index: 90; top: 58px; right: 12px; width: 232px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #2e2e2e; color: var(--text); box-shadow: 0 16px 38px rgba(0,0,0,.42); }
.page-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px; color: inherit; font-size: var(--type-secondary); text-align: left; }
.page-menu button:hover { background: #3a3a3a; }
.page-menu .ui-icon { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); }

.workspace-blackbar {
  position: relative;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #202020;
  border-bottom: 1px solid #424242;
  padding-right: 118px;
}

/* Connections */
.connections-main { position: relative; min-width: 0; height: 100%; background: var(--connections); border-right: 1px solid var(--line); }
.connections-main > .page-title { gap: 10px; padding: 0 19px; border-right: 1px solid #494949; }
.connections-main > .page-title .page-title-icon .ui-icon { width: 21px; height: 21px; stroke-width: 1.7; }
.connections-main > .page-title h1 { font-size: 17px; font-weight: 500; letter-spacing: 0; }
.connections-main > .page-title .circle-menu { width: 34px; height: 34px; }
.connections-main > .page-title .circle-menu .ui-icon { width: 18px; height: 18px; }
.connection-main-black { position: absolute; left: 385px; right: 0; top: 0; height: 70px; background: #202020; border-bottom: 1px solid #424242; }
.connection-content { position: absolute; inset: 70px 0 0; padding: 5px 14px 13px; }
.connection-toolbar { position: relative; z-index: 15; height: 49px; display: flex; align-items: center; gap: 13px; padding: 7px; border-radius: 14px; background: #515151; }
.toolbar-select { height: 35px; width: 181px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 2px solid #979aa2; border-radius: 14px; font-size: 16px; text-align: left; }
.toolbar-select.add-subagent { width: 208px; }
.toolbar-select .ui-icon { width: 22px; height: 22px; stroke-width: 2.8; }
.project-popover { position: absolute; left: 7px; top: 52px; width: 220px; padding: 7px; border: 1px solid #474747; border-radius: 12px; background: #2e2e2e; box-shadow: 0 14px 35px rgba(0,0,0,.4); }
.project-popover button { width: 100%; height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-radius: 7px; text-align: left; }
.project-popover button:hover { background: #3a3a3a; }
.project-popover .ui-icon { width: 17px; height: 17px; }
.subagent-popover {
  position: absolute;
  z-index: 80;
  left: 201px;
  top: 52px;
  width: 310px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #474747;
  border-radius: 14px;
  background: #2e2e2e;
  box-shadow: 0 20px 50px rgba(0,0,0,.48);
  transform-origin: top left;
  animation: subagent-popover-in .18s ease-out both;
}
.subagent-popover header { display: flex; align-items: center; justify-content: space-between; }
.subagent-popover header > span { display: flex; align-items: center; gap: 8px; }
.subagent-popover header strong { font-size: 14px; font-weight: 560; }
.subagent-popover header button { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: var(--muted); }
.subagent-popover header button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.subagent-popover header .ui-icon { width: 17px; height: 17px; }
.subagent-popover label { display: grid; gap: 6px; color: var(--muted); font-size: var(--type-caption); }
.subagent-popover input, .subagent-popover select { width: 100%; height: 38px; border: 1px solid #4a4a4a; border-radius: 9px; padding: 0 10px; outline: 0; background: #242424; color: var(--text); }
.subagent-popover input:focus, .subagent-popover select:focus { border-color: var(--accent-ring); box-shadow: none; }
.subagent-submit { height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; background: var(--button-primary-bg); color: var(--button-primary-fg); font-size: 12px; font-weight: 560; }
.subagent-submit .ui-icon { width: 17px; height: 17px; }
@keyframes subagent-popover-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.workflow {
  --workflow-grid-line: rgba(255,255,255,.055);
  position: absolute;
  left: 14px;
  right: 14px;
  top: 62px;
  bottom: 19px;
  overflow: hidden;
  border: 1.5px solid #747474;
  border-radius: 16px;
  background-color: var(--connections);
  background-image: linear-gradient(var(--workflow-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--workflow-grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
}

.workflow.workflow-is-fullscreen { position: fixed; z-index: 100; left: var(--application-sidebar-width); right: var(--application-right-inset); top: var(--topbar-height); bottom: 0; border-right: 0; border-radius: var(--application-panel-radius) 0 var(--application-panel-radius) 0; box-shadow: none; }
.workflow-project { position: absolute; z-index: 10; left: 7px; top: 8px; width: 180px; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 2px solid #8291c5; border-radius: 14px; background: #3c477d; font-size: 16px; }
.workflow-project .ui-icon { width: 20px; height: 20px; }
.workspace-popover { position: absolute; z-index: 20; left: 8px; top: 47px; width: 185px; padding: 7px; border: 1px solid #474747; border-radius: 10px; background: #2e2e2e; }
.workspace-popover button { width: 100%; height: 34px; padding: 0 9px; border-radius: 6px; text-align: left; }
.workspace-popover button:hover { background: #3a3a3a; }

.graph-layer { position: absolute; inset: 0; transform: scale(var(--graph-scale)); transform-origin: center center; transition: transform .18s; }
.connectors { position: absolute; inset: 0; width: 1076px; height: 1042px; overflow: visible; }
.root-connector { fill: none; stroke: #c8d1dc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 5; }
.root-node { fill: #c8d1dc; }
.column-connector { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 5; transition: stroke .2s ease; }
.column-node { transition: fill .2s ease; }
.column-connector.workflow-branch-blue { stroke: #1F48FF; }
.column-node.workflow-branch-blue { fill: #1F48FF; }
.column-connector.workflow-branch-green { stroke: #00a36b; }
.column-node.workflow-branch-green { fill: #00a36b; }
.column-connector.workflow-branch-yellow { stroke: #d8bc38; }
.column-node.workflow-branch-yellow { fill: #d8bc38; }

.agent-card {
  position: absolute;
  z-index: 5;
  width: 285px;
  height: 72px;
  overflow: visible;
  border: 1.5px solid #878787;
  border-radius: 15px;
  background: #363636;
  color: #e2e2e4;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.agent-card:hover { transform: translateY(-2px); }
.agent-card.selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.17); }
.agent-card.menu-is-open { z-index: 60; }
.agent-card.blue { background: #1F48FF; }
.agent-card.green { background: #326b5a; }
.agent-card.yellow { background: #66652f; }
.agent-card-main { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: inherit; color: inherit; text-align: left; }
.agent-title { height: 32px; display: flex; align-items: center; padding: 0 36px 0 8px; overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.agent-title > span { overflow: hidden; text-overflow: ellipsis; }
.agent-menu { position: absolute; z-index: 3; top: 6px; right: 7px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #2e2e2e; color: #dedfe1; transition: background .15s, transform .15s; }
.agent-menu:hover, .agent-menu[aria-expanded="true"] { background: #6c6c6c; transform: scale(1.05); }
.agent-menu .ui-icon { width: 13px; height: 13px; }
.agent-card-menu { position: absolute; z-index: 70; top: 30px; right: 6px; width: 205px; display: grid; gap: 3px; padding: 7px; border: 1px solid #474747; border-radius: 10px; background: #2e2e2e; box-shadow: 0 16px 38px rgba(0,0,0,.42); transform-origin: top right; animation: agent-menu-in .16s ease-out both; }
.agent-card-menu.opens-up { top: auto; bottom: 30px; transform-origin: bottom right; }
.agent-card-menu button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border-radius: 7px; color: #e5e6e8; font-size: 12px; text-align: left; transition: background .14s, color .14s; }
.agent-card-menu button:hover, .agent-card-menu button:focus-visible { background: #3a3a3a; color: #fff; }
.agent-card-menu button.danger { color: #ff989c; }
.agent-card-menu button.danger:hover, .agent-card-menu button.danger:focus-visible { background: rgba(188,66,73,.22); color: #ffb0b3; }
.agent-card-menu .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }
@keyframes agent-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.agent-model { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 8px; color: #c0c1c4; font-size: 13px; }
.agent-card.blue .agent-model, .agent-card.green .agent-model, .agent-card.yellow .agent-model { color: #e8e9eb; }
.agent-model .provider-logo { width: 27px; height: 27px; }
.agent-model em { margin-left: auto; min-width: 70px; height: 21px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 7px; border: 1px solid #707070; border-radius: 12px; background: #373737; font-size: var(--type-caption); font-style: normal; }
.agent-model em .status-dot { width: 8px; height: 8px; flex-basis: 8px; }

.agent-inspector { position: absolute; z-index: 25; left: 12px; bottom: 11px; height: 45px; display: flex; align-items: center; gap: 12px; padding: 0 9px 0 13px; border: 1px solid #7b7b7b; border-radius: 12px; background: #494949; box-shadow: 0 12px 35px rgba(0,0,0,.35); font-size: 12px; }
.agent-inspector strong { font-size: 14px; }
.agent-inspector > button { height: 29px; padding: 0 9px; border-radius: 8px; background: #616161; }
.agent-inspector .remove-agent { width: 30px; padding: 6px; color: #ff7a80; }
.agent-inspector .ui-icon { width: 18px; height: 18px; }

.zoom-control { position: absolute; z-index: 20; right: 7px; bottom: 7px; height: 37px; display: flex; align-items: center; overflow: hidden; border: 2px solid #808080; border-radius: 8px; background: #515151; }
.zoom-control button { width: 35px; height: 100%; display: grid; place-items: center; border-right: 1px solid #787878; }
.zoom-control span { width: 48px; text-align: center; font-size: var(--type-caption); }
.zoom-control .ui-icon { width: 23px; height: 23px; }

.connections-side { position: relative; min-width: 0; height: 100%; background: var(--sidebar); }
.available-connections { position: absolute; left: 16px; right: 16px; top: 84px; bottom: 16px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--connection-panel); color: var(--text); }
.connected-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.connected-panel-header > span { display: grid; gap: 4px; }
.connected-panel-header small { color: var(--dim); font-size: var(--type-caption); font-weight: 620; letter-spacing: .08em; text-transform: uppercase; }
.connected-panel-header h2 { margin: 0; font-size: 20px; font-weight: 590; letter-spacing: -.02em; }
.connected-panel-header > strong { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.07); font-size: 14px; font-weight: 600; }
.connected-panel-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.provider-list { min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #8d8d8d transparent; }
.provider-card { padding: 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: var(--provider-card); box-shadow: 0 7px 20px rgba(0,0,0,.12); }
.provider-card-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.provider-card-header .provider-logo { width: 30px; height: 30px; }
.provider-card-header > span { min-width: 0; display: grid; gap: 2px; }
.provider-card-header h3 { overflow: hidden; margin: 0; font-size: 14px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.provider-card-header small { color: var(--dim); font-size: var(--type-caption); }
.provider-card-header > .status-dot { width: 9px; height: 9px; }
.provider-health { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 12px; padding: 9px 10px; border-radius: 9px; background: rgba(24,26,31,.22); }
.provider-health > span, .provider-health button { display: flex; align-items: center; gap: 6px; }
.provider-health > span { color: var(--muted); font-size: var(--type-caption); }
.provider-health > span .ui-icon { width: 14px; height: 14px; color: var(--green); }
.provider-health button { padding: 4px 6px; border-radius: 5px; color: var(--muted); font-size: var(--type-caption); }
.provider-health button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.provider-health button .ui-icon { width: 13px; height: 13px; }
.provider-model-summary { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--type-caption); }
.provider-model-summary strong { color: var(--text); }
.provider-model-summary em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.provider-model-list { display: grid; gap: 6px; margin-top: 9px; }
.available-model { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 11px; border-radius: 8px; background: var(--model-row); text-align: left; }
.available-model > span { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.available-model strong { overflow: hidden; font-size: var(--type-caption); font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.available-model small { color: var(--dim); font-size: var(--type-caption); white-space: nowrap; }
.available-model .ui-icon { width: 14px; height: 14px; color: var(--dim); }
.available-model:hover { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.provider-model-more { padding: 3px 2px 0; color: var(--dim); font-size: var(--type-caption); }
.provider-remove { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: #ff9ba0; font-size: var(--type-caption); }
.provider-remove:hover { color: #ffc0c3; }
.provider-remove .ui-icon { width: 14px; height: 14px; }
.add-connection-button { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 550; }
.add-connection-button:hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 8%, var(--audit-panel)); }
.add-connection-button .ui-icon { width: 18px; height: 18px; }

/* Dialogs and feedback */
.modal-backdrop {
  position: absolute;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(4px);
}

.modal {
  width: 400px;
  padding: 16px 18px 18px;
  border: 1px solid #474747;
  border-radius: 22px;
  background: #2e2e2e;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

.modal-title { height: 39px; display: flex; align-items: flex-start; margin-bottom: 10px; }
.modal-title h2 { margin: 0; font-size: 22px; }
.modal-title button { width: 24px; height: 24px; margin-left: auto; }
.modal-title .ui-icon { width: 100%; height: 100%; }
.modal label { display: block; margin: 13px 0; color: #c8c9cc; font-size: 13px; }
.modal input, .modal select { width: 100%; height: 34px; margin-top: 5px; border: 1px solid #4a4a4a; border-radius: 10px; background: #242424; padding: 0 11px; color: #fff; }
#project-name:focus,
#project-description:focus { border-color: var(--accent-ring); outline: 1px solid var(--accent-ring); outline-offset: -1px; box-shadow: none; }
.modal p { color: #c4c5c8; line-height: 1.5; }
.modal-help { margin: 2px 0 0; font-size: 12px; line-height: 1.45; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal-actions button { height: 34px; padding: 0 13px; border-radius: 9px; background: #3a3a3a; }
.modal-actions button.primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.modal-actions button.danger { background: #a34046; }
.composer-permission-card { width: min(100%, 620px); margin: 0 auto 9px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--editor); color: var(--text); box-shadow: 0 12px 32px rgba(0,0,0,.22); pointer-events: auto; }
.composer-permission-heading { display: flex; align-items: center; gap: 9px; min-height: 22px; }
.composer-permission-heading > .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent-ui); }
.composer-permission-heading strong { min-width: 0; flex: 1; font-size: 13px; line-height: 1.35; }
.composer-permission-heading > button { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.composer-permission-heading > button .ui-icon { width: 15px; height: 15px; }
.composer-permission-scope { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 6px; font-size: 12px; }
.composer-permission-scope span { flex: 0 0 auto; color: var(--muted); }
.composer-permission-scope code { min-width: 0; max-height: 4.2em; overflow: auto; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.composer-permission-card > small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.composer-permission-card > small.is-error { color: var(--red); }
.composer-permission-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.composer-permission-actions button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 12px; }
.composer-permission-actions button.primary { border-color: var(--accent-ring); color: #fff; }
.composer-permission-actions button:disabled { opacity: .5; cursor: not-allowed; }
.setting-dropdown-option:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 520px) { .composer-permission-scope { display: block; } .composer-permission-scope code { display: block; margin-top: 3px; } .composer-permission-actions { justify-content: flex-start; } }
.profile-menu { display: flex; flex-direction: column; gap: 6px; }
.profile-menu button { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border-radius: 9px; text-align: left; }
.profile-menu button:hover { background: #3a3a3a; }

/* Success and error pop-ups (public/assets/ui/notifications.js), matching the
   website's Mantine notifications: bottom-right, sized to the text. */
.app-notifications {
  --notification-surface: #2e2e2e;
  --notification-border: #696969;
  --notification-title: #fff;
  --notification-description: #828282;
  --notification-close: #c9c9c9;
  --notification-close-hover: #1f1f1f;
  --notification-success: #2f9e44;
  --notification-error: #e03131;
  position: fixed;
  z-index: 10000;
  right: 16px;
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  pointer-events: none;
  font-family: var(--font-ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
.app-notifications[data-theme='light'] {
  --notification-surface: #fff;
  --notification-border: #dee2e6;
  --notification-title: #212529;
  --notification-description: #868e96;
  --notification-close: #495057;
  --notification-close-hover: #f8f9fa;
  --notification-success: #40c057;
  --notification-error: #fa5252;
}
.app-notifications:empty { display: none; }
.app-notification {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  min-width: 240px;
  max-width: 100%;
  padding: 10px 10px 10px 14px;
  overflow: hidden;
  border: 1px solid var(--notification-border);
  border-radius: 8px;
  background: var(--notification-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.05), rgba(0,0,0,.05) 0 28px 23px -7px, rgba(0,0,0,.04) 0 12px 12px -7px;
  pointer-events: auto;
}
.app-notification-icon { flex: 0 0 20px; width: 20px; height: 20px; margin-inline-end: 10px; }
.app-notification[data-kind='success'] .app-notification-icon { color: var(--notification-success); }
.app-notification[data-kind='error'] .app-notification-icon { color: var(--notification-error); }
.app-notification-body { flex: 1; min-width: 0; margin-inline-end: 10px; overflow: hidden; }
.app-notification-title { margin-bottom: 2px; color: var(--notification-title); font-size: 14px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.app-notification-description { color: var(--notification-description); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.app-notification-close {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--notification-close);
  cursor: pointer;
}
.app-notification-close:hover { background: var(--notification-close-hover); }
.app-notification-close:focus-visible { outline: 2px solid var(--notification-description); outline-offset: 1px; }
.app-notification-close-icon { width: 16px; height: 16px; stroke-width: 1.8; }
.app-notification[data-phase='entering'] { animation: app-notification-in 250ms ease both; }
.app-notification[data-phase='leaving'] { animation: app-notification-out 220ms ease both; }
@keyframes app-notification-in { from { opacity: 0; transform: translateX(calc(100% + 16px)); } to { opacity: 1; transform: none; } }
@keyframes app-notification-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(100% + 16px)); } }
@media (prefers-reduced-motion: reduce) { .app-notification[data-phase] { animation: none; } }
/* "Want to save changes before you leave?" — shown when leaving a Settings
   section, or Settings, with unsaved changes. Same card as the pop-ups, with
   a red Leave Page button and a blue Save Changes button. */
.settings-leave-prompt { align-items: stretch; width: fit-content; padding: 14px 12px 14px 14px; }
.settings-leave-prompt .app-notification-body { margin-inline-end: 0; }
.settings-leave-actions { display: flex; justify-content: flex-start; gap: 8px; margin-top: 12px; }
.settings-leave-actions button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.settings-leave-actions button:disabled { cursor: default; opacity: .6; }
.settings-leave-discard { background: #e03131; }
.settings-leave-discard:hover:not(:disabled) { background: #c92a2a; }
.settings-leave-save { background: #228be6; }
.settings-leave-save:hover:not(:disabled) { background: #1c7ed6; }
.settings-leave-stack[data-theme='light'] .settings-leave-save { background: #1c7ed6; }
.settings-leave-stack[data-theme='light'] .settings-leave-save:hover:not(:disabled) { background: #1971c2; }
.settings-leave-actions button:focus-visible { outline: 2px solid var(--notification-title); outline-offset: 2px; }
@media (max-width: 520px) { .app-notification { width: 100%; min-width: 0; } }

/* Light theme */
/* Settings */
.settings-frame { grid-template-columns: 390px minmax(0, 1fr); }
.settings-frame.sidebar-is-collapsed { grid-template-columns: 96px minmax(0, 1fr); }
.settings-main { position: relative; min-width: 0; height: 100%; overflow: hidden; background: var(--editor); }
.settings-topbar {
  position: relative;
  z-index: 60;
  height: 70px;
  display: flex;
  align-items: center;
  --topbar-gap: 14px;
  gap: var(--topbar-gap);
  padding: 0 118px 0 24px;
  border-bottom: 1px solid #494949;
  background: #202020;
}
.settings-title { min-width: 130px; display: flex; align-items: center; gap: 9px; }
.settings-title .ui-icon { width: 25px; height: 25px; color: #777a82; }
.settings-title h1 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.015em; }
.application-search-wrap { position: relative; width: 26px; min-width: 26px; max-width: 280px; height: 42px; flex: 0 1 auto; margin-left: auto; transition: width 280ms cubic-bezier(.22, 1, .36, 1); }
.application-search-wrap.is-expanded { width: 280px; }
.application-search {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #8f9299;
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease, padding 280ms cubic-bezier(.22, 1, .36, 1);
}
.application-search-wrap.is-expanded .application-search { padding: 0 8px 0 4px; border-color: #595959; background: #2d2d2d; }
.application-search-toggle { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; }
.application-search-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.application-shell.theme-dark .application-search-wrap:not(.is-expanded) .application-search-toggle { color: #fff; }
.application-search-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: -1px; }
.application-search-toggle .ui-icon { width: 16px; height: 16px; }
.application-search input { width: 100%; min-width: 0; flex: 1 1 auto; border: 0; outline: 0; background: transparent; color: #f0f0f1; font-size: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
.application-search-wrap.is-expanded input { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 150ms ease 100ms, visibility 0s; }
.application-search input::placeholder { color: #8f9299; }
.application-search input::-webkit-search-cancel-button { cursor: pointer; filter: brightness(0) invert(1); opacity: .92; }
.application-search-results {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: 354px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #595959;
  border-radius: 13px;
  background: #2a2a2a;
  box-shadow: 0 18px 46px rgba(0,0,0,.46);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.985);
  transform-origin: top;
  transition: opacity .18s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
  scrollbar-width: thin;
  scrollbar-color: #595959 transparent;
}
.application-search-results.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear;
}
.application-search-result {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 9px;
  color: #e4e5e8;
  text-align: left;
  transition: background-color .15s ease, transform .15s ease;
}
.application-search-result:hover, .application-search-result:focus-visible { background: #3e3e3e; outline: none; }
.application-search-result:active { transform: scale(.988); }
.application-search-result-icon { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; color: #fff; }
.application-search-result-icon .ui-icon { width: 19px; height: 19px; }
.application-search-result > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.application-search-result strong { overflow: hidden; font-size: 15px; font-weight: 570; text-overflow: ellipsis; white-space: nowrap; }
.application-search-result strong .application-search-match { background: transparent; color: #87acd8; }
.application-search-result small { overflow: hidden; color: #989ba3; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.application-search-result > .ui-icon { width: 16px; height: 16px; color: #fff; }
.application-search-no-results { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #92959d; }
.application-search-no-results > .ui-icon { width: 24px; height: 24px; }
.application-search-no-results > span { display: grid; gap: 3px; }
.application-search-no-results strong { color: #dedfe2; font-size: 15px; }
.application-search-no-results small { font-size: 12px; }
.settings-layout { position: absolute; inset: 70px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.settings-rail {
  position: relative;
  overflow: hidden;
  border-right: 1px solid #484848;
  background: #262626;
}
.settings-account { height: 92px; display: flex; align-items: center; gap: 13px; padding: 0 20px; border-bottom: 1px solid #3a3a3a; }
.settings-account > div, .settings-avatar, .profile-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border-radius: 50%;
  background: #1F48FF;
  color: #fff;
  font-size: 20px;
  font-weight: 650;
}
.settings-account span { display: grid; gap: 3px; min-width: 0; }
.settings-account strong { font-size: 17px; font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-account em { color: #9699a1; font-size: 13px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-rail nav { padding: 12px 10px 50px; }
.settings-rail nav button {
  width: 100%;
  height: 52px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border-radius: 12px;
  color: #c8c9cd;
  font-size: 17px;
  text-align: left;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.settings-rail nav button:hover { background: #363636; color: #fff; }
.settings-rail nav button.active { background: #454545; color: #fff; }
.settings-rail nav button:active { transform: scale(.985); }
.settings-rail nav button > .ui-icon:first-child { width: 23px; height: 23px; color: #d9dadd; }
.settings-rail nav button > .ui-icon:last-child { width: 17px; height: 17px; color: #d9dadd; }
.settings-rail nav button.active > .ui-icon { color: #fff; }

.settings-content { min-width: 0; container: settings-content / inline-size; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #535353 transparent; background: #202020; }
.settings-content::-webkit-scrollbar { width: 11px; }
.settings-content::-webkit-scrollbar-track { background: transparent; }
.settings-content::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 6px; background: #535353; background-clip: padding-box; }
.settings-content-inner { width: min(1100px, calc(100% - 72px)); margin: 0 auto; padding: 39px 0 90px; }
.settings-section { display: none; }
.settings-section.is-active { display: block; }
.settings-frame.settings-is-entering .settings-section.is-active { animation: settings-enter .24s ease both; animation-delay: var(--settings-entry-delay, 0ms); }
@keyframes settings-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.settings-section-heading { margin: 0 0 25px; }
.settings-section-heading p { margin: 0 0 7px; color: var(--accent-ui); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.settings-section-heading h2 { margin: 0; font-size: 34px; font-weight: 520; letter-spacing: -.025em; }
.settings-section-heading > span { display: block; max-width: 760px; margin-top: 9px; color: #9fa1a8; font-size: 16px; line-height: 1.45; }

.settings-card {
  margin-bottom: 20px;
  overflow: visible;
  border: 1px solid #444444;
  border-radius: 16px;
  background: #2a2a2a;
}
/* The menu must clear sibling cards for the whole open/close transition. */
.settings-card:has(.setting-dropdown.is-closing) { position: relative; z-index: 80; }
.settings-card:has(.setting-dropdown.is-open) { position: relative; z-index: 81; }
.settings-card > h3 { height: 48px; margin: 0; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #404040; color: #bfc1c7; font-size: 14px; font-weight: 620; letter-spacing: .035em; text-transform: uppercase; }
.setting-row {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 14px 20px;
  border-bottom: 1px solid #3d3d3d;
}
.setting-row:last-child { border-bottom: 0; }
.setting-row[hidden], .shortcut-row[hidden] { display: none; }
.setting-row.is-search-target, .shortcut-row.is-search-target { animation: settings-search-target 1.5s ease; }
@keyframes settings-search-target {
  0%, 100% { background: transparent; box-shadow: inset 3px 0 transparent; }
  20%, 72% { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent-ring); }
}
.setting-copy { min-width: 0; display: grid; gap: 5px; }
.setting-copy strong { color: #f0f0f2; font-size: 17px; font-weight: 520; }
.setting-copy span { max-width: 690px; color: #9699a1; font-size: 14px; line-height: 1.35; }
.setting-control { min-width: 250px; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; }

.setting-dropdown { position: relative; z-index: 1; width: 230px; }
.setting-dropdown.is-open { z-index: 80; }
.setting-dropdown-toggle {
  width: 100%;
  height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17px;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border: 1px solid #595959;
  border-radius: 10px;
  background: #373737;
  color: #e2e3e6;
  font-size: 14px;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.setting-dropdown-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-dropdown-toggle > .ui-icon { width: 17px; height: 17px; color: #92959d; transform: rotate(90deg); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.setting-dropdown-toggle:hover, .setting-dropdown.is-open .setting-dropdown-toggle { border-color: var(--accent-ring); box-shadow: none; }
.setting-dropdown-toggle:focus-visible { outline-offset: -1px; }
.setting-dropdown.is-open .setting-dropdown-toggle > .ui-icon { transform: rotate(-90deg); }
.setting-dropdown-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: 100%;
  max-height: 270px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #474747;
  border-radius: 12px;
  background: #2e2e2e;
  box-shadow: 0 17px 42px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: top;
  transition: opacity .17s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
  scrollbar-width: thin;
  scrollbar-color: #595959 transparent;
}
.setting-dropdown.opens-up .setting-dropdown-menu { top: auto; bottom: calc(100% + 8px); transform: translateY(8px) scale(.98); transform-origin: bottom; }
.setting-dropdown.is-open .setting-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .17s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear; }
.setting-dropdown-option { width: 100%; min-height: 37px; display: grid; grid-template-columns: minmax(0, 1fr) 17px; align-items: center; gap: 10px; padding: 0 9px; border-radius: 8px; color: #d9dade; font-size: 14px; text-align: left; }
.setting-dropdown-option:hover, .setting-dropdown-option:focus-visible { background: #444444; outline: none; }
.setting-dropdown-option.selected { background: var(--accent-soft); color: #fff; }
.setting-dropdown-option > .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.setting-dropdown-language .setting-dropdown-toggle { grid-template-columns: 16px minmax(0, 1fr) 17px; }
.setting-dropdown-language .setting-dropdown-option { grid-template-columns: 16px minmax(0, 1fr) 13px; }
.setting-language-flag { display: block; width: 16px; height: 16px; object-fit: contain; justify-self: start; border-radius: 3px; }
.setting-dropdown-check { display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; }
.setting-dropdown-check > .ui-icon { width: 13px; height: 13px; color: var(--text); }
.setting-input { width: 270px; height: 38px; padding: 0 12px; border: 1px solid #595959; border-radius: 10px; outline: 0; background: #373737; color: #ececef; font-size: 14px; }
.setting-input:focus { border-color: var(--accent-ring); box-shadow: none; }
.setting-range {
  width: 230px;
  display: grid;
  /* The value reads first, then the slider. */
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.setting-range > output { grid-column: 1; grid-row: 1; }
.setting-range > .glass-slider { grid-column: 2; grid-row: 1; }
/* Settings sliders use the Liquid Glass slider from glisse (MIT, (c) 2026
   Kelvin Zhang, https://glisse.kelvinzhang.com): a thin rail, the Omnesly
   blue fill and the same white glass knob as the switches. The real range
   input sits on top, invisible, so dragging and the keyboard work as before.
   --range-value is the position from 0 to 1. */
.glass-slider {
  --slider-rail: rgb(255 255 255 / 0.1);
  --slider-fill: #228be6;
  /* The knob's drawn width; it's the 60 by 40px glass shape scaled down. */
  --slider-knob: 26px;
  --slider-knob-scale: calc(26 / 60);
  position: relative;
  min-width: 0;
  height: 30px;
}
.theme-light .glass-slider { --slider-rail: rgb(0 0 0 / 0.1); --slider-fill: #1c7ed6; }
.glass-slider-track {
  position: absolute;
  inset: 12px 0 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--slider-rail);
  pointer-events: none;
}
.glass-slider-fill {
  display: block;
  width: calc((100% - var(--slider-knob)) * var(--range-value, 0) + var(--slider-knob) / 2);
  height: 100%;
  border-radius: inherit;
  background: var(--slider-fill);
}
.glass-slider-thumb {
  position: absolute;
  top: -5px;
  left: calc((100% - var(--slider-knob)) * var(--range-value, 0) + var(--slider-knob) / 2 - 30px);
  width: 60px;
  height: 40px;
  border-radius: 999px;
  pointer-events: none;
  scale: var(--slider-knob-scale);
  -webkit-backdrop-filter: blur(2px) brightness(1.15) saturate(1.5);
  backdrop-filter: blur(2px) brightness(1.15) saturate(1.5);
  box-shadow:
    0 6px 24px rgb(0 0 0 / 0.2),
    inset 0 0 0 1.5px rgb(255 255 255 / 0.5),
    inset 0 2px 1px rgb(255 255 255 / 0.45),
    inset 2px 7px 24px rgb(0 0 0 / 0.09),
    inset -2px -7px 24px rgb(255 255 255 / 0.16);
  transition: scale 220ms cubic-bezier(.3, 1.35, .5, 1);
}
.glass-slider:active .glass-slider-thumb { scale: calc(var(--slider-knob-scale) * 1.25); }
.glass-slider:active .glass-slider-thumb > .glass-switch-face { opacity: 0.15; }
.glass-slider input[type="range"] {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.glass-slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.glass-slider input[type="range"]::-moz-range-track { height: 6px; background: transparent; }
.glass-slider input[type="range"]::-webkit-slider-thumb { width: var(--slider-knob); height: 30px; margin-top: -12px; border: 0; background: transparent; opacity: 0; appearance: none; -webkit-appearance: none; }
.glass-slider input[type="range"]::-moz-range-thumb { width: var(--slider-knob); height: 30px; border: 0; background: transparent; opacity: 0; }
.glass-slider:has(input:focus-visible) .glass-slider-thumb { outline: 2px solid var(--accent-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .glass-slider-thumb { transition: none; } }
.setting-range output { color: #d8d9dd; font-size: 14px; text-align: right; white-space: nowrap; }
.setting-action { min-width: 114px; height: 36px; padding: 0 14px; border: 1px solid #5e5e5e; border-radius: 10px; background: #3a3a3a; color: #e1e2e5; font-size: 14px; transition: background-color .16s ease, border-color .16s ease; }
.setting-action:hover { border-color: #787878; background: #484848; }
.setting-action.danger { border-color: rgba(255,93,101,.45); color: #ff9298; }
.danger-row .setting-copy strong { color: #ff9ca1; }
.settings-textarea-label { display: grid; gap: 10px; padding: 18px 20px 20px; color: #aaaeb5; font-size: 14px; }
.settings-textarea-label textarea { min-height: 116px; resize: vertical; padding: 13px; border: 1px solid #595959; border-radius: 11px; outline: 0; background: #353535; color: #ececef; font-size: 14px; line-height: 1.45; }

.settings-profile-card, .plan-card {
  min-height: 112px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #474747;
  border-radius: 16px;
  background: linear-gradient(135deg, #333333, #2a2a2a);
}
.settings-profile-card { min-height: 0; margin-bottom: 14px; gap: 12px; padding: 12px 16px; }
.settings-profile-card > div:nth-child(2) { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.settings-profile-card strong { font-size: 20px; font-weight: 560; }
.settings-profile-card span { color: #a7a9b0; font-size: 14px; }
.settings-profile-card .setting-action { margin-left: auto; }
.settings-profile-card > .setting-status { flex-shrink: 0; margin-inline-start: auto; }
.connection-settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.settings-provider { min-height: 105px; display: grid; grid-template-columns: minmax(0,1fr) 12px; align-items: center; gap: 12px; padding: 15px; border: 1px solid #444444; border-radius: 15px; background: #2a2a2a; }
.settings-provider > div { display: flex; align-items: center; gap: 10px; }
.settings-provider > div > span { display: grid; gap: 4px; }
.settings-provider strong { font-size: 16px; font-weight: 560; }
.settings-provider em { color: #9699a1; font-size: 12px; font-style: normal; }
.settings-provider .setting-action { grid-column: 1 / -1; width: 100%; }
.shortcut-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid #3d3d3d; color: #e2e3e6; font-size: 15px; }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row > div { display: flex; align-items: center; gap: 11px; }
.shortcut-row kbd { min-width: 76px; height: 30px; display: grid; place-items: center; padding: 0 8px; border: 1px solid #5e5e5e; border-bottom-width: 3px; border-radius: 7px; background: #383838; color: #d8d9dd; font-family: var(--font-ui); font-size: 12px; }
.shortcut-row button { color: #8fa5ff; font-size: 13px; }
.plan-card { background: linear-gradient(135deg, rgba(79,94,173,.45), rgba(42,43,49,.9)); }
.plan-card > div { display: grid; gap: 4px; }
.plan-card span, .plan-card em { color: #bec2d2; font-size: 13px; font-style: normal; }
.plan-card strong { font-size: 23px; font-weight: 570; }
.plan-card > b { margin-left: auto; font-size: 30px; font-weight: 580; }
.plan-card > b small { color: #aeb1bb; font-size: 13px; font-weight: 430; }
.usage-summary { padding: 18px 20px 6px; }
.usage-summary > div:first-child { display: flex; justify-content: space-between; color: #acafb6; font-size: 14px; }
.usage-summary > div strong { color: #e4e5e7; }
.usage-track { height: 9px; margin: 12px 0 8px; overflow: hidden; border-radius: 5px; background: #444444; }
.usage-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6679dd, #8da0ff); }
.usage-summary p { margin: 0; color: #858890; font-size: 12px; }
.settings-search-empty { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 9px; color: #888b93; }
.settings-search-empty[hidden] { display: none; }
.settings-search-empty .ui-icon { width: 38px; height: 38px; }
.settings-search-empty strong { color: #d1d2d6; font-size: 20px; }
.settings-search-empty span { font-size: 14px; }

.user-reduced-motion *, .user-reduced-motion *::before, .user-reduced-motion *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

.theme-light {
  --composer-tool-color: #59636f;
  --sidebar: #f3f4f6;
  --audit-panel: #f7f8fa;
  --editor: #f5f6f8;
  --connections: #e9ebef;
  --connection-panel: #d9dce2;
  --provider-card: rgba(255, 255, 255, .72);
  --model-row: rgba(255, 255, 255, .88);
  --line: #c8ccd3;
  --line-soft: #d8dbe1;
  --text: #1c1f25;
  --muted: #5e636d;
  --dim: #68707b;
  color: var(--text);
}

.theme-light .theme-switch { border-color: #c4c8d0; background: #dde1e7; color: #b65e1d; }
.theme-light .theme-switch > i { background: #fff; box-shadow: 0 1px 4px rgba(30,36,46,.22); }
.theme-light .sidebar { border-right-color: #c8ccd3; }
.theme-light .sidebar-toggle { color: #4a4f58; }
.theme-light .sidebar-rule { background: #d5d8df; }
.theme-light .sidebar-nav button, .theme-light .project-root, .theme-light .project-child, .theme-light .chat-row { color: #373b43; }
.theme-light .sidebar-nav button:hover, .theme-light .sidebar-nav button.active, .theme-light .project-child:hover, .theme-light .project-child.selected { background: #dfe2e7; color: #171a1f; }
.theme-light .side-heading, .theme-light .sidebar-scroll h2 { color: #747a84; }
.theme-light .sidebar-scrollbar i { background: #b4b9c2; }
.theme-light .page-menu, .theme-light .project-popover, .theme-light .workspace-popover {
  border-color: #c4c8d0;
  background: #fff;
  color: #252930;
  box-shadow: 0 14px 38px rgba(35,42,53,.16);
}
.theme-light .page-menu button:hover, .theme-light .project-popover button:hover, .theme-light .workspace-popover button:hover { background: #eceef2; }

.theme-light .page-title { border-bottom-color: #c8ccd3; background: #fff; }
.theme-light .page-title h1 { color: #1d2026; }
.theme-light .page-title-icon { color: #737983; }
.theme-light .circle-menu { background: #e5e7eb; }
.theme-light .circle-menu .ui-icon { color: #5b616b; }
.theme-light .provider-openai { filter: brightness(0) opacity(.8); }

.theme-light .workspace-blackbar { border-bottom-color: #c8ccd3; background: #fff; }
.theme-light .connection-main-black { border-bottom-color: #c8ccd3; background: #fff; }
.theme-light .connections-main > .page-title { border-right-color: #c8ccd3; }
.theme-light .connection-toolbar { background: #d7dae0; }
.theme-light .toolbar-select { border-color: #9ea4ae; color: #2e333b; }
.theme-light .workflow {
  --workflow-grid-line: rgba(72,84,99,.028);
  border-color: #aeb3bc;
  background-color: #e9ebef;
}
.theme-light .workflow-project { border-color: #8e9cc9; background: #dce3f8; color: #293b78; }
.theme-light .root-connector { stroke: #8f98a5; }
.theme-light .root-node { fill: #8f98a5; }
.theme-light .agent-card { border-color: #b9bec7; background: rgba(255,255,255,.9); color: #23272e; }
.theme-light .agent-card.blue { background: rgba(31, 72, 255, .16); }
.theme-light .agent-card.green { background: rgba(30,126,95,.16); }
.theme-light .agent-card.yellow { background: rgba(160,143,36,.20); }
.theme-light .agent-card.selected { border-color: var(--accent-ring); box-shadow: none; }
.theme-light .agent-title { color: #272b32; }
.theme-light .agent-menu { background: rgba(60,67,78,.14); color: #4b515b; }
.theme-light .agent-menu:hover, .theme-light .agent-menu[aria-expanded="true"] { background: rgba(60,67,78,.24); }
.theme-light .agent-card-menu { border-color: #b8bdc6; background: #fff; box-shadow: 0 16px 38px rgba(35,42,53,.22); }
.theme-light .agent-card-menu button { color: #30353d; }
.theme-light .agent-card-menu button:hover, .theme-light .agent-card-menu button:focus-visible { background: #e9ecf1; color: #171a1f; }
.theme-light .agent-card-menu button.danger { color: #b83b42; }
.theme-light .agent-card-menu button.danger:hover, .theme-light .agent-card-menu button.danger:focus-visible { background: #f8e5e6; color: #982d33; }
.theme-light .agent-card .agent-model { color: #555c66; }
.theme-light .agent-model em { border-color: #aeb4bd; background: rgba(255,255,255,.58); color: #444a54; }
.theme-light .zoom-control, .theme-light .agent-inspector { border-color: #aeb4bd; background: #f8f9fa; color: #32373f; }
.theme-light .zoom-control button { border-right-color: #c4c8d0; }
.theme-light .agent-inspector > button { background: #e5e8ed; }
.theme-light .available-connections { color: #262a31; }
.theme-light .available-rule, .theme-light .provider-rule { background: #b8bdc6; }
.theme-light .provider-card { border: 1px solid rgba(128,136,148,.18); box-shadow: 0 5px 16px rgba(35,42,53,.06); }
.theme-light .api-status span { color: #4b515b; }
.theme-light .available-model { color: #30353d; }
.theme-light .add-connection-button { background: rgba(255,255,255,.72); color: #2c3138; }

.theme-light .modal-backdrop { background: rgba(35,42,53,.12); }
.theme-light .modal { border-color: #c7cbd2; background: #fff; color: #24282f; box-shadow: 0 30px 90px rgba(35,42,53,.26); }
.theme-light .modal input, .theme-light .modal select { border-color: #c7cbd2; background: #f2f4f7; color: #24282f; }
.theme-light .modal p, .theme-light .modal label { color: #5b626d; }
.theme-light .modal-actions button, .theme-light .profile-menu button:hover { background: #e6e9ee; color: #2e333a; }
.theme-light .modal-actions button.primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }

/* Project creation delegates folder browsing to the native device picker. */
.modal.create-project-dialog { --project-field: #2a2a2a; --project-border: #727272; --project-muted: #b9bec7; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; animation: none; }
.theme-light .create-project-dialog { --project-field: #f2f4f7; --project-border: #c7cbd2; --project-muted: #5b626d; }
.modal-backdrop:has(.create-project-dialog) { animation: none; }
.create-project-dialog .modal-title { height: auto; min-height: 24px; align-items: center; margin-bottom: 20px; }
.create-project-dialog label { margin: 14px 0; }
.create-project-dialog textarea { display: block; width: 100%; min-height: 88px; margin-top: 7px; resize: vertical; border: 1px solid var(--project-border); border-radius: 10px; padding: 10px 11px; background: var(--project-field); color: var(--text); }
.create-project-dialog button:disabled { opacity: .55; cursor: wait; }
.create-project-dialog .modal-error { color: #d44450; margin: 12px 0 0; }
.create-project-dialog .modal-error[hidden] { display: none; }
.project-workspace-field { margin-top: 16px; color: var(--project-muted); }
.project-workspace-choice { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.project-folder-choose { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; height: 42px; padding: 0 11px; border: 1px solid var(--project-border); border-radius: 10px; background: var(--project-field); color: var(--text); text-align: left; }
.project-folder-choose > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-folder-choose .ui-icon, .project-folder-clear .ui-icon { width: 16px; height: 16px; flex: none; }
.project-folder-choose:hover:not(:disabled) { border-color: var(--accent-ring); }
.project-folder-clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; }
.project-folder-clear:hover { background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.project-workspace-path { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-help { position: relative; width: max-content; margin-top: 6px; }
.workspace-info { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -4px; border-radius: 50%; color: var(--project-muted); }
.workspace-info .ui-icon { width: 16px; height: 16px; }
.workspace-help [role="tooltip"] { position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 0; width: min(300px, calc(100vw - 90px)); padding: 10px 12px; border-radius: 8px; background: #111; color: #fff; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; }
.workspace-help [role="tooltip"]::after { content: ''; position: absolute; left: 6px; top: 100%; border: 5px solid transparent; border-top-color: #111; }
.workspace-help:hover [role="tooltip"], .workspace-help:focus-within [role="tooltip"] { opacity: 1; visibility: visible; transform: translateY(0); }
.create-project-dialog .project-picker-status { margin: 6px 0 0; color: var(--project-muted); }

.theme-light .settings-main, .theme-light .settings-content { background: #f3f4f6; }
.theme-light .settings-topbar { border-bottom-color: #c8ccd3; background: #fff; }
.theme-light .settings-title h1 { color: #1d2026; }
.theme-light .settings-title .ui-icon { color: #737983; }
.theme-light .application-search { color: #727984; }
.theme-light .application-search-wrap.is-expanded .application-search { border-color: #c5c9d0; background: #f1f3f6; }
.theme-light .application-search input { color: #20242b; }
.theme-light .application-search-results { border-color: #c8ccd3; background: #fff; box-shadow: 0 18px 42px rgba(38,45,56,.18); scrollbar-color: #b4b9c2 transparent; }
.theme-light .application-search-result { color: #272c34; }
.theme-light .application-search-result:hover, .theme-light .application-search-result:focus-visible { background: #edf0f4; }
.theme-light .application-search-result-icon { color: inherit; }
.theme-light .application-search-result strong .application-search-match { color: #3d72aa; }
.theme-light .application-search-result small { color: #737a84; }
.theme-light .application-search-result > .ui-icon { color: inherit; }
.theme-light .application-search-no-results { color: #7a818b; }
.theme-light .application-search-no-results strong { color: #303640; }
.theme-light .settings-rail { border-right-color: #c8ccd3; background: #eceef2; }
.theme-light .settings-account { border-bottom-color: #d4d7dd; }
.theme-light .settings-account strong { color: #24282f; }
.theme-light .settings-account em { color: #737983; }
.theme-light .settings-rail nav button { color: #4b515b; }
.theme-light .settings-rail nav button:hover { background: #dde1e7; color: #171a1f; }
.theme-light .settings-rail nav button.active { background: #d4d9e5; color: #20242b; }
.theme-light .settings-rail nav button > .ui-icon { color: #373b43; }
.theme-light .settings-rail nav button.active > .ui-icon { color: #171a1f; }
.theme-light .settings-content { scrollbar-color: #b4b9c2 transparent; }
.theme-light .settings-content::-webkit-scrollbar-thumb { background: #b4b9c2; background-clip: padding-box; }
.theme-light .settings-section-heading h2 { color: #1f2329; }
.theme-light .settings-section-heading > span { color: #676e78; }
.theme-light .settings-section-heading p { color: var(--accent-ui); }
.theme-light .settings-card, .theme-light .settings-provider { border-color: #d0d4da; background: #fff; box-shadow: 0 4px 14px rgba(36,42,52,.035); }
.theme-light .settings-card > h3 { border-bottom-color: #dde0e5; color: #676e78; }
.theme-light .setting-row, .theme-light .shortcut-row { border-bottom-color: #e0e3e8; }
.theme-light .setting-copy strong, .theme-light .shortcut-row { color: #252a31; }
.theme-light .setting-copy span, .theme-light .settings-provider em { color: #6d747e; }
.theme-light .setting-dropdown-toggle, .theme-light .setting-input, .theme-light .settings-textarea-label textarea { border-color: #c7cbd2; background: #f5f6f8; color: #252a31; }
.theme-light .setting-dropdown-menu { border-color: #c7cbd2; background: #fff; box-shadow: 0 17px 38px rgba(38,45,56,.18); scrollbar-color: #b4b9c2 transparent; }
.theme-light .setting-dropdown-option { color: #303640; }
.theme-light .setting-dropdown-option:hover, .theme-light .setting-dropdown-option:focus-visible { background: #edf0f4; }
.theme-light .setting-dropdown-option.selected { background: var(--accent-soft); color: #20242b; }
.theme-light .setting-range output { color: #4f5660; }
.theme-light .setting-action { border-color: #c4c8d0; background: #f0f2f5; color: #343a43; }
.theme-light .setting-action:hover { background: #e3e6eb; }
.theme-light .setting-action.danger { border-color: rgba(210,62,73,.35); color: #ba3540; }
.theme-light .danger-row .setting-copy strong { color: #b83c46; }
.theme-light .settings-profile-card, .theme-light .plan-card { border-color: #cfd3da; background: linear-gradient(135deg, #fff, #f0f2f6); color: #252a31; }
.theme-light .settings-profile-card span, .theme-light .plan-card span, .theme-light .plan-card em { color: #69717c; }
.theme-light .plan-card { background: linear-gradient(135deg, rgba(91,112,207,.18), #fff); }
.theme-light .usage-summary > div:first-child { color: #69717c; }
.theme-light .usage-summary > div strong { color: #252a31; }
.theme-light .usage-track { background: #dfe2e8; }
.theme-light .shortcut-row kbd { border-color: #b8bec7; background: #f0f2f5; color: #3b424c; }
.theme-light .settings-search-empty strong { color: #303640; }


/* Persistent chat and backend connection surfaces */
.chat-frame { grid-template-columns: 390px 1fr; }
.chat-frame.sidebar-is-collapsed { grid-template-columns: 96px 1fr; }

.sidebar-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 18px 0 28px;
}

.sidebar-section-heading h2 { margin: 0; }
.sidebar-section-heading button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  color: var(--muted);
  opacity: 1;
  transition: opacity .18s, background .18s, color .18s;
}
.sidebar-section-heading button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.sidebar-section-heading .ui-icon { width: 17px; height: 17px; }
.sidebar-is-collapsed .sidebar-section-heading { display: none; }

.connection-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 42px 25px;
  border: 1px dashed rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  text-align: center;
}
.connection-empty .ui-icon { width: 31px; height: 31px; }
.connection-empty strong { color: #fff; font-size: 17px; font-weight: 550; }
.connection-empty span { max-width: 300px; font-size: 13px; line-height: 1.5; }
.connection-card-error { margin: 9px 0 2px; color: #ffd0d4; font-size: 12px; line-height: 1.4; }
.connection-card-actions { display: flex; gap: 8px; margin-top: 13px; }
.connection-card-actions button {
  flex: 1;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(31,33,38,.24);
  color: rgba(255,255,255,.86);
  font-size: 12px;
}
.connection-card-actions button:hover { background: rgba(255,255,255,.13); }

.connection-form { display: grid; gap: 10px; }
.connection-form label { display: grid; gap: 5px; margin: 0; }
.connection-form label :is(input, select) { margin-top: 0; }
/* A field label with an info icon whose details show on hover or focus. */
.field-label { display: flex; align-items: center; gap: 5px; }
.field-info { position: relative; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); cursor: help; }
.field-info > .ui-icon { width: 14px; height: 14px; }
.field-info:hover, .field-info:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); outline: none; }
.field-info-panel { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: -6px; width: 260px; box-sizing: border-box; padding: 9px 11px; border: 1px solid #4a4a4a; border-radius: 8px; background: #383838; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); color: var(--text); font: 400 12px/1.45 var(--font-ui); pointer-events: none; }
.field-info:hover .field-info-panel, .field-info:focus-visible .field-info-panel { display: block; }
.theme-light .field-info-panel { border-color: #d5d8df; background: #fff; box-shadow: 0 10px 30px rgba(35, 42, 53, .16); color: #2e333a; }
.modal textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid #4a4a4a;
  border-radius: 7px;
  padding: 11px 12px;
  background: #242424;
}
.modal-error {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255,93,101,.42);
  border-radius: 7px;
  padding: 11px 12px;
  background: rgba(126,39,47,.22);
  color: #ffd9dc;
  font-size: 12px;
}
.modal-error strong { text-transform: capitalize; }
.modal-actions button:disabled { cursor: wait; opacity: .55; }

.home-main,
.chat-workspace {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 72px 1fr;
  background: var(--editor);
}

.home-content { min-width: 0; min-height: 0; padding: 30px 32px; overflow: auto; }
body .home-content .home-greeting {
  margin: 0;
  color: var(--text);
  font-family: 'CMU Serif', Georgia, serif !important;
  font-size: 34px !important;
  font-weight: 500;
  line-height: 1.2;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home-activity {
  position: relative;
  --activity-level-0: #353535;
  --activity-level-1: #236fb8;
  --activity-level-2: #4e91d5;
  --activity-level-3: #86b9ea;
  --activity-level-4: #b6d9f7;
  width: min(100%, 610px);
  margin-top: 24px;
  color: var(--text);
}
.theme-light .home-activity {
  --activity-level-0: #e9eef5;
  --activity-level-1: #c8e2f7;
  --activity-level-2: #93c3ed;
  --activity-level-3: #589cdd;
  --activity-level-4: #236fbe;
}
.home-activity-header, .home-activity-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-activity-header { position: relative; z-index: 4; max-width: 583px; margin-bottom: 12px; }
body .home-activity-header h2 { margin: 0; font-size: 15px !important; font-weight: 560; }
.home-activity-view { position: relative; min-width: 0; }
.home-activity-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 65%, transparent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 560;
  text-align: left;
}
.home-activity-view-toggle:hover,
.home-activity-view.is-open .home-activity-view-toggle { border-bottom-color: var(--text); }
body .home-activity-header .home-activity-view-toggle { font-size: 15px !important; font-weight: 560; }
.home-activity-view-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.home-activity-view-toggle > .ui-icon { width: 13px; height: 13px; color: var(--muted); transform: rotate(90deg); }
.home-activity-view.is-open .home-activity-view-toggle > .ui-icon { transform: rotate(-90deg); }
.home-activity-view-menu { left: 0; right: auto; z-index: 4; }
.home-activity-metric { position: relative; flex: 0 0 auto; }
.home-activity-metric-toggle {
  min-width: 116px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 0 1px 2px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--muted) 65%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
}
.home-activity-metric-toggle:hover,
.home-activity-metric.is-open .home-activity-metric-toggle { border-bottom-color: var(--text); }
.home-activity-metric-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.home-activity-metric-toggle > .ui-icon { width: 12px; height: 12px; color: var(--muted); transform: rotate(90deg); transition: transform .16s ease; }
.home-activity-metric.is-open .home-activity-metric-toggle > .ui-icon { color: var(--text); transform: rotate(-90deg); }
.home-activity-metric-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 7px);
  right: 0;
  width: 166px;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2c2c2c;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
  animation: home-activity-menu-in .16s cubic-bezier(.2,.7,.2,1) both;
}
.theme-light .home-activity-metric-menu { background: #fff; box-shadow: 0 14px 32px rgba(38, 45, 56, .18); }
.home-activity-metric-option {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
}
.home-activity-metric-option:hover,
.home-activity-metric-option:focus-visible { outline: 0; background: color-mix(in srgb, var(--text) 11%, transparent); }
.home-activity-metric-option.is-selected { background: color-mix(in srgb, var(--text) 7%, transparent); font-weight: 600; }
.home-models-range .home-activity-metric-option:disabled,
.home-models-range .home-activity-metric-option:disabled:hover { background: transparent; color: var(--muted); opacity: .58; cursor: default; pointer-events: none; }
.home-activity-metric-option > .ui-icon { width: 13px; height: 13px; opacity: 0; }
.home-activity-metric-option.is-selected > .ui-icon { opacity: 1; }
@keyframes home-activity-menu-in { from { transform: translateY(-4px) scale(.98); } to { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .home-activity-metric-menu { animation: none; } .home-activity-metric-toggle > .ui-icon { transition: none; } }
.home-activity-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: #757575 transparent;
}
.theme-light .home-activity-scroll { scrollbar-color: #8d98a6 transparent; }
.home-activity-scroll::-webkit-scrollbar { height: 8px; }
.home-activity-scroll::-webkit-scrollbar-track,
.home-activity-scroll::-webkit-scrollbar-corner { background: transparent; }
.home-activity-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #757575;
  background-clip: padding-box;
}
.theme-light .home-activity-scroll::-webkit-scrollbar-thumb { background: #8d98a6; background-clip: padding-box; }
.home-activity-calendar {
  --activity-cell-size: 9px;
  --activity-cell-gap: 1.5px;
  display: grid;
  grid-template-columns: 20px max-content;
  grid-template-rows: 14px max-content;
  gap: 8px;
  width: max-content;
}
.home-activity-months, .home-activity-cells { display: grid; grid-template-columns: repeat(var(--activity-weeks), var(--activity-cell-size)); gap: var(--activity-cell-gap); }
.home-activity-months { grid-column: 2; grid-row: 1; align-items: start; color: var(--muted); }
.home-activity-months span { white-space: nowrap; }
.home-activity-weekdays { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, var(--activity-cell-size)); gap: var(--activity-cell-gap); color: var(--muted); }
.home-activity-months,
body .home-activity-months span,
.home-activity-weekdays,
body .home-activity-weekdays span { font-size: 10px !important; }
.home-activity-weekdays span { display: flex; align-items: center; }
.home-activity-weekdays span:nth-child(1) { grid-row: 1; }
.home-activity-weekdays span:nth-child(2) { grid-row: 4; }
.home-activity-weekdays span:nth-child(3) { grid-row: 7; }
.home-activity-cells { grid-column: 2; grid-row: 2; grid-template-rows: repeat(7, var(--activity-cell-size)); grid-auto-flow: column; }
.home-activity-cell { display: block; width: var(--activity-cell-size, 11px); height: var(--activity-cell-size, 11px); border-radius: 2px; background: var(--activity-level-0); }
.home-activity-cell.level-1 { background: var(--activity-level-1); }
.home-activity-cell.level-2 { background: var(--activity-level-2); }
.home-activity-cell.level-3 { background: var(--activity-level-3); }
.home-activity-cell.level-4 { background: var(--activity-level-4); }
.home-activity-cell.is-outside { background: transparent; }
.home-activity-cell.is-future {
  box-sizing: border-box;
  border: 1px solid #5b5b5b;
  background: transparent;
}
.theme-light .home-activity-cell.is-future { border-color: #d5dae2; background: transparent; }
.home-activity-cell[data-activity-day] { cursor: default; }
.home-activity-cell[data-activity-day]:hover { outline: 1px solid color-mix(in srgb, var(--text) 65%, transparent); outline-offset: 1px; }
.home-activity-day-tooltip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 134px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #2c2c2c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
}
.home-activity-day-tooltip[hidden] { display: none; }
.theme-light .home-activity-day-tooltip { background: #fff; box-shadow: 0 8px 24px rgba(38, 45, 56, .14); }
.home-activity-day-tooltip-date { color: var(--muted); font-size: 12px; }
.home-activity-day-tooltip-value { font-size: 12px; font-weight: 600; }
.home-models-chart {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: 74px 20px;
  column-gap: 8px;
  width: 583px;
}
.home-models-y-axis { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; color: var(--muted); font-size: 12px; line-height: 1; }
.home-models-plot { position: relative; grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--model-bars), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.home-models-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--muted) 24%, transparent); pointer-events: none; }
.home-models-gridline.is-top { top: 0; }
.home-models-gridline.is-middle { top: 50%; }
.home-models-month { position: relative; z-index: 1; display: flex; justify-content: center; height: 100%; }
.home-models-bar { display: flex; flex-direction: column-reverse; align-self: end; width: min(24px, 70%); height: 100%; }
.home-models-bar-segment { display: block; flex-shrink: 0; }
.home-models-month-label { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 12px; }
.home-models-empty { grid-column: 2; grid-row: 1; z-index: 2; align-self: center; justify-self: center; color: var(--muted); font-size: 12px; }
.home-models-scroll { padding-bottom: 5px; }
.home-models-footer { align-items: flex-start; }
.home-models-footer > [role="status"] { flex: 0 0 auto; }
.home-models-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 11px; max-width: 72%; font-size: 12px; }
.home-models-legend-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); }
.home-models-legend-item i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; }
.home-models-legend-item span { overflow: hidden; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; }
.home-activity-footer { max-width: 583px; margin-top: 10px; color: var(--muted); }
.home-activity-legend { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.home-activity-legend .home-activity-cell { width: 9px; height: 9px; }
.home-activity-legend > span:first-child { margin-right: 3px; }
.home-activity-legend > span:last-child { margin-left: 3px; }
@media (max-width: 600px) {
  .home-content { padding: 24px 20px; }
  .home-activity-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
}

.chat-topbar {
  position: relative;
  display: flex;
  align-items: center;
  --topbar-gap: 12px;
  gap: var(--topbar-gap);
  min-width: 0;
  padding: 8px 64px 8px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--audit-panel);
}

.chat-topbar button[aria-label] { position: relative; overflow: visible; }
.chat-topbar button[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 120;
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #121212;
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
  font-size: var(--type-caption);
  font-weight: 450;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  white-space: nowrap;
}
.chat-topbar button[aria-label]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 1s;
}
.chat-topbar button[aria-label]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.chat-topbar .topbar-profile-button[aria-label]::after {
  right: 0;
  left: auto;
  transform: translateY(-3px);
}
.chat-topbar .topbar-profile-button[aria-label]:hover::after,
.chat-topbar .topbar-profile-button[aria-label]:focus-visible::after { transform: translateY(0); }
.theme-light .chat-topbar button[aria-label]::after {
  border-color: #c4c8d0;
  background: #fff;
  color: #242930;
  box-shadow: 0 8px 20px rgba(35, 42, 53, .16);
}

.chat-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-title-block > .ui-icon { width: 24px; height: 24px; color: var(--muted); }
.chat-title-block > span { display: grid; min-width: 0; }
.chat-title-block strong {
  overflow: hidden;
  max-width: 610px;
  color: var(--text);
  font-size: 16px;
  font-weight: 530;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-project-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
}
.chat-project-switcher label { display: block; color: var(--dim); font-size: var(--type-caption); }
.chat-project-switcher select {
  width: 184px;
  height: 31px;
  border: 1px solid #4f4f4f;
  border-radius: 7px;
  padding: 0 28px 0 9px;
  background: #383838;
  color: var(--text);
  font-size: var(--type-caption);
  text-transform: none;
}
.chat-project-switcher button { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 7px; background: #383838; color: var(--muted); }
.chat-project-switcher button:hover { background: #454545; color: var(--text); }
.chat-project-switcher .ui-icon { width: 16px; height: 16px; }

.chat-content {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 48px 30px;
  overflow: hidden;
}

.chat-transcript {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 55px max(50px, calc((100% - 1040px) / 2)) 230px;
  scrollbar-color: #565656 transparent;
  scrollbar-width: thin;
}
.chat-transcript::-webkit-scrollbar { width: 10px; }
.chat-transcript::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: #565656; background-clip: padding-box; }

.chat-content.is-activity-demo { grid-template-rows: minmax(0, 1fr); }
.chat-content.is-activity-demo .chat-transcript { padding-bottom: 140px; }
.chat-activity-demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto 35px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
}
.chat-activity-demo-banner span { display: grid; gap: 3px; }
.chat-activity-demo-banner strong { font-size: 13px; font-weight: 650; }
.chat-activity-demo-banner small { color: var(--muted); font-size: 12px; }
.chat-activity-demo-banner button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--text) 23%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chat-activity-demo-banner button:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.chat-activity-demo-banner button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.chat-activity-demo-banner button svg { width: 14px; height: 14px; }

.chat-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 520px;
  margin: 140px auto 0;
  text-align: center;
  color: #fff;
}
.theme-light .chat-empty-state { color: #000; }
.chat-welcome-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: currentColor;
  -webkit-mask: url('/public/assets/logos/omnesly-mark.png') center / contain no-repeat;
  mask: url('/public/assets/logos/omnesly-mark.png') center / contain no-repeat;
}
@media (forced-colors: active) {
  .chat-empty-state,
  .theme-light .chat-empty-state { color: CanvasText; }
}
/* The New Chat welcome lockup is a brand treatment, not a UI control. */
body .chat-empty-state h2 {
  margin: 0;
  min-width: 0;
  color: inherit;
  font-family: 'CMU Serif', Georgia, serif !important;
  font-size: clamp(24px, 2.8vw, 32px) !important;
  font-weight: 500;
  line-height: 1.15;
}
.chat-empty-state p { margin: 0; font-size: 14px; line-height: 1.6; }

.chat-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto 32px;
}
.chat-message-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* The user glyph uses a tight viewBox, including its stroke, so its visible
   footprint matches model marks inside the same square image dimensions. */
.chat-message-avatar .ui-icon,
.chat-message-avatar .provider-logo,
.chat-message-avatar .profile-avatar { width: var(--chat-avatar-size); height: var(--chat-avatar-size); flex: 0 0 var(--chat-avatar-size); }
.provider-omnesly { filter: brightness(0) invert(1); }
.theme-light .provider-omnesly { filter: brightness(0); }
.chat-message.user .chat-message-avatar { color: var(--muted); }
.chat-message-body { min-width: 0; padding-top: 1px; }
.chat-message-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.chat-message-heading strong { color: var(--text); font-size: 13px; font-weight: 590; }
.chat-message-heading time { color: var(--dim); font-size: var(--type-caption); }
.chat-response-timer { color: var(--dim); font: 500 var(--type-caption)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-activity {
  display: grid;
  gap: 0;
  max-width: 720px;
  margin: 5px 0 18px;
  color: var(--muted);
}
.chat-activity-overview { margin: 0 0 18px; color: var(--text); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.chat-activity-disclosure { margin: 1px 0 13px; }
.chat-activity-toggle,
.chat-response-duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chat-activity-toggle {
  cursor: pointer;
}
.chat-activity-toggle:hover { color: var(--text); }
.chat-activity-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 3px; }
.chat-activity-toggle svg { width: 14px; height: 14px; transition: transform 150ms ease; }
.chat-activity-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.chat-activity-panel[hidden] { display: none; }
.chat-activity-panel .chat-activity { margin: 12px 0 17px; }
.chat-response-heading { margin: 0 0 7px; color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.35; }
.chat-activity-step { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 0 0 13px; }
.chat-activity-step:last-child { padding-bottom: 0; }
.chat-activity-step:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 20px; bottom: 4px; width: 1px; background: var(--border); }
.chat-activity-step .chat-activity-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--muted); }
.chat-activity-step .chat-activity-agent-icon { width: 19px; height: 19px; flex-basis: 19px; margin-top: 0; object-fit: contain; }
.chat-activity-step.is-agent:not(:last-child)::before { left: 9px; top: 23px; }
.chat-activity-step.is-agent > div > span { color: var(--text); font-weight: 600; }
.chat-activity-step.is-agent small { display: block; margin-top: 2px; color: var(--agent-color); font-size: var(--type-caption); line-height: 1.3; }
.theme-light .chat-activity-step.is-agent small { color: color-mix(in srgb, var(--agent-color) 70%, #111 30%); }
.chat-activity-step > div { min-width: 0; }
.chat-activity-step span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.chat-activity-step p { margin: 3px 0 0; color: var(--dim); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-activity-step.is-pill-group { padding-bottom: 14px; }
.chat-activity-step.is-pill-group.is-unlabeled { padding-left: 26px; }
.chat-activity-step.is-pill-group.is-unlabeled::before { display: none; }
.chat-activity-pill-content { flex: 1; min-width: 0; }
.chat-activity-step .chat-activity-pill-heading { display: block; margin-bottom: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.chat-activity-pill-list {
  --activity-pill-collapsed-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  max-height: var(--activity-pill-collapsed-height);
  overflow: hidden;
}
.chat-activity-step.is-pill-group.is-expanded .chat-activity-pill-list { max-height: none; }
.chat-activity-pills-toggle { display: block; width: fit-content; margin: 8px auto 0; padding: 2px 8px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; }
.chat-activity-pills-toggle[hidden] { display: none; }
.chat-activity-pills-toggle:hover { color: var(--text); text-decoration: underline; }
.chat-activity-pills-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
.chat-web-search-pill, .chat-document-pill, .chat-web-source-pill { box-sizing: border-box; height: 32px; max-width: 100%; }
.chat-web-search-pill, .chat-document-pill { display: inline-flex !important; align-items: center; gap: 8px; min-width: 0; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text) !important; }
.chat-web-search-pill > svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--muted); }
.chat-document-pill > svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--muted); }
.chat-activity-step .chat-web-search-query, .chat-activity-step .chat-document-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
.chat-web-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 11px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.chat-web-source-pill:hover { background: color-mix(in srgb, var(--text) 10%, transparent); border-color: color-mix(in srgb, var(--text) 32%, transparent); }
.chat-web-source-pill:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.chat-web-source-favicon { position: relative; display: grid !important; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted) !important; }
.chat-web-source-favicon svg { width: 16px; height: 16px; }
.chat-web-source-favicon img { position: absolute; inset: 0; width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.chat-web-source-favicon img[hidden] { display: none; }
.chat-activity-step .chat-web-source-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; font-weight: 550; }
.chat-message-content {
  color: #dcdddf;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-message.user .chat-message-content { color: var(--text); white-space: pre-wrap; }
.chat-message.assistant .chat-message-content,
.assistant-message.assistant .assistant-message-content {
  --assistant-markdown-gap: .85em;
  --chat-markdown-link: #a5b6ff;
  --chat-markdown-code-bg: #2b2b2b;
  --chat-markdown-code-border: #494949;
  white-space: normal;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(p, ul, ol, blockquote, pre, table, hr, h1, h2, h3, h4, h5, h6) {
  margin: 0;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(p, ul, ol, blockquote, pre, table, hr, h1, h2, h3, h4, h5, h6) + :where(p, ul, ol, blockquote, pre, table, hr, h1, h2, h3, h4, h5, h6) {
  margin-top: var(--assistant-markdown-gap);
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--text);
  font-weight: 650;
  line-height: 1.35;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) h1 { font-size: 1.55em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) h2 { font-size: 1.35em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) h3 { font-size: 1.2em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) h4 { font-size: 1.1em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(h5, h6) { font-size: 1em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol) { margin-top: .35em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(ul, ol) { padding-left: 1.55em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) ul { list-style-type: disc; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) ol { list-style-type: decimal; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) li + li { margin-top: .3em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) li::marker { color: var(--muted); }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) li > :where(ul, ol) { margin-top: .35em; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) blockquote {
  border-left: 3px solid var(--line);
  padding-left: 1em;
  color: var(--muted);
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(a, a:visited) {
  color: var(--chat-markdown-link);
  text-decoration: underline;
  text-underline-offset: .15em;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) a:hover { color: var(--text); }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) a:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) code {
  border: 1px solid var(--chat-markdown-code-border);
  border-radius: 4px;
  padding: .1em .3em;
  background: var(--chat-markdown-code-bg);
  font: .9em/1.5 var(--font-code);
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--chat-markdown-code-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--chat-markdown-code-bg);
  font: .9em/1.55 var(--font-code);
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 4;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) pre code {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: inherit;
  overflow-wrap: normal;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) :where(th, td) {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) th {
  background: var(--chat-markdown-code-bg);
  color: var(--text);
  font-weight: 600;
}
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) hr { border: 0; border-top: 1px solid var(--line); }
:is(.chat-message.assistant .chat-message-content, .assistant-message.assistant .assistant-message-content) img { max-width: 100%; height: auto; }
.chat-message.user { grid-template-columns: minmax(0, 1fr) 38px; }
.chat-message.user .chat-message-avatar { grid-column: 2; grid-row: 1; justify-self: end; }
.chat-message.user .chat-message-body { grid-column: 1; grid-row: 1; justify-self: end; max-width: min(100%, 680px); text-align: right; }
.chat-message.user .chat-message-heading,
.chat-message.user .chat-message-actions { justify-content: flex-end; }
.streaming-placeholder { color: var(--dim); font-style: italic; }

.chat-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}
.chat-run-meta span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--dim);
  background: rgba(255,255,255,.025);
  font-size: var(--type-caption);
}
.chat-run-error, .global-run-error {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  border: 1px solid rgba(255,93,101,.32);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(122,40,48,.17);
  color: #ffd5d8;
  font-size: var(--type-caption);
}
.chat-run-error span, .global-run-error span { flex: 1; color: #d7bfc1; }
.chat-run-error button, .global-run-error button { border-radius: 5px; padding: 5px 9px; background: rgba(255,255,255,.1); color: #fff; }
.global-run-error {
  position: absolute;
  left: 50%;
  bottom: 170px;
  z-index: 4;
  width: min(720px, calc(100% - 96px));
  margin: 0;
  transform: translateX(-50%);
}

.chat-composer {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  width: min(980px, calc(100% - 96px));
  min-height: 112px;
  overflow: visible;
  transform: translateX(-50%);
  border: 1px solid #494949;
  border-radius: 14px;
  background: #373737;
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.chat-composer:focus-within { border-color: var(--accent-ring); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.chat-composer textarea {
  display: block;
  width: 100%;
  min-height: 70px;
  resize: none;
  border: 0;
  padding: 17px 18px 8px;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.chat-composer textarea::placeholder { color: #92949a; }
.chat-composer textarea:disabled { cursor: not-allowed; }
.chat-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 10px; }
.chat-provider-controls { position: relative; display: flex; gap: 9px; min-width: 0; }
.chat-provider-controls label { display: grid; gap: 3px; color: var(--dim); font-size: var(--type-caption); text-transform: uppercase; letter-spacing: .05em; }
.chat-provider-controls select {
  width: 205px;
  height: 31px;
  border: 1px solid #555555;
  border-radius: 7px;
  padding: 0 30px 0 9px;
  background: #494949;
  color: #ececee;
  font-size: var(--type-caption);
  text-transform: none;
}
.chat-provider-controls label:last-child select { width: 250px; }
.chat-model-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
}
.chat-model-toggle:hover,
.chat-model-toggle[aria-expanded="true"] { border-color: var(--line); background: color-mix(in srgb, var(--text) 8%, var(--editor)); color: var(--text); }
.chat-model-toggle .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.chat-model-popover {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 7px);
  z-index: 12;
  width: min(410px, calc(100vw - 80px));
  box-sizing: border-box;
  min-width: 0;
  max-height: min(460px, calc(100vh - 170px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 4px;
  overflow: visible;
  border: 1px solid rgba(119, 125, 139, .7);
  border-radius: 11px;
  padding: 5px;
  background: rgba(31, 33, 39, .97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .44), 0 4px 14px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  animation: chat-model-menu-in .18s cubic-bezier(.22,1,.36,1) both;
}
.chat-model-popover > header {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}
.chat-model-popover > header strong { color: var(--muted); font: 600 var(--type-caption)/1 var(--font-ui); }
.chat-device-recheck { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 5px; padding: 4px 6px; background: transparent; color: var(--muted); font: 500 var(--type-caption)/1 var(--font-ui); }
.chat-device-recheck:hover,
.chat-device-recheck:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.chat-device-spinner { display: none; width: 11px; height: 11px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--muted) 35%, transparent); border-top-color: currentColor; border-radius: 50%; }
.chat-device-recheck.is-checking .chat-device-spinner { display: inline-block; animation: chat-device-spin .7s linear infinite; }
.chat-device-recheck:disabled { cursor: progress; }
@keyframes chat-device-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .chat-device-recheck.is-checking .chat-device-spinner { animation: none; } }
.chat-model-empty { margin: 0; padding: 4px 6px 8px; color: var(--muted); font: 400 var(--type-secondary)/1.45 var(--font-ui); }
.chat-local-status { align-self: center; justify-self: center; max-width: min(720px, 80vw); margin: 0 12px 8px; color: var(--muted); font: 450 var(--type-secondary)/1.4 var(--font-ui); text-align: center; }
.chat-model-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border-top: 1px solid var(--line); padding-top: 3px; }
.chat-model-footer > button { min-width: 0; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 4px; border: 0; border-radius: 5px; padding: 4px 5px; background: transparent; color: var(--muted); font: 500 var(--type-secondary)/1.3 var(--font-ui); text-align: left; }
.chat-model-footer > .chat-model-info { border-right: 1px solid var(--line); border-radius: 5px 0 0 5px; }
.chat-model-footer > button:only-child { grid-column: 1 / -1; }
.chat-model-footer-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.chat-model-footer-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-model-footer .ui-icon { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; color: inherit; }
.chat-model-footer > button:hover,
.chat-model-footer > button:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.local-host-browse { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; text-align: left; color: var(--text); }
.local-host-browse .ui-icon { width: var(--icon-sm); height: var(--icon-sm); margin-left: auto; }
.modal.local-model-catalogue-modal { display: flex; flex-direction: column; width: min(720px, calc(100vw - 32px)); height: min(700px, calc(100dvh - var(--platform-sidebar-offset) - 32px)); box-sizing: border-box; overflow: hidden; padding: 14px; border-color: var(--line); background: var(--editor); color: var(--text); }
.local-model-catalogue-modal .modal-title { flex: none; }
.local-catalogue { min-height: 0; flex: 1; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #9299a5 transparent; }
.local-catalogue-runtime { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--connections); }
.local-catalogue-runtime-copy { display: grid; gap: 4px; min-width: 0; }
.local-catalogue-runtime-heading { display: flex; align-items: center; gap: 4px; min-width: 0; }
.local-catalogue-runtime-repair { margin: 0; color: var(--dim); font: 400 var(--type-caption)/1.4 var(--font-ui); }
.local-catalogue-runtime strong { font: 600 var(--type-secondary)/1.3 var(--font-ui); }
.local-catalogue-runtime a { color: var(--text); text-decoration: underline; }
.local-catalogue-runtime code { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; }
.local-catalogue-runtime button, .local-catalogue-toolbar button { border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; }
.local-catalogue-runtime button[data-action="refresh-local-runtime"] { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--text); }
.local-catalogue-runtime button[data-action="refresh-desktop-runtime"] { flex: none; }
.local-catalogue-runtime button.is-connected { cursor: default; }
.local-runtime-spinner { display: none; width: 11px; height: 11px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--muted) 40%, transparent); border-top-color: currentColor; border-radius: 50%; }
.local-catalogue-runtime button.is-checking .local-runtime-spinner { display: inline-block; animation: chat-device-spin .7s linear infinite; }
.local-runtime-check { display: none; color: #65d19d; }
.local-runtime-check .ui-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.local-catalogue-runtime button.is-connected .local-runtime-check { display: inline-flex; }
.theme-light .local-runtime-check { color: #137044; }
@media (prefers-reduced-motion: reduce) { .local-catalogue-runtime button.is-checking .local-runtime-spinner { animation: none; } }
.local-catalogue-toolbar { display: flex; align-items: end; gap: 10px; margin-bottom: 12px; }
.local-catalogue-search { flex: 1; min-width: 0; }
.local-catalogue-search-heading { display: flex; align-items: center; gap: 5px; }
.local-catalogue-search-heading label { margin: 0; }
.local-catalogue-info { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--muted); }
.local-catalogue-info > .ui-icon { width: 16px; height: 16px; }
.local-catalogue-info:hover, .local-catalogue-info:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.local-catalogue-info-panel { display: none; position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; width: min(360px, calc(100vw - 64px)); box-sizing: border-box; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--editor); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); color: var(--text); font: 400 var(--type-caption)/1.45 var(--font-ui); pointer-events: none; }
@media (hover: hover) { .local-catalogue-info:hover .local-catalogue-info-panel { display: block; } }
.local-catalogue-info:focus-visible .local-catalogue-info-panel { display: block; }
.local-catalogue-runtime-info .local-catalogue-info-panel { top: 100%; pointer-events: auto; overflow-wrap: anywhere; }
.local-catalogue-runtime-info:has(a:focus-visible) .local-catalogue-info-panel { display: block; }
.local-catalogue-toolbar input { height: 36px; margin-top: 3px; }
.local-catalogue-toolbar button { min-height: 36px; white-space: nowrap; }
.local-catalogue-list { display: grid; gap: 9px; }
.local-catalogue-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--connections); }
.local-catalogue-card[hidden], .local-catalogue-no-results[hidden] { display: none; }
.local-catalogue-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.local-catalogue-card header div { display: grid; gap: 2px; }
.local-catalogue-card header .local-catalogue-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.local-catalogue-identity > .provider-logo { width: 24px; height: 24px; flex: 0 0 24px; }
.local-catalogue-identity > .provider-ibm { width: 36px; flex-basis: 36px; }
.local-catalogue-identity > span { display: grid; gap: 2px; min-width: 0; }
.local-catalogue-identity small { color: var(--muted); font: 400 var(--type-caption)/1.35 var(--font-ui); }
.local-catalogue-card header strong { font: 600 var(--type-secondary)/1.3 var(--font-ui); }
.local-catalogue-card header div span, .local-catalogue-card p, .local-catalogue-metrics { color: var(--muted); font: 400 var(--type-caption)/1.4 var(--font-ui); }
.local-catalogue-card p { margin: 8px 0; }
.local-catalogue-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.local-catalogue-metrics span { border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; }
.local-catalogue-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.local-catalogue-actions a { display: inline-flex; align-items: center; gap: 3px; color: var(--text); font: 500 var(--type-caption)/1.3 var(--font-ui); text-decoration: underline; }
.local-catalogue-actions a .ui-icon { width: 12px; height: 12px; }
.local-catalogue-install-state { margin-left: auto; color: var(--muted); font: 400 var(--type-caption)/1.3 var(--font-ui); }
.local-catalogue-actions button { min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; font: 500 var(--type-caption)/1.3 var(--font-ui); }
.local-catalogue-actions button.primary { border-color: transparent; background: var(--button-primary-bg); color: var(--button-primary-fg); }
.local-catalogue-actions button:disabled { opacity: .5; cursor: not-allowed; }
.local-catalogue-progress { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; font: 500 var(--type-caption)/1.3 var(--font-ui); }
.local-catalogue-progress button { text-decoration: underline; white-space: nowrap; }
.local-catalogue-error { color: #f1a0a0 !important; font: 500 var(--type-caption)/1.4 var(--font-ui); }
@media (max-width: 560px) { .local-catalogue-toolbar { flex-wrap: wrap; } .local-catalogue-search { position: relative; flex-basis: 100%; } .local-catalogue-info { position: static; } .local-catalogue-info-panel { top: 22px; left: 0; width: 100%; } .local-catalogue-actions .local-catalogue-install-state { flex-basis: 100%; margin-left: 0; } }
@media (max-width: 560px) { .local-catalogue-runtime-info .local-catalogue-info-panel { top: 30px; left: 8px; width: calc(100% - 16px); } }
.local-host-info-modal {
  --local-host-scrollbar-thumb: #aeb5c0;
  width: min(560px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - var(--platform-sidebar-offset) - 32px));
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: var(--local-host-scrollbar-thumb) transparent;
}
.theme-light .local-host-info-modal { --local-host-scrollbar-thumb: #647084; }
.local-host-info-modal::-webkit-scrollbar { width: 10px; background: transparent; }
.local-host-info-modal::-webkit-scrollbar-track,
.local-host-info-modal::-webkit-scrollbar-corner { background: transparent; }
.local-host-info-modal::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--local-host-scrollbar-thumb);
  background-clip: padding-box;
}
.local-host-info-modal::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.local-host-device-check { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; }
.local-host-device-check summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; cursor: pointer; list-style: none; font: 600 var(--type-secondary)/1.3 var(--font-ui); }
.local-host-device-check summary::-webkit-details-marker { display: none; }
.local-host-device-check summary:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: -1px; border-radius: 9px; }
.local-host-device-check summary .ui-icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; transform: rotate(90deg); transition: transform var(--motion-fast) ease; }
.local-host-device-check[open] summary .ui-icon { transform: rotate(-90deg); }
.local-host-device-details { padding: 0 12px 12px; font: 400 var(--type-caption)/1.4 var(--font-ui); }
.local-host-device-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.local-host-device-details dl > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.local-host-device-details dt { color: var(--muted); font-size: var(--type-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.local-host-device-details dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.local-host-device-details dd[data-gpu-access="available"] { color: #65d19d; }
.theme-light .local-host-device-details dd[data-gpu-access="available"] { color: #137044; }
.local-host-device-details dd[data-gpu-access="unavailable"] { color: var(--muted); }
.local-host-device-fit dd { font-size: var(--type-secondary); }
.local-host-device-fit small { display: block; margin-top: 2px; color: var(--muted); font: 400 var(--type-caption)/1.35 var(--font-ui); }
.local-host-info-list { display: grid; gap: 8px; }
.local-host-info-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.local-host-info-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.local-host-info-card header strong { font: 600 var(--type-secondary)/1.3 var(--font-ui); }
.local-host-info-score { font: 650 var(--type-caption)/1.3 var(--font-ui); white-space: nowrap; }
.local-host-info-card p { margin: 5px 0 9px; font: 400 var(--type-caption)/1.4 var(--font-ui); }
.local-host-info-card dl { display: grid; gap: 3px; margin: 0; }
.local-host-info-card dl > div { display: flex; justify-content: space-between; gap: 12px; font: 400 var(--type-caption)/1.35 var(--font-ui); }
.local-host-info-card dt { color: var(--muted); }
.local-host-info-card dd { margin: 0; text-align: right; }
.local-host-info-card a { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; color: var(--text); font: 500 var(--type-caption)/1.3 var(--font-ui); text-decoration: underline; text-underline-offset: 2px; }
.local-host-info-card a .ui-icon { width: 13px; height: 13px; }
@media (max-width: 560px) { .local-host-device-details dl { grid-template-columns: 1fr; } }
.chat-connection-list {
  display: flex;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
}
.chat-connection-list::-webkit-scrollbar { display: none; }
.chat-connection-list > button {
  width: 100%;
  min-width: 0;
  height: 30px;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  font: 540 var(--type-caption)/1 var(--font-ui);
  white-space: nowrap;
}
.chat-connection-list > button:hover { color: var(--text); background: rgba(255, 255, 255, .075); }
.chat-connection-list > button[aria-pressed="true"] {
  border-color: var(--accent-ring);
  color: var(--text);
  background: color-mix(in srgb, var(--accent-ui) 16%, rgba(255, 255, 255, .045));
}
.model-picker-provider-logo { width: 17px; height: 17px; object-fit: contain; }
.chat-model-provider-list {
  min-height: 0;
  max-height: 244px;
  display: grid;
  align-content: start;
  gap: 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #858c98 transparent;
}
.chat-model-provider-list > button {
  width: 100%;
  min-width: 0;
  height: 36px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.chat-model-provider-list > button:hover,
.chat-model-provider-list > button:focus-visible,
.chat-model-provider-list > button[aria-expanded="true"] { background: rgba(255, 255, 255, .065); }
.chat-model-provider-list > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-model-provider-list > button > .ui-icon { width: 14px; height: 14px; color: var(--dim); }
.chat-provider-model-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 7px);
  width: 100%;
  box-sizing: border-box;
  max-height: min(318px, calc(100vh - 170px));
  overflow: hidden;
  border: 1px solid rgba(119, 125, 139, .7);
  border-radius: 11px;
  padding: 5px;
  background: rgba(31, 33, 39, .98);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .44), 0 4px 14px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  animation: chat-model-submenu-in .16s cubic-bezier(.22,1,.36,1) both;
}
.chat-provider-model-submenu > header { height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
.chat-provider-model-submenu > header strong { overflow: hidden; color: var(--text); font: 600 var(--type-caption)/1 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.chat-provider-model-submenu > header span { color: var(--dim); font: 500 var(--type-caption)/1 var(--font-ui); }
.chat-model-list {
  min-height: 0;
  max-height: 244px;
  display: grid;
  align-content: start;
  gap: 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #858c98 transparent;
}
.chat-model-provider-list::-webkit-scrollbar,
.chat-model-list::-webkit-scrollbar { width: 4px; }
.chat-model-provider-list::-webkit-scrollbar-track,
.chat-model-list::-webkit-scrollbar-track { background: transparent; }
.chat-model-provider-list::-webkit-scrollbar-thumb,
.chat-model-list::-webkit-scrollbar-thumb { border: 0; border-radius: 999px; background: #858c98; }
.chat-model-provider-list::-webkit-scrollbar-button,
.chat-model-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.chat-model-section-title {
  padding: 8px 6px 4px;
  color: var(--dim);
  font: 600 var(--type-caption)/1 var(--font-ui);
  letter-spacing: .025em;
}
.chat-model-section-title:not(:first-child) { margin-top: 5px; border-top: 1px solid var(--line); }
.chat-model-list > button {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 4px 5px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.chat-model-list > button.is-local-model { grid-template-columns: 22px minmax(0, 1fr) auto 14px; }
.chat-model-list > button:hover { background: rgba(255, 255, 255, .065); }
.chat-model-list > button[aria-selected="true"] {
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 9%, var(--editor));
}
.model-picker-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 5px;
}
.model-picker-logo.provider-ibm { width: 26px; }
.chat-model-list > button > span { min-width: 0; display: grid; gap: 1px; }
.chat-model-list > button strong { overflow: hidden; color: var(--text); font: 590 var(--type-secondary)/1.15 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.chat-model-list > button em { overflow: hidden; color: var(--dim); font: 450 var(--type-caption)/1.1 var(--font-ui); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.chat-model-list > button.is-local-model em { white-space: normal; line-height: 1.2; }
.chat-model-list > button small { color: var(--dim); font: 400 var(--type-caption)/1.15 var(--font-ui); }
.chat-model-list > button > .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.local-capability { min-width: 59px; display: grid; justify-items: end; color: var(--muted); }
.local-capability b { font: 650 var(--type-caption)/1 var(--font-ui); white-space: nowrap; }
:is(.local-capability, .local-host-info-score)[data-score-band="good"] { color: #65d19d; }
:is(.local-capability, .local-host-info-score)[data-score-band="moderate"] { color: #f0c365; }
:is(.local-capability, .local-host-info-score)[data-score-band="low"] { color: #f1868c; }
.theme-light :is(.local-capability, .local-host-info-score)[data-score-band="good"] { color: #137044; }
.theme-light :is(.local-capability, .local-host-info-score)[data-score-band="moderate"] { color: #8a5800; }
.theme-light :is(.local-capability, .local-host-info-score)[data-score-band="low"] { color: #b4373f; }
@media (max-width: 600px) {
  .chat-model-popover { left: auto; right: 0; }
}
@keyframes chat-model-menu-in { from { opacity: 0; transform: translateY(5px) scale(.98); } }
@keyframes chat-model-submenu-in { from { opacity: 0; transform: translateX(-5px) scale(.98); } }
.chat-composer-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  font-size: 12px;
  font-weight: 540;
}
.chat-composer-actions .ui-icon { width: 18px; height: 18px; }
.chat-composer-actions .cancel-run { background: #8e3941; color: #fff; }

.settings-connection-empty { margin: 0; color: var(--dim); font-size: 12px; }

.theme-light .sidebar-section-heading button:hover { background: rgba(40,46,56,.08); }
.theme-light .connection-empty { border-color: rgba(54,61,72,.22); color: #686f79; }
.theme-light .connection-empty strong { color: #2b3038; }
.theme-light .connection-card-error { color: #a83943; }
.theme-light .connection-card-actions button { border-color: #c6cad1; background: #eceef2; color: #3c424b; }
.theme-light .modal textarea { border-color: #c7cbd2; background: #f2f4f7; color: #24282f; }
.theme-light .modal-error { border-color: rgba(190,55,66,.3); background: rgba(219,77,88,.08); color: #a7353e; }
.theme-light .chat-workspace { background: #f5f6f8; }
.theme-light .chat-topbar { border-bottom-color: #c8ccd3; background: #fff; }
.theme-light .chat-project-switcher select, .theme-light .chat-project-switcher button { border-color: #c8ccd3; background: #f0f2f5; color: #303640; }
.theme-light .chat-title-block strong, .theme-light .chat-message-heading strong { color: #242930; }
.theme-light .chat-title-block > .ui-icon { color: #707680; }
.theme-light .chat-transcript { scrollbar-color: #b4b9c2 transparent; }
.theme-light .chat-message-content, .theme-light .chat-message.user .chat-message-content { color: #343a43; }
.theme-light .chat-message.assistant .chat-message-content,
.theme-light .assistant-message.assistant .assistant-message-content {
  --chat-markdown-link: #2447bc;
  --chat-markdown-code-bg: #eef0f4;
  --chat-markdown-code-border: #d5d9e0;
}
.theme-light .chat-run-meta span { border-color: #d5d9df; background: #fff; color: #707780; }
.theme-light .chat-composer { border-color: #c8ccd3; background: #fff; box-shadow: 0 18px 50px rgba(38,45,56,.13); }
.theme-light .chat-composer textarea { color: #252a31; }
.theme-light .chat-provider-controls select { border-color: #c8ccd3; background: #f0f2f5; color: #303640; }
.theme-light .chat-model-toggle { border-color: #c8ccd3; background: #f3f5f7; color: #5d6570; }
.theme-light .chat-model-popover { border-color: #c8ccd3; background: #fff; box-shadow: 0 14px 34px rgba(38,45,56,.16); }
.theme-light .chat-provider-model-submenu { border-color: #c8ccd3; background: #fff; box-shadow: 0 14px 34px rgba(38,45,56,.16); }
.theme-light .chat-model-provider-list > button:hover,
.theme-light .chat-model-provider-list > button:focus-visible,
.theme-light .chat-model-provider-list > button[aria-expanded="true"] { background: rgba(64, 75, 90, .07); }
.theme-light .chat-model-provider-list,
.theme-light .chat-model-list { scrollbar-color: #68717f transparent; }
.theme-light .chat-model-provider-list::-webkit-scrollbar-thumb,
.theme-light .chat-model-list::-webkit-scrollbar-thumb { background: #68717f; }
.theme-light .chat-run-error, .theme-light .global-run-error { border-color: rgba(190,55,66,.28); background: #fff4f5; color: #a82e38; }
.theme-light .chat-run-error span, .theme-light .global-run-error span { color: #7d565a; }

@media (max-width: 1100px) {
  .chat-transcript { padding-left: 30px; padding-right: 30px; }
  .chat-provider-controls label:last-child select { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Connected workspace, agent, and audit surfaces */
.workspace-frame, .agents-frame, .audit-center-frame { grid-template-columns: 390px minmax(0, 1fr); }
.workspace-frame.sidebar-is-collapsed, .agents-frame.sidebar-is-collapsed, .audit-center-frame.sidebar-is-collapsed { grid-template-columns: 96px minmax(0, 1fr); }
.workspace-main, .agents-main, .audit-center-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 68px 1fr; background: var(--editor); }

.product-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 118px 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--audit-panel);
}
.product-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.product-title > .ui-icon { width: 21px; height: 21px; color: var(--muted); }
.product-title > span { display: grid; gap: 1px; }
.product-title h1 { margin: 0; color: var(--text); font-size: 15px; font-weight: 520; }
.tools-frame .product-topbar { padding-right: 58px; }
.tools-frame .product-topbar .topbar-action { margin-right: 0; }
.topbar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  margin-left: auto;
  border: 1px solid #505050;
  border-radius: 7px;
  padding: 0 12px;
  background: #373737;
  color: #d7d8db;
  font-size: var(--type-caption);
}
.topbar-action.primary { border-color: var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-fg); }
.topbar-action .ui-icon { width: 15px; height: 15px; }
.topbar-action:disabled { cursor: wait; opacity: .6; }
.audit-back-button { display: grid; place-items: center; flex: 0 0 var(--control-height); width: var(--control-height); height: var(--control-height); border-radius: 7px; color: var(--muted); }
.audit-back-button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.audit-back-button .ui-icon { width: var(--icon-sm); height: var(--icon-sm); transform: rotate(180deg); }
.workspace-path { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 520px; color: var(--dim); font-size: var(--type-caption); }
.workspace-path .ui-icon { width: 16px; height: 16px; }
.workspace-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-sync-warning { flex: 0 0 auto; border: 1px solid color-mix(in srgb, #d99a2b 45%, var(--line-soft)); border-radius: 999px; padding: 3px 8px; color: #d99a2b; font-size: var(--type-caption); white-space: nowrap; }

.workspace-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: 330px minmax(440px, 1fr) 350px; }
.developer-stage { min-width: 0; min-height: 0; padding: 10px; background: var(--editor); }
#developer-workspace-mount { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #212121; }
.developer-runtime-status { width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 48px; color: var(--dim); text-align: center; }
.developer-runtime-status > .ui-icon { width: 42px; height: 42px; color: var(--muted); }
.developer-runtime-status h2 { margin: 3px 0 0; color: var(--text); font-size: var(--type-heading); font-weight: 540; }
.developer-runtime-status p { max-width: 560px; margin: 0; font-size: var(--type-secondary); line-height: 1.55; }
.developer-runtime-status button { min-height: 38px; margin-top: 5px; border-radius: 8px; padding: 0 15px; background: var(--button-primary-bg); color: var(--button-primary-fg); font: 550 var(--type-secondary)/1 var(--font-ui); }
.developer-runtime-spinner { width: 30px; height: 30px; border: 2px solid var(--line); border-top-color: var(--accent-ui); border-radius: 50%; animation: developer-runtime-spin .8s linear infinite; }
@keyframes developer-runtime-spin { to { transform: rotate(360deg); } }

/* Purpose-built, chat-led coding surface. Monaco, the review diff, Git, and
   xterm share one artifact canvas without reproducing a desktop IDE chrome. */
.developer-workspace-surface {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: minmax(180px, 22%) minmax(0, 1fr);
  color: var(--text); background: #212121;
}
.developer-files-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px auto 1fr; border-right: 1px solid var(--line-soft); background: #2a2a2a; }
.developer-files-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 15px; border-bottom: 1px solid var(--line-soft); }
.developer-files-panel > header > span { min-width: 0; display: grid; gap: 2px; }
.developer-files-panel > header strong { color: var(--text); font-size: var(--type-body); font-weight: 560; }
.developer-files-panel > header em { overflow: hidden; color: var(--dim); font-size: var(--type-caption); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.developer-files-panel button, .developer-artifact button { font: 520 var(--type-caption)/1 var(--font-ui); }
.developer-files-panel > header button, .developer-artifact-bar button, .developer-git-drawer button, .developer-terminal-drawer button, .developer-review main > header button {
  min-height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--muted); background: #373737;
}
.developer-files-panel button:hover, .developer-artifact button:hover { color: var(--text); border-color: #676767; }
.developer-file-search { height: 36px; display: flex; align-items: center; gap: 8px; margin: 10px 10px 5px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; color: var(--dim); background: #212121; }
.developer-file-search:focus-within { border-color: var(--accent-ring); box-shadow: none; }
.developer-file-search > span { font-size: var(--type-caption); }
.developer-file-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font: 450 var(--type-caption)/1 var(--font-ui); }
.developer-file-tree, .developer-search-results { min-height: 0; overflow: auto; padding: 5px 8px 12px; scrollbar-width: thin; scrollbar-color: #666666 transparent; }
.developer-file-tree > p, .developer-search-results > p, .developer-review-list > p { margin: 18px 8px; color: var(--dim); font-size: var(--type-caption); line-height: 1.5; }
.developer-tree-folder summary, .developer-tree-file { width: 100%; min-width: 0; min-height: 29px; display: flex; align-items: center; gap: 7px; border-radius: 6px; padding: 4px 7px 4px calc(7px + var(--tree-level) * 13px); color: var(--muted); text-align: left; list-style: none; cursor: pointer; }
.developer-tree-folder summary::-webkit-details-marker { display: none; }
.developer-tree-folder summary:hover, .developer-tree-file:hover { color: var(--text); background: rgba(255,255,255,.055); }
.developer-tree-file.active { color: #f2f4ff; background: var(--accent-soft); }
.developer-tree-folder summary > span:last-child, .developer-tree-file > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-file-mark { width: 25px; flex: 0 0 25px; color: var(--dim); font: 650 9px/1 var(--font-code); text-transform: uppercase; }
.developer-file-mark.folder::before { content: '›'; display: inline-block; font-size: 15px; transition: transform var(--motion-fast) ease; }
.developer-tree-folder[open] > summary .developer-file-mark.folder::before { transform: rotate(90deg); }
.developer-search-results button { width: 100%; display: grid; gap: 3px; margin-bottom: 4px; border-radius: 7px; padding: 8px; color: var(--muted); text-align: left; }
.developer-search-results button:hover { background: rgba(255,255,255,.05); }
.developer-search-results strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.developer-search-results span { overflow: hidden; color: var(--dim); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.developer-artifact { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px 1fr; overflow: hidden; background: #212121; }
.developer-artifact-bar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line-soft); background: #272727; }
.developer-active-file { min-width: 0; display: grid; gap: 2px; }
.developer-active-file strong, .developer-active-file em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-active-file strong { color: var(--text); font: 560 var(--type-secondary)/1.2 var(--font-code); }
.developer-active-file em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.developer-artifact-bar > div { display: flex; gap: 6px; }
.developer-artifact-bar button { display: flex; align-items: center; gap: 6px; }
.developer-review-count { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; color: var(--accent-foreground); background: var(--accent-ui); font-size: var(--type-caption); }
.developer-editor-stack { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.developer-monaco-host { width: 100%; height: 100%; }
.developer-monaco-host[hidden],
.developer-editor-empty[hidden],
.developer-review[hidden],
.developer-history-drawer[hidden],
.developer-conflict-panel[hidden],
.developer-git-drawer[hidden],
.developer-terminal-drawer[hidden] { display: none; }
.developer-editor-empty { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 7px; color: var(--dim); text-align: center; pointer-events: none; }
.developer-editor-empty strong { color: var(--muted); font-size: var(--type-heading); font-weight: 560; }
.developer-editor-empty span { font-size: var(--type-caption); }
.developer-review { position: absolute; inset: 0; z-index: 3; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(180px, 25%) minmax(0, 1fr); background: #212121; }
.developer-review > aside { min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px 1fr; border-right: 1px solid var(--line-soft); background: #2a2a2a; }
.developer-review > aside > header { display: grid; align-content: center; gap: 2px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); }
.developer-review > aside strong { font-size: var(--type-secondary); font-weight: 560; }
.developer-review > aside em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.developer-review-list { min-height: 0; overflow: auto; padding: 7px; }
.developer-review-list button { width: 100%; min-width: 0; display: flex; justify-content: space-between; gap: 7px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 7px; padding: 8px; color: var(--muted); text-align: left; }
.developer-review-list button.active { border-color: var(--line); color: var(--text); background: var(--accent-soft); }
.developer-review-list button > span { min-width: 0; display: grid; gap: 3px; }
.developer-review-list strong, .developer-review-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-review-list em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.developer-review-list b { color: var(--dim); font-size: var(--type-caption); font-weight: 600; text-transform: uppercase; }
.developer-review > main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px auto minmax(0, 1fr); }
.developer-review main > header { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 11px 0 15px; border-bottom: 1px solid var(--line-soft); }
.developer-review-title { overflow: hidden; color: var(--text); font: 550 var(--type-secondary)/1 var(--font-code); text-overflow: ellipsis; white-space: nowrap; }
.developer-review main > header > div { display: flex; gap: 6px; }
.developer-review main > header button.primary, .developer-git-drawer button.primary { border-color: var(--button-primary-bg); color: var(--button-primary-fg); background: var(--button-primary-bg); }
.developer-conflict-panel { display: grid; gap: 8px; border-bottom: 1px solid #8c5b28; padding: 10px 12px; color: #f3d5ad; background: #3b2b1d; }
.developer-conflict-panel > strong { color: #ffe5bf; font-size: var(--type-secondary); }
.developer-conflict-panel > p, .developer-conflict-panel > small { margin: 0; color: inherit; font-size: var(--type-caption); line-height: 1.4; }
.developer-conflict-panel > div { display: flex; flex-wrap: wrap; gap: 6px; }
.developer-conflict-panel button { min-height: 30px; border: 1px solid #8c6947; border-radius: 7px; padding: 0 9px; color: #ffe5bf; background: #4c3724; }
.developer-diff-host { min-width: 0; min-height: 0; }
.developer-history-drawer { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(360px, 100%); display: grid; grid-template-rows: 58px minmax(0, 1fr); border-left: 1px solid var(--line); background: #212121; box-shadow: -20px 0 48px rgba(0,0,0,.28); }
.developer-history-drawer > header { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); padding: 0 10px 0 14px; background: #272727; }
.developer-history-drawer > header > span { min-width: 0; display: grid; gap: 2px; margin-right: auto; }
.developer-history-drawer > header strong { font-size: var(--type-secondary); font-weight: 560; }
.developer-history-drawer > header em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.developer-history-drawer > header button { min-height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--muted); background: #2e2e2e; }
.developer-history-list { min-height: 0; overflow: auto; padding: 8px; }
.developer-history-list > p { margin: 16px 8px; color: var(--dim); font-size: var(--type-caption); line-height: 1.5; }
.developer-history-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; margin-bottom: 6px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px; }
.developer-history-list article > span { min-width: 0; display: grid; gap: 3px; }
.developer-history-list article strong { color: var(--text); font-size: var(--type-secondary); text-transform: capitalize; }
.developer-history-list article em, .developer-history-list article small { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.developer-history-list article small { grid-column: 1; }
.developer-history-list article button { grid-column: 2; grid-row: 1 / 3; align-self: center; min-height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--muted); background: #2e2e2e; }
.developer-history-list article button:disabled { opacity: .45; cursor: not-allowed; }
.developer-git-drawer, .developer-terminal-drawer { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 14px; height: min(48%, 410px); min-height: 220px; display: grid; overflow: hidden; border: 1px solid #5b5b5b; border-radius: 11px; background: #1c1c1c; box-shadow: 0 24px 70px rgba(0,0,0,.46); }
.developer-git-drawer { grid-template-rows: 52px 1fr 50px; }
.developer-terminal-drawer { grid-template-rows: 46px 1fr; }
.developer-git-drawer > header, .developer-terminal-drawer > header { display: flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line-soft); background: #272727; }
.developer-git-drawer > header > span, .developer-terminal-drawer > header > span { min-width: 0; display: grid; gap: 2px; margin-right: auto; }
.developer-git-drawer > header strong, .developer-terminal-drawer > header strong { font-size: var(--type-secondary); font-weight: 560; }
.developer-git-drawer > header em, .developer-terminal-drawer > header em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.developer-git-output { min-height: 0; display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); }
.developer-git-output pre { min-width: 0; min-height: 0; margin: 0; overflow: auto; padding: 13px; color: #d7d9dd; font: calc(12px * var(--developer-code-scale))/1.5 var(--font-code); white-space: pre-wrap; }
.developer-git-status { border-right: 1px solid var(--line-soft); }
.developer-git-drawer > footer { display: flex; align-items: center; gap: 7px; padding: 0 10px; border-top: 1px solid var(--line-soft); }
.developer-git-drawer input { min-width: 0; height: 32px; flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; outline: 0; color: var(--text); background: #212121; font: 450 var(--type-caption)/1 var(--font-ui); }
.developer-git-drawer input:focus { border-color: var(--accent-ring); box-shadow: none; }
.developer-xterm-host { min-width: 0; min-height: 0; padding: 9px 9px 5px; background: #161616; }
.developer-xterm-host .xterm { height: 100%; font-size: calc(1em * var(--developer-code-scale)); }
.developer-xterm-host .xterm-viewport { scrollbar-width: thin; scrollbar-color: #666666 transparent; }
.developer-host.reduce-motion *, .developer-host.reduce-motion *::before, .developer-host.reduce-motion *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

.developer-host.theme-light, .theme-light #developer-workspace-mount { background: #fff; }
.developer-host.theme-light .developer-workspace-surface, .developer-host.theme-light .developer-artifact { color: #252a31; background: #fff; }
.developer-host.theme-light .developer-files-panel, .developer-host.theme-light .developer-review > aside { border-color: #d8dde4; background: #f4f6f8; }
.developer-host.theme-light .developer-files-panel > header, .developer-host.theme-light .developer-artifact-bar, .developer-host.theme-light .developer-review > aside > header, .developer-host.theme-light .developer-review main > header { border-color: #d8dde4; background: #f7f8fa; }
.developer-host.theme-light .developer-files-panel strong, .developer-host.theme-light .developer-active-file strong, .developer-host.theme-light .developer-review strong, .developer-host.theme-light .developer-review-title { color: #252a31; }
.developer-host.theme-light .developer-file-search, .developer-host.theme-light .developer-git-drawer input { border-color: #c7cdd6; color: #252a31; background: #fff; }
.developer-host.theme-light .developer-tree-folder summary:hover, .developer-host.theme-light .developer-tree-file:hover, .developer-host.theme-light .developer-search-results button:hover { background: #e8ebef; }
.developer-host.theme-light .developer-tree-file.active { color: #263d9a; background: var(--accent-soft); }
.developer-host.theme-light .developer-files-panel > header button, .developer-host.theme-light .developer-artifact-bar button, .developer-host.theme-light .developer-review main > header button, .developer-host.theme-light .developer-git-drawer button, .developer-host.theme-light .developer-terminal-drawer button { border-color: #c7cdd6; color: #46505c; background: #eef1f4; }
.developer-host.theme-light .developer-git-drawer, .developer-host.theme-light .developer-terminal-drawer { border-color: #c2c8d0; background: #fff; box-shadow: 0 24px 70px rgba(27,36,48,.2); }
.developer-host.theme-light .developer-history-drawer { border-color: #c2c8d0; background: #fff; box-shadow: -20px 0 48px rgba(27,36,48,.15); }
.developer-host.theme-light .developer-history-drawer > header { border-color: #d8dde4; background: #f4f6f8; }
.developer-host.theme-light .developer-history-drawer > header button, .developer-host.theme-light .developer-history-list article button { border-color: #c7cdd6; color: #46505c; background: #eef1f4; }
.developer-host.theme-light .developer-conflict-panel { border-color: #d5a35f; color: #724a18; background: #fff7e8; }
.developer-host.theme-light .developer-conflict-panel > strong { color: #5f3c12; }
.developer-host.theme-light .developer-git-drawer > header, .developer-host.theme-light .developer-terminal-drawer > header { border-color: #d8dde4; background: #f4f6f8; }
.developer-host.theme-light .developer-git-output pre { color: #303842; }
.developer-host.theme-light .developer-git-status { border-color: #d8dde4; }

@media (max-width: 980px) {
  .developer-workspace-surface { grid-template-columns: 170px minmax(0, 1fr); }
  .developer-review { grid-template-columns: 170px minmax(0, 1fr); }
  .developer-artifact-bar { padding-left: 10px; }
  .developer-artifact-bar button { padding-inline: 7px; }
}
.workspace-explorer { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px 42px 1fr; border-right: 1px solid var(--line); background: #292929; }
.workspace-explorer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 18px; border-bottom: 1px solid var(--line-soft); }
.workspace-explorer-head strong { color: #dfe0e2; font-size: var(--type-caption); font-weight: 540; text-transform: uppercase; letter-spacing: .045em; }
.workspace-explorer-head div { display: flex; gap: 4px; }
.workspace-explorer-head button { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; color: var(--muted); }
.workspace-explorer-head button:hover { background: rgba(255,255,255,.07); color: var(--text); }
.workspace-explorer-head .ui-icon { width: 15px; height: 15px; }
.workspace-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-soft); }
.workspace-tabs button { display: grid; place-items: center; color: var(--dim); border-bottom: 2px solid transparent; }
.workspace-tabs button.active { border-color: var(--accent-ring); background: var(--accent-soft); color: var(--accent-ui); }
.workspace-tabs .ui-icon { width: 17px; height: 17px; }
.workspace-tree, .workspace-search, .workspace-git, .checkpoint-list { min-height: 0; overflow: auto; padding: 9px; scrollbar-width: thin; scrollbar-color: #565656 transparent; }
.workspace-tree > p, .workspace-search-results > p, .checkpoint-list > p, .tool-request-list > p { margin: 20px 12px; color: var(--dim); font-size: var(--type-caption); line-height: 1.55; }
.workspace-tree-folder > div, .workspace-tree-file { min-width: 0; width: 100%; height: 29px; display: flex; align-items: center; gap: 7px; padding: 0 7px 0 calc(8px + var(--tree-level) * 14px); border-radius: 5px; color: var(--muted); font-size: var(--type-caption); text-align: left; }
.workspace-tree-folder > div { color: #d0d1d4; }
.workspace-tree-file:hover, .workspace-tree-file.active { background: rgba(255,255,255,.065); color: var(--text); }
.workspace-tree-file.active { background: var(--accent-soft); color: #eef1ff; }
.workspace-tree .ui-icon { width: 14px; height: 14px; flex: none; }
.workspace-tree-file span, .workspace-tree-folder span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.workspace-tree-file em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }

.workspace-search label { display: flex; align-items: center; gap: 7px; height: 34px; border: 1px solid #4e4e4e; border-radius: 7px; padding: 0 9px; background: #333333; color: var(--dim); }
.workspace-search label:focus-within { border-color: var(--accent-ring); box-shadow: none; }
.workspace-search label .ui-icon { width: 15px; height: 15px; }
.workspace-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--type-caption); }
.workspace-search-results { margin-top: 9px; }
.workspace-search-results button { display: grid; gap: 4px; width: 100%; border-radius: 6px; padding: 9px; color: var(--muted); text-align: left; }
.workspace-search-results button:hover { background: rgba(255,255,255,.06); }
.workspace-search-results strong { overflow: hidden; color: #e0e1e3; font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.workspace-search-results span { color: var(--dim); font-size: var(--type-caption); line-height: 1.4; }
.workspace-panel-actions { display: flex; gap: 6px; margin-bottom: 9px; }
.workspace-panel-actions button { display: flex; align-items: center; gap: 5px; min-height: 29px; border-radius: 6px; padding: 0 9px; background: #383838; color: var(--muted); font-size: var(--type-caption); }
.workspace-panel-actions .ui-icon { width: 14px; height: 14px; }
.workspace-git pre { min-height: 260px; margin: 0; overflow: auto; border: 1px solid var(--line-soft); border-radius: 7px; padding: 11px; background: #212121; color: #cfd1d5; font: var(--type-caption)/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.checkpoint-list article { display: grid; grid-template-columns: 1fr auto; gap: 5px 7px; margin-bottom: 7px; border: 1px solid var(--line-soft); border-radius: 7px; padding: 9px; background: #2f2f2f; }
.checkpoint-list article > span { min-width: 0; display: grid; grid-template-columns: 15px 1fr; gap: 3px 7px; }
.checkpoint-list .ui-icon { grid-row: span 2; width: 14px; height: 14px; color: var(--dim); }
.checkpoint-list strong { overflow: hidden; color: #e1e2e4; font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.checkpoint-list em, .checkpoint-list small { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.checkpoint-list button { grid-column: 2; grid-row: 1 / span 2; align-self: center; border-radius: 5px; padding: 5px 7px; background: #404040; color: #d8d9dc; font-size: var(--type-caption); }

.workspace-editor { min-width: 0; min-height: 0; display: grid; grid-template-rows: 52px 1fr 30px; background: #212121; }
.workspace-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px 0 18px; border-bottom: 1px solid var(--line-soft); background: #272727; }
.workspace-editor > header > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.workspace-editor > header strong { overflow: hidden; color: #e3e4e5; font-size: var(--type-caption); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.workspace-editor > header i { color: #e3b83d; font-size: var(--type-caption); font-style: normal; }
.workspace-editor > header .ui-icon { width: 15px; height: 15px; }
.workspace-editor > header > div { display: flex; gap: 5px; }
.workspace-editor > header button { display: flex; align-items: center; gap: 5px; height: 29px; border-radius: 6px; padding: 0 8px; background: #383838; color: var(--muted); font-size: var(--type-caption); }
.workspace-editor > header button.primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.workspace-editor > header button.danger { color: #ff9da3; }
.workspace-editor > header button:disabled { opacity: .45; cursor: default; }
.workspace-editor textarea {
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  padding: 18px 21px;
  outline: 0;
  background: #212121;
  color: #dfe0e3;
  font: var(--type-caption)/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  scrollbar-color: rgba(255,255,255,.9) transparent;
  scrollbar-width: thin;
  tab-size: 2;
}
.workspace-editor textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.workspace-editor textarea::-webkit-scrollbar-track,
.workspace-editor textarea::-webkit-scrollbar-corner { background: transparent; }
.workspace-editor textarea::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  background-clip: padding-box;
}
.workspace-editor textarea::-webkit-scrollbar-thumb:hover { background: #fff; background-clip: padding-box; }
.workspace-editor > footer { display: flex; align-items: center; gap: 15px; padding: 0 15px; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: var(--type-caption); }
.workspace-welcome { grid-row: 1 / -1; display: grid; align-content: center; justify-items: center; gap: 11px; padding: 60px; color: var(--dim); text-align: center; }
.workspace-welcome .ui-icon { width: 42px; height: 42px; color: var(--muted); }
.workspace-welcome h2 { margin: 4px 0 0; color: var(--text); font-size: 20px; font-weight: 480; }
.workspace-welcome p { max-width: 470px; margin: 0; font-size: var(--type-caption); line-height: 1.6; }

.workspace-inspector { min-width: 0; min-height: 0; overflow: auto; border-left: 1px solid var(--line); padding: 13px; background: #2b2b2b; scrollbar-width: thin; scrollbar-color: #565656 transparent; }
.workspace-inspector section { margin-bottom: 12px; border: 1px solid var(--line-soft); border-radius: 9px; padding: 11px; background: #333333; }
.workspace-inspector-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.workspace-inspector-title > span { display: flex; align-items: center; gap: 7px; }
.workspace-inspector-title strong { color: #e4e5e6; font-size: var(--type-caption); font-weight: 540; }
.workspace-inspector-title .ui-icon, .workspace-inspector-title button .ui-icon { width: 15px; height: 15px; color: var(--muted); }
.workspace-inspector p { margin: 0 0 10px; color: var(--dim); font-size: var(--type-caption); line-height: 1.5; }
.quick-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.quick-tools button { display: grid; justify-items: center; gap: 5px; border-radius: 6px; padding: 8px 3px; background: #3e3e3e; color: #d6d7d9; font-size: var(--type-caption); }
.quick-tools button:hover { background: #484848; }
.quick-tools .ui-icon { width: 15px; height: 15px; }
.tool-request-list { margin-top: 8px; }
.tool-request { display: grid; gap: 7px; margin-top: 6px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px; background: #2a2a2a; }
.tool-request > span { display: flex; justify-content: space-between; gap: 7px; }
.tool-request strong { color: #dedfe1; font-size: var(--type-caption); font-weight: 520; text-transform: capitalize; }
.tool-request em { color: var(--dim); font-size: var(--type-caption); font-style: normal; text-transform: capitalize; }
.tool-request.pending { border-color: rgba(227,184,61,.3); }
.tool-request.completed { border-color: rgba(43,202,104,.22); }
.tool-request > div { display: flex; justify-content: end; gap: 5px; }
.tool-request button { border-radius: 5px; padding: 5px 8px; background: #3f3f3f; color: #ddd; font-size: var(--type-caption); }
.tool-request button.primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.tool-request pre { max-height: 90px; margin: 0; overflow: auto; color: #b9bbc0; font: var(--type-caption)/1.45 ui-monospace, monospace; white-space: pre-wrap; }
.context-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.context-chips span { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; color: #d6d7da; background: #3d3d3d; font-size: var(--type-caption); }
.context-chips .ui-icon { width: 12px; height: 12px; }
.context-chips em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.memory-item { display: grid; gap: 3px; margin-top: 7px; border-left: 2px solid var(--accent-ui); padding-left: 8px; }
.memory-item strong { color: #dddfe1; font-size: var(--type-caption); }
.memory-item span { overflow: hidden; color: var(--dim); font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.template-item { width: 100%; margin-top: 5px; border-radius: 6px; padding: 7px 8px; background: #3c3c3c; color: #d5d6d9; font-size: var(--type-caption); text-align: left; }
.workspace-error { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; max-width: 520px; border: 1px solid rgba(255,93,101,.35); border-radius: 8px; padding: 10px 12px; background: #4b2b31; color: #ffdadd; font-size: var(--type-caption); box-shadow: 0 14px 35px rgba(0,0,0,.3); }
.workspace-error .ui-icon { width: 17px; height: 17px; }

.agents-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; }
.agent-directory { min-height: 0; overflow: auto; border-right: 1px solid var(--line); padding: 12px; background: #2b2b2b; }
.agent-directory-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 7px 8px; color: var(--dim); font-size: var(--type-caption); text-transform: uppercase; letter-spacing: .04em; }
.agent-directory-head span { border-radius: 999px; padding: 2px 7px; background: #3e3e3e; }
.agent-directory-item { width: 100%; min-height: 54px; display: grid; grid-template-columns: 9px 1fr 16px; align-items: center; gap: 9px; margin-bottom: 5px; border: 1px solid transparent; border-radius: 8px; padding: 8px 9px; color: var(--muted); text-align: left; }
.agent-directory-item:hover { background: rgba(255,255,255,.05); }
.agent-directory-item.active { border-color: var(--accent-ring); background: var(--accent-soft); }
.agent-directory-item span { min-width: 0; display: grid; gap: 3px; }
.agent-directory-item strong { overflow: hidden; color: #e2e3e5; font-size: var(--type-caption); font-weight: 530; text-overflow: ellipsis; white-space: nowrap; }
.agent-directory-item em { overflow: hidden; color: var(--dim); font-size: var(--type-caption); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.agent-directory-item.active em { color: var(--muted); }
.agent-directory-item > .ui-icon { width: 14px; height: 14px; }
.agent-empty { margin: 35px 10px; color: var(--dim); font-size: var(--type-caption); line-height: 1.55; text-align: center; }
.agent-detail { min-width: 0; min-height: 0; overflow: auto; padding: 26px 32px 60px; scrollbar-width: thin; scrollbar-color: #565656 transparent; }
.agent-detail-header { display: flex; align-items: center; gap: 13px; }
.agent-avatar { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #333333; }
.agent-avatar .provider-logo { width: 25px; height: 25px; }
.agent-detail-header > span { display: grid; gap: 3px; }
.agent-detail-header h2 { margin: 0; color: var(--text); font-size: 20px; font-weight: 490; }
.agent-detail-header em { color: var(--dim); font-size: var(--type-caption); font-style: normal; text-transform: capitalize; }
.agent-detail-header > button { margin-left: auto; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; background: #333333; color: var(--muted); font-size: var(--type-caption); }
.agent-instructions, .agent-task-composer, .agent-run-history { margin-top: 20px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 15px; background: #2b2b2b; }
.agent-instructions > span, .agent-task-composer label, .agent-run-history h3 { color: var(--dim); font-size: var(--type-caption); font-weight: 520; text-transform: uppercase; letter-spacing: .05em; }
.agent-instructions p { margin: 9px 0 0; color: #d1d2d5; font-size: var(--type-caption); line-height: 1.6; white-space: pre-wrap; }
.agent-task-composer label { display: grid; gap: 8px; }
.agent-task-composer textarea { min-height: 120px; resize: vertical; border: 1px solid #4d4d4d; border-radius: 8px; padding: 11px; outline: 0; background: #232323; color: var(--text); font-size: var(--type-caption); line-height: 1.55; text-transform: none; letter-spacing: 0; }
.agent-task-composer textarea:focus { border-color: var(--accent-ring); box-shadow: none; }
.agent-task-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.agent-task-composer > div > span { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: var(--type-caption); }
.agent-task-composer .ui-icon { width: 14px; height: 14px; }
.agent-task-composer button { display: flex; align-items: center; gap: 6px; border-radius: 7px; padding: 8px 12px; background: var(--button-primary-bg); color: var(--button-primary-fg); font-size: var(--type-caption); }
.agent-task-composer button:disabled { cursor: not-allowed; opacity: .45; }
.agent-run-history h3 { margin: 0 0 10px; }
.agent-run-history article { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 45px; border-top: 1px solid var(--line-soft); }
.agent-run-history article > span { min-width: 0; display: grid; gap: 2px; }
.agent-run-history strong { color: #dfe0e2; font-size: var(--type-caption); }
.agent-run-history em { overflow: hidden; color: var(--dim); font-size: var(--type-caption); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.agent-run-history small { color: var(--dim); font-size: var(--type-caption); text-transform: capitalize; }
.agent-run-history article > button { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: #373737; color: var(--muted); font-size: var(--type-caption); }
.agent-run-history article > button:hover { color: var(--text); }
.agent-run-history > p { color: var(--dim); font-size: var(--type-caption); }
.agent-detail-empty { display: grid; justify-items: center; gap: 9px; margin: 100px 0; color: var(--dim); text-align: center; }
.agent-detail-empty .ui-icon { width: 40px; height: 40px; color: var(--muted); }
.agent-detail-empty h2 { margin: 6px 0 0; color: var(--text); font-size: 19px; font-weight: 480; }
.agent-detail-empty p { margin: 0; font-size: var(--type-caption); }
.agent-side { min-height: 0; border-left: 1px solid var(--line); padding: 13px; background: #2b2b2b; }
.agent-side section { margin-bottom: 12px; border: 1px solid var(--line-soft); border-radius: 9px; padding: 12px; background: #333333; }
.agent-side h3 { margin: 0 0 10px; color: #dedfe1; font-size: var(--type-caption); font-weight: 530; }
.agent-side p { margin: 0; color: var(--dim); font-size: var(--type-caption); line-height: 1.55; }
.safeguard-row { display: flex; align-items: center; gap: 7px; min-height: 30px; border-top: 1px solid var(--line-soft); color: #cfd0d3; font-size: var(--type-caption); }
.safeguard-row .ui-icon { width: 14px; height: 14px; color: var(--muted); }

.audit-center-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: 250px minmax(420px, 1fr) 360px; }
.audit-history { min-height: 0; overflow: auto; border-right: 1px solid var(--line); padding: 13px; background: #2b2b2b; }
.audit-history h3 { margin: 6px 7px 13px; color: var(--dim); font-size: var(--type-caption); font-weight: 520; text-transform: uppercase; }
.audit-history > button { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; margin-bottom: 5px; border: 1px solid transparent; border-radius: 7px; padding: 9px; color: var(--muted); text-align: left; }
.audit-history > button.active { border-color: var(--accent-ring); background: var(--accent-soft); }
.audit-history button span { display: grid; gap: 3px; }
.audit-history strong { color: #dedfe1; font-size: var(--type-caption); }
.audit-history em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.audit-history > button.active em { color: var(--muted); }
.audit-history b { min-width: 24px; border-radius: 999px; padding: 4px; background: #3d3d3d; color: #ddd; font-size: var(--type-caption); text-align: center; }
.audit-history > p { margin: 30px 8px; color: var(--dim); font-size: var(--type-caption); line-height: 1.5; text-align: center; }
.finding-list { min-width: 0; min-height: 0; overflow: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: #565656 transparent; }
.finding-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.finding-summary > div { display: grid; gap: 3px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; background: #2b2b2b; }
.finding-summary strong { color: var(--text); font-size: 17px; font-weight: 490; }
.finding-summary span { color: var(--dim); font-size: var(--type-caption); }
.finding-row { width: 100%; min-height: 57px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 11px; margin-bottom: 6px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 12px; background: #2b2b2b; color: var(--muted); text-align: left; }
.finding-row:hover { background: #333333; }
.finding-row.active { border-color: var(--accent-ring); box-shadow: 0 0 0 1px var(--accent-soft); }
.finding-row.resolved, .finding-row.dismissed { opacity: .5; }
.severity { width: 7px; height: 28px; border-radius: 999px; background: #737373; }
.severity.critical { background: #ff4d5a; }.severity.high { background: #e8754d; }.severity.medium { background: #d9b33c; }.severity.low { background: #4e8dd8; }
.finding-row > span { min-width: 0; display: grid; gap: 4px; }
.finding-row strong { overflow: hidden; color: #e0e1e3; font-size: var(--type-caption); font-weight: 530; text-overflow: ellipsis; white-space: nowrap; }
.finding-row em { overflow: hidden; color: var(--dim); font-size: var(--type-caption); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.finding-row small { border-radius: 999px; padding: 4px 7px; background: #3d3d3d; color: #afb1b6; font-size: var(--type-caption); text-transform: uppercase; }
.audit-empty { display: grid; justify-items: center; gap: 9px; margin: 120px auto 0; color: var(--dim); text-align: center; }
.audit-empty .ui-icon { width: 42px; height: 42px; color: var(--muted); }
.audit-empty h2 { margin: 5px 0 0; color: var(--text); font-size: 19px; font-weight: 470; }
.audit-empty p { max-width: 420px; margin: 0; font-size: var(--type-caption); line-height: 1.55; }
.finding-detail { min-height: 0; overflow: auto; border-left: 1px solid var(--line); padding: 24px 20px; background: #2b2b2b; }
.finding-detail > p { color: #bfc1c5; font-size: var(--type-caption); line-height: 1.6; }
.finding-detail h2 { margin: 12px 0; color: var(--text); font-size: 18px; font-weight: 490; line-height: 1.25; }
.finding-detail h3 { margin: 21px 0 7px; color: var(--dim); font-size: var(--type-caption); font-weight: 540; letter-spacing: .05em; text-transform: uppercase; }
.finding-badge { display: inline-block; border-radius: 999px; padding: 4px 8px; background: #494949; color: #ddd; font-size: var(--type-caption); text-transform: uppercase; }
.finding-badge.critical, .finding-badge.high { background: rgba(201,67,75,.25); color: #ffb8bd; }
.finding-badge.medium { background: rgba(191,153,42,.22); color: #f0d378; }
.finding-location { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; background: #373737; color: #cfd1d5; font-size: var(--type-caption); text-align: left; }
.finding-location .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.finding-actions { display: flex; gap: 7px; margin-top: 25px; }
.finding-actions button { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 8px; background: #383838; color: #d2d3d5; font-size: var(--type-caption); }
.finding-actions button.primary { border-color: var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-fg); }

.topbar-action.primary,
.workspace-editor > header button.primary,
.tool-request button.primary,
.agent-task-composer button,
.finding-actions button.primary,
.chat-composer-actions .send-chat { color: var(--button-primary-fg); }
.chats-heading h2 { transition: opacity .16s ease .12s, transform .28s var(--sidebar-motion-ease); }
.chats-heading.search-is-open h2 { opacity: 0; transform: translateX(6px); transition-delay: 0s; }
.chats-heading button { position: relative; z-index: 82; opacity: 1; }
.sidebar-chat-search {
  position: absolute;
  z-index: 80;
  right: 58px;
  left: auto;
  top: var(--sidebar-chat-search-top, 820px);
  width: var(--sidebar-search-collapsed-width, 30px);
  height: 42px;
  display: flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0;
  background: #313131;
  color: var(--dim);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(-50%);
  transform-origin: right center;
  transition: none;
}
.sidebar-chat-search.is-open {
  width: 210px;
  border-color: var(--line);
  padding: 0 13px;
  background: #313131;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.sidebar-chat-search.is-animating { transition: width .28s var(--sidebar-motion-ease), padding .28s var(--sidebar-motion-ease), opacity .18s ease, visibility 0s; }
.sidebar-chat-search.is-animating:not(.is-open) { transition-delay: 0s, 0s, 0s, .28s; }
.sidebar-chat-search:focus-within { border-color: var(--accent-ring); box-shadow: 0 10px 24px rgba(0,0,0,.22); color: var(--muted); }
.sidebar-chat-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; }
.sidebar-chat-search input::placeholder { color: var(--dim); }
.sidebar-is-collapsed .sidebar-chat-search { opacity: 0; visibility: hidden; pointer-events: none; }
.sidebar-chat-empty { padding: 8px 16px; color: var(--dim); font-size: var(--type-caption); }
.chat-row > .ui-icon { flex: 0 0 auto; width: 11px; height: 11px; margin-left: auto; color: var(--dim); }
.chat-message-actions { display: flex; min-height: 18px; gap: 5px; margin-top: 6px; opacity: 0; transition: opacity 150ms ease; }
.chat-message:hover .chat-message-actions, .chat-message:focus-within .chat-message-actions { opacity: 1; }
.chat-message-actions:empty { display: none; }
.chat-message-actions button { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-soft); border-radius: 5px; padding: 4px 7px; background: #2f2f2f; color: var(--dim); font-size: var(--type-caption); }
.chat-message-actions button:hover { border-color: var(--line); color: var(--text); }
.chat-message-actions .ui-icon { width: 11px; height: 11px; }
.member-role, .usage-model-count { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: var(--type-caption); text-transform: capitalize; }
.backup-actions { display: flex; gap: 5px; }
.modal .optional { margin-left: 5px; color: var(--dim); font-size: var(--type-caption); font-weight: 400; }

.theme-light .workspace-main, .theme-light .agents-main, .theme-light .audit-center-main { background: #f5f6f8; }
.theme-light .developer-stage { background: #f5f6f8; }
.theme-light #developer-workspace-mount { border-color: #cbd0d7; background: #f5f6f8; }
.theme-light .developer-runtime-status h2 { color: #252a31; }
.theme-light .product-topbar { border-color: #cbd0d7; background: #fff; }
.theme-light .product-title h1 { color: #252a31; }
.theme-light .topbar-action, .theme-light .workspace-project-switcher select { border-color: #c9cdd4; background: #f1f3f6; color: #454c56; }
.theme-light .workspace-explorer, .theme-light .agent-directory, .theme-light .audit-history, .theme-light .workspace-inspector, .theme-light .agent-side, .theme-light .finding-detail { border-color: #cbd0d7; background: #eceef2; }
.theme-light .workspace-explorer-head, .theme-light .workspace-tabs, .theme-light .workspace-editor > header, .theme-light .workspace-editor > footer { border-color: #d5d9df; }
.theme-light .workspace-explorer-head strong, .theme-light .workspace-tree-folder > div, .theme-light .workspace-tree-file.active, .theme-light .workspace-tree-file:hover { color: #2d333b; }
.theme-light .workspace-tree-file:hover { background: #dde1e7; }
.theme-light .workspace-tree-file.active { background: var(--accent-soft); }
.theme-light .workspace-tabs button:hover, .theme-light .workspace-explorer-head button:hover { background: rgba(48,55,66,.07); color: #2d333b; }
.theme-light .workspace-search label, .theme-light .workspace-panel-actions button, .theme-light .workspace-editor > header button { border-color: #c8ccd3; background: #f5f6f8; color: #4a515b; }
.theme-light .workspace-search input { color: #252a31; }
.theme-light .workspace-git pre, .theme-light .workspace-editor, .theme-light .workspace-editor textarea { background: #fff; color: #343a43; }
.theme-light .workspace-editor > header { background: #f4f5f7; }
.theme-light .workspace-editor > header strong, .theme-light .workspace-welcome h2 { color: #252a31; }
.theme-light .workspace-editor textarea { scrollbar-color: rgba(83,91,103,.68) transparent; }
.theme-light .workspace-editor textarea::-webkit-scrollbar-thumb { background: rgba(83,91,103,.68); background-clip: padding-box; }
.theme-light .workspace-editor textarea::-webkit-scrollbar-thumb:hover { background: #535b67; background-clip: padding-box; }
.theme-light .workspace-inspector section, .theme-light .agent-side section, .theme-light .agent-instructions, .theme-light .agent-task-composer, .theme-light .agent-run-history, .theme-light .finding-summary > div, .theme-light .finding-row { border-color: #d2d6dc; background: #fff; }
.theme-light .workspace-inspector-title strong, .theme-light .memory-item strong, .theme-light .agent-directory-item strong, .theme-light .agent-detail-header h2, .theme-light .agent-instructions p, .theme-light .agent-run-history strong, .theme-light .finding-summary strong, .theme-light .finding-row strong, .theme-light .finding-detail h2 { color: #292f37; }
.theme-light .quick-tools button, .theme-light .template-item, .theme-light .tool-request { border-color: #d5d9df; background: #e9ecf1; color: #3c434d; }
.theme-light .tool-request strong, .theme-light .tool-request pre, .theme-light .workspace-search-results strong, .theme-light .checkpoint-list strong { color: #3d454f; }
.theme-light .tool-request pre, .theme-light .workspace-search-results span { color: #626b77; }
.theme-light .context-chips span { border-color: #cbd0d7; background: #e8ebf0; color: #424a54; }
.theme-light .checkpoint-list article { border-color: #d2d6dc; background: #fff; }
.theme-light .checkpoint-list button { background: #e8ebef; color: #414954; }
.theme-light .agent-task-composer textarea { border-color: #c8ccd3; background: #fff; color: #252a31; }
.theme-light .agent-avatar { border-color: #cbd0d7; background: #fff; }
.theme-light .agent-directory-head span, .theme-light .audit-history b { background: #dfe3e9; color: #3f4751; }
.theme-light .agent-detail-header > button, .theme-light .agent-run-history article > button { border-color: #c7ccd3; background: #eef1f4; color: #3d454f; }
.theme-light .agent-detail-header > button:hover, .theme-light .agent-run-history article > button:hover { background: #e2e6eb; color: #20252c; }
.theme-light .agent-side h3, .theme-light .safeguard-row, .theme-light .audit-history strong { color: #343b45; }
.theme-light .safeguard-row { border-color: #d9dde3; }
.theme-light .agent-directory-item:hover { background: #e0e3e8; }
.theme-light .agent-directory-item.active { background: var(--accent-soft); }
.theme-light .finding-row:hover { background: #f1f3f6; }
.theme-light .finding-row small { background: #e5e8ed; color: #535c68; }
.theme-light .finding-badge { background: #e3e6eb; color: #4c5561; }
.theme-light .finding-badge.critical, .theme-light .finding-badge.high { background: rgba(190,55,66,.12); color: #a02f39; }
.theme-light .finding-badge.medium { background: rgba(169,129,16,.14); color: #765b08; }
.theme-light .finding-location { border-color: #c9cdd4; background: #f3f4f6; color: #424953; }
.theme-light .finding-detail > p { color: #555d68; }
.theme-light .finding-actions button { border-color: #c9cdd4; background: #f0f2f5; color: #3d454f; }
.theme-light .finding-actions button:hover { background: #e3e7ec; color: #20252c; }
.theme-light .finding-actions button.primary { border-color: var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-fg); }
.theme-light .sidebar-chat-search { border-color: #d0d4da; background: #f5f6f8; color: #747b85; }
.theme-light .sidebar-chat-search input { color: #252a31; }
.theme-light .chat-message-actions button { border-color: #d2d6dc; background: #fff; color: #69717c; }
.theme-light .chat-message-actions button:hover { background: #edf0f4; color: #252a31; }

@media (max-width: 1280px) {
  .workspace-layout { grid-template-columns: 280px minmax(420px, 1fr) 300px; }
  .agents-layout { grid-template-columns: 280px minmax(0, 1fr) 260px; }
  .audit-center-layout { grid-template-columns: 220px minmax(400px, 1fr) 310px; }
}

/* Usage Status ----------------------------------------------------------- */
.usage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px 24px;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,111,205,.24), #2b2b2b 68%);
}
.usage-hero-copy { min-width: 0; display: grid; gap: 5px; }
.usage-hero-copy > span { color: #b7c1ef; font-size: var(--type-caption); text-transform: uppercase; letter-spacing: .06em; }
.usage-hero h3 { margin: 0; color: var(--text); font-size: calc(24px * var(--text-scale-factor)); font-weight: 480; letter-spacing: -.015em; }
.usage-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: var(--type-secondary); line-height: 1.45; }
.usage-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.usage-hero-meta span { border: 1px solid rgba(183,193,239,.2); border-radius: 999px; padding: 4px 8px; color: #c4cbed; background: rgba(11,14,24,.15); font-size: var(--type-caption); }
.usage-refresh { display: flex; align-items: center; gap: 7px; }
/* Usage Status opens with the same activity calendar as Home. */
.usage-activity { margin: 0 0 18px; }
.usage-activity .home-activity { width: 100%; margin-top: 0; }
/* A touch smaller than on Home so the whole year fits the Settings column. */
.usage-activity .home-activity-calendar { --activity-cell-size: 8.8px; }
.usage-block-heading .usage-refresh { flex: none; }
.usage-refresh .ui-icon { width: 15px; height: 15px; }
.usage-refresh:disabled { opacity: .6; cursor: wait; }
.usage-refresh:disabled .ui-icon { animation: usage-spin .9s linear infinite; }
@keyframes usage-spin { to { transform: rotate(360deg); } }

.usage-token-overview { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding-top: 16px; border-top: 1px solid rgba(183,193,239,.16); }
.usage-token-ring { --usage-input: 0%; --usage-fill: 0%; width: 88px; height: 88px; flex: 0 0 88px; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent-ui) 0 var(--usage-input), #8d9ee8 var(--usage-input) var(--usage-fill), rgba(255,255,255,.1) var(--usage-fill) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.usage-token-ring::before { content: ''; position: absolute; inset: 9px; border-radius: inherit; background: #2a2a2a; box-shadow: 0 0 0 1px rgba(255,255,255,.04); }
.usage-token-ring > span { position: relative; display: grid; place-items: center; line-height: 1.05; }
.usage-token-ring strong { color: var(--text); font-size: calc(18px * var(--text-scale-factor)); font-weight: 540; }
.usage-token-ring small { color: var(--dim); font-size: var(--type-caption); }
.usage-token-legend { min-width: 0; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.usage-token-legend > span { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 3px 7px; padding: 9px 10px; border: 1px solid rgba(183,193,239,.14); border-radius: 9px; background: rgba(11,14,24,.12); }
.usage-token-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ui); }
.usage-token-legend i.output { background: #8d9ee8; }
.usage-token-legend small { color: var(--muted); font-size: var(--type-caption); }
.usage-token-legend strong { grid-column: 2; overflow: hidden; color: var(--text); font-size: var(--type-body); font-weight: 520; text-overflow: ellipsis; }

.usage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.usage-metrics article { min-height: 92px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: center; gap: 4px 9px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #2b2b2b; }
.usage-metrics .ui-icon { width: 18px; height: 18px; color: var(--muted); }
.usage-metrics span { align-self: center; color: var(--muted); font-size: var(--type-caption); }
.usage-metrics strong { grid-column: 1 / -1; color: var(--text); font-size: calc(21px * var(--text-scale-factor)); font-weight: 480; }
.usage-metrics strong small { margin-left: 7px; color: var(--dim); font-size: var(--type-caption); font-weight: 420; }

.usage-trend-card { overflow: hidden; }
.usage-trend-card > header { min-height: 56px; display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.usage-trend-card > header > span { display: grid; gap: 2px; }
.usage-trend-card > header h3 { margin: 0; color: var(--text); font-size: var(--type-body); font-weight: 520; }
.usage-trend-card > header p { margin: 0; color: var(--dim); font-size: var(--type-caption); }
.usage-trend-card > header em { margin-left: auto; color: var(--dim); font-size: var(--type-caption); font-style: normal; white-space: nowrap; }
.usage-trend { min-height: 108px; display: flex; align-items: flex-end; gap: 7px; padding: 16px 16px 12px; }
.usage-trend > div { height: 78px; min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.usage-trend > div i { width: min(24px, 72%); min-height: 4px; border-radius: 5px 5px 2px 2px; background: var(--accent-ui); opacity: .78; transition: height .28s cubic-bezier(.22,1,.36,1), opacity .15s ease; }
.usage-trend > div:hover i { opacity: 1; }
.usage-trend > div span { color: var(--dim); font-size: var(--type-caption); white-space: nowrap; }
.usage-trend > p { align-self: center; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--dim); font-size: var(--type-secondary); }
.usage-trend > p .ui-icon { width: 18px; height: 18px; }

.usage-block-heading { display: flex; align-items: center; gap: 20px; margin: 22px 2px 11px; }
.usage-block-heading > div { min-width: 0; display: grid; gap: 3px; }
.usage-block-heading h3 { margin: 0; color: var(--text); font-size: var(--type-body); font-weight: 520; }
.usage-block-heading p { margin: 0; color: var(--dim); font-size: var(--type-secondary); }
.usage-block-heading > span { flex: 0 0 auto; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: var(--type-caption); }
.usage-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.usage-provider-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #2b2b2b; }
.usage-provider-card > header { display: grid; grid-template-columns: 30px minmax(0,1fr) 9px; align-items: center; gap: 10px; padding: 14px 15px 11px; }
.usage-provider-card > header .provider-logo { width: 28px; height: 28px; }
.usage-provider-card > header > span { min-width: 0; display: grid; gap: 2px; }
.usage-provider-card > header strong { overflow: hidden; color: var(--text); font-size: var(--type-body); font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.usage-provider-card > header small { color: var(--dim); font-size: var(--type-caption); }
.usage-provider-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 15px; border-block: 1px solid var(--line-soft); }
.usage-provider-stats > span { min-width: 0; display: grid; gap: 3px; padding: 11px 8px; border-right: 1px solid var(--line-soft); }
.usage-provider-stats > span:first-child { padding-left: 0; }
.usage-provider-stats > span:last-child { border-right: 0; }
.usage-provider-stats small { color: var(--dim); font-size: var(--type-caption); }
.usage-provider-stats strong { color: var(--text); font-size: var(--type-body); font-weight: 500; }
.usage-provider-access { min-height: 69px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 11px 15px; }
.usage-provider-access > small { color: var(--dim); font-size: var(--type-caption); line-height: 1.35; }
.usage-availability { width: fit-content; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: var(--type-caption); }
.usage-availability .ui-icon { width: 13px; height: 13px; }
.usage-availability.balance, .usage-availability.local { color: var(--green); }
.usage-availability.error { color: #ef858c; }
.usage-balance { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 10px; }
.usage-balance > span { color: var(--muted); font-size: var(--type-caption); }
.usage-balance strong { color: var(--text); font-size: var(--type-body); font-weight: 520; }
.usage-balance small { grid-column: 1 / -1; color: var(--dim); font-size: var(--type-caption); }
.usage-provider-card > footer { min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: var(--type-caption); }
.usage-provider-card > footer a { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); }
.usage-provider-card > footer a:hover { color: var(--text); }
.usage-provider-card > footer .ui-icon { width: 12px; height: 12px; }
.usage-empty { grid-column: 1 / -1; min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line); border-radius: 11px; color: var(--dim); }
.usage-empty > .ui-icon { width: 26px; height: 26px; color: var(--muted); }
.usage-empty strong { color: var(--text); font-size: var(--type-body); font-weight: 500; }
.usage-empty span { font-size: var(--type-secondary); }
.usage-empty button { margin-top: 6px; }


.theme-light .usage-hero { border-color: #cbd2db; background: linear-gradient(135deg, #e1e7f9, #fff 70%); }
.theme-light .usage-hero-copy > span { color: #5065bd; }
.theme-light .usage-hero-meta span { border-color: rgba(76,97,183,.2); color: #5061a9; background: rgba(255,255,255,.44); }
.theme-light .usage-token-overview { border-color: rgba(76,97,183,.16); }
.theme-light .usage-token-ring { box-shadow: inset 0 0 0 1px rgba(39,49,67,.06); }
.theme-light .usage-token-ring::before { background: #f9faff; box-shadow: 0 0 0 1px rgba(39,49,67,.06); }
.theme-light .usage-token-legend > span { border-color: rgba(76,97,183,.15); background: rgba(255,255,255,.5); }
.theme-light .usage-metrics article,
.theme-light .usage-provider-card { border-color: #cfd5dd; background: #fff; box-shadow: 0 3px 10px rgba(30,39,51,.035); }
.theme-light .usage-trend > div i { opacity: .7; }
.theme-light .usage-provider-stats,
.theme-light .usage-provider-stats > span,
.theme-light .usage-provider-card > footer { border-color: #e0e4e9; }
.theme-light .usage-availability.error { color: #b33e48; }

@media (max-width: 1180px) {
  .usage-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-provider-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .usage-hero { grid-template-columns: 1fr; }
  .usage-refresh { width: fit-content; }
  .usage-token-overview { grid-column: 1; }
  .usage-token-legend { grid-template-columns: 1fr; }
  .usage-metrics { grid-template-columns: 1fr; }
  .usage-trend-card > header em { display: none; }
}

/* Consistent application type scale
   Keep compact product surfaces dense without allowing utility text to become
   visually disconnected from the established Settings and sidebar scale. */
.topbar-action,
.workspace-path,
.agent-model em,
.zoom-control span,
.chat-project-switcher label,
.chat-provider-controls label,
.agent-directory-head,
.agent-instructions > span,
.agent-task-composer label,
.agent-run-history h3,
.audit-history h3,
.finding-detail h3,
.modal .optional {
  font-size: var(--type-caption);
}

.chat-project-switcher select,
.chat-provider-controls select,
.chat-message-heading time,
.chat-run-meta span,
.chat-run-error,
.global-run-error,
.sidebar-chat-search input,
.sidebar-chat-empty,
.member-role,
.usage-model-count {
  font-size: var(--type-caption);
}

.chat-message-actions button {
  font-size: var(--type-caption);
}

.workspace-explorer-head strong,
.workspace-tree > p,
.workspace-search-results > p,
.checkpoint-list > p,
.tool-request-list > p,
.workspace-tree-folder > div,
.workspace-tree-file,
.workspace-search input,
.workspace-search-results strong,
.workspace-panel-actions button,
.checkpoint-list strong,
.workspace-editor > header strong,
.workspace-welcome p,
.workspace-inspector-title strong,
.workspace-inspector p,
.workspace-error {
  font-size: var(--type-caption);
}

.workspace-tree-file em,
.workspace-search-results span,
.checkpoint-list em,
.checkpoint-list small,
.checkpoint-list button,
.workspace-editor > header i,
.workspace-editor > header button,
.workspace-editor > footer,
.quick-tools button,
.tool-request strong,
.tool-request em,
.tool-request button,
.tool-request pre,
.context-chips span,
.context-chips em,
.memory-item strong,
.memory-item span,
.template-item {
  font-size: var(--type-caption);
}

.agent-directory-item strong,
.agent-empty,
.agent-instructions p,
.agent-task-composer textarea,
.agent-run-history strong,
.agent-detail-empty p,
.agent-side h3,
.audit-history strong,
.audit-empty p,
.finding-detail > p,
.finding-row strong {
  font-size: var(--type-caption);
}

.agent-directory-item em,
.agent-detail-header em,
.agent-detail-header > button,
.agent-task-composer > div > span,
.agent-task-composer button,
.agent-run-history em,
.agent-run-history small,
.agent-run-history article > button,
.agent-run-history > p,
.agent-side p,
.safeguard-row,
.audit-history em,
.audit-history b,
.audit-history > p,
.finding-summary span,
.finding-row em,
.finding-row small,
.finding-badge,
.finding-location,
.finding-actions button {
  font-size: var(--type-caption);
}

/* Workspace text follows the sidebar's regular application scale. */
.workspace-layout { grid-template-columns: 360px minmax(520px, 1fr) 390px; }
.workspace-frame .product-title h1,
.workspace-frame .workspace-path,
.workspace-frame .topbar-action,
.workspace-tree > p,
.workspace-tree-folder > div,
.workspace-tree-file,
.workspace-tree-file em,
.workspace-search input,
.workspace-search-results strong,
.workspace-search-results span,
.workspace-panel-actions button,
.workspace-git pre,
.checkpoint-list > p,
.checkpoint-list strong,
.checkpoint-list em,
.checkpoint-list small,
.checkpoint-list button,
.workspace-editor > header strong,
.workspace-editor > header i,
.workspace-editor > header button,
.workspace-editor textarea,
.workspace-editor > footer,
.workspace-inspector-title strong,
.workspace-inspector p,
.quick-tools button,
.tool-request-list > p,
.tool-request strong,
.tool-request em,
.tool-request button,
.tool-request pre,
.context-chips span,
.context-chips em,
.memory-item strong,
.memory-item span,
.template-item,
.workspace-error {
  font-size: var(--type-body);
}

.workspace-tree-folder > div,
.workspace-tree-file { height: 38px; }
.workspace-tree .ui-icon { width: 17px; height: 17px; }
.workspace-editor { grid-template-rows: 60px 1fr 38px; }
.workspace-editor > header button { height: 38px; padding: 0 11px; }
.workspace-editor > header .ui-icon { width: 18px; height: 18px; }
.workspace-editor textarea { line-height: 1.55; }
.workspace-inspector section { padding: 14px; }
.workspace-inspector-title .ui-icon,
.workspace-inspector-title button .ui-icon,
.quick-tools .ui-icon { width: 18px; height: 18px; }
.quick-tools button { min-height: 58px; padding: 9px 5px; line-height: 1.2; }
.tool-request pre { line-height: 1.5; }

/* Refined light palette: restrained cool neutrals, visible layer separation,
   and richer workflow colors without changing the established dark theme. */
.theme-light {
  --sidebar: #eef0f3;
  --audit-panel: #f8f9fb;
  --editor: #e9edf2;
  --connections: #e4e8ee;
  --connection-panel: #f7f8fa;
  --provider-card: #ffffff;
  --model-row: #f0f3f6;
  --line: #c1c7d0;
  --line-soft: #d5dae1;
  --text: #1e252e;
  --muted: #515c68;
  --dim: #707b88;
}
.theme-light .sidebar { background: #eef0f3; border-right-color: #c4c9d1; }
.theme-light .sidebar-rule { background: #d0d5dc; }
.theme-light .sidebar-nav button:hover,
.theme-light .sidebar-nav button.active,
.theme-light .project-child:hover,
.theme-light .project-child.selected { background: #e8eaed; color: #181d24; }
.theme-light .page-title,
.theme-light .workspace-blackbar,
.theme-light .settings-topbar,
.theme-light .chat-topbar,
.theme-light .product-topbar,
.theme-light .connection-main-black { border-color: #c4c9d1; background: #f8f9fb; }
.theme-light .settings-main,
.theme-light .settings-content,
.theme-light .chat-workspace,
.theme-light .workspace-main,
.theme-light .agents-main,
.theme-light .audit-center-main { background: #e9edf2; }
.theme-light .settings-rail,
.theme-light .workspace-explorer,
.theme-light .agent-directory,
.theme-light .audit-history,
.theme-light .workspace-inspector,
.theme-light .agent-side,
.theme-light .finding-detail { border-color: #c4c9d1; background: #f1f3f6; }
.theme-light .settings-card,
.theme-light .settings-provider,
.theme-light .workspace-inspector section,
.theme-light .agent-side section,
.theme-light .agent-instructions,
.theme-light .agent-task-composer,
.theme-light .agent-run-history,
.theme-light .finding-summary > div,
.theme-light .finding-row { border-color: #cfd5dd; background: #ffffff; box-shadow: 0 3px 10px rgba(30,39,51,.035); }
.theme-light .connection-toolbar { background: #ffffff; box-shadow: inset 0 0 0 1px #dce1e7; }
.theme-light .toolbar-select { border-color: #89939f; background: rgba(255,255,255,.42); color: #29313a; }
.theme-light .toolbar-select:hover,
.theme-light .toolbar-select[aria-expanded="true"] { border-color: #65717f; background: rgba(255,255,255,.72); }
.theme-light .workflow {
  border-color: #aeb6c1;
  background-color: #e4e8ee;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.theme-light .workflow-project { border-color: #8698c9; background: #d2dcf5; color: #26396f; }
.theme-light .agent-card { border-color: #abb3be; background: #f8f9fb; box-shadow: 0 4px 12px rgba(38,47,59,.055); }
.theme-light .agent-card.blue { border-color: #3e4d70; background: #526184; }
.theme-light .agent-card.green { border-color: #36594f; background: #486f63; }
.theme-light .agent-card.yellow { border-color: #685d36; background: #817344; }
.theme-light .agent-card.blue,
.theme-light .agent-card.green { color: #fff; }
.theme-light .agent-card.yellow { color: #fff; }
.theme-light .agent-card.blue .agent-title,
.theme-light .agent-card.green .agent-title,
.theme-light .agent-card.blue .agent-model,
.theme-light .agent-card.green .agent-model { color: #fff; }
.theme-light .agent-card.yellow .agent-title,
.theme-light .agent-card.yellow .agent-model { color: #fff; }
.theme-light .agent-card.blue .agent-model em { border-color: #35415f; background: #414f70; color: #fff; }
.theme-light .agent-card.green .agent-model em { border-color: #2f4e45; background: #385a50; color: #fff; }
.theme-light .agent-card.yellow .agent-model em { border-color: #5c522f; background: #6d6139; color: #fff; }
.theme-light .agent-card.blue .agent-menu { background: #3b4766; color: #fff; }
.theme-light .agent-card.green .agent-menu { background: #314f47; color: #fff; }
.theme-light .agent-card.yellow .agent-menu { background: #5f5532; color: #fff; }
.theme-light .agent-card.blue .provider-openai,
.theme-light .agent-card.green .provider-openai { filter: brightness(0) invert(1) opacity(.95); }
.theme-light .column-connector.workflow-branch-blue { stroke: #637194; }
.theme-light .column-node.workflow-branch-blue { fill: #637194; }
.theme-light .column-connector.workflow-branch-green { stroke: #557a6f; }
.theme-light .column-node.workflow-branch-green { fill: #557a6f; }
.theme-light .column-connector.workflow-branch-yellow { stroke: #8e814d; }
.theme-light .column-node.workflow-branch-yellow { fill: #8e814d; }
.theme-light .connections-side { background: #e9edf2; }
.theme-light .available-connections { border-color: #c4cbd4; background: #f7f8fa; box-shadow: 0 8px 24px rgba(31,40,52,.06); }
.theme-light .connected-panel-header > strong { border-color: #c7cdd5; background: #e9edf2; color: #303945; }
.theme-light .connected-panel-copy { color: #5e6976; }
.theme-light .provider-list { scrollbar-color: #a9b1bc transparent; }
.theme-light .provider-card { border-color: #cdd3db; background: #fff; box-shadow: 0 5px 15px rgba(31,40,52,.065); }
.theme-light .provider-card-header small,
.theme-light .provider-model-summary,
.theme-light .provider-model-summary em,
.theme-light .available-model small,
.theme-light .provider-model-more { color: #687482; }
.theme-light .provider-health { background: #eef1f4; }
.theme-light .provider-health > span,
.theme-light .provider-health button { color: #4e5966; }
.theme-light .available-model { border: 1px solid #dde2e8; background: #f1f4f7; color: #28313b; }
.theme-light .available-model:hover { border-color: var(--accent-ring); background: #fff; }
.theme-light .provider-remove { color: #a03d46; }
.theme-light .provider-remove:hover { color: #7f2931; }
.theme-light .add-connection-button { border-color: #bfc6d0; background: #e7ebf0; color: #2e3741; }
.theme-light .add-connection-button:hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 8%, var(--audit-panel)); }
.theme-light .subagent-popover { border-color: #bfc6d0; background: #fff; color: #252d36; box-shadow: 0 20px 50px rgba(31,40,52,.20); }
.theme-light .subagent-popover header button { color: #687481; }
.theme-light .subagent-popover header button:hover { background: #edf0f4; color: #222a33; }
.theme-light .subagent-popover label { color: #586471; }
.theme-light .subagent-popover input,
.theme-light .subagent-popover select { border-color: #c5ccd5; background: #f2f4f7; color: #242c35; }
.theme-light .zoom-control,
.theme-light .agent-inspector { border-color: #aab2bd; background: #f8f9fb; box-shadow: 0 7px 20px rgba(31,40,52,.10); }
.theme-light .modal,
.theme-light .page-menu,
.theme-light .project-popover,
.theme-light .workspace-popover { border-color: #bdc5cf; background: #fff; box-shadow: 0 18px 44px rgba(31,40,52,.18); }

/* Application-wide component standards */
.sidebar-project-list { display: grid; }
.sidebar-project-list .project-root { padding: 0 25px 0 36px; gap: 14px; border-radius: 0; }
.sidebar-project-list .project-root:hover,
.sidebar-project-list .project-root.selected { background: rgba(255,255,255,.08); color: var(--text); }
.sidebar-project-list .project-root > .ui-icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: var(--muted); }
.sidebar-project-empty { padding: 9px 36px 16px; color: var(--dim); font-size: var(--type-secondary); }
.theme-light .sidebar-project-list .project-root:hover,
.theme-light .sidebar-project-list .project-root.selected { background: #e8eaed; color: #181d24; }

.setting-status { min-height: 30px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: rgba(255,255,255,.045); color: var(--muted); font-size: var(--type-caption); font-weight: 540; white-space: nowrap; }
.setting-status.planned { border-style: dashed; color: var(--dim); }
.theme-light .setting-status { background: #eef1f4; color: #4b5662; }
.theme-light .setting-status.planned { background: #f5f6f8; color: #6d7783; }

.profile-menu .ui-icon { width: var(--icon-md); height: var(--icon-md); }

.modal-backdrop { animation: modal-backdrop-in var(--motion-fast) ease-out both; }
.modal { animation: modal-panel-in var(--motion-standard) var(--ease-emphasized) both; }
.page-menu,
.project-popover,
.workspace-popover { transform-origin: top left; animation: popover-in var(--motion-fast) var(--ease-emphasized) both; }
.project-popover > span { display: block; padding: 9px 10px; color: var(--dim); font-size: var(--type-caption); }
.workspace-popover button { display: flex; align-items: center; gap: 8px; }
.workspace-popover .ui-icon { width: var(--icon-sm); height: var(--icon-sm); }
.workflow.workflow-is-fullscreen { animation: workflow-expand-in var(--motion-standard) var(--ease-emphasized) both; }
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-panel-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes popover-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes workflow-expand-in { from { opacity: .75; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

/* Type scale: 17px navigation/body, 14px supporting copy, 12px metadata. */
.sidebar-nav button,
.project-root,
.project-child,
.chat-row,
.settings-rail nav button,
.setting-copy strong,
.setting-input,
.setting-dropdown-toggle,
.setting-dropdown-option,
.settings-textarea-label textarea { font-size: var(--type-body); }

.connected-panel-header h2,
.provider-card-header strong,
.connection-empty strong,
.agent-directory-item strong,
.agent-instructions p,
.agent-task-composer textarea,
.agent-run-history strong,
.agent-side h3,
.safeguard-row,
.audit-history strong,
.finding-row strong,
.finding-detail > p,
.finding-location,
.finding-actions button { font-size: var(--type-secondary); }

.connected-panel-header small,
.connected-panel-copy,
.provider-card-header small,
.provider-health > span,
.provider-health button,
.provider-model-summary,
.provider-model-summary em,
.available-model strong,
.available-model small,
.provider-model-more,
.provider-remove,
.agent-directory-head,
.agent-directory-item em,
.agent-detail-header em,
.agent-detail-header > button,
.agent-instructions > span,
.agent-task-composer label,
.agent-task-composer > div > span,
.agent-task-composer button,
.agent-run-history h3,
.agent-run-history em,
.agent-run-history small,
.agent-run-history article > button,
.agent-run-history > p,
.agent-side p,
.audit-history h3,
.audit-history em,
.audit-history b,
.audit-history > p,
.finding-summary span,
.finding-row em,
.finding-row small,
.finding-detail h3,
.finding-badge { font-size: var(--type-caption); }

.workspace-editor textarea { font-size: calc(17px * var(--code-scale-factor)); font-family: var(--font-code); }
.workspace-git pre,
.tool-request pre { font-family: var(--font-code); }

.window-frame.reduce-transparency .modal-backdrop { backdrop-filter: none; background: rgba(0,0,0,.72); }
.window-frame.reduce-transparency .subagent-popover,
.window-frame.reduce-transparency .page-menu,
.window-frame.reduce-transparency .project-popover,
.window-frame.reduce-transparency .workspace-popover { backdrop-filter: none; }
.application-shell.high-contrast,
.window-frame.high-contrast { --line: #7a7a7a; --line-soft: #5c5c5c; --muted: #d7d9de; --dim: #b7bbc4; }
.application-shell.theme-light.high-contrast,
.window-frame.theme-light.high-contrast { --line: #737b86; --line-soft: #a7afb9; --muted: #303943; --dim: #4e5965; }
/* Enhanced keyboard focus adds separation without thickening the blue stroke. */
.application-shell.enhanced-focus,
.window-frame.enhanced-focus { --focus-ring-offset: 2px; }
.window-frame.color-independent-status .status-dot.yellow { border-radius: 2px; transform: rotate(45deg) scale(.76); }
.window-frame.color-independent-status .status-dot.red { border-radius: 1px; }
.window-frame.color-independent-status .status-dot.green { border: 2px solid currentColor; }
.settings-diagnostics { padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); }
.settings-diagnostics summary { cursor: pointer; color: var(--text); }
.settings-diagnostics-list { margin-top: 12px; display: grid; gap: 6px; }
.settings-diagnostics-list p { display: flex; gap: 12px; justify-content: space-between; margin: 0; overflow-wrap: anywhere; color: var(--muted); }
.settings-diagnostics-list strong { color: var(--text); }

/* Developer and Work are first-class Omnesly surfaces. Developer owns code;
   Work owns documents and professional model conversations. */
.work-frame { grid-template-columns: 390px minmax(0, 1fr); }
.work-frame.sidebar-is-collapsed { grid-template-columns: 96px minmax(0, 1fr); }
.work-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 68px 1fr; background: var(--editor); }

.developer-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 10px;
}
.developer-editor-column { min-width: 0; min-height: 0; position: relative; }
.developer-assistant,
.work-assistant {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2a2a2a;
}
.work-assistant { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }
.developer-assistant > header,
.work-assistant > header {
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
}
.developer-assistant > header > span,
.work-assistant > header > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.developer-assistant > header .ui-icon,
.work-assistant > header .ui-icon { width: 20px; height: 20px; color: var(--muted); }
.developer-assistant > header span span,
.work-assistant > header span span { min-width: 0; display: grid; gap: 2px; }
.developer-assistant > header strong,
.work-assistant > header strong { color: var(--text); font-size: var(--type-body); font-weight: 560; }
.developer-assistant > header em,
.work-assistant > header em { overflow: hidden; color: var(--dim); font-size: var(--type-caption); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.assistant-scope { display: flex; gap: 8px; margin: 12px 12px 0; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.025); color: var(--dim); font-size: var(--type-caption); line-height: 1.45; }
.assistant-scope .ui-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.developer-tool-capabilities { min-height: 34px; display: flex; align-items: center; gap: 7px; margin: 10px 12px 0; color: var(--dim); font-size: var(--type-caption); }
.developer-tool-capabilities .ui-icon { width: 16px; height: 16px; }
.developer-tool-capabilities span { color: var(--muted); font-weight: 560; }
.developer-tool-capabilities em { overflow: hidden; margin-left: auto; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.developer-tool-feed { max-height: 235px; display: grid; gap: 7px; margin: 10px 12px 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #666666 transparent; }
.developer-tool-card { display: grid; gap: 7px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px; background: rgba(255,255,255,.025); }
.developer-tool-card.pending { border-color: var(--accent-ring); background: var(--accent-soft); }
.developer-tool-card.failed { border-color: rgba(255,93,101,.34); }
.developer-tool-card > div { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.developer-tool-card > div > span { min-width: 0; display: flex; align-items: flex-start; gap: 7px; }
.developer-tool-card > div > span > .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.developer-tool-card > div > span > span { min-width: 0; display: grid; gap: 3px; }
.developer-tool-card strong { overflow: hidden; color: var(--text); font-size: var(--type-caption); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.developer-tool-card code { overflow: hidden; color: var(--muted); font: 500 var(--type-caption)/1.35 var(--font-code); text-overflow: ellipsis; white-space: nowrap; }
.developer-tool-card > div > em { color: var(--dim); font-size: var(--type-caption); font-style: normal; text-transform: capitalize; white-space: nowrap; }
.developer-tool-card > p { margin: 0; color: var(--dim); font-size: var(--type-caption); line-height: 1.4; }
.developer-tool-card footer { display: flex; justify-content: flex-end; gap: 6px; }
.developer-tool-card footer button { min-height: 29px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; color: var(--muted); background: #373737; font-size: var(--type-caption); }
.developer-tool-card footer button.primary { border-color: var(--button-primary-bg); color: var(--button-primary-fg); background: var(--button-primary-bg); }
.developer-tool-card details { min-width: 0; color: var(--dim); font-size: var(--type-caption); }
.developer-tool-card summary { cursor: pointer; }
.developer-tool-card pre { max-height: 130px; margin: 7px 0 0; overflow: auto; border-radius: 6px; padding: 8px; color: var(--muted); background: #1d1d1d; font: 500 var(--type-caption)/1.45 var(--font-code); white-space: pre-wrap; }
.assistant-model-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.assistant-model-controls label { min-width: 0; display: grid; gap: 5px; color: var(--dim); font-size: var(--type-caption); }
.assistant-model-controls select {
  width: 100%; height: 34px; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 0 28px 0 9px; outline: none;
  color: var(--text); background: #373737; font: 500 var(--type-caption)/1 var(--font-ui);
}
.assistant-model-controls select:focus { border-color: var(--accent-ring); box-shadow: none; }
.assistant-connect { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #373737; font-size: var(--type-secondary); }
.assistant-connect .ui-icon { width: 18px; height: 18px; }
.assistant-transcript { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; scrollbar-width: thin; scrollbar-color: #666666 transparent; }
.assistant-empty { margin: auto 0; display: grid; justify-items: center; gap: 8px; padding: 22px 8px; color: var(--dim); text-align: center; }
.assistant-empty .ui-icon { width: 28px; height: 28px; }
.assistant-empty strong { color: var(--muted); font-size: var(--type-secondary); font-weight: 550; }
.assistant-empty span { max-width: 285px; font-size: var(--type-caption); line-height: 1.55; }
.assistant-message { max-width: 92%; display: grid; gap: 5px; border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 10px; background: rgba(255,255,255,.035); }
.assistant-message.user { align-self: flex-end; text-align: right; border-color: var(--accent-soft); background: var(--accent-soft); }
.assistant-message-heading { display: flex; align-items: center; gap: 10px; }
.assistant-message-heading strong { color: var(--muted); font-size: var(--type-caption); font-weight: 600; }
.assistant-message-heading strong:has(.provider-omnesly) { display: flex; align-items: center; gap: 7px; }
.assistant-message .provider-omnesly { width: var(--chat-avatar-size); height: var(--chat-avatar-size); object-fit: contain; }
.assistant-message > .assistant-message-content {
  margin: 0;
  color: var(--text);
  font-size: var(--type-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.assistant-message.assistant > .assistant-message-content { --assistant-markdown-gap: .65em; min-width: 0; }
.assistant-message.user > .assistant-message-content { white-space: pre-wrap; }
.assistant-error { margin: 0 12px 10px; border: 1px solid rgba(255,93,101,.35); border-radius: 8px; padding: 9px 10px; color: #ff9aa0; background: rgba(255,93,101,.08); font-size: var(--type-caption); line-height: 1.45; }
.assistant-quick-prompts { display: flex; gap: 6px; overflow: hidden; padding: 0 12px 9px; }
.assistant-quick-prompts button { min-width: 0; flex: 1; border: 1px solid var(--line-soft); border-radius: 7px; padding: 7px 8px; color: var(--muted); background: transparent; font-size: var(--type-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-quick-prompts button:hover { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.04); }
.assistant-composer { position: relative; padding: 0 12px 12px; }
.assistant-composer textarea { width: 100%; min-height: 82px; max-height: 170px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; padding: 10px 44px 10px 11px; outline: none; color: var(--text); background: #212121; font: 450 var(--type-secondary)/1.45 var(--font-ui); }
.assistant-composer textarea:focus { border-color: var(--accent-ring); box-shadow: none; }
.assistant-composer textarea::placeholder { color: var(--dim); }
.assistant-send { position: absolute; right: 20px; bottom: 20px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--button-primary-fg); background: var(--button-primary-bg); }
.assistant-send .ui-icon { width: 18px; height: 18px; }
.assistant-send:disabled { opacity: .35; cursor: not-allowed; }
.assistant-send.is-cancel { color: #fff; background: #b44950; }

.work-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: 310px minmax(520px, 1fr) 390px; gap: 10px; padding: 10px; }
.work-library,
.work-editor-shell,
.work-editor-empty {
  min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #2a2a2a;
}
.work-library { display: grid; grid-template-rows: 62px auto 1fr; }
.work-library > header { display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line-soft); }
.work-library > header span { display: grid; gap: 2px; }
.work-library > header strong { color: var(--text); font-size: var(--type-body); font-weight: 560; }
.work-library > header em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.work-library > label { height: 37px; display: flex; align-items: center; gap: 7px; margin: 11px 11px 5px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; color: var(--dim); background: #212121; }
.work-library > label:focus-within { border-color: var(--accent-ring); box-shadow: none; }
.work-library > label .ui-icon { width: 17px; height: 17px; }
.work-library > label input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font: 450 var(--type-secondary)/1 var(--font-ui); }
.work-document-list { min-height: 0; overflow: auto; padding: 6px 8px 10px; scrollbar-width: thin; scrollbar-color: #666666 transparent; }
.work-document-list > button { width: 100%; min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 8px; color: var(--muted); text-align: left; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.work-document-list > button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.work-document-list > button.active { border-color: var(--line); color: var(--text); background: #373737; }
.work-document-list > button > span { min-width: 0; display: flex; align-items: center; gap: 9px; }
.work-document-list > button .ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.work-document-list > button span span { min-width: 0; display: grid; gap: 4px; }
.work-document-list strong { overflow: hidden; font-size: var(--type-secondary); font-weight: 530; text-overflow: ellipsis; white-space: nowrap; }
.work-document-list em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.work-document-list b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-foreground); background: var(--accent-ui); font-size: var(--type-caption); }
.work-document-list > p { margin: 24px 10px; color: var(--dim); font-size: var(--type-secondary); }
.work-canvas { min-width: 0; min-height: 0; }
.work-editor-shell { height: 100%; display: flex; flex-direction: column; }
.work-document-head { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }
.work-document-head input { min-width: 100px; flex: 1; border: 0; outline: none; color: var(--text); background: transparent; font: 570 var(--type-heading)/1.2 var(--font-ui); }
.work-document-head button { min-height: 32px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; color: var(--muted); background: #373737; font-size: var(--type-caption); }
.work-document-head button:hover { color: var(--text); }
.work-document-head button .ui-icon { width: 16px; height: 16px; }
.work-document-head button.danger-quiet { color: #ef9297; }
.work-save-state { color: var(--dim); font-size: var(--type-caption); }
.work-save-state.saving { color: #d9bc75; }
.work-save-state.error { color: #ef9297; }
.work-suggestion-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 12px 0; border: 1px solid var(--accent-soft); border-radius: 9px; padding: 9px 10px; background: var(--accent-soft); animation: work-banner-in var(--motion-standard) var(--ease-emphasized) both; }
@keyframes work-banner-in { from { opacity: 0; transform: translateY(-7px); } }
.work-suggestion-banner > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.work-suggestion-banner > span .ui-icon { width: 18px; height: 18px; }
.work-suggestion-banner > span span { min-width: 0; display: grid; gap: 2px; }
.work-suggestion-banner strong { overflow: hidden; color: var(--text); font-size: var(--type-secondary); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.work-suggestion-banner em { color: var(--dim); font-size: var(--type-caption); font-style: normal; }
.work-suggestion-banner > div { display: flex; gap: 6px; }
.work-suggestion-banner button { min-height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--muted); background: #373737; font-size: var(--type-caption); }
.work-suggestion-banner button.primary { border-color: var(--button-primary-bg); color: var(--button-primary-fg); background: var(--button-primary-bg); }
.work-format-toolbar { min-width: 0; display: grid; grid-template-columns: repeat(3, 34px) auto auto auto 1fr auto; align-items: center; gap: 5px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }
.work-format-toolbar button { min-width: 32px; height: 31px; border-radius: 6px; padding: 0 8px; color: var(--muted); background: transparent; font-size: var(--type-caption); }
.work-format-toolbar button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.work-format-toolbar small { color: var(--dim); font-size: var(--type-caption); white-space: nowrap; }
.work-editor-area { min-height: 0; flex: 1; display: grid; grid-template-columns: 1fr; overflow: hidden; background: #212121; transition: grid-template-columns var(--motion-panel) var(--ease-emphasized); }
.work-editor-shell.is-previewing .work-editor-area { grid-template-columns: 1fr 1fr; }
#work-document-editor,
.work-suggestion-preview article { min-width: 0; min-height: 0; overflow: auto; padding: 52px clamp(38px, 6vw, 92px) 80px; outline: none; color: var(--text); background: #f7f5f0; color: #282a2f; font: 450 var(--type-body)/1.7 var(--font-ui); scrollbar-width: thin; scrollbar-color: #aeb2b8 transparent; }
#work-document-editor:empty::before { content: attr(data-placeholder); color: #9a9ca0; }
#work-document-editor h1, #work-document-editor h2, #work-document-editor h3,
.work-suggestion-preview h1, .work-suggestion-preview h2, .work-suggestion-preview h3 { margin: 1.2em 0 .55em; line-height: 1.25; }
#work-document-editor p, .work-suggestion-preview p { margin: 0 0 .9em; }
#work-document-editor blockquote, .work-suggestion-preview blockquote { margin: 1em 0; border-left: 3px solid #b7bbc2; padding-left: 18px; color: #5f646c; }
#work-document-editor a, .work-suggestion-preview a { color: #3e5ca9; }
.work-suggestion-preview { min-width: 0; min-height: 0; display: grid; grid-template-rows: 39px 1fr; overflow: hidden; border-left: 1px solid var(--line); animation: work-preview-in var(--motion-panel) var(--ease-emphasized) both; }
@keyframes work-preview-in { from { opacity: 0; transform: translateX(18px); } }
.work-suggestion-preview > header { display: flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--muted); background: #2f2f2f; font-size: var(--type-caption); }
.work-suggestion-preview > header .ui-icon { width: 16px; height: 16px; }
.work-suggestion-preview article { padding: 40px 44px 70px; }
.work-revisions { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; padding: 0 12px; border-top: 1px solid var(--line-soft); color: var(--dim); }
.work-revisions > span { display: flex; align-items: center; gap: 6px; margin-right: 3px; font-size: var(--type-caption); white-space: nowrap; }
.work-revisions .ui-icon { width: 16px; height: 16px; }
.work-revisions button { min-width: 0; border-radius: 6px; padding: 5px 7px; color: var(--dim); background: rgba(255,255,255,.035); font-size: var(--type-caption); white-space: nowrap; }
.work-revisions button:hover { color: var(--text); background: rgba(255,255,255,.07); }
.work-revisions em { font-size: var(--type-caption); font-style: normal; }
.work-editor-empty { height: 100%; display: grid; align-content: center; justify-items: center; gap: 10px; color: var(--dim); text-align: center; }
.work-editor-empty > .ui-icon { width: 40px; height: 40px; }
.work-editor-empty h2 { margin: 5px 0 0; color: var(--text); font-size: var(--type-heading); font-weight: 560; }
.work-editor-empty p { max-width: 410px; margin: 0; font-size: var(--type-secondary); line-height: 1.55; }
.work-editor-empty button { min-height: 38px; display: flex; align-items: center; gap: 7px; margin-top: 7px; border-radius: 8px; padding: 0 14px; color: var(--button-primary-fg); background: var(--button-primary-bg); font-size: var(--type-secondary); }
.work-editor-empty button .ui-icon { width: 17px; height: 17px; }

.theme-light .work-main { background: #e9edf2; }
.theme-light .developer-assistant,
.theme-light .work-assistant,
.theme-light .work-library,
.theme-light .work-editor-shell,
.theme-light .work-editor-empty { border-color: #c4c9d1; background: #f7f8fa; }
.theme-light .assistant-scope { background: #f0f2f5; }
.theme-light .developer-tool-card { border-color: #d6dbe2; background: #fff; }
.theme-light .developer-tool-card.pending { border-color: var(--accent-ring); background: var(--accent-soft); }
.theme-light .developer-tool-card footer button { border-color: #c4c9d1; color: #343c46; background: #eef1f4; }
.theme-light .developer-tool-card footer button.primary { border-color: var(--button-primary-bg); color: var(--button-primary-fg); background: var(--button-primary-bg); }
.theme-light .developer-tool-card pre { color: #343c46; background: #f0f2f5; }
.theme-light .assistant-model-controls select,
.theme-light .assistant-connect,
.theme-light .work-document-list > button.active,
.theme-light .work-document-head button,
.theme-light .work-suggestion-banner button { border-color: #c4c9d1; color: #343c46; background: #eef1f4; }
.theme-light .assistant-composer textarea,
.theme-light .work-library > label { border-color: #c4c9d1; color: #252a31; background: #fff; }
.theme-light .assistant-message { border-color: #d6dbe2; background: #fff; }
.theme-light .assistant-message.user { border-color: var(--accent-soft); background: var(--accent-soft); }
.theme-light .work-document-list > button:hover { background: #eef1f4; }
.theme-light .work-editor-area { background: #dfe3e8; }
.theme-light .work-suggestion-preview > header { color: #59636f; background: #edf0f4; }
.theme-light .work-revisions button { background: #edf0f4; }

/* Retain primary emphasis above the light-theme secondary-button rules. */
.theme-light .topbar-action.primary,
.theme-light .workspace-editor > header button.primary,
.theme-light .work-suggestion-banner button.primary,
.developer-host.theme-light .developer-review main > header button.primary,
.developer-host.theme-light .developer-git-drawer button.primary {
  border-color: var(--button-primary-bg);
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
}

@media (max-width: 1400px) {
  .developer-stage { grid-template-columns: minmax(0, 1fr) 340px; }
  .work-layout { grid-template-columns: 270px minmax(480px, 1fr) 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal, .page-menu, .project-popover, .workspace-popover, .workflow.workflow-is-fullscreen { animation: none; }
}

/* 2026 application-wide visual audit
   Fluid desktop frame, semi-compact spacing, Inter typography, and shared
   component dimensions. Keep this layer last so legacy page rules inherit the
   same product grammar while the older markup is progressively simplified. */
.application-shell,
.window-frame,
.topbar-overlay-exit-layer {
  --interface-scale: 1;
  /* Compact is the default density; see the spacing scheme near the end of
     this file for what each token sizes. */
  --density-row: 42px;
  --density-setting: 52px;
  --density-gap: 8px;
  /* Derived tokens belong on the same element as the user's scale values. */
  --type-body: 12px;
  --type-secondary: 12px;
  --type-caption: 12px;
  --type-heading: 12px;
  --nav-row-height: calc(var(--density-row) * var(--interface-scale));
  --setting-row-height: calc(var(--density-setting) * var(--interface-scale));
  --section-space: calc(var(--density-gap) * var(--interface-scale));
  --panel-gap: var(--section-space);
  --control-height: calc(38px * var(--interface-scale));
  --icon-sm: calc(14px * var(--interface-scale));
  --icon-md: calc(18px * var(--interface-scale));
  --icon-lg: calc(22px * var(--interface-scale));
  --chrome-control-size: calc(32px * var(--interface-scale));
  --topbar-surface: var(--audit-panel);
  --topbar-divider: var(--line);
  --sidebar-selection-height: calc(var(--nav-row-height) - 6px);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-ui);
}

.window-frame.theme-light {
  --topbar-surface: #fff;
  --topbar-divider: #c4c9d1;
}

:is(.application-shell, .window-frame, .topbar-overlay-exit-layer)[data-density="compact"] {
  --density-row: 42px;
  --density-setting: 52px;
  --density-gap: 8px;
}
:is(.application-shell, .window-frame, .topbar-overlay-exit-layer)[data-density="comfortable"] {
  --density-row: 46px;
  --density-setting: 62px;
  --density-gap: 10px;
}
:is(.application-shell, .window-frame, .topbar-overlay-exit-layer)[data-density="spacious"] {
  --density-row: 52px;
  --density-setting: 74px;
  --density-gap: 12px;
}

.connections-frame,
.cohorts-frame,
.settings-frame,
.home-frame,
.chat-frame,
.project-frame,
.workspace-frame,
.agents-frame,
.audit-center-frame,
.work-frame { grid-template-columns: 228px minmax(0, 1fr); }
.connections-frame.sidebar-is-collapsed,
.cohorts-frame.sidebar-is-collapsed,
.settings-frame.sidebar-is-collapsed,
.home-frame.sidebar-is-collapsed,
.chat-frame.sidebar-is-collapsed,
.project-frame.sidebar-is-collapsed,
.workspace-frame.sidebar-is-collapsed,
.agents-frame.sidebar-is-collapsed,
.audit-center-frame.sidebar-is-collapsed,
.work-frame.sidebar-is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.tools-frame { grid-template-columns: 228px minmax(0, 1fr); }
.chat-frame .chat-topbar { padding-block: 2px; }
.tools-frame.sidebar-is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }

/* Once the navigation would leave too little room for the shared composer,
   preserve the full page width and treat the sidebar as an overlay drawer. */
.window-frame.sidebar-is-responsive { grid-template-columns: minmax(0, 1fr); }
.sidebar-is-responsive > .sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 200;
  width: 228px;
  box-shadow: 16px 0 36px rgba(0, 0, 0, .22);
}
.sidebar-is-responsive.sidebar-is-collapsed > .sidebar { box-shadow: none; }
.theme-light.sidebar-is-responsive > .sidebar { box-shadow: 16px 0 36px rgba(33, 42, 55, .14); }
.theme-light.sidebar-is-responsive.sidebar-is-collapsed > .sidebar {
  border-right-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* The full-width top bar sits above the responsive navigation drawer, while
   its search field remains the first control allowed to contract. */
.settings-frame.sidebar-is-responsive:not(.sidebar-is-collapsed) .application-search-wrap { flex-shrink: 1; }

.sidebar {
  --sidebar-content-inset: max(10px, calc(var(--platform-sidebar-inset) - 6px));
  --sidebar-row-inset: max(4px, calc(var(--sidebar-content-inset) - 10px));
  --sidebar-row-padding: calc(var(--sidebar-content-inset) - var(--sidebar-row-inset));
  --sidebar-selection-height: max(26px, calc(var(--nav-row-height) - 12px));
  --sidebar-row-pitch: calc(var(--sidebar-selection-height) + 2px);
  --sidebar-nav-top: 6px;
  --more-motion-duration: 240ms;
  --more-motion-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--sidebar);
  border-right: 0;
}
.sidebar::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  pointer-events: none;
}
.theme-switch { left: auto; right: 57px; transform: scale(.88); transform-origin: center right; }
.sidebar-toggle { top: auto; right: 8px; bottom: var(--bottom-control-inset); left: auto; width: var(--chrome-control-size); height: var(--chrome-control-size); transition: right var(--sidebar-motion-duration) var(--sidebar-motion-ease), bottom var(--sidebar-motion-duration) var(--sidebar-motion-ease), color .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease; }
.sidebar-toggle .ui-icon { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.5; }
.sidebar-rule { left: var(--sidebar-content-inset); width: calc(100% - var(--sidebar-content-inset) - 20px); height: 1px; }
.primary-rule { top: calc(68px + var(--platform-sidebar-offset)); }
.sidebar-nav { left: var(--sidebar-row-inset); top: var(--sidebar-nav-top); width: calc(100% - var(--sidebar-row-inset) - 10px); }
.sidebar-nav button,
.project-root,
.project-child,
.chat-row { height: var(--nav-row-height); min-height: var(--nav-row-height); }
.sidebar-nav > button {
  height: var(--sidebar-selection-height);
  min-height: var(--sidebar-selection-height);
  margin-block: 1px;
}
.sidebar-nav button { gap: 11px; padding: 0 10px 0 var(--sidebar-row-padding); border-radius: 9px; font-weight: var(--font-weight-ui); }
.sidebar-nav button > span:last-child { order: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav .tree-chevron { margin: 0; width: var(--icon-md); height: var(--icon-md); flex-basis: var(--icon-md); }
.sidebar-nav .ui-icon { width: var(--icon-md); height: var(--icon-md); flex-basis: var(--icon-md); stroke-width: 1.5; }
.more-links { max-height: calc(2 * var(--sidebar-row-pitch)); opacity: 1; visibility: visible; transform: translateY(0); transition: none; }
.more-links.is-collapsed { max-height: 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: none; }
.sidebar.more-is-animating .more-links { transition: max-height var(--more-motion-duration) var(--more-motion-ease), opacity 180ms ease, transform var(--more-motion-duration) var(--more-motion-ease), visibility 0s; }
.sidebar.more-is-animating .more-links.is-collapsed { transition-delay: 0s, 0s, 0s, var(--more-motion-duration); }
.sidebar.more-is-animating .sidebar-scroll { transition: top var(--more-motion-duration) var(--more-motion-ease); }
.more-options-chevron { transition: transform var(--more-motion-duration) var(--more-motion-ease); }
.more-links button {
  height: var(--sidebar-selection-height);
  min-height: var(--sidebar-selection-height);
  margin-block: 1px;
  padding-left: var(--sidebar-row-padding);
  border-radius: 8px;
  font-size: var(--type-body);
}
.more-options-chevron { margin: 0 4px; }
/* Avoid a transform stacking context while open so the Chats toggle remains
   above the expanding search field. The collapsed sidebar still translates. */
.sidebar-scroll { top: calc(var(--sidebar-nav-top) + var(--sidebar-primary-rows, 4) * var(--sidebar-row-pitch) + 10px); bottom: 48px; transform: none; transition: opacity .2s ease .1s, transform var(--sidebar-motion-duration) var(--sidebar-motion-ease), visibility 0s linear; }
.sidebar-nav.more-is-open + .sidebar-scroll { top: calc(var(--sidebar-nav-top) + var(--sidebar-open-rows, 6) * var(--sidebar-row-pitch) + 10px); }
.sidebar-section-heading { height: 28px; padding: 0 calc(10px - (24px - 17px) / 2) 0 var(--sidebar-content-inset); }
/* The heading buttons' icons end where the project and chat rows below end
   (10px in from the side, which leaves room for a scrollbar). */
.sidebar-section-heading button { width: 24px; height: 24px; border-radius: 6px; }
.sidebar-section-heading h2,
.side-heading,
.sidebar-scroll h2 { font-size: var(--type-secondary); font-weight: 520; }
.project-rule + .sidebar-section-heading { margin-top: 8px; }
.chats-rule { left: var(--sidebar-content-inset); width: calc(100% - var(--sidebar-content-inset) - 20px); margin: 10px 0 6px; }
.sidebar-project-list .project-root { position: relative; padding: 0 10px 0 var(--sidebar-row-padding); gap: 8px; }
.chat-row { padding: 0 10px 0 var(--sidebar-row-padding); }
.sidebar-chat-search { height: 28px; }
.sidebar-chat-search.is-open { width: var(--sidebar-search-width, 210px); padding: 0 calc(var(--sidebar-search-collapsed-width, 30px) + 4px) 0 9px; }
.sidebar-chat-search input { font-size: var(--type-secondary); }
.project-root > .sidebar-item-name,
.chat-row > .sidebar-item-name {
  position: relative;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar-project-list .project-root > .sidebar-item-name,
.chat-row > .sidebar-item-name { order: 1; flex: 1; }
.sidebar-item-name-track {
  width: max-content;
  display: flex;
  align-items: center;
  will-change: transform;
}
.sidebar-item-name-copy { flex: 0 0 auto; }
.sidebar-item-name-clone { margin-left: 28px; }
.sidebar-item-name:not(.is-overflowing) .sidebar-item-name-clone { display: none; }
.sidebar-item-name.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.sidebar-item-name.is-overflowing:hover {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
}
.sidebar-item-name.is-overflowing:hover .sidebar-item-name-track {
  animation: sidebar-name-marquee var(--sidebar-marquee-duration, 6s) linear 1s infinite;
}
@keyframes sidebar-name-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--sidebar-marquee-distance))); }
}
.sidebar-project-list .project-root > .ui-icon { margin-left: 0; }
.sidebar-project-list .project-root > .ui-icon:first-child { order: 0; }
.chat-row > .ui-icon { margin-left: 0; }
.chat-row-spinner {
  order: 2;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: chat-row-spinner-rotate .75s linear infinite;
}
@keyframes chat-row-spinner-rotate { to { transform: rotate(360deg); } }
/* A reply in progress shows at the row's right edge, in the spot the "…"
   menu button takes on hover (the row keeps that space free). */
.sidebar-list-item > .chat-row > .chat-row-spinner {
  position: absolute;
  top: 50%;
  right: 19.5px;
  margin-top: -7px;
  transition: opacity 120ms ease;
}
.sidebar-list-item:is(:hover, :focus-within, .menu-is-open) > .chat-row > .chat-row-spinner { opacity: 0; }
.user-reduced-motion .chat-row-spinner,
.reduce-motion .chat-row-spinner { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .chat-row-spinner { animation: none; }
}
.sidebar-project-empty,
.sidebar-chat-empty { padding-inline: var(--sidebar-content-inset); }

.sidebar-project-list { width: 100%; min-width: 0; padding: 0; }
.sidebar-project-entry { min-width: 0; }
.sidebar-project-children { padding-bottom: 3px; }
.sidebar-project-children[hidden] { display: none; }
.sidebar-project-chat-empty {
  padding: 6px 10px 10px calc(var(--sidebar-content-inset) + 24px);
  color: var(--dim);
  font-size: var(--type-caption);
}
.sidebar-project-chat-item .chat-row {
  width: calc(100% - var(--sidebar-row-inset) - 34px);
  margin-left: calc(var(--sidebar-row-inset) + 24px);
}
.sidebar-project-list .project-root,
.chat-row {
  width: calc(100% - var(--sidebar-row-inset) - 10px);
  height: var(--sidebar-selection-height);
  min-height: var(--sidebar-selection-height);
  min-width: 0;
  margin: 1px 10px 1px var(--sidebar-row-inset);
  border-radius: 8px;
  padding-left: var(--sidebar-row-padding);
  overflow: hidden;
}
.sidebar-list-item {
  position: relative;
  width: 100%;
  min-width: 0;
}
.sidebar-list-item .project-root,
.sidebar-list-item .chat-row { padding-right: 37px; }
.sidebar-item-menu-trigger {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 14px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--sidebar) 90%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 120ms ease, visibility 0s linear 120ms, color 120ms ease, background-color 120ms ease;
}
.sidebar-item-menu-trigger .ui-icon { width: 17px; height: 17px; }
.sidebar-list-item:hover .sidebar-item-menu-trigger,
.sidebar-list-item:focus-within .sidebar-item-menu-trigger,
.sidebar-list-item.menu-is-open .sidebar-item-menu-trigger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.sidebar-item-menu-trigger:hover,
.sidebar-item-menu-trigger:focus-visible,
.sidebar-list-item.menu-is-open .sidebar-item-menu-trigger {
  color: var(--text);
  background: rgba(255,255,255,.11);
}
.sidebar-item-menu-trigger:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: var(--focus-ring-offset); }
.sidebar-item-pin-status { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); margin-left: auto !important; color: var(--dim); transition: opacity 100ms ease; }
.sidebar-list-item:hover .sidebar-item-pin-status,
.sidebar-list-item:focus-within .sidebar-item-pin-status,
.sidebar-list-item.menu-is-open .sidebar-item-pin-status { opacity: 0; }
.sidebar-item-menu {
  position: absolute;
  z-index: 120;
  width: 148px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  color: var(--text);
  background: color-mix(in srgb, var(--audit-panel) 95%, transparent);
  box-shadow: 0 16px 38px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transform-origin: top right;
  animation: sidebar-item-menu-in 140ms var(--ease-emphasized) both;
}
.sidebar-item-menu button {
  width: 100%;
  height: 31px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 7px;
  padding: 0 9px;
  color: var(--muted);
  text-align: left;
  font-size: var(--type-secondary);
}
.sidebar-item-menu button:hover,
.sidebar-item-menu button:focus-visible { outline: 0; color: var(--text); background: rgba(255,255,255,.08); }
.sidebar-item-menu button[aria-pressed="true"] { color: var(--text); }
.sidebar-item-menu button.danger { color: #ef9297; }
.sidebar-item-menu .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.sidebar-project-picker { width: 182px; }
.sidebar-project-picker-heading {
  height: 34px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  padding: 0 4px 4px 0;
  border-bottom: 1px solid var(--line);
}
.sidebar-project-picker-heading button { width: 28px; height: 28px; justify-content: center; padding: 0; }
.sidebar-project-picker-heading button .ui-icon { transform: rotate(180deg); }
.sidebar-project-picker-heading strong { overflow: hidden; font-size: var(--type-secondary); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-project-picker-list { max-height: 190px; overflow-y: auto; padding-top: 4px; scrollbar-width: thin; scrollbar-color: #858c98 transparent; }
.sidebar-project-picker-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-project-picker-list button[aria-current="true"] { color: var(--text); background: rgba(255,255,255,.08); }
.sidebar-project-picker-list p { margin: 8px; color: var(--dim); font-size: var(--type-caption); }
@keyframes sidebar-item-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.theme-light .sidebar-item-menu-trigger { background: color-mix(in srgb, #eef0f3 92%, transparent); }
.theme-light .sidebar-item-menu-trigger:hover,
.theme-light .sidebar-item-menu-trigger:focus-visible,
.theme-light .sidebar-list-item.menu-is-open .sidebar-item-menu-trigger { background: #d5dae2; }
.theme-light .sidebar-item-menu { border-color: #c4c9d1; color: #222830; background: rgba(255,255,255,.96); box-shadow: 0 16px 34px rgba(37,44,55,.2); }
.theme-light .sidebar-item-menu button { color: #58626e; }
.theme-light .sidebar-item-menu button:hover,
.theme-light .sidebar-item-menu button:focus-visible,
.theme-light .sidebar-item-menu button[aria-pressed="true"] { color: #1e252d; background: #e9edf2; }
.theme-light .sidebar-item-menu button.danger { color: #b33c46; }
.sidebar-list-item:hover > .chat-row,
.sidebar-list-item:focus-within > .chat-row,
.sidebar-list-item.menu-is-open > .chat-row,
.chat-row.selected { background: rgba(255,255,255,.08); color: var(--text); }
.theme-light .sidebar-list-item:hover > .chat-row,
.theme-light .sidebar-list-item:focus-within > .chat-row,
.theme-light .sidebar-list-item.menu-is-open > .chat-row,
.theme-light .chat-row.selected { background: #e8eaed; color: #181d24; }

.profile-popover-backdrop,
.help-popover-backdrop { position: absolute; z-index: 500; inset: 0; background: transparent; }
.help-popover {
  position: absolute;
  bottom: calc(var(--application-profile-bottom-inset) + 30px + 8px);
  left: var(--application-sidebar-width);
  width: min(238px, calc(100vw - var(--application-sidebar-width) - 12px));
  max-height: calc(100dvh - var(--topbar-height) - var(--application-profile-bottom-inset) - 52px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: #2e2e2e;
  box-shadow: 0 16px 42px rgba(0,0,0,.34);
}
.help-popover h2 {
  margin: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
}
.help-popover nav { display: grid; gap: 2px; }
.help-popover nav a { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 0 8px; border-radius: 8px; color: var(--text); font-size: var(--type-secondary); text-decoration: none; }
.help-popover nav a span { flex: 1; }
.help-popover nav a .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.help-popover nav a:is(:hover, :focus-visible) { outline: none; background: color-mix(in srgb, var(--text) 8%, transparent); }
.help-popover nav a:is(:hover, :focus-visible) .ui-icon { color: var(--text); }
.theme-light .help-popover { border-color: #c8ccd3; background: #fff; box-shadow: 0 16px 42px rgba(38,45,56,.18); }
.profile-popover {
  position: absolute;
  top: auto;
  right: auto;
  bottom: var(--application-profile-bottom-inset);
  left: var(--application-sidebar-width);
  width: min(220px, calc(100vw - var(--application-sidebar-width) - 12px));
  max-height: calc(100dvh - var(--topbar-height) - var(--application-profile-bottom-inset) - 12px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: #2e2e2e;
  box-shadow: 0 16px 42px rgba(0,0,0,.34);
}
.profile-popover > header { padding-bottom: 3px; border-bottom: 1px solid var(--line-soft); }
.profile-account-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 6px 8px; border-radius: 8px; text-align: left; transition: background 160ms ease; }
.profile-account-toggle strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--type-body); font-weight: 520; }
.profile-avatar { width: 30px; height: 30px; flex: 0 0 30px; }
.profile-popover-arrow { width: 18px; height: 18px; flex: 0 0 18px; color: var(--dim); }
.profile-account-options { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 240ms cubic-bezier(.22,1,.36,1), opacity 180ms ease; }
.profile-account-options[data-expanded="true"] { grid-template-rows: 1fr; opacity: 1; }
.profile-account-options-inner { min-height: 0; max-height: min(280px, 45dvh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.profile-saved-account { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 4px; padding: 5px 8px; border-radius: 8px; text-align: left; }
.profile-saved-account .profile-avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
.profile-saved-account-copy { display: grid; min-width: 0; gap: 2px; }
.profile-saved-account-copy strong, .profile-saved-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-saved-account-copy strong { color: var(--text); font-size: var(--type-body); font-weight: 520; }
.profile-saved-account-copy small { color: var(--dim); font-size: var(--type-caption); }
.profile-add-account { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin-top: 4px; padding: 0 8px; border-radius: 8px; text-align: left; transform: translateY(-4px); transition: background 160ms ease, transform 240ms cubic-bezier(.22,1,.36,1); }
.profile-account-options[data-expanded="true"] .profile-add-account { transform: translateY(0); }
.profile-add-account > span { flex: 1; }
.profile-add-account .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--dim); }
.profile-account-toggle:hover, .profile-saved-account:hover, .profile-add-account:hover { background: rgba(255,255,255,.07); }
.theme-light .profile-account-toggle:hover, .theme-light .profile-saved-account:hover, .theme-light .profile-add-account:hover { background: #e6e9ee; }
.profile-account-toggle:focus-visible, .profile-saved-account:focus-visible, .profile-add-account:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: -1px; }
.account-sign-in-dialog { max-width: calc(100vw - 32px); }
.account-sign-in-form .account-sign-in-notice { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--dim); }
.account-sign-in-form [hidden] { display: none; }
.profile-popover .profile-menu { gap: 2px; padding-top: 5px; }
.profile-popover .profile-menu button { width: 100%; height: 36px; padding-inline: 8px; font-size: var(--type-secondary); }
.profile-popover .profile-menu button > span { flex: 1; }
.profile-popover .profile-menu .profile-theme-control { border: 0; outline: none; box-shadow: none; }
.profile-popover .profile-menu .profile-theme-control:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
/* The theme switch uses the Liquid Glass switch from glisse (MIT, (c) 2026
   Kelvin Zhang, https://glisse.kelvinzhang.com), as on the Omnesly website's
   account page: its track, white glass knob and sizing at scale 0.3, with
   the Omnesly blue when on. Pressing it lifts the knob into clear glass. */
.glass-switch {
  display: block;
  --lg-scale: 0.3;
  --lg-track: rgb(235 235 245 / 0.3);
  --lg-on: #228be6;
  position: relative;
  flex: none;
  width: calc(160px * var(--lg-scale));
  height: calc(67px * var(--lg-scale));
  border-radius: 999px;
}
.theme-light .glass-switch { --lg-track: rgb(59 59 66 / 0.3); --lg-on: #1c7ed6; }
.profile-popover .profile-menu .profile-theme-control > .glass-switch { flex: none; }
/* Sun left of the Theme switch, moon right of it: the side the knob sits on
   is the mode in use, and that icon is the brighter one. */
.profile-popover .profile-menu .profile-theme-control > .profile-theme-mode { flex: none; width: 14px; height: 14px; color: var(--dim); opacity: .6; transition: opacity .2s ease, color .2s ease; }
.profile-popover .profile-menu .profile-theme-control > .profile-theme-sun { margin-right: -4px; }
.profile-popover .profile-menu .profile-theme-control > .profile-theme-moon { margin-left: -4px; margin-right: 6px; }
.profile-popover .profile-menu .profile-theme-control[aria-checked='true'] > .profile-theme-moon,
.profile-popover .profile-menu .profile-theme-control[aria-checked='false'] > .profile-theme-sun { color: var(--text); opacity: 1; }
.glass-switch-track,
.glass-switch-fill { position: absolute; inset: 0; border-radius: 999px; }
.glass-switch-track { background: var(--lg-track); }
.glass-switch-fill { background: var(--lg-on); opacity: 0; transition: opacity 200ms ease; }
.glass-switch-thumb {
  position: absolute;
  top: 50%;
  left: calc(-21.95px * var(--lg-scale));
  width: calc(146px * var(--lg-scale));
  height: calc(92px * var(--lg-scale));
  border-radius: 999px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px) brightness(1.15) saturate(1.5);
  backdrop-filter: blur(2px) brightness(1.15) saturate(1.5);
  box-shadow:
    0 6px 24px rgb(0 0 0 / 0.2),
    inset 0 0 0 1.5px rgb(255 255 255 / 0.5),
    inset 0 2px 1px rgb(255 255 255 / 0.45),
    inset 2px 7px 24px rgb(0 0 0 / 0.09),
    inset -2px -7px 24px rgb(255 255 255 / 0.16);
  transform: translate(0, -50%) scale(0.65);
  transition: transform 380ms cubic-bezier(.3, 1.35, .5, 1);
}
.glass-switch-face { position: absolute; inset: 0; border-radius: inherit; background: #fff; transition: opacity 160ms ease; }
/* Settings switches use the same glass switch; the button is just its frame. */
.setting-switch { position: relative; flex: none; width: 48px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.setting-switch::before { content: ""; position: absolute; inset: -12px -8px; }
.setting-switch:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; }
.setting-switch:disabled { opacity: .35; cursor: default; }
.setting-switch[aria-checked='true'] .glass-switch-fill { opacity: 1; }
.setting-switch[aria-checked='true'] .glass-switch-thumb { transform: translate(calc(57.9px * var(--lg-scale)), -50%) scale(0.65); }
.setting-switch:active:not(:disabled) .glass-switch-thumb { transform: translate(calc(28.95px * var(--lg-scale)), -50%) scale(0.9); }
.setting-switch:active:not(:disabled) .glass-switch-face { opacity: 0; }
.profile-theme-control[aria-checked='true'] .glass-switch-fill { opacity: 1; }
.profile-theme-control[aria-checked='true'] .glass-switch-thumb { transform: translate(calc(57.9px * var(--lg-scale)), -50%) scale(0.65); }
.profile-theme-control:active .glass-switch-thumb { transform: translate(calc(28.95px * var(--lg-scale)), -50%) scale(0.9); }
.profile-theme-control:active .glass-switch-face { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .glass-switch-thumb, .glass-switch-fill, .glass-switch-face { transition: none; }
}
.theme-light .profile-popover { border-color: #c8ccd3; background: #fff; box-shadow: 0 16px 42px rgba(38,45,56,.18); }
.theme-light .profile-popover .profile-menu button:hover { background: #e6e9ee; color: #2e333a; }

/* Three explicit navigation views. When collapsed, the view button moves to
   the fixed sidebar; the left-edge drag gesture remains an optional shortcut. */
/* Let navigation flyouts and the recovery edge sit above persistent editor
   hosts, which live outside #app. Canvas scaling is fixed to 1 app-wide. */
#app:has(.sidebar-is-partial, .sidebar-is-collapsed, .sidebar-is-revealing, .sidebar-is-responsive):not(.developer-modal-open) { z-index: auto; }
#app:has(.sidebar-is-partial, .sidebar-is-collapsed, .sidebar-is-revealing, .sidebar-is-responsive) .design-canvas { transform: none; }
.sidebar-is-collapsed > .sidebar { visibility: hidden; pointer-events: none; }
.sidebar-is-collapsed > .sidebar::after { opacity: 0; }
.sidebar-is-collapsed .sidebar > * { visibility: hidden; pointer-events: none; }
.window-frame.sidebar-is-partial { grid-template-columns: 48px minmax(0, 1fr); }
.sidebar-is-partial > .sidebar { overflow: visible; z-index: 201; }
.sidebar-is-partial .sidebar-scroll,
.sidebar-is-partial .sidebar-chat-search { display: none; }
.sidebar-is-partial .sidebar-nav { top: var(--sidebar-nav-top); left: 6px; width: 36px; }
.sidebar-is-partial .sidebar-nav > button { width: 36px; padding-inline: 0; justify-content: center; }
.sidebar-is-partial .sidebar-nav > button > span:last-child { display: none; }
.sidebar-is-partial .sidebar-toggle { right: 8px; }
/* More Options stays useful as a flyout without expanding the icon rail. */
.sidebar-is-partial .more-links {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  width: 180px;
  max-height: none;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--audit-panel);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.sidebar-is-partial .more-links.is-collapsed { pointer-events: none; }
.sidebar-view-menu {
  position: absolute;
  z-index: 250;
  width: 132px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--audit-panel);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px) scale(.98);
  transform-origin: bottom right;
  transition: opacity 100ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.sidebar-view-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 140ms ease, transform 180ms cubic-bezier(.22,1,.36,1), visibility 0s; }
.sidebar-view-heading,
.help-popover h2 { padding: 2px 6px 4px; color: var(--dim); font-weight: 500; }
.sidebar-view-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 24px; padding: 3px 6px; border: 0; border-radius: 5px; background: transparent; color: inherit; text-align: left; }
.sidebar-view-menu button span { flex: 1; }
.sidebar-view-menu button .ui-icon { width: 14px; height: 14px; opacity: 0; }
.sidebar-view-menu button[aria-checked="true"] .ui-icon { opacity: 1; }
.sidebar-view-menu button:hover,
.sidebar-view-menu button:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); outline: none; }
.sidebar-edge-handle {
  position: absolute;
  z-index: 220;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  cursor: ew-resize;
  touch-action: none;
  -webkit-app-region: no-drag;
}
.sidebar-edge-handle[hidden] { display: none; }
.sidebar-edge-handle::after { content: ''; position: absolute; inset: 12px auto 12px 2px; width: 2px; border-radius: 2px; background: var(--dim); opacity: 0; transition: opacity 120ms ease; }
.sidebar-edge-handle:hover::after,
.sidebar-edge-handle:focus-visible::after { opacity: .65; }
.sidebar-edge-handle:focus-visible { outline: none; }
.window-frame.sidebar-is-revealing { grid-template-columns: minmax(0, 1fr); }
.sidebar-is-revealing > .sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 201;
  width: 228px;
  transform: translateX(calc(var(--sidebar-reveal-width, 0px) - 228px));
  transition: none;
  pointer-events: none;
  box-shadow: 16px 0 36px rgba(0,0,0,.14);
}
.sidebar-is-revealing { user-select: none; cursor: ew-resize; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-view-menu, .sidebar-edge-handle::after { transition: none; }
}
.user-reduced-motion .sidebar-view-menu,
.user-reduced-motion .sidebar-edge-handle::after { transition: none; }
.sidebar-is-collapsed .page-title,
.sidebar-is-collapsed .settings-topbar,
.sidebar-is-collapsed .chat-topbar,
.sidebar-is-collapsed .project-topbar,
.sidebar-is-collapsed .product-topbar,
.sidebar-is-collapsed .workspace-blackbar { padding-left: 10px; }

/* On macOS the page identity begins after the traffic lights when the sidebar
   is closed. The sidebar control stays at the bottom edge of the window. */
html[data-platform="macos"][data-desktop="true"] .sidebar-is-collapsed .page-title,
html[data-platform="macos"][data-desktop="true"] .sidebar-is-collapsed .settings-topbar,
html[data-platform="macos"][data-desktop="true"] .sidebar-is-collapsed .chat-topbar,
html[data-platform="macos"][data-desktop="true"] .sidebar-is-collapsed .project-topbar,
html[data-platform="macos"][data-desktop="true"] .sidebar-is-collapsed .product-topbar,
html[data-platform="macos"][data-desktop="true"] .sidebar-is-collapsed .workspace-blackbar { padding-left: 84px; }

.page-title,
.workspace-blackbar,
.settings-topbar,
.chat-topbar,
.project-topbar,
.product-topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
}
.page-title,
.workspace-blackbar,
.settings-topbar,
.chat-topbar,
.project-topbar,
.product-topbar { transition: padding-left var(--sidebar-motion-duration) var(--sidebar-motion-ease); }
.workspace-blackbar,
.settings-topbar,
.chat-topbar,
.project-topbar,
.product-topbar {
  z-index: 230;
  width: 100vw;
  margin-left: calc(100% - 100vw);
  padding-left: 10px;
}
html[data-platform="macos"][data-desktop="true"] :is(.workspace-blackbar, .settings-topbar, .chat-topbar, .project-topbar, .product-topbar) {
  padding-left: 84px;
}
.workspace-blackbar,
.settings-topbar,
.chat-topbar,
.project-topbar,
.product-topbar { padding-right: 46px; }
.topbar-profile-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 9px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.workspace-blackbar > button.topbar-profile-button,
.settings-topbar > button.topbar-profile-button,
.chat-topbar > button.topbar-profile-button,
.project-topbar > button.topbar-profile-button,
.product-topbar > button.topbar-profile-button { position: absolute; }
.topbar-profile-button:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--audit-panel) 82%, white 8%);
  transform: translateY(-50%) scale(1.04);
}
.topbar-profile-button:active { transform: translateY(-50%) scale(.96); }
.topbar-profile-button:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: var(--focus-ring-offset); }
.topbar-profile-button .profile-avatar { width: 26px; height: 26px; flex: 0 0 26px; }
.topbar-context-cluster {
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  /* Activity and Chat sit 12px after the back and forward arrows on every
     page, whatever spacing that page's top bar uses between its items. */
  margin-left: calc(12px - var(--topbar-gap, 12px));
  order: -3;
}
.topbar-history { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; order: -4; }
.topbar-history > .topbar-context-divider { margin-left: 8px; }
.topbar-history button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 6px; background: transparent; }
.topbar-history button > .ui-icon { width: 18px; height: 18px; }
.topbar-history button:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.application-shell.theme-dark .topbar-history button { color: #fff; }
.application-shell.theme-light .topbar-history button { color: #000; }
.topbar-history button:disabled { opacity: 1; cursor: default; }
.session-activity-dropdown {
  position: relative;
  z-index: 95;
  width: max-content;
  height: 30px;
  flex: 0 0 auto;
}
.topbar-context-divider {
  width: 1px;
  height: 18px;
  flex: 0 0 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}
.session-activity-toggle {
  width: max-content;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px 0 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.session-activity-toggle > span { overflow: hidden; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.session-activity-toggle > .ui-icon { width: 15px; height: 15px; color: var(--text); }
.session-activity-toggle:hover { border-color: var(--line); background: color-mix(in srgb, var(--audit-panel) 84%, white 7%); }
.session-activity-toggle:focus-visible,
.session-activity-dropdown.is-open .session-activity-toggle { border-color: var(--line); outline: 0; background: color-mix(in srgb, var(--audit-panel) 84%, white 7%); box-shadow: none; }
.session-activity-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  width: 318px;
  max-height: min(390px, calc(100vh - var(--topbar-height) - 20px));
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--audit-panel) 97%, black 3%);
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.session-activity-menu > header { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 5px 9px 7px; border-bottom: 1px solid var(--line-soft); }
.session-activity-menu > header strong { color: var(--text); font-weight: 580; }
.session-activity-menu > header small { margin-left: auto; color: var(--dim); }
.session-activity-row {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  transition: background-color .14s ease, transform .14s ease;
}
.session-activity-row:hover,
.session-activity-row:focus-visible { outline: 0; background: color-mix(in srgb, var(--audit-panel) 70%, white 10%); }
.session-activity-row:active { transform: scale(.99); }
.session-activity-row > span:not(.session-activity-spinner) { min-width: 0; display: grid; gap: 2px; }
.session-activity-row strong { overflow: hidden; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.session-activity-row small { color: var(--dim); }
.session-activity-row > .ui-icon { width: 17px; height: 17px; justify-self: end; }
.session-activity-row:has(.status-dot.green) > .ui-icon { color: var(--green); }
.session-activity-row:has(.status-dot.red) > .ui-icon { color: var(--red); }
.session-activity-spinner { width: 16px; height: 16px; justify-self: end; border: 2px solid color-mix(in srgb, var(--yellow) 25%, var(--line)); border-top-color: var(--yellow); border-radius: 50%; animation: session-activity-spin .78s linear infinite; }
@keyframes session-activity-spin { to { transform: rotate(360deg); } }
.session-activity-empty { min-height: 150px; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 22px; color: var(--dim); text-align: center; }
.session-activity-empty .session-activity-empty-icon { width: 38px; height: 38px; color: var(--muted); }
.session-activity-empty p { max-width: 238px; margin: 0; line-height: 1.5; }
.theme-light .session-activity-toggle { background: transparent; box-shadow: none; }
.theme-light .session-activity-toggle:hover { background: #eceff3; }
.theme-light .session-activity-toggle:focus-visible,
.theme-light .session-activity-dropdown.is-open .session-activity-toggle { background: #eceff3; }
.theme-light .session-activity-menu { border-color: #c8ccd3; background: #fff; box-shadow: 0 18px 42px rgba(38,45,56,.18); }
.theme-light .session-activity-row:hover,
.theme-light .session-activity-row:focus-visible { background: #edf0f4; }
.workspace-context-switcher {
  position: relative;
  height: 30px;
  width: max-content;
  min-width: 0;
  flex: 0 0 auto;
  z-index: 90;
}
.workspace-context-toggle {
  width: max-content;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.workspace-context-toggle > span { overflow: hidden; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context-toggle > .ui-icon:last-child { width: 15px; height: 15px; color: var(--text); }
.workspace-context-toggle:hover { border-color: var(--line); background: color-mix(in srgb, var(--audit-panel) 84%, white 7%); }
.workspace-context-toggle:focus-visible,
.workspace-context-switcher.is-open .workspace-context-toggle { border-color: var(--line); outline: 0; background: color-mix(in srgb, var(--audit-panel) 84%, white 7%); box-shadow: none; }
.workspace-context-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  width: 238px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--audit-panel) 97%, black 3%);
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
}
.workspace-context-option {
  min-height: 49px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  transition: background-color .14s ease, transform .14s ease;
}
.workspace-context-option:hover,
.workspace-context-option:focus-visible { outline: 0; background: color-mix(in srgb, var(--audit-panel) 70%, white 10%); }
.workspace-context-option:active { transform: scale(.985); }
.workspace-context-option > .ui-icon:first-child { width: 18px; height: 18px; padding: 0; border-radius: 0; background: transparent; color: var(--text); }
.workspace-context-option > span { min-width: 0; display: grid; gap: 2px; }
.workspace-context-option strong { font-weight: 580; }
.workspace-context-option small { overflow: hidden; color: var(--muted); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.workspace-context-option > .ui-icon:last-child { width: 15px; height: 15px; color: var(--text); }
.workspace-context-option.is-selected { background: color-mix(in srgb, var(--audit-panel) 88%, white 12%); }
.theme-light .workspace-context-toggle { background: transparent; box-shadow: none; }
.theme-light .workspace-context-toggle:hover { background: #eceff3; }
.theme-light .workspace-context-toggle:focus-visible,
.theme-light .workspace-context-switcher.is-open .workspace-context-toggle { background: #eceff3; }
.theme-light .workspace-context-menu { border-color: #c8ccd3; background: #fff; box-shadow: 0 18px 42px rgba(38,45,56,.18); }
.theme-light .workspace-context-option:hover,
.theme-light .workspace-context-option:focus-visible { background: #edf0f4; }
.theme-light .workspace-context-option.is-selected { background: #e4e7eb; }
.session-activity-menu,
.workspace-context-menu,
.application-search-results.is-open,
.help-popover,
.profile-popover {
  animation: topbar-overlay-in 220ms cubic-bezier(.16, 1, .3, 1) both;
  will-change: opacity, transform;
}
.session-activity-menu,
.workspace-context-menu { transform-origin: top left; }
.application-search-results.is-open { transform-origin: top center; }
.profile-popover,
.help-popover { transform-origin: bottom left; }
@keyframes topbar-overlay-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.topbar-overlay-exit-layer {
  position: fixed;
  z-index: 1200;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.topbar-overlay-exit-layer .topbar-overlay-exit {
  overflow: hidden;
  animation: topbar-overlay-in 220ms cubic-bezier(.16, 1, .3, 1) reverse both;
  pointer-events: none;
}
.topbar-overlay-exit-layer .topbar-overlay-exit:is(.session-activity-menu, .workspace-context-menu) {
  animation-duration: 130ms;
}
.topbar-overlay-exit-source,
.application-search-results.is-exit-source {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
.application-search-wrap { margin-left: auto; order: 2; }
@media (max-width: 520px) {
  .topbar-context-cluster { gap: 4px; }
  .application-search-wrap { min-width: 26px; }
  .workspace-blackbar,
  .settings-topbar,
  .chat-topbar,
  .project-topbar,
  .product-topbar { --topbar-gap: 8px; gap: var(--topbar-gap); }
}
.chat-workspace,
.project-main,
.workspace-main,
.agents-main,
.audit-center-main,
.work-main { grid-template-rows: var(--topbar-height) minmax(0, 1fr); }
.page-title { width: 320px; padding-inline: 20px; }
.connection-main-black { left: 320px; height: var(--topbar-height); }
.connection-content { inset: var(--topbar-height) 0 0; padding: 6px 10px 10px; }
.connections-main > .page-title h1,
.settings-title h1,
.product-title h1,
.chat-title-block strong { font-size: var(--type-body); font-weight: 480; }
.page-title-icon .ui-icon,
.settings-title > .ui-icon,
.product-title > .ui-icon,
.chat-title-block > .ui-icon { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.5; }
.connections-main > .page-title .page-title-icon .ui-icon { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.5; }
.settings-title { min-width: 112px; gap: 9px; }
.settings-title h1 { letter-spacing: 0; }
.application-search-wrap,
.application-search { height: 26px; }
.application-search-toggle .ui-icon { width: var(--icon-sm); height: var(--icon-sm); }
.application-search input { font-size: var(--type-secondary); }
.circle-menu { width: var(--chrome-control-size); height: var(--chrome-control-size); }
.circle-menu .ui-icon { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.5; }
.connections-main > .page-title .circle-menu { width: var(--chrome-control-size); height: var(--chrome-control-size); }
.connections-main > .page-title .circle-menu .ui-icon { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.5; }
.product-topbar { justify-content: flex-start; --topbar-gap: 12px; gap: var(--topbar-gap); }
.product-topbar > .product-title { margin-right: auto; }
.product-topbar > .topbar-action { margin-left: 0; }

.connection-toolbar {
  min-height: 46px;
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 8px;
  padding: 6px;
  border-radius: 10px;
}
.toolbar-select { width: auto; min-width: 0; height: 34px; border-width: 1px; border-radius: 8px; font-size: var(--type-secondary); }
.toolbar-select > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-select.add-subagent { width: auto; }
.toolbar-select .ui-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 1.5; }
.subagent-popover { left: min(188px, calc(100% - 324px)); }
.workflow { left: 10px; right: 10px; top: 56px; bottom: 10px; border-width: 1px; border-radius: 11px; }
.graph-layer {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 1076px;
  height: 1042px;
  transform: translate(-50%, -50%) scale(var(--graph-fit-scale, var(--graph-scale)));
  transform-origin: center;
  transition: transform var(--motion-standard) var(--ease-standard);
}

.window-frame button,
.window-frame input,
.window-frame select,
.window-frame textarea {
  font-family: var(--font-ui);
}

.window-frame :is(button, input, select, textarea) { font-weight: var(--font-weight-ui); }
.window-frame textarea { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.window-frame textarea::-webkit-scrollbar { width: 7px; height: 7px; background: transparent; }
.window-frame textarea::-webkit-scrollbar-track,
.window-frame textarea::-webkit-scrollbar-corner { background: transparent; }
.window-frame textarea::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 8px; }

.window-frame pre,
.window-frame code,
.workspace-editor textarea {
  font-family: var(--font-code);
}
.available-connections { inset: calc(var(--topbar-height) + 12px) 10px 10px; gap: var(--section-space); padding: 16px; border-radius: 12px; }
.provider-list { gap: var(--section-space); overflow-x: hidden; }
.provider-card { min-width: 0; padding: 13px; border-radius: 10px; }
.available-model,
.available-model > span { min-width: 0; }
.agent-card { border-radius: 11px; }

.settings-layout { inset: var(--topbar-height) 0 0; }
.sidebar.settings-rail { display: grid; grid-template-rows: minmax(0, 1fr); padding-top: 5px; overflow: hidden; border-right: 0; }
.settings-account { height: 70px; gap: 10px; padding-inline: 12px; }
.settings-account > div { width: 34px; height: 34px; flex-basis: 34px; }
.settings-rail nav { min-height: 0; overflow-y: auto; padding: 0 8px 9px 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.settings-rail nav button { height: calc(var(--nav-row-height) - 4px); margin-block: 2px; grid-template-columns: 21px minmax(0, 1fr) 15px; gap: 9px; padding: 0 10px 0 6px; border-radius: 8px; font-weight: var(--font-weight-ui); }
.settings-rail nav button > .ui-icon:first-child { width: var(--icon-md); height: var(--icon-md); }
.settings-rail nav button > .ui-icon:last-child { width: var(--icon-sm); height: var(--icon-sm); }
.settings-rail nav button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The menu icons line up with the account avatar above them, and the list
   ends with the same full-width line that sits under the account. */
.settings-rail nav::after { content: ""; display: block; height: 1px; margin: 9px -8px 0 -6px; background: #3a3a3a; }
.theme-light .settings-rail nav::after { background: #d4d7dd; }
.settings-content-inner { width: min(980px, calc(100% - 48px)); padding: 30px 0 56px; }
.settings-section-heading { margin-bottom: 18px; }
.settings-section-heading h2 { font-size: var(--type-heading); font-weight: 480; letter-spacing: -.012em; }
.settings-section-heading > span { margin-top: 7px; font-size: var(--type-secondary); }
.settings-card { margin-bottom: 14px; border-radius: 12px; }
.settings-card > h3 { height: 42px; padding-inline: 16px; font-size: var(--type-caption); }
/* Account Names uses ordinary settings rows inside its form. */
.account-profile-form { display: block; }
.account-profile-form > .auth-error { margin: 0; padding: 0 14px 12px; }
.mfa-enrollment label { display: grid; gap: 6px; font-size: 12px; }
.mfa-enrollment input { width: 100%; min-height: 36px; padding: 7px 10px; color: inherit; background: transparent; border: 1px solid #5e5e5e; border-radius: 8px; }
.mfa-enrollment input:focus { outline: none; border-color: currentColor; }
/* The form's button is as wide as its label, not its grid column. */
.mfa-management { display: grid; gap: 16px; padding: 16px; }
.mfa-management p { margin: 0; line-height: 1.5; }
.mfa-factor-list { display: grid; gap: 8px; }
.mfa-factor-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mfa-enrollment { display: grid; justify-items: start; gap: 12px; }
.mfa-enrollment img { display: block; width: 190px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; padding: 8px; }
.mfa-enrollment code { overflow-wrap: anywhere; user-select: all; }
.mfa-enrollment form { display: grid; gap: 10px; }

.setting-row { min-height: var(--setting-row-height); gap: 18px; padding: 11px 16px; }
.setting-copy { gap: 3px; }
.setting-copy strong { font-weight: 470; }
.setting-copy span { font-size: var(--type-secondary); }
.settings-account strong { font-size: var(--type-body); font-weight: 500; }
.settings-account em { font-size: var(--type-caption); }
.setting-control { min-width: 230px; }
.setting-dropdown-toggle,
.setting-input,
.setting-action { height: var(--control-height); border-radius: 8px; }
.chat-content { padding: 0 12px 22px; }
.chat-transcript { padding: 38px clamp(14px, 2.5vw, 28px) 200px; }
.chat-message { max-width: 980px; margin-bottom: 24px; }
.chat-composer { bottom: 20px; width: min(920px, calc(100% - 64px)); min-height: 112px; }
.chat-empty-state { margin-top: 96px; }

.developer-stage { grid-template-columns: minmax(0, 1fr) minmax(250px, 30%); gap: var(--panel-gap); padding: var(--panel-gap); }
.work-layout { grid-template-columns: minmax(150px, 20%) minmax(0, 1fr) minmax(240px, 28%); gap: var(--panel-gap); padding: var(--panel-gap); }
.agents-layout { grid-template-columns: minmax(160px, 23%) minmax(0, 1fr) minmax(190px, 25%); }
.audit-center-layout { grid-template-columns: minmax(150px, 20%) minmax(0, 1fr) minmax(210px, 28%); }
.agent-detail { padding: 22px 24px 44px; }
.finding-list { padding: 13px; }
.finding-detail { padding: 20px 16px; }
.developer-assistant,
.work-assistant,
.work-library,
.work-editor-shell,
.work-editor-empty,
#developer-workspace-mount { border-radius: 9px; }
.developer-assistant, .work-assistant { container-type: inline-size; }
.assistant-model-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--section-space); }
.assistant-model-controls select { height: var(--control-height); font-size: var(--type-secondary); }
.assistant-transcript { padding: var(--section-space); gap: var(--section-space); }
.assistant-composer { padding: 0 var(--section-space) var(--section-space); }
.work-document-list > button { min-height: calc(var(--nav-row-height) + 14px); }
.work-editor-empty { padding: 24px; }
.work-document-head { flex-wrap: wrap; gap: 8px; padding-block: var(--section-space); }
.work-document-head input { flex-basis: 100%; }
.work-format-toolbar { display: flex; flex-wrap: wrap; }
.work-format-toolbar small { margin-left: auto; }
#work-document-editor, .work-suggestion-preview article { padding: 28px clamp(20px, 3vw, 52px) 48px; }
.work-revisions { overflow-x: auto; min-height: var(--control-height); }
.work-revisions button { flex-shrink: 0; }
.topbar-action, .assistant-connect, .work-editor-empty button { min-height: var(--control-height); }
@container (max-width: 340px) {
  .assistant-model-controls { grid-template-columns: minmax(0, 1fr); }
  .assistant-quick-prompts { flex-wrap: wrap; }
  .assistant-quick-prompts button { flex-basis: 100%; }
}

.theme-dark {
  /* Navigation panels and the chatbox: the same neutral grey as the main
     page surface, a step lighter so they stay distinct. */
  --sidebar: #282828;
  --audit-panel: #212121;
  --editor: #202020;
  --main-page-surface: #242424;
  --connections: #2c2c2c;
  --connection-panel: #2c2c2c;
  --provider-card: #373737;
  --model-row: #2c2c2c;
  --line: #494949;
  --line-soft: #393939;
  --text: #f0f1f2;
  --muted: #bdbdbd;
  --dim: #979797;
}
#office-work-host[data-theme="dark"] { --main-page-surface: #242424; }
/* Keep the page canvas separate from navigation, chrome, cards, and popovers. */
.window-frame.theme-dark,
#developer-host.theme-dark,
#office-work-host[data-theme="dark"],
.theme-dark :is(.home-main, .chat-workspace, .project-main, .workspace-main,
  .agents-main, .audit-center-main, .work-main, .tools-main, .cohorts-main,
  .file-room-main, .coworkers-main, .settings-main, .connections-main,
  .settings-content, .file-room-layout, .file-room-canvas, .developer-stage,
  #developer-workspace-mount, .developer-workspace-surface, .developer-artifact, .work-home,
  .work-layout.is-editing, .coworker-table-header) {
  background-color: var(--main-page-surface);
}
.theme-dark .cohort-workflow { background-color: var(--main-page-surface); }
.theme-dark .connection-toolbar { background: #383838; }
.theme-dark .available-connections { background: #2a2a2a; }
.theme-dark .agent-card.blue { background: #455579; }
.theme-dark .agent-card.green { background: #3f665a; }
.theme-dark .agent-card.yellow { background: #6b6138; }

/* White is the actual light-theme canvas. Neutral grays are reserved for
   boundaries, selection feedback, and secondary surfaces. */
.theme-light {
  --sidebar: #ffffff;
  --application-chrome-surface: #f0f0f0;
  --audit-panel: #ffffff;
  --editor: #ffffff;
  --connections: #ffffff;
}
.theme-light .application-search-wrap:not(.is-expanded) .application-search-toggle { color: #363636; }
.theme-light .application-sidebar-button,
.theme-light .application-sidebar > .sidebar-toggle { color: #505050; }
.theme-light .application-sidebar-button[aria-current="page"] { background: rgba(0, 0, 0, .10); color: #242424; }
.theme-light .sidebar,
.theme-light .connections-main,
.theme-light .connections-side,
.theme-light .settings-main,
.theme-light .settings-content,
.theme-light .chat-workspace,
.theme-light .workspace-main,
.theme-light .developer-stage,
.theme-light .agents-main,
.theme-light .audit-center-main,
.theme-light .work-main { background: #ffffff; }
.theme-light .chat-content,
.theme-light .chat-transcript { background: #ffffff; }
.theme-light .page-title,
.theme-light .workspace-blackbar,
.theme-light .settings-topbar,
.theme-light .chat-topbar,
.theme-light .product-topbar,
.theme-light .connection-main-black { background: #ffffff; }
.theme-light .workflow {
  background-color: #ffffff;
}

/* The workflow keeps its connected-canvas treatment on desktop widths. When
   both navigation and provider context must share a narrow window, cards use
   a readable responsive matrix rather than shrinking their labels twice. */
.workflow.workflow-compact .graph-layer {
  inset: 54px 8px 52px;
  width: auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-template-rows: repeat(6, 80px);
  align-content: start;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  gap: 9px;
  transform: scale(var(--graph-fit-scale));
  transform-origin: center;
}
.workflow.workflow-compact .connectors { display: none; }
.workflow.workflow-compact .agent-card {
  position: relative;
  left: auto !important;
  top: auto !important;
  width: 100%;
  height: 80px;
  min-width: 0;
  border-left-width: 3px;
}
.workflow.workflow-compact .agent-card:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.workflow.workflow-compact .agent-card:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.workflow.workflow-compact .agent-card:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.workflow.workflow-compact .agent-card:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.workflow.workflow-compact .agent-card:nth-of-type(5) { grid-column: 1; grid-row: 3; }
.workflow.workflow-compact .agent-card:nth-of-type(6) { grid-column: 2; grid-row: 3; }
.workflow.workflow-compact .agent-card:nth-of-type(7) { grid-column: 3; grid-row: 3; }
.workflow.workflow-compact .agent-card:nth-of-type(8) { grid-column: 1; grid-row: 4; }
.workflow.workflow-compact .agent-card:nth-of-type(9) { grid-column: 2; grid-row: 4; }
.workflow.workflow-compact .agent-card:nth-of-type(10) { grid-column: 3; grid-row: 4; }
.workflow.workflow-compact .agent-card:nth-of-type(11) { grid-column: 1; grid-row: 5; }
.workflow.workflow-compact .agent-card:nth-of-type(12) { grid-column: 2; grid-row: 5; }
.workflow.workflow-compact .agent-card:nth-of-type(13) { grid-column: 3; grid-row: 5; }
.workflow.workflow-compact .agent-card:nth-of-type(14) { grid-column: 1; grid-row: 6; }
.workflow.workflow-compact .agent-card:nth-of-type(15) { grid-column: 2; grid-row: 6; }
.workflow.workflow-compact .agent-card:nth-of-type(16) { grid-column: 3; grid-row: 6; }
.workflow.workflow-compact .agent-title { height: 37px; padding-right: 27px; }
.workflow.workflow-compact .agent-model { height: 40px; gap: 4px; }
.workflow.workflow-compact .agent-model > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow.workflow-compact .agent-model em { min-width: 0; height: 18px; padding-inline: 5px; }
.workflow.workflow-compact .agent-model em .status-dot { display: none; }
.workflow.workflow-compact .agent-menu { top: 5px; right: 5px; }

@media (max-width: 1100px) {
  .connections-frame,
  .cohorts-frame,
  .settings-frame,
  .home-frame,
  .chat-frame,
  .project-frame,
  .workspace-frame,
  .agents-frame,
  .audit-center-frame,
  .work-frame { grid-template-columns: 226px minmax(0, 1fr); }
  .theme-switch { right: 57px; transform: scale(.88); transform-origin: center right; }
  .sidebar-toggle { right: 8px; left: auto; }
  .settings-content-inner { width: calc(100% - 30px); }
  .connection-toolbar { gap: 5px; }
  .developer-stage { grid-template-columns: minmax(0, 1fr) 250px; }
  .work-layout { grid-template-columns: 150px minmax(0, 1fr) 240px; }
  .agents-layout { grid-template-columns: 160px minmax(0, 1fr) 190px; }
  .audit-center-layout { grid-template-columns: 150px minmax(0, 1fr) 210px; }
  .chat-project-switcher { margin-left: 4px; }
  .chat-project-switcher select { width: 162px; }
  .chat-topbar { flex-wrap: nowrap; height: var(--topbar-height); min-height: var(--topbar-height); --topbar-gap: 5px; gap: var(--topbar-gap); padding-left: 16px; padding-right: 52px; }
  .chat-title-block { gap: 8px; }
  .chat-title-block > .ui-icon { width: var(--icon-md); height: var(--icon-md); }
  .chat-title-block strong { max-width: 130px; }
}

/* Composio-backed Tools directory. */
.tools-frame { --tools-surface: #303030; --tools-border: #4a4a4a; --tools-field: #292929; --tools-subtle: #b5b5b5; }
.tools-frame.theme-light { --tools-surface: #fff; --tools-border: #d5dbe4; --tools-field: #f5f7fa; --tools-subtle: #647084; }
.tools-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: var(--topbar-height) minmax(0,1fr); background: var(--editor); }
.tools-frame.theme-light .tools-main { background: #fff; }
.tools-content {
  overflow: auto;
  margin-right: 3px;
  padding: 20px clamp(16px,2.5vw,36px) 36px;
  color: var(--text);
}

/* Keep the sidebar lists and Tools catalog scrollbars visually identical. */
.sidebar-scroll,
.tools-content {
  --surface-scrollbar-thumb: #aeb5c0;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-scrollbar-thumb) transparent;
}
.theme-light .sidebar-scroll,
.theme-light .tools-content { --surface-scrollbar-thumb: #647084; }
.sidebar-scroll::-webkit-scrollbar,
.tools-content::-webkit-scrollbar { display: block; width: 10px; height: 10px; background: transparent; }
.sidebar-scroll::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-corner,
.tools-content::-webkit-scrollbar-track,
.tools-content::-webkit-scrollbar-corner { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb,
.tools-content::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--surface-scrollbar-thumb);
  background-clip: padding-box;
}
.sidebar-scroll::-webkit-scrollbar-button,
.tools-content::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Project landing pages keep project identity, new-chat creation, and the
   project's conversation index together without turning into another IDE. */
.project-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  background: var(--editor);
}
.project-topbar {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 64px 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--audit-panel);
}
.project-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.project-title > .ui-icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: var(--muted); }
.project-title h1 { overflow: hidden; margin: 0; color: var(--text); font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.project-content { min-width: 0; min-height: 0; overflow-y: auto; padding: clamp(24px, 5vh, 48px) clamp(20px, 5vw, 72px) 44px; }
.project-content-inner { width: min(780px, 100%); margin: 0 auto; }
.project-content .project-chat-dock {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  transform: none;
  pointer-events: auto;
}
.project-chat-dock .omnesly-chat-bar {
  grid-template-rows: minmax(34px, auto) 34px;
}
.project-chat-dock .omnesly-chat-bar:focus-within { border-color: var(--chat-bar-border-color); }
.project-chat-dock .omnesly-chat-input:focus,
.project-chat-dock .omnesly-chat-input:focus-visible { outline: 0; outline-offset: 0; box-shadow: none; }
.omnesly-chat-dock.project-chat-dock.has-attachments .omnesly-chat-bar { grid-template-rows: minmax(34px, auto) auto 34px; }
.project-chat-dock .chat-model-popover,
.project-chat-dock .composer-add-popover { top: calc(100% + 7px); bottom: auto; }
.project-chat-list { margin-top: clamp(28px, 5vh, 44px); }
.project-chat-list > header { height: 34px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.project-chat-list h2 { margin: 0; color: var(--text); font-weight: 560; }
.project-chat-list > header span { color: var(--dim); }
.project-chat-rows { display: grid; padding-top: 6px; }
.project-chat-row {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line-soft);
  padding: 7px 8px;
  color: var(--text);
  text-align: left;
  transition: background-color 140ms ease;
}
.project-chat-row:hover { border-radius: 9px; background: rgba(255, 255, 255, .05); }
.project-chat-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255, 255, 255, .025); }
.project-chat-icon .ui-icon { width: 17px; height: 17px; }
.project-chat-copy { min-width: 0; display: grid; gap: 3px; }
.project-chat-copy strong,
.project-chat-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-chat-copy strong { font-weight: 510; }
.project-chat-copy em { color: var(--dim); font-style: normal; }
.project-chat-pin { width: 15px; height: 15px; color: var(--muted); }
.project-chat-open { width: 17px; height: 17px; color: var(--dim); }
.project-chat-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--dim); text-align: center; }
.project-chat-empty > .ui-icon { width: 28px; height: 28px; color: var(--muted); }
.project-chat-empty strong { color: var(--text); font-weight: 520; }
.theme-light .project-main,
.theme-light .project-content { background: #ffffff; }
.theme-light .project-topbar { border-color: #cbd0d7; background: #fff; }
.theme-light .project-chat-dock .omnesly-chat-bar:focus-within { border-color: var(--chat-bar-border-color); }
.theme-light .project-chat-row:hover { background: rgba(64, 75, 90, .055); }
.theme-light .project-chat-icon { border-color: #cbd0d7; background: #fff; }

.tools-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; max-width: 1300px; margin-bottom: 24px; }
.tools-intro h2 { margin: 0; font-size: calc(var(--type-heading) * 1.25); font-weight: 500; }
.tools-count { flex: none; border: 1px solid var(--tools-border); border-radius: 999px; padding: 7px 11px; font-size: var(--type-caption); color: var(--tools-subtle); }
.tools-unavailable { max-width: 650px; margin: 0; border: 1px solid var(--tools-border); border-radius: 10px; padding: 18px 20px; background: var(--tools-surface); color: var(--tools-subtle); font-size: var(--type-secondary); }
.tools-search-controls { display: flex; align-items: center; gap: 8px; width: min(100%,504px); min-width: 0; }
.tools-search-field { display: flex; min-width: 0; flex: 1; }
.tools-search label { display: block; margin-bottom: 7px; font-size: var(--type-caption); color: var(--tools-subtle); }
.tools-search input { min-width: 0; flex: 1; height: var(--control-height); border: 1px solid var(--tools-border); border-radius: 8px; padding: 0 12px; background: var(--tools-field); color: var(--text); font: inherit; font-size: var(--type-secondary); }
.tools-search button, .tool-card-foot button, .tools-load-more, .tools-pending a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--control-height); border: 1px solid var(--tools-border); border-radius: 8px; padding: 0 13px; background: var(--tools-surface); color: var(--text); font: inherit; font-size: var(--type-secondary); text-decoration: none; cursor: pointer; }
.tools-search button .ui-icon, .tools-pending .ui-icon { width: var(--icon-sm); height: var(--icon-sm); }
.tools-search { max-width: 1300px; display: flex; align-items: end; gap: 16px; margin-bottom: 18px; }
.tools-search label { display: none; }
.tools-search-field { position: relative; border: 1px solid var(--tools-border); border-radius: 8px; background: var(--tools-field); }
.tools-search-field:focus-within { border-color: var(--accent-ring); box-shadow: none; }
.tools-search-field input { width: 100%; border: 0; padding-right: 42px; background: transparent; outline: none; }
.tools-search-field button { position: absolute; inset: 0 0 0 auto; width: var(--control-height); min-height: 0; border: 0; border-radius: 0 8px 8px 0; padding: 0; background: transparent; color: var(--tools-subtle); }
.tools-search-field button:hover { background: color-mix(in srgb, var(--tools-border) 35%, transparent); color: var(--text); }
.tools-search-field button .ui-icon { width: var(--icon-sm); height: var(--icon-sm); }
.tools-search .tools-refresh { width: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); padding: 0; }
.tools-refresh:hover:not(:disabled) { background: var(--tools-field); }
.tools-refresh:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: var(--focus-ring-offset); }
.tools-refresh:disabled { opacity: .5; cursor: default; }
.tools-category-filter { position: relative; width: min(100%, 290px); min-width: 0; z-index: 30; }
.tools-category-filter .tools-category-trigger { width: 100%; height: var(--control-height); justify-content: flex-start; gap: 10px; padding: 0 12px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 .75px var(--tools-border); background: transparent; text-align: left; transition: background-color 160ms ease, box-shadow 160ms ease; }
.tools-category-trigger > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tools-category-trigger .category-count { margin-left: auto; }
.category-count { flex: none; color: var(--tools-subtle); font-variant-numeric: tabular-nums; }
.tools-category-trigger > .ui-icon { flex: none; color: var(--tools-subtle); transform: rotate(90deg); transition: transform 220ms var(--ease-emphasized); }
.tools-category-filter.is-open .tools-category-trigger > .ui-icon { transform: rotate(270deg); }
.tools-category-filter .tools-category-trigger:hover,
.tools-category-filter.is-open .tools-category-trigger { background: color-mix(in srgb, var(--tools-field) 65%, transparent); box-shadow: inset 0 0 0 .75px color-mix(in srgb, var(--tools-border) 65%, var(--tools-subtle)); }
.tools-category-trigger:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: var(--focus-ring-offset); }
.tools-category-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, calc(100vw - 48px));
  max-height: min(440px, calc(100vh - 160px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid color-mix(in srgb, var(--tools-border) 80%, transparent); border-radius: 12px;
  background: rgba(38, 41, 47, .82); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.985); transform-origin: top right;
  transition: opacity 160ms ease, transform 180ms var(--ease-emphasized), visibility 0s linear 180ms;
  scrollbar-width: thin; scrollbar-color: var(--tools-border) transparent;
}
.tools-category-filter.is-open .tools-category-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 180ms ease, transform 220ms var(--ease-emphasized), visibility 0s; }
.tools-category-option { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 7px 9px; border-radius: 6px; line-height: 1.4; cursor: pointer; transition: background-color 120ms ease; }
.tools-category-option > span:first-child { flex: 1; min-width: 0; }
.tools-category-option > .ui-icon { flex: none; width: 14px; height: 14px; opacity: 0; color: var(--muted); }
.tools-category-option[aria-selected="true"] > .ui-icon { opacity: 1; }
.tools-category-option[aria-selected="true"] { background: var(--accent-soft); }
.tools-category-option:hover,
.tools-category-option[data-active="true"] { background: color-mix(in srgb, var(--tools-border) 42%, transparent); }
.tools-category-option:first-child { margin-bottom: 5px; }
.tools-frame.theme-light .tools-category-menu { background: rgba(255, 255, 255, .8); box-shadow: 0 12px 32px rgba(30, 40, 55, .1), 0 2px 6px rgba(30, 40, 55, .04); }
.reduce-transparency .tools-category-menu { background: var(--tools-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tools-search > span { margin-bottom: 10px; color: var(--tools-subtle); font-size: var(--type-caption); white-space: nowrap; }
.tools-search > .tools-search-count { align-self: center; margin-bottom: 0; margin-left: auto; }
.tools-grid { max-width: 1300px; display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 12px; }
.tool-card { display: flex; flex-direction: column; min-height: 184px; border: 1px solid var(--tools-border); border-radius: 12px; padding: 15px; background: var(--tools-surface); }
.tool-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tool-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; overflow: hidden; border: 0; border-radius: 0; background: transparent; font-weight: 600; }
.tool-avatar img { width: 30px; height: 30px; object-fit: contain; }
.tool-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.tool-avatar-fallback[hidden] { display: none; }
.tool-card-head > span:nth-child(2) { min-width: 0; flex: 1; }
.tool-card-head strong, .tool-card-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-card-head strong { font-size: var(--type-secondary); font-weight: 560; }
.tool-card-head small { margin-top: 2px; color: var(--tools-subtle); font-size: var(--type-caption); }
.tool-card-head em { color: #35be7c; font-size: var(--type-caption); font-style: normal; }
.tools-frame.theme-light .tool-card-head em { color: #177448; }
.tool-overview { min-height: 68px; margin: 14px 0; }
.tool-description { min-height: 42px; margin: 0; color: var(--tools-subtle); font-size: var(--type-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-card.is-expanded .tool-description { display: block; overflow: visible; }
.tool-overview-toggle { margin-top: 6px; border: 0; padding: 0; color: #3b82f6; background: transparent; font: inherit; font-size: var(--type-caption); cursor: pointer; }
.tool-overview-toggle:hover { text-decoration: underline; }
.tool-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.tool-card-foot small { color: var(--tools-subtle); font-size: var(--type-caption); }
.tool-card-foot button { min-height: 30px; font-size: var(--type-body); }
.tool-card-foot button:disabled { opacity: .6; cursor: default; }
.tools-load-more { display: flex; margin: 20px auto 0; }
.tools-empty { grid-column: 1/-1; color: var(--tools-subtle); font-size: var(--type-secondary); }
.tools-error { max-width: 1300px; border: 1px solid #a34753; border-radius: 8px; padding: 10px 12px; color: #ef9ca7; font-size: var(--type-secondary); }
.tools-frame.theme-light .tools-error { border-color: #e8b9be; background: #fff5f5; color: #8e2638; }
.tools-pending { max-width: 1300px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; border: 1px solid var(--tools-border); border-radius: 9px; padding: 10px 12px; background: var(--tools-surface); font-size: var(--type-secondary); }
.tools-pending > span { display: inline-flex; align-items: center; gap: 7px; }
.tools-connected { max-width: 1300px; margin-bottom: 22px; }
.tools-connected h3 { margin: 0 0 9px; font-size: var(--type-secondary); font-weight: 540; }
.tools-connected > div { display: flex; flex-wrap: wrap; gap: 8px; }
.tools-connected > div > span { display: flex; align-items: center; gap: 8px; max-width: 240px; min-height: 32px; border: 1px solid var(--tools-border); border-radius: 8px; padding: 5px 9px; background: var(--tools-surface); }
.tools-connected strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-caption); font-weight: 550; }
.tools-connected small { color: var(--tools-subtle); font-size: var(--type-caption); }
.tools-connected .status-dot { margin-left: auto; }
@media (max-width: 900px) { .tools-search { align-items: stretch; flex-direction: column; } .tools-search > span { margin: 0; } .tools-search > .tools-search-count { align-self: flex-start; margin-left: 0; } }

.tools-content { container: tools-catalog / inline-size; }
.tools-browse-nav { display: flex; gap: 24px; max-width: 1300px; margin: 4px 0 24px; border-bottom: 1px solid var(--tools-border); }
.tools-browse-nav button { position: relative; min-height: 38px; padding: 0 0 12px; color: var(--tools-subtle); font-weight: 450; }
.tools-browse-nav button:hover { color: var(--text); }
.tools-browse-nav button[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.tools-browse-nav button[aria-pressed="true"]::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; border-radius: 2px; background: currentColor; }
.tools-popular-section { max-width: 1300px; margin-bottom: 28px; }
.tools-popular-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tools-popular-heading h2 { margin: 0; font-weight: 600; line-height: 1.5; }
.tools-popular-heading > span { flex: none; color: var(--tools-subtle); font-variant-numeric: tabular-nums; }
.tools-popular-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-card-popular { min-width: 0; min-height: 0; padding: 14px 14px 6px; gap: 6px; border-radius: 10px; }
.tool-card-popular .tool-card-head { align-items: flex-start; gap: 9px; }
.tool-card-popular .tool-card-head > span:nth-child(2) { padding-top: 2px; }
.tool-card-popular .tool-card-head small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.4; }
.tool-card-popular .tool-card-head > button { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; margin-top: 3px; padding: 0 10px; border: 1px solid var(--tools-border); border-radius: 8px; background: var(--tools-surface); color: var(--text); }
.tool-card-popular .tool-card-head > button:disabled { opacity: .6; cursor: default; }
.tool-card-popular .tool-card-foot { margin-top: 0; }
.tool-card-foot .tool-overview-link { min-height: 30px; padding: 0; border: 0; border-radius: 0; color: #8cb4ff; background: transparent; text-underline-offset: 3px; }
.tool-card-popular .tool-overview-link { min-height: 22px; }
.theme-light .tool-card-foot .tool-overview-link { color: #2563eb; }
.tool-card-foot .tool-overview-link:hover { text-decoration: underline; }
.tools-popular-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.tools-see-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--tools-border); border-radius: 7px; color: var(--text); background: var(--tools-surface); }
.tools-see-all:hover { background: var(--tools-field); }
.tools-see-all .ui-icon { width: 14px; height: 14px; }
.tool-card-skeleton { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 18px 18px 28px; align-content: center; gap: 8px; }
.tool-card-skeleton span, .tool-card-skeleton i { border-radius: 5px; background: var(--tools-border); opacity: .4; }
.tool-card-skeleton span { grid-row: 1 / 3; }
.tool-card-skeleton i:last-child { width: 75%; }
.tool-detail-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.tool-detail-heading { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); }
.tool-detail-heading img { flex: none; object-fit: contain; }
.tool-detail-dialog .tool-detail-description { color: var(--text); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.tool-detail-footer > span { color: var(--muted); }
@container tools-catalog (max-width: 360px) { .tools-popular-grid { grid-template-columns: minmax(0, 1fr); } }

/* Developer assistance is a chat-style composer over the code canvas, not a
   permanently-open inspector. Conversation and tool approval details surface
   only while there is activity to show. */
.developer-stage {
  position: relative;
  display: block;
  padding: 0 0 64px;
}
.workspace-frame #developer-workspace-mount { border: 0; border-radius: 0; }
#developer-host { border-radius: 0; box-shadow: none; }
.developer-editor-column { width: 100%; height: 100%; }
.developer-workspace-surface { grid-template-columns: 200px minmax(0, 1fr); background: #202020; }
.developer-files-panel {
  grid-template-rows: 82px auto minmax(0, 1fr);
  border-right-color: rgba(255, 255, 255, .08);
  background: #262626;
}
.developer-files-panel > header {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 6px 8px;
  border-bottom-color: rgba(255, 255, 255, .07);
}
.developer-files-panel > header > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.developer-files-panel > header strong { font-weight: 580; }
.developer-files-panel > header button {
  min-height: 28px;
  border-color: transparent;
  border-radius: 7px;
  padding-inline: 8px;
  background: rgba(255, 255, 255, .045);
}
.developer-new-file-form { min-width: 0; display: flex; gap: 4px; }
.developer-new-file-form input {
  min-width: 0;
  width: 100%;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  padding: 0 7px;
  color: var(--text);
  background: #212121;
  font: 450 var(--type-caption)/1 var(--font-ui);
}
.developer-new-file-form input:focus { border-color: var(--accent-ring); box-shadow: none; }
.developer-new-file-form button { flex: 0 0 auto; }
.developer-new-file-error { position: absolute; top: 80px; left: 8px; z-index: 4; max-width: 184px; margin: 0; border: 1px solid #98424d; border-radius: 6px; padding: 5px 7px; color: #ffd7db; background: #54252b; font-size: var(--type-caption); line-height: 1.35; }
.developer-file-search { height: 33px; margin: 8px 8px 4px; border-radius: 7px; }
.developer-file-tree,
.developer-search-results { padding: 4px 6px 8px; }
.developer-tree-folder summary,
.developer-tree-file { min-height: 28px; border-radius: 5px; padding-block: 3px; }
.developer-file-mark { width: 22px; flex-basis: 22px; }
.developer-artifact { grid-template-rows: 46px minmax(0, 1fr); background: #202020; }
.developer-artifact-bar {
  gap: 10px;
  padding: 0 9px 0 14px;
  border-bottom-color: rgba(255, 255, 255, .07);
  background: #262626;
}
.developer-active-file { gap: 1px; }
.developer-view-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  padding: 2px;
  background: rgba(0, 0, 0, .14);
}
.developer-artifact-bar .developer-view-actions button {
  min-height: 27px;
  border: 0;
  border-radius: 6px;
  padding-inline: 9px;
  background: transparent;
}
.developer-artifact-bar .developer-view-actions button:hover { border-color: transparent; background: rgba(255, 255, 255, .055); }
.developer-artifact-bar .developer-view-actions button[aria-pressed="true"] { color: var(--text); background: rgba(255, 255, 255, .095); }
.developer-review-count { min-width: 17px; height: 17px; }
.developer-review > aside { grid-template-rows: 46px minmax(0, 1fr); }
.developer-review > main { grid-template-rows: 46px auto minmax(0, 1fr); }
.developer-review-list { padding: 6px; }
.developer-review-list button { padding: 7px; }
.developer-assistant-dock {
  position: absolute;
  z-index: 45;
  right: 12px;
  bottom: 7px;
  left: 12px;
  width: min(780px, calc(100% - 24px));
  margin-inline: auto;
  pointer-events: none;
}
.developer-assistant-bar {
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(134, 139, 151, .72);
  border-radius: 14px;
  padding: 5px 6px 5px 8px;
  background: rgba(37, 39, 45, .9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28), 0 2px 7px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
}
.developer-assistant-bar:focus-within { border-color: var(--accent-ring); }
.developer-assistant-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .055);
}
.developer-assistant-mark .ui-icon { width: 18px; height: 18px; }
.developer-dock-models { min-width: 0; flex: 0 1 235px; }
.developer-dock-models .assistant-model-controls { display: flex; gap: 5px; padding: 0; }
.developer-dock-models .assistant-model-controls label { min-width: 0; flex: 1 1 0; display: block; }
.developer-dock-models .assistant-model-controls label > span { display: none; }
.developer-dock-models .assistant-model-controls select {
  height: 34px;
  border-color: transparent;
  border-radius: 9px;
  padding-inline: 8px 24px;
  color: var(--muted);
  background: rgba(255, 255, 255, .045);
  text-overflow: ellipsis;
}
.developer-dock-models .assistant-model-controls select:hover { color: var(--text); background: rgba(255, 255, 255, .075); }
.developer-dock-models .assistant-connect {
  width: 34px;
  min-height: 34px;
  justify-content: center;
  margin: 0;
  border-color: transparent;
  border-radius: 9px;
  padding: 0;
  color: var(--muted);
  background: rgba(255, 255, 255, .045);
  white-space: nowrap;
}
.developer-dock-models .assistant-connect:hover { color: var(--text); background: rgba(255, 255, 255, .075); }
.developer-dock-models:has(> .assistant-connect) { flex: 0 0 34px; }
.developer-assistant-bar > textarea {
  min-width: 90px;
  height: 38px;
  min-height: 38px;
  max-height: 96px;
  flex: 1 1 auto;
  resize: none;
  overflow-y: auto;
  border: 0;
  border-radius: 9px;
  padding: 10px 8px;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: 450 var(--type-secondary)/1.45 var(--font-ui);
  scrollbar-width: thin;
}
.developer-assistant-bar > textarea::placeholder { color: var(--dim); }
.developer-dock-send {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  transition: transform var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.developer-dock-send:hover:not(:disabled) { transform: translateY(-1px); }
.developer-dock-send:disabled { opacity: .32; cursor: not-allowed; }
.developer-dock-send.is-cancel { color: #fff; background: #b44950; }
.developer-dock-send .ui-icon { width: 18px; height: 18px; }
.developer-assistant-activity {
  max-height: min(390px, calc(100vh - 190px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(112, 117, 128, .72);
  border-radius: 14px;
  padding: 8px;
  background: rgba(37, 39, 45, .94);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .3);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
}
.developer-assistant-activity .assistant-transcript { max-height: 230px; padding: 2px; }
.developer-assistant-activity .developer-tool-feed { max-height: 190px; margin: 0; }
.developer-assistant-activity .assistant-error { margin: 0; }
.developer-assistant-activity .assistant-message { max-width: min(88%, 620px); }
.theme-light .developer-assistant-bar,
.theme-light .developer-assistant-activity {
  border-color: rgba(174, 180, 190, .88);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 16px 42px rgba(33, 42, 55, .16), 0 2px 8px rgba(33, 42, 55, .08);
}
.theme-light .developer-assistant-mark,
.theme-light .developer-dock-models .assistant-model-controls select,
.theme-light .developer-dock-models .assistant-connect { color: #59636f; background: rgba(64, 75, 90, .07); }
.theme-light .developer-assistant-bar > textarea { color: #252a31; }
.developer-host.theme-light .developer-files-panel { background: #f5f6f8; }
.developer-host.theme-light .developer-new-file-form input { border-color: #c7cdd6; color: #252a31; background: #fff; }
.developer-host.theme-light .developer-new-file-error { color: #8d1829; background: #fff1f2; }
.developer-host.theme-light .developer-artifact-bar { background: #f8f9fa; }
.developer-host.theme-light .developer-view-actions { border-color: #d8dde4; background: #eef1f4; }
.developer-host.theme-light .developer-artifact-bar .developer-view-actions button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(40, 50, 65, .12); }
.reduce-transparency .developer-assistant-bar,
.reduce-transparency .developer-assistant-activity { background: #2a2a2a; backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-light.reduce-transparency .developer-assistant-bar,
.theme-light.reduce-transparency .developer-assistant-activity { background: #fff; }
@media (max-width: 880px) {
  .developer-workspace-surface { grid-template-columns: 170px minmax(0, 1fr); }
  .developer-assistant-dock { right: 9px; bottom: 7px; left: 9px; width: calc(100% - 18px); }
  .developer-dock-models { flex-basis: 140px; }
  .developer-dock-models .assistant-model-controls label:first-child { display: none; }
}
@media (max-width: 620px) {
  .developer-assistant-mark { display: none; }
  .developer-dock-models { flex-basis: 112px; }
}

/* One context-aware Omnesly composer is shared by every product surface
   except Settings. Page-specific positioning keeps it over the primary canvas,
   never over navigation, file browsers, or document libraries. */
.chat-content,
.developer-stage,
.work-layout,
.connections-main,
.tools-main,
.agents-main,
.audit-center-main { position: relative; }
.omnesly-chat-dock {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: 28px;
  width: min(780px, calc(100% - 40px));
  transform: translateX(-50%);
  pointer-events: none;
}
.omnesly-chat-bar {
  --chat-bar-border-color: color-mix(in srgb, var(--text) 8%, transparent);
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-rows: auto 34px;
  gap: 5px;
  border: 1px solid var(--chat-bar-border-color);
  border-radius: 13px;
  padding: 5px 7px;
  background: var(--application-chrome-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}
.omnesly-chat-bar:focus-within { border-color: var(--chat-bar-border-color); }
.omnesly-chat-dock.has-attachments .omnesly-chat-bar { grid-template-rows: auto auto 34px; }
.composer-pending-attachments { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 0 7px 2px; }
.composer-pending-attachments button { max-width: min(220px, 100%); display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color: var(--text); font: 500 var(--type-caption)/1.2 var(--font-ui); }
.composer-pending-attachments button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.composer-pending-attachments button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-pending-attachments .ui-icon { width: 12px; height: 12px; flex: none; }
.omnesly-chat-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.omnesly-chat-add,
.omnesly-chat-provider { position: relative; flex: 0 0 auto; }
.omnesly-chat-tool {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  padding: 0;
  color: var(--composer-tool-color, var(--muted));
  background: transparent;
}
.omnesly-chat-tool:hover,
.omnesly-chat-tool[aria-expanded="true"] { color: var(--text); background: rgba(255, 255, 255, .07); }
.omnesly-chat-tool .ui-icon { width: 18px; height: 18px; }
.composer-attachment-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-ui);
}
.composer-add-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  z-index: 9;
  width: 188px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 5px;
  background: #2b2b2b;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  animation: chat-model-menu-in .18s cubic-bezier(.22,1,.36,1) both;
}
.composer-add-popover button {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  padding: 0 9px;
  color: var(--text);
  text-align: left;
}
.composer-add-popover button:hover { background: rgba(255, 255, 255, .07); }
.composer-add-popover .ui-icon { width: 16px; height: 16px; color: var(--muted); }
.composer-resource-popover {
  width: 258px;
  max-width: min(258px, calc(100vw - 72px));
}
.composer-resource-popover header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px 4px;
  border-bottom: 1px solid var(--line);
}
.composer-resource-popover header button { width: 28px; height: 28px; padding: 5px; }
.composer-resource-popover header strong { font-size: 12px; font-weight: 600; }
.composer-resource-list { max-height: 218px; overflow-y: auto; }
.composer-resource-list button { width: 100%; min-height: 42px; height: auto; }
.composer-resource-list button > span { min-width: 0; display: grid; gap: 2px; flex: 1; }
.composer-resource-list button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.composer-resource-list button small { font-size: 12px; color: var(--muted); }
.composer-resource-list p { margin: 10px 8px; color: var(--muted); font-size: 12px; }
.composer-cohort-empty a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.composer-cohort-empty a:hover { color: var(--text-strong, var(--text)); }
.composer-resource-note { margin: 5px 8px 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.composer-resource-popover .composer-resource-secondary { justify-content: flex-start; height: 30px; color: var(--muted); font-size: 12px; }
.chat-app-approval { display: grid; gap: 7px; max-width: 560px; margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; padding: 12px; color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.chat-app-approval strong { font-size: 13px; font-weight: 600; }
.chat-app-approval span, .chat-app-approval small, .chat-app-approval p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.chat-app-approval pre { max-height: 180px; margin: 0; overflow: auto; border: 1px solid var(--line-soft); border-radius: 6px; padding: 9px; color: var(--text); background: color-mix(in srgb, var(--text) 3%, transparent); font: 12px/1.5 var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-app-approval > div { display: flex; justify-content: flex-end; gap: 8px; }
.chat-app-approval > div button { min-height: 31px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px; color: var(--text); }
.chat-app-approval > div button.primary { border-color: var(--button-primary-bg); color: var(--button-primary-fg); background: var(--button-primary-bg); }
.composer-connected-room {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 132px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
}
.composer-connected-room:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.composer-connected-room .ui-icon { width: 13px; height: 13px; flex: none; }
.composer-connected-room span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omnesly-chat-provider .chat-model-toggle {
  width: 176px;
  min-width: 0;
  max-width: min(176px, 42vw);
  height: 32px;
  display: flex;
  grid-template: none;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border-radius: 9px;
  padding: 0 8px 0 10px;
  border-color: transparent;
  background: rgba(255, 255, 255, .045);
}
.omnesly-chat-provider .chat-model-toggle .ui-icon { width: 14px; height: 14px; flex: 0 0 14px; transform: rotate(90deg); }
.chat-model-toggle-logo { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.composer-effort-anchor { position: relative; flex: 0 0 auto; }
.composer-effort-toggle { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 9px; padding: 0 9px; color: var(--composer-tool-color, var(--muted)); background: rgba(255, 255, 255, .045); font: 500 var(--type-caption)/1 var(--font-ui); white-space: nowrap; }
.composer-effort-toggle:hover, .composer-effort-toggle[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 9%, var(--editor)); }
.composer-effort-toggle:focus-visible { outline: 1px solid var(--line); outline-offset: 1px; }
.composer-effort-toggle:disabled { opacity: .55; cursor: not-allowed; }
.composer-effort-toggle .ui-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.composer-effort-popover { position: absolute; z-index: 20; bottom: calc(100% + 7px); left: 0; width: max(100%, 138px); border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: var(--editor); box-shadow: 0 14px 32px rgba(0,0,0,.3); }
.composer-effort-popover button { display: flex; width: 100%; min-height: 32px; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 6px; padding: 0 9px; color: var(--text); background: transparent; text-align: left; font: 500 var(--type-caption)/1 var(--font-ui); }
.composer-effort-popover button:hover, .composer-effort-popover button[aria-checked="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.composer-effort-popover button .ui-icon { width: 14px; height: 14px; }
.theme-light .composer-effort-toggle { background: rgba(64,75,90,.07); }
@media (max-width: 650px) { .composer-effort-toggle span { display: none; } .composer-effort-popover { width: 138px; } }
.chat-model-name { min-width: 0; margin-right: auto; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.omnesly-chat-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  max-height: none;
  resize: none;
  overflow-y: hidden;
  border: 0;
  border-radius: 9px;
  padding: 7px 7px 6px;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: 450 var(--type-secondary)/18px var(--font-ui);
  scrollbar-width: thin;
}
.omnesly-chat-input.is-scrollable { padding-right: 11px; }
.omnesly-chat-input::placeholder { color: var(--dim); }
.omnesly-chat-input:disabled { cursor: not-allowed; opacity: .62; }
.omnesly-chat-input:focus-visible { outline: 0; outline-offset: 0; box-shadow: none; }
.omnesly-chat-submit {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--composer-tool-color, var(--muted));
  background: transparent;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.omnesly-chat-submit:not(.is-cancel):hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .07); }
.omnesly-chat-submit.is-cancel { border-radius: 11px; color: #fff; background: #000; }
.theme-dark .omnesly-chat-submit.is-cancel { border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .11); }
.theme-dark .omnesly-chat-submit.is-cancel:hover:not(:disabled) { background: rgba(255, 255, 255, .17); }
.omnesly-chat-submit.is-cancel:hover:not(:disabled) { transform: translateY(-1px); }
.omnesly-chat-submit:disabled { cursor: not-allowed; opacity: 1; }
.omnesly-chat-submit.is-cancel:disabled { opacity: .65; }
.composer-stop-icon { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.omnesly-chat-submit .ui-icon { width: 18px; height: 18px; }
.composer-submit-cluster { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-left: auto; }
.composer-submit-cluster .omnesly-chat-submit { margin-left: 0; }
.composer-context-control { position: relative; flex: 0 0 auto; --context-color: #53c998; }
.composer-context-control[hidden] { display: none; }
.composer-context-toggle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; padding: 0; color: var(--muted); background: transparent; }
.composer-context-toggle:hover,
.composer-context-toggle[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.composer-context-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; }
.composer-context-ring { position: relative; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; background: conic-gradient(var(--context-color) var(--context-percent), color-mix(in srgb, var(--text) 17%, transparent) var(--context-percent)); }
.composer-context-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--editor); }
.composer-context-popover { position: absolute; z-index: 20; right: -37px; bottom: calc(100% + 11px); width: min(390px, calc(100vw - 36px)); max-height: min(570px, calc(100vh - 120px)); overflow: auto; border: 1px solid var(--line); border-radius: 13px; padding: 15px; color: var(--text); background: var(--editor); box-shadow: 0 18px 44px rgba(0, 0, 0, .32); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 34%, transparent) transparent; }
.composer-context-popover::-webkit-scrollbar { width: 8px; }
.composer-context-popover::-webkit-scrollbar-track { background: transparent; }
.composer-context-popover::-webkit-scrollbar-thumb { border: 2px solid var(--editor); border-radius: 8px; background: color-mix(in srgb, var(--text) 34%, transparent); }
.composer-context-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.composer-context-popover > header strong { font: 650 13px/1.3 var(--font-ui); }
.composer-context-popover > header small { color: var(--muted); font: 500 11px/1.2 var(--font-ui); }
.composer-context-body { display: grid; gap: 12px; }
.composer-context-wait { margin: 0; color: var(--muted); font: 12px/1.45 var(--font-ui); }
.composer-context-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.composer-context-summary strong { font: 650 15px/1.25 var(--font-ui); }
.composer-context-summary span { color: var(--muted); font: 11px/1.3 var(--font-ui); }
.composer-context-meter { height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.composer-context-meter span { display: block; height: 100%; border-radius: inherit; background: var(--context-color); transition: width .2s ease; }
.composer-context-rows { display: grid; gap: 10px; margin: 0; }
.composer-context-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; }
.composer-context-row dt { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); font: 500 12px/1.25 var(--font-ui); }
.composer-context-row dd { margin: 0; color: var(--text); font: 600 11px/1.2 var(--font-ui); white-space: nowrap; }
.composer-context-row dd small { color: var(--muted); font: 450 10px/1.2 var(--font-ui); }
.composer-context-swatch { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--context-color); }
.composer-context-track { grid-column: 1 / -1; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.composer-context-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--context-color); opacity: .78; }
.composer-context-row p { grid-column: 1 / -1; margin: 0; color: var(--muted); font: 10px/1.3 var(--font-ui); }
.composer-context-totals { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 9px; }
.composer-context-totals span { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 11px/1.3 var(--font-ui); }
.composer-context-totals strong { color: var(--text); font-weight: 600; text-align: right; }
.composer-context-notice { margin: 0; border-radius: 7px; padding: 7px 9px; color: var(--text); background: color-mix(in srgb, var(--context-color) 12%, transparent); font: 11px/1.4 var(--font-ui); }
.composer-context-explainer { margin: 0; color: var(--muted); font: 10px/1.45 var(--font-ui); }
.developer-chat-dock .omnesly-chat-input:disabled { pointer-events: none; }
.omnesly-chat-activity {
  max-height: min(390px, calc(100vh - 190px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(112, 117, 128, .72);
  border-radius: 14px;
  padding: 8px;
  background: rgba(37, 39, 45, .95);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .3);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: auto;
}
.omnesly-chat-activity .assistant-transcript { max-height: 230px; padding: 2px; }
.omnesly-chat-activity .developer-tool-feed { max-height: 190px; margin: 0; }
.omnesly-chat-activity .assistant-error { margin: 0; }
.omnesly-chat-activity .assistant-message { max-width: min(88%, 620px); }
.chat-content { padding-bottom: 84px; }
.chat-content:not(.is-new-chat) > .chat-chat-dock { bottom: var(--bottom-control-inset); }
.chat-transcript { padding-bottom: 118px; }
.chat-content.is-primary-chat:not(.is-new-chat) { padding-left: 16px; padding-right: 4px; }
.chat-content.is-primary-chat:not(.is-new-chat) > .primary-chat-transcript {
  min-width: 0;
  width: 100%;
  max-width: 1000px;
  justify-self: center;
  padding-left: 0;
  padding-right: 12px;
  /* Ends the newest message 40px above the chatbox (16px here plus the
     message's own 24px bottom margin); app.js measures the overlap. */
  padding-bottom: calc(var(--chat-dock-overlap, 23px) + 16px);
}
.primary-chat-transcript .chat-activity-demo-banner { max-width: none; margin-left: 0; margin-right: 0; }
.primary-chat-transcript > .chat-message {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.primary-chat-transcript > .chat-message .chat-message-header {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  min-height: var(--chat-avatar-size);
  margin-bottom: 8px;
}
.primary-chat-transcript > .chat-message .chat-message-avatar {
  width: var(--chat-avatar-size);
  height: var(--chat-avatar-size);
  flex: 0 0 var(--chat-avatar-size);
}
.primary-chat-transcript > .chat-message .chat-message-heading {
  align-items: center;
  min-height: var(--chat-avatar-size);
  margin-bottom: 0;
}
.primary-chat-transcript > .chat-message .chat-message-heading strong { line-height: var(--chat-avatar-size); }
.primary-chat-transcript > .chat-message .chat-message-body { width: 100%; padding-top: 0; }
.primary-chat-transcript > .chat-message.user .chat-message-header {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.primary-chat-transcript > .chat-message.user .chat-message-body {
  align-self: flex-end;
  width: min(100%, 680px);
  max-width: none;
  text-align: right;
}
.primary-chat-transcript > .chat-message.user .chat-message-content { overflow-wrap: anywhere; }
.chat-content.is-new-chat {
  grid-template-rows: auto auto;
  align-content: safe center;
  justify-items: center;
  row-gap: 28px;
  padding: 24px 0;
  overflow-y: auto;
}
.chat-content.is-new-chat .chat-transcript { position: relative; width: 100%; padding: 0; overflow: visible; }
.chat-content.is-new-chat .chat-empty-state {
  position: static;
  width: min(520px, calc(100% - 48px));
  margin: 0 auto;
  gap: 12px;
}
.chat-content.is-new-chat .chat-empty-state h2 { margin: 0; }
.chat-content.is-new-chat > .chat-chat-dock {
  position: relative;
  inset: auto;
  transform: none;
}
.global-run-error { bottom: 88px; }
.developer-stage { padding: 0; }
.developer-stage > .omnesly-chat-dock {
  left: 50%;
  bottom: 28px;
  width: min(780px, calc(100% - 40px));
}
.work-layout {
  grid-template-columns: minmax(150px, 20%) minmax(0, 1fr);
  padding-bottom: 92px;
}
.work-layout > .omnesly-chat-dock {
  left: 60%;
  width: min(780px, calc(80% - 40px));
}
.audit-center-layout { padding-bottom: 92px; }
.connections-main > .omnesly-chat-dock { width: min(740px, calc(100% - 48px)); }

/* Cohorts owns the saved hierarchy canvas. Connections is now a single
   provider-management pane, using the same sidebar modes as other pages. */
.cohorts-main { position: relative; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--editor); }
.cohorts-content { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4px; padding: 6px 8px 8px; }
.cohorts-heading { position: relative; display: flex; min-width: 0; align-items: center; gap: 12px; z-index: 30; container-type: inline-size; container-name: cohorts; }
.cohorts-heading h1 { flex: 0 0 auto; margin: 0; font: 600 var(--type-body)/1.4 var(--font-ui); color: var(--text); }
.cohorts-heading > .connection-toolbar { flex: 0 1 480px; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; min-height: 40px; }
.cohort-run-entry { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--editor); color: var(--text); font-weight: 550; white-space: nowrap; }
.cohort-run-entry:hover { background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.cohort-run-entry .ui-icon { width: 15px; height: 15px; }
.cohorts-heading .toolbar-select { border-color: var(--line); }
.theme-light .cohorts-heading .toolbar-select { background: #fff; border-color: var(--line); }
.theme-light .cohorts-heading .toolbar-select:hover,
.theme-light .cohorts-heading .toolbar-select[aria-expanded="true"] { border-color: var(--line); }
.theme-dark .cohorts-heading .toolbar-select { background: #2d2d2d; }
.cohorts-heading > .circle-menu { flex: 0 0 34px; width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--editor); }
.theme-light .cohorts-heading > .circle-menu { border-color: #c6ccd5; background: #fff; }
.theme-dark .cohorts-heading > .circle-menu { border-color: #464646; background: #2d2d2d; }
.cohorts-heading > .circle-menu:hover { background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.cohorts-heading .subagent-popover { top: calc(100% + 6px); left: auto; right: 0; width: min(310px, calc(100cqw - 46px)); }
.cohorts-heading .page-menu { top: calc(100% + 4px); right: 0; }
.cohorts-content > .connection-content { position: relative; inset: auto; min-width: 0; min-height: 0; padding: 0; }
.cohorts-content .workflow:not(.workflow-is-fullscreen) { inset: 0; }
/* Cohort presets use category accents, while model bindings stay independent. */
.cohort-workflow { --cohort-surface: #2c2c2c; --cohort-control: #252525; --cohort-border: #464646; --role-lightness: 74%; background-size: var(--cohort-grid-size, 30px) var(--cohort-grid-size, 30px); cursor: grab; touch-action: none; }
.cohorts-content .cohort-workflow { border-color: var(--line); }
.theme-light .cohort-workflow { --cohort-surface: #fff; --cohort-control: #f7f8fa; --cohort-border: #d8dee7; --role-lightness: 37%; --workflow-grid-line: rgba(72,84,99,.04); background-color: #fbfcfe; }
.cohort-viewport { position: absolute; inset: 0 4px 0 0; overflow: auto; overflow-anchor: none; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.cohort-viewport::-webkit-scrollbar { width: 6px; height: 6px; }
.cohort-viewport::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 8px; }
.cohort-viewport::-webkit-scrollbar-track, .cohort-viewport::-webkit-scrollbar-corner { background: transparent; }
.cohort-stage-space { position: relative; overflow: hidden; }
.cohort-stage { position: absolute; transform-origin: top left; }
.cohort-node, .cohort-empty { cursor: auto; }
.cohort-is-panning, .cohort-is-panning * { cursor: grabbing !important; user-select: none; }
.cohort-is-zooming .cohort-stage { will-change: transform; }
.cohort-links { position: absolute; inset: 0; fill: none; pointer-events: none; }
.cohort-links path { stroke: var(--cohort-link-color, var(--dim)); stroke-width: 1.7; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; }
.cohort-links .cohort-flow-dot { fill: var(--cohort-link-color, var(--dim)); }
@media (prefers-reduced-motion: reduce) { .cohort-links .cohort-flow-dot { display: none; } }
.cohort-node { position: absolute; width: 240px; height: 180px; display: grid; grid-template-rows: 18px 30px 30px 32px 16px; gap: 7px; padding: 12px; border: 1px solid var(--cohort-border); border-radius: 12px; color: var(--text); background: var(--cohort-surface); box-shadow: 0 4px 14px #00000012; }
.cohort-node:hover { border-color: color-mix(in srgb, var(--role-color, hsl(var(--role-hue) 54% var(--role-lightness))) 50%, var(--cohort-border)); }
.cohort-node header { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.cohort-node-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cohort-node.is-running { border-color: var(--accent-ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ring) 24%, transparent); }
.modal.cohort-run-dialog { --run-scroll-thumb: #858c98; box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-height: min(82vh, 760px); padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--editor); color: var(--text); }
.theme-light .modal.cohort-run-dialog { --run-scroll-thumb: #68717f; }
.cohort-run-dialog .modal-title { min-height: 26px; margin-bottom: 10px; }
.cohort-run-dialog .modal-title h2 { font-size: 15px; }
.cohort-run-dialog .modal-title button { width: 26px; height: 26px; }
.cohort-run-dialog-body { display: grid; gap: 8px; padding: 0; overflow: auto; }
.cohort-run-dialog-body > p { margin: 0; color: var(--muted); line-height: 1.45; }
.cohort-run-dialog-body > label { margin: 0; color: var(--text); font-weight: 550; }
.cohort-run-dialog-body textarea { box-sizing: border-box; width: 100%; min-height: 78px; resize: vertical; overflow-y: auto; scrollbar-gutter: stable; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--sidebar); color: var(--text); font: inherit; }
.cohort-run-dialog-body textarea:is(:focus, :focus-visible) { border-color: #969ba4; outline: none; box-shadow: none; }
.theme-light .cohort-run-dialog-body textarea:is(:focus, :focus-visible) { border-color: #707987; }
.modal.cohort-run-dialog, .cohort-run-dialog-body, .cohort-run-dialog-body textarea, .cohort-run-results, .cohort-run-result pre { scrollbar-width: thin; scrollbar-color: var(--run-scroll-thumb) transparent; }
.modal.cohort-run-dialog::-webkit-scrollbar, .cohort-run-dialog-body::-webkit-scrollbar, .cohort-run-dialog-body textarea::-webkit-scrollbar, .cohort-run-results::-webkit-scrollbar, .cohort-run-result pre::-webkit-scrollbar { width: 9px; background: transparent; }
.modal.cohort-run-dialog::-webkit-scrollbar-track, .cohort-run-dialog-body::-webkit-scrollbar-track, .cohort-run-dialog-body textarea::-webkit-scrollbar-track, .cohort-run-results::-webkit-scrollbar-track, .cohort-run-result pre::-webkit-scrollbar-track { background: transparent; }
.modal.cohort-run-dialog::-webkit-scrollbar-thumb, .cohort-run-dialog-body::-webkit-scrollbar-thumb, .cohort-run-dialog-body textarea::-webkit-scrollbar-thumb, .cohort-run-results::-webkit-scrollbar-thumb, .cohort-run-result pre::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--run-scroll-thumb); background-clip: padding-box; }
.modal.cohort-run-dialog::-webkit-scrollbar-button, .cohort-run-dialog-body::-webkit-scrollbar-button, .cohort-run-dialog-body textarea::-webkit-scrollbar-button, .cohort-run-results::-webkit-scrollbar-button, .cohort-run-result pre::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.cohort-run-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.cohort-run-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); }
.cohort-run-actions button.primary { color: var(--button-primary-fg); background: var(--button-primary-bg); border-color: var(--button-primary-bg); }
.cohort-run-actions .ui-icon { width: 15px; height: 15px; }
.cohort-run-dialog-body .cohort-run-status { color: var(--text); font-weight: 550; }
.cohort-run-dialog-body .cohort-run-error { color: #bd3e48; }
.cohort-run-results { display: grid; gap: 10px; max-height: 290px; overflow: auto; }
.cohort-run-result { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.cohort-run-result header { display: flex; justify-content: space-between; gap: 8px; }
.cohort-run-result small { color: var(--muted); }
.cohort-run-result pre { margin: 8px 0 0; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.4; }
.cohort-category { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--role-color, hsl(var(--role-hue) 54% var(--role-lightness,74%))); white-space: nowrap; font-size: var(--type-caption); }
.theme-light .cohort-category { color: color-mix(in srgb, var(--role-color, #555) 70%, #111 30%); }
.cohort-category i { flex: 0 0 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cohort-category img { width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; }
.cohort-node-edit { flex: 0 0 24px; height: 24px; display: grid; place-items: center; color: var(--dim); border-radius: 5px; }
.cohort-node-edit:hover { color: var(--text); background: var(--cohort-control); }
.cohort-node-edit .ui-icon { width: 15px; height: 15px; }
.cohort-node-title { min-width: 0; text-align: left; font-weight: 550; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cohort-node-purpose { margin: 0; color: var(--dim); line-height: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cohort-node .cohort-model-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--cohort-border); border-radius: 8px; background: var(--cohort-control); color: var(--text); font: 450 var(--type-secondary)/1 var(--font-ui); }
.cohort-node .cohort-model-toggle:hover, .cohort-node .cohort-model-toggle[aria-expanded="true"] { border-color: var(--accent-ring); background: color-mix(in srgb, var(--text) 7%, var(--cohort-control)); }
.cohort-node .cohort-model-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 1px; }
.cohort-model-toggle > .ui-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.cohort-model-toggle > .ui-icon:last-child { width: 13px; height: 13px; flex-basis: 13px; transform: rotate(90deg); }
.cohort-model-popover { z-index: 35; left: 12px; top: 12px; right: auto; bottom: auto; width: min(410px, calc(100% - 24px)); max-height: calc(100% - 24px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; padding-bottom: 2px; cursor: auto; touch-action: auto; animation: none; }
.cohort-model-popover:focus { outline: none; }
.cohort-model-popover.is-opening { animation: cohort-model-menu-in .16s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cohort-model-menu-in { from { opacity: 0; transform: translateY(var(--cohort-menu-entry-y, -5px)) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cohort-model-current { min-width: 0; min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 3px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--text) 5%, var(--editor)); color: var(--text); }
.cohort-model-current-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.cohort-model-current-label > .ui-icon, .cohort-model-current-label > .model-picker-logo { flex: 0 0 20px; width: 20px; height: 20px; }
.cohort-model-current-label > strong { overflow: hidden; font: 600 var(--type-secondary)/1.2 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.cohort-model-current > button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 5px; border: 0; border-radius: 5px; color: var(--muted); font: 500 var(--type-caption)/1 var(--font-ui); }
.cohort-model-current > button:hover, .cohort-model-current > button:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.cohort-model-current > button .ui-icon { width: 13px; height: 13px; }
.cohort-model-source-tabs { gap: 3px; margin: 0 2px 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.theme-light .cohort-model-source-tabs { background: #f8f9fb; }
.cohort-model-popover .cohort-model-source-tabs > button { min-height: 32px; justify-content: center; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; color: var(--muted); transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease; }
.cohort-model-popover .cohort-model-source-tabs > .chat-model-info { border-right: 1px solid transparent; border-radius: 6px; }
.cohort-model-source-tabs .chat-model-footer-label { justify-content: center; gap: 8px; }
.cohort-model-popover .cohort-model-source-tabs > button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.cohort-model-popover .cohort-model-source-tabs > button[aria-pressed="true"],
.cohort-model-popover .cohort-model-source-tabs > button[aria-pressed="true"]:hover { color: var(--text); background: var(--editor); border-color: color-mix(in srgb, var(--text) 13%, var(--editor)); box-shadow: 0 1px 3px #0000001c; font-weight: 600; }
.cohort-model-source-tabs > button:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: -1px; }
.cohort-model-popover .chat-model-list > [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cohort-model-popover.is-opening { animation: none; } .cohort-model-popover .cohort-model-source-tabs > button { transition: none; } }
.cohort-model-popover .chat-model-list > button { min-height: 33px; grid-template-columns: 32px minmax(0, 1fr) 14px 17px; column-gap: 8px; padding-inline: 6px 8px; }
.cohort-model-popover .chat-model-list > button:hover,
.cohort-model-popover .chat-model-list > button:focus-visible { background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.cohort-model-popover .chat-model-list > button[aria-selected="true"] { background: color-mix(in srgb, var(--text) 11%, var(--editor)); }
.cohort-model-popover .chat-model-list > button[aria-selected="true"]:hover,
.cohort-model-popover .chat-model-list > button[aria-selected="true"]:focus-visible { background: color-mix(in srgb, var(--text) 14%, var(--editor)); }
.cohort-model-popover .chat-model-list > button > :first-child { grid-column: 1; grid-row: 1; justify-self: center; }
.cohort-model-popover .chat-model-list > button > .ui-icon:first-child { width: 19px; height: 19px; }
.cohort-model-popover .chat-model-list > button > .cohort-model-name { grid-column: 2; grid-row: 1; }
.cohort-model-popover .chat-model-list > button > .cohort-model-detail-icon { grid-column: 4; grid-row: 1; width: 17px; height: 17px; display: grid; place-items: center; color: var(--dim); border-radius: 50%; }
.cohort-model-popover .chat-model-list > button[aria-selected="true"] > .ui-icon:last-child { grid-column: 3; grid-row: 1; }
.cohort-model-popover .cohort-model-detail-icon .ui-icon { width: 14px; height: 14px; }
.cohort-model-popover .chat-model-list > button:hover .cohort-model-detail-icon,
.cohort-model-popover .chat-model-list > button:focus-visible .cohort-model-detail-icon { color: var(--muted); }
.cohort-model-popover .chat-model-list > button .cohort-model-detail-icon:hover { color: var(--text); background: color-mix(in srgb, var(--text) 11%, transparent); }
.cohort-model-popover .chat-model-footer:not(.cohort-model-source-tabs) > button { min-height: 26px; padding-block: 2px; }
.cohort-model-detail-tooltip { position: absolute; z-index: 2; width: max-content; max-width: min(260px, calc(100% - 12px)); padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--editor); box-shadow: 0 8px 22px #00000030; color: var(--text); font: 450 var(--type-caption)/1.35 var(--font-ui); pointer-events: none; }
.cohort-model-detail-tooltip .is-download-required { color: #f1868c; }
.cohort-model-detail-tooltip .is-downloaded { color: #65d19d; }
.theme-light .cohort-model-detail-tooltip .is-download-required { color: #b4373f; }
.theme-light .cohort-model-detail-tooltip .is-downloaded { color: #137044; }
.cohort-model-popover .chat-model-empty { grid-column: 1 / -1; }
.cohort-node footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); }
.cohort-node footer > span { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cohort-node footer .ui-icon { flex: 0 0 12px; width: 12px; height: 12px; }
.cohort-node footer em { flex: 0 0 auto; font-style: normal; font-size: var(--type-caption); }
.cohort-node .needs-model { color: #d5ac78; }
.cohort-empty { position: absolute; inset: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.cohort-workflow .zoom-control { right: 12px; bottom: 12px; height: 36px; border: 1px solid var(--cohort-border); border-radius: 9px; background: var(--cohort-surface); box-shadow: 0 5px 18px #0000001a; }
.cohort-workflow .zoom-control button { flex: 0 0 34px; width: 34px; border-right: 1px solid var(--cohort-border); }
.cohort-workflow .zoom-control button:first-child { flex-basis: 55px; width: 55px; padding: 0 7px; }
.cohort-workflow .zoom-control button:nth-child(2) { border-right: 0; }
.cohort-workflow .zoom-control span { flex: 0 0 48px; display: grid; place-items: center; }
.cohort-workflow .zoom-control button:last-child { border-right: 0; }
.cohort-workflow .zoom-control button:hover { background: var(--cohort-control); }
.cohort-workflow .zoom-control button:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: -1px; }
.cohort-workflow .zoom-control .ui-icon { width: 16px; height: 16px; }
.cohort-empty > .ui-icon { width: 28px; height: 28px; color: var(--muted); }
.cohort-empty h2 { margin: 16px 0 0; color: var(--text); }
.cohort-empty button { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; }
.cohort-empty button .ui-icon { width: 16px; height: 16px; }
.modal.cohort-agent-dialog { --role-lightness: 74%; width: min(880px, calc(100vw - 40px)); max-height: calc(100vh - 80px); padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--editor); border-color: var(--line); }
.theme-light .cohort-agent-dialog { --role-lightness: 37%; }
.cohort-agent-dialog .modal-title { flex: 0 0 auto; margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.cohort-dialog-body { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); min-height: 0; height: 650px; overflow: hidden; }
.cohort-library { display: flex; min-height: 0; flex-direction: column; padding: 16px; border-right: 1px solid var(--line-soft); gap: 10px; }
.cohort-library-search { position: relative; margin: 0 !important; }
.cohort-library-search > .ui-icon { position: absolute; width: 16px; height: 16px; top: 50%; left: 12px; transform: translateY(-50%); pointer-events: none; color: var(--dim); }
.cohort-agent-dialog input, .cohort-agent-dialog select { min-width: 0; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--sidebar); box-shadow: none; }
.cohort-agent-dialog input:focus, .cohort-agent-dialog select:focus { outline: none; border-color: var(--accent-ring); box-shadow: none; }
.cohort-library-search input { padding-left: 38px; }
.cohort-select { position: relative; min-width: 0; }
.cohort-select-toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--sidebar); color: var(--text); text-align: left; }
.cohort-select-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cohort-select-toggle > .ui-icon { flex: 0 0 14px; width: 14px; height: 14px; margin-left: auto; color: var(--dim); transform: rotate(90deg); }
.cohort-select.is-open .cohort-select-toggle > .ui-icon { transform: rotate(-90deg); }
.cohort-select-toggle:hover, .cohort-select.is-open .cohort-select-toggle { border-color: var(--muted); }
.cohort-select-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 1px; }
.cohort-select-menu { right: 0; left: 0; width: 100%; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.cohort-select-menu[hidden] { display: none; }
.cohort-select-menu .home-activity-metric-option { width: 100%; }
.cohort-select-menu .home-activity-metric-option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cohort-select-group { padding: 7px 9px 3px; color: var(--muted); font-size: var(--type-caption); font-weight: 600; }
.cohort-select[data-cohort-select="modelValue"] .cohort-select-menu { top: auto; bottom: calc(100% + 7px); }
.cohort-dialog-model-select .cohort-select-toggle { gap: 9px; }
.cohort-dialog-model-select .cohort-select-toggle > .model-picker-logo,
.cohort-dialog-model-select .cohort-select-toggle > .ui-icon:first-child { flex: 0 0 20px; width: 20px; height: 20px; }
.cohort-dialog-model-select .cohort-select-toggle > .ui-icon:first-child { margin-left: 0; transform: none; }
.cohort-dialog-model-select.is-open .cohort-select-toggle > .ui-icon:first-child { transform: none; }
.cohort-dialog-model-popover { z-index: 30; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; max-height: min(310px, calc(100dvh - 220px)); overflow: visible; }
.cohort-dialog-model-popover .chat-model-list { max-height: none; }
.cohort-dialog-model-popover .chat-model-list > button.is-local { min-height: 56px; }
.cohort-dialog-model-popover .chat-model-list > button:hover,
.cohort-dialog-model-popover .chat-model-list > button:focus-visible { background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.cohort-dialog-model-popover .chat-model-list > button[aria-checked="true"] { border-color: var(--line); background: color-mix(in srgb, var(--text) 9%, var(--editor)); }
.cohort-dialog-model-popover .chat-model-list > button > .ui-icon:first-child { width: 20px; height: 20px; }
#cohort-library-results { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cohort-library-count { margin: 0 0 10px; color: var(--dim); }
.cohort-library-list { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; padding-right: 3px; }
.cohort-role-option { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 38px; margin: 0 0 2px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; text-align: left; }
.cohort-role-option strong { min-width: 0; font-weight: 450; line-height: 1.3; }
.cohort-role-option .cohort-category { justify-self: end; }
.cohort-role-option:hover { background: var(--sidebar); }
.cohort-role-option.is-selected { border-color: var(--accent-ring); background: var(--accent-soft); }
.cohort-role-select-option { margin-bottom: 0; cursor: pointer; }
.cohort-role-select-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cohort-role-select-option.is-selected { border-color: transparent; background: color-mix(in srgb, var(--text) 9%, var(--editor)); }
.cohort-role-select-option:focus-visible { outline: 1px solid var(--text); outline-offset: -2px; }
.cohort-role-detail { min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; padding: 20px; }
.cohort-role-detail h3 { margin: 12px 0 10px; font-size: var(--type-body); font-weight: 600; }
.cohort-role-detail p { color: var(--muted); line-height: 1.6; }
.cohort-role-detail > label, .cohort-role-detail > .cohort-field { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 0; color: var(--muted); }
.cohort-role-detail .cohort-model-help { color: var(--dim); margin: 8px 0; }
.cohort-dialog-error { color: #ed8b91; margin-top: 12px; }
.cohort-dialog-error:empty { display: none; }
.cohort-form-actions, .cohort-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cohort-form-actions button, .cohort-edit-actions button { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; }
.cohort-form-actions button.primary { background: var(--button-primary-bg); color: var(--button-primary-fg); border-color: var(--button-primary-bg); }
.cohort-form-actions .ui-icon, .cohort-edit-actions .ui-icon { width: 15px; height: 15px; }
.cohort-edit-actions { justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.cohort-edit-actions .danger { color: #e8888c; }
.modal.cohort-edit-dialog { width: min(460px, calc(100vw - 40px)); }
.cohort-dialog-body.is-editing { display: block; height: auto; overflow: auto; }
.cohort-no-results { color: var(--dim); padding: 10px; line-height: 1.6; }
@media (max-width: 700px) {
  .cohort-dialog-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, .8fr) minmax(240px, 1fr); }
  .cohort-library { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 12px; }
  .cohort-role-detail { padding: 16px; }
}
.connections-main { border-right: 0; }
.connections-main > .available-connections { inset: calc(var(--topbar-height) + 20px) 24px 20px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.connections-main .provider-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-content: start; align-items: start; }
.connections-main .connection-empty { grid-column: 1 / -1; min-height: 240px; }
.connections-main .add-connection-button { width: auto; justify-self: start; padding-inline: 16px; }
.theme-dark .omnesly-chat-bar { background: var(--sidebar); }
.theme-light .omnesly-chat-bar { border-color: var(--chat-bar-border-color); }
.theme-light .omnesly-chat-activity {
  border-color: rgba(174, 180, 190, .88);
  background: rgba(255, 255, 255, .93);
}
.theme-light .omnesly-chat-bar:focus-within { border-color: var(--chat-bar-border-color); }
.theme-light .omnesly-chat-tool,
.theme-light .omnesly-chat-submit:not(.is-cancel),
.theme-light .omnesly-chat-provider .chat-model-toggle { color: var(--composer-tool-color, var(--muted)); background: rgba(64, 75, 90, .07); }
.theme-light .composer-add-popover { border-color: #c8ccd3; background: #fff; box-shadow: 0 14px 34px rgba(38,45,56,.16); }
.theme-light .composer-add-popover button:hover { background: rgba(64, 75, 90, .07); }
.theme-light .omnesly-chat-input { color: #252a31; }
.reduce-transparency .omnesly-chat-activity { background: #2a2a2a; backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-light.reduce-transparency .omnesly-chat-activity { background: #fff; }
@media (max-width: 880px) {
  .omnesly-chat-dock { bottom: 28px; width: min(680px, calc(100% - 32px)); }
}
@media (max-width: 620px) {
  .omnesly-chat-provider .chat-model-toggle { width: 156px; min-width: 0; max-width: 38vw; }
}
.composer-attachment-dialog { width: min(520px, calc(100vw - 32px)); }
.composer-file-list {
  max-height: min(420px, 55vh);
  display: grid;
  gap: 4px;
  overflow-y: auto;
  padding: 3px;
}
.composer-file-list > button {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 9px;
  color: var(--text);
  text-align: left;
}
.composer-file-list > button:hover { border-color: var(--line); background: rgba(255, 255, 255, .045); }
.composer-file-list > button > .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
.composer-file-list > button > span { min-width: 0; display: grid; gap: 2px; }
.composer-file-list strong,
.composer-file-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-file-list em { color: var(--dim); font-style: normal; }
.composer-file-empty { min-height: 72px; display: grid; place-items: center; color: var(--dim); }
.theme-light .composer-file-list > button:hover { background: rgba(64, 75, 90, .055); }

/* Keep every Omnesly-owned text surface, including form controls and rich text,
   at the same 12px Inter size regardless of older component-specific rules. */
body,
body *,
body *::before,
body *::after,
body *::placeholder,
body *::marker {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
}

/* Work studio: a calm creation dashboard transitions into a focused,
   type-aware editing shell without duplicating the application's navigation. */
.work-product-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.work-product-title:hover { color: var(--text); }
.work-frame .product-topbar .topbar-action {
  height: 30px;
  min-height: 30px;
  margin-left: 0;
  padding-inline: 10px;
}
.work-home {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(28px, 4vw, 54px) clamp(24px, 5vw, 72px) 72px;
  color: var(--text);
  background: var(--editor);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.work-home > section { width: min(1080px, 100%); margin-inline: auto; }
.work-home-hero { margin-bottom: 26px; }
.work-home-hero > span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-ui);
  font-weight: 620;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.work-home-hero h2 { margin: 0; color: var(--text); font-weight: 570; letter-spacing: -.018em; }
.work-home-hero p { max-width: 560px; margin: 9px 0 0; color: var(--muted); line-height: 1.55; }
.work-create-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.work-create-card {
  position: relative;
  min-width: 0;
  height: 190px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--editor) 84%, var(--text) 4%);
  text-align: left;
  transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.work-create-card:hover { border-color: color-mix(in srgb, var(--line) 62%, var(--text)); transform: translateY(-2px); }
.work-create-card.is-available:hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.work-create-card > span:nth-of-type(2) { min-width: 0; display: grid; gap: 4px; padding-top: 1px; }
.work-create-card strong { color: var(--text); font-weight: 590; }
.work-create-card em { color: var(--dim); font-style: normal; line-height: 1.4; }
.work-create-card > b { display: flex; align-items: center; gap: 4px; color: var(--dim); font-weight: 500; white-space: nowrap; }
.work-create-card.is-available > b { color: var(--accent-ui); }
.work-create-card > b .ui-icon { width: 14px; height: 14px; }
.work-kind-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.work-kind-icon .ui-icon { width: 19px; height: 19px; }
.work-kind-icon.spreadsheet { color: #188a5a; background: rgba(32, 164, 106, .13); }
.work-kind-icon.spreadsheet > i { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 2px; background: repeating-linear-gradient(to right, transparent 0 5px, currentColor 5px 6px), repeating-linear-gradient(to bottom, transparent 0 5px, currentColor 5px 6px); opacity: .9; }
.work-kind-icon.presentation { color: #d06a32; background: rgba(222, 112, 54, .14); }
.work-kind-icon.presentation > i { width: 19px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: 0 4px 0 -2px color-mix(in srgb, currentColor 70%, transparent); }
.work-type-preview {
  position: absolute;
  right: 16px;
  bottom: -18px;
  left: 16px;
  height: 92px;
  border: 1px solid var(--line-soft);
  border-radius: 9px 9px 0 0;
  background: color-mix(in srgb, var(--editor) 88%, white 7%);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
.document-preview { display: grid; align-content: start; gap: 7px; padding: 17px 19px; }
.document-preview i { height: 3px; border-radius: 3px; background: var(--line); }
.document-preview i:first-child { width: 44%; height: 5px; background: var(--muted); }
.document-preview i:nth-child(3) { width: 78%; }
.spreadsheet-preview { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 22px); overflow: hidden; }
.spreadsheet-preview i { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.spreadsheet-preview i:nth-child(-n+5) { background: color-mix(in srgb, #188a5a 10%, transparent); }
.presentation-preview { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: repeat(2, 34px); gap: 6px; padding: 9px; }
.presentation-preview i { border: 1px solid var(--line-soft); border-radius: 3px; background: color-mix(in srgb, #d06a32 8%, transparent); }
.presentation-preview i:first-child { grid-row: 1 / 3; background: color-mix(in srgb, var(--editor) 90%, white 6%); }
.presentation-preview i:nth-child(2) { width: 58%; }
.presentation-preview i:nth-child(3) { width: 84%; }
.work-recent { margin-top: 38px; }
.work-recent > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.work-recent > header > span { display: flex; align-items: baseline; gap: 8px; }
.work-recent h3 { margin: 0; color: var(--text); font-weight: 570; }
.work-recent header em { color: var(--dim); font-style: normal; }
.work-recent header button,
.work-recent-empty button {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
}
.work-recent header button:hover,
.work-recent-empty button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.work-recent header button .ui-icon { width: 15px; height: 15px; }
.work-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.work-recent-grid > button {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.work-recent-grid > button:hover { border-color: var(--line-soft); background: color-mix(in srgb, var(--text) 4%, transparent); }
.work-recent-preview {
  aspect-ratio: 4 / 3;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px 18px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(20, 28, 40, .07);
}
.work-recent-preview i { height: 3px; border-radius: 3px; background: #d8dbe1; }
.work-recent-preview i:first-child { width: 55%; height: 5px; background: #848484; }
.work-recent-preview i:nth-child(3) { width: 86%; }
.work-recent-grid > button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.work-recent-grid strong,
.work-recent-grid em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-recent-grid strong { font-weight: 560; }
.work-recent-grid em { color: var(--dim); font-style: normal; }
.work-recent-grid > button > b { position: absolute; top: 14px; right: 14px; border-radius: 999px; padding: 4px 7px; color: var(--accent-ui); background: var(--accent-soft); font-weight: 560; }
.work-recent-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line); border-radius: 14px; color: var(--dim); text-align: center; }
.work-recent-empty > .ui-icon { width: 28px; height: 28px; margin-bottom: 4px; }
.work-recent-empty strong { color: var(--text); font-weight: 560; }
.work-recent-empty button { margin-top: 8px; color: var(--accent-ui); }

.work-layout.is-editing {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 0;
  padding: 0 0 108px;
  background: var(--editor);
  transition: grid-template-columns var(--motion-panel) var(--ease-emphasized);
}
.work-layout.is-editing.work-library-is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.work-layout.is-editing .work-library {
  min-width: 0;
  overflow: hidden;
  grid-template-rows: 52px auto minmax(0, 1fr) auto;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: color-mix(in srgb, var(--editor) 93%, var(--text) 3%);
  transition: opacity var(--motion-panel) var(--ease-standard), visibility var(--motion-panel) var(--ease-standard);
}
.work-library-is-collapsed .work-library { opacity: 0; visibility: hidden; }
.work-layout.is-editing .work-library > header { min-width: 210px; height: 52px; gap: 5px; padding: 0 12px; }
.work-library > header > button { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 7px; color: var(--muted); background: transparent; transform: rotate(180deg); }
.work-library > header > button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.work-library > header > button .ui-icon { width: 16px; height: 16px; }
.work-layout.is-editing .work-library > label { min-width: 190px; }
.work-library-new {
  min-width: 196px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
}
.work-library-new:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.work-library-new .ui-icon { width: 15px; height: 15px; }
.work-canvas { min-width: 0; min-height: 0; overflow: hidden; }
.work-editor-shell { border: 0; border-radius: 0; background: var(--editor); }
.work-document-head { min-height: 52px; flex-wrap: nowrap; gap: 8px; padding: 0 12px; background: var(--editor); }
.work-library-toggle { width: 30px; min-height: 30px; flex: 0 0 30px; display: grid !important; place-items: center; border: 0 !important; padding: 0 !important; background: transparent !important; }
.work-library-toggle:hover { background: color-mix(in srgb, var(--text) 6%, transparent) !important; }
.work-library-toggle .ui-icon { width: 17px; height: 17px; }
.work-document-identity { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.work-document-identity > .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); }
.work-document-head .work-document-identity input {
  min-width: 80px;
  height: 30px;
  flex: 0 1 360px;
  border-radius: 6px;
  padding: 0 6px;
  font-weight: 560;
}
.work-document-head .work-document-identity input:focus { background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.work-save-state { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.work-save-state .ui-icon { width: 13px; height: 13px; }
.work-document-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.work-document-actions button { min-height: 30px; }
.work-document-actions button.danger-quiet { width: 30px; padding: 0; justify-content: center; }
.work-document-actions button.danger-quiet:not(:hover) { color: var(--muted); }
.work-format-toolbar {
  min-height: 42px;
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--editor) 96%, var(--text) 2%);
  scrollbar-width: none;
}
.work-format-toolbar > i { width: 1px; height: 20px; flex: 0 0 1px; margin: 0 4px; background: var(--line-soft); }
.work-format-toolbar button { min-width: auto; flex: 0 0 auto; }
.work-format-toolbar > span { flex: 1 1 auto; }
.work-editor-area {
  overflow: auto;
  align-items: start;
  gap: 18px;
  padding: 30px clamp(18px, 3vw, 42px) 72px;
  background: color-mix(in srgb, var(--editor) 86%, var(--text) 5%);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#work-document-editor,
.work-suggestion-preview article {
  width: min(760px, calc(100% - 24px));
  min-height: 860px;
  overflow: visible;
  margin: 0 auto;
  border: 1px solid rgba(120, 128, 140, .28);
  border-radius: 4px;
  padding: 64px clamp(48px, 8vw, 92px) 90px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 28, 40, .09);
}
.work-editor-shell.is-previewing #work-document-editor,
.work-editor-shell.is-previewing .work-suggestion-preview article { width: auto; min-height: 760px; }
.work-suggestion-preview { border: 0; border-radius: 8px; background: var(--editor); }
.work-revisions { min-height: 34px; background: var(--editor); }
.work-layout.is-editing > .omnesly-chat-dock {
  left: calc(50% + 114px);
  bottom: 14px;
  width: min(780px, calc(100% - 268px));
}
.work-layout.is-editing.work-library-is-collapsed > .omnesly-chat-dock { left: 50%; width: min(780px, calc(100% - 40px)); }

.work-create-dialog { width: min(860px, calc(100vw - 40px)); }
.work-create-dialog-body { display: grid; gap: 20px; padding: 18px; }
.work-create-dialog-body > p { margin: 0; color: var(--muted); line-height: 1.5; }
.work-create-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.work-create-kind { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px; opacity: .68; }
.work-create-kind.is-available { border-color: var(--accent-ring); opacity: 1; }
.work-create-kind > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.work-create-kind strong { color: var(--text); font-weight: 570; }
.work-create-kind em { overflow: hidden; color: var(--dim); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.work-create-kind > b { color: var(--dim); font-weight: 520; }
.work-create-kind.is-available > b { color: var(--accent-ui); }
.work-template-heading { display: flex; align-items: baseline; gap: 8px; padding-top: 2px; }
.work-template-heading strong { color: var(--text); font-weight: 580; }
.work-template-heading span { color: var(--dim); }
.work-template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.work-template-grid > button { min-width: 0; display: grid; gap: 5px; border: 1px solid transparent; border-radius: 11px; padding: 8px; color: var(--text); background: transparent; text-align: left; }
.work-template-grid > button:hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); }
.work-template-grid > button > strong,
.work-template-grid > button > em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-template-grid > button > strong { font-weight: 560; }
.work-template-grid > button > em { color: var(--dim); font-style: normal; }
.work-template-sheet { height: 112px; display: grid; align-content: start; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 22px 18px; background: #fff; box-shadow: 0 3px 10px rgba(20, 28, 40, .07); }
.work-template-sheet i { height: 3px; border-radius: 2px; background: #d9dce1; }
.work-template-sheet i:first-child { width: 60%; height: 6px; background: #7b7b7b; }
.work-template-sheet.brief i:first-child { background: #1f48ff; }
.work-template-sheet.meeting i:first-child { background: #188a5a; }
.work-template-sheet.report i:first-child { background: #d06a32; }

.theme-light .work-home,
.theme-light .work-layout.is-editing,
.theme-light .work-editor-shell,
.theme-light .work-document-head,
.theme-light .work-revisions { background: #fff; }
.theme-light .work-create-card { background: #f8f9fb; }
.theme-light .work-create-card.is-available:hover { background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.theme-light .work-type-preview { background: #fff; }
.theme-light .work-layout.is-editing .work-library { border-color: #d9dde4; background: #f7f8fa; }
.theme-light .work-format-toolbar { background: #fbfbfc; }
.theme-light .work-editor-area { background: #eef0f3; }
.theme-light .work-library-new { border-color: #d1d6de; }

/* Work document ribbon: broad editing capability in a compact, original
   Omnesly layout rather than a copy of any desktop office suite. */
.work-editor-shell {
  --work-page-width: 760px;
  --work-page-height: 860px;
  --work-page-margin: 92px;
  --work-page-zoom: 1;
}
.work-ribbon {
  min-width: 0;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--editor) 92%, var(--text) 4%);
}
.work-ribbon-tabs {
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  padding: 4px 9px;
  border-bottom: 1px solid var(--line-soft);
  scrollbar-width: none;
}
.work-ribbon-tabs::-webkit-scrollbar,
.work-ribbon-panel::-webkit-scrollbar { display: none; }
.work-ribbon-tabs > button {
  height: 27px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 10px;
  color: var(--dim);
  background: transparent;
  font-weight: 540;
}
.work-ribbon-tabs > button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.work-ribbon-tabs > button.active { border-color: var(--accent-ring); color: var(--accent-ui); background: var(--accent-soft); box-shadow: none; }
.work-ribbon-tabs > span { min-width: 12px; flex: 1 1 auto; }
.work-ribbon-tabs > small { flex: 0 0 auto; align-self: center; border-radius: 999px; padding: 4px 8px; color: var(--dim); background: color-mix(in srgb, var(--text) 5%, transparent); white-space: nowrap; }
.work-ribbon-tabs > .work-ribbon-collapse {
  position: sticky;
  z-index: 2;
  right: 0;
  width: 27px;
  flex: 0 0 27px;
  padding: 0;
  border-radius: 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--editor) 96%, var(--text) 2%);
  box-shadow: -8px 0 10px color-mix(in srgb, var(--editor) 88%, transparent);
}
.work-ribbon-tabs > .work-ribbon-collapse:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.work-ribbon-panel {
  min-width: 0;
  height: 104px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: none;
  transition: height var(--motion-standard) var(--ease-emphasized), opacity var(--motion-fast) var(--ease-standard), padding var(--motion-standard) var(--ease-emphasized);
}
.work-ribbon.is-collapsed .work-ribbon-panel { height: 0; overflow: hidden; padding-block: 0; opacity: 0; }
.work-ribbon-group {
  min-width: max-content;
  display: grid;
  grid-template-rows: 14px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 7px 9px 6px;
  background: color-mix(in srgb, var(--editor) 97%, var(--text) 2%);
}
.work-ribbon-group > span:last-child { grid-row: 1; align-self: center; padding-left: 2px; color: var(--dim); font-weight: 620; letter-spacing: .035em; line-height: 1; text-align: left; text-transform: uppercase; }
.work-ribbon-group > :not(span:last-child) { grid-row: 2; }
.work-ribbon-cluster { display: flex; align-items: center; gap: 4px; }
.work-ribbon-cluster.paragraph-tools { width: 212px; display: grid; grid-template-columns: repeat(4, 50px); grid-template-rows: repeat(2, 29px); gap: 4px; }
.work-ribbon-cluster.paragraph-tools .work-ribbon-button { width: 100%; min-width: 0; }
.work-ribbon-cluster.history-tools { gap: 4px; }
.work-ribbon-button {
  min-width: 31px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 7px;
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
}
.work-ribbon-button:hover { border-color: var(--line-soft); color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.work-ribbon-button.is-active { border-color: var(--accent-ring); color: var(--accent-ui); background: var(--accent-soft); }
.work-ribbon-button.wide { min-width: 58px; }
.work-ribbon-button .ui-icon { width: 15px; height: 15px; }
.work-ribbon-button.align-center { text-align: center; transform: scaleX(.84); }
.work-ribbon-button.align-right { text-align: right; transform: scaleX(.72); }
.work-ribbon-selects { width: 174px; display: grid; grid-template-columns: 104px 66px; grid-template-rows: repeat(2, 28px); gap: 4px; }
.work-ribbon-selects > select:first-child { grid-column: 1 / -1; }
.work-ribbon select {
  min-width: 0;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 22px 0 7px;
  outline: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--editor) 94%, var(--text) 3%);
}
.work-ribbon select:focus { border-color: var(--accent-ring); box-shadow: none; }
.work-ribbon-type {
  min-width: 374px;
  grid-template-columns: 174px auto;
  grid-template-rows: 14px minmax(0, 1fr);
  column-gap: 8px;
}
.work-ribbon-type > .work-ribbon-selects { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
.work-ribbon-type > .work-ribbon-cluster { grid-column: 2; grid-row: 2; align-self: center; }
.work-ribbon-type > span:last-child { grid-column: 1 / -1; grid-row: 1; }
.work-ribbon-type .work-ribbon-button,
.work-ribbon-type .work-ribbon-color { width: 28px; min-width: 28px; }
.work-ribbon-color {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.work-ribbon-color:hover { border-color: var(--line-soft); color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.work-ribbon-color > input { position: absolute; right: 3px; bottom: 3px; left: 3px; width: 24px; height: 4px; overflow: hidden; border: 0; padding: 0; background: transparent; cursor: pointer; }
.work-ribbon-color > input::-webkit-color-swatch-wrapper { padding: 0; }
.work-ribbon-color > input::-webkit-color-swatch { border: 0; }
.work-ribbon-color.highlight > span { border-radius: 2px; background: rgba(255, 232, 86, .24); }
.work-ribbon-select-stack { display: grid; grid-template-columns: repeat(2, 116px); gap: 7px; }
.work-ribbon-select-stack label { display: grid; align-content: center; gap: 4px; color: var(--dim); }
.work-ribbon-select-stack select { width: 116px; }
.work-ribbon-tip { width: 232px; grid-template-rows: 14px 16px minmax(0, 1fr); align-content: center; gap: 3px; white-space: normal; }
.work-ribbon-tip > span:last-child { grid-row: 1; }
.work-ribbon-tip > strong { grid-row: 2; color: var(--text); font-weight: 590; }
.work-ribbon-tip > em { grid-row: 3; max-width: 214px; align-self: start; color: var(--dim); font-style: normal; line-height: 1.3; }
.work-ribbon-stat { width: 94px; grid-template-columns: auto auto; grid-template-rows: 14px minmax(0, 1fr); justify-content: center; column-gap: 5px; }
.work-ribbon-stat > span:last-child { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; }
.work-ribbon-stat > strong { grid-column: 1; grid-row: 2; align-self: center; color: var(--text); font-weight: 680; }
.work-ribbon-stat > em { grid-column: 2; grid-row: 2; align-self: center; margin: 0; color: var(--dim); font-style: normal; }
.work-ribbon-ai .work-ribbon-cluster { align-self: center; }
.work-ribbon-zoom { min-width: 44px; color: var(--muted); text-align: center; }
.work-page-ruler {
  width: min(var(--work-page-width), calc(100% - 48px));
  height: 19px;
  flex: 0 0 19px;
  margin: 0 auto;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--editor) 94%, var(--text) 3%);
}
.work-page-ruler > span {
  height: 100%;
  display: block;
  opacity: .62;
  background: repeating-linear-gradient(to right, var(--dim) 0 1px, transparent 1px 12px);
  mask: linear-gradient(to bottom, #000 0 5px, transparent 5px);
}
.work-editor-shell[data-ruler="false"] .work-page-ruler { display: none; }
.work-editor-shell[data-page-size="a4"] { --work-page-width: 720px; --work-page-height: 900px; }
.work-editor-shell[data-page-size="legal"] { --work-page-width: 760px; --work-page-height: 1040px; }
.work-editor-shell[data-orientation="landscape"] { --work-page-width: 980px; --work-page-height: 640px; }
.work-editor-shell[data-margins="narrow"] { --work-page-margin: 48px; }
.work-editor-shell[data-margins="wide"] { --work-page-margin: 122px; }
.work-editor-shell[data-zoom="70"] { --work-page-zoom: .7; }
.work-editor-shell[data-zoom="80"] { --work-page-zoom: .8; }
.work-editor-shell[data-zoom="90"] { --work-page-zoom: .9; }
.work-editor-shell[data-zoom="100"] { --work-page-zoom: 1; }
.work-editor-shell[data-zoom="110"] { --work-page-zoom: 1.1; }
.work-editor-shell[data-zoom="120"] { --work-page-zoom: 1.2; }
.work-editor-shell[data-zoom="130"] { --work-page-zoom: 1.3; }
.work-editor-shell[data-zoom="140"] { --work-page-zoom: 1.4; }
.work-editor-shell #work-document-editor,
.work-editor-shell .work-suggestion-preview article {
  width: min(var(--work-page-width), calc(100% - 24px));
  min-height: var(--work-page-height);
  padding: 64px min(var(--work-page-margin), 10vw) 90px;
  zoom: var(--work-page-zoom);
}
.work-editor-shell #work-document-editor h1,
.work-editor-shell .work-suggestion-preview h1 { font-size: 26px !important; line-height: 1.18; }
.work-editor-shell #work-document-editor h2,
.work-editor-shell .work-suggestion-preview h2 { font-size: 20px !important; line-height: 1.24; }
.work-editor-shell #work-document-editor h3,
.work-editor-shell .work-suggestion-preview h3 { font-size: 16px !important; line-height: 1.3; }
.work-editor-shell[data-page-width="true"] #work-document-editor { width: calc(100% - 24px); max-width: none; }
.theme-light .work-ribbon,
.theme-light .work-ribbon select,
.theme-light .work-page-ruler { background: #fbfbfc; }
.theme-light .work-ribbon-group { border-color: #dde1e7; background: #fff; }
.theme-light .work-ribbon-button:hover { background: #f0f2f5; }
.theme-light .work-ribbon-tabs > button.active { background: #eef1f6; }
.theme-light .work-ribbon-tabs > .work-ribbon-collapse { background: #fbfbfc; box-shadow: -8px 0 10px rgba(251, 251, 252, .92); }

@media (max-width: 1050px) {
  .work-home { padding-inline: 24px; }
  .work-layout.is-editing,
  .work-layout.is-editing.work-library-is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .work-layout.is-editing .work-library { display: none; }
  .work-layout.is-editing > .omnesly-chat-dock,
  .work-layout.is-editing.work-library-is-collapsed > .omnesly-chat-dock { left: 50%; width: min(680px, calc(100% - 32px)); }
  .work-library-toggle { display: none !important; }
  .work-recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .work-create-grid { grid-template-columns: 1fr; }
  .work-create-card { height: 154px; }
  .work-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-create-kinds { grid-template-columns: 1fr; }
  .work-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-document-head .work-document-identity input { flex-basis: 180px; }
  .work-ribbon-tabs > small { display: none; }
  .work-ribbon-panel { height: 104px; }
  .work-editor-shell { --work-page-margin: 54px; }
}
@media (max-width: 560px) {
  .work-home { padding: 22px 14px 54px; }
  .work-recent-grid { grid-template-columns: 1fr; }
  .work-recent-preview { aspect-ratio: 16 / 8; }
  .work-document-actions button:first-child { width: 30px; overflow: hidden; padding: 0; justify-content: center; }
  .work-document-actions button:first-child .ui-icon { flex: 0 0 auto; }
  .work-document-actions button:first-child > span { display: none; }
  .work-save-state { display: none; }
}
@media (max-width: 430px) {
  .work-frame .product-topbar { --topbar-gap: 6px; gap: var(--topbar-gap); }
  .work-frame .product-topbar .topbar-action { width: 30px; flex: 0 0 30px; padding: 0; }
  .work-frame .product-topbar .topbar-action > span { display: none; }
}

/* Univer is the editing engine inside Work. Omnesly keeps ownership of the
   file library, autosave state, version history, and AI dock around it. */
.work-univer-shell { min-width: 0; min-height: 0; overflow: hidden; }
.work-univer-area {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  background: #f1f3f6;
}
.work-univer-shell.is-previewing .work-univer-area { grid-template-columns: minmax(0, 1fr) minmax(300px, 38%); }
.work-univer-editor {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #1f2329;
  background: #f1f3f6;
  isolation: isolate;
}
.work-univer-editor > div:not(.work-univer-loading):not(.work-univer-error) { width: 100%; height: 100%; }
.work-univer-loading,
.work-univer-error {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: var(--muted);
  background: var(--editor);
}
.work-univer-loading > span {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--accent-ui);
  border-radius: 50%;
  animation: work-univer-spin .8s linear infinite;
}
@keyframes work-univer-spin { to { transform: rotate(1turn); } }
.work-univer-error .ui-icon { width: 24px; height: 24px; color: #d36b71; }
.work-univer-error strong { color: var(--text); font-weight: 600; }
.work-univer-error button { min-height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; color: var(--text); background: transparent; }
.work-univer-error button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.work-document-identity > .work-kind-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; }
.work-document-identity > .work-kind-icon .ui-icon,
.work-document-identity > .work-kind-icon.spreadsheet > i { width: 14px; height: 14px; }
.work-document-identity > .work-kind-icon.presentation > i { width: 15px; height: 11px; }
.work-document-list .work-kind-icon { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; }
.work-document-list .work-kind-icon .ui-icon,
.work-document-list .work-kind-icon.spreadsheet > i { width: 15px; height: 15px; }
.work-document-list .work-kind-icon.presentation > i { width: 16px; height: 12px; }
.work-univer-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--dim);
  background: color-mix(in srgb, var(--editor) 90%, var(--text) 4%);
  font-weight: 560;
  letter-spacing: .02em;
}
.work-recent-preview.spreadsheet {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-content: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.work-recent-preview.spreadsheet i { width: auto !important; height: auto !important; border-right: 1px solid #dfe4e7; border-bottom: 1px solid #dfe4e7; border-radius: 0; background: transparent; }
.work-recent-preview.spreadsheet i:first-child { grid-column: 1 / -1; background: #e4f5ec; }
.work-recent-preview.presentation { align-content: center; gap: 9px; padding: 20px; background: #fff7f2; }
.work-recent-preview.presentation i { height: 6px; background: #e8b99e; }
.work-recent-preview.presentation i:first-child { width: 70%; height: 10px; background: #d06a32; }
.work-create-kind:is(button) { cursor: pointer; text-align: left; background: transparent; }
.work-create-kind:is(button):hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.theme-light .work-univer-area,
.theme-light .work-univer-editor { background: #f1f3f6; }
.theme-dark .work-univer-area,
.theme-dark .work-univer-editor { background: #212121; }
.theme-dark .work-univer-badge { background: #2a2a2a; }
.work-univer-editor [data-u-comp="workbench"] { min-width: 0; min-height: 0; }

/* Keep the editor alive across application redraws, in its own CSS/focus scope. */
#work-editor-host { position: fixed; z-index: 3; overflow: hidden; }
#work-editor-host[hidden] { display: none; }
.work-editor-frame { display: block; width: 100%; height: 100%; border: 0; }
.work-univer-editor[aria-busy="false"] > .work-univer-loading { display: none; }
.work-layout.is-editing[data-assistant-open="false"] { padding-bottom: 0; }
.work-document-head { flex: 0 0 44px; min-height: 44px; padding: 0 12px; }
.work-home-button { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); }
.work-home-button .ui-icon { width: 16px; height: 16px; transform: rotate(180deg); }
.work-home-button:hover { background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.work-statusbar { display: flex; align-items: center; justify-content: space-between; min-height: 36px; flex: 0 0 36px; border-top: 1px solid var(--line-soft); background: var(--editor); }
.work-statusbar .work-revisions { flex: 1; min-width: 0; border: 0; min-height: 34px; }
.work-assistant-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 28px; margin: 3px 10px; padding: 0 10px; border-radius: 7px; color: var(--text); background: var(--accent-soft); }
.work-assistant-toggle .ui-icon { width: 16px; height: 16px; }
.work-save-state { border: 0 !important; background: transparent !important; }
.work-save-state.error { color: #d76770; }
.work-library > header > .work-library-close { margin-left: auto; transform: none; }
@media (max-width: 1080px) {
  .work-layout.is-editing .work-library { display: grid; position: absolute; inset: 0 auto 0 0; width: 228px; z-index: 20; box-shadow: 8px 0 24px rgba(0,0,0,.14); background: var(--editor); }
  .work-layout.is-editing.work-library-is-collapsed .work-library { display: none; }
  .work-library-toggle { display: grid !important; }
}

@media (max-width: 780px) {
  .work-univer-badge { display: none; }
  .work-univer-shell.is-previewing .work-univer-area { grid-template-columns: minmax(0, 1fr); }
  .work-univer-shell.is-previewing .work-suggestion-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work-univer-loading > span { animation-duration: 1.6s; }
}

.auth-captcha {
  display: flex;
  justify-content: center;
}

/* Shared visual primitives. Keep the existing Omnesly palette and typeface;
   these tokens give recurring surfaces the same spacing and elevation rules. */
.window-frame {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-dialog: 16px;
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .12);
  --shadow-dialog: 0 20px 60px rgba(0, 0, 0, .42);
}
.window-frame.theme-light {
  --shadow-popover: 0 12px 32px rgba(35, 42, 53, .14), 0 2px 8px rgba(35, 42, 53, .06);
  --shadow-dialog: 0 20px 60px rgba(35, 42, 53, .2);
}
.modal {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - var(--platform-sidebar-offset) - 32px);
  overflow-y: auto;
  border-radius: var(--radius-dialog);
  box-shadow: var(--shadow-dialog);
}
.modal.create-project-dialog,
.modal.tool-detail-dialog { max-height: calc(100dvh - var(--platform-sidebar-offset) - 32px); }
.modal-backdrop:has(> .create-project-dialog),
.theme-light .modal-backdrop:has(> .create-project-dialog),
.modal-backdrop:has(> .project-icon-dialog),
.theme-light .modal-backdrop:has(> .project-icon-dialog) {
  display: block;
  background: transparent;
  backdrop-filter: none;
}
.modal.create-project-dialog {
  position: absolute;
  box-sizing: border-box;
  width: min(350px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 14px 16px 16px;
  border-radius: 14px;
}
.create-project-dialog .modal-title { min-height: 28px; margin-bottom: 10px; }
.create-project-dialog .modal-title h2 { font-size: 15px; }
.create-project-dialog .modal-title button { width: 26px; height: 26px; }
.create-project-dialog label { margin: 8px 0; font-size: 12px; }
.create-project-dialog input { height: 36px; margin-top: 5px; }
.create-project-dialog textarea { height: 64px; min-height: 64px; margin-top: 5px; padding: 8px 10px; }
.create-project-dialog .modal-actions { margin-top: 12px; }
.create-project-dialog .modal-actions button { height: 34px; padding: 0 11px; }
.modal-title { height: auto; min-height: 28px; align-items: center; margin-bottom: var(--space-3); }
.modal-title button { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-control); }
.modal-title button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.modal-title .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.sidebar-item-menu,
.profile-popover,
.composer-add-popover { box-shadow: var(--shadow-popover); }

/* Connection controls keep a stable, readable row geometry. At compact
   widths the card scrolls as one surface instead of squeezing its copy into
   a column of individual words. */
.settings-card-scroller {
  max-width: 100%;
  margin-bottom: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-radius: var(--radius-panel);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.settings-card-scroller:focus-visible {
  outline: 1px solid var(--accent-ring);
  outline-offset: var(--focus-ring-offset);
}
.settings-card-scroller::-webkit-scrollbar { height: 8px; }
.settings-card-scroller::-webkit-scrollbar-track { background: transparent; }
.settings-card-scroller::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--line);
  background-clip: padding-box;
}
.settings-card-scroller > .settings-card {
  min-width: 620px;
  margin-bottom: 0;
}
.settings-card-fixed-layout .setting-copy {
  min-width: 300px;
  flex: 1 1 300px;
}
.settings-card-fixed-layout .setting-copy strong { white-space: nowrap; }
.settings-card-fixed-layout .setting-copy span { max-width: none; }
.settings-card-fixed-layout .setting-control { flex: 0 0 230px; }

/* With one sidebar, the content can reflow instead of opening a second drawer. */
@container settings-content (max-width: 620px) {
  .settings-card:not(.settings-card-fixed-layout) .setting-row { flex-wrap: wrap; gap: 10px; }
  .settings-card:not(.settings-card-fixed-layout) .setting-control { min-width: 0; max-width: 100%; }
  .settings-card:not(.settings-card-fixed-layout) .setting-control > * { max-width: 100%; }

  .connection-settings-grid { grid-template-columns: 1fr; }
}
@container settings-content (max-width: 400px) {
  .settings-profile-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
  .settings-profile-card > .setting-status { grid-column: 2; justify-self: end; margin-inline-start: 0; }
}

.tools-unavailable {
  width: min(100%, 620px);
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-2);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
}
.tools-unavailable > .ui-icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--tools-subtle); }
.tools-unavailable strong { color: var(--text); font-weight: 600; }
.tools-unavailable p { margin: 0; line-height: 1.5; }
.tools-unavailable button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  border: 1px solid var(--tools-border);
  border-radius: var(--radius-control);
  padding: 0 var(--space-3);
  color: var(--text);
  background: var(--tools-field);
}
.tools-unavailable button:hover { background: color-mix(in srgb, var(--text) 7%, var(--tools-field)); }
.tools-unavailable button .ui-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Work's create choices become compact rows when the content canvas, rather
   than the whole window, can no longer fit three readable cards. */
.work-home { container: work-home / inline-size; }
@container work-home (max-width: 760px) {
  .work-create-grid { grid-template-columns: 1fr; }
  .work-create-card {
    height: auto;
    min-height: 80px;
    grid-template-rows: auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-panel);
  }
  .work-create-card > b { align-self: center; }
  .work-type-preview { display: none; }
}
@container work-home (max-width: 400px) {
  .work-create-card { grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; }
  .work-create-card > b { grid-column: 2; grid-row: 2; margin-top: var(--space-1); }
}

/* Agents use one content area: a horizontal selector above agent details. */
.agents-main { container: agents-page / inline-size; }
.agents-layout { display: block; overflow-y: auto; padding-bottom: 0; }
.agents-main .agent-directory {
  width: 100%;
  overflow: visible;
  border-right: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 20px;
  background: transparent;
}
.agent-directory-head { justify-content: flex-start; gap: 8px; height: auto; padding: 0 0 10px; }
.agent-directory-list { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1000px; }
.agent-directory-list .agent-directory-item {
  width: min(240px, 100%);
  margin: 0;
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.agent-directory-list .agent-directory-item.active { border-color: var(--accent-ring); background: var(--accent-soft); }
.agents-main .agent-detail {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  overflow: visible;
  padding: 20px 24px 40px;
}
.agents-main .agent-detail-empty { margin-block: 70px; }
@container agents-page (max-width: 520px) {
  .agent-directory-list .agent-directory-item { width: 100%; }
  .agents-main .agent-detail { padding-inline: 16px; }
  .agents-main .agent-detail-empty { margin-block: 40px; }
}

@media (max-width: 900px) {
  .work-create-kinds { grid-template-columns: 1fr; }
  .work-create-dialog-body { gap: var(--space-4); padding: var(--space-4); }
  .work-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-template-sheet { height: 80px; padding: var(--space-4); }
}
@media (max-width: 520px) {
  .work-template-grid { grid-template-columns: 1fr; }
  .work-create-dialog-body { gap: var(--space-4); padding: var(--space-2); }
  .work-template-sheet { height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .window-frame *,
  .window-frame *::before,
  .window-frame *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* File Rooms are shared across Chat, Work, and Developer. */
.file-room-frame,
.agents-frame,
.coworkers-frame { grid-template-columns: minmax(0, 1fr); }
.section-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; }
.section-page-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.section-page-title > .ui-icon { flex: none; width: 22px; height: 22px; }
.section-page-title h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.section-page-heading > button { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 32px; border-radius: 8px; padding: 0 12px; }
.section-page-heading > button .ui-icon { width: 16px; height: 16px; }
.agents-page-heading > button.primary { min-height: 30px; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; color: var(--text); background: var(--editor); font-size: 12px; white-space: nowrap; }
.agents-page-heading > button.primary .ui-icon { width: 14px; height: 14px; }
.agents-page-heading > button.primary:hover { background: color-mix(in srgb, var(--text) 6%, var(--editor)); }
.agents-page-heading,
.file-room-page-heading { margin: 16px 20px 12px; }
.file-room-page-heading { position: absolute; z-index: 2; top: 16px; left: 20px; margin: 0; }
/* The title row spans the side panel, so the plus icon sits at the panel's
   right edge: its glyph lines up with the 16px padding of the Rooms header. */
.file-room-page-heading { width: calc(var(--file-room-library-width, 224px) - 20px - 1px - 16px + (30px - 17px) / 2); }
.file-room-page-heading > .section-page-title { display: flex; width: 100%; }
.file-room-page-heading .file-room-title-create { margin-left: auto; }
.coworkers-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  background: var(--editor);
}
.coworkers-main > .product-topbar { z-index: 30; }
.coworkers-content { min-width: 0; min-height: 0; overflow: hidden; padding: 16px 20px; }
.coworkers-list { display: grid; gap: 9px; max-width: 800px; margin-top: 20px; }
.coworker-card { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--text) 2%, var(--editor)); }
.coworker-card.is-inactive { opacity: .65; }
.coworker-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: #315db8; font-size: 15px; font-weight: 600; }
.coworker-details { display: grid; gap: 3px; flex: 1; min-width: 0; }
.coworker-details strong, .coworker-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coworker-details strong { color: var(--text); font-size: 13px; font-weight: 600; }
.coworker-details small { color: var(--muted); font-size: 12px; }
.coworker-role, .coworker-status { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.coworker-card > button { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; padding: 6px 8px; color: var(--text); font-size: 12px; }
.coworker-card > button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.coworker-card > button:disabled { cursor: not-allowed; opacity: .5; }
.coworker-card > button:disabled:hover { background: transparent; }
.coworker-card > button .ui-icon { width: 13px; height: 13px; }
.coworkers-empty { margin: 0; color: var(--muted); }
.coworkers-heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coworkers-heading-actions button, .chat-share-button, .shared-chat-heading button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--editor); font-size: 12px; }
.coworkers-heading-actions button .ui-icon, .chat-share-button .ui-icon, .shared-chat-heading button .ui-icon { width: 15px; height: 15px; }
.coworkers-heading-actions button:hover, .chat-share-button:hover, .shared-chat-heading button:hover { background: color-mix(in srgb, var(--text) 6%, var(--editor)); }
.coworkers-group { max-width: 900px; margin: 22px 0 28px; }
.coworkers-group h2 { margin: 0 0 5px; color: var(--text); font-size: 15px; }
.coworkers-pending-group { padding: 14px; border: 1px solid color-mix(in srgb, #315db8 22%, var(--line)); border-radius: 11px; background: color-mix(in srgb, #315db8 5%, var(--editor)); }
.coworkers-pending-group h2 { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.coworkers-pending-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; color: #fff; background: #315db8; font-size: 12px; }
.coworkers-group > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.coworkers-group .coworker-card + .coworker-card { margin-top: 8px; }
.coworkers-group .coworkers-list { margin-top: 12px; }
.coworker-card > button.primary, .coworkers-heading-actions button.primary { color: #fff; background: #121212; }
.coworker-card > button.primary:hover, .coworkers-heading-actions button.primary:hover { background: #333333; }
.coworkers-content { display: flex; flex-direction: column; overflow: hidden; padding: 20px 28px; }
.coworkers-heading { position: relative; z-index: 5; flex: none; margin-bottom: 12px; }
.coworkers-heading-actions { flex-wrap: nowrap; align-items: center; gap: 10px; }
.coworker-action-anchor, .coworker-row-menu-anchor { position: relative; }
.coworker-row-menu-anchor { --coworker-menu-width: 140px; }
.coworkers-heading-actions > .coworker-action-anchor > button { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--editor); font-size: 12px; white-space: nowrap; }
.coworkers-heading-actions > .coworker-action-anchor > button:hover, .coworkers-heading-actions > .coworker-action-anchor > button[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 6%, var(--editor)); }
.coworkers-heading-actions > .coworker-action-anchor > button .ui-icon { width: 14px; height: 14px; }
.coworker-popover { position: absolute; z-index: 10; top: calc(100% + 9px); right: 0; width: min(360px, calc(100vw - 100px)); padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--editor); box-shadow: 0 18px 44px rgba(0,0,0,.18); color: var(--text); }
.coworker-popover h2 { margin: 0 0 12px; font-size: 14px; font-weight: 650; }
.coworker-send-popover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; width: min(330px, calc(100vw - 100px)); }
.coworker-send-popover label { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.coworker-send-popover input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--editor); color: var(--text); font: inherit; font-size: 13px; }
.coworker-send-popover input:focus, .coworker-send-popover input:focus-visible { border-color: color-mix(in srgb, var(--text) 55%, var(--line)); outline: 1px solid color-mix(in srgb, var(--text) 55%, var(--line)); outline-offset: -1px; box-shadow: none; }
.coworker-send-popover button, .coworker-notification-actions button { height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 12px; }
.coworker-send-popover button.primary, .coworker-notification-actions button.primary { border-color: #121212; color: #fff; background: #121212; }
.coworker-send-popover button.primary:hover, .coworker-notification-actions button.primary:hover { background: #333333; }
.coworker-send-popover :is(input, button):disabled { cursor: not-allowed; opacity: .55; }
.coworker-send-status { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.coworker-notifications-popover { width: min(390px, calc(100vw - 100px)); max-height: min(520px, calc(100vh - 130px)); overflow-y: auto; }
.coworker-notification-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.coworker-notification-identity { display: grid; gap: 3px; min-width: 0; }
.coworker-notification-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.coworker-notification-identity small { display: block; overflow: hidden; white-space: nowrap; color: var(--muted); font-size: 12px; }
.coworker-notification-email { position: relative; display: block; min-width: 0; }
.coworker-notification-email-text { width: 100%; }
.coworker-notification-email.is-truncated .coworker-notification-email-text { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.coworker-notification-email-tooltip { position: absolute; z-index: 12; right: 0; bottom: calc(100% + 7px); width: max-content; max-width: min(320px, calc(100vw - 130px)); padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--editor); box-shadow: 0 8px 22px rgba(0,0,0,.22); color: var(--text); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, visibility 120ms; }
.coworker-notification-email.is-truncated:is(:hover, :focus) .coworker-notification-email-tooltip { opacity: 1; visibility: visible; }
.coworker-notification-subheading { margin-top: 16px !important; padding-top: 13px; border-top: 1px solid var(--line); }
.coworker-notification-actions { grid-column: 3; display: flex; justify-self: end; gap: 7px; }
.coworker-notification-actions button { height: 30px; }
.coworker-notification-actions button:disabled { cursor: not-allowed; opacity: .45; }
.coworker-notification-actions button[data-decision="decline"] { border-color: #b94b56; background: #b94b56; color: #fff; transition: background-color .15s ease, border-color .15s ease; }
.coworker-notification-actions button[data-decision="decline"]:not(:disabled):hover { border-color: #ce5a66; background: #ce5a66; }
.coworker-notification-actions button[data-decision="decline"]:disabled { opacity: .7; }
.coworker-avatar { position: relative; overflow: hidden; border-radius: 50%; }
.coworker-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.coworker-table { --coworker-row-end-inset: 16px; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; width: 100%; border-radius: 11px; background: transparent; }
.coworker-table-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.coworker-table-header, .coworker-table-row { display: grid; grid-template-columns: minmax(0, var(--coworker-name-width, 96px)) minmax(170px, 1fr) 40px; align-items: center; gap: 14px; padding: 0 var(--coworker-row-end-inset) 0 0; }
.coworker-table-header { position: relative; z-index: 2; flex: none; height: 37px; background: var(--editor); color: var(--muted); font-size: 12px; font-weight: 600; }
.coworker-table-header::after { position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--line); content: ''; pointer-events: none; }
.coworker-sort-anchor { position: relative; min-width: 0; }
.coworker-sort-button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; text-align: left; transition: background-color .15s ease, color .15s ease; }
.coworker-table-header .coworker-sort-button { font-weight: 600; }
.coworker-sort-button:hover, .coworker-sort-button[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.coworker-sort-button .ui-icon { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .15s ease; }
.coworker-sort-button[aria-expanded="true"] .ui-icon { transform: rotate(-90deg); }
.coworker-sort-button:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; }
.coworker-sort-menu { position: absolute; z-index: 10; top: calc(100% + 7px); left: 0; display: grid; width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--editor); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.coworker-sort-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; padding: 0 9px; border-radius: 5px; color: var(--text); cursor: pointer; font-size: 12px; text-align: left; }
.coworker-sort-option:hover, .coworker-sort-option:focus-visible { outline: 0; background: color-mix(in srgb, var(--text) 10%, transparent); }
.coworker-sort-option.is-selected { background: color-mix(in srgb, var(--text) 6%, transparent); font-weight: 600; }
.coworker-sort-option .ui-icon { width: 14px; height: 14px; }
.coworker-table-row { min-height: 48px; }
.coworker-table-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.coworker-table-name, .coworker-table-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.coworker-table-name { padding-left: 6px; color: var(--text); font-weight: 600; }
.coworker-table-email { color: var(--muted); }
.coworker-table-empty { padding: 25px 16px; font-size: 13px; }
.coworker-service-unavailable { display: flex; align-items: center; gap: 12px; padding: 24px 8px; color: var(--muted); }
.coworker-service-unavailable-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #c65c64; background: color-mix(in srgb, #c65c64 11%, transparent); }
.coworker-service-unavailable-icon .ui-icon { width: 18px; height: 18px; }
.coworker-service-unavailable > div { min-width: 0; }
.coworker-service-unavailable strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.coworker-service-unavailable p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.coworker-service-unavailable button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 30px; margin-left: auto; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--editor); font-size: 12px; }
.coworker-service-unavailable button:hover { background: color-mix(in srgb, var(--text) 6%, var(--editor)); }
.coworker-service-unavailable button .ui-icon { width: 14px; height: 14px; }
@media (max-width: 620px) { .coworker-service-unavailable { align-items: flex-start; flex-wrap: wrap; } .coworker-service-unavailable button { margin-left: 42px; } }
.coworker-more-button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: var(--muted); }
.coworker-more-button:hover, .coworker-more-button[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.coworker-more-button .ui-icon { width: 19px; height: 19px; }
.coworker-row-menu { position: absolute; z-index: 6; top: calc(100% + 4px); right: 0; display: grid; width: var(--coworker-menu-width); padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--editor); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.coworker-row-menu-anchor.is-above > .coworker-row-menu { top: auto; bottom: calc(100% + 4px); }
.coworker-row-menu button { min-height: 34px; padding: 0 9px; border-radius: 6px; text-align: left; color: var(--text); font-size: 12px; }
.coworker-row-menu button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.coworker-row-menu button.danger { color: #d75054; }
.coworker-chat-picker-popover { position: absolute; z-index: 7; top: calc(100% + 4px); right: calc(var(--coworker-menu-width) + 8px); width: min(390px, calc(100vw - 90px)); max-height: min(520px, var(--coworker-popup-max-height, calc(100vh - 120px))); overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--editor); color: var(--text); box-shadow: var(--shadow-popover); }
.coworker-row-menu-anchor.is-above > .coworker-chat-picker-popover { top: auto; bottom: calc(100% + 4px); }
.coworker-chat-picker-popover header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.coworker-chat-picker-popover h2 { margin: 0; font-size: 14px; font-weight: 650; }
.coworker-chat-picker-popover header button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--muted); }
.coworker-chat-picker-popover header button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.coworker-chat-picker-popover header .ui-icon { width: 16px; height: 16px; }
.coworker-chat-picker-intro { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.coworker-chat-choice-list { display: grid; gap: 6px; max-height: min(300px, 40vh); overflow-y: auto; padding: 2px; }
.coworker-chat-choice-list > .modal-help { margin: 0; padding: 18px 10px; text-align: center; }
.coworker-chat-choice { display: grid; grid-template-columns: minmax(0, 1fr) 17px; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--text) 2%, var(--editor)); color: var(--text); text-align: left; }
.coworker-chat-choice:hover, .coworker-chat-choice:focus-visible { background: color-mix(in srgb, var(--text) 7%, var(--editor)); }
.coworker-chat-choice.is-selected { border-color: var(--accent-ring); background: color-mix(in srgb, var(--accent-ui) 9%, var(--editor)); }
.coworker-chat-choice > span:first-child { display: grid; gap: 3px; min-width: 0; }
.coworker-chat-choice strong, .coworker-chat-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coworker-chat-choice strong { font-size: 13px; font-weight: 600; }
.coworker-chat-choice small { color: var(--muted); font-size: 12px; }
.coworker-chat-choice-indicator { width: 16px; height: 16px; border: 1px solid var(--muted); border-radius: 50%; }
.coworker-chat-choice.is-selected .coworker-chat-choice-indicator { border: 5px solid var(--accent-ring); background: var(--editor); }
.coworker-chat-model-label { display: block; margin-top: 13px; color: var(--muted); font-size: 12px; }
.coworker-chat-model-label select { display: block; width: 100%; height: 36px; margin-top: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--editor); color: var(--text); font: inherit; }
.coworker-chat-picker-popover > .modal-help { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.coworker-chat-picker-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.coworker-chat-picker-actions button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 12px; }
.coworker-chat-picker-actions button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.coworker-chat-picker-actions button.primary { border-color: #121212; background: #121212; color: #fff; }
.coworker-chat-picker-actions button.primary:hover { background: #333333; }
.coworker-chat-picker-actions button:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 650px) { .coworker-chat-picker-popover { top: calc(100% + 88px); right: 0; width: min(390px, calc(100vw - 80px)); } }
@media (max-width: 700px) { .coworkers-content { padding: 16px; } .coworkers-heading { align-items: flex-start; gap: 16px; } .coworkers-heading-actions { width: 100%; } .coworker-table { --coworker-row-end-inset: 10px; } .coworker-table-header, .coworker-table-row { grid-template-columns: minmax(88px, min(var(--coworker-name-width, 96px), 25vw)) minmax(120px, 1fr) 32px; gap: 8px; } }
@media (max-width: 500px) { .coworkers-heading-actions > .coworker-action-anchor > button { padding: 0 9px; gap: 6px; font-size: 12px; } .coworker-table-header, .coworker-table-row { grid-template-columns: minmax(90px, 1fr) 32px; } .coworker-table-email-heading, .coworker-table-email { display: none; } .coworker-row-menu { right: 0; } }
@media (max-width: 600px) { .coworker-notification-row { grid-template-columns: 36px minmax(0, 1fr); } .coworker-notification-actions { grid-column: 2; grid-row: 2; } }
.chat-share-button { margin-right: auto; }
.shared-chat-content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 !important; }
.shared-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 14px; border-bottom: 1px solid var(--line); }
.shared-chat-heading h1 { margin: 2px 0 3px; color: var(--text); font-size: 19px; font-weight: 600; }
.shared-chat-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.shared-chat-kicker { color: #4976cc; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.shared-chat-transcript { padding: 20px clamp(16px, 4vw, 56px) 24px !important; }
.shared-chat-empty { color: var(--muted); text-align: center; }
.shared-chat-earlier { display: block; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--editor); color: var(--text); padding: 7px 15px; cursor: pointer; }
.shared-chat-earlier:hover { background: color-mix(in srgb, var(--editor) 90%, var(--text) 10%); }
.shared-chat-footer { border-top: 1px solid var(--line); padding: 10px clamp(16px, 4vw, 56px) 16px; background: var(--editor); }
.shared-chat-status { width: min(780px, 100%); margin: 0 auto 8px; color: var(--muted); font-size: 12px; }
.shared-chat-composer { width: min(780px, 100%); margin: 0 auto; }
.shared-chat-model { cursor: default; }
.omnesly-chat-provider .shared-chat-model .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; transform: none; }
.shared-chat-members { display: grid; gap: 8px; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.shared-chat-members > strong { font-size: 12px; }
.shared-chat-members > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.shared-chat-members > div button { padding: 5px 8px; border-radius: 6px; color: var(--text); }
.shared-chat-members > div button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
@media (max-width: 700px) { .coworkers-heading { align-items: flex-start; flex-direction: column; } .shared-chat-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 720px) {
  .coworker-role, .coworker-status { display: none; }
}
.file-room-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  background: var(--editor);
  container: file-room-page / inline-size;
}
.file-room-main > .product-topbar { z-index: 30; }
.file-room-layout {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--file-room-library-width, 224px) minmax(320px, 1fr);
  background: var(--editor);
}
.file-room-library {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-top: 56px;
  background: var(--sidebar);
}
.file-room-library { border-right: 1px solid var(--line); }
.file-room-library-resizer {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: calc(var(--file-room-library-width, 224px) - 4px);
  width: 8px;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}
.file-room-library-resizer::after {
  content: '';
  position: absolute;
  inset: 0 3px;
  border-radius: 999px;
  background: transparent;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.file-room-library-resizer:hover::after,
.file-room-library-resizer:focus-visible::after,
.is-resizing-file-room-library .file-room-library-resizer::after {
  background: var(--accent-ui);
  box-shadow: none;
}
.is-resizing-file-room-library { cursor: col-resize; user-select: none; }
.file-room-library > header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.file-room-library > header > span { min-width: 0; display: grid; gap: 2px; }
.file-room-library > header strong { color: var(--text); font-weight: 560; }
.file-room-library > header small { color: var(--dim); white-space: nowrap; }
/* Create File Room: the same plus icon button as the chat sidebar's
   Projects heading, right of the page title. */
.file-room-title-create {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  flex: none;
  border-radius: 7px;
  color: var(--muted);
  transition: background .18s, color .18s;
}
.file-room-title-create:hover,
.file-room-title-create:focus-visible { background: rgba(255,255,255,.08); color: var(--text); }
.theme-light .file-room-title-create:is(:hover, :focus-visible) { background: rgba(40,46,56,.08); }
.file-room-title-create .ui-icon { width: 17px; height: 17px; }
.file-room-list { display: grid; align-content: start; gap: 4px; padding: var(--space-2); }
.file-room-list > p { margin: var(--space-3); color: var(--dim); line-height: 1.5; }
.file-room-list-item {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.file-room-list-item:hover,
.file-room-list-item:focus-within,
.file-room-list-item.menu-is-open { background: color-mix(in srgb, var(--text) 7%, transparent); }
.file-room-list-item.is-active { border-color: var(--line); background: color-mix(in srgb, var(--text) 9%, var(--audit-panel)); }
.file-room-list-row {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  overflow: hidden;
  padding: 0 8px 0 11px;
  color: var(--text);
  text-align: left;
}
.file-room-list-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-room-options-trigger { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); }
.file-room-options-trigger:hover,
.file-room-options-trigger:focus-visible,
.file-room-list-item.menu-is-open .file-room-options-trigger { color: var(--text); background: color-mix(in srgb, var(--text) 11%, transparent); }
.file-room-options-trigger .ui-icon { width: 17px; height: 17px; }
.file-room-options-menu {
  position: absolute;
  z-index: 80;
  width: 166px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 5px;
  background: var(--audit-panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.file-room-options-menu button { min-height: 32px; display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 0 8px; color: var(--text); text-align: left; }
.file-room-options-menu button:hover,
.file-room-options-menu button:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); }
.file-room-options-menu button.danger { color: #ed858b; }
.theme-light .file-room-options-menu button.danger { color: #b33c46; }
.file-room-options-menu .ui-icon { width: 16px; height: 16px; }
.file-room-options-menu button span { white-space: nowrap; }
.file-room-document-icon,
.file-room-hero-icon {
  display: grid;
  place-items: center;
  color: var(--muted);
}
.file-room-canvas { min-width: 0; min-height: 0; overflow: auto; padding: 16px clamp(16px, 2.5vw, 32px) 32px; }
.file-room-detail { width: min(100%, 820px); margin: 0 auto; display: grid; gap: var(--space-2); }
.file-room-detail-head {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.file-room-hero-icon { width: 46px; height: 46px; border-radius: 9px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.file-room-hero-icon .ui-icon { width: 24px; height: 24px; }
.file-room-detail-head > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.file-room-detail-head h1 { margin: 0; color: var(--text); font-weight: 590; }
.file-room-detail-menu-anchor { position: relative; }
.file-room-detail-menu-anchor > button,
.file-room-document-row > button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: var(--audit-panel);
}
.file-room-detail-menu-anchor > button:hover,
.file-room-document-row > button:hover { border-color: var(--line); color: var(--text); }
.file-room-detail-menu-anchor > button .ui-icon,
.file-room-document-row > button .ui-icon { width: 16px; height: 16px; }
.file-room-detail-menu {
  position: absolute;
  z-index: 85;
  top: calc(100% + 8px);
  right: 0;
  width: min(310px, calc(100vw - 32px));
  max-height: min(490px, calc(100vh - 130px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--audit-panel);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
  color: var(--text);
}
.file-room-detail-menu-section { padding: 14px; border-bottom: 1px solid var(--line-soft); }
.file-room-detail-menu-label { display: flex; justify-content: space-between; margin-bottom: 11px; color: var(--muted); font-size: 12px; font-weight: 600; }
.file-room-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.file-room-detail-stats > span { display: grid; gap: 3px; }
.file-room-detail-stats strong { font-size: 17px; font-weight: 600; }
.file-room-detail-stats small { color: var(--muted); font-size: 12px; }
.file-room-detail-people { display: grid; gap: 10px; }
.file-room-detail-person { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; }
.file-room-person-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-size: 12px; font-weight: 600; }
.file-room-person-identity { display: grid; min-width: 0; gap: 2px; }
.file-room-person-identity strong, .file-room-person-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-room-person-identity strong { font-size: 12px; font-weight: 600; }
.file-room-person-identity small { color: var(--muted); font-size: 12px; }
.file-room-person-role { padding: 4px 6px; border-radius: 5px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); font-size: 12px; text-transform: capitalize; white-space: nowrap; }
.file-room-detail-menu-actions { display: grid; gap: 2px; padding: 6px; }
.file-room-detail-menu-actions button { display: flex; align-items: center; gap: 9px; min-height: 33px; padding: 0 8px; border-radius: 6px; color: var(--text); text-align: left; }
.file-room-detail-menu-actions button:hover, .file-room-detail-menu-actions button:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); }
.file-room-detail-menu-actions button .ui-icon { width: 16px; height: 16px; }
.file-room-detail-menu-actions button.danger { color: #ed858b; }
.theme-light .file-room-detail-menu-actions button.danger { color: #b33c46; }
.file-room-documents {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.file-room-documents > header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.file-room-documents > header > span { display: flex; align-items: baseline; gap: var(--space-2); }
.file-room-documents h2 { margin: 0; color: var(--text); font-weight: 560; }
.file-room-documents header small { color: var(--dim); }
.file-room-documents header > div { display: flex; gap: var(--space-2); }
.file-room-documents header button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  white-space: nowrap;
}
.file-room-documents header button.primary { border-color: var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-fg); }
.file-room-documents header button .ui-icon { width: 15px; height: 15px; }
.file-room-document-list { display: grid; }
.file-room-document-row {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.file-room-document-row:last-child { border-bottom: 0; }
.file-room-document-icon { width: 34px; height: 34px; background: transparent; }
.file-room-document-glyph { display: block; width: 30px; height: 30px; }
.file-room-document-detail { color: var(--file-room-document-accent, var(--muted)); }
.theme-dark .file-room-document-glyph[data-kind="pdf"] { --file-room-document-accent: #f27b80; }
.theme-dark .file-room-document-glyph[data-kind="word"] { --file-room-document-accent: #79aaf0; }
.theme-dark .file-room-document-glyph[data-kind="spreadsheet"] { --file-room-document-accent: #77be89; }
.theme-dark .file-room-document-glyph[data-kind="csv"] { --file-room-document-accent: #64cba8; }
.theme-dark .file-room-document-glyph[data-kind="presentation"] { --file-room-document-accent: #ecae70; }
.theme-dark .file-room-document-glyph[data-kind="code"] { --file-room-document-accent: #b6a0e8; }
.theme-dark .file-room-document-glyph[data-kind="data"] { --file-room-document-accent: #dfc36f; }
.theme-dark .file-room-document-glyph[data-kind="text"] { --file-room-document-accent: #89b8ce; }
.theme-light .file-room-document-glyph[data-kind="pdf"] { --file-room-document-accent: #bf3943; }
.theme-light .file-room-document-glyph[data-kind="word"] { --file-room-document-accent: #2e69b4; }
.theme-light .file-room-document-glyph[data-kind="spreadsheet"] { --file-room-document-accent: #22804a; }
.theme-light .file-room-document-glyph[data-kind="csv"] { --file-room-document-accent: #18866a; }
.theme-light .file-room-document-glyph[data-kind="presentation"] { --file-room-document-accent: #b56726; }
.theme-light .file-room-document-glyph[data-kind="code"] { --file-room-document-accent: #7354af; }
.theme-light .file-room-document-glyph[data-kind="data"] { --file-room-document-accent: #926d19; }
.theme-light .file-room-document-glyph[data-kind="text"] { --file-room-document-accent: #397996; }
.file-room-document-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.file-room-document-row strong,
.file-room-document-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-room-document-row strong { color: var(--text); font-weight: 520; }
.file-room-document-row small { color: var(--dim); }
.file-room-empty-list,
.file-room-welcome {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  min-height: 210px;
  padding: 36px;
  color: var(--dim);
  text-align: center;
}
.file-room-welcome { min-height: 100%; }
.file-room-empty-list > .ui-icon,
.file-room-welcome > .ui-icon { width: 34px; height: 34px; color: var(--muted); }
.file-room-empty-list strong,
.file-room-welcome h1 { margin: 0; color: var(--text); font-weight: 560; }
.file-room-empty-list span,
.file-room-welcome button {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}
.file-room-welcome button .ui-icon { width: 16px; height: 16px; }
.file-room-welcome button.primary { min-height: 30px; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; color: var(--text); background: var(--editor); }
.file-room-welcome button.primary .ui-icon { width: 14px; height: 14px; }
.file-room-welcome button.primary:hover { background: color-mix(in srgb, var(--text) 6%, var(--editor)); }
.file-room-error { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: #d75c65; }
.file-room-error .ui-icon { width: 18px; height: 18px; }
.file-room-modal-copy { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--dim); }
.file-room-modal-copy .ui-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--muted); }
.file-room-modal-copy p { margin: 0; line-height: 1.5; }
.file-room-modal textarea { min-height: 90px; }
.file-room-modal .file-room-note-content { min-height: 220px; resize: vertical; }
.file-room-coworker-list { display: grid; gap: 7px; max-height: 300px; overflow-y: auto; margin: 8px 0 0; }
.file-room-coworker-list > p { margin: 0; padding: 12px; color: var(--muted); }
.modal.file-room-modal .file-room-coworker-choice {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 3%, var(--audit-panel));
  cursor: pointer;
}
.modal.file-room-modal .file-room-coworker-choice:hover,
.modal.file-room-modal .file-room-coworker-choice:focus-within {
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 6%, var(--audit-panel));
}
.modal.file-room-modal .file-room-coworker-choice:has(input:checked) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--text) 8%, var(--audit-panel));
}
.file-room-coworker-choice .coworker-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 11%, var(--audit-panel));
  font-size: 13px;
}
.file-room-coworker-details { min-width: 0; display: grid; gap: 2px; }
.file-room-coworker-details strong,
.file-room-coworker-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-room-coworker-details strong { color: var(--text); font-size: 12px; font-weight: 560; }
.file-room-coworker-details small { color: var(--dim); font-size: 12px; }
.modal.file-room-modal .file-room-coworker-choice > input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.modal.file-room-modal .file-room-coworker-choice > input:checked {
  border-color: var(--text);
  background: var(--text);
}
.modal.file-room-modal .file-room-coworker-choice > input:checked::after {
  content: '';
  display: block;
  width: 8px;
  height: 4px;
  margin: 4px 0 0 3px;
  border-left: 2px solid var(--audit-panel);
  border-bottom: 2px solid var(--audit-panel);
  transform: rotate(-45deg);
}
.modal.file-room-modal .file-room-coworker-choice > input:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

@container file-room-page (max-width: 540px) {
  .file-room-layout { display: block; overflow-y: auto; }
  .file-room-library-resizer { display: none; }
  .file-room-library { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .file-room-canvas { min-height: 430px; overflow: visible; padding: var(--space-4); }
  .file-room-documents > header { align-items: stretch; flex-direction: column; }
  .file-room-documents > header > div { justify-content: flex-end; }
  .file-room-detail-head { grid-template-columns: 40px minmax(0, 1fr) auto; }
}

.theme-light .file-room-library,
.theme-light .file-room-detail-menu-anchor > button,
.theme-light .file-room-document-row > button { background: #fff; }
.theme-light .file-room-main,
.theme-light .file-room-layout { background: #f5f6f8; }

/* Page headers are mounted in the outer shell, above the inset content panel. */
.application-shell > .application-topbar {
  position: absolute;
  z-index: 230;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  margin: 0;
  padding-block: 2px;
  padding-right: 8px;
  border: 0;
  background: var(--application-chrome-surface);
}
/* Only the native macOS window needs room for traffic lights. Keep both
   history controls anchored to the sidebar logo on every other surface,
   regardless of page or whether either button is disabled. */
html:not([data-platform="macos"][data-desktop="true"]) .application-shell > .application-topbar {
  padding-left: calc((var(--application-sidebar-width) - 23px) / 2 - 4px);
}
/* The Iconoir chevron path starts inside its SVG viewBox. Offset the visible
   tip, rather than the button hit area, to the logo's left edge. */
html:not([data-platform="macos"][data-desktop="true"]) .application-shell > .application-topbar .topbar-history > button:first-child > .ui-icon {
  transform: translateX(-6.25px);
}
/* Native Windows caption buttons overlay the top-right of the desktop content.
   Measure their occupied area when available, with a safe initial fallback. */
html[data-platform="windows"][data-desktop="true"] .application-shell > .application-topbar {
  padding-right: calc(var(--native-window-control-right, 138px) + 8px);
}
html[data-desktop="true"] .application-shell > .application-topbar { -webkit-app-region: drag; }
html[data-desktop="true"] .application-shell > .application-topbar > * { -webkit-app-region: no-drag; }
.application-sidebar > .sidebar-profile-button {
  position: absolute;
  top: auto;
  right: auto;
  bottom: var(--application-profile-bottom-inset);
  left: calc((var(--application-sidebar-width) - 30px) / 2);
  width: 30px;
  height: 30px;
  transform: none;
  transform-origin: center bottom;
}
.application-sidebar > .sidebar-profile-button .profile-avatar { width: 24px; height: 24px; flex-basis: 24px; }
.application-sidebar > .sidebar-profile-button:hover { transform: scale(1.04); }
.application-sidebar > .sidebar-profile-button:active { transform: scale(.96); }
.application-sidebar > .sidebar-toggle {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(var(--application-profile-bottom-inset) + 30px + 8px + 26px + 8px);
  left: calc((var(--application-sidebar-width) - 32px) / 2);
  width: 32px;
  height: 32px;
  margin: 0;
  color: var(--muted);
}
.application-sidebar > .sidebar-toggle > .ui-icon { width: 20px; height: 20px; }
.application-sidebar > .sidebar-toggle:is(:hover, :focus-visible) { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); transform: none; }
.theme-light .application-sidebar > .sidebar-toggle:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.application-sidebar > .sidebar-help-button {
  position: absolute;
  bottom: calc(var(--application-profile-bottom-inset) + 30px + 8px);
  left: calc((var(--application-sidebar-width) - 26px) / 2);
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-radius: 7px;
  margin: 0;
}
.application-sidebar > .sidebar-help-button > .ui-icon { width: 15px; height: 15px; }
/* Home uses the whole page panel; the navigation rail remains on other routes. */
.window-frame.home-frame { grid-template-columns: minmax(0, 1fr); }
.window-frame > :is(.home-main, .chat-workspace, .project-main, .workspace-main, .agents-main, .audit-center-main, .work-main, .tools-main, .cohorts-main, .file-room-main, .coworkers-main) {
  grid-template-rows: minmax(0, 1fr);
}
/* The chat header is moved into the outer shell after rendering. Keep the
   remaining workspace within the frame so the transcript, not the page grid,
   owns overflow for long conversations. */
.window-frame.chat-frame { grid-template-rows: minmax(0, 1fr); }
.window-frame.chat-frame > .chat-workspace { min-height: 0; }
.window-frame > .agents-main { grid-template-rows: auto minmax(0, 1fr); }
.settings-content-inner { width: auto; margin: 0; padding: calc(7px + (var(--menu-item-height) - 22px) / 2) 20px 56px; }
/* The Settings title is centred on the first item in the Settings menu: that
   item starts 7px below the top of its panel and is var(--menu-item-height)
   tall; the title row is 22px tall. */
.settings-page-heading { min-height: 0; align-items: flex-start; margin-bottom: 25px; }
.window-frame .settings-layout { inset: 0; }
.window-frame .connections-main > .available-connections { top: 20px; }
/* Persistent editor hosts sit outside #app; only their bottom-right corner
   needs to follow the rounded panel clipping. The top-right stays square. */
#office-work-host { border-radius: 0 0 calc(var(--application-panel-radius) - 1px) 0; }
#app:has(.window-frame.sidebar-is-collapsed) ~ #office-work-host { border-bottom-left-radius: 0; }

/* Short, single-line choice/action menus share the Home activity dropdown's
   surface and option language. Rich model, search, and resource panels retain
   their own layouts; these rules do not change menu behavior or placement. */
:is(.setting-dropdown-menu, .sidebar-view-menu, .sidebar-item-menu:not(.sidebar-project-picker),
  .page-menu, .project-popover, .composer-add-popover:not(.composer-resource-popover),
  .file-room-options-menu, .tools-category-menu) {
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2c2c2c;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-light :is(.setting-dropdown-menu, .sidebar-view-menu, .sidebar-item-menu:not(.sidebar-project-picker),
  .page-menu, .project-popover, .composer-add-popover:not(.composer-resource-popover),
  .file-room-options-menu, .tools-category-menu) {
  background: #fff;
  box-shadow: 0 14px 32px rgba(38, 45, 56, .18);
}
:is(.setting-dropdown-option, .sidebar-view-menu > button,
  .sidebar-item-menu:not(.sidebar-project-picker) > button, .page-menu > button,
  .project-popover > button, .composer-add-popover:not(.composer-resource-popover) > button,
  .file-room-options-menu > button, .tools-category-option) {
  min-height: 31px;
  height: auto;
  padding: 5px 9px;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  text-align: left;
}
:is(.setting-dropdown-option, .sidebar-view-menu > button,
  .sidebar-item-menu:not(.sidebar-project-picker) > button, .page-menu > button,
  .project-popover > button, .composer-add-popover:not(.composer-resource-popover) > button,
  .file-room-options-menu > button, .tools-category-option):is(:hover, :focus-visible),
.tools-category-option[data-active="true"] {
  outline: 0;
  background: color-mix(in srgb, var(--text) 11%, transparent);
}
:is(.setting-dropdown-option.selected, .sidebar-view-menu > button[aria-checked="true"],
  .sidebar-item-menu > button[aria-pressed="true"], .project-popover > button.is-selected,
  .tools-category-option[aria-selected="true"]) {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  font-weight: 600;
}
.theme-light .setting-dropdown-option.selected {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}
.setting-dropdown-option:disabled,
.setting-dropdown-option:disabled:hover { background: transparent; color: var(--muted); opacity: .58; cursor: default; }
.tools-category-option:first-child { margin-bottom: 0; }
.project-popover > button { gap: 8px; }
.project-popover > button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-popover > button > .ui-icon,
.setting-dropdown-option > .ui-icon,
.tools-category-option > .ui-icon { width: 13px; height: 13px; color: var(--text); }
.project-popover > button > .ui-icon { opacity: 0; }
.project-popover > button.is-selected > .ui-icon { opacity: 1; }
.sidebar-item-menu button.danger,
.file-room-options-menu button.danger { color: #ed858b; }
.theme-light .sidebar-item-menu button.danger,
.theme-light .file-room-options-menu button.danger { color: #b33c46; }
@media (forced-colors: active) {
  .application-home, .theme-light .application-home { color: ButtonText; }
  .window-frame { border-color: CanvasText; }
}

/* Create Agent controls */
.modal #backend-agent-connection,
.modal #backend-agent-model {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 6 4.5 4 4.5-4' stroke='%23d7dbe2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px 16px;
}
.theme-light .modal #backend-agent-connection,
.theme-light .modal #backend-agent-model {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 6 4.5 4 4.5-4' stroke='%234b5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.modal.backend-agent-dialog { --backend-agent-scroll-thumb: #858c98; }
.theme-light .modal.backend-agent-dialog { --backend-agent-scroll-thumb: #68717f; }
.modal.backend-agent-dialog,
.modal.backend-agent-dialog #backend-agent-instructions {
  scrollbar-width: thin;
  scrollbar-color: var(--backend-agent-scroll-thumb) transparent;
}
.modal.backend-agent-dialog #backend-agent-instructions {
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.modal.backend-agent-dialog #backend-agent-instructions:is(:focus, :focus-visible) {
  border-color: #969ba4;
  outline: none;
  box-shadow: none;
}
.theme-light .modal.backend-agent-dialog #backend-agent-instructions:is(:focus, :focus-visible) { border-color: #707987; }
.modal.backend-agent-dialog::-webkit-scrollbar,
.modal.backend-agent-dialog #backend-agent-instructions::-webkit-scrollbar { width: 9px; background: transparent; }
.modal.backend-agent-dialog::-webkit-scrollbar-track,
.modal.backend-agent-dialog #backend-agent-instructions::-webkit-scrollbar-track { background: transparent; }
.modal.backend-agent-dialog::-webkit-scrollbar-thumb,
.modal.backend-agent-dialog #backend-agent-instructions::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--backend-agent-scroll-thumb);
  background-clip: padding-box;
}
.modal.backend-agent-dialog::-webkit-scrollbar-button,
.modal.backend-agent-dialog #backend-agent-instructions::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.setting-dropdown[data-setting="timeFormat"] { width: 108px; }
.setting-dropdown[data-setting="timeFormat"] .setting-dropdown-toggle {
  height: 30px;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: 5px;
  border-radius: 7px;
  padding: 0 7px 0 8px;
}
.setting-dropdown[data-setting="timeFormat"] .setting-dropdown-toggle > .ui-icon { width: 14px; height: 14px; }
.setting-dropdown[data-setting="timeFormat"] .setting-dropdown-menu { padding: 4px; border-radius: 8px; }
.setting-dropdown[data-setting="timeFormat"] .setting-dropdown-option {
  min-height: 30px;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: 4px;
  border-radius: 6px;
  padding: 0 7px;
}
.setting-dropdown[data-setting="timeFormat"] .setting-dropdown-option > .ui-icon { width: 14px; height: 14px; }

/* Action buttons use the Omnesly website's button design: 4px corners,
   semibold labels, a quiet default style, a solid primary style, and the
   website's blue on hover. Dropdowns, chips and menu toggles keep their own
   look. Text stays at the app-wide size set by the final rule below. */
.application-shell :is(
  .setting-action, .modal-actions button, .add-connection-button,
  .cohort-empty > button, .cohort-run-entry,
  .coworker-action-anchor > button, .coworker-service-unavailable > button,
  .topbar-action, .assistant-connect, .work-editor-empty button,
  .tool-card-head > button, .tools-see-all,
  .section-page-heading button.primary, .file-room-welcome button.primary
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0 12px;
  white-space: nowrap;
  border: 1px solid #424242;
  border-radius: 4px;
  background: #2e2e2e;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* A settings row may narrow its control area to nothing; text buttons keep
   room for their label instead. */
.application-shell .setting-control > .setting-action { max-width: none; }
/* The website's compact size, for buttons in page headers and cards. */
.application-shell :is(
  .coworker-action-anchor > button, .coworker-service-unavailable > button,
  .tool-card-head > button, .tools-see-all, .cohort-run-entry,
  .section-page-heading button.primary
) {
  height: 30px;
  padding: 0 10px;
}
/* Run cohort lines up with the toolbar dropdowns beside it. */
.application-shell .cohort-run-entry { height: 34px; }
.application-shell .modal-actions button.primary { border-color: transparent; background: #fff; color: #000; }
.application-shell :is(.modal-actions button, .setting-action).danger { border-color: transparent; background: #e03131; color: #fff; }
.application-shell :is(
  .setting-action, .modal-actions button, .add-connection-button,
  .cohort-empty > button, .cohort-run-entry,
  .coworker-action-anchor > button, .coworker-service-unavailable > button,
  .topbar-action, .assistant-connect, .work-editor-empty button,
  .tool-card-head > button, .tools-see-all,
  .section-page-heading button.primary, .file-room-welcome button.primary
):not(.danger, :disabled):is(:hover, :focus-visible) {
  border-color: transparent;
  background: #228be6;
  color: #fff;
}
.application-shell :is(.modal-actions button, .setting-action).danger:not(:disabled):is(:hover, :focus-visible) { background: #c92a2a; }
.application-shell :is(
  .setting-action, .modal-actions button, .add-connection-button,
  .topbar-action, .assistant-connect, .tool-card-head > button,
  .tools-see-all, .cohort-run-entry
):disabled { cursor: not-allowed; opacity: .5; }

.application-shell.theme-light :is(
  .setting-action, .modal-actions button, .add-connection-button,
  .cohort-empty > button, .cohort-run-entry,
  .coworker-action-anchor > button, .coworker-service-unavailable > button,
  .topbar-action, .assistant-connect, .work-editor-empty button,
  .tool-card-head > button, .tools-see-all,
  .section-page-heading button.primary, .file-room-welcome button.primary
) {
  border-color: #ced4da;
  background: #fff;
  color: #343a40;
}
.application-shell.theme-light .modal-actions button.primary { border-color: transparent; background: #000; color: #fff; }
.application-shell.theme-light :is(.modal-actions button, .setting-action).danger { border-color: transparent; background: #e03131; color: #fff; }
.application-shell.theme-light :is(
  .setting-action, .modal-actions button, .add-connection-button,
  .cohort-empty > button, .cohort-run-entry,
  .coworker-action-anchor > button, .coworker-service-unavailable > button,
  .topbar-action, .assistant-connect, .work-editor-empty button,
  .tool-card-head > button, .tools-see-all,
  .section-page-heading button.primary, .file-room-welcome button.primary
):not(.danger, :disabled):is(:hover, :focus-visible) {
  border-color: transparent;
  background: #1c7ed6;
  color: #fff;
}

/* Each Settings section ends with a Save button; changes apply only when
   it's pressed. It uses the website's primary button style. */
.settings-section-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
.application-shell .setting-action.settings-save { min-width: 0; border-color: transparent; background: #fff; color: #000; }
.application-shell.theme-light .setting-action.settings-save { border-color: transparent; background: #000; color: #fff; }
.application-shell .setting-action.settings-save:disabled { cursor: default; opacity: .4; }

/* Usage Status summary: compact tiles with an icon badge, the label, the
   value in semibold and its detail on its own line. As many columns as fit,
   at least 170px each. Text stays at the app-wide size. */
.application-shell .usage-metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 16px; }
.application-shell .usage-metrics article {
  min-height: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: center;
  gap: 3px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--sidebar);
}
.application-shell .usage-metrics .ui-icon {
  grid-row: 1 / 3;
  align-self: start;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}
.application-shell .usage-metrics span { color: var(--dim); }
.application-shell .usage-metrics strong {
  grid-column: 2;
  display: grid;
  gap: 1px;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
}
.application-shell .usage-metrics strong small {
  overflow: hidden;
  margin-left: 0;
  color: var(--dim);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.application-shell.theme-light .usage-metrics article { border-color: #dfe3e8; background: #fff; box-shadow: none; }

/* Project icons: the colour a project's icon was given in Edit Icon. Grey
   keeps each place's own icon colour. Light mode uses deeper shades. */
.application-shell {
  --project-color-grey: var(--muted);
  --project-color-white: #fff;
  --project-color-black: #000;
  --project-color-blue: #4dabf7;
  --project-color-green: #69db7c;
  --project-color-yellow: #ffd43b;
  --project-color-orange: #ffa94d;
  --project-color-red: #ff8787;
  --project-color-violet: #b197fc;
}
.application-shell.theme-light {
  --project-color-blue: #1c7ed6;
  --project-color-green: #2f9e44;
  --project-color-yellow: #f08c00;
  --project-color-orange: #e8590c;
  --project-color-red: #e03131;
  --project-color-violet: #7048e8;
}
.application-shell .ui-icon.project-color-white { color: var(--project-color-white); }
.application-shell .ui-icon.project-color-black { color: var(--project-color-black); }
.application-shell .ui-icon.project-color-blue { color: var(--project-color-blue); }
.application-shell .ui-icon.project-color-green { color: var(--project-color-green); }
.application-shell .ui-icon.project-color-yellow { color: var(--project-color-yellow); }
.application-shell .ui-icon.project-color-orange { color: var(--project-color-orange); }
.application-shell .ui-icon.project-color-red { color: var(--project-color-red); }
.application-shell .ui-icon.project-color-violet { color: var(--project-color-violet); }

/* The Edit Icon popup: a preview of the project row, a row of colour
   swatches and a grid of icons, all on the app's quiet button surfaces. */
.modal.project-icon-dialog {
  position: absolute;
  box-sizing: border-box;
  width: min(296px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 10px 12px 12px;
  border-radius: 12px;
}
.project-icon-dialog .modal-title { height: auto; min-height: 24px; align-items: center; margin-bottom: 8px; }
.project-icon-dialog .modal-title button { width: 22px; height: 22px; }
.project-icon-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.project-icon-preview > .ui-icon { flex: none; width: 16px; height: 16px; }
.project-icon-preview strong { overflow: hidden; color: var(--text); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.project-icon-section { display: grid; gap: 6px; margin-top: 10px; }
.project-icon-label { color: var(--dim); font-weight: 560; }
.project-icon-colors { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px; }
.project-icon-swatch {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--project-color-grey);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
  transition: transform .15s ease;
}
.project-icon-swatch.project-color-white { background: var(--project-color-white); }
.project-icon-swatch.project-color-black { background: var(--project-color-black); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.project-icon-swatch.project-color-blue { background: var(--project-color-blue); }
.project-icon-swatch.project-color-green { background: var(--project-color-green); }
.project-icon-swatch.project-color-yellow { background: var(--project-color-yellow); }
.project-icon-swatch.project-color-orange { background: var(--project-color-orange); }
.project-icon-swatch.project-color-red { background: var(--project-color-red); }
.project-icon-swatch.project-color-violet { background: var(--project-color-violet); }
.project-icon-swatch:hover { transform: scale(1.08); }
.project-icon-swatch:focus-visible { outline: 2px solid #228be6; outline-offset: 2px; }
/* The chosen colour gets a ring in the dialog's own background colour, then
   an outer ring, so it reads on every swatch. */
.project-icon-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #2e2e2e, 0 0 0 4px var(--text); }
.theme-light .project-icon-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #24282f; }
.project-icon-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.project-icon-choice {
  display: grid;
  place-items: center;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  transition: background-color .15s ease, border-color .15s ease;
}
.project-icon-choice .ui-icon { width: 16px; height: 16px; }
.project-icon-choice:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.project-icon-choice:focus-visible { outline: 2px solid #228be6; outline-offset: -2px; }
.project-icon-choice[aria-pressed="true"] { border-color: #228be6; background: color-mix(in srgb, #228be6 16%, transparent); }
.theme-light .project-icon-choice[aria-pressed="true"] { border-color: #1c7ed6; background: color-mix(in srgb, #1c7ed6 12%, transparent); }
.project-icon-dialog .modal-actions { margin-top: 10px; }
.application-shell .project-icon-dialog .modal-actions button { height: 30px; padding: 0 10px; }
.project-icon-error { margin: 12px 0 0; color: #ff8787 !important; }
.theme-light .project-icon-error { color: #e03131 !important; }

/* Spacing scheme. Every list-style control shares one set of sizes, set by
   Settings > Appearance > Interface density (Compact is the default):

                         Compact  Comfortable  Spacious
     row / menu item       30px      34px        40px
     menu padding           4px       5px         6px
     settings row          52px      62px        74px
     section gap            8px      10px        12px

   Rows are the sidebar, Settings menu and every pop-up menu's items. Menus
   keep 8px between an item's icon and label and 8px side padding, with 2px
   between items. A menu's closing animation runs on a copy in
   .topbar-overlay-exit-layer, outside the shell, so it gets the same sizes. */
.application-shell,
.window-frame,
.topbar-overlay-exit-layer {
  --menu-item-height: max(26px, calc((var(--density-row) - 12px) * var(--interface-scale)));
  --menu-padding: calc(var(--density-gap) / 2 * var(--interface-scale));
  --menu-item-gap: 2px;
  --menu-item-inline: 8px;
  --menu-icon-gap: 8px;
}
:is(.application-shell, .topbar-overlay-exit-layer) :is(
  .profile-popover .profile-menu, .sidebar-item-menu, .page-menu, .file-room-options-menu,
  .coworker-row-menu, .coworker-sort-menu, .composer-add-popover, .setting-dropdown-menu,
  .workspace-context-menu, .tools-category-menu, .home-activity-metric-menu, .sidebar-view-menu
) { gap: var(--menu-item-gap); }
:is(.application-shell, .topbar-overlay-exit-layer) :is(
  .sidebar-item-menu, .page-menu, .file-room-options-menu, .coworker-row-menu, .coworker-sort-menu,
  .composer-add-popover, .setting-dropdown-menu, .workspace-context-menu, .tools-category-menu,
  .home-activity-metric-menu, .sidebar-view-menu, .profile-popover
) { padding: var(--menu-padding); }
:is(.application-shell, .topbar-overlay-exit-layer) .profile-popover .profile-menu { padding-top: var(--menu-padding); }
:is(.application-shell, .topbar-overlay-exit-layer) :is(
  .profile-popover .profile-menu > button, .sidebar-item-menu > button[role="menuitem"],
  .sidebar-project-picker-list > button, .page-menu button, .file-room-options-menu button,
  .coworker-row-menu button, .coworker-sort-menu button, .composer-add-popover > button,
  .setting-dropdown-option, .tools-category-menu button, .home-activity-metric-menu button,
  .sidebar-view-menu button
) {
  height: auto;
  min-height: var(--menu-item-height);
  gap: var(--menu-icon-gap);
  padding-block: 0;
  padding-inline: var(--menu-item-inline);
}
/* The workspace menu's items carry a second line, so they keep their own
   height and only share the side padding and spacing. */
.application-shell .workspace-context-menu button { gap: var(--menu-icon-gap); padding-inline: var(--menu-item-inline); }
.application-shell .settings-rail nav button { height: var(--menu-item-height); }
.application-shell .setting-row { padding: var(--density-gap) 14px; gap: 16px; }
/* Settings fields, dropdowns and buttons are one row tall: 30px at Compact. */
.application-shell :is(.setting-row :is(.setting-input, .setting-dropdown > button, .setting-action), .settings-section-footer > .setting-action) { height: var(--menu-item-height); min-height: 0; }

/* The chat model picker's Local Host / API Connected switch, styled like
   the Cohorts model picker's. */
.chat-model-source-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0 2px 4px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.theme-light .chat-model-source-tabs { background: #f8f9fb; }
.chat-model-source-tabs > button { min-width: 0; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; background: transparent; color: var(--muted); transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease; }
.chat-model-source-tabs > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-model-source-tabs .ui-icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.chat-model-source-tabs > button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, var(--editor)); }
.chat-model-source-tabs > button[aria-pressed="true"],
.chat-model-source-tabs > button[aria-pressed="true"]:hover { color: var(--text); background: var(--editor); border-color: color-mix(in srgb, var(--text) 13%, var(--editor)); box-shadow: 0 1px 3px #0000001c; font-weight: 600; }
.theme-light .chat-model-source-tabs > button[aria-pressed="true"] { background: #fff; }
.chat-model-source-tabs > button:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .chat-model-source-tabs > button { transition: none; } }

/* Local Host models that can't run here yet stay listed at full brightness
   and open the download catalogue; their info card says why. */
/* With all Local Host models listed the picker scrolls; rows keep their full
   height instead of being squeezed to fit the list's maximum height. */
.chat-model-list { grid-auto-rows: max-content; }
.chat-model-list > button.is-unavailable em { white-space: nowrap; }
.chat-model-download { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-left: auto; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.chat-model-download .ui-icon { width: 13px; height: 13px; }
.chat-model-list > button.is-unavailable:hover .chat-model-download,
.chat-model-list > button.is-unavailable:focus-visible .chat-model-download { border-color: #228be6; color: var(--text); }

/* The selected page's icon in the fixed sidebar sits on a tab in the colour
   of the surface it opens onto: rounded on the left, open on the right where
   it joins the page, with concave corners flaring into the page edge above
   and below. Pages with a navigation panel against the edge (Chat, Cohorts,
   File Room, Settings) use that panel's colour; the rest use the page colour.
   Light mode is white on every page. */
.application-shell {
  --sidebar-tab-surface: var(--main-page-surface, #242424);
  --sidebar-tab-radius: 8px;
  /* Room between the icon's 32px box and the tab's edge. */
  --sidebar-tab-pad: 3px;
  /* The tab's left corners and its flares share one radius. */
  --sidebar-flare-radius: calc(var(--sidebar-tab-radius) + var(--sidebar-tab-pad));
  /* From an icon's right edge to the page edge: icons are 32px wide and
     centred in the sidebar. */
  --sidebar-tab-reach: calc((var(--application-sidebar-width) - 32px) / 2);
}
.application-shell:has(.window-frame:not(.sidebar-is-collapsed) :is(aside.sidebar, .file-room-library)) { --sidebar-tab-surface: var(--sidebar); }
.application-shell.theme-light,
.application-shell.theme-light:has(.window-frame:not(.sidebar-is-collapsed) :is(aside.sidebar, .file-room-library)) { --sidebar-tab-surface: #fff; }
.application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"],
.application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"]:is(:hover, :focus-visible),
.theme-light .application-sidebar > .application-sidebar-button[aria-current="page"] { background: transparent; color: var(--text); }
.theme-light .application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"] { color: #242424; }
/* The tab: runs 4px past the page edge so it joins the page seamlessly. */
.application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"]::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--sidebar-tab-pad)) calc(-1 * var(--sidebar-tab-reach) - 4px) calc(-1 * var(--sidebar-tab-pad)) calc(-1 * var(--sidebar-tab-pad));
  border-radius: var(--sidebar-flare-radius) 0 0 var(--sidebar-flare-radius);
  background: var(--sidebar-tab-surface);
  pointer-events: none;
}
/* The flares: a quarter circle cut from a small square above and below the
   tab's open end, so its top and bottom edges curve into the page edge. They
   use the same radius as the tab's left corners. */
.application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"]::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--sidebar-tab-pad) - var(--sidebar-flare-radius));
  bottom: calc(-1 * var(--sidebar-tab-pad) - var(--sidebar-flare-radius));
  /* 1px into the page so no hairline shows where the flare meets it. */
  right: calc(-1 * var(--sidebar-tab-reach) - 1px);
  width: var(--sidebar-flare-radius);
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--sidebar-flare-radius) - .5px), var(--sidebar-tab-surface) var(--sidebar-flare-radius)) top right / var(--sidebar-flare-radius) var(--sidebar-flare-radius) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--sidebar-flare-radius) - .5px), var(--sidebar-tab-surface) var(--sidebar-flare-radius)) bottom right / var(--sidebar-flare-radius) var(--sidebar-flare-radius) no-repeat;
  pointer-events: none;
}
/* The page options start just high enough that the selected tab's top edge
   (3px above the button) is level with the page's top edge, i.e. the bottom
   of the top bar. They keep their even 38px rhythm. */
.application-sidebar { padding-top: var(--sidebar-tab-pad, 3px); }
/* Home's tab starts level with the page top, so it has no top flare; the
   bottom flare is the same as every other tab's. Its body reaches over the
   page's 14px rounded corner (same colour as the page), so the tab's top edge
   runs straight into the page's top edge with no notch between them. */
.application-sidebar > .application-home[aria-current="page"]::before {
  right: calc(-1 * var(--sidebar-tab-reach) - 14px);
}
.application-sidebar > .application-home[aria-current="page"]::after {
  background:
    radial-gradient(circle at 0 100%, transparent calc(var(--sidebar-flare-radius) - .5px), var(--sidebar-tab-surface) var(--sidebar-flare-radius)) bottom right / var(--sidebar-flare-radius) var(--sidebar-flare-radius) no-repeat;
}

/* Side/Top Bar Background. When the bars are set to Dark or Light against
   the other color mode, the shell carries data-chrome and only the bars
   change: their background, text and icons. Pop-ups and tooltips opened from
   the bars, and the selected page's tab (which matches the page), keep
   following the color mode. */
.application-shell[data-chrome="dark"] {
  --application-chrome-surface: #000;
  --chrome-fg: #f0f0f1;
  --chrome-fg-strong: #fff;
  --chrome-icon: #bdbdbd;
  --chrome-divider: rgb(189 189 189 / .42);
  --chrome-hover: rgb(240 240 241 / .08);
  --chrome-search: #8f9299;
}
.application-shell[data-chrome="light"] {
  --application-chrome-surface: #f0f0f0;
  --chrome-fg: #1e252e;
  --chrome-fg-strong: #000;
  --chrome-icon: #505050;
  --chrome-divider: rgb(81 92 104 / .42);
  --chrome-hover: rgb(0 0 0 / .07);
  --chrome-search: #727984;
}
.application-shell[data-chrome] > .application-topbar { color: var(--chrome-fg); }
.application-shell[data-chrome] > .application-topbar :is(button, input, .application-search):not(:is(.session-activity-menu, .workspace-context-menu, .application-search-results, [role="menu"], [role="dialog"], [role="listbox"]) *) { color: var(--chrome-fg); }
.application-shell[data-chrome] > .application-topbar :is([data-action="navigate-back"], [data-action="navigate-forward"], .application-search-toggle) { color: var(--chrome-fg-strong); }
.application-shell[data-chrome] > .application-topbar .application-search { color: var(--chrome-search); }
.application-shell[data-chrome] > .application-topbar .topbar-context-divider { background: var(--chrome-divider); }
.application-shell[data-chrome] > .application-topbar :is(.session-activity-toggle, .workspace-context-toggle, [data-action="navigate-back"], [data-action="navigate-forward"], .application-search-toggle):is(:hover, :focus-visible) { background: var(--chrome-hover); }
.application-shell[data-chrome] > .application-sidebar > .application-home { color: var(--chrome-fg-strong); }
.application-shell[data-chrome] > .application-sidebar > .application-sidebar-button:not([aria-current="page"]) { color: var(--chrome-icon); }
.application-shell[data-chrome] > .application-sidebar > :is(.application-home, .application-sidebar-button):not([aria-current="page"]):is(:hover, :focus-visible) { color: var(--chrome-fg); background: var(--chrome-hover); }
.application-shell[data-chrome] > .application-sidebar > .topbar-profile-button { color: var(--chrome-fg); }
/* The selected icon sits on the page-coloured tab, so it uses the page's
   text colour rather than the bars'. */
.application-shell.theme-dark[data-chrome] > .application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"] { color: #f0f1f2; }
.application-shell.theme-light[data-chrome] > .application-sidebar > :is(.application-home, .application-sidebar-button)[aria-current="page"] { color: #242424; }

/* Keyboard shortcuts: compact rows like the other Settings rows, each with
   its keys, a Change button and, once changed, a Reset button. */
.application-shell .shortcut-row { min-height: 0; padding: var(--density-gap) 14px; gap: 16px; }
.application-shell .shortcut-row > div { gap: 8px; }
.application-shell .shortcut-row kbd { min-width: 76px; height: var(--menu-item-height); border-bottom-width: 2px; font-family: inherit; }
.application-shell .shortcut-row kbd.is-empty { color: var(--dim); border-style: dashed; border-bottom-width: 1px; }
.application-shell .shortcut-row kbd.is-recording { border-color: #228be6; color: var(--text); }
.application-shell .shortcut-row .setting-action { height: var(--menu-item-height); }
/* Change and Cancel share one width so the keys column stays put. */
.application-shell .shortcut-row .shortcut-change { min-width: 68px; justify-content: center; }
.settings-card.shortcut-list { position: relative; }
.application-shell .shortcut-list > .shortcut-reset-all { position: absolute; top: 6px; right: 14px; height: var(--menu-item-height); }
.shortcut-hint, .shortcut-notice { margin: 0; padding: 8px 14px 12px; color: var(--dim); }
.shortcut-notice { padding-top: 0; color: var(--text); }

/* The model picker uses the same surface as the Add menu beside it and the
   project and chat menus: #2c2c2c with the shared line colour in dark mode.
   Light mode keeps its white surface. */
.theme-dark .chat-model-popover {
  border-color: var(--line);
  background: #2c2c2c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  backdrop-filter: none;
}

/* Local Host rows in the model picker: logo, name and an info icon. Hovering
   the icon shows a card with the model's device fit, size, memory, where it
   runs and its status, beside the picker. */
.chat-model-list > button.is-local-model { min-height: 32px; grid-template-columns: 22px minmax(0, 1fr) 22px 14px; }
.chat-model-list > button.is-local-model > .chat-model-name { display: block; }
.chat-model-info-source { display: none !important; }
.chat-model-list > button > .chat-model-row-info { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); }
.chat-model-list > button > .chat-model-row-info .ui-icon { width: 15px; height: 15px; }
.chat-model-list > button:is(:hover, :focus-visible) > .chat-model-row-info { color: var(--muted); }
.chat-model-list > button > .chat-model-row-info:hover { color: var(--text); background: color-mix(in srgb, var(--text) 11%, transparent); }
.chat-model-info-card {
  position: absolute;
  z-index: 3;
  width: 268px;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2c2c2c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
  color: var(--text);
  font: 450 var(--type-caption)/1.35 var(--font-ui);
  pointer-events: none;
}
.chat-model-info-card[hidden] { display: none; }
.theme-light .chat-model-info-card { border-color: #c8ccd3; background: #fff; box-shadow: 0 14px 34px rgba(38, 45, 56, .16); }
.chat-model-info-head { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; }
.chat-model-info-head .model-picker-logo { width: 24px; height: 24px; }
.chat-model-info-head .model-picker-logo.provider-ibm { width: 26px; }
.chat-model-info-head > span { min-width: 0; display: grid; gap: 2px; }
.chat-model-info-head strong { color: var(--text); font: 600 var(--type-secondary)/1.2 var(--font-ui); }
.chat-model-info-head strong + span { color: var(--dim); }
.chat-model-info-fit,
.chat-model-info-facts { padding-top: 10px; border-top: 1px solid var(--line); }
.chat-model-info-fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 4px; }
.chat-model-info-label { color: var(--muted); font-weight: 600; }
.chat-model-info-fit .local-capability { min-width: 0; }
.chat-model-info-fit .local-capability b { font-size: var(--type-secondary); }
.chat-model-info-reason { grid-column: 1 / -1; color: var(--dim); }
.chat-model-info-facts { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 5px 10px; }
.chat-model-info-facts > span:nth-child(odd) { color: var(--dim); }
.chat-model-info-facts > span:nth-child(even) { color: var(--text); }
.chat-model-info-status[data-tone="ready"] { color: #65d19d !important; }
.theme-light .chat-model-info-status[data-tone="ready"] { color: #137044 !important; }
.chat-model-info-description { color: var(--muted); }

/* Model picker rows use the app's shared menu-item look (project, page,
   Add and view menus): no outline, 6px corners, an 11% tint on hover and a
   7% tint for the selected model. */
.chat-model-popover:not(.cohort-model-popover, .cohort-dialog-model-popover) .chat-model-list > button {
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
}
.chat-model-popover:not(.cohort-model-popover, .cohort-dialog-model-popover) .chat-model-list > button[aria-selected="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.chat-model-popover:not(.cohort-model-popover, .cohort-dialog-model-popover) .chat-model-list > button:is(:hover, :focus-visible) {
  outline: 0;
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 11%, transparent);
}

/* Context popover: every category has its own colour, used by its row's dot,
   its row track and its segment of the usage bar. The bar's segments run
   from the largest share (left) to the smallest (right). */
.composer-context-popover :is([data-context-category], [data-context-segment]) { --category-color: var(--context-color); }
.composer-context-popover :is([data-context-category="system"], [data-context-segment="system"]) { --category-color: #7c8cff; }
.composer-context-popover :is([data-context-category="instructions"], [data-context-segment="instructions"]) { --category-color: #b38cf5; }
.composer-context-popover :is([data-context-category="current"], [data-context-segment="current"]) { --category-color: #4cc3e8; }
.composer-context-popover :is([data-context-category="history"], [data-context-segment="history"]) { --category-color: #53c998; }
.composer-context-popover :is([data-context-category="attachments"], [data-context-segment="attachments"]) { --category-color: #f0b45a; }
.composer-context-popover :is([data-context-category="memory"], [data-context-segment="memory"]) { --category-color: #ef7fb0; }
.composer-context-popover :is([data-context-category="live"], [data-context-segment="live"]) { --category-color: #f08a5d; }
.composer-context-popover :is([data-context-category="tools"], [data-context-segment="tools"]) { --category-color: #b6d86a; }
.composer-context-popover :is([data-context-category="template"], [data-context-segment="template"]) { --category-color: #9aa3ad; }
.theme-light .composer-context-popover :is([data-context-category="system"], [data-context-segment="system"]) { --category-color: #4f5fe0; }
.theme-light .composer-context-popover :is([data-context-category="instructions"], [data-context-segment="instructions"]) { --category-color: #8657d6; }
.theme-light .composer-context-popover :is([data-context-category="current"], [data-context-segment="current"]) { --category-color: #1b8fb5; }
.theme-light .composer-context-popover :is([data-context-category="history"], [data-context-segment="history"]) { --category-color: #1f9a68; }
.theme-light .composer-context-popover :is([data-context-category="attachments"], [data-context-segment="attachments"]) { --category-color: #c4831f; }
.theme-light .composer-context-popover :is([data-context-category="memory"], [data-context-segment="memory"]) { --category-color: #cf4d88; }
.theme-light .composer-context-popover :is([data-context-category="live"], [data-context-segment="live"]) { --category-color: #d0602f; }
.theme-light .composer-context-popover :is([data-context-category="tools"], [data-context-segment="tools"]) { --category-color: #6f9a1f; }
.theme-light .composer-context-popover :is([data-context-category="template"], [data-context-segment="template"]) { --category-color: #6b7480; }
.composer-context-row .composer-context-swatch,
.composer-context-row .composer-context-track span { background: var(--category-color); }
.composer-context-meter > .composer-context-meter-fill { display: flex; gap: 2px; height: 100%; overflow: hidden; border-radius: inherit; background: transparent; transition: width .2s ease; }
.composer-context-meter-fill > .composer-context-segment { display: block; flex: none; min-width: 3px; height: 100%; border-radius: 0; background: var(--category-color); }
.composer-context-meter-fill > .composer-context-segment:last-child { flex: 1 1 auto; }

/* Hovering a context row highlights it with a soft background and dims the
   other segments of the usage bar, leaving its own segment at full strength.
   The row's padding is offset by an equal negative margin so the list does
   not shift. */
.composer-context-row { margin: -4px -7px; padding: 4px 7px; border-radius: 7px; transition: background-color .15s ease; }
.composer-context-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.composer-context-meter-fill > .composer-context-segment { transition: opacity .15s ease; }
.composer-context-popover:has(.composer-context-row[data-context-category="system"]:hover) .composer-context-segment:not([data-context-segment="system"]),
.composer-context-popover:has(.composer-context-row[data-context-category="instructions"]:hover) .composer-context-segment:not([data-context-segment="instructions"]),
.composer-context-popover:has(.composer-context-row[data-context-category="current"]:hover) .composer-context-segment:not([data-context-segment="current"]),
.composer-context-popover:has(.composer-context-row[data-context-category="history"]:hover) .composer-context-segment:not([data-context-segment="history"]),
.composer-context-popover:has(.composer-context-row[data-context-category="attachments"]:hover) .composer-context-segment:not([data-context-segment="attachments"]),
.composer-context-popover:has(.composer-context-row[data-context-category="memory"]:hover) .composer-context-segment:not([data-context-segment="memory"]),
.composer-context-popover:has(.composer-context-row[data-context-category="live"]:hover) .composer-context-segment:not([data-context-segment="live"]),
.composer-context-popover:has(.composer-context-row[data-context-category="tools"]:hover) .composer-context-segment:not([data-context-segment="tools"]),
.composer-context-popover:has(.composer-context-row[data-context-category="template"]:hover) .composer-context-segment:not([data-context-segment="template"]) { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  .composer-context-row, .composer-context-meter-fill > .composer-context-segment { transition: none; }
}

/* Top Models bars use the calendar's day popup; a stacked bar also lists
   each model's tokens under the total. */
.home-activity-day-tooltip-models { display: grid; gap: 3px; margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); }
.home-activity-day-tooltip-models[hidden], .home-activity-day-tooltip-models:empty { display: none; }
.home-activity-day-tooltip-models > span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: 12px; }
.home-activity-day-tooltip-models i { width: 8px; height: 8px; border-radius: 2px; }
.home-activity-day-tooltip-models span span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.home-activity-day-tooltip-models b { font-weight: 600; }
.home-models-month[data-models-bar-start] { cursor: default; }

/* The Top Models bar popup can be hovered and clicked: "Models Used" with a
   sideways arrow expands the per-model token list below it. */
.home-models-tooltip { min-width: 180px; max-width: 300px; pointer-events: auto; }
.home-models-tooltip .home-activity-day-tooltip-models > span { grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 8px; }
.home-models-tooltip .home-activity-day-tooltip-models span span { white-space: nowrap; }
.home-models-tooltip-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 3px -5px 0; padding: 3px 5px; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); background: transparent; font-size: 12px; text-align: left; }
.home-models-tooltip-toggle[hidden] { display: none; }
.home-models-tooltip-toggle:hover, .home-models-tooltip-toggle:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 5px; outline: 0; }
.home-models-tooltip-toggle .ui-icon { width: 12px; height: 12px; flex: none; transition: transform .15s ease; }
.home-models-tooltip-toggle[aria-expanded="true"] .ui-icon { transform: rotate(90deg); }
.home-models-tooltip .home-activity-day-tooltip-models { margin-top: 0; padding-top: 2px; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .home-models-tooltip-toggle .ui-icon { transition: none; } }

/* Chatbox send buttons use the solid form of Iconoir's maps-arrow. Iconoir
   ships no solid maps-arrow, so the same outline path is filled with the
   button's colour; the shape is unchanged. */
.omnesly-chat-submit .ui-icon[data-icon="mapsArrow"],
.omnesly-chat-submit .ui-icon[data-icon="mapsArrow"] path { fill: currentColor; }

/* Home: a minimal chatbox centred at the bottom of the page, with the full
   chatbox's surface and border. Left to right: options menu, message field,
   send button. */
.home-main { position: relative; }
.home-content { padding-bottom: 96px; }
.home-mini-composer {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 4;
  width: min(560px, calc(100% - 48px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 13px;
  background: var(--application-chrome-surface);
  transform: translateX(-50%);
}
.theme-dark .home-mini-composer { background: var(--sidebar); }
.home-mini-menu-anchor { position: relative; }
/* The Home options button uses .omnesly-chat-tool, the full chatbox's +
   button style; in light mode it gets the same grey fill as there. */
.application-shell.theme-light .home-mini-composer .omnesly-chat-tool { background: #f1f3f5; }
.application-shell.theme-light .home-mini-composer .omnesly-chat-tool:is(:hover, [aria-expanded="true"]) { background: #e9ecef; }
.home-mini-menu-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; }
.home-mini-input { width: 100%; min-width: 0; height: 32px; border: 0; padding: 0 6px; outline: 0; color: var(--text); background: transparent; font: 450 var(--type-secondary)/18px var(--font-ui); }
.home-mini-input::placeholder { color: var(--dim); }
.home-mini-composer .omnesly-chat-submit { margin: 0; }
/* The Home options menu reuses .composer-add-popover (the full chatbox's +
   menu) for its look; keyboard focus gets the same highlight as hover. */
.home-mini-menu > button:focus-visible { outline: 0; background: rgba(255, 255, 255, .07); }
.theme-light .home-mini-menu > button:focus-visible { background: rgba(64, 75, 90, .07); }

/* Home customisation: a circular edit button at the top right of the page,
   an "Edit Background" label below it on hover, and a popup with the
   greeting and usage switches and the background choices. */
.home-content { position: relative; }
/* Right edge lines up with the top bar's search icon (14px from the window's
   right side: the search button's 9px inset plus the icon's 5px inset).
   Vertically it sits level with the sidebar's Omnesly logo (both 32px tall;
   the logo starts 3px below the page top), nudged 4px lower. */
.home-edit-anchor { position: absolute; top: calc(var(--sidebar-tab-pad, 3px) + 4px); right: 14px; z-index: 5; }
.home-edit-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; padding: 0; color: var(--muted); background: transparent; }
.home-edit-toggle:hover, .home-edit-toggle[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.home-edit-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; }
.home-edit-toggle .ui-icon { width: 16px; height: 16px; }
.home-edit-tooltip { position: absolute; top: calc(100% + 6px); right: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #2c2c2c; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.theme-light .home-edit-tooltip { background: #fff; box-shadow: 0 6px 18px rgba(38, 45, 56, .12); }
.home-edit-anchor:not(.is-open) .home-edit-toggle:is(:hover, :focus-visible) + .home-edit-tooltip { opacity: 1; }
.home-edit-popup { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; box-sizing: border-box; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #2c2c2c; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); }
.theme-light .home-edit-popup { background: #fff; box-shadow: 0 14px 32px rgba(38, 45, 56, .18); }
.home-edit-title { padding: 2px 4px 6px; color: var(--muted); font-weight: 600; }
.home-edit-switch-row { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 6px; padding: 5px 6px; color: var(--text); background: transparent; text-align: left; }
.home-edit-switch-row:is(:hover, :focus-visible) { outline: 0; background: color-mix(in srgb, var(--text) 9%, transparent); }
.home-edit-switch { position: relative; width: 28px; height: 16px; flex: none; border-radius: 99px; background: color-mix(in srgb, var(--text) 22%, transparent); transition: background-color .15s ease; }
.home-edit-switch i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.home-edit-switch-row[aria-checked="true"] .home-edit-switch { background: #228be6; }
.home-edit-switch-row[aria-checked="true"] .home-edit-switch i { transform: translateX(12px); }
.home-edit-section { display: grid; gap: 7px; margin-top: 4px; padding: 8px 6px 2px; border-top: 1px solid var(--line); }
.home-edit-section > span { color: var(--muted); }
.home-edit-backgrounds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.home-edit-background { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: transparent; }
.home-edit-background[aria-checked="true"] { border-color: var(--text); }
.home-edit-background:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 1px; }
.home-edit-background .home-background-swatch { position: absolute; inset: 2px; border-radius: 5px; }
.home-edit-background .ui-icon { position: relative; width: 12px; height: 12px; color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
/* Backgrounds: soft colour washes over the page colour, in both themes. The
   washes stay clear of the left edge, where the selected Home tab (drawn in
   the plain page colour) joins the page. */
:is(.home-main, .home-background-swatch)[data-home-background="default"] { background: var(--editor); }
:is(.home-main, .home-background-swatch)[data-home-background="graphite"] { background: radial-gradient(ellipse 50% 75% at 62% 0%, color-mix(in srgb, var(--text) 9%, transparent), transparent 60%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--text) 6%, transparent), transparent 55%), var(--editor); }
:is(.home-main, .home-background-swatch)[data-home-background="ocean"] { background: radial-gradient(ellipse 50% 75% at 62% 0%, rgba(56, 132, 214, .28), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(32, 178, 170, .2), transparent 55%), var(--editor); }
:is(.home-main, .home-background-swatch)[data-home-background="forest"] { background: radial-gradient(ellipse 50% 75% at 62% 0%, rgba(47, 158, 106, .26), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(124, 179, 66, .16), transparent 55%), var(--editor); }
:is(.home-main, .home-background-swatch)[data-home-background="dusk"] { background: radial-gradient(ellipse 50% 75% at 62% 0%, rgba(142, 91, 216, .28), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(214, 91, 154, .18), transparent 55%), var(--editor); }
:is(.home-main, .home-background-swatch)[data-home-background="sunrise"] { background: radial-gradient(ellipse 50% 75% at 62% 0%, rgba(240, 138, 60, .26), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(229, 192, 74, .16), transparent 55%), var(--editor); }
/* The popup's previews show each background's colours at full strength. */
.home-background-swatch[data-home-background="graphite"] { background: linear-gradient(135deg, color-mix(in srgb, var(--text) 28%, var(--editor)), var(--editor)); }
.home-background-swatch[data-home-background="ocean"] { background: linear-gradient(135deg, rgba(56, 132, 214, .85), rgba(32, 178, 170, .7)); }
.home-background-swatch[data-home-background="forest"] { background: linear-gradient(135deg, rgba(47, 158, 106, .85), rgba(124, 179, 66, .7)); }
.home-background-swatch[data-home-background="dusk"] { background: linear-gradient(135deg, rgba(142, 91, 216, .85), rgba(214, 91, 154, .7)); }
.home-background-swatch[data-home-background="sunrise"] { background: linear-gradient(135deg, rgba(240, 138, 60, .85), rgba(229, 192, 74, .7)); }
@media (prefers-reduced-motion: reduce) { .home-edit-tooltip, .home-edit-switch, .home-edit-switch i { transition: none; } }

/* Expanded top-bar search matches the website's search field: 4px corners,
   a #2e2e2e field with a #424242 border, a grey search icon on the left,
   "Search" placeholder and a key badge for the search shortcut on the right.
   It is 28px tall to fit the 36px top bar (the website's is 36px). */
.application-search-wrap.is-expanded { width: 220px; }
/* Open and closed share one height and corner radius, so the box only
   widens and fades in or out; nothing snaps to a pill while it animates. */
.application-search { height: 28px; margin-top: -1px; border-radius: 4px; }
.application-search-wrap.is-expanded .application-search { padding: 0 4px 0 2px; border-color: #424242; background: #2e2e2e; color: #828282; }
.application-search-toggle { border-radius: 4px; transition: color 180ms ease, background-color 120ms ease; }
.application-search-wrap.is-expanded .application-search-toggle { color: #828282; }
.application-search-wrap.is-expanded .application-search-toggle:hover { color: #c9c9c9; background: transparent; }
/* Focus: the field never draws the app-wide focus rectangle; the whole box's
   border brightens instead. The icon's own ring shows only when closed. */
.application-shell .application-search input:focus-visible { outline: 0; box-shadow: none; }
.application-shell .home-mini-input:focus, .application-shell .home-mini-input:focus-visible { outline: 0; box-shadow: none; }
.application-search-wrap.is-expanded .application-search:focus-within { border-color: #5c5c5c; }
.theme-light .application-search-wrap.is-expanded .application-search:focus-within { border-color: #adb5bd; }
.application-search-wrap.is-expanded .application-search-toggle:focus-visible { outline: 0; }
.application-search-wrap:not(.is-expanded) .application-search-toggle:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 0; }
.application-search-wrap.is-expanded input { color: #c9c9c9; }
.application-search-wrap.is-expanded input::placeholder { color: #696969; }
.application-search-shortcut { display: none; flex: none; margin: 0 2px 0 5px; padding: 4px 6px; border-radius: 3px; color: #828282; background: #242424; font: 700 12px/12px var(--font-ui); white-space: nowrap; }
.application-search-wrap.is-expanded .application-search-shortcut { display: block; }
.application-search-wrap.is-expanded .application-search:has(input:not(:placeholder-shown)) .application-search-shortcut { display: none; }
.theme-light .application-search-wrap.is-expanded .application-search { border-color: #ced4da; background: #fff; color: #868e96; }
.theme-light .application-search-wrap.is-expanded .application-search-toggle { color: #868e96; }
.theme-light .application-search-wrap.is-expanded input { color: #000; }
.theme-light .application-search-wrap.is-expanded input::placeholder { color: #adb5bd; }
.theme-light .application-search-shortcut { color: #868e96; background: #f1f3f5; }

/* The search results popup has the same edges as the search field: 4px
   corners and the field's 1px border colour. Its rows use 3px corners so
   their highlight sits neatly inside. */
.application-search-results { border-color: #424242; border-radius: 4px; }
.application-search-result { border-radius: 3px; }
.theme-light .application-search-results { border-color: #ced4da; }

/* Home chatbox: it lifts slightly while the user is typing in it, and its
   options icon is a little larger. */
.home-mini-composer { transition: transform var(--motion-fast, 140ms) ease, box-shadow var(--motion-fast, 140ms) ease, border-color var(--motion-fast, 140ms) ease; }
.home-mini-composer:focus-within { transform: translateX(-50%) scale(1.025); border-color: color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 10px 28px rgba(20, 26, 34, .12); }
.theme-dark .home-mini-composer:focus-within { box-shadow: 0 10px 28px rgba(0, 0, 0, .38); }
@media (prefers-reduced-motion: reduce) { .home-mini-composer { transition: none; } }
.application-shell .home-mini-input:focus, .application-shell .home-mini-input:focus-visible { outline: 0; border: 0; box-shadow: none; }
/* Send buttons in every chatbox use the blue Settings buttons show on hover.
   With nothing to send they stay blue but faded, without the "not allowed"
   cursor. */
.application-shell .omnesly-chat-submit:not(.is-cancel),
.application-shell.theme-light .omnesly-chat-submit:not(.is-cancel) { color: #fff; background: #228be6; }
.application-shell .omnesly-chat-submit:not(.is-cancel):hover:not(:disabled) { color: #fff; background: #1c7ed6; }
/* Every send button lifts toward the viewer on hover, including while it is
   faded because there's nothing to send yet. */
.application-shell .omnesly-chat-submit:not(.is-cancel):hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 4px 10px rgba(28, 126, 214, .3); }
.application-shell .omnesly-chat-submit:not(.is-cancel) { transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.application-shell .omnesly-chat-submit:not(.is-cancel):active:not(:disabled) { transform: none; box-shadow: none; }
.application-shell .omnesly-chat-submit:not(.is-cancel):disabled { opacity: .45; cursor: default; }
/* The model picker grows out of its button (bottom left) with a short,
   steady fade instead of scaling from its centre. */
.omnesly-chat-provider > .chat-model-popover { transform-origin: 24px calc(100% + 7px); animation: chat-model-picker-in .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes chat-model-picker-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .omnesly-chat-provider > .chat-model-popover { animation-duration: .01s; } }
/* Light mode chatboxes: a white card lifted off the page with a fine border
   and a soft shadow, instead of a flat grey block. Toolbar buttons sit on a
   cool light grey so they still read as buttons on white. */
.application-shell.theme-light :is(.omnesly-chat-bar, .home-mini-composer) {
  border-color: #dee2e6;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 37, 46, .04), 0 6px 20px rgba(30, 37, 46, .06);
}
.application-shell.theme-light :is(.omnesly-chat-bar, .home-mini-composer):focus-within {
  border-color: #ced4da;
  box-shadow: 0 1px 2px rgba(30, 37, 46, .05), 0 10px 28px rgba(30, 37, 46, .09);
}
.application-shell.theme-light .omnesly-chat-bar :is(.omnesly-chat-tool, .chat-model-toggle, .composer-effort-toggle, [class*="effort"] > button) { background: #f1f3f5; }
.application-shell.theme-light .omnesly-chat-bar :is(.omnesly-chat-tool, .chat-model-toggle, .composer-effort-toggle, [class*="effort"] > button):hover:not(:disabled) { background: #e9ecef; }
/* Sidebar chats have no status dot; their names line up with project names
   (after the project icon). */
.sidebar-list-item:not(.sidebar-project-chat-item) > .chat-row { padding-left: calc(var(--sidebar-row-padding) + var(--icon-md) - 2px); }
/* A small pulsing green dot beside "Activity" marks a finished reply the user
   has not seen yet; it fades out when the Activity menu is opened. */
.session-activity-dot { position: relative; flex: 0 0 7px; width: 7px; height: 7px; margin-right: -1px; border-radius: 50%; background: #2bca68; }
.session-activity-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: session-activity-dot-pulse 1.8s ease-out infinite; }
.session-activity-dot.is-fading { animation: session-activity-dot-fade .4s ease forwards; }
.session-activity-dot.is-fading::after { animation: none; }
@keyframes session-activity-dot-pulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes session-activity-dot-fade { to { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .session-activity-dot::after { animation: none; } }
/* Activity log. Two voices: the model's account of the task is prose in the
   main text colour; Omnesly's record of what ran is a quiet timeline of short
   labels. Each entry's marker shows its state: a spinner while in progress,
   an amber dot when it needs the user, the step's icon when done, a red mark
   when it failed. A thin rail joins the markers. */
.chat-activity { gap: 12px; color: var(--muted); }
.chat-activity-overview { margin: 0; color: var(--text); font-size: 13px; line-height: 1.6; }
.chat-activity-timeline { display: grid; gap: 0; }
.chat-activity-timeline .chat-activity-step { gap: 10px; padding: 0 0 12px; }
.chat-activity-timeline .chat-activity-step:last-child { padding-bottom: 0; }
.chat-activity-timeline .chat-activity-step::before { content: none; }
.chat-activity-timeline .chat-activity-step:not(:last-child)::after { content: ''; position: absolute; left: 7.5px; top: 21px; bottom: 3px; width: 1px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.chat-activity-marker { position: relative; display: grid; place-items: center; width: 16px; height: 18px; flex: 0 0 16px; color: var(--muted); }
.chat-activity-marker .chat-activity-icon { width: 15px; height: 15px; margin: 0; color: inherit; }
.chat-activity-step.is-done .chat-activity-marker { color: var(--dim); }
.chat-activity-step.is-failed .chat-activity-marker { color: var(--red); }
.chat-activity-step.is-stopped .chat-activity-marker { color: var(--dim); }
.chat-activity-label { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 0 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
.chat-activity-step.is-active .chat-activity-label { color: var(--text); }
.chat-activity-step.is-waiting .chat-activity-label { color: var(--text); font-weight: 550; }
.chat-activity-step.is-failed .chat-activity-label { color: color-mix(in srgb, var(--red) 70%, var(--text)); }
.chat-activity-timeline .chat-activity-step p { margin: 2px 0 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.chat-activity-state { color: #f08c00; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.chat-activity-spinner { width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent); border-top-color: var(--text); border-radius: 50%; animation: chat-activity-spin .8s linear infinite; }
.chat-activity-waiting-dot { width: 8px; height: 8px; border-radius: 50%; background: #f08c00; box-shadow: 0 0 0 3px color-mix(in srgb, #f08c00 22%, transparent); }
@keyframes chat-activity-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-activity-spinner { animation-duration: 2.4s; } }
.chat-activity-timeline .chat-activity-step.is-pill-group { padding-left: 0; }
.chat-activity-step .chat-activity-pill-heading { margin-bottom: 7px; line-height: 18px; }
.chat-activity-toggle { gap: 7px; }
.chat-activity-summary { color: var(--dim); font-size: 12px; font-weight: 450; }
.chat-activity-summary::before { content: '·'; margin-right: 7px; }
/* The chatbox is the top layer of every chat page: above the transcript,
   sidebars, the top bar and their menus. Only full-screen dialogs (z 500)
   and notifications sit higher. It also takes the pointer itself, instead of
   letting it pass through to the page behind, so it can be hovered, clicked
   and picked as one element. */
.omnesly-chat-dock { z-index: 450; pointer-events: auto; isolation: isolate; }
/* An open chat's chatbox ends level with the bottom of the profile avatar in
   the sidebar (the avatar sits 3px inside its button). */
.chat-content:not(.is-new-chat) > .chat-chat-dock { bottom: calc(var(--application-profile-bottom-inset) + 3px); }
/* Full chatboxes (chat, projects, Developer, Work) lift slightly while the
   user is typing in them, like the Home chatbox. Scaling from the bottom
   keeps the box anchored to its spot. Only the message field triggers it, so
   menus opened from the toolbar don't shift. */
.omnesly-chat-bar { transform-origin: 50% 100%; transition: transform var(--motion-fast, .16s) ease, box-shadow var(--motion-fast, .16s) ease, border-color var(--motion-fast, .16s) ease; }
.omnesly-chat-bar:has(.omnesly-chat-input:focus) { transform: scale(1.015); }
.application-shell.theme-light .omnesly-chat-bar:has(.omnesly-chat-input:focus) { border-color: #ced4da; box-shadow: 0 1px 2px rgba(30, 37, 46, .05), 0 12px 32px rgba(30, 37, 46, .11); }
.theme-dark .omnesly-chat-bar:has(.omnesly-chat-input:focus) { box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { .omnesly-chat-bar { transition: none; } }
/* Long sidebar names fade out on the right. Hovering anywhere on the row
   (not just the text) starts the loop after one second: the name scrolls
   left continuously, with a copy following so it reads as an endless
   carousel. Leaving the row stops it and returns to the start. */
:is(.chat-row, .project-root):hover > .sidebar-item-name.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
}
:is(.chat-row, .project-root):hover > .sidebar-item-name.is-overflowing .sidebar-item-name-track {
  animation: sidebar-name-marquee var(--sidebar-marquee-duration, 6s) linear 1s infinite;
}
@media (prefers-reduced-motion: reduce) {
  :is(.chat-row, .project-root):hover > .sidebar-item-name.is-overflowing .sidebar-item-name-track { animation-duration: calc(var(--sidebar-marquee-duration, 6s) * 2); }
}
/* Task queue (modelled on the AI Elements Queue): a bordered card with
   collapsible "N to do" / "N completed" sections. Item markers: an empty
   circle to do, a dotted circle and shimmering title while running, a check
   (and struck-through title) when done, a red cross when failed. */
.task-queue { box-sizing: border-box; display: grid; gap: 2px; width: 100%; max-width: 720px; margin: 10px 0; padding: 6px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 12px; background: var(--editor); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); white-space: normal; }
.theme-light .task-queue { background: #fff; border-color: #dee2e6; }
.task-queue-section { min-width: 0; }
.task-queue-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 550; line-height: 18px; list-style: none; cursor: pointer; user-select: none; }
.task-queue-trigger::-webkit-details-marker { display: none; }
.task-queue-trigger:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.task-queue-trigger:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 1px; }
.task-queue-trigger .task-queue-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.task-queue-label { flex: 1; min-width: 0; }
.task-queue-chevron { width: 6px; height: 6px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-fast, .16s) ease; }
.task-queue-section[open] > .task-queue-trigger .task-queue-chevron { transform: translateY(-2px) rotate(45deg); }
.task-queue-list, .chat-message-content .task-queue-list, .assistant-message-content .task-queue-list { display: grid; gap: 1px; margin: 0 0 4px; padding: 0; list-style: none; }
.task-queue-item, .chat-message-content .task-queue-item { display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin: 0; padding: 5px 8px; border-radius: 8px; color: var(--text); line-height: 18px; }
.task-queue-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.task-queue-indicator { position: relative; box-sizing: border-box; width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; border: 1.5px solid color-mix(in srgb, var(--text) 38%, transparent); border-radius: 50%; }
.task-queue-item.is-running .task-queue-indicator { border-color: var(--text); }
.task-queue-item.is-running .task-queue-indicator::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--text); }
.task-queue-item.is-completed .task-queue-indicator { border-color: transparent; background: color-mix(in srgb, var(--text) 16%, transparent); }
.task-queue-item.is-completed .task-queue-indicator::after { content: ''; position: absolute; left: 4.5px; top: 2.5px; width: 3px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.task-queue-item.is-failed .task-queue-indicator { border-color: var(--red); }
.task-queue-item.is-failed .task-queue-indicator::before, .task-queue-item.is-failed .task-queue-indicator::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 1.5px; background: var(--red); transform: translate(-50%, -50%) rotate(45deg); }
.task-queue-item.is-failed .task-queue-indicator::after { transform: translate(-50%, -50%) rotate(-45deg); }
.task-queue-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.task-queue-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-queue-title p { display: inline; margin: 0; }
.task-queue-item.is-completed .task-queue-title { color: var(--dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--dim) 70%, transparent); }
.task-queue-item.is-failed .task-queue-title { color: color-mix(in srgb, var(--red) 70%, var(--text)); }
.task-queue-item.is-running .task-queue-title { background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--dim) 50%, var(--text) 60%, var(--text) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: task-queue-shimmer 1.8s linear infinite; }
@keyframes task-queue-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .task-queue-item.is-running .task-queue-title { animation: none; color: var(--text); background: none; } }
.task-queue-description { color: var(--dim); font-size: 12px; line-height: 1.45; }
.cohort-run-results > .task-queue { margin: 0 0 10px; }
/* Local Host / API Connected uses the same switch as Login / Sign up (and
   the website's login page): a borderless dark track with 4px corners and a
   lighter pill that slides to the chosen option. */
.chat-model-source-tabs { position: relative; gap: 0; padding: 4px; border: 0; border-radius: 4px; background: #1f1f1f; }
.chat-model-source-tabs::before { content: ""; position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px); border-radius: 4px; background: #3b3b3b; transition: translate 200ms ease; }
.chat-model-source-tabs:has(> [data-source="api"][aria-pressed="true"])::before { translate: 100% 0; }
.chat-model-source-tabs > button,
.chat-model-source-tabs > button:hover,
.chat-model-source-tabs > button[aria-pressed="true"],
.chat-model-source-tabs > button[aria-pressed="true"]:hover { position: relative; min-height: 26px; padding: 3px 10px; border: 0; border-radius: 4px; background: transparent; box-shadow: none; color: #b8b8b8; font-weight: 500; }
.chat-model-source-tabs > button:hover,
.chat-model-source-tabs > button[aria-pressed="true"] { color: #fff; }
.chat-model-source-tabs > button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.theme-light .chat-model-source-tabs { background: #e9ecef; }
.theme-light .chat-model-source-tabs::before { background: #fff; box-shadow: 0 1px 2px rgba(30, 37, 46, .12); }
.theme-light .chat-model-source-tabs > button,
.theme-light .chat-model-source-tabs > button[aria-pressed="true"] { color: #6c727c; background: transparent; }
.theme-light .chat-model-source-tabs > button:hover,
.theme-light .chat-model-source-tabs > button[aria-pressed="true"] { color: #1e252e; }
.theme-light .chat-model-source-tabs > button:focus-visible { outline-color: #1e252e; }
@media (prefers-reduced-motion: reduce) { .chat-model-source-tabs::before { transition: none; } }
/* Local model rows: the selected check comes before the info icon, and the
   info icon keeps the right-most column on every row. */
.chat-model-list > button.is-local-model { grid-template-columns: 22px minmax(0, 1fr) 14px auto; }
.chat-model-list > button.is-local-model > .ui-icon { grid-column: 3; grid-row: 1; }
.chat-model-list > button.is-local-model > .chat-model-row-info { grid-column: 4; grid-row: 1; }
/* Model info card, compact: score with a short reason, one device line,
   download size and status. */
.chat-model-info-fit { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-model-info-fit .chat-model-info-reason { grid-column: auto; color: var(--muted); }
.chat-model-info-best.is-this { margin-left: auto; padding: 1px 7px; border-radius: 999px; color: #2b8a3e; background: color-mix(in srgb, #2b8a3e 12%, transparent); font-size: 12px; font-weight: 550; line-height: 18px; }
.theme-dark .chat-model-info-best.is-this { color: #51cf66; background: color-mix(in srgb, #51cf66 14%, transparent); }
.chat-model-info-device-line { color: var(--dim); font-size: 12px; line-height: 1.4; }
.chat-model-info-device-line > span { color: var(--muted); font-weight: 550; }

/* Chatbox lift stays steady while its menus are used. A box is lifted while
   the user is in it or one of its menus is open; .is-lift-held keeps a box
   lifted while render() rebuilds it (see holdChatboxLift in app.js). */
.home-mini-composer:is(.is-lift-held, :has([aria-expanded="true"])) { transform: translateX(-50%) scale(1.025); border-color: color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 10px 28px rgba(20, 26, 34, .12); }
.theme-dark .home-mini-composer:is(.is-lift-held, :has([aria-expanded="true"])) { box-shadow: 0 10px 28px rgba(0, 0, 0, .38); }
.omnesly-chat-bar:is(:focus-within, .is-lift-held, :has([aria-expanded="true"])) { transform: scale(1.015); }
.application-shell.theme-light .omnesly-chat-bar:is(:focus-within, .is-lift-held, :has([aria-expanded="true"])) { border-color: #ced4da; box-shadow: 0 1px 2px rgba(30, 37, 46, .05), 0 12px 32px rgba(30, 37, 46, .11); }
.theme-dark .omnesly-chat-bar:is(:focus-within, .is-lift-held, :has([aria-expanded="true"])) { box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.application-shell.theme-light .home-mini-composer:is(.is-lift-held, :has([aria-expanded="true"])) { border-color: #ced4da; box-shadow: 0 1px 2px rgba(30, 37, 46, .05), 0 10px 28px rgba(30, 37, 46, .09); }

/* Home + menu: Model and Effort rows show the current choice on the right and
   open a list in place (Home has no model or effort controls of its own). */
.home-mini-menu-divider { height: 1px; margin: 2px 6px; border: 0; background: var(--line); }
.home-mini-menu > button .home-mini-menu-value { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.home-mini-menu > button > span { flex: none; }
.home-mini-menu > button > .ui-icon:last-child:not(:first-child) { width: 12px; height: 12px; flex: none; }
.home-mini-menu.composer-resource-popover { width: 230px; }
.home-mini-menu .composer-resource-list button { gap: 8px; }
.home-mini-menu .composer-resource-list .model-picker-logo { width: 16px; height: 16px; flex: none; }

/* Home model list: the source switch sits under the header and rows are one
   line, so the popup keeps its small size. */
.home-mini-menu .home-mini-source-tabs { margin: 2px 2px 4px; }
.home-mini-menu .home-mini-source-tabs.chat-model-source-tabs > button[data-source] { min-height: 0; height: 22px; padding: 0 4px; gap: 0; font-size: 12px; line-height: 16px; white-space: nowrap; justify-content: center; }
/* A shorter track: 3px around 22px buttons, with the sliding pill to match. */
.home-mini-menu .home-mini-source-tabs.chat-model-source-tabs { padding: 3px; }
.home-mini-menu .home-mini-source-tabs.chat-model-source-tabs::before { inset: 3px auto 3px 3px; width: calc(50% - 3px); }
.home-mini-menu .home-mini-source-tabs .ui-icon { display: none; }
.home-mini-menu .home-mini-model-list { max-height: 124px; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #858c98 transparent; }
/* Same slim scrollbar as the full model picker's list. */
.home-mini-menu .home-mini-model-list::-webkit-scrollbar { width: 4px; }
.home-mini-menu .home-mini-model-list::-webkit-scrollbar-track { background: transparent; }
.home-mini-menu .home-mini-model-list::-webkit-scrollbar-thumb { border: 0; border-radius: 999px; background: #858c98; }
.home-mini-menu .home-mini-model-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.theme-light .home-mini-menu .home-mini-model-list { scrollbar-color: #68717f transparent; }
.theme-light .home-mini-menu .home-mini-model-list::-webkit-scrollbar-thumb { background: #68717f; }
.home-mini-menu .home-mini-model-list button { min-height: 30px; height: 30px; }
.home-mini-menu .home-mini-model-list button > span { flex: 1; }
.home-mini-menu .home-mini-model-list button .home-mini-menu-value { flex: none; max-width: 92px; }
.home-mini-menu .home-mini-model-list button.is-unavailable strong { color: var(--muted); }

/* Home Effort list: as wide as the + menu it replaces, with rows the same
   height as that menu's; its height follows the number of levels. */
.home-mini-menu.composer-resource-popover.home-mini-effort-menu { width: 188px; }
.home-mini-effort-menu .composer-resource-list button { min-height: 30px; height: 30px; }

/* The Home message field wraps long text onto new lines and grows up to ten
   lines (resizeComposerInput), then scrolls with the app's slim scrollbar.
   The buttons stay on the bottom line as it grows. */
.home-mini-composer { align-items: end; }
textarea.home-mini-input { display: block; height: 32px; min-height: 32px; resize: none; overflow-y: hidden; padding: 7px 6px; overflow-wrap: anywhere; }
/* Opt out of the app-wide textarea "thin" scrollbar so the rules below apply. */
.window-frame textarea.home-mini-input { scrollbar-width: auto; scrollbar-color: auto; }
textarea.home-mini-input.is-scrollable { padding-right: 6px; }
/* A 4px rounded thumb (inside an 8px gutter): slimmer than the browser's
   "thin" bar, whose thumb is about 7px, without being a hairline.
   Chromium and Safari only use the ::-webkit-scrollbar rules when the
   standard scrollbar-width/-color are unset, so those are kept for others. */
textarea.home-mini-input::-webkit-scrollbar { width: 8px; }
textarea.home-mini-input::-webkit-scrollbar-track { background: transparent; }
textarea.home-mini-input::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #858c98; background-clip: padding-box; }
textarea.home-mini-input::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.theme-light textarea.home-mini-input::-webkit-scrollbar-thumb { background: #68717f; background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
  .window-frame textarea.home-mini-input { scrollbar-width: thin; scrollbar-color: #858c98 transparent; }
  .theme-light .window-frame textarea.home-mini-input { scrollbar-color: #68717f transparent; }
}
/* Grow upward from the bottom edge, so lifting doesn't shift a tall box. */
.home-mini-composer { transform-origin: 50% 100%; }

/* Home attachments: cards in a row above the message field. Each card has the
   type icon on the left, the name on the top line (level with the top of the
   icon), and the type then the size on the line below. A cut-off name shows in
   full in a small box above the card on hover. */
.home-mini-attachments-wrap { grid-column: 1 / -1; min-width: 0; display: grid; gap: 2px; }
/* One row that scrolls sideways with no visible scrollbar. The top padding
   keeps each card's remove button (on its top edge) inside the scroll area. */
.home-mini-attachments { container-type: inline-size; min-width: 0; display: flex; gap: 6px; margin: 0; padding: 7px 0 4px; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-mini-attachments::-webkit-scrollbar { display: none; }
.home-mini-attachments-wrap.is-expanded .home-mini-attachments { flex-wrap: wrap; overflow: visible; }
@container (max-width: 462px) { .home-mini-attachments > .home-attachment { flex-basis: calc((100cqw - 6px) / 2); } }
@container (max-width: 306px) { .home-mini-attachments > .home-attachment { flex-basis: 100cqw; } }
.home-attachments-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin: 1px 0 0 2px; padding: 2px 6px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font: 500 var(--type-caption)/16px var(--font-ui); }
.home-attachments-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.home-attachments-toggle[hidden] { display: none; }
.home-attachments-toggle .ui-icon { width: 11px; height: 11px; transform: rotate(90deg); transition: transform .16s ease; }
.home-attachments-toggle[aria-expanded="true"] .ui-icon { transform: rotate(-90deg); }
.home-attachment {
  position: relative;
  /* Whole cards only: three in view, or two or one as the chatbox narrows
     (cards stay at least ~150px); the rest scroll. */
  flex: 0 0 calc((100cqw - 12px) / 3);
  scroll-snap-align: start;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  padding: 6px 9px 6px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.home-attachment-icon { grid-row: 1 / 3; align-self: start; width: 28px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--tone, var(--muted)); background: color-mix(in srgb, var(--tone, var(--muted)) 16%, transparent); }
.home-attachment-icon .file-type-icon { width: 20px; height: 20px; }
.home-attachment-icon.is-pdf { --tone: #f03e3e; }
.home-attachment-icon.is-word { --tone: #339af0; }
.home-attachment-icon.is-sheet { --tone: #40c057; }
.home-attachment-icon.is-slides { --tone: #fd7e14; }
.home-attachment-icon.is-text { --tone: #adb5bd; }
.home-attachment-icon.is-code { --tone: #9775fa; }
.home-attachment-name { grid-column: 2 / -1; align-self: start; min-width: 0; overflow: hidden; color: var(--text); font: 500 var(--type-secondary)/16px var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.home-attachment-type,
.home-attachment-size { color: var(--muted); font: 450 var(--type-caption)/14px var(--font-ui); white-space: nowrap; }
.home-attachment-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.home-attachment-size { justify-self: end; }
.home-attachment-remove { position: absolute; top: -6px; right: 5px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: #3a3a3a; opacity: 0; transition: opacity .14s ease; }
.home-attachment-remove .ui-icon { width: 11px; height: 11px; }
.home-attachment:is(:hover, :focus-within) .home-attachment-remove { opacity: 1; }
.home-attachment-tooltip {
  position: absolute;
  z-index: 12;
  width: max-content;
  max-width: min(320px, calc(100% - 8px));
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: #2c2c2c;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  font: 450 var(--type-caption)/16px var(--font-ui);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.home-attachment-tooltip[hidden] { display: none; }
.theme-light .home-attachment { background: #f8f9fa; }
.theme-light .home-attachment-remove { background: #fff; }
.theme-light .home-attachment-tooltip { background: #fff; box-shadow: 0 8px 20px rgba(38, 45, 56, .16); }
.home-mini-composer.is-drop-target { border-color: #228be6; }

/* Full chatbox: pull the paperclip a little closer to the + button. */
.omnesly-chat-toolbar > .composer-attachment-button { margin-left: -3px; }

/* Local model status sits just above the chatbox, inside its dock, so the
   chatbox never covers it however tall the chatbox grows. */
.omnesly-chat-dock > .chat-local-status { position: absolute; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: min(720px, 80vw); margin: 0; transform: translateX(-50%); pointer-events: none; }
.chat-local-status.is-downloading { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; background: var(--sidebar); white-space: nowrap; transition: opacity .4s ease, transform .4s ease; }
.local-download-indicator { position: relative; display: inline-grid; width: 14px; height: 14px; flex: 0 0 14px; }
.local-download-ring { grid-area: 1 / 1; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#1c7ed6 var(--download-percent, 0%), transparent 0), conic-gradient(from 0deg, #5c5f66, #9a9da4, #5c5f66); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
.theme-light .local-download-ring { background: conic-gradient(#1c7ed6 var(--download-percent, 0%), transparent 0), conic-gradient(from 0deg, #adb5bd, #dee2e6, #adb5bd); }
.local-download-check { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: #40c057; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 13; stroke-dashoffset: 13; opacity: 0; }
.local-download-note { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.local-download-note .ui-icon { width: 13px; height: 13px; margin: 0 3px 0 1px; }
.local-download-note.is-offline { animation: local-download-offline-pulse 1.6s ease-in-out infinite; }
@keyframes local-download-offline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Finished: the ring turns green and closes into a check, then the pill fades. */
.chat-local-status.is-complete .local-download-ring { animation: local-download-ring-done .5s ease forwards; }
.chat-local-status.is-complete .local-download-check { animation: local-download-check-draw .35s ease-out .35s forwards; }
@keyframes local-download-ring-done {
  0% { background: conic-gradient(#1c7ed6 100%, transparent 0); }
  45% { background: conic-gradient(#40c057 100%, transparent 0); transform: scale(1); opacity: 1; }
  100% { background: conic-gradient(#40c057 100%, transparent 0); transform: scale(.55); opacity: 0; }
}
@keyframes local-download-check-draw { from { opacity: 1; stroke-dashoffset: 13; } to { opacity: 1; stroke-dashoffset: 0; } }
.chat-local-status.is-settled .local-download-ring { animation: none; opacity: 0; }
.chat-local-status.is-settled .local-download-check { animation: none; opacity: 1; stroke-dashoffset: 0; }
.omnesly-chat-dock > .chat-local-status.is-fading { opacity: 0; transform: translateX(-50%) translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  .local-download-note.is-offline { animation: none; opacity: .7; }
  .chat-local-status.is-complete .local-download-ring { animation: none; opacity: 0; }
  .chat-local-status.is-complete .local-download-check { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .chat-local-status.is-downloading { transition: opacity .2s linear; }
}

/* Short confirmation dialogs (title, one sentence, actions): tighter
   frame and spacing so they don't feel empty. */
.modal:has(> .modal-title + p + .modal-actions:last-child) { padding: 12px 14px 14px; }
.modal:has(> .modal-title + p + .modal-actions:last-child) > .modal-title { height: auto; min-height: 0; align-items: center; margin: 0 0 6px; }
.modal:has(> .modal-title + p + .modal-actions:last-child) > .modal-title button { width: 24px; height: 24px; margin-right: -4px; }
.modal:has(> .modal-title + p + .modal-actions:last-child) > p { margin: 0; }
.modal:has(> .modal-title + p + .modal-actions:last-child) > .modal-actions { margin-top: 12px; }
.modal:has(> .modal-title + p + .modal-actions:last-child) > .modal-actions button { height: 30px; padding: 0 11px; border-radius: 8px; }

/* The run error sits just above the chatbox inside its dock, above the
   download/status pill when both show. */
/* As wide as its text, centred; a long message wraps at the chatbox's width. */
.omnesly-chat-dock > .global-run-error { position: absolute; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: 100%; margin: 0; transform: translateX(-50%); align-items: flex-start; flex-wrap: nowrap; line-height: 16px; pointer-events: auto; }
.omnesly-chat-dock > .global-run-error > span:not(.global-run-error-icon) { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.omnesly-chat-dock > .global-run-error > strong { flex: 0 0 auto; }
.global-run-error > .global-run-error-icon { display: inline-grid; flex: 0 0 auto; color: #ff6b6b; }
.global-run-error-icon .ui-icon { width: 16px; height: 16px; }
.theme-light .global-run-error > .global-run-error-icon { color: #e03131; }
.omnesly-chat-dock:has(> .chat-local-status) > .global-run-error { bottom: calc(100% + 48px); }

/* Sidebar and Tools scrollbars: dimmer in dark mode, and thin in Chromium.
   Chromium ignores the ::-webkit-scrollbar sizing above while
   scrollbar-width/scrollbar-color are set, so they are reset there. */
.application-shell:not(.theme-light) :is(.sidebar-scroll, .tools-content) { --surface-scrollbar-thumb: #50545b; }
@supports selector(::-webkit-scrollbar) {
  .sidebar-scroll, .tools-content { scrollbar-width: auto; scrollbar-color: auto; }
}

/* Editing a sent message in the chatbox: a small bar above the text. */
.omnesly-chat-bar.is-editing { grid-template-rows: none; grid-auto-rows: auto; }
.composer-editing-bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 0; color: var(--muted); font: 450 var(--type-caption)/16px var(--font-ui); }
.composer-editing-bar .ui-icon { width: 12px; height: 12px; }
.composer-editing-bar span { flex: 1; }
.composer-editing-bar button { padding: 2px 6px; border-radius: 5px; color: var(--muted); font: inherit; }
.composer-editing-bar button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* Pinned section at the top of the sidebar list, above Projects. */
.sidebar-pinned-item { position: relative; }
.sidebar-pinned-list.is-reordering { user-select: none; -webkit-user-select: none; }
.sidebar-pinned-list.is-reordering > .sidebar-pinned-item:not(.is-dragging) { transition: transform 150ms ease; }
.sidebar-pinned-item.is-dragging { z-index: 2; cursor: grabbing; }
.sidebar-pinned-item.is-dragging > :is(.sidebar-list-item, .sidebar-project-entry) { border-radius: 8px; background: color-mix(in srgb, var(--text) 9%, var(--sidebar)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.theme-light .sidebar-pinned-item.is-dragging > :is(.sidebar-list-item, .sidebar-project-entry) { box-shadow: 0 6px 18px rgba(38, 45, 56, .16); }
.pinned-rule + .sidebar-section-heading { margin-top: 0; }

/* Section fold arrow beside Pinned, Projects and Chats: shows on hover,
   points down while the section is open and to the side when folded. */
.sidebar-section-heading .sidebar-section-collapse { width: 18px; height: 18px; margin: 0 auto 0 3px; border-radius: 5px; opacity: 0; }
.sidebar-section-heading .sidebar-section-collapse .ui-icon { width: 13px; height: 13px; transform: rotate(180deg); }
.sidebar-section-heading .sidebar-section-collapse[aria-expanded="false"] .ui-icon { transform: rotate(90deg); }
.sidebar-section-heading:hover .sidebar-section-collapse,
.sidebar-section-heading .sidebar-section-collapse:focus-visible { opacity: 1; }
.chats-heading.search-is-open .sidebar-section-collapse { opacity: 0; pointer-events: none; }
.sidebar-section-heading.is-collapsed + .sidebar-rule { margin-top: 4px; }

/* The chat chatbox sits at the same height as Home's chatbox (22px above
   the bottom edge), in a new chat and in a conversation alike, so it doesn't
   jump when the first message is sent. */
.chat-content.is-new-chat > .chat-chat-dock { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }
.chat-content:not(.is-new-chat) > .chat-chat-dock { bottom: 22px; }

/* Top bar tabs, to the right of the Chat/Work/Developer switcher. The strip
   is only as wide as its tabs, so the empty top bar stays draggable in the
   desktop app; crowded tabs shrink, then scroll sideways. */
.topbar-tabs-divider { order: -2; }
.topbar-tabs { order: -2; display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.topbar-tabs::-webkit-scrollbar { display: none; }
.topbar-tab { display: flex; align-items: center; flex: 0 0 auto; min-width: 92px; max-width: 200px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--muted); transition: background .15s, color .15s; }
.topbar-tab:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.topbar-tab.is-active { background: color-mix(in srgb, var(--text) 13%, transparent); color: var(--text); }
.topbar-tab-open { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 2px 0 9px; border: 0; background: transparent; color: inherit; font: 450 var(--type-caption)/1 var(--font-ui); text-align: left; }
.topbar-tab-open > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-tab-open .ui-icon, .topbar-tab-open img { width: 13px; height: 13px; flex: 0 0 13px; }
.topbar-tab-options { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; margin-right: 2px; padding: 0; border-radius: 5px; background: transparent; color: inherit; opacity: .55; }
.topbar-tab:hover .topbar-tab-options, .topbar-tab.is-active .topbar-tab-options, .topbar-tab-options[aria-expanded="true"] { opacity: 1; }
.topbar-tab-options:hover, .topbar-tab-options[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.topbar-tab-options .ui-icon { width: 14px; height: 14px; }
.topbar-tab-menu { position: absolute; top: calc(100% + 4px); z-index: 260; width: 176px; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--audit-panel) 97%, black 3%); box-shadow: 0 18px 46px rgba(0,0,0,.38); }
.topbar-tab-menu button { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: 450 var(--type-caption)/1 var(--font-ui); text-align: left; }
.topbar-tab-menu button:hover, .topbar-tab-menu button:focus-visible { outline: 0; background: color-mix(in srgb, var(--audit-panel) 70%, white 10%); }
.topbar-tab-menu .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.theme-light .topbar-tab-menu { background: #fff; box-shadow: 0 14px 34px rgba(38, 45, 56, .16); }
.theme-light .topbar-tab-menu button:hover { background: #f1f3f5; }

.chat-context-trimmed { margin: 10px 0 0; color: var(--dim); font-size: var(--type-caption); line-height: 1.4; }


/* The chat column is exactly as wide as the chatbox below it (780px, or the
   page width minus 40px when narrower) and centred on the same line. The
   page's container width drives both, so they shrink together. */
.chat-content.is-primary-chat:not(.is-new-chat) { padding-left: 0; padding-right: 0; container-type: inline-size; }
.chat-content.is-primary-chat:not(.is-new-chat) > .primary-chat-transcript { width: 100%; max-width: none; padding-left: 0; padding-right: 0; scrollbar-gutter: stable both-edges; }
.chat-content.is-primary-chat:not(.is-new-chat) > .primary-chat-transcript > * { box-sizing: border-box; width: min(780px, calc(100cqw - 40px)); max-width: none; margin-left: auto; margin-right: auto; }
/* Narrow windows use the chatbox's narrow size too (see the 880px rule). */
@media (max-width: 880px) {
  .chat-content.is-primary-chat:not(.is-new-chat) > .primary-chat-transcript > * { width: min(680px, calc(100cqw - 32px)); }
}
/* Your prompts sit in rounded message bubbles on the right, at most half
   the chat column wide. */
.primary-chat-transcript > .chat-message.user .chat-message-body { display: flex; flex-direction: column; align-items: flex-end; width: auto; max-width: 50%; text-align: left; }
.primary-chat-transcript > .chat-message.user .chat-message-content { padding: 9px 13px; border-radius: 16px; background: color-mix(in srgb, var(--text) 8%, transparent); line-height: 1.5; text-align: left; white-space: pre-wrap; }
.theme-light .primary-chat-transcript > .chat-message.user .chat-message-content { background: #f1f3f5; }

/* Home chatbox rows: one row (+, text, Send) while the text fits on a line;
   then the text takes a full-width row above the buttons. */
.home-mini-composer { grid-template-areas: "plus input send"; }
.home-mini-composer.has-attachments { grid-template-areas: "att att att" "plus input send"; }
.home-mini-composer.is-multiline { grid-template-areas: "input input input" "plus . send"; }
.home-mini-composer.has-attachments.is-multiline { grid-template-areas: "att att att" "input input input" "plus . send"; }
.home-mini-composer > .home-mini-attachments-wrap { grid-area: att; }
.home-mini-composer > .home-mini-menu-anchor { grid-area: plus; }
.home-mini-composer > .home-mini-input { grid-area: input; }
.home-mini-composer > .omnesly-chat-submit { grid-area: send; }
.home-mini-composer.is-multiline > .home-mini-input { padding-inline: 8px; }

/* Managed-usage meter (usage-meter.css) on the Usage Status page: match the
   settings cards. */
.usage-meter-slot { margin-bottom: 20px; }
.usage-meter-slot .usage-meter { --um-host-card: #2a2a2a; --um-host-raised: #323232; }
.theme-light .usage-meter-slot .usage-meter { --um-host-card: #ffffff; --um-host-raised: #f4f5f7; }

/* Slash commands: the list that opens when a chatbox starts with "/". It
   uses the model list's popover and rows so the two read as one family. */
.omnesly-chat-bar { position: relative; }
.composer-command-popover { left: 0; right: auto; width: min(440px, 100%); grid-template-rows: auto minmax(0, 1fr); }
.composer-command-popover > header small { overflow: hidden; color: var(--dim); font: 450 var(--type-caption)/1 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.composer-command-popover.is-steady { animation: none; }
.composer-command-list { max-height: min(320px, calc(100vh - 240px)); }
.composer-command-list > button { min-height: 36px; grid-template-columns: 22px minmax(0, 1fr); cursor: pointer; }
.composer-command-list > button > .ui-icon:first-child { justify-self: center; width: 15px; height: 15px; color: var(--muted); }
.composer-command-list > button[aria-selected="true"] > .ui-icon:first-child { color: var(--text); }
.composer-command-list > button strong small { margin-left: 3px; color: var(--dim); font: 450 var(--type-caption)/1 var(--font-ui); }
.project-chat-dock .composer-command-popover { top: calc(100% + 7px); bottom: auto; }
.composer-command-notice { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 6px; margin: 0 0 6px 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--application-chrome-surface); color: var(--muted); font: 450 var(--type-caption)/1.3 var(--font-ui); pointer-events: auto; animation: chat-model-menu-in .18s cubic-bezier(.22,1,.36,1) both; }
.composer-command-notice .ui-icon { flex: 0 0 auto; width: 12px; height: 12px; }
.composer-command-notice.is-error { color: #f1868c; }
.theme-light .composer-command-notice.is-error { color: #b4373f; }
.composer-command-notice.is-busy .ui-icon { animation: composer-command-spin 1s linear infinite; }
@keyframes composer-command-spin { to { transform: rotate(360deg); } }
.project-chat-dock .composer-command-notice { margin: 6px 0 0 6px; }
.home-mini-composer .composer-command-popover { bottom: calc(100% + 8px); }
.home-mini-composer .composer-command-notice { position: absolute; left: 4px; bottom: calc(100% + 8px); z-index: 13; margin: 0; }

/* Where /compress ran in a chat: a divider that opens to show the summary. */
.chat-compaction { margin: 4px 0 16px; }
.chat-compaction summary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; color: var(--dim); list-style: none; cursor: pointer; }
.chat-compaction summary::-webkit-details-marker { display: none; }
.chat-compaction-rule { height: 1px; background: var(--line); }
.chat-compaction-label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font: 500 var(--type-caption)/1.2 var(--font-ui); transition: color .15s ease, border-color .15s ease; }
.chat-compaction summary:hover .chat-compaction-label { color: var(--text); }
.chat-compaction summary:focus-visible { outline: none; }
.chat-compaction summary:focus-visible .chat-compaction-label { outline: 1px solid var(--muted); outline-offset: 2px; }
.chat-compaction-label .ui-icon { width: 13px; height: 13px; }
.chat-compaction-chevron { transform: rotate(90deg); transition: transform .2s ease; }
.chat-compaction details[open] .chat-compaction-chevron { transform: rotate(-90deg); }
.chat-compaction-body { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--muted); }
.chat-compaction-body > p { margin: 0 0 8px; }
.chat-compaction-summary { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .composer-command-notice, .composer-command-notice.is-busy .ui-icon, .chat-compaction-chevron { animation: none; transition: none; } }

/* Jump to the latest message: centred just above the chatbox, solid in the
   chat area's own colour, blue like the app's buttons on hover. It fades in
   once the transcript is scrolled up away from the newest messages. */
.chat-jump-bottom {
  --jump-surface: var(--main-page-surface, #242424);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 14;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 14%, var(--jump-surface));
  border-radius: 50%;
  padding: 0;
  color: var(--muted);
  background: var(--jump-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, color .15s ease, background-color .15s ease, border-color .15s ease;
}
.chat-jump-bottom.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.chat-jump-bottom .ui-icon { width: 16px; height: 16px; }
.chat-jump-bottom:hover,
.chat-jump-bottom:focus-visible { border-color: #228be6; color: #fff; background: #228be6; outline: none; }
.chat-jump-bottom:active { border-color: #1c7ed6; background: #1c7ed6; }
.theme-light .chat-jump-bottom { --jump-surface: #ffffff; box-shadow: 0 6px 18px rgba(38, 45, 56, .14); }
.shared-chat-footer { position: relative; }
@media (prefers-reduced-motion: reduce) { .chat-jump-bottom { transform: translate(-50%, 0); transition: opacity .01s, visibility 0s; } }
.user-reduced-motion .chat-jump-bottom { transform: translate(-50%, 0); transition: opacity .01s, visibility 0s; }

/* This invariant intentionally remains the final rule in the file. */
body,
body *,
body *::before,
body *::after,
body *::placeholder,
body *::marker {
  font-family: var(--ui-font-family, Inter, sans-serif) !important;
  font-size: 12px !important;
}