/* Moi workbench: quiet navigation around the document workspace. */
html[data-ui="workbench"],
html[data-ui="workbench"]:not([data-theme="dark"]) {
  --bg: #f7f7f8;
  --surface: #fff;
  --rail: #efeff1;
  --rail-width: 72px;
  --ink: #202024;
  --muted: #727279;
  --line: #e3e3e7;
  --brand: #202024;
  --brand-hover: #3a3a40;
  --brand-soft: #e9e9ec;
  --brand-rgb: 32, 32, 36;
  --blue: var(--brand);
  --blue-light: var(--brand-soft);
  --button-brand: var(--brand);
  --green: #515158;
  --red: #56565d;
  --radius: 12px;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.6;
}

html[data-ui="workbench"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #151517;
  --surface: #1d1d20;
  --rail: #19191c;
  --ink: #f3f3f5;
  --muted: #a1a1a8;
  --line: #303035;
  --brand: #f3f3f5;
  --brand-hover: #dedee2;
  --brand-soft: #303035;
  --brand-rgb: 243, 243, 245;
  --blue: var(--brand);
  --blue-light: var(--brand-soft);
  --button-brand: var(--brand);
  --green: #b5b5bc;
  --red: #c3c3c9;
}

/* Theme's company rules have two attribute selectors; keep the palette fixed. */
html[data-ui="workbench"][data-company] {
  --brand: #202024;
  --brand-hover: #3a3a40;
  --brand-soft: #e9e9ec;
  --brand-rgb: 32, 32, 36;
  --blue: var(--brand);
  --button-brand: var(--brand);
}
html[data-ui="workbench"][data-theme="dark"][data-company] {
  --brand: #f3f3f5;
  --brand-hover: #dedee2;
  --brand-soft: #303035;
  --brand-rgb: 243, 243, 245;
  --blue: var(--brand);
  --button-brand: var(--brand);
}

html[data-ui="workbench"] :is(h1, h2, h3) { color: var(--ink); }
html[data-ui="workbench"] h1 { font-size: 26px; font-weight: 650; line-height: 1.32; letter-spacing: -.045em; }
html[data-ui="workbench"] h2 { font-size: 16px; font-weight: 650; line-height: 1.4; letter-spacing: -.025em; }
html[data-ui="workbench"] h3 { font-size: 14px; font-weight: 650; line-height: 1.45; letter-spacing: -.015em; }
html[data-ui="workbench"] :is(.small, .muted) { color: var(--muted); }
html[data-ui="workbench"] :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Basic controls share one restrained shape; their locations remain unchanged. */
html[data-ui="workbench"] .btn {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}
html[data-ui="workbench"] .btn:hover { background: var(--brand-soft); border-color: var(--line); box-shadow: none; transform: none; }
html[data-ui="workbench"] .btn.primary,
html[data-ui="workbench"][data-theme="dark"] .btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--surface);
  box-shadow: none;
}
html[data-ui="workbench"] .btn.primary:hover,
html[data-ui="workbench"][data-theme="dark"] .btn.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--surface);
  box-shadow: none;
  transform: none;
}
html[data-ui="workbench"] .btn.text { min-height: 28px; padding: 2px 0; border: 0; background: transparent; color: var(--ink); }
html[data-ui="workbench"] .btn.text:hover { background: transparent; color: var(--muted); }
html[data-ui="workbench"] .badge,
html[data-ui="workbench"] .badge:is(.blue, .green, .amber, .red) {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
html[data-ui="workbench"] .icon-btn { border-radius: 8px; color: var(--muted); }
html[data-ui="workbench"] .icon-btn:hover { background: var(--brand-soft); color: var(--ink); }
html[data-ui="workbench"] :is(.panel, .table-wrap) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

/* The rail stays fixed, including the titlebar offset in the desktop shell. */
html[data-ui="workbench"] .sidebar,
html[data-ui="workbench"]:not([data-theme="dark"]) .sidebar,
html[data-ui="workbench"][data-theme="dark"] .sidebar {
  background: var(--rail);
  color: var(--muted);
  border-right: 1px solid var(--line);
}
html[data-ui="workbench"] .sidebar .brand,
html[data-ui="workbench"]:not([data-theme="dark"]) .sidebar .brand { color: var(--ink); }
html[data-ui="workbench"] .sidebar .brand img { border-radius: 8px; }
html[data-ui="workbench"] .sidebar .nav { gap: 4px; }
html[data-ui="workbench"] .sidebar .nav button,
html[data-ui="workbench"][data-theme="dark"] .sidebar .nav button {
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 550;
}
html[data-ui="workbench"] .sidebar .nav button:hover,
html[data-ui="workbench"][data-theme="dark"] .sidebar .nav button:hover { background: var(--brand-soft); color: var(--ink); }
html[data-ui="workbench"] .sidebar .nav button.active,
html[data-ui="workbench"][data-theme="dark"] .sidebar .nav button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  font-weight: 650;
}
html[data-ui="workbench"] .sidebar .nav button.active svg,
html[data-ui="workbench"][data-theme="dark"] .sidebar .nav button.active svg { color: currentColor; }
html[data-ui="workbench"] .sidebar .nav button.active::before { display: none; }
html[data-ui="workbench"] .sidebar-bottom { border-color: var(--line); }
html[data-ui="workbench"] .sidebar .profile .avatar { background: var(--surface); color: var(--ink); }
html[data-ui="workbench"] .sidebar .profile strong { color: var(--ink); }
html[data-ui="workbench"] .sidebar .profile small { color: var(--muted); }

html[data-ui="workbench"] .shell.has-projects .sidebar { padding: 8px 7px 12px; overflow: visible; z-index: 20; }
html[data-ui="workbench"] .shell.has-projects .sidebar .nav { min-height: 0; overflow: auto; scrollbar-width: none; }
html[data-ui="workbench"][data-theme] .sidebar .nav-label { display: block; padding: 0; margin: 0; letter-spacing: 0; color: inherit; font-size: 10px; font-weight: 550; line-height: 1.2; white-space: nowrap; }
html[data-ui="workbench"] .shell.has-projects .nav button {
  width: 56px;
  height: 56px;
  min-height: 56px;
  gap: 4px;
  padding: 5px 2px;
  line-height: 1.2;
  font-size: 10px;
  flex-shrink: 0;
}
html[data-ui="workbench"] .shell.has-projects .nav button svg { width: 22px; height: 22px; }
html[data-ui="workbench"] .shell.has-projects .profile { padding-top: 8px; }

/* Project names label the tree; the active conversation alone gets a fill. */
html[data-ui="workbench"] .project-sidebar { background: var(--surface); border-color: var(--line); }
html[data-ui="workbench"] .project-sidebar:has(.company-menu.is-open,.company-menu.is-closing) { z-index: 40; }
html[data-ui="workbench"] .project-sidebar-resize { position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; z-index: 2; cursor: col-resize; touch-action: none; }
html[data-ui="workbench"] .project-sidebar-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--line); }
html[data-ui="workbench"] .project-sidebar-resize:is(:hover,:focus-visible)::after,
html[data-ui="workbench"].project-resizing .project-sidebar-resize::after { width: 2px; background: var(--ink); }
html[data-ui="workbench"].project-resizing .shell { user-select: none; cursor: col-resize; }
html[data-ui="workbench"].project-resizing .shell.has-projects,
html[data-ui="workbench"].project-resizing .project-sidebar,
html[data-ui="workbench"].project-resizing .ai-dock { transition: none; }
html[data-ui="workbench"] .project-sidebar-head {
  min-height: 52px;
  padding: 8px 12px 8px 16px;
  border-color: var(--line);
}
html[data-ui="workbench"] .project-sidebar-head .company-trigger:hover,
html[data-ui="workbench"] .project-sidebar-head .company-trigger[aria-expanded="true"] { background: var(--brand-soft); }
html[data-ui="workbench"] .project-list { padding: 13px 10px; }
html[data-ui="workbench"] .project-group h3 { margin: 0 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0; }
html[data-ui="workbench"] .project-entry { gap: 1px; margin-bottom: 2px; }
html[data-ui="workbench"] .project-item { min-height: 35px; padding: 7px 8px; border-radius: 7px; font-size: 12px; }
html[data-ui="workbench"] .project-item-name { font-weight: 550; }
html[data-ui="workbench"] .project-item.active .project-item-name { font-weight: 650; }
html[data-ui="workbench"] .project-item.active,
html[data-ui="workbench"] .project-item.active:hover { background: transparent; }
html[data-ui="workbench"] .project-item:not(.active):hover,
html[data-ui="workbench"] :is(.project-expand, .project-rename):hover { background: var(--brand-soft); }
html[data-ui="workbench"] .project-expand { width: 28px; min-height: 28px; }
html[data-ui="workbench"] .project-rename { min-width: 28px; }
html[data-ui="workbench"] .project-session-list { margin: 0 0 9px 17px; padding-left: 9px; }
html[data-ui="workbench"] :is(.project-session, .project-session-add) {
  min-height: 32px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 11px;
}
html[data-ui="workbench"] .project-session.active { background: var(--brand-soft); color: var(--ink); font-weight: 650; }
html[data-ui="workbench"] :is(.project-session, .project-session-add):hover { background: var(--brand-soft); color: var(--ink); }
html[data-ui="workbench"] .project-status { color: var(--muted); }
html[data-ui="workbench"] .worktree-row { position: relative; display: flex; align-items: center; min-width: 0; }
html[data-ui="workbench"] .worktree-row .project-session { flex: 1; min-width: 0; min-height: 36px; padding-right: 30px; }
html[data-ui="workbench"] .worktree-default { flex: none; padding: 0 4px; border-radius: 3px; background: var(--line); color: var(--muted); font-size: 9px; font-weight: 400; }
html[data-ui="workbench"] .worktree-status { display: inline-grid; place-items: center; flex: none; width: 8px; height: 8px; border-radius: 50%; }
html[data-ui="workbench"] .worktree-status.running { background: #45a989; animation: worktree-running 1.7s ease-in-out infinite; }
html[data-ui="workbench"] .worktree-status.attention { background: #d6a13a; }
html[data-ui="workbench"] .worktree-status.completed { width: 12px; height: 12px; border: 1px solid #45a989; color: #45a989; }
html[data-ui="workbench"] .worktree-status.completed svg { width: 9px; height: 9px; stroke-width: 2.5; }
html[data-ui="workbench"] .worktree-status.failed { background: #d6a13a; }
html[data-ui="workbench"] .worktree-status.interrupted { background: var(--muted); }
@keyframes worktree-running { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html[data-ui="workbench"] .worktree-status.running { animation: none; } }
html[data-ui="workbench"] .worktree-rename { position: absolute; right: 3px; display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); opacity: 0; cursor: pointer; }
html[data-ui="workbench"] .worktree-rename svg { width: 13px; height: 13px; }
html[data-ui="workbench"] .worktree-row:is(:hover,:focus-within) .worktree-rename { opacity: 1; }
html[data-ui="workbench"] .worktree-rename:hover { background: var(--line); color: var(--ink); }
html[data-ui="workbench"] .project-context-menu { position: fixed; z-index: 120; width: 208px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 12px 36px #0003; }
html[data-ui="workbench"] .project-context-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
html[data-ui="workbench"] .project-context-menu button:is(:hover,:focus-visible) { background: var(--brand-soft); }
html[data-ui="workbench"] .project-context-menu button:disabled { opacity: .4; cursor: default; }
html[data-ui="workbench"] .project-context-menu svg { width: 16px; height: 16px; flex: none; }
html[data-ui="workbench"] .project-icon-picker { display: flex; gap: 8px; margin: 20px 0; padding: 0; border: 0; }
html[data-ui="workbench"] .project-icon-picker legend { margin-bottom: 10px; font-size: 12px; font-weight: 600; }
html[data-ui="workbench"] .project-icon-picker label { flex: 1; min-width: 0; cursor: pointer; }
html[data-ui="workbench"] .project-icon-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
html[data-ui="workbench"] .project-icon-picker label>span { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); }
html[data-ui="workbench"] .project-icon-picker input:checked+span { background: var(--brand-soft); color: var(--ink); }
html[data-ui="workbench"] .project-icon-picker input:focus-visible+span { outline: 2px solid var(--ink); outline-offset: 2px; }
html[data-ui="workbench"] .project-icon-picker svg { width: 21px; height: 21px; }
html[data-ui="workbench"] .project-icon-picker small { font-size: 10px; }
html[data-ui="workbench"] .project-company-note { margin: 20px 0; color: var(--muted); font-size: 12px; }
html[data-ui="workbench"] .profile-details { display: grid; gap: 15px; margin: 22px 0; }
html[data-ui="workbench"] .profile-details>div { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 16px; font-size: 13px; }
html[data-ui="workbench"] .profile-details dt { color: var(--muted); }
html[data-ui="workbench"] .profile-details dd { margin: 0; overflow-wrap: anywhere; }

/* Web header and native titlebar keep their existing heights and drag regions. */
html[data-ui="workbench"] .topbar,
html[data-ui="workbench"]:not([data-theme="dark"]) .topbar,
html[data-ui="workbench"][data-theme="dark"] .topbar {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ui="workbench"] .topbar .company-trigger {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}
html[data-ui="workbench"] .topbar .company-trigger:hover,
html[data-ui="workbench"] .topbar .company-trigger[aria-expanded="true"] { background: var(--brand-soft); }
html[data-ui="workbench"] .workspace,
html[data-ui="workbench"]:not([data-theme="dark"]) .workspace,
html[data-ui="workbench"][data-theme="dark"] .workspace { background: var(--bg); }
html[data-ui="workbench"] .native-titlebar { background: var(--surface); border-color: var(--line); color: var(--ink); letter-spacing: .045em; }
html[data-ui="workbench"] .native-titlebar>span { font-weight: 700; }
html[data-ui="workbench"] .native-titlebar button { border: 0; background: transparent; box-shadow: none; }
html[data-ui="workbench"] .native-titlebar button:hover { background: var(--brand-soft); color: var(--ink); }
html[data-ui="workbench"] .native-titlebar .titlebar-quick-trigger { display: none; flex: none; margin-left: auto; }
html[data-ui="workbench"] .shell.has-projects:not(.project-open) .native-titlebar .titlebar-quick-trigger { display: grid; }
html[data-ui="workbench"] .native-titlebar .conversation-tab :is(.conversation-select, .conversation-close),
html[data-ui="workbench"] .native-titlebar .conversation-tab :is(.conversation-select, .conversation-close):is(:hover, :focus-visible) {
  border: 0;
  background: transparent;
  box-shadow: none;
}
html[data-ui="workbench"][data-theme] .company-menu.company-menu { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui="workbench"] .conversation-tabs-list { gap: 2px; }
html[data-ui="workbench"] .conversation-tab { border-radius: 6px; }
html[data-ui="workbench"] .conversation-tab.active { border-color: var(--line); background: var(--bg); }
html[data-ui="workbench"] .conversation-tab .conversation-select { font-weight: 500; }
html[data-ui="workbench"] .conversation-tab.active .conversation-select { color: var(--ink); font-weight: 650; }
html[data-ui="workbench"] .conversation-tab .conversation-select { display: flex; align-items: center; gap: 5px; }
html[data-ui="workbench"] .conversation-tab .conversation-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="workbench"] .conversation-tab .conversation-kind { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
html[data-ui="workbench"] .conversation-tab .conversation-kind svg { width: 13px; height: 13px; }
html[data-ui="workbench"] .conversation-tab { position: relative; }
html[data-ui="workbench"] .conversation-tab:not(.active) + .conversation-tab:not(.active)::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  border-left: 1px solid var(--line);
  pointer-events: none;
}
html[data-ui="workbench"] .conversation-tab .conversation-close {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
}
html[data-ui="workbench"] .conversation-tab:is(:hover, :focus-within) .conversation-close,
html[data-ui="workbench"] .conversation-tab .conversation-close:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
html[data-ui="workbench"] .conversation-tab .conversation-close:hover { color: var(--ink); }
@media (hover: none) {
  html[data-ui="workbench"] .conversation-tab .conversation-close { opacity: 1; pointer-events: auto; }
}
html[data-ui="workbench"] .content { max-width: 1160px; padding: 36px 32px 56px; }
html[data-ui="workbench"] .shell.has-projects.project-context .content:has(.chat-home),
html[data-ui="workbench"] .content.artifact-split { max-width: none; }

/* Always-visible usage remains a compact status strip. */
html[data-ui="workbench"] .ai-dock { background: var(--surface); border-color: var(--line); }
html[data-ui="workbench"] .ai-statusbar { gap: 8px; padding-inline: 14px; }
html[data-ui="workbench"] .ai-dock-trigger { gap: 12px; padding-inline: 8px; color: var(--ink); }
html[data-ui="workbench"] .ai-status-provider { color: var(--muted); }
html[data-ui="workbench"] .ai-status-provider b { color: var(--ink); }
html[data-ui="workbench"] .ai-status-refresh { min-width: 28px; min-height: 28px; color: var(--muted); }
html[data-ui="workbench"] .ai-dot.ready { background: var(--ink); }

/* Settings sections use visible cards in both themes. */
html[data-ui="workbench"] .settings-content .settings-information { gap: 12px; }
html[data-ui="workbench"] .settings-content .settings-information .setting-panel,
html[data-ui="workbench"] .settings-content .settings-information .desktop-update-panel {
  min-width: 0;
  margin: 0;
  padding: 19px 21px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
html[data-ui="workbench"] .settings-content .settings-information .setting-panel h3 { margin: 0 0 13px; }
html[data-ui="workbench"] .settings-content .settings-information .status-row { gap: 12px; flex-wrap: wrap; }
html[data-ui="workbench"] .settings-content .settings-information .status-row > :last-child { margin-left: auto; }
html[data-ui="workbench"] .settings-content .settings-information #desktop-update { min-width: 0; }
html[data-ui="workbench"] .settings-content .settings-information .desktop-update-panel { flex-wrap: wrap; }

html[data-ui="workbench"] .settings-content .workspace-rules-section .workspace-settings-company {
  margin: 0 0 14px;
  padding: 20px 21px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
html[data-ui="workbench"] .settings-content .workspace-rules-section .workspace-settings-company > h3 { margin-bottom: 18px; }
html[data-ui="workbench"] .settings-content .workspace-rules-section .workspace-template-list { gap: 9px; margin-top: 22px; }
html[data-ui="workbench"] .settings-content .workspace-rules-section .workspace-template-head { margin-bottom: 2px; }
html[data-ui="workbench"] .settings-content .workspace-rules-section .workspace-template {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}
html[data-ui="workbench"] .settings-content .settings-rules .shared-skills { border-top: 0; padding-top: 0; }
html[data-ui="workbench"] .settings-content .shared-skills > .shared-skill-section {
  padding: 20px 21px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
@media (max-width: 700px) {
  html[data-ui="workbench"] .settings-content .settings-information .setting-panel,
  html[data-ui="workbench"] .settings-content .settings-information .desktop-update-panel,
  html[data-ui="workbench"] .settings-content .workspace-rules-section .workspace-settings-company,
  html[data-ui="workbench"] .settings-content .shared-skills > .shared-skill-section { padding: 16px; }
}

@media (min-width: 721px) and (max-width: 1000px) {
  html[data-ui="workbench"] .shell.has-projects.project-context.project-open { grid-template-columns: var(--rail-width) var(--project-sidebar-width) minmax(0,1fr); }
  html[data-ui="workbench"] .shell.has-projects.project-context:not(.project-open) { grid-template-columns: var(--rail-width) 0 minmax(0,1fr); }
  html[data-ui="workbench"] .shell.has-projects.project-context .workspace { grid-column: 3; }
  html[data-ui="workbench"] .shell.has-projects.project-context .project-panel-backdrop { display: none; }
  html[data-ui="workbench"] .shell.has-projects.project-context.project-open .ai-dock { left: calc(var(--rail-width) + var(--project-sidebar-width)); }
}

@media (max-width: 720px) {
  html[data-ui="workbench"] .shell.has-projects .sidebar { padding: 4px 2px 10px; }
  html[data-ui="workbench"] .shell.has-projects .nav button { width: 56px; height: 56px; min-height: 56px; }
  html[data-ui="workbench"] .content { padding: 25px 16px 56px; }
  html[data-ui="workbench"] .shell.has-projects .content { padding-inline: 16px; }
  html[data-ui="workbench"] .ai-statusbar { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="workbench"] .btn { transition: none; }
}