From 82f0d9df6b3d6a6e2a5394538107a6eee8f8410f Mon Sep 17 00:00:00 2001
From: dazhi <dazhi@minimaxi.com>
Date: Thu, 12 Nov 2026 17:07:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(minimax-pet):=200.8.0=20=E6=8C=89=20design?=
 =?UTF-8?q?=20=E8=A7=84=E5=88=99=E5=AF=B9=E9=BD=90=E5=AD=97=E5=8F=B7?=
 =?UTF-8?q?=E4=B8=8E=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 面板页边距、区块间距收敛到 24px，区块内 16px；外观预览区圆角 16px → 12px，
  宠物卡片 10px → 12px、内边距 12px。
- 正文 14px/22px：任务行、提醒标题、勾选项；辅助文字 12px/18px（.muted/.msg/.note），
  设置页标题 16px/24px。
- 控件最小高度 32px：.btn.small、任务筛选、提醒静音按钮；桌面卡片关闭按钮补到 32px 触达区。
- 桌面浮层（气泡、通知卡、菜单）改用 0.5px 描边；通知卡圆角 10px → 12px。
- 补齐按下态（.btn:active、.chip:active、.menu-item:active），
  prefers-reduced-motion 下保留颜色/透明度反馈而不是全部关闭。
- 版本 0.8.0，README（中英）补充说明。
---
 .../minimax-pet/.minimax-plugin/plugin.json   |   2 +-
 plugins/minimax-ai/minimax-pet/README.md      |   2 +
 .../minimax-ai/minimax-pet/README.zh-CN.md    |   2 +
 .../minimax-pet/miniapp/client/index.html     |   2 +-
 .../minimax-pet/miniapp/client/pet.css        | 105 ++++++++++--------
 .../minimax-pet/.minimax-plugin/plugin.json   |   2 +-
 sources/minimax-ai/minimax-pet/README.md      |   2 +
 .../minimax-ai/minimax-pet/README.zh-CN.md    |   2 +
 .../minimax-pet/miniapp/client/index.html     |   2 +-
 .../minimax-pet/miniapp/client/pet.css        | 105 ++++++++++--------
 .../minimax-ai/minimax-pet/package-lock.json  |   4 +-
 sources/minimax-ai/minimax-pet/package.json   |   2 +-
 12 files changed, 137 insertions(+), 95 deletions(-)

diff --git a/plugins/minimax-ai/minimax-pet/.minimax-plugin/plugin.json b/plugins/minimax-ai/minimax-pet/.minimax-plugin/plugin.json
index d2e449a..db1d5a2 100644
--- a/plugins/minimax-ai/minimax-pet/.minimax-plugin/plugin.json
+++ b/plugins/minimax-ai/minimax-pet/.minimax-plugin/plugin.json
@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "name": "minimax-pet",
   "displayName": "MiniMax Pet",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "轻量桌宠，聚合主窗口可见会话的任务状态、需要回答的提醒和最新结果，支持外观切换及图集导入。",
   "author": "MiniMax",
   "icon": "icon.png",
diff --git a/plugins/minimax-ai/minimax-pet/README.md b/plugins/minimax-ai/minimax-pet/README.md
index 3f1508e..f29b9bd 100644
--- a/plugins/minimax-ai/minimax-pet/README.md
+++ b/plugins/minimax-ai/minimax-pet/README.md
@@ -15,6 +15,8 @@ A lightweight desktop companion for MiniMax Code, by **MiniMax**. It shows visib
 
 The pet does not run Agent turns, create independent chats, write to chat inputs, comment on every session, stop tasks, or answer questionnaires. Selecting a task only reads its details; the main window switches only when you click **打开对话** or **去回答**.
 
+Version **0.8.0** aligns the panel with the MiniMax Code design language: 24px page margins and section gaps, 14px/22px body copy with 12px/18px supporting text, 32px minimum control height, 12px cards and 8px controls, 0.5px borders on desktop overlays, and press/focus states. The desktop pet keeps its 280px layout with the same tokens.
+
 Version **0.7.0** renders each task's latest reply as Markdown: headings, emphasis, lists, task lists, fenced code, tables, quotes and links, with raw HTML shown as inert text and images as a label instead of a remote request. Notification cards and reminder previews stay plain text. Parsing uses a vendored bundle of unified, remark-parse and remark-gfm (MIT) built by `npm run build:markdown`; the page never builds an HTML string from model output. The bundle makes no network request and runs entirely in the page.
 
 Version **0.6.0** removes the **打招呼** (wave) and **跳一下** (jump) actions from the menu and the appearance page, and removes the original-chat draft with its voice input; the package no longer requests the microphone. It adds **打开对话** / **去回答** and the client theme. The supported baseline stays MiniMax Code 3.1.6: both additions are feature-detected and need no new access.
diff --git a/plugins/minimax-ai/minimax-pet/README.zh-CN.md b/plugins/minimax-ai/minimax-pet/README.zh-CN.md
index 8e56706..45f799b 100644
--- a/plugins/minimax-ai/minimax-pet/README.zh-CN.md
+++ b/plugins/minimax-ai/minimax-pet/README.zh-CN.md
@@ -16,6 +16,8 @@
 
 **0.5.11** 新增可选内置宠物 **MMX 章鱼娘**，是一位橙发、白背心、棕格纹短裙的 Q 版全身章鱼娘。在“外观 → 选择宠物”中选择她即可；薄荷色机器人仍为默认宠物。她采用 v1 图集，包含九种动作，不含十六个视线方向，因此鼠标跟随对她不生效；沿用六帧、6.6 秒一轮的慢速待机，不新增权限或改变播放器。图集已通过校验。创作流程和贡献者许可见[素材说明](ARTWORK.md)。
 
+**0.8.0** 按 MiniMax Code 的设计语言对齐面板：24px 页边距与区块间距、14px/22px 正文与 12px/18px 辅助文字、控件最小高度 32px、卡片 12px 与控件 8px 圆角、桌面浮层 0.5px 描边，并补齐按下与焦点状态。桌面宠物保持 280px 布局，沿用同一套 token。
+
 **0.7.0** 把任务最近回复按 Markdown 渲染：标题、强调、列表、任务清单、代码块、表格、引用和链接；回复里的原始 HTML 只作为文本显示，图片显示为文字标签而不发起网络请求。通知卡片和提醒预览仍为纯文本。解析使用 `npm run build:markdown` 打包的 unified + remark-parse + remark-gfm（MIT）；页面不会把模型输出拼成 HTML 字符串。
 
 **0.6.0** 删除了菜单和外观页里的“打招呼”“跳一下”，删除了原属聊天草稿及其语音输入，不再申请麦克风权限；新增“打开对话／去回答”和主题跟随。支持基线仍为 MiniMax Code 3.1.6：两项新功能都先检测客户端能力，不需要新增权限。
diff --git a/plugins/minimax-ai/minimax-pet/miniapp/client/index.html b/plugins/minimax-ai/minimax-pet/miniapp/client/index.html
index 7f1f217..5f6a102 100644
--- a/plugins/minimax-ai/minimax-pet/miniapp/client/index.html
+++ b/plugins/minimax-ai/minimax-pet/miniapp/client/index.html
@@ -157,7 +157,7 @@ <h2 id="connection-title">任务连接</h2>
             <details class="panel-help">
               <summary>版本与帮助</summary>
               <div class="help-content">
-                <p class="muted">MiniMax Pet 0.7.0</p>
+                <p class="muted">MiniMax Pet 0.8.0</p>
                 <div class="row">
                   <span id="version-badge" class="badge" hidden></span>
                   <span id="source-badge" class="badge"></span>
diff --git a/plugins/minimax-ai/minimax-pet/miniapp/client/pet.css b/plugins/minimax-ai/minimax-pet/miniapp/client/pet.css
index 409b8a1..f417bc5 100644
--- a/plugins/minimax-ai/minimax-pet/miniapp/client/pet.css
+++ b/plugins/minimax-ai/minimax-pet/miniapp/client/pet.css
@@ -269,13 +269,19 @@ h2 {
 .btn.primary:hover {
   opacity: 0.86;
 }
+.btn:active:not(:disabled) {
+  background: var(--mcode-bg-secondary);
+}
+.btn.primary:active:not(:disabled) {
+  opacity: 0.75;
+}
 .btn.danger {
   color: var(--mcode-danger);
 }
 .btn.small {
-  height: 28px;
+  height: 32px;
   padding: 0 10px;
-  font-size: 12px;
+  font-size: 13px;
 }
 .btn:disabled {
   opacity: 0.45;
@@ -367,7 +373,7 @@ h2 {
   border-radius: 6px;
   color: var(--mcode-text-muted);
   font-size: 13px;
-  line-height: 22px;
+  line-height: 24px;
   transition: background-color 150ms ease-out;
 }
 .seg-option input:checked + span {
@@ -390,7 +396,7 @@ h2 {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--mcode-text-muted);
 }
 
@@ -655,7 +661,7 @@ html.mode-window .pet-sprite:focus-visible {
   min-height: 0;
   overflow-y: auto;
   padding: 6px 12px;
-  border: 1px solid var(--mcode-border);
+  border: 0.5px solid var(--mcode-border);
   border-radius: 12px;
   background: var(--mcode-surface);
   color: var(--mcode-text);
@@ -712,7 +718,8 @@ html.mode-window .pet-sprite:focus-visible {
   cursor: pointer;
   transition: background-color 150ms ease-out;
 }
-.chip:hover {
+.chip:hover,
+.chip:active {
   background: var(--mcode-bg-secondary);
 }
 .chip:disabled {
@@ -728,7 +735,7 @@ html.mode-window .pet-sprite:focus-visible {
   max-height: calc(100% - 8px);
   overflow-y: auto;
   padding: 4px;
-  border: 1px solid var(--mcode-border);
+  border: 0.5px solid var(--mcode-border);
   border-radius: 12px;
   background: var(--mcode-surface);
   box-shadow: var(--pet-bubble-shadow);
@@ -750,7 +757,8 @@ html.mode-window .pet-sprite:focus-visible {
   cursor: pointer;
 }
 .menu-item:hover,
-.menu-item:focus {
+.menu-item:focus,
+.menu-item:active {
   outline: none;
   background: var(--mcode-bg-secondary);
 }
@@ -787,7 +795,12 @@ html.mode-window .pet-sprite:focus-visible {
   *,
   *::before,
   *::after {
-    transition: none !important;
+    /* Colour and opacity feedback stays; movement and long transitions do not. */
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-property: background-color, color, opacity, border-color, box-shadow;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
   }
 }
 
@@ -824,31 +837,31 @@ html.mode-window .pet-sprite:focus-visible {
   font-size: 12px;
   line-height: 18px;
 }
-.compact-header { display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding: 2px 8px 0 10px; gap: 6px; }
+.compact-header { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 6px 0 10px; gap: 6px; }
 .compact-state { color: var(--mcode-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .compact-button { border: 0; border-radius: 6px; background: transparent; color: var(--mcode-text); font: inherit; cursor: pointer; padding: 3px 6px; }
 .compact-button:hover { background: var(--mcode-bg-secondary); }
 .compact-button:disabled { opacity: .4; cursor: default; }
-.compact-close { color: var(--mcode-text-muted); margin-left: auto; font-size: 17px; padding: 0 5px; }
+.compact-close { color: var(--mcode-text-muted); margin-left: auto; font-size: 17px; padding: 0 5px; min-width: 32px; min-height: 32px; }
 .compact-body { min-height: 0; overflow: auto; padding: 2px 10px 8px; }
-.compact-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--mcode-text-muted); margin: 5px 0; font-size: 11px; line-height: 16px; }
+.compact-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--mcode-text-muted); margin: 4px 0; font-size: 12px; line-height: 16px; }
 .compact-hint[data-kind='error'] { color: var(--mcode-danger); }
 .compact-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
-.compact-link { color: var(--mcode-text-muted); font-size: 11px; }
+.compact-link { color: var(--mcode-text-muted); font-size: 12px; line-height: 16px; }
 .compact-task-list { list-style: none; margin: 0; padding: 0; }
 .compact-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 4px; padding: 3px 0; }
 .compact-task + .compact-task { border-top: 1px solid var(--mcode-border); }
 .compact-task-title { text-align: left; padding-left: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.compact-task-status { justify-self: end; padding-inline: 6px; text-align: right; white-space: nowrap; color: var(--mcode-text-muted); font-size: 10px; }
+.compact-task-status { justify-self: end; padding-inline: 6px; text-align: right; white-space: nowrap; color: var(--mcode-text-muted); font-size: 11px; line-height: 16px; }
 .compact-task-preview { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0; color: var(--mcode-text-muted); font-size: 11px; line-height: 16px; }
 .compact-empty { color: var(--mcode-text-muted); padding: 8px 0; }
 .notification-stack { display: flex; flex-direction: column-reverse; gap: 5px; width: 248px; max-height: 216px; overflow-y: auto; }
-.pet-notice { display: flex; align-items: start; border: 1px solid var(--mcode-border); border-radius: 10px; background: var(--mcode-surface); box-shadow: var(--pet-bubble-shadow); padding: 6px 7px 6px 10px; flex: none; }
-.pet-notice-open { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mcode-text); text-align: left; font: inherit; font-size: 12px; line-height: 17px; padding: 0; cursor: pointer; }
+.pet-notice { display: flex; align-items: start; border: 0.5px solid var(--mcode-border); border-radius: 12px; background: var(--mcode-surface); box-shadow: var(--pet-bubble-shadow); padding: 6px 7px 6px 10px; flex: none; }
+.pet-notice-open { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mcode-text); text-align: left; font: inherit; font-size: 12px; line-height: 16px; padding: 0; cursor: pointer; }
 .pet-notice-open strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
 .pet-notice-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; color: var(--mcode-text-muted); overflow-wrap: anywhere; }
-.compact-detail-title { margin: 0; font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.compact-detail-status { margin: 2px 0 2px 6px; font-size: 11px; line-height: 16px; color: var(--mcode-text-muted); }
+.compact-detail-title { margin: 0; font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.compact-detail-status { margin: 2px 0 2px 6px; font-size: 12px; line-height: 16px; color: var(--mcode-text-muted); }
 .compact-detail-reply { margin: 5px 0; max-height: 126px; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
 /* The desktop card is 280px wide; keep the same structure at a tighter scale. */
 .compact-detail-reply.md { font-size: 12px; line-height: 17px; text-align: left; }
@@ -861,8 +874,8 @@ html.mode-window .pet-sprite:focus-visible {
 .compact-detail-reply.md .md-pre { padding: 6px 8px; }
 .compact-detail-reply.md .md-table th,
 .compact-detail-reply.md .md-table td { padding: 3px 6px; font-size: 11px; }
-.compact-detail-back { color: var(--mcode-text-muted); font-size: 11px; }
-.compact-open { font-size: 11px; font-weight: 600; }
+.compact-detail-back { color: var(--mcode-text-muted); font-size: 12px; line-height: 16px; }
+.compact-open { font-size: 12px; font-weight: 600; }
 .pet-notice-dismiss { flex: none; border: 0; background: transparent; color: var(--mcode-text-muted); cursor: pointer; font-size: 15px; padding: 0 2px 0 6px; }
 .reminder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
 .reminder-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; padding: 8px; border-radius: 8px; background: var(--mcode-bg-secondary); }
@@ -1068,7 +1081,7 @@ html.mode-inline body {
   flex: none;
   flex-wrap: nowrap;
   align-items: center;
-  padding: 24px 28px 18px;
+  padding: 24px 24px 16px;
 }
 
 #panel .panel-title {
@@ -1090,7 +1103,7 @@ html.mode-inline body {
   display: flex;
   flex: none;
   gap: 24px;
-  padding: 0 28px;
+  padding: 0 24px;
   border-bottom: 1px solid var(--mcode-border);
 }
 
@@ -1118,11 +1131,11 @@ html.mode-inline body {
 #panel .tab-count {
   min-width: 18px;
   padding: 0 5px;
-  border-radius: 6px;
+  border-radius: 999px;
   background: var(--mcode-bg-secondary);
   color: var(--mcode-text-muted);
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 #panel > .note,
@@ -1142,7 +1155,7 @@ html.mode-inline body {
   height: 100%;
   min-width: 0;
   min-height: 0;
-  padding: 28px;
+  padding: 24px;
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
@@ -1160,7 +1173,7 @@ html.mode-inline body {
   display: grid;
   grid-template-columns: minmax(200px, .85fr) minmax(0, 1.15fr);
   align-items: start;
-  gap: 32px;
+  gap: 24px;
 }
 
 #panel .appearance-preview {
@@ -1169,8 +1182,8 @@ html.mode-inline body {
   align-items: center;
   gap: 8px;
   min-width: 0;
-  padding: 16px 16px 24px;
-  border-radius: 16px;
+  padding: 16px;
+  border-radius: 12px;
   background: var(--mcode-bg-secondary);
   text-align: center;
 }
@@ -1196,7 +1209,7 @@ html.mode-inline body {
 #panel .stage-status {
   max-width: 100%;
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
   overflow-wrap: anywhere;
 }
 
@@ -1210,7 +1223,7 @@ html.mode-inline body {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin: 2px 0 18px;
+  margin: 0 0 16px;
 }
 
 #panel .gallery {
@@ -1221,8 +1234,8 @@ html.mode-inline body {
 #panel .pet-card {
   flex-direction: column;
   min-width: 0;
-  padding: 14px 10px;
-  border-radius: 10px;
+  padding: 12px;
+  border-radius: 12px;
 }
 
 #panel .pet-pick {
@@ -1268,7 +1281,7 @@ html.mode-inline body {
 #panel .inline-subview {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
@@ -1308,7 +1321,7 @@ html.mode-inline body {
 #panel .task-page {
   display: flex;
   overflow: hidden;
-  padding: 20px 28px 0;
+  padding: 24px 24px 0;
 }
 
 #panel .activity-layout {
@@ -1339,8 +1352,8 @@ html.mode-inline body {
 }
 
 #panel .task-filters .btn {
-  height: 28px;
-  padding-inline: 10px;
+  height: 32px;
+  padding-inline: 12px;
   border: 0;
   background: transparent;
   color: var(--mcode-text-muted);
@@ -1356,7 +1369,7 @@ html.mode-inline body {
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 #panel .task-panes {
@@ -1378,7 +1391,7 @@ html.mode-inline body {
 }
 
 #panel .task-list-note {
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 #panel .session-list {
@@ -1396,9 +1409,11 @@ html.mode-inline body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: start;
-  gap: 3px 12px;
+  gap: 4px 12px;
   min-height: 52px;
   padding: 12px 8px;
+  font-size: 14px;
+  line-height: 22px;
 }
 
 #panel .session-row[aria-current='true'] {
@@ -1444,10 +1459,12 @@ html.mode-inline body {
 }
 
 #panel .reminder-item {
-  gap: 6px 12px;
+  gap: 8px 12px;
   padding: 12px 8px;
   border-radius: 0;
   background: transparent;
+  font-size: 14px;
+  line-height: 22px;
 }
 
 #panel .reminder-title {
@@ -1466,7 +1483,7 @@ html.mode-inline body {
 }
 
 #panel .reminder-item .btn {
-  height: 24px;
+  height: 32px;
   padding-inline: 0;
   border: 0;
   background: transparent;
@@ -1507,7 +1524,7 @@ html.mode-inline body {
   gap: 4px 16px;
   color: var(--mcode-text-muted);
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 #panel #detail-note,
@@ -1555,8 +1572,8 @@ html.mode-inline body {
 
 #panel .setting-copy h2 {
   margin-bottom: 4px;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 #panel .setting-copy p {
diff --git a/sources/minimax-ai/minimax-pet/.minimax-plugin/plugin.json b/sources/minimax-ai/minimax-pet/.minimax-plugin/plugin.json
index d2e449a..db1d5a2 100644
--- a/sources/minimax-ai/minimax-pet/.minimax-plugin/plugin.json
+++ b/sources/minimax-ai/minimax-pet/.minimax-plugin/plugin.json
@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "name": "minimax-pet",
   "displayName": "MiniMax Pet",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "轻量桌宠，聚合主窗口可见会话的任务状态、需要回答的提醒和最新结果，支持外观切换及图集导入。",
   "author": "MiniMax",
   "icon": "icon.png",
diff --git a/sources/minimax-ai/minimax-pet/README.md b/sources/minimax-ai/minimax-pet/README.md
index 3f1508e..f29b9bd 100644
--- a/sources/minimax-ai/minimax-pet/README.md
+++ b/sources/minimax-ai/minimax-pet/README.md
@@ -15,6 +15,8 @@ A lightweight desktop companion for MiniMax Code, by **MiniMax**. It shows visib
 
 The pet does not run Agent turns, create independent chats, write to chat inputs, comment on every session, stop tasks, or answer questionnaires. Selecting a task only reads its details; the main window switches only when you click **打开对话** or **去回答**.
 
+Version **0.8.0** aligns the panel with the MiniMax Code design language: 24px page margins and section gaps, 14px/22px body copy with 12px/18px supporting text, 32px minimum control height, 12px cards and 8px controls, 0.5px borders on desktop overlays, and press/focus states. The desktop pet keeps its 280px layout with the same tokens.
+
 Version **0.7.0** renders each task's latest reply as Markdown: headings, emphasis, lists, task lists, fenced code, tables, quotes and links, with raw HTML shown as inert text and images as a label instead of a remote request. Notification cards and reminder previews stay plain text. Parsing uses a vendored bundle of unified, remark-parse and remark-gfm (MIT) built by `npm run build:markdown`; the page never builds an HTML string from model output. The bundle makes no network request and runs entirely in the page.
 
 Version **0.6.0** removes the **打招呼** (wave) and **跳一下** (jump) actions from the menu and the appearance page, and removes the original-chat draft with its voice input; the package no longer requests the microphone. It adds **打开对话** / **去回答** and the client theme. The supported baseline stays MiniMax Code 3.1.6: both additions are feature-detected and need no new access.
diff --git a/sources/minimax-ai/minimax-pet/README.zh-CN.md b/sources/minimax-ai/minimax-pet/README.zh-CN.md
index 8e56706..45f799b 100644
--- a/sources/minimax-ai/minimax-pet/README.zh-CN.md
+++ b/sources/minimax-ai/minimax-pet/README.zh-CN.md
@@ -16,6 +16,8 @@
 
 **0.5.11** 新增可选内置宠物 **MMX 章鱼娘**，是一位橙发、白背心、棕格纹短裙的 Q 版全身章鱼娘。在“外观 → 选择宠物”中选择她即可；薄荷色机器人仍为默认宠物。她采用 v1 图集，包含九种动作，不含十六个视线方向，因此鼠标跟随对她不生效；沿用六帧、6.6 秒一轮的慢速待机，不新增权限或改变播放器。图集已通过校验。创作流程和贡献者许可见[素材说明](ARTWORK.md)。
 
+**0.8.0** 按 MiniMax Code 的设计语言对齐面板：24px 页边距与区块间距、14px/22px 正文与 12px/18px 辅助文字、控件最小高度 32px、卡片 12px 与控件 8px 圆角、桌面浮层 0.5px 描边，并补齐按下与焦点状态。桌面宠物保持 280px 布局，沿用同一套 token。
+
 **0.7.0** 把任务最近回复按 Markdown 渲染：标题、强调、列表、任务清单、代码块、表格、引用和链接；回复里的原始 HTML 只作为文本显示，图片显示为文字标签而不发起网络请求。通知卡片和提醒预览仍为纯文本。解析使用 `npm run build:markdown` 打包的 unified + remark-parse + remark-gfm（MIT）；页面不会把模型输出拼成 HTML 字符串。
 
 **0.6.0** 删除了菜单和外观页里的“打招呼”“跳一下”，删除了原属聊天草稿及其语音输入，不再申请麦克风权限；新增“打开对话／去回答”和主题跟随。支持基线仍为 MiniMax Code 3.1.6：两项新功能都先检测客户端能力，不需要新增权限。
diff --git a/sources/minimax-ai/minimax-pet/miniapp/client/index.html b/sources/minimax-ai/minimax-pet/miniapp/client/index.html
index 7f1f217..5f6a102 100644
--- a/sources/minimax-ai/minimax-pet/miniapp/client/index.html
+++ b/sources/minimax-ai/minimax-pet/miniapp/client/index.html
@@ -157,7 +157,7 @@ <h2 id="connection-title">任务连接</h2>
             <details class="panel-help">
               <summary>版本与帮助</summary>
               <div class="help-content">
-                <p class="muted">MiniMax Pet 0.7.0</p>
+                <p class="muted">MiniMax Pet 0.8.0</p>
                 <div class="row">
                   <span id="version-badge" class="badge" hidden></span>
                   <span id="source-badge" class="badge"></span>
diff --git a/sources/minimax-ai/minimax-pet/miniapp/client/pet.css b/sources/minimax-ai/minimax-pet/miniapp/client/pet.css
index 409b8a1..f417bc5 100644
--- a/sources/minimax-ai/minimax-pet/miniapp/client/pet.css
+++ b/sources/minimax-ai/minimax-pet/miniapp/client/pet.css
@@ -269,13 +269,19 @@ h2 {
 .btn.primary:hover {
   opacity: 0.86;
 }
+.btn:active:not(:disabled) {
+  background: var(--mcode-bg-secondary);
+}
+.btn.primary:active:not(:disabled) {
+  opacity: 0.75;
+}
 .btn.danger {
   color: var(--mcode-danger);
 }
 .btn.small {
-  height: 28px;
+  height: 32px;
   padding: 0 10px;
-  font-size: 12px;
+  font-size: 13px;
 }
 .btn:disabled {
   opacity: 0.45;
@@ -367,7 +373,7 @@ h2 {
   border-radius: 6px;
   color: var(--mcode-text-muted);
   font-size: 13px;
-  line-height: 22px;
+  line-height: 24px;
   transition: background-color 150ms ease-out;
 }
 .seg-option input:checked + span {
@@ -390,7 +396,7 @@ h2 {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--mcode-text-muted);
 }
 
@@ -655,7 +661,7 @@ html.mode-window .pet-sprite:focus-visible {
   min-height: 0;
   overflow-y: auto;
   padding: 6px 12px;
-  border: 1px solid var(--mcode-border);
+  border: 0.5px solid var(--mcode-border);
   border-radius: 12px;
   background: var(--mcode-surface);
   color: var(--mcode-text);
@@ -712,7 +718,8 @@ html.mode-window .pet-sprite:focus-visible {
   cursor: pointer;
   transition: background-color 150ms ease-out;
 }
-.chip:hover {
+.chip:hover,
+.chip:active {
   background: var(--mcode-bg-secondary);
 }
 .chip:disabled {
@@ -728,7 +735,7 @@ html.mode-window .pet-sprite:focus-visible {
   max-height: calc(100% - 8px);
   overflow-y: auto;
   padding: 4px;
-  border: 1px solid var(--mcode-border);
+  border: 0.5px solid var(--mcode-border);
   border-radius: 12px;
   background: var(--mcode-surface);
   box-shadow: var(--pet-bubble-shadow);
@@ -750,7 +757,8 @@ html.mode-window .pet-sprite:focus-visible {
   cursor: pointer;
 }
 .menu-item:hover,
-.menu-item:focus {
+.menu-item:focus,
+.menu-item:active {
   outline: none;
   background: var(--mcode-bg-secondary);
 }
@@ -787,7 +795,12 @@ html.mode-window .pet-sprite:focus-visible {
   *,
   *::before,
   *::after {
-    transition: none !important;
+    /* Colour and opacity feedback stays; movement and long transitions do not. */
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-property: background-color, color, opacity, border-color, box-shadow;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
   }
 }
 
@@ -824,31 +837,31 @@ html.mode-window .pet-sprite:focus-visible {
   font-size: 12px;
   line-height: 18px;
 }
-.compact-header { display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding: 2px 8px 0 10px; gap: 6px; }
+.compact-header { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 6px 0 10px; gap: 6px; }
 .compact-state { color: var(--mcode-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .compact-button { border: 0; border-radius: 6px; background: transparent; color: var(--mcode-text); font: inherit; cursor: pointer; padding: 3px 6px; }
 .compact-button:hover { background: var(--mcode-bg-secondary); }
 .compact-button:disabled { opacity: .4; cursor: default; }
-.compact-close { color: var(--mcode-text-muted); margin-left: auto; font-size: 17px; padding: 0 5px; }
+.compact-close { color: var(--mcode-text-muted); margin-left: auto; font-size: 17px; padding: 0 5px; min-width: 32px; min-height: 32px; }
 .compact-body { min-height: 0; overflow: auto; padding: 2px 10px 8px; }
-.compact-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--mcode-text-muted); margin: 5px 0; font-size: 11px; line-height: 16px; }
+.compact-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--mcode-text-muted); margin: 4px 0; font-size: 12px; line-height: 16px; }
 .compact-hint[data-kind='error'] { color: var(--mcode-danger); }
 .compact-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
-.compact-link { color: var(--mcode-text-muted); font-size: 11px; }
+.compact-link { color: var(--mcode-text-muted); font-size: 12px; line-height: 16px; }
 .compact-task-list { list-style: none; margin: 0; padding: 0; }
 .compact-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 4px; padding: 3px 0; }
 .compact-task + .compact-task { border-top: 1px solid var(--mcode-border); }
 .compact-task-title { text-align: left; padding-left: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.compact-task-status { justify-self: end; padding-inline: 6px; text-align: right; white-space: nowrap; color: var(--mcode-text-muted); font-size: 10px; }
+.compact-task-status { justify-self: end; padding-inline: 6px; text-align: right; white-space: nowrap; color: var(--mcode-text-muted); font-size: 11px; line-height: 16px; }
 .compact-task-preview { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0; color: var(--mcode-text-muted); font-size: 11px; line-height: 16px; }
 .compact-empty { color: var(--mcode-text-muted); padding: 8px 0; }
 .notification-stack { display: flex; flex-direction: column-reverse; gap: 5px; width: 248px; max-height: 216px; overflow-y: auto; }
-.pet-notice { display: flex; align-items: start; border: 1px solid var(--mcode-border); border-radius: 10px; background: var(--mcode-surface); box-shadow: var(--pet-bubble-shadow); padding: 6px 7px 6px 10px; flex: none; }
-.pet-notice-open { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mcode-text); text-align: left; font: inherit; font-size: 12px; line-height: 17px; padding: 0; cursor: pointer; }
+.pet-notice { display: flex; align-items: start; border: 0.5px solid var(--mcode-border); border-radius: 12px; background: var(--mcode-surface); box-shadow: var(--pet-bubble-shadow); padding: 6px 7px 6px 10px; flex: none; }
+.pet-notice-open { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mcode-text); text-align: left; font: inherit; font-size: 12px; line-height: 16px; padding: 0; cursor: pointer; }
 .pet-notice-open strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
 .pet-notice-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; color: var(--mcode-text-muted); overflow-wrap: anywhere; }
-.compact-detail-title { margin: 0; font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.compact-detail-status { margin: 2px 0 2px 6px; font-size: 11px; line-height: 16px; color: var(--mcode-text-muted); }
+.compact-detail-title { margin: 0; font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.compact-detail-status { margin: 2px 0 2px 6px; font-size: 12px; line-height: 16px; color: var(--mcode-text-muted); }
 .compact-detail-reply { margin: 5px 0; max-height: 126px; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
 /* The desktop card is 280px wide; keep the same structure at a tighter scale. */
 .compact-detail-reply.md { font-size: 12px; line-height: 17px; text-align: left; }
@@ -861,8 +874,8 @@ html.mode-window .pet-sprite:focus-visible {
 .compact-detail-reply.md .md-pre { padding: 6px 8px; }
 .compact-detail-reply.md .md-table th,
 .compact-detail-reply.md .md-table td { padding: 3px 6px; font-size: 11px; }
-.compact-detail-back { color: var(--mcode-text-muted); font-size: 11px; }
-.compact-open { font-size: 11px; font-weight: 600; }
+.compact-detail-back { color: var(--mcode-text-muted); font-size: 12px; line-height: 16px; }
+.compact-open { font-size: 12px; font-weight: 600; }
 .pet-notice-dismiss { flex: none; border: 0; background: transparent; color: var(--mcode-text-muted); cursor: pointer; font-size: 15px; padding: 0 2px 0 6px; }
 .reminder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
 .reminder-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; padding: 8px; border-radius: 8px; background: var(--mcode-bg-secondary); }
@@ -1068,7 +1081,7 @@ html.mode-inline body {
   flex: none;
   flex-wrap: nowrap;
   align-items: center;
-  padding: 24px 28px 18px;
+  padding: 24px 24px 16px;
 }
 
 #panel .panel-title {
@@ -1090,7 +1103,7 @@ html.mode-inline body {
   display: flex;
   flex: none;
   gap: 24px;
-  padding: 0 28px;
+  padding: 0 24px;
   border-bottom: 1px solid var(--mcode-border);
 }
 
@@ -1118,11 +1131,11 @@ html.mode-inline body {
 #panel .tab-count {
   min-width: 18px;
   padding: 0 5px;
-  border-radius: 6px;
+  border-radius: 999px;
   background: var(--mcode-bg-secondary);
   color: var(--mcode-text-muted);
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 #panel > .note,
@@ -1142,7 +1155,7 @@ html.mode-inline body {
   height: 100%;
   min-width: 0;
   min-height: 0;
-  padding: 28px;
+  padding: 24px;
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
@@ -1160,7 +1173,7 @@ html.mode-inline body {
   display: grid;
   grid-template-columns: minmax(200px, .85fr) minmax(0, 1.15fr);
   align-items: start;
-  gap: 32px;
+  gap: 24px;
 }
 
 #panel .appearance-preview {
@@ -1169,8 +1182,8 @@ html.mode-inline body {
   align-items: center;
   gap: 8px;
   min-width: 0;
-  padding: 16px 16px 24px;
-  border-radius: 16px;
+  padding: 16px;
+  border-radius: 12px;
   background: var(--mcode-bg-secondary);
   text-align: center;
 }
@@ -1196,7 +1209,7 @@ html.mode-inline body {
 #panel .stage-status {
   max-width: 100%;
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
   overflow-wrap: anywhere;
 }
 
@@ -1210,7 +1223,7 @@ html.mode-inline body {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin: 2px 0 18px;
+  margin: 0 0 16px;
 }
 
 #panel .gallery {
@@ -1221,8 +1234,8 @@ html.mode-inline body {
 #panel .pet-card {
   flex-direction: column;
   min-width: 0;
-  padding: 14px 10px;
-  border-radius: 10px;
+  padding: 12px;
+  border-radius: 12px;
 }
 
 #panel .pet-pick {
@@ -1268,7 +1281,7 @@ html.mode-inline body {
 #panel .inline-subview {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
@@ -1308,7 +1321,7 @@ html.mode-inline body {
 #panel .task-page {
   display: flex;
   overflow: hidden;
-  padding: 20px 28px 0;
+  padding: 24px 24px 0;
 }
 
 #panel .activity-layout {
@@ -1339,8 +1352,8 @@ html.mode-inline body {
 }
 
 #panel .task-filters .btn {
-  height: 28px;
-  padding-inline: 10px;
+  height: 32px;
+  padding-inline: 12px;
   border: 0;
   background: transparent;
   color: var(--mcode-text-muted);
@@ -1356,7 +1369,7 @@ html.mode-inline body {
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 #panel .task-panes {
@@ -1378,7 +1391,7 @@ html.mode-inline body {
 }
 
 #panel .task-list-note {
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 #panel .session-list {
@@ -1396,9 +1409,11 @@ html.mode-inline body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: start;
-  gap: 3px 12px;
+  gap: 4px 12px;
   min-height: 52px;
   padding: 12px 8px;
+  font-size: 14px;
+  line-height: 22px;
 }
 
 #panel .session-row[aria-current='true'] {
@@ -1444,10 +1459,12 @@ html.mode-inline body {
 }
 
 #panel .reminder-item {
-  gap: 6px 12px;
+  gap: 8px 12px;
   padding: 12px 8px;
   border-radius: 0;
   background: transparent;
+  font-size: 14px;
+  line-height: 22px;
 }
 
 #panel .reminder-title {
@@ -1466,7 +1483,7 @@ html.mode-inline body {
 }
 
 #panel .reminder-item .btn {
-  height: 24px;
+  height: 32px;
   padding-inline: 0;
   border: 0;
   background: transparent;
@@ -1507,7 +1524,7 @@ html.mode-inline body {
   gap: 4px 16px;
   color: var(--mcode-text-muted);
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 #panel #detail-note,
@@ -1555,8 +1572,8 @@ html.mode-inline body {
 
 #panel .setting-copy h2 {
   margin-bottom: 4px;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 #panel .setting-copy p {
diff --git a/sources/minimax-ai/minimax-pet/package-lock.json b/sources/minimax-ai/minimax-pet/package-lock.json
index 17136c1..4beea79 100644
--- a/sources/minimax-ai/minimax-pet/package-lock.json
+++ b/sources/minimax-ai/minimax-pet/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "minimax-pet-source",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "minimax-pet-source",
-      "version": "0.7.0",
+      "version": "0.8.0",
       "devDependencies": {
         "esbuild": "0.25.12",
         "jsdom": "24.1.3",
diff --git a/sources/minimax-ai/minimax-pet/package.json b/sources/minimax-ai/minimax-pet/package.json
index 869bc39..323275f 100644
--- a/sources/minimax-ai/minimax-pet/package.json
+++ b/sources/minimax-ai/minimax-pet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "minimax-pet-source",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": true,
   "type": "module",
   "description": "桌宠插件的开发与验证工具，不进入分发包。",