@layer business {
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Steps slot: 位于 assistant 消息 body 上方 */
.message-steps-slot:empty {
  display: none;
}

/* 消息 body：为复制按钮提供定位上下文 */
.message-body {
  position: relative;
}

/* 消息操作栏（like / dislike / copy） */
.message-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
}

/* feedback 按钮基础样式（与 copy-btn 一致） */
.message-feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}
.message-feedback-btn:hover {
  opacity: 1;
  background: var(--bg-tertiary);
}
.message-feedback-btn.like.active {
  color: var(--accent, var(--color-primary));
  border-color: var(--accent, var(--color-primary));
  opacity: 1;
}
.message-feedback-btn.dislike.active {
  color: var(--text-error, var(--color-danger));
  border-color: var(--text-error, var(--color-danger));
  opacity: 1;
}

/* 消息复制按钮 */
.message-copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;
  width: fit-content;
}
.message-copy-btn:hover {
  opacity: 1;
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.message-copy-btn.copied {
  color: var(--color-success);
  opacity: 1;
}

/* Markdown Styles inside Message - 记事本手写风格 */
.markdown-body {
  color: var(--text-main);
  line-height: 1.6;
  font-size: 0.95rem;
}

.markdown-body p {
  margin-bottom: 0.4em;
}

.markdown-body p:last-child {
  margin-bottom: 0;
}

.markdown-body pre {
  background: var(--msg-ai-bg) !important;
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  margin: 0.4em 0;
  border: 1px solid var(--border-color-default);
}

.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(43, 94, 167, 0.07);
  color: var(--color-primary);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(43, 94, 167, 0.12);
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  border: none;
}

.markdown-body ul, .markdown-body ol {
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

.markdown-body ul {
  list-style: disc;
}

.markdown-body ol {
  list-style: decimal;
}

.markdown-body li {
  margin-bottom: 0.2em;
}

.markdown-body blockquote {
  border-left: 3px solid var(--margin-line-color);
  padding-left: 1em;
  margin: 0.5em 0;
  color: var(--text-muted);
  background: rgba(232, 160, 160, 0.06);
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  color: var(--text-highlight);
  margin: 0.5em 0 0.3em;
  font-weight: 700;
}

.markdown-body h1 { font-size: 1.4em; border-bottom: 2px solid var(--color-primary); padding-bottom: 4px; }
.markdown-body h2 { font-size: 1.2em; border-bottom: 1px solid var(--ruled-line-color); padding-bottom: 3px; }
.markdown-body h3 { font-size: 1.1em; }

.markdown-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-style: dashed;
}

.markdown-body a:hover {
  text-decoration-style: solid;
}

.markdown-body strong {
  color: var(--text-highlight);
  font-weight: 700;
}

.markdown-body em {
  color: var(--color-accent);
}

.markdown-body hr {
  border: none;
  border-top: 1px dashed var(--text-muted);
  margin: 1em 0;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0;
}

.markdown-body th, .markdown-body td {
  border: 1px solid var(--border-color-default);
  padding: 6px 10px;
  text-align: left;
}

.markdown-body th {
  background: var(--bg-panel);
  font-weight: 700;
}

.markdown-body tr:nth-child(even) {
  background: rgba(139, 119, 90, 0.04);
}

/* Attachment Tags */
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Image Thumbnail Preview */
.attachment-image-preview {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ruled-line-color);
  max-width: 260px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.attachment-image-preview:hover {
  border-color: var(--primary-color, #4f46e5);
}
.attachment-thumbnail {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  object-fit: cover;
}
.attachment-image-name {
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  width: 100%;
  text-align: center;
}

.attachment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(139, 119, 90, 0.08);
  border: 1px solid rgba(139, 119, 90, 0.2);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.attachment-tag i {
  font-size: 0.85rem;
  color: var(--color-primary);
}

.attachment-size {
  opacity: 0.7;
  font-size: 0.72rem;
}

/* Downloadable Attachment */
.attachment-tag.attachment-downloadable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.attachment-tag.attachment-downloadable:hover {
  background: rgba(139, 119, 90, 0.15);
}

.attachment-download-icon {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* File Part (assistant message) */
.file-part {
  margin: 4px 0;
}

/* Upload Preview Area */
.attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ruled-line-color);
}

.attachment-preview-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(139, 119, 90, 0.08);
  border: 1px solid rgba(139, 119, 90, 0.2);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.attachment-preview-item i {
  font-size: 0.85rem;
  color: var(--color-primary);
}

.attachment-preview-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-item .remove-btn {
  cursor: pointer;
  opacity: 0.5;
  margin-left: 2px;
}

.attachment-preview-item .remove-btn:hover {
  opacity: 1;
  color: var(--color-secondary);
}

/* Drag over highlight */
.input-wrapper.drag-over {
  border-color: var(--color-primary);
  background: rgba(139, 119, 90, 0.05);
}

/* Tool 渲染（collapsible-part 内联样式） */
.tool-name {
  font-family: var(--font-mono);
  color: var(--color-warning);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tool-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
}
.tool-status {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(139, 119, 90, 0.1);
  color: var(--text-muted);
}
.tool-status.completed {
  background: rgba(39, 134, 74, 0.1);
  color: var(--color-success);
}


@keyframes pulse {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Connection Status */
.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.status-dot.connected { background: var(--color-success); box-shadow: 0 0 4px rgba(39, 134, 74, 0.4); }
.status-dot.disconnected { background: var(--color-secondary); }
.status-dot.reconnecting { background: var(--color-warning); animation: pulse 1s infinite; }

/* Collapsible Sections (Thinking & Tools) - 折叠纸条风格 */
details.collapsible-part {
    margin: 8px 0;
    border: 1px solid var(--border-color-default);
    border-radius: 4px;
    background: var(--bg-card);
    overflow: hidden;
}

details.collapsible-part summary {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(139, 119, 90, 0.05);
    user-select: none;
    transition: background 0.2s;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

details.collapsible-part summary::-webkit-details-marker {
    display: none;
}

details.collapsible-part summary:hover {
    background: rgba(139, 119, 90, 0.1);
    color: var(--text-main);
}

details.collapsible-part summary::before {
    content: '\25b8'; /* 小三角 */
    display: inline-block;
    width: 12px;
    transition: transform 0.2s;
    color: var(--text-muted);
}

details.collapsible-part[open] summary::before {
    transform: rotate(90deg);
}

details.collapsible-part .collapsible-content {
    padding: 12px;
    font-size: 0.85rem;
    border-top: 1px dashed var(--border-color-default);
    color: var(--text-muted);
    overflow-x: auto;
}

/* Specific Styles - 记事本标记色 */
.thinking-summary {
    color: var(--color-primary) !important;
    font-style: italic;
}

.tool-summary {
    color: var(--color-warning) !important;
    font-family: var(--font-mono);
}

/* Blinking Indicator - 墨水滴落效果 */
.blinking-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  margin-right: 8px;
  animation: ink-drip 1s infinite alternate;
}

@keyframes ink-drip {
  from { opacity: 0.2; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.1); }
}

/* ============================================================================
   Steps Group - 中间过程的外层折叠容器
   summary 行实时显示当前执行内容，展开后看到全部 step 详情
   ============================================================================ */
.steps-group {
  margin-bottom: 4px;
  animation: fadeIn 0.2s ease;
}

.steps-group-details {
  border: none;
  background: transparent;
}

.steps-group-details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-muted);
  user-select: none;
  list-style: none;
  border-radius: 3px;
  transition: background 0.15s;
}

.steps-group-details > summary::-webkit-details-marker {
  display: none;
}

.steps-group-details > summary::before {
  content: '\25b8';
  display: inline-block;
  width: 10px;
  font-size: 0.7rem;
  transition: transform 0.2s;
  color: var(--text-muted);
  opacity: 0.6;
}

.steps-group-details[open] > summary::before {
  transform: rotate(90deg);
}

.steps-group-details > summary:hover {
  background: rgba(139, 119, 90, 0.06);
  color: var(--text-main);
}

.steps-group-icon {
  opacity: 0.5;
  font-size: 0.8rem;
}

.steps-group-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  opacity: 0.7;
}

.steps-group-body {
  padding-left: 4px;
  border-left: 2px solid var(--ruled-line-color);
  margin-left: 4px;
  margin-top: 2px;
  opacity: 0.85;
}

/* ============================================================================
   Turn Step - 中间过程步骤（缩进 + 竖线 + 小字 + 淡色）
   ============================================================================ */
.turn-step {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  animation: fadeIn 0.2s ease;
}

.turn-step .step-rail {
  width: 0;
  display: none;
}

.turn-step .step-content {
  flex: 1;
  min-width: 0;
}

.turn-step .step-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  opacity: 0.5;
  margin-bottom: 1px;
  letter-spacing: 0.02em;
}

/* 中间步骤内的折叠区域 - 无边框、透明背景、更紧凑 */
.turn-step details.collapsible-part {
  border: none;
  background: transparent;
  margin: 2px 0;
  box-shadow: none;
}

.turn-step details.collapsible-part summary {
  padding: 3px 6px;
  font-size: 0.78rem;
  background: transparent;
  opacity: 0.75;
}

.turn-step details.collapsible-part summary:hover {
  background: rgba(139, 119, 90, 0.06);
  opacity: 1;
}

.turn-step details.collapsible-part .collapsible-content {
  padding: 6px 8px;
  font-size: 0.78rem;
  border-top: 1px dashed rgba(212, 201, 181, 0.4);
}

/* 中间步骤的文本 - 更小、更淡 */
.turn-step .text-part,
.turn-step .markdown-body {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  opacity: 0.8;
}

.turn-step .markdown-body p {
  margin-bottom: 0.3em;
}

/* 中间步骤的代码块 - 更紧凑 */
.turn-step .markdown-body pre {
  padding: 8px;
  margin: 0.3em 0;
  font-size: 0.8rem;
}

.turn-step .markdown-body code {
  font-size: 0.8em;
}

/* ============================================================================
   Context Circle - 上下文窗口使用率指示器（仿 OpenCode ProgressCircle）
   ============================================================================ */
[data-slot="context-circle-bg"] {
  stroke: rgba(139, 119, 90, 0.18);
}

[data-slot="context-circle-progress"] {
  stroke: var(--color-primary);
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              stroke 0.2s ease;
}

/* 警告状态：70-90% */
[data-slot="context-circle-progress"].context-warn {
  stroke: var(--color-warning);
}

/* 危险状态：90%+ */
[data-slot="context-circle-progress"].context-danger {
  stroke: var(--color-secondary);
}

/* Tooltip wrapper - 使用 CSS 伪元素实现 hover tooltip（不依赖原生 title） */
.context-tooltip-wrapper {
  position: relative;
  flex-shrink: 0;
  cursor: default;
}

.context-tooltip-wrapper[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  background: var(--text-main);
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 0.65rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1000;
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.context-tooltip-wrapper[data-tooltip]:hover::after {
  opacity: 1;
}
/* ============================================================================
   Time Separator - 时间分隔线
   ============================================================================ */
.time-separator {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.time-separator-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(139, 119, 90, 0.08);
  padding: 2px 10px;
  border-radius: 10px;
  opacity: 0.7;
  user-select: none;
}

.error-message {
  color: var(--file-color-pdf);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-soft);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--font-mono);
  margin: 8px 0;
}

.error-message::before {
  content: "⚠️ ";
  margin-right: 6px;
}

/* ============================================================================
   Channel Notification - 外部渠道新消息通知
   ============================================================================ */
.channel-notification {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--color-success-soft);
  border-left: 4px solid var(--color-success);
  border-radius: 6px;
  padding: 12px 14px;
  max-width: min(360px, calc(100vw - 32px));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  animation: notif-slide-in 0.3s ease;
  transition: opacity 0.2s;
}

.channel-notification:hover {
  border-color: var(--color-success);
}

@keyframes notif-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.channel-notification-icon {
  color: var(--color-success);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.channel-notification-body {
  flex: 1;
  min-width: 0;
}

.channel-notification-sender {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 2px;
}

.channel-notification-channel {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.channel-notification-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-notification-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: color 0.15s;
}

.channel-notification-close:hover {
  color: var(--text-main);
}

/* ============================================================================
   Compaction Summary - compact 摘要折叠块样式（淡色、小字、斜体）
   ============================================================================ */
.compaction-summary summary {
  color: var(--text-muted) !important;
  font-style: italic;
  opacity: 0.7;
}

.compaction-summary .collapsible-content {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.75;
}

/* ============================================================================
   File Source Link — 通用文件链接卡片（行内 tag 风格）
   ============================================================================ */
.markdown-body .file-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(43, 94, 167, 0.06);
  border: 1px solid rgba(43, 94, 167, 0.15);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  line-height: 1.6;
}

.markdown-body .file-source-link:hover {
  background: rgba(43, 94, 167, 0.12);
  border-color: rgba(43, 94, 167, 0.3);
  text-decoration: none;
}

.markdown-body .file-source-link i:first-child {
  font-size: 0.9rem;
  opacity: 0.7;
}

.markdown-body .file-source-ext-icon {
  font-size: 0.7rem;
  opacity: 0.4;
}

/* SA 专属：feedback 过滤 tab */
.sa-feedback-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 8px 2px;
}
/* All 按钮：文字风格 */
.sa-feedback-tab {
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}
.sa-feedback-tab:hover {
  opacity: 1;
  background: var(--bg-tertiary);
}
.sa-feedback-tab.active {
  opacity: 1;
  color: var(--accent, var(--color-primary));
  border-color: var(--accent, var(--color-primary));
}
/* 👍 👎 tab：与 message-feedback-btn 尺寸一致 */
.sa-feedback-tab.like,
.sa-feedback-tab.dislike {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  font-size: 13px;
}
.sa-feedback-tab.like.active {
  color: var(--accent, var(--color-primary));
  border-color: var(--accent, var(--color-primary));
}
.sa-feedback-tab.dislike.active {
  color: var(--text-error, var(--color-danger));
  border-color: var(--text-error, var(--color-danger));
}

/* ============================================================================
   Suggestion Cards - 建议卡片（记事本便签风格）
   ============================================================================ */
.suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color-default);
}

.suggestion-item {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 3px;
  border: 1px solid var(--border-color-default);
  background: var(--msg-ai-bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font-main);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  user-select: none;
  line-height: 1.4;
}

.suggestion-item:hover {
  background: rgba(43, 94, 167, 0.06);
  border-color: rgba(43, 94, 167, 0.3);
  color: var(--color-primary);
}

.suggestion-item:active {
  background: rgba(43, 94, 167, 0.12);
}

@media (max-width: 768px) {
  .suggestion-list {
    gap: 8px;
    margin-top: 12px;
  }

  .suggestion-item {
    padding: 9px 14px;
    font-size: 0.88rem;
    white-space: normal;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* 分享卡片 */
.message-card {
  margin-top: 10px;
}

} /* end @layer business */

/* ============================================================
   AI Chat 视觉覆盖 — .im-chat-view[data-kind="ai"] .im-message-list限定（unlayered 优先级高于 im.css）
   对标旧 .message 系样式：
   - AI assistant：全宽、无气泡框、圆形头像
   - User：85% 宽度、靠右、淡蓝背景
   ============================================================ */

/* 基础行样式：对标旧 .message { padding, margin, animation } */
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row {
  padding: 8px 10px;
  margin: 0 0 4px;
  animation: fadeIn 0.3s ease;
}

/* User 消息：靠右，85% 宽 — 对标旧 .message-user */
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row.mine {
  margin-left: auto;
  max-width: 85%;
}

/* AI assistant：全宽 — 对标旧 .message（无 max-width 限制） */
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row.theirs {
  /* 不设 max-width，AI 回复通常信息量大 */
}

/* 气泡包裹层不限宽 */
.im-chat-view[data-kind="ai"] .im-message-list .im-bubble-wrap {
  max-width: none;
}

/* 头像：圆形 30px — 对标旧 .message-avatar + .avatar-ai */
.im-chat-view[data-kind="ai"] .im-message-list .im-avatar--theirs {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* 发送者名字：对标旧 .message-name */
.im-chat-view[data-kind="ai"] .im-message-list .im-sender-name {
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
}
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row.theirs .im-sender-name {
  color: var(--color-accent);
}
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row.mine .im-sender-name {
  color: var(--color-primary);
}

/* Assistant 气泡：透明无边框 — 对标旧 AI 回复无气泡框 */
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row.theirs .im-bubble {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* User 气泡：淡蓝背景 12px 圆角 — 对标旧 .message-user */
.im-chat-view[data-kind="ai"] .im-message-list .im-message-row.mine .im-bubble {
  background: rgba(43, 94, 167, 0.05);
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
}

/* ── 头像呼吸动画：外扩墨晕，像墨滴在纸上扩散 ── */
.im-chat-view[data-kind="ai"] .im-message-list .im-avatar--theirs.is-running {
  animation: avatar-breathe 1.6s ease-in-out infinite;
}

@keyframes avatar-breathe {
  0%, 100% {
    border-color: var(--msg-ai-border);
    box-shadow: 0 0 0 0 rgba(43, 94, 167, 0), 0 0 0 0 rgba(106, 76, 147, 0);
  }
  50% {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(43, 94, 167, 0.18), 0 0 12px 3px rgba(106, 76, 147, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-chat-view[data-kind="ai"] .im-message-list .im-avatar--theirs.is-running {
    animation: none;
    border-color: var(--color-primary);
  }
}/* ============================================================
   IM Styles — 私聊/群聊气泡、输入区、联系人
   ============================================================ */

/* IM 会话视图容器 */
.im-chat-view {
  display: none;
  flex-direction: column;
  height: 100%;
  background: var(--bg-void);
}

/* 头部（对齐原始 main-header 样式） */
.im-chat-header {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 60;
  background: rgba(245, 241, 232, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ruled-line-color);
  flex-shrink: 0;
}
.im-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-secondary, #6b7280);
  padding: 2px; display: flex; align-items: center;
  flex-shrink: 0;
}
.im-chat-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-main);
}
.im-chat-subtitle {
  font-size: 0.65rem; color: var(--color-primary);
  font-family: var(--font-mono);
  margin-left: 8px;
  cursor: pointer;
}
.im-chat-subtitle.online { color: #22c55e; }
.im-chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 消息列表 */
.im-message-list {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .im-message-list {
    padding: 12px;
    gap: 4px;
  }
  .im-input-area {
    padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .im-input-wrapper {
    padding: 8px;
  }
}

/* 输入状态指示器 */
.im-typing-indicator {
  padding: 4px 16px;
  font-size: 12px; color: var(--text-tertiary, #9ca3af);
  font-style: italic;
}

/* 输入区（对齐原始 AI Chat .input-area） */
.im-input-area {
  position: relative;
  padding: 8px 24px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-void);
  flex-shrink: 0;
}
/* 卡片包裹层（对齐原始 .input-wrapper） */
.im-input-wrapper {
  max-width: var(--max-content-width);
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color-default);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: var(--paper-shadow);
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
/* 引用栏在卡片内独占整行 */
.im-input-wrapper > .im-reply-bar {
  width: 100%;
  flex-basis: 100%;
  margin: 0 0 4px 0;
  padding: 2px 0 4px 0;
  border-bottom: 1px dashed var(--ruled-line-color);
  min-height: 18px;
  line-height: 1.3;
}
.im-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 94, 167, 0.12);
}
/* 文本输入（对齐原始 #message-input） */
.im-input {
  flex: 1;
  color: var(--text-main);
  background: transparent;
  resize: none;
  max-height: 200px;
  min-height: 24px;
  line-height: 1.6;
  font-size: 0.95rem;
  border: none;
  outline: none;
  padding: 0;
  font-family: inherit;
}
.im-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
/* 发送按钮（对齐原始 #btn-send） */
.im-send-btn {
  width: 36px; height: 36px;
  border: none; border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  transition: background 0.2s;
}
.im-send-btn:hover { opacity: 0.9; }
.im-send-btn:active { transform: scale(0.96); }
/* 附件 / 停止按钮（对齐原始 .btn-icon） */
.im-attach-btn, .im-stop-btn, .im-share-btn {
  width: 36px; height: 36px;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 17px; color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}
.im-attach-btn:hover, .im-stop-btn:hover, .im-share-btn:hover {
  color: var(--color-primary);
  background: rgba(43, 94, 167, 0.06);
}

/* ============================================================
   气泡入场动画（保留，Phase 4 .im-bubble 复用）
   ============================================================ */
@keyframes imBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 状态 */
.im-bubble--pending { opacity: 0.7; }
.im-bubble--failed { border: 1px solid #ef4444; }

/* 撤回占位 */
.im-revoked {
  color: var(--text-tertiary, #9ca3af);
  font-style: italic; font-size: 13px;
}

/* ============================================================
   Phase 4: IM 消息行（design §4.1 §9.1）
   ============================================================ */
.im-message-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 16px;
}
.im-message-row.mine { flex-direction: row-reverse; }

.im-avatar--theirs {
  width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--bg-card, #f9fafb);
  border: 1px solid var(--msg-ai-border, #e5e7eb);
  color: var(--color-accent, #6366f1);
  font-size: 0.72rem; font-weight: 700; font-style: italic;
}
.im-avatar--mine {
  width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--msg-user-bg, #eff6ff);
  border: 1px solid var(--msg-user-border, #bfdbfe);
  color: var(--color-primary, #3b82f6);
  font-size: 0.72rem; font-weight: 700; font-style: italic;
}

.im-bubble-wrap { max-width: 70%; display: flex; flex-direction: column; }

.im-sender-name {
  font-size: 0.7rem; color: var(--text-muted, #9ca3af); margin-bottom: 2px;
}
.im-message-row.mine .im-sender-name { text-align: right; color: var(--color-primary, #3b82f6); }

.im-bubble {
  display: block; max-width: none;
  padding: 6px 12px; border-radius: 6px;
  font-size: 0.85rem; line-height: 1.5; word-break: break-word;
}
.im-message-row.theirs .im-bubble {
  background: var(--bg-card, #f9fafb);
  border: 1px solid var(--msg-ai-border, #e5e7eb);
  border-bottom-left-radius: 2px;
}
.im-message-row.mine .im-bubble {
  background: var(--msg-user-bg, #eff6ff);
  border-bottom-right-radius: 2px;
}
.im-bubble.im-mentioned {
  border-left: 3px solid var(--color-warning, #f59e0b);
  padding-left: 9px;
}

.im-revoked {
  color: var(--text-muted, #9ca3af);
  font-style: italic; font-size: 0.78rem;
  padding: 4px 12px;
}

/* ============================================================
   Phase 2: 会话列表预览 §9.2
   ============================================================ */
.conversation-item-preview {
  font-size: 0.78rem; color: var(--text-muted, #9ca3af);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px; max-width: 180px;
}

/* 在线状态点 §9.3 */
.online-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success, #27864a);
  position: absolute; bottom: -1px; right: -1px;
  border: 2px solid var(--bg-void, #fff);
}

/* 引用回复条（输入区 + 消息内） */
.im-reply-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 2px 0 4px;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
  cursor: default;
  max-width: 100%;
  overflow: hidden;
}
.im-reply-bar .reply-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.im-reply-bar .reply-close, .im-reply-bar .reply-cancel {
  flex-shrink: 0;
  background: none; border: none;
  cursor: pointer; color: var(--text-muted);
  font-size: 14px; padding: 0 4px; line-height: 1;
  order: -1; /* x 放在最左边 */
}
.im-reply-bar .reply-close:hover, .im-reply-bar .reply-cancel:hover {
  color: var(--color-secondary);
}
/* 消息内的引用预览放在气泡下方 */
.im-bubble-wrap > .im-reply-bar {
  order: 3;
}

/* 附件卡片 §9.5 */
.im-attachment {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; background: var(--bg-card, #f9fafb);
  border: 1px solid var(--msg-ai-border, #e5e7eb);
  border-radius: 6px; margin-top: 6px;
}
.im-attach-thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.im-attach-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-muted); }

/* 首字母头像 §9.7 */
.im-avatar--initials {
  width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; font-style: italic;
  color: #fff; flex-shrink: 0;
}
.im-avatar--group {
  background: var(--bg-panel, #f3f4f6);
  border: 1px solid var(--msg-ai-border, #e5e7eb);
  color: var(--text-muted, #9ca3af);
}

/* @提及浮层 (ui-kit compatible) */
.im-mention-popover {
  background: var(--bg-void, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 200px;
}

/* ============================================================
   Share Card — IM 聊天中的分享卡片
   ============================================================ */
.im-share-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  background: var(--bg-card, #faf7f0);
  border: 1px solid var(--border-color, #d4c9b5);
  border-radius: 6px;
  cursor: pointer;
  max-width: 300px;
  transition: box-shadow 0.15s ease-out;
}
.im-share-card:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.im-share-card--builtin {
  border-left: 3px solid var(--color-primary, #2b5ea7);
}
.im-share-card--marketplace {
  border-left: 3px solid var(--color-warning, #d4900a);
}

.im-share-card__icon {
  width: 36px; height: 36px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  overflow: hidden;
}
.im-share-card__icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.im-share-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.im-share-card__title {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.im-share-card__subtitle {
  font-size: 12px; color: var(--text-secondary, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.im-share-card__source {
  font-size: 11px; color: var(--text-tertiary, #9ca3af);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.im-share-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 4px;
}
.im-share-card__import-btn {
  padding: 3px 10px; border: none; border-radius: 4px;
  background: var(--color-primary, #2b5ea7); color: #fff;
  font-size: 11px; cursor: pointer; white-space: nowrap;
  flex-shrink: 0;
}
.im-share-card__import-btn:hover { opacity: 0.9; }

/* 输入区分享按钮 */
.im-share-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-muted, #8c7e6a);
  padding: 4px; display: flex; align-items: center;
}
.im-share-btn:hover { color: var(--color-primary, #2b5ea7); }

/* ============================================================
   连接状态指示灯 & 面板
   ============================================================ */

/* Web 导航栏底部 */
.navibar-status {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0 14px; cursor: pointer; position: relative;
  border-top: 1px solid var(--msg-ai-border, #e0d8c8); margin: 0 8px;
}

/* 指示灯圆点 */
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; transition: background 0.3s;
  background: transparent;
}
.status-dot.ok       { background: var(--color-success, #27864a); }
.status-dot.warning  { background: var(--color-warning, #d4900a); box-shadow: 0 0 5px rgba(212,144,10,0.45); }
.status-dot.critical {
  background: var(--color-secondary, #c0392b);
  box-shadow: 0 0 6px rgba(192,57,43,0.55);
  animation: status-pulse 1.5s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(1.4); }
}

/* 角标数字 */
.status-badge {
  position: absolute; top: 6px; right: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-secondary, #c0392b); color: #fff;
  font-size: 0.55rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, monospace);
}

/* 面板 */
.status-panel {
  display: none; position: fixed;
  width: 174px; max-height: 300px;
  background: var(--bg-card, #faf7f0);
  border: 1px solid var(--border-color-default, #d4c9b5);
  border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 9999; overflow: hidden; flex-direction: column;
}
.status-panel.open { display: flex; }
.status-panel--desktop { top: 32px; right: 8px; }
.status-panel--web { left: 64px; bottom: 20px; }

.status-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-color-default, #d4c9b5);
  font-size: 0.7rem; font-weight: 600; color: var(--text-main, #3c3226);
}
.status-panel__close {
  background: none; border: none; cursor: pointer;
  font-size: 0.75rem; color: var(--text-muted, #8c7e6a); padding: 1px 5px; border-radius: 3px;
}
.status-panel__close:hover { background: var(--bg-panel, #efe9dc); }

.status-panel__body { overflow-y: auto; padding: 2px 0; max-height: 260px; }

.status-group { padding: 0; }
.status-group__label {
  padding: 4px 10px 1px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.5px;
  color: var(--text-muted, #8c7e6a); text-transform: uppercase;
}

.status-item {
  display: flex; align-items: flex-start; gap: 5px;
  padding: 3px 10px; transition: background 0.1s;
}
.status-item:hover { background: rgba(0,0,0,0.025); }
.status-item__dot {
  width: 5px; height: 5px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
}
.status-item__dot.critical { background: var(--color-secondary, #c0392b); }
.status-item__dot.warning  { background: var(--color-warning, #d4900a); }
.status-item__dot.ok        { background: var(--color-success, #27864a); }
.status-item__info { flex: 1; min-width: 0; }
.status-item__name {
  font-size: 0.7rem; font-weight: 500; color: var(--text-main, #3c3226);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-item__msg {
  font-size: 0.58rem; color: var(--text-muted, #8c7e6a); margin-top: 0px;
}

.status-group-divider {
  height: 1px; background: var(--msg-ai-border, #e0d8c8); margin: 1px 10px;
}

.status-panel__empty {
  padding: 14px; text-align: center;
  font-size: 0.7rem; color: var(--text-muted, #8c7e6a);
}
@layer business {
/* ============================================================================
   Input Hints — 输入框左上角滚动提示语
   ============================================================================ */

.input-hints-ghost {
    position: absolute;
    top: 4px;
    left: 12px;
    right: 60px;
    height: 20px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.input-hints-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease;
}

.input-hints-item {
    height: 20px;
    line-height: 20px;
    font-size: 0.88rem;
    color: var(--text-muted);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

}