clay-server 2.14.0-beta.9 → 2.14.0

package/lib/public/css/mates.css

@@ -795,7 +795,7 @@
   height: 16px;
 }
 
-/* Knowledge Panel (full screen like sticky notes) */
+/* Knowledge editor/preview panel (overlays main content) */
 #mate-knowledge-container {
   position: absolute;
   inset: 0;
@@ -809,46 +809,17 @@
   display: none;
 }
 
-.mate-knowledge-header {
+/* Header bar (matches title-bar-content height/style) */
+.mate-knowledge-header-bar {
   display: flex;
   align-items: center;
+  gap: 8px;
   height: 48px;
-  padding: 0 16px;
-  flex-shrink: 0;
+  padding: 0 8px 0 16px;
   border-bottom: 1px solid var(--border-subtle);
-}
-.mate-knowledge-title-wrap {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  flex: 1;
-}
-.mate-knowledge-title-wrap .lucide {
-  width: 15px;
-  height: 15px;
-  color: var(--accent);
   flex-shrink: 0;
-  align-self: center;
-}
-.mate-knowledge-title-wrap h2 {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--text);
-  margin: 0;
-}
-.mate-knowledge-count {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-dimmer);
-  margin-left: 2px;
-}
-.mate-knowledge-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  margin-left: auto;
 }
-.mate-knowledge-header-actions button {
+.mate-knowledge-header-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -860,180 +831,328 @@
   color: var(--text-muted);
   cursor: pointer;
   transition: background 0.12s, color 0.12s;
+  flex-shrink: 0;
 }
-.mate-knowledge-header-actions button:hover {
+.mate-knowledge-header-btn:hover {
   background: rgba(var(--overlay-rgb), 0.08);
   color: var(--text);
 }
-.mate-knowledge-header-actions button .lucide {
+.mate-knowledge-header-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.mate-knowledge-header-btn:disabled:hover {
+  background: none;
+  color: var(--text-muted);
+}
+.mate-knowledge-header-btn .lucide {
   width: 16px;
   height: 16px;
 }
-
-.mate-knowledge-grid {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 12px;
-  align-content: start;
+.mate-knowledge-header-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+#mate-knowledge-editor-delete:hover {
+  color: var(--error, #ff5555);
 }
 
-.mate-knowledge-tile {
-  background: var(--bg-alt);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  padding: 14px 16px;
-  cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
+/* 2-panel layout: editor | preview */
+.mate-knowledge-body {
+  flex: 1;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 100px;
-  max-height: 180px;
+  flex-direction: row;
+  min-height: 0;
   overflow: hidden;
 }
-.mate-knowledge-tile:hover {
-  border-color: var(--border);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
 
-.mate-knowledge-tile-add {
-  background: none;
-  border: 2px dashed var(--border);
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 10px;
-  color: var(--text-muted);
-  transition: border-color 0.15s, color 0.15s;
+/* Sidebar file list */
+#mate-sidebar-knowledge.hidden,
+#mate-sidebar-conversations.hidden {
+  display: none;
 }
-.mate-knowledge-tile-add:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: none;
-  box-shadow: none;
+.mate-knowledge-file-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
 }
-.mate-knowledge-add-icon {
+.mate-knowledge-file-item {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-secondary);
+  transition: background 0.1s;
 }
-.mate-knowledge-add-icon svg {
-  width: 24px;
-  height: 24px;
+.mate-knowledge-file-item:hover {
+  background: rgba(var(--overlay-rgb), 0.06);
 }
-.mate-knowledge-add-label {
-  font-size: 13px;
+.mate-knowledge-file-item.active {
+  background: rgba(var(--overlay-rgb), 0.1);
+  color: var(--text);
   font-weight: 600;
 }
-.mate-knowledge-tile-title {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text);
-  white-space: nowrap;
+.mate-knowledge-file-icon {
+  display: flex;
+  flex-shrink: 0;
+}
+.mate-knowledge-file-icon .lucide {
+  width: 14px;
+  height: 14px;
+}
+.mate-knowledge-file-name {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mate-knowledge-tile-preview {
+.mate-knowledge-file-badge {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-alt, #2a2a3a);
+  color: var(--text-dimmer);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* JSONL table view */
+.mate-knowledge-jsonl-table {
+  width: 100%;
+  border-collapse: collapse;
   font-size: 12px;
-  color: var(--text-muted);
   line-height: 1.5;
+}
+.mate-knowledge-jsonl-table th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dimmer);
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--bg-panel, var(--bg));
+}
+.mate-knowledge-jsonl-table td {
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,0.1));
+  color: var(--text);
+  max-width: 260px;
   overflow: hidden;
-  flex: 1;
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mate-knowledge-jsonl-table tbody tr:hover td {
+  background: var(--bg-hover, rgba(128,128,128,0.06));
 }
 
 .mate-knowledge-empty {
-  grid-column: 1 / -1;
+  padding: 20px 12px;
   text-align: center;
-  padding: 40px 20px;
+  font-size: 12px;
   color: var(--text-dimmer);
+}
+
+/* Active file name in editor toolbar */
+.mate-knowledge-active-name {
   font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mate-knowledge-active-name.hidden {
+  display: none;
 }
 
-/* Knowledge Editor Modal */
-#mate-knowledge-editor {
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
+/* Name input group for new files */
+.mate-knowledge-name-group {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  padding: 4px 10px;
+  max-width: 280px;
+}
+.mate-knowledge-name-group:focus-within {
+  border-color: var(--accent);
 }
-#mate-knowledge-editor.hidden {
+.mate-knowledge-name-group.hidden {
   display: none;
 }
-.mate-knowledge-editor-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0,0,0,0.5);
+#mate-knowledge-editor-name {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  color: var(--text);
+  outline: none;
+  min-width: 0;
+  width: 160px;
 }
-.mate-knowledge-editor-card {
-  position: relative;
-  width: 720px;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: var(--bg-alt);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+#mate-knowledge-editor-name::placeholder {
+  color: var(--text-dimmer);
+  font-weight: 500;
 }
-.mate-knowledge-editor-header {
+.mate-knowledge-editor-ext {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-dimmer);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.mate-knowledge-toolbar-spacer {
+  flex: 1;
+}
+
+/* Editor pane (left) */
+.mate-knowledge-editor-pane {
+  flex: 1;
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
+  flex-direction: column;
+  min-width: 0;
+  border-right: 1px solid var(--border-subtle);
 }
-.mate-knowledge-editor-header input {
+
+/* Highlight overlay container */
+.mate-editor-highlight-wrap {
   flex: 1;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+}
+.mate-editor-highlight-pre {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 13px;
+  font-family: var(--font-mono, "Roboto Mono", monospace);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-y: auto;
+  pointer-events: none;
+  color: var(--text);
   background: none;
   border: none;
-  color: var(--text);
-  font-size: 15px;
-  font-weight: 600;
+}
+.mate-editor-highlight-pre code {
   font-family: inherit;
-  outline: none;
+  font-size: inherit;
+  line-height: inherit;
+  background: none !important;
+  padding: 0;
 }
-.mate-knowledge-editor-header button {
+#mate-knowledge-editor-content {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 12px 14px;
   background: none;
   border: none;
-  color: var(--text-muted);
-  font-size: 20px;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 6px;
+  color: transparent;
+  caret-color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-mono, "Roboto Mono", monospace);
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  z-index: 1;
 }
-.mate-knowledge-editor-header button:hover {
-  color: var(--text);
+#mate-knowledge-editor-content::placeholder {
+  color: var(--text-dimmer);
 }
-#mate-knowledge-editor-content {
+#mate-knowledge-editor-content::selection {
+  background: rgba(var(--overlay-rgb), 0.2);
+}
+
+/* Preview pane (right) */
+.mate-knowledge-preview-pane {
   flex: 1;
-  min-height: 400px;
-  padding: 16px;
-  background: none;
-  border: none;
-  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.mate-knowledge-preview-content {
+  flex: 1;
+  padding: 16px 20px;
+  overflow-y: auto;
   font-size: 14px;
-  font-family: inherit;
   line-height: 1.7;
-  resize: none;
-  outline: none;
+  color: var(--text);
+}
+.mate-knowledge-preview-content em {
+  font-style: italic;
+  font-synthesis: style;
+}
+.mate-knowledge-preview-content strong {
+  font-weight: 700;
+}
+
+/* --- Format Popover --- */
+.mate-format-popover {
+  position: fixed;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transform: translateX(-50%) translateY(-100%);
 }
-.mate-knowledge-editor-footer {
+.mate-format-btn {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid var(--border-subtle);
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 5px;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.mate-format-btn:hover {
+  background: rgba(var(--overlay-rgb), 0.1);
+  color: var(--text);
+}
+.mate-format-btn .lucide {
+  width: 15px;
+  height: 15px;
+}
+
+/* Responsive: stack on narrow screens */
+@media (max-width: 768px) {
+  .mate-knowledge-body {
+    flex-direction: column;
+  }
+  .mate-knowledge-editor-pane {
+    border-right: none;
+    border-bottom: 1px solid var(--border-subtle);
+  }
 }
 
 .mate-sidebar-sessions-header {
@@ -1137,6 +1256,65 @@
   right: 8px;
 }
 
+/* Session search */
+.mate-session-search {
+  position: relative;
+  padding: 0 8px 6px;
+}
+.mate-session-search.hidden {
+  display: none;
+}
+#mate-session-search-input {
+  width: 100%;
+  padding: 7px 28px 7px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+#mate-session-search-input:focus {
+  border-color: var(--accent);
+}
+#mate-session-search-clear {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--text-dimmer);
+  cursor: pointer;
+}
+#mate-session-search-clear:hover {
+  color: var(--text);
+  background: var(--sidebar-hover);
+}
+#mate-session-search-clear .lucide {
+  width: 14px;
+  height: 14px;
+}
+#mate-search-session-btn.active {
+  color: var(--accent);
+}
+.mate-session-item.search-match {
+  background: var(--accent-12, rgba(108, 92, 231, 0.12));
+}
+.mate-session-item.search-match .mate-session-item-text {
+  color: var(--accent);
+}
+.mate-session-item.search-dimmed {
+  opacity: 0.35;
+}
+
 .mate-session-processing {
   display: inline-block;
   width: 6px;
@@ -1150,7 +1328,7 @@
 /* --- Mate color theming for panels --- */
 
 /* Match panel header heights to sidebar header (48px) */
-body.mate-dm-active .mate-knowledge-header,
+body.mate-dm-active .mate-knowledge-header-bar,
 body.mate-dm-active .scheduler-top-bar,
 body.mate-dm-active .notes-archive-header {
   height: 48px;
@@ -1158,24 +1336,40 @@ body.mate-dm-active .notes-archive-header {
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }
 
-/* Knowledge header */
-body.mate-dm-active .mate-knowledge-header {
+/* Knowledge header bar */
+body.mate-dm-active .mate-knowledge-header-bar {
   background: var(--mate-color);
   color: #fff;
+  border-bottom-color: transparent;
 }
-body.mate-dm-active .mate-knowledge-header .lucide,
-body.mate-dm-active .mate-knowledge-header h2 {
+body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-icon,
+body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-active-name {
   color: #fff;
 }
-body.mate-dm-active .mate-knowledge-header-actions button {
+body.mate-dm-active .mate-knowledge-header-bar #mate-knowledge-editor-name {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+body.mate-dm-active .mate-knowledge-header-bar #mate-knowledge-editor-name::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn {
   color: rgba(255, 255, 255, 0.85);
 }
-body.mate-dm-active .mate-knowledge-header-actions button:hover {
+body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.15);
 }
-body.mate-dm-active .mate-knowledge-count {
-  color: rgba(255, 255, 255, 0.7);
+body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn:disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+body.mate-dm-active .mate-knowledge-header-bar .mate-knowledge-header-btn:disabled:hover {
+  background: none;
+  color: rgba(255, 255, 255, 0.3);
+}
+body.mate-dm-active .mate-knowledge-header-bar #mate-knowledge-editor-delete:hover {
+  color: #fff;
+  background: rgba(255, 80, 80, 0.4);
 }
 
 /* Scheduler top bar (main header) */
@@ -1327,31 +1521,40 @@ body.mate-dm-active .turn-meta {
    Mate DM: Humanized thinking / tools / permissions
    ========================================================================== */
 
-/* --- Mate Thinking: avatar + name + bouncing dots --- */
-.mate-thinking-row {
-  display: none;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 0;
-}
-body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
+/* --- Mate Thinking: flex layout matching msg-assistant --- */
+body.mate-dm-active .mate-thinking {
   display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 16px;
+  margin: 0;
+  max-width: 100%;
 }
-.mate-thinking-avatar {
-  width: 28px;
-  height: 28px;
+body.mate-dm-active .mate-thinking:hover {
+  background: var(--bg-alt);
+}
+body.mate-dm-active .mate-thinking > .dm-bubble-avatar {
+  display: block;
+  width: 36px;
+  height: 36px;
   border-radius: 6px;
   flex-shrink: 0;
+  margin-top: 2px;
 }
-.mate-thinking-body {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+body.mate-dm-active .mate-thinking > .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
 }
-.mate-thinking-name {
-  font-weight: 700;
-  font-size: 14px;
-  color: var(--text);
+.mate-thinking-row {
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 4px 0;
+}
+body.mate-dm-active .mate-thinking:not(.done) .mate-thinking-row {
+  display: flex;
 }
 .mate-thinking-dots {
   display: inline-flex;
@@ -1402,9 +1605,31 @@ body.mate-dm-active .mate-thinking.expanded .thinking-content {
   max-height: 2000px;
 }
 
-/* --- Mate Tool Group: compact, always collapsed with summary header --- */
+/* --- Mate Tool Group: flex layout matching msg-assistant --- */
 body.mate-dm-active .mate-tool-group {
-  margin: 2px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 16px;
+  margin: 0;
+  max-width: 100%;
+}
+body.mate-dm-active .mate-tool-group:hover {
+  background: var(--bg-alt);
+}
+body.mate-dm-active .mate-tool-group > .dm-bubble-avatar {
+  display: block;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+body.mate-dm-active .mate-tool-group > .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+  padding-top: 6px;
 }
 body.mate-dm-active .mate-tool-group .tool-group-header {
   font-size: 12px;
@@ -1431,35 +1656,53 @@ body.mate-dm-active .mate-tool-group .tool-name {
   color: var(--text-muted);
 }
 
-/* --- Mate Permission: conversational chat bubble --- */
+/* --- Mate Permission: flex layout matching msg-assistant --- */
 body.mate-dm-active .mate-permission {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
   border: none;
   border-radius: 0;
   background: none;
   box-shadow: none;
   padding: 4px 16px;
+  margin: 0;
+  max-width: 100%;
 }
 body.mate-dm-active .mate-permission:hover {
   background: var(--bg-alt);
 }
-.mate-permission-ask {
+body.mate-dm-active .mate-permission > .dm-bubble-avatar {
+  display: block;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+body.mate-dm-active .mate-permission > .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+}
+/* Permission ask text */
+.mate-perm-ask {
   font-size: 15px;
   line-height: 1.46;
   color: var(--text);
-  padding-left: 36px; /* align with name (avatar 28px + gap 8px) */
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
-.mate-permission-details {
-  padding-left: 36px;
+/* Details toggle */
+.mate-perm-details {
   margin-bottom: 8px;
   font-size: 12px;
   color: var(--text-muted);
 }
-.mate-permission-details summary {
+.mate-perm-details summary {
   cursor: pointer;
   user-select: none;
 }
-.mate-permission-details pre {
+.mate-perm-details pre {
   font-size: 11px;
   margin: 4px 0 0;
   padding: 8px;
@@ -1468,11 +1711,14 @@ body.mate-dm-active .mate-permission:hover {
   overflow-x: auto;
   max-height: 200px;
 }
+/* Reply buttons (override rewind.css .permission-actions) */
 .mate-permission-actions {
   display: flex;
   gap: 6px;
-  padding-left: 36px;
-  padding-bottom: 4px;
+  border: none;
+  border-radius: 0;
+  background: none;
+  padding: 0;
 }
 .mate-permission-reply {
   padding: 5px 14px;
@@ -1513,7 +1759,6 @@ body.mate-dm-active .mate-permission.resolved .mate-permission-reply {
 body.mate-dm-active .mate-permission.resolved .permission-decision-label {
   font-size: 12px;
   color: var(--text-dimmer);
-  padding-left: 36px;
 }
 
 /* --- Mate Activity: avatar + text (hidden, dots row is enough) --- */
@@ -1521,24 +1766,45 @@ body.mate-dm-active .activity-inline {
   display: none;
 }
 
-/* --- Mate AskUserQuestion: avatar + name header --- */
-.ask-user-mate-header {
-  display: none;
-}
-body.mate-dm-active .ask-user-mate-header {
+/* --- Mate AskUserQuestion: avatar + content layout (matches msg-assistant) --- */
+body.mate-dm-active .mate-ask-user {
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  align-items: flex-start;
   gap: 8px;
-  margin-bottom: 8px;
+  padding: 4px 16px;
+  margin: 0;
+  max-width: 100%;
+}
+body.mate-dm-active .mate-ask-user:hover {
+  background: var(--bg-alt);
+}
+body.mate-dm-active .mate-ask-user > .dm-bubble-avatar {
+  display: block;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+body.mate-dm-active .mate-ask-user > .dm-bubble-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* --- DM / Mate DM: full-width input like Slack --- */
+body.mate-dm-active #input-wrapper,
+#main-column.dm-mode #input-wrapper {
+  max-width: 100%;
 }
 
 /* --- Interstitial elements: indent to align with message content (16px pad + 36px avatar + 8px gap = 60px) --- */
-body.mate-dm-active .thinking-item,
+body.mate-dm-active .thinking-item:not(.mate-thinking),
 body.mate-dm-active .tool-item,
-body.mate-dm-active .tool-group,
+body.mate-dm-active .tool-group:not(.mate-tool-group),
 body.mate-dm-active .plan-card,
-body.mate-dm-active .permission-container,
-body.mate-dm-active .ask-user-container,
+body.mate-dm-active .permission-container:not(.mate-permission),
+body.mate-dm-active .ask-user-container:not(.mate-ask-user),
 body.mate-dm-active .subagent-log,
 body.mate-dm-active .conflict-msg,
 body.mate-dm-active .context-overflow-msg,