/* =========================================
   青春网格本 - 观察日记 UI (标准折叠版)
   ========================================= */

/* 核心容器：笔记本纸张与纸胶带 */
ai {
  display: block;
  position: relative;
  background-color: #fdfbf7; 
  margin: 18px 2px 5px 2px;
  padding: 12px 10px;
  border-radius: 2px 8px 8px 2px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.08), 
              -1px 0 2px rgba(0, 0, 0, 0.03);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13.5px; 
  color: #2c3e50;
  border-left: 2px solid #e0d8c8; 
}

/* 顶部半透明和纸胶带装饰 */
ai::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 110px;
  height: 24px;
  background: rgba(244, 218, 160, 0.65); 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 3px dotted rgba(253, 251, 247, 0.8);
  border-right: 3px dotted rgba(253, 251, 247, 0.8);
  z-index: 10;
  pointer-events: none;
}

/* 折叠区块基础 */
ai details {
  display: block;
  margin-bottom: 12px;
}
ai details[open] {
  margin-bottom: 16px;
}

/* 标题：彩色便利贴/索引标签风格 */
ai summary {
  display: flex;
  align-items: center;
  background: #e3f2fd; 
  padding: 6px 10px;
  margin: 0 -4px 6px -4px;
  border-left: 4px solid #42a5f5; 
  border-radius: 0 4px 4px 0;
  font-weight: 600;
  color: #1565c0;
  cursor: pointer;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.06);
  user-select: none;
  transition: all 0.2s ease;
  list-style: none; /* 隐藏部分浏览器的默认三角 */
}

/* 标题 Hover 交互与不同面板的颜色变体 */
ai summary:hover {
  filter: brightness(0.95);
  transform: translateX(2px);
}
ai details:nth-of-type(2) summary { background: #fbe9e7; border-left-color: #ff8a65; color: #d84315; } 
ai details:nth-of-type(3) summary { background: #fce4ec; border-left-color: #f06292; color: #c2185b; } 
ai details:nth-of-type(4) summary { background: #f3e5f5; border-left-color: #ba68c8; color: #6a1b9a; } 

/* 自定义折叠三角动画 */
ai summary::-webkit-details-marker { display: none; }
ai summary::before {
  content: "▼";
  font-size: 0.8em;
  margin-right: 6px;
  transition: transform 0.3s;
}
ai details:not([open]) summary::before {
  transform: rotate(-90deg);
}

/* 数据行：笔记本横线效果 */
ai r {
  display: block;
  padding: 5px 4px;
  border-bottom: 1px solid #e0e6ed; 
  line-height: 1.6;
  position: relative;
}
ai r:hover {
  background: rgba(240, 248, 255, 0.4);
}

/* 键 (属性名)：印刷体灰色 */
ai k {
  color: #78909c;
  font-size: 0.9em;
  font-weight: 500;
  margin-right: 2px;
}
ai k::after {
  content: ":";
  margin-right: 4px;
}

/* 值 (属性内容)：钢笔墨水蓝 */
ai v {
  color: #1a365d; 
}

/* 重点强调 <b>：荧光笔与红笔批改效果 */
ai b {
  color: #c62828; 
  font-weight: 500;
  background: linear-gradient(transparent 60%, rgba(255, 128, 171, 0.35) 60%);
  padding: 0 2px;
  border-radius: 2px;
}
/* =========================================
   全局字体设定 (优先调用系统自带的手写/圆体字，保证可读性)
   ========================================= */
textarea, input, p, div, span, button {
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'STKaiti', 'Nunito', sans-serif !important;
}

/* =========================================
   1. 顶部栏 (网格纸背景 + 回形针点缀)
   ========================================= */
.sticky.w-full.top-0.flex.items-center {
    background-color: #fdfbf7 !important; /* 暖白纸张底色 */
    background-image: 
        linear-gradient(#e5e7eb 1px, transparent 1px), 
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    border-bottom: 2px dashed #cbd5e1 !important; /* 手撕虚线边缘 */
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.05) !important;
}

/* 顶部栏左上角添加回形针文具立绘 */
.sticky.w-full.top-0.flex.items-center::before {
    content: "📎";
    position: absolute;
    left: 15px;
    top: 5px;
    font-size: 22px;
    transform: rotate(-20deg);
    pointer-events: none;
    opacity: 0.9;
}

/* 模型选择器 - 黄色便利贴风格 */
#ai-model-selector .group.flex.items-center {
    background-color: #fef08a !important; /* 便利贴黄 */
    border: 1px solid #facc15 !important;
    border-radius: 2px 10px 10px 2px !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
    transform: rotate(-1deg);
    transition: all 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
    transform: rotate(1deg) scale(1.05);
    background-color: #fde047 !important;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #334155 !important;
    font-weight: bold !important;
}

/* 顶部各类图标颜色改为圆珠笔蓝 */
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#header-setting-button svg {
    color: #2563eb !important; 
    transition: transform 0.2s !important;
}
.sticky.w-full.top-0 svg:hover {
    transform: scale(1.1) rotate(5deg) !important;
}

/* =========================================
   2. 开场白选择器 (手账纸胶带风格)
   ========================================= */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background-color: #e0f2fe !important; /* 浅蓝胶带 */
    border: 2px dashed #7dd3fc !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 2px #ffffff !important;
    transition: all 0.2s !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    background-color: #bae6fd !important;
    transform: translateY(-1px);
}
/* 添加标签小图标 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]::after {
    content: "🏷️";
    margin-left: auto;
    padding-right: 8px;
    font-size: 14px;
}

/* =========================================
   3. 按钮栏 (手绘线框 + 马克笔高亮悬浮)
   ========================================= */
#ai-mod-button2 button.MuiButton-root {
    background-color: #ffffff !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 10px 3px 10px 3px !important; /* 模拟手绘的不规则方框 */
    color: #475569 !important;
    font-weight: bold !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background-color: #bbf7d0 !important; /* 荧光绿马克笔效果 */
    border-color: #22c55e !important;
    color: #166534 !important;
    transform: translateY(-2px) rotate(1deg);
    box-shadow: 3px 3px 0px #22c55e !important; /* 硬阴影增强立体感 */
}
#ai-mod-button2 button.MuiButton-root svg {
    color: inherit !important;
}

/* =========================================
   4. 底部栏及输入框 (网格纸 + 铅笔点缀)
   ========================================= */
#ai-chat-bottom-input {
    background-color: #fdfbf7 !important;
    background-image: 
        linear-gradient(#e5e7eb 1px, transparent 1px), 
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    border-top: 3px solid #f87171 !important; /* 红色装订线 */
    position: relative;
}
/* 底部输入区右上角悬浮一支铅笔 */
#ai-chat-bottom-input::before {
    content: "✏️";
    position: absolute;
    right: 20px;
    top: -25px;
    font-size: 24px;
    transform: rotate(135deg);
    pointer-events: none;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}

#ai-chat-input {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    color: #1e293b !important;
}
#ai-chat-input:focus {
    border-color: #3b82f6 !important; /* 聚焦时变成蓝色圆珠笔墨水色 */
    background-color: #ffffff !important;
    outline: none !important;
}
#ai-chat-input::placeholder {
    color: #94a3b8 !important;
    font-style: italic !important;
}
/* 文本选中时的马克笔高亮粉色 */
#ai-chat-input::selection {
    background-color: #fbcfe8 !important; 
    color: #000000 !important;
}

/* =========================================
   5. 分页栏 (彩色小圆贴纸风格)
   ========================================= */
.MuiPaginationItem-root {
    border: 1px solid #cbd5e1 !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-weight: bold !important;
    transition: all 0.2s !important;
}
.MuiPaginationItem-root:hover {
    background-color: #fef08a !important; /* 悬浮荧光黄 */
    transform: scale(1.1);
}
.MuiPaginationItem-root.Mui-selected {
    background-color: #3b82f6 !important; /* 选中的贴纸为蓝色 */
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 2px 2px 0px #1e3a8a !important;
}
.MuiStack-root.css-1uwir8f .MuiInputBase-input {
    border-bottom: 2px dashed #94a3b8 !important;
    text-align: center !important;
}

/* =========================================
   6. 评论区 (经典横线笔记本 + 图钉便签)
   ========================================= */
/* 评论区背景：红线+横线笔记本纸张 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: #fdfbf7 !important;
    background-image: 
        linear-gradient(90deg, transparent 39px, #ef4444 39px, #ef4444 41px, transparent 41px), /* 左侧红色警戒线 */
        linear-gradient(#e5e7eb 1px, transparent 1px) !important; /* 横线 */
    background-size: 100% 28px !important; /* 横线间距 */
    background-position: 0 0 !important;
}

/* 顶部标题：日记本图标 + 下半部分高亮 */
div.text-lg.font-bold {
    background: linear-gradient(180deg, transparent 55%, #fef08a 45%) !important;
    display: inline-block !important;
    color: #1e293b !important;
    padding-right: 5px !important;
}
div.text-lg.font-bold::before {
    content: "📓 ";
}

/* 评分星星颜色改为亮眼的荧光橙 */
span.MuiRating-iconFilled svg {
    color: #fb923c !important;
    filter: drop-shadow(1px 1px 1px rgba(251, 146, 60, 0.3)) !important;
}
span.text-orange-500 {
    color: #ea580c !important;
    font-weight: bold !important;
}

/* 评论输入框 */
textarea.rc-textarea {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 2px dashed #94a3b8 !important;
    border-radius: 8px !important;
    color: #1e293b !important;
}
textarea.rc-textarea:focus {
    border-color: #8b5cf6 !important; /* 紫色水笔印 */
    background-color: #ffffff !important;
}

/* 发送评论按钮 - 橡皮擦质感 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background-color: #3b82f6 !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0px #1d4ed8 !important;
    transition: all 0.1s !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 0px 0px 0px #1d4ed8 !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #ffffff !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background-color: #3b82f6 !important;
    border-radius: 20px !important;
    box-shadow: 2px 2px 0px #1e3a8a !important;
}
button.MuiButton-outlinedPrimary {
    border: 2px dashed #94a3b8 !important;
    color: #64748b !important;
    border-radius: 20px !important;
}

/* 评论项 - 贴在横线本上的小纸条 */
div.group.ml-0 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #10b981 !important; /* 绿色侧边胶带 */
    border-radius: 2px 8px 8px 2px !important;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.06) !important;
    position: relative;
    transition: transform 0.2s !important;
}
div.group.ml-0:hover {
    transform: rotate(0.5deg) scale(1.01);
    border-left-color: #f59e0b !important; /* 悬浮时侧边胶带变黄 */
}

/* 评论右上角图钉文具装饰 */
div.group.ml-0::before {
    content: "📌";
    position: absolute;
    top: -12px;
    right: 10px;
    font-size: 18px;
    pointer-events: none;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.2));
}

/* 用户名与内容高对比度确保可读 */
div.text-sm.text-grey-600 span.font-bold {
    color: #0f172a !important;
    font-size: 15px !important;
}
div.break-all {
    color: #334155 !important;
    line-height: 1.6 !important;
}

/* 评论分割线 - 手绘波浪虚线感 */
div.style_divider__mW0YX {
    border-top: 2px dashed #cbd5e1 !important;
    background: none !important;
    margin: 15px 0 !important;
}

/* 点赞与回复互动按钮 */
button.text-gray-400:hover svg {
    color: #ef4444 !important; /* 点赞红笔标注 */
    transform: scale(1.2) !important;
    transition: all 0.2s !important;
}
span.cursor-pointer:hover {
    color: #3b82f6 !important;
    text-decoration: underline wavy #3b82f6 !important; /* 波浪线回复 */
}
/* 隐藏默认的顶部颜色装饰条，保持手账本的干净外观 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 核心聊天框：网格手账本背景设计 */
.bg-gray-100\/90.relative.inline-block {
    background-color: #FCFCFD !important; /* 纯净的纸张底色 */
    /* 绘制手账本网格与左侧红色装订/边距线 */
    background-image: 
      linear-gradient(90deg, transparent 38px, rgba(255, 163, 163, 0.4) 38px, rgba(255, 163, 163, 0.4) 40px, transparent 40px),
      linear-gradient(rgba(176, 212, 230, 0.35) 1px, transparent 1px),
      linear-gradient(90deg, rgba(176, 212, 230, 0.35) 1px, transparent 1px) !important;
    background-size: 100% 100%, 24px 24px, 24px 24px !important;
    background-position: 0 0, 0 0, 0 0 !important;
    
    border: 1px solid #E2E8F0 !important;
    border-radius: 4px 16px 16px 16px !important; /* 模拟书页边缘的圆润感 */
    box-shadow: 
      3px 4px 12px rgba(0, 0, 0, 0.04), 
      -1px -1px 4px rgba(255, 255, 255, 0.9) !important;
    
    padding: 24px 20px 20px 52px !important; /* 左侧留出足够的内边距避开红线 */
    position: relative !important;
    isolation: isolate !important;
}

/* 装饰立绘 1：顶部半透明黄色纸胶带 */
.bg-gray-100\/90.relative.inline-block::after {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(-2deg) !important;
    width: 90px !important;
    height: 24px !important;
    background: linear-gradient(135deg, rgba(255, 244, 184, 0.9), rgba(255, 233, 140, 0.8)) !important;
    border-left: 2px dashed rgba(0,0,0,0.08) !important;
    border-right: 2px dashed rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* 装饰立绘 2：右上角金属回形针 (内嵌 SVG) */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    width: 22px !important;
    height: 45px !important;
    /* 高清回形针 SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 50" fill="none" stroke="%2394A3B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 40V10c0-3.3 2.7-6 6-6s6 2.7 6 6v24c0 5.5-4.5 10-10 10s-10-4.5-10-10V14c0-2.2 1.8-4 4-4s4 1.8 4 4v20"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 10 !important;
    pointer-events: none !important;
    transform: rotate(12deg) !important;
    opacity: 0.8 !important;
}

/* 文本内容：深色字迹，确保在浅色网格上具有绝对可读性 */
.markdown-body {
    color: #334155 !important; /* 深蓝灰色，比纯黑更柔和但对比度极高 */
    font-family: 'Nunito', 'Comic Sans MS', 'Chalkboard SE', 'PingFang SC', sans-serif !important; /* 略带书写感的字体回退链 */
    line-height: 24px !important; /* 与背景网格尺寸匹配 */
    font-weight: 500 !important;
    background: transparent !important;
    z-index: 1 !important;
    position: relative !important;
}

/* 底部附加元素：按钮、模型名称、Token等 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #64748B !important; /* 铅笔灰蓝色 */
    font-weight: bold !important;
    background: rgba(255, 255, 255, 0.7) !important; /* 添加微弱的白色底衬，防止网格线干扰阅读 */
    padding: 2px 6px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: rgba(255, 244, 184, 0.8) !important; /* 悬停时变为胶带的黄色 */
    color: #334155 !important;
}

/* 加载动画：替换为旋转的粉色折纸星星 (内置 SMIL 动画，无惧 CSS 动画屏蔽) */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 22px !important;
    height: 22px !important;
    /* 包含 <animateTransform> 的内联 SVG 星星 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 5 L60 35 L90 35 L65 55 L75 85 L50 65 L25 85 L35 55 L10 35 L40 35 Z" fill="%23FFB6C1" stroke="%23FFA07A" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="4s" repeatCount="indefinite"/></path></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}