/* ===== 微信聊天界面完整样式 ===== */

/* 容器 */
.wechat-container {
  width: 375px;
  max-width: 100%;
  margin: 20px auto;
  border-radius: 20px;
  overflow: hidden;
  background-color: #EDEDED;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: #111;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ===== 状态栏 ===== */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background-color: #303030;
  letter-spacing: 0.5px;
}

/* ===== 聊天头部 ===== */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 12px;
  background-color: #303030;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.back-btn {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  font-weight: 300;
}

.header-title {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  flex: 1;
  text-align: center;
  letter-spacing: 0.3px;
}

.header-more {
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  padding: 4px 0 4px 8px;
  letter-spacing: 2px;
}

/* ===== 消息区域 ===== */
.chat-messages {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  max-height: 520px;
  overflow-y: auto;
  background-color: #EDEDED;
}

/* 滚动条美化 */
.chat-messages::-webkit-scrollbar {
  width: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

/* ===== 时间分割线 ===== */
.chat-time-divider {
  text-align: center;
  font-size: 11px;
  color: #999;
  padding: 6px 0 4px;
  letter-spacing: 0.5px;
}

/* ===== 消息行 ===== */
.message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
}

.message-row.self {
  flex-direction: row;
  justify-content: flex-end;
}

/* ===== 头像 ===== */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  text-transform: uppercase;
  background-color: #ccc;
  overflow: hidden;
}

/* ===== 气泡 - 通用 ===== */
.bubble {
  max-width: 65%;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.55;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* 对方气泡（白色） */
.bubble.white {
  background-color: #fff;
  color: #111;
  border-top-left-radius: 2px;
}

/* 自己气泡（绿色） */
.bubble.green {
  background-color: #95EC69;
  color: #111;
  border-top-right-radius: 2px;
}

/* 气泡小三角 - 左侧（对方） */
.message-row:not(.self) .bubble::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #fff;
}

/* 气泡小三角 - 右侧（自己） */
.message-row.self .bubble::before {
  content: "";
  position: absolute;
  top: 12px;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #95EC69;
}

/* ===== 转账消息 ===== */
.bubble-transfer {
  max-width: 240px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.message-row:not(.self) .bubble-transfer {
  border-top-left-radius: 2px;
}

.message-row.self .bubble-transfer {
  border-top-right-radius: 2px;
}

.transfer-amount {
  background: linear-gradient(135deg, #F8A035, #F0880A);
  color: #fff;
  padding: 18px 16px 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.transfer-label {
  background: linear-gradient(135deg, #F8A035, #F0880A);
  color: rgba(255, 255, 255, 0.85);
  padding: 2px 16px 16px;
  font-size: 12px;
}

.transfer-footer {
  background-color: #FAFAFA;
  padding: 8px 16px;
  font-size: 11px;
  color: #999;
  border-top: 1px solid #eee;
}

/* ===== 红包消息 ===== */
.bubble-redpacket {
  max-width: 240px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.message-row:not(.self) .bubble-redpacket {
  border-top-left-radius: 2px;
}

.message-row.self .bubble-redpacket {
  border-top-right-radius: 2px;
}

.rp-title {
  background: linear-gradient(135deg, #E25141, #C83C2C);
  color: #fff;
  padding: 18px 16px 4px;
  font-size: 16px;
  font-weight: 500;
}

.rp-desc {
  background: linear-gradient(135deg, #E25141, #C83C2C);
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 16px 16px;
  font-size: 12px;
}

.rp-footer {
  background-color: #FAFAFA;
  padding: 8px 16px;
  font-size: 11px;
  color: #999;
  border-top: 1px solid #eee;
}

/* ===== 底部输入栏 ===== */
.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background-color: #F7F7F7;
  border-top: 1px solid #DEDEDE;
}

.input-icon {
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.input-icon:hover {
  opacity: 1;
}

.input-field {
  flex: 1;
  background-color: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #999;
  min-height: 20px;
  line-height: 20px;
}

/* ===== 响应式适配 ===== */
@media (max-width: 420px) {
  .wechat-container {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }
}
/* ========================================================= */
/*  霓虹夜巷 · 六姐妹抱团 状态栏 CSS（浅彩霓虹 · 护眼版）    */
/*  主题：米白底 × 淡霓虹粉 × 柔电子青 × 暖金 × 浅紫         */
/*  使用：状态文本请顶格写，勿缩进                            */
/* ========================================================= */

:root {
  --nv-bg:        #faf7fc;
  --nv-bg-2:      #f3ecfa;
  --nv-glass:     rgba(255, 245, 255, 0.75);
  --nv-pink:      #d6336c;
  --nv-pink-soft: #e8739a;
  --nv-cyan:      #0d9e9e;
  --nv-purple:    #9b4dff;
  --nv-gold:      #c7912b;
  --nv-red:       #d94a5a;
  --nv-line:      rgba(180, 160, 200, 0.25);
  --nv-line-2:    rgba(155, 77, 255, 0.2);
  --nv-ink:       #2e1a3a;
  --nv-ink-soft:  #5c4a6b;
  --nv-ink-dim:   #8a7b9c;
}

/* ---------- 最外层标题 ---------- */
.k-sum {
  cursor: pointer;
  list-style: none;
  padding: 15px 20px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 3px;
  text-align: center;
  color: var(--nv-ink);
  background: linear-gradient(120deg,
      rgba(255, 46, 136, 0.12) 0%,
      rgba(177, 77, 255, 0.1) 45%,
      rgba(0, 240, 255, 0.08) 100%);
  border: 1px solid var(--nv-line-2);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(200, 160, 220, 0.15),
              0 0 0 1px rgba(0, 240, 255, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  user-select: none;
  transition: letter-spacing .3s ease, box-shadow .3s ease, background .3s ease;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.k-sum::-webkit-details-marker { display: none; }
.k-sum::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg,
      transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: nv-sheen 4.5s ease-in-out infinite;
}
@keyframes nv-sheen {
  0%, 65% { left: -60%; }
  100% { left: 130%; }
}
.k-sum:hover {
  letter-spacing: 4px;
  box-shadow: 0 8px 30px rgba(155, 77, 255, 0.15),
              0 0 20px rgba(0, 240, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

details[open] > .k-sum {
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}

/* ---------- 主容器 ---------- */
.k-box {
  padding: 18px 20px 20px;
  color: var(--nv-ink);
  font-size: 14px;
  line-height: 2;
  background:
      radial-gradient(circle at 12% 8%, rgba(255, 46, 136, 0.04), transparent 42%),
      radial-gradient(circle at 88% 12%, rgba(0, 240, 255, 0.03), transparent 44%),
      linear-gradient(165deg, var(--nv-bg-2) 0%, var(--nv-bg) 100%);
  border: 1px solid var(--nv-line-2);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 30px rgba(180, 160, 200, 0.2),
              inset 0 0 40px rgba(177, 77, 255, 0.03);
  animation: nv-fade .45s ease;
  white-space: pre-wrap;
}
@keyframes nv-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 内嵌折叠 ---------- */
.k-box details {
  margin: 12px 0;
  background: var(--nv-glass);
  border: 1px solid var(--nv-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 4px 14px rgba(180, 160, 200, 0.15);
  white-space: normal;
  backdrop-filter: blur(6px);
}
.k-box details summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 16px 11px 40px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 1px;
  color: var(--nv-ink);
  background: linear-gradient(100deg,
      rgba(255, 46, 136, 0.06), rgba(177, 77, 255, 0.05));
  position: relative;
  transition: background .3s ease;
}
.k-box details summary::-webkit-details-marker { display: none; }
.k-box details summary:hover {
  background: linear-gradient(100deg,
      rgba(255, 46, 136, 0.12), rgba(0, 240, 255, 0.08));
}
.k-box details summary::before {
  content: "◈";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  color: var(--nv-cyan);
  font-size: 11px;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
  transition: transform .35s cubic-bezier(.4,.2,.2,1), color .3s;
}
.k-box details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
  color: var(--nv-pink);
  text-shadow: 0 0 6px rgba(255, 46, 136, 0.3);
}
.k-box details[open] > summary {
  border-bottom: 1px dashed var(--nv-line-2);
}
.k-box details > *:not(summary) {
  padding: 10px 16px;
  white-space: pre-wrap;
  line-height: 1.95;
  animation: nv-fade .4s ease;
}

/* ---------- 强调文字 ---------- */
.k-box strong, .k-box b {
  color: var(--nv-gold);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(199, 145, 43, 0.2);
}
.k-box em, .k-box i {
  color: var(--nv-cyan);
  font-style: italic;
}

/* ---------- 滚动条 ---------- */
.k-box::-webkit-scrollbar { width: 6px; }
.k-box::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--nv-pink), var(--nv-purple));
  border-radius: 6px;
}

/* ===== 霓虹夜巷 · 浅色聊天框 ===== */

/* 隐藏顶部颜色装饰条 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 统一聊天框：浅彩底 · 淡紫描边 */
.bg-gray-100\/90.relative.inline-block {
    position: relative !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 46, 136, 0.04), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(0, 240, 255, 0.03), transparent 45%),
        linear-gradient(160deg, #f3ecfa 0%, #faf7fc 100%) !important;
    border: 1px solid rgba(177, 77, 255, 0.2) !important;
    border-radius: 12px !important;
    box-shadow:
        0 6px 26px rgba(180, 160, 200, 0.2),
        0 0 0 1px rgba(0, 240, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    overflow: hidden !important;
    transition: box-shadow .35s ease, border-color .35s ease !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    border-color: #d6336c !important;
    box-shadow:
        0 8px 32px rgba(214, 51, 108, 0.1),
        0 0 22px rgba(155, 77, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 顶部柔光带 */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    z-index: 0 !important;
    background: linear-gradient(90deg,
        transparent 0%,
        #d6336c 20%,
        #0d9e9e 50%,
        #9b4dff 80%,
        transparent 100%) !important;
    opacity: .5 !important;
}

/* 单独输入框：保持统一浅调 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(160deg, #f5effa 0%, #efe5f5 100%) !important;
    border: 1px solid rgba(0, 240, 255, 0.18) !important;
    box-shadow:
        0 6px 22px rgba(180, 160, 200, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #0d9e9e 25%,
        #d6336c 50%,
        #c7912b 75%,
        transparent 100%) !important;
}

/* 主文本：深紫灰字 */
.markdown-body {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    color: #2e1a3a !important;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    letter-spacing: .3px !important;
}

/* 加粗字段名 —— 暖金 */
.markdown-body strong,
.markdown-body b {
    color: #c7912b !important;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(199, 145, 43, 0.15) !important;
}

/* 斜体 —— 柔青 */
.markdown-body em,
.markdown-body i {
    color: #0d9e9e !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

/* 引用块 —— 淡粉竖纹 */
.markdown-body blockquote {
    border-left: 3px solid #d6336c !important;
    background: rgba(214, 51, 108, 0.06) !important;
    margin: 8px 0 !important;
    padding: 6px 14px !important;
    border-radius: 0 8px 8px 0 !important;
    color: #5c4a6b !important;
    box-shadow: -6px 0 16px rgba(214, 51, 108, 0.05) !important;
}

/* 无序列表 —— 柔青菱形符号 */
.markdown-body ul {
    list-style: none !important;
    padding-left: 8px !important;
}
.markdown-body ul li {
    position: relative !important;
    padding-left: 22px !important;
}
.markdown-body ul li::before {
    content: "◈" !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    color: #0d9e9e !important;
    font-size: 10px !important;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.25) !important;
}

/* 分割线 —— 淡彩断链 */
.markdown-body hr {
    border: none !important;
    height: 2px !important;
    margin: 14px 0 !important;
    background: linear-gradient(90deg,
        transparent, #d6336c 20%, #0d9e9e 50%, #9b4dff 80%, transparent) !important;
    opacity: .35 !important;
}

/* ===== 底部功能按钮 · 浅彩调 ===== */
.flex.items-center.gap-2.pb-2 > button {
    background: linear-gradient(160deg, #f5effa 0%, #efe5f5 100%) !important;
    color: #2e1a3a !important;
    border: 1.5px solid #d6336c !important;
    border-radius: 8px !important;
    box-shadow:
        2px 2px 0px rgba(155, 77, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: none !important;
    transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease, border-color .2s ease !important;
    padding: 6px 16px !important;
}

.flex.items-center.gap-2.pb-2 > button:hover {
    background: linear-gradient(160deg, #f0e5f8 0%, #e8daf3 100%) !important;
    color: #d6336c !important;
    border-color: #0d9e9e !important;
    box-shadow:
        2px 2px 0px rgba(0, 240, 255, 0.15),
        0 0 14px rgba(214, 51, 108, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-1px) !important;
}

.flex.items-center.gap-2.pb-2 > button:active {
    background: linear-gradient(160deg, #e8daf3 0%, #e0cff0 100%) !important;
    color: #0d9e9e !important;
    transform: translate(2px, 2px) !important;
    box-shadow:
        0px 0px 0px rgba(0, 240, 255, 0),
        inset 0 1px 3px rgba(180, 160, 200, 0.3) !important;
}

/* 操作按钮（复制/编辑等）*/
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #5c4a6b !important;
    border-radius: 8px !important;
    transition: background .25s ease, color .25s ease !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #d6336c !important;
    background: rgba(214, 51, 108, 0.06) !important;
}

/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #5c4a6b !important;
    letter-spacing: .5px !important;
    font-weight: 500 !important;
}

/* Token 消耗 —— 柔粉 */
.text-orange-500 {
    color: #d6336c !important;
    font-weight: 600 !important;
    text-shadow: 0 0 4px rgba(214, 51, 108, 0.15) !important;
}
/* ===== 输入框 ===== */
#ai-chat-input {
    background: linear-gradient(160deg, #f5effa 0%, #efe5f5 100%) !important;
    border: 1.5px solid rgba(0, 240, 255, 0.18) !important;
    border-radius: 10px !important;
    color: #2e1a3a !important;
    box-shadow:
        inset 2px 2px 6px rgba(180, 160, 200, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
}

#ai-chat-input:focus {
    border-color: #d6336c !important;
    box-shadow:
        inset 2px 2px 6px rgba(180, 160, 200, 0.1),
        0 0 0 3px rgba(214, 51, 108, 0.08),
        0 0 18px rgba(155, 77, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    outline: none !important;
}

#ai-chat-input::placeholder {
    color: #8a7b9c !important;
    letter-spacing: .5px !important;
}

#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* ===== 加载动画：淡彩旋环 ===== */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    min-height: 26px !important;
    overflow: visible !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 26px !important;
    height: 26px !important;
    transform: translate(-50%, -50%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    z-index: 2 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round"><circle cx="24" cy="24" r="18" stroke="%23e0d0f0" stroke-width="3"/><path d="M24 6 a18 18 0 0 1 15.6 9" stroke="%23d6336c" stroke-width="3.5"><animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24" dur="0.9s" repeatCount="indefinite"/></path><path d="M24 36 a12 12 0 0 1-10.4-6" stroke="%230d9e9e" stroke-width="2.5"><animateTransform attributeName="transform" type="rotate" from="360 24 24" to="0 24 24" dur="1.4s" repeatCount="indefinite"/></path></g><circle cx="24" cy="24" r="3.5" fill="%239b4dff"><animate attributeName="r" values="2.5;4.5;2.5" dur="1.1s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="1.1s" repeatCount="indefinite"/></circle></svg>') !important;
}

@keyframes nv-load-breathe {
    0%, 100% { opacity: .8; filter: drop-shadow(0 0 3px rgba(214, 51, 108, 0.2)); }
    50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.25)); }
}
.flex.items-center.justify-center.w-6.h-5::before {
    animation: nv-load-breathe 1.1s ease-in-out infinite !important;
}

/* ===== 顶部导航栏 ===== */
.flex.items-center.justify-between.w-full.relative {
    padding: 4px 2px !important;
    border-bottom: 1px solid transparent !important;
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(214, 51, 108, 0.2) 20%,
        rgba(0, 240, 255, 0.2) 50%,
        rgba(155, 77, 255, 0.2) 80%,
        transparent 100%) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    background-size: 100% 1.5px !important;
}

/* 状态徽标 */
.text-green-800.bg-green-100 {
    color: #2e1a3a !important;
    background: linear-gradient(135deg, rgba(255, 46, 136, 0.08) 0%, rgba(177, 77, 255, 0.06) 100%) !important;
    border: 1px solid #d6336c !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
                0 0 10px rgba(214, 51, 108, 0.08) !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
}

/* 图标按钮 */
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall {
    color: #5c4a6b !important;
    border-radius: 8px !important;
    transition: background .25s ease, color .25s ease !important;
}
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall:hover {
    color: #d6336c !important;
    background: rgba(214, 51, 108, 0.06) !important;
}
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall svg {
    color: inherit !important;
}

/* AI 模型选择器 */
#ai-model-selector > div {
    background: linear-gradient(160deg, #f5effa 0%, #efe5f5 100%) !important;
    outline: 1.5px solid rgba(0, 240, 255, 0.18) !important;
    border-radius: 10px !important;
    box-shadow:
        0 3px 12px rgba(180, 160, 200, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: outline-color .3s ease, box-shadow .3s ease !important;
    height: 32px !important;
}
#ai-model-selector > div:hover {
    outline-color: #d6336c !important;
    box-shadow:
        0 5px 18px rgba(214, 51, 108, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
#ai-model-selector .truncate {
    color: #2e1a3a !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
}
#ai-model-selector > div:hover .truncate {
    color: #d6336c !important;
}
#ai-model-selector svg[data-icon="ChevronDown"] {
    color: #5c4a6b !important;
    transition: transform .3s ease, color .3s ease !important;
}
#ai-model-selector > div:hover svg[data-icon="ChevronDown"] {
    color: #d6336c !important;
}
#ai-model-selector[data-state="open"] svg[data-icon="ChevronDown"] {
    transform: rotate(180deg) !important;
}
/* ===== 角色标签缎带 · 六姐妹浅彩专属配色 ===== */
p[class^="role-"] {
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.8;
  border-left: 3px solid transparent;
  background: rgba(250, 245, 255, 0.7);
  box-shadow: 0 2px 10px rgba(180, 160, 200, 0.12);
  transition: all .25s ease;
}

/* 林语嫣 · 大姐（柔粉紫） */
.role-lan {
  position: relative;
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  border-left: 3px solid #d6336c;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
  z-index: 0;
  overflow: hidden;
  color: #5c1a3a;
  background: linear-gradient(120deg,
      rgba(214, 51, 108, 0.08) 0%,
      rgba(155, 77, 255, 0.06) 100%);
  box-shadow: 0 2px 14px rgba(214, 51, 108, 0.06);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all .25s ease;
}
.role-lan::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(255, 109, 176, 0.1) 0%,
    transparent 60%
  );
  opacity: 0.5;
  z-index: -2;
}
.role-lan:hover {
  border-left-color: #e8739a;
  box-shadow: 0 4px 20px rgba(214, 51, 108, 0.12), 0 0 12px rgba(155, 77, 255, 0.08);
  color: #7a2a4a;
}

/* 苏夏 · 狂犬护卫（柔红） */
.role-xia {
  position: relative;
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  border-left: 3px solid #d94a5a;
  font-weight: 700;
  color: #5c2a30;
  background: linear-gradient(120deg,
      rgba(217, 74, 90, 0.08) 0%,
      rgba(214, 51, 108, 0.05) 100%);
  box-shadow: 0 2px 14px rgba(217, 74, 90, 0.06);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all .25s ease;
}
.role-xia:hover {
  border-left-color: #d6336c;
  box-shadow: 0 4px 20px rgba(217, 74, 90, 0.12);
  color: #7a3a42;
}

/* 苏秋 · 白切黑诱饵（暖金） */
.role-qiu {
  position: relative;
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  border-left: 3px solid #c7912b;
  font-weight: 700;
  color: #5c4a20;
  background: linear-gradient(120deg,
      rgba(199, 145, 43, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 2px 14px rgba(199, 145, 43, 0.05);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all .25s ease;
}
.role-qiu:hover {
  border-left-color: #e0c080;
  box-shadow: 0 4px 20px rgba(199, 145, 43, 0.1);
  color: #7a652a;
}

/* 陈星野 · 假小子（柔青） */
.role-ye {
  position: relative;
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  border-left: 3px solid #0d9e9e;
  font-weight: 700;
  color: #1a4a4a;
  background: linear-gradient(120deg,
      rgba(0, 240, 255, 0.06) 0%,
      rgba(155, 77, 255, 0.04) 100%);
  box-shadow: 0 2px 14px rgba(0, 240, 255, 0.06);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all .25s ease;
}
.role-ye:hover {
  border-left-color: #9b4dff;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.12);
  color: #2a5a5a;
}

/* 赵楚楚 · 地雷系（柔紫） */
.role-chu {
  position: relative;
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  border-left: 3px solid #9b4dff;
  font-weight: 700;
  color: #3a1a5a;
  background: linear-gradient(120deg,
      rgba(155, 77, 255, 0.08) 0%,
      rgba(217, 74, 90, 0.04) 100%);
  box-shadow: 0 2px 14px rgba(155, 77, 255, 0.06);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all .25s ease;
}
.role-chu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 70% 50%, rgba(217, 74, 90, 0.08) 0%, transparent 60%);
  opacity: 0.5;
  z-index: -2;
}
.role-chu:hover {
  border-left-color: #d94a5a;
  box-shadow: 0 4px 20px rgba(155, 77, 255, 0.12);
  color: #5a2a7a;
}

/* 许曼曼 · 交际花（柔粉金） */
.role-man {
  position: relative;
  margin: 8px 0;
  padding: 8px 14px 8px 16px;
  border-radius: 8px;
  border-left: 3px solid #e8739a;
  font-weight: 700;
  color: #5c2a3a;
  background: linear-gradient(120deg,
      rgba(255, 158, 196, 0.08) 0%,
      rgba(199, 145, 43, 0.04) 100%);
  box-shadow: 0 2px 14px rgba(255, 158, 196, 0.06);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  transition: all .25s ease;
}
.role-man:hover {
  border-left-color: #c7912b;
  box-shadow: 0 4px 20px rgba(255, 158, 196, 0.12);
  color: #7a3a4a;
}

/* 玩家 */
.role-player {
  color: #5c4a6b;
  background: linear-gradient(120deg, rgba(138, 120, 172, 0.1) 0%, rgba(250, 245, 255, 0.2) 100%);
  border-left-color: #8a7b9c;
}

/* 男其他 NPC */
.role-npcm {
  color: #4a5060;
  background: linear-gradient(120deg, rgba(90, 100, 140, 0.08) 0%, rgba(240, 242, 255, 0.15) 100%);
  border-left-color: #6a7396;
}

/* 女其他 NPC */
.role-npcf {
  color: #5c3a4a;
  background: linear-gradient(120deg, rgba(180, 110, 150, 0.08) 0%, rgba(255, 240, 245, 0.15) 100%);
  border-left-color: #b06e96;
}

p[class^="role-"]:hover {
  background: rgba(245, 238, 255, 0.8);
  box-shadow: 0 4px 14px rgba(180, 160, 200, 0.18);
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .k-sum {
        font-size: 14px !important;
        letter-spacing: 2px !important;
        padding: 12px 14px !important;
    }
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 10px !important;
    }
    .markdown-body {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 22px !important;
        height: 22px !important;
    }
    #ai-model-selector > div {
        height: 30px !important;
        border-radius: 8px !important;
        padding-left: 8px !important;
        padding-right: 6px !important;
        max-width: 130px !important;
    }
    #ai-model-selector .truncate {
        font-size: 12px !important;
        max-width: 100px !important;
    }
}

/* 低动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .k-sum::after {
        animation: none !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        animation-duration: 2.2s !important;
    }
    #ai-model-selector > div,
    .MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall {
        transition-duration: .01ms !important;
    }
}