tavern-harness 0.1.0

package/src/theme/chat.css

@@ -0,0 +1,1227 @@
+/* ============================================================
+   聊天视图 / 消息气泡 / 输入框 / Markdown 增强
+   ============================================================ */
+
+/* ---------- 消息行 ---------- */
+.msg-row {
+  display: flex;
+  gap: 11px;
+  align-items: flex-start;
+}
+.msg-row.user-row {
+  flex-direction: row-reverse;
+}
+.msg-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.user-row .msg-body {
+  align-items: flex-end;
+}
+.msg-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 4px;
+}
+.msg-head.right {
+  flex-direction: row-reverse;
+}
+.msg-name {
+  font-weight: 700;
+  font-size: 12.5px;
+  font-family: var(--font-serif);
+  letter-spacing: 0.4px;
+  color: var(--text-dim);
+}
+.msg-model {
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  background: var(--surface-2);
+  border: 1px solid var(--border-soft);
+  padding: 1px 6px;
+  border-radius: 6px;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.msg-time {
+  font-size: 10.5px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+.user-avatar {
+  background: var(--grad-from);
+}
+
+.bubble {
+  background: var(--bubble-npc);
+  border: 1px solid var(--bubble-border);
+  border-radius: var(--radius);
+  border-top-left-radius: 4px;
+  padding: 11px 15px;
+  font-size: 14px;
+  box-shadow: var(--shadow);
+  min-width: 0;
+  max-width: 100%;
+  word-break: break-word;
+}
+/* 消息内容带宽：NPC 气泡恒定全宽，用户气泡右对齐，右边缘平齐。
+   - NPC 侧：msg-body 起点在头像(40px)+gap(11px)=51px 处；气泡恒定宽 = msg-body 宽 - 43px，
+     右边缘固定于 W-43px（用户头像占位 32+11=43 的最外侧）
+   - 用户侧：msg-body 终点在 W-43px；气泡右对齐（右边缘恒为 W-43px，与 NPC 平齐），
+     最长时左边缘到达 NPC 头像位 51px
+   - 效果：任意时刻 NPC 右边缘 == 用户右边缘；用户长气泡左边缘 == NPC 左边缘 */
+.msg-row:not(.user-row) .msg-body > .bubble,
+.msg-row:not(.user-row) .msg-body > .tool-calls,
+.msg-row:not(.user-row) .msg-body > .collp,
+.msg-row:not(.user-row) .msg-body > .msg-metrics {
+  width: calc(100% - 43px);
+  max-width: none;
+  align-self: flex-start;
+}
+.msg-row.user-row .msg-body > .bubble,
+.msg-row.user-row .msg-body > .tool-calls,
+.msg-row.user-row .msg-body > .collp,
+.msg-row.user-row .msg-body > .msg-metrics {
+  max-width: calc(100% - 51px);
+  align-self: flex-end;
+}
+.bubble-user {
+  background: var(--bubble-user);
+  border-color: var(--bubble-border-user);
+  border-radius: var(--radius);
+  border-top-right-radius: 4px;
+}
+.msg-row.streaming .bubble {
+  position: relative;
+  z-index: 1;
+  border-color: color-mix(in srgb, var(--primary) 44%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
+    inset 0 0 8px color-mix(in srgb, var(--glow) 16%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 34%, transparent),
+    0 0 16px color-mix(in srgb, var(--glow) 12%, transparent);
+}
+.stream-cursor {
+  display: inline-block;
+  width: 7px;
+  height: 15px;
+  background: var(--primary);
+  border-radius: 2px;
+  margin-left: 2px;
+  vertical-align: -2px;
+  animation: pulse 0.8s infinite;
+}
+.msg-metrics {
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  padding: 0 4px;
+  letter-spacing: 0.2px;
+}
+
+/* ---------- 气泡编辑按钮（常驻显示，位于气泡内最右侧） ---------- */
+.bubble-content-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.bubble-content-row .bubble-text {
+  flex: 1;
+  min-width: 0;
+}
+.msg-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  margin-top: 1px;
+  border: none;
+  border-radius: 7px;
+  background: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.msg-edit-btn:hover {
+  background: var(--surface-2);
+  color: var(--primary);
+}
+
+/* ---------- 气泡内联编辑 ---------- */
+.bubble-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-width: 640px;
+}
+.bubble-editor textarea {
+  width: 100%;
+  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
+    inset 0 0 8px color-mix(in srgb, var(--glow) 18%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 36%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 14%, transparent);
+  font-size: 13.5px;
+}
+.bubble-editor-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.bubble-editor-hint {
+  font-size: 10.5px;
+  color: var(--text-faint);
+}
+
+.sys-banner {
+  align-self: center;
+  font-size: 11.5px;
+  color: var(--text-faint);
+  background: var(--surface-2);
+  border: 1px dashed var(--border);
+  padding: 4px 14px;
+  border-radius: 999px;
+  max-width: 80%;
+}
+.compression-banner-wrap {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.compression-summary-body {
+  padding: 20px;
+  max-height: min(65vh, 620px);
+  overflow: auto;
+  color: var(--text);
+}
+
+/* ---------- 附件 ---------- */
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.attach-card {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  max-width: 220px;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-2);
+  font-size: 12.5px;
+  color: var(--text-dim);
+}
+.attach-card-icon {
+  font-size: 13px;
+  flex-shrink: 0;
+}
+.attach-card-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+}
+
+/* ---------- 工具调用卡片 ---------- */
+.tool-calls {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 2px 0;
+}
+.tool-card {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+.tool-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: none;
+  color: var(--text-dim);
+  font-size: 12.5px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.tool-card-head:hover {
+  background: var(--surface-3);
+}
+.tool-card.executing .tool-card-head {
+  color: var(--primary);
+}
+.tool-card-icon {
+  font-size: 13px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+}
+.tool-card-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tool-args {
+  margin: 0;
+  padding: 8px 14px;
+  font-size: 11px;
+  line-height: 1.45;
+  background: var(--code-bg);
+  border-top: 1px solid var(--border-soft);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 220px;
+  overflow: auto;
+}
+/* 工具卡片展开区：参数 + 结果垂直排列 */
+.tool-card-body {
+  border-top: 1px solid var(--border-soft);
+}
+.tool-card-body .tool-result {
+  border: none;
+  border-radius: 0;
+  padding: 7px 14px;
+  /* 让结果行右侧的「查看」按钮垂直居中（距离上下边缘等距） */
+  align-items: center;
+}
+/* 未展开时展示的工具调用结果摘要行 */
+.tool-card-result-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 6px 12px 7px;
+  border-top: 1px solid var(--border-soft);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 8%, transparent);
+  word-break: break-all;
+}
+.tool-card-result-line.err {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 8%, transparent);
+}
+.tool-card.has-result .tool-card-name,
+.tool-card.has-result .tool-card-icon {
+  color: var(--success);
+}
+.tool-card.has-error .tool-card-name,
+.tool-card.has-error .tool-card-icon {
+  color: var(--danger);
+}
+.tool-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--success);
+  background: var(--success-soft);
+  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
+  border-radius: 10px;
+  padding: 7px 13px;
+  width: 100%;
+  word-break: break-all;
+}
+/* 展开态工具结果：保留换行与缩进 */
+.tool-result .mono {
+  white-space: pre-wrap;
+}
+/* 折叠态摘要行：强制单行省略 */
+.tool-card-result-line .mono {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+.tool-result.err {
+  color: var(--danger);
+  background: var(--danger-soft);
+  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
+}
+/* 工具结果：无头像，左移对齐气泡起点（头像 32px + gap 11px） */
+.tool-row {
+  padding-left: 43px;
+}
+
+/* ---------- 折叠面板（thinking / 工具结果） ---------- */
+/* 与工具调用展示框（tool-card）保持一致的视觉：字号、颜色、展开方式 */
+.collp {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-2);
+  overflow: hidden;
+  margin: 2px 0;
+}
+.collp-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: none;
+  color: var(--text-dim);
+  font-size: 12.5px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.collp-head:hover {
+  background: var(--surface-3);
+}
+.collp-icon {
+  font-size: 13px;
+}
+.collp-title {
+  flex: 1;
+}
+.collp-arrow {
+  font-size: 11px;
+  color: var(--text-faint);
+  transition: transform 0.18s;
+}
+.collp-body {
+  border-top: 1px solid var(--border-soft);
+  padding: 0;
+}
+.collp-content {
+  max-height: 240px;
+  overflow: auto;
+  padding: 8px 14px;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  background: var(--code-bg);
+  word-break: break-word;
+}
+.collp-content .md {
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+.collp-preview {
+  padding: 5px 12px 8px;
+  font-size: 12px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* 流式预览：只显示最新一行，超出省略 */
+.collp-preview.live {
+  white-space: nowrap;
+}
+.collp-live {
+  display: inline-flex;
+}
+.collp-more {
+  padding: 5px 12px 7px;
+  border-top: 1px solid var(--border-soft);
+  color: var(--text-faint);
+  font-size: 10.5px;
+  text-align: center;
+}
+
+/* ---------- 输入区 ---------- */
+.composer {
+  padding: 8px 22px 12px;
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 62%, transparent);
+  backdrop-filter: blur(16px);
+}
+.composer-box {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  max-width: 820px;
+  margin: 0 auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 4px 6px 4px 6px;
+  box-shadow: 0 0 0 1px transparent, var(--shadow);
+  transition: border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.composer-box:focus-within {
+  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
+    inset 0 0 10px color-mix(in srgb, var(--glow) 22%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
+    0 0 10px color-mix(in srgb, var(--glow) 42%, transparent),
+    0 0 20px color-mix(in srgb, var(--glow) 18%, transparent);
+}
+.composer-box textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  padding: 7px 4px;
+  font-size: 14px;
+  color: var(--text);
+  line-height: 1.5;
+}
+.composer-box textarea::placeholder {
+  color: var(--text-faint);
+}
+/* 输入框两端的图标按钮：与发送按钮等大（40×40） */
+.composer-box .composer-attach {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+.composer-box .composer-model-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 40px;
+  max-width: 180px;
+  padding: 0 10px;
+  border-radius: 12px;
+  flex-shrink: 0;
+  background: var(--surface-2);
+  border: 1px solid var(--border-soft);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 600;
+  transition: background 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.composer-box .composer-model-btn:hover {
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
+}
+/* 弹层打开（激活态）才显示辉光 */
+.composer-box .composer-model-btn.open {
+  background: var(--primary-soft);
+  border-color: color-mix(in srgb, var(--primary) 44%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 38%, transparent),
+    0 0 16px color-mix(in srgb, var(--glow) 16%, transparent);
+}
+.composer-model-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+.composer-model {
+  position: relative;
+  align-self: flex-end;
+}
+.btn-round {
+  border-radius: 12px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+/* ---------- 模型选择下拉 ---------- */
+.model-popover {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 0;
+  width: min(320px, 78vw);
+  z-index: 60;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-lg);
+}
+.model-popover-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--border-soft);
+  font-weight: 800;
+  font-size: 13px;
+}
+.model-popover-list {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.model-popover-empty {
+  padding: 14px;
+  font-size: 12.5px;
+  color: var(--text-faint);
+  line-height: 1.7;
+}
+.model-popover .model-option {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+}
+.model-popover .model-option:hover {
+  background: var(--surface-2);
+}
+.model-popover .model-option.active {
+  background: var(--primary-soft);
+  color: var(--primary);
+  box-shadow:
+    inset 0 0 8px color-mix(in srgb, var(--glow) 18%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
+}
+.model-option-dot {
+  font-size: 11px;
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+  color: var(--text-faint);
+}
+.model-option.active .model-option-dot {
+  color: var(--primary);
+}
+.model-option-name {
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.composer-hint {
+  display: flex;
+  justify-content: space-between;
+  max-width: 820px;
+  margin: 6px auto 0;
+  font-size: 10.5px;
+  color: var(--text-faint);
+}
+.composer-hint-right {
+  font-family: var(--font-mono);
+}
+.attach-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 820px;
+  margin: 0 auto 8px;
+}
+.attach-preview .attach-card {
+  background: var(--surface);
+}
+.attach-rm {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
+  border: none;
+  background: var(--danger);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  line-height: 1;
+}
+.attach-rm svg {
+  display: block;
+  margin: auto;
+}
+.attach-card .attach-rm {
+  position: static;
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+.cmd-menu {
+  max-width: 820px;
+  margin: 0 auto 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+}
+.cmd-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 9px 14px;
+  border: none;
+  background: none;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+}
+.cmd-item:hover {
+  background: var(--surface-2);
+}
+.cmd-item.active {
+  background: var(--primary-soft);
+  box-shadow:
+    inset 0 0 8px color-mix(in srgb, var(--glow) 16%, transparent);
+}
+.cmd-item.active .cmd-text,
+.cmd-item.active .cmd-desc {
+  color: var(--primary);
+}
+.cmd-text {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--primary);
+  width: 60px;
+}
+.cmd-desc {
+  font-size: 12.5px;
+  color: var(--text-dim);
+}
+
+/* ---------- Markdown 语义样式 ---------- */
+.md {
+  line-height: 1.68;
+  word-break: break-word;
+}
+.md > *:first-child {
+  margin-top: 0;
+}
+.md > *:last-child {
+  margin-bottom: 0;
+}
+.md p {
+  margin: 0.35em 0;
+}
+.md h1,
+.md h2,
+.md h3,
+.md h4,
+.md h5,
+.md h6 {
+  margin: 0.9em 0 0.4em;
+  font-weight: 800;
+  line-height: 1.3;
+}
+.md h1 { font-size: 1.45em; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.25em; }
+.md h2 { font-size: 1.28em; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.2em; }
+.md h3 { font-size: 1.15em; }
+.md h4 { font-size: 1.05em; }
+.md ul,
+.md ol {
+  padding-left: 1.4em;
+  margin: 0.4em 0;
+}
+.md li {
+  margin: 0.2em 0;
+}
+.md li > ul,
+.md li > ol {
+  margin: 0;
+}
+.md a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.md a:hover {
+  opacity: 0.85;
+}
+.md blockquote {
+  margin: 0.5em 0;
+  padding: 2px 14px;
+  border-left: 3px solid var(--primary-dim);
+  color: var(--text-dim);
+  background: var(--primary-soft);
+  border-radius: 0 8px 8px 0;
+}
+.md hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1em 0;
+}
+.md code {
+  font-family: var(--font-mono);
+  font-size: 0.86em;
+  background: var(--code-bg-inline);
+  padding: 1.5px 6px;
+  border-radius: 6px;
+  color: var(--primary);
+}
+.md pre.code-block {
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  padding: 12px 14px;
+  overflow-x: auto;
+  margin: 0.6em 0;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+.md pre.code-block code {
+  background: none;
+  padding: 0;
+  color: var(--text);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.md .tok-kw { color: #cc7832; font-weight: 600; }
+.md .tok-str { color: #6a8759; }
+.md .tok-num { color: #6897bb; }
+.md .tok-type { color: #a9b7c6; font-weight: 600; }
+.md .tok-comment { color: var(--text-faint); font-style: italic; }
+[data-theme='light'] .md .tok-kw { color: #7b3f00; }
+[data-theme='light'] .md .tok-str { color: #2e7d32; }
+[data-theme='light'] .md .tok-num { color: #1565c0; }
+[data-theme='light'] .md .tok-type { color: #546e7a; }
+.md table {
+  border-collapse: collapse;
+  margin: 0.6em 0;
+  width: 100%;
+  font-size: 0.92em;
+}
+.md th,
+.md td {
+  border: 1px solid var(--border);
+  padding: 6px 11px;
+  text-align: left;
+}
+.md th {
+  background: var(--surface-2);
+  font-weight: 700;
+}
+.md tr:nth-child(2n) td {
+  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
+}
+.md img {
+  max-width: 100%;
+  border-radius: 10px;
+}
+.mention {
+  font-weight: 800;
+  font-style: italic;
+  color: var(--primary);
+  background: var(--primary-soft);
+  border-radius: 6px;
+  padding: 0 5px;
+}
+
+/* ---------- 群聊发言队列面板（右侧，回合制样式） ---------- */
+.turn-queue {
+  width: 210px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 55%, transparent);
+  backdrop-filter: blur(16px);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 12px 14px;
+  gap: 10px;
+}
+.turn-queue-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: var(--font-serif);
+  font-size: 13.5px;
+  font-weight: 700;
+  color: var(--text);
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-soft);
+  flex-shrink: 0;
+}
+.turn-queue-loop {
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  background: var(--surface-2);
+  padding: 1px 7px;
+  border-radius: 999px;
+}
+.turn-queue-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  padding-right: 2px;
+}
+.turn-queue-loop-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.turn-queue-loop-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 10.5px;
+  font-weight: 800;
+  color: var(--text-faint);
+  letter-spacing: 0.4px;
+  padding: 2px 2px 0;
+}
+.turn-queue-loop-cur {
+  color: var(--primary);
+  background: var(--primary-soft);
+  border-radius: 999px;
+  padding: 1px 7px;
+  font-size: 9.5px;
+}
+.turn-queue-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.turn-queue-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: 10px;
+  font-size: 12.5px;
+  color: var(--text-dim);
+  border: 1px solid transparent;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+/* 可点击定位：整行可点，悬停有反馈 */
+.turn-queue-item {
+  cursor: pointer;
+}
+.turn-queue-item:hover {
+  background: var(--surface-2);
+  border-color: var(--border);
+}
+.turn-queue-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.turn-queue-idx {
+  width: 16px;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+.turn-queue-item.active {
+  position: relative;
+  z-index: 1;
+  background: var(--primary-soft);
+  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
+  box-shadow:
+    inset 0 0 8px color-mix(in srgb, var(--glow) 20%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 38%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 16%, transparent);
+}
+/* 轮到玩家：整行警告色高亮 */
+.turn-queue-item.waiting-user {
+  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
+  background: var(--warn-soft);
+}
+/* 正在发言的角色：整行高亮 + 闪烁（无文字指示器） */
+.turn-queue-item.active.playing {
+  animation: queueSpeaking 1.2s ease-in-out infinite;
+}
+.turn-queue-item.active.playing .turn-queue-name {
+  color: var(--primary);
+}
+@keyframes queueSpeaking {
+  0%,
+  100% {
+    background: var(--primary-soft);
+    box-shadow:
+      inset 0 0 8px color-mix(in srgb, var(--glow) 18%, transparent),
+      0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
+      0 0 8px color-mix(in srgb, var(--glow) 36%, transparent),
+      0 0 14px color-mix(in srgb, var(--glow) 14%, transparent);
+    opacity: 1;
+  }
+  50% {
+    background: color-mix(in srgb, var(--primary) 22%, transparent);
+    box-shadow:
+      inset 0 0 10px color-mix(in srgb, var(--glow) 26%, transparent),
+      0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent),
+      0 0 12px color-mix(in srgb, var(--glow) 48%, transparent),
+      0 0 20px color-mix(in srgb, var(--glow) 20%, transparent);
+    opacity: 0.55;
+  }
+}
+.turn-queue-seat {
+  font-size: 9.5px;
+  font-weight: 800;
+  color: var(--text-faint);
+  background: var(--surface-2);
+  border-radius: 999px;
+  padding: 1px 7px;
+  flex-shrink: 0;
+}
+.turn-queue-foot {
+  margin-top: auto;
+  font-size: 10.5px;
+  color: var(--text-faint);
+  padding-top: 8px;
+  border-top: 1px solid var(--border-soft);
+  flex-shrink: 0;
+}
+
+/* 聊天主区 + 右侧队列的横向布局 */
+.chat-main-row {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+.chat-main-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.chat-main-col .chat-scroll {
+  flex: 1;
+}
+
+/* ---------- 输入区 @ 自动补全 ---------- */
+.composer-input-wrap {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  min-width: 0;
+}
+.composer-rich {
+  position: absolute;
+  inset: 0;
+  padding: 7px 4px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text);
+  white-space: pre-wrap;
+  overflow: auto;
+  pointer-events: none;
+}
+.composer-input-wrap textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  resize: none;
+  padding: 7px 4px;
+  font-size: 14px;
+  color: var(--text);
+  line-height: 1.5;
+  min-width: 0;
+}
+.composer-input-wrap textarea.with-rich {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--text);
+  position: relative;
+  z-index: 1;
+}
+.mention.mention-live,
+.cmd-live {
+  font-weight: inherit;
+  font-style: inherit;
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  color: var(--primary);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--primary) 55%, transparent);
+  text-underline-offset: 2px;
+}
+.mention-pop {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  min-width: 190px;
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow-lg);
+  padding: 5px;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.mention-pop-head {
+  font-size: 10.5px;
+  font-weight: 800;
+  color: var(--text-faint);
+  padding: 4px 8px 6px;
+  letter-spacing: 0.4px;
+}
+.mention-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 12.5px;
+  cursor: pointer;
+  text-align: left;
+}
+.mention-item:hover {
+  background: var(--surface-2);
+}
+.mention-item.active {
+  background: var(--primary-soft);
+  color: var(--primary);
+  box-shadow:
+    inset 0 0 8px color-mix(in srgb, var(--glow) 16%, transparent);
+}
+.mention-item-at {
+  font-weight: 800;
+  color: var(--primary);
+}
+
+/* ---------- 排序弹窗 ---------- */
+.seg {
+  display: flex;
+  background: var(--surface-2);
+  border: 1px solid var(--border-soft);
+  border-radius: 10px;
+  padding: 3px;
+  margin-bottom: 8px;
+}
+.seg-btn {
+  flex: 1;
+  border: none;
+  background: none;
+  padding: 7px 10px;
+  border-radius: 8px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.seg-btn.active {
+  background: var(--surface);
+  color: var(--primary);
+  box-shadow: var(--shadow);
+}
+.sort-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sort-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 9px;
+  border: 1px solid var(--border-soft);
+  border-radius: 10px;
+  background: var(--surface-2);
+  font-size: 13px;
+  color: var(--text);
+  cursor: grab;
+  user-select: none;
+  touch-action: none; /* dnd-kit：允许触摸设备拖拽 */
+  /* 平滑过渡：拖拽时 transform 由 dnd-kit 驱动，这里只给结束回弹加过渡 */
+  transition: box-shadow 0.15s ease, opacity 0.15s ease;
+}
+.sort-item:hover {
+  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
+}
+.sort-item:active {
+  cursor: grabbing;
+}
+/* 正在拖拽的卡片：抬升 + 阴影 */
+.sort-item.dragging {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent),
+    0 0 10px color-mix(in srgb, var(--glow) 42%, transparent),
+    0 0 24px color-mix(in srgb, var(--glow) 16%, transparent),
+    var(--shadow-lg);
+  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
+  cursor: grabbing;
+}
+.sort-grip {
+  color: var(--text-faint);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+.sort-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sort-tag {
+  font-size: 9.5px;
+  font-weight: 800;
+  color: var(--primary);
+  background: var(--primary-soft);
+  border-radius: 999px;
+  padding: 1px 7px;
+  flex-shrink: 0;
+}
+.math-block {
+  text-align: center;
+  margin: 0.7em 0;
+  overflow-x: auto;
+  padding: 6px 0;
+}
+.math-fallback {
+  opacity: 0.8;
+}
+.md .katex {
+  font-size: 1.08em;
+}