noteconnection 1.7.0 → 1.9.0

package/dist/src/frontend/styles.css

@@ -697,6 +697,30 @@ div.tooltip {
   overflow: hidden;
 }
 
+.settings-modal-overlay {
+  align-items: flex-start;
+  overflow-y: auto;
+  padding: 24px 16px;
+  box-sizing: border-box;
+}
+
+.modal-content-settings {
+  width: min(680px, 92vw);
+  max-width: 680px;
+  max-height: min(88vh, 860px);
+  margin: auto;
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(44, 51, 63, 0.98), rgba(28, 33, 42, 0.98));
+  border: 1px solid rgba(140, 156, 176, 0.22);
+  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.45);
+}
+
+.modal-content-agent-settings {
+  width: min(760px, 94vw);
+  max-width: 760px;
+}
+
 .modal-header {
   padding: 15px;
   background: #333;
@@ -729,6 +753,78 @@ div.tooltip {
   color: #e0e0e0;
 }
 
+.settings-modal-body {
+  padding: 16px 18px 18px;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.settings-modal-subtitle {
+  margin: 6px 0 0;
+  color: #a8b4c3;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  max-width: 54ch;
+}
+
+.settings-page-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 14px;
+  align-content: start;
+}
+
+.settings-page-grid-single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.settings-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  padding: 14px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
+}
+
+.settings-card-accent {
+  background:
+    linear-gradient(180deg, rgba(97, 218, 251, 0.06), rgba(116, 66, 16, 0.08)),
+    rgba(255, 255, 255, 0.03);
+  border-color: rgba(97, 218, 251, 0.14);
+}
+
+.settings-card-wide {
+  min-width: 0;
+}
+
+.settings-card-callout {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.settings-card-kicker {
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #8ecae6;
+}
+
+.settings-card-title {
+  margin: 0;
+  font-size: 1.08rem;
+  color: #f7fbff;
+}
+
+.settings-card-copy {
+  margin: 0;
+  color: #b8c2cf;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
 .settings-group {
   margin-bottom: 20px;
 }
@@ -742,12 +838,17 @@ div.tooltip {
   padding-bottom: 5px;
 }
 
+.settings-card .settings-group:last-child {
+  margin-bottom: 0;
+}
+
 .setting-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
   font-size: 0.9rem;
+  gap: 12px;
 }
 
 .setting-item label {
@@ -766,6 +867,43 @@ div.tooltip {
   color: #61dafb;
 }
 
+.setting-item-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.setting-item-stack > label {
+  flex: none;
+}
+
+.settings-toggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.settings-select,
+.settings-text-input,
+.settings-number {
+  width: 100%;
+  background: rgba(14, 18, 24, 0.86);
+  color: #f8fbff;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 10px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+}
+
+.settings-number {
+  width: 72px;
+}
+
+.settings-select-grow {
+  flex: 1 1 220px;
+}
+
 .modal-footer {
   padding: 15px;
   background: #333;
@@ -775,6 +913,22 @@ div.tooltip {
   gap: 10px;
 }
 
+.modal-footer-settings {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background: rgba(33, 39, 49, 0.98);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.settings-breadcrumb-row {
+  margin-bottom: 10px;
+}
+
+.btn-inline-nav {
+  padding-inline: 10px;
+}
+
 .btn {
   padding: 6px 12px;
   border-radius: 4px;
@@ -879,6 +1033,7 @@ div.tooltip {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-height: 0;
   transition: all 0.3s ease;
 }
 
@@ -944,6 +1099,76 @@ div.tooltip {
   font-family: "Segoe UI", sans-serif;
   line-height: 1.6;
   flex: 1;
+  min-height: 0;
+}
+
+.reading-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.reading-main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.reading-diagnostics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 18px 0;
+  flex-shrink: 0;
+}
+
+.reading-diagnostics-item {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(60, 60, 60, 0.9);
+  color: #cfd8e3;
+  font-size: 0.78rem;
+}
+
+.reading-outline {
+  width: 240px;
+  min-width: 200px;
+  max-width: 280px;
+  border-left: 1px solid #333;
+  background: rgba(20, 20, 20, 0.82);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+}
+
+.reading-outline-header {
+  padding: 14px 16px 10px;
+  color: #8ddcff;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border-bottom: 1px solid #2e2e2e;
+}
+
+.reading-outline-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 12px 14px;
+}
+
+.reading-outline-empty {
+  color: #8c99a7;
+  font-size: 0.82rem;
+  line-height: 1.5;
 }
 
 /* Content Styling */
@@ -1080,89 +1305,2606 @@ div.tooltip {
   background: #9b2c2c;
 }
 
-/* --- Mobile Responsiveness (v0.9.2) --- */
-@media (max-width: 768px) {
-  .notemd-embed-shell {
-    width: 100vw;
-    height: 100vh;
-    border-radius: 0;
-    border: none;
-  }
+.mermaid-render-failed {
+  border-style: dashed;
+  border-color: rgba(245, 158, 11, 0.65);
+  background: rgba(36, 22, 6, 0.92);
+}
 
-  .notemd-embed-header {
-    height: 52px;
-    padding: 0 10px;
-  }
+.mermaid-render-notice {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: #f5f0e6;
+  font-size: 0.92rem;
+}
 
-  .notemd-embed-close {
-    padding: 6px 10px;
-  }
+.mermaid-render-notice-title {
+  font-weight: 700;
+  color: #f6c453;
+}
 
-  .notemd-embed-frame {
-    height: calc(100% - 52px);
-  }
+.mermaid-render-notice-summary {
+  color: #d6ccb8;
+  line-height: 1.4;
+}
 
-  /* 1. Main Controls: Collapsible or Compact */
-  #controls {
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
-    padding: 0;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-    background: rgba(45, 45, 45, 0.95)
-      url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>')
-      no-repeat center;
-    background-size: 24px;
-    cursor: pointer;
-  }
+.mermaid-render-notice-details {
+  color: #cfc6b4;
+}
 
-  #controls.expanded {
-    width: 85%;
-    height: auto;
-    max-height: 80vh;
-    overflow-y: auto;
-    border-radius: 8px;
-    padding: 15px;
-    background: rgba(45, 45, 45, 0.98);
-  }
+.mermaid-render-notice-details summary {
+  cursor: pointer;
+  color: #f0d899;
+}
 
-  /* Hide internal elements when collapsed */
-  #controls:not(.expanded) > * {
-    opacity: 0;
-    pointer-events: none;
-  }
+.mermaid-render-notice-code {
+  margin: 8px 0 0;
+  max-height: 180px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.8rem;
+  line-height: 1.45;
+  padding: 10px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
 
-  /* 2. Focus Mode Controls */
-  #focus-exit-btn {
-    top: auto;
-    bottom: 20px; /* Move to bottom for easier thumb reach */
-    width: 90%;
-    left: 50%;
-    flex-direction: column;
-    gap: 10px;
-    padding: 15px;
-  }
+.mermaid-inline-guard {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 10px 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px dashed rgba(245, 158, 11, 0.55);
+  background: rgba(34, 24, 10, 0.88);
+  color: #f3e7d3;
+}
 
-  #focus-exit-btn span {
-    font-size: 1.1rem;
-    text-align: center;
-  }
+.mermaid-inline-guard-title {
+  font-weight: 700;
+  color: #f6c453;
+}
 
-  #focus-exit-btn div {
-    width: 100%;
-    justify-content: space-between;
-  }
+.mermaid-inline-guard-summary {
+  font-size: 0.86rem;
+  line-height: 1.4;
+  color: #e2d1b5;
+}
 
-  #focus-exit-btn button {
-    width: 100%;
-    padding: 10px;
-  }
+.mermaid-inline-guard-detail {
+  font-size: 0.78rem;
+  line-height: 1.35;
+  color: #c9bea8;
+  word-break: break-word;
+}
 
-  /* 3. Reading Window */
-  .reading-box.window-mode {
-    width: 95%;
-    height: 90%;
+.mermaid-error-toast-stack {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 3400;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-end;
+  pointer-events: none;
+}
+
+.mermaid-error-toast {
+  width: min(420px, calc(100vw - 32px));
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(245, 158, 11, 0.42);
+  background: rgba(17, 12, 6, 0.94);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  color: #f4ead7;
+  pointer-events: none;
+}
+
+.mermaid-error-toast-title {
+  font-weight: 700;
+  color: #f6c453;
+  margin-bottom: 4px;
+}
+
+.mermaid-error-toast-summary {
+  font-size: 0.84rem;
+  color: #e4d6ba;
+  line-height: 1.35;
+}
+
+.mermaid-error-toast-detail {
+  margin-top: 6px;
+  font-size: 0.74rem;
+  color: #cdbfa6;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.settings-inline-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.settings-helper-block {
+  margin-top: 8px;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  color: #aeb7c3;
+}
+
+.settings-helper-code {
+  font-family: Consolas, "Courier New", monospace;
+  color: #d4dee8;
+  word-break: break-all;
+}
+
+.agent-workspace-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(5, 7, 11, 0.58);
+  backdrop-filter: blur(4px);
+  z-index: 2590;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.24s ease;
+}
+
+.agent-workspace-drawer {
+  position: fixed;
+  top: 14px;
+  right: 14px;
+  bottom: 14px;
+  width: min(1100px, calc(100vw - 28px));
+  transform: translateX(calc(100% + 24px));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform 0.26s ease,
+    opacity 0.22s ease;
+  z-index: 2600;
+}
+
+body.agent-workspace-open .agent-workspace-backdrop {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+body.agent-workspace-open .agent-workspace-drawer {
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.agent-workspace-drawer-frame {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border-radius: 18px;
+  overflow: hidden;
+  background: rgba(11, 15, 21, 0.98);
+  border: 1px solid rgba(97, 218, 251, 0.16);
+  box-shadow:
+    0 18px 48px rgba(0, 0, 0, 0.42),
+    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+}
+
+.agent-workspace-drawer-toolbar {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(135deg, rgba(116, 66, 16, 0.28), rgba(44, 82, 130, 0.22)),
+    rgba(8, 11, 16, 0.92);
+}
+
+.agent-workspace-drawer-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.agent-workspace-drawer-title {
+  color: #f7fafc;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.agent-workspace-drawer-subtitle {
+  color: #aeb9c6;
+  font-size: 0.82rem;
+}
+
+.agent-workspace-drawer-close {
+  justify-self: end;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  color: #edf2f7;
+  border-radius: 999px;
+  padding: 8px 14px;
+  cursor: pointer;
+}
+
+.agent-workspace-shell {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
+  gap: 16px;
+  padding: 16px;
+  align-content: start;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.agent-chat-pane,
+.agent-side-work-area,
+.agent-workspace-pane {
+  min-height: 0;
+}
+
+.agent-chat-pane,
+.agent-workspace-pane {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+}
+
+.agent-chat-pane {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 142px);
+  padding: 16px;
+  gap: 12px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.agent-chat-pane > * {
+  flex-shrink: 0;
+}
+
+.agent-pane-header,
+.agent-workspace-pane-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.agent-pane-header h3,
+.agent-workspace-pane-header h4 {
+  margin: 0;
+  color: #f8fbff;
+}
+
+.agent-pane-subtitle {
+  color: #a6b4c3;
+  font-size: 0.82rem;
+}
+
+.agent-pane-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agent-scope-control,
+.agent-pane-field,
+.agent-pane-actions,
+.agent-api-status {
+  flex: 0 0 auto;
+}
+
+.agent-scope-control {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.92);
+  backdrop-filter: blur(8px);
+}
+
+.agent-scope-control--toolbar {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 6px 10px;
+  min-width: 0;
+  padding: 8px 10px;
+  background: rgba(2, 6, 12, 0.5);
+}
+
+.agent-scope-control--workspace {
+  grid-template-columns: minmax(94px, auto) minmax(0, 1fr);
+  align-items: center;
+  gap: 6px 10px;
+}
+
+.agent-scope-control label {
+  color: #dbeafe;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.agent-scope-control select {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid rgba(125, 211, 252, 0.22);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.82);
+  color: #f8fbff;
+  padding: 9px 10px;
+  box-sizing: border-box;
+}
+
+.agent-scope-control--toolbar select {
+  min-height: 38px;
+  padding: 7px 9px;
+}
+
+.agent-scope-summary {
+  min-height: 18px;
+  color: #93c5fd;
+  font-size: 0.78rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.agent-scope-control--toolbar .agent-scope-summary {
+  grid-column: 1 / -1;
+  min-height: 16px;
+  font-size: 0.74rem;
+}
+
+.agent-scope-control--workspace .agent-scope-summary {
+  grid-column: 2;
+}
+
+.agent-answer-language-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0 12px;
+  color: var(--text-secondary, #9aa4b2);
+  font-size: 0.78rem;
+}
+
+.agent-answer-language-control select {
+  min-width: 108px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle, #3d4652);
+  border-radius: 4px;
+  background: var(--surface-input, #1c232d);
+  color: var(--text-primary, #e8edf3);
+}
+
+.agent-answer-language-summary {
+  color: var(--text-muted, #758195);
+}
+
+.agent-response-mode-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0 12px;
+  color: var(--text-secondary, #9aa4b2);
+  font-size: 0.78rem;
+}
+
+.agent-response-mode-control select {
+  min-width: 112px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle, #3d4652);
+  border-radius: 4px;
+  background: var(--surface-input, #1c232d);
+  color: var(--text-primary, #e8edf3);
+}
+
+.agent-response-mode-summary {
+  color: var(--text-muted, #758195);
+  overflow-wrap: anywhere;
+}
+
+.agent-response-budget-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0 12px;
+  color: var(--text-secondary, #9aa4b2);
+  font-size: 0.78rem;
+}
+
+.agent-response-budget-control select {
+  min-width: 132px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-subtle, #3d4652);
+  border-radius: 4px;
+  background: var(--surface-input, #1c232d);
+  color: var(--text-primary, #e8edf3);
+}
+
+.agent-response-budget-summary {
+  color: var(--text-muted, #758195);
+  overflow-wrap: anywhere;
+}
+
+.agent-chat-structured-answer-next-actions-toggle {
+  width: 26px;
+  height: 26px;
+  min-width: 26px;
+  margin: 8px 0 0 auto;
+  padding: 0;
+  border: 1px solid var(--border-subtle, #3d4652);
+  border-radius: 50%;
+  background: var(--surface-raised, #252e3a);
+  color: var(--text-primary, #e8edf3);
+  cursor: pointer;
+  line-height: 24px;
+  text-align: center;
+}
+
+.agent-chat-structured-answer-next-actions-toggle:hover,
+.agent-chat-structured-answer-next-actions-toggle:focus-visible {
+  border-color: var(--accent, #6ea8fe);
+  outline: none;
+}
+
+.agent-chat-structured-answer-next-actions {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-subtle, #3d4652);
+}
+
+.agent-pane-field label {
+  color: #cbd5e1;
+  font-size: 0.84rem;
+}
+
+.agent-pane-field input,
+.agent-pane-field textarea {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(2, 6, 12, 0.66);
+  color: #edf2f7;
+  padding: 10px 12px;
+  box-sizing: border-box;
+}
+
+.agent-pane-field textarea {
+  resize: vertical;
+  min-height: 92px;
+}
+
+.agent-pane-actions,
+.agent-pane-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.agent-pane-actions button,
+.agent-pane-controls button,
+#btn-agent-workspace-send,
+#btn-open-agent-workspace {
+  min-height: 44px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+.agent-pane-controls button {
+  background: rgba(2, 6, 12, 0.52);
+  color: #dbeafe;
+  padding: 8px 12px;
+}
+
+.agent-pane-controls button:hover,
+.agent-pane-controls button:focus-visible {
+  border-color: rgba(125, 211, 252, 0.42);
+  background: rgba(14, 116, 144, 0.2);
+  outline: 2px solid rgba(125, 211, 252, 0.34);
+  outline-offset: 2px;
+}
+
+.agent-pane-close-button {
+  width: 44px;
+  padding: 0;
+  border-radius: 999px;
+  font-size: 1.15rem;
+  line-height: 1;
+}
+
+#btn-agent-workspace-send {
+  background: linear-gradient(135deg, #2c5282, #744210);
+  color: #fff8ed;
+  padding: 10px 14px;
+}
+
+.agent-api-status {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.46);
+  color: #cbd5e1;
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+
+.agent-api-status-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: #94a3b8;
+}
+
+.agent-api-status-label {
+  color: #f8fbff;
+  font-weight: 700;
+}
+
+.agent-api-status-detail {
+  min-width: 0;
+  color: #9fb0c2;
+  overflow-wrap: anywhere;
+}
+
+.agent-api-status[data-api-state="pending"] .agent-api-status-dot {
+  background: #facc15;
+}
+
+.agent-api-status[data-api-state="ok"] .agent-api-status-dot {
+  background: #22c55e;
+}
+
+.agent-api-status[data-api-state="error"] {
+  border-color: rgba(248, 113, 113, 0.34);
+}
+
+.agent-api-status[data-api-state="error"] .agent-api-status-dot {
+  background: #f87171;
+}
+
+.agent-chat-messages,
+.agent-knowledge-points,
+.agent-workspace-pane-body {
+  min-height: 0;
+  overflow: auto;
+}
+
+.agent-chat-messages {
+  /* The transcript owns spare height even when optional controls are inserted. */
+  flex: 1 0 240px;
+  min-height: 128px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-right: 6px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.agent-chat-message {
+  padding: 10px 12px;
+  border-radius: 14px;
+  line-height: 1.48;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.agent-chat-message-rendered {
+  white-space: normal;
+}
+
+.agent-chat-message-user {
+  align-self: flex-end;
+  max-width: 92%;
+  background: rgba(44, 82, 130, 0.34);
+  color: #e2e8f0;
+}
+
+.agent-chat-message-assistant,
+.agent-chat-message-system {
+  align-self: stretch;
+  background: rgba(255, 255, 255, 0.04);
+  color: #edf2f7;
+}
+
+.agent-chat-render-block + .agent-chat-render-block {
+  margin-top: 12px;
+}
+
+.agent-chat-markdown {
+  color: #edf2f7;
+  line-height: 1.62;
+  white-space: normal;
+}
+
+.agent-chat-markdown > :first-child {
+  margin-top: 0;
+}
+
+.agent-chat-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.agent-chat-markdown p {
+  margin: 0.85rem 0;
+}
+
+.agent-chat-markdown ul,
+.agent-chat-markdown ol {
+  margin: 0.85rem 0;
+  padding-left: 1.4rem;
+}
+
+.agent-chat-markdown li + li {
+  margin-top: 0.3rem;
+}
+
+.agent-chat-markdown pre {
+  margin: 0.85rem 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: rgba(8, 12, 18, 0.92);
+  overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.agent-chat-markdown code {
+  font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
+}
+
+.agent-chat-markdown p code,
+.agent-chat-markdown li code,
+.agent-chat-markdown td code {
+  padding: 2px 6px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.agent-chat-markdown blockquote {
+  margin: 0.95rem 0;
+  padding: 0.7rem 0.95rem;
+  border-left: 3px solid rgba(97, 218, 251, 0.48);
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 0 10px 10px 0;
+  color: #d8e2eb;
+}
+
+.agent-chat-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.92rem;
+}
+
+.agent-chat-markdown th,
+.agent-chat-markdown td {
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: left;
+  vertical-align: top;
+}
+
+.agent-chat-markdown th {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.agent-chat-markdown img {
+  max-width: 100%;
+  border-radius: 10px;
+}
+
+.agent-chat-inline-card,
+.agent-chat-inline-artifact {
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 12, 18, 0.86);
+  padding: 12px 14px;
+}
+
+.agent-chat-inline-card-title,
+.agent-chat-inline-artifact-title {
+  font-weight: 700;
+  color: #f8fbff;
+}
+
+.agent-chat-inline-card-summary,
+.agent-chat-inline-artifact-summary {
+  margin-top: 6px;
+  color: #c3cfdb;
+}
+
+.agent-chat-structured-answer-card {
+  display: grid;
+  gap: 12px;
+  background:
+    linear-gradient(180deg, rgba(18, 26, 38, 0.94) 0%, rgba(8, 12, 18, 0.88) 100%);
+  border-color: rgba(143, 226, 247, 0.18);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.agent-chat-structured-answer-direct {
+  margin-top: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background:
+    linear-gradient(135deg, rgba(14, 116, 144, 0.22) 0%, rgba(30, 41, 59, 0.18) 100%);
+  border: 1px solid rgba(125, 211, 252, 0.22);
+  color: #f8fbff;
+  font-size: 0.96rem;
+  line-height: 1.62;
+  font-weight: 600;
+}
+
+.agent-chat-structured-answer-section {
+  margin-top: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.agent-chat-structured-answer-section h1,
+.agent-chat-structured-answer-section h2,
+.agent-chat-structured-answer-section h3 {
+  margin-top: 0;
+}
+
+.agent-chat-structured-answer-section > :last-child {
+  margin-bottom: 0;
+}
+
+.agent-chat-structured-answer-overview {
+  border-left: 3px solid rgba(148, 163, 184, 0.7);
+}
+
+.agent-chat-structured-answer-explanation {
+  border-left: 3px solid rgba(125, 211, 252, 0.78);
+  background:
+    linear-gradient(180deg, rgba(14, 116, 144, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
+}
+
+.agent-chat-structured-answer-evidence {
+  border-left: 3px solid rgba(34, 197, 94, 0.78);
+  background:
+    linear-gradient(180deg, rgba(21, 128, 61, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
+}
+
+.agent-chat-structured-answer-next-actions {
+  border-left: 3px solid rgba(245, 158, 11, 0.82);
+  background:
+    linear-gradient(180deg, rgba(146, 64, 14, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
+}
+
+.agent-chat-inline-card-list {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.agent-chat-inline-card-item {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.agent-chat-inline-card-item-title {
+  font-weight: 600;
+  color: #eef4fb;
+}
+
+.agent-chat-inline-artifact-details {
+  margin-top: 10px;
+}
+
+.agent-chat-inline-artifact-details summary {
+  cursor: pointer;
+  color: #8fe2f7;
+}
+
+.agent-chat-inline-artifact-frame {
+  width: 100%;
+  min-height: 280px;
+  margin-top: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.agent-chat-message-card {
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+.agent-chat-card,
+.agent-pane-block {
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(10, 14, 20, 0.88);
+  padding: 14px;
+}
+
+.agent-chat-card-title,
+.agent-pane-title {
+  font-weight: 700;
+  color: #f8fbff;
+}
+
+.agent-chat-card-summary,
+.agent-pane-summary,
+.agent-pane-meta,
+.agent-chat-card-list-meta {
+  color: #c3cfdb;
+}
+
+.agent-chat-card-section-title {
+  margin-top: 12px;
+  margin-bottom: 8px;
+  color: #e5ecf4;
+  font-weight: 600;
+}
+
+.agent-pane-section-title {
+  margin-top: 12px;
+  margin-bottom: 8px;
+  color: #e5ecf4;
+  font-weight: 600;
+}
+
+.agent-chat-card-list,
+.agent-pane-list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.agent-chat-card-list-item,
+.agent-pane-list-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.agent-pane-list-index {
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(97, 218, 251, 0.12);
+  color: #8fe2f7;
+  font-size: 0.8rem;
+}
+
+.agent-knowledge-points {
+  min-height: 0;
+  max-height: min(200px, 24vh);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-right: 6px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.agent-chat-input-field textarea {
+  min-height: 76px;
+  max-height: min(150px, 22vh);
+}
+
+.agent-knowledge-list-header {
+  flex: 0 0 auto;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 44px;
+  padding: 2px 0 6px;
+  background: #111820;
+}
+
+.agent-knowledge-list-title {
+  color: #dbeafe;
+  font-size: 0.82rem;
+  font-weight: 800;
+}
+
+.agent-knowledge-help {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.agent-knowledge-help-button {
+  width: 44px;
+  min-height: 44px;
+  border: 1px solid rgba(125, 211, 252, 0.26);
+  border-radius: 999px;
+  background: rgba(2, 6, 12, 0.64);
+  color: #bae6fd;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.agent-knowledge-help-button:hover,
+.agent-knowledge-help-button:focus-visible,
+.agent-knowledge-help[data-open="true"] .agent-knowledge-help-button {
+  border-color: rgba(125, 211, 252, 0.58);
+  background: rgba(14, 116, 144, 0.26);
+  outline: 2px solid rgba(125, 211, 252, 0.36);
+  outline-offset: 2px;
+}
+
+.agent-knowledge-help-popover {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  z-index: 10;
+  width: min(320px, 70vw);
+  padding: 10px 12px;
+  border: 1px solid rgba(125, 211, 252, 0.26);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.96);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
+  color: #dbeafe;
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.agent-knowledge-help-popover[hidden] {
+  display: none !important;
+}
+
+.agent-knowledge-card {
+  position: relative;
+  padding: 0;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.42);
+  overflow: visible;
+}
+
+.agent-knowledge-card-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 44px;
+  align-items: stretch;
+  gap: 4px;
+}
+
+.agent-knowledge-file-button {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #f8fbff;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.35;
+  padding: 10px 12px;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.agent-knowledge-menu-button {
+  width: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #bae6fd;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.agent-knowledge-card[data-selected="true"] .agent-knowledge-file-button,
+.agent-knowledge-card[data-selected="true"] .agent-knowledge-menu-button,
+.agent-knowledge-file-button:hover,
+.agent-knowledge-file-button:focus-visible,
+.agent-knowledge-file-button[aria-expanded="true"],
+.agent-knowledge-menu-button:hover,
+.agent-knowledge-menu-button:focus-visible,
+.agent-knowledge-menu-button[aria-expanded="true"] {
+  background: rgba(125, 211, 252, 0.1);
+  outline: 1px solid rgba(125, 211, 252, 0.28);
+  outline-offset: -1px;
+}
+
+.agent-knowledge-source-path {
+  display: none;
+  padding: 0 12px 10px;
+  color: #93a4b8;
+  font-size: 0.76rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.agent-knowledge-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  padding: 0 8px 8px;
+}
+
+.agent-knowledge-actions .agent-knowledge-action-button {
+  min-width: 0;
+  min-height: 44px;
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.52);
+  color: #c7e8ff;
+  cursor: pointer;
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1.2;
+  padding: 8px 10px;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.agent-knowledge-actions .agent-knowledge-action-button:hover,
+.agent-knowledge-actions .agent-knowledge-action-button:focus-visible {
+  background: rgba(14, 116, 144, 0.2);
+  border-color: rgba(125, 211, 252, 0.38);
+  outline: 2px solid rgba(125, 211, 252, 0.28);
+  outline-offset: 1px;
+}
+
+.agent-knowledge-actions .agent-knowledge-action-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+.agent-knowledge-action-menu {
+  position: absolute;
+  right: 8px;
+  top: calc(100% - 4px);
+  z-index: 6;
+  display: grid;
+  gap: 6px;
+  min-width: 172px;
+  padding: 8px;
+  border: 1px solid rgba(125, 211, 252, 0.26);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.96);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
+}
+
+.agent-knowledge-action-menu[hidden] {
+  display: none !important;
+}
+
+.agent-knowledge-action-menu button {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.74);
+  color: #dbeafe;
+  cursor: pointer;
+  padding: 8px 10px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.agent-knowledge-action-menu button:hover,
+.agent-knowledge-action-menu button:focus-visible {
+  background: rgba(14, 116, 144, 0.22);
+  border-color: rgba(125, 211, 252, 0.38);
+}
+
+.agent-knowledge-action-menu button:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+.agent-knowledge-preview[hidden] {
+  display: none !important;
+}
+
+.agent-knowledge-preview {
+  padding: 0 12px 12px;
+}
+
+.agent-knowledge-rendered-markdown,
+.agent-knowledge-preview-loading,
+.agent-knowledge-preview-fallback {
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.46);
+  padding: 12px;
+}
+
+.agent-knowledge-rendered-markdown {
+  color: #dbe7f3;
+  font-size: 0.88rem;
+  line-height: 1.6;
+}
+
+.agent-knowledge-rendered-markdown :is(h1, h2, h3, h4, h5, h6) {
+  color: #f8fbff;
+}
+
+.agent-knowledge-preview-loading,
+.agent-knowledge-preview-fallback {
+  color: #cbd5e1;
+  font-size: 0.84rem;
+  line-height: 1.55;
+}
+
+.agent-knowledge-preview-fallback-text {
+  color: #dbe7f3;
+}
+
+.agent-knowledge-preview-path {
+  margin-top: 8px;
+  color: #93a4b8;
+  font-size: 0.76rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.agent-knowledge-empty,
+.agent-pane-empty {
+  padding: 14px;
+  border-radius: 12px;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  color: #a9b6c4;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.agent-knowledge-hit-list {
+  margin-top: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.agent-knowledge-hit-heading {
+  color: #cbd5e1;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.agent-knowledge-hit {
+  padding: 8px 10px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.46);
+}
+
+.agent-knowledge-hit-title {
+  color: #f8fbff;
+  font-size: 0.84rem;
+  font-weight: 700;
+}
+
+.agent-knowledge-hit-snippet {
+  margin-top: 4px;
+  color: #dbe7f3;
+  font-size: 0.82rem;
+  line-height: 1.48;
+}
+
+.agent-knowledge-hit-meta {
+  margin-top: 5px;
+  color: #93a4b8;
+  font-size: 0.76rem;
+  line-height: 1.35;
+}
+
+.agent-focus-hit-list {
+  margin-top: 14px;
+  display: grid;
+  gap: 10px;
+}
+
+.agent-focus-hit-heading {
+  color: #dbeafe;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.agent-focus-relation-map {
+  display: grid;
+  gap: 8px;
+  border: 1px solid rgba(125, 211, 252, 0.18);
+  border-radius: 8px;
+  background: rgba(14, 116, 144, 0.1);
+  padding: 10px 12px;
+}
+
+.agent-focus-relation-map--focus-mode {
+  gap: 0;
+  border-color: rgba(148, 163, 184, 0.16);
+  background: transparent;
+  padding: 0;
+}
+
+.agent-focus-relation-map--focus-mode .agent-focus-mode-preview {
+  min-height: min(72vh, 760px);
+}
+
+.agent-focus-relation-kinds {
+  color: #93c5fd;
+  font-size: 0.76rem;
+  line-height: 1.35;
+}
+
+.agent-focus-relation-graph {
+  position: relative;
+  min-height: 220px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.34);
+}
+
+.agent-focus-relation-graph-lines {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.agent-focus-relation-graph-edge {
+  stroke: rgba(125, 211, 252, 0.42);
+  stroke-width: 0.9;
+  vector-effect: non-scaling-stroke;
+}
+
+.agent-focus-relation-graph-lines marker path {
+  fill: rgba(125, 211, 252, 0.72);
+}
+
+.agent-focus-relation-graph-node {
+  position: absolute;
+  max-width: min(38%, 190px);
+  transform: translate(-50%, -50%);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.96);
+  color: #dbeafe;
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1.25;
+  padding: 7px 9px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.agent-focus-relation-graph-node--anchor {
+  border-color: rgba(251, 191, 36, 0.62);
+  background: rgba(120, 53, 15, 0.88);
+  color: #fef3c7;
+}
+
+.agent-focus-relation-graph-node--source {
+  border-color: rgba(45, 212, 191, 0.44);
+}
+
+.agent-focus-relation-graph-node--target {
+  border-color: rgba(248, 113, 113, 0.44);
+}
+
+.agent-focus-relation-graph-node--incoming {
+  border-color: rgba(45, 212, 191, 0.44);
+}
+
+.agent-focus-relation-graph-node--outgoing {
+  border-color: rgba(248, 113, 113, 0.44);
+}
+
+.agent-focus-relation-graph-node--related {
+  border-color: rgba(147, 197, 253, 0.34);
+}
+
+.agent-focus-mode-preview {
+  position: relative;
+  min-height: 320px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: #202020;
+  isolation: isolate;
+}
+
+.agent-focus-mode-preview--hosted {
+  border: 0;
+  border-radius: 0;
+}
+
+.agent-focus-mode-hosted-shell {
+  position: relative;
+  min-height: min(58vh, 640px);
+  overflow: hidden;
+  border-radius: 8px;
+  background: #202020;
+  isolation: isolate;
+}
+
+.agent-focus-mode-viewport {
+  position: relative;
+  min-height: min(58vh, 640px);
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+}
+
+.agent-focus-mode-viewport.is-panning {
+  cursor: grabbing;
+}
+
+.agent-focus-mode-viewport .agent-focus-mode-preview--hosted {
+  min-height: inherit;
+  height: 100%;
+  transform:
+    translate(var(--agent-focus-pan-x, 0px), var(--agent-focus-pan-y, 0px))
+    scale(var(--agent-focus-zoom, 1));
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+.agent-focus-mode-pane-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 12;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.72);
+  backdrop-filter: blur(8px);
+}
+
+.agent-focus-mode-icon-button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(125, 211, 252, 0.26);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.82);
+  color: #dbeafe;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.agent-focus-mode-icon-button:hover {
+  border-color: rgba(125, 211, 252, 0.54);
+  background: rgba(30, 64, 175, 0.58);
+}
+
+.agent-focus-mode-icon-button:focus {
+  outline: none;
+}
+
+.agent-focus-mode-icon-button:focus-visible {
+  outline: 2px solid rgba(125, 211, 252, 0.95);
+  outline-offset: 2px;
+}
+
+.agent-focus-mode-history-control {
+  position: relative;
+}
+
+.agent-focus-mode-history-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  display: grid;
+  gap: 2px;
+  width: min(220px, 54vw);
+  max-height: min(260px, 42vh);
+  overflow: auto;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.96);
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
+  padding: 6px;
+}
+
+.agent-focus-mode-history-menu[hidden] {
+  display: none;
+}
+
+.agent-focus-mode-history-item {
+  appearance: none;
+  min-width: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #dbeafe;
+  cursor: pointer;
+  font-size: 0.78rem;
+  font-weight: 750;
+  line-height: 1.25;
+  overflow: hidden;
+  padding: 7px 8px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-focus-mode-history-item:hover,
+.agent-focus-mode-history-item[data-agent-focus-history-current="true"] {
+  background: rgba(37, 99, 235, 0.28);
+}
+
+.agent-focus-mode-history-empty {
+  color: #94a3b8;
+  font-size: 0.76rem;
+  line-height: 1.35;
+  padding: 7px 8px;
+}
+
+.agent-focus-mode-context {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  opacity: 0.34;
+  filter: grayscale(0.4);
+}
+
+.agent-focus-mode-context-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  color: rgba(203, 213, 225, 0.32);
+  font-size: 0.72rem;
+  white-space: nowrap;
+}
+
+.agent-focus-mode-context-node--projection {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 190px;
+  color: rgba(203, 213, 225, 0.34);
+  font-size: 0.64rem;
+  line-height: 1.15;
+}
+
+.agent-focus-mode-context-dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.46);
+  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.12);
+}
+
+.agent-focus-mode-context-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-focus-mode-toolbar {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  top: 12px;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 52px;
+  border: 1px solid rgba(103, 232, 249, 0.36);
+  border-radius: 8px;
+  background: rgba(32, 32, 32, 0.82);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+  color: #dbeafe;
+  padding: 10px 14px;
+  pointer-events: none;
+}
+
+.agent-focus-mode-toolbar-node {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.agent-focus-mode-toolbar-title {
+  min-width: 0;
+  color: #61dafb;
+  font-size: 0.95rem;
+  font-weight: 900;
+  line-height: 1.18;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-focus-mode-toolbar-stats {
+  color: #aeb8c5;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.agent-focus-mode-toolbar-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.agent-focus-mode-toolbar-control {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 6px;
+  background: rgba(15, 23, 42, 0.48);
+  color: #cbd5e1;
+  font-size: 0.72rem;
+  font-weight: 750;
+  line-height: 1.2;
+  padding: 5px 8px;
+  white-space: nowrap;
+}
+
+.agent-focus-mode-lines {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.agent-focus-mode-preview--edge-hidden .agent-focus-mode-lines {
+  display: none;
+}
+
+.agent-focus-mode-edge {
+  stroke: rgba(226, 232, 240, 0.2);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.agent-focus-mode-edge--incoming {
+  stroke: rgba(248, 113, 113, 0.38);
+}
+
+.agent-focus-mode-edge--outgoing {
+  stroke: rgba(45, 212, 191, 0.4);
+}
+
+.agent-focus-mode-edge--associated {
+  stroke: rgba(203, 213, 225, 0.24);
+}
+
+.agent-focus-mode-cluster-label {
+  position: absolute;
+  left: 50%;
+  z-index: 3;
+  transform: translateX(-50%);
+  color: #67e8f9;
+  font-size: 1.02rem;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-shadow: 0 0 18px rgba(34, 211, 238, 0.24);
+  white-space: nowrap;
+}
+
+.agent-focus-mode-cluster-label--continue {
+  top: 10px;
+}
+
+.agent-focus-mode-cluster-label--support {
+  bottom: 14px;
+}
+
+.agent-focus-mode-cluster {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.agent-focus-mode-node {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: min(30%, 136px);
+  min-width: 44px;
+  min-height: 44px;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 999px;
+  color: #f8fbff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  line-height: 1.2;
+  padding: 6px 12px;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
+  overflow-wrap: anywhere;
+}
+
+button.agent-focus-mode-node {
+  appearance: none;
+  cursor: pointer;
+  pointer-events: auto;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    filter 180ms ease;
+}
+
+button.agent-focus-mode-node:hover {
+  filter: brightness(1.08);
+}
+
+button.agent-focus-mode-node:focus {
+  outline: none;
+}
+
+button.agent-focus-mode-node:focus-visible {
+  outline: 2px solid rgba(125, 211, 252, 0.95);
+  outline-offset: 3px;
+}
+
+button.agent-focus-mode-node:active {
+  filter: brightness(0.96);
+}
+
+.agent-focus-mode-node--anchor {
+  z-index: 4;
+  width: 78px;
+  min-height: 78px;
+  padding: 8px;
+  border-color: rgba(255, 255, 255, 0.9);
+  background: #ffd60a;
+  box-shadow:
+    0 0 0 18px rgba(255, 214, 10, 0.1),
+    0 0 0 36px rgba(255, 214, 10, 0.04);
+  color: #1f1300;
+  font-size: 0.74rem;
+}
+
+.agent-focus-mode-node--continue {
+  background: #2dd4bf;
+}
+
+.agent-focus-mode-node--support {
+  background: #fb7185;
+}
+
+.agent-focus-mode-preview--projection {
+  min-height: min(72vh, 760px);
+  background:
+    radial-gradient(circle at 50% 50%, rgba(255, 214, 10, 0.08), transparent 34%),
+    #202020;
+}
+
+.agent-focus-mode-viewport .agent-focus-mode-preview--projection {
+  min-height: inherit;
+}
+
+.agent-focus-mode-cluster-label--projection {
+  bottom: auto;
+  color: rgba(103, 232, 249, 0.92);
+  font-size: 0.92rem;
+}
+
+.agent-focus-mode-node--projection {
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
+  max-width: none;
+  border: 0;
+  background: transparent;
+  color: #e5e7eb;
+  padding: 0;
+  overflow: visible;
+  text-shadow: none;
+}
+
+.agent-focus-mode-node--projection:hover .agent-focus-mode-node-dot,
+.agent-focus-mode-node--projection:focus-visible .agent-focus-mode-node-dot {
+  box-shadow:
+    0 0 0 4px rgba(125, 211, 252, 0.22),
+    0 0 18px rgba(125, 211, 252, 0.24);
+}
+
+.agent-focus-mode-node-dot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
+  background: #94a3b8;
+  border: 1.5px solid rgba(255, 255, 255, 0.72);
+}
+
+.agent-focus-mode-node-label {
+  position: absolute;
+  left: 50%;
+  top: calc(50% + 15px);
+  width: max-content;
+  max-width: 150px;
+  transform: translateX(-50%);
+  color: #cbd5e1;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  pointer-events: none;
+}
+
+.agent-focus-mode-node--projection.agent-focus-mode-node--anchor {
+  width: 72px;
+  min-width: 72px;
+  height: 72px;
+  min-height: 72px;
+  background: transparent;
+  color: #fef3c7;
+  box-shadow: none;
+}
+
+.agent-focus-mode-node--projection.agent-focus-mode-node--anchor .agent-focus-mode-node-dot {
+  width: 50px;
+  height: 50px;
+  background: #ffd700;
+  border: 3px solid rgba(255, 255, 255, 0.92);
+  box-shadow:
+    0 0 0 14px rgba(255, 215, 0, 0.11),
+    0 0 0 28px rgba(255, 215, 0, 0.05);
+}
+
+.agent-focus-mode-node--projection.agent-focus-mode-node--anchor .agent-focus-mode-node-label {
+  top: calc(50% + 31px);
+  color: #ffffff;
+  font-size: 0.84rem;
+  font-weight: 800;
+  max-width: 180px;
+}
+
+.agent-focus-mode-node--projection.agent-focus-mode-node--outgoing .agent-focus-mode-node-dot {
+  background: #4ecdc4;
+}
+
+.agent-focus-mode-node--projection.agent-focus-mode-node--incoming .agent-focus-mode-node-dot {
+  background: #ff6b6b;
+}
+
+.agent-focus-mode-node--projection.agent-focus-mode-node--associated .agent-focus-mode-node-dot,
+.agent-focus-mode-node--projection.agent-focus-mode-node--related .agent-focus-mode-node-dot {
+  background: #a3a3a3;
+}
+
+.agent-focus-relation-nodes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.agent-focus-relation-node {
+  max-width: 100%;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 999px;
+  background: rgba(2, 6, 12, 0.42);
+  color: #dbeafe;
+  font-size: 0.74rem;
+  line-height: 1.2;
+  padding: 5px 8px;
+  overflow-wrap: anywhere;
+}
+
+.agent-focus-relation-node--anchor {
+  border-color: rgba(251, 191, 36, 0.5);
+  color: #fef3c7;
+}
+
+.agent-focus-relation-edges {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 6px;
+}
+
+.agent-focus-relation-edge,
+.agent-focus-relation-empty {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  color: #cbd5e1;
+  font-size: 0.76rem;
+  line-height: 1.35;
+}
+
+.agent-focus-relation-kind {
+  border-radius: 999px;
+  background: rgba(125, 211, 252, 0.14);
+  color: #bae6fd;
+  padding: 2px 7px;
+}
+
+.agent-focus-relation-confidence {
+  color: #93a4b8;
+}
+
+.agent-focus-hit {
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  border-left: 3px solid #7dd3fc;
+  border-radius: 8px;
+  background: rgba(14, 116, 144, 0.12);
+  padding: 10px 12px;
+}
+
+.agent-focus-hit-title {
+  color: #f8fbff;
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.agent-focus-hit-snippet {
+  margin-top: 5px;
+  color: #dbeafe;
+  font-size: 0.84rem;
+  line-height: 1.52;
+}
+
+.agent-focus-hit-meta {
+  margin-top: 6px;
+  color: #93c5fd;
+  font-size: 0.76rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.agent-pane-block--graph-focus {
+  display: grid;
+  gap: 12px;
+}
+
+.agent-pane-block--focus-runtime {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.agent-focus-rendered-markdown {
+  color: #dbe7f3;
+  font-size: 0.9rem;
+  line-height: 1.62;
+}
+
+.agent-focus-rendered-markdown :is(h1, h2, h3, h4, h5, h6) {
+  color: #f8fbff;
+}
+
+.agent-knowledge-rendered-markdown [data-agent-focus-highlight="true"],
+.agent-knowledge-rendered-markdown .agent-focus-match,
+.agent-focus-rendered-markdown [data-agent-focus-highlight="true"],
+.agent-focus-rendered-markdown .agent-focus-match {
+  background: rgba(125, 211, 252, 0.14);
+  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 0.55);
+  border-radius: 4px;
+  padding-inline: 6px;
+}
+
+.agent-focus-inline-highlight {
+  background: rgba(251, 191, 36, 0.28);
+  color: inherit;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 rgba(251, 191, 36, 0.48);
+  padding-inline: 1px;
+}
+
+.agent-knowledge-rendered-markdown [data-agent-focus-primary-highlight="true"],
+.agent-focus-rendered-markdown [data-agent-focus-primary-highlight="true"] {
+  outline: 1px solid rgba(251, 191, 36, 0.46);
+  outline-offset: 2px;
+}
+
+.agent-side-work-area {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: start;
+  gap: 16px;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.agent-workspace-pane {
+  display: none;
+  flex-direction: column;
+  padding: 14px;
+}
+
+.agent-workspace-pane[data-open="true"] {
+  display: flex;
+}
+
+.agent-workspace-pane-body {
+  flex: 1;
+  margin-top: 12px;
+}
+
+.agent-focus-pane-reader {
+  display: grid;
+  gap: 10px;
+  min-height: 220px;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 8px;
+  background: rgba(2, 6, 12, 0.44);
+  overflow: hidden;
+}
+
+.agent-focus-pane-reader[hidden] {
+  display: none;
+}
+
+.agent-focus-pane-reader-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 52px;
+  padding: 8px 10px 8px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(15, 23, 42, 0.54);
+}
+
+.agent-focus-pane-reader-title {
+  min-width: 0;
+  color: #f8fbff;
+  font-size: 0.92rem;
+  font-weight: 800;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.agent-focus-pane-reader-body {
+  min-height: 0;
+  max-height: min(48vh, 520px);
+  overflow: auto;
+  padding: 12px 14px 14px;
+}
+
+.agent-focus-pane-reader-markdown {
+  color: #dbe7f3;
+  font-size: 0.9rem;
+  line-height: 1.62;
+}
+
+.agent-learning-path-pending {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  min-height: 180px;
+  padding: 14px;
+  border: 1px solid rgba(125, 211, 252, 0.22);
+  border-radius: 8px;
+  background: rgba(14, 116, 144, 0.12);
+  color: #dbeafe;
+}
+
+.agent-learning-path-pending-title {
+  color: #f8fbff;
+  font-size: 0.96rem;
+  font-weight: 800;
+}
+
+.agent-learning-path-pending-copy {
+  color: #c7e9f6;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.agent-learning-path-pending-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.agent-learning-path-pending-meta span {
+  max-width: 100%;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 999px;
+  background: rgba(2, 6, 12, 0.42);
+  color: #bae6fd;
+  font-size: 0.74rem;
+  line-height: 1.25;
+  padding: 4px 8px;
+  overflow-wrap: anywhere;
+}
+
+.agent-godot-future-path-shell {
+  display: grid;
+  gap: 12px;
+  min-height: 280px;
+  align-content: start;
+}
+
+.agent-godot-future-path-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.agent-godot-future-path-title {
+  min-width: 0;
+  color: #f8fbff;
+  font-size: 0.95rem;
+  font-weight: 800;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.agent-godot-future-path-status {
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  border-radius: 8px;
+  background: rgba(14, 116, 144, 0.12);
+  color: #c7e9f6;
+  font-size: 0.84rem;
+  line-height: 1.45;
+  padding: 10px 12px;
+}
+
+.agent-godot-future-path-viewport {
+  position: relative;
+  min-height: min(58vh, 620px);
+  overflow: auto;
+  cursor: grab;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 12, 0.92)),
+    #0b1120;
+  isolation: isolate;
+  touch-action: none;
+}
+
+.agent-godot-future-path-viewport.is-panning {
+  cursor: grabbing;
+}
+
+.agent-godot-future-path-surface {
+  position: relative;
+  min-width: 100%;
+  min-height: min(58vh, 620px);
+  overflow: visible;
+  isolation: isolate;
+  transform:
+    translate(var(--godot-tree-pan-x, 0px), var(--godot-tree-pan-y, 0px))
+    scale(var(--godot-tree-zoom, 1));
+  transform-origin: 0 0;
+}
+
+.agent-godot-future-path-lines {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.agent-godot-future-path-edge {
+  fill: none;
+  stroke: rgba(128, 128, 153, 0.5);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.agent-godot-future-path-edge--active {
+  stroke: rgba(178, 242, 255, 0.82);
+  stroke-width: 2.4;
+}
+
+.agent-godot-future-path-hull {
+  display: none;
+  fill: rgba(255, 255, 255, 0.07);
+  stroke: rgba(76, 175, 80, 0.62);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.agent-godot-future-path-hull--active {
+  display: block;
+}
+
+.agent-godot-future-path-node {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  min-width: 140px;
+  height: 50px;
+  min-height: 50px;
+  border: 0;
+  border-radius: 25px;
+  background: rgba(128, 128, 153, 0.94);
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 750;
+  line-height: 1.22;
+  padding: 6px 10px;
+  text-align: center;
+  overflow: visible;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: none;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    filter 180ms ease;
+}
+
+.agent-godot-future-path-node:hover {
+  box-shadow:
+    0 0 0 3px rgba(125, 211, 252, 0.24),
+    0 0 18px rgba(125, 211, 252, 0.2);
+  filter: brightness(1.08);
+}
+
+.agent-godot-future-path-node:focus {
+  outline: none;
+}
+
+.agent-godot-future-path-node:focus-visible {
+  outline: 2px solid rgba(125, 211, 252, 0.95);
+  outline-offset: 3px;
+}
+
+.agent-godot-future-path-node:active {
+  filter: brightness(0.96);
+}
+
+.agent-godot-future-path-node--spine {
+  box-shadow: inset 0 0 0 2px rgba(255, 214, 0, 0.62);
+}
+
+.agent-godot-future-path-node--tributary {
+  background: rgba(128, 128, 153, 0.78);
+}
+
+.agent-godot-future-path-node--current {
+  z-index: 3;
+  background: rgba(0, 204, 230, 0.96);
+  color: #ffffff;
+  box-shadow: inset 0 0 0 2px rgba(0, 204, 230, 0.82);
+}
+
+.agent-godot-future-path-node--completed {
+  background: rgba(255, 214, 0, 0.96);
+  color: #111827;
+}
+
+.agent-godot-future-path-node--expanded {
+  box-shadow:
+    inset 0 0 0 2px rgba(255, 214, 0, 0.62),
+    0 0 0 20px rgba(255, 214, 0, 0.1),
+    0 0 0 34px rgba(255, 214, 0, 0.05);
+}
+
+.agent-godot-future-path-node--current.agent-godot-future-path-node--expanded {
+  box-shadow:
+    inset 0 0 0 2px rgba(0, 204, 230, 0.82),
+    0 0 0 20px rgba(0, 204, 230, 0.1),
+    0 0 0 34px rgba(0, 204, 230, 0.05);
+}
+
+.agent-godot-future-path-node--dimmed {
+  opacity: 0.28;
+}
+
+.agent-godot-future-path-node--selected {
+  filter: brightness(1.12);
+  box-shadow:
+    inset 0 0 0 2px rgba(125, 211, 252, 0.68),
+    0 0 0 4px rgba(125, 211, 252, 0.2);
+}
+
+.agent-godot-future-path-node-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 120px;
+  max-height: 38px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  hyphens: none;
+}
+
+.agent-godot-future-path-node-label-line {
+  display: block;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-godot-future-path-node-badge {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  transform: translateX(-50%);
+  border-radius: 999px;
+  border: 1.5px solid rgba(204, 204, 204, 0.82);
+  background: rgba(38, 38, 38, 1);
+  color: #ffffff;
+  font-size: 0.86rem;
+  font-weight: 900;
+}
+
+.agent-godot-future-path-node-popover {
+  position: absolute;
+  left: calc(100% + 10px);
+  top: 50%;
+  z-index: 5;
+  display: grid;
+  gap: 3px;
+  min-width: 180px;
+  max-width: 260px;
+  transform: translateY(-50%);
+  border: 1px solid rgba(96, 165, 250, 0.46);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.94);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
+  color: #dbeafe;
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1.3;
+  opacity: 0;
+  padding: 9px 10px;
+  pointer-events: none;
+  text-align: left;
+  transition: opacity 160ms ease;
+  white-space: normal;
+}
+
+.agent-godot-future-path-node-popover strong {
+  color: #67e8f9;
+  font-size: 0.76rem;
+}
+
+.agent-godot-future-path-node:hover .agent-godot-future-path-node-popover,
+.agent-godot-future-path-node:focus-visible .agent-godot-future-path-node-popover {
+  opacity: 1;
+}
+
+body[data-agent-workspace-promotion="graph-focus"] #agent-learning-path-pane,
+body[data-agent-workspace-promotion="graph-focus"] #agent-evidence-pane,
+body[data-agent-workspace-promotion="evidence"] #agent-graph-focus-pane,
+body[data-agent-workspace-promotion="evidence"] #agent-learning-path-pane,
+body[data-agent-workspace-promotion="learning-path"] #agent-graph-focus-pane {
+  display: none !important;
+}
+
+body[data-agent-workspace-promotion="graph-focus"] #agent-graph-focus-pane,
+body[data-agent-workspace-promotion="evidence"] #agent-evidence-pane,
+body[data-agent-workspace-promotion="learning-path"] #agent-learning-path-pane {
+  display: flex !important;
+  min-height: calc(100vh - 170px);
+}
+
+#agent-workspace-api-status[data-agent-inspectable="true"] {
+  cursor: pointer;
+}
+
+@media (max-width: 1180px) {
+  .agent-workspace-shell {
+    grid-template-columns: 1fr;
+    align-content: start;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .agent-chat-pane {
+    height: auto;
+  }
+
+  .agent-side-work-area {
+    overflow: visible;
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .agent-workspace-drawer {
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    width: calc(100vw - 16px);
+  }
+
+  .agent-workspace-drawer-toolbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: 12px 14px;
+  }
+
+  .agent-scope-control--workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .agent-scope-control--workspace .agent-scope-summary {
+    grid-column: 1;
+  }
+
+  .agent-workspace-shell {
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .agent-focus-mode-preview {
+    min-height: 300px;
+  }
+
+  .agent-focus-mode-cluster-label {
+    font-size: 0.9rem;
+  }
+
+  .agent-focus-mode-node {
+    max-width: 112px;
+    font-size: 0.72rem;
+    padding: 6px 10px;
+  }
+
+  .agent-focus-mode-node--anchor {
+    width: 68px;
+    min-height: 68px;
+    padding: 7px;
+  }
+
+  .agent-focus-mode-node--projection {
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+    min-height: 44px;
+    max-width: none;
+    padding: 0;
+  }
+
+  .agent-focus-mode-node--projection.agent-focus-mode-node--anchor {
+    width: 72px;
+    min-width: 72px;
+    height: 72px;
+    min-height: 72px;
+    padding: 0;
+  }
+
+}
+
+/* --- Mobile Responsiveness (v0.9.2) --- */
+@media (max-width: 768px) {
+  .settings-modal-overlay {
+    padding: 10px 8px;
+  }
+
+  .modal-content-settings,
+  .modal-content-agent-settings {
+    width: 100%;
+    max-width: none;
+    max-height: calc(100vh - 20px);
+    border-radius: 14px;
+  }
+
+  .settings-modal-body {
+    padding: 14px;
+  }
+
+  .settings-page-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .setting-item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .setting-item input[type="range"] {
+    margin: 0;
+  }
+
+  .modal-footer-settings {
+    flex-wrap: wrap;
+    justify-content: stretch;
+  }
+
+  .modal-footer-settings .btn {
+    flex: 1 1 100%;
+  }
+
+  .notemd-embed-shell {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+    border: none;
+  }
+
+  .notemd-embed-header {
+    height: 52px;
+    padding: 0 10px;
+  }
+
+  .notemd-embed-close {
+    padding: 6px 10px;
+  }
+
+  .notemd-embed-frame {
+    height: calc(100% - 52px);
+  }
+
+  /* 1. Main Controls: Collapsible or Compact */
+  #controls {
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    padding: 0;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    background: rgba(45, 45, 45, 0.95)
+      url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>')
+      no-repeat center;
+    background-size: 24px;
+    cursor: pointer;
+  }
+
+  #controls.expanded {
+    width: 85%;
+    height: auto;
+    max-height: 80vh;
+    overflow-y: auto;
+    border-radius: 8px;
+    padding: 15px;
+    background: rgba(45, 45, 45, 0.98);
+  }
+
+  /* Hide internal elements when collapsed */
+  #controls:not(.expanded) > * {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 2. Focus Mode Controls */
+  #focus-exit-btn {
+    top: auto;
+    bottom: 20px; /* Move to bottom for easier thumb reach */
+    width: 90%;
+    left: 50%;
+    flex-direction: column;
+    gap: 10px;
+    padding: 15px;
+  }
+
+  #focus-exit-btn span {
+    font-size: 1.1rem;
+    text-align: center;
+  }
+
+  #focus-exit-btn div {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  #focus-exit-btn button {
+    width: 100%;
+    padding: 10px;
+  }
+
+  /* 3. Reading Window */
+  .reading-box.window-mode {
+    width: 95%;
+    height: 90%;
+  }
+
+  .reading-layout {
+    flex-direction: column;
+  }
+
+  .reading-outline {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    max-height: 180px;
+    border-left: none;
+    border-top: 1px solid #333;
   }
 
   /* 4. Top Bar Adjustments */