/* ======================================================= */
/* 远古铭文 - 遗迹符文风 v1.0 (已适配 Rili 平台) */
/* 设计理念: 古老遗迹石刻 + 神秘符文 + 星辰与魔法 */
/* ======================================================= */

/* ======================================================= */
/* Part 0: 核心动画定义 */
/* ======================================================= */
/* 符文脉动 */
@keyframes rune-pulse {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 6px #3ec9a7); }
  50% { opacity: 1; filter: drop-shadow(0 0 14px #3ec9a7); }
}
/* 星尘飘动 */
@keyframes stardust-drift {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-5px) rotate(180deg); opacity: 0.6; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0.3; }
}
/* 魔法纹路流动 */
@keyframes arcane-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* 按钮魔力光晕 */
@keyframes button-arcane-glow {
  from { box-shadow: 0 0 5px rgba(62,201,167,0.4), inset 0 0 2px rgba(255,255,255,0.1); }
  to { box-shadow: 0 0 12px rgba(62,201,167,0.7), inset 0 0 4px rgba(255,255,255,0.15); }
}
/* 古老符文浮现 */
@keyframes ancient-emerge {
  0%, 100% { opacity: 0.12; transform: scale(1); }
  50% { opacity: 0.22; transform: scale(1.02); }
}
/* 魔法能量环 */
@keyframes energy-ring {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
}
/* 加载文字淡入 */
@keyframes oracle-reading {
  0% { opacity: 0; letter-spacing: 1px; }
  30% { opacity: 0; }
  60% { opacity: 1; letter-spacing: 3px; }
  100% { opacity: 0; letter-spacing: 5px; }
}
/* 星辰闪烁 */
@keyframes starlight-twinkle {
  0%, 100% { opacity: 0.3; }
  25% { opacity: 0.8; }
  50% { opacity: 0.4; }
  75% { opacity: 0.9; }
}

/* ======================================================= */
/* Part 1: 全局背景与环境 */
/* ======================================================= */
/* 全局背景：远古遗迹深渊 */
body, main, #root {
    background: 
        radial-gradient(ellipse at center top, rgba(62,201,167,0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 80%, rgba(45,212,191,0.04) 0%, transparent 35%),
        radial-gradient(ellipse at 80% 20%, rgba(74,212,172,0.03) 0%, transparent 30%),
        linear-gradient(180deg, #0a0f0d 0%, #0d1a14 40%, #0a1210 100%) !important;
    background-attachment: fixed !important;
}
/* 侧边栏背景：苔藓遗迹石壁 */
aside, .sidebar {
    background: 
        linear-gradient(to bottom, rgba(62,201,167,0.04), rgba(10,15,13,0.96)),
        #0b110f !important;
    backdrop-filter: blur(10px) !important;
    border-right: 1px solid rgba(62,201,167,0.25) !important;
    box-shadow: inset -4px 0 18px rgba(0,0,0,0.5) !important;
}
/* 滚动条样式：翡翠魔力 */
::-webkit-scrollbar {
    width: 9px !important;
}
::-webkit-scrollbar-track {
    background: #0a0f0d !important;
    border-radius: 5px !important;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3ec9a7, #2a8f77) !important;
    border-radius: 5px !important;
    border: 2px solid #0a0f0d !important;
}

/* ======================================================= */
/* Part 2: 对话终端（聊天框主体） */
/* ======================================================= */
/* 通用对话框：古老石板基础样式 */
.is-user > div:first-child,
.is-assistant > div:first-child {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    border-radius: 4px !important;
    padding: 26px 30px !important;
    margin: 30px 0 !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', 'Georgia', 'FangSong', '仿宋', serif !important;
    line-height: 1.95 !important;
    font-size: 16px !important;
}

/* AI对话气泡：远古神谕（符文石碑） */
.is-assistant > div:first-child {
    background: 
        linear-gradient(135deg, rgba(13,26,20,0.98) 0%, rgba(10,18,16,0.98) 100%),
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(62,201,167,0.015) 60px, rgba(62,201,167,0.015) 61px) !important;
    border: 1px solid rgba(62,201,167,0.35) !important;
    border-left: 4px solid #3ec9a7 !important;
    box-shadow: 
        0 0 28px rgba(62,201,167,0.08),
        0 8px 30px rgba(0,0,0,0.4),
        inset 0 0 50px rgba(62,201,167,0.02) !important;
}
/* AI框装饰：远古符文图腾（右上角） */
.is-assistant > div:first-child::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px !important;
    height: 38px !important;
    pointer-events: none;
    opacity: 0.35 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%233ec9a7' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%233ec9a7' stroke-width='1' opacity='0.6'/%3E%3Cpath d='M50 10 L50 25 M50 75 L50 90 M10 50 L25 50 M75 50 L90 50' stroke='%233ec9a7' stroke-width='2'/%3E%3Cpath d='M26 26 L35 35 M65 35 L74 26 M35 65 L26 74 M74 74 L65 65' stroke='%233ec9a7' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%233ec9a7' opacity='0.4'/%3E%3C/svg%3E");
    background-size: contain;
    animation: rune-pulse 3.5s ease-in-out infinite !important;
}
/* AI框装饰：星辰角饰（左上角） */
.is-assistant > div:first-child::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 45px !important;
    height: 45px !important;
    pointer-events: none;
    opacity: 0.18 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L90 0 L90 10 L10 10 L10 90 L0 90 Z' fill='%233ec9a7'/%3E%3Ccircle cx='25' cy='25' r='3' fill='%233ec9a7' opacity='0.8'/%3E%3Ccircle cx='40' cy='15' r='2' fill='%233ec9a7' opacity='0.6'/%3E%3Ccircle cx='15' cy='40' r='2' fill='%233ec9a7' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    z-index: -1;
}

/* 用户对话气泡：旅者手记 */
.is-user > div:first-child {
    background: 
        linear-gradient(135deg, rgba(20,28,25,0.98) 0%, rgba(15,22,20,0.98) 100%) !important;
    border: 1px solid rgba(160,175,165,0.22) !important;
    border-right: 4px solid rgba(160,175,165,0.45) !important;
    box-shadow: 
        0 8px 28px rgba(0,0,0,0.35),
        inset 0 0 35px rgba(255,255,255,0.015) !important;
}
/* 用户框装饰：星尘符号（左下角） */
.is-user > div:first-child::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 24px !important;
    height: 24px !important;
    pointer-events: none;
    opacity: 0.14 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L53 40 L88 50 L53 60 L50 95 L47 60 L12 50 L47 40 Z' fill='%23a0afa5'/%3E%3Ccircle cx='50' cy='50' r='6' fill='%23a0afa5' opacity='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    animation: stardust-drift 5s ease-in-out infinite !important;
}
/* 用户框装饰：右下角角饰 */
.is-user > div:first-child::before {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 45px !important;
    height: 45px !important;
    pointer-events: none;
    opacity: 0.12 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 100 L10 100 L10 90 L90 90 L90 10 L100 10 Z' fill='%23a0afa5'/%3E%3C/svg%3E");
    background-size: contain;
    z-index: -1;
}

/* 文本内容样式 */
.rili-markdown-renderer {
    font-size: 16px !important;
    line-height: 1.95 !important;
    color: #dcd8c8 !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', 'Georgia', 'FangSong', '仿宋', serif !important;
    text-shadow: none !important;
    font-weight: 400 !important;
}
/* AI回答文本颜色：羊皮卷色 */
.is-assistant .rili-markdown-renderer {
    color: #e8e0d0 !important;
}

/* ======================================================= */
/* Part 3: 折叠信息栏（古老卷轴风格） */
/* ======================================================= */
.rili-markdown-renderer details {
    background: linear-gradient(135deg, rgba(13,26,20,0.96), rgba(10,18,16,0.96)) !important;
    border: 1px solid rgba(62,201,167,0.3) !important;
    border-radius: 4px !important;
    margin: 22px 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.3), inset 0 0 25px rgba(62,201,167,0.015) !important;
}
.rili-markdown-renderer details[open] {
    background: linear-gradient(135deg, rgba(16,30,24,0.98), rgba(12,22,18,0.98)) !important;
    border-color: rgba(62,201,167,0.55) !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.4), 0 0 18px rgba(62,201,167,0.06), inset 0 0 35px rgba(62,201,167,0.02) !important;
}
.rili-markdown-renderer details > summary {
    padding: 14px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: #3ec9a7 !important;
    list-style-type: '◆ ' !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', 'Georgia', 'FangSong', '仿宋', serif !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}
.rili-markdown-renderer details[open] > summary {
    color: #5ad9bc !important;
    border-bottom: 1px solid rgba(62,201,167,0.35) !important;
    text-shadow: 0 0 8px rgba(62,201,167,0.25) !important;
}
.rili-markdown-renderer details > *:not(summary) {
    padding: 15px 20px !important;
    color: #d5d0c2 !important;
}

/* ======================================================= */
/* Part 4: 底部附加元素 */
/* ======================================================= */
/* 底部操作按钮容器透明化 */
.group.flex .bg-muted.rounded.flex.p-0\.5 {
    background: transparent !important;
    padding: 0 !important;
}
/* 底部操作按钮：符文石按钮 */
.group.flex .flex.items-center.gap-1 button {
    background: linear-gradient(to bottom, rgba(62,201,167,0.12), rgba(62,201,167,0.06)) !important;
    color: #3ec9a7 !important;
    border-radius: 4px !important;
    padding: 6px !important;
    margin: 0 4px !important;
    width: auto !important;
    height: auto !important;
    box-shadow: 0 2px 7px rgba(0,0,0,0.28) !important;
    border: 1px solid rgba(62,201,167,0.35) !important;
    transition: all 0.25s ease !important;
}
.group.flex .flex.items-center.gap-1 button svg {
    stroke: #3ec9a7 !important;
    width: 15px !important;
    height: 15px !important;
}
.group.flex .flex.items-center.gap-1 button:hover {
    background: linear-gradient(to bottom, rgba(62,201,167,0.22), rgba(62,201,167,0.12)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(62,201,167,0.18) !important;
    animation: button-arcane-glow 0.5s ease-in-out infinite alternate !important;
}

/* Token消耗文本 */
.is-assistant .font-mono.text-muted-foreground {
    color: #3ec9a7 !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', 'Georgia', 'FangSong', '仿宋', serif !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-shadow: 0 0 4px rgba(62,201,167,0.25) !important;
    background: transparent !important;
}

/* ======================================================= */
/* Part 5: 输入框区域 */
/* ======================================================= */
/* 输入框容器：远古祭坛 */
.relative:has(textarea), [class*="chat-input"] {
    background: 
        linear-gradient(to top, rgba(10,15,13,0.98), rgba(13,20,17,0.95)) !important;
    border-top: 1px solid rgba(62,201,167,0.25) !important;
    box-shadow: 0 -5px 22px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(10px) !important;
}
/* 输入框本身 */
textarea {
    background: transparent !important;
    border: none !important;
    color: #dcd8c8 !important;
    font-size: 16px !important;
    font-family: 'Palatino Linotype', 'Book Antiqua', 'Georgia', 'FangSong', '仿宋', serif !important;
    text-shadow: none !important;
}
textarea::placeholder {
    color: #5a6a60 !important;
    opacity: 0.7 !important;
    font-style: italic !important;
}
textarea:focus {
    box-shadow: none !important;
    outline: none !important;
}
/* 发送按钮：魔力核心 */
button[aria-label="发送"], button:has(svg.lucide-send) {
    background: linear-gradient(135deg, #3ec9a7, #2a8f77) !important;
    box-shadow: 0 3px 10px rgba(62,201,167,0.25) !important;
    border-radius: 6px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
button[aria-label="发送"]:hover, button:has(svg.lucide-send):hover {
    background: linear-gradient(135deg, #5ad9bc, #3ec9a7) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 5px 18px rgba(62,201,167,0.45) !important;
}

/* ======================================================= */
/* Part 6: 加载动画（远古神谕解读） */
/* ======================================================= */
/* 隐藏默认加载动画圆点 */
.flex.gap-2.w-full.h-full.items-center.justify-center span {
    display: none !important;
}
/* 加载容器 */
.flex.gap-2.w-full.h-full.items-center.justify-center {
    position: relative !important;
    height: 38px !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 10px !important;
}
/* 远古符文能量环图标 */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%233ec9a7' stroke-width='3' stroke-dasharray='20 10'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%233ec9a7' stroke-width='2' opacity='0.6'/%3E%3Cpath d='M50 15 L50 30 M50 70 L50 85 M15 50 L30 50 M70 50 L85 50' stroke='%233ec9a7' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='10' fill='%233ec9a7' opacity='0.5'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%233ec9a7' opacity='0.8'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.9;
    animation: stardust-drift 3s linear infinite, energy-ring 2.5s ease-in-out infinite;
    z-index: 2;
}
/* 加载文本：远古神谕解读 */
.flex.gap-2.w-full.h-full.items-center.justify-center::after {
    content: '神谕解读中...';
    position: absolute;
    top: 50%;
    left: 46px;
    transform: translateY(-50%);
    font-family: 'Palatino Linotype', 'Book Antiqua', 'Georgia', 'FangSong', '仿宋', serif !important;
    font-size: 16px !important;
    color: #3ec9a7 !important;
    font-weight: 500 !important;
    opacity: 0;
    animation: oracle-reading 2.8s ease-out infinite;
    z-index: 1;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(62,201,167,0.35) !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .is-user > div:first-child,
    .is-assistant > div:first-child {
        padding: 20px 22px !important;
        margin: 22px 0 !important;
        font-size: 15px !important;
    }
    .rili-markdown-renderer {
        font-size: 15px !important;
    }
    .flex.gap-2.w-full.h-full.items-center.justify-center::before {
        width: 22px;
        height: 22px;
        left: 12px;
    }
    .flex.gap-2.w-full.h-full.items-center.justify-center::after {
        font-size: 14px !important;
        left: 40px;
    }
}

/* ======================================================= */
/* Part 7: 自定义HTML结构美化（保留用户原有设定） */
/* ======================================================= */
.era-terminal{font-family:'Segoe UI',sans-serif;background:linear-gradient(135deg,#1a1c2e 0%,#2d3154 100%);border-radius:12px;padding:16px;color:#e0e0e0;margin:8px 0}
.era-header{background:linear-gradient(90deg,#4a3f6b,#2d5a7b);border-radius:8px;padding:12px;margin-bottom:12px;text-align:center;border-left:4px solid #ffd700}
.era-header h3{margin:0;color:#ffd700;font-size:1.1em}
.era-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.era-stat{background:rgba(0,0,0,0.3);padding:4px 10px;border-radius:4px;font-size:0.85em}
.research-panel{background:rgba(0,0,0,0.25);border-radius:8px;padding:12px;margin:10px 0}
.panel-science{border-left:3px solid #00bcd4}
.panel-magic{border-left:3px solid #ab47bc}
.panel-title{font-weight:bold;font-size:1em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.panel-title.sci{color:#00bcd4}
.panel-title.mag{color:#ab47bc}
.current-research{background:rgba(255,255,255,0.05);border-radius:6px;padding:10px;margin-bottom:10px}
.research-name{font-weight:bold;color:#fff;font-size:0.95em}
.progress-bar-outer{background:#1a1a2e;border-radius:4px;height:14px;overflow:hidden;margin:8px 0}
.progress-bar-inner-sci{background:linear-gradient(90deg,#00bcd4,#26c6da);height:100%;border-radius:4px;transition:width 0.3s}
.progress-bar-inner-mag{background:linear-gradient(90deg,#ab47bc,#ce93d8);height:100%;border-radius:4px;transition:width 0.3s}
.progress-text{font-size:0.8em;color:#aaa;display:flex;justify-content:space-between}
.eureka{font-size:0.8em;padding:4px 8px;border-radius:4px;margin-top:6px;display:inline-block}
.eureka-off{background:rgba(255,193,7,0.15);color:#ffc107;border:1px dashed #ffc107}
.eureka-on{background:rgba(76,175,80,0.2);color:#4caf50;border:1px solid #4caf50}
.option-table{width:100%;border-collapse:collapse;font-size:0.85em;margin-top:8px}
.option-table th{background:rgba(255,255,255,0.1);padding:6px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.1)}
.option-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,0.05)}
.option-table tr:hover{background:rgba(255,255,255,0.05)}
.status-tag{padding:2px 6px;border-radius:3px;font-size:0.75em}
.tag-ready{background:#4caf50;color:#fff}
.tag-locked{background:#616161;color:#ccc}
.archive-section{margin-top:12px}
.archive-era{background:rgba(255,255,255,0.05);border-radius:6px;padding:8px 12px;margin:6px 0;font-size:0.85em}
.archive-era-title{color:#ffd700;font-weight:bold;margin-bottom:4px}
.archive-list{color:#aaa;line-height:1.6}