cx-viewer 1.0.2 → 1.0.4

package/src/components/chat/ChatMessage.module.css

@@ -0,0 +1,1560 @@
+/* === Base reusable classes (from avatarBase / bubbleBase JS objects) === */
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--model-logo-mono);
+}
+
+.avatar > svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.avatarImg {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+/* IM 平台 logo 头像（对话记录里助手一侧）：图标居中、不被 `.avatar > svg{width:100%}` 撑满。 */
+.imAgentGlyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.bubble {
+  border-radius: 8px;
+  border: 1px solid var(--border-secondary);
+  box-sizing: border-box;
+  padding: 6px 6px;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+/* === Message row layouts === */
+
+.messageRow {
+  display: flex;
+  gap: 10px;
+  padding: 8px 24px;
+}
+
+.messageRowEnd {
+  display: flex;
+  gap: 10px;
+  padding: 8px 24px;
+  justify-content: flex-end;
+}
+
+/* 方向性气泡：朝向头像那个角微尖（3px），其他角保持 10px 圆角。
+   .bubble 基类是 8px 全圆，这里按行方向覆盖让 user / assistant 视觉上指向各自头像。 */
+.messageRow .bubble {
+  border-radius: 3px 10px 10px 10px;
+}
+.messageRowEnd .bubble {
+  border-radius: 10px 3px 10px 10px;
+}
+
+/* 内部气泡 .chat-boxer（global class，在 global.css）沿用同样的方向性收角逻辑，
+   但尺寸更小（2px 尖 / 6px 圆）配合 chat-boxer 的 6px 默认 radius。 */
+.messageRow :global(.chat-boxer) {
+  border-radius: 2px 6px 6px 6px;
+}
+.messageRowEnd :global(.chat-boxer) {
+  border-radius: 6px 2px 6px 6px;
+}
+
+/* === Content column === */
+
+.contentCol {
+  min-width: 0;
+}
+
+.contentColLimited {
+  min-width: 0;
+  max-width: 80%;
+  width: fit-content;
+}
+
+/* === Label row === */
+
+.labelRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2px;
+}
+
+.labelRowEnd {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 2px;
+}
+
+.labelRight {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.labelText {
+  font-size: 11px;
+}
+
+.timeText {
+  font-size: 10px;
+  color: var(--text-gray);
+  flex-shrink: 0;
+}
+
+.timeTextNoMargin {
+  font-size: 10px;
+  color: var(--text-gray);
+  flex-shrink: 0;
+}
+
+.cacheContextText {
+  font-size: 10px;
+  color: var(--text-gray-light, #b0b0b0);
+  flex-shrink: 0;
+  opacity: 0.75;
+  font-variant-numeric: tabular-nums;
+}
+
+.labelTextRight {
+  font-size: 11px;
+  margin-left: auto;
+}
+
+/* IM-source icon + username grouped together, kept right-aligned as a unit. */
+.imSourceNameGroup {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.imSourceName {
+  font-size: 11px;
+}
+
+.imSourceIcon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+/* === Bubble color variants === */
+
+.bubbleUser {
+  composes: bubble;
+  background: linear-gradient(to top, var(--color-primary), var(--color-primary));
+  color: #fff;
+  padding: 8px 12px;
+  border-color: var(--color-primary-pale);
+}
+.bubbleUser:hover {
+  border-color: var(--color-primary-lighter);
+  color: #fff;
+}
+
+[data-theme="light"] .bubbleUser {
+  background: var(--bubble-user-bg-light);
+  border-color: var(--bubble-user-bg-light);
+}
+[data-theme="light"] .bubbleUser:hover {
+  border-color: var(--bubble-user-hover-border-light);
+}
+[data-theme="light"] .bubbleUser.bubbleHighlight {
+  box-shadow: var(--bubble-user-highlight-shadow-light);
+}
+
+.bubbleAssistant {
+  composes: bubble;
+  background: var(--bg-container);
+  color: var(--text-primary);
+  transition: box-shadow 0s;
+  position: relative;
+}
+.bubbleAssistant > :last-child {
+  margin-bottom: 0;
+}
+
+.bubbleAssistant:hover {
+  background: var(--bg-container);
+  border: 1px solid var(--border-secondary);
+}
+
+[data-theme="light"] .bubbleAssistant {
+  box-shadow: var(--bubble-assistant-shadow-light);
+}
+
+.bubbleHighlight {
+  box-shadow: 0 0 10px var(--color-primary-shadow);
+}
+
+.bubbleHighlightFading {
+  box-shadow: 0 0 10px transparent;
+  transition: box-shadow 5s ease-out;
+}
+
+.borderSvg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.borderSvgInset {
+  overflow: hidden;
+}
+
+.borderSvgFading {
+  opacity: 0;
+  transition: opacity 5s ease-out;
+}
+
+.borderRect {
+  animation: dashRotate 4s linear infinite;
+}
+
+@keyframes dashRotate {
+  0% { stroke-dashoffset: 0; }
+  100% { stroke-dashoffset: -100; }
+}
+
+.bubblePlan {
+  composes: bubble;
+  background: var(--bg-code);
+  border: 5px solid var(--color-primary);
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.bubbleSubAgent {
+  composes: bubble;
+  background: var(--bg-code);
+  color: var(--text-primary);
+}
+.bubbleSubAgent:hover {
+  border: 1px solid var(--border-light);
+}
+
+.bubbleSelection {
+  composes: bubble;
+  background: var(--color-green-bg);
+  color: var(--text-primary);
+}
+.bubbleSelection:hover {
+  border: 1px solid var(--border-light);
+}
+
+/* === Collapse / system-tag styles === */
+
+.systemTagLabel {
+  font-size: 12px;
+}
+
+.skillLabel {
+  font-size: 12px;
+  color: var(--color-code-purple);
+}
+
+.systemTagPre {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+.collapseMargin {
+  margin: 4px 0;
+}
+
+.collapseNoMargin {
+  margin: 0;
+}
+
+/* 流式 thinking 自动折叠专属。非流式 Collapse 保留 antd 默认 200ms 快响应。
+   !important required: rc-motion (AntD 折叠动画底层) 通过 inline style 注入
+   `transition` 属性，inline style 的特异度永远高于 CSS 规则；唯一能覆盖的方式是 !important。
+   非特异度问题，CSS 本身无法绕过；项目级 no-!important 规则的明确例外。 */
+.collapseStream :global(.ant-motion-collapse),
+.collapseStream :global(.ant-motion-collapse-legacy-active) {
+  transition: height 600ms cubic-bezier(0.33, 1, 0.68, 1),
+              opacity 600ms cubic-bezier(0.33, 1, 0.68, 1) !important;
+}
+
+.collapseStream :global(.ant-collapse-content-box) {
+  transition: opacity 550ms ease-out;
+}
+.collapseStream :global(.ant-collapse-content-hidden) :global(.ant-collapse-content-box),
+.collapseStream :global(.ant-collapse-content-inactive) :global(.ant-collapse-content-box) {
+  opacity: 0;
+}
+
+/* === Thinking block === */
+
+.thinkingLabel {
+  font-size: 12px;
+}
+
+.thinkingEmptyHint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  flex-wrap: wrap;
+}
+
+.thinkingEmptyText {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.enableThinkingBtn {
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.bashCollapseLabel {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+/* === Tool call box === */
+
+.toolBox {
+  background: var(--bg-code);
+  border: 1px solid var(--border-code);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 0 0 6px 0;
+  font-size: 12px;
+}
+
+.toolBox:hover {
+  border: 1px solid var(--border-code);
+}
+
+.toolLabel {
+  color: var(--color-code-purple);
+}
+
+.simplifiedToolLabel {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--text-disabled-faint);
+  margin-right: 4px;
+  line-height: 24px;
+  vertical-align: middle;
+}
+
+/* 弱化版工具标签:去掉边框、保留淡底(--bg-code:白底 #F5F5F5 / 暗底 #14141F),
+   文字用极淡 --text-disabled-faint(白底 rgba(0,0,0,.35) / 暗底 rgba(255,255,255,.45)),
+   两套主题自动适配。hover 仅把文字提亮一档给出可点击反馈。 */
+.simplifiedToolTag {
+  display: inline-block;
+  padding: 0 10px;
+  margin: 2px 4px 2px 0;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-disabled-faint);
+  background: var(--bg-code);
+  border-radius: 14px;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.simplifiedToolTag:hover {
+  background: var(--bg-code-hover);
+  color: var(--text-secondary);
+}
+
+.simplifiedToolPopoverContent {
+  max-width: 520px;
+  max-height: 360px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.simplifiedToolPopoverContent .toolBox {
+  background: transparent;
+  border: none;
+  margin: 0;
+}
+
+.simplifiedToolPopoverContent .codePre {
+  background: var(--bg-base-pure);
+  border: 1px solid var(--border-secondary);
+}
+
+:global(.simplifiedToolPopover) {
+  max-width: calc(100vw - 24px);
+}
+
+@media (max-width: 768px) {
+  .simplifiedToolPopoverContent {
+    max-width: calc(100vw - 48px);
+    max-height: 260px;
+  }
+}
+
+.simplifiedToolResultPreview {
+  max-height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-top: 1px solid var(--border-light);
+  padding: 8px 10px;
+  margin-top: 6px;
+}
+
+.simplifiedToolResultText {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+.simplifiedToolResultImage {
+  display: block;
+  max-width: 100%;
+  max-height: 200px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 4px;
+  background: var(--bg-base-pure);
+}
+
+.simplifiedToolResultImage + .simplifiedToolResultImage {
+  margin-top: 6px;
+}
+
+.simplifiedToolResultImage + .simplifiedToolResultText {
+  margin-top: 6px;
+}
+
+.simplifiedToolResultImagePlaceholder {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-tertiary);
+  background: var(--bg-base-pure);
+  border: 1px dashed var(--border-secondary);
+  border-radius: 4px;
+  padding: 8px 12px;
+  text-align: center;
+}
+
+/* === Code pre inside tool boxes === */
+
+.codePre {
+  font-size: 12px;
+  margin: 4px 0 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--bg-base-pure);
+  color: var(--text-primary);
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+
+/* === Path tag === */
+
+.pathTag {
+  color: var(--color-info-light);
+  font-size: 11px;
+}
+
+.pathTagClickable {
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.pathTagClickable:hover {
+  text-decoration: underline;
+  color: var(--color-primary-lighter);
+}
+
+/* === Tool call inline spans === */
+
+.descSpan {
+  color: var(--text-gray);
+  font-weight: 400;
+}
+
+.secondarySpan {
+  color: var(--text-gray);
+}
+
+.patternSpan {
+  color: var(--color-warning-light);
+}
+
+/* === Default tool key-value items === */
+
+.kvContainer {
+  margin-top: 4px;
+  font-size: 11px;
+}
+
+.kvItem {
+  margin: 2px 0;
+}
+
+.kvKey {
+  color: var(--text-white);
+}
+
+.kvValue {
+  color: var(--text-tertiary);
+}
+
+/* === Tool result box === */
+
+.toolResult {
+  background: var(--bg-code-dark);
+  border: 1px solid var(--color-selection-bg);
+  border-radius: 6px;
+  padding: 6px 10px;
+  margin: 2px 0 6px;
+  font-size: 11px;
+}
+
+.toolResultLabel {
+  font-size: 11px;
+}
+
+/* === Compact summary label === */
+
+.teammateStatusRow {
+  display: flex;
+  justify-content: flex-start;
+  padding: 2px 0;
+}
+
+.teammateStatusRowCenter {
+  display: flex;
+  justify-content: center;
+  padding: 2px 24px;
+}
+
+.teammateStatusBubble {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 10px;
+  background: var(--bg-container-alt);
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+  max-width: 80%;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* === Task Notification === */
+
+.taskNotifUsage {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border-secondary);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.sendMessageBlock {
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: var(--bg-container-alt);
+  border: 1px solid var(--border-light);
+  margin: 4px 0;
+}
+
+.sendMessageHeader {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.compactLabel {
+  font-size: 12px;
+  color: var(--color-primary-lighter);
+}
+
+.compactPre {
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+/* light theme 下 Compact summary 被包在深色 .bubbleUser 里,文字色需反转 */
+[data-theme="light"] .bubbleUser .compactPre {
+  color: #fff;
+}
+
+/* slash 命令本地化标签的 span,留作未来视觉钩子(下划线/虚线/cursor 提示等),
+   当前与普通 user bubble 文本无视觉差异。 */
+.slashCommandLabel {
+  cursor: help;
+}
+
+/* === View request button === */
+
+.viewRequestBtn {
+  font-size: 10px;
+  color: var(--text-disabled);
+  cursor: pointer;
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.viewRequestBtn:hover {
+  color: var(--color-primary-lighter);
+}
+
+.viewRequestIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--text-disabled);
+  cursor: pointer;
+  margin-left: 6px;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.viewRequestIcon:hover {
+  color: var(--color-primary-lighter);
+}
+
+.viewRequestIcon svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+/* === User-selection question === */
+
+.optionList {
+  padding-left: 8px;
+}
+
+/* === User-selection question text === */
+
+.questionText {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.questionSpacing {
+  margin-bottom: 10px;
+}
+
+/* === Option item === */
+
+.option {
+  font-size: 12px;
+  padding: 1px 0;
+}
+
+/* === request_user_input 问卷卡片 === */
+
+.askQuestionBox {
+  background: var(--color-green-dark-bg);
+  border: 1px solid var(--color-success-dark);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 6px 0;
+  font-size: 12px;
+}
+
+.askValidationErrorBadge {
+  background: var(--color-error-bg, rgba(255, 77, 79, 0.1));
+  border: 1px solid var(--color-error, #ff4d4f);
+  border-radius: 4px;
+  padding: 6px 10px;
+  margin: 0 0 8px 0;
+  font-size: 12px;
+  color: var(--color-error, #ff4d4f);
+}
+.askValidationErrorTitle {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.askValidationErrorDetails {
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+.askValidationErrorDetails summary {
+  user-select: none;
+  outline: none;
+}
+.askValidationErrorRawText {
+  margin: 6px 0 0 0;
+  padding: 6px 8px;
+  background: var(--color-bg-elevated, rgba(0, 0, 0, 0.04));
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text-primary);
+  max-height: 200px;
+  overflow: auto;
+}
+
+.askQuestionHeader {
+  display: inline-block;
+  background: var(--color-green-bg);
+  color: var(--color-success-dark);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+.askQuestionText {
+  color: var(--text-primary);
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.askOptionItem {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 3px 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.askOptionSelected {
+  color: var(--text-white);
+  font-weight: 600;
+}
+
+.askOptionSelected .askOptionDesc {
+  color: var(--text-white);
+}
+
+.askCheckSvg {
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+/* === Plan 模式状态指示 === */
+
+.planModeBox {
+  position: relative;
+  background: var(--bg-code-dark);
+  border: 1px solid var(--color-primary);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 6px 0;
+  font-size: 12px;
+}
+
+.planModeBox.planStatusPending {
+  border: none;
+  box-shadow: 0 0 12px var(--color-primary-bg-light);
+}
+
+.planModeLabel {
+  color: var(--color-primary-lighter);
+  font-weight: 600;
+}
+
+.planModePermissions {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--color-primary-dark-bg);
+}
+
+.planModePermLabel {
+  color: var(--text-gray);
+  font-size: 11px;
+  margin-bottom: 2px;
+}
+
+.planModeHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.planStatusBadge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 8px;
+  border-radius: 10px;
+  line-height: 1.6;
+}
+
+.planStatusApproved {
+  border-color: var(--color-success);
+}
+
+.planStatusApproved.planStatusBadge {
+  background: var(--color-success-bg-light);
+  color: var(--color-success-light);
+}
+
+.planStatusRejected {
+  border-color: var(--color-error);
+}
+
+.planStatusRejected.planStatusBadge {
+  background: var(--color-error-bg-light);
+  color: var(--color-error-light);
+}
+
+.planStatusPending {
+  border-color: var(--color-primary);
+}
+
+.planStatusPending.planStatusBadge {
+  background: var(--color-primary-bg-light);
+  color: var(--color-primary-lighter);
+}
+
+.planContentPreview {
+  margin-top: 8px;
+  padding: 8px 10px;
+  background: var(--bg-code);
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--text-primary);
+  max-height: min(400px, 50vh);
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: 1px solid var(--border-primary);
+}
+
+.planFeedback {
+  margin-top: 6px;
+  padding: 6px 8px;
+  background: var(--color-error-bg-faint);
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.planFeedbackLabel {
+  color: var(--color-error-light);
+  font-weight: 600;
+}
+
+.planApprovalActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* 「Plan 自动审批」倒计时提示行：低调灰色文案 + 内联「取消」链接按钮。 */
+.planAutoApproveHint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.planAutoApproveCancel {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-primary);
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.planAutoApproveCancel:hover {
+  opacity: 0.8;
+}
+
+.planApproveBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-success);
+  background: var(--color-success-bg-light);
+  color: var(--color-success-light);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.planApproveBtn:hover {
+  background: var(--color-success-bg-medium);
+}
+
+.planRejectBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-error);
+  background: var(--color-error-bg-light);
+  color: var(--color-error-light);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.planRejectBtn:hover {
+  background: var(--color-error-bg-medium);
+}
+
+.planOptionBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--text-gray);
+  background: var(--color-gray-bg-light);
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.planOptionBtn:hover {
+  background: var(--color-gray-bg-medium);
+}
+
+.dangerApprovalBox {
+  background: var(--color-error-dark-bg);
+  border: 1px solid var(--color-warning);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 6px 0;
+  font-size: 12px;
+}
+
+.dangerApprovalBoxDenied {
+  border-color: var(--color-error);
+}
+
+.ultraplanBadge {
+  color: var(--color-info-light);
+  font-size: 12px;
+  margin: 4px 0;
+}
+
+.dangerApprovalHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dangerApprovalIcon {
+  color: var(--color-warning-light);
+  font-size: 14px;
+}
+
+.dangerApprovalLabel {
+  color: var(--color-warning-light);
+  font-weight: 600;
+}
+
+.dangerApprovalActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.dangerApproveBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-success);
+  background: var(--color-success-bg-light);
+  color: var(--color-success-light);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.dangerApproveBtn:hover {
+  background: var(--color-success-bg-medium);
+}
+
+.dangerRejectBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-error);
+  background: var(--color-error-bg-light);
+  color: var(--color-error-light);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.dangerRejectBtn:hover {
+  background: var(--color-error-bg-medium);
+}
+
+.dangerOptionBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-warning);
+  background: var(--color-warning-bg-light);
+  color: var(--color-warning-light);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.dangerOptionBtn:hover {
+  background: var(--color-warning-bg-medium);
+}
+
+.dangerDeniedBadge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--color-error-bg-light);
+  color: var(--color-error-light);
+  line-height: 1.6;
+}
+
+.dangerDeniedDetail {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--color-error-muted);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  max-height: 80px;
+  overflow-y: auto;
+}
+
+.planFeedbackInputWrap {
+  margin-top: 8px;
+}
+
+.planFeedbackTextarea {
+  width: 100%;
+  min-height: 60px;
+  max-height: 120px;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--text-disabled);
+  background: var(--color-selection-bg);
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+  resize: vertical;
+  font-family: inherit;
+  outline: none;
+}
+
+.planFeedbackTextarea:focus {
+  border-color: var(--color-primary-light);
+}
+
+.planFeedbackBtnRow {
+  display: flex;
+  gap: 8px;
+  margin-top: 6px;
+  justify-content: flex-end;
+}
+
+.planFeedbackSendBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-primary-light);
+  background: var(--color-primary-bg-lighter);
+  color: var(--color-primary-lighter);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.planFeedbackSendBtn:hover {
+  background: var(--color-primary-bg-medium);
+}
+
+.planFeedbackSendBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.planFeedbackCancelBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--text-gray);
+  background: var(--color-gray-bg-light);
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.planFeedbackCancelBtn:hover {
+  background: var(--color-gray-bg-medium);
+}
+
+/* === request_user_input 交互模式 === */
+
+.askQuestionInteractive {
+  position: relative;
+  background: var(--bg-code-dark);
+  border: none;
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 6px 0;
+  font-size: 12px;
+  box-shadow: 0 0 12px var(--color-primary-bg-light);
+}
+
+.askRadioGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 4px;
+  margin-top: 4px;
+}
+
+.askRadioItem {
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 6px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  user-select: none;
+  border-radius: 6px;
+  transition: background 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+
+.askRadioItem:hover {
+  color: var(--text-white);
+  background: var(--color-primary-bg-extra-faint);
+}
+
+.askRadioItem:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.askRadioItemSelected,
+.askRadioItemSelected:hover {
+  color: var(--color-primary-lighter);
+  background: var(--color-primary-bg-faint);
+}
+
+.askRadioDot {
+  flex-shrink: 0;
+  font-size: 23px;
+  width: 24px;
+  height: 17px;
+  line-height: 17px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.askOptionBody {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.askOptionLabel {
+  color: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.askOptionDesc {
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.askRadioItemSelected .askOptionDesc {
+  color: var(--color-primary-dark);
+}
+
+.askRadioGroup :global(.ant-radio-wrapper),
+.askCheckboxGroup :global(.ant-checkbox-wrapper) {
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 3px 0;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.askRadioGroup :global(.ant-radio-wrapper > span),
+.askRadioGroup :global(.ant-radio) {
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.askRadioGroup :global(.ant-radio-input) {
+  cursor: pointer;
+}
+
+.askCheckboxGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 4px;
+  margin-top: 4px;
+}
+
+.askOtherInput {
+  margin-top: 4px;
+  margin-left: 32px;
+  width: calc(100% - 32px);
+}
+
+.askOtherInput :global(.ant-input) {
+  background: var(--bg-elevated);
+  border-color: var(--text-disabled);
+  color: var(--text-primary);
+  font-size: 12px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.askOtherInput :global(.ant-input):focus,
+.askOtherInput :global(.ant-input-focused) {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-bg-light);
+}
+
+.askSubmitRow {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.askSubmitBtn {
+  padding: 4px 20px;
+  border-radius: 4px;
+  border: 1px solid var(--color-primary);
+  background: var(--color-primary-bg-lighter);
+  color: var(--color-primary-lighter);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.askSubmitBtn:hover {
+  background: var(--color-primary-bg-medium);
+}
+
+.askSubmitBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.askCancelBtn {
+  padding: 4px 16px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.askCancelBtn:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text);
+}
+
+.askCancelledNote {
+  margin-top: 6px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.askCountdown {
+  margin-top: 8px;
+  text-align: right;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  /* 长译文 (tr/ru/de 等) 在窄屏避免换行挤压 askSubmitRow */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 剩余 ≤60s 切 warning 视觉提示用户即将超时 */
+.askCountdownWarning {
+  color: var(--color-warning, #faad14);
+  font-weight: 500;
+}
+
+.askMarkdownLayout {
+  display: flex;
+  gap: 12px;
+  margin-top: 4px;
+  min-width: 0;
+}
+
+.askMarkdownLayout > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.askOptionsBody {
+  min-width: 0;
+}
+
+.askMarkdownPreview {
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  background: var(--bg-code-dark);
+  border: 1px solid var(--border-code);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--text-primary);
+  max-height: 240px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.askMarkdownPreview pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/* === ChatImage === */
+
+.chatImageFallback {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.chatImageImg {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 6px;
+  margin: 6px 0;
+  display: block;
+  cursor: pointer;
+}
+
+/* === Highlight bubble wrapper === */
+
+.bubbleRelative {
+  position: relative;
+}
+
+/* === Skill loaded spacer === */
+
+.skillSpacer {
+  width: 32px;
+  flex-shrink: 0;
+}
+
+/* === Skill time text indent === */
+
+.skillTimeIndent {
+  margin-left: 8px;
+}
+
+.previewPlaceholder {
+  color: var(--text-gray);
+}
+
+/* === request_user_input 移动端适配 === */
+@media (max-width: 768px) {
+  .askQuestionBox {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+  .askQuestionHeader {
+    font-size: 14px;
+    padding: 2px 10px;
+  }
+  .askQuestionText {
+    font-size: 17px;
+    margin-bottom: 8px;
+  }
+  .askOptionItem {
+    font-size: 16px;
+    padding: 6px 0;
+    gap: 8px;
+  }
+  .askQuestionInteractive {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+  .askRadioGroup {
+    gap: 4px;
+  }
+  .askRadioItem {
+    font-size: 16px;
+    padding: 10px 12px;
+    gap: 12px;
+    min-height: 48px;
+  }
+  .askRadioDot {
+    font-size: 32px;
+    width: 36px;
+    height: 22px;
+    line-height: 22px;
+  }
+  .askOptionLabel {
+    font-size: 16px;
+  }
+  .askOptionDesc {
+    font-size: 13px;
+  }
+  .askRadioGroup :global(.ant-radio-wrapper),
+  .askCheckboxGroup :global(.ant-checkbox-wrapper) {
+    font-size: 16px;
+    padding: 8px 0;
+    min-height: 40px;
+  }
+  .askCheckboxGroup {
+    gap: 4px;
+  }
+  .askOtherInput :global(.ant-input) {
+    font-size: 16px;
+    padding: 8px;
+  }
+  .askSubmitBtn {
+    padding: 10px 28px;
+    font-size: 18px;
+  }
+}
+
+/* ─── ≤750px：预览图从右侧移到选项上方 ─── */
+@media (max-width: 750px) {
+  .askMarkdownLayout {
+    flex-direction: column-reverse;
+    gap: 8px;
+  }
+  .askMarkdownLayout > :first-child {
+    flex: none;
+    width: 100%;
+  }
+  .askMarkdownPreview {
+    flex: none;
+    width: 100%;
+    max-height: 160px;
+  }
+}
+
+/* ─── iPad/Pad 模式：恢复桌面默认值 ─── */
+:global(html.pad-mode) .simplifiedToolPopoverContent { max-width: 520px; max-height: 360px; }
+:global(html.pad-mode) .askQuestionBox { padding: 8px 12px; font-size: 12px; }
+:global(html.pad-mode) .askQuestionHeader { font-size: 10px; padding: 1px 6px; }
+:global(html.pad-mode) .askQuestionText { font-size: 13px; margin-bottom: 4px; }
+:global(html.pad-mode) .askOptionItem { font-size: 12px; padding: 1px 0; gap: 4px; }
+:global(html.pad-mode) .askQuestionInteractive { padding: 8px 12px; font-size: 12px; }
+:global(html.pad-mode) .askRadioGroup { gap: 4px; }
+:global(html.pad-mode) .askRadioItem { font-size: 12px; padding: 6px 8px; gap: 10px; min-height: auto; }
+:global(html.pad-mode) .askRadioDot { font-size: 23px; width: 24px; height: 17px; line-height: 17px; }
+:global(html.pad-mode) .askOptionLabel { font-size: 12px; }
+:global(html.pad-mode) .askOptionDesc { font-size: 11px; }
+:global(html.pad-mode) .askRadioGroup :global(.ant-radio-wrapper),
+:global(html.pad-mode) .askCheckboxGroup :global(.ant-checkbox-wrapper) { font-size: 12px; padding: 3px 0; min-height: auto; }
+:global(html.pad-mode) .askCheckboxGroup { gap: 2px; }
+:global(html.pad-mode) .askOtherInput :global(.ant-input) { font-size: 12px; }
+:global(html.pad-mode) .askSubmitBtn { padding: 4px 20px; font-size: 13px; }
+
+/* ─── Web search group container (server_tool_use + web_search_tool_result + synthesis text) ───
+   职责切分：本区块负责"group 外壳"——左色条容器 / header / synthesis 分区 / citation hint / 流式占位。
+   单条搜索结果的卡片样式（.card / .title / .urlDomain / .pageAge / .showMoreBtn）位于
+   WebResultsView.module.css，由 WebResultsView 组件单独负责。 */
+.webSearchGroup {
+  border-left: 3px solid var(--color-primary-pale);
+  padding: 4px 0 4px 12px;
+  margin: 8px 0;
+}
+.webSearchGroupStreaming {
+  min-height: 120px;
+}
+.webSearchGroupHeader {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-gray);
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+.webSearchGroupHeader > :global(.anticon) { font-size: 13px; }
+.webSearchGroupCount {
+  font-size: 11px;
+  color: var(--text-gray);
+  padding: 0 6px;
+  border: 1px solid var(--border-secondary);
+  border-radius: 4px;
+}
+.webSearchSynthesis {
+  margin-top: 10px;
+}
+.webSearchCitationHint {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--text-gray);
+  font-style: italic;
+}
+.webSearchPlaceholder {
+  font-size: 12px;
+  color: var(--text-gray);
+  font-style: italic;
+  padding: 4px 0;
+}
+@media (max-width: 768px) {
+  .webSearchGroup { padding-left: 8px; }
+}