/* ===========================
   温浅主题 · 晨雾残页风格
   =========================== */
.markdown-body {
  background-color: #f5f0eb !important;
  background-image: linear-gradient(145deg, #faf6f2 0%, #efe8e2 100%) !important;
  color: #3a3028 !important;
  font-family: 'Segoe UI', 'PingFang SC', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
.app-container,
.main-container,
.message-list,
.chat-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
/* 自定义滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #e6ddd2; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #b0a090; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #8a7a6a; }
/* 选中文字颜色 */
::selection { background: rgba(90, 107, 122, 0.12); color: #3a3028; }
/* ===========================
   通用折叠面板
   =========================== */
details {
  width: 100% !important;
  margin-bottom: 16px !important;
  background: rgba(255, 252, 248, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #d6cdc0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  color: #3a3028 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.7) !important;
  transition: all 0.2s ease;
  font-family: 'Segoe UI', 'PingFang SC', system-ui, sans-serif !important;
}
details:hover {
  border-color: #5a6b7a;
}
summary {
  padding: 12px 22px !important;
  background: rgba(245, 238, 230, 0.8) !important;
  cursor: pointer !important;
  list-style: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #5a6b7a !important;
  border-bottom: 1px solid #d6cdc0 !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '[+]';
  margin-right: 10px;
  font-size: 12px;
  color: #8b7060;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
details[open] summary::before {
  content: '[-]';
  color: #5a6b7a;
}
summary:hover {
  background: rgba(235, 225, 215, 0.9) !important;
  color: #3a4a5a !important;
  border-bottom-color: #5a6b7a !important;
}
details[open] summary {
  border-bottom: 1px solid #5a6b7a !important;
  background: rgba(235, 225, 215, 0.9) !important;
  color: #3a4a5a !important;
}
details[open] > :not(summary) {
  padding: 20px 22px !important;
  color: #3a3028 !important;
  font-size: 14px !important;
  background: rgba(255, 250, 245, 0.7) url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E") !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}
/* ===========================
   预格式化文本 / 数据面板
   =========================== */
pre {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  padding: 14px 18px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  color: #3a3028;
  background: rgba(250, 242, 235, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0 0 10px 10px;
  line-height: 1.7;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
/* ===========================
   表格
   =========================== */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px;
  display: block;
  overflow-x: auto;
  background: rgba(250, 242, 235, 0.8) !important;
  border: 1px solid #d6cdc0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
th, td {
  border: 1px solid #d6cdc0 !important;
  padding: 8px 10px;
  text-align: left;
  color: #3a3028 !important;
}
th {
  color: #5a6b7a !important;
  font-weight: 600;
  background: rgba(235, 225, 215, 0.7) !important;
}
td {
  color: #3a3028;
}
/* ===========================
   心声与谎言之匣 · 撕裂感专属美化
   =========================== */
.liars-box {
  background: rgba(255, 252, 248, 0.6);
  border: 1px solid #d6cdc0;
  border-radius: 0 0 12px 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
.liar-lie {
  border-left: 3px solid #8b5040;
  padding: 8px 12px;
  background: rgba(245, 235, 225, 0.5);
  border-radius: 0 8px 8px 0;
}
.liar-truth {
  border-left: 3px solid #5a6b7a;
  padding: 8px 12px;
  background: rgba(235, 238, 242, 0.5);
  border-radius: 0 8px 8px 0;
}
.liar-body {
  border-left: 3px solid #8a7a6a;
  padding: 8px 12px;
  background: rgba(240, 236, 232, 0.4);
  border-radius: 0 8px 8px 0;
}
.liar-label {
  display: block;
  font-size: 10px;
  color: #6b5848;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.liar-content {
  color: #3a2818;
  font-size: 13px;
  line-height: 1.7;
}
.liar-truth .liar-content i {
  color: #4a5a6a;
}
/* ===========================
   手机屏幕 · 网络热评模块 · 仿玻璃外壳
   =========================== */
.phone-screen {
  background: #e8e0d8;
  border: 3px solid #c4b4a4;
  border-radius: 24px;
  padding: 6px;
  margin: 8px 0;
  box-shadow: 
    0 0 0 2px #d6cdc0,
    0 0 0 4px #b8a898,
    0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.phone-notch {
  width: 80px;
  height: 16px;
  background: #c4b4a4;
  border-radius: 0 0 12px 12px;
  margin: 0 auto 8px;
}
.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 18px 8px;
  font-size: 10px;
  color: #6b5848;
}
.phone-time { font-weight: 600; color: #4a3828; }
.phone-icons { letter-spacing: 2px; font-size: 9px; }
.phone-content {
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.01) 2px,
      rgba(0,0,0,0.01) 4px
    ),
    linear-gradient(180deg, rgba(255, 252, 248, 1) 0%, rgba(245, 238, 230, 1) 100%);
  border-radius: 12px;
}
.comment-item {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(180, 160, 140, 0.4);
}
.comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.comment-item:nth-child(1) .comment-avatar { background: linear-gradient(135deg, #c0a890, #a08070); }
.comment-item:nth-child(2) .comment-avatar { background: linear-gradient(135deg, #b0a0b0, #907a80); }
.comment-item:nth-child(3) .comment-avatar { background: linear-gradient(135deg, #a0b0b8, #7a8a90); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment-user { font-size: 11px; color: #5a6b7a; font-weight: 600; }
.comment-time { font-size: 10px; color: #8b7060; }
.comment-text { font-size: 12px; color: #3a2818; line-height: 1.55; margin-bottom: 6px; }
.comment-actions { font-size: 10px; color: #6b5040; transition: color 0.2s ease; }
.comment-actions:hover { color: #4a3020; }
/* ===========================
   聊天框气泡与按钮
   =========================== */
.group .bg-gray-100\\/90,
.ai-message .bg-gray-100\\/90 {
    background: rgba(255, 252, 248, 0.95) !important;
    border: 1px solid #d6cdc0 !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.7) !important;
    word-break: break-word !important;
    color: #3a3028 !important;
}
.group .bg-gray-100\\/90 p,
.ai-message p {
    color: #3a3028 !important;
}
/* 按钮 */
.flex.items-center.gap-2.pb-2 > button,
button.primary-btn,
button.generate-btn,
button[type="submit"],
.markdown-body button {
    background: linear-gradient(145deg, #d4c0ae, #bea898) !important;
    color: #2e2822 !important;
    border: 1px solid #a89480 !important;
    border-radius: 40px !important;
    padding: 10px 26px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    min-height: 40px !important;
    box-shadow: 0 4px 12px rgba(100, 70, 50, 0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    cursor: pointer !important;
    letter-spacing: 1px;
    text-transform: none;
}
.flex.items-center.gap-2.pb-2 > button:hover,
button.primary-btn:hover,
button.generate-btn:hover,
.markdown-body button:hover {
    background: linear-gradient(145deg, #dec8b6, #c8b2a0) !important;
    border-color: #5a6b7a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(90, 107, 122, 0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    color: #1e1814 !important;
}
.flex.items-center.gap-2.pb-2 > button:active,
button.primary-btn:active,
button.generate-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}
/* 输入框 */
#ai-chat-input,
input.modern-input,
textarea.modern-input,
.player-info-box,
.message-input {
    background-color: rgba(255, 250, 245, 0.9) !important;
    backdrop-filter: blur(4px) !important;
    border: 1.5px solid #d6cdc0 !important;
    border-radius: 30px !important;
    color: #3a3028 !important;
    padding: 14px 22px !important;
    font-size: 14px !important;
    min-height: 52px !important;
    width: 100% !important;
    max-width: 100% !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.02), 0 0 0 1px rgba(255,255,255,0.5) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    line-height: 1.6 !important;
}
#ai-chat-input:focus,
input.modern-input:focus,
textarea.modern-input:focus {
    border-color: #5a6b7a !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.03), 0 0 12px rgba(90, 107, 122, 0.15) !important;
}
/* 底部辅助文字 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #6b5848 !important;
}
.text-orange-500 {
  color: #8b5040 !important;
}
/* ===========================
   加载动画
   =========================== */
.style_dot-flashing__8L91Q,
[class*="dot-flashing"],
[class*="loading-dots"] {
    display: none !important;
}
.flex.items-center.justify-center.w-6.h-5 > div,
.flex.items-center.justify-center.w-6.h-5 > svg {
    display: none !important;
}
.flex.items-center.justify-center::before {
    content: '';
    display: block !important;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='2' y='2' width='24' height='24' rx='6' fill='none' stroke='%235a6b7a' stroke-width='1.5'%3E%3Canimate attributeName='stroke-opacity' values='0.1;0.7;0.1' dur='2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cline x1='14' y1='7' x2='14' y2='11' stroke='%238b5040' stroke-width='2' stroke-linecap='round'%3E%3Canimate attributeName='y2' values='11;19;11' dur='1.5s' repeatCount='indefinite'/%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='13' stroke='%238b5040' stroke-width='1.5' stroke-linecap='round'%3E%3Canimate attributeName='opacity' values='1;0.3;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 10;
    position: relative;
}
/* ===========================
   响应式适配
   =========================== */
@media (max-width: 768px) {
  details summary { padding: 10px 18px !important; font-size: 14px !important; }
  details[open] > :not(summary) { padding: 16px 18px !important; }
}
@media (max-width: 480px) {
  .liars-box { padding: 10px 12px; gap: 10px; }
  .phone-screen { max-width: 100%; border-radius: 18px; padding: 4px; }
  .phone-notch { width: 60px; height: 12px; }
}