@taskforcehq/taskforce 0.3.326 → 0.3.328

package/dist/Taskforce.module.css

@@ -94,6 +94,11 @@
 
 /* Modal Styles moved to Modal.module.css */
 
+.coreModal {
+  position: relative;
+  isolation: isolate;
+}
+
 /* Header */
 .header {
   display: flex;
@@ -228,6 +233,30 @@
   flex: 0 0 auto;
 }
 
+.taskCountBadgeButton {
+  position: relative;
+  z-index: 1;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
+}
+
+.taskCountBadgeButton:hover {
+  border-color: var(--border-strong);
+  color: var(--text-primary);
+}
+
+.taskCountBadgeButton:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
+
+.taskCountBadgeActive {
+  color: var(--brand-primary);
+  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border-default));
+  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-page));
+}
+
 .taskCountBadgeAlert {
   color: #f87171;
   border-color: color-mix(in srgb, #ef4444 45%, var(--border-default));
@@ -623,16 +652,6 @@
   position: relative;
 }
 
-.deleteBtn {
-  color: #ef4444;
-  /* match deletion color */
-  background: rgba(239, 68, 68, 0.15);
-}
-
-.deleteBtn:hover {
-  background: rgba(239, 68, 68, 0.3);
-}
-
 .loading {
   display: flex;
   justify-content: center;
@@ -655,10 +674,9 @@
   gap: 8px;
 }
 
-.taskIdBadge {
+.referenceBadge {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
   background: color-mix(in srgb, var(--color-info, #3b82f6) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--color-info, #3b82f6) 28%, transparent);
   color: var(--color-info, #3b82f6);
@@ -677,7 +695,7 @@
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-info, #3b82f6) 8%, transparent);
 }
 
-.taskIdBadgeLabel {
+.referenceBadgeLabel {
   display: block;
   min-width: 0;
   max-width: 100%;
@@ -686,7 +704,7 @@
   white-space: nowrap;
 }
 
-.taskIdBadge:hover {
+.referenceBadge:not(.referenceBadgeStatic):hover {
   background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
   color: var(--color-info, #3b82f6);
   border-color: color-mix(in srgb, var(--color-info, #3b82f6) 40%, transparent);
@@ -696,12 +714,44 @@
     0 4px 12px color-mix(in srgb, var(--color-info, #3b82f6) 22%, transparent);
 }
 
-.copiedId {
+.referenceBadgeStatic {
+  cursor: default;
+}
+
+.provisionalReferenceBadge {
+  --provisional-reference-color: var(--color-warning, #f59e0b);
+  background: color-mix(in srgb, var(--provisional-reference-color) 14%, transparent);
+  border-color: color-mix(in srgb, var(--provisional-reference-color) 34%, transparent);
+  color: var(--provisional-reference-color);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--provisional-reference-color) 10%, transparent);
+}
+
+[data-theme="light"] .provisionalReferenceBadge,
+[data-theme="dawn"] .provisionalReferenceBadge {
+  --provisional-reference-color: #b45309;
+}
+
+.provisionalReferenceBadge:not(.referenceBadgeStatic):hover {
+  background: color-mix(in srgb, var(--provisional-reference-color) 20%, transparent);
+  border-color: color-mix(in srgb, var(--provisional-reference-color) 46%, transparent);
+  color: var(--provisional-reference-color);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--provisional-reference-color) 14%, transparent),
+    0 4px 12px color-mix(in srgb, var(--provisional-reference-color) 18%, transparent);
+}
+
+.copiedReference {
   background: var(--color-info-bg, rgba(59, 130, 246, 0.1)) !important;
   color: var(--color-info, #3b82f6) !important;
   border-color: rgba(59, 130, 246, 0.3) !important;
 }
 
+.provisionalReferenceBadge.copiedReference {
+  background: color-mix(in srgb, var(--provisional-reference-color) 14%, transparent) !important;
+  border-color: color-mix(in srgb, var(--provisional-reference-color) 34%, transparent) !important;
+  color: var(--provisional-reference-color) !important;
+}
+
 .highlight {
   display: inline;
   background: rgba(139, 92, 246, 0.2);
@@ -825,35 +875,6 @@
   --type-color: #f97316;
 }
 
-/* Approach Badge Styles */
-.approachPill {
-  text-transform: capitalize;
-  font-weight: 600;
-}
-
-.approach_evaluate {
-  background: rgba(234, 179, 8, 0.15);
-  color: #eab308;
-  border-color: rgba(234, 179, 8, 0.3);
-}
-
-.approach_collaborate {
-  background: rgba(59, 130, 246, 0.15);
-  color: #3b82f6;
-  border-color: rgba(59, 130, 246, 0.3);
-}
-
-.approach_plan {
-  background: rgba(16, 185, 129, 0.15);
-  color: #10b981;
-  border-color: rgba(16, 185, 129, 0.3);
-}
-
-.approachActive {
-  border-color: rgba(139, 92, 246, 0.5);
-  background: rgba(139, 92, 246, 0.1);
-}
-
 .statusActionsGroup {
   display: flex;
   align-items: center;
@@ -938,6 +959,15 @@
   transform: scale(1.1);
 }
 
+.restoreTaskBtn {
+  background: rgba(59, 130, 246, 0.1) !important;
+  color: #3b82f6 !important;
+}
+
+.restoreTaskBtn:hover {
+  background: rgba(59, 130, 246, 0.25) !important;
+}
+
 .startWorkBtn {
   background: rgba(59, 130, 246, 0.1) !important;
   color: #3b82f6 !important;
@@ -976,15 +1006,6 @@
 }
 
 
-.archiveTaskBtn {
-  background: rgba(59, 130, 246, 0.1) !important;
-  color: #3b82f6 !important;
-}
-
-.archiveTaskBtn:hover {
-  background: rgba(59, 130, 246, 0.25) !important;
-}
-
 .bulkArchiveBtn {
   display: flex;
   align-items: center;
@@ -1833,43 +1854,6 @@
   background: rgba(139, 92, 246, 0.1);
 }
 
-/* Markdown Content Styling */
-/* Unified Inline Code Styles */
-.inlineCode {
-  background: var(--code-inline-bg);
-  color: var(--code-inline-text);
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-family: "Monaco", "Menlo", "Cascadia Code", monospace;
-  font-size: 0.85em;
-  border: 1px solid var(--code-inline-border);
-  vertical-align: baseline;
-}
-
-.codeBlock {
-  background: var(--code-block-bg);
-  border: 1px solid var(--code-block-border);
-  border-radius: 12px;
-  padding: 16px;
-  margin: 16px 0;
-  overflow-x: auto;
-  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
-  position: relative;
-  white-space: pre-wrap;
-  /* Better for code blocks to wrap if they are too long */
-  word-break: break-word;
-}
-
-.codeBlock code {
-  background: transparent;
-  padding: 0;
-  color: var(--code-block-text);
-  font-size: 13px;
-  line-height: 1.6;
-  font-family: "Monaco", "Menlo", "Cascadia Code", monospace;
-  border: none;
-}
-
 .taskChildrenSummaryBadges {
   display: flex;
   flex-direction: column;
@@ -2161,6 +2145,42 @@
   overflow-y: auto;
 }
 
+.filterSearch {
+  position: sticky;
+  top: -6px;
+  z-index: 1;
+  padding: 6px 0;
+  background: var(--bg-secondary, #1a1a2e);
+}
+
+.filterSearchIcon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-helper, var(--text-secondary));
+  pointer-events: none;
+}
+
+.filterSearchInput.filterSearchInput {
+  box-sizing: border-box;
+  padding: 6px 7px 6px 26px;
+  font-size: 12px;
+  outline: none;
+}
+
+.filterSearchInput:focus {
+  border-color: var(--field-focus-border, var(--brand-primary));
+  box-shadow: 0 0 0 2px var(--field-focus-ring, var(--brand-primary-soft));
+}
+
+.filterEmpty {
+  padding: 12px 8px;
+  color: var(--text-helper, var(--text-secondary));
+  font-size: 12px;
+  text-align: center;
+}
+
 .filterOption {
   display: flex;
   width: 100%;
@@ -2433,47 +2453,6 @@
   border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
 }
 
-/* Priority Styles */
-.priorityItem_low {
-  border-left: 4px solid var(--priority-low) !important;
-}
-
-.priorityItem_medium {
-  border-left: 4px solid var(--priority-medium) !important;
-}
-
-.priorityItem_high {
-  border-left: 4px solid var(--priority-high) !important;
-}
-
-.priorityItem_critical {
-  border-left: 4px solid var(--priority-critical) !important;
-}
-
-.priorityPill_low {
-  background: rgba(148, 163, 184, 0.1) !important;
-  color: var(--priority-low) !important;
-  border-color: rgba(148, 163, 184, 0.2) !important;
-}
-
-.priorityPill_medium {
-  background: rgba(234, 179, 8, 0.1) !important;
-  color: var(--priority-medium) !important;
-  border-color: rgba(234, 179, 8, 0.2) !important;
-}
-
-.priorityPill_high {
-  background: rgba(239, 68, 68, 0.1) !important;
-  color: var(--priority-high) !important;
-  border-color: rgba(239, 68, 68, 0.2) !important;
-}
-
-.priorityPill_critical {
-  background: rgba(239, 68, 68, 0.1) !important;
-  color: var(--priority-critical) !important;
-  border-color: rgba(239, 68, 68, 0.2) !important;
-}
-
 .reviewPill {
   background: rgba(139, 92, 246, 0.15) !important;
   color: #a78bfa !important;
@@ -2616,10 +2595,10 @@
   color: var(--text-primary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  animation: fadeIn 0.3s ease-out;
+  animation: levelLabelFadeIn 0.3s ease-out;
 }
 
-@keyframes fadeIn {
+@keyframes levelLabelFadeIn {
   from {
     opacity: 0;
     transform: translateX(-5px);
@@ -2755,18 +2734,6 @@
   border-radius: 10px;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .specialistSection {
   display: flex;
   flex-direction: column;
@@ -2979,16 +2946,6 @@
   color: #8b5cf6;
 }
 
-/* Edit Actions Header */
-.editActionsHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
-}
-
 .editActionsGroup {
   display: flex;
   gap: 8px;
@@ -2996,40 +2953,6 @@
   justify-self: end;
 }
 
-.urlInputGroup {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  width: 100%;
-}
-
-.urlInputGroup input {
-  flex: 1;
-  min-width: 0;
-  /* Allow shrinking if needed */
-}
-
-.iconBtn {
-  background: var(--bg-primary, #0f0f1a);
-  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
-  color: var(--text-muted, #666);
-  cursor: pointer;
-  width: 42px;
-  height: 42px;
-  border-radius: var(--radius-md, 12px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.iconBtn:hover {
-  color: var(--text-primary, #fff);
-  border-color: #8b5cf6;
-  background: rgba(139, 92, 246, 0.1);
-}
-
 .stickyActionHeader {
   position: sticky;
   top: 0;
@@ -3047,6 +2970,12 @@
   backdrop-filter: blur(10px);
 }
 
+.taskNoticeAnchor {
+  position: relative;
+  z-index: 21;
+  flex-shrink: 0;
+}
+
 .taskHierarchyHeader {
   min-width: 0;
   display: flex;
@@ -3094,19 +3023,90 @@
   min-width: 24px;
 }
 
-.taskHierarchyEditor {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.taskHierarchyBadgeRow .taskWorkstreamPicker {
+  display: inline-flex;
+  width: max-content;
   min-width: 0;
+  max-width: min(100%, 12rem);
+  flex: 0 0 auto;
+}
+
+.taskWorkstreamPicker :global(.taxonomyDropdownButton) {
+  width: 24px;
+  min-width: 24px;
+  max-width: 24px;
+  min-height: 22px;
+  height: 22px;
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+  border-color: color-mix(in srgb, var(--color-info, #3b82f6) 28%, transparent);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--color-info, #3b82f6) 12%, transparent);
+  color: var(--color-info, #3b82f6);
+  font-size: 10px;
+  font-family: var(--font-mono, monospace);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-info, #3b82f6) 8%, transparent);
+}
+
+.taskWorkstreamPicker :global(.taxonomyDropdownButton:hover:not(:disabled)) {
+  border-color: color-mix(in srgb, var(--color-info, #3b82f6) 40%, transparent);
+  background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+  color: var(--color-info, #3b82f6);
+  filter: none;
+  transform: translateY(-1px);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--color-info, #3b82f6) 12%, transparent),
+    0 4px 12px color-mix(in srgb, var(--color-info, #3b82f6) 22%, transparent);
+}
+
+.taskWorkstreamPicker :global(.taxonomyDropdownButton:focus-visible) {
+  border-color: var(--color-info, #3b82f6);
+  outline-color: var(--color-info, #3b82f6);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+}
+
+.taskWorkstreamPicker :global(.taxonomyDropdownOpen) {
+  border-color: color-mix(in srgb, var(--color-info, #3b82f6) 40%, transparent) !important;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+  color: var(--color-info, #3b82f6);
+}
+
+.taskWorkstreamPicker :global(.taxonomyDropdownButtonContent) {
+  flex: 0 0 auto;
+  gap: 0;
+}
+
+.taskWorkstreamPickerIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.taskWorkstreamPickerPanel {
+  min-width: 280px;
 }
 
-.taskHierarchyInput {
-  width: 128px;
+.taskWorkstreamPickerOption {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
   min-width: 0;
-  height: 30px;
-  padding-block: 6px;
-  font-size: 12px;
+}
+
+.taskWorkstreamPickerOption > span:first-child {
+  color: var(--text-helper);
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+}
+
+.taskWorkstreamPickerOption > span:last-child {
+  overflow: hidden;
+  color: var(--text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 
@@ -3133,62 +3133,14 @@
   color: var(--status-error);
 }
 
-.headerSuccessFeedback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  color: #10b981;
-  font-weight: 600;
-  font-size: 14px;
-  animation: slideInUp 0.3s ease-out;
-}
-
-.successCheck {
-  color: #10b981;
-  animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes slideInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Ensure the modal content scrolls under this */
-.form {
-  overflow-y: auto;
-  flex: 1;
-  /* Remove padding-top from form if it was there, handled by content flow */
-}
-
-.primaryUpdateBtn {
-  background: var(--button-primary-bg);
-  color: var(--button-primary-text);
-  border: 1px solid var(--button-primary-border);
-  padding: 8px 16px;
-  border-radius: var(--radius-md, 12px);
-  font-weight: 600;
-  font-size: 13px;
+.primaryUpdateBtn {
+  background: var(--button-primary-bg);
+  color: var(--button-primary-text);
+  border: 1px solid var(--button-primary-border);
+  padding: 8px 16px;
+  border-radius: var(--radius-md, 12px);
+  font-weight: 600;
+  font-size: 13px;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -3242,43 +3194,6 @@
   border-color: var(--button-destructive-hover-border);
 }
 
-/* Threaded Comment System */
-.commentSection {
-  margin-top: 16px;
-  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
-  border-radius: var(--radius-md, 12px);
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  transition: all 0.3s ease;
-}
-
-.commentSection:focus-within {
-  border-color: rgba(139, 92, 246, 0.3);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-}
-
-.commentSection .labelRow {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.05));
-  background: rgba(255, 255, 255, 0.01);
-}
-
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .attachmentCaptureContainer {
   padding: 1rem;
   background: var(--bg-primary);
@@ -3384,9 +3299,8 @@
 
 .attachmentGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 12px;
-  margin-top: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: 8px;
 }
 
 .attachmentCard {
@@ -3406,7 +3320,7 @@
 .attachmentPreviewContainer {
   position: relative;
   width: 100%;
-  aspect-ratio: 16/9;
+  aspect-ratio: 4/3;
   background: #000;
   overflow: hidden;
 }
@@ -3420,6 +3334,20 @@
   display: block;
 }
 
+.attachmentPreviewButton {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.attachmentPreviewButton:focus-visible {
+  outline: 2px solid var(--field-focus-border);
+  outline-offset: -2px;
+}
+
 .attachmentPreviewContainer:hover img {
   transform: scale(1.02);
 }
@@ -3460,7 +3388,8 @@
   transition: opacity 0.2s;
 }
 
-.attachmentPreviewContainer:hover .attachmentActions {
+.attachmentPreviewContainer:hover .attachmentActions,
+.attachmentPreviewContainer:focus-within .attachmentActions {
   opacity: 1;
 }
 
@@ -3486,12 +3415,20 @@
   transform: scale(1.05);
 }
 
-.attachmentCaptionInput {
+.attachmentActionBtnActive {
+  color: var(--brand-primary);
+  border-color: color-mix(in srgb, var(--brand-primary) 65%, white);
+  background: color-mix(in srgb, var(--brand-primary) 32%, rgba(0, 0, 0, 0.82));
+}
+
+.attachmentCaptionInput,
+.documentAttachmentCaptionInput {
+  min-width: 0;
   width: 100%;
-  padding: 10px 12px;
-  background: transparent;
-  border: none;
-  border-top: 1px solid var(--border-primary);
+  padding: 6px 8px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 6px);
   color: var(--text-secondary);
   font-size: var(--text-xs, 12px);
   font-family: inherit;
@@ -3499,7 +3436,8 @@
   transition: all 0.2s;
 }
 
-.attachmentCaptionInput:focus {
+.attachmentCaptionInput:focus,
+.documentAttachmentCaptionInput:focus {
   background: rgba(255, 255, 255, 0.03);
   color: var(--text-primary);
 }
@@ -3508,118 +3446,216 @@
   display: none;
 }
 
-.contextUploadPanel {
-  margin-top: 8px;
-  padding: 10px;
-  border: 1px solid color-mix(in srgb, var(--border-primary, rgba(255, 255, 255, 0.18)), transparent 6%);
+.contextMenuControl {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.contextMenu {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 150px;
+  padding: 4px;
+  border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--bg-secondary, rgba(255, 255, 255, 0.03)), transparent 12%);
+  background: var(--bg-secondary);
+  box-shadow: var(--box-shadow-lg);
 }
 
-.contextUploadActions {
-  --context-upload-stack-gap: 10px;
+.contextMenu button {
+  width: 100%;
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-top: 0;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
 }
 
-.contextDropzone {
-  margin-top: var(--context-upload-stack-gap, 8px);
-  border: 1px dashed color-mix(in srgb, var(--border-primary, rgba(255, 255, 255, 0.18)), transparent 8%);
-  border-radius: var(--radius-md, 8px);
-  background: rgba(255, 255, 255, 0.01);
-  color: color-mix(in srgb, var(--text-secondary, #aaa), transparent 5%);
-  min-height: 40px;
-  padding: 9px 12px;
+.contextMenu button:hover,
+.contextMenu button:focus-visible {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.contextMenu button:focus-visible {
+  outline: 2px solid var(--field-focus-border);
+  outline-offset: -2px;
+}
+
+.contextAddMenu {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+.contextActionsMenu {
+  top: calc(100% + 2px);
+}
+
+.attachmentImageActionsMenu {
+  position: fixed;
+  z-index: calc(var(--z-overlay) + 1);
+  top: auto;
+  right: auto;
+  width: 150px;
+  max-width: calc(100vw - 16px);
+}
+
+.contextMenu .contextDestructiveMenuItem {
+  color: var(--color-error, #ef4444);
+}
+
+.contextContent {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 42px;
+  margin-top: 6px;
+  padding: 2px 0;
+}
+
+.contextContentDropActive {
+  border-radius: var(--radius-md);
+}
+
+.contextDropOverlay {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  min-height: 54px;
+  border: 1px dashed var(--brand-primary);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--bg-primary) 90%, var(--brand-primary));
+  color: var(--text-primary);
   font-size: 12px;
-  transition: all 0.18s ease;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 35%, transparent);
 }
 
-.contextDropzoneActive {
-  border-color: rgba(139, 92, 246, 0.7);
-  background: rgba(139, 92, 246, 0.09);
-  color: var(--text-primary, #fff);
-  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35);
-  animation: contextDropzonePulse 220ms ease-out;
+.contextLinkComposer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 6px;
 }
 
-.contextLinkRow {
+.contextEmptyState {
+  min-height: 42px;
   display: flex;
-  gap: 8px;
-  margin-top: var(--context-upload-stack-gap, 8px);
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.contextGroupLabel {
+  margin-bottom: 6px;
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 .contextNotice {
-  margin-top: 8px;
   font-size: 11px;
   color: var(--text-muted, #8a90a0);
 }
 
+.contextCaptionEditor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px;
+  padding: 5px;
+}
+
+.attachmentCaptionLabel {
+  width: 100%;
+  padding: 7px 8px;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+}
+
+.attachmentCaptionLabel:hover,
+.attachmentCaptionLabel:focus-visible {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.attachmentCaptionLabel:focus-visible {
+  outline: 2px solid var(--field-focus-border);
+  outline-offset: -2px;
+}
+
 .documentAttachmentList {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 12px;
+  gap: 6px;
 }
 
 .documentAttachmentItem {
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--bg-secondary, rgba(255, 255, 255, 0.03)), transparent 8%);
-  overflow: hidden;
 }
 
 .documentAttachmentRow {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
+  gap: 6px;
+  min-height: 38px;
+  padding: 5px 6px 5px 10px;
 }
 
 .documentAttachmentLink {
+  flex: 1 1 auto;
   min-width: 0;
   border: none;
   background: transparent;
   color: var(--text-primary, #fff);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
   padding: 0;
   cursor: pointer;
   text-align: left;
 }
 
 .documentAttachmentMain {
+  width: 100%;
   min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.documentAttachmentText {
-  min-width: 0;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 6px;
-  flex-wrap: wrap;
 }
 
-.documentAttachmentIcon {
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted, #94a3b8);
-  opacity: 0.75;
-  flex-shrink: 0;
+.documentAttachmentReference {
+  flex: 0 0 auto;
+  max-width: none;
 }
 
 .documentAttachmentName {
@@ -3631,89 +3667,21 @@
   color: var(--text-primary, #fff);
 }
 
-.documentAttachmentType {
-  flex-shrink: 0;
-  font-size: 10px;
-  line-height: 1;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  color: var(--text-muted, #94a3b8);
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-primary);
-  border-radius: 6px;
-  padding: 3px 6px;
-}
-
-.documentAttachmentActions {
+.brokenImage {
   display: flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  background: var(--bg-secondary);
+  min-height: 100%;
 }
 
-.documentAttachmentActionBtn {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid var(--border-primary);
-  color: var(--text-secondary, #c4c4c4);
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  display: inline-flex;
+.brokenImagePlaceholder {
+  display: none;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0;
-}
-
-.documentAttachmentActionBtn:hover {
-  color: var(--text-primary, #fff);
-  border-color: var(--border-subtle, rgba(255, 255, 255, 0.2));
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.documentAttachmentCaptionInput {
-  width: 100%;
-  padding: 9px 12px;
-  background: transparent;
-  border: none;
-  border-top: 1px solid var(--border-primary);
-  color: var(--text-secondary);
-  font-size: var(--text-xs, 12px);
-  font-family: inherit;
-  outline: none;
-  transition: all 0.2s;
-}
-
-.documentAttachmentCaptionInput:focus {
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-primary);
-}
-
-@keyframes contextDropzonePulse {
-  0% {
-    transform: scale(0.997);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-.brokenImage {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-secondary);
-  min-height: 100%;
-}
-
-.brokenImagePlaceholder {
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-muted);
-  font-size: var(--text-xs);
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
 }
 
 .brokenImage .brokenImagePlaceholder {
@@ -3985,6 +3953,230 @@
   gap: 0.75rem;
 }
 
+.mcpHealthCompactAlert,
+.mcpHealthUpdateRow,
+.mcpHealthBlockingAlert {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 9px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.mcpHealthCompactAlert {
+  background: var(--surface-raised);
+}
+
+.mcpHealthUpdateRow {
+  background: var(--status-warning-bg);
+  border-color: color-mix(in srgb, var(--status-warning) 34%, var(--border-subtle));
+}
+
+.mcpHealthBlockingAlert {
+  align-items: flex-start;
+  background: var(--status-error-bg);
+  border-color: color-mix(in srgb, var(--status-error) 34%, var(--border-subtle));
+  color: var(--status-error-text);
+}
+
+.mcpHealthUpdateIcon {
+  display: grid;
+  place-items: center;
+  color: var(--status-warning-text);
+}
+
+.mcpHealthCompactBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.mcpHealthCompactBody strong {
+  color: var(--text-primary);
+  font-size: 12px;
+}
+
+.mcpHealthCompactBody code {
+  font-size: 11px;
+}
+
+.mcpHealthCompactActions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.mcpHealthStableAction {
+  justify-content: center;
+  min-width: 108px;
+}
+
+.mcpUpdateDialog {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: min(620px, calc(100vh - 180px));
+  padding: 20px 24px 24px;
+  overflow-y: auto;
+}
+
+.mcpUpdateDialogIntro,
+.mcpUpdateRestartGuidance {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.mcpUpdateVersionGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.mcpUpdateVersionGrid > div {
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+}
+
+.mcpUpdateVersionGrid dt,
+.mcpUpdateDiagnostics dt {
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.mcpUpdateVersionGrid dd,
+.mcpUpdateDiagnostics dd {
+  margin: 3px 0 0;
+  color: var(--text-primary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.mcpUpdateLoading,
+.mcpUpdateNotice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.mcpUpdateNotice {
+  padding: 9px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+}
+
+.mcpUpdateCommands {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mcpUpdateSectionLabel {
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.mcpHealthCommandRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.mcpHealthCommand {
+  max-width: 100%;
+  padding: 6px 8px;
+  overflow-wrap: anywhere;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  font-size: 11px;
+}
+
+.mcpUpdateDiagnostics {
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 12px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.mcpUpdateDiagnostics summary {
+  width: fit-content;
+  cursor: pointer;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.mcpUpdateDiagnostics dl {
+  display: grid;
+  gap: 10px;
+  margin: 12px 0 0;
+}
+
+.mcpUpdateDiagnostics dl > div {
+  min-width: 0;
+}
+
+.mcpUpdateDialogActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.mcpHealthCopyError {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--status-error) 30%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+  font-size: 12px;
+}
+
+@media (max-width: 640px) {
+  .mcpHealthCompactAlert,
+  .mcpHealthUpdateRow,
+  .mcpHealthBlockingAlert {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .mcpHealthCompactActions {
+    margin-left: 0;
+  }
+
+  .mcpUpdateVersionGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .mcpUpdateDialogActions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+}
+
 .settingLabelGroup {
   display: flex;
   flex-direction: column;
@@ -4128,7 +4320,7 @@
   padding: 8px 16px 14px;
 }
 
-.codeBlock {
+.settingsCodeBlock {
   margin: 0;
   background: #1e1e2e !important;
   padding: 14px 16px !important;
@@ -4137,7 +4329,7 @@
   border-radius: 0 !important;
 }
 
-.codeBlock code {
+.settingsCodeBlock code {
   font-family: "JetBrains Mono", "Fira Code", monospace;
   font-size: 13px;
   line-height: 1.6;
@@ -4269,56 +4461,69 @@
 }
 
 .taskScopeToggle {
+  display: inline-flex;
+  align-items: center;
   gap: 8px;
+  min-height: 32px;
+  padding-left: 12px;
+  border-left: 1px solid var(--chrome-divider);
 }
 
-.taskScopeToggle span {
-  color: var(--text-label, var(--text-muted, #666));
+.taskScopeToggle > span {
+  color: var(--text-label);
 }
 
 .taskScopeTabs {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
+  gap: 2px;
   min-height: 32px;
-  padding: 3px;
-  border-radius: 11px;
-  background: color-mix(in srgb, var(--surface-inset, rgba(15, 23, 42, 0.08)) 72%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent);
 }
 
 .taskScopeTab {
   appearance: none;
-  border: 1px solid transparent;
+  position: relative;
+  border: 0;
   background: transparent;
-  color: var(--text-muted, #888);
-  min-height: 24px;
-  padding: 0 11px;
-  border-radius: 8px;
+  color: var(--text-secondary);
+  min-height: 32px;
+  padding: 0 10px;
+  border-radius: var(--radius-sm);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
   cursor: pointer;
-  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+
+.taskScopeTab::after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  bottom: 0;
+  left: 8px;
+  height: 2px;
+  border-radius: var(--radius-full);
+  background: transparent;
+  transition: background-color var(--transition-base);
 }
 
 .taskScopeTab:hover {
-  color: var(--text-secondary);
-  background: color-mix(in srgb, var(--surface-panel) 48%, transparent);
-  border-color: color-mix(in srgb, var(--border-default) 38%, transparent);
+  color: var(--text-primary);
+  background: var(--surface-hover);
+}
+
+.taskScopeTab:focus-visible {
+  outline: 2px solid var(--brand-primary-border);
+  outline-offset: -2px;
 }
 
 .taskScopeTabActive {
-  background: color-mix(in srgb, var(--brand-primary-soft) 92%, var(--surface-elevated) 8%);
-  border-color: color-mix(in srgb, var(--brand-primary-border) 78%, transparent);
-  color: color-mix(in srgb, var(--brand-primary-strong) 72%, var(--text-title) 28%);
+  color: var(--text-primary);
 }
 
-.taskScopeTabActive:hover {
-  color: color-mix(in srgb, var(--brand-primary-strong) 78%, var(--text-title) 22%);
-  background: color-mix(in srgb, var(--brand-primary-soft) 96%, var(--surface-elevated) 4%);
-  border-color: color-mix(in srgb, var(--brand-primary-border) 84%, transparent);
+.taskScopeTabActive::after {
+  background: var(--brand-primary);
 }
 
 .taskToolbarAction {
@@ -4925,133 +5130,1368 @@
   animation: docSpin 1s linear infinite;
 }
 
-@keyframes docSpin {
-  to {
-    transform: rotate(360deg);
-  }
+@keyframes docSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Right panel */
+.docViewerPanel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.docViewerEmpty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Markdown prose */
+/* =============================
+   Document Editor (Phase 2)
+   ============================= */
+
+/* AI Profiles Management */
+.agentsModuleRoot {
+  --agent-tray-width: min(760px, calc(100vw - 96px));
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.agentsModuleWithTray {
+  transition: padding-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.agentsModuleTrayOpen {
+  padding-left: calc(var(--agent-tray-width) + 20px);
+}
+
+.agentTrayPanel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--agent-tray-width);
+  min-width: min(360px, calc(100vw - 96px));
+  max-width: 760px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-right: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  overflow: hidden;
+  transform: translateX(-100%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 34;
+  box-shadow: 4px 0 18px rgba(8, 10, 24, 0.16);
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 220ms;
+}
+
+.agentTrayPanelOpen {
+  transform: translateX(0);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 0s;
+}
+
+.agentTrayHeader {
+  position: sticky;
+  top: 0;
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  box-shadow: 0 10px 16px color-mix(in srgb, var(--bg-secondary) 90%, transparent);
+  flex-shrink: 0;
+}
+
+.agentTrayTitle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+.agentTrayContent {
+  flex: 1;
+  min-height: 0;
+  padding: 12px 0 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.agentTrayContentInner {
+  padding: 0 12px;
+}
+
+.agentsModuleContent {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.taskforceAgentsModuleRoot {
+  --doc-tray-width: min(332px, calc(100vw - 96px));
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.taskforceAgentsModuleMain {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  transition: margin-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.taskforceAgentsModuleTrayOpen .taskforceAgentsModuleMain {
+  margin-left: var(--doc-tray-width);
+}
+
+.taskforceAgentRosterHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 56px;
+  padding: 12px 0 10px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.taskforceAgentRosterTitle {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.taskforceAgentRosterContent {
+  flex: 1;
+  min-height: 0;
+  padding: 12px 0 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.taskforceAgentLibraryPortal {
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+}
+
+.taskforceAgentBuilderNavigation {
+  display: flex;
+  position: relative;
+  align-items: flex-end;
+  align-self: stretch;
+  gap: 12px;
+  min-height: 42px;
+  padding: 0 4px;
+  margin-bottom: -2rem;
+}
+
+.taskforceAgentBuilderNavigation::after {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  right: 4px;
+  bottom: 0;
+  left: 4px;
+  height: 1px;
+  background: var(--border-default);
+  pointer-events: none;
+}
+
+.taskforceAgentBuilderTabs {
+  display: flex;
+  position: relative;
+  z-index: 1;
+  flex: 1 1 auto;
+  align-items: flex-end;
+  min-width: 0;
+  gap: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.taskforceAgentBuilderTabs::-webkit-scrollbar {
+  display: none;
+}
+
+.taskforceAgentBuilderCreateBtn {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  margin: 0 0 5px auto;
+}
+
+.taskforceAgentBuilderTab {
+  appearance: none;
+  position: relative;
+  min-width: 88px;
+  min-height: 38px;
+  padding: 0 18px;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: transparent;
+  color: var(--text-helper);
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-base),
+    border-color var(--transition-base),
+    color var(--transition-base);
+}
+
+.taskforceAgentBuilderTab:hover:not([aria-selected="true"]) {
+  background: var(--surface-inset);
+  border-color: color-mix(in srgb, var(--border-default) 72%, transparent);
+  color: var(--text-secondary);
+}
+
+.taskforceAgentBuilderTab:focus-visible {
+  z-index: 2;
+  outline: 2px solid var(--brand-primary);
+  outline-offset: -3px;
+}
+
+.taskforceAgentBuilderTabActive {
+  z-index: 1;
+  margin-bottom: -1px;
+  background: var(--surface-panel);
+  border-color: var(--border-default);
+  color: var(--brand-primary-strong);
+}
+
+.taskforceAgentBuilderTabActive::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--surface-panel);
+}
+
+.taskforceAgentBuilderPanel {
+  padding-top: 1.5rem;
+}
+
+.taskforceAgentBuilderPanel[hidden] {
+  display: none;
+}
+
+.taskforceAgentBuilderEmpty {
+  min-height: min(420px, 58vh);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.taskforceAgentBuilderEmptyIcon {
+  width: 44px;
+  height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text-helper);
+}
+
+.taskforceAgentTestGrid {
+  display: grid;
+  grid-template-columns: minmax(320px, 0.92fr) minmax(280px, 0.72fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.taskforceAgentContextBanner {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-primary));
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
+}
+
+.taskforceAgentContextBanner div {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.taskforceAgentContextActions.taskforceAgentContextActions {
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.taskforceAgentContextBanner span {
+  color: var(--text-helper);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.taskforceAgentContextBanner strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.taskforceAssistantWorkspace {
+  --taskforce-agent-assistant-width: clamp(380px, 28vw, 500px);
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.taskforceAssistantWorkspaceContent {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  padding-right: 0;
+  transition: padding-right var(--transition-base);
+}
+
+.taskforceAssistantWorkspaceOpen .taskforceAssistantWorkspaceContent {
+  padding-right: var(--taskforce-agent-assistant-width);
+}
+
+.taskforceAssistantWorkspaceCollapsed {
+  --taskforce-agent-assistant-width: 56px;
+}
+
+.taskforceModalWithAssistantPanel.taskforceModalWithAssistantPanel {
+  --taskforce-agent-assistant-width: clamp(380px, 28vw, 500px);
+  padding-right: calc(var(--taskforce-agent-assistant-width) + 24px);
+}
+
+.taskforceModalWithAssistantPanelCollapsed.taskforceModalWithAssistantPanelCollapsed {
+  --taskforce-agent-assistant-width: 56px;
+}
+
+.taskforceTaskModalOverlay.taskforceTaskModalOverlay {
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.taskforceTaskModalOverlay::before {
+  content: "";
+  position: fixed;
+  top: var(--taskforce-task-modal-backdrop-top, 72px);
+  right: 0;
+  bottom: 0;
+  left: var(--taskforce-task-modal-backdrop-left, 0);
+  background: rgba(7, 10, 24, 0.64);
+  backdrop-filter: blur(10px);
+}
+
+.taskforceTaskModalOverlay :global(.tf-modal-shell) {
+  position: relative;
+  z-index: 1;
+}
+
+.taskforceAgentDrawerOverlay {
+  --taskforce-agent-assistant-width: clamp(380px, 28vw, 500px);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 1160;
+  width: var(--taskforce-agent-assistant-width, min(500px, calc(100vw - 56px)));
+  pointer-events: none;
+}
+
+.taskforceAgentDrawerOverlayCollapsed {
+  --taskforce-agent-assistant-width: 56px;
+}
+
+.taskforceAgentDrawerPanel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-left: 1px solid var(--border-primary);
+  background: color-mix(in srgb, var(--surface-modal) 94%, var(--surface-page));
+  box-shadow: -18px 0 34px rgba(0, 0, 0, 0.22);
+  pointer-events: auto;
+}
+
+.taskforceAgentDrawerHeader {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-primary);
+  background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
+}
+
+.taskforceAgentDrawerAgentHeader,
+.taskforceAgentDrawerHeaderFallback {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.taskforceAgentDrawerAgentAvatar,
+.taskforceAgentDrawerFallbackAvatar {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex: 0 0 auto;
+  color: var(--text-secondary);
+  background: var(--agent-avatar-bg);
+  border: 1px solid var(--agent-avatar-border);
+}
+
+.taskforceAgentDrawerAgentAvatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.taskforceAgentDrawerAgentAvatarButton {
+  padding: 0;
+  cursor: pointer;
+  transition:
+    border-color var(--transition-base),
+    box-shadow var(--transition-base),
+    transform var(--transition-base);
+}
+
+.taskforceAgentDrawerAgentAvatarButton:hover:not(:disabled) {
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 16%, transparent);
+}
+
+.taskforceAgentDrawerAgentAvatarButton:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.taskforceAgentDrawerAgentAvatarButton:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.taskforceAgentDrawerAgentPicker {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.taskforceAgentDrawerAgentPicker select {
+  height: 32px;
+  min-height: 32px;
+  padding-block: 4px;
+  font-weight: 650;
+}
+
+.taskforceAgentDrawerHeaderFallback strong {
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+.taskforceAgentDrawerHeaderActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.taskforceAgentDrawerLoading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+}
+
+.taskforceAgentDrawerSurface {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  overflow: auto;
+}
+
+.taskforceAgentDrawerControls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.taskforceAgentProfileTray {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
+  animation: taskforceAgentProfileTrayIn 0.16s ease-out;
+}
+
+.taskforceAgentProfileTrayHeader {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.taskforceAgentProfileTrayIdentity {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.taskforceAgentProfileTrayIdentity span,
+.taskforceAgentProfileTrayDetails dt {
+  color: var(--text-helper);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.taskforceAgentProfileTrayIdentity strong,
+.taskforceAgentProfileTrayIdentity small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskforceAgentProfileTrayIdentity strong {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.taskforceAgentProfileTrayIdentity small {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.taskforceAgentProfileTrayDetails {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 12px;
+  margin: 0;
+}
+
+.taskforceAgentProfileTrayDetails div {
+  min-width: 0;
+}
+
+.taskforceAgentProfileTrayDetails dt {
+  margin: 0 0 3px;
+}
+
+.taskforceAgentProfileTrayDetails dd {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes taskforceAgentProfileTrayIn {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.taskforceAgentDrawerChatControls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 2.125rem 2.125rem;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.taskforceAgentConversationRename {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 2.125rem 2.125rem;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.taskforceAgentConversationRename .input {
+  min-width: 0;
+}
+
+.taskforceAgentConversationRenameError {
+  grid-column: 1 / -1;
+  color: var(--status-error);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.taskforceAgentDrawerConversationList {
+  flex: 1;
+  min-height: 220px;
+  max-height: none;
+}
+
+.taskforceAgentDrawerPrompt {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
+  min-width: 0;
+}
+
+.taskforceAgentDrawerPrompt textarea {
+  min-height: 86px;
+  max-height: 180px;
+  resize: vertical;
+}
+
+.taskforceAgentDrawerPrompt .secondaryHeaderBtn {
+  height: 36px;
+  min-width: 84px;
+  justify-content: center;
+}
+
+.taskforceAgentDrawerPromptStatus {
+  grid-column: 1 / -1;
+  min-height: 16px;
+  color: var(--status-error);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.taskforceAgentDrawerMetrics {
+  display: flex;
+  justify-content: flex-end;
+  gap: 14px;
+  min-height: 18px;
+  color: var(--text-helper);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.taskforceAgentDrawerMetrics span {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  min-width: 0;
+}
+
+.taskforceAgentDrawerMetrics strong {
+  color: var(--text-secondary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.taskforceAgentOutputStack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.taskforceAgentOutputPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
+  padding: 12px;
+}
+
+.taskforceAgentTestTitle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.taskforceAgentTestTitle .taskforceAgentBuilderEmptyIcon {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 auto;
+}
+
+.taskforceAgentTestTitle > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.taskforceAgentTestTitle p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.taskforceAgentTestNotice,
+.taskforceAgentTestError,
+.taskforceAgentTestPending {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 9px 10px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: color-mix(in srgb, var(--input-bg) 72%, transparent);
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.taskforceAgentTestNotice svg,
+.taskforceAgentTestError svg,
+.taskforceAgentTestPending svg {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.taskforceAgentTestNotice svg {
+  color: var(--status-success);
+}
+
+.taskforceAgentTestError {
+  border-color: color-mix(in srgb, var(--status-error) 35%, var(--border-primary));
+  color: var(--status-error);
+}
+
+.taskforceAgentTestPending svg {
+  color: var(--accent-primary);
+}
+
+.taskforceAgentTestActions {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.taskforceAgentTestActions > button:first-child {
+  margin-right: auto;
+}
+
+.taskforceAgentTestRestriction {
+  margin: 0;
+  color: var(--text-helper);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.taskforceAgentTestResult {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid color-mix(in srgb, var(--status-success) 26%, var(--border-primary));
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--status-success) 5%, var(--input-bg));
+}
+
+.taskforceAgentTestResultHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-helper);
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.taskforceAgentTestResultHeader span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--status-success);
+  font-weight: 650;
+}
+
+.taskforceAgentTestResponse {
+  min-width: 0;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.taskforceAgentTestResponse > :first-child {
+  margin-top: 0;
+}
+
+.taskforceAgentTestResponse > :last-child {
+  margin-bottom: 0;
+}
+
+.taskforceAgentReadonlyField {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--input-bg) 78%, var(--bg-secondary));
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.taskforceAgentAvatarPanel {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 14px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
+}
+
+.taskforceAgentAvatarEditControl {
+  position: relative;
+  width: 88px;
+  height: 88px;
+}
+
+.taskforceAgentAvatarPreview,
+.taskforceAgentListAvatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  overflow: hidden;
+  border: 1px solid var(--border-primary);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent-primary) 8%, var(--input-bg));
+  color: var(--text-secondary);
+}
+
+.taskforceAgentAvatarPreview {
+  width: 64px;
+  height: 64px;
+}
+
+.taskforceAgentAvatarPreview img,
+.taskforceAgentListAvatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.taskforceAgentAvatarSyncing {
+  border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-primary));
+}
+
+.taskforceAgentAvatarSyncIcon {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 15px;
+  height: 15px;
+  padding: 2px;
+  border: 1px solid var(--border-primary);
+  border-radius: 50%;
+  background: var(--bg-primary);
+  color: var(--accent-primary);
+}
+
+.taskforceAgentAvatarCopy {
+  display: flex;
+  flex: 1 1 140px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.taskforceAgentAvatarCopy strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskforceAgentAvatarRole {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskforceAgentAvatarCopy small {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskforceAgentToolbar {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.taskforceAgentConversationSelect,
+.taskforceAgentConversationRename .input {
+  height: 34px;
+  font-size: 12px;
+}
+
+.taskforceAgentConversationSelect {
+  width: 100%;
+  min-width: 0;
+}
+
+.taskforceAgentList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.taskforceAgentListEmpty {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+  margin: 0;
+}
+
+.taskforceAgentSignatureColorField {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 0;
+}
+
+.taskforceAgentSignatureColorField > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.taskforceAgentSignatureColorField small {
+  color: var(--text-helper);
+  font-size: 11px;
+}
+
+.taskforceAgentSignatureColorField .aiProfileColorPicker {
+  justify-content: flex-start;
+  margin-top: 0;
+}
+
+.taskforceAgentBehaviorGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.taskforceAgentBehaviorWide {
+  grid-column: 1 / -1;
+}
+
+.taskforceAgentFieldHelper {
+  display: block;
+  color: var(--text-helper);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.taskforceAgentPresentationGroup {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--bg-secondary) 66%, transparent);
+}
+
+.taskforceAgentPresentationGroup > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.taskforceAgentLogList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.taskforceAgentLogEntry {
+  display: grid;
+  grid-template-columns: 16px auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.taskforceAgentToolDetails {
+  grid-column: 3;
+  min-width: 0;
+  color: var(--text-secondary);
+}
+
+.taskforceAgentToolDetails summary {
+  width: fit-content;
+  cursor: pointer;
+  color: var(--accent-primary);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.taskforceAgentToolActivity {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+}
+
+.taskforceAgentToolActivity > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.taskforceAgentToolActivity > summary span {
+  color: var(--text-helper);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.taskforceAgentToolActivity > summary strong {
+  color: var(--text-primary);
+  font-size: 12px;
+}
+
+.taskforceAgentToolActivityList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.taskforceAgentToolCall {
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: color-mix(in srgb, var(--input-bg) 72%, transparent);
+}
+
+.taskforceAgentToolCall > summary {
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+  color: var(--status-success);
+}
+
+.taskforceAgentToolCallFailed > summary {
+  color: var(--status-error);
+}
+
+.taskforceAgentToolCallName {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskforceAgentToolCallStatus {
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.taskforceAgentToolDetailsGrid {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 6px 8px;
+  margin-top: 6px;
+  padding: 8px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm, 6px);
+  background: color-mix(in srgb, var(--input-bg) 72%, transparent);
+}
+
+.taskforceAgentToolDetailsGrid span {
+  color: var(--text-helper);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.taskforceAgentToolDetailsGrid code,
+.taskforceAgentToolDetailsGrid pre {
+  min-width: 0;
+  margin: 0;
+  color: var(--text-primary);
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.taskforceAgentToolDetailsGrid pre {
+  max-height: 96px;
+  overflow: auto;
+}
+
+.taskforceAgentLogSuccess {
+  color: var(--status-success);
+}
+
+.taskforceAgentLogError {
+  color: var(--status-error);
+}
+
+.taskforceAgentLogTime {
+  color: var(--text-helper);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.taskforceAgentConversationList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 160px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 10px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: var(--input-bg);
+}
+
+.taskforceAgentConversationList.taskforceAgentDrawerConversationList {
+  flex: 1 1 0;
+  min-height: 140px;
+  max-height: none;
+}
+
+.taskforceAgentDrawerConversationList .taskforceAgentConversationBody,
+.taskforceAgentDrawerConversationList .taskforceAgentConversationMessage > p {
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.taskforceAgentConversationEmpty {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
-/* Right panel */
-.docViewerPanel {
-  flex: 1;
-  min-width: 0;
+.taskforceAgentConversationMessage {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  gap: 4px;
+  width: fit-content;
+  max-width: 88%;
+  padding: 8px 10px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md, 8px);
+  background: color-mix(in srgb, var(--bg-secondary) 74%, transparent);
+  color: var(--text-body);
 }
 
-.docViewerEmpty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  font-size: 13px;
+.taskforceAgentConversationMessage > span {
+  color: var(--text-helper);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
-/* Markdown prose */
-/* =============================
-   Document Editor (Phase 2)
-   ============================= */
+.taskforceAgentConversationMessage > p {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
 
-/* AI Profiles Management */
-.agentsModuleRoot {
-  --agent-tray-width: min(760px, calc(100vw - 96px));
-  position: relative;
-  flex: 1;
+.taskforceAgentConversationBody {
   min-width: 0;
-  min-height: 0;
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding: 20px 24px 22px;
+  color: var(--text-body);
 }
 
-.agentsModuleWithTray {
-  transition: padding-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
+.taskforceAgentConversationMessageUser {
+  align-self: flex-end;
+  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
+  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border-primary));
+  border-top-right-radius: var(--radius-sm);
 }
 
-.agentsModuleTrayOpen {
-  padding-left: calc(var(--agent-tray-width) + 20px);
+.taskforceAgentConversationMessageUser > span {
+  align-self: flex-end;
+  text-align: end;
 }
 
-.agentTrayPanel {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--agent-tray-width);
-  min-width: min(360px, calc(100vw - 96px));
-  max-width: 760px;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  border-right: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-  overflow: hidden;
-  transform: translateX(-100%);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  z-index: 34;
-  box-shadow: 4px 0 18px rgba(8, 10, 24, 0.16);
-  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 220ms;
+.taskforceAgentConversationMessageAssistant {
+  align-self: flex-start;
+  background: color-mix(
+    in srgb,
+    var(--conversation-accent, var(--brand-cloud-accent)) 12%,
+    transparent
+  );
+  border-color: color-mix(
+    in srgb,
+    var(--conversation-accent, var(--brand-cloud-accent)) 32%,
+    var(--border-primary)
+  );
+  border-top-left-radius: var(--radius-sm);
 }
 
-.agentTrayPanelOpen {
-  transform: translateX(0);
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease, visibility 0s linear 0s;
+.taskforceAgentMetaGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
 }
 
-.agentTrayHeader {
-  position: sticky;
-  top: 0;
-  z-index: 12;
+.taskforceAgentMetaGrid > div {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 12px 12px 10px;
-  border-bottom: 1px solid var(--border-default);
-  background: var(--bg-secondary);
-  box-shadow: 0 10px 16px color-mix(in srgb, var(--bg-secondary) 90%, transparent);
-  flex-shrink: 0;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
 }
 
-.agentTrayTitle {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.78rem;
+.taskforceAgentMetaGrid span {
+  color: var(--text-helper);
+  font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--text-secondary);
-}
-
-.agentTrayContent {
-  flex: 1;
-  min-height: 0;
-  padding: 12px 0 16px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.agentTrayContentInner {
-  padding: 0 12px;
-}
-
-.agentsModuleContent {
-  width: min(100%, 760px);
-  min-height: 0;
 }
 
-.agentsModuleGroup {
-  min-height: 0;
+.taskforceAgentMetaGrid strong,
+.taskforceAgentMetaGrid code {
+  color: var(--text-primary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
 }
 
 .marginTop24 {
@@ -5085,22 +6525,56 @@
 
 .aiProfilesExplorer {
   display: grid;
-  grid-template-columns: 360px 620px;
-  gap: 16px;
-  align-items: start;
-  justify-content: start;
+  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+  align-items: stretch;
   min-height: 0;
-  width: fit-content;
-  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.aiProfilesRosterPanel {
+  min-width: 0;
+  min-height: 0;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  overflow: hidden;
+}
+
+.aiProfilesRosterSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 0 10px;
+  border-bottom: 1px solid var(--border-divider);
+  flex-shrink: 0;
+}
+
+.aiProfilesRosterSummary .aiProfileSeatSummary {
+  margin-bottom: 0;
+}
+
+.aiProfilesRosterState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 96px;
+  padding: 20px 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-align: center;
 }
 
 .aiProfilesListPane {
+  flex: 1;
   min-width: 0;
-  max-height: min(72vh, calc(100vh - 250px));
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
-  padding-right: 8px;
   scrollbar-gutter: stable;
   --tf-scrollbar-size: 8px;
   --tf-scrollbar-thumb-border: 1px;
@@ -5111,6 +6585,14 @@
   flex-direction: column;
   gap: 16px;
   min-width: 0;
+  padding: 12px 0 16px;
+}
+
+.aiProfilesDetailViewport {
+  min-width: 0;
+  min-height: 0;
+  padding: 24px 28px;
+  overflow: auto;
 }
 
 .aiProfilesSection {
@@ -5152,10 +6634,8 @@
 
 .aiProfileGroupSelected {
   border-color: var(--agent-card-selected-border, rgba(96, 165, 250, 0.5));
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 10%, transparent), color-mix(in srgb, var(--status-info, #3b82f6) 4%, transparent)),
-    var(--agent-card-selected-bg, rgba(255, 255, 255, 0.04));
-  box-shadow: var(--agent-card-selected-shadow, inset 0 0 0 1px rgba(96, 165, 250, 0.16));
+  background: var(--agent-card-bg, rgba(255, 255, 255, 0.02));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent-card-selected-border, var(--brand-primary)) 16%, transparent);
   transform: none;
 }
 
@@ -5194,6 +6674,18 @@
   object-fit: cover;
 }
 
+.aiProfileGroupAvatarLogo {
+  border-radius: 12px;
+  padding: 0;
+  border: 0;
+  background: var(--surface-elevated, var(--surface-panel));
+}
+
+.aiProfileGroupAvatarLogo img {
+  object-fit: contain;
+  border-radius: inherit;
+}
+
 .aiProfileGroupIdentity {
   min-width: 0;
   display: flex;
@@ -5243,6 +6735,12 @@
   opacity: 0.86;
 }
 
+.aiProfileGroupSignatureSwatch {
+  position: absolute;
+  right: 16px;
+  bottom: 10px;
+}
+
 .aiProfileSeatScopeIconDetail {
   top: 18px;
   right: 18px;
@@ -5322,8 +6820,9 @@
 }
 
 .aiProfileDetailCard {
-  width: 620px;
+  width: min(620px, 100%);
   min-width: 0;
+  box-sizing: border-box;
   border: 1px solid var(--agent-detail-border, var(--border-primary, rgba(255, 255, 255, 0.08)));
   border-radius: var(--radius-md);
   padding: 16px;
@@ -5357,6 +6856,24 @@
   flex: 0 0 auto;
 }
 
+.aiProfileDetailAvatar.aiProfileDetailAvatarLogo {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.aiProfileDetailAvatar.aiProfileDetailAvatarLogo:hover:not(:disabled) {
+  border-color: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+.aiProfileDetailAvatarLogo img {
+  object-fit: contain;
+  border-radius: inherit;
+}
+
 .aiProfileDetailHeading {
   min-width: 0;
   flex: 1;
@@ -5419,7 +6936,8 @@
   line-height: 1.3;
 }
 
-.aiProfileSignatureSwatch {
+.aiProfileSignatureSwatch,
+.aiProfileGroupSignatureSwatch {
   width: 12px;
   height: 12px;
   border-radius: 3px;
@@ -5429,6 +6947,54 @@
     0 2px 6px rgba(0, 0, 0, 0.22);
 }
 
+.aiProfileGroupSignatureSwatch {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  box-shadow: none;
+}
+
+.aiProfileSignatureColorButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 3px 6px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.aiProfileSignatureColorButton:hover:not(:disabled),
+.aiProfileSignatureColorButton:focus-visible {
+  border-color: var(--border-primary);
+  background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+}
+
+.aiProfileColorPicker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+  margin-top: 8px;
+}
+
+.aiProfileColorOption {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 2px solid var(--surface-primary, #fff);
+  border-radius: 7px;
+  box-shadow: 0 0 0 1px var(--border-primary);
+  cursor: pointer;
+}
+
+.aiProfileColorOption[aria-pressed='true'] {
+  box-shadow: 0 0 0 2px var(--text-primary);
+}
+
 .aiProfileDetailDataList {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -5627,9 +7193,9 @@
   display: flex;
   align-items: flex-start;
   gap: 6px;
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  background: rgba(127, 29, 29, 0.14);
-  color: #fecaca;
+  border: 1px solid color-mix(in srgb, var(--status-error) 35%, transparent);
+  background: var(--status-error-bg);
+  color: var(--status-error);
   border-radius: 10px;
   padding: 8px 10px;
   font-size: 12px;
@@ -5637,22 +7203,25 @@
 }
 
 @media (max-width: 1100px) {
-  .agentsModuleRoot {
-    padding: 20px;
-  }
-
-  .agentsModuleContent {
-    width: 100%;
+  .taskforceAgentTestGrid {
+    grid-template-columns: minmax(0, 1fr);
   }
 
   .aiProfilesExplorer {
     grid-template-columns: minmax(0, 1fr);
-    width: 100%;
+    overflow-y: auto;
   }
 
-  .aiProfilesListPane {
-    max-height: min(52vh, 420px);
-    padding-right: 2px;
+  .aiProfilesRosterPanel {
+    max-height: min(50vh, 440px);
+    border-right: 0;
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  .aiProfilesDetailViewport {
+    min-height: max-content;
+    padding: 20px;
+    overflow: visible;
   }
 
   .aiProfileDetailPane {
@@ -5664,7 +7233,21 @@
   }
 }
 
+@media (max-width: 760px) {
+  .taskforceAgentBehaviorGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .taskforceAgentBehaviorWide {
+    grid-column: auto;
+  }
+}
+
 @media (max-width: 640px) {
+  .taskforceAgentsModuleTrayOpen .taskforceAgentsModuleMain {
+    margin-left: 0;
+  }
+
   .aiProfileDetailDataList {
     grid-template-columns: 1fr;
   }