/* =========================================================
   【玄碑青瓷】全站沉浸式 UI · 终极气泡穿透版
   基于真实DOM结构 class="is-user:dark flex w-fit..." 定向打击
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;700&display=swap');

:root {
    --stele-bg: #2C2E2A;
    --stele-light: #3A3D38;
    --stele-edge: #16181A;
    --celadon: #88A89B;
    --celadon-deep: #4F6B5F;
    --celadon-glow: #B8D4C7;
    --bronze: #B89568;
    --bronze-deep: #7E5E33;
    --gold-faded: #C9A968;
    --ivory: #E8DFCC;
    --ivory-dim: #A89F8C;
    --rust: #A8483A;
    --moss: #6B7A52;
    
    --stele-texture: 
        linear-gradient(rgba(44, 46, 42, 0.92), rgba(44, 46, 42, 0.92)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.65 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* 全局字体 */
div, span, p, textarea, input, button, summary, td, th, table, li {
    font-family: 'Noto Serif SC', '楷体', 'STKaiti', 'SimSun', serif !important;
}

/* =========================================================
   【核心修复】根据真实DOM结构定向覆盖气泡
   ========================================================= */

/* 1. 最外层容器（.is-user:dark 下的 flex 容器） */
div[class*="is-user"],
div[class*="is-assistant"],
.is-user\:dark,
.group {
    background: transparent !important;
}

/* 2. AI气泡本体（带 bg-card 和 border 的那层） */
div[class*="is-assistant"] > div[class*="flex"][class*="flex-col"],
div[class*="bg-card"],
div[class*="group-\\[.is-assistant\\]:bg-card"],
div[class*="border"][class*="border-muted"] {
    background-color: var(--stele-bg) !important;
    background-image: var(--stele-texture) !important;
    border-color: var(--stele-edge) !important;
    border-left: 3px solid var(--celadon) !important;
    border-radius: 2px !important;
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(184, 149, 104, 0.2),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        inset 0 0 60px rgba(0,0,0,0.25),
        -2px 0 12px rgba(136, 168, 155, 0.15) !important;
    color: var(--ivory) !important;
    padding: 16px 20px !important;
}

/* 3. 用户气泡（is-user 下的 flex 容器） */
div[class*="is-user"] > div[class*="flex"][class*="flex-col"],
div[class*="group-\\[.is-user\\]:ml-auto"] {
    background-color: #34362F !important;
    background-image: var(--stele-texture) !important;
    border-color: var(--stele-edge) !important;
    border-right: 3px solid var(--moss) !important;
    border-radius: 2px !important;
    box-shadow: 
        0 6px 18px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(107, 122, 82, 0.25) !important;
    color: var(--ivory) !important;
    padding: 14px 18px !important;
}

/* 4. 所有 text-sm 内容区域（气泡内的实际文字容器） */
div[class*="text-sm"],
div[class*="text-sm"] > div,
div[class*="text-sm"] > * {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ivory) !important;
}

/* 5. markdown 渲染容器强制透明 */
.markdown-body, 
div[class*="markdown"],
article,
[class*="prose"] {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ivory) !important;
}

/* 6. gap-2 容器（气泡内的间距容器）透明化 */
div[class*="gap-2"],
div[class*="flex-col"][class*="gap"] {
    background: transparent !important;
}

/* =========================================================
   自建外壳 <scroll>（双保险）
   ========================================================= */
scroll {
    display: block !important;
    margin: -4px -6px !important;
    padding: 20px 18px !important;
    background-color: var(--stele-bg) !important;
    background-image: var(--stele-texture) !important;
    color: var(--ivory) !important;
    border: 1px solid var(--stele-edge) !important;
    border-left: 3px solid var(--celadon) !important;
    border-radius: 2px !important;
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(184, 149, 104, 0.2),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        inset 0 0 60px rgba(0,0,0,0.25) !important;
    position: relative !important;
}

scroll::before, scroll::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--gold-faded) 0%, var(--bronze-deep) 60%, var(--stele-edge) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.6);
    z-index: 5;
}
scroll::before { top: 8px; right: 10px; }
scroll::after  { bottom: 8px; right: 10px; }

scroll > details:first-of-type {
    margin-top: 8px !important;
}

/* =========================================================
   加载框
   ========================================================= */
div[class*="typing"], div[class*="loading"], .typing-indicator {
    background-image: var(--stele-texture) !important;
    background-color: var(--stele-bg) !important;
    border: 1px solid var(--celadon-deep) !important;
    border-radius: 2px !important;
    padding: 12px 18px !important;
    box-shadow: 
        0 0 20px rgba(136, 168, 155, 0.3),
        inset 0 0 15px rgba(0,0,0,0.4) !important;
    width: max-content !important;
    min-width: 180px !important;
}

div[class*="typing"] span, div[class*="typing"] svg, div[class*="typing"] div,
.typing-indicator span, .typing-indicator div {
    display: none !important; 
}

@keyframes celadonPulse {
    0% { 
        opacity: 0.5; 
        text-shadow: 0 0 6px rgba(136, 168, 155, 0.4);
        letter-spacing: 2px;
    }
    50% { 
        opacity: 1; 
        text-shadow: 
            0 0 12px rgba(136, 168, 155, 0.9),
            0 0 24px rgba(184, 212, 199, 0.5);
        color: var(--celadon-glow);
        letter-spacing: 3px;
    }
    100% { 
        opacity: 0.5; 
        text-shadow: 0 0 6px rgba(136, 168, 155, 0.4);
        letter-spacing: 2px;
    }
}

div[class*="typing"]::after, .typing-indicator::after {
    content: "❖ 笔走龙蛇·墨韵未凝 ❖" !important;
    display: block !important;
    font-family: 'Ma Shan Zheng', '楷体', serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    color: var(--celadon) !important;
    animation: celadonPulse 2.4s infinite ease-in-out !important;
}

/* =========================================================
   输入框与按钮
   ========================================================= */
[class*="chat-input"], [class*="bottom-bar"], footer {
    background: transparent !important; 
}

textarea, 
input[type="text"],
div[class*="input"] {
    background: var(--stele-bg) !important;
    background-image: var(--stele-texture) !important;
    color: var(--ivory) !important;
    border: 1px solid var(--celadon-deep) !important;
    border-radius: 2px !important;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.5),
        0 0 0 1px var(--stele-edge),
        0 4px 12px rgba(0,0,0,0.3) !important;
    caret-color: var(--celadon-glow) !important;
}

textarea::placeholder,
input::placeholder { 
    color: var(--ivory-dim) !important; 
    font-style: italic !important;
}

button,
[role="button"],
div[class*="button"] {
    background: var(--stele-light) !important;
    background-image: linear-gradient(180deg, var(--stele-light) 0%, var(--stele-bg) 100%) !important;
    border: 1px solid var(--celadon-deep) !important;
    color: var(--celadon-glow) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    box-shadow: 
        inset 0 1px 0 rgba(184, 212, 199, 0.1),
        0 2px 6px rgba(0,0,0,0.3) !important;
}

button:hover,
[role="button"]:hover {
    background-image: linear-gradient(180deg, var(--celadon-deep) 0%, #3F574B 100%) !important;
    color: var(--ivory) !important;
    border-color: var(--celadon) !important;
    transform: translateY(-1px);
    box-shadow: 
        inset 0 1px 0 rgba(184, 212, 199, 0.2),
        0 4px 12px rgba(136, 168, 155, 0.3) !important;
}

/* =========================================================
   顶部 <top>
   ========================================================= */
top {
    display: block;
    margin: 18px 0 28px 0;
    padding: 22px 22px 16px 22px;
    background: 
        linear-gradient(180deg, rgba(58, 61, 56, 0.9) 0%, rgba(44, 46, 42, 0.95) 100%),
        var(--stele-texture);
    border: 1px solid var(--bronze-deep);
    position: relative;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(201, 169, 104, 0.2),
        inset 0 -1px 0 rgba(0,0,0,0.4);
}

top::before, top::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, var(--gold-faded) 0%, var(--bronze-deep) 60%, var(--stele-edge) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 1px 1px rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.6);
}
top::before { top: 6px; left: 6px; }
top::after { top: 6px; right: 6px; }

top > details > summary {
    color: var(--gold-faded) !important;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Ma Shan Zheng', '楷体', serif !important;
    font-size: 1.05em !important;
}

top p {
    color: var(--ivory) !important;
    line-height: 1.9;
}

/* =========================================================
   正文 <text>
   ========================================================= */
text {
    display: block;
    margin: 32px 0;
    padding: 36px 32px;
    background: var(--stele-bg);
    background-image: var(--stele-texture);
    position: relative;
    box-shadow: 
        inset 0 0 80px rgba(0,0,0,0.4),
        inset 0 0 0 1px rgba(184, 149, 104, 0.15),
        0 12px 32px rgba(0,0,0,0.5);
    border: 2px solid var(--stele-edge);
    border-radius: 2px;
}

text::before, text::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    height: 8px;
    background: 
        linear-gradient(180deg, 
            var(--gold-faded) 0%, 
            var(--bronze) 30%,
            var(--bronze-deep) 70%, 
            #2a1f10 100%);
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255, 220, 150, 0.4),
        inset 0 -1px 0 rgba(0,0,0,0.5);
    z-index: 2;
}
text::before { top: -5px; }
text::after { bottom: -5px; }

text p {
    font-size: 1.1em;
    line-height: 2.15;
    color: var(--ivory);
    text-indent: 2em;
    text-align: justify;
    margin-bottom: 1.3em;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

text p:first-of-type::first-letter {
    float: left;
    font-size: 2.8em;
    font-weight: bold;
    color: var(--ivory);
    background: 
        radial-gradient(circle at 30% 30%, var(--celadon) 0%, var(--celadon-deep) 80%);
    padding: 4px 12px;
    margin: 6px 10px 0 0;
    line-height: 1;
    border-radius: 2px;
    box-shadow: 
        2px 3px 8px rgba(0,0,0,0.6),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.3);
    font-family: 'Ma Shan Zheng', 'STKaiti', serif;
    border: 1px solid var(--celadon-glow);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* =========================================================
   底部 <bottom>
   ========================================================= */
bottom {
    display: block;
    margin: 28px 0;
    padding: 22px 20px;
    background: var(--stele-bg);
    background-image: var(--stele-texture);
    border: 1px solid var(--bronze-deep);
    box-shadow: 
        inset 0 0 50px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(201, 169, 104, 0.1),
        0 8px 20px rgba(0,0,0,0.4);
    border-radius: 2px;
    position: relative;
}

bottom::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    background: linear-gradient(180deg, var(--gold-faded) 0%, var(--bronze-deep) 100%);
    border-radius: 0 0 4px 4px;
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,220,150,0.3);
}

/* =========================================================
   通用 details/summary
   ========================================================= */
details {
    background: rgba(58, 61, 56, 0.4);
    margin: 14px 0;
    border: 1px solid var(--stele-edge);
    border-left: 3px solid var(--celadon-deep);
    border-radius: 2px;
    overflow: hidden;
    transition: border-left-color 0.3s ease;
}

details[open] {
    border-left-color: var(--celadon);
    background: rgba(58, 61, 56, 0.6);
    box-shadow: inset 0 0 30px rgba(136, 168, 155, 0.06);
}

details > summary {
    display: block;
    cursor: pointer;
    font-size: 1.08em;
    font-weight: bold;
    color: var(--celadon-glow);
    padding: 12px 18px;
    background: linear-gradient(90deg, 
        rgba(79, 107, 95, 0.3) 0%, 
        rgba(58, 61, 56, 0.1) 70%,
        transparent 100%);
    position: relative;
    user-select: none;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

details > summary:hover {
    background: linear-gradient(90deg, 
        rgba(136, 168, 155, 0.25) 0%, 
        rgba(58, 61, 56, 0.1) 70%,
        transparent 100%);
    color: var(--ivory);
    letter-spacing: 2px;
}

details[open] > summary {
    border-bottom: 1px solid var(--celadon-deep);
    color: var(--ivory);
}

details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }

details > summary::after {
    content: "◈";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bronze);
    font-size: 0.95em;
    transition: all 0.4s ease;
}
details[open] > summary::after {
    content: "◆";
    color: var(--gold-faded);
    transform: translateY(-50%) rotate(180deg);
    text-shadow: 0 0 8px rgba(201, 169, 104, 0.6);
}

details p {
    margin: 8px 14px;
    padding: 4px 0 4px 22px;
    position: relative;
    color: var(--ivory);
    line-height: 1.9;
    font-size: 0.97em;
}
details p::before {
    content: "❖";
    position: absolute;
    left: 4px;
    color: var(--bronze);
    font-size: 0.7em;
    top: 7px;
}

details strong, details b {
    color: var(--gold-faded) !important;
    font-weight: bold;
}

details ul, details ol {
    padding-left: 32px;
    margin: 10px 14px;
    color: var(--ivory);
}
details li {
    color: var(--ivory);
    line-height: 1.9;
    margin: 5px 0;
}
details li::marker {
    color: var(--celadon);
}

details > *:not(summary) {
    padding-left: 4px;
    padding-right: 4px;
}

/* =========================================================
   表格
   ========================================================= */
details table, bottom table, top table {
    width: calc(100% - 28px);
    margin: 14px 14px;
    border-collapse: collapse;
    background: rgba(22, 24, 25, 0.6);
    border: 1px solid var(--bronze-deep);
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.5),
        0 2px 8px rgba(0,0,0,0.3);
    font-size: 0.94em;
    overflow: hidden;
}

details th, bottom th, top th {
    background: linear-gradient(180deg, 
        var(--celadon-deep) 0%, 
        #3F574B 100%) !important;
    color: var(--ivory) !important;
    padding: 11px 10px !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    border: 1px solid var(--stele-edge) !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-family: 'Ma Shan Zheng', serif !important;
}

details td, bottom td, top td {
    padding: 10px 12px !important;
    border: 1px solid var(--stele-edge) !important;
    color: var(--ivory) !important;
    line-height: 1.75;
    vertical-align: top;
    background: rgba(44, 46, 42, 0.5);
}

details tr:nth-child(even) td {
    background-color: rgba(58, 61, 56, 0.5) !important;
}

details tr:hover td {
    background-color: rgba(136, 168, 155, 0.12) !important;
    color: var(--celadon-glow) !important;
    transition: all 0.3s ease;
}

/* =========================================================
   强调与装饰
   ========================================================= */
strong, b {
    color: var(--gold-faded);
    font-weight: bold;
    text-shadow: 0 0 6px rgba(201, 169, 104, 0.25);
}
em, i {
    color: var(--celadon-glow);
    font-style: italic;
}

top strong, top b, td strong, th strong, td b, th b {
    text-shadow: none;
}

details hr, bottom hr, top hr, hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--bronze-deep) 30%, 
        var(--gold-faded) 50%, 
        var(--bronze-deep) 70%, 
        transparent 100%);
    margin: 14px 0;
    opacity: 0.7;
}

details blockquote, blockquote {
    border-left: 3px solid var(--bronze);
    padding: 10px 18px;
    margin: 12px 14px;
    background: rgba(184, 149, 104, 0.06);
    color: var(--ivory-dim);
    font-style: italic;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

code {
    background: var(--stele-edge) !important;
    color: var(--celadon-glow) !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
    border: 1px solid var(--bronze-deep) !important;
    font-family: 'Noto Serif SC', monospace !important;
    font-size: 0.92em !important;
}

a {
    color: var(--rust) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted var(--rust) !important;
    transition: all 0.3s ease !important;
}
a:hover {
    color: var(--gold-faded) !important;
    border-bottom-color: var(--gold-faded) !important;
    text-shadow: 0 0 8px rgba(201, 169, 104, 0.5) !important;
}

/* =========================================================
   滚动条
   ========================================================= */
::-webkit-scrollbar { 
    width: 10px; 
    height: 10px;
}
::-webkit-scrollbar-track { 
    background: var(--stele-edge); 
    border-left: 1px solid var(--stele-bg);
}
::-webkit-scrollbar-thumb { 
    background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-deep) 100%);
    border-radius: 1px;
    border: 1px solid var(--stele-edge);
    box-shadow: inset 0 1px 0 rgba(255,220,150,0.2);
}
::-webkit-scrollbar-thumb:hover { 
    background: linear-gradient(180deg, var(--gold-faded) 0%, var(--bronze) 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255,220,150,0.4),
        0 0 6px rgba(201, 169, 104, 0.5);
}
::-webkit-scrollbar-corner {
    background: var(--stele-edge);
}