/* =====输入框按钮 都市情感风格 · 极浅天蓝立体文字版 ===== */
#prompt-input button:not([type="submit"]) {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;  /* 极浅天蓝渐变，更清新柔和 */
    color: #2E1065 !important;  /* 极深紫色，强烈对比 */
    border: 2px solid #0369A1 !important;  /* 深海蓝边框，保持轮廓清晰 */
    border-radius: 40px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    /* 文字阴影：浅色高光 + 深色下坠，模拟立体浮凸 */
    text-shadow: 0 1px 0 #FFFFFF, 0 2px 3px rgba(0, 0, 0, 0.15) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* 悬停效果：背景稍亮，文字阴影增强 */
#prompt-input button:not([type="submit"]):hover {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;  /* 更亮更浅的蓝白渐变 */
    border-color: #0284C7 !important;
    transform: scale(1.02) !important;
    text-shadow: 0 1px 0 #FFFFFF, 0 3px 5px rgba(0, 0, 0, 0.2) !important;
    box-shadow: none !important;
}

/* 点击效果：文字阴影压缩，模拟按入感 */
#prompt-input button:not([type="submit"]):active {
    background: linear-gradient(135deg, #BAE6FD 0%, #7DD3FC 100%) !important;  /* 点击时略微加深，保持浅色调 */
    border-color: #075985 !important;
    transform: scale(0.98) !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
}

/* ===== 发送按钮 · 暖橙杏色立体文字版 ===== */
#prompt-input [type="submit"],#prompt-input button[aria-label="停止"] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;  /* 杏黄到暖橙渐变，温馨明亮 */
    color: #451A03 !important;  /* 深褐古铜色，与浅色背景形成高对比 */
    border: 2px solid #D97706 !important;  /* 琥珀橙边框，清晰有力 */
    border-radius: 40px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    /* 文字阴影：浅色高光 + 深色下坠，模拟立体浮凸（与参考完全一致） */
    text-shadow: 0 1px 0 #FFFFFF, 0 2px 3px rgba(0, 0, 0, 0.15) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* 悬停：底色更亮，阴影加深 */
#prompt-input [type="submit"]:hover,#prompt-input button[aria-label="停止"]:hover {
    background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A 100%) !important;  /* 更亮杏白渐变 */
    border-color: #B45309 !important;  /* 深橙褐边框 */
    transform: scale(1.02) !important;
    text-shadow: 0 1px 0 #FFFFFF, 0 3px 5px rgba(0, 0, 0, 0.2) !important;
    box-shadow: none !important;
}

/* 点击：颜色略微加深，模拟按入感 */
#prompt-input [type="submit"]:active,#prompt-input button[aria-label="停止"]:active {
    background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%) !important;  /* 加深到暖橙黄 */
    border-color: #92400E !important;
    transform: scale(0.98) !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
}

/* ===== 输入框内容区域 .contents · 极简无背线条风 ===== */
/* ===== 基础浅色样式 ===== */
.contents {
    display: block;
    width: 100%;
    background: transparent;
    border-radius: 4px;
    border: 1.5px solid #031e46;
    padding: 10px 16px;
    font-size: 15px;
    color: #1F2937;
    line-height: 1.6;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.contents:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ===== 深色模式覆盖（自动跟随系统） ===== */
@media (prefers-color-scheme: dark) {
    .contents {
        border-color: #6B8AA0;
        box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.06);
    }

    .contents:focus {
        border-color: #60A5FA;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    }
}

#prompt-input-body textarea[name="message"] {
    display: block;
    width: 100%;
    background: transparent;
    color: #217bd5;
    border-radius: 4px;
    border: 1.5px solid #031e46;
    padding: 12px 16px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    resize: vertical;
}

#prompt-input-body textarea[name="message"]:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

@media (prefers-color-scheme: dark) {
    #prompt-input-body textarea[name="message"] {
        border-color: #6B8AA0;
        color: #dde3eb !important;
        box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.06);
    }
    #prompt-input-body textarea[name="message"]:focus {
        border-color: #60A5FA;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    }
}

#suggestions button {
    /* 护眼浅蓝色半透明背景 + 玻璃效果 */
    background: rgba(200, 225, 245, 0.55);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #1A3A5C;
    font-weight: 700;
    /* 按钮无阴影 */
    box-shadow: none !important;
    /* 文字阴影：深色增加对比度 + 浅色光晕提升清晰度 */
    text-shadow: 0 1px 3px rgba(0, 40, 80, 0.12), 0 0 8px rgba(255, 255, 255, 0.25);
    transition: all 0.25s ease;
    cursor: pointer;
}

#suggestions button:hover {
    background: rgba(215, 235, 250, 0.65);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-color: rgba(255, 255, 255, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 4px rgba(0, 40, 80, 0.15), 0 0 12px rgba(255, 255, 255, 0.3);
}

#suggestions button:active {
    background: rgba(180, 210, 235, 0.6);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-color: rgba(255, 255, 255, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 2px rgba(0, 40, 80, 0.1), 0 0 6px rgba(255, 255, 255, 0.2);
}

.contents::placeholder {
    color: #9CA3AF !important;                              /* 占位符浅灰色 */
    font-weight: 300 !important;                            /* 占位符细体 */
}

/* ===== AI回复内容样式 - 护眼浅杏色背景（浅色模式） ===== */
.is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background-color: #FEF5E7;  /* 护眼浅杏色 */
    border: none;
    border-left: 2px solid #D4A017;  /* 左侧实心边框 - 金黄色（与杏黄背景形成对比） */
    box-shadow: 4px 4px 0px 0px rgba(74, 24, 76, 0.9);
    border-radius: 2px 0px 0px 2px;  /* 左上左下圆角2px，右上右下无圆角 */
    margin: 0;
    padding: 12px 16px;
    color: #2C241A;  /* 深褐色文字，保证对比度 */
}

/* ===== 用户提问内容样式 - 极浅天蓝色背景（浅色模式） ===== */
.is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background-color: #E9F4FF;  /* 极浅天蓝色 */
    border: none;
    border-left: 2px solid #1976D2;  /* 左侧实心边框 - 深蓝色（与天蓝背景形成对比） */
    box-shadow: 4px 4px 0px 0px rgba(74, 24, 76, 0.9);
    border-radius: 2px 0px 0px 2px;  /* 左上左下圆角2px，右上右下无圆角 */
    margin: 0;
    padding: 12px 16px;
    color: #0D2B3E;  /* 深蓝灰色文字，保证对比度 */
}

/* ========== 深色模式适配 ========== */
@media (prefers-color-scheme: dark) {
    /* AI侧 - 深暖杏色背景 */
    .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
        background-color: #3D2E1A;
        color: #F5E6C8;
        border-left: 2px solid #F5A623;  /* 亮橙黄色边框（深色背景下的对比色） */
        box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.5);
        border-radius: 2px 0px 0px 2px;
    }
    
    /* 用户侧 - 深天蓝色背景 */
    .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
        background-color: #1A3442;
        color: #E3F0FF;
        border-left: 2px solid #64B5F6;  /* 亮天蓝色边框（深色背景下的对比色） */
        box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.5);
        border-radius: 2px 0px 0px 2px;
    }
}

/* ========== 手动类名控制深色模式 ========== */
.dark .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background-color: #3D2E1A;
    color: #F5E6C8;
    border-left: 2px solid #F5A623;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.5);
    border-radius: 2px 0px 0px 2px;
}

.dark .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background-color: #1A3442;
    color: #E3F0FF;
    border-left: 2px solid #64B5F6;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.5);
    border-radius: 2px 0px 0px 2px;
}

/* ------ 正文对话框样式 ------ */
.npc-talk, .my-talk {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  align-items: flex-start;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0px;
}

/* NPC对话布局：头像姓名在左，内容在右 */
.npc-talk {
  flex-direction: row;
}

/* 我的对话布局：头像姓名在右，内容在左 */
.my-talk {
  flex-direction: row-reverse;
}

/* 头像+姓名区域 */
.avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  flex-shrink: 0;
}

/* 头像图片样式 */
.talk-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background-color: #f0f0f0;
  display: block;
}

/* 姓名文字 - 仅字体大小使用 em */
.talk-name {
  font-size: 0.85em;
  margin-top: 6px;
  color: #555;
  text-align: center;
  font-weight: 500;
}

/* 对话内容共用样式 */
.talk-word {
  flex: 1;
  padding: 4px;
  border: 2px solid;
  background-color: #fff;
  word-wrap: break-word;
  line-height: 1.5;
/*  font-size: 1em; */
  border-radius: 4px;
}

/* NPC对话气泡（天蓝色 + 左下深蓝色阴影） */
.npc-talk .talk-word {
  border-color: #89cff0;
  background-color: #e6f7ff;
  box-shadow: -6px 6px 0 0 #1e3a8a;
}

/* 我的对话气泡（深紫色 + 黑色阴影） */
.my-talk .talk-word {
  border-color: #5e2a84;
  background-color: #f3e8ff;
  box-shadow: 6px 6px 0 0 #1a1a1a;
}

/* 装饰性小三角（指向头像） */
.npc-talk .talk-word {
  position: relative;
}
.npc-talk .talk-word::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 8px 6px 0;
  border-color: transparent #89cff0 transparent transparent;
  filter: drop-shadow(-2px 2px 0 #1e3a8a);
}
.npc-talk .talk-word::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 7px 5px 0;
  border-color: transparent #e6f7ff transparent transparent;
}

.my-talk .talk-word {
  position: relative;
}
.my-talk .talk-word::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #5e2a84;
}
.my-talk .talk-word::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #f3e8ff;
}

/* ========== 深色模式 ========== */
@media (prefers-color-scheme: dark) {
  .talk-avatar {
    background-color: #2a2a2a;
  }
  
  .talk-name {
    color: #ccc;
  }
  
  /* NPC 深色模式 */
  .npc-talk .talk-word {
    border-color: #4a9bc7;
    background-color: #1e3a3f;
    color: #e0e0e0;
    box-shadow: -6px 6px 0 0 #0f2b4f;
  }
  
  .npc-talk .talk-word::before {
    border-color: transparent #4a9bc7 transparent transparent;
  }
  
  .npc-talk .talk-word::after {
    border-color: transparent #1e3a3f transparent transparent;
  }
  
  /* MY 深色模式 */
  .my-talk .talk-word {
    border-color: #9b4dcc;
    background-color: #2a1e3a;
    color: #e0e0e0;
    box-shadow: 6px 6px 0 0 #0a0a0a;
  }
  
  .my-talk .talk-word::before {
    border-color: transparent transparent transparent #9b4dcc;
  }
  
  .my-talk .talk-word::after {
    border-color: transparent transparent transparent #2a1e3a;
  }
}

/* ========== 小屏幕适配 (宽度 ≤ 768px) ========== */
@media (max-width: 768px) {
  .npc-talk, .my-talk {
    gap: 10px;
    margin-bottom: 20px;
    padding: 2px;
  }
  
  .avatar-area {
    width: 52px;
  }
  
  .talk-avatar {
    width: 48px;
    height: 48px;
  }
  
  .talk-name {
    font-size: 0.8em;
    margin-top: 5px;
  }
  
  .talk-word {
    padding: 4px 8px;
    font-size: 1em;
  }
  
  /* 调整小三角位置 */
  .npc-talk .talk-word::before,
  .npc-talk .talk-word::after {
    top: 11px;
  }
  
  .my-talk .talk-word::before,
  .my-talk .talk-word::after {
    top: 11px;
  }
}

/* ===== details 玻璃美化 · 天蓝紫配色 ===== */
details {
  margin: 8px 0;
  padding: 2px;
  border: 2px solid #075985;               /* 略深于按钮边框 #0369A1 */
  border-radius: 4px !important;
  background: rgba(224, 242, 254, 0.50);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(224, 242, 254, 0.20) 60%);
  box-shadow: 
    2px 2px 0 0 #1A0A3A,                  /* 深紫色硬阴影 */
    inset 0 1px 2px rgba(255, 255, 255, 0.70),
    inset 0 -1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  display: block;
}

/* 小屏幕上下外边距仍为4px（不变） */
@media (max-width: 768px) {
  details {
    margin: 4px 0;
  }
}

/* ===== summary 天蓝紫玻璃效果 ===== */
summary {
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05em;
  background: rgba(224, 242, 254, 0.45);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, transparent 70%);
  border-radius: 0;
  transition: all 0.2s ease;
  color: #2E1065;                          /* 深紫色 */
  list-style: none;
  display: flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* 移除默认指示器 */
summary::-webkit-details-marker {
  display: none;
}

/* 自定义指示符 · 紫色系 */
summary::before {
  content: '+';
  font-size: 1.2em;
  font-weight: bold;
  color: #2E1065;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  background-color: rgba(46, 16, 101, 0.10);
  border-radius: 50%;
  transition: transform 0.2s ease;
  margin-right: 10px;
  flex-shrink: 0;
}

details[open] summary::before {
  content: '−';
}

summary:hover {
  background: rgba(224, 242, 254, 0.60);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, transparent 70%);
  transform: translateY(-1px);
}

summary:hover::before {
  background-color: rgba(46, 16, 101, 0.18);
  transform: scale(1.05);
}

details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  background: rgba(224, 242, 254, 0.55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, transparent 70%);
}

details[open] summary::before {
  background-color: rgba(46, 16, 101, 0.14);
}

/* 展开后内边距不变 */
details[open] {
  padding: 2px;
}

details[open] > :not(summary) {
  margin: 2px;
  padding: 0;
}

/* ===== 内部元素配色（紫色系 + 天蓝背景） ===== */
details p {
  margin: 8px 8px;
  line-height: 1.6;
  color: #2E1065;
  font-size: 0.95em;
}
details[open] p:first-of-type {
  margin-top: 8px;
}
details p:last-child {
  margin-bottom: 8px;
}

details pre {
  margin: 8px 8px;
  padding: 10px;
  background-color: #F0F4FF;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
  box-shadow: inset 0 0 6px rgba(46, 16, 101, 0.06);
  border: 1px solid #C8D8FF;
}
details pre code {
  color: #2E1065;
  font-family: inherit;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

details code {
  background-color: #EBF0FF;
  padding: 0;
  margin: 8px 0;
  border-radius: 4px;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
  color: #B83A8A;                         /* 醒目的粉紫色 */
  border: 1px solid #D0D8FF;
  display: inline-block;
}
@media (max-width: 768px) {
  details code {
    margin: 4px 0;
  }
}

details ul,
details ol {
  margin: 8px 8px 8px 28px;
  padding-left: 0;
  color: #2E1065;
  line-height: 1.6;
}
details li {
  margin: 4px 0;
}

details blockquote {
  margin: 8px 8px;
  padding: 8px 16px;
  border-left: 4px solid #2E1065;
  background-color: #F5F0FF;
  font-style: italic;
  color: #3B1F6E;
  border-radius: 0 4px 4px 0;
}

details h1,
details h2,
details h3,
details h4,
details h5,
details h6 {
  margin: 12px 8px 8px 8px;
  color: #1A0A3A;
}
details h1:first-child,
details h2:first-child,
details h3:first-child,
details h4:first-child {
  margin-top: 4px;
}

details hr {
  margin: 6px 8px;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #BAE6FD, transparent);
}

details a {
  color: #2E1065;
  text-decoration: none;
  border-bottom: 1px dotted #2E1065;
  transition: all 0.2s;
}
details a:hover {
  color: #1A0A3A;
  border-bottom-color: #1A0A3A;
}

details table {
  margin: 4px 4px;
  border-collapse: collapse;
  background-color: #FAF8FF;
}
details th,
details td {
  border: 1px solid #C8D8FF;
  padding: 4px;
  text-align: left;
}
details th {
  background-color: #E0F2FE;
  color: #1A0A3A;
  font-weight: 600;
}
details tr:nth-child(even) {
  background-color: #F0F4FF;
}

/* ===== 深色模式 · 天蓝紫适配 ===== */
@media (prefers-color-scheme: dark) {
  details {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(26, 10, 58, 0.75);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(224, 242, 254, 0.05) 60%);
    box-shadow: 
      2px 2px 0 0 rgba(255, 255, 255, 0.12),
      inset 0 1px 2px rgba(255, 255, 255, 0.08),
      inset 0 -1px 2px rgba(0, 0, 0, 0.30);
  }

  summary {
    background: rgba(46, 16, 101, 0.45);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    color: #D4C8FF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  summary:hover {
    background: rgba(46, 16, 101, 0.60);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  }
  details[open] summary {
    background: rgba(46, 16, 101, 0.50);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  }
  summary::before {
    color: #D4C8FF;
    background-color: rgba(186, 230, 253, 0.15);
  }
  summary:hover::before {
    background-color: rgba(186, 230, 253, 0.25);
  }

  details p {
    color: #D4C8FF;
  }
  details pre {
    background-color: #0D0520;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.30);
    border-color: #2D1A5A;
  }
  details pre code {
    color: #D4C8FF;
  }
  details code {
    background-color: #1A0A3A;
    color: #E89EAA;
    border-color: #2D1A5A;
    margin: 8px 0;
  }
  details ul,
  details ol {
    color: #D4C8FF;
  }
  details blockquote {
    background-color: #1A0A2A;
    border-left-color: #7A5AC8;
    color: #C8B8F0;
  }
  details h1,
  details h2,
  details h3,
  details h4,
  details h5,
  details h6 {
    color: #BAE6FD;
  }
  details hr {
    background: linear-gradient(90deg, transparent, #2D1A5A, transparent);
  }
  details a {
    color: #9D8AFF;
    border-bottom-color: #9D8AFF;
  }
  details a:hover {
    color: #BAE6FD;
    border-bottom-color: #BAE6FD;
  }
  details table {
    background-color: #0D0520;
  }
  details th,
  details td {
    border-color: #2D1A5A;
  }
  details th {
    background-color: #1A0A3A;
    color: #BAE6FD;
  }
  details tr:nth-child(even) {
    background-color: #12082A;
  }
}

/* ===== 响应式（仅字号微调，间距不变） ===== */
@media (max-width: 768px) {
  details code {
    margin: 4px 0;
  }
  details hr {
    margin: 2px 4px;
  }
  details pre {
    font-size: 0.85em;
    padding: 8px;
  }
  details code {
    font-size: 0.85em;
  }
  details p,
  details ul,
  details ol {
    font-size: 0.9em;
  }
  summary {
    padding: 6px 10px;
    font-size: 1em;
  }
  summary::before {
    width: 18px;
    height: 18px;
    line-height: 16px;
    font-size: 1.1em;
  }
}

/* ===== news · 天蓝紫玻璃风格（偏紫） ===== */
.news {
  margin: 8px 0;
  padding: 8px;
  border: 2px solid #6D28D9;            /* 略深的紫罗兰边框 */
  border-radius: 8px !important;
  background: rgba(224, 242, 254, 0.50);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(224, 242, 254, 0.20) 60%);
  box-shadow: 
    2px 2px 0 0 #1A0A3A,               /* 深紫色硬阴影 */
    inset 0 1px 2px rgba(255, 255, 255, 0.70),
    inset 0 -1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  color: #2E1065;                       /* 深紫色文字 */
  font-size: 0.9em;
}

.news h1,
.news h2,
.news h3,
.news h4,
.news h5,
.news h6 {
  color: #1A0A3A;
  margin: 12px 8px 8px 8px;
}
.news h1:first-child,
.news h2:first-child,
.news h3:first-child,
.news h4:first-child {
  margin-top: 4px;
}

.news p {
  margin: 8px 8px;
  line-height: 1.6;
  color: #2E1065;
}

.news code {
  background-color: #EBF0FF;
  border: 1px solid #C8D8FF;
  color: #B83A8A;                       /* 粉紫色代码 */
  padding: 0;
  margin: 8px 0;
  border-radius: 4px;
  display: inline-block;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
}

.news pre {
  margin: 8px 8px;
  padding: 10px;
  background-color: #F0F4FF;
  border: 1px solid #C8D8FF;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
  box-shadow: inset 0 0 6px rgba(46, 16, 101, 0.06);
}
.news pre code {
  background: transparent;
  border: none;
  color: #2E1065;
  padding: 0;
  margin: 0;
  font-size: inherit;
}

.news ul,
.news ol {
  margin: 8px 8px 8px 28px;
  padding-left: 0;
  line-height: 1.6;
  color: #2E1065;
}
.news li {
  margin: 4px 0;
}

.news blockquote {
  margin: 8px 8px;
  padding: 8px 16px;
  border-left: 4px solid #2E1065;
  background-color: #F5F0FF;
  font-style: italic;
  color: #3B1F6E;
  border-radius: 0 4px 4px 0;
}

.news hr {
  margin: 6px 8px;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #BAE6FD, transparent);
}

.news a {
  color: #2E1065;
  text-decoration: none;
  border-bottom: 1px dotted #2E1065;
  transition: all 0.2s;
}
.news a:hover {
  color: #1A0A3A;
  border-bottom-color: #1A0A3A;
}

.news table {
  margin: 4px 4px;
  border-collapse: collapse;
  background-color: #FAF8FF;
}
.news th,
.news td {
  border: 1px solid #C8D8FF;
  padding: 4px;
  text-align: left;
}
.news th {
  background-color: #E0F2FE;
  color: #1A0A3A;
  font-weight: 600;
}
.news tr:nth-child(even) {
  background-color: #F0F4FF;
}

/* ===== sns · 天蓝紫玻璃风格（偏蓝） ===== */
.sns {
  margin: 8px 0;
  padding: 8px;
  border: 2px solid #0369A1;            /* 略深的蓝色边框（与按钮边框一致） */
  border-radius: 8px !important;
  background: rgba(224, 242, 254, 0.50);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(224, 242, 254, 0.20) 60%);
  box-shadow: 
    2px 2px 0 0 #1A0A3A,               /* 统一深紫色硬阴影，保持整体感 */
    inset 0 1px 2px rgba(255, 255, 255, 0.70),
    inset 0 -1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  color: #2E1065;
  font-size: 0.9em;
}

.sns h1,
.sns h2,
.sns h3,
.sns h4,
.sns h5,
.sns h6 {
  color: #1A0A3A;
  margin: 12px 8px 8px 8px;
}
.sns h1:first-child,
.sns h2:first-child,
.sns h3:first-child,
.sns h4:first-child {
  margin-top: 4px;
}

.sns p {
  margin: 8px 8px;
  line-height: 1.6;
  color: #2E1065;
}

.sns code {
  background-color: #EBF0FF;
  border: 1px solid #C8D8FF;
  color: #B83A8A;
  padding: 0;
  margin: 8px 0;
  border-radius: 4px;
  display: inline-block;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
}

.sns pre {
  margin: 8px 8px;
  padding: 10px;
  background-color: #F0F4FF;
  border: 1px solid #C8D8FF;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
  box-shadow: inset 0 0 6px rgba(46, 16, 101, 0.06);
}
.sns pre code {
  background: transparent;
  border: none;
  color: #2E1065;
  padding: 0;
  margin: 0;
  font-size: inherit;
}

.sns ul,
.sns ol {
  margin: 8px 8px 8px 28px;
  padding-left: 0;
  line-height: 1.6;
  color: #2E1065;
}
.sns li {
  margin: 4px 0;
}

.sns blockquote {
  margin: 8px 8px;
  padding: 8px 16px;
  border-left: 4px solid #0369A1;        /* 用蓝色边框区分 */
  background-color: #F0F8FF;
  font-style: italic;
  color: #1A3A6E;
  border-radius: 0 4px 4px 0;
}

.sns hr {
  margin: 6px 8px;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #BAE6FD, transparent);
}

.sns a {
  color: #0369A1;
  text-decoration: none;
  border-bottom: 1px dotted #0369A1;
  transition: all 0.2s;
}
.sns a:hover {
  color: #1A4A7A;
  border-bottom-color: #1A4A7A;
}

.sns table {
  margin: 4px 4px;
  border-collapse: collapse;
  background-color: #FAF8FF;
}
.sns th,
.sns td {
  border: 1px solid #C8D8FF;
  padding: 4px;
  text-align: left;
}
.sns th {
  background-color: #E0F2FE;
  color: #1A0A3A;
  font-weight: 600;
}
.sns tr:nth-child(even) {
  background-color: #F0F4FF;
}

/* ===== 小屏幕调整（保持原有边距） ===== */
@media (max-width: 768px) {
  .news,
  .sns {
    margin: 4px 0;
    padding: 4px;
  }
  .news code,
  .sns code {
    margin: 4px 0;
  }
  .news pre,
  .sns pre {
    font-size: 0.85em;
    padding: 4px;
  }
  .news p,
  .news ul,
  .news ol,
  .sns p,
  .sns ul,
  .sns ol {
    font-size: 0.9em;
  }
}

/* ===== 深色模式 ===== */
@media (prefers-color-scheme: dark) {
  .news,
  .sns {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(26, 10, 58, 0.75);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(224, 242, 254, 0.05) 60%);
    box-shadow: 
      2px 2px 0 0 rgba(255, 255, 255, 0.12),
      inset 0 1px 2px rgba(255, 255, 255, 0.08),
      inset 0 -1px 2px rgba(0, 0, 0, 0.30);
    color: #D4C8FF;
  }

  .news h1,
  .news h2,
  .news h3,
  .news h4,
  .news h5,
  .news h6,
  .sns h1,
  .sns h2,
  .sns h3,
  .sns h4,
  .sns h5,
  .sns h6 {
    color: #BAE6FD;
  }

  .news p,
  .sns p {
    color: #D4C8FF;
  }

  .news code,
  .sns code {
    background-color: #1A0A3A;
    border-color: #2D1A5A;
    color: #E89EAA;
  }

  .news pre,
  .sns pre {
    background-color: #0D0520;
    border-color: #2D1A5A;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.30);
  }
  .news pre code,
  .sns pre code {
    color: #D4C8FF;
  }

  .news ul,
  .news ol,
  .sns ul,
  .sns ol {
    color: #D4C8FF;
  }

  .news blockquote {
    background-color: #1A0A2A;
    border-left-color: #7A5AC8;
    color: #C8B8F0;
  }
  .sns blockquote {
    background-color: #0A1A2A;
    border-left-color: #5A9AC8;
    color: #B0C8F0;
  }

  .news hr,
  .sns hr {
    background: linear-gradient(90deg, transparent, #2D1A5A, transparent);
  }

  .news a {
    color: #9D8AFF;
    border-bottom-color: #9D8AFF;
  }
  .news a:hover {
    color: #BAE6FD;
    border-bottom-color: #BAE6FD;
  }
  .sns a {
    color: #8AB8FF;
    border-bottom-color: #8AB8FF;
  }
  .sns a:hover {
    color: #BAE6FD;
    border-bottom-color: #BAE6FD;
  }

  .news table,
  .sns table {
    background-color: #0D0520;
  }
  .news th,
  .news td,
  .sns th,
  .sns td {
    border-color: #2D1A5A;
  }
  .news th,
  .sns th {
    background-color: #1A0A3A;
    color: #BAE6FD;
  }
  .news tr:nth-child(even),
  .sns tr:nth-child(even) {
    background-color: #12082A;
  }
}

/* ===== action · 天蓝紫玻璃风格（亮蓝边框 + 悬浮动效） ===== */
.action {
  margin: 8px 0;
  padding: 2px;
  border: 2px solid #2563EB;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(224, 242, 254, 0.50);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(224, 242, 254, 0.20) 60%);
  box-shadow: 
    2px 2px 0 0 #1A0A3A,
    inset 0 1px 2px rgba(255, 255, 255, 0.70),
    inset 0 -1px 2px rgba(0, 0, 0, 0.02);
  color: #2E1065;
}

/* 悬浮效果 */
.action:hover {
  background: rgba(224, 242, 254, 0.65);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(224, 242, 254, 0.30) 60%);
  box-shadow: 
    3px 3px 0 0 #1A0A3A,
    inset 0 1px 3px rgba(255, 255, 255, 0.80),
    inset 0 -1px 2px rgba(0, 0, 0, 0.02);
  transform: translateY(-1px);
}

/* 标题颜色统一为深蓝 */
.action h1,
.action h2,
.action h3,
.action h4,
.action h5,
.action h6 {
  color: #1E3A8A;
}

/* 代码块样式统一为蓝紫色系 */
.action code {
  background-color: rgba(224, 242, 254, 0.70);
  border: 1px solid #2563EB;
  color: #1E3A8A;
}

/* 段落、列表等内部间距（完全保留） */
.action p {
  margin: 8px 8px;
  line-height: 1.6;
}

.action pre {
  margin: 8px 8px;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  background-color: rgba(224, 242, 254, 0.20); /* 预块背景也统一 */
}

.action code {
  padding: 0;
  margin: 8px 0;
  border-radius: 4px;
  display: inline-block;
}

.action ul,
.action ol {
  margin: 8px 8px 8px 28px;
  padding-left: 0;
  line-height: 1.6;
}

.action li {
  margin: 4px 0;
}

/* 深色模式适配（所有颜色统一适配） */
@media (prefers-color-scheme: dark) {
  .action {
    background: rgba(224, 242, 254, 0.15);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(224, 242, 254, 0.08) 60%);
    border-color: #2563EB;
    color: #D8D0F0;
    box-shadow: 
      2px 2px 0 0 #0A0518,
      inset 0 1px 2px rgba(255, 255, 255, 0.15),
      inset 0 -1px 2px rgba(0, 0, 0, 0.4);
  }

  .action:hover {
    background: rgba(224, 242, 254, 0.25);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(224, 242, 254, 0.12) 60%);
    box-shadow: 
      3px 3px 0 0 #0A0518,
      inset 0 1px 3px rgba(255, 255, 255, 0.25),
      inset 0 -1px 2px rgba(0, 0, 0, 0.4);
  }

  /* 深色下标题变亮紫色 */
  .action h1,
  .action h2,
  .action h3,
  .action h4,
  .action h5,
  .action h6 {
    color: #B5A8E0;
  }

  /* 深色下代码背景半透明，文字亮蓝 */
  .action code {
    background-color: rgba(224, 242, 254, 0.12);
    border-color: #3B82F6;
    color: #93C5FD;
  }

  .action pre {
    background-color: rgba(224, 242, 254, 0.06);
  }
}

/* 小屏幕响应式（完全保留） */
@media (max-width: 768px) {
  .action {
    margin: 4px 0;
  }

  .action code {
    margin: 4px 0;
  }

  .action pre {
    font-size: 0.85em;
    padding: 8px;
  }
}

/* ===== thought · 天蓝紫玻璃风格（无阴影，内边距8px） ===== */
.thought {
  margin: 4px 4px;
  padding: 4px;
  border: 2px dashed #5B21B6;         /* 深紫罗兰虚线边框 */
  border-radius: 10px !important;     /* 圆角10px */
  background: rgba(224, 242, 254, 0.9);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(224, 242, 254, 0.20) 60%);
  transition: all 0.3s ease;
  font-style: italic;
  color: #2E1065;
}

/* 悬浮时仅提亮背景，无阴影变化 */
.thought:hover {
  background: rgba(224, 242, 254, 0.65);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(224, 242, 254, 0.30) 60%);
  transform: translateY(-1px);
}

/* ===== 内部元素：标题、代码、预格式化等重置为正常字体 ===== */
.thought h1,
.thought h2,
.thought h3,
.thought h4,
.thought h5,
.thought h6 {
  font-style: normal;
  color: #1A0A3A;
  margin: 12px 8px 8px 8px;
}
.thought h1:first-child,
.thought h2:first-child,
.thought h3:first-child,
.thought h4:first-child {
  margin-top: 4px;
}

.thought p {
  margin: 8px 8px;
  line-height: 1.6;
  color: #2E1065;
}

.thought code {
  font-style: normal;
  background-color: #EBF0FF;
  border: 1px solid #C8D8FF;
  color: #B83A8A;
  padding: 0;
  margin: 8px 0;
  border-radius: 4px;
  display: inline-block;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
}

.thought pre {
  font-style: normal;
  margin: 8px 8px;
  padding: 10px;
  background-color: #F0F4FF;
  border: 1px solid #C8D8FF;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', 'Fira Code', monospace;
  font-size: 0.9em;
  box-shadow: inset 0 0 6px rgba(46, 16, 101, 0.06);
}
.thought pre code {
  background: transparent;
  border: none;
  color: #2E1065;
  padding: 0;
  margin: 0;
  font-size: inherit;
}

.thought ul,
.thought ol {
  margin: 8px 8px 8px 28px;
  padding-left: 0;
  line-height: 1.6;
  color: #2E1065;
}
.thought li {
  margin: 4px 0;
}

.thought blockquote {
  font-style: italic;
  margin: 8px 8px;
  padding: 8px 16px;
  border-left: 4px solid #5B21B6;
  background-color: #F5F0FF;
  color: #3B1F6E;
  border-radius: 0 4px 4px 0;
}

.thought hr {
  margin: 6px 8px;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #BAE6FD, transparent);
}

.thought a {
  color: #5B21B6;
  text-decoration: none;
  border-bottom: 1px dotted #5B21B6;
  transition: all 0.2s;
  font-style: normal;
}
.thought a:hover {
  color: #1A0A3A;
  border-bottom-color: #1A0A3A;
}

.thought table {
  margin: 4px 4px;
  border-collapse: collapse;
  background-color: #FAF8FF;
  font-style: normal;
}
.thought th,
.thought td {
  border: 1px solid #C8D8FF;
  padding: 4px;
  text-align: left;
}
.thought th {
  background-color: #E0F2FE;
  color: #1A0A3A;
  font-weight: 600;
}
.thought tr:nth-child(even) {
  background-color: #F0F4FF;
}

/* ===== 小屏幕调整（≤768px）：圆角8px，内边距2px，其余微调） ===== */
@media (max-width: 768px) {
  .thought {
    margin: 0;                 /* 保持上下边距略缩，但可保留 */
    padding: 2px;                    /* 小屏幕内边距2px */
    border-radius: 8px !important;   /* 小屏幕圆角8px */
    font-size: 0.95em;
  }
  .thought code {
    margin: 4px 0;
  }
  .thought pre {
    font-size: 0.85em;
    padding: 8px;
  }
  .thought p,
  .thought ul,
  .thought ol {
    font-size: 0.9em;
  }
}

/* ===== 深色模式适配（无阴影，仅背景色调整） ===== */
@media (prefers-color-scheme: dark) {
  .thought {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(26, 10, 58, 0.75);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(224, 242, 254, 0.05) 60%);
    /* 无阴影 */
    color: #D4C8FF;
  }
  .thought:hover {
    background: rgba(26, 10, 58, 0.85);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(224, 242, 254, 0.08) 60%);
    transform: translateY(-1px);
  }

  .thought h1,
  .thought h2,
  .thought h3,
  .thought h4,
  .thought h5,
  .thought h6 {
    color: #BAE6FD;
  }
  .thought p {
    color: #D4C8FF;
  }
  .thought code {
    background-color: #1A0A3A;
    border-color: #2D1A5A;
    color: #E89EAA;
  }
  .thought pre {
    background-color: #0D0520;
    border-color: #2D1A5A;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.30);
  }
  .thought pre code {
    color: #D4C8FF;
  }
  .thought ul,
  .thought ol {
    color: #D4C8FF;
  }
  .thought blockquote {
    background-color: #1A0A2A;
    border-left-color: #7A5AC8;
    color: #C8B8F0;
  }
  .thought hr {
    background: linear-gradient(90deg, transparent, #2D1A5A, transparent);
  }
  .thought a {
    color: #9D8AFF;
    border-bottom-color: #9D8AFF;
  }
  .thought a:hover {
    color: #BAE6FD;
    border-bottom-color: #BAE6FD;
  }
  .thought table {
    background-color: #0D0520;
  }
  .thought th,
  .thought td {
    border-color: #2D1A5A;
  }
  .thought th {
    background-color: #1A0A3A;
    color: #BAE6FD;
  }
  .thought tr:nth-child(even) {
    background-color: #12082A;
  }
}