/* ═══ 配色变量（容器级） ═══ */ ai{--bg:#faf8f6;--card:#fff;--bk:#1c1c1e;--pk:#f2b5bc;--pk2:#f8d7da;--pk3:#d4919a;--bl:#b8d8e8;--bl2:#d4eaf4;--bl3:#8ab4c9;--tx:#2c2c2e;--tx2:#8a8a8e;--bd:#eeebe6;display:block;font-family:'Pretendard','Noto Sans SC','Helvetica Neue',sans-serif;color:var(--tx);background:var(--bg);padding:10px;border-radius:16px;line-height:1.7;font-size:15px;position:relative;overflow:hidden} ai::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px,var(--pk2) .8px,transparent .8px);background-size:24px 24px;opacity:.45;pointer-events:none;z-index:0} ai>*{position:relative;z-index:1} /* ═══ 顶栏 ═══ */ ai hd{display:flex;gap:6px;align-items:center;padding:8px 12px;margin-bottom:10px;background:var(--bk);border-radius:12px;font-size:12px;color:#e8e8e8;flex-wrap:wrap;position:relative;overflow:hidden} ai hd::after{content:'';position:absolute;right:-8px;top:-8px;width:50px;height:50px;background:radial-gradient(circle,var(--pk) 0%,transparent 70%);opacity:.2;border-radius:50%} ai hd i{font-style:normal;padding:3px 10px;border-radius:20px;font-weight:500} ai hd i.t{background:var(--pk);color:#fff} ai hd i.l{background:rgba(184,216,232,.15);color:var(--bl);border:1px solid rgba(184,216,232,.2)} ai hd i.w{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.08)} /* ═══ 正文 ═══ */ ai article{padding:14px;margin-bottom:10px;background:var(--card);border-radius:14px;border:1.5px solid var(--bd);position:relative;overflow:hidden} ai article::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--pk),var(--pk2),var(--bl2),var(--pk));background-size:200% 100%;animation:aShm 5s linear infinite} @keyframes aShm{0%{background-position:200% 0}100%{background-position:-200% 0}} ai article p{margin:0 0 10px;text-align:justify;font-size:15px;text-indent:2em} ai article p:last-child{margin-bottom:0} /* ═══ details / summary ═══ */ ai details{margin-bottom:8px;border-radius:14px;overflow:hidden;background:var(--card);border:1.5px solid var(--bd)} ai details summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:14px;color:var(--tx);background:linear-gradient(90deg,#fff,var(--pk2));list-style:none;display:flex;align-items:center;gap:6px;user-select:none;position:relative} ai details summary::before{content:'▸';font-size:11px;color:var(--pk3);transition:transform .3s} ai details[open]>summary::before{transform:rotate(90deg)} ai details summary::-webkit-details-marker{display:none} ai details summary::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--pk2),transparent)} /* ═══ 卡片横向滚动 ═══ */ ai .bg{display:flex;gap:12px;padding:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--pk2) transparent} ai .bg::-webkit-scrollbar{height:4px} ai .bg::-webkit-scrollbar-thumb{background:var(--pk2);border-radius:4px} ai .bg::-webkit-scrollbar-track{background:transparent} /* ═══ 卡片通用 ═══ */ ai card{display:flex;flex-direction:column;min-width:82%;max-width:88%;scroll-snap-align:center;border-radius:14px;padding:14px;flex-shrink:0;position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s} /* 主角卡 */ ai card:not(.vs){background:var(--card);border:1.5px solid var(--bd);box-shadow:0 2px 10px rgba(242,181,188,.08)} ai card:not(.vs)::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(242,181,188,.04) 14px,rgba(242,181,188,.04) 15px);pointer-events:none} ai card:not(.vs):hover{transform:translateY(-2px) rotate(.2deg);box-shadow:0 6px 18px rgba(242,181,188,.12)} /* NPC卡 · 向左看*/ ai card.vs{background:var(--bk);color:#e8e6e2;border:1.5px solid #2a2a2a;box-shadow:-5px 3px 18px rgba(0,0,0,.2);transform:perspective(900px) rotateY(-2.5deg);transform-origin:right center} ai card.vs::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 2px,rgba(242,181,188,.08) .8px,transparent .8px);background-size:18px 18px;pointer-events:none} ai card.vs::after{content:'';position:absolute;left:0;top:0;bottom:0;width:35px;background:linear-gradient(90deg,rgba(242,181,188,.08),transparent);pointer-events:none;border-radius:14px 0 0 14px} ai card.vs:hover{transform:perspective(900px) rotateY(-1deg) translateY(-2px);box-shadow:-3px 5px 22px rgba(242,181,188,.1)} /* ═══ 双100爆发 · card.vs.x ═══ */ ai card.vs.x{border-color:var(--pk);box-shadow:-5px 3px 24px rgba(242,181,188,.3),0 0 40px rgba(242,181,188,.1);animation:aXPulse 2s ease-in-out infinite} ai card.vs.x::before{background:radial-gradient(circle 2.5px,rgba(242,181,188,.18) 1px,transparent 1px);background-size:16px 16px;animation:aXDrift 8s linear infinite} ai card.vs.x::after{width:50px;background:linear-gradient(90deg,rgba(242,181,188,.2),transparent);animation:aXGlow 2s ease-in-out infinite alternate} @keyframes aXPulse{0%,100%{box-shadow:-5px 3px 24px rgba(242,181,188,.3),0 0 40px rgba(242,181,188,.08)}50%{box-shadow:-5px 3px 30px rgba(242,181,188,.45),0 0 60px rgba(242,181,188,.15)}} @keyframes aXDrift{0%{background-position:0 0}100%{background-position:36px 36px}} @keyframes aXGlow{0%{opacity:.6}100%{opacity:1}} ai card.vs.x bar{background:linear-gradient(90deg,var(--pk),#e89aab,var(--pk));animation:aXBar 1.5s ease-in-out infinite alternate} @keyframes aXBar{0%{filter:brightness(1)}100%{filter:brightness(1.3)}} /* ═══ 卡片内部 ═══ */ ai top{display:block;font-size:10px;letter-spacing:3px;text-transform:uppercase;opacity:.35;font-weight:700;margin-bottom:8px} ai mid{display:flex;align-items:center;gap:10px;margin-bottom:12px} ai av{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;font-weight:800;font-size:15px;flex-shrink:0;position:relative} ai card:not(.vs) av{background:linear-gradient(135deg,var(--pk),var(--pk2));color:#fff;box-shadow:0 2px 8px rgba(242,181,188,.25)} ai card.vs av{background:linear-gradient(135deg,var(--bl),var(--bl2));color:var(--bk);box-shadow:0 2px 8px rgba(184,216,232,.25)} ai av::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px dashed currentColor;opacity:.15;animation:aSp 14s linear infinite} @keyframes aSp{to{transform:rotate(360deg)}} ai info{flex:1;min-width:0} ai info h3{margin:0;font-size:16px;font-weight:800;line-height:1.3} ai card.vs info h3{color:var(--pk2)} ai info>p{margin:2px 0 0!important;font-size:11px;opacity:.5;text-indent:0!important} ai mt{display:flex;flex-direction:column;gap:4px} ai d{display:flex;align-items:baseline;gap:6px;font-size:13px;line-height:1.5} ai d.w{flex-direction:column;gap:1px} ai l{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px;flex-shrink:0;min-width:40px} ai card:not(.vs) l{color:var(--pk3)} ai card.vs l{color:var(--bl)} ai v{font-size:13px;opacity:.85;word-break:break-word} /* ═══ 精确进度条 · d.br ═══ */ ai d.br{position:relative;flex-direction:column;gap:3px} ai d.br v{position:relative;font-size:12px;font-weight:600;font-family:monospace;letter-spacing:.5px;opacity:1;padding-left:0} ai d.br v::before{content:'';display:block;width:100%;height:6px;border-radius:3px;margin-bottom:3px;position:relative;overflow:hidden} ai card.vs d.br v::before{background:rgba(255,255,255,.08)} ai d.br v::after{content:'';position:absolute;top:0;left:0;height:6px;border-radius:3px;width:calc(var(--v) * 1%);transition:width .6s cubic-bezier(.22,.61,.36,1)} /*欲望值配色（第一个 d.br） */ ai card.vs d.br:nth-of-type(1) v::after{background:linear-gradient(90deg,var(--pk2),var(--pk))} ai card.vs d.br:nth-of-type(1) v{color:var(--pk2)} /* 忍耐度配色（第二个 d.br） */ ai card.vs d.br:nth-of-type(2) v::after{background:linear-gradient(90deg,var(--bl2),var(--bl))} ai card.vs d.br:nth-of-type(2) v{color:var(--bl)} /* 高值警告 ≥80*/ ai card.vs d.br v[style*="--v:8"]::after,ai card.vs d.br v[style*="--v:9"]::after{filter:brightness(1.15)} /* 满值100 */ ai card.vs d.br v[style*="--v:100"]::after{animation:aFull 1s ease-in-out infinite alternate} @keyframes aFull{0%{filter:brightness(1)}100%{filter:brightness(1.3) drop-shadow(0 0 4px var(--pk))}} ai bar{display:block;height:2.5px;margin-top:12px;border-radius:3px;position:relative;overflow:hidden} ai card:not(.vs) bar{background:linear-gradient(90deg,var(--pk),var(--pk2),var(--bl2))} ai card.vs bar{background:linear-gradient(90deg,var(--bl),var(--pk2),var(--pk))} ai bar::after{content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:aBg 3.5s ease-in-out infinite} @keyframes aBg{0%{left:-30%}100%{left:130%}} /* ═══ 记忆回廊 ═══ */ ai sec{padding:10px 14px} ai sec+sec{border-top:1px dashed var(--bd)} ai sec t{display:block;font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:8px;padding-bottom:4px;border-bottom:1.5px solid transparent} ai .ltm t{color:var(--pk3);border-image:linear-gradient(90deg,var(--pk2),transparent) 1} ai .stm t{color:var(--bl3);border-image:linear-gradient(90deg,var(--bl2),transparent) 1} ai mem{display:flex;gap:8px;align-items:flex-start;padding:6px 0;position:relative} ai mem+mem{border-top:1px dotted rgba(0,0,0,.05)} ai n{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:10px;font-weight:800;flex-shrink:0;margin-top:2px} ai .ltm n{background:var(--pk2);color:var(--pk3)} ai .stm n{background:var(--bl2);color:var(--bl3)} ai ib{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} ai tm{font-size:10px;opacity:.35;font-family:monospace;letter-spacing:.5px} ai loc{font-size:11px;font-weight:600;color:var(--pk3)} ai .stm loc{color:var(--bl3)} ai txt{font-size:13px;line-height:1.5;opacity:.75} /* ═══ 行动推荐 ═══ */ ai ol{margin:0;padding:8px 14px 12px 30px;list-style:none;counter-reset:act} ai ol li{counter-increment:act;position:relative;padding:7px 10px 7px 0;font-size:13px;line-height:1.5;border-bottom:1px dotted rgba(0,0,0,.05);transition:padding-left .25s,color .25s} ai ol li:last-child{border-bottom:none} ai ol li::before{content:counter(act,decimal-leading-zero);position:absolute;left:-30px;top:7px;font-size:10px;font-weight:800;color:#fff;background:var(--pk);width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;line-height:1} ai ol li:nth-child(even)::before{background:var(--bl);color:var(--bk)} ai ol li:hover{padding-left:6px;color:var(--pk3)} /* ═══ 响应式 ═══ */ @media(max-width:500px){ai card{min-width:78%}ai{padding:6px}ai .bg{padding:10px 8px 12px}ai article{padding:10px}} @media(min-width:600px){ai card{min-width:46%;max-width:50%}} /* ============ 顶部栏：斜纹底 + 双层线 ============ */ .sticky.w-full.top-0.flex.items-center { background: repeating-linear-gradient( -45deg, transparent 0, transparent 8px, rgba(232,220,201,0.35) 8px, rgba(232,220,201,0.35) 9px ), linear-gradient(180deg, #FBF7F2 0%, #F5EEE4 100%) !important; border-bottom: none !important; position: relative !important; font-family: -apple-system, "PingFang SC", "Noto Sans KR", system-ui, sans-serif !important; } .sticky.w-full.top-0.flex.items-center::before { content: "" !important; position: absolute !important; left: 0; right: 0; bottom: 3px !important; height: 1px !important; background: #E8DCC9 !important; opacity: 0.7 !important; } .sticky.w-full.top-0.flex.items-center::after { content: "" !important; position: absolute !important; left: 0; right: 0; bottom: 0 !important; height: 1px !important; background: repeating-linear-gradient(90deg, #B3C8D6 0, #B3C8D6 6px, transparent 6px, transparent 12px) !important; opacity: 0.55 !important; } /* 模型选择器：双色边框 + 悬浮露出樱粉小色块 */ #ai-model-selector .group.flex.items-center { background: #FBF7F2 !important; border: 1.5px solid #E8DCC9 !important; border-left: 3px solid #B3C8D6 !important; border-radius: 12px !important; padding: 4px 10px 4px 12px !important; position: relative !important; overflow: hidden !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } #ai-model-selector .group.flex.items-center::before { content: "" !important; position: absolute !important; top: 0; bottom: 0; right: 0 !important; width: 0 !important; background: linear-gradient(90deg, transparent, rgba(240,181,172,0.22)) !important; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; } #ai-model-selector .group.flex.items-center::after { content: "" !important; position: absolute !important; top: 6px !important; right: 6px !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #F0B5AC !important; transform: scale(0) !important; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; } #ai-model-selector .group.flex.items-center:hover { border-left-color: #F0B5AC !important; background: #FFFDFA !important; } #ai-model-selector .group.flex.items-center:hover::before { width: 60% !important; } #ai-model-selector .group.flex.items-center:hover::after { transform: scale(1) !important; } #ai-model-selector .truncate.text-\[13px\] { color: #5A5044 !important; font-weight: 500 !important; letter-spacing: 0.3px !important; position: relative !important; z-index: 1 !important; } #ai-model-selector .shrink-0.flex.items-center svg { color: #8FAFC2 !important; transition: all 0.35s ease !important; position: relative !important; z-index: 1 !important; } #ai-model-selector .group.flex.items-center:hover svg { transform: rotate(180deg) !important; color: #E89A8F !important; } /* 顶部裸SVG */ .sticky.w-full.top-0 svg.lucide-clock-8 { color: #7A6E5E !important; transition: all 0.35s ease !important; } .sticky.w-full.top-0 svg.lucide-clock-8:hover { color: #8FAFC2 !important; transform: rotate(-15deg) scale(1.1) !important; } .sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden { background: #F0B5AC !important; box-shadow: 0 0 0 2px #FBF7F2 !important; } .sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) { color: #7A6E5E !important; transition: transform 0.35s ease !important; } .sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover { color: #B8C9A9 !important; transform: rotate(60deg) !important; } /* 设置按钮：双色边 + 悬浮翻转 */ #header-setting-button { background: #FBF7F2 !important; border: 1.5px solid #E8DCC9 !important; border-top: 3px solid #B8C9A9 !important; border-radius: 12px !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } #header-setting-button:hover { background: #F5E9DC !important; border-top-color: #F0B5AC !important; transform: rotate(90deg) !important; } #header-setting-button svg { color: #7A6E5E !important; } /* ============ 开场白：虚线胶囊 + 撞色小点 ============ */ div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] { background: #FDFAF5 !important; border: 1.5px dashed #C9D9E3 !important; border-radius: 20px !important; transition: all 0.35s ease !important; position: relative !important; } div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]::before { content: "" !important; position: absolute !important; left: -3px; top: 50% !important; width: 6px; height: 6px !important; border-radius: 50% !important; background: #F0B5AC !important; transform: translateY(-50%) !important; box-shadow: 0 0 0 2px #FDFAF5 !important; } div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover { border-style: solid !important; border-color: #B3C8D6 !important; background: #F5FAFC !important; } div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] { color: #8FAFC2 !important; } div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] { color: #A89A8B !important; transition: transform 0.3s ease !important; } /* ============ 底部按钮栏：与顶部模型选择器同款 双色边+悬浮露色块 ============ */ #ai-mod-button2 button.MuiButton-root { background: #FBF7F2 !important; border: 1.5px solid #E8DCC9 !important; border-left: 3px solid #B3C8D6 !important; border-radius: 12px !important; color: #5A5044 !important; font-weight: 500 !important; position: relative !important; overflow: hidden !important; padding: 4px 12px !important; text-transform: none !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } #ai-mod-button2 button.MuiButton-root::before { content: "" !important; position: absolute !important; top: 0; bottom: 0; right: 0 !important; width: 0 !important; background: linear-gradient(90deg, transparent, rgba(240,181,172,0.22)) !important; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; } #ai-mod-button2 button.MuiButton-root::after { content: "" !important; position: absolute !important; top: 6px !important; right: 6px !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #F0B5AC !important; transform: scale(0) !important; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; } #ai-mod-button2 button.MuiButton-root:hover { border-left-color: #F0B5AC !important; background: #FFFDFA !important; } #ai-mod-button2 button.MuiButton-root:hover::before { width: 60% !important; } #ai-mod-button2 button.MuiButton-root:hover::after { transform: scale(1) !important; } #ai-mod-button2 button.MuiButton-root svg { color: #8FAFC2 !important; transition: all 0.3s ease !important; position: relative !important; z-index: 1 !important; } #ai-mod-button2 button.MuiButton-root:hover svg { color: #E89A8F !important; transform: scale(1.15) !important; } /* ============ 底部输入栏：波点纹理 + 虚线描边 ============ */ #ai-chat-bottom-input { background: radial-gradient(circle, rgba(179,200,214,0.18) 1px, transparent 1.5px) 0 0 / 14px 14px, #FDFAF5 !important; border: 1.5px dashed #E8DCC9 !important; border-radius: 18px !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } #ai-chat-bottom-input:focus-within { border-style: solid !important; border-color: #B3C8D6 !important; background: radial-gradient(circle, rgba(240,181,172,0.22) 1px, transparent 1.5px) 0 0 / 14px 14px, #FFFDFA !important; box-shadow: 0 0 0 4px rgba(179,200,214,0.15) !important; } #ai-chat-input { color: #4A4238 !important; font-family: -apple-system, "PingFang SC", system-ui, sans-serif !important; font-size: 14.5px !important; line-height: 1.75 !important; caret-color: #E89A8F !important; background: transparent !important; } #ai-chat-input::placeholder { color: rgba(122,110,94,0.55) !important; letter-spacing: 0.4px !important; } #ai-chat-input::selection { background: rgba(179,200,214,0.4) !important; color: #4A4238 !important; } /* ============ 分页栏：双色边胶囊，与其他按钮呼应但简化版 ============ */ .MuiPaginationItem-root { color: #7A6E5E !important; background: #FBF7F2 !important; border: 1.5px solid #E8DCC9 !important; border-bottom: 2.5px solid #E8DCC9 !important; font-weight: 500 !important; transition: all 0.3s ease !important; } .MuiPaginationItem-root:hover { background: #F5E9DC !important; color: #E89A8F !important; border-bottom-color: #F0B5AC !important; } .MuiPaginationItem-root.Mui-selected { background: #B3C8D6 !important; color: #FBF7F2 !important; border-color: #B3C8D6 !important; border-bottom-color: #F0B5AC !important; box-shadow: 0 3px 10px -3px rgba(143,175,194,0.5) !important; } .MuiPaginationItem-root.Mui-disabled { opacity: 0.4 !important; background: #F5EEE4 !important; } .MuiPaginationItem-icon { color: #8FAFC2 !important; } .MuiStack-root.css-1uwir8f .MuiBox-root { color: #7A6E5E !important; font-size: 13px !important; } .MuiInputBase-input { color: #4A4238 !important; background: #FDFAF5 !important; border-radius: 6px !important; } /* ============ 评论区 ============ */ div[class*="w-full"][class*="bg-white"][class*="bottom-0"] { background: #FBF7F2 !important; font-family: -apple-system, "PingFang SC", "Noto Sans KR", system-ui, sans-serif !important; } div.text-lg.font-bold { color: #4A4238 !important; font-weight: 700 !important; letter-spacing: 0.5px !important; position: relative !important; padding-left: 18px !important; } div.text-lg.font-bold::before { content: "" !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #F0B5AC !important; transform: translateY(-50%) !important; box-shadow: 14px 0 0 -2px #B3C8D6 !important; } /* 评分 */ p.MuiTypography-body1.text-grey-600 { color: #7A6E5E !important; font-weight: 500 !important; } span.MuiRating-iconEmpty svg { color: rgba(240,181,172,0.3) !important; } span.MuiRating-iconFilled svg { color: #F0B5AC !important; filter: drop-shadow(0 1px 2px rgba(232,154,143,0.4)) !important; } span.text-orange-500 { color: #E89A8F !important; font-weight: 700 !important; } /* 评论输入框：单线 + 樱粉焦点 */ div.flex.flex-col.border-gray-200 { background: #FDFAF5 !important; border: 1.5px solid #E8DCC9 !important; border-radius: 14px !important; transition: all 0.3s ease !important; } div.flex.flex-col.border-gray-200:focus-within { border-color: #F0B5AC !important; background: #FFFDFA !important; box-shadow: 0 0 0 4px rgba(240,181,172,0.14) !important; } textarea.rc-textarea { color: #4A4238 !important; background: transparent !important; font-size: 14px !important; line-height: 1.7 !important; caret-color: #E89A8F !important; } textarea.rc-textarea::placeholder { color: rgba(122,110,94,0.5) !important; } div.bg-gray-100.text-gray-500 { background: #F5EEE4 !important; color: #8A7E6E !important; border-radius: 8px !important; } /* 发送按钮：奶油黄圆形 + 弹跳 */ div.cursor-pointer.group.flex.items-center.justify-center { background: linear-gradient(135deg, #F5DFA8, #F0B5AC) !important; border-radius: 50% !important; box-shadow: 0 4px 12px -3px rgba(240,181,172,0.5) !important; transition: all 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; } div.cursor-pointer.group.flex.items-center.justify-center:hover { transform: translateY(-3px) rotate(-15deg) !important; box-shadow: 0 8px 18px -4px rgba(240,181,172,0.65) !important; } div[data-state="closed"] svg[data-icon="Send03"] { color: #FFFDFA !important; } /* 分割线：虚线小段 */ div.style_divider__mW0YX { background: repeating-linear-gradient(90deg, #E8DCC9 0, #E8DCC9 4px, transparent 4px, transparent 10px) !important; height: 1px !important; border: none !important; opacity: 0.7 !important; } /* 排序按钮：撞色胶囊 */ button.MuiButton-containedPrimary { background: #B3C8D6 !important; color: #FBF7F2 !important; border-radius: 20px !important; box-shadow: 0 3px 8px -3px rgba(143,175,194,0.45) !important; text-transform: none !important; font-weight: 500 !important; } button.MuiButton-outlinedPrimary { background: #FBF7F2 !important; color: #7A6E5E !important; border: 1.5px solid #E8DCC9 !important; border-radius: 20px !important; text-transform: none !important; font-weight: 500 !important; transition: all 0.3s ease !important; } button.MuiButton-outlinedPrimary:hover { background: #F5E9DC !important; color: #E89A8F !important; border-color: #F0B5AC !important; } /* 评论卡片：撞色左色带 + 顶部虚线 */ div.group.ml-0 { background: #FDFAF5 !important; border-radius: 14px !important; padding: 12px 14px !important; margin-bottom: 10px !important; position: relative !important; border-left: 4px solid #B3C8D6 !important; box-shadow: 0 2px 6px -3px rgba(122,110,94,0.08) !important; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden !important; } div.group.ml-0::before { content: "" !important; position: absolute !important; top: 10px !important; right: 12px !important; width: 30px !important; height: 1px !important; background: repeating-linear-gradient(90deg, #E8DCC9 0, #E8DCC9 3px, transparent 3px, transparent 6px) !important; } div.group.ml-0:hover { background: #FFFDFA !important; border-left-color: #F0B5AC !important; transform: translateX(3px) !important; box-shadow: 0 5px 14px -5px rgba(240,181,172,0.25) !important; } /* 头像 */ div.group img.rounded-full { border: 2px solid #FBF7F2 !important; box-shadow: 0 0 0 1.5px #E8DCC9, 0 2px 6px -2px rgba(122,110,94,0.2) !important; transition: all 0.35s ease !important; } div.group img.rounded-full:hover { box-shadow: 0 0 0 1.5px #F0B5AC, 0 3px 8px -2px rgba(240,181,172,0.35) !important; transform: scale(1.06) !important; } /* 用户名 & "（你）"标签 */ div.text-sm.text-grey-600 span.font-bold { color: #4A4238 !important; font-weight: 600 !important; } span.text-\[10px\] { background: #B8C9A9 !important; color: #FBF7F2 !important; padding: 1px 6px !important; border-radius: 6px !important; font-weight: 600 !important; margin-left: 5px !important; } /* 评论正文 & 时间 */ div.break-all { color: #4A4238 !important; line-height: 1.75 !important; font-size: 14px !important; } div.text-xs.text-grey-600 { color: #A89A8B !important; } /* 点赞 & 回复 */ button.text-gray-400 { color: #B0A395 !important; transition: all 0.3s ease !important; } button.text-gray-400:hover { color: #F0B5AC !important; transform: scale(1.2) !important; } button.text-gray-400 svg { transition: transform 0.3s ease !important; } span.cursor-pointer { color: #8FAFC2 !important; font-weight: 500 !important; transition: color 0.25s ease !important; } span.cursor-pointer:hover { color: #E89A8F !important; } /* 回复分支 */ div.ml-8.border-l { border-color: #D4C4B0 !important; border-left-style: dashed !important; } .sticky.w-full.top-0.flex.items-center { background: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgba(179,200,214,0.22) 8px, rgba(179,200,214,0.22) 9px), linear-gradient(180deg, #FBF7F2 0%, #F5EEE4 100%) !important; } /* 所有按钮上再加一个左上角的小三角撞色装饰 */ #ai-model-selector .group.flex.items-center, #ai-mod-button2 button.MuiButton-root { background-image: linear-gradient(135deg, rgba(184,201,169,0.3) 0 6px, transparent 6px) !important; background-repeat: no-repeat !important; background-size: 12px 12px !important; background-position: top left !important; } /* ============ 隐藏顶部装饰条 ============ */ [class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; } /* ============ 隐藏默认加载动画 ============ */ .style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text { display: none !important; } /* ============ 盐系韩ins对话气泡 ============ */ .bg-gray-100\/90.relative.inline-block { background: radial-gradient(circle, rgba(179,200,214,0.14) 1px, transparent 1.5px) 0 0 / 16px 16px, linear-gradient(135deg, #FDFAF5 0%, #FBF7F2 55%, #F7F0E7 100%) !important; border: 1.5px solid #E8DCC9 !important; border-left: 3px solid #B3C8D6 !important; border-radius: 22px !important; box-shadow: 0 8px 24px -10px rgba(122,110,94,0.18), 0 2px 6px -3px rgba(179,200,214,0.22), inset 0 1px 0 rgba(255,255,255,0.85) !important; padding: 20px 22px !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; font-family: -apple-system, "PingFang SC", "Noto Sans KR", system-ui, sans-serif !important; } /* 右上角虚线装饰（手账风撕纸感） */ .bg-gray-100\/90.relative.inline-block::before { content: '' !important; position: absolute !important; top: 12px !important; right: 16px !important; width: 34px !important; height: 1px !important; background: repeating-linear-gradient(90deg, #C9BBA6 0, #C9BBA6 3px, transparent 3px, transparent 6px) !important; z-index: 2 !important; pointer-events: none !important; } /* 右下角双色小圆点（樱粉 + 奶油黄撞色） */ .bg-gray-100\/90.relative.inline-block::after { content: '' !important; position: absolute !important; bottom: 14px !important; right: 16px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #F0B5AC !important; box-shadow: -11px 1px 0 -1px #F5DFA8 !important; z-index: 2 !important; pointer-events: none !important; } /* ============ 加载动画容器 ============ */ .flex.items-center.justify-center.w-6.h-5 { position: relative !important; width: 100% !important; min-width: 260px !important; height: 70px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 加载动画: 电话 + 心电波 + 跳动的心 (盐系配色: 咖色电话 / 雾蓝心电波 / 樱粉心) */ .flex.items-center.justify-center.w-6.h-5::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 280px !important; height: 60px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; pointer-events: none !important; } /* ============ 正文文字 ============ */ .markdown-body { color: #4A4238 !important; font-family: -apple-system, "PingFang SC", "Noto Sans KR", "HarmonyOS Sans", system-ui, sans-serif !important; font-size: 15px !important; line-height: 1.8 !important; letter-spacing: 0.3px !important; position: relative !important; z-index: 1 !important; background: transparent !important; } /* 加粗文字: 樱粉色 + 底部高亮荧光笔效果 */ .markdown-body strong, .markdown-body b { font-weight: 600 !important; color: #E89A8F !important; background: linear-gradient(180deg, transparent 65%, rgba(240,181,172,0.28) 65%) !important; padding: 0 2px !important; } /* 斜体: 雾蓝色（内心独白 / 环境描写常用） */ .markdown-body em, .markdown-body i { color: #8FAFC2 !important; font-style: italic !important; } /* 引用块: 左侧虚线色带 */ .markdown-body blockquote { border-left: 3px dashed #B3C8D6 !important; background: rgba(179,200,214,0.06) !important; padding: 8px 14px !important; border-radius: 0 10px 10px 0 !important; color: #5A5044 !important; margin: 10px 0 !important; } /* 行内代码: 奶油黄小色块 */ .markdown-body code { background: rgba(245,223,168,0.35) !important; color: #7A6E5E !important; padding: 1px 6px !important; border-radius: 5px !important; font-size: 0.9em !important; } /* ============ 底部按钮 (延续按钮家族风格) ============ */ .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary { background: #FBF7F2 !important; border: 1.5px solid #E8DCC9 !important; border-radius: 10px !important; color: #7A6E5E !important; text-transform: none !important; font-weight: 500 !important; padding: 3px 10px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover { background: #FFFDFA !important; border-color: #F0B5AC !important; color: #E89A8F !important; transform: translateY(-1px) !important; } .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary svg { transition: transform 0.3s ease !important; } .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover svg { transform: scale(1.1) !important; } /* ============ 移动端适配 ============ */ @media (max-width: 480px) { .bg-gray-100\/90.relative.inline-block { padding: 16px 18px !important; border-radius: 18px !important; } .bg-gray-100\/90.relative.inline-block::before { top: 10px !important; right: 12px !important; width: 28px !important; } .bg-gray-100\/90.relative.inline-block::after { bottom: 11px !important; right: 12px !important; } .flex.items-center.justify-center.w-6.h-5 { min-width: 220px !important; height: 56px !important; } .flex.items-center.justify-center.w-6.h-5::before { width: 230px !important; height: 50px !important; } .markdown-body { font-size: 14px !important; } } @media (prefers-reduced-motion: reduce) { .flex.items-center.justify-center.w-6.h-5::before { opacity: 0.85 !important; } }