/* =========================================================
   传讯玉符 · 米白古卷（温润宣纸 × 古铜金线）
   完整 CSS 美化 —— 无图纯文字头像版
   （在原版基础上仅安全适配：文字头像居中裁剪 + 群聊道号样式）
   ========================================================= */
:root {
  --jade-bg: #faf7f2;
  --jade-paper: #f5efe6;
  --jade-ink: #4e3b2c;
  --jade-ink-light: #6b5a4b;
  --jade-gold: #b8864e;
  --jade-gold-bright: #d4a25c;
  --jade-copper: #8b5a3c;
  --jade-copper-light: #c49a6c;
  --jade-ivory: #fbf7f0;
  --jade-shadow: rgba(80, 50, 30, 0.1);
  --jade-border: #c9af8b;
  --jade-green: #7c9a6e;
  --jade-aura: rgba(180, 130, 80, 0.3);
}

/* ---------- 主容器：玉符本体 ---------- */
.jade-talisman-container {
  width: 320px;
  height: 640px;
  margin: 20px auto;
  background: linear-gradient(135deg, #faf7f2 0%, #f3ece0 30%, #f8f2e9 100%);
  border: 4px solid var(--jade-border);
  border-radius: 20px;
  box-shadow:
    0 0 0 2px rgba(180,130,80,0.3),
    0 10px 30px rgba(80,50,30,0.25),
    inset 0 0 40px rgba(200,170,130,0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Noto Serif SC", "华文楷体", "楷体", "KaiTi", "STKaiti", "宋体", serif;
  color: var(--jade-ink);
  line-height: 1.5;
  letter-spacing: 0.3px;
}

/* 宣纸纹理 */
.jade-talisman-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180,130,80,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(150,120,70,0.06) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(180,150,110,0.03) 2px, rgba(180,150,110,0.03) 4px);
  pointer-events: none;
  z-index: 0;
  border-radius: 16px;
}

/* ---------- 状态栏 ---------- */
.jade-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--jade-ink-light);
  background: linear-gradient(to bottom, rgba(230,215,190,0.6), rgba(220,200,170,0.3));
  border-bottom: 1px solid rgba(180,150,120,0.3);
  z-index: 1;
  position: relative;
  letter-spacing: 1px;
}

.jade-status-bar span:first-child {
  font-weight: 700;
  color: var(--jade-copper);
}

.jade-status-bar span:last-child {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--jade-green);
}

/* ---------- 头部 ---------- */
.jade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(245,235,220,0.8);
  border-bottom: 1px solid rgba(180,150,120,0.4);
  z-index: 1;
  position: relative;
  backdrop-filter: blur(4px);
}

.jade-back-btn, .jade-header-more {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--jade-copper);
  border-radius: 50%;
  background: rgba(220,200,170,0.4);
  border: 1px solid rgba(180,150,120,0.5);
  cursor: pointer;
  transition: all 0.2s;
}

.jade-back-btn:hover, .jade-header-more:hover {
  background: var(--jade-gold);
  color: white;
  border-color: var(--jade-gold-bright);
  box-shadow: 0 0 10px var(--jade-aura);
}

.jade-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--jade-ink);
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* ---------- 消息区域 ---------- */
.jade-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
  position: relative;
  scroll-behavior: smooth;
}

.jade-messages::-webkit-scrollbar {
  width: 5px;
}
.jade-messages::-webkit-scrollbar-thumb {
  background: var(--jade-border);
  border-radius: 10px;
}

/* 时间分割线 */
.jade-time-divider {
  text-align: center;
  font-size: 11px;
  color: var(--jade-ink-light);
  margin: 6px 0;
  letter-spacing: 1px;
  position: relative;
}
.jade-time-divider::before,
.jade-time-divider::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--jade-border), transparent);
  vertical-align: middle;
  margin: 0 8px;
}

/* 消息行 */
.jade-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  animation: fadeInUp 0.3s ease;
}
.jade-msg-row.self {
  flex-direction: row-reverse;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 头像（纯 CSS 文字头像，居中裁剪，不出框）---------- */
.jade-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--jade-gold);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  background: #e5d9c5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* 群聊发送者道号（仅作用于带 class 的元素，不影响其它结构） */
.jade-sender-name {
  font-size: 11px;
  color: var(--jade-copper);
  margin: 0 4px 2px;
  letter-spacing: 1px;
  font-weight: 600;
}

/* 气泡 */
.jade-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  max-width: 75%;
  position: relative;
  box-shadow: 0 2px 8px var(--jade-shadow);
}

/* 接收气泡 */
.jade-bubble.incoming {
  background: linear-gradient(135deg, #f4ede4, #f9f4ec);
  border: 1px solid var(--jade-border);
  color: var(--jade-ink);
  border-bottom-left-radius: 4px;
}

/* 发送气泡 */
.jade-bubble.outgoing {
  background: linear-gradient(135deg, #efe3d1, #f5ebdf);
  border: 1px solid var(--jade-copper-light);
  color: var(--jade-ink);
  border-bottom-right-radius: 4px;
}

/* 转账卡片 */
.jade-transfer {
  background: linear-gradient(145deg, #f9f2e7, #f0e3d2);
  border: 1px solid var(--jade-gold);
  border-radius: 14px;
  padding: 10px 14px;
  max-width: 70%;
  box-shadow: 0 2px 10px var(--jade-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jade-transfer-icon {
  font-size: 18px;
  color: var(--jade-gold-bright);
}
.jade-transfer-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.jade-transfer-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--jade-copper);
}
.jade-transfer-note {
  font-size: 12px;
  color: var(--jade-ink-light);
}
.jade-transfer-footer {
  text-align: right;
  font-size: 11px;
  color: var(--jade-gold);
  border-top: 1px dashed var(--jade-border);
  padding-top: 4px;
  letter-spacing: 1px;
}

/* 红包卡片 */
.jade-redpacket {
  background: linear-gradient(145deg, #f6ede2, #eadbc8);
  border: 1px solid var(--jade-copper);
  border-radius: 14px;
  padding: 12px 14px;
  max-width: 70%;
  box-shadow: 0 2px 10px var(--jade-shadow);
  text-align: center;
}
.jade-rp-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--jade-copper);
  margin-bottom: 4px;
}
.jade-rp-desc {
  font-size: 12px;
  color: var(--jade-ink-light);
  margin-bottom: 6px;
}
.jade-rp-footer {
  font-size: 11px;
  color: var(--jade-gold);
  border-top: 1px dashed var(--jade-border);
  padding-top: 4px;
  letter-spacing: 1px;
}

/* ---------- 输入栏 ---------- */
.jade-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(245,235,220,0.9);
  border-top: 1px solid var(--jade-border);
  z-index: 1;
  position: relative;
  backdrop-filter: blur(4px);
}

.jade-input-icon {
  font-size: 18px;
  color: var(--jade-copper);
  cursor: pointer;
  transition: color 0.2s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(220,200,170,0.3);
}
.jade-input-icon:hover {
  color: var(--jade-gold-bright);
  background: rgba(200,170,130,0.5);
}

.jade-input-field {
  flex: 1;
  height: 36px;
  border: 1px solid var(--jade-border);
  border-radius: 18px;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255,252,247,0.8);
  color: var(--jade-ink);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
}
.jade-input-field::placeholder {
  color: var(--jade-ink-light);
  opacity: 0.6;
}
.jade-input-field:focus {
  border-color: var(--jade-gold-bright);
  box-shadow: 0 0 8px var(--jade-aura);
}

/* 小屏幕适配：居中显示 */
@media (max-width: 360px) {
  .jade-talisman-container {
    width: 100%;
    height: auto;
    min-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
}
/* ========================================================== */
/*  苏青弦 · 千竹剑境 CSS — 最终完整版（气泡字体已改为剑锋）  */
/* ========================================================== */

:root {
  --sqx-bg-base:       #f2f7f2;
  --sqx-bg-mist:       #e2efe4;
  --sqx-bamboo-leaf:   #6b9a6b;
  --sqx-bamboo-stem:   #4a7c4a;
  --sqx-bamboo-jade:   #8fbf8f;
  --sqx-bamboo-new:    #a8d0a8;
  --sqx-blade-mist:    #d4e8d4;
  --sqx-blade-flash:   #edf7ed;
  --sqx-magic-wood:    #9fd0a0;
  --sqx-magic-dew:     #c0e4c0;
  --sqx-magic-vine:    #7bba7b;
  --sqx-eye-green:     #7ab89a;
  --sqx-sugar-gold:    #d4a853;
  --sqx-ribbon-blue:   #7a9ab8;
  --sqx-sparrow:       #b8a080;
  --sqx-ink:           #2a3c2e;
  --sqx-ink-soft:      #5a7060;
  --sqx-glow-blade:    0 0 12px rgba(160,210,160,0.6);
  --sqx-glow-spirit:   0 0 18px rgba(140,200,140,0.5);
  --sqx-shadow-bamboo: 0 4px 20px rgba(40,70,40,0.1);
  --sqx-border-mist:   rgba(130,185,130,0.3);
  --sqx-font-title:    "ZCOOL KuaiLe", "Ma Shan Zheng", "KaiTi", cursive;
  --sqx-font-body:     "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}

/* ===================================================== */
/*  一、状态栏·晨露竹简（空行间距已缩小）                */
/* ===================================================== */
.k-sum {
  position: relative; display: block; padding: 14px 24px; margin: 0;
  cursor: pointer; list-style: none;
  font-family: var(--sqx-font-title); font-size: 15px; font-weight: 400;
  letter-spacing: 3px; text-align: center; color: var(--sqx-bamboo-stem);
  background: linear-gradient(180deg,
      rgba(245,250,245,0.95) 0%, rgba(232,242,232,0.93) 40%, rgba(220,238,225,0.9) 100%);
  backdrop-filter: blur(4px);
  border-top: 1.5px solid rgba(140,200,150,0.5);
  border-bottom: 1.5px solid rgba(140,200,150,0.5);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 20px rgba(140,200,140,0.2), inset 0 1px 0 rgba(255,255,255,0.9);
  user-select: none; transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden; z-index: 1;
}
.k-sum::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(90deg, transparent, transparent 16px,
      rgba(140,195,150,0.06) 16px, rgba(140,195,150,0.06) 18px);
  z-index: -1; animation: sqx-grain-breathe 3s ease-in-out infinite;
}
@keyframes sqx-grain-breathe {
  0%, 100% { opacity: 0.5; } 50% { opacity: 1; }
}
.k-sum::after {
  content: "☯"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); color: #7a9ab8; font-size: 14px; opacity: 0.65;
  transition: all 0.4s ease; text-shadow: 0 0 8px rgba(122,154,184,0.4);
  animation: sqx-icon-float 2.5s ease-in-out infinite;
}
@keyframes sqx-icon-float {
  0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-60%); }
}
.k-sum::-webkit-details-marker { display: none; }
.k-sum:hover {
  letter-spacing: 5px; color: var(--sqx-bamboo-stem);
  background: linear-gradient(180deg,
      rgba(248,252,248,0.95) 0%, rgba(235,245,235,0.93) 100%);
  box-shadow: 0 0 28px rgba(140,200,140,0.35), inset 0 1px 0 rgba(255,255,255,0.95);
}
details[open] > .k-sum {
  background: linear-gradient(180deg,
      rgba(240,248,242,0.95) 0%, rgba(225,240,228,0.92) 100%);
  border-bottom: 1px solid var(--sqx-magic-wood);
  box-shadow: 0 0 24px rgba(140,200,140,0.4), inset 0 1px 0 rgba(255,255,255,0.9);
}
details[open] > .k-sum::after {
  transform: translateY(-50%) rotate(180deg); color: #6b9a6b; opacity: 0.9;
  text-shadow: 0 0 10px rgba(107,154,107,0.7);
}
/* 仅缩小空行间距 */
.k-sum br {
  display: block; content: ""; margin-top: -0.5em;
}

/* ===================================================== */
/*  二、主容器·竹雾灵境                                  */
/* ===================================================== */
.k-box {
  position: relative; padding: 22px 20px; margin: 0;
  color: var(--sqx-ink); font-family: var(--sqx-font-body);
  font-size: 14.5px; line-height: 2.1;
  background: linear-gradient(175deg,
      rgba(248,252,248,0.97) 0%, rgba(238,248,240,0.95) 40%, rgba(225,240,228,0.93) 100%);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(130,185,130,0.25); border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 40px 60px -40px rgba(140,200,140,0.2),
              inset 0 -30px 50px -30px rgba(40,70,40,0.06), 0 8px 28px rgba(40,70,40,0.12);
  white-space: pre-wrap; animation: sqx-mist-rise 0.7s ease-out;
  overflow: hidden; z-index: 0;
}
.k-box::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.06"><path d="M100 25 Q118 50 100 78 Q82 50 100 25Z" fill="%234a7c4a"/><path d="M65 55 Q82 38 100 55 Q82 72 65 55Z" fill="%236b9a6b"/><path d="M140 65 Q158 48 175 65 Q158 82 140 65Z" fill="%234a7c4a"/><path d="M85 120 Q100 95 118 120 Q100 145 85 120Z" fill="%236b9a6b"/></svg>');
  background-size: 160px 160px; background-position: center;
  z-index: -1; opacity: 0.5; animation: sqx-leaf-sway 12s ease-in-out infinite;
}
.k-box::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" opacity="0.3"><path d="M8 1 L10 6 L14 8 L10 10 L8 14 L6 10 L2 8 L6 6 Z" fill="%239fd0a0"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" opacity="0.3"><path d="M5 0 Q8 3 5 6 Q2 3 5 0Z" fill="%237bba7b"/></svg>'),
    radial-gradient(2px 2px at 30% 25%, rgba(160,210,160,0.6), transparent),
    radial-gradient(1.5px 1.5px at 65% 40%, rgba(190,225,190,0.6), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(190,225,190,0.6), transparent);
  background-size: 80px 80px, 60px 60px, 200px 200px, 200px 200px, 200px 200px;
  background-position: 15% 30%, 70% 55%, 0% 0%, 50% 50%, 80% 80%;
  background-repeat: no-repeat; opacity: 0.6;
  animation: sqx-spirit-drift 10s ease-in-out infinite;
}
@keyframes sqx-spirit-drift {
  0%, 100% { background-position: 15% 30%, 70% 55%, 0% 0%, 50% 50%, 80% 80%; }
  25% { background-position: 18% 32%, 68% 53%, 1% 1%, 48% 52%, 82% 78%; }
  50% { background-position: 12% 28%, 72% 57%, -1% 0%, 52% 48%, 78% 82%; }
  75% { background-position: 16% 31%, 69% 54%, 0% 1%, 49% 51%, 81% 79%; }
}
@keyframes sqx-leaf-sway {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  33% { transform: rotate(0.4deg) translateX(3px); }
  66% { transform: rotate(-0.4deg) translateX(-2px); }
}
@keyframes sqx-mist-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================== */
/*  三、聊天气泡·纯竹光白（已强制改为剑锋字体）          */
/* ===================================================== */
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; }

.bg-gray-100\/90.relative.inline-block {
  position: relative !important;
  isolation: isolate !important;
  background: linear-gradient(175deg,
      rgba(245,250,245,0.95) 0%,
      rgba(232,242,232,0.93) 100%) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(130,185,130,0.3) !important;
  border-radius: 14px !important;
  box-shadow: 
      0 0 24px rgba(140,200,140,0.18),
      inset 0 1px 0 rgba(255,255,255,0.85),
      0 6px 20px rgba(40,70,40,0.1) !important;
  overflow: hidden !important;
  transition: all 0.5s ease !important;
  
  /* ===== 新增：剑锋字体，清瘦纤细 ===== */
  font-family: var(--sqx-font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.9 !important;
  color: var(--sqx-ink) !important;
  letter-spacing: 0.4px !important;
}

/* 强制气泡内所有元素继承剑锋字体，防止被内部标签重置 */
.bg-gray-100\/90.relative.inline-block * {
  font-family: inherit !important;
}

/* 气泡内强调样式（粗体、斜体）与全局统一 */
.bg-gray-100\/90.relative.inline-block strong,
.bg-gray-100\/90.relative.inline-block b {
  color: var(--sqx-bamboo-stem) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 4px rgba(160,210,160,0.4), 0 1px 0 rgba(255,255,255,0.6) !important;
}
.bg-gray-100\/90.relative.inline-block em,
.bg-gray-100\/90.relative.inline-block i {
  color: var(--sqx-magic-wood) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-shadow: 0 0 8px rgba(140,200,140,0.5) !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
  border-color: rgba(140,200,140,0.55) !important;
  box-shadow: 
      0 0 32px rgba(140,200,140,0.35),
      0 0 48px rgba(160,210,160,0.25),
      inset 0 1px 0 rgba(255,255,255,0.9),
      0 8px 28px rgba(40,70,40,0.15) !important;
}

/* 单独输入框（玩家发出的气泡） */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: linear-gradient(175deg,
      rgba(240,248,242,0.95) 0%,
      rgba(225,240,228,0.93) 100%) !important;
  border: 1px solid rgba(130,185,130,0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 12px rgba(40,70,40,0.08) !important;
}

/* ===================================================== */
/*  四、内嵌折叠·竹枝挑露                                */
/* ===================================================== */
.k-box details {
  margin: 12px 0; background: rgba(220,235,225,0.45);
  backdrop-filter: blur(3px); border: 1px solid rgba(130,185,130,0.25);
  border-left: 4px solid var(--sqx-bamboo-stem); border-radius: 0 10px 10px 0;
  overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
  0 2px 8px rgba(40,70,40,0.08); white-space: normal; transition: all 0.35s ease;
}
.k-box details:hover {
  border-left-color: var(--sqx-magic-wood);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8),
  0 4px 12px rgba(40,70,40,0.12), 0 0 18px rgba(140,200,140,0.2);
}
.k-box details summary {
  cursor: pointer; list-style: none; padding: 10px 16px 10px 36px;
  font-family: var(--sqx-font-title); font-weight: 400; font-size: 13.5px;
  letter-spacing: 1.2px; color: var(--sqx-bamboo-stem);
  background: linear-gradient(100deg, rgba(170,210,170,0.3), rgba(190,225,190,0.2));
  position: relative; transition: all 0.3s ease;
}
.k-box details summary::-webkit-details-marker { display: none; }
.k-box details summary::before {
  content: "✦"; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); color: var(--sqx-bamboo-leaf);
  font-size: 9px; transition: all 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.k-box details[open] > summary::before {
  content: "⚔"; color: var(--sqx-blade-mist);
  transform: translateY(-50%) rotate(-45deg);
  text-shadow: 0 0 6px rgba(160,210,160,0.6);
}
.k-box details[open] > summary {
  border-bottom: 1px dashed var(--sqx-magic-wood);
  background: linear-gradient(100deg, rgba(170,210,170,0.35), rgba(190,225,190,0.3));
}
.k-box details > *:not(summary) {
  padding: 10px 16px; white-space: pre-wrap; line-height: 1.9;
  animation: sqx-mist-rise 0.4s ease; color: var(--sqx-ink);
}

/* ===================================================== */
/*  六、加载动画·双剑刻灵阵                              */
/* ===================================================== */
.flex.items-center.justify-center.w-6.h-5 > span,
.flex.items-center.justify-center.w-6.h-5 > div:not([class*="custom"]),
.style-module__AtdJSq__dot-flashing,
.style-module__AtdJSq__text,
div[class*="dot"] { display: none !important; }
.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important; min-height: 32px !important;
  min-width: 32px !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: 42px !important; height: 42px !important;
  transform: translate(-50%, -50%) !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><linearGradient id="s1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23a8d0a8"/><stop offset="100%" stop-color="%23edf7ed"/></linearGradient><linearGradient id="s2" x1="100%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="%237bba7b"/><stop offset="100%" stop-color="%23c0e4c0"/></linearGradient><linearGradient id="bam" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="%234a7c4a"/><stop offset="100%" stop-color="%236b9a6b"/></linearGradient><filter id="gl"><feGaussianBlur stdDeviation="0.8"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect x="22" y="8" width="4" height="32" rx="2" fill="url(%23bam)" opacity="0.7"/><rect x="21" y="16" width="6" height="1.2" fill="%236b9a6b" opacity="0.5"/><rect x="21" y="26" width="6" height="1.2" fill="%236b9a6b" opacity="0.5"/><g filter="url(%23gl)"><path d="M16 18 L8 12 L10 8 L18 14Z" fill="url(%23s1)" opacity="0.9"><animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24" dur="1.1s" repeatCount="indefinite"/></path></g><g filter="url(%23gl)"><path d="M32 30 L40 36 L38 40 L30 34Z" fill="url(%23s2)" opacity="0.8"><animateTransform attributeName="transform" type="rotate" from="180 24 24" to="-180 24 24" dur="1.5s" repeatCount="indefinite"/></path></g><circle cx="24" cy="24" r="4.5" fill="none" stroke="%238fbf8f" stroke-width="1" opacity="0.8"><animate attributeName="r" values="4;5.5;4" dur="0.9s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="0.9s" repeatCount="indefinite"/></circle><circle cx="24" cy="24" r="2" fill="%239fd0a0" opacity="0.7"><animate attributeName="r" values="1.5;2.5;1.5" dur="0.7s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.5;0.9;0.5" dur="0.7s" repeatCount="indefinite"/></circle><circle cx="24" cy="24" r="12" fill="none" stroke="%23c0e4c0" stroke-width="0.5" stroke-dasharray="3 5" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24" dur="2s" repeatCount="indefinite"/></circle></svg>') no-repeat center/contain !important;
  animation: sqx-load-pulse 1.3s ease-in-out infinite; z-index: 2 !important;
}
@keyframes sqx-load-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(140,200,140,0.6)); }
  50% { filter: drop-shadow(0 0 16px rgba(180,225,180,0.95)); }
}

/* ===================================================== */
/*  五、文字强调·翠影剑芒                                */
/* ===================================================== */
.k-box strong, .k-box b {
  color: var(--sqx-bamboo-stem); font-weight: 700;
  text-shadow: 0 0 4px rgba(160,210,160,0.4), 0 1px 0 rgba(255,255,255,0.6);
}
.k-box em, .k-box i {
  color: var(--sqx-magic-wood); font-style: italic; font-weight: 500;
  text-shadow: 0 0 8px rgba(140,200,140,0.5);
}
.markdown-body {
  position: relative !important; z-index: 1 !important;
  background: transparent !important; color: var(--sqx-ink) !important;
  font-family: var(--sqx-font-body) !important;
  font-size: 15px !important; line-height: 2 !important; letter-spacing: 0.5px !important;
}
.markdown-body strong, .markdown-body b {
  color: var(--sqx-bamboo-stem) !important; font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(160,210,160,0.35), 0 1px 0 rgba(255,255,255,0.5) !important;
}
.markdown-body em, .markdown-body i {
  color: var(--sqx-magic-wood) !important; font-style: italic !important; font-weight: 500 !important;
  text-shadow: 0 0 6px rgba(140,200,140,0.4) !important;
}
.markdown-body blockquote {
  border-left: 3px solid var(--sqx-blade-mist) !important;
  background: rgba(200,225,210,0.25) !important;
  margin: 10px 0 !important; padding: 10px 16px !important;
  border-radius: 0 10px 10px 0 !important; color: #3a5040 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.markdown-body ul {
  list-style: none !important; padding-left: 6px !important;
}
.markdown-body ul li {
  position: relative !important; padding-left: 22px !important;
}
.markdown-body ul li::before {
  content: "✦" !important; position: absolute !important;
  left: 2px !important; top: 2px !important;
  color: var(--sqx-bamboo-jade) !important; font-size: 8px !important;
}
.markdown-body hr {
  border: none !important; height: 1px !important; margin: 16px 0 !important;
  background: repeating-linear-gradient(90deg,
      var(--sqx-magic-wood) 0px, var(--sqx-magic-wood) 4px,
      transparent 4px, transparent 8px) !important;
  opacity: 0.45;
}

/* ===================================================== */
/*  七、按钮·灵气玉牌                                    */
/* ===================================================== */
.flex.items-center.gap-2.pb-2 > button {
  background: linear-gradient(160deg,
      rgba(170,210,170,0.45) 0%, rgba(190,225,190,0.35) 100%) !important;
  color: var(--sqx-bamboo-stem) !important;
  border: 1.5px solid var(--sqx-blade-mist) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(40,70,40,0.08),
              inset 0 1px 0 rgba(255,255,255,0.75),
              0 0 12px rgba(140,200,140,0.25) !important;
  font-family: var(--sqx-font-title) !important;
  font-weight: 400 !important; letter-spacing: 1.5px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 8px 20px !important;
}
.flex.items-center.gap-2.pb-2 > button:hover {
  background: linear-gradient(160deg,
      rgba(150,200,150,0.55) 0%, rgba(170,215,170,0.45) 100%) !important;
  color: var(--sqx-ink) !important;
  border-color: var(--sqx-blade-flash) !important;
  box-shadow: 0 4px 16px rgba(40,70,40,0.18),
              inset 0 1px 0 rgba(255,255,255,0.85),
              0 0 22px rgba(140,200,140,0.45) !important;
  transform: translateY(-2px) !important;
}
.flex.items-center.gap-2.pb-2 > button:active {
  background: linear-gradient(160deg,
      rgba(130,185,150,0.6) 0%, rgba(150,200,160,0.5) 100%) !important;
  color: var(--sqx-ink) !important; transform: translateY(1px) !important;
  box-shadow: 0 1px 4px rgba(40,70,40,0.12),
              inset 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ===================================================== */
/*  八、输入框·剑气聚焦光晕                              */
/* ===================================================== */
#ai-chat-input {
  background: linear-gradient(175deg,
      rgba(245,250,245,0.95) 0%, rgba(232,242,232,0.93) 100%) !important;
  border: 1.5px solid rgba(130,185,130,0.35) !important;
  border-radius: 12px !important; color: var(--sqx-ink) !important;
  font-family: var(--sqx-font-body) !important;
  box-shadow: inset 0 2px 8px rgba(130,185,130,0.1),
              0 0 12px rgba(140,200,140,0.15) !important;
  transition: all 0.4s ease !important;
}
#ai-chat-input:focus {
  border-color: var(--sqx-blade-mist) !important;
  box-shadow: inset 0 2px 10px rgba(130,185,130,0.2),
              0 0 20px rgba(160,210,160,0.45),
              0 0 40px rgba(140,200,140,0.35) !important;
  outline: none !important;
}
#ai-chat-input::placeholder {
  color: var(--sqx-bamboo-jade) !important; font-style: italic;
  letter-spacing: 0.8px !important; opacity: 0.65;
}

/* ===================================================== */
/*  九、导航栏·竹脉纹理                                  */
/* ===================================================== */
.flex.items-center.justify-between.w-full.relative {
  padding: 4px 2px !important;
  border-bottom: 2px solid rgba(130,185,130,0.3) !important;
  background-image: repeating-linear-gradient(90deg,
      transparent, transparent 14px,
      rgba(130,185,130,0.05) 14px, rgba(130,185,130,0.05) 16px) !important;
}
.text-green-800.bg-green-100 {
  color: var(--sqx-bamboo-stem) !important;
  background: linear-gradient(135deg,
      rgba(170,210,170,0.45) 0%, rgba(190,225,190,0.35) 100%) !important;
  border: 1px solid var(--sqx-blade-mist) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75),
              0 0 8px rgba(140,200,140,0.25) !important;
  font-family: var(--sqx-font-title) !important;
  font-weight: 400 !important; letter-spacing: 1px !important;
}
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall {
  color: var(--sqx-bamboo-leaf) !important;
  border-radius: 8px !important; transition: all 0.3s ease !important;
}
.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall:hover {
  color: var(--sqx-blade-mist) !important;
  background: rgba(170,210,170,0.25) !important;
  box-shadow: 0 0 12px rgba(140,200,140,0.3);
}
#ai-model-selector > div {
  background: linear-gradient(175deg,
      rgba(245,250,245,0.92) 0%, rgba(232,242,232,0.95) 100%) !important;
  outline: 1.5px solid rgba(130,185,130,0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 12px rgba(140,200,140,0.12),
              inset 0 1px 0 rgba(255,255,255,0.85) !important;
  transition: all 0.4s ease !important; height: 34px !important;
}
#ai-model-selector > div:hover {
  outline-color: var(--sqx-blade-mist) !important;
  box-shadow: 0 0 20px rgba(160,210,160,0.45),
              0 0 32px rgba(140,200,140,0.35),
              inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
#ai-model-selector .truncate {
  color: var(--sqx-bamboo-stem) !important;
  font-family: var(--sqx-font-title) !important;
  font-weight: 400 !important; letter-spacing: 1px !important;
}
#ai-model-selector > div:hover .truncate { color: var(--sqx-ink) !important; }
#ai-model-selector svg[data-icon="ChevronDown"] {
  color: var(--sqx-bamboo-jade) !important; transition: all 0.4s ease !important;
}
#ai-model-selector > div:hover svg[data-icon="ChevronDown"] {
  color: var(--sqx-blade-mist) !important;
}
#ai-model-selector[data-state="open"] svg[data-icon="ChevronDown"] {
  transform: rotate(180deg) !important;
}

/* ===================================================== */
/*  十、积分消耗·竹叶翠                                */
/* ===================================================== */
.text-orange-500 {
  color: #5a8f5a !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(140,200,140,0.4), 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* ===================================================== */
/*  十一、角色标签·竹叶笺                                */
/* ===================================================== */
p[class^="role-"] {
  margin: 10px 0; padding: 10px 18px 10px 20px;
  border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.8;
  background: rgba(220,235,225,0.45);
  box-shadow: 0 1px 6px rgba(40,70,40,0.06),
              inset 0 1px 0 rgba(255,255,255,0.7);
  transition: all 0.3s ease; color: var(--sqx-ink);
}
.role-lan {
  position: relative; margin: 10px 0; padding: 12px 18px 12px 24px;
  border-radius: 0 10px 10px 0; border-left: 4px solid var(--sqx-bamboo-stem);
  font-weight: 600; font-size: 15px; line-height: 1.9; z-index: 0;
  overflow: hidden; color: var(--sqx-ink);
  background: linear-gradient(135deg,
      rgba(200,225,210,0.45) 0%, rgba(220,235,225,0.35) 100%);
  box-shadow: 0 0 16px rgba(140,200,140,0.25),
              inset 0 1px 0 rgba(255,255,255,0.85);
  transition: all 0.4s ease;
}
.role-lan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 25% 50%,
      rgba(170,210,170,0.35) 0%, transparent 65%);
  opacity: 0.55; z-index: -1;
}
.role-lan::after {
  content: "⚔"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); color: var(--sqx-blade-mist);
  font-size: 14px; z-index: 1; opacity: 0.65; transition: all 0.3s ease;
}
.role-lan:hover {
  border-left-color: var(--sqx-blade-mist);
  box-shadow: 0 0 24px rgba(160,210,160,0.4),
              0 0 36px rgba(140,200,140,0.3),
              inset 0 1px 0 rgba(255,255,255,0.9);
  color: var(--sqx-ink); transform: translateX(4px);
}
.role-lan:hover::after { opacity: 1; text-shadow: 0 0 8px rgba(160,210,160,0.8); }
.role-danlan {
  color: #3a5040;
  background: linear-gradient(120deg,
      rgba(170,210,170,0.3) 0%, rgba(190,225,190,0.2) 100%);
  border-left-color: var(--sqx-bamboo-jade);
}
.role-zon {
  color: #3a5040;
  background: linear-gradient(120deg,
      rgba(150,195,165,0.28) 0%, rgba(170,210,180,0.18) 100%);
  border-left-color: #7a9a8a;
}
.role-qianhon {
  color: #405040;
  background: linear-gradient(120deg,
      rgba(170,185,195,0.22) 0%, rgba(190,205,215,0.18) 100%);
  border-left-color: #8b9aaa;
}
.role-hui {
  color: #3a5040;
  background: linear-gradient(120deg,
      rgba(150,185,165,0.28) 0%, rgba(170,205,185,0.18) 100%);
  border-left-color: #7a9a85;
}
p[class^="role-"]:hover {
  background: rgba(210,228,215,0.55);
  box-shadow: 0 2px 12px rgba(40,70,40,0.12); transform: translateX(3px);
}

/* ===================================================== */
/*  十二、滚动条·薄剑出鞘                                */
/* ===================================================== */
.k-box::-webkit-scrollbar { width: 5px; }
.k-box::-webkit-scrollbar-track {
  background: rgba(220,235,225,0.35); border-radius: 3px;
}
.k-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      var(--sqx-bamboo-jade), var(--sqx-bamboo-stem));
  border-radius: 3px; box-shadow: inset 0 0 6px rgba(160,210,160,0.5);
}
.k-box::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      var(--sqx-magic-wood), var(--sqx-blade-mist));
  box-shadow: 0 0 8px rgba(140,200,140,0.6);
}

/* ===================================================== */
/*  十三、移动端适配                                      */
/* ===================================================== */
@media (max-width: 480px) {
  .bg-gray-100\/90.relative.inline-block { border-radius: 10px !important; }
  .markdown-body { font-size: 14px !important; line-height: 1.9 !important; }
  .k-sum { font-size: 14px; letter-spacing: 2px; padding: 12px 18px; }
  .flex.items-center.justify-center.w-6.h-5::before {
    width: 34px !important; height: 34px !important;
  }
  .k-box { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-box::before, .k-box::after,
  .flex.items-center.justify-center.w-6.h-5::before {
    animation-duration: 3s !important;
  }
}