/* --- 羊皮卷主题聊天框 (已适配 Rili 平台) --- */

/* 1. 隐藏顶部可能存在的颜色装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 2. 统一美化所有聊天框 (输入与输出气泡主体) */
.is-user > div.border,
.is-assistant > div.border {
    /* 使用渐变模拟羊皮卷不均匀的泛黄质感 */
    background: radial-gradient(circle, #fdf4d8, #f5e7c3) !important;
    /* 添加深棕色边框，模拟卷轴边缘 */
    border: 2px solid #8c6f4c !important;
    /* 增加圆角，使其更像卷起的纸张 */
    border-radius: 12px !important;
    /* 添加环境阴影，营造立体感 */
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(210, 180, 140, 0.4) !important;
    /* 确保内部内容不会紧贴边缘 */
    padding: 16px !important;
    transition: all 0.3s ease-in-out !important;
}

/* 鼠标悬停时，增加轻微的浮动和光晕效果 */
.is-user > div.border:hover,
.is-assistant > div.border:hover {
    transform: translateY(-2px) !important;
    box-shadow: 5px 5px 18px rgba(0, 0, 0, 0.35), inset 0 0 10px rgba(210, 180, 140, 0.5) !important;
}

/* 3. 美化聊天框内的主要文本内容，确保可读性 */
.rili-markdown-renderer {
    /* 设置为深棕色，模拟墨水颜色，确保高对比度 */
    color: #4a3728 !important;
    /* 使用更具复古感的衬线字体 */
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    /* 绝对禁止任何文本阴影，保证最高可读性 */
    text-shadow: none !important;
    line-height: 1.7 !important;
}

/* 4. 美化底部的附加元素（按钮、模型名称、Token消耗） */
.group .text-xs.font-mono.text-muted-foreground,
.group-hover\:opacity-100 button {
    /* 使用稍浅的棕色，与主文本区分，但仍在羊皮卷背景上保持清晰 */
    color: #7a5c48 !important;
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    transition: all 0.2s ease !important;
    opacity: 0.85 !important;
}

/* 调整底部操作按钮的图标颜色以适配主题 */
.group-hover\:opacity-100 button svg {
    stroke: #7a5c48 !important;
    transition: stroke 0.2s ease !important;
}

/* 鼠标悬停在按钮上时颜色加深 */
.group-hover\:opacity-100 button:hover {
    color: #4a3728 !important;
    opacity: 1 !important;
    background-color: rgba(140, 111, 76, 0.1) !important;
}

.group-hover\:opacity-100 button:hover svg {
    stroke: #4a3728 !important;
}

/* 5. 适配加载中动画的三个圆点颜色 */
.bg-primary.rounded-full {
    background-color: #8c6f4c !important;
}

/* --- 主题定制区 --- */
:root {
    --book-font: "Georgia", "Times New Roman", serif !important;
    --parchment-bg: #fdfaf3 !important; /* 羊皮纸主背景色 */
    --parchment-light-bg: #f5f1e8 !important; /* 羊皮纸-亮色/悬停 */
    --ink-text: #3d2b1f !important; /* 墨水-深褐色-主文字 */
    --ink-light-text: #8a7b66 !important; /* 墨水-浅色-次要文字/占位符 */
    --accent-color: #a08c6c !important; /* 强调色-用于选中项 */
    --accent-text-color: #fdfaf3 !important; /* 强调色上的文字 */
    --border-color: #dcd3c4 !important; /* 边框线颜色 */
    --star-color: #b58840 !important; /* 评级星星颜色 */
    --parchment-texture: none !important; /* 可选的纸张纹理 */
}
/* --- --- --- */

/* --- 全局字体与选中效果 --- */
::selection {
    background-color: var(--accent-color) !important;
    color: var(--accent-text-color) !important;
}

/* --- 泛化兼容区 (用于适配Rili平台的其他外围UI结构) --- */

/* 顶部栏: 书籍封面/顶边 */
header,
.sticky.top-0 {
    background-color: var(--parchment-light-bg) !important;
    background-image: var(--parchment-texture) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(61, 43, 31, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* 顶部栏文字 */
header *,
.sticky.top-0 * {
    color: var(--ink-text) !important;
    font-family: var(--book-font) !important;
}

/* --- 底部输入栏: 写字台 --- */
.bg-gradient-to-t {
    background: var(--parchment-light-bg) !important;
    background-image: var(--parchment-texture) !important;
}

/* 输入框外层容器 */
div:has(> textarea),
.bg-background {
    background-color: var(--parchment-bg) !important;
    border-color: var(--border-color) !important;
    transition: all 0.3s ease !important;
}

div:has(> textarea):focus-within {
    box-shadow: 0 0 0 2px var(--accent-color), 0 1px 3px rgba(61, 43, 31, 0.08) inset !important;
    border-color: var(--accent-color) !important;
}

/* 主输入框本体 */
textarea {
    font-family: var(--book-font) !important;
    color: var(--ink-text) !important;
    background-color: transparent !important;
}

textarea::placeholder {
    color: var(--ink-light-text) !important;
    font-style: italic !important;
    font-family: var(--book-font) !important;
}

/* 侧边栏/评论区/其他卡片背景兼容 */
.bg-card {
    background-color: var(--parchment-bg) !important;
    background-image: var(--parchment-texture) !important;
    border-color: var(--border-color) !important;
}

.bg-card * {
    font-family: var(--book-font) !important;
}