/* ===========================
   苏青青主题 · 校园春绿风格
   =========================== */
.markdown-body {
  background-color: #f5f8f4 !important;
  background-image: linear-gradient(155deg, #fafcfa 0%, #f0f4ef 100%) !important;
  color: #3a4a38 !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: #e0e8dc; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #a0b898; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7a9070; }
/* 选中文字颜色 */
::selection { background: rgba(120, 150, 120, 0.12); color: #3a4a38; }
/* ===========================
   通用折叠面板
   =========================== */
details {
  width: 100% !important;
  margin-bottom: 14px !important;
  background: rgba(252, 255, 250, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #c8d8c0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  color: #3a4a38 !important;
  box-shadow: 0 4px 16px rgba(80, 100, 70, 0.05), inset 0 0 0 1px rgba(255,255,255,0.8) !important;
  transition: all 0.2s ease;
  font-family: 'Segoe UI', 'PingFang SC', system-ui, sans-serif !important;
}
details:hover {
  border-color: #7a9a6a;
  box-shadow: 0 6px 20px rgba(80, 100, 70, 0.08), inset 0 0 0 1px rgba(255,255,255,0.9) !important;
}
summary {
  padding: 12px 20px !important;
  background: rgba(240, 245, 235, 0.8) !important;
  cursor: pointer !important;
  list-style: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #5a6a4a !important;
  border-bottom: 1px solid #c8d8c0 !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s !important;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '[+]';
  margin-right: 10px;
  font-size: 12px;
  color: #8aaa7a;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
details[open] summary::before {
  content: '[-]';
  color: #5a6a4a;
}
summary:hover {
  background: rgba(230, 238, 225, 0.9) !important;
  color: #3a4a2a !important;
  border-bottom-color: #7a9a6a !important;
}
details[open] summary {
  border-bottom: 1px solid #7a9a6a !important;
  background: rgba(230, 238, 225, 0.9) !important;
  color: #3a4a2a !important;
}
details[open] > :not(summary) {
  padding: 18px 20px !important;
  color: #3a4a38 !important;
  font-size: 14px !important;
  background: rgba(248, 252, 246, 0.7) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}
/* ===========================
   顶部状态栏
   =========================== */
.status-top {
  background: rgba(240, 248, 238, 0.85) !important;
  border: 1px solid #c8d8c0 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  margin-bottom: 12px !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(80, 100, 70, 0.04) !important;
}
.status-top p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #5a6a4a !important;
  letter-spacing: 0.5px !important;
}
/* ===========================
   状态栏 details 特化
   =========================== */
details.status-bar summary {
  background: rgba(240, 248, 238, 0.85) !important;
  color: #5a6a4a !important;
}
details.status-bar[open] summary {
  background: rgba(230, 242, 225, 0.9) !important;
  color: #3a4a2a !important;
}
details.status-bar[open] > :not(summary) {
  background: rgba(248, 252, 246, 0.75) !important;
  font-size: 13px !important;
}
/* ===========================
   表格
   =========================== */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px;
  display: block;
  overflow-x: auto;
  background: rgba(248, 252, 246, 0.8) !important;
  border: 1px solid #c8d8c0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
th, td {
  border: 1px solid #c8d8c0 !important;
  padding: 8px 10px;
  text-align: left;
  color: #3a4a38 !important;
}
th {
  color: #5a6a4a !important;
  font-weight: 600;
  background: rgba(230, 238, 225, 0.7) !important;
}
td {
  color: #3a4a38;
}
/* ===========================
   聊天框气泡与按钮
   =========================== */
.group .bg-gray-100\\/90,
.ai-message .bg-gray-100\\/90 {
    background: rgba(252, 255, 250, 0.95) !important;
    border: 1px solid #c8d8c0 !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 12px rgba(80, 100, 70, 0.04), inset 0 0 0 1px rgba(255,255,255,0.8) !important;
    word-break: break-word !important;
    color: #3a4a38 !important;
}
.group .bg-gray-100\\/90 p,
.ai-message p {
    color: #3a4a38 !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, #c8d8c0, #b0c4a8) !important;
    color: #3a4a38 !important;
    border: 1px solid #a0b898 !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(80, 100, 70, 0.06), inset 0 1px 0 rgba(255,255,255,0.7) !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, #d4e4cc, #bcd0b4) !important;
    border-color: #7a9a6a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(80, 100, 70, 0.1), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    color: #2a3a28 !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.03) !important;
}
/* 输入框 */
#ai-chat-input,
input.modern-input,
textarea.modern-input,
.player-info-box,
.message-input {
    background-color: rgba(248, 252, 246, 0.9) !important;
    backdrop-filter: blur(4px) !important;
    border: 1.5px solid #c8d8c0 !important;
    border-radius: 30px !important;
    color: #3a4a38 !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.6) !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: #7a9a6a !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.03), 0 0 12px rgba(100, 130, 90, 0.12) !important;
}
/* 底部辅助文字 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #5a6a4a !important;
}
.text-orange-500 {
  color: #8a6a5a !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%3Ccircle cx='14' cy='14' r='10' fill='none' stroke='%237a9a6a' stroke-width='1.5' stroke-dasharray='31.4 31.4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='14' cy='14' r='4' fill='%23a0b898'%3E%3Canimate attributeName='r' values='3;6;3' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%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 16px !important; font-size: 14px !important; }
  details[open] > :not(summary) { padding: 14px 16px !important; }
  .status-top { padding: 6px 12px !important; }
  .status-top p { font-size: 11px !important; }
}
@media (max-width: 480px) {
  .status-top p { font-size: 10px !important; }
}