/* ======================================== ⚔️ 江湖行 · 武侠水墨主题 v1.0 — 全局模块化整合 (第一部分) WUXIA × INK WASH UI 核心色彩 (水墨古风): - 背景: #F5F0E8 (宣纸黄 — 温润底色) - 面板: #FAF7F0 (素绢白 — 近白暖黄) - 主色调: #8B5E3C (檀木棕 — 核心视觉) - 强调色: #2D5016 (翠竹青 — 醒目点缀) - 装饰色: #D4A574 (琥珀金 — 柔和边界) - 文本: #1A0F00 (墨玉黑 — 确保高可读性) - 列表文本: #2C1810 (浓墨棕 — 物品/装备专用) - 危险: #8B0000 (朱砂赤 — 警报) - 辅助蓝: #4A6B7A (远山蓝 — 信息提示) - 辅助绿: #3D6B2E (松涛绿 — 成功/活力) ======================================== */ /* ============================================= * 1. 主题与全局定义 (Theme & Globals) * ============================================= */ /* --- 1.1. 核心动画 (Keyframes) --- */ @keyframes float-gentle { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.95; } 50% { transform: translateY(-3px) scale(1.01); opacity: 1; } } @keyframes ink-drift { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } @keyframes sword-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(139, 94, 60, 0.25); } 50% { box-shadow: 0 0 16px rgba(139, 94, 60, 0.55), 0 0 24px rgba(139, 94, 60, 0.3); } } @keyframes ink-glow { 0%, 100% { text-shadow: 0 0 4px #8B5E3C, 0 0 8px rgba(139, 94, 60, 0.4); } 50% { text-shadow: 0 0 8px #8B5E3C, 0 0 16px rgba(139, 94, 60, 0.7), 0 0 20px rgba(139, 94, 60, 0.3); } } @keyframes leaf-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes mist-fade { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.28; } } @keyframes scroll-reveal { 0% { transform: scaleY(0.94); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } } @keyframes gauge-shimmer { 0%, 100% { opacity: 0.75; text-shadow: 0 0 6px rgba(139, 94, 60, 0.3); } 50% { opacity: 1; text-shadow: 0 0 12px rgba(139, 94, 60, 0.6); } } @keyframes ribbon-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes cot-text-vanish { 0% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; visibility: hidden; height: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; } } @keyframes leaf-twirl { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes star-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.5; } } @keyframes qi-rise { 0% { transform: translateY(0); opacity: 0.8; } 100% { transform: translateY(-35px); opacity: 0; } } @keyframes jade-shimmer { 0%, 100% { box-shadow: 0 0 10px rgba(45, 80, 22, 0.2), inset 0 0 8px rgba(45, 80, 22, 0.1); } 50% { box-shadow: 0 0 20px rgba(45, 80, 22, 0.45), inset 0 0 14px rgba(45, 80, 22, 0.2); } } @keyframes panel-light-sweep { 0% { transform: translateX(-100%) skewX(-25deg); } 100% { transform: translateX(200%) skewX(-25deg); } } @keyframes header-flow-line { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes loading-text-breathe { 0%, 100% { opacity: 0.6; text-shadow: 0 0 6px rgba(139, 94, 60, 0.4); } 50% { opacity: 1; text-shadow: 0 0 14px rgba(139, 94, 60, 0.75); } } @keyframes jy-ink-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes k-petal-spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } @keyframes k-bar-shimmer { 0% { left: -100%; } 100% { left: 100%; } } @keyframes k-danger-pulse { 0%, 100% { border-color: rgba(139, 0, 0, 0.25) !important; box-shadow: inset 0 0 0 rgba(139, 0, 0, 0) !important; } 50% { border-color: rgba(139, 0, 0, 0.6) !important; box-shadow: inset 0 0 15px rgba(139, 0, 0, 0.15), 0 0 10px rgba(139, 0, 0, 0.2) !important; } } @keyframes k-fortune-pulse { 0%, 100% { border-color: rgba(212, 165, 116, 0.3) !important; box-shadow: inset 0 0 0 rgba(212, 165, 116, 0) !important; } 50% { border-color: rgba(139, 94, 60, 0.7) !important; box-shadow: inset 0 0 15px rgba(139, 94, 60, 0.2), 0 0 12px rgba(139, 94, 60, 0.25) !important; } } @keyframes star-twinkle { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } } @keyframes inv-item-glow { 0%, 100% { box-shadow: 0 0 6px rgba(139, 0, 0, 0.3) !important; } 50% { box-shadow: 0 0 12px rgba(139, 0, 0, 0.5), 0 0 20px rgba(139, 0, 0, 0.2) !important; } } @keyframes user-leaf-flicker { 0%, 100% { opacity: 0.8; transform: scale(1) translateY(0); } 25% { opacity: 0.9; transform: scale(1.05) translateY(-1px); } 50% { opacity: 0.75; transform: scale(0.98) translateY(1px); } 75% { opacity: 0.85; transform: scale(1.02) translateY(-0.5px); } } @keyframes user-ribbon-pulse { 0%, 100% { opacity: 0.65; transform: translateX(0) translateY(0); } 50% { opacity: 0.75; transform: translateX(3px) translateY(-2px); } } @keyframes leaf-fall-bg { 0% { transform: translateY(-10%) rotate(0deg); opacity: 0; } 10% { opacity: 0.15; } 90% { opacity: 0.15; } 100% { transform: translateY(110%) rotate(720deg); opacity: 0; } } @keyframes chuanqi-song-glow { 0%, 100% { box-shadow: 0 0 6px rgba(139,94,60,0.25); } 50% { box-shadow: 0 0 14px rgba(139,94,60,0.55), 0 0 24px rgba(139,94,60,0.20); } } /* --- 1.2. 品质颜色变量 --- */ * { --color-rumen: #6B5B4D; --color-zhongduan: #4A6B3D; --color-gaoduan: #4A6B7A; --color-zhuanye: #6B4A7A; --color-chuanqi: #8B5E3C; } /* ============================================= * 2. 系统核心界面 (System Core UI) * ============================================= */ /* --- 2.1. CoT 思维助手 — 水墨书法动态浮现版 --- */ cot { display: block; position: relative; width: 100%; aspect-ratio: 3/1; overflow: hidden; box-sizing: border-box; contain: size layout paint; font-size: 0; line-height: 0; letter-spacing: 0; } cot * { display: none !important; } cot::before { content: ""; display: block; width: 100%; height: 100%; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; animation: jy-ink-pulse 2.8s ease-in-out infinite; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cdefs%3E%3ClinearGradient id='paperGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F5F0E8'/%3E%3Cstop offset='1' stop-color='%23EDE5D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='inkGrad' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%231A0F00'/%3E%3Cstop offset='50%25' stop-color='%234A2C1B'/%3E%3Cstop offset='100%25' stop-color='%238B5E3C'/%3E%3C/linearGradient%3E%3ClinearGradient id='mtnGrad' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0%25' stop-color='%23C4B8A8' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23C4B8A8' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='inkBlur'%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='600' height='200' fill='url(%23paperGrad)'/%3E%3C!-- 远山剪影 --%3E%3Cpath d='M0,180 Q60,140 120,155 Q180,130 240,145 Q300,110 360,140 Q420,120 480,150 Q540,135 600,160 L600,200 L0,200Z' fill='url(%23mtnGrad)'/%3E%3Cpath d='M0,190 Q80,160 160,170 Q240,150 320,165 Q400,145 480,170 Q540,158 600,175 L600,200 L0,200Z' fill='%23C4B8A8' opacity='0.08'/%3E%3C!-- 飘落竹叶 — 左 --%3E%3Cg opacity='0.12'%3E%3Cpath d='M85,30 Q92,50 85,70 Q78,50 85,30Z' fill='%232D5016' transform='rotate(-20 85 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='-20 85 50' to='340 85 50' dur='25s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C!-- 飘落竹叶 — 右 --%3E%3Cg opacity='0.10'%3E%3Cpath d='M515,25 Q522,45 515,65 Q508,45 515,25Z' fill='%233D6B2E' transform='rotate(15 515 45)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='15 515 45' to='375 515 45' dur='20s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C!-- 墨点装饰 --%3E%3Ccircle cx='60' cy='40' r='2' fill='%231A0F00' opacity='0.06'/%3E%3Ccircle cx='540' cy='35' r='1.5' fill='%234A2C1B' opacity='0.05'/%3E%3Ccircle cx='150' cy='170' r='2.5' fill='%232D5016' opacity='0.04'/%3E%3Ccircle cx='450' cy='165' r='2' fill='%238B5E3C' opacity='0.05'/%3E%3C!-- 上下横纹 — 仿卷轴轴头 --%3E%3Crect x='40' y='14' width='520' height='2' rx='1' fill='%23D4A574' opacity='0.2'/%3E%3Crect x='40' y='184' width='520' height='2' rx='1' fill='%23D4A574' opacity='0.2'/%3E%3Ccircle cx='40' cy='15' r='3' fill='%238B5E3C' opacity='0.15'/%3E%3Ccircle cx='560' cy='15' r='3' fill='%238B5E3C' opacity='0.15'/%3E%3Ccircle cx='40' cy='185' r='3' fill='%23D4A574' opacity='0.12'/%3E%3Ccircle cx='560' cy='185' r='3' fill='%23D4A574' opacity='0.12'/%3E%3C!-- 主标题 — 水墨笔触动态浮现 --%3E%3Ctext x='300' y='88' text-anchor='middle' font-size='38' font-family='STKaiti, KaiTi, Georgia, serif' font-weight='bold' fill='none' stroke='url(%23inkGrad)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23inkBlur)'%3E%E7%A5%9E%E6%80%9D%E9%A9%B0%E9%AA%81%20%C2%B7%20%E6%B1%9F%E6%B9%96%E4%BB%BB%E6%88%91%E8%A1%8C%3Canimate attributeName='stroke-dasharray' from='0 2000' to='2000 0' dur='2.5s' begin='0.3s' fill='freeze'/%3E%3Canimate attributeName='opacity' from='0' to='1' dur='2s' begin='0.3s' fill='freeze'/%3E%3Canimate attributeName='stroke-width' values='1.2;1.8;1.2' dur='5s' begin='3s' repeatCount='indefinite'/%3E%3C/text%3E%3C!-- 墨色填充层 — 延迟出现形成「先勾勒后填墨」 --%3E%3Ctext x='300' y='88' text-anchor='middle' font-size='38' font-family='STKaiti, KaiTi, Georgia, serif' font-weight='bold' fill='%231A0F00' opacity='0'%3E%E7%A5%9E%E6%80%9D%E9%A9%B0%E9%AA%81%20%C2%B7%20%E6%B1%9F%E6%B9%96%E4%BB%BB%E6%88%91%E8%A1%8C%3Canimate attributeName='opacity' from='0' to='0.85' dur='1.5s' begin='2.5s' fill='freeze'/%3E%3C/text%3E%3C!-- 副标题 — 浮现 --%3E%3Ctext x='300' y='118' text-anchor='middle' font-size='13' font-family='SimSun, Songti SC, Georgia, serif' fill='%23555555' letter-spacing='4' opacity='0'%3E%E5%89%91%E8%83%86%E7%90%B4%E5%BF%83%20%E4%BE%A0%E9%AA%A8%E6%9F%94%E6%83%85%3Canimate attributeName='opacity' from='0' to='0.65' dur='1.5s' begin='3.5s' fill='freeze'/%3E%3Canimate attributeName='y' from='125' to='118' dur='1.5s' begin='3.5s' fill='freeze' calcMode='spline' keySplines='0.16 1 0.3 1'/%3E%3C/text%3E%3C!-- 进度条 — 墨迹流淌 --%3E%3Crect x='218' y='138' width='164' height='6' rx='3' fill='none' stroke='%23D4A574' stroke-width='0.6' opacity='0.35'/%3E%3Crect x='220' y='139.5' width='160' height='3' rx='1.5' fill='%23EDE5D8' opacity='0.4'/%3E%3Crect x='220' y='139.5' height='3' rx='1.5' fill='url(%23inkGrad)' opacity='0.45'%3E%3Canimate attributeName='width' values='0;160;0' dur='4.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Ctext x='206' y='145' font-size='7' font-family='Georgia, serif' fill='%238B5E3C' text-anchor='middle' opacity='0.5'%3E%E8%B5%B7%3C/text%3E%3Ctext x='394' y='145' font-size='7' font-family='Georgia, serif' fill='%238B5E3C' text-anchor='middle' opacity='0.5'%3E%E6%BB%A1%3C/text%3E%3C!-- 落款印章 — 右下角 --%3E%3Crect x='520' y='155' width='28' height='28' rx='3' fill='%238B0000' opacity='0.12'/%3E%3Ctext x='534' y='174' text-anchor='middle' font-size='14' font-family='STKaiti, KaiTi, serif' fill='%238B0000' opacity='0.18'%3E%E6%AD%A6%3C/text%3E%3C!-- 散落的「剑」字装饰 --%3E%3Ctext x='140' y='75' font-size='14' fill='%238B5E3C' opacity='0.06' font-family='STKaiti, KaiTi, serif'%3E%E5%89%91%3C/text%3E%3Ctext x='460' y='80' font-size='12' fill='%232D5016' opacity='0.05' font-family='STKaiti, KaiTi, serif'%3E%E9%A3%8E%3C/text%3E%3Ctext x='200' y='165' font-size='10' fill='%23D4A574' opacity='0.08' font-family='STKaiti, KaiTi, serif'%3E%E4%BA%91%3C/text%3E%3Ctext x='400' y='55' font-size='11' fill='%234A2C1B' opacity='0.05' font-family='STKaiti, KaiTi, serif'%3E%E6%B1%9F%3C/text%3E%3C/svg%3E"); } cot:has(postition[stop]), cot:has(+ postition[stop]), cot:has(~ postition[stop]) { animation: cot-text-vanish 800ms ease forwards; } cot:has(postition[stop])::before, cot:has(+ postition[stop])::before, cot:has(~ postition[stop])::before { animation-play-state: paused !important; opacity: 0; transition: opacity 0.6s ease; content: none !important; background: none !important; } /* --- 2.2. 载入动画 — 水墨太极版 --- */ .style_dot-flashing__8L91Q { display: none !important; } div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) { width: 100% !important; height: auto !important; min-height: 140px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; background: radial-gradient(circle, rgba(250,247,240,0.95) 0%, rgba(245,240,232,0.9) 100%) !important; border: 1px solid rgba(139, 94, 60, 0.15) !important; border-radius: 12px !important; backdrop-filter: blur(12px) !important; box-shadow: 0 6px 20px rgba(26,15,0,0.06), inset 0 0 30px rgba(255,255,255,0.7) !important; position: relative !important; overflow: hidden !important; } div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -55%) !important; width: 90px !important; height: 90px !important; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='tG' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23D4A574'/%3E%3Cstop offset='50%25' stop-color='%238B5E3C'/%3E%3Cstop offset='100%25' stop-color='%234A2C1B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- 太极阴阳旋转 --%3E%3Cg opacity='0.5'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='8s' repeatCount='indefinite'/%3E%3Cpath d='M50,10 A40,40 0 0,1 50,90 A20,20 0 0,0 50,50 A20,20 0 0,1 50,10Z' fill='%231A0F00' opacity='0.5'/%3E%3Cpath d='M50,10 A40,40 0 0,0 50,90 A20,20 0 0,1 50,50 A20,20 0 0,0 50,10Z' fill='%23D4A574' opacity='0.35'/%3E%3Ccircle cx='50' cy='30' r='4' fill='%23D4A574' opacity='0.4'/%3E%3Ccircle cx='50' cy='70' r='4' fill='%231A0F00' opacity='0.4'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%238B5E3C' stroke-width='0.8' opacity='0.2' stroke-dasharray='4 4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='-360 50 50' dur='20s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after { content: '⚔️ 神思驰骋中...' !important; position: absolute !important; bottom: 18px !important; left: 50% !important; transform: translateX(-50%) !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; font-size: 13px !important; font-weight: 700 !important; color: #4A2C1B !important; letter-spacing: 0.3em !important; animation: loading-text-breathe 2.5s ease-in-out infinite !important; text-shadow: 0 0 8px rgba(139,94,60,0.4) !important; } /* --- 2.3. 顶部导航栏 — 竹叶飘落版 --- */ .sticky.w-full.top-0.flex.items-center { background: linear-gradient(180deg, rgba(250,247,240,0.97) 0%, rgba(245,240,232,0.95) 50%, rgba(237,229,216,0.93) 100%) !important; border-bottom: none !important; box-shadow: 0 1px 0 rgba(139,94,60,0.12), 0 4px 24px rgba(26,15,0,0.06) !important; backdrop-filter: blur(20px) saturate(1.2) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2) !important; z-index: 19 !important; position: relative !important; overflow: hidden !important; min-height: 52px !important; } /* ── 竹叶飘落粒子层 — 8枚叶片 SVG 随风飘荡 ── */ .sticky.w-full.top-0.flex.items-center::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 56' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='lf1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%232D5016' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%233D6B2E' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3ClinearGradient id='lf2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%234A6B3D' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%238B7355' stop-opacity='0.25'/%3E%3C/linearGradient%3E%3ClinearGradient id='lf3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%236B8E5A' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='%23A08060' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- 叶片1 — 细竹叶 --%3E%3Cg%3E%3Cpath d='M0,-8 Q4,0 0,8 Q-4,0 0,-8Z' fill='url(%23lf1)'/%3E%3CanimateMotion dur='7.5s' repeatCount='indefinite' path='M80,-10 C100,8 120,24 95,48 C88,55 75,60 70,64'/%3E%3Canimate attributeName='opacity' values='0;0.55;0.4;0' dur='7.5s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;60;140;220;360' dur='7.5s' repeatCount='indefinite'/%3E%3C/g%3E%3C!-- 叶片2 --%3E%3Cg%3E%3Cpath d='M0,-7 Q3.5,0 0,7 Q-3.5,0 0,-7Z' fill='url(%23lf2)'/%3E%3CanimateMotion dur='9.5s' repeatCount='indefinite' path='M230,-12 C250,6 270,22 245,46 C235,54 220,58 210,62' begin='1.8s'/%3E%3Canimate attributeName='opacity' values='0;0.5;0.35;0' dur='9.5s' repeatCount='indefinite' begin='1.8s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='30;110;190;280;390' dur='9.5s' repeatCount='indefinite' begin='1.8s'/%3E%3C/g%3E%3C!-- 叶片3 — 较大 --%3E%3Cg%3E%3Cpath d='M0,-9 Q4.5,0 0,9 Q-4.5,0 0,-9Z' fill='url(%23lf1)'/%3E%3CanimateMotion dur='8.2s' repeatCount='indefinite' path='M400,-10 C385,10 415,28 390,50 C380,57 365,61 360,64' begin='0.6s'/%3E%3Canimate attributeName='opacity' values='0;0.5;0.35;0' dur='8.2s' repeatCount='indefinite' begin='0.6s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-20;70;160;250;340' dur='8.2s' repeatCount='indefinite' begin='0.6s'/%3E%3C/g%3E%3C!-- 叶片4 — 小叶 --%3E%3Cg%3E%3Cpath d='M0,-5.5 Q2.8,0 0,5.5 Q-2.8,0 0,-5.5Z' fill='url(%23lf3)'/%3E%3CanimateMotion dur='10.5s' repeatCount='indefinite' path='M560,-6 C575,10 590,26 575,46 C565,54 550,58 545,62' begin='3.2s'/%3E%3Canimate attributeName='opacity' values='0;0.45;0.3;0' dur='10.5s' repeatCount='indefinite' begin='3.2s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='50;140;230;320;410' dur='10.5s' repeatCount='indefinite' begin='3.2s'/%3E%3C/g%3E%3C!-- 叶片5 --%3E%3Cg%3E%3Cpath d='M0,-7.5 Q3.8,0 0,7.5 Q-3.8,0 0,-7.5Z' fill='url(%23lf2)'/%3E%3CanimateMotion dur='8.8s' repeatCount='indefinite' path='M700,-10 C720,5 715,22 695,44 C685,52 670,57 665,61' begin='2.2s'/%3E%3Canimate attributeName='opacity' values='0;0.5;0.35;0' dur='8.8s' repeatCount='indefinite' begin='2.2s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='10;100;200;300;370' dur='8.8s' repeatCount='indefinite' begin='2.2s'/%3E%3C/g%3E%3C!-- 叶片6 — 大虚化叶 --%3E%3Cg opacity='0.15'%3E%3Cpath d='M0,-12 Q6,0 0,12 Q-6,0 0,-12Z' fill='%232D5016'/%3E%3CanimateMotion dur='14s' repeatCount='indefinite' path='M150,-15 C180,6 165,28 145,50 C135,58 125,63 115,66' begin='4.5s'/%3E%3Canimate attributeName='opacity' values='0;0.15;0.1;0' dur='14s' repeatCount='indefinite' begin='4.5s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;45;90;135;180' dur='14s' repeatCount='indefinite' begin='4.5s'/%3E%3C/g%3E%3C!-- 叶片7 — 极小 --%3E%3Cg%3E%3Cpath d='M0,-4.5 Q2.2,0 0,4.5 Q-2.2,0 0,-4.5Z' fill='url(%23lf1)'/%3E%3CanimateMotion dur='5.5s' repeatCount='indefinite' path='M480,-5 C500,10 510,26 495,48 C490,54 480,58 475,60' begin='5.5s'/%3E%3Canimate attributeName='opacity' values='0;0.6;0.4;0' dur='5.5s' repeatCount='indefinite' begin='5.5s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;120;240;360' dur='5.5s' repeatCount='indefinite' begin='5.5s'/%3E%3C/g%3E%3C!-- 叶片8 --%3E%3Cg%3E%3Cpath d='M0,-6.5 Q3.2,0 0,6.5 Q-3.2,0 0,-6.5Z' fill='url(%23lf3)'/%3E%3CanimateMotion dur='11.5s' repeatCount='indefinite' path='M750,-8 C770,5 765,20 745,42 C735,50 725,56 715,60' begin='7s'/%3E%3Canimate attributeName='opacity' values='0;0.4;0.25;0' dur='11.5s' repeatCount='indefinite' begin='7s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='20;110;200;290;380' dur='11.5s' repeatCount='indefinite' begin='7s'/%3E%3C/g%3E%3C!-- 散字装饰 --%3E%3Ctext x='45' y='38' font-size='10' fill='%232D5016' opacity='0.06' font-family='STKaiti, KaiTi, serif'%3E%E5%89%91%3C/text%3E%3Ctext x='755' y='22' font-size='8' fill='%238B5E3C' opacity='0.06' font-family='STKaiti, KaiTi, serif'%3E%E9%A3%8E%3C/text%3E%3C/svg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } /* 底部水墨流光线 — 双层 */ .sticky.w-full.top-0.flex.items-center::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent 0%, rgba(212,165,116,0.35) 10%, rgba(139,94,60,0.6) 25%, rgba(212,165,116,0.7) 40%, rgba(74,44,27,0.5) 50%, rgba(212,165,116,0.7) 60%, rgba(139,94,60,0.6) 75%, rgba(212,165,116,0.35) 90%, transparent 100%) !important; background-size: 200% 100% !important; animation: header-flow-line 6s linear infinite !important; z-index: 10 !important; box-shadow: 0 0 6px rgba(139,94,60,0.25), 0 0 12px rgba(212,165,116,0.15) !important; } .sticky.w-full.top-0.flex.items-center > * { position: relative !important; z-index: 50 !important; } /* 模型选择器 */ #ai-model-selector .group { background: rgba(250,247,240,0.85) !important; border: 1px solid rgba(139,94,60,0.18) !important; border-left: 2px solid #8B5E3C !important; border-radius: 8px !important; padding: 0 12px !important; height: 2.0rem !important; transition: all 0.4s ease !important; box-shadow: 0 1px 6px rgba(26,15,0,0.06) !important; margin: 0 8px !important; } #ai-model-selector .group:hover { border-color: #4A2C1B !important; background: rgba(255,255,255,0.98) !important; box-shadow: 0 2px 12px rgba(74,44,27,0.15) !important; } #ai-model-selector .truncate { font-size: 13px !important; font-weight: 700 !important; color: #4A2C1B !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; letter-spacing: 1.5px !important; transition: color 0.4s ease !important; } #ai-model-selector .group:hover .truncate { color: #8B5E3C !important; } #ai-model-selector svg { color: #D4A574 !important; transition: all 0.4s ease !important; } #ai-model-selector .group:hover svg { color: #4A2C1B !important; transform: rotate(180deg) !important; } /* 标签按钮 */ .sticky.w-full.top-0.flex.items-center .inline-flex.items-center { background: rgba(250,247,240,0.75) !important; color: #4A2C1B !important; border: 1px solid rgba(139,94,60,0.18) !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; border-radius: 8px !important; padding: 4px 10px !important; box-shadow: 0 1px 4px rgba(26,15,0,0.06) !important; transition: all 0.4s ease !important; position: relative !important; overflow: hidden !important; } .sticky.w-full.top-0.flex.items-center .inline-flex.items-center::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(212,165,116,0.2), transparent) !important; transition: left 0.7s ease !important; } .sticky.w-full.top-0.flex.items-center .inline-flex.items-center:hover { background: rgba(255,255,255,0.95) !important; border-color: #8B5E3C !important; color: #8B5E3C !important; text-shadow: 0 0 8px rgba(139,94,60,0.25) !important; box-shadow: 0 2px 10px rgba(139,94,60,0.15) !important; } .sticky.w-full.top-0.flex.items-center .inline-flex.items-center:hover::before { left: 100% !important; } /* 设置按钮 */ #header-setting-button { border-radius: 50% !important; background: rgba(250,247,240,0.85) !important; border: 1px solid rgba(74,44,27,0.2) !important; transition: all 0.4s ease !important; } #header-setting-button:hover { border-color: #8B5E3C !important; background: rgba(139,94,60,0.08) !important; box-shadow: 0 0 15px rgba(139,94,60,0.2) !important; } #header-setting-button svg { color: #4A2C1B !important; transition: all 0.7s ease !important; } #header-setting-button:hover svg { color: #8B5E3C !important; transform: rotate(90deg) !important; } /* --- 2.4. 输入框与底部按钮 --- */ .p-\[5\.5px\].max-h-\[150px\] { background: rgba(250,247,240,0.95) !important; border: 1px solid rgba(139,94,60,0.18) !important; border-radius: 12px !important; box-shadow: 0 -4px 15px rgba(26,15,0,0.05); padding: 8px !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } #ai-chat-input { background: #FAF7F0 !important; border-radius: 10px !important; border: 1px solid rgba(139,94,60,0.2) !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; font-size: 15px !important; line-height: 1.5 !important; color: #1A0F00 !important; caret-color: #8B5E3C !important; padding: 10px 50px 10px 12px !important; height: auto !important; max-height: 150px !important; resize: none !important; outline: none !important; transition: all 0.4s ease; field-sizing: content !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; -webkit-appearance: none !important; appearance: none !important; -webkit-text-size-adjust: 100% !important; white-space: pre-wrap !important; word-break: break-word !important; box-shadow: inset 0 2px 8px rgba(139,94,60,0.03); } #ai-chat-input::placeholder { color: #D4A574 !important; opacity: 0.7; } #ai-chat-input:focus { border-color: #8B5E3C !important; box-shadow: 0 0 10px rgba(139,94,60,0.18), inset 0 2px 8px rgba(139,94,60,0.03) !important; background: #FFFFFF !important; } .p-\[5\.5px\].max-h-\[150px\] .flex.items-center.px-1 { background: rgba(139,94,60,0.06) !important; color: #4A2C1B !important; border-radius: 8px !important; border: 1px solid rgba(139,94,60,0.15) !important; } .p-\[5\.5px\].max-h-\[150px\] .mx-1 { background: rgba(139,94,60,0.12) !important; } /* ============================================================ * 🍃 竹叶发送按钮 — 水墨武侠版 * ============================================================ */ /* 动画 */ @keyframes leaf-btn-idle { 0%, 100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(-3px) rotate(3deg); } 70% { transform: translateY(-1px) rotate(-2deg); } } @keyframes leaf-btn-hover { 0% { transform: scale(1.08) rotate(-3deg); } 50% { transform: scale(1.13) rotate(5deg); } 100% { transform: scale(1.08) rotate(-3deg); } } @keyframes leaf-btn-press { 0% { transform: scale(1.08); } 35% { transform: scale(0.88); } 75% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes leaf-btn-ripple { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0.5; } 100% { transform: translate(-50%,-50%) scale(3); opacity: 0; } } @keyframes leaf-glow-pulse { 0%, 100% { box-shadow: 0 3px 14px rgba(45,80,22,0.3), 0 0 0 3px rgba(45,80,22,0.06), inset 0 1px 0 rgba(255,255,255,0.3); } 50% { box-shadow: 0 5px 22px rgba(45,80,22,0.48), 0 0 0 5px rgba(45,80,22,0.1), inset 0 1px 0 rgba(255,255,255,0.35); } } /* ── 按钮外壳 ── */ #ai-send-button { border-radius: 50% !important; width: 38px !important; height: 38px !important; padding: 0 !important; flex-shrink: 0 !important; position: relative !important; overflow: visible !important; /* 竹青渐变底盘 */ background: linear-gradient(145deg, #6B8E5A 0%, #3D6B2E 50%, #2D5016 100%) !important; border: 2px solid rgba(255,255,255,0.45) !important; box-shadow: 0 3px 14px rgba(45,80,22,0.3), 0 0 0 3px rgba(45,80,22,0.06), inset 0 1px 0 rgba(255,255,255,0.3) !important; animation: leaf-btn-idle 3.8s ease-in-out infinite, leaf-glow-pulse 3.8s ease-in-out infinite !important; transition: border-color 0.3s ease !important; color: transparent !important; cursor: pointer !important; } /* 隐藏原 SVG */ #ai-send-button svg { opacity: 0 !important; pointer-events: none !important; } /* ── ::before — 竹叶 SVG 图标 ── */ #ai-send-button::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 22px !important; height: 22px !important; pointer-events: none !important; z-index: 2 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='lg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='100%25' stop-color='%23E8F5E8' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- 主叶 — 上方飞叶 --%3E%3Cpath d='M12,2 Q17,8 14,14 Q10,10 12,2Z' fill='url(%23lg)' opacity='0.95'/%3E%3C!-- 副叶 — 右下 --%3E%3Cpath d='M15,10 Q20,14 18,20 Q14,16 15,10Z' fill='url(%23lg)' opacity='0.8'/%3E%3C!-- 茎脉 --%3E%3Cpath d='M12.5,4 Q13,9 16,15 Q15,18 14,20' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='0.8' stroke-linecap='round'/%3E%3C!-- 小叶点缀 --%3E%3Cpath d='M8,8 Q10,10 8,13 Q6,10 8,8Z' fill='url(%23lg)' opacity='0.55'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; transition: transform 0.3s ease, filter 0.3s ease !important; filter: drop-shadow(0 1px 2px rgba(20,40,10,0.3)) !important; } /* ── ::after — 涟漪层 ── */ #ai-send-button::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(107,142,90,0.3) 50%, transparent 70%) !important; transform: translate(-50%,-50%) scale(0) !important; opacity: 0 !important; pointer-events: none !important; z-index: 1 !important; transition: none !important; } /* ── Hover ── */ #ai-send-button:hover { background: linear-gradient(145deg, #5A7D49 0%, #2D5A1E 45%, #1A3F0E 100%) !important; border-color: rgba(255,255,255,0.65) !important; box-shadow: 0 6px 22px rgba(45,80,22,0.5), 0 0 0 5px rgba(45,80,22,0.12), inset 0 1px 0 rgba(255,255,255,0.4) !important; animation: leaf-btn-hover 1s ease-in-out infinite !important; } #ai-send-button:hover::before { transform: translate(-50%,-50%) scale(1.15) rotate(8deg) !important; filter: drop-shadow(0 2px 4px rgba(20,40,10,0.35)) brightness(1.05) !important; } /* ── Active (点击) ── */ #ai-send-button:active { animation: leaf-btn-press 0.38s cubic-bezier(0.36,0.07,0.19,0.97) forwards !important; background: linear-gradient(145deg, #3D6B2E 0%, #2D5016 50%, #1A3008 100%) !important; box-shadow: 0 1px 6px rgba(45,80,22,0.5), 0 0 0 6px rgba(45,80,22,0.15), inset 0 2px 5px rgba(20,40,10,0.25) !important; } #ai-send-button:active::after { animation: leaf-btn-ripple 0.48s ease-out forwards !important; } /* ── 减弱动效 ── */ @media (prefers-reduced-motion: reduce) { #ai-send-button { animation: none !important; } #ai-send-button:hover { animation: none !important; transform: scale(1.08) !important; } #ai-send-button:active { animation: none !important; transform: scale(0.94) !important; } #ai-send-button:active::after { animation: none !important; } } /* ── 手机端 ── */ @media (max-width: 768px) { #ai-send-button { width: 36px !important; height: 36px !important; animation: none !important; box-shadow: 0 2px 10px rgba(45,80,22,0.3), inset 0 1px 0 rgba(255,255,255,0.25) !important; } #ai-send-button::before { width: 18px !important; height: 18px !important; } #ai-send-button:hover { animation: none !important; transform: none !important; } #ai-send-button:active::after { animation: none !important; } } /* --- 底部栏整体 --- */ div[class*="absolute"][class*="bottom-0"] { background: linear-gradient(180deg, rgba(250,247,240,0.85) 0%, rgba(237,229,216,0.98) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(139,94,60,0.15); box-shadow: 0 -4px 15px rgba(26,15,0,0.05); color: #1A0F00; } div[class*="absolute"][class*="bottom-0"]::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: linear-gradient(90deg, transparent, rgba(139,94,60,0.35), transparent); animation: panel-light-sweep 7s ease-in-out infinite; animation-delay: 1.5s; opacity: 0.5; } div[class*="absolute"][class*="bottom-0"]::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='dotGrid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='0.6' fill='%238B5E3C' opacity='0.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23dotGrid)'/%3E%3C/svg%3E"); animation: ink-drift 100s linear infinite; opacity: 0.5; pointer-events: none; z-index: -1; } div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]) { background: #FAF7F0; border: 1px solid rgba(139,94,60,0.2); border-radius: 8px; color: #1A0F00; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; font-weight: 600; font-size: 14px; text-shadow: none; box-shadow: 0 2px 8px rgba(26,15,0,0.05); transition: all 0.3s ease; position: relative; overflow: hidden; } div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"])::before { content: ''; position: absolute; top: -15%; left: -170%; width: 50%; height: 130%; background: linear-gradient(90deg, transparent, rgba(212,165,116,0.2), transparent); transform: skewX(-30deg); transition: left 0.8s ease-in-out; } div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):hover { transform: translateY(-2px); color: #4A2C1B; background: #FFFFFF; border-color: #8B5E3C; box-shadow: 0 4px 12px rgba(139,94,60,0.12), 0 0 8px rgba(212,165,116,0.2); } div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):hover::before { left: 170%; } div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):active { transform: translateY(0); background: #EDE5D8; border-color: #8B5E3C; box-shadow: inset 0 0 6px rgba(139,94,60,0.12), 0 2px 6px rgba(26,15,0,0.05); transition-duration: 0.15s; } /* ============================================= * END OF PART 1 * 第一部分结束 — 包含: 主题定义 / 动画 / CoT / 载入 / 导航栏 / 输入框 / 发送按钮 * ============================================= */ /* ============================================= * ⚔️ 江湖行 · 武侠水墨主题 v1.1 — 第二部分 * WUXIA × INK WASH UI — PART 2 * 包含: 聊天/气泡 / 折叠面板 / 侧边栏 / 背包 / 追踪器 / * 选项按钮 / 文档 / 通讯 / 江湖传闻 / 系统覆盖 / 响应式 * ============================================= */ /* ============================================= * 3. 通用 UI 模块 * ============================================= */ /* --- 3.1. 聊天容器与气泡 --- */ .chat { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: #F5F0E8; border: 1px solid rgba(139,94,60,0.12); border-left: 3px solid #8B5E3C; border-right: 3px solid #4A2C1B; border-radius: 12px; margin: 16px 0; position: relative; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; box-shadow: 0 3px 15px rgba(26,15,0,0.04), inset 0 0 20px rgba(250,247,240,0.9); overflow: hidden; } .chat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cdefs%3E%3Cpattern id='inkBg' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='40' cy='40' r='1.2' fill='%238B5E3C' opacity='0.03'/%3E%3Ccircle cx='10' cy='10' r='0.8' fill='%23D4A574' opacity='0.04'/%3E%3Ccircle cx='70' cy='20' r='0.8' fill='%23D4A574' opacity='0.03'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='80' height='80' fill='url(%23inkBg)'/%3E%3C/svg%3E"); animation: ink-drift 30s linear infinite; opacity: 0.5; pointer-events: none; z-index: 0; will-change: background-position; } .chat::after { display: none !important; } .chat > * { position: relative; z-index: 1; } .bubble { max-width: 90%; padding: 10px 14px; position: relative; line-height: 1.6; word-wrap: break-word; border-radius: 12px; box-shadow: 0 2px 8px rgba(26,15,0,0.05); transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: visible; } .bubble:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,15,0,0.08); } .bubble.npc { background: rgba(255,255,255,0.95); border: 1px solid rgba(139,94,60,0.15); border-left: 3px solid #8B5E3C; color: #1A0F00; align-self: flex-start; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .bubble.npc::after { content: '⚔'; position: absolute; top: 6px; right: 8px; font-size: 10px; animation: ribbon-breathe 3s ease-in-out infinite; z-index: 2; } .bubble.npc .name { color: #4A2C1B; } .bubble.npc .name::before { color: #8B5E3C; animation: star-flash 3.5s steps(1, end) infinite; } .bubble.npc .msg { color: #1A0F00; } .bubble.user { background: rgba(255,255,255,0.95); border: 1px solid rgba(74,44,27,0.15); border-right: 3px solid #4A2C1B; color: #1A0F00; align-self: flex-end; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .bubble.user::after { content: '🍃'; position: absolute; top: 6px; left: 8px; font-size: 11px; color: #2D5016; animation: ribbon-breathe 3s ease-in-out infinite; z-index: 2; } .bubble.user .name { color: #4A2C1B; } .bubble.user .name::before { color: #2D5016; animation: star-flash 3.5s steps(1, end) infinite 0.3s; } .bubble.user .msg { color: #1A0F00; } .bubble .name { font-size: 0.8em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; display: block; position: relative; padding-left: 16px; z-index: 1; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; } .bubble .name::before { content: '▸'; position: absolute; left: 0; font-size: 1.1em; display: inline-block; } .bubble .msg { margin: 0; font-size: 0.95em; font-weight: 500; position: relative; z-index: 1; } /* --- 3.2. 通用内容容器 --- */ .styled-prose-container { font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; position: relative; z-index: 1; color: #1A0F00; } .styled-prose-container br { line-height: 1.4; } /* ============================================= * 气泡装饰补丁 — 武侠主题 * ============================================= */ .bg-gray-100\/90.relative.inline-block { position: relative !important; isolation: isolate !important; overflow: visible !important; } /* AI回答气泡 */ .chat-answer-container .bg-gray-100\/90.relative.inline-block { background: rgba(250,247,240,0.95) !important; color: #1A0F00 !important; border-radius: 12px !important; border: 1px solid rgba(139,94,60,0.12) !important; box-shadow: 0 8px 25px -10px rgba(26,15,0,0.06) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; } .chat-answer-container .bg-gray-100\/90.relative.inline-block::before, .chat-answer-container .bg-gray-100\/90.relative.inline-block::after { content: none !important; } /* 用户消息气泡 */ .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) { background: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(250,247,240,0.95) 50%, rgba(255,255,255,0.98) 100%) !important; border: 1px solid rgba(74,44,27,0.12) !important; box-shadow: 0 6px 24px rgba(74,44,27,0.06), 0 0 40px rgba(212,165,116,0.06), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(139,94,60,0.03) !important; border-radius: 12px !important; color: #1A0F00 !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; } /* 用户气泡 — 右上角竹叶装饰 */ .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before { content: '' !important; position: absolute !important; top: -6px !important; right: -6px !important; width: 28px !important; height: 28px !important; pointer-events: none !important; z-index: 100 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3ClinearGradient id='eG' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%232D5016' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%236B8E5A' stop-opacity='0.4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='25s' repeatCount='indefinite'/%3E%3Cpath d='M14,4 Q17,9 14,14 Q11,9 14,4Z' fill='url(%23eG)' opacity='0.7'/%3E%3Cpath d='M14,4 Q17,9 14,14 Q11,9 14,4Z' fill='url(%23eG)' opacity='0.6' transform='rotate(72 14 14)'/%3E%3Cpath d='M14,4 Q17,9 14,14 Q11,9 14,4Z' fill='url(%23eG)' opacity='0.5' transform='rotate(144 14 14)'/%3E%3Cpath d='M14,4 Q17,9 14,14 Q11,9 14,4Z' fill='url(%23eG)' opacity='0.6' transform='rotate(216 14 14)'/%3E%3Cpath d='M14,4 Q17,9 14,14 Q11,9 14,4Z' fill='url(%23eG)' opacity='0.5' transform='rotate(288 14 14)'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2' fill='%238B5E3C' opacity='0.4'%3E%3Canimate attributeName='r' values='1.5;2.5;1.5' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; opacity: 0.8 !important; animation: user-leaf-flicker 3s ease-in-out infinite !important; } /* 用户气泡 — 左下角水墨装饰 */ .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after { content: '' !important; position: absolute !important; bottom: -8px !important; left: -8px !important; width: 70px !important; height: 70px !important; pointer-events: none !important; z-index: 100 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Ctext x='10' y='55' font-size='16' fill='%232D5016' opacity='0.12' font-family='STKaiti, KaiTi, serif'%3E%E5%89%91%3C/text%3E%3Ctext x='35' y='38' font-size='10' fill='%238B5E3C' opacity='0.1' font-family='STKaiti, KaiTi, serif'%3E%E9%A3%8E%3C/text%3E%3Ccircle cx='50' cy='25' r='2.5' fill='%232D5016' opacity='0.08'%3E%3Canimate attributeName='cy' values='25;20;25' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; opacity: 0.7 !important; animation: user-ribbon-pulse 12s ease-in-out infinite !important; } div.group.relative > div.relative.inline-block.bg-gray-100\/90 > * { position: relative !important; z-index: 1 !important; } /* --- 3.3. 折叠面板 (Details) --- */ .styled-prose-container details { background: #FAF7F0; border-radius: 10px; margin: 12px 0; overflow: visible; position: relative; border: 1px solid rgba(139,94,60,0.1); box-shadow: 0 4px 12px rgba(26,15,0,0.03); transition: all 0.4s ease; font-size: 15px; line-height: 1.6; padding: 0 16px 12px 16px; } .styled-prose-container details:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,15,0,0.06); border-color: rgba(139,94,60,0.2); } .styled-prose-container details:has(T:hover) { z-index: 100; } .styled-prose-container details summary { background: transparent; padding: 12px 40px 12px 16px; margin: 0 -16px; font-weight: 700; font-size: 16px; cursor: pointer; color: #1A0F00; letter-spacing: 1.5px; position: relative; list-style: none; border-bottom: 1px solid rgba(139,94,60,0.06); transition: all 0.4s ease; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; } .styled-prose-container details summary::-webkit-details-marker { display: none; } .styled-prose-container details summary::before { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #8B5E3C; border-bottom: 2px solid #8B5E3C; transform: translateY(-70%) rotate(45deg); transition: transform 0.4s ease, border-color 0.4s ease; } .styled-prose-container details summary:hover::before { border-color: #4A2C1B; } .styled-prose-container details[open] > summary { background: rgba(212,165,116,0.06); border-bottom-color: rgba(139,94,60,0.12); color: #4A2C1B; padding-top: 12px; margin-bottom: 12px; animation: scroll-reveal 0.5s ease-out; } .styled-prose-container details[open] > summary::before { transform: translateY(-50%) rotate(225deg); } .styled-prose-container details > *:not(summary) { padding: 0; line-height: inherit; font-size: inherit; color: inherit; background: transparent; } .styled-prose-container details > summary { text-align: center !important; justify-content: center !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; font-weight: 700 !important; letter-spacing: 3px !important; } .styled-prose-container details > summary::before { position: absolute !important; left: 16px !important; right: auto !important; } /* --- 3.4. Tooltip 标签 (T & Ti) --- */ .styled-prose-container T { position: static !important; display: inline-block; margin-bottom: 4px; margin-right: 6px; cursor: help; color: #2C1810 !important; font-weight: 600; text-decoration: none; border-bottom: 1px dashed rgba(139,94,60,0.3); padding: 2px 8px; background: rgba(139,94,60,0.04); border-radius: 4px; transition: all 0.4s ease; } .styled-prose-container T::before { content: ""; } .styled-prose-container T:hover { background: rgba(139,94,60,0.1); color: #4A2C1B !important; border-bottom-style: solid; z-index: 100; } .styled-prose-container T Ti { display: block !important; visibility: hidden; opacity: 0; left: 0 !important; right: 0 !important; margin: 0 auto !important; width: max-content !important; max-width: 90% !important; top: auto !important; bottom: auto !important; transform: translateY(-100%) translateY(-10px) !important; white-space: normal; text-align: left; background: rgba(255,255,255,0.98); color: #1A0F00; border-radius: 10px !important; border: 1px solid rgba(139,94,60,0.25); border-left: 3px solid #8B5E3C; padding: 12px 16px; font-size: 0.85em; font-weight: 500; line-height: 1.6; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; box-shadow: 0 8px 25px rgba(26,15,0,0.1), inset 0 0 15px rgba(245,240,232,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; position: absolute; z-index: 99999; background-image: linear-gradient(90deg, rgba(139,94,60,0.25) 0%, transparent 50%); background-size: 100% 1px; background-repeat: no-repeat; background-position: top left; } .styled-prose-container T Ti::before { content: '⚔ 江湖档案 //'; display: block; font-size: 0.75em; color: #4A2C1B; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(74,44,27,0.15); letter-spacing: 2px; font-weight: 700; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; } .styled-prose-container T:hover Ti { visibility: visible; opacity: 1; transform: translateY(-100%) translateY(-10px) !important; } .styled-prose-container T Ti > span { display: inline-block; color: #4A2C1B; font-weight: 700; margin-right: 8px; } /* --- 3.5. 列表与卡片品质着色 --- */ .styled-prose-container [class*=card-body-] { margin: 2px 0; padding: 0; border-radius: 4px; background-color: transparent; border: none; transition: all 0.4s ease; } .styled-prose-container item_list [class*=card-body-rumen] T, .styled-prose-container spell_card_list [class*=card-body-rumen] T { color: var(--color-rumen) !important; display: inline-block; } .styled-prose-container item_list [class*=card-body-zhongduan] T, .styled-prose-container spell_card_list [class*=card-body-zhongduan] T { color: var(--color-zhongduan) !important; display: inline-block; } .styled-prose-container item_list [class*=card-body-gaoduan] T, .styled-prose-container spell_card_list [class*=card-body-gaoduan] T { color: var(--color-gaoduan) !important; display: inline-block; } .styled-prose-container item_list [class*=card-body-zhuanye] T, .styled-prose-container spell_card_list [class*=card-body-zhuanye] T { color: var(--color-zhuanye) !important; display: inline-block; } .styled-prose-container item_list [class*=card-body-chuanqi] T, .styled-prose-container spell_card_list [class*=card-body-chuanqi] T { color: var(--color-chuanqi) !important; display: inline-block; } .styled-prose-container [class*=card-body-rumen] T Ti { border-color: rgba(107,91,77,0.30); } .styled-prose-container [class*=card-body-zhongduan] T Ti { border-color: rgba(74,107,61,0.35); } .styled-prose-container [class*=card-body-gaoduan] T Ti { border-color: rgba(74,107,122,0.35); } .styled-prose-container [class*=card-body-zhuanye] T Ti { border-color: rgba(107,74,122,0.35); } .styled-prose-container [class*=card-body-chuanqi] T Ti { border-color: rgba(139,94,60,0.40); box-shadow: 0 0 10px rgba(139,94,60,0.15), 0 8px 30px rgba(26,15,0,0.1); } .styled-prose-container [class*=card-body-rumen] T Ti span:first-child { color: var(--color-rumen) !important; } .styled-prose-container [class*=card-body-zhongduan] T Ti span:first-child { color: var(--color-zhongduan) !important; } .styled-prose-container [class*=card-body-gaoduan] T Ti span:first-child { color: var(--color-gaoduan) !important; } .styled-prose-container [class*=card-body-zhuanye] T Ti span:first-child { color: var(--color-zhuanye) !important; } .styled-prose-container [class*=card-body-chuanqi] T Ti span:first-child { color: var(--color-chuanqi) !important; } /* ============================================= * 4. 特殊内容模块 * ============================================= */ /* --- 4.1. 侧边栏定位修正 --- */ #ai-chat-answer:last-of-type:has(.env-sidebar, .u, .n, .p, .ship, .m) .chat, #ai-chat-answer:last-of-type:has(.env-sidebar, .u, .n, .p, .ship, .m) .bubble, #ai-chat-answer:last-of-type:has(.env-sidebar, .u, .n, .p, .ship, .m) div.group.relative > div.relative.inline-block.bg-gray-100\/90 { transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================= * 4.2. 顶部信息栏 (Top Info) — 武侠横排布局 * ============================================= */ @keyframes top-info-gradient-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .top-info { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 0 !important; margin: 20px 0 !important; padding: 0 !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; background: linear-gradient(160deg, rgba(250,247,240,0.98) 0%, rgba(245,240,232,0.95) 50%, rgba(250,247,240,0.98) 100%) !important; border: 1px solid rgba(139,94,60,0.2) !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(26,15,0,0.06), 0 0 40px rgba(212,165,116,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .top-info::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, transparent 0%, #D4A574 20%, #8B5E3C 40%, #4A2C1B 50%, #8B5E3C 60%, #D4A574 80%, transparent 100%) !important; background-size: 200% 100% !important; animation: top-info-gradient-flow 4s linear infinite !important; pointer-events: none !important; z-index: 10 !important; } .top-info::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,10 Q33,20 30,30 Q27,20 30,10Z' fill='none' stroke='%232D5016' stroke-width='0.4' opacity='0.06'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%238B5E3C' opacity='0.08'/%3E%3C/svg%3E") !important; background-size: 60px 60px !important; opacity: 0.25 !important; pointer-events: none !important; z-index: 0 !important; } .top-info:hover { box-shadow: 0 8px 32px rgba(26,15,0,0.1), 0 0 50px rgba(212,165,116,0.1), inset 0 1px 0 rgba(255,255,255,0.9) !important; border-color: rgba(139,94,60,0.35) !important; } /* ── time / position / env 横排子项 ── */ .top-info > time, .top-info > position, .top-info > env { display: flex !important; align-items: center !important; justify-content: flex-start !important; position: relative !important; flex: 1 1 auto !important; min-width: 180px !important; padding: 12px 14px 12px 10px !important; font-size: 15px !important; font-weight: 600 !important; color: #1A0F00 !important; line-height: 1.5 !important; letter-spacing: 0.5px !important; background: transparent !important; transition: all 0.3s ease !important; white-space: normal !important; word-wrap: break-word !important; word-break: break-word !important; z-index: 1 !important; } .top-info > time, .top-info > position { border-right: 1px solid rgba(139,94,60,0.15) !important; } .top-info > env { border-right: none !important; } .top-info > time:hover, .top-info > position:hover, .top-info > env:hover, .top-info > area-map:hover { background: linear-gradient(135deg, rgba(139,94,60,0.04), transparent) !important; } /* 标签 badge — 斜切笺条 */ .top-info > time::before, .top-info > position::before, .top-info > env::before { content: '' !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-right: 10px !important; font-size: 10px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: 1px !important; font-family: 'STKaiti', 'KaiTi', serif !important; padding: 5px 10px !important; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; position: relative !important; } .top-info > time::before { content: '時辰' !important; background: linear-gradient(135deg, #D4A574 0%, #A07050 100%) !important; box-shadow: 0 2px 8px rgba(212,165,116,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important; } .top-info > position::before { content: '方位' !important; background: linear-gradient(135deg, #8B5E3C 0%, #4A2C1B 100%) !important; box-shadow: 0 2px 8px rgba(139,94,60,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important; } .top-info > env::before { content: '境況' !important; background: linear-gradient(135deg, #6B8E5A 0%, #3D6B2E 100%) !important; box-shadow: 0 2px 8px rgba(61,107,46,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important; } /* ── area-map 可移动区域 ── */ .top-info > area-map { display: block !important; position: relative !important; width: 100% !important; flex-basis: 100% !important; padding: 14px !important; line-height: 1.7 !important; background: linear-gradient(180deg, rgba(139,94,60,0.02), rgba(212,165,116,0.015)) !important; border-top: 1px solid rgba(139,94,60,0.15) !important; z-index: 1 !important; } .top-info > area-map::before { content: '可移动区域' !important; display: block !important; position: relative !important; left: auto; top: auto; width: fit-content; margin-bottom: 10px; font-size: 10px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: 1px !important; font-family: 'STKaiti', 'KaiTi', serif !important; padding: 5px 10px !important; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; background: linear-gradient(135deg, #8B0000 0%, #5A0000 100%) !important; box-shadow: 0 2px 8px rgba(139,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important; } /* region 子项 */ .top-info > area-map > region { display: block !important; padding: 10px 14px !important; margin: 6px 0 !important; font-size: 14px !important; color: #1A0F00 !important; line-height: 1.6 !important; letter-spacing: 0.5px !important; quotes: none !important; white-space: normal !important; word-wrap: break-word !important; background: rgba(255,255,255,0.75) !important; border-radius: 8px !important; border-left: 3px solid #8B0000 !important; box-shadow: 0 2px 8px rgba(26,15,0,0.04) !important; position: relative !important; transition: all 0.25s ease !important; } .top-info > area-map > region::before { content: '❖' !important; color: #8B0000 !important; margin-right: 8px !important; font-size: 11px !important; text-shadow: 0 0 8px rgba(139,0,0,0.5) !important; } .top-info > area-map > region:hover { background: rgba(250,247,240,0.95) !important; box-shadow: 0 4px 15px rgba(26,15,0,0.08) !important; } /* ── quest 任务列表（hover展开） ── */ .top-info > quest { display: block !important; position: relative !important; width: 100% !important; flex-basis: 100% !important; padding: 0 14px !important; line-height: 1.7 !important; background: linear-gradient(180deg, rgba(139,94,60,0.02), rgba(212,165,116,0.015)) !important; border-top: 1px solid rgba(139,94,60,0.15) !important; z-index: 1 !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.35s ease !important; } .top-info > quest::before { content: '任務' !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; left: 14px !important; top: 14px !important; font-size: 10px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: 1px !important; font-family: 'STKaiti', 'KaiTi', serif !important; padding: 5px 10px !important; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; background: linear-gradient(135deg, #D4A574 0%, #A07050 100%) !important; box-shadow: 0 2px 8px rgba(212,165,116,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } .top-info:hover > quest { max-height: 300px !important; opacity: 1 !important; padding-top: 14px !important; padding-bottom: 16px !important; padding-left: 80px !important; } .top-info:hover > quest::before { opacity: 1 !important; } /* q 任务子项 */ .top-info > quest > q { display: block !important; padding: 10px 14px !important; margin: 6px 0 !important; font-size: 14px !important; color: #1A0F00 !important; line-height: 1.6 !important; letter-spacing: 0.5px !important; quotes: none !important; white-space: normal !important; word-wrap: break-word !important; background: rgba(255,255,255,0.75) !important; border-radius: 8px !important; border-left: 3px solid transparent !important; box-shadow: 0 2px 8px rgba(26,15,0,0.04) !important; position: relative !important; transition: all 0.25s ease !important; } .top-info > quest > q.main { border-left-color: #D4A574 !important; } .top-info > quest > q.main::before { content: '◆' !important; color: #D4A574 !important; margin-right: 8px !important; font-size: 11px !important; text-shadow: 0 0 8px rgba(212,165,116,0.6) !important; } .top-info > quest > q.side { border-left-color: #6B8E5A !important; } .top-info > quest > q.side::before { content: '◇' !important; color: #6B8E5A !important; margin-right: 8px !important; font-size: 11px !important; text-shadow: 0 0 8px rgba(107,142,90,0.5) !important; } .top-info > quest > q:hover { background: rgba(250,247,240,0.95) !important; box-shadow: 0 4px 15px rgba(26,15,0,0.08) !important; } /* 任务状态标签 */ .top-info > quest > q > s { text-decoration: none !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 4px !important; margin-left: 10px !important; letter-spacing: 0.5px !important; white-space: nowrap !important; display: inline-block !important; background: linear-gradient(135deg, rgba(139,94,60,0.12), rgba(212,165,116,0.08)) !important; color: #4A2C1B !important; border: 1px solid rgba(139,94,60,0.25) !important; box-shadow: 0 1px 4px rgba(139,94,60,0.12) !important; } /* ============================================= * 4.3. 侧边栏模块 * ============================================= */ @keyframes sidebar-tab-glow { 0%, 100% { box-shadow: -2px 2px 12px rgba(139,94,60,0.25); } 50% { box-shadow: -2px 2px 20px rgba(139,94,60,0.5), inset 0 0 20px rgba(255,255,255,0.08); } } @keyframes sidebar-tab-glow-green { 0%, 100% { box-shadow: -2px 2px 12px rgba(61,107,46,0.25); } 50% { box-shadow: -2px 2px 20px rgba(61,107,46,0.5), inset 0 0 20px rgba(255,255,255,0.08); } } @keyframes sidebar-tab-glow-blue { 0%, 100% { box-shadow: -2px 2px 12px rgba(74,107,122,0.25); } 50% { box-shadow: -2px 2px 20px rgba(74,107,122,0.5), inset 0 0 20px rgba(255,255,255,0.08); } } .styled-prose-container .env-sidebar, .styled-prose-container .u, .styled-prose-container .n, .styled-prose-container details.p, .styled-prose-container details.ship, .styled-prose-container details.m { position: relative !important; width: 100% !important; margin: 16px 0 !important; padding: 0 !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(237,229,216,0.9) 100%) !important; border: 2px solid rgba(139,94,60,0.2) !important; border-radius: 10px !important; overflow: hidden !important; transition: all 0.35s ease !important; box-shadow: none !important; } .styled-prose-container details.ship { background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(232,245,232,0.9) 100%) !important; border-color: rgba(61,107,46,0.2) !important; border-left: 3px solid #3D6B2E !important; } .styled-prose-container details.m { background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(232,240,248,0.9) 100%) !important; border-color: rgba(74,107,122,0.2) !important; border-left: 3px solid #4A6B7A !important; } .styled-prose-container details.p { border-left: 3px solid #8B5E3C !important; } .styled-prose-container details.n { border-left: 3px solid #8B5E3C !important; } .styled-prose-container .env-sidebar > summary, .styled-prose-container .u > summary, .styled-prose-container .n > summary, .styled-prose-container details.p > summary, .styled-prose-container details.ship > summary, .styled-prose-container details.m > summary { padding: 12px 16px !important; background: linear-gradient(90deg, rgba(139,94,60,0.06), rgba(212,165,116,0.08), rgba(139,94,60,0.06)) !important; color: #1A0F00 !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; list-style: none !important; outline: none !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; border-bottom: 1px solid rgba(139,94,60,0.12) !important; box-shadow: none !important; letter-spacing: 2px !important; writing-mode: horizontal-tb !important; text-orientation: mixed; } .styled-prose-container details.ship > summary { background: linear-gradient(90deg, rgba(61,107,46,0.06), rgba(120,180,100,0.08), rgba(61,107,46,0.06)) !important; color: #1A3D12 !important; border-bottom-color: rgba(61,107,46,0.12) !important; } .styled-prose-container details.m > summary { background: linear-gradient(90deg, rgba(74,107,122,0.06), rgba(120,160,180,0.08), rgba(74,107,122,0.06)) !important; color: #1A3A4D !important; border-bottom-color: rgba(74,107,122,0.12) !important; } .styled-prose-container .env-sidebar > summary::-webkit-details-marker, .styled-prose-container .u > summary::-webkit-details-marker, .styled-prose-container .n > summary::-webkit-details-marker, .styled-prose-container details.p > summary::-webkit-details-marker, .styled-prose-container details.ship > summary::-webkit-details-marker, .styled-prose-container details.m > summary::-webkit-details-marker { display: none !important; } .styled-prose-container .env-sidebar > summary:hover, .styled-prose-container .u > summary:hover, .styled-prose-container .n > summary:hover, .styled-prose-container details.p > summary:hover { background: linear-gradient(90deg, rgba(139,94,60,0.12), rgba(212,165,116,0.15), rgba(139,94,60,0.12)) !important; color: #4A2C1B !important; } .styled-prose-container details.ship > summary:hover { background: linear-gradient(90deg, rgba(61,107,46,0.12), rgba(120,180,100,0.15), rgba(61,107,46,0.12)) !important; color: #2D5016 !important; } .styled-prose-container details.m > summary:hover { background: linear-gradient(90deg, rgba(74,107,122,0.12), rgba(120,160,180,0.15), rgba(74,107,122,0.12)) !important; color: #2A4A5A !important; } /* 最新消息中侧边栏悬浮 */ #ai-chat-answer:last-of-type .env-sidebar, #ai-chat-answer:last-of-type .u, #ai-chat-answer:last-of-type .n, #ai-chat-answer:last-of-type details.p, #ai-chat-answer:last-of-type details.ship, #ai-chat-answer:last-of-type details.m { position: fixed !important; right: 0 !important; z-index: 9999 !important; width: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #ai-chat-answer:last-of-type .env-sidebar { top: 60px !important; } #ai-chat-answer:last-of-type .u { top: 175px !important; } #ai-chat-answer:last-of-type details.p { top: 60px !important; } #ai-chat-answer:last-of-type details.n { top: 170px !important; } #ai-chat-answer:last-of-type .n { top: 170px !important; } #ai-chat-answer:last-of-type details.ship { top: 390px !important; } #ai-chat-answer:last-of-type details.m { top: 280px !important; } /* ── 折叠标签 — 水墨竹纹通用层 ── */ #ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary, #ai-chat-answer:last-of-type .u:not([open]) > summary, #ai-chat-answer:last-of-type .n:not([open]) > summary, #ai-chat-answer:last-of-type details.p:not([open]) > summary, #ai-chat-answer:last-of-type details.ship:not([open]) > summary, #ai-chat-answer:last-of-type details.m:not([open]) > summary { width: 38px !important; padding: 0 !important; margin: 0 !important; color: #fff !important; border-radius: 10px 0 0 10px !important; border-right: none !important; writing-mode: vertical-rl !important; text-orientation: upright !important; letter-spacing: 3px !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; font-size: 13px !important; position: relative !important; overflow: hidden !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 200'%3E%3Cdefs%3E%3CradialGradient id='tg'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.12'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M19,40 Q23,55 19,70 Q15,55 19,40Z' fill='url(%23tg)' opacity='0.3'%3E%3Canimate attributeName='opacity' values='0.2;0.5;0.2' dur='4s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M22,110 Q26,125 22,140 Q18,125 22,110Z' fill='url(%23tg)' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.4;0.15' dur='5s' repeatCount='indefinite' begin='1.5s'/%3E%3C/path%3E%3C/svg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } /* .p 主角状态 — 檀木棕渐变 */ #ai-chat-answer:last-of-type details.p:not([open]) > summary { background-color: transparent !important; background: linear-gradient(180deg, #A07050, #8B5E3C, #4A2C1B) !important; border: 1px solid rgba(212,165,116,0.4) !important; border-right: none !important; text-shadow: 0 1px 3px rgba(40,20,10,0.5) !important; animation: sidebar-tab-glow 4s ease-in-out infinite !important; min-height: 95px !important; } #ai-chat-answer:last-of-type details.p:not([open]) > summary::before { content: '' !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 20px !important; height: 20px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,2 L11,8 L10,18 L9,8Z' fill='rgba(255,255,255,0.7)' stroke='rgba(255,255,255,0.3)' stroke-width='0.5'/%3E%3Cpath d='M4,10 L10,9 L16,10 L10,11Z' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23D4A574' opacity='0.8'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; border: none !important; border-radius: 0 !important; } #ai-chat-answer:last-of-type details.p:not([open]) > summary::after { content: '' !important; position: absolute !important; bottom: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='3' y='13' font-size='11' fill='rgba(255,255,255,0.5)' font-family='STKaiti, serif'%3E%E6%B0%94%3C/text%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; border: none !important; } /* .n NPC信息 */ #ai-chat-answer:last-of-type .n:not([open]) > summary, #ai-chat-answer:last-of-type details.n:not([open]) > summary { background-color: transparent !important; background: linear-gradient(180deg, #A07050, #8B5E3C, #4A2C1B) !important; border: 1px solid rgba(212,165,116,0.4) !important; border-right: none !important; text-shadow: 0 1px 3px rgba(40,20,10,0.5) !important; animation: sidebar-tab-glow 4s ease-in-out infinite !important; min-height: 80px !important; } #ai-chat-answer:last-of-type .n:not([open]) > summary::before, #ai-chat-answer:last-of-type details.n:not([open]) > summary::before { content: '' !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='6' r='3.5' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.2'/%3E%3Cpath d='M3,16 C3,12 5.5,9.5 9,9.5 C12.5,9.5 15,12 15,16' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.2'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; border: none !important; border-radius: 0 !important; } /* .ship 组织总览 — 松涛绿 */ #ai-chat-answer:last-of-type details.ship:not([open]) > summary { background-color: transparent !important; background: linear-gradient(180deg, #6B8E5A, #3D6B2E, #2D5016) !important; border: 1px solid rgba(120,180,100,0.4) !important; border-right: none !important; text-shadow: 0 1px 3px rgba(20,40,10,0.5) !important; animation: sidebar-tab-glow-green 4s ease-in-out infinite !important; min-height: 100px !important; } #ai-chat-answer:last-of-type details.ship:not([open]) > summary::before { content: '' !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ctext x='1' y='15' font-size='13' fill='rgba(255,255,255,0.65)' font-family='STKaiti, serif'%3E%E6%B4%BE%3C/text%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; border: none !important; border-radius: 0 !important; } #ai-chat-answer:last-of-type details.ship:not([open]) > summary::after { content: '' !important; position: absolute !important; bottom: 10px !important; left: 50% !important; transform: translateX(-50%) !important; width: 14px !important; height: 14px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='0.8' stroke-dasharray='2 2'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; border: none !important; } /* .m 过往记忆 — 远山蓝 (修正定位) */ #ai-chat-answer:last-of-type details.m:not([open]) > summary { background-color: transparent !important; background: linear-gradient(180deg, #7A9AAD, #4A6B7A, #2A4A5A) !important; border: 1px solid rgba(120,160,180,0.4) !important; border-right: none !important; text-shadow: 0 1px 3px rgba(15,30,40,0.5) !important; animation: sidebar-tab-glow-blue 4s ease-in-out infinite !important; min-height: 130px !important; overflow: visible !important; /* 隐藏原始summary文字，全部由伪元素承载 */ font-size: 0 !important; line-height: 0 !important; color: transparent !important; } #ai-chat-answer:last-of-type details.m:not([open]) > summary::before { content: '' !important; position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='3' y='3' width='12' height='12' rx='1.5' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1'/%3E%3Cline x1='6' y1='6' x2='12' y2='6' stroke='rgba(255,255,255,0.35)' stroke-width='0.7'/%3E%3Cline x1='6' y1='9' x2='12' y2='9' stroke='rgba(255,255,255,0.3)' stroke-width='0.7'/%3E%3Cline x1='6' y1='12' x2='10' y2='12' stroke='rgba(255,255,255,0.25)' stroke-width='0.7'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; border: none !important; border-radius: 0 !important; } #ai-chat-answer:last-of-type details.m:not([open]) > summary::after { content: '往事如烟' !important; display: block !important; font-size: 13px !important; line-height: 1.3 !important; color: #fff !important; writing-mode: vertical-rl !important; text-orientation: upright !important; letter-spacing: 3px !important; font-weight: 700 !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; text-shadow: 0 1px 3px rgba(15,30,40,0.5) !important; position: absolute !important; top: 30px !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: auto !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* env-sidebar / .u */ #ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary, #ai-chat-answer:last-of-type .u:not([open]) > summary { background-color: transparent !important; background: linear-gradient(180deg, #8B5E3C, #4A2C1B) !important; border: 1px solid rgba(212,165,116,0.35) !important; border-right: none !important; box-shadow: -2px 2px 15px rgba(26,15,0,0.15) !important; text-shadow: 0 0 5px rgba(212,165,116,0.4) !important; } /* ── 展开面板 ── */ #ai-chat-answer:last-of-type .env-sidebar[open], #ai-chat-answer:last-of-type .u[open], #ai-chat-answer:last-of-type .n[open], #ai-chat-answer:last-of-type details.p[open], #ai-chat-answer:last-of-type details.n[open] { top: 60px !important; width: 370px !important; max-height: 60vh !important; right: 35px !important; background: rgba(255,255,255,0.98) !important; border: 2px solid #8B5E3C !important; border-right: none !important; border-radius: 10px 0 0 10px !important; box-shadow: -4px 4px 30px rgba(74,44,27,0.18), 0 0 60px rgba(212,165,116,0.1) !important; overflow-y: auto !important; overflow-x: hidden !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } #ai-chat-answer:last-of-type details.ship[open] { top: 60px !important; width: 380px !important; max-height: 65vh !important; right: 35px !important; background: rgba(255,255,255,0.98) !important; border: 2px solid #3D6B2E !important; border-right: none !important; border-radius: 10px 0 0 10px !important; box-shadow: -4px 4px 30px rgba(45,80,22,0.15) !important; overflow-y: auto !important; overflow-x: hidden !important; } #ai-chat-answer:last-of-type details.m[open] { top: 60px !important; width: 380px !important; max-height: 60vh !important; right: 35px !important; background: rgba(255,255,255,0.98) !important; border: 2px solid #4A6B7A !important; border-right: none !important; border-radius: 10px 0 0 10px !important; box-shadow: -4px 4px 30px rgba(74,107,122,0.15) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* 展开面板头部 — 棕色系 */ #ai-chat-answer:last-of-type .env-sidebar[open] > summary, #ai-chat-answer:last-of-type .u[open] > summary, #ai-chat-answer:last-of-type .n[open] > summary, #ai-chat-answer:last-of-type details.p[open] > summary, #ai-chat-answer:last-of-type details.n[open] > summary { writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important; background: linear-gradient(135deg, #A07050, #8B5E3C, #4A2C1B) !important; color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.15) !important; border-radius: 8px 0 0 0 !important; margin-bottom: 0 !important; box-shadow: none !important; position: sticky !important; top: 0 !important; z-index: 100 !important; text-align: left !important; display: flex !important; justify-content: flex-start !important; font-size: 15px !important; letter-spacing: 2.5px !important; text-shadow: 0 1px 4px rgba(40,20,10,0.4) !important; animation: none !important; min-height: 0 !important; } #ai-chat-answer:last-of-type details.ship[open] > summary { writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important; background: linear-gradient(135deg, #6B8E5A, #3D6B2E, #2D5016) !important; color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.15) !important; border-radius: 8px 0 0 0 !important; margin-bottom: 0 !important; position: sticky !important; top: 0 !important; z-index: 100 !important; text-align: left !important; display: flex !important; justify-content: flex-start !important; font-size: 15px !important; letter-spacing: 2.5px !important; text-shadow: 0 1px 4px rgba(20,40,10,0.4) !important; animation: none !important; min-height: 0 !important; box-shadow: none !important; } #ai-chat-answer:last-of-type details.m[open] > summary { writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important; background: linear-gradient(135deg, #7A9AAD, #4A6B7A, #2A4A5A) !important; color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.15) !important; border-radius: 8px 0 0 0 !important; margin-bottom: 0 !important; position: sticky !important; top: 0 !important; z-index: 100 !important; text-align: left !important; display: flex !important; justify-content: flex-start !important; font-size: 15px !important; letter-spacing: 2.5px !important; text-shadow: 0 1px 4px rgba(15,30,40,0.4) !important; animation: none !important; min-height: 0 !important; box-shadow: none !important; /* 展开时恢复文字可见性 */ font-size: 15px !important; color: #fff !important; } /* 展开标题前缀 */ #ai-chat-answer:last-of-type details.p[open] > summary::before { content: '⚔' !important; margin-right: 8px !important; font-size: 14px !important; position: static !important; transform: none !important; border: none !important; width: auto !important; height: auto !important; background: none !important; } #ai-chat-answer:last-of-type .n[open] > summary::before, #ai-chat-answer:last-of-type details.n[open] > summary::before { content: '👤' !important; margin-right: 8px !important; font-size: 14px !important; position: static !important; transform: none !important; border: none !important; width: auto !important; height: auto !important; background: none !important; } #ai-chat-answer:last-of-type details.ship[open] > summary::before { content: '🏯' !important; margin-right: 8px !important; font-size: 15px !important; position: static !important; transform: none !important; border: none !important; width: auto !important; height: auto !important; background: none !important; } #ai-chat-answer:last-of-type details.m[open] > summary::before { content: '📜' !important; margin-right: 8px !important; font-size: 14px !important; position: static !important; transform: none !important; border: none !important; width: auto !important; height: auto !important; background: none !important; } #ai-chat-answer:last-of-type details.m[open] > summary::after { /* 展开时 ::after 变为关闭按钮，覆盖折叠时的"往事如烟"文字 */ content: '×' !important; position: absolute !important; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px !important; line-height: 0.8 !important; color: rgba(255,255,255,0.6) !important; text-shadow: none !important; font-weight: 300 !important; writing-mode: horizontal-tb !important; letter-spacing: 0 !important; display: block !important; margin: 0 !important; width: auto !important; height: auto !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* 关闭按钮 × (其余面板) */ #ai-chat-answer:last-of-type .env-sidebar[open] > summary::after, #ai-chat-answer:last-of-type .u[open] > summary::after, #ai-chat-answer:last-of-type .n[open] > summary::after, #ai-chat-answer:last-of-type details.p[open] > summary::after, #ai-chat-answer:last-of-type details.n[open] > summary::after, #ai-chat-answer:last-of-type details.ship[open] > summary::after { content: '×' !important; position: absolute !important; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px !important; line-height: 0.8 !important; color: rgba(255,255,255,0.6) !important; text-shadow: none !important; font-weight: 300 !important; } /* 滚动条 — 棕系 */ #ai-chat-answer:last-of-type .env-sidebar[open]::-webkit-scrollbar, #ai-chat-answer:last-of-type .u[open]::-webkit-scrollbar, #ai-chat-answer:last-of-type .n[open]::-webkit-scrollbar, #ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar, #ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar { width: 5px; } #ai-chat-answer:last-of-type .env-sidebar[open]::-webkit-scrollbar-track, #ai-chat-answer:last-of-type .u[open]::-webkit-scrollbar-track, #ai-chat-answer:last-of-type .n[open]::-webkit-scrollbar-track, #ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-track, #ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-track { background: rgba(139,94,60,0.05); border-radius: 3px; } #ai-chat-answer:last-of-type .env-sidebar[open]::-webkit-scrollbar-thumb, #ai-chat-answer:last-of-type .u[open]::-webkit-scrollbar-thumb, #ai-chat-answer:last-of-type .n[open]::-webkit-scrollbar-thumb, #ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-thumb, #ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(139,94,60,0.35), rgba(74,44,27,0.25)); border-radius: 3px; } #ai-chat-answer:last-of-type details.ship[open]::-webkit-scrollbar { width: 5px; } #ai-chat-answer:last-of-type details.ship[open]::-webkit-scrollbar-track { background: rgba(61,107,46,0.05); } #ai-chat-answer:last-of-type details.ship[open]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(61,107,46,0.3), rgba(45,80,22,0.2)); border-radius: 3px; } #ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar { width: 5px; } #ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-track { background: rgba(74,107,122,0.05); } #ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(74,107,122,0.3), rgba(42,74,90,0.2)); border-radius: 3px; } /* 侧边栏面板内NPC卡片 */ #ai-chat-answer:last-of-type .u[open] > .classUI-npc-card, #ai-chat-answer:last-of-type .n[open] > .classUI-npc-card, #ai-chat-answer:last-of-type details.n[open] > .classUI-npc-card, #ai-chat-answer:last-of-type details.ship[open] > .classUI-npc-card { background: transparent !important; border: none !important; box-shadow: none !important; padding-top: 14px !important; padding-bottom: 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================= * 4.4. 江湖传闻 / 道听途说 (n-part / n-tit / n-txt / t-*) * ============================================= */ .styled-prose-container .n-part { margin: 0 0 16px 0 !important; padding: 14px 16px !important; background: rgba(255,255,255,0.6) !important; border: 1px solid rgba(139,94,60,0.08) !important; border-radius: 8px !important; position: relative !important; transition: all 0.3s ease !important; } .styled-prose-container .n-part:last-child { margin-bottom: 0 !important; } .styled-prose-container .n-part:hover { background: rgba(255,255,255,0.85) !important; border-color: rgba(139,94,60,0.18) !important; box-shadow: 0 2px 10px rgba(26,15,0,0.04) !important; } .styled-prose-container .n-tit { margin-bottom: 10px !important; padding-bottom: 8px !important; border-bottom: 1px dashed rgba(139,94,60,0.12) !important; } .styled-prose-container .n-tit b { font-size: 17px !important; font-weight: 800 !important; color: #4A2C1B !important; letter-spacing: 2px !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; } .styled-prose-container .n-txt { font-size: 17px !important; line-height: 1.8 !important; color: #1A0F00 !important; margin: 6px 0 !important; padding: 6px 10px !important; border-radius: 6px !important; background: rgba(250,247,240,0.5) !important; transition: background 0.2s ease !important; } .styled-prose-container .n-txt:hover { background: rgba(250,247,240,0.85) !important; } /* ── 消息来源颜色标签 ── */ .styled-prose-container .t-pur { color: #6B4A7A !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; background: rgba(107,74,122,0.06) !important; border-radius: 4px !important; border-left: 2px solid #6B4A7A !important; } .styled-prose-container .t-cyan { color: #4A6B7A !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; background: rgba(74,107,122,0.06) !important; border-radius: 4px !important; border-left: 2px solid #4A6B7A !important; } .styled-prose-container .t-red { color: #8B0000 !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; background: rgba(139,0,0,0.05) !important; border-radius: 4px !important; border-left: 2px solid #8B0000 !important; } .styled-prose-container .t-org { color: #A07050 !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; background: rgba(160,112,80,0.06) !important; border-radius: 4px !important; border-left: 2px solid #A07050 !important; } .styled-prose-container .t-grn { color: #3D6B2E !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; background: rgba(61,107,46,0.06) !important; border-radius: 4px !important; border-left: 2px solid #3D6B2E !important; } /* ============================================= * 4.5. 背包 * ============================================= */ details[inv] { --grid-size: 56px; --gap: 6px; --panel-h: 1120px; --bg-panel: rgba(250,247,240,0.98); --bg-item: rgba(255,255,255,0.9); --text-main: #1A0F00; --text-sub: #4A2C1B; --border: rgba(139,94,60,0.18); --accent: #8B5E3C; --q-yiban: #6B5B4D; --q-youzhi: #4A6B3D; --q-jingliang: #4A6B7A; --q-shishi: #6B4A7A; --q-chuanshuo: #8B5E3C; --q-yuangu: #8B0000; display: block !important; margin: 12px 0 !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; position: relative !important; } details[inv] > summary { cursor: pointer !important; list-style: none !important; user-select: none !important; display: flex !important; align-items: center !important; gap: 10px !important; font-weight: 700 !important; font-size: 14px !important; color: var(--accent) !important; padding: 10px 14px 10px 36px !important; background: linear-gradient(90deg, rgba(139,94,60,0.05), rgba(212,165,116,0.03), rgba(139,94,60,0.05)) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important; border-radius: 6px !important; transition: all 0.3s ease !important; letter-spacing: 1.5px !important; position: relative !important; z-index: 10 !important; } details[inv][open] > summary { border-radius: 0 0 6px 6px !important; border-top: none !important; } details[inv] > summary::-webkit-details-marker, details[inv] > summary::marker { display: none !important; content: '' !important; } details[inv] > summary::before { content: '🎒' !important; position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; } details[inv] > summary::after { content: '' !important; position: absolute !important; right: 14px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid var(--accent) !important; border-top: 2px solid var(--accent) !important; transform: translateY(-50%) rotate(-45deg) !important; transition: all 0.3s ease !important; } details[inv][open] > summary::after { transform: translateY(-50%) rotate(135deg) !important; border-color: #4A2C1B !important; } details[inv] > summary > i { font-style: normal !important; background: rgba(139,94,60,0.06) !important; padding: 3px 10px !important; border-radius: 6px !important; font-size: 12px !important; color: var(--text-sub) !important; border: 1px solid rgba(139,94,60,0.12) !important; margin-left: auto !important; margin-right: 20px !important; } details[inv] > panel { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr)) !important; gap: var(--gap) !important; padding: 36px 12px 12px 12px !important; background: var(--bg-panel) !important; border: 1px solid var(--border) !important; border-bottom: none !important; border-left: 3px solid var(--accent) !important; border-radius: 10px 10px 0 0 !important; max-height: var(--panel-h) !important; overflow: visible !important; box-shadow: 0 -4px 20px rgba(26,15,0,0.1) !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: calc(100% - 1px) !important; z-index: 100 !important; } details[inv] > panel::before { content: '⚔ 库房储备' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(90deg, rgba(139,94,60,0.08), rgba(212,165,116,0.06), rgba(139,94,60,0.08)) !important; border-bottom: 1px solid rgba(139,94,60,0.12) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--accent) !important; letter-spacing: 3px !important; } details[inv] > panel > b { display: flex !important; align-items: center !important; justify-content: center !important; aspect-ratio: 1/1 !important; background: var(--bg-item) !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; font-weight: 600 !important; font-size: 11px !important; text-align: center !important; cursor: help !important; position: static !important; transition: all 0.25s ease !important; overflow: visible !important; border-radius: 6px !important; padding: 4px !important; word-break: break-all !important; line-height: 1.3 !important; box-shadow: 0 1px 3px rgba(26,15,0,0.04) !important; } details[inv] > panel > b:hover { z-index: 10 !important; transform: scale(1.08) !important; box-shadow: 0 4px 15px rgba(139,94,60,0.15) !important; background: #FFFFFF !important; } details[inv] > panel > b > i { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 135px !important; max-width: 45vw !important; max-height: 65vh !important; overflow-y: auto !important; background: rgba(255,255,255,0.99) !important; border: 1px solid rgba(139,94,60,0.3) !important; border-left: 3px solid var(--accent) !important; padding: 12px 10px !important; border-radius: 10px !important; box-shadow: 0 8px 30px rgba(26,15,0,0.25) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.15s ease, visibility 0.15s ease !important; font-style: normal !important; text-align: left !important; white-space: normal !important; font-size: 11px !important; line-height: 1.7 !important; color: var(--text-main) !important; z-index: 2147483647 !important; } details[inv] > panel > b > i::before { content: '⚔ 物品档案' !important; display: block !important; font-size: 10px !important; font-weight: 700 !important; color: #4A2C1B !important; letter-spacing: 1px !important; margin-bottom: 6px !important; padding-bottom: 6px !important; border-bottom: 1px solid rgba(139,94,60,0.15) !important; } details[inv] > panel > b:hover > i { opacity: 1 !important; visibility: visible !important; } details[inv] > panel > b > i > b { display: block !important; margin-top: 8px !important; padding-top: 6px !important; border-top: 1px dashed rgba(139,94,60,0.15) !important; text-align: right !important; color: #4A2C1B !important; font-weight: 700 !important; font-size: 10px !important; } details[inv] > panel > b[e] { border-color: #D4A574 !important; box-shadow: inset 0 0 0 1px #D4A574, 0 0 8px rgba(212,165,116,0.25) !important; background: linear-gradient(135deg, rgba(212,165,116,0.08), rgba(255,255,255,0.9)) !important; position: relative !important; } details[inv] > panel > b[e]::after { content: '▸' !important; position: absolute !important; top: 0 !important; left: 0 !important; background: linear-gradient(135deg, #D4A574, #8B5E3C) !important; color: #fff !important; font-size: 8px !important; font-weight: 700 !important; padding: 1px 3px !important; line-height: 1.2 !important; border-radius: 0 0 4px 0 !important; } details[inv] > panel > b[q="yiban"] { color: var(--q-yiban) !important; border-color: var(--q-yiban) !important; } details[inv] > panel > b[q="youzhi"] { color: var(--q-youzhi) !important; border-color: var(--q-youzhi) !important; } details[inv] > panel > b[q="jingliang"] { color: var(--q-jingliang) !important; border-color: var(--q-jingliang) !important; } details[inv] > panel > b[q="shishi"] { color: var(--q-shishi) !important; border-color: var(--q-shishi) !important; } details[inv] > panel > b[q="chuanshuo"] { color: var(--q-chuanshuo) !important; border-color: var(--q-chuanshuo) !important; box-shadow: 0 0 6px rgba(139,94,60,0.25) !important; } details[inv] > panel > b[q="yuangu"] { color: var(--q-yuangu) !important; border-color: var(--q-yuangu) !important; box-shadow: 0 0 8px rgba(139,0,0,0.25) !important; animation: inv-item-glow 2.5s ease-in-out infinite !important; } details[inv] > panel > b[q="yiban"] > i { border-left-color: var(--q-yiban) !important; } details[inv] > panel > b[q="youzhi"] > i { border-left-color: var(--q-youzhi) !important; } details[inv] > panel > b[q="jingliang"] > i { border-left-color: var(--q-jingliang) !important; } details[inv] > panel > b[q="shishi"] > i { border-left-color: var(--q-shishi) !important; } details[inv] > panel > b[q="chuanshuo"] > i { border-left-color: var(--q-chuanshuo) !important; } details[inv] > panel > b[q="yuangu"] > i { border-left-color: var(--q-yuangu) !important; } .styled-prose-container wealth_info, .styled-prose-container wealth_info *, .styled-prose-container details:has(wealth_info), .styled-prose-container details:has(wealth_info) > *, details[inv], details[inv] > panel { overflow: visible !important; } /* ============================================= * 4.6. 因果命盘 / 追踪器 * ============================================= */ .k-track { border: 1px solid rgba(139,94,60,0.15) !important; background: linear-gradient(180deg, rgba(250,247,240,0.98) 0%, rgba(237,229,216,0.95) 100%) !important; margin: 14px 0 !important; border-radius: 12px !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; overflow: hidden !important; position: relative !important; } .k-track::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, #D4A574, #8B5E3C, #8B0000, transparent) !important; opacity: 0.4 !important; } .k-head { background: linear-gradient(90deg, rgba(139,94,60,0.05) 0%, rgba(212,165,116,0.06) 25%, rgba(255,255,255,0.9) 50%, rgba(139,0,0,0.03) 75%, rgba(139,94,60,0.05) 100%) !important; padding: 12px 16px 12px 42px !important; font-size: 14px !important; color: #1A0F00 !important; font-weight: 700 !important; border-bottom: 1px solid rgba(139,94,60,0.1) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; cursor: pointer !important; letter-spacing: 2px !important; list-style: none !important; position: relative !important; } .k-head::-webkit-details-marker { display: none !important; } .k-head::before { content: '⚔' !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; animation: k-petal-spin 12s linear infinite !important; } .k-head::after { content: '' !important; position: absolute !important; right: 16px !important; top: 50% !important; width: 7px !important; height: 7px !important; border-right: 2px solid #8B5E3C !important; border-bottom: 2px solid #8B5E3C !important; transform: translateY(-70%) rotate(45deg) !important; transition: all 0.3s ease !important; } .k-track[open] > .k-head::after { transform: translateY(-30%) rotate(-135deg) !important; } .k-sum { font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1px !important; padding: 4px 10px !important; border-radius: 8px !important; background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(139,94,60,0.12) !important; margin-right: 20px !important; color: #1A0F00 !important; } .k-body { padding: 14px !important; background: rgba(255,255,255,0.5) !important; } .k-quote { text-align: center !important; font-size: 11px !important; color: #4A2C1B !important; letter-spacing: 2px !important; padding: 10px 12px !important; margin-bottom: 14px !important; background: linear-gradient(90deg, transparent, rgba(139,94,60,0.03), transparent) !important; border-top: 1px dashed rgba(139,94,60,0.12) !important; border-bottom: 1px dashed rgba(139,94,60,0.12) !important; font-weight: 600 !important; } .k-row { position: relative !important; z-index: 1 !important; margin-bottom: 12px !important; padding: 10px 12px 10px 48px !important; border-left: 3px solid var(--k-color) !important; background: var(--k-bg) !important; border-radius: 0 10px 10px 0 !important; transition: all 0.35s ease !important; overflow: hidden !important; display: flex !important; align-items: flex-start !important; } .k-row:last-child { margin-bottom: 0 !important; } .k-row:hover { transform: translateX(4px) !important; } .k-tag { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 900 !important; color: #fff !important; z-index: 2 !important; box-shadow: 0 2px 6px var(--k-tag-shadow) !important; background: var(--k-tag-bg) !important; border: 2px solid rgba(255,255,255,0.4) !important; } .k-main { flex: 1 !important; min-width: 0 !important; } .k-row.g { --k-color: #8B5E3C !important; --k-bg: linear-gradient(90deg, rgba(237,229,216,0.9) 0%, rgba(255,255,255,0.85) 100%) !important; --k-bar-color: linear-gradient(90deg, #8B5E3C, #4A2C1B) !important; --k-tag-bg: linear-gradient(135deg, #8B5E3C, #4A2C1B) !important; --k-tag-shadow: rgba(74,44,27,0.4) !important; border: 1px solid rgba(139,94,60,0.2) !important; border-left: 3px solid #8B5E3C !important; } .k-row.e { --k-color: #8B0000 !important; --k-bg: linear-gradient(90deg, rgba(255,235,230,0.9) 0%, rgba(255,255,255,0.85) 100%) !important; --k-bar-color: linear-gradient(90deg, #8B0000, #B22222) !important; --k-tag-bg: linear-gradient(135deg, #8B0000, #5A0000) !important; --k-tag-shadow: rgba(90,0,0,0.4) !important; border: 1px solid rgba(139,0,0,0.18) !important; border-left: 3px solid #8B0000 !important; } .k-txt { display: flex !important; flex-direction: column !important; margin-bottom: 8px !important; } .k-txt b { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; margin-bottom: 3px !important; } .k-row.g .k-txt b { color: #4A2C1B !important; } .k-row.e .k-txt b { color: #5A0000 !important; } .k-txt i { color: #3D2B1F !important; font-size: 11px !important; font-style: normal !important; opacity: 0.9 !important; line-height: 1.5 !important; } .k-bar { height: 12px !important; background: rgba(139,94,60,0.05) !important; border-radius: 6px !important; position: relative !important; overflow: hidden !important; border: 1px solid rgba(139,94,60,0.08) !important; } .k-bar::after { content: '' !important; position: absolute !important; top: 1px !important; left: 1px !important; bottom: 1px !important; width: calc(var(--p) - 2px) !important; background: var(--k-bar-color) !important; border-radius: 5px !important; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } .k-bar::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent) !important; animation: k-bar-shimmer 2.5s ease-in-out infinite !important; z-index: 2 !important; } .k-bar span { position: absolute !important; width: 100% !important; text-align: center !important; font-size: 9px !important; line-height: 12px !important; color: #1A0F00 !important; font-weight: 700 !important; z-index: 3 !important; letter-spacing: 1px !important; text-shadow: 0 0 3px rgba(255,255,255,0.8) !important; } .k-row.e.pulse { animation: k-danger-pulse 1.2s ease-in-out infinite !important; } .k-row.g.pulse { animation: k-fortune-pulse 2s ease-in-out infinite !important; } .k-foot { text-align: center !important; padding: 10px 12px !important; border-top: 1px solid rgba(139,94,60,0.06) !important; font-size: 10px !important; color: #4A2C1B !important; font-weight: 600 !important; letter-spacing: 3px !important; } .k-foot::before { content: '⚔' !important; margin-right: 8px !important; font-size: 8px !important; } .k-foot::after { content: '🍃' !important; margin-left: 8px !important; font-size: 8px !important; } .k-none { text-align: center !important; color: #4A2C1B !important; font-size: 13px !important; padding: 24px 14px !important; font-weight: 600 !important; letter-spacing: 2px !important; opacity: 0.8 !important; } .k-none::before { content: '⚔' !important; display: block !important; font-size: 28px !important; margin-bottom: 10px !important; animation: k-petal-spin 10s linear infinite !important; } /* ============================================= * 4.9. 选项按钮 * ============================================= */ .markdown-body { counter-reset: option-counter; } pre { position: relative !important; margin: 8px 0 !important; overflow: hidden !important; border-radius: 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; min-height: 55px; } pre div[class*="border-b"] { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; z-index: 2; pointer-events: none; } pre div[class*="border-b"] > div:first-child { display: none !important; } pre div[data-tooltip-id] { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; cursor: pointer !important; background: transparent !important; border: none !important; pointer-events: auto; z-index: 3; } pre div[data-tooltip-id] .style_copyIcon__GJL9e { display: none !important; } pre div[node="[object Object]"] { position: relative; z-index: 1; display: block !important; pointer-events: none; background: rgba(250,247,240,0.95) !important; border: 1px solid rgba(139,94,60,0.15) !important; border-left: 3px solid #8B5E3C !important; box-shadow: 0 4px 15px rgba(26,15,0,0.04) !important; color: #1A0F00 !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; font-size: 1.05em !important; padding: 14px 20px 14px 60px !important; margin: 0 !important; border-radius: 10px !important; min-height: 55px; white-space: pre-wrap; word-break: break-word; transition: all 0.3s ease; counter-increment: option-counter; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } pre div[node="[object Object]"]::before { content: counter(option-counter); display: flex; align-items: center; justify-content: center; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: linear-gradient(135deg, #8B5E3C, #4A2C1B) !important; color: #fff; border-radius: 50%; font-size: 0.95em; font-weight: 700; border: 2px solid rgba(212,165,116,0.3); box-shadow: 0 2px 8px rgba(139,94,60,0.3); z-index: 2; } pre div[node="[object Object]"] code { display: block; color: inherit !important; background: transparent !important; padding: 0 !important; font-family: inherit !important; font-size: inherit !important; white-space: pre-wrap; } pre div[data-tooltip-id]::before { content: '抉擇'; position: absolute; top: 50%; right: 18px; transform: translateY(-50%) scale(0.9); background: linear-gradient(135deg, #8B5E3C, #4A2C1B); color: #ffffff; font-size: 0.85em; font-weight: 700; font-family: 'STKaiti', 'KaiTi', serif; padding: 6px 14px; border-radius: 8px; letter-spacing: 2px; opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 5; box-shadow: 0 4px 12px rgba(139,94,60,0.25); border: 1px solid rgba(212,165,116,0.25); } pre:hover div[data-tooltip-id]::before { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } pre:hover div[node="[object Object]"] { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(26,15,0,0.08) !important; background: rgba(255,255,255,0.98) !important; border-color: #8B5E3C !important; } pre:active div[node="[object Object]"] { transform: translateY(1px) !important; background: rgba(237,229,216,0.95) !important; border-color: #4A2C1B !important; } pre:active div[data-tooltip-id]::before { content: '已定 ✓'; background: linear-gradient(135deg, #4A2C1B, #2C1810); } /* ============================================= * 4.10. 其他UI组件 * ============================================= */ .doc { background: #FAF7F0; border: 1px solid rgba(139,94,60,0.12); border-left: 3px solid #8B5E3C; border-radius: 10px; padding: 16px 20px; margin: 16px 0; position: relative; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; box-shadow: 0 3px 12px rgba(26,15,0,0.03); overflow: hidden; } .doc::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(139,94,60,0.015) 1px, rgba(139,94,60,0.015) 2px); pointer-events: none; z-index: 0; } .doc::after { content: '⚔ 飞鸽传书 //'; position: absolute; top: 10px; right: 15px; font-size: 0.65em; color: #4A2C1B; letter-spacing: 3px; font-weight: 700; animation: ink-glow 4s ease-in-out infinite; z-index: 2; } .doc > * { position: relative; z-index: 1; } .doc .title { color: #4A2C1B; font-size: 1.3em; font-weight: 700; margin: 0 0 14px 0; padding-bottom: 10px; border-bottom: 1px solid rgba(139,94,60,0.12); letter-spacing: 2px; } .doc .title::before { content: '▸'; margin-right: 12px; color: #8B5E3C; } .doc .content { color: #1A0F00; font-size: 0.95em; line-height: 1.7; } .doc .content p { margin: 0 0 0.8em 0; text-align: justify; } .doc .content p:last-child { margin-bottom: 0; } /* 进度条 */ .progress-bar-container { position: relative; width: 100%; height: 20px; background: rgba(212,165,116,0.1); border: 1px solid rgba(139,94,60,0.12); border-radius: 8px; margin: 8px 0; overflow: hidden; } .progress-bar-container.hp { border-color: rgba(139,94,60,0.2); } .progress-bar-container.sp { border-color: rgba(74,107,122,0.2); } .progress-bar-container.armor { border-color: rgba(107,74,122,0.2); } .progress-bar-fill { position: absolute; left: 0; top: 0; height: 100%; transition: width 0.7s ease-out; box-shadow: inset 0 0 8px rgba(255,255,255,0.3); } .progress-bar-container.hp .progress-bar-fill { background: linear-gradient(90deg, #8B5E3C, #A07050); } .progress-bar-container.sp .progress-bar-fill { background: linear-gradient(90deg, #4A6B7A, #6A8FA0); } .progress-bar-container.armor .progress-bar-fill { background: linear-gradient(90deg, #6B4A7A, #8A6A9A); } .progress-bar-label { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 0.75em; color: #fff; text-shadow: 0 0 3px rgba(26,15,0,0.5); z-index: 2; } .progress-bar-value { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 0.75em; color: #1A0F00; text-shadow: 0 1px 2px rgba(255,255,255,0.8); z-index: 2; font-family: 'Consolas', monospace; } .classUI-story { background: rgba(255,255,255,0.7); border: 1px solid rgba(139,94,60,0.1); border-radius: 10px; padding: 16px 20px; margin: 16px 0; color: #1A0F00; font-size: 16px; line-height: 1.8; box-shadow: 0 4px 12px rgba(26,15,0,0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; letter-spacing: 0.5px; } .classUI-story::before, .classUI-story::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: rgba(139,94,60,0.2); border-style: solid; transition: all 0.4s ease; } .classUI-story::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; } .classUI-story::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; } .classUI-story:hover::before, .classUI-story:hover::after { border-color: #8B5E3C; } .classUI-subsection { font-weight: 700; color: #4A2C1B; margin: 16px 0 10px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(139,94,60,0.12); font-size: 15px; letter-spacing: 1.5px; } .classUI-npc-card { background: rgba(255,255,255,0.8); border: 1px solid rgba(139,94,60,0.06); border-radius: 10px; padding: 14px; margin: 12px 0; box-shadow: 0 2px 8px rgba(26,15,0,0.03); transition: all 0.4s ease; } .classUI-npc-card:hover { background: rgba(255,255,255,0.95); border-color: rgba(139,94,60,0.15); } .classUI-npc-name { font-size: 17px; font-weight: 700; color: #1A0F00; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(139,94,60,0.12); letter-spacing: 1.5px; } .classUI-memory { background: transparent; border-color: rgba(139,94,60,0.06); padding-bottom: 0; } .classUI-memory-section { margin: 0 0 16px 0; padding: 0; background: transparent; border: none; } .classUI-table { width: 100%; border-collapse: collapse; margin-top: 10px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(139,94,60,0.12); } .classUI-table thead th { background: #EDE5D8; color: #1A0F00; padding: 10px; font-weight: 700; font-size: 14px; text-align: center; border-bottom: 2px solid #8B5E3C; } .classUI-table tbody td { padding: 10px; border-bottom: 1px solid rgba(139,94,60,0.06); background: #FAF7F0; font-size: 14px; color: #1A0F00; vertical-align: middle; transition: background-color 0.4s ease; font-family: 'Consolas', monospace; } .classUI-table tbody tr:last-child td { border-bottom: none; } .classUI-table tbody tr:hover td { background: #F5F0E8; } .classUI-actions { background: rgba(255,255,255,0.85); border: 1px solid rgba(139,94,60,0.12); border-radius: 10px; padding: 16px 20px; margin-top: 16px; color: #1A0F00; font-weight: 600; font-size: 16px; line-height: 1.8; box-shadow: 0 4px 12px rgba(26,15,0,0.03); } .styled-prose-container wealth_info, .styled-prose-container item_list, .styled-prose-container spell_card_list { display: block; margin: 12px 0; padding: 12px 16px; background: #FAF7F0; border: 1px solid rgba(139,94,60,0.1); border-left: 3px solid #8B5E3C; border-radius: 10px; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; line-height: 1.8; box-shadow: inset 0 0 10px rgba(245,240,232,0.8); transition: all 0.4s ease; position: relative; overflow: visible; } .styled-prose-container wealth_info:hover, .styled-prose-container item_list:hover, .styled-prose-container spell_card_list:hover { background: #FFFFFF; border-color: rgba(139,94,60,0.2); } .styled-prose-container wealth_info > span, .styled-prose-container item_list > span, .styled-prose-container spell_card_list > span { display: block; color: #4A2C1B; font-weight: 700; margin-bottom: 8px; font-size: 14px; letter-spacing: 1.5px; } .styled-prose-container spell_card_list info { display: inline-block; color: #8B0000; font-weight: 600; font-size: 14px; margin-right: 6px; } .tip-r { display: block; color: #8B0000 !important; background: rgba(139,0,0,0.04); border: 1px solid rgba(139,0,0,0.2); border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-weight: 700; font-size: 14px; text-align: center; animation: ribbon-breathe 3.5s infinite ease-in-out; } /* ============================================= * 通讯模块: news — 江湖消息栏 * ============================================= */ .styled-prose-container news { display: block !important; margin: 20px 0 !important; padding: 0 !important; background: #FAF7F0 !important; border: 1px solid rgba(139,94,60,0.18) !important; border-radius: 12px !important; position: relative !important; overflow: hidden !important; box-shadow: 0 1px 3px rgba(26,15,0,0.04) !important; font-family: 'STKaiti', 'KaiTi', -apple-system, sans-serif !important; } .styled-prose-container news h3 { font-size: 16px !important; font-weight: 800 !important; margin: 0 !important; padding: 14px 16px !important; background: rgba(250,247,240,0.9) !important; color: #1A0F00 !important; letter-spacing: 1px !important; border-bottom: 1px solid rgba(139,94,60,0.15) !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } .styled-prose-container news h3::before { content: none !important; } .styled-prose-container news item { display: grid !important; grid-template-columns: 40px 1fr !important; gap: 0 12px !important; margin: 0 !important; padding: 14px 16px !important; background: #FAF7F0 !important; border-radius: 0 !important; border-left: none !important; border-bottom: 1px solid rgba(139,94,60,0.1) !important; position: relative !important; line-height: 1.5 !important; font-size: 15px !important; color: #1A0F00 !important; transition: background 0.15s ease !important; } .styled-prose-container news item:last-child { border-bottom: none !important; } .styled-prose-container news item:hover { background: rgba(237,229,216,0.5) !important; } .styled-prose-container news item label { grid-column: 1 !important; grid-row: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; font-size: 10.5px !important; font-weight: 700 !important; color: #fff !important; position: relative !important; overflow: hidden !important; border: none !important; } .styled-prose-container news item.h label { background: linear-gradient(135deg, #8B5E3C, #6B4030) !important; } .styled-prose-container news item.e label { background: linear-gradient(135deg, #6B4A7A, #5A3A6A) !important; } .styled-prose-container news item.t label { background: linear-gradient(135deg, #3D6B2E, #2D5016) !important; } .styled-prose-container news item.m label { background: linear-gradient(135deg, #4A6B7A, #3A5A6A) !important; } .styled-prose-container news item.h::after, .styled-prose-container news item.e::after, .styled-prose-container news item.t::after, .styled-prose-container news item.m::after { content: '♡ · 💬 · ↻' !important; grid-column: 2 !important; display: flex !important; margin-top: 10px !important; font-size: 13px !important; color: #8B7355 !important; letter-spacing: 8px !important; position: static !important; transform: none !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; } .styled-prose-container news item.h label::after { content: '✓' !important; position: absolute !important; bottom: -2px !important; right: -2px !important; width: 16px !important; height: 16px !important; background: #8B5E3C !important; border-radius: 50% !important; border: 2px solid #FAF7F0 !important; font-size: 8px !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ============================================= * 通讯模块: board — 飞鸽传书 * ============================================= */ .styled-prose-container board { display: block !important; margin: 20px 0 !important; padding: 0 !important; background: linear-gradient(180deg, #F5F0E8 0%, #EDE5D8 50%, #F0EBE0 100%) !important; border: 1px solid rgba(139,94,60,0.18) !important; border-radius: 12px !important; position: relative !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(26,15,0,0.05) !important; font-family: 'STKaiti', 'KaiTi', -apple-system, sans-serif !important; } .styled-prose-container board h3 { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; padding: 14px 50px !important; background: linear-gradient(135deg, rgba(139,94,60,0.92), rgba(74,44,27,0.88)) !important; color: #fff !important; letter-spacing: 2px !important; border-bottom: 1px solid rgba(74,44,27,0.3) !important; text-align: center !important; position: relative !important; text-shadow: 0 1px 3px rgba(40,20,10,0.4) !important; } .styled-prose-container board h3::before { content: '📜' !important; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; opacity: 0.85 !important; } .styled-prose-container board h3::after { content: '⚔' !important; position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; color: rgba(255,255,255,0.5) !important; width: auto !important; height: auto !important; background-image: none !important; } .styled-prose-container board item { display: grid !important; grid-template-columns: 40px 1fr !important; gap: 0 10px !important; margin: 0 !important; padding: 8px 14px !important; background: transparent !important; border-radius: 0 !important; border-left: none !important; position: relative !important; line-height: 1.55 !important; font-size: 14px !important; color: #1A0F00 !important; align-items: start !important; } .styled-prose-container board item:first-of-type { padding-top: 14px !important; } .styled-prose-container board item:last-of-type { padding-bottom: 16px !important; } .styled-prose-container board item label { grid-column: 1 !important; grid-row: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; font-size: 10px !important; font-weight: 700 !important; color: #fff !important; position: relative !important; border: 2px solid rgba(255,255,255,0.6) !important; box-shadow: 0 2px 8px rgba(26,15,0,0.08) !important; align-self: start !important; margin-top: 2px !important; } .styled-prose-container board item.c label { background: linear-gradient(135deg, #8B5E3C, #4A2C1B) !important; } .styled-prose-container board item.r label { background: linear-gradient(135deg, #6B4A7A, #5A3A6A) !important; } .styled-prose-container board item.w label { width: auto !important; height: auto !important; min-width: 0 !important; border-radius: 10px !important; padding: 4px 14px !important; font-size: 11px !important; background: rgba(74,44,27,0.1) !important; color: #4A2C1B !important; border: 1px solid rgba(139,94,60,0.15) !important; box-shadow: none !important; } .styled-prose-container board item.m label { background: linear-gradient(135deg, #4A6B7A, #3A5A6A) !important; } .styled-prose-container board item:not(.w)::before { content: '' !important; position: absolute !important; top: 6px !important; left: 58px !important; right: 14px !important; bottom: 6px !important; background: rgba(255,255,255,0.88) !important; border-radius: 4px 12px 12px 12px !important; border: 1px solid rgba(139,94,60,0.08) !important; box-shadow: 0 1px 4px rgba(26,15,0,0.04) !important; z-index: 0 !important; pointer-events: none !important; } .styled-prose-container board item > *:not(label) { position: relative !important; z-index: 1 !important; } .styled-prose-container board item::after { content: '' !important; position: absolute !important; left: 53px !important; top: 18px !important; width: 0 !important; height: 0 !important; border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-right: 7px solid rgba(255,255,255,0.88) !important; background: none !important; transform: none !important; box-shadow: none !important; border-radius: 0 !important; z-index: 1 !important; pointer-events: none !important; } .styled-prose-container board item.w { display: flex !important; justify-content: center !important; text-align: center !important; padding: 4px 14px !important; } .styled-prose-container board item.w::before { display: none !important; } .styled-prose-container board item.w::after { display: none !important; } .styled-prose-container board item.c label::after, .styled-prose-container board item.r label::after { content: '⚔' !important; position: absolute !important; top: -4px !important; right: -4px !important; font-size: 9px !important; background: none !important; border: none !important; box-shadow: none !important; } .styled-prose-container board::after { content: '' !important; display: block !important; height: 44px !important; background: linear-gradient(180deg, rgba(237,229,216,0.95) 0%, rgba(230,222,210,0.98) 100%) !important; border-top: 1px solid rgba(139,94,60,0.12) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44'%3E%3Crect x='12' y='8' width='240' height='28' rx='14' fill='%23fff' stroke='%23D4A574' stroke-width='0.8'/%3E%3Ctext x='26' y='27' font-size='13' fill='%238B5E3C' font-family='STKaiti, serif'%3EAa%3C/text%3E%3Ccircle cx='280' cy='22' r='14' fill='%238B5E3C'/%3E%3Cpath d='M274,22 L278,26 L286,18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } .styled-prose-container board item msg { display: inline-block !important; position: relative !important; z-index: 2 !important; color: #1A0F00 !important; font-size: 14px !important; font-weight: 500 !important; word-break: break-word !important; align-self: center !important; } /* ============================================= * 5. 系统覆盖 * ============================================= */ .group.ml-0 > .flex.items-start.gap-2 { font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; background-color: #FAF7F0 !important; border-radius: 10px !important; padding: 12px 16px !important; width: 100% !important; box-shadow: 0 3px 10px rgba(26,15,0,0.03) !important; border: 1px solid rgba(139,94,60,0.08) !important; transition: all 0.4s ease !important; } .group.ml-0 > .flex.items-start.gap-2:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(26,15,0,0.06) !important; background-color: #FFFFFF !important; border-color: rgba(139,94,60,0.18) !important; } .group.ml-0 .break-all { white-space: pre-wrap !important; line-height: 1.6 !important; color: #1A0F00 !important; } .group.ml-0 > .flex.items-start.gap-2 .text-grey-600, .group.ml-0 > .flex.items-start.gap-2 .text-gray-500, .group.ml-0 > .flex.items-start.gap-2 .text-gray-400, .group.ml-0 > .flex.items-start.gap-2 .font-bold { color: #1A0F00 !important; } div.style_divider__mW0YX.style_horizontal__UvaHt { margin-top: 10px !important; margin-bottom: 10px !important; border-top: 1px solid rgba(139,94,60,0.12) !important; background: none !important; } .MuiButtonBase-root.MuiButton-root.css-1t7rg57, .MuiButtonBase-root.MuiButton-root { font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 1.5px !important; color: #4A2C1B !important; background: transparent !important; border: 1px solid rgba(139,94,60,0.25) !important; padding: 4px 12px !important; border-radius: 8px !important; transition: all 0.4s ease !important; } .MuiButtonBase-root.MuiButton-root:hover { color: #8B5E3C !important; background: rgba(139,94,60,0.06) !important; border-color: #8B5E3C !important; transform: translateY(-2px); } /* 隐藏元素 */ think { display: none !important; } .mb-2 .shrink-0 { display: none; } [class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none; } /* 全局防斜体 */ .styled-prose-container em, .styled-prose-container i:not([class]) { font-style: normal !important; } /* ============================================= * 6. 响应式 (Responsive) * ============================================= */ @media (max-width: 768px) { * { transition: none !important; } .bubble:hover, .group.ml-0 > .flex.items-start.gap-2:hover, .styled-prose-container details:hover, pre:hover div[node="[object Object]"] { transform: none !important; } .bubble.npc, .bubble.user, .classUI-story, .classUI-npc-card, .classUI-actions, div.group.relative > div.relative.inline-block.bg-gray-100\/90, .styled-prose-container T Ti, .sticky.w-full.top-0.flex.items-center, .p-\[5\.5px\].max-h-\[150px\], div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq), div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]), div[class*="absolute"][class*="bottom-0"], pre div[node="[object Object]"], #ai-chat-answer:last-of-type .env-sidebar[open], #ai-chat-answer:last-of-type .u[open], #ai-chat-answer:last-of-type .n[open], #ai-chat-answer:last-of-type details.p[open], #ai-chat-answer:last-of-type details.n[open], #ai-chat-answer:last-of-type details.ship[open], #ai-chat-answer:last-of-type details.m[open], #ai-chat-answer:last-of-type details.e[open], .chat-answer-container .bg-gray-100\/90.relative.inline-block, .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .bubble.npc, .bubble.user { background: #FAF7F0; } .classUI-story, div.group.relative > div.relative.inline-block.bg-gray-100\/90 { background: #FFFFFF; } div[class*="absolute"][class*="bottom-0"] { background: #F5F0E8; } .chat, .bubble, .doc, .styled-prose-container details, .classUI-story, .classUI-npc-card, .classUI-table, .classUI-actions, .sticky.w-full.top-0.flex.items-center, .p-\[5\.5px\].max-h-\[150px\], #ai-chat-input, #ai-send-button, div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq), .styled-prose-container T Ti, div[class*="absolute"][class*="bottom-0"], div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]), #ai-chat-answer:last-of-type .env-sidebar[open], #ai-chat-answer:last-of-type .u[open], #ai-chat-answer:last-of-type .n[open], #ai-chat-answer:last-of-type details.p[open], #ai-chat-answer:last-of-type details.n[open], #ai-chat-answer:last-of-type details.ship[open], #ai-chat-answer:last-of-type details.m[open], #ai-chat-answer:last-of-type details.e[open] { box-shadow: none !important; } .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before { width: 22px !important; height: 22px !important; top: -4px !important; right: -4px !important; } .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after { width: 50px !important; height: 50px !important; bottom: -5px !important; left: -5px !important; } #ai-chat-answer:last-of-type .env-sidebar[open], #ai-chat-answer:last-of-type .u[open], #ai-chat-answer:last-of-type .n[open], #ai-chat-answer:last-of-type details.p[open], #ai-chat-answer:last-of-type details.n[open], #ai-chat-answer:last-of-type details.ship[open], #ai-chat-answer:last-of-type details.m[open] { width: 300px !important; } #ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary, #ai-chat-answer:last-of-type .u:not([open]) > summary, #ai-chat-answer:last-of-type .n:not([open]) > summary, #ai-chat-answer:last-of-type details.p:not([open]) > summary, #ai-chat-answer:last-of-type details.n:not([open]) > summary, #ai-chat-answer:last-of-type details.ship:not([open]) > summary, #ai-chat-answer:last-of-type details.m:not([open]) > summary { width: 32px !important; min-height: 70px !important; font-size: 11px !important; letter-spacing: 2px !important; } #ai-chat-answer:last-of-type details.p { top: 55px !important; } #ai-chat-answer:last-of-type details.n, #ai-chat-answer:last-of-type .n { top: 140px !important; } #ai-chat-answer:last-of-type details.ship { top: 330px !important; } #ai-chat-answer:last-of-type details.m { top: 225px !important; } #ai-chat-answer:last-of-type details.p:not([open]) > summary::before, #ai-chat-answer:last-of-type details.n:not([open]) > summary::before, #ai-chat-answer:last-of-type details.ship:not([open]) > summary::before, #ai-chat-answer:last-of-type details.m:not([open]) > summary::before { width: 14px !important; height: 14px !important; top: 5px !important; } #ai-chat-answer:last-of-type details.p:not([open]) > summary::after, #ai-chat-answer:last-of-type details.ship:not([open]) > summary::after { width: 12px !important; height: 12px !important; bottom: 5px !important; } /* 移动端 top-info 改为竖排 */ .top-info { flex-direction: column !important; } .top-info > time, .top-info > position { border-right: none !important; border-bottom: 1px solid rgba(139,94,60,0.12) !important; } .top-info > time, .top-info > position, .top-info > env { min-width: 0 !important; padding: 10px 12px !important; font-size: 13px !important; } .top-info > time::before, .top-info > position::before, .top-info > env::before { font-size: 9px !important; padding: 4px 8px !important; } .top-info > area-map { padding: 10px !important; } .top-info > area-map::before { font-size: 9px !important; padding: 4px 8px !important; } .top-info > area-map > region { padding: 8px 12px !important; font-size: 13px !important; } .top-info:hover > quest { padding-left: 70px !important; } .top-info > quest > q { padding: 8px 12px !important; font-size: 13px !important; } /* 移动端 .m 折叠标签修正 */ #ai-chat-answer:last-of-type details.m:not([open]) > summary { min-height: 110px !important; overflow: visible !important; font-size: 0 !important; /* ← 加这行 */ line-height: 0 !important; /* ← 加这行 */ color: transparent !important; /* ← 加这行 */ } #ai-chat-answer:last-of-type details.m:not([open]) > summary::after { font-size: 11px !important; letter-spacing: 2px !important; } details[inv] { --grid-size: 50px !important; --gap: 5px !important; --panel-h: 960px !important; } details[inv] > summary { font-size: 13px !important; padding: 8px 12px 8px 32px !important; } details[inv] > panel { padding: 32px 10px 10px 10px !important; } details[inv] > panel > b { font-size: 10px !important; } details[inv] > panel > b > i { width: 125px !important; max-width: 50vw !important; font-size: 10px !important; } .k-track { margin: 10px 0 !important; } .k-head { padding: 10px 14px 10px 38px !important; font-size: 13px !important; } .k-row { padding: 8px 10px 8px 44px !important; } .k-tag { width: 24px !important; height: 24px !important; font-size: 11px !important; } pre div[node="[object Object]"] { padding: 12px 16px 12px 52px !important; font-size: 1em !important; background: #FAF7F0 !important; } pre div[node="[object Object]"]::before { width: 24px; height: 24px; font-size: 0.85em; left: 14px; } pre div[data-tooltip-id]::before { display: none !important; } .styled-prose-container news { border-radius: 10px !important; } .styled-prose-container news item { padding: 12px 14px !important; font-size: 14px !important; grid-template-columns: 34px 1fr !important; } .styled-prose-container news item label { width: 34px !important; height: 34px !important; min-width: 34px !important; } .styled-prose-container board { border-radius: 10px !important; } .styled-prose-container board h3 { font-size: 15px !important; padding: 12px 44px !important; } .styled-prose-container board item { grid-template-columns: 36px 1fr !important; padding: 7px 12px !important; } .styled-prose-container board item label { width: 36px !important; height: 36px !important; min-width: 36px !important; } .styled-prose-container board item:not(.w)::before { left: 52px !important; } .styled-prose-container board item::after { left: 47px !important; } /* 移动端 江湖传闻 */ .styled-prose-container .n-part { padding: 10px 12px !important; } .styled-prose-container .n-txt { font-size: 16px !important; padding: 4px 8px !important; } } @media (max-width: 480px) { #ai-chat-answer:last-of-type .env-sidebar[open], #ai-chat-answer:last-of-type .u[open], #ai-chat-answer:last-of-type .n[open], #ai-chat-answer:last-of-type details.p[open], #ai-chat-answer:last-of-type details.n[open], #ai-chat-answer:last-of-type details.ship[open], #ai-chat-answer:last-of-type details.m[open] { width: 270px !important; } #ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary, #ai-chat-answer:last-of-type .u:not([open]) > summary, #ai-chat-answer:last-of-type .n:not([open]) > summary, #ai-chat-answer:last-of-type details.p:not([open]) > summary, #ai-chat-answer:last-of-type details.n:not([open]) > summary, #ai-chat-answer:last-of-type details.ship:not([open]) > summary, #ai-chat-answer:last-of-type details.m:not([open]) > summary { width: 28px !important; min-height: 60px !important; font-size: 10px !important; letter-spacing: 1.5px !important; } #ai-chat-answer:last-of-type details.p { top: 50px !important; } #ai-chat-answer:last-of-type details.n, #ai-chat-answer:last-of-type .n { top: 120px !important; } #ai-chat-answer:last-of-type details.ship { top: 270px !important; } #ai-chat-answer:last-of-type details.m { top: 190px !important; } /* 超小屏 .m 折叠修正 */ #ai-chat-answer:last-of-type details.m:not([open]) > summary { min-height: 95px !important; overflow: visible !important; font-size: 0 !important; /* ← 加这行 */ line-height: 0 !important; /* ← 加这行 */ color: transparent !important; /* ← 加这行 */ } #ai-chat-answer:last-of-type details.m:not([open]) > summary::after { font-size: 10px !important; letter-spacing: 1.5px !important; } details[inv] { --grid-size: 44px !important; --gap: 4px !important; } details[inv] > panel > b { font-size: 9px !important; } details[inv] > panel > b > i { width: 115px !important; font-size: 9px !important; } .top-info > time, .top-info > position, .top-info > env { padding: 8px 10px !important; font-size: 12px !important; } .top-info > time::before, .top-info > position::before, .top-info > env::before { font-size: 8px !important; padding: 3px 7px !important; } .top-info > area-map > region { padding: 7px 10px !important; font-size: 12px !important; } .top-info > quest > q { padding: 7px 10px !important; font-size: 12px !important; } .styled-prose-container news item { grid-template-columns: 30px 1fr !important; gap: 0 8px !important; } .styled-prose-container news item label { width: 30px !important; height: 30px !important; min-width: 30px !important; } .styled-prose-container board item { grid-template-columns: 34px 1fr !important; gap: 0 8px !important; padding: 6px 10px !important; } .styled-prose-container board item label { width: 34px !important; height: 34px !important; min-width: 34px !important; } .styled-prose-container board item:not(.w)::before { left: 48px !important; right: 10px !important; } .styled-prose-container board item::after { left: 43px !important; } .styled-prose-container board::after { height: 34px !important; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } .k-row.e.pulse, .k-row.g.pulse, .k-bar::before, .k-head::before, .k-none::before, details[inv] > panel > b[q="yuangu"] { animation: none !important; } .k-bar::after { transition: none !important; } .k-row:hover, details[inv] > panel > b:hover { transform: none !important; } .chat-answer-container .bg-gray-100\/90.relative.inline-block::before, .chat-answer-container .bg-gray-100\/90.relative.inline-block::after, .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before, .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after { animation: none !important; } .sticky.w-full.top-0.flex.items-center::before, .sticky.w-full.top-0.flex.items-center::after { animation: none !important; } #ai-chat-answer:last-of-type details.p:not([open]) > summary, #ai-chat-answer:last-of-type details.n:not([open]) > summary, #ai-chat-answer:last-of-type details.ship:not([open]) > summary, #ai-chat-answer:last-of-type details.m:not([open]) > summary { animation: none !important; } .styled-prose-container [class*=card-body-chuanqi] { animation: none; } .top-info::before { animation: none !important; } } /* ============================================= * BGM播放器 — 武侠水墨版 * ============================================= */ @keyframes bgm-glow-pulse-wuxia { 0%, 100% { box-shadow: 0 3px 16px rgba(139,94,60,0.15); } 50% { box-shadow: 0 5px 24px rgba(139,94,60,0.32), 0 0 0 3px rgba(139,94,60,0.06); } } @keyframes bgm-border-flow-wuxia { 0% { border-color: rgba(139,94,60,0.25); } 50% { border-color: rgba(74,44,27,0.45); } 100% { border-color: rgba(139,94,60,0.25); } } audio.classUI-audio-player { display: block !important; width: 100% !important; height: 44px !important; margin: 8px 0 !important; border-radius: 22px !important; outline: none !important; cursor: pointer !important; background: linear-gradient(135deg, rgba(250,247,240,0.98) 0%, rgba(237,229,216,0.95) 50%, rgba(250,247,240,0.98) 100%) !important; border: 1.5px solid rgba(139,94,60,0.25) !important; box-shadow: 0 3px 16px rgba(139,94,60,0.15) !important; animation: bgm-glow-pulse-wuxia 4s ease-in-out infinite, bgm-border-flow-wuxia 4s ease-in-out infinite !important; accent-color: #8B5E3C !important; color-scheme: light !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } audio.classUI-audio-player:hover { box-shadow: 0 5px 24px rgba(139,94,60,0.25), 0 0 0 3px rgba(139,94,60,0.06) !important; border-color: rgba(74,44,27,0.4) !important; } @media (prefers-reduced-motion: reduce) { audio.classUI-audio-player { animation: none !important; box-shadow: 0 2px 8px rgba(139,94,60,0.12) !important; } } @media (max-width: 768px) { audio.classUI-audio-player { height: 40px !important; border-radius: 20px !important; animation: none !important; box-shadow: 0 2px 8px rgba(139,94,60,0.1) !important; } } /* ============================================= * 歌词 — 水墨行吟版 * ============================================= */ @keyframes lyr-glow-wuxia { 0%,100% { text-shadow: 0 0 6px rgba(74,44,27,0.25); } 50% { text-shadow: 0 0 14px rgba(74,44,27,0.5), 0 0 28px rgba(139,94,60,0.2); } } @keyframes lyr-border-wuxia { 0%,100% { border-color: rgba(139,94,60,0.2); } 50% { border-color: rgba(139,94,60,0.45); } } .styled-prose-container lyrics { display: block; position: relative; margin: 20px 0; padding: 28px 24px; background: radial-gradient(ellipse at 30% 30%, rgba(139,94,60,0.05) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(212,165,116,0.06) 0%, transparent 50%), linear-gradient(160deg, #F5F0E8 0%, #EDE5D8 40%, #FAF7F0 100%); border: 2px solid rgba(139,94,60,0.2); border-radius: 12px; text-align: center; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif; line-height: 2.4; color: #4A2C1B; font-size: 15px; letter-spacing: 2px; overflow: hidden; animation: lyr-border-wuxia 4s ease-in-out infinite; box-shadow: 0 4px 20px rgba(26,15,0,0.06), inset 0 0 30px rgba(255,255,255,0.5); } .styled-prose-container lyrics em { display: block; font-style: normal; font-size: 19px; font-weight: 900; color: #8B5E3C; letter-spacing: 4px; padding: 10px 0; animation: lyr-glow-wuxia 2.5s ease-in-out infinite; } @media (max-width: 768px) { .styled-prose-container lyrics { padding: 20px 16px; font-size: 13px; } .styled-prose-container lyrics em { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .styled-prose-container lyrics, .styled-prose-container lyrics em { animation: none; } } /* ============================================= * 3.5b. 装备栏 & 武学品质着色补丁 (equip_list / resonance_list) * ============================================= */ .styled-prose-container equip_list [class*=card-body-rumen] T, .styled-prose-container resonance_list [class*=card-body-rumen] T { color: var(--color-rumen) !important; display: inline-block; } .styled-prose-container equip_list [class*=card-body-zhongduan] T, .styled-prose-container resonance_list [class*=card-body-zhongduan] T { color: var(--color-zhongduan) !important; display: inline-block; } .styled-prose-container equip_list [class*=card-body-gaoduan] T, .styled-prose-container resonance_list [class*=card-body-gaoduan] T { color: var(--color-gaoduan) !important; display: inline-block; } .styled-prose-container equip_list [class*=card-body-zhuanye] T, .styled-prose-container resonance_list [class*=card-body-zhuanye] T { color: var(--color-zhuanye) !important; display: inline-block; } .styled-prose-container equip_list [class*=card-body-chuanqi] T, .styled-prose-container resonance_list [class*=card-body-chuanqi] T { color: var(--color-chuanqi) !important; display: inline-block; } .styled-prose-container equip_list [class*=card-body-rumen] T Ti, .styled-prose-container resonance_list [class*=card-body-rumen] T Ti { border-color: rgba(107,91,77,0.30); } .styled-prose-container equip_list [class*=card-body-zhongduan] T Ti, .styled-prose-container resonance_list [class*=card-body-zhongduan] T Ti { border-color: rgba(74,107,61,0.35); } .styled-prose-container equip_list [class*=card-body-gaoduan] T Ti, .styled-prose-container resonance_list [class*=card-body-gaoduan] T Ti { border-color: rgba(74,107,122,0.35); } .styled-prose-container equip_list [class*=card-body-zhuanye] T Ti, .styled-prose-container resonance_list [class*=card-body-zhuanye] T Ti { border-color: rgba(107,74,122,0.35); } .styled-prose-container equip_list [class*=card-body-chuanqi] T Ti, .styled-prose-container resonance_list [class*=card-body-chuanqi] T Ti { border-color: rgba(139,94,60,0.40); box-shadow: 0 0 10px rgba(139,94,60,0.15), 0 8px 30px rgba(26,15,0,0.1); } .styled-prose-container equip_list [class*=card-body-rumen] T Ti span:first-child, .styled-prose-container resonance_list [class*=card-body-rumen] T Ti span:first-child { color: var(--color-rumen) !important; } .styled-prose-container equip_list [class*=card-body-zhongduan] T Ti span:first-child, .styled-prose-container resonance_list [class*=card-body-zhongduan] T Ti span:first-child { color: var(--color-zhongduan) !important; } .styled-prose-container equip_list [class*=card-body-gaoduan] T Ti span:first-child, .styled-prose-container resonance_list [class*=card-body-gaoduan] T Ti span:first-child { color: var(--color-gaoduan) !important; } .styled-prose-container equip_list [class*=card-body-zhuanye] T Ti span:first-child, .styled-prose-container resonance_list [class*=card-body-zhuanye] T Ti span:first-child { color: var(--color-zhuanye) !important; } .styled-prose-container equip_list [class*=card-body-chuanqi] T Ti span:first-child, .styled-prose-container resonance_list [class*=card-body-chuanqi] T Ti span:first-child { color: var(--color-chuanqi) !important; } /* ============================================= * END OF PART 2 v1.1 * 第二部分结束 — 武侠水墨主题完整 * 新增: area-map/region/quest, 江湖传闻(n-part/t-*), .m定位修正 * ============================================= */ .styled-prose-container fbar { display: block !important; text-align: center !important; font-size: 11px !important; font-weight: 700 !important; color: #8B7355 !important; letter-spacing: 2px !important; padding: 8px 0 !important; margin: 8px 0 0 0 !important; border-top: 1px dashed rgba(139,94,60,0.2) !important; font-family: 'STKaiti', 'KaiTi', 'Georgia', serif !important; }