From db4c14c09fdca6eb11a10b631ef3fef32e320e3d Mon Sep 17 00:00:00 2001
From: Agent Board <agent-board@local>
Date: Tue, 16 Jun 2026 21:22:31 +0800
Subject: [PATCH] =?UTF-8?q?Agent=20task:=20=E5=BC=80=E5=8F=91=EF=BC=9AA2/A?=
 =?UTF-8?q?3/A4=20CSS=20token=20=E4=B8=8E=E7=BB=84=E4=BB=B6=E6=8B=86?=
 =?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rust/crates/mnote-web/src/ssr/styles.rs       |   11 +-
 rust/crates/mnote-web/src/ssr/styles/base.css |  127 +
 .../src/ssr/styles/components/main.css        | 2942 -----------------
 .../src/ssr/styles/components/page-ai.css     | 2216 +++++++++++++
 .../src/ssr/styles/components/search.css      |  130 +
 .../src/ssr/styles/components/ui-debug.css    |  362 ++
 .../mnote-web/src/ssr/styles/tokens.css       |   76 +-
 7 files changed, 2920 insertions(+), 2944 deletions(-)
 create mode 100644 rust/crates/mnote-web/src/ssr/styles/components/page-ai.css
 create mode 100644 rust/crates/mnote-web/src/ssr/styles/components/search.css
 create mode 100644 rust/crates/mnote-web/src/ssr/styles/components/ui-debug.css

diff --git a/rust/crates/mnote-web/src/ssr/styles.rs b/rust/crates/mnote-web/src/ssr/styles.rs
index c806f9d0..81bee75f 100644
--- a/rust/crates/mnote-web/src/ssr/styles.rs
+++ b/rust/crates/mnote-web/src/ssr/styles.rs
@@ -12,7 +12,10 @@
 /// - `styles/tokens.css`: 设计 tokens（颜色、z-index、间距、阴影、状态）
 /// - `styles/base.css`: 基础重置、排版、SVG 图标、滚动条、侧栏/顶栏布局
 /// - `styles/pages/home.css`, `shells.css`, `auth.css`: 页面级样式
-/// - `styles/components/main.css`: 组件级样式（编辑器、面板、标签页等）
+/// - `styles/components/main.css`: 核心组件样式（编辑器、侧栏、树、附件等）
+/// - `styles/components/search.css`: 搜索弹窗组件
+/// - `styles/components/page-ai.css`: Page AI 仪表盘组件
+/// - `styles/components/ui-debug.css`: UI Debug 组件矩阵
 pub const MNOTE_CSS: &str = concat!(
     include_str!("styles/tokens.css"),
     "\n",
@@ -25,6 +28,12 @@ pub const MNOTE_CSS: &str = concat!(
     include_str!("styles/pages/auth.css"),
     "\n",
     include_str!("styles/components/main.css"),
+    "\n",
+    include_str!("styles/components/search.css"),
+    "\n",
+    include_str!("styles/components/page-ai.css"),
+    "\n",
+    include_str!("styles/components/ui-debug.css"),
 );
 
 #[cfg(test)]
diff --git a/rust/crates/mnote-web/src/ssr/styles/base.css b/rust/crates/mnote-web/src/ssr/styles/base.css
index 88159d27..e8ffeb50 100644
--- a/rust/crates/mnote-web/src/ssr/styles/base.css
+++ b/rust/crates/mnote-web/src/ssr/styles/base.css
@@ -871,3 +871,130 @@ html[data-mnote-sidebar-resizing="true"] .mnote-sidebar-resizer::before {
   color: var(--wolai-accent);
 }
 
+
+/* ===== data-variant 通用按钮规则 ===== */
+/* primary */
+.mnote-btn[data-variant="primary"],
+[data-variant="primary"].mnote-btn {
+  background: var(--mnote-btn-primary-bg);
+  color: var(--mnote-btn-primary-color);
+}
+.mnote-btn[data-variant="primary"]:hover,
+[data-variant="primary"].mnote-btn:hover {
+  background: var(--mnote-btn-primary-hover-bg);
+}
+.mnote-btn[data-variant="primary"]:active,
+[data-variant="primary"].mnote-btn:active {
+  background: var(--mnote-btn-primary-active-bg);
+}
+.mnote-btn[data-variant="primary"]:disabled,
+[data-variant="primary"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-primary-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* secondary */
+.mnote-btn[data-variant="secondary"],
+[data-variant="secondary"].mnote-btn {
+  background: var(--mnote-btn-secondary-bg);
+  color: var(--mnote-btn-secondary-color);
+}
+.mnote-btn[data-variant="secondary"]:hover,
+[data-variant="secondary"].mnote-btn:hover {
+  background: var(--mnote-btn-secondary-hover-bg);
+}
+.mnote-btn[data-variant="secondary"]:disabled,
+[data-variant="secondary"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-secondary-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* outline */
+.mnote-btn[data-variant="outline"],
+[data-variant="outline"].mnote-btn {
+  background: var(--mnote-btn-outline-bg);
+  color: var(--mnote-btn-outline-color);
+  border-color: var(--mnote-btn-outline-border);
+}
+.mnote-btn[data-variant="outline"]:hover,
+[data-variant="outline"].mnote-btn:hover {
+  background: var(--mnote-btn-outline-hover-bg);
+}
+.mnote-btn[data-variant="outline"]:active,
+[data-variant="outline"].mnote-btn:active {
+  background: var(--mnote-btn-outline-active-bg);
+}
+.mnote-btn[data-variant="outline"]:disabled,
+[data-variant="outline"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-outline-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* ghost */
+.mnote-btn[data-variant="ghost"],
+[data-variant="ghost"].mnote-btn {
+  background: var(--mnote-btn-ghost-bg);
+  color: var(--mnote-btn-ghost-color);
+}
+.mnote-btn[data-variant="ghost"]:hover,
+[data-variant="ghost"].mnote-btn:hover {
+  background: var(--mnote-btn-ghost-hover-bg);
+}
+.mnote-btn[data-variant="ghost"]:active,
+[data-variant="ghost"].mnote-btn:active {
+  background: var(--mnote-btn-ghost-active-bg);
+}
+.mnote-btn[data-variant="ghost"]:disabled,
+[data-variant="ghost"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-ghost-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* danger */
+.mnote-btn[data-variant="danger"],
+[data-variant="danger"].mnote-btn {
+  background: var(--mnote-btn-danger-bg);
+  color: var(--mnote-btn-danger-color);
+}
+.mnote-btn[data-variant="danger"]:hover,
+[data-variant="danger"].mnote-btn:hover {
+  background: var(--mnote-btn-danger-hover-bg);
+}
+.mnote-btn[data-variant="danger"]:disabled,
+[data-variant="danger"].mnote-btn:disabled {
+  opacity: var(--mnote-btn-danger-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* ===== data-size 通用按钮规则 ===== */
+.mnote-btn[data-size="sm"],
+[data-size="sm"].mnote-btn {
+  height: var(--mnote-btn-sm-height);
+  padding: var(--mnote-btn-sm-padding);
+  font-size: var(--mnote-btn-sm-font-size);
+}
+.mnote-btn[data-size="md"],
+[data-size="md"].mnote-btn {
+  height: var(--mnote-btn-md-height);
+  padding: var(--mnote-btn-md-padding);
+  font-size: var(--mnote-btn-md-font-size);
+}
+.mnote-btn[data-size="lg"],
+[data-size="lg"].mnote-btn {
+  height: var(--mnote-btn-lg-height);
+  padding: var(--mnote-btn-lg-padding);
+  font-size: var(--mnote-btn-lg-font-size);
+}
+
+/* ===== data-state 按钮通用规则 ===== */
+.mnote-btn[data-state="hover"] {
+  filter: brightness(1.08);
+}
+.mnote-btn[data-state="active"] {
+  filter: brightness(0.88);
+}
+.mnote-btn[data-state="disabled"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
diff --git a/rust/crates/mnote-web/src/ssr/styles/components/main.css b/rust/crates/mnote-web/src/ssr/styles/components/main.css
index 7c596e33..cf6f9721 100644
--- a/rust/crates/mnote-web/src/ssr/styles/components/main.css
+++ b/rust/crates/mnote-web/src/ssr/styles/components/main.css
@@ -8,140 +8,8 @@
 .ProseMirror pre {
   white-space: pre-wrap;
 }
-/* ===== 响应式 ===== */
 
 
-.wolai-search-overlay{position:fixed;inset:0;z-index:var(--wolai-z-modal);display:flex;align-items:flex-start;justify-content:center;padding:92px 24px 24px;background:rgba(0,0,0,.32);pointer-events:none}
-.wolai-search-overlay[hidden]{display:none!important}
-.wolai-search-dialog{width:min(680px,100%);max-height:min(720px,calc(100vh - 128px));overflow:hidden;display:flex;flex-direction:column;background:#FFF;border:1px solid rgba(27,28,28,.10);border-radius:6px;box-shadow:0 18px 48px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08);color:#37352F;pointer-events:auto}
-.wolai-search-input-row{display:flex;align-items:center;min-height:58px;padding:0 12px 0 18px;border-bottom:1px solid rgba(27,28,28,.08)}
-.wolai-search-input-icon{width:22px;height:22px;color:#8B8780;margin-right:10px}
-.wolai-search-input{flex:1 1 auto;min-width:0;height:56px;border:0;outline:none;background:transparent;color:#24211D;font:400 18px/1.4 var(--wolai-font-sans);letter-spacing:0}
-.wolai-search-input::placeholder{color:#A29E97}
-.wolai-search-input::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;display:none}
-.wolai-search-close{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:#8B8780;cursor:pointer;font-size:20px;line-height:1}
-.wolai-search-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 8px;border-bottom:1px solid rgba(27,28,28,.06);color:#A7A39D;font-size:12px;line-height:1}
-.wolai-search-options[hidden]{display:none!important}
-.wolai-search-options-left,.wolai-search-options-right,.wolai-search-switch-control,.wolai-search-sort-control{display:inline-flex;align-items:center}
-.wolai-search-options-left{min-width:0;flex-wrap:wrap;gap:8px 12px}
-.wolai-search-options-right{margin-left:auto;flex:0 0 auto}
-.wolai-search-switch-control,.wolai-search-sort-control{gap:5px;white-space:nowrap}
-.wolai-search-switch,.wolai-search-sort-value{border:0;background:transparent;cursor:pointer;font:inherit;letter-spacing:0}
-.wolai-search-switch{position:relative;width:28px;height:16px;border-radius:999px;background:#D6D4D0;box-shadow:inset 0 0 0 1px rgba(27,28,28,.04)}
-.wolai-search-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:#FFF;box-shadow:0 1px 2px rgba(15,23,42,.22)}
-.wolai-search-switch.is-on{background:#C9C7C3}
-.wolai-search-switch.is-on::after{transform:translateX(12px)}
-.wolai-search-sort-value{display:inline-flex;align-items:center;gap:3px;color:#6D6A65}
-.wolai-search-sort-value::after{content:"⌄";color:#B8B4AD;font-size:13px;line-height:1}
-.wolai-search-result-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;color:#8B8780;font-size:12px;line-height:1.3;border-bottom:1px solid rgba(27,28,28,.06)}
-.wolai-search-results{overflow:auto;padding:6px}
-.wolai-search-result-row{width:100%;min-height:54px;display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit}
-.wolai-search-result-row:hover{background:rgba(55,53,47,.08)}
-.wolai-search-source-group{border-radius:4px}
-.wolai-search-source-group + .wolai-search-source-group{margin-top:4px}
-.wolai-search-source-header{width:100%;min-height:46px;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit}
-.wolai-search-source-header:hover{background:rgba(55,53,47,.08)}
-.wolai-search-source-main{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:3px}
-.wolai-search-source-results{padding-left:18px}
-.wolai-search-source-results[hidden]{display:none!important}
-.wolai-search-source-chevron{flex:0 0 auto;margin-top:2px;color:#8B8780;font-size:11px;line-height:1.35}
-.wolai-search-result-icon{width:18px;height:18px;margin-top:2px;color:#8B8780}
-.wolai-search-result-main{min-width:0;display:flex;flex-direction:column;gap:3px}
-.wolai-search-result-title{color:#2F2D29;font-size:14px;line-height:1.35;word-break:break-word}
-.wolai-search-result-title mark,.wolai-search-result-snippet mark{padding:0 1px;border-radius:2px;background:#FFE9E6;color:#D83A32}
-.wolai-search-result-snippet,.wolai-search-empty{color:#8B8780;font-size:12px;line-height:1.35}
-.wolai-search-result-path{display:flex;align-items:center;gap:8px;color:#A09B93;font-size:11px;line-height:1.3;min-width:0}
-.wolai-search-result-path span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.wolai-search-result-type{flex:0 0 auto;padding:1px 5px;border-radius:4px;background:rgba(55,53,47,.06);color:#6F6A63;text-transform:uppercase;font-size:10px;letter-spacing:0}
-.wolai-search-empty,.wolai-search-recent{padding:28px 12px 32px;text-align:center;color:#8B8780;font-size:12px;line-height:1.35}
-
-@media (max-width: 768px) {
-  .mnote-sidebar {
-    width: 200px;
-  }
-
-  .mnote-home {
-    padding: 48px 24px;
-  }
-
-  .mnote-home h1 {
-    font-size: 28px;
-  }
-
-  .document-shell-header {
-    padding: 24px 0 0;
-    max-width: 100%;
-  }
-
-  .document-shell-header h1 {
-    font-size: 28px;
-    line-height: 36px;
-  }
-
-  #mnote-editor-island {
-    margin: 0 24px;
-    width: auto;
-    padding-bottom: 24px;
-  }
-
-  #mnote-search-shell,
-  #mnote-mindmap-shell {
-    padding: 24px;
-  }
-
-  #mnote-search-shell h1,
-  #mnote-mindmap-shell h1 {
-    font-size: 24px;
-  }
-}
-
-@media (max-width: 480px) {
-  .mnote-sidebar {
-    width: 100%;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--wolai-border);
-  }
-
-  .mnote-shell {
-    flex-direction: column;
-  }
-
-  .mnote-home {
-    padding: 32px 16px;
-  }
-
-  .mnote-home h1 {
-    font-size: 24px;
-  }
-
-  .document-shell-header {
-    padding: 16px 0 0;
-  }
-
-  .document-shell-header h1 {
-    font-size: 24px;
-  }
-
-  #mnote-editor-island {
-    margin: 0 16px;
-    width: auto;
-    padding-bottom: 16px;
-  }
-}
-
-
-html,
-body {
-  background: var(--atelier-document);
-}
-
-body {
-  color: var(--atelier-text);
-  font-family: Inter, var(--wolai-font-sans);
-  letter-spacing: 0;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -2881,2813 +2749,3 @@ body {
 }
 
 
-/* 扩展面板 */
-.mnote-extensions-panel {
-  gap: 12px;
-}
-.mnote-extensions-subtabs {
-  display: flex;
-  gap: 4px;
-  border-bottom: 1px solid #E5E4E4;
-  padding-bottom: 8px;
-}
-.mnote-extensions-subtab {
-  padding: 4px 12px;
-  border-radius: 6px;
-  font-size: 13px;
-  border: none;
-  background: transparent;
-  color: #787877;
-  cursor: pointer;
-}
-.mnote-extensions-subtab:hover {
-  background: #F4F3F3;
-}
-.mnote-extensions-subtab.is-active {
-  background: #F4F3F3;
-  color: #1B1C1C;
-  font-weight: 600;
-}
-.mnote-extensions-subpanel {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-.mnote-extensions-item {
-  padding: 8px 10px;
-  background: #F9F8F8;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.mnote-extensions-item-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-}
-.mnote-extensions-label {
-  color: #787877;
-}
-.mnote-extensions-detail {
-  color: #AEADAB;
-  font-size: 12px;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mnote-extensions-source {
-  color: #AEADAB;
-  font-size: 11px;
-}
-.mnote-extensions-agent-name {
-  font-weight: 600;
-  color: #1B1C1C;
-  font-size: 13px;
-  margin-bottom: 4px;
-}
-.mnote-extensions-tool-item {
-  padding: 2px 0 2px 12px;
-  font-size: 12px;
-  color: #585857;
-  display: flex;
-  justify-content: space-between;
-}
-.mnote-extensions-tool-name {
-  font-family: monospace;
-  font-size: 11px;
-}
-.mnote-extensions-tool-disabled {
-  color: #D15251;
-  font-size: 10px;
-}
-.mnote-extensions-loading {
-  color: #AEADAB;
-  font-size: 13px;
-}
-.mnote-extensions-error {
-  color: #D15251;
-  font-size: 13px;
-}
-.mnote-extensions-item-actions {
-  display: flex;
-  gap: 8px;
-  padding-top: 4px;
-}
-.mnote-status-ready {
-  color: #409440;
-  font-weight: 500;
-}
-.mnote-status-pending {
-
-/* 知识库详情面板 */
-.mnote-knowledge-rag-detail-tabs {
-  display: flex;
-  gap: 2px;
-  border-bottom: 1px solid #E5E4E4;
-  padding: 0 16px 0 16px;
-  margin-bottom: 8px;
-}
-.mnote-knowledge-rag-detail-tab {
-  padding: 6px 14px;
-  border-radius: 6px 6px 0 0;
-  font-size: 13px;
-  border: none;
-  background: transparent;
-  color: #787877;
-  cursor: pointer;
-}
-.mnote-knowledge-rag-detail-tab:hover {
-  background: #F4F3F3;
-}
-.mnote-knowledge-rag-detail-tab.is-active {
-  background: #F4F3F3;
-  color: #1B1C1C;
-  font-weight: 600;
-}
-.mnote-knowledge-rag-detail-panel {
-  padding: 0 16px 12px 16px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-.mnote-kb-search-form {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-.mnote-kb-search-input {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid #E5E4E4;
-  border-radius: 6px;
-  font-size: 13px;
-  outline: none;
-}
-.mnote-kb-search-input:focus {
-  border-color: #8F8E8C;
-}
-.mnote-kb-search-results {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.mnote-kb-search-result-item {
-  padding: 8px 10px;
-  background: #F9F8F8;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.mnote-kb-search-result-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.mnote-kb-search-result-index {
-  font-weight: 600;
-  color: #1B1C1C;
-  font-size: 12px;
-}
-.mnote-kb-search-result-score {
-  font-size: 12px;
-  color: #409440;
-  font-weight: 500;
-}
-.mnote-kb-search-result-source {
-  font-size: 11px;
-  color: #AEADAB;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mnote-kb-search-result-preview {
-  font-size: 12px;
-  color: #585857;
-  line-height: 1.5;
-}
-.mnote-kb-search-result-citation {
-  font-size: 11px;
-  color: #7B7A79;
-  font-family: monospace;
-}
-.mnote-kb-params-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.mnote-kb-params-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.mnote-kb-params-label {
-  font-size: 13px;
-  color: #585857;
-  min-width: 90px;
-}
-.mnote-kb-params-select {
-  flex: 1;
-  padding: 4px 8px;
-  border: 1px solid #E5E4E4;
-  border-radius: 6px;
-  font-size: 13px;
-  outline: none;
-  background: #fff;
-}
-.mnote-kb-params-number {
-  width: 80px;
-  padding: 4px 8px;
-  border: 1px solid #E5E4E4;
-  border-radius: 6px;
-  font-size: 13px;
-  outline: none;
-}
-.mnote-kb-params-range {
-  flex: 1;
-  accent-color: #409440;
-}
-.mnote-kb-params-range-value {
-
-/* 仪表盘 */
-.mnote-dashboard-panel {
-  padding: 4px 0;
-}
-.mnote-dashboard-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-.mnote-dashboard-card {
-  padding: 12px;
-  background: #F9F8F8;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.mnote-dashboard-card-title {
-  font-size: 12px;
-  color: #AEADAB;
-  font-weight: 500;
-}
-.mnote-dashboard-card-value {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1B1C1C;
-}
-.mnote-dashboard-card-desc {
-  font-size: 11px;
-  color: #AEADAB;
-}
-
-  font-size: 13px;
-  color: #1B1C1C;
-  font-weight: 500;
-  min-width: 32px;
-  text-align: right;
-}
-
-  color: #F09B26;
-  font-weight: 500;
-}
-
-.wolai-page-settings-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.wolai-page-settings-section[hidden] {
-  display: none !important;
-}
-
-.wolai-page-settings-index-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.wolai-page-settings-index-status {
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-settings-index-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.wolai-page-settings-index-title {
-  color: #1B1C1C;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 18px;
-}
-
-.wolai-page-settings-index-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.wolai-page-settings-index-range-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.wolai-page-settings-index-range-row {
-  display: grid;
-  grid-template-columns: 12px minmax(0, 1fr) 28px;
-  align-items: center;
-  gap: 8px;
-}
-
-.wolai-page-settings-index-status-dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 999px;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(27, 28, 28, 0.08);
-}
-
-.wolai-page-settings-index-status-dot[data-index-status="indexed"] {
-  background: #22C55E;
-}
-
-.wolai-page-settings-index-status-dot[data-index-status="indexing"] {
-  background: #F59E0B;
-}
-
-.wolai-page-settings-index-status-dot[data-index-status="fault"] {
-  background: #EF4444;
-}
-
-.wolai-page-settings-index-path {
-  width: 100%;
-  min-width: 0;
-  height: 32px;
-  border: 1px solid #E2DFDA;
-  border-radius: 6px;
-  padding: 0 9px;
-  background: #FFFFFF;
-  color: #1B1C1C;
-  font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-}
-
-.wolai-page-settings-index-path:disabled {
-  background: #F7F6F4;
-  color: #A19D97;
-}
-
-.wolai-page-settings-index-root-hint {
-  color: #8B8782;
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.wolai-page-settings-index-remove,
-.wolai-page-settings-index-add {
-  border: 1px solid #D8D4CE;
-  border-radius: 6px;
-  background: #FFFFFF;
-  color: #1B1C1C;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.wolai-page-settings-index-remove {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 16px;
-  line-height: 1;
-}
-
-.wolai-page-settings-index-add {
-  width: fit-content;
-  min-height: 30px;
-  padding: 5px 10px;
-}
-
-.wolai-page-settings-index-remove:hover:not(:disabled),
-.wolai-page-settings-index-add:hover:not(:disabled) {
-  background: #F4F3F3;
-}
-
-.wolai-page-settings-index-remove:disabled,
-.wolai-page-settings-index-add:disabled {
-  cursor: default;
-  color: #A19D97;
-  background: #F7F6F4;
-}
-
-.wolai-page-settings-index-schedule {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(96px, .7fr);
-  gap: 8px;
-}
-
-.wolai-page-settings-index-schedule label {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 4px;
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.wolai-page-settings-index-schedule select,
-.wolai-page-settings-index-schedule input[type="time"],
-.wolai-page-settings-index-schedule input[type="date"] {
-  width: 100%;
-  min-height: 30px;
-  border: 1px solid #E2DFDA;
-  border-radius: 6px;
-  padding: 4px 8px;
-  background: #FFFFFF;
-  color: #1B1C1C;
-  font-size: 12px;
-}
-
-.wolai-page-settings-index-inline {
-  grid-column: 1 / -1;
-  flex-direction: row !important;
-  align-items: center;
-}
-
-.wolai-page-settings-index-inline input {
-  width: 14px;
-  height: 14px;
-}
-
-.wolai-page-settings-index-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.wolai-page-settings-index-actions button {
-  min-height: 30px;
-  border: 1px solid #D8D4CE;
-  border-radius: 6px;
-  padding: 5px 10px;
-  background: #FFFFFF;
-  color: #1B1C1C;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.wolai-page-settings-index-row,
-.wolai-page-settings-index-empty {
-  padding: 8px 10px;
-  border-radius: 8px;
-  background: #F7F6F4;
-}
-
-.wolai-page-settings-index-row {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.wolai-page-settings-index-row.is-tag {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.wolai-page-settings-index-row-title {
-  min-width: 0;
-  overflow: hidden;
-  color: #1B1C1C;
-  font-size: 13px;
-  line-height: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-settings-index-row-meta,
-.wolai-page-settings-index-row-snippet,
-.wolai-page-settings-index-empty {
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-setting-row {
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 0;
-}
-
-.wolai-page-setting-row.is-pending {
-  opacity: 0.72;
-}
-
-.wolai-page-setting-copy {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.wolai-page-setting-label {
-  color: #1B1C1C;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.wolai-page-setting-hint,
-.wolai-page-settings-global-note {
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-setting-checkbox {
-  width: 16px;
-  height: 16px;
-  flex: 0 0 auto;
-}
-
-.wolai-page-setting-select {
-  min-width: 96px;
-  height: 30px;
-  padding: 0 10px;
-  border: 1px solid rgba(27, 28, 28, 0.1);
-  border-radius: 8px;
-  background: #FFF;
-  color: #1B1C1C;
-  font-size: 13px;
-}
-
-.wolai-page-settings-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-top: 4px;
-  border-top: 1px solid rgba(27, 28, 28, 0.06);
-}
-
-.wolai-page-settings-action {
-  min-height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: #1B1C1C;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.wolai-page-settings-action:hover {
-  background: #F4F3F3;
-}
-
-.wolai-page-settings-action.is-disabled {
-  color: #A19D97;
-  cursor: not-allowed;
-}
-
-.wolai-page-settings-action.is-danger {
-  color: #C44B55;
-}
-
-.wolai-page-settings-stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  padding-top: 4px;
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-history-drawer {
-  position: fixed;
-  inset: 0;
-  z-index: var(--wolai-z-popover);
-  background: rgba(27, 28, 28, 0.04);
-}
-
-.wolai-page-history-drawer[hidden] {
-  display: none !important;
-}
-
-.wolai-page-history-panel {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  bottom: 16px;
-  width: min(380px, calc(100vw - 24px));
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  padding: 16px;
-  border-left: 1px solid rgba(27, 28, 28, 0.08);
-  background: #FFF;
-  box-shadow: -18px 0 42px rgba(27, 28, 28, 0.12);
-}
-
-.wolai-page-history-header,
-.wolai-page-share-header,
-.wolai-page-ai-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.wolai-page-history-title,
-.wolai-page-share-title,
-.wolai-page-ai-title {
-  color: #1B1C1C;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-}
-
-.wolai-page-history-subtitle,
-.wolai-page-share-subtitle,
-.wolai-page-ai-subtitle {
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-surface-close {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: #5A5A5A;
-  cursor: pointer;
-}
-
-.wolai-surface-close:hover {
-  background: #F4F3F3;
-}
-
-.wolai-page-history-list {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 10px;
-  overflow: auto;
-}
-
-.wolai-page-history-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 10px;
-  background: #FFF;
-}
-
-.wolai-page-history-item-title {
-  color: #1B1C1C;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 20px;
-}
-
-.wolai-page-history-item-meta,
-.wolai-page-history-empty,
-.wolai-page-share-copy,
-.wolai-page-share-footer,
-.wolai-page-ai-empty,
-.wolai-page-ai-message-role {
-  color: #8B8782;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-history-item-ghost,
-.wolai-page-ai-ghost,
-.wolai-page-ai-tab,
-.wolai-page-ai-model-chip,
-.wolai-page-share-copy-button {
-  height: 30px;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 8px;
-  background: #F4F3F3;
-  color: #1B1C1C;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.wolai-page-ai-ghost--danger {
-  color: #B33A3A;
-}
-
-.wolai-page-share-dialog {
-  position: fixed;
-  inset: 0;
-  z-index: var(--wolai-z-popover);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: rgba(27, 28, 28, 0.12);
-}
-
-.wolai-page-share-dialog[hidden] {
-  display: none !important;
-}
-
-.wolai-page-share-card {
-  width: min(460px, calc(100vw - 24px));
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 18px;
-  border-radius: 16px;
-  background: #FFF;
-  box-shadow: 0 18px 48px rgba(27, 28, 28, 0.18);
-}
-
-.wolai-page-share-state {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.wolai-public-pill--inline {
-  width: fit-content;
-}
-
-.wolai-page-share-url-row {
-  display: flex;
-  gap: 8px;
-}
-
-.wolai-page-share-url {
-  flex: 1 1 auto;
-  height: 34px;
-  padding: 0 10px;
-  border: 1px solid rgba(27, 28, 28, 0.1);
-  border-radius: 8px;
-  background: #FFF;
-  color: #1B1C1C;
-  font-size: 13px;
-}
-
-.wolai-page-ai-drawer {
-  position: fixed;
-  top: 12px;
-  right: 12px;
-  bottom: 12px;
-  z-index: var(--wolai-z-popover);
-  --mnote-page-ai-width: 440px;
-}
-
-.wolai-page-ai-drawer[hidden] {
-  display: none !important;
-}
-
-.wolai-page-ai-panel {
-  width: min(var(--mnote-page-ai-width), calc(100vw - 24px));
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 14px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.98);
-  box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14);
-}
-
-.wolai-page-ai-resize-handle {
-  position: absolute;
-  top: 10px;
-  bottom: 10px;
-  left: -6px;
-  width: 12px;
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.wolai-page-ai-resize-handle::before {
-  position: absolute;
-  top: 14px;
-  bottom: 14px;
-  left: 5px;
-  width: 2px;
-  border-radius: 999px;
-  background: transparent;
-  content: "";
-}
-
-.wolai-page-ai-resize-handle:hover::before,
-.wolai-page-ai-drawer[data-page-ai-resizing="true"] .wolai-page-ai-resize-handle::before {
-  background: rgba(27, 28, 28, 0.18);
-}
-
-html[data-mnote-page-ai-resizing="true"] {
-  cursor: col-resize;
-  user-select: none;
-}
-
-.wolai-page-ai-header-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.wolai-page-ai-header-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.wolai-page-ai-icon {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #5A5A5A;
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.wolai-page-ai-icon-svg {
-  width: 16px;
-  height: 16px;
-  display: block;
-  fill: currentColor;
-}
-
-.wolai-page-ai-icon:hover,
-.wolai-page-ai-icon.is-active {
-  background: #F3F3F2;
-  color: #1B1C1C;
-}
-
-.wolai-page-ai-statuslabel,
-.wolai-page-ai-profile-select span,
-.wolai-page-ai-context-select span,
-.wolai-page-ai-skill-search span,
-.wolai-page-ai-memory-scope,
-.wolai-page-ai-skill-source {
-  display: block;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.wolai-page-ai-subtitle {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-}
-
-.wolai-page-ai-subtitle span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-subtitle span:not(:first-child)::before,
-.wolai-page-ai-chat-meta span:not(:first-child)::before {
-  margin-right: 8px;
-  color: #C9C5BE;
-  content: "·";
-}
-
-.wolai-page-ai-runtime-strip {
-  display: flex;
-  width: 100%;
-  min-height: 28px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  padding: 0 14px 8px;
-  border: 0;
-  background: transparent;
-  color: #6B6762;
-  cursor: pointer;
-  font-size: 11px;
-  line-height: 16px;
-  text-align: left;
-}
-
-.wolai-page-ai-runtime-strip:hover span {
-  border-color: rgba(27, 28, 28, 0.16);
-  background: #F1F1EF;
-}
-
-.wolai-page-ai-runtime-strip span {
-  max-width: 100%;
-  overflow: hidden;
-  padding: 2px 6px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 6px;
-  background: #F8F8F7;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-statusvalue {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  color: #1B1C1C;
-  font-size: 12px;
-  line-height: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-settings-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 34px;
-  padding: 0 10px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 8px;
-  background: #FFF;
-  color: #1B1C1C;
-  font-size: 12px;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.wolai-page-ai-settings-link:disabled {
-  color: #AAA6A0;
-  cursor: not-allowed;
-}
-
-.wolai-page-ai-settings-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 132px;
-  gap: 8px;
-}
-
-.wolai-page-ai-profile-select,
-.wolai-page-ai-context-select,
-.wolai-page-ai-skill-search,
-.wolai-page-ai-agent-profile {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-}
-
-.wolai-page-ai-profile-select select,
-.wolai-page-ai-context-select select,
-.wolai-page-ai-skill-search input,
-.wolai-page-ai-skill-search select,
-.wolai-page-ai-agent-profile select {
-  width: 100%;
-  min-width: 0;
-  height: 34px;
-  padding: 0 10px;
-  border: 1px solid rgba(27, 28, 28, 0.12);
-  border-radius: 8px;
-  background: #FFF;
-  color: #1B1C1C;
-  font-size: 12px;
-}
-
-.wolai-page-ai-agent-profile {
-  margin-top: 8px;
-}
-
-.wolai-page-ai-inline-error {
-  padding: 8px 10px;
-  border: 1px solid rgba(198, 80, 80, 0.18);
-  border-radius: 8px;
-  background: #FFF5F5;
-  color: #9F2D2D;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-ai-body {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.wolai-page-ai-panel-section {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.wolai-page-ai-panel-section[hidden] {
-  display: none !important;
-}
-
-.wolai-page-ai-drawer:not([data-page-ai-page="chat"]) .wolai-page-ai-footer {
-  display: none;
-}
-
-.wolai-page-ai-chat-meta {
-  display: flex;
-  min-height: 24px;
-  align-items: center;
-  gap: 8px;
-  overflow: hidden;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.wolai-page-ai-session-summary {
-  min-width: 0;
-  max-width: 190px;
-  overflow: hidden;
-  padding: 0;
-  color: #5A5A5A;
-  font: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-settings-head {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 8px;
-  align-items: center;
-}
-
-.wolai-page-ai-back {
-  height: 30px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #5A5A5A;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.wolai-page-ai-back:hover {
-  background: #F3F3F2;
-  color: #1B1C1C;
-}
-
-.wolai-page-ai-settings-tabs {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 4px;
-  padding: 2px;
-  border-radius: 8px;
-  background: #F3F3F2;
-}
-
-.wolai-page-ai-suggestions {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.wolai-page-ai-suggestions[hidden] {
-  display: none !important;
-}
-
-.wolai-page-ai-suggestions-header,
-.wolai-page-ai-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.wolai-page-ai-intents {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
-}
-
-.wolai-page-ai-suggestion-list,
-.wolai-page-ai-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.wolai-page-ai-tools-panel {
-  display: grid;
-  gap: 8px;
-  padding: 10px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 8px;
-  background: #FAFAFA;
-}
-
-.wolai-page-ai-tools-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.wolai-page-ai-tools-head span:last-child {
-  min-width: 0;
-  overflow: hidden;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-tool-list {
-  display: grid;
-  max-height: 140px;
-  gap: 6px;
-  overflow: auto;
-}
-
-[data-page-ai-tool-list].wolai-page-ai-tool-list {
-  max-height: min(420px, calc(100vh - 330px));
-}
-
-.wolai-page-ai-tool-row {
-  display: grid;
-  gap: 2px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  background: #FFF;
-}
-
-.wolai-page-ai-tool-name {
-  overflow: hidden;
-  color: #1B1C1C;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-tool-meta {
-  overflow: hidden;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-changed-files {
-  overflow: auto;
-  text-overflow: clip;
-  white-space: pre-wrap;
-}
-
-.wolai-page-ai-provider-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.wolai-page-ai-suggestion {
-  min-height: 30px;
-  padding: 6px 9px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 8px;
-  background: #FFF;
-  color: #1B1C1C;
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.wolai-page-ai-conversation {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 10px;
-  overflow: auto;
-}
-
-.wolai-page-ai-memory-grid {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 10px;
-  overflow: auto;
-}
-
-.wolai-page-ai-settings-stack {
-  display: grid;
-  gap: 10px;
-}
-
-.wolai-page-ai-memory-card {
-  display: grid;
-  gap: 8px;
-  padding: 10px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 8px;
-  background: #FFF;
-}
-
-.wolai-page-ai-memory-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.wolai-page-ai-memory-title,
-.wolai-page-ai-skill-name {
-  color: #1B1C1C;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 18px;
-}
-
-.wolai-page-ai-memory-editor {
-  width: 100%;
-  min-height: 118px;
-  padding: 10px;
-  border: 1px solid rgba(27, 28, 28, 0.1);
-  border-radius: 8px;
-  background: #FAFAFA;
-  color: #1B1C1C;
-  font-size: 12px;
-  line-height: 18px;
-  resize: vertical;
-}
-
-.wolai-page-ai-skills-toolbar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: end;
-  gap: 8px;
-}
-
-.wolai-page-ai-skill-filter-toggle {
-  display: inline-flex;
-  grid-column: 1 / -1;
-  min-height: 34px;
-  align-items: center;
-  gap: 6px;
-  color: #5A5A5A;
-  font-size: 12px;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-skill-filter-toggle input {
-  width: 14px;
-  height: 14px;
-  margin: 0;
-}
-
-.wolai-page-ai-skill-list {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 4px;
-  overflow: auto;
-}
-
-.wolai-page-ai-skill-group {
-  display: grid;
-  gap: 4px;
-}
-
-.wolai-page-ai-skill-group-head {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 6px 8px 2px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-  cursor: pointer;
-}
-
-.wolai-page-ai-skill-group-head:hover {
-  background: #F7F7F6;
-  color: #5A5A5A;
-}
-
-.wolai-page-ai-skill-group-title {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 5px;
-}
-
-.wolai-page-ai-skill-group-chevron {
-  width: 12px;
-  color: #AAA6A0;
-  text-align: center;
-}
-
-.wolai-page-ai-skill-row {
-  display: flex;
-  min-height: 38px;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 8px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-}
-
-.wolai-page-ai-skill-row:hover {
-  background: #F7F7F6;
-}
-
-.wolai-page-ai-skill-copy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.wolai-page-ai-skill-main {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
-
-.wolai-page-ai-skill-name {
-  min-width: 0;
-  overflow: visible;
-  text-overflow: clip;
-  white-space: normal;
-  word-break: break-word;
-}
-
-.wolai-page-ai-skill-desc {
-  overflow: hidden;
-  color: #5A5A5A;
-  font-size: 11px;
-  line-height: 15px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: clip;
-  white-space: normal;
-}
-
-.wolai-page-ai-skill-source {
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
-  color: #8B8782;
-  font-size: 10px;
-  line-height: 14px;
-  white-space: normal;
-  word-break: break-word;
-}
-
-.wolai-page-ai-skill-switch {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  flex: 0 0 32px;
-  border: 0;
-  border-radius: 999px;
-  background: #D8D6D1;
-  cursor: pointer;
-}
-
-.wolai-page-ai-skill-switch span {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #FFF;
-  box-shadow: 0 1px 3px rgba(27, 28, 28, 0.16);
-  transition: transform 0.16s ease;
-}
-
-.wolai-page-ai-skill-switch.is-on {
-  background: #F97316;
-}
-
-.wolai-page-ai-skill-switch.is-on span {
-  transform: translateX(14px);
-}
-
-.wolai-page-ai-skill-readonly-badge {
-  flex: 0 0 auto;
-  margin-top: 2px;
-  padding: 2px 6px;
-  border-radius: 999px;
-  background: #F0EFED;
-  color: #8B8782;
-  font-size: 10px;
-  line-height: 14px;
-}
-
-.wolai-page-ai-message {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  background: #F7F7F7;
-}
-
-.wolai-page-ai-message--history {
-  position: relative;
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) auto;
-  width: 100%;
-  min-height: 58px;
-  align-items: flex-start;
-  gap: 6px;
-  padding: 8px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 8px;
-  text-align: left;
-}
-
-.wolai-page-ai-message--history.is-active {
-  border-color: rgba(27, 28, 28, 0.28);
-  background: #F4F8FF;
-}
-
-.wolai-page-ai-message--history.is-selected {
-  border-color: rgba(37, 99, 235, 0.36);
-  background: #F5F8FF;
-}
-
-.wolai-page-ai-history-selection {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  color: #5A5A5A;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-ai-history-selection[hidden] {
-  display: none !important;
-}
-
-.wolai-page-ai-session-check {
-  width: 20px;
-  height: 20px;
-  margin-top: 1px;
-  padding: 0;
-  border: 1px solid rgba(27, 28, 28, 0.18);
-  border-radius: 6px;
-  background: #FFF;
-  color: #2563EB;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.wolai-page-ai-session-check span {
-  display: grid;
-  width: 100%;
-  height: 100%;
-  place-items: center;
-  font-size: 12px;
-  line-height: 1;
-}
-
-.wolai-page-ai-message--history:hover .wolai-page-ai-session-check,
-.wolai-page-ai-message--history:focus-within .wolai-page-ai-session-check,
-.wolai-page-ai-message--history.is-selected .wolai-page-ai-session-check {
-  opacity: 1;
-}
-
-.wolai-page-ai-session-check[aria-checked="true"] {
-  border-color: rgba(37, 99, 235, 0.5);
-  background: #EAF1FF;
-}
-
-.wolai-page-ai-message--user {
-  background: #F4F8FF;
-}
-
-.wolai-page-ai-message[data-page-ai-streaming="true"] .wolai-page-ai-message-role::after {
-  content: " · 输出中";
-}
-
-.wolai-page-ai-message-text {
-  color: #1B1C1C;
-  font-size: 13px;
-  line-height: 20px;
-  white-space: pre-wrap;
-}
-
-.wolai-page-ai-message-text > * {
-  white-space: normal;
-}
-
-.wolai-page-ai-message-text p,
-.wolai-page-ai-message-text ul,
-.wolai-page-ai-message-text ol,
-.wolai-page-ai-message-text pre,
-.wolai-page-ai-message-text table {
-  margin: 6px 0;
-}
-
-.wolai-page-ai-message-text h1,
-.wolai-page-ai-message-text h2,
-.wolai-page-ai-message-text h3,
-.wolai-page-ai-message-text h4,
-.wolai-page-ai-message-text h5,
-.wolai-page-ai-message-text h6 {
-  margin: 8px 0 4px;
-  color: #1B1C1C;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 20px;
-}
-
-.wolai-page-ai-message-text ul,
-.wolai-page-ai-message-text ol {
-  padding-left: 18px;
-}
-
-.wolai-page-ai-message-text a {
-  color: #2563EB;
-  overflow-wrap: anywhere;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.wolai-page-ai-message-text pre {
-  overflow: auto;
-  padding: 8px 10px;
-  border-radius: 6px;
-  background: #F7F6F4;
-  font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-}
-
-.wolai-page-ai-message-text code {
-  border-radius: 4px;
-  padding: 1px 3px;
-  background: #F1F0EE;
-  font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-}
-
-.wolai-page-ai-message-text pre code {
-  padding: 0;
-  background: transparent;
-}
-
-.wolai-page-ai-message-text hr {
-  height: 1px;
-  margin: 8px 0;
-  border: 0;
-  background: rgba(27, 28, 28, 0.12);
-}
-
-.wolai-page-ai-plan-card {
-  gap: 10px;
-  border: 1px solid rgba(14, 116, 144, 0.22);
-  background: #F0F9FF;
-  color: #0F172A;
-}
-
-.wolai-page-ai-plan-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.wolai-page-ai-plan-card-title-wrap {
-  display: grid;
-  min-width: 0;
-  gap: 1px;
-}
-
-.wolai-page-ai-plan-card-kicker {
-  color: #0369A1;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 600;
-}
-
-.wolai-page-ai-plan-card-title {
-  color: #0C4A6E;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.wolai-page-ai-plan-card-badge {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  border-radius: 999px;
-  padding: 2px 8px;
-  background: #BAE6FD;
-  color: #075985;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 600;
-}
-
-.wolai-page-ai-plan-card-markdown {
-  display: grid;
-  gap: 6px;
-  color: #1E293B;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.wolai-page-ai-plan-card-markdown > * {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.wolai-page-ai-plan-card-markdown .wolai-page-ai-markdown-table-wrap {
-  border: 1px solid rgba(14, 116, 144, 0.16);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.72);
-}
-
-.wolai-page-ai-plan-step-list {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.wolai-page-ai-plan-step-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  min-width: 0;
-  padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.78);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.78);
-  color: #334155;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.wolai-page-ai-plan-step-item[data-status="completed"] {
-  border-color: rgba(16, 185, 129, 0.28);
-  background: rgba(236, 253, 245, 0.88);
-}
-
-.wolai-page-ai-plan-step-item[data-status="inProgress"] {
-  border-color: rgba(245, 158, 11, 0.28);
-  background: rgba(255, 251, 235, 0.9);
-}
-
-.wolai-page-ai-plan-step-status {
-  display: inline-flex;
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #E2E8F0;
-  color: #475569;
-  font-size: 11px;
-  line-height: 18px;
-  font-weight: 700;
-}
-
-.wolai-page-ai-plan-step-status[data-status="completed"] {
-  background: #BBF7D0;
-  color: #166534;
-}
-
-.wolai-page-ai-plan-step-status[data-status="inProgress"] {
-  background: #FDE68A;
-  color: #92400E;
-}
-
-.wolai-page-ai-plan-step-text {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.wolai-page-ai-plan-card-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
-}
-
-.wolai-page-ai-plan-card-button {
-  height: 30px;
-  padding: 0 10px;
-  border: 1px solid rgba(14, 116, 144, 0.14);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.86);
-  color: #0F172A;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.wolai-page-ai-plan-card-button--primary {
-  border-color: #0284C7;
-  background: #0284C7;
-  color: #FFFFFF;
-}
-
-.wolai-page-ai-plan-card-button--danger {
-  color: #B33A3A;
-}
-
-.wolai-page-ai-permission-card {
-  gap: 10px;
-  border: 1px solid rgba(180, 83, 9, 0.18);
-  background: #FFF7ED;
-}
-
-.wolai-page-ai-permission-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.wolai-page-ai-permission-badge {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  border-radius: 999px;
-  padding: 2px 8px;
-  background: #FED7AA;
-  color: #9A3412;
-  font-size: 11px;
-  line-height: 16px;
-  font-weight: 600;
-}
-
-.wolai-page-ai-permission-summary {
-  display: grid;
-  gap: 6px;
-}
-
-.wolai-page-ai-permission-row {
-  display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
-  gap: 8px;
-  align-items: start;
-  padding: 7px 8px;
-  border: 1px solid rgba(180, 83, 9, 0.12);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.74);
-}
-
-.wolai-page-ai-permission-row span {
-  color: #9A3412;
-  font-size: 11px;
-  line-height: 17px;
-  font-weight: 600;
-}
-
-.wolai-page-ai-permission-row strong {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  color: #1B1C1C;
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 600;
-}
-
-.wolai-page-ai-permission-card .wolai-page-ai-message-actions,
-.wolai-page-ai-permission-dialog .wolai-page-ai-message-actions {
-  margin-top: 8px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.wolai-page-ai-markdown-table-wrap {
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.wolai-page-ai-markdown-table-wrap table {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: auto;
-  background: #FFFFFF;
-}
-
-.wolai-page-ai-markdown-table-wrap th,
-.wolai-page-ai-markdown-table-wrap td {
-  min-width: 72px;
-  border: 1px solid rgba(27, 28, 28, 0.12);
-  padding: 5px 7px;
-  text-align: left;
-  vertical-align: top;
-}
-
-.wolai-page-ai-markdown-table-wrap th {
-  background: #F7F6F4;
-  font-weight: 700;
-}
-
-button.wolai-page-ai-message-text {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-}
-
-button.wolai-page-ai-history-main {
-  display: grid;
-  gap: 1px;
-  min-width: 0;
-}
-
-button.wolai-page-ai-history-main strong,
-button.wolai-page-ai-history-main span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-message-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.wolai-page-ai-history-actions {
-  grid-column: 3;
-  grid-row: 1;
-  position: static;
-  z-index: 2;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  opacity: 1;
-  pointer-events: auto;
-  background: transparent;
-}
-
-.wolai-page-ai-message--history:hover .wolai-page-ai-history-actions,
-.wolai-page-ai-message--history:focus-within .wolai-page-ai-history-actions {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.wolai-page-ai-permission-dialog {
-  position: fixed;
-  right: 28px;
-  bottom: 28px;
-  z-index: var(--wolai-z-dock);
-  max-width: min(360px, calc(100vw - 32px));
-}
-
-.wolai-page-ai-permission-panel {
-  display: grid;
-  gap: 10px;
-  padding: 14px;
-  border: 1px solid rgba(27, 28, 28, 0.12);
-  border-radius: 8px;
-  background: #FFFFFF;
-  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
-}
-
-.wolai-page-ai-tool-details {
-  display: grid;
-  gap: 6px;
-}
-
-.wolai-page-ai-tool-details summary {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: center;
-  color: #1B1C1C;
-  cursor: pointer;
-  list-style: none;
-}
-
-.wolai-page-ai-tool-details summary::-webkit-details-marker {
-  display: none;
-}
-
-.wolai-page-ai-tool-details summary::before {
-  content: "▸";
-  color: #8B8782;
-}
-
-.wolai-page-ai-tool-details[open] summary::before {
-  content: "▾";
-}
-
-.wolai-page-ai-tool-details summary strong {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-tool-details summary span {
-  min-width: 0;
-  overflow: hidden;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-tool-group-list {
-  display: grid;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.wolai-page-ai-thought-group-list {
-  min-width: 0;
-  margin-top: 8px;
-  padding-left: 10px;
-  border-left: 2px solid rgba(27, 28, 28, 0.12);
-  color: #6F6B66;
-  font-size: 12px;
-  line-height: 18px;
-  white-space: pre-wrap;
-}
-
-.wolai-page-ai-tool-item {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-  padding: 8px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.58);
-}
-
-.wolai-page-ai-tool-item-head {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
-  gap: 8px;
-  align-items: center;
-}
-
-.wolai-page-ai-tool-item-head strong {
-  min-width: 0;
-  overflow: hidden;
-  color: #1B1C1C;
-  font-size: 12px;
-  line-height: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-tool-item-head span {
-  min-width: 0;
-  overflow: hidden;
-  color: #8B8782;
-  font-size: 11px;
-  line-height: 16px;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-footer {
-  position: relative;
-  z-index: var(--wolai-z-dock);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.wolai-page-ai-tab {
-  min-height: 28px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #5A5A5A;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.wolai-page-ai-tab.is-active {
-  background: #1B1C1C;
-  color: #FFF;
-}
-
-.wolai-page-ai-model-chip.is-active {
-  background: #1B1C1C;
-  color: #FFF;
-}
-
-.wolai-page-ai-composer {
-  position: relative;
-  z-index: 20;
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-  border: 1px solid rgba(27, 28, 28, 0.12);
-  border-radius: 10px;
-  background: #FFF;
-}
-
-.wolai-page-ai-allowed-roots {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px 0;
-}
-
-.wolai-page-ai-agent-picker,
-.wolai-page-ai-context-picker,
-.wolai-page-ai-target-picker {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.wolai-page-ai-agent-button,
-.wolai-page-ai-context-button,
-.wolai-page-ai-target-button {
-  font-size: 17px;
-  line-height: 1;
-}
-
-.wolai-page-ai-agent-button[aria-expanded="true"],
-.wolai-page-ai-context-button[aria-expanded="true"],
-.wolai-page-ai-target-button[aria-expanded="true"] {
-  border-color: rgba(27, 28, 28, 0.32);
-  background: #F7F6F4;
-}
-
-.wolai-page-ai-agent-chip,
-.wolai-page-ai-target-chip {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  max-width: 180px;
-  height: 26px;
-  padding: 0 8px;
-  border: 1px solid rgba(27, 28, 28, 0.1);
-  border-radius: 999px;
-  background: #F7F6F4;
-  color: #5A5A5A;
-  font-size: 12px;
-  line-height: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-agent-popover,
-.wolai-page-ai-context-popover,
-.wolai-page-ai-target-popover {
-  position: absolute;
-  left: 0;
-  width: min(320px, calc(100vw - 44px));
-  bottom: calc(100% + 8px);
-  z-index: var(--wolai-z-popover);
-  display: grid;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid rgba(27, 28, 28, 0.12);
-  border-radius: 10px;
-  background: #FFF;
-  box-shadow: 0 16px 36px rgba(27, 28, 28, 0.16);
-}
-
-.wolai-page-ai-agent-popover[hidden],
-.wolai-page-ai-context-popover[hidden],
-.wolai-page-ai-target-popover[hidden] {
-  display: none !important;
-}
-
-.wolai-page-ai-context-popover-head,
-.wolai-page-ai-context-popover-foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  color: #5A5A5A;
-  font-size: 12px;
-}
-
-.wolai-page-ai-context-option-list {
-  display: grid;
-  gap: 8px;
-}
-
-.wolai-page-ai-agent-option-list,
-.wolai-page-ai-target-option-list {
-  display: grid;
-  gap: 6px;
-}
-
-.wolai-page-ai-agent-popover-section {
-  display: grid;
-  gap: 6px;
-}
-
-.wolai-page-ai-agent-popover-title {
-  color: #8B8782;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.wolai-page-ai-agent-option,
-.wolai-page-ai-target-option {
-  display: grid;
-  gap: 2px;
-  width: 100%;
-  padding: 8px;
-  border: 1px solid rgba(27, 28, 28, 0.08);
-  border-radius: 8px;
-  background: #FFF;
-  color: #1B1C1C;
-  text-align: left;
-  cursor: pointer;
-}
-
-.wolai-page-ai-agent-option.is-active,
-.wolai-page-ai-target-option.is-active {
-  border-color: rgba(27, 28, 28, 0.2);
-  background: #F7F6F4;
-}
-
-.wolai-page-ai-agent-option-label,
-.wolai-page-ai-target-option-label {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.wolai-page-ai-agent-option-detail,
-.wolai-page-ai-target-option-detail {
-  color: #8B8782;
-  font-size: 11px;
-}
-
-.wolai-page-ai-context-option {
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr);
-  gap: 8px;
-  align-items: start;
-  color: #1B1C1C;
-  font-size: 12px;
-}
-
-.wolai-page-ai-context-option.is-disabled {
-  color: #AAA6A0;
-}
-
-.wolai-page-ai-context-option-main {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.wolai-page-ai-context-option-label {
-  font-weight: 500;
-}
-
-.wolai-page-ai-context-option-detail {
-  color: #8B8782;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wolai-page-ai-allowed-roots {
-  padding-top: 4px;
-}
-
-.wolai-page-ai-composer:focus-within {
-  border-color: rgba(27, 28, 28, 0.32);
-}
-
-.wolai-page-ai-reasonix-controls {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 6px;
-  padding: 0 8px 6px;
-}
-
-.wolai-page-ai-reasonix-controls[hidden] {
-  display: none !important;
-}
-
-.wolai-page-ai-reasonix-control {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-  color: #8B8782;
-  font-size: 11px;
-}
-
-.wolai-page-ai-reasonix-control select {
-  width: 100%;
-  min-width: 0;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid rgba(27, 28, 28, 0.1);
-  border-radius: 7px;
-  background: #FFF;
-  color: #1B1C1C;
-  font-size: 12px;
-}
-
-.wolai-page-ai-composer-bar {
-  display: flex;
-  min-height: 36px;
-  align-items: center;
-  gap: 6px;
-  padding: 0 6px 6px;
-}
-
-.wolai-page-ai-composer-spacer {
-  flex: 1 1 auto;
-}
-
-.wolai-page-ai-tool-button {
-  width: 28px;
-  height: 28px;
-  border: 1px solid rgba(27, 28, 28, 0.1);
-  border-radius: 6px;
-  background: #FFF;
-  color: #5A5A5A;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.wolai-page-ai-tool-button:hover {
-  border-color: rgba(27, 28, 28, 0.2);
-  color: #1B1C1C;
-}
-
-.wolai-page-ai-input {
-  width: 100%;
-  min-height: 76px;
-  padding: 10px 10px 4px;
-  border: 0;
-  background: transparent;
-  color: #1B1C1C;
-  font-size: 13px;
-  line-height: 20px;
-  resize: none;
-}
-
-.wolai-page-ai-input:focus {
-  outline: none;
-}
-
-.wolai-page-ai-stop {
-  min-width: 42px;
-  height: 28px;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 6px;
-  background: #F3F3F2;
-  color: #5A5A5A;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.wolai-page-ai-stop:disabled {
-  color: #B5B1AA;
-  cursor: not-allowed;
-}
-
-.wolai-page-ai-send {
-  min-width: 52px;
-  height: 28px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 6px;
-  background: #1B1C1C;
-  color: #FFF;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-@media (max-width: 768px) {
-  .mnote-sidebar,
-  .wolai-sidebar {
-    width: 220px;
-  }
-
-  .mnote-sidebar-resizer {
-    display: none;
-  }
-
-  .wolai-topbar {
-    padding: 0 12px;
-  }
-
-  .wolai-page-settings-popover {
-    right: 12px;
-  }
-
-  .wolai-page-history-panel,
-  .wolai-page-ai-panel {
-    width: min(100vw - 24px, 420px);
-  }
-
-  .wolai-page-ai-resize-handle {
-    display: none;
-  }
-
-  .wolai-page-ai-settings-grid,
-  .wolai-page-ai-settings-head {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .wolai-public-pill,
-  .wolai-breadcrumb-root,
-  .wolai-breadcrumb-separator {
-    display: none;
-  }
-
-  .document-workspace[data-has-secondary-pane="true"] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .document-workspace[data-has-secondary-pane="true"] .document-pane-resizer {
-    display: none;
-  }
-
-  .document-pane[data-pane-role="secondary"] .document-shell {
-    padding-top: 32px;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .document-shell {
-    width: 100%;
-    padding: 48px 28px 120px;
-  }
-
-  .document-shell-header h1 {
-    font-size: 32px;
-    line-height: 40px;
-  }
-
-  #mnote-leptos-tiptap-island-editor-root .block-handle-shell {
-    left: -32px !important;
-  }
-}
-
-@media (max-width: 480px) {
-  .mnote-shell {
-    flex-direction: column;
-  }
-
-  .mnote-sidebar,
-  .wolai-sidebar {
-    width: 100%;
-    max-height: 42vh;
-    border-bottom: 1px solid rgba(27, 28, 28, 0.08);
-    box-shadow: none;
-  }
-
-  .mnote-sidebar-resizer {
-    display: none;
-  }
-
-  .document-shell {
-    padding: 36px 20px 112px;
-  }
-
-  .document-shell-header h1 {
-    font-size: 28px;
-  }
-
-  .wolai-topbar-actions {
-    gap: 2px;
-  }
-
-  .wolai-page-settings-panel,
-  .wolai-page-share-card,
-  .wolai-page-ai-panel {
-    width: calc(100vw - 24px);
-  }
-
-  .wolai-page-ai-resize-handle {
-    display: none;
-  }
-}
-
-/* ===== UI Debug 组件矩阵 ===== */
-.ui-debug-root {
-  --ui-debug-bg: #FFFFFF;
-  --ui-debug-surface: #F8F9FA;
-  --ui-debug-border: #E2E4E9;
-  --ui-debug-text: #1A1D23;
-  --ui-debug-text-secondary: #6B7280;
-  --ui-debug-primary: #2563EB;
-  --ui-debug-primary-hover: #1D4ED8;
-  --ui-debug-primary-active: #1E40AF;
-  --ui-debug-secondary: #6B7280;
-  --ui-debug-secondary-hover: #4B5563;
-  --ui-debug-danger: #DC2626;
-  --ui-debug-success: #16A34A;
-  --ui-debug-warning: #D97706;
-  --ui-debug-radius: 6px;
-  --ui-debug-shadow: 0 4px 12px rgba(0,0,0,.08);
-  --ui-debug-shadow-lg: 0 16px 48px rgba(0,0,0,.16);
-  padding: 24px 32px 64px;
-  max-width: 960px;
-  margin: 0 auto;
-  font-family: var(--wolai-font-sans);
-  color: var(--ui-debug-text);
-}
-
-.ui-debug-root[data-ui-debug-theme="dark"] {
-  --ui-debug-bg: #111827;
-  --ui-debug-surface: #1F2937;
-  --ui-debug-border: #374151;
-  --ui-debug-text: #F9FAFB;
-  --ui-debug-text-secondary: #9CA3AF;
-  --ui-debug-primary: #3B82F6;
-  --ui-debug-primary-hover: #60A5FA;
-  --ui-debug-primary-active: #2563EB;
-  --ui-debug-secondary: #9CA3AF;
-  --ui-debug-secondary-hover: #D1D5DB;
-  --ui-debug-danger: #EF4444;
-  --ui-debug-success: #22C55E;
-  --ui-debug-warning: #F59E0B;
-  --ui-debug-shadow: 0 4px 12px rgba(0,0,0,.3);
-  --ui-debug-shadow-lg: 0 16px 48px rgba(0,0,0,.5);
-  background: var(--ui-debug-bg);
-}
-
-.ui-debug-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--ui-debug-border);
-}
-
-.ui-debug-title {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--ui-debug-text);
-  margin: 0;
-}
-
-.ui-debug-theme-controls {
-  display: flex;
-  gap: 6px;
-}
-
-.ui-debug-theme-btn {
-  padding: 5px 14px;
-  border: 1px solid var(--ui-debug-border);
-  border-radius: var(--ui-debug-radius);
-  background: var(--ui-debug-surface);
-  color: var(--ui-debug-text-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 120ms ease;
-}
-
-.ui-debug-theme-btn:hover {
-  background: var(--ui-debug-border);
-}
-
-.ui-debug-theme-btn--active {
-  background: var(--ui-debug-primary);
-  color: #fff;
-  border-color: var(--ui-debug-primary);
-}
-
-.ui-debug-section {
-  margin-bottom: 32px;
-  padding: 18px;
-  border: 1px solid var(--ui-debug-border);
-  border-radius: 8px;
-  background: var(--ui-debug-surface);
-}
-
-.ui-debug-section-title {
-  font-size: 15px;
-  font-weight: 650;
-  color: var(--ui-debug-text-secondary);
-  margin: 0 0 14px 0;
-}
-
-.ui-debug-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-/* ─── Button Matrix ─── */
-.ui-debug-matrix {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-
-.ui-debug-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: var(--ui-debug-radius);
-  font-family: var(--wolai-font-sans);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 120ms ease;
-  white-space: nowrap;
-}
-
-.ui-debug-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
-.ui-debug-btn--md { height: 36px; padding: 0 16px; font-size: 13px; }
-.ui-debug-btn--lg { height: 44px; padding: 0 22px; font-size: 15px; }
-
-/* primary */
-.ui-debug-btn--primary { background: var(--ui-debug-primary); color: #fff; }
-.ui-debug-btn--primary:hover { background: var(--ui-debug-primary-hover); }
-.ui-debug-btn--primary:active { background: var(--ui-debug-primary-active); }
-.ui-debug-btn--primary:disabled,
-.ui-debug-btn--primary[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; }
-
-/* secondary */
-.ui-debug-btn--secondary { background: var(--ui-debug-secondary); color: #fff; }
-.ui-debug-btn--secondary:hover { background: var(--ui-debug-secondary-hover); }
-.ui-debug-btn--secondary:active { filter: brightness(.9); }
-.ui-debug-btn--secondary:disabled,
-.ui-debug-btn--secondary[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; }
-
-/* outline */
-.ui-debug-btn--outline { background: transparent; color: var(--ui-debug-text); border-color: var(--ui-debug-border); }
-.ui-debug-btn--outline:hover { background: var(--ui-debug-border); }
-.ui-debug-btn--outline:active { background: rgba(0,0,0,.12); }
-.ui-debug-btn--outline:disabled,
-.ui-debug-btn--outline[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; }
-
-/* state data attributes */
-.ui-debug-btn[data-ui-debug-state="hover"] { filter: brightness(1.08); }
-.ui-debug-btn[data-ui-debug-state="active"] { filter: brightness(.88); }
-
-/* ─── Dialog/Modal ─── */
-.ui-debug-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--wolai-z-modal);
-  display: grid;
-  place-items: center;
-  background: rgba(0,0,0,.32);
-}
-
-.ui-debug-dialog-overlay[hidden] { display: none; }
-
-.ui-debug-dialog-panel {
-  position: relative;
-  width: min(440px, calc(100vw - 32px));
-  max-height: calc(100vh - 48px);
-  overflow: auto;
-  border: 1px solid var(--ui-debug-border);
-  border-radius: 10px;
-  background: var(--ui-debug-bg);
-  box-shadow: var(--ui-debug-shadow-lg);
-  padding: 20px;
-}
-
-.ui-debug-dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.ui-debug-dialog-title {
-  font-size: 17px;
-  font-weight: 650;
-  margin: 0;
-}
-
-.ui-debug-dialog-close {
-  width: 30px;
-  height: 30px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ui-debug-text-secondary);
-  cursor: pointer;
-  font-size: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ui-debug-dialog-close:hover { background: var(--ui-debug-border); }
-
-.ui-debug-dialog-body {
-  font-size: 14px;
-  color: var(--ui-debug-text-secondary);
-  margin: 0 0 18px 0;
-  line-height: 1.5;
-}
-
-.ui-debug-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-/* ─── Popover / DropdownMenu ─── */
-.ui-debug-popover-host {
-  position: relative;
-  display: inline-block;
-}
-
-.ui-debug-popover {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: var(--wolai-z-dropdown);
-  min-width: 180px;
-  padding: 4px;
-  border: 1px solid var(--ui-debug-border);
-  border-radius: 8px;
-  background: var(--ui-debug-bg);
-  box-shadow: var(--ui-debug-shadow);
-}
-
-.ui-debug-popover[hidden] { display: none; }
-
-.ui-debug-popover-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 8px 10px;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--ui-debug-text);
-  font-size: 13px;
-  cursor: pointer;
-  text-align: left;
-}
-
-.ui-debug-popover-item:hover { background: var(--ui-debug-border); }
-
-.ui-debug-popover-item--danger { color: var(--ui-debug-danger); }
-
-.ui-debug-popover-item--check { cursor: pointer; }
-.ui-debug-popover-item--check input[type="checkbox"] { margin: 0; accent-color: var(--ui-debug-primary); }
-
-.ui-debug-popover-separator {
-  height: 1px;
-  margin: 4px 8px;
-  border: 0;
-  background: var(--ui-debug-border);
-}
-
-/* ─── Toast ─── */
-.ui-debug-toast-container {
-  position: fixed;
-  top: 16px;
-  right: 16px;
-  z-index: var(--wolai-z-modal);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
-}
-
-.ui-debug-toast {
-  padding: 10px 18px;
-  border-radius: var(--ui-debug-radius);
-  font-size: 13px;
-  font-weight: 500;
-  pointer-events: auto;
-  opacity: 0;
-  transform: translateY(-8px);
-  transition: all 200ms ease;
-  box-shadow: var(--ui-debug-shadow);
-}
-
-.ui-debug-toast--visible { opacity: 1; transform: translateY(0); }
-
-.ui-debug-toast--info { background: #DBEAFE; color: #1E40AF; }
-.ui-debug-toast--success { background: #DCFCE7; color: #16A34A; }
-.ui-debug-toast--error { background: #FEE2E2; color: #DC2626; }
-.ui-debug-toast--warning { background: #FEF3C7; color: #D97706; }
-
-/* dark toast variants */
-.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--info { background: #1E3A5F; color: #93C5FD; }
-.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--success { background: #14532D; color: #86EFAC; }
-.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--error { background: #450A0A; color: #FCA5A5; }
-.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--warning { background: #451A03; color: #FCD34D; }
-
-/* ─── Form Elements ─── */
-.ui-debug-form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-}
-
-.ui-debug-field {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.ui-debug-field--wide { grid-column: span 2; }
-
-.ui-debug-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--ui-debug-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: .5px;
-}
-
-.ui-debug-input, .ui-debug-select, .ui-debug-textarea {
-  height: 36px;
-  padding: 6px 10px;
-  border: 1px solid var(--ui-debug-border);
-  border-radius: var(--ui-debug-radius);
-  background: var(--ui-debug-bg);
-  color: var(--ui-debug-text);
-  font-size: 13px;
-  font-family: var(--wolai-font-sans);
-  transition: border-color 120ms ease;
-}
-
-.ui-debug-input:focus, .ui-debug-select:focus, .ui-debug-textarea:focus {
-  outline: none;
-  border-color: var(--ui-debug-primary);
-  box-shadow: var(--wolai-state-focus-ring);
-}
-
-.ui-debug-input:disabled { opacity: .45; cursor: not-allowed; }
-.ui-debug-textarea { height: auto; resize: vertical; }
-.ui-debug-select { cursor: pointer; }
-
-/* ─── responsive ─── */
-@media (max-width: 640px) {
-  .ui-debug-matrix { grid-template-columns: 1fr; }
-  .ui-debug-form-grid { grid-template-columns: 1fr; }
-  .ui-debug-field--wide { grid-column: span 1; }
-  .ui-debug-header { flex-direction: column; gap: 10px; align-items: flex-start; }
-}
-
diff --git a/rust/crates/mnote-web/src/ssr/styles/components/page-ai.css b/rust/crates/mnote-web/src/ssr/styles/components/page-ai.css
new file mode 100644
index 00000000..9224121f
--- /dev/null
+++ b/rust/crates/mnote-web/src/ssr/styles/components/page-ai.css
@@ -0,0 +1,2216 @@
+/* 仪表盘 */
+.mnote-dashboard-panel {
+  padding: 4px 0;
+}
+.mnote-dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.mnote-dashboard-card {
+  padding: 12px;
+  background: #F9F8F8;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.mnote-dashboard-card-title {
+  font-size: 12px;
+  color: #AEADAB;
+  font-weight: 500;
+}
+.mnote-dashboard-card-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1B1C1C;
+}
+.mnote-dashboard-card-desc {
+  font-size: 11px;
+  color: #AEADAB;
+}
+
+  font-size: 13px;
+  color: #1B1C1C;
+  font-weight: 500;
+  min-width: 32px;
+  text-align: right;
+}
+
+  color: #F09B26;
+  font-weight: 500;
+}
+
+.wolai-page-settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wolai-page-settings-section[hidden] {
+  display: none !important;
+}
+
+.wolai-page-settings-index-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wolai-page-settings-index-status {
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-settings-index-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.wolai-page-settings-index-title {
+  color: #1B1C1C;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.wolai-page-settings-index-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.wolai-page-settings-index-range-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.wolai-page-settings-index-range-row {
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+}
+
+.wolai-page-settings-index-status-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(27, 28, 28, 0.08);
+}
+
+.wolai-page-settings-index-status-dot[data-index-status="indexed"] {
+  background: #22C55E;
+}
+
+.wolai-page-settings-index-status-dot[data-index-status="indexing"] {
+  background: #F59E0B;
+}
+
+.wolai-page-settings-index-status-dot[data-index-status="fault"] {
+  background: #EF4444;
+}
+
+.wolai-page-settings-index-path {
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  border: 1px solid #E2DFDA;
+  border-radius: 6px;
+  padding: 0 9px;
+  background: #FFFFFF;
+  color: #1B1C1C;
+  font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.wolai-page-settings-index-path:disabled {
+  background: #F7F6F4;
+  color: #A19D97;
+}
+
+.wolai-page-settings-index-root-hint {
+  color: #8B8782;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.wolai-page-settings-index-remove,
+.wolai-page-settings-index-add {
+  border: 1px solid #D8D4CE;
+  border-radius: 6px;
+  background: #FFFFFF;
+  color: #1B1C1C;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.wolai-page-settings-index-remove {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.wolai-page-settings-index-add {
+  width: fit-content;
+  min-height: 30px;
+  padding: 5px 10px;
+}
+
+.wolai-page-settings-index-remove:hover:not(:disabled),
+.wolai-page-settings-index-add:hover:not(:disabled) {
+  background: #F4F3F3;
+}
+
+.wolai-page-settings-index-remove:disabled,
+.wolai-page-settings-index-add:disabled {
+  cursor: default;
+  color: #A19D97;
+  background: #F7F6F4;
+}
+
+.wolai-page-settings-index-schedule {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(96px, .7fr);
+  gap: 8px;
+}
+
+.wolai-page-settings-index-schedule label {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.wolai-page-settings-index-schedule select,
+.wolai-page-settings-index-schedule input[type="time"],
+.wolai-page-settings-index-schedule input[type="date"] {
+  width: 100%;
+  min-height: 30px;
+  border: 1px solid #E2DFDA;
+  border-radius: 6px;
+  padding: 4px 8px;
+  background: #FFFFFF;
+  color: #1B1C1C;
+  font-size: 12px;
+}
+
+.wolai-page-settings-index-inline {
+  grid-column: 1 / -1;
+  flex-direction: row !important;
+  align-items: center;
+}
+
+.wolai-page-settings-index-inline input {
+  width: 14px;
+  height: 14px;
+}
+
+.wolai-page-settings-index-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.wolai-page-settings-index-actions button {
+  min-height: 30px;
+  border: 1px solid #D8D4CE;
+  border-radius: 6px;
+  padding: 5px 10px;
+  background: #FFFFFF;
+  color: #1B1C1C;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.wolai-page-settings-index-row,
+.wolai-page-settings-index-empty {
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: #F7F6F4;
+}
+
+.wolai-page-settings-index-row {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wolai-page-settings-index-row.is-tag {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.wolai-page-settings-index-row-title {
+  min-width: 0;
+  overflow: hidden;
+  color: #1B1C1C;
+  font-size: 13px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-settings-index-row-meta,
+.wolai-page-settings-index-row-snippet,
+.wolai-page-settings-index-empty {
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-setting-row {
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.wolai-page-setting-row.is-pending {
+  opacity: 0.72;
+}
+
+.wolai-page-setting-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.wolai-page-setting-label {
+  color: #1B1C1C;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.wolai-page-setting-hint,
+.wolai-page-settings-global-note {
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-setting-checkbox {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+.wolai-page-setting-select {
+  min-width: 96px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(27, 28, 28, 0.1);
+  border-radius: 8px;
+  background: #FFF;
+  color: #1B1C1C;
+  font-size: 13px;
+}
+
+.wolai-page-settings-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(27, 28, 28, 0.06);
+}
+
+.wolai-page-settings-action {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #1B1C1C;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.wolai-page-settings-action:hover {
+  background: #F4F3F3;
+}
+
+.wolai-page-settings-action.is-disabled {
+  color: #A19D97;
+  cursor: not-allowed;
+}
+
+.wolai-page-settings-action.is-danger {
+  color: #C44B55;
+}
+
+.wolai-page-settings-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  padding-top: 4px;
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-history-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wolai-z-popover);
+  background: rgba(27, 28, 28, 0.04);
+}
+
+.wolai-page-history-drawer[hidden] {
+  display: none !important;
+}
+
+.wolai-page-history-panel {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  bottom: 16px;
+  width: min(380px, calc(100vw - 24px));
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  border-left: 1px solid rgba(27, 28, 28, 0.08);
+  background: #FFF;
+  box-shadow: -18px 0 42px rgba(27, 28, 28, 0.12);
+}
+
+.wolai-page-history-header,
+.wolai-page-share-header,
+.wolai-page-ai-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.wolai-page-history-title,
+.wolai-page-share-title,
+.wolai-page-ai-title {
+  color: #1B1C1C;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.wolai-page-history-subtitle,
+.wolai-page-share-subtitle,
+.wolai-page-ai-subtitle {
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-surface-close {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #5A5A5A;
+  cursor: pointer;
+}
+
+.wolai-surface-close:hover {
+  background: #F4F3F3;
+}
+
+.wolai-page-history-list {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.wolai-page-history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 10px;
+  background: #FFF;
+}
+
+.wolai-page-history-item-title {
+  color: #1B1C1C;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.wolai-page-history-item-meta,
+.wolai-page-history-empty,
+.wolai-page-share-copy,
+.wolai-page-share-footer,
+.wolai-page-ai-empty,
+.wolai-page-ai-message-role {
+  color: #8B8782;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-history-item-ghost,
+.wolai-page-ai-ghost,
+.wolai-page-ai-tab,
+.wolai-page-ai-model-chip,
+.wolai-page-share-copy-button {
+  height: 30px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: #F4F3F3;
+  color: #1B1C1C;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.wolai-page-ai-ghost--danger {
+  color: #B33A3A;
+}
+
+.wolai-page-share-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wolai-z-popover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(27, 28, 28, 0.12);
+}
+
+.wolai-page-share-dialog[hidden] {
+  display: none !important;
+}
+
+.wolai-page-share-card {
+  width: min(460px, calc(100vw - 24px));
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 18px;
+  border-radius: 16px;
+  background: #FFF;
+  box-shadow: 0 18px 48px rgba(27, 28, 28, 0.18);
+}
+
+.wolai-page-share-state {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wolai-public-pill--inline {
+  width: fit-content;
+}
+
+.wolai-page-share-url-row {
+  display: flex;
+  gap: 8px;
+}
+
+.wolai-page-share-url {
+  flex: 1 1 auto;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid rgba(27, 28, 28, 0.1);
+  border-radius: 8px;
+  background: #FFF;
+  color: #1B1C1C;
+  font-size: 13px;
+}
+
+.wolai-page-ai-drawer {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  z-index: var(--wolai-z-popover);
+  --mnote-page-ai-width: 440px;
+}
+
+.wolai-page-ai-drawer[hidden] {
+  display: none !important;
+}
+
+.wolai-page-ai-panel {
+  width: min(var(--mnote-page-ai-width), calc(100vw - 24px));
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: -18px 0 42px rgba(27, 28, 28, 0.14);
+}
+
+.wolai-page-ai-resize-handle {
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: -6px;
+  width: 12px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.wolai-page-ai-resize-handle::before {
+  position: absolute;
+  top: 14px;
+  bottom: 14px;
+  left: 5px;
+  width: 2px;
+  border-radius: 999px;
+  background: transparent;
+  content: "";
+}
+
+.wolai-page-ai-resize-handle:hover::before,
+.wolai-page-ai-drawer[data-page-ai-resizing="true"] .wolai-page-ai-resize-handle::before {
+  background: rgba(27, 28, 28, 0.18);
+}
+
+html[data-mnote-page-ai-resizing="true"] {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.wolai-page-ai-header-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wolai-page-ai-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wolai-page-ai-icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #5A5A5A;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.wolai-page-ai-icon-svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: currentColor;
+}
+
+.wolai-page-ai-icon:hover,
+.wolai-page-ai-icon.is-active {
+  background: #F3F3F2;
+  color: #1B1C1C;
+}
+
+.wolai-page-ai-statuslabel,
+.wolai-page-ai-profile-select span,
+.wolai-page-ai-context-select span,
+.wolai-page-ai-skill-search span,
+.wolai-page-ai-memory-scope,
+.wolai-page-ai-skill-source {
+  display: block;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.wolai-page-ai-subtitle {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+}
+
+.wolai-page-ai-subtitle span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-subtitle span:not(:first-child)::before,
+.wolai-page-ai-chat-meta span:not(:first-child)::before {
+  margin-right: 8px;
+  color: #C9C5BE;
+  content: "·";
+}
+
+.wolai-page-ai-runtime-strip {
+  display: flex;
+  width: 100%;
+  min-height: 28px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 8px;
+  border: 0;
+  background: transparent;
+  color: #6B6762;
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 16px;
+  text-align: left;
+}
+
+.wolai-page-ai-runtime-strip:hover span {
+  border-color: rgba(27, 28, 28, 0.16);
+  background: #F1F1EF;
+}
+
+.wolai-page-ai-runtime-strip span {
+  max-width: 100%;
+  overflow: hidden;
+  padding: 2px 6px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 6px;
+  background: #F8F8F7;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-statusvalue {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: #1B1C1C;
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-settings-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 8px;
+  background: #FFF;
+  color: #1B1C1C;
+  font-size: 12px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.wolai-page-ai-settings-link:disabled {
+  color: #AAA6A0;
+  cursor: not-allowed;
+}
+
+.wolai-page-ai-settings-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 132px;
+  gap: 8px;
+}
+
+.wolai-page-ai-profile-select,
+.wolai-page-ai-context-select,
+.wolai-page-ai-skill-search,
+.wolai-page-ai-agent-profile {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.wolai-page-ai-profile-select select,
+.wolai-page-ai-context-select select,
+.wolai-page-ai-skill-search input,
+.wolai-page-ai-skill-search select,
+.wolai-page-ai-agent-profile select {
+  width: 100%;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid rgba(27, 28, 28, 0.12);
+  border-radius: 8px;
+  background: #FFF;
+  color: #1B1C1C;
+  font-size: 12px;
+}
+
+.wolai-page-ai-agent-profile {
+  margin-top: 8px;
+}
+
+.wolai-page-ai-inline-error {
+  padding: 8px 10px;
+  border: 1px solid rgba(198, 80, 80, 0.18);
+  border-radius: 8px;
+  background: #FFF5F5;
+  color: #9F2D2D;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-ai-body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wolai-page-ai-panel-section {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wolai-page-ai-panel-section[hidden] {
+  display: none !important;
+}
+
+.wolai-page-ai-drawer:not([data-page-ai-page="chat"]) .wolai-page-ai-footer {
+  display: none;
+}
+
+.wolai-page-ai-chat-meta {
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.wolai-page-ai-session-summary {
+  min-width: 0;
+  max-width: 190px;
+  overflow: hidden;
+  padding: 0;
+  color: #5A5A5A;
+  font: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-settings-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+}
+
+.wolai-page-ai-back {
+  height: 30px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #5A5A5A;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.wolai-page-ai-back:hover {
+  background: #F3F3F2;
+  color: #1B1C1C;
+}
+
+.wolai-page-ai-settings-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+  padding: 2px;
+  border-radius: 8px;
+  background: #F3F3F2;
+}
+
+.wolai-page-ai-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wolai-page-ai-suggestions[hidden] {
+  display: none !important;
+}
+
+.wolai-page-ai-suggestions-header,
+.wolai-page-ai-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.wolai-page-ai-intents {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.wolai-page-ai-suggestion-list,
+.wolai-page-ai-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.wolai-page-ai-tools-panel {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 8px;
+  background: #FAFAFA;
+}
+
+.wolai-page-ai-tools-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.wolai-page-ai-tools-head span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-tool-list {
+  display: grid;
+  max-height: 140px;
+  gap: 6px;
+  overflow: auto;
+}
+
+[data-page-ai-tool-list].wolai-page-ai-tool-list {
+  max-height: min(420px, calc(100vh - 330px));
+}
+
+.wolai-page-ai-tool-row {
+  display: grid;
+  gap: 2px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: #FFF;
+}
+
+.wolai-page-ai-tool-name {
+  overflow: hidden;
+  color: #1B1C1C;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-tool-meta {
+  overflow: hidden;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-changed-files {
+  overflow: auto;
+  text-overflow: clip;
+  white-space: pre-wrap;
+}
+
+.wolai-page-ai-provider-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.wolai-page-ai-suggestion {
+  min-height: 30px;
+  padding: 6px 9px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 8px;
+  background: #FFF;
+  color: #1B1C1C;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wolai-page-ai-conversation {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.wolai-page-ai-memory-grid {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.wolai-page-ai-settings-stack {
+  display: grid;
+  gap: 10px;
+}
+
+.wolai-page-ai-memory-card {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 8px;
+  background: #FFF;
+}
+
+.wolai-page-ai-memory-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.wolai-page-ai-memory-title,
+.wolai-page-ai-skill-name {
+  color: #1B1C1C;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.wolai-page-ai-memory-editor {
+  width: 100%;
+  min-height: 118px;
+  padding: 10px;
+  border: 1px solid rgba(27, 28, 28, 0.1);
+  border-radius: 8px;
+  background: #FAFAFA;
+  color: #1B1C1C;
+  font-size: 12px;
+  line-height: 18px;
+  resize: vertical;
+}
+
+.wolai-page-ai-skills-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: end;
+  gap: 8px;
+}
+
+.wolai-page-ai-skill-filter-toggle {
+  display: inline-flex;
+  grid-column: 1 / -1;
+  min-height: 34px;
+  align-items: center;
+  gap: 6px;
+  color: #5A5A5A;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-skill-filter-toggle input {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+}
+
+.wolai-page-ai-skill-list {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 4px;
+  overflow: auto;
+}
+
+.wolai-page-ai-skill-group {
+  display: grid;
+  gap: 4px;
+}
+
+.wolai-page-ai-skill-group-head {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 8px 2px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.wolai-page-ai-skill-group-head:hover {
+  background: #F7F7F6;
+  color: #5A5A5A;
+}
+
+.wolai-page-ai-skill-group-title {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 5px;
+}
+
+.wolai-page-ai-skill-group-chevron {
+  width: 12px;
+  color: #AAA6A0;
+  text-align: center;
+}
+
+.wolai-page-ai-skill-row {
+  display: flex;
+  min-height: 38px;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+}
+
+.wolai-page-ai-skill-row:hover {
+  background: #F7F7F6;
+}
+
+.wolai-page-ai-skill-copy {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.wolai-page-ai-skill-main {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.wolai-page-ai-skill-name {
+  min-width: 0;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.wolai-page-ai-skill-desc {
+  overflow: hidden;
+  color: #5A5A5A;
+  font-size: 11px;
+  line-height: 15px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.wolai-page-ai-skill-source {
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #8B8782;
+  font-size: 10px;
+  line-height: 14px;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.wolai-page-ai-skill-switch {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  flex: 0 0 32px;
+  border: 0;
+  border-radius: 999px;
+  background: #D8D6D1;
+  cursor: pointer;
+}
+
+.wolai-page-ai-skill-switch span {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #FFF;
+  box-shadow: 0 1px 3px rgba(27, 28, 28, 0.16);
+  transition: transform 0.16s ease;
+}
+
+.wolai-page-ai-skill-switch.is-on {
+  background: #F97316;
+}
+
+.wolai-page-ai-skill-switch.is-on span {
+  transform: translateX(14px);
+}
+
+.wolai-page-ai-skill-readonly-badge {
+  flex: 0 0 auto;
+  margin-top: 2px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #F0EFED;
+  color: #8B8782;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.wolai-page-ai-message {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #F7F7F7;
+}
+
+.wolai-page-ai-message--history {
+  position: relative;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  width: 100%;
+  min-height: 58px;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 8px;
+  text-align: left;
+}
+
+.wolai-page-ai-message--history.is-active {
+  border-color: rgba(27, 28, 28, 0.28);
+  background: #F4F8FF;
+}
+
+.wolai-page-ai-message--history.is-selected {
+  border-color: rgba(37, 99, 235, 0.36);
+  background: #F5F8FF;
+}
+
+.wolai-page-ai-history-selection {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  color: #5A5A5A;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-ai-history-selection[hidden] {
+  display: none !important;
+}
+
+.wolai-page-ai-session-check {
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  padding: 0;
+  border: 1px solid rgba(27, 28, 28, 0.18);
+  border-radius: 6px;
+  background: #FFF;
+  color: #2563EB;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.wolai-page-ai-session-check span {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.wolai-page-ai-message--history:hover .wolai-page-ai-session-check,
+.wolai-page-ai-message--history:focus-within .wolai-page-ai-session-check,
+.wolai-page-ai-message--history.is-selected .wolai-page-ai-session-check {
+  opacity: 1;
+}
+
+.wolai-page-ai-session-check[aria-checked="true"] {
+  border-color: rgba(37, 99, 235, 0.5);
+  background: #EAF1FF;
+}
+
+.wolai-page-ai-message--user {
+  background: #F4F8FF;
+}
+
+.wolai-page-ai-message[data-page-ai-streaming="true"] .wolai-page-ai-message-role::after {
+  content: " · 输出中";
+}
+
+.wolai-page-ai-message-text {
+  color: #1B1C1C;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: pre-wrap;
+}
+
+.wolai-page-ai-message-text > * {
+  white-space: normal;
+}
+
+.wolai-page-ai-message-text p,
+.wolai-page-ai-message-text ul,
+.wolai-page-ai-message-text ol,
+.wolai-page-ai-message-text pre,
+.wolai-page-ai-message-text table {
+  margin: 6px 0;
+}
+
+.wolai-page-ai-message-text h1,
+.wolai-page-ai-message-text h2,
+.wolai-page-ai-message-text h3,
+.wolai-page-ai-message-text h4,
+.wolai-page-ai-message-text h5,
+.wolai-page-ai-message-text h6 {
+  margin: 8px 0 4px;
+  color: #1B1C1C;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+.wolai-page-ai-message-text ul,
+.wolai-page-ai-message-text ol {
+  padding-left: 18px;
+}
+
+.wolai-page-ai-message-text a {
+  color: #2563EB;
+  overflow-wrap: anywhere;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.wolai-page-ai-message-text pre {
+  overflow: auto;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: #F7F6F4;
+  font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.wolai-page-ai-message-text code {
+  border-radius: 4px;
+  padding: 1px 3px;
+  background: #F1F0EE;
+  font: 12px/18px "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.wolai-page-ai-message-text pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.wolai-page-ai-message-text hr {
+  height: 1px;
+  margin: 8px 0;
+  border: 0;
+  background: rgba(27, 28, 28, 0.12);
+}
+
+.wolai-page-ai-plan-card {
+  gap: 10px;
+  border: 1px solid rgba(14, 116, 144, 0.22);
+  background: #F0F9FF;
+  color: #0F172A;
+}
+
+.wolai-page-ai-plan-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.wolai-page-ai-plan-card-title-wrap {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+}
+
+.wolai-page-ai-plan-card-kicker {
+  color: #0369A1;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+}
+
+.wolai-page-ai-plan-card-title {
+  color: #0C4A6E;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.wolai-page-ai-plan-card-badge {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: #BAE6FD;
+  color: #075985;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+}
+
+.wolai-page-ai-plan-card-markdown {
+  display: grid;
+  gap: 6px;
+  color: #1E293B;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.wolai-page-ai-plan-card-markdown > * {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.wolai-page-ai-plan-card-markdown .wolai-page-ai-markdown-table-wrap {
+  border: 1px solid rgba(14, 116, 144, 0.16);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.wolai-page-ai-plan-step-list {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wolai-page-ai-plan-step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.78);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #334155;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.wolai-page-ai-plan-step-item[data-status="completed"] {
+  border-color: rgba(16, 185, 129, 0.28);
+  background: rgba(236, 253, 245, 0.88);
+}
+
+.wolai-page-ai-plan-step-item[data-status="inProgress"] {
+  border-color: rgba(245, 158, 11, 0.28);
+  background: rgba(255, 251, 235, 0.9);
+}
+
+.wolai-page-ai-plan-step-status {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #E2E8F0;
+  color: #475569;
+  font-size: 11px;
+  line-height: 18px;
+  font-weight: 700;
+}
+
+.wolai-page-ai-plan-step-status[data-status="completed"] {
+  background: #BBF7D0;
+  color: #166534;
+}
+
+.wolai-page-ai-plan-step-status[data-status="inProgress"] {
+  background: #FDE68A;
+  color: #92400E;
+}
+
+.wolai-page-ai-plan-step-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.wolai-page-ai-plan-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.wolai-page-ai-plan-card-button {
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(14, 116, 144, 0.14);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.86);
+  color: #0F172A;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.wolai-page-ai-plan-card-button--primary {
+  border-color: #0284C7;
+  background: #0284C7;
+  color: #FFFFFF;
+}
+
+.wolai-page-ai-plan-card-button--danger {
+  color: #B33A3A;
+}
+
+.wolai-page-ai-permission-card {
+  gap: 10px;
+  border: 1px solid rgba(180, 83, 9, 0.18);
+  background: #FFF7ED;
+}
+
+.wolai-page-ai-permission-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.wolai-page-ai-permission-badge {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: #FED7AA;
+  color: #9A3412;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+}
+
+.wolai-page-ai-permission-summary {
+  display: grid;
+  gap: 6px;
+}
+
+.wolai-page-ai-permission-row {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  padding: 7px 8px;
+  border: 1px solid rgba(180, 83, 9, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.74);
+}
+
+.wolai-page-ai-permission-row span {
+  color: #9A3412;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 600;
+}
+
+.wolai-page-ai-permission-row strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: #1B1C1C;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+}
+
+.wolai-page-ai-permission-card .wolai-page-ai-message-actions,
+.wolai-page-ai-permission-dialog .wolai-page-ai-message-actions {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.wolai-page-ai-markdown-table-wrap {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.wolai-page-ai-markdown-table-wrap table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  background: #FFFFFF;
+}
+
+.wolai-page-ai-markdown-table-wrap th,
+.wolai-page-ai-markdown-table-wrap td {
+  min-width: 72px;
+  border: 1px solid rgba(27, 28, 28, 0.12);
+  padding: 5px 7px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.wolai-page-ai-markdown-table-wrap th {
+  background: #F7F6F4;
+  font-weight: 700;
+}
+
+button.wolai-page-ai-message-text {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+button.wolai-page-ai-history-main {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+}
+
+button.wolai-page-ai-history-main strong,
+button.wolai-page-ai-history-main span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-message-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.wolai-page-ai-history-actions {
+  grid-column: 3;
+  grid-row: 1;
+  position: static;
+  z-index: 2;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  opacity: 1;
+  pointer-events: auto;
+  background: transparent;
+}
+
+.wolai-page-ai-message--history:hover .wolai-page-ai-history-actions,
+.wolai-page-ai-message--history:focus-within .wolai-page-ai-history-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.wolai-page-ai-permission-dialog {
+  position: fixed;
+  right: 28px;
+  bottom: 28px;
+  z-index: var(--wolai-z-dock);
+  max-width: min(360px, calc(100vw - 32px));
+}
+
+.wolai-page-ai-permission-panel {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid rgba(27, 28, 28, 0.12);
+  border-radius: 8px;
+  background: #FFFFFF;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+}
+
+.wolai-page-ai-tool-details {
+  display: grid;
+  gap: 6px;
+}
+
+.wolai-page-ai-tool-details summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  color: #1B1C1C;
+  cursor: pointer;
+  list-style: none;
+}
+
+.wolai-page-ai-tool-details summary::-webkit-details-marker {
+  display: none;
+}
+
+.wolai-page-ai-tool-details summary::before {
+  content: "▸";
+  color: #8B8782;
+}
+
+.wolai-page-ai-tool-details[open] summary::before {
+  content: "▾";
+}
+
+.wolai-page-ai-tool-details summary strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-tool-details summary span {
+  min-width: 0;
+  overflow: hidden;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-tool-group-list {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.wolai-page-ai-thought-group-list {
+  min-width: 0;
+  margin-top: 8px;
+  padding-left: 10px;
+  border-left: 2px solid rgba(27, 28, 28, 0.12);
+  color: #6F6B66;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: pre-wrap;
+}
+
+.wolai-page-ai-tool-item {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 8px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.wolai-page-ai-tool-item-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
+  gap: 8px;
+  align-items: center;
+}
+
+.wolai-page-ai-tool-item-head strong {
+  min-width: 0;
+  overflow: hidden;
+  color: #1B1C1C;
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-tool-item-head span {
+  min-width: 0;
+  overflow: hidden;
+  color: #8B8782;
+  font-size: 11px;
+  line-height: 16px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-footer {
+  position: relative;
+  z-index: var(--wolai-z-dock);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wolai-page-ai-tab {
+  min-height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #5A5A5A;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.wolai-page-ai-tab.is-active {
+  background: #1B1C1C;
+  color: #FFF;
+}
+
+.wolai-page-ai-model-chip.is-active {
+  background: #1B1C1C;
+  color: #FFF;
+}
+
+.wolai-page-ai-composer {
+  position: relative;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  border: 1px solid rgba(27, 28, 28, 0.12);
+  border-radius: 10px;
+  background: #FFF;
+}
+
+.wolai-page-ai-allowed-roots {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 0;
+}
+
+.wolai-page-ai-agent-picker,
+.wolai-page-ai-context-picker,
+.wolai-page-ai-target-picker {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.wolai-page-ai-agent-button,
+.wolai-page-ai-context-button,
+.wolai-page-ai-target-button {
+  font-size: 17px;
+  line-height: 1;
+}
+
+.wolai-page-ai-agent-button[aria-expanded="true"],
+.wolai-page-ai-context-button[aria-expanded="true"],
+.wolai-page-ai-target-button[aria-expanded="true"] {
+  border-color: rgba(27, 28, 28, 0.32);
+  background: #F7F6F4;
+}
+
+.wolai-page-ai-agent-chip,
+.wolai-page-ai-target-chip {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 180px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid rgba(27, 28, 28, 0.1);
+  border-radius: 999px;
+  background: #F7F6F4;
+  color: #5A5A5A;
+  font-size: 12px;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-agent-popover,
+.wolai-page-ai-context-popover,
+.wolai-page-ai-target-popover {
+  position: absolute;
+  left: 0;
+  width: min(320px, calc(100vw - 44px));
+  bottom: calc(100% + 8px);
+  z-index: var(--wolai-z-popover);
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid rgba(27, 28, 28, 0.12);
+  border-radius: 10px;
+  background: #FFF;
+  box-shadow: 0 16px 36px rgba(27, 28, 28, 0.16);
+}
+
+.wolai-page-ai-agent-popover[hidden],
+.wolai-page-ai-context-popover[hidden],
+.wolai-page-ai-target-popover[hidden] {
+  display: none !important;
+}
+
+.wolai-page-ai-context-popover-head,
+.wolai-page-ai-context-popover-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: #5A5A5A;
+  font-size: 12px;
+}
+
+.wolai-page-ai-context-option-list {
+  display: grid;
+  gap: 8px;
+}
+
+.wolai-page-ai-agent-option-list,
+.wolai-page-ai-target-option-list {
+  display: grid;
+  gap: 6px;
+}
+
+.wolai-page-ai-agent-popover-section {
+  display: grid;
+  gap: 6px;
+}
+
+.wolai-page-ai-agent-popover-title {
+  color: #8B8782;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.wolai-page-ai-agent-option,
+.wolai-page-ai-target-option {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid rgba(27, 28, 28, 0.08);
+  border-radius: 8px;
+  background: #FFF;
+  color: #1B1C1C;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wolai-page-ai-agent-option.is-active,
+.wolai-page-ai-target-option.is-active {
+  border-color: rgba(27, 28, 28, 0.2);
+  background: #F7F6F4;
+}
+
+.wolai-page-ai-agent-option-label,
+.wolai-page-ai-target-option-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.wolai-page-ai-agent-option-detail,
+.wolai-page-ai-target-option-detail {
+  color: #8B8782;
+  font-size: 11px;
+}
+
+.wolai-page-ai-context-option {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  color: #1B1C1C;
+  font-size: 12px;
+}
+
+.wolai-page-ai-context-option.is-disabled {
+  color: #AAA6A0;
+}
+
+.wolai-page-ai-context-option-main {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.wolai-page-ai-context-option-label {
+  font-weight: 500;
+}
+
+.wolai-page-ai-context-option-detail {
+  color: #8B8782;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wolai-page-ai-allowed-roots {
+  padding-top: 4px;
+}
+
+.wolai-page-ai-composer:focus-within {
+  border-color: rgba(27, 28, 28, 0.32);
+}
+
+.wolai-page-ai-reasonix-controls {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  padding: 0 8px 6px;
+}
+
+.wolai-page-ai-reasonix-controls[hidden] {
+  display: none !important;
+}
+
+.wolai-page-ai-reasonix-control {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  color: #8B8782;
+  font-size: 11px;
+}
+
+.wolai-page-ai-reasonix-control select {
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid rgba(27, 28, 28, 0.1);
+  border-radius: 7px;
+  background: #FFF;
+  color: #1B1C1C;
+  font-size: 12px;
+}
+
+.wolai-page-ai-composer-bar {
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 6px 6px;
+}
+
+.wolai-page-ai-composer-spacer {
+  flex: 1 1 auto;
+}
+
+.wolai-page-ai-tool-button {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(27, 28, 28, 0.1);
+  border-radius: 6px;
+  background: #FFF;
+  color: #5A5A5A;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.wolai-page-ai-tool-button:hover {
+  border-color: rgba(27, 28, 28, 0.2);
+  color: #1B1C1C;
+}
+
+.wolai-page-ai-input {
+  width: 100%;
+  min-height: 76px;
+  padding: 10px 10px 4px;
+  border: 0;
+  background: transparent;
+  color: #1B1C1C;
+  font-size: 13px;
+  line-height: 20px;
+  resize: none;
+}
+
+.wolai-page-ai-input:focus {
+  outline: none;
+}
+
+.wolai-page-ai-stop {
+  min-width: 42px;
+  height: 28px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 6px;
+  background: #F3F3F2;
+  color: #5A5A5A;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.wolai-page-ai-stop:disabled {
+  color: #B5B1AA;
+  cursor: not-allowed;
+}
+
+.wolai-page-ai-send {
+  min-width: 52px;
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: #1B1C1C;
+  color: #FFF;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .mnote-sidebar,
+  .wolai-sidebar {
+    width: 220px;
+  }
+
+  .mnote-sidebar-resizer {
+    display: none;
+  }
+
+  .wolai-topbar {
+    padding: 0 12px;
+  }
+
+  .wolai-page-settings-popover {
+    right: 12px;
+  }
+
+  .wolai-page-history-panel,
+  .wolai-page-ai-panel {
+    width: min(100vw - 24px, 420px);
+  }
+
+  .wolai-page-ai-resize-handle {
+    display: none;
+  }
+
+  .wolai-page-ai-settings-grid,
+  .wolai-page-ai-settings-head {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .wolai-public-pill,
+  .wolai-breadcrumb-root,
+  .wolai-breadcrumb-separator {
+    display: none;
+  }
+
+  .document-workspace[data-has-secondary-pane="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .document-workspace[data-has-secondary-pane="true"] .document-pane-resizer {
+    display: none;
+  }
+
+  .document-pane[data-pane-role="secondary"] .document-shell {
+    padding-top: 32px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .document-shell {
+    width: 100%;
+    padding: 48px 28px 120px;
+  }
+
+  .document-shell-header h1 {
+    font-size: 32px;
+    line-height: 40px;
+  }
+
+  #mnote-leptos-tiptap-island-editor-root .block-handle-shell {
+    left: -32px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .mnote-shell {
+    flex-direction: column;
+  }
+
+  .mnote-sidebar,
+  .wolai-sidebar {
+    width: 100%;
+    max-height: 42vh;
+    border-bottom: 1px solid rgba(27, 28, 28, 0.08);
+    box-shadow: none;
+  }
+
+  .mnote-sidebar-resizer {
+    display: none;
+  }
+
+  .document-shell {
+    padding: 36px 20px 112px;
+  }
+
+  .document-shell-header h1 {
+    font-size: 28px;
+  }
+
+  .wolai-topbar-actions {
+    gap: 2px;
+  }
+
+  .wolai-page-settings-panel,
+  .wolai-page-share-card,
+  .wolai-page-ai-panel {
+    width: calc(100vw - 24px);
+  }
+
+  .wolai-page-ai-resize-handle {
+    display: none;
+  }
+}
+
diff --git a/rust/crates/mnote-web/src/ssr/styles/components/search.css b/rust/crates/mnote-web/src/ssr/styles/components/search.css
new file mode 100644
index 00000000..99053b73
--- /dev/null
+++ b/rust/crates/mnote-web/src/ssr/styles/components/search.css
@@ -0,0 +1,130 @@
+.wolai-search-overlay{position:fixed;inset:0;z-index:var(--wolai-z-modal);display:flex;align-items:flex-start;justify-content:center;padding:92px 24px 24px;background:rgba(0,0,0,.32);pointer-events:none}
+.wolai-search-overlay[hidden]{display:none!important}
+.wolai-search-dialog{width:min(680px,100%);max-height:min(720px,calc(100vh - 128px));overflow:hidden;display:flex;flex-direction:column;background:#FFF;border:1px solid rgba(27,28,28,.10);border-radius:6px;box-shadow:0 18px 48px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08);color:#37352F;pointer-events:auto}
+.wolai-search-input-row{display:flex;align-items:center;min-height:58px;padding:0 12px 0 18px;border-bottom:1px solid rgba(27,28,28,.08)}
+.wolai-search-input-icon{width:22px;height:22px;color:#8B8780;margin-right:10px}
+.wolai-search-input{flex:1 1 auto;min-width:0;height:56px;border:0;outline:none;background:transparent;color:#24211D;font:400 18px/1.4 var(--wolai-font-sans);letter-spacing:0}
+.wolai-search-input::placeholder{color:#A29E97}
+.wolai-search-input::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;display:none}
+.wolai-search-close{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:#8B8780;cursor:pointer;font-size:20px;line-height:1}
+.wolai-search-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 8px;border-bottom:1px solid rgba(27,28,28,.06);color:#A7A39D;font-size:12px;line-height:1}
+.wolai-search-options[hidden]{display:none!important}
+.wolai-search-options-left,.wolai-search-options-right,.wolai-search-switch-control,.wolai-search-sort-control{display:inline-flex;align-items:center}
+.wolai-search-options-left{min-width:0;flex-wrap:wrap;gap:8px 12px}
+.wolai-search-options-right{margin-left:auto;flex:0 0 auto}
+.wolai-search-switch-control,.wolai-search-sort-control{gap:5px;white-space:nowrap}
+.wolai-search-switch,.wolai-search-sort-value{border:0;background:transparent;cursor:pointer;font:inherit;letter-spacing:0}
+.wolai-search-switch{position:relative;width:28px;height:16px;border-radius:999px;background:#D6D4D0;box-shadow:inset 0 0 0 1px rgba(27,28,28,.04)}
+.wolai-search-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:#FFF;box-shadow:0 1px 2px rgba(15,23,42,.22)}
+.wolai-search-switch.is-on{background:#C9C7C3}
+.wolai-search-switch.is-on::after{transform:translateX(12px)}
+.wolai-search-sort-value{display:inline-flex;align-items:center;gap:3px;color:#6D6A65}
+.wolai-search-sort-value::after{content:"⌄";color:#B8B4AD;font-size:13px;line-height:1}
+.wolai-search-result-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;color:#8B8780;font-size:12px;line-height:1.3;border-bottom:1px solid rgba(27,28,28,.06)}
+.wolai-search-results{overflow:auto;padding:6px}
+.wolai-search-result-row{width:100%;min-height:54px;display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit}
+.wolai-search-result-row:hover{background:rgba(55,53,47,.08)}
+.wolai-search-source-group{border-radius:4px}
+.wolai-search-source-group + .wolai-search-source-group{margin-top:4px}
+.wolai-search-source-header{width:100%;min-height:46px;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:#37352F;cursor:pointer;text-align:left;font:inherit}
+.wolai-search-source-header:hover{background:rgba(55,53,47,.08)}
+.wolai-search-source-main{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:3px}
+.wolai-search-source-results{padding-left:18px}
+.wolai-search-source-results[hidden]{display:none!important}
+.wolai-search-source-chevron{flex:0 0 auto;margin-top:2px;color:#8B8780;font-size:11px;line-height:1.35}
+.wolai-search-result-icon{width:18px;height:18px;margin-top:2px;color:#8B8780}
+.wolai-search-result-main{min-width:0;display:flex;flex-direction:column;gap:3px}
+.wolai-search-result-title{color:#2F2D29;font-size:14px;line-height:1.35;word-break:break-word}
+.wolai-search-result-title mark,.wolai-search-result-snippet mark{padding:0 1px;border-radius:2px;background:#FFE9E6;color:#D83A32}
+.wolai-search-result-snippet,.wolai-search-empty{color:#8B8780;font-size:12px;line-height:1.35}
+.wolai-search-result-path{display:flex;align-items:center;gap:8px;color:#A09B93;font-size:11px;line-height:1.3;min-width:0}
+.wolai-search-result-path span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.wolai-search-result-type{flex:0 0 auto;padding:1px 5px;border-radius:4px;background:rgba(55,53,47,.06);color:#6F6A63;text-transform:uppercase;font-size:10px;letter-spacing:0}
+.wolai-search-empty,.wolai-search-recent{padding:28px 12px 32px;text-align:center;color:#8B8780;font-size:12px;line-height:1.35}
+
+@media (max-width: 768px) {
+  .mnote-sidebar {
+    width: 200px;
+  }
+
+  .mnote-home {
+    padding: 48px 24px;
+  }
+
+  .mnote-home h1 {
+    font-size: 28px;
+  }
+
+  .document-shell-header {
+    padding: 24px 0 0;
+    max-width: 100%;
+  }
+
+  .document-shell-header h1 {
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  #mnote-editor-island {
+    margin: 0 24px;
+    width: auto;
+    padding-bottom: 24px;
+  }
+
+  #mnote-search-shell,
+  #mnote-mindmap-shell {
+    padding: 24px;
+  }
+
+  #mnote-search-shell h1,
+  #mnote-mindmap-shell h1 {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 480px) {
+  .mnote-sidebar {
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--wolai-border);
+  }
+
+  .mnote-shell {
+    flex-direction: column;
+  }
+
+  .mnote-home {
+    padding: 32px 16px;
+  }
+
+  .mnote-home h1 {
+    font-size: 24px;
+  }
+
+  .document-shell-header {
+    padding: 16px 0 0;
+  }
+
+  .document-shell-header h1 {
+    font-size: 24px;
+  }
+
+  #mnote-editor-island {
+    margin: 0 16px;
+    width: auto;
+    padding-bottom: 16px;
+  }
+}
+
+
+html,
+body {
+  background: var(--atelier-document);
+}
+
+body {
+  color: var(--atelier-text);
+  font-family: Inter, var(--wolai-font-sans);
+  letter-spacing: 0;
+}
diff --git a/rust/crates/mnote-web/src/ssr/styles/components/ui-debug.css b/rust/crates/mnote-web/src/ssr/styles/components/ui-debug.css
new file mode 100644
index 00000000..e433bcd4
--- /dev/null
+++ b/rust/crates/mnote-web/src/ssr/styles/components/ui-debug.css
@@ -0,0 +1,362 @@
+/* ===== UI Debug 组件矩阵 ===== */
+.ui-debug-root {
+  --ui-debug-bg: #FFFFFF;
+  --ui-debug-surface: #F8F9FA;
+  --ui-debug-border: #E2E4E9;
+  --ui-debug-text: #1A1D23;
+  --ui-debug-text-secondary: #6B7280;
+  --ui-debug-primary: #2563EB;
+  --ui-debug-primary-hover: #1D4ED8;
+  --ui-debug-primary-active: #1E40AF;
+  --ui-debug-secondary: #6B7280;
+  --ui-debug-secondary-hover: #4B5563;
+  --ui-debug-danger: #DC2626;
+  --ui-debug-success: #16A34A;
+  --ui-debug-warning: #D97706;
+  --ui-debug-radius: 6px;
+  --ui-debug-shadow: 0 4px 12px rgba(0,0,0,.08);
+  --ui-debug-shadow-lg: 0 16px 48px rgba(0,0,0,.16);
+  padding: 24px 32px 64px;
+  max-width: 960px;
+  margin: 0 auto;
+  font-family: var(--wolai-font-sans);
+  color: var(--ui-debug-text);
+}
+
+.ui-debug-root[data-ui-debug-theme="dark"] {
+  --ui-debug-bg: #111827;
+  --ui-debug-surface: #1F2937;
+  --ui-debug-border: #374151;
+  --ui-debug-text: #F9FAFB;
+  --ui-debug-text-secondary: #9CA3AF;
+  --ui-debug-primary: #3B82F6;
+  --ui-debug-primary-hover: #60A5FA;
+  --ui-debug-primary-active: #2563EB;
+  --ui-debug-secondary: #9CA3AF;
+  --ui-debug-secondary-hover: #D1D5DB;
+  --ui-debug-danger: #EF4444;
+  --ui-debug-success: #22C55E;
+  --ui-debug-warning: #F59E0B;
+  --ui-debug-shadow: 0 4px 12px rgba(0,0,0,.3);
+  --ui-debug-shadow-lg: 0 16px 48px rgba(0,0,0,.5);
+  background: var(--ui-debug-bg);
+}
+
+.ui-debug-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--ui-debug-border);
+}
+
+.ui-debug-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--ui-debug-text);
+  margin: 0;
+}
+
+.ui-debug-theme-controls {
+  display: flex;
+  gap: 6px;
+}
+
+.ui-debug-theme-btn {
+  padding: 5px 14px;
+  border: 1px solid var(--ui-debug-border);
+  border-radius: var(--ui-debug-radius);
+  background: var(--ui-debug-surface);
+  color: var(--ui-debug-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.ui-debug-theme-btn:hover {
+  background: var(--ui-debug-border);
+}
+
+.ui-debug-theme-btn--active {
+  background: var(--ui-debug-primary);
+  color: #fff;
+  border-color: var(--ui-debug-primary);
+}
+
+.ui-debug-section {
+  margin-bottom: 32px;
+  padding: 18px;
+  border: 1px solid var(--ui-debug-border);
+  border-radius: 8px;
+  background: var(--ui-debug-surface);
+}
+
+.ui-debug-section-title {
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--ui-debug-text-secondary);
+  margin: 0 0 14px 0;
+}
+
+.ui-debug-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* ─── Button Matrix ─── */
+.ui-debug-matrix {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.ui-debug-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--ui-debug-radius);
+  font-family: var(--wolai-font-sans);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 120ms ease;
+  white-space: nowrap;
+}
+
+.ui-debug-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
+.ui-debug-btn--md { height: 36px; padding: 0 16px; font-size: 13px; }
+.ui-debug-btn--lg { height: 44px; padding: 0 22px; font-size: 15px; }
+
+/* primary */
+.ui-debug-btn--primary { background: var(--ui-debug-primary); color: #fff; }
+.ui-debug-btn--primary:hover { background: var(--ui-debug-primary-hover); }
+.ui-debug-btn--primary:active { background: var(--ui-debug-primary-active); }
+.ui-debug-btn--primary:disabled,
+.ui-debug-btn--primary[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; }
+
+/* secondary */
+.ui-debug-btn--secondary { background: var(--ui-debug-secondary); color: #fff; }
+.ui-debug-btn--secondary:hover { background: var(--ui-debug-secondary-hover); }
+.ui-debug-btn--secondary:active { filter: brightness(.9); }
+.ui-debug-btn--secondary:disabled,
+.ui-debug-btn--secondary[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; }
+
+/* outline */
+.ui-debug-btn--outline { background: transparent; color: var(--ui-debug-text); border-color: var(--ui-debug-border); }
+.ui-debug-btn--outline:hover { background: var(--ui-debug-border); }
+.ui-debug-btn--outline:active { background: rgba(0,0,0,.12); }
+.ui-debug-btn--outline:disabled,
+.ui-debug-btn--outline[data-ui-debug-state="disabled"] { opacity: .45; cursor: not-allowed; }
+
+/* state data attributes */
+.ui-debug-btn[data-ui-debug-state="hover"] { filter: brightness(1.08); }
+.ui-debug-btn[data-ui-debug-state="active"] { filter: brightness(.88); }
+
+/* ─── Dialog/Modal ─── */
+.ui-debug-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wolai-z-modal);
+  display: grid;
+  place-items: center;
+  background: rgba(0,0,0,.32);
+}
+
+.ui-debug-dialog-overlay[hidden] { display: none; }
+
+.ui-debug-dialog-panel {
+  position: relative;
+  width: min(440px, calc(100vw - 32px));
+  max-height: calc(100vh - 48px);
+  overflow: auto;
+  border: 1px solid var(--ui-debug-border);
+  border-radius: 10px;
+  background: var(--ui-debug-bg);
+  box-shadow: var(--ui-debug-shadow-lg);
+  padding: 20px;
+}
+
+.ui-debug-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.ui-debug-dialog-title {
+  font-size: 17px;
+  font-weight: 650;
+  margin: 0;
+}
+
+.ui-debug-dialog-close {
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ui-debug-text-secondary);
+  cursor: pointer;
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-debug-dialog-close:hover { background: var(--ui-debug-border); }
+
+.ui-debug-dialog-body {
+  font-size: 14px;
+  color: var(--ui-debug-text-secondary);
+  margin: 0 0 18px 0;
+  line-height: 1.5;
+}
+
+.ui-debug-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ─── Popover / DropdownMenu ─── */
+.ui-debug-popover-host {
+  position: relative;
+  display: inline-block;
+}
+
+.ui-debug-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: var(--wolai-z-dropdown);
+  min-width: 180px;
+  padding: 4px;
+  border: 1px solid var(--ui-debug-border);
+  border-radius: 8px;
+  background: var(--ui-debug-bg);
+  box-shadow: var(--ui-debug-shadow);
+}
+
+.ui-debug-popover[hidden] { display: none; }
+
+.ui-debug-popover-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--ui-debug-text);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.ui-debug-popover-item:hover { background: var(--ui-debug-border); }
+
+.ui-debug-popover-item--danger { color: var(--ui-debug-danger); }
+
+.ui-debug-popover-item--check { cursor: pointer; }
+.ui-debug-popover-item--check input[type="checkbox"] { margin: 0; accent-color: var(--ui-debug-primary); }
+
+.ui-debug-popover-separator {
+  height: 1px;
+  margin: 4px 8px;
+  border: 0;
+  background: var(--ui-debug-border);
+}
+
+/* ─── Toast ─── */
+.ui-debug-toast-container {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: var(--wolai-z-modal);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.ui-debug-toast {
+  padding: 10px 18px;
+  border-radius: var(--ui-debug-radius);
+  font-size: 13px;
+  font-weight: 500;
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: all 200ms ease;
+  box-shadow: var(--ui-debug-shadow);
+}
+
+.ui-debug-toast--visible { opacity: 1; transform: translateY(0); }
+
+.ui-debug-toast--info { background: #DBEAFE; color: #1E40AF; }
+.ui-debug-toast--success { background: #DCFCE7; color: #16A34A; }
+.ui-debug-toast--error { background: #FEE2E2; color: #DC2626; }
+.ui-debug-toast--warning { background: #FEF3C7; color: #D97706; }
+
+/* dark toast variants */
+.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--info { background: #1E3A5F; color: #93C5FD; }
+.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--success { background: #14532D; color: #86EFAC; }
+.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--error { background: #450A0A; color: #FCA5A5; }
+.ui-debug-root[data-ui-debug-theme="dark"] .ui-debug-toast--warning { background: #451A03; color: #FCD34D; }
+
+/* ─── Form Elements ─── */
+.ui-debug-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.ui-debug-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.ui-debug-field--wide { grid-column: span 2; }
+
+.ui-debug-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-debug-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+
+.ui-debug-input, .ui-debug-select, .ui-debug-textarea {
+  height: 36px;
+  padding: 6px 10px;
+  border: 1px solid var(--ui-debug-border);
+  border-radius: var(--ui-debug-radius);
+  background: var(--ui-debug-bg);
+  color: var(--ui-debug-text);
+  font-size: 13px;
+  font-family: var(--wolai-font-sans);
+  transition: border-color 120ms ease;
+}
+
+.ui-debug-input:focus, .ui-debug-select:focus, .ui-debug-textarea:focus {
+  outline: none;
+  border-color: var(--ui-debug-primary);
+  box-shadow: var(--wolai-state-focus-ring);
+}
+
+.ui-debug-input:disabled { opacity: .45; cursor: not-allowed; }
+.ui-debug-textarea { height: auto; resize: vertical; }
+.ui-debug-select { cursor: pointer; }
+
+/* ─── responsive ─── */
+@media (max-width: 640px) {
+  .ui-debug-matrix { grid-template-columns: 1fr; }
+  .ui-debug-form-grid { grid-template-columns: 1fr; }
+  .ui-debug-field--wide { grid-column: span 1; }
+  .ui-debug-header { flex-direction: column; gap: 10px; align-items: flex-start; }
+}
+
diff --git a/rust/crates/mnote-web/src/ssr/styles/tokens.css b/rust/crates/mnote-web/src/ssr/styles/tokens.css
index e0b37b64..430d83d7 100644
--- a/rust/crates/mnote-web/src/ssr/styles/tokens.css
+++ b/rust/crates/mnote-web/src/ssr/styles/tokens.css
@@ -26,6 +26,29 @@
   --wolai-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Helvetica, Arial, sans-serif;
   --wolai-radius: 4px;
 
+  /* font-size scale */
+  --mnote-font-size-2xs: 10px;
+  --mnote-font-size-xs:  11px;
+  --mnote-font-size-sm:  12px;
+  --mnote-font-size-md:  13px;
+  --mnote-font-size-base: 14px;
+  --mnote-font-size-lg:  16px;
+  --mnote-font-size-xl:  18px;
+  --mnote-font-size-2xl: 20px;
+  --mnote-font-size-3xl: 24px;
+  --mnote-font-size-4xl: 28px;
+
+  /* font-weight tokens */
+  --mnote-font-weight-normal: 400;
+  --mnote-font-weight-medium: 500;
+  --mnote-font-weight-semibold: 600;
+  --mnote-font-weight-bold: 700;
+
+  /* line-height tokens */
+  --mnote-line-height-tight: 1.25;
+  --mnote-line-height-normal: 1.5;
+  --mnote-line-height-relaxed: 1.75;
+
   /* z-index tokens */
   --wolai-z-dock: 50;
   --wolai-z-popover: 90;
@@ -53,6 +76,58 @@
   --wolai-state-active-bg: rgba(55, 53, 47, 0.10);
   --wolai-state-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.35);
   --wolai-state-disabled-opacity: 0.45;
+
+  /* ===== component tokens: button ===== */
+  --mnote-btn-font-family: var(--wolai-font-sans);
+  --mnote-btn-font-weight: var(--mnote-font-weight-medium);
+  --mnote-btn-line-height: var(--mnote-line-height-tight);
+  --mnote-btn-radius: var(--wolai-radius);
+  --mnote-btn-transition: all 120ms ease;
+
+  /* btn size tokens */
+  --mnote-btn-sm-height: 28px;
+  --mnote-btn-sm-padding: 0 10px;
+  --mnote-btn-sm-font-size: var(--mnote-font-size-sm);
+  --mnote-btn-md-height: 34px;
+  --mnote-btn-md-padding: 0 14px;
+  --mnote-btn-md-font-size: var(--mnote-font-size-md);
+  --mnote-btn-lg-height: 42px;
+  --mnote-btn-lg-padding: 0 20px;
+  --mnote-btn-lg-font-size: var(--mnote-font-size-lg);
+
+  /* btn variant: primary */
+  --mnote-btn-primary-bg: var(--wolai-accent);
+  --mnote-btn-primary-color: #FFFFFF;
+  --mnote-btn-primary-hover-bg: var(--wolai-accent-hover);
+  --mnote-btn-primary-active-bg: #1e40af;
+  --mnote-btn-primary-disabled-opacity: 0.45;
+
+  /* btn variant: secondary */
+  --mnote-btn-secondary-bg: var(--color-basic-600);
+  --mnote-btn-secondary-color: #FFFFFF;
+  --mnote-btn-secondary-hover-bg: var(--color-basic-700);
+  --mnote-btn-secondary-disabled-opacity: 0.45;
+
+  /* btn variant: outline */
+  --mnote-btn-outline-bg: transparent;
+  --mnote-btn-outline-color: var(--wolai-text-primary);
+  --mnote-btn-outline-border: var(--wolai-border);
+  --mnote-btn-outline-hover-bg: var(--wolai-bg-hover);
+  --mnote-btn-outline-active-bg: var(--wolai-bg-active);
+  --mnote-btn-outline-disabled-opacity: 0.45;
+
+  /* btn variant: ghost */
+  --mnote-btn-ghost-bg: transparent;
+  --mnote-btn-ghost-color: var(--wolai-text-secondary);
+  --mnote-btn-ghost-hover-bg: var(--wolai-bg-hover);
+  --mnote-btn-ghost-active-bg: var(--wolai-bg-active);
+  --mnote-btn-ghost-disabled-opacity: 0.45;
+
+  /* btn variant: danger */
+  --mnote-btn-danger-bg: #DC2626;
+  --mnote-btn-danger-color: #FFFFFF;
+  --mnote-btn-danger-hover-bg: #B91C1C;
+  --mnote-btn-danger-disabled-opacity: 0.45;
 }
 
 /* Stitch 260429 atelier tokens */
@@ -71,4 +146,3 @@
   --atelier-secondary: #2367F6;
   --atelier-shadow: 0 16px 32px rgba(27, 28, 28, 0.04);
 }
-