/* =========================================================
   Theme: The Backrooms — Surveillance Tape / M.E.G. Terminal
   Version: 3.0 — Isolated Status Bar & Adaptive Background
   ========================================================= */

/* ===========================================
   0. REC录制标志— 固定左上角持续闪烁
   =========================================== */
@keyframes rec-blink {
    0%, 60% { opacity: 1; }
    70%, 90% { opacity: 0.12; }
    100% { opacity: 1; }
}

.group.is-assistant > div:first-child::after {
    content: "● REC" !important;
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    color: #cc0000 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    text-shadow:
        0 0 4px rgba(204, 0, 0, 0.8),
        0 0 12px rgba(204, 0, 0, 0.35) !important;
    animation: rec-blink 1.8s ease-in-out infinite !important;
}


/* ===========================================
   1. 用户气泡 — Level 0潮湿荧光灯墙纸
   =========================================== */
.group.is-user > div:first-child {
    background: linear-gradient(
        160deg,
        #d8cf8e 0%,
        #c4b86e 40%,
        #b5a85a 100%
    ) !important;
    border: 1px solid rgba(138, 128, 81, 0.6) !important;
    border-radius: 3px !important;
    box-shadow:
        inset 0 0 30px rgba(100, 90, 40, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

.group.is-user .rili-markdown-renderer,
.group.is-user .rili-markdown-renderer * {
    color: #1a180f !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.group.is-user .text-xs.font-mono.text-muted-foreground {
    color: rgba(26, 24, 15, 0.5) !important;
}

.group.is-user .bg-muted.rounded.flex {
    background: rgba(180, 168, 90, 0.45) !important;
    border: 1px solid rgba(138, 128, 81, 0.35) !important;
}
.group.is-user .bg-muted.rounded.flex button svg.lucide {
    stroke: rgba(26, 24, 15, 0.55) !important;
}


/* ===========================================
   2. AI 气泡 — M.E.G. 加密数据终端
      底层铺设可变化环境背景纹理
   =========================================== */
.group.is-assistant > div:first-child {
    background: #0d0d0d !important;
    border: 1px solid #222 !important;
    border-left: 3px solid #880000 !important;
    border-radius: 3px !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.6),
        inset 0 0 50px rgba(0, 0, 0, 0.5) !important;
    padding-top: 30px !important;
}

/* 底层环境背景纹理 —亮色模式：微弱荧光灯闪烁纹理 */
.group.is-assistant > div:first-child::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
        /* CRT 扫描线 */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.018) 2px,
            rgba(255, 255, 255, 0.018) 4px
        ),
        /* 微弱的荧光灯暖色渐晕 — 亮色模式 */
        radial-gradient(
            ellipse at 30% 20%,
            rgba(212, 208, 188, 0.04) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(136, 0, 0, 0.03) 0%,
            transparent 50%
        ) !important;
}

/* 底层环境背景纹理 — 暗夜模式：更深沉的红色警报渐晕 */
.dark .group.is-assistant > div:first-child::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.012) 2px,
            rgba(255, 255, 255, 0.012) 4px
        ),
        radial-gradient(
            ellipse at 20% 15%,
            rgba(136, 0, 0, 0.08) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 85% 80%,
            rgba(80, 0, 0, 0.06) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 50% 50%,
            rgba(212, 208, 188, 0.015) 0%,
            transparent 70%
        ) !important;
}

/* AI 正文文字 */
.group.is-assistant .rili-markdown-renderer,
.group.is-assistant .rili-markdown-renderer * {
    color: #d4d0bc !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    text-shadow: 0 0 1px rgba(212, 208, 188, 0.1) !important;
}


/* ===========================================
   3. 状态栏 — 与正文彻底隔离的 VHS 面板
      独立字号 + 独立背景 + 独立边框
   =========================================== */

/* Token / 模型信息 — VHS 时间码 */
.text-xs.font-mono.text-muted-foreground {
    font-family: 'Courier New', monospace !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(212, 208, 188, 0.4) !important;padding: 4px 8px !important;
    margin-top: 6px !important;
    border-top: 1px dashed rgba(136, 0, 0, 0.25) !important;
}

/* 底部操作按钮区— VHS 磁带控制面板（与正文隔离） */
.bg-muted.rounded.flex {
    background: linear-gradient(
        180deg,
        #141414 0%,
        #0a0a0a 100%
    ) !important;
    border: 1px solid #2a2a2a !important;
    border-bottom: 2px solid #660000 !important;
    border-radius: 2px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.5) !important;
    margin-top: 8px !important;
    padding: 2px 4px !important;
    position: relative !important;
    isolation: isolate !important;
}

/* 状态栏按钮 */
.bg-muted.rounded.flex button svg.lucide {
    stroke: rgba(212, 208, 188, 0.5) !important;
    width: 14px !important;
    height: 14px !important;
    transition: stroke 0.25s ease !important;
}

.bg-muted.rounded.flex button:hover svg.lucide {
    stroke: #cc0000 !important;
}

.bg-muted.rounded.flex button {
    transition: background 0.25s ease !important;
    border-radius: 2px !important;
}

.bg-muted.rounded.flex button:hover {
    background: rgba(136, 0, 0, 0.2) !important;
}

/* 确保操作按钮始终可见 */
.group .md\:opacity-0 {
    opacity: 1 !important;
}


/* ===========================================
   4. 展开/收缩按钮 — VHS 磁带标签 UI
      长方形容器 + Hover 渐变 + 斜向条纹
   =========================================== */

/* 
   针对气泡内的展开/收缩触发器
   平台中通常是一个可点击的小按钮/区域
   这里对details > summary 或类似折叠元素进行包装
*/

/* 通用折叠触发器样式 */
.group.is-assistant details > summary,
.group.is-assistant [data-state] > button,
.group.is-assistant .cursor-pointer[class*="truncate"],
.group.is-assistant details > summary,
.group [data-collapsible] > button {
    font-family: 'Courier New', monospace !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(212, 208, 188, 0.7) !important;
    background: linear-gradient(
        180deg,
        #1a1a1a 0%,
        #111111 100%
    ) !important;
    border: 1px solid #333 !important;
    border-left: 3px solid #660000 !important;
    border-radius: 2px !important;
    padding: 6px 16px !important;
    margin: 6px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    cursor: pointer !important;
    transition: border-color 0.3s ease, color 0.3s ease !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Hover 状态：红色渐变 + 斜向 VHS 条纹扫过 */
@keyframes vhs-stripe-sweep {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.group.is-assistant details > summary::before,
.group.is-assistant [data-state] > button::before,
.group [data-collapsible] > button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    background:
        /* 斜向 VHS 条纹 */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 4px,
            rgba(136, 0, 0, 0.15) 4px,
            rgba(136, 0, 0, 0.15) 6px,
            transparent 6px,
            transparent 10px
        ),
        /* 红色渐变底色 */
        linear-gradient(
            90deg,
            rgba(136, 0, 0, 0.0) 0%,
            rgba(136, 0, 0, 0.25) 30%,
            rgba(180, 0, 0, 0.35) 50%,
            rgba(136, 0, 0, 0.25) 70%,
            rgba(136, 0, 0, 0.0) 100%
        ) !important;
    background-size: 200% 100% !important;
}

.group.is-assistant details > summary:hover::before,
.group.is-assistant [data-state] > button:hover::before,
.group [data-collapsible] > button:hover::before {
    opacity: 1 !important;
    animation: vhs-stripe-sweep 1.5s linear infinite !important;
}

.group.is-assistant details > summary:hover,
.group.is-assistant [data-state] > button:hover,
.group [data-collapsible] > button:hover {
    color: #e8e4d0 !important;
    border-color: #880000 !important;
    border-left-color: #cc0000 !important;
}


/* ===========================================
   5. M.E.G. 徽章旋转加载动画
   =========================================== */

/*隐藏平台原生跳动点 */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
    display: none !important;
}

/* M.E.G. LOGO 旋转加载 — SMIL SVG 内联动画 */
.group.is-assistant .flex.gap-2.w-full.h-full.items-center.justify-center::before {
    content: "" !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3Etext%7Bfont-family:monospace%7D%3C/style%3E%3C/defs%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 60 60' to='360 60 60' dur='6s' repeatCount='indefinite'/%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23d4d0bc' stroke-width='2' stroke-dasharray='40 128 12' opacity='0.7'/%3E%3Ccircle cx='60' cy='60' r='46' fill='none' stroke='%23880000' stroke-width='1.5' stroke-dasharray='6 8' opacity='0.6'/%3E%3Cline x1='60' y1='4' x2='60' y2='20' stroke='%23880000' stroke-width='2.5'/%3E%3Cline x1='60' y1='100' x2='60' y2='116' stroke='%23880000' stroke-width='2.5'/%3E%3Cline x1='4' y1='60' x2='20' y2='60' stroke='%23880000' stroke-width='2.5'/%3E%3Cline x1='100' y1='60' x2='116' y2='60' stroke='%23880000' stroke-width='2.5'/%3E%3Cline x1='18' y1='18' x2='28' y2='28' stroke='%23d4d0bc' stroke-width='1' opacity='0.4'/%3E%3Cline x1='92' y1='18' x2='102' y2='28' stroke='%23d4d0bc' stroke-width='1' opacity='0.4'/%3E%3Cline x1='18' y1='92' x2='28' y2='102' stroke='%23d4d0bc' stroke-width='1' opacity='0.4'/%3E%3Cline x1='92' y1='92' x2='102' y2='102' stroke='%23d4d0bc' stroke-width='1' opacity='0.4'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 60 60' to='0 60 60' dur='4s' repeatCount='indefinite'/%3E%3Ccircle cx='60' cy='60' r='34' fill='none' stroke='%23d4d0bc' stroke-width='1' stroke-dasharray='4 6' opacity='0.35'/%3E%3C/g%3E%3Crect x='30' y='47' width='60' height='26' rx='2' fill='%230d0d0d' stroke='%23880000' stroke-width='1' opacity='0.92'/%3E%3Ctext x='60' y='64' font-size='13' fill='%23d4d0bc' text-anchor='middle' font-weight='bold' letter-spacing='3'%3EM.E.G.%3C/text%3E%3Ctext x='60' y='96' font-size='5.5' fill='%23d4d0bc' text-anchor='middle' letter-spacing='1.5'%3E%3Canimate attributeName='opacity' values='0.5;0.5;0.1;0.5' dur='2s' repeatCount='indefinite'/%3EDATA INCOMING%3C/text%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}


/* ===========================================
   6.暗夜模式全面适配
   =========================================== */

/* 暗夜 — 用户气泡：断电后的 Level 0 */
.dark .group.is-user > div:first-child {
    background: linear-gradient(
        160deg,
        #6b6535 0%,
        #5a5428 40%,
        #4a4520 100%
    ) !important;
    border: 1px solid rgba(90, 84, 40, 0.7) !important;
    box-shadow:
        inset 0 0 35px rgba(40, 35, 10, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

.dark .group.is-user .rili-markdown-renderer,
.dark .group.is-user .rili-markdown-renderer * {
    color: #e8e4d0 !important;
}

.dark .group.is-user .text-xs.font-mono.text-muted-foreground {
    color: rgba(232, 228, 208, 0.4) !important;
}

.dark .group.is-user .bg-muted.rounded.flex {
    background: rgba(74, 69, 32, 0.55) !important;
    border: 1px solid rgba(90, 84, 40, 0.45) !important;
}

.dark .group.is-user .bg-muted.rounded.flex button svg.lucide {
    stroke: rgba(232, 228, 208, 0.5) !important;
}

/* 暗夜 — AI 气泡更深 */
.dark .group.is-assistant > div:first-child {
    background: #080808 !important;
    border-color: #1a1a1a !important;
    box-shadow:
        0 0 22px rgba(0, 0, 0, 0.75),
        inset 0 0 60px rgba(0, 0, 0, 0.6) !important;
}

/* 暗夜 — 状态栏面板更深 */
.dark .bg-muted.rounded.flex {
    background: linear-gradient(
        180deg,
        #0e0e0e 0%,
        #060606 100%
    ) !important;
    border-color: #222 !important;
}

/* 暗夜 — 折叠按钮更深 */
.dark .group.is-assistant details > summary,
.dark .group [data-collapsible] > button {
    background: linear-gradient(
        180deg,
        #121212 0%,
        #0a0a0a 100%
    ) !important;
    border-color: #282828 !important;
}


/* ===========================================
   7. 代码块 & 引用块& 链接
   =========================================== */

.group.is-assistant .rili-markdown-renderer pre {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid #2a2a2a !important;
    border-left: 2px solid #880000 !important;
    border-radius: 2px !important;
}

.group.is-assistant .rili-markdown-renderer code {
    color: #c8c4a8 !important;
    font-size: 13px !important;
}

.group.is-assistant .rili-markdown-renderer blockquote {
    border-left: 3px solid #880000 !important;
    background: rgba(136, 0, 0, 0.05) !important;
    padding: 8px 14px !important;
}

.group.is-assistant .rili-markdown-renderer a {
    color: #cc4444 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(204, 68, 68, 0.35) !important;
}

.group.is-assistant .rili-markdown-renderer a:hover {
    color: #ff5555 !important;
}

.group.is-assistant .rili-markdown-renderer strong {
    color: #e8e4d0 !important;
}

.group.is-user .rili-markdown-renderer pre {
    background: rgba(0, 0, 0, 0.07) !important;
    border: 1px solid rgba(138, 128, 81, 0.35) !important;
    border-radius: 2px !important;
}

.dark .group.is-user .rili-markdown-renderer pre {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(90, 84, 40, 0.45) !important;
}

.group.is-user .rili-markdown-renderer a {
    color: #6b3a00 !important;
}

.dark .group.is-user .rili-markdown-renderer a {
    color: #e8a050 !important;
}