/* Navigation floats above an opaque, readable document surface. */
html[data-ui="workbench"]:not([data-theme="dark"]) {
  --glass: rgb(255 255 255 / .68);
  --glass-raised: rgb(255 255 255 / .88);
  --glass-edge: rgb(255 255 255 / .9);
  --glass-stroke: rgb(40 40 48 / .09);
  --glass-shadow: 0 8px 28px rgb(24 24 32 / .06), inset 0 1px 0 var(--glass-edge);
  --glass-selected: rgb(255 255 255 / .92);
  --workbench-canvas: radial-gradient(ellipse at 12% 0%, #e0e1e6 0, transparent 48%), radial-gradient(ellipse at 98% 100%, #e8e8ed 0, transparent 48%), #f5f5f7;
}
html[data-ui="workbench"][data-theme="dark"] {
  --bg: #101114;
  --surface: #191a1e;
  --rail: #141519;
  --line: #34353c;
  --brand-soft: #282a30;
  --glass: rgb(21 22 26 / .78);
  --glass-raised: rgb(28 29 34 / .94);
  --glass-edge: rgb(255 255 255 / .07);
  --glass-stroke: rgb(255 255 255 / .09);
  --glass-shadow: 0 8px 28px rgb(0 0 0 / .2), inset 0 1px 0 var(--glass-edge);
  --glass-selected: rgb(255 255 255 / .12);
  --workbench-canvas: radial-gradient(ellipse at 12% 0%, #15161a 0, transparent 48%), radial-gradient(ellipse at 98% 100%, #131418 0, transparent 48%), #101114;
}
html[data-ui="workbench"][data-theme="dark"][data-company] { --brand-soft: #282a30; }
html[data-ui="workbench"]:not([data-theme="dark"]) .dashboard-calendar {
  --calendar-rule: #dedee3;
  --calendar-header: #f7f7f9;
  --calendar-weekend: #f5f5f7;
  --calendar-empty: #f1f1f3;
}
html[data-ui="workbench"][data-theme="dark"] .dashboard-calendar {
  --calendar-rule: #34353c;
  --calendar-header: #202126;
  --calendar-weekend: #1c1d22;
  --calendar-empty: #16171b;
}
html[data-ui="workbench"][data-theme="dark"] .home-document:is(:hover,:focus-visible),
html[data-ui="workbench"][data-theme="dark"] .calendar-day:not(.is-selected):hover { background: #24252b; }
html[data-ui="workbench"][data-theme] body { background: var(--workbench-canvas); background-attachment: fixed; }
html[data-ui="workbench"][data-theme] .workspace { background: transparent; }
/* Keep the dock outside backdrop roots so its floating usage panel blurs the page. */
html[data-ui="workbench"][data-theme] :is(.sidebar, .project-sidebar, .native-titlebar, .topbar) {
  background: var(--glass);
  border-color: var(--glass-stroke);
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
}
html[data-ui="workbench"][data-theme] .sidebar { box-shadow: inset -1px 0 0 var(--glass-edge); }
html[data-ui="workbench"][data-theme] .project-sidebar { box-shadow: inset -1px 0 0 var(--glass-edge); }
html[data-ui="workbench"][data-theme] .native-titlebar { box-shadow: inset 0 -1px 0 var(--glass-edge); }
html[data-ui="workbench"][data-theme] .sidebar .nav button {
  border: 1px solid transparent;
  border-radius: 16px;
}
html[data-ui="workbench"][data-theme] .sidebar .nav button.active {
  background: var(--glass-selected);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-stroke);
  border-radius: 16px;
}
html[data-ui="workbench"][data-theme] :is(.conversation-tab.active, .project-session.active) {
  background: var(--glass-selected);
  border-color: var(--glass-stroke);
  box-shadow: 0 2px 6px rgb(0 0 0 / .035), inset 0 1px 0 var(--glass-edge);
  border-radius: 9px;
}
html[data-ui="workbench"][data-theme] .shell.has-projects .rail-company-switch .company-trigger {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: none;
}
html[data-ui="workbench"][data-theme] .shell.has-projects .rail-company-switch { width: 48px; }
html[data-ui="workbench"][data-theme] .rail-company-switch .company-caret { display: none; }
html[data-ui="workbench"][data-theme] .sidebar .nav button:hover { border-color: var(--glass-stroke); }
html[data-ui="workbench"] .nav-label { display: none; }
html[data-ui="workbench"][data-theme] :is(.company-menu, .ai-account-popover, .moi-date-popup, dialog) {
  background: var(--glass-raised);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 18px 50px rgb(0 0 0 / .18), inset 0 1px 0 var(--glass-edge);
  border-radius: 16px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
html[data-ui="workbench"][data-theme] dialog::backdrop { background: rgb(0 0 0 / .26); }
html[data-ui="workbench"][data-theme] .chat-home .chat-composer {
  background: var(--glass-raised);
  border: 1px solid var(--glass-stroke);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}
html[data-ui="workbench"][data-theme] .chat-message.assistant { background: transparent; border-color: transparent; padding-left: 0; }
html[data-ui="workbench"][data-theme] .chat-message.user { background: var(--glass-selected); border-color: var(--glass-stroke); border-radius: 16px; }
html[data-ui="workbench"][data-theme] .artifact-viewer { border-radius: 0; border-color: var(--glass-stroke); box-shadow: none; }
html[data-ui="workbench"][data-theme] .artifact-header { background: var(--glass-raised); }
html[data-ui="workbench"][data-theme] .settings-tabs button[aria-current="page"] { background: var(--glass-selected); box-shadow: var(--glass-shadow); }

/* Opaque fallbacks preserve separation when transparency is unavailable or unwanted. */
@supports not (backdrop-filter: blur(1px)) {
  html[data-ui="workbench"][data-theme] :is(.sidebar, .project-sidebar, .native-titlebar, .topbar, .ai-dock, .company-menu, .ai-account-popover, .moi-date-popup, dialog) { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-ui="workbench"][data-theme] { --glass: var(--surface); --glass-raised: var(--surface); --glass-selected: var(--brand-soft); --glass-stroke: var(--line); --glass-shadow: none; }
  html[data-ui="workbench"][data-theme] :is(.sidebar, .project-sidebar, .native-titlebar, .topbar, .ai-dock, .company-menu, .ai-account-popover, .moi-date-popup, dialog) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}