ai {
  display: block;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

/* 顶部时间地点：浴室冷色调水滴感 */
ai hd {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #006064;
  background: linear-gradient(135deg, rgba(224, 247, 250, 0.8), rgba(255, 255, 255, 0.5));
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 151, 167, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 主面板：起雾的浴室玻璃门 */
ai details {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(178, 235, 242, 0.6);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.8), 0 4px 15px rgba(0, 131, 143, 0.05);
  overflow: hidden;
  position: relative;
}

/* 模拟玻璃上的水汽反光 */
ai details::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.8) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  transform: rotate(30deg);
}

/* 标题栏：冷暖交汇（浴室蓝过渡到卧室粉） */
ai summary {
  background: linear-gradient(90deg, #e0f7fa 0%, #fce4ec 100%);
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #4a148c;
  cursor: pointer;
  list-style: none;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(244, 143, 177, 0.2);
  transition: all 0.3s;
}
ai summary::-webkit-details-marker { display: none; }
ai summary:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(244, 143, 177, 0.4);
}

/* 分区卡片：卧室私密感 */
ai sec {
  display: block;
  margin-top: 12px;
  padding: 10px 10px 10px 16px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  /* 左侧蕾丝边缘点缀 */
  background-image: radial-gradient(circle at 0 50%, #f48fb1 3px, transparent 4px);
  background-size: 8px 8px;
  background-repeat: repeat-y;
  background-position: left center;
  border: 1px solid rgba(244, 143, 177, 0.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  position: relative;
  z-index: 1;
}

/* 浴室百叶窗/水波暗纹 */
ai sec::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(224, 247, 250, 0.3) 10px, rgba(224, 247, 250, 0.3) 20px);
  pointer-events: none;
  z-index: -1;
  border-radius: 8px;
}

/* 分区标题：暧昧深紫色 */
ai sec::before {
  content: attr(t);
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #880e4f;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(244, 143, 177, 0.5);
  letter-spacing: 0.5px;
}

/* 数据行：紧凑流式布局 */
ai d {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: #37474f;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 2px solid transparent;
}

/* Hover 情欲升温交互：潮红泛起，心跳加速(微位移) */
ai d:hover {
  background: linear-gradient(90deg, rgba(252, 228, 236, 0.9), rgba(255,255,255,0.4));
  color: #6a1b9a;
  border-left: 2px solid #d81b60;
  transform: translateX(4px);
  box-shadow: 0 2px 4px rgba(216, 27, 96, 0.1);
}

/* 关键人名/高亮字段：玫瑰色 */
ai f {
  font-weight: 700;
  color: #c2185b;
  padding: 0 2px;
}
/* =========================================
   「水疗套房」主题：浴室的清透 + 卧室的温馨
   ========================================= */

/* --- 1. 顶部栏 (磨砂玻璃与水疗氛围) --- */
.sticky.w-full.top-0.flex.items-center {
    /* 浴室风格：清透的水蓝色与卧室风格：柔和的薰衣草/暖白色渐变 */
    background: linear-gradient(135deg, rgba(224, 247, 250, 0.85), rgba(255, 240, 245, 0.85)) !important;
    backdrop-filter: blur(12px) !important; /* 浴室起雾玻璃效果 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.08) !important;
}

/* 模型选择器 - 像卧室小抱枕一样柔软 */
#ai-model-selector .group.flex.items-center {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.9), 0 2px 6px rgba(180, 160, 170, 0.2) !important;
    border: 1px solid rgba(255, 182, 193, 0.3) !important; /* 极淡的暖粉色边框点缀 */
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #455a64 !important; /* 深青灰色，确保绝对可读 */
    font-weight: bold !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}

/* --- 2. 按钮栏 (卧室的柔软与浴室的清新互动) --- */
#ai-mod-button2 button.MuiButton-root {
    /* 默认状态：卧室风格的暖色系（柔和的桃粉/珍珠白） */
    background: linear-gradient(145deg, #fff0f5, #ffe4e1) !important; 
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    color: #8b5a65 !important; /* 暖色调文字 */
    box-shadow: 3px 3px 8px rgba(180, 160, 170, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.9) !important; 
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    /* 悬浮状态：转换为浴室风格的水波青色 */
    background: linear-gradient(145deg, #e0f7fa, #b2ebf2) !important; 
    color: #006064 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 188, 212, 0.25) !important; /* 水光投影 */
}

/* --- 3. 底部栏与输入框 (浴缸泡泡与丝绒质感) --- */
#ai-chat-bottom-input {
    background: transparent !important;
}
#ai-chat-input {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #b2ebf2 !important; /* 浴室瓷砖的清爽蓝色边框 */
    border-radius: 28px !important; /* 像气泡一样圆润 */
    color: #263238 !important; /* 深沉的文字颜色 */
    box-shadow: inset 0 2px 6px rgba(0,150,136,0.05), 0 4px 15px rgba(255, 228, 225, 0.5) !important; /* 水色内阴影 + 暖粉色外发光 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#ai-chat-input:focus {
    border-color: #ffb6c1 !important; /* 聚焦时变为卧室的温馨粉色 */
    box-shadow: inset 0 2px 6px rgba(255,182,193,0.1), 0 4px 15px rgba(255, 182, 193, 0.6) !important;
    outline: none !important;
}
#ai-chat-input::placeholder {
    color: #90a4ae !important;
}
#ai-chat-input::selection {
    background: #80deea !important; /* 选中文本呈现水波色 */
    color: #ffffff !important;
}

/* --- 4. 评论区 (水疗休息室) --- */
/* 评论区主背景 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    /* 自上而下的渐变：从清爽的水蓝过渡到卧室的暖白 */
    background: linear-gradient(to bottom, rgba(240, 255, 255, 0.98), rgba(255, 245, 248, 0.98)) !important;
    border-top: 2px dashed #80deea !important; /* 像毛巾边缘的缝线纹理 */
}

/* 单条评论容器 - 像叠好的白毛巾/软垫 */
div.p-3.overflow-y-auto div.group.ml-0 {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 3px 10px rgba(176, 190, 197, 0.15) !important;
    border-left: 4px solid #ffb6c1 !important; /* 左侧点缀卧室风格的暖粉色指示线 */
    transition: transform 0.2s ease, border-color 0.3s ease !important;
}
div.p-3.overflow-y-auto div.group.ml-0:hover {
    transform: scale(1.01) !important;
    border-left-color: #4dd0e1 !important; /* 鼠标悬浮时变为浴室水蓝色 */
}

/* 评论区文字颜色强化，确保在浅色背景上绝对清晰 */
div.text-sm.text-grey-600 span.font-bold {
    color: #3949ab !important; /* 用户名：深靛蓝色 */
}
div.break-all {
    color: #37474f !important; /* 评论正文：深蓝灰色 */
    line-height: 1.6 !important;
}
div.text-xs.text-grey-600 {
    color: #78909c !important; /* 时间戳：浅灰蓝色 */
}

/* 评论区输入框 */
textarea.rc-textarea {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #b2ebf2 !important;
    border-radius: 12px !important;
    color: #263238 !important;
}
textarea.rc-textarea:focus {
    border-color: #ffb6c1 !important;
    outline: none !important;
}

/* 评论区分割线 - 柔和的波浪/虚线感 */
div.style_divider__mW0YX {
    border-top: 1px dashed #cfd8dc !important;
    background: transparent !important;
}

/* --- 5. 分页栏 (水珠与花瓣) --- */
.MuiPaginationItem-root {
    background: #ffffff !important;
    color: #00838f !important;
    border: 1px solid #e0f2f1 !important;
    border-radius: 50% !important; /* 像浴室里的水滴泡泡 */
    transition: all 0.3s ease !important;
}
.MuiPaginationItem-root:hover {
    background: #e0f7fa !important;
}
.MuiPaginationItem-root.Mui-selected {
    background: #ffb6c1 !important; /* 选中的页码像卧室床头的玫瑰花瓣 */
    color: white !important;
    border-color: #ffb6c1 !important;
    box-shadow: 0 0 8px rgba(255, 182, 193, 0.6) !important;
}
/* 动态水波呼吸效果 */
@keyframes spaBreathing {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0px); }
}

#ai-model-selector .shrink-0.flex.items-center svg,
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    animation: spaBreathing 4s infinite ease-in-out !important;
    color: #4dd0e1 !important; /* 图标染上一点水蓝色 */
}
/* =========================================
   「沐浴后的安眠」聊天框主题：浴室清透 + 卧室温馨
   ========================================= */

/* 1. 隐藏默认的顶部生硬颜色条，保持气泡纯净 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 统一聊天框 (AI输出框主样式 - 浴室水汽与玻璃质感) */
.bg-gray-100\/90.relative.inline-block {
    /* 浴室的水蓝色向卧室的暖粉色柔和过渡 */
    background: linear-gradient(135deg, rgba(224, 247, 250, 0.9) 0%, rgba(255, 240, 245, 0.95) 100%) !important;
    backdrop-filter: blur(12px) !important; /* 浴室起雾玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.9) !important; /* 肥皂泡般的高光边缘 */
    border-radius: 24px 24px 24px 8px !important; /* 像抱枕一样柔软的圆角 */
    /* 内阴影塑造水润反光，外阴影投射卧室的暖色氛围光 */
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.8), 
                0 6px 16px rgba(255, 182, 193, 0.25) !important;
    padding: 16px 20px !important;
    isolation: isolate !important; /* 建立层叠上下文，隔离背景动效 */
}

/* 3. 单独的用户输入聊天框 (卧室暖意为主，水色为辅) */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    /* 用户气泡更偏向卧室的温暖床品色 */
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.95) 0%, rgba(240, 248, 255, 0.9) 100%) !important;
    border-radius: 24px 24px 8px 24px !important;
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.9), 
                0 6px 16px rgba(128, 222, 234, 0.2) !important; /* 外围透出一点浴室的水波光 */
}

/* 4. 聊天框背景点缀：静态的水珠与花瓣纹理 (纯CSS绘制，不影响阅读) */
.bg-gray-100\/90.relative.inline-block::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit !important;
    /* 绘制微小的水珠(白色)和散落的暖色光斑(粉色) */
    background-image: radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.6) 2px, transparent 3px),
                      radial-gradient(circle at 85% 15%, rgba(255, 182, 193, 0.4) 3px, transparent 4px) !important;
    background-size: 100% 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 5. 【强制可读性】聊天框内主要文本内容 */
.markdown-body {
    /* 极高对比度的深蓝灰色，在浅色水/粉背景上如墨水般清晰 */
    color: #2C3E50 !important; 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 500 !important; /* 稍微加粗提升辨识度 */
    z-index: 1 !important;
    background: transparent !important;
}

/* 6. 聊天框底部附加元素 (按钮、模型名称、Token消耗) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #546E7A !important; /* 统一使用柔和但清晰的灰蓝色 */
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

/* 底部操作按钮的悬浮效果：卧室的暖粉色小灯泡 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #D81B60 !important; /* 悬浮时变为温暖的深粉色 */
    background: rgba(255, 182, 193, 0.25) !important;
    border-radius: 12px !important;
    transform: translateY(-1px) !important;
}

/* 7. 输出聊天框的加载元素 (定制SMIL SVG动画：水珠与粉泡泡的交替呼吸) */
/* 隐藏默认加载点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}
/* 设置加载容器并注入内联SVG动画 (即使平台禁用CSS动画依然生效) */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
    /* 包含一个浴室青色水珠和一个卧室暖粉色泡泡，交替上下浮动 */
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="8" cy="12" r="4" fill="%2380DEEA"><animate attributeName="cy" values="14;8;14" dur="1.5s" repeatCount="indefinite"/></circle><circle cx="16" cy="12" r="3.5" fill="%23FFB6C1"><animate attributeName="cy" values="8;14;8" dur="1.5s" repeatCount="indefinite"/></circle></svg>') !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}

/* 8. 移动端与低动效适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        padding: 12px 14px !important;
        border-radius: 18px 18px 18px 6px !important;
    }
    .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
        border-radius: 18px 18px 6px 18px !important;
    }
}