/* 消息气泡区 - 加深半透明背景，校园纯爱主题 */
/*
  目标: 使消息气泡背景色加深，保留半透明感，并符合校园纯爱主题。
  选择器: `.group .bg-gray-100\/90` 是通用消息气泡背景的类。
  实现: 设置 `background-color` 为 `rgba(210, 220, 230, 0.85)`。
        这是一个柔和的、略带灰度的蓝色调，85% 的不透明度确保了半透明效果。
  对比度: 默认消息文本颜色 (`.text-gray-900`) 是深色，与此背景形成良好的对比度，确保可读性。
*/
.group .bg-gray-100\/90 {
  background-color: rgba(210, 220, 230, 0.85) !important;
  /* 保持圆角和内边距不变 */
}

/* 状态栏区 - 不透明渐变背景美化，校园纯爱主题 */
/*
  目标: 使顶部状态栏背景不透明，并采用符合校园纯爱主题的渐变色。
  选择器: `.sticky.top-0` 是顶部固定控制栏的主容器。
  实现: 设置 `background` 为一个柔和的粉色到蓝色的线性渐变。
        `linear-gradient(to right, #FADADD, #D6EAF8)`
        #FADADD (柔和粉) 对应青春的活力与温柔。
        #D6EAF8 (柔和蓝) 对应晴朗的天空与宁静。
  对比度: 渐变色为浅色调，内部的深色文本/图标（如模型名称、按钮）与之对比度足够，保证清晰。
*/
.sticky.top-0 {
  background: linear-gradient(to right, #FADADD, #D6EAF8) !important;
  /* 保持其他状态栏样式，如阴影、定位等 */
}

/*
  可选：如果需要进一步调整，可以考虑：
  - 调整消息气泡的透明度或色调。
  - 调整状态栏渐变的方向或颜色组合。
  - 为状态栏内的文本/图标添加微调，以达到最佳对比度。
  当前设置已满足用户需求。
*/

details.m {margin-top: 20px;border: 1px solid #d1d5db;border-radius: 6px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);background-color: #f9fafb;}
details.m summary {padding: 12px 16px;font-weight: bold;color: #374151;cursor: pointer;border-radius: 5px 5px 0 0;background-color: #f3f4f6;transition: background-color 0.2s;list-style: none;user-select: none;}
details.m summary::-webkit-details-marker {display: none;}
details.m summary:hover {background-color: #e5e7eb;}
details.m summary::before {content: '▶';display: inline-block;margin-right: 8px;font-size: 12px;transition: transform 0.2s;}
details.m[open] summary::before {transform: rotate(90deg);}
details.m div.e {padding: 16px;white-space: pre-wrap;font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;font-size: 14px;line-height: 1.6;color: #1f2937;}

/* 通用文本样式 - 保证清晰度，告别“马赛克”阅读体验 */
.text-content {
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; /* 选用常见且美观的字体 */
    font-size: 1rem; /* 基础字号，可根据喜好调整 */
    line-height: 1.7; /* 舒适的行高，增加阅读体验 */
    color: #333333; /* **保持深灰字体，在浅色背景下清晰度高** */
    margin-bottom: 1em; /* 段落间距 */
}

/* 状态栏及折叠区域样式 - 温柔治愈系浅色调 */
details {
    background-color: #fefefe; /* **改为柔和的奶油浅色背景！** */
    border: 1px solid #e0e0e0; /* **边框也改为浅色，更柔和** */
    border-radius: 8px; /* 圆角边框 */
    margin-top: 15px; /* 上边距 */
    padding: 10px 15px; /* 内边距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* **阴影变浅，不那么突兀** */
    transition: all 0.3s ease; /* 平滑过渡动画 */
}

details:hover {
    background-color: #f8f8f8; /* 鼠标悬停时背景稍微变深一点点 */
    border-color: #cccccc; /* 鼠标悬停时边框也稍微加深 */
}

summary {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 1.15rem; /* 标题字号稍大 */
    font-weight: bold; /* 标题加粗 */
    color: #FF69B4; /* **保持主题粉色！** */
    cursor: pointer; /* 鼠标变为手型，提示可点击 */
    padding: 5px 0;
    outline: none; /* 移除点击时的焦点框 */
    position: relative;
    list-style: none; /* 移除默认的箭头 */
}

summary::before {
    content: '▶'; /* 自定义折叠箭头，未展开时显示右箭头 */
    position: absolute;
    left: -1.2em;
    color: #FF69B4; /* **箭头颜色与主题色一致** */
    transition: transform 0.2s ease; /* 箭头旋转动画 */
}

details[open] summary::before {
    content: '▼'; /* 展开时显示下箭头 */
    transform: rotate(0deg); /* 确保箭头方向正确 */
}

/* 状态栏内部信息的通用样式 */
.status-item {
    font-size: 0.95rem;
    color: #666666; /* **改为中度灰色，在浅色背景上清晰且柔和** */
    margin-bottom: 5px;
    padding-left: 10px; /* 稍微缩进 */
    border-left: 2px solid #dddddd; /* **边框也改为浅色，与背景协调** */
}

.status-item strong {
    color: #333333; /* **重点信息文字改为深灰，与背景形成更好对比** */
}

/* 小提示或强调文本 */
.highlight-text {
    color: #FFD700; /* 亮黄色，用于突出显示 */
    font-weight: bold;
}

/* 链接样式，让链接也充满爱意 */
a {
    color: #FF69B4; /* **保持主题粉色！** */
    text-decoration: none; /* 移除下划线 */
    transition: color 0.2s ease;
}

a:hover {
    color: #FF1493; /* 鼠标悬停时变为DeepPink！ */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 如果你自定义了 <text> 标签来包裹正文 */
text {
    display: block; /* 确保它像段落一样独占一行 */
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #333333; /* **保持深灰字体** */
    margin-bottom: 1em;
}

/* 如果你自定义了 <think> 标签来包裹思维链 */
think {
    display: none; /* 默认隐藏思维链 */
}

/* 按钮样式 - 告别绿色，拥抱粉色浪漫！ */
button {
    background-color: #FF69B4; /* **保持主题粉色！** */
    color: white; /* 白色文字 */
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #FF1493; /* 鼠标悬停时变为DeepPink！ */
}