/* ============================================
   ✦ 星河漫途 - Rili平台适配版 ✦
   ============================================ */

/* ============================================
   1. 全局隐藏与重置
   ============================================ */

/* --- 隐藏默认加载动画 --- */
.flex.gap-2.w-full.h-full.items-center.justify-center span.bg-primary.rounded-full {
    display: none !important;
}

/* --- 隐藏思维链（如果输出了 <think> 标签） --- */
.rili-markdown-renderer think {
    display: none !important;
}

/* ============================================
   2. 聊天框主体
   ============================================ */

/* --- 统一聊天框主体（用户输入框 + AI回复框） --- */
.group-\[\.is-user\]\:bg-secondary.group-\[\.is-user\]\:px-4.group-\[\.is-user\]\:py-3,
.group-\[\.is-assistant\]\:bg-card.group-\[\.is-assistant\]\:px-4.group-\[\.is-assistant\]\:py-3 {
    background: linear-gradient(
        135deg,
        rgba(11, 14, 30, 0.92) 0%,
        rgba(26, 16, 64, 0.88) 50%,
        rgba(13, 27, 42, 0.92) 100%
    ) !important;
    border: 1px solid rgba(232, 197, 71, 0.15) !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(232, 197, 71, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    padding: 16px !important;
    transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
    position: relative !important;
}

/* --- 聊天框悬停效果 --- */
.group-\[\.is-user\]\:bg-secondary:hover,
.group-\[\.is-assistant\]\:bg-card:hover {
    border-color: rgba(232, 197, 71, 0.35) !important;
    box-shadow:
        0 6px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(167, 139, 250, 0.08),
        0 0 2px rgba(232, 197, 71, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* --- 星光背景动效 (::before) --- */
.group-\[\.is-user\]\:bg-secondary::before,
.group-\[\.is-assistant\]\:bg-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    z-index: 0 !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Ccircle cx='45' cy='30' r='1.2' fill='%23fff'%3E%3Canimate attributeName='opacity' values='0.08;0.7;0.08' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='150' cy='85' r='0.8' fill='%23e8c547'%3E%3Canimate attributeName='opacity' values='0.05;0.55;0.05' dur='3s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='280' cy='45' r='1' fill='%23a78bfa'%3E%3Canimate attributeName='opacity' values='0.06;0.6;0.06' dur='3.5s' begin='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='400' cy='75' r='0.7' fill='%2364b5f6'%3E%3Canimate attributeName='opacity' values='0.1;0.8;0.1' dur='2.8s' begin='0.3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='520' cy='28' r='1.1' fill='%23fff'%3E%3Canimate attributeName='opacity' values='0.05;0.6;0.05' dur='5s' begin='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='95' cy='200' r='0.9' fill='%23e8c547'%3E%3Canimate attributeName='opacity' values='0.08;0.65;0.08' dur='4.2s' begin='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='350' cy='250' r='1.3' fill='%23a78bfa'%3E%3Canimate attributeName='opacity' values='0.04;0.45;0.04' dur='5.5s' begin='1.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='490' cy='310' r='0.8' fill='%2364b5f6'%3E%3Canimate attributeName='opacity' values='0.06;0.55;0.06' dur='3.6s' begin='2.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='220' cy='340' r='0.6' fill='%23fff'%3E%3Canimate attributeName='opacity' values='0.1;0.7;0.1' dur='3.2s' begin='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='560' cy='180' r='0.7' fill='%23e8c547'%3E%3Canimate attributeName='opacity' values='0.05;0.5;0.05' dur='4.8s' begin='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* --- 流星动效 (::after) --- */
.group-\[\.is-user\]\:bg-secondary::after,
.group-\[\.is-assistant\]\:bg-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px !important;
    z-index: 0 !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cline x1='0' y1='0' x2='35' y2='18' stroke='%23e8c547' stroke-width='1.2' stroke-linecap='round' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.7;0' dur='5s' begin='2s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='80,40;480,240' dur='5s' begin='2s' repeatCount='indefinite'/%3E%3C/line%3E%3Cline x1='0' y1='0' x2='25' y2='12' stroke='%23a78bfa' stroke-width='0.8' stroke-linecap='round' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.5;0' dur='7s' begin='6s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='300,15;560,145' dur='7s' begin='6s' repeatCount='indefinite'/%3E%3C/line%3E%3Cline x1='0' y1='0' x2='30' y2='15' stroke='%2364b5f6' stroke-width='0.6' stroke-linecap='round' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.4;0' dur='9s' begin='11s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='150,60;520,280' dur='9s' begin='11s' repeatCount='indefinite'/%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* --- 仅用户输入框左侧蓝色边框 --- */
.is-user .group-\[\.is-user\]\:bg-secondary {
    border-left: 2px solid rgba(100, 181, 246, 0.25) !important;
}

/* ============================================
   3. 正文文字与排版
   ============================================ */

/* --- 正文文字 --- */
.rili-markdown-renderer {
    color: #e8e6e3 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    font-family: "Noto Serif SC", "Source Han Serif CN", Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
    letter-spacing: 0.3px !important;
}

/* 段落块 */
.rili-markdown-renderer text {
    display: block !important;
}

/* 旁白/叙事 */
.rili-markdown-renderer .ls-narr {
    color: #d1cfc8 !important;
    text-indent: 2em !important;
    margin: 4px 0 !important;
}

/* 对话 */
.rili-markdown-renderer .ls-dial {
    color: #f0eae0 !important;
    padding-left: 1.5em !important;
    border-left: 2px solid rgba(232, 197, 71, 0.25) !important;
    margin: 6px 0 !important;
}

/* 角色名 */
.rili-markdown-renderer .ls-name {
    color: #e8c547 !important;
    font-weight: 700 !important;
}

/* 心理活动 */
.rili-markdown-renderer .ls-think {
    color: #a78bfa !important;
    font-style: italic !important;
    padding-left: 1.5em !important;
    border-left: 2px solid rgba(167, 139, 250, 0.2) !important;
    margin: 6px 0 !important;
}

/* 环境描写 */
.rili-markdown-renderer .ls-env {
    color: #7eb8c9 !important;
    margin: 6px 0 !important;
}

/* 系统消息 */
.rili-markdown-renderer .ls-sys {
    color: #e8c547 !important;
    background: rgba(232, 197, 71, 0.06) !important;
    border: 1px solid rgba(232, 197, 71, 0.12) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 10px 0 !important;
    font-size: 13.5px !important;
}

/* 信息提示消息 */
.rili-markdown-renderer .ls-msg {
    color: #64b5f6 !important;
    background: rgba(100, 181, 246, 0.05) !important;
    border-left: 3px solid rgba(100, 181, 246, 0.4) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 8px 12px !important;
    margin: 8px 0 !important;
    font-size: 13.5px !important;
}

/* 发送者/来源标记 */
.rili-markdown-renderer .ls-sender {
    color: #9ca3af !important;
    font-size: 12px !important;
    opacity: 0.8 !important;
}

/* === 通用文字增强 === */
.rili-markdown-renderer strong {
    color: #f0eae0 !important;
    font-weight: 700 !important;
}

.rili-markdown-renderer em {
    color: #c4b5fd !important;
    font-style: italic !important;
}

.rili-markdown-renderer a {
    color: #64b5f6 !important;
    text-decoration: underline rgba(100, 181, 246, 0.3) !important;
    transition: color 0.2s ease !important;
}

.rili-markdown-renderer a:hover {
    color: #93c5fd !important;
}

.rili-markdown-renderer hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 197, 71, 0.3), transparent) !important;
    margin: 18px 0 !important;
}

.rili-markdown-renderer blockquote {
    border-left: 3px solid rgba(167, 139, 250, 0.4) !important;
    background: rgba(167, 139, 250, 0.04) !important;
    padding: 8px 14px !important;
    margin: 10px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #bfb8d0 !important;
    font-style: italic !important;
}

.rili-markdown-renderer ul,
.rili-markdown-renderer ol {
    padding-left: 1.6em !important;
    color: #d1cfc8 !important;
}

.rili-markdown-renderer li {
    margin: 3px 0 !important;
}

.rili-markdown-renderer li::marker {
    color: rgba(232, 197, 71, 0.5) !important;
}

/* ============================================
   4. 折叠块 (details/summary)
   ============================================ */

.rili-markdown-renderer details {
    background: linear-gradient(135deg, rgba(15, 18, 35, 0.85), rgba(25, 20, 55, 0.8)) !important;
    border: 1px solid rgba(232, 197, 71, 0.12) !important;
    border-left: 3px solid rgba(232, 197, 71, 0.5) !important;
    border-radius: 10px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.rili-markdown-renderer details:hover {
    border-color: rgba(232, 197, 71, 0.25) !important;
    box-shadow: 0 2px 16px rgba(232, 197, 71, 0.06) !important;
}

.rili-markdown-renderer details[open] {
    border-color: rgba(232, 197, 71, 0.3) !important;
}

.rili-markdown-renderer summary {
    padding: 10px 16px !important;
    cursor: pointer !important;
    color: #e8c547 !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 1px !important;
    list-style: none !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(90deg, rgba(232, 197, 71, 0.06), transparent) !important;
    transition: background 0.3s ease !important;
}

.rili-markdown-renderer summary::-webkit-details-marker {
    display: none !important;
}

.rili-markdown-renderer summary::before {
    content: "◆" !important;
    font-size: 10px !important;
    color: rgba(232, 197, 71, 0.6) !important;
    transition: transform 0.3s ease !important;
}

.rili-markdown-renderer details[open] > summary::before {
    transform: rotate(45deg) !important;
    color: #e8c547 !important;
}

.rili-markdown-renderer details[open] > summary {
    background: linear-gradient(90deg, rgba(232, 197, 71, 0.1), transparent) !important;
    border-bottom: 1px solid rgba(232, 197, 71, 0.1) !important;
}

/* 折叠块内部内容区域 */
.rili-markdown-renderer details > :not(summary) {
    padding: 0 14px !important;
}

/* 嵌套折叠块 */
.rili-markdown-renderer details details {
    background: rgba(167, 139, 250, 0.05) !important;
    border-color: rgba(167, 139, 250, 0.15) !important;
    border-left-color: rgba(167, 139, 250, 0.4) !important;
    margin: 8px 4px !important;
}

.rili-markdown-renderer details details summary {
    color: #a78bfa !important;
    font-size: 13.5px !important;
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.06), transparent) !important;
}

.rili-markdown-renderer details details summary::before {
    color: rgba(167, 139, 250, 0.5) !important;
}

/* ============================================
   5. 代码块与表格
   ============================================ */

/* === 代码块 === */
.rili-markdown-renderer pre {
    background: linear-gradient(135deg, #0a0c18, #12102a) !important;
    border: 1px solid rgba(100, 181, 246, 0.12) !important;
    border-left: 3px solid rgba(100, 181, 246, 0.4) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    overflow-x: auto !important;
    margin: 12px 0 !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

.rili-markdown-renderer pre code {
    color: #c9d1d9 !important;
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    background: transparent !important;
    padding: 0 !important;
}

.rili-markdown-renderer :not(pre) > code {
    background: rgba(100, 181, 246, 0.08) !important;
    color: #93c5fd !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
    font-size: 0.9em !important;
    border: 1px solid rgba(100, 181, 246, 0.1) !important;
}

/* === 表格 === */
.rili-markdown-renderer table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid rgba(232, 197, 71, 0.12) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    font-size: 13.5px !important;
}

.rili-markdown-renderer th {
    background: linear-gradient(135deg, rgba(232, 197, 71, 0.1), rgba(167, 139, 250, 0.08)) !important;
    color: #e8c547 !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(232, 197, 71, 0.15) !important;
    letter-spacing: 0.5px !important;
}

.rili-markdown-renderer td {
    padding: 8px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #d1cfc8 !important;
}

.rili-markdown-renderer tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.015) !important;
}

.rili-markdown-renderer tr:hover td {
    background: rgba(232, 197, 71, 0.04) !important;
    transition: background 0.2s ease !important;
}

/* ============================================
   6. 底部操作按钮与状态
   ============================================ */

/* --- 底部操作按钮区域 --- */
.bg-muted.rounded.flex.p-0\.5 {
    background: rgba(15, 18, 35, 0.8) !important;
    border: 1px solid rgba(232, 197, 71, 0.1) !important;
    border-radius: 8px !important;
}

/* --- 操作按钮 --- */
.bg-muted.rounded.flex.p-0\.5 button {
    color: #9ca3af !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
}

.bg-muted.rounded.flex.p-0\.5 button:hover {
    color: #e8c547 !important;
    transform: translateY(-1px) !important;
    background: rgba(232, 197, 71, 0.08) !important;
}

.bg-muted.rounded.flex.p-0\.5 button svg {
    stroke: currentColor !important;
}

/* --- Token消耗显示 --- */
.text-xs.font-mono.text-muted-foreground {
    color: #6b7280 !important;
}

.text-xs.font-mono.text-muted-foreground span.bg-blue-500\/60 {
    background: rgba(100, 181, 246, 0.6) !important;
}

.text-xs.font-mono.text-muted-foreground span.bg-green-500\/60 {
    background: rgba(232, 197, 71, 0.6) !important;
}

/* ============================================
   7. 自定义加载动画
   ============================================ */

/* --- 加载动画容器 --- */
.flex.gap-2.w-full.h-full.items-center.justify-center {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    margin: 12px auto !important;
}

/* --- 加载动画: 脉冲光环 (::before) --- */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%23e8c547' stroke-width='1.5' opacity='0'%3E%3Canimate attributeName='r' values='4;20' dur='1.6s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.8;0' dur='1.6s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-width' values='2;0.3' dur='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%23a78bfa' stroke-width='1.2' opacity='0'%3E%3Canimate attributeName='r' values='4;20' dur='1.6s' begin='0.55s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.6;0' dur='1.6s' begin='0.55s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-width' values='1.5;0.2' dur='1.6s' begin='0.55s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%2364b5f6' stroke-width='1' opacity='0'%3E%3Canimate attributeName='r' values='4;20' dur='1.6s' begin='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.5;0' dur='1.6s' begin='1.1s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-width' values='1.2;0.15' dur='1.6s' begin='1.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* --- 加载动画: 中心光点 (::after) --- */
.flex.gap-2.w-full.h-full.items-center.justify-center::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='3' fill='%23e8c547'%3E%3Canimate attributeName='r' values='2;4.5;2' dur='1.6s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%23e8c547' stroke-width='0.3' opacity='0.2'%3E%3Canimate attributeName='opacity' values='0.1;0.3;0.1' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ============================================
   8. 页面整体背景
   ============================================ */

/* --- 聊天页面整体容器背景 --- */
.w-full.max-w-2xl.mx-auto {
    /* 保持透明让页面背景透出 */
}

/* --- 消息行外层 --- */
.w-full.h-full.flex.group.scroll-mt-\[96px\] {
    background: transparent !important;
}

/* --- 内容区z-index确保在伪元素上方 --- */
.space-y-3.max-w-\[100dvw\] {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================
   9. 响应式与无障碍
   ============================================ */

/* --- 移动端适配 --- */
@media (max-width: 480px) {
    .group-\[\.is-user\]\:bg-secondary,
    .group-\[\.is-assistant\]\:bg-card {
        border-radius: 10px !important;
        padding: 12px !important;
    }

    .rili-markdown-renderer {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .flex.gap-2.w-full.h-full.items-center.justify-center {
        width: 40px !important;
        height: 40px !important;
    }

    .flex.gap-2.w-full.h-full.items-center.justify-center::before,
    .flex.gap-2.w-full.h-full.items-center.justify-center::after {
        width: 40px !important;
        height: 40px !important;
    }
}

/* --- 低动效偏好 --- */
@media (prefers-reduced-motion: reduce) {
    .group-\[\.is-user\]\:bg-secondary::before,
    .group-\[\.is-assistant\]\:bg-card::before {
        opacity: 0.3 !important;
    }

    .group-\[\.is-user\]\:bg-secondary::after,
    .group-\[\.is-assistant\]\:bg-card::after {
        opacity: 0.15 !important;
    }
}

/* ============================================
   10. 边框muted覆盖
   ============================================ */

/* 覆盖默认的border-muted */
.border.border-muted {
    border-color: rgba(232, 197, 71, 0.15) !important;
}