clay-server 5.1.0-beta.1 → 5.1.0-beta.2

package/lib/public/css/icon-strip.css

@@ -2,6 +2,16 @@
    Icon Strip — Discord-style vertical server/project bar
    ========================================================================== */
 
+#layout-body {
+  --account-rail-bottom: 12px;
+  --account-rail-avatar-target: 44px;
+  --account-rail-control-gap: 4px;
+  --account-rail-cursor-target: 28px;
+  --account-rail-clearance: 8px;
+  --account-rail-strip-fixed-top: calc(48px + 58px + 48px);
+  --account-rail-footer-height: calc(var(--account-rail-bottom) + var(--account-rail-avatar-target) + var(--account-rail-control-gap) + var(--account-rail-cursor-target) + var(--account-rail-clearance));
+}
+
 #icon-strip {
   position: relative;
   width: 72px;
@@ -10,7 +20,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 0 80px;
+  padding: 0 0 var(--account-rail-footer-height, 100px);
   overflow: hidden;
   z-index: 2;
 }
@@ -59,6 +69,16 @@
   opacity: 1;
 }
 
+.icon-strip-brand {
+  cursor: default;
+}
+
+.icon-strip-brand:hover::before,
+.icon-strip-brand.active::before {
+  background: var(--bg-alt);
+  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.08);
+}
+
 .icon-strip-home.active::before {
   background: var(--bg);
   box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.14);
@@ -149,6 +169,7 @@
 /* --- Scrollable project list area --- */
 .icon-strip-projects {
   width: 100%;
+  flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
@@ -164,6 +185,133 @@
   display: none;
 }
 
+/* --- Project / Mate rotary filter --- */
+.icon-strip-filter {
+  width: 100%;
+  height: 58px;
+  flex: 0 0 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-strip-filter-knob {
+  width: 48px;
+  height: 56px;
+  padding: 3px 0 2px;
+  border: 0;
+  background: transparent;
+  color: var(--text-dimmer);
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.icon-strip-filter-face {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--bg);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 42%, transparent),
+    0 1px 2px rgba(var(--shadow-rgb), 0.1);
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.icon-strip-filter-pointer {
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  transition: transform 180ms cubic-bezier(0.2, 0.75, 0.3, 1);
+}
+
+.icon-strip-filter-pointer::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 2px;
+  width: 5px;
+  height: 2px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--accent) 72%, var(--text-dimmer));
+  box-shadow: inset 0 1px 1px rgba(var(--shadow-rgb), 0.28);
+  transform: translateX(-50%);
+}
+
+.icon-strip-filter-category {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+.icon-strip-filter-category .lucide {
+  width: 14px;
+  height: 14px;
+  stroke-width: 1.8;
+}
+
+.icon-strip-filter-knob[data-mode="all"] [data-filter-icon="all"],
+.icon-strip-filter-knob[data-mode="projects"] [data-filter-icon="projects"],
+.icon-strip-filter-knob[data-mode="mates"] [data-filter-icon="mates"] {
+  display: flex;
+}
+
+.icon-strip-filter-label {
+  max-width: 48px;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 11px;
+  letter-spacing: 0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-strip-filter-knob:hover .icon-strip-filter-face {
+  background: var(--bg-alt);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 48%, transparent),
+    0 2px 6px rgba(var(--shadow-rgb), 0.14);
+}
+
+.icon-strip-filter-knob:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 13px;
+}
+
+.icon-strip-projects[data-filter-mode="projects"] > [data-mate-id],
+.icon-strip-projects[data-filter-mode="mates"] > .icon-strip-item[data-slug],
+.icon-strip-projects[data-filter-mode="mates"] > .icon-strip-group,
+.icon-strip-projects:not([data-filter-mode="all"]) > .icon-strip-peer-separator {
+  display: none;
+}
+
+.icon-strip-peer-separator {
+  width: 24px;
+  height: 1px;
+  margin: 4px 0;
+  flex: 0 0 1px;
+  background: color-mix(in srgb, var(--border) 72%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon-strip-filter-pointer {
+    transition-duration: 0.01ms;
+  }
+}
+
 /* --- Project icon item (48px hit-box, 38px visible bg) --- */
 .icon-strip-item {
   position: relative;
@@ -217,6 +365,29 @@
 }
 
 /* --- Socket status indicator on icon (top-left dot) --- */
+.icon-strip-project-mate {
+  border: 0;
+  padding: 0;
+  font: inherit;
+}
+
+.icon-strip-mate-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.icon-strip-project-mate:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -3px;
+  border-radius: 12px;
+}
+
+.icon-strip-project-mate.active .icon-strip-mate-avatar {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
 .icon-strip-status {
   position: absolute;
   top: 3px;
@@ -363,6 +534,37 @@
   box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.5);
 }
 
+.icon-strip-tooltip-mate {
+  padding: 6px 10px 6px 7px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: 9px;
+  background: var(--sidebar-bg);
+}
+
+.icon-strip-tooltip-mate-identity {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.icon-strip-tooltip-mate-avatar {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  border-radius: 50%;
+  object-fit: cover;
+  box-shadow: 0 0 0 1px var(--border);
+}
+
+.icon-strip-tooltip-label {
+  min-width: 0;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .icon-strip-tooltip.visible {
   opacity: 1;
   transform: translateX(0);
@@ -379,6 +581,10 @@
   border-left: none;
 }
 
+.icon-strip-tooltip-mate::before {
+  border-right-color: var(--sidebar-bg);
+}
+
 /* --- Drag-and-drop reordering --- */
 .icon-strip-item.dragging {
   opacity: 0.3;
@@ -546,6 +752,12 @@
 
 .project-ctx-item .lucide { width: 15px; height: 15px; flex-shrink: 0; }
 .project-ctx-item:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
+.project-ctx-item:focus-visible {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.06);
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
 .project-ctx-item:first-child { border-radius: 6px 6px 0 0; }
 .project-ctx-item:last-child { border-radius: 0 0 6px 6px; }
 
@@ -845,20 +1057,20 @@
   height: 22px;
 }
 
-/* Mate section wrapper — pinned just above the user-island at the
-   bottom of the strip. Groups the \u2318M hint pill with the users
-   list so the hint sits directly above the mate avatars rather than
-   floating up in the project section's flex flow. */
+/* Mate section wrapper — an in-flow footer above the user-island.
+   Its rendered height is reserved after Add project, while the project
+   and Mate icon region takes and scrolls within the remaining space. */
 .icon-strip-mate-section {
-  position: absolute;
-  bottom: 74px; /* above user-island (58px + 8px bottom + 8px gap) */
-  left: 50%;
-  transform: translateX(-50%);
+  flex: 0 0 auto;
+  max-height: max(0px, calc(100vh - var(--account-rail-footer-height, 116px) - var(--account-rail-strip-fixed-top, 154px)));
+  overflow-y: auto;
+  scrollbar-width: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
 }
+.icon-strip-mate-section::-webkit-scrollbar { display: none; }
 
 /* --- User avatars (circle, inside the mate section) --- */
 .icon-strip-users {
@@ -1024,29 +1236,6 @@
 
 /* DM mode: keep same position (user-island gone but layout stays) */
 
-/* --- My avatar at bottom of icon strip (always present, behind user-island) --- */
-/* Positioned to align with icon-strip center (72px / 2 = 36px) */
-/* Matches user-island avatar center: left:8px + padding:10px + 18px = 36px */
-.icon-strip-me {
-  position: absolute;
-  bottom: 19px; /* vertically center with user-island (bottom:8px + height:58px/2 - 16px) */
-  left: 36px;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  z-index: 1; /* below user-island z-index: 15 */
-}
-
-.icon-strip-me-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
 /* --- DM user picker popup --- */
 .dm-user-picker {
   position: fixed;
@@ -1547,3 +1736,31 @@ select.wt-modal-input {
     display: none;
   }
 }
+
+/* Mate workspaces omit repository, filesystem, and terminal controls. */
+body.mate-workspace-active #session-actions {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+/* Use the full column for captions at the 192px sidebar minimum, keeping
+   words such as Knowledge intact without enlarging the icon face. */
+body.mate-workspace-active #session-actions .palette-tile {
+  padding-inline: 0;
+}
+body.mate-workspace-active #git-placard,
+body.mate-workspace-active #sidebar-panel-git,
+body.mate-workspace-active #file-browser-btn,
+body.mate-workspace-active #terminal-sidebar-btn,
+body.mate-workspace-active #project-logs-btn,
+body.mate-workspace-active #issues-btn,
+body.mate-workspace-active #terminal-toggle-btn,
+body.mate-workspace-active #shell-command-btn,
+body.mate-workspace-active #input-more-shell,
+body.mate-workspace-active #loop-interview-btn,
+body.mate-workspace-active #composer-handoff-btn {
+  display: none !important;
+}
+
+#knowledge-workbench-btn { display: none !important; }
+body.mate-workspace-active #knowledge-workbench-btn { display: flex !important; }
+#mate-project-debates-btn { display: none !important; }
+body.mate-workspace-active #mate-project-debates-btn { display: flex !important; }

package/lib/public/css/mate-conversation.css

@@ -0,0 +1,176 @@
+/* Restore the Home conversation's reading measure inside Mate projects.
+   The existing project renderer, queue and composer still own behavior. */
+body.mate-workspace-active { --content-width: 720px; }
+body.mate-workspace-active #messages { padding-inline: max(0px, calc((100% - 720px) / 2)); }
+body.mate-workspace-active #messages > .msg-assistant,
+body.mate-workspace-active #messages > .msg-user {
+  width: 100%;
+  max-width: 720px;
+  box-sizing: border-box;
+  margin: 0 auto 12px;
+  padding: 4px 20px;
+  border-radius: 0;
+}
+body.mate-workspace-active #messages > .msg-assistant {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 9px;
+  align-items: start;
+}
+body.mate-workspace-active .msg-assistant > .dm-bubble-avatar {
+  display: block;
+  width: 34px;
+  height: 34px;
+  margin-top: 1px;
+  border-radius: 8px;
+}
+body.mate-workspace-active .msg-assistant > .dm-bubble-content { min-width: 0; }
+body.mate-workspace-active .msg-assistant .dm-bubble-header {
+  display: flex;
+  align-items: baseline;
+  min-height: 19px;
+  gap: 7px;
+  margin-bottom: 2px;
+}
+body.mate-workspace-active .msg-assistant .dm-bubble-name { font-size: 13px; font-weight: 650; }
+body.mate-workspace-active .msg-assistant .dm-bubble-time { font-size: 10px; color: var(--text-dimmer); }
+body.mate-workspace-active .msg-assistant .md-content { line-height: 1.58; }
+body.mate-workspace-active #messages > .msg-user:not(.msg-user-other):not(.msg-user-delegated) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) > .msg-actions {
+  align-self: flex-end;
+  margin-left: 0;
+  padding-top: 2px;
+}
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) > .dm-bubble-avatar,
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) .dm-bubble-header { display: none; }
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) > .dm-bubble-content {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(560px, 100%);
+  align-items: flex-end;
+}
+body.mate-workspace-active .msg-user:not(.msg-user-other):not(.msg-user-delegated) .bubble {
+  background: var(--bg-alt);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  padding: 8px 11px;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* One writing row, with secondary tools and model selection underneath.
+   Display contents preserves the live controls and their event handlers. */
+body.mate-workspace-active #input-wrapper { max-width: 720px; }
+body.mate-workspace-active #input-row,
+body.mate-workspace-active #input-row:focus-within {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  gap: 6px 4px;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+  border-radius: 0;
+}
+body.mate-workspace-active #input-row::before {
+  content: "";
+  grid-area: 4 / 1 / 5 / -1;
+  align-self: stretch;
+  background: var(--bg);
+  border: 1px solid var(--border-subtle);
+  border-radius: 22px;
+  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .09);
+  pointer-events: none;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+body.mate-workspace-active #input-row:focus-within::before {
+  border-color: color-mix(in srgb, var(--brand-indigo) 65%, var(--border-subtle));
+  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), .12);
+}
+@media (prefers-reduced-motion: reduce) {
+  body.mate-workspace-active #input-row::before { transition: none; }
+}
+body.mate-workspace-active #input-bottom,
+body.mate-workspace-active #input-bottom-right { display: contents; }
+body.mate-workspace-active #image-preview-bar { grid-area: 2 / 1 / 3 / -1; }
+body.mate-workspace-active #suggestion-chips { grid-area: 3 / 1 / 4 / -1; }
+body.mate-workspace-active #input-textarea-wrap { grid-area: 4 / 1 / 5 / 2; align-self: center; }
+body.mate-workspace-active #input,
+body.mate-workspace-active #ghost-suggestion {
+  display: block;
+  font-size: 16px;
+  line-height: 1.45;
+  padding: 12px 0 12px 15px;
+}
+body.mate-workspace-active #ghost-suggestion.hidden { display: none; }
+body.mate-workspace-active #send-btn,
+body.mate-workspace-active #stt-btn,
+body.mate-workspace-active #input-bottom-right > #generation-stop {
+  position: relative;
+  align-self: end;
+  margin: 7px 0;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+}
+body.mate-workspace-active #send-btn { grid-area: 4 / 4 / 5 / 5; margin-right: 8px; }
+body.mate-workspace-active #input-bottom-right > .stt-controls { grid-area: 4 / 3 / 5 / 4; position: relative; align-self: end; }
+body.mate-workspace-active #input-row .stt-progress { grid-area: 6 / 1 / 7 / -1; }
+body.mate-workspace-active #input-bottom-right > #generation-stop { grid-area: 4 / 2 / 5 / 3; }
+body.mate-workspace-active #attach-wrap { grid-area: 5 / 1 / 6 / 3; min-width: 0; flex-wrap: wrap; }
+body.mate-workspace-active #config-chip-wrap { grid-area: 5 / 3 / 6 / 5; align-self: start; justify-self: end; }
+body.mate-workspace-active #active-vendor-indicator,
+body.mate-workspace-active #attach-wrap .composer-tool-group-collaboration,
+body.mate-workspace-active #attach-wrap .composer-tool-group-execution { display: none; }
+@media (max-width: 768px) {
+  /* The rail is absent here; its floating footer must not cover writing tools. */
+  body.mate-workspace-active #user-island { display: none; }
+  body.mate-workspace-active #messages > .msg-assistant,
+  body.mate-workspace-active #messages > .msg-user { padding-inline: 12px; }
+  body.mate-workspace-active #input-area { padding-inline: 12px; }
+}
+
+body.mate-workspace-active #context-mini { grid-area: 1 / 1 / 2 / -1; }
+
+/* Keep the restored conversational action rows aligned with Mate replies. */
+body.mate-workspace-active #messages > .mate-tool-group,
+body.mate-workspace-active #messages > .mate-thinking,
+body.mate-workspace-active #messages > .mate-permission,
+body.mate-workspace-active #messages > .mate-ask-user {
+  box-sizing: border-box;
+  max-width: 720px;
+  margin: 0 auto 12px;
+  padding: 4px 20px;
+  gap: 9px;
+}
+body.mate-workspace-active .mate-tool-group > .dm-bubble-avatar,
+body.mate-workspace-active .mate-thinking > .dm-bubble-avatar,
+body.mate-workspace-active .mate-permission > .dm-bubble-avatar,
+body.mate-workspace-active .mate-ask-user > .dm-bubble-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+}
+@media (max-width: 768px) {
+  body.mate-workspace-active #messages > .mate-tool-group,
+  body.mate-workspace-active #messages > .mate-thinking,
+  body.mate-workspace-active #messages > .mate-permission,
+  body.mate-workspace-active #messages > .mate-ask-user { padding-inline: 12px; }
+}
+
+/* Action summaries belong to the reply's text lane, without repeated identity. */
+body.mate-workspace-active .mate-tool-group > .dm-bubble-avatar { display: none; }
+body.mate-workspace-active #messages > .mate-tool-group {
+  padding: 2px 20px 2px 63px;
+  margin-bottom: 8px;
+}
+body.mate-workspace-active .mate-tool-group > .dm-bubble-content { padding-top: 0; }
+@media (max-width: 768px) {
+  body.mate-workspace-active #messages > .mate-tool-group { padding-inline: 55px 12px; }
+}

package/lib/public/css/mate-knowledge-workbench.css

@@ -0,0 +1,118 @@
+#mate-knowledge-workbench { position: relative; width: 68%; max-width: 1120px; min-width: 620px; height: calc(100% - 16px); margin: 8px; display: flex; flex-direction: column; flex: 0 0 auto; overflow: hidden; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-sans); }
+#mate-knowledge-workbench.hidden { display: none; }
+#mate-knowledge-workbench [hidden] { display: none !important; }
+#mate-knowledge-workbench.knowledge-wide { width: 82%; max-width: 1440px; }
+#mate-knowledge-workbench.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
+.knowledge-topbar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
+.knowledge-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
+.knowledge-title .lucide { width: 15px; color: var(--accent); }
+.knowledge-subtitle { flex: 1; color: var(--text-dimmer); font-size: 11px; }
+.knowledge-topbar > button, .knowledge-document-toolbar > button { height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; color: var(--text-secondary); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 11px; cursor: pointer; }
+.knowledge-topbar > button { width: 30px; padding: 0; }
+.knowledge-topbar .lucide, .knowledge-document-toolbar .lucide { width: 14px; }
+.knowledge-topbar > button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
+.knowledge-status { min-height: 0; padding: 0 14px; color: var(--danger); font-size: 11px; line-height: 0; transition: min-height .16s ease, padding .16s ease, line-height .16s ease; }
+.knowledge-status:not(:empty) { min-height: 30px; padding-block: 7px; line-height: 16px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); }
+.knowledge-status button { margin-left: 5px; padding: 0; color: inherit; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
+.knowledge-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 178px minmax(0, 1fr) 170px; }
+.knowledge-explorer, .knowledge-details { min-width: 0; background: color-mix(in srgb, var(--bg-alt) 74%, var(--bg)); }
+.knowledge-explorer { display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); }
+.knowledge-search { height: 32px; margin: 8px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text-dimmer); }
+.knowledge-search .lucide { width: 13px; }
+.knowledge-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; }
+.knowledge-explorer-heading { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: var(--text-dimmer); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.knowledge-explorer-list { flex: 1; min-height: 0; overflow: auto; padding: 2px 6px 12px; }
+.knowledge-file-row { width: 100%; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 7px; color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px; text-align: left; cursor: pointer; }
+.knowledge-folder-row { height: 24px; display: flex; align-items: center; gap: 6px; padding: 4px 7px 0; color: var(--text-dimmer); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
+.knowledge-folder-row .lucide { width: 11px; }
+.knowledge-file-row { padding-left: calc(7px + var(--knowledge-depth, 0) * 9px); }
+.knowledge-file-row:hover { color: var(--text); background: var(--bg-hover); }
+.knowledge-file-row[aria-current="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.knowledge-file-row .lucide { width: 14px; flex: 0 0 auto; }
+.knowledge-file-row span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.knowledge-file-row span em { display: block; overflow: hidden; color: var(--text-dimmer); font-size: 9px; font-style: normal; text-overflow: ellipsis; }
+.knowledge-file-row:has(em) { height: 42px; }
+.knowledge-file-row small { color: var(--text-dimmer); font-size: 9px; }
+.knowledge-search-more { width: calc(100% - 14px); margin: 5px 7px; padding: 6px; color: var(--text-secondary); background: var(--bg-hover); border: 0; border-radius: 6px; font-size: 10px; cursor: pointer; }
+.knowledge-search-more:disabled { cursor: default; opacity: .65; }
+.knowledge-empty { margin: 18px 8px; color: var(--text-dimmer); font-size: 11px; line-height: 1.55; }
+.knowledge-document { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
+.knowledge-tabs { height: 34px; display: flex; align-items: end; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--border-subtle); background: var(--bg-alt); }
+.knowledge-tab-shell { height: 30px; max-width: 190px; display: flex; align-items: center; border-right: 1px solid var(--border-subtle); background: transparent; }
+.knowledge-tab-shell:has(.knowledge-tab[aria-selected="true"]) { background: var(--bg); box-shadow: inset 0 2px 0 var(--accent); }
+.knowledge-tab { min-width: 0; height: 30px; flex: 1; display: flex; align-items: center; padding: 0 4px 0 10px; color: var(--text-dimmer); background: transparent; border: 0; font: inherit; font-size: 11px; cursor: pointer; }
+.knowledge-tab[aria-selected="true"] { color: var(--text); }
+.knowledge-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-tab-close { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; margin-right: 4px; padding: 0; color: var(--text-dimmer); background: transparent; border: 0; border-radius: 4px; font: inherit; font-size: 15px; cursor: pointer; }
+.knowledge-tab-close:hover { color: var(--text); background: var(--bg-hover); }
+.knowledge-document-toolbar { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); }
+.knowledge-preview-name { min-width: 0; flex: 1; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-save-state { margin-right: auto; color: var(--text-dimmer); font-size: 10px; }
+.knowledge-name { min-width: 110px; max-width: 260px; flex: 1; display: flex; align-items: center; border: 1px solid transparent; border-radius: 6px; }
+.knowledge-name:focus-within { border-color: var(--accent); }
+.knowledge-name input { min-width: 0; width: 100%; height: 28px; padding: 0 2px 0 7px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
+.knowledge-name span { padding-right: 7px; color: var(--text-dimmer); font-size: 11px; }
+.knowledge-view-toggle { display: flex; padding: 2px; background: var(--bg-alt); border-radius: 7px; }
+.knowledge-view-toggle button { height: 24px; padding: 0 7px; color: var(--text-dimmer); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 10px; cursor: pointer; }
+.knowledge-view-toggle button[aria-pressed="true"] { color: var(--text); background: var(--bg); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12); }
+.knowledge-document-toolbar > button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
+.knowledge-document-toolbar > button.danger { color: var(--danger); background: transparent; }
+.knowledge-document-toolbar button:disabled { opacity: .45; cursor: default; }
+.knowledge-readonly { color: var(--text-dimmer); font-size: 10px; }
+.knowledge-inline-error { flex-basis: 100%; color: var(--danger); font-size: 10px; }
+.knowledge-inline-error button { padding: 0; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
+.knowledge-document-body { flex: 1; min-height: 0; position: relative; }
+.knowledge-editor-split { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.knowledge-editor-host, .knowledge-live-preview { min-width: 0; min-height: 0; }
+.knowledge-editor-host { border-right: 1px solid var(--border-subtle); overflow: hidden; }
+.knowledge-editor-host .CodeMirror { height: 100%; color: var(--text); background: var(--bg); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
+.knowledge-editor-host .CodeMirror-scroll { padding: 24px clamp(18px, 4vw, 64px) 70px; box-sizing: border-box; }
+.knowledge-editor-host .CodeMirror-cursor { border-left-color: var(--text); }
+.knowledge-editor-host .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+.knowledge-editor-host .cm-header { color: var(--text); font-weight: 700; }.knowledge-editor-host .cm-link { color: var(--accent); }.knowledge-editor-host .cm-comment { color: var(--text-dimmer); }
+.knowledge-live-preview { overflow: auto; padding: 24px clamp(18px, 4vw, 64px) 70px; font-size: 14px; line-height: 1.75; }
+.knowledge-editor-fallback { box-sizing: border-box; width: 100%; height: 100%; resize: none; padding: 24px; border: 0; background: var(--bg); color: var(--text); font: 13px/1.7 var(--font-mono); }
+.knowledge-editor { box-sizing: border-box; width: 100%; height: 100%; resize: none; padding: 30px clamp(24px, 6vw, 76px); color: var(--text); background: var(--bg); border: 0; outline: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; tab-size: 2; }
+.knowledge-preview { box-sizing: border-box; height: 100%; overflow: auto; padding: 30px clamp(24px, 6vw, 76px) 80px; font-size: 14px; line-height: 1.75; }
+.knowledge-inline-link { display: inline; padding: 0; color: var(--accent); background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
+.knowledge-welcome { max-width: 340px; margin: 18vh auto 0; padding: 0 24px; color: var(--text-dimmer); text-align: center; }
+.knowledge-welcome .lucide { width: 28px; }
+.knowledge-welcome h2 { margin: 12px 0 6px; color: var(--text); font-family: var(--font-display); font-size: 22px; }
+.knowledge-welcome p { font-size: 12px; line-height: 1.6; }
+.knowledge-details { overflow: auto; border-left: 1px solid var(--border-subtle); }
+.knowledge-detail-section { border-bottom: 1px solid var(--border-subtle); }
+.knowledge-detail-heading { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--text-secondary); background: transparent; border: 0; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
+.knowledge-detail-heading .lucide { width: 12px; transition: transform .16s ease; }
+.knowledge-detail-heading[aria-expanded="false"] .lucide { transform: rotate(-90deg); }
+[data-detail-content] { padding: 3px 7px 10px; }
+[data-detail-content] > p { margin: 8px 4px; color: var(--text-dimmer); font-size: 10px; line-height: 1.5; }
+[data-detail-content] > small { display: block; margin: 8px 4px 4px; color: var(--text-dimmer); font-size: 8px; letter-spacing: .06em; }
+.knowledge-outline-item, .knowledge-link-item { width: 100%; min-height: 25px; display: flex; align-items: center; gap: 5px; padding: 3px 5px; overflow: hidden; color: var(--text-secondary); background: transparent; border: 0; border-radius: 5px; font: inherit; font-size: 10px; text-align: left; }
+.knowledge-outline-item.depth-2 { padding-left: 13px; }.knowledge-outline-item.depth-3 { padding-left: 21px; }.knowledge-outline-item.depth-4 { padding-left: 29px; }
+.knowledge-link-item .lucide { width: 11px; flex: 0 0 auto; }.knowledge-link-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.knowledge-link-item.unresolved { color: var(--text-dimmer); }.knowledge-backlink { align-items: flex-start; height: auto; }.knowledge-backlink span { white-space: normal; }.knowledge-backlink b, .knowledge-backlink em { display: block; }.knowledge-backlink em { margin-top: 2px; color: var(--text-dimmer); font-size: 9px; font-style: normal; line-height: 1.35; }
+.knowledge-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 4px 9px; }.knowledge-tags span { padding: 2px 5px; border: 1px solid var(--border-subtle); border-radius: 5px; color: var(--text-secondary); font-size: 9px; }
+.knowledge-properties { display: grid; grid-template-columns: minmax(44px, auto) minmax(0, 1fr); gap: 4px 7px; margin: 3px 4px 9px; font-size: 9px; }.knowledge-properties dt { color: var(--text-dimmer); }.knowledge-properties dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }.knowledge-property-error { color: var(--danger) !important; }
+#mate-knowledge-workbench.panel-fullscreen .knowledge-layout { grid-template-columns: minmax(0, 1fr); }
+#mate-knowledge-workbench.panel-fullscreen .knowledge-explorer, #mate-knowledge-workbench.panel-fullscreen .knowledge-details, #mate-knowledge-workbench.panel-fullscreen .knowledge-tabs { display: none; }
+button.knowledge-link-item { cursor: pointer; }.knowledge-outline-item:hover, button.knowledge-link-item:hover { color: var(--text); background: var(--bg-hover); }
+.knowledge-delete-dialog { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.38); }
+.knowledge-delete-dialog.hidden { display: none; }.knowledge-delete-dialog > div { width: min(360px, 100%); padding: 22px; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.24); }
+.knowledge-delete-dialog h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; }.knowledge-delete-dialog p { color: var(--text-secondary); font-size: 12px; line-height: 1.55; }.knowledge-delete-dialog > div > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.knowledge-delete-dialog button { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text); }.knowledge-delete-dialog button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
+#mate-knowledge-workbench :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+@media (max-width: 1023px) { #mate-knowledge-workbench, #mate-knowledge-workbench.knowledge-wide { position: fixed; inset: 0; z-index: 300; width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; padding-block: var(--safe-top, 0) var(--safe-bottom, 0); box-sizing: border-box; }.knowledge-topbar [data-knowledge-wide], .knowledge-topbar [data-knowledge-full] { display: none; }.knowledge-layout { grid-template-columns: 148px minmax(0, 1fr); }.knowledge-details { display: none; }.knowledge-subtitle { display: none; } }
+@media (max-width: 600px) { .knowledge-layout { grid-template-columns: 112px minmax(0, 1fr); }.knowledge-search { margin: 6px; }.knowledge-search .lucide { display: none; }.knowledge-file-row { padding-inline: 5px; }.knowledge-file-row .lucide, .knowledge-file-row small { display: none; }.knowledge-document-toolbar { flex-wrap: wrap; }.knowledge-name { flex-basis: calc(100% - 110px); }.knowledge-editor, .knowledge-preview { padding: 22px 16px 70px; }.knowledge-topbar { padding-left: 10px; }.knowledge-editor-split { grid-template-columns: minmax(0, 1fr); }.knowledge-live-preview { display: none; } }
+@media (prefers-reduced-motion: reduce) { #mate-knowledge-workbench * { transition: none !important; animation: none !important; } }
+
+.knowledge-create-menu { position: absolute; z-index: 5; top: 42px; right: 104px; width: 190px; padding: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.2); }
+.knowledge-create-menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--text); background: transparent; border: 0; border-radius: 6px; text-align: left; cursor: pointer; }
+.knowledge-create-menu button:hover { background: var(--bg-hover); }.knowledge-create-menu .lucide { width: 15px; }.knowledge-create-menu span { display: grid; gap: 1px; font-size: 11px; }.knowledge-create-menu small { color: var(--text-dimmer); font-size: 9px; }
+.knowledge-db-table-wrap { height: 100%; overflow: auto; }.knowledge-db-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }.knowledge-db-table th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 9px; color: var(--text-dimmer); background: var(--bg-alt); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-subtle); font-size: 9px; text-align: left; text-transform: uppercase; letter-spacing: .04em; }.knowledge-db-table td { min-width: 110px; max-width: 260px; height: 31px; padding: 0 9px; overflow: hidden; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); text-overflow: ellipsis; white-space: nowrap; }.knowledge-db-table tbody tr { cursor: pointer; }.knowledge-db-table tbody tr:hover td, .knowledge-db-table tbody tr:focus td { background: var(--bg-hover); }.knowledge-db-empty { color: var(--text-dimmer); }.knowledge-db-pill { display: inline-block; margin-right: 3px; padding: 1px 5px; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 9px; }
+.knowledge-db-reference { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; overflow: hidden; color: var(--accent); background: none; border: 0; font: inherit; text-overflow: ellipsis; cursor: pointer; }.knowledge-db-reference .lucide { width: 11px; flex: 0 0 auto; }
+.knowledge-db-view-select { height: 28px; max-width: 150px; padding: 0 24px 0 8px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; font: 10px var(--font-sans); }
+.knowledge-db-record { max-width: 720px; margin: 0 auto; padding: 28px clamp(20px,5vw,64px) 70px; }.knowledge-db-record > button { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--text-secondary); background: none; border: 0; font: inherit; font-size: 11px; cursor: pointer; }.knowledge-db-record > button .lucide { width: 13px; }.knowledge-db-record h2 { margin: 24px 0; font: 600 24px var(--font-display); }.knowledge-db-record dl { display: grid; grid-template-columns: minmax(100px,160px) minmax(0,1fr); gap: 0; border-top: 1px solid var(--border-subtle); }.knowledge-db-record dt,.knowledge-db-record dd { min-height: 34px; box-sizing: border-box; margin: 0; padding: 8px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; }.knowledge-db-record dt { color: var(--text-dimmer); }.knowledge-db-attribution { margin-top: 18px; color: var(--text-dimmer); font-size: 9px; }
+.knowledge-db-form { width: min(680px,calc(100% - 40px)); margin: 0 auto; padding: 30px 0 80px; }.knowledge-db-form h2 { margin: 0 0 22px; font: 600 23px var(--font-display); }.knowledge-db-form > p { color: var(--text-dimmer); font-size: 11px; line-height: 1.55; }.knowledge-db-form > label { display: grid; gap: 6px; margin: 0 0 15px; color: var(--text-secondary); font-size: 10px; font-weight: 600; }.knowledge-db-form input:not([type=checkbox]),.knowledge-db-form select { width: 100%; min-height: 36px; box-sizing: border-box; padding: 7px 9px; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; font: 12px var(--font-sans); }.knowledge-db-form select[multiple] { min-height: 90px; }.knowledge-db-schema fieldset { display: grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap: 10px; margin: 0 0 10px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; }.knowledge-db-schema legend { padding: 0 5px; color: var(--text-dimmer); font-size: 9px; text-transform: uppercase; }.knowledge-db-schema fieldset > label:first-of-type { display:grid; gap:4px; font-size:9px; }.knowledge-db-check { display:flex; align-items:center; gap:4px; min-height:36px; font-size:10px; }
+.knowledge-db-dialog { position:absolute; inset:0; z-index:7; display:grid; place-items:center; background:rgba(0,0,0,.38); }.knowledge-db-dialog > div { width:min(360px,calc(100% - 36px)); padding:22px; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.24); }.knowledge-db-dialog h2 { margin:0 0 8px; font:600 18px var(--font-display); }.knowledge-db-dialog p { color:var(--text-secondary); font-size:12px; }.knowledge-db-dialog > div > div { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }.knowledge-db-dialog button { height:32px; padding:0 10px; color:var(--text); background:var(--bg-alt); border:1px solid var(--border); border-radius:7px; }.knowledge-db-dialog button.danger { color:#fff; background:var(--danger); border-color:var(--danger); }
+.knowledge-db-form fieldset { margin:0 0 15px; padding:10px; border:1px solid var(--border-subtle); border-radius:8px; }.knowledge-db-form fieldset legend { padding:0 5px; color:var(--text-dimmer); font-size:9px; text-transform:uppercase; }.knowledge-db-schema fieldset { grid-template-columns:minmax(0,1fr) minmax(100px,150px) auto auto; }.knowledge-db-schema fieldset > label:not(.knowledge-db-check) { display:grid; gap:4px; color:var(--text-secondary); font-size:9px; }
+.knowledge-db-schema .knowledge-db-options { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; grid-column:1 / -1; align-items:stretch; }.knowledge-db-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }.knowledge-db-option .knowledge-db-check { margin:0; }
+@media (max-width:600px) { .knowledge-db-table td { min-width:92px; }.knowledge-db-form { width:calc(100% - 28px); }.knowledge-db-schema fieldset { grid-template-columns:minmax(0,1fr); }.knowledge-db-record dl { grid-template-columns:90px minmax(0,1fr); } }