/*
 * =================================
 * 全局统一风格规范：Code Geass 反叛的鲁路修 · 帝国作战终端
 * 核心意象：Geass猩红之眼、不列颠黑金皇室、黑色骑士团暗系军武、Nightmare Frame机甲终端
 * 主色：极暗炭黑底色 + 帝国猩红主色 + 皇室金点缀 + Geass红光外溢
 * =================================
 */

/*
 * ---------------------------------
 * 模块一：对话气泡美化 · Geass契约通讯终端
 * ---------------------------------
 */
/* AI侧 - 帝国/魔女通讯频道 */
.group .bg-gray-100\/90 {
    background: #0f0f14 !important;
    border: 2px solid #c8102e !important;
    border-radius: 16px 16px 16px 4px !important;
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.35), 4px 4px 0 rgba(122, 10, 29, 0.6) !important;
    color: #e8dfe0 !important;
    padding: 14px 18px !important;
    line-height: 1.75 !important;
    font-size: 15px !important;
    max-width: 93% !important;
    margin: 10px 0 !important;
    transition: all 0.25s ease-in-out !important;
    position: relative;
}
.group .bg-gray-100\/90::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff1f3d, transparent);
    opacity: 0.7;
}
.group .bg-gray-100\/90:hover {
    transform: translate(2px, 2px) scale(1.01) !important;
    box-shadow: 0 0 18px rgba(255, 31, 61, 0.5), 2px 2px 0 rgba(122, 10, 29, 0.6) !important;
    border-color: #ff1f3d !important;
}

/* 气泡内代码块 - Nightmare Frame作战代码终端 */
.group .bg-gray-100\/90 pre,
.group .bg-gray-100\/90 code {
    background: #1a0a0d !important;
    border: 1px solid #7a0a1d !important;
    border-radius: 8px !important;
    color: #ff6b7a !important;
    font-size: 13.5px !important;
    text-shadow: 0 0 4px rgba(255, 107, 122, 0.4);
}

/* 用户侧 - 黑色骑士团作战指令 */
.group .bg-indigo-50,
.group .bg-blue-50 {
    background: #16161c !important;
    border: 2px solid #9e0b25 !important;
    border-radius: 16px 4px 16px 16px !important;
    box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.5) !important;
    color: #f0e6e7 !important;
    padding: 13px 16px !important;
    line-height: 1.68 !important;
    max-width: 93% !important;
    margin: 8px 0 !important;
    transition: all 0.25s ease-in-out !important;
}
.group .bg-indigo-50:hover,
.group .bg-blue-50:hover {
    transform: translate(2px, 2px) scale(1.01) !important;
    box-shadow: 2px 2px 0 rgba(122, 10, 29, 0.5), 0 0 10px rgba(200, 16, 46, 0.3) !important;
}

/*
 * ---------------------------------
 * 模块二：平台按钮美化 · 帝国军令按钮
 * ---------------------------------
 */
.flex.items-center.gap-2.pb-2 > button {
    background: linear-gradient(180deg, #2a0a10, #1a0609) !important;
    color: #f0d6d9 !important;
    border: 2px solid #c8102e !important;
    border-radius: 10px !important;
    box-shadow: 3px 3px 0 #5c0816, inset 0 1px 0 rgba(255,255,255,0.08) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.2s ease-in-out !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
}
.flex.items-center.gap-2.pb-2 > button:hover {
    background: linear-gradient(180deg, #3d0d16, #2a0a10) !important;
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #5c0816, 0 0 12px rgba(200, 16, 46, 0.5) !important;
    color: #fff !important;
}

/* 发送按钮 - Zero专属指令发送 */
#ai-chat-bottom-input button[type="submit"],
#ai-chat-input + button {
    background: linear-gradient(180deg, #c8102e, #9e0b25) !important;
    color: #fff !important;
    border: 2px solid #ff1f3d !important;
    border-radius: 10px !important;
    box-shadow: 3px 3px 0 #5c0816, 0 0 8px rgba(200, 16, 46, 0.4) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out !important;
    padding: 8px 18px !important;
}
#ai-chat-bottom-input button[type="submit"]:hover,
#ai-chat-input + button:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 #5c0816, 0 0 18px rgba(255, 31, 61, 0.7) !important;
}

/*
 * ---------------------------------
 * 模块三：下拉菜单 · 帝国机密选项
 * ---------------------------------
 */
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100 {
    border: 2px solid #c8102e !important;
    box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.6), 0 0 10px rgba(200, 16, 46, 0.3) !important;
    border-radius: 10px !important;
    background: #0f0f14 !important;
    color: #e8dfe0 !important;
    transition: all 0.2s ease;
}
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:hover {
    background: #2a0a10 !important;
    color: #fff !important;
    padding-left: 22px;
}

/*
 * ---------------------------------
 * 模块四：输入栏美化 · 作战指令输入终端
 * ---------------------------------
 */
#ai-chat-input {
    background-color: #0a0a0d !important;
    border: 2px solid #9e0b25 !important;
    border-radius: 12px !important;
    color: #f0e6e7 !important;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5), 0 0 6px rgba(200, 16, 46, 0.2) !important;
    padding: 13px 18px !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
}
#ai-chat-input:focus {
    outline: none !important;
    border-color: #ff1f3d !important;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5), 0 0 16px rgba(255, 31, 61, 0.5) !important;
}
#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 12px !important;
}

/*
 * ---------------------------------
 * 全局配套补充 · Geass猩红主题
 * ---------------------------------
 */
/* 滚动条 - 帝国军规猩红 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0d;
    border-left: 2px solid #7a0a1d;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c8102e, #7a0a1d);
    border: 2px solid #0a0a0d;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff1f3d, #c8102e);
    box-shadow: 0 0 8px rgba(255, 31, 61, 0.6);
}

/* 分割线 - 猩红能量纹 */
hr, .border-t, .border-b {
    border-color: #7a0a1d !important;
    border-width: 2px !important;
    opacity: 0.9 !important;
    box-shadow: 0 0 6px rgba(200, 16, 46, 0.3);
}

/* 弹窗/卡片 - 不列颠帝国机密终端 */
div[role="dialog"], .card, .modal {
    background: #0f0f14 !important;
    border: 2px solid #c8102e !important;
    border-radius: 14px !important;
    box-shadow: 6px 6px 0 rgba(122, 10, 29, 0.6), 0 0 20px rgba(200, 16, 46, 0.3) !important;
    color: #e8dfe0 !important;
}

/* 加载占位气泡 - Geass激活待命 */
.group .animate-pulse {
    background: #0f0f14 !important;
    border: 2px solid #c8102e !important;
    box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.6), 0 0 10px rgba(200, 16, 46, 0.4) !important;
    border-radius: 14px !important;
    animation: geass-pulse 2s infinite ease-in-out;
}
@keyframes geass-pulse {
    0%, 100% { opacity: 1; box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.6), 0 0 10px rgba(200, 16, 46, 0.4); }
    50% { opacity: 0.7; box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.6), 0 0 18px rgba(255, 31, 61, 0.6); }
}

/* 标签组件 - 帝国认证徽章 */
.tag, .badge {
    background: linear-gradient(180deg, #2a0a10, #1a0609) !important;
    border: 1px solid #d4af37 !important;
    box-shadow: 2px 2px 0 #5c0816 !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
    font-weight: 700 !important;
    color: #f0d6d9 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
}

/*
 * ---------------------------------
 * 模块五：折叠状态栏 · Geass机密档案
 * ---------------------------------
 */
details {
    background: #0f0f14 !important;
    border: 2px solid #c8102e !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.6), 0 0 8px rgba(200, 16, 46, 0.25) !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    transition: all 0.25s ease-in-out !important;
    overflow: visible !important;
    color: #e8dfe0 !important;
}
details summary {
    padding: 12px 18px !important;
    font-weight: 700 !important;
    color: #ffb3bd !important;
    cursor: pointer !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(90deg, #2a0a10, #1a0609) !important;
    border-bottom: 2px solid #7a0a1d !important;
    border-radius: 10px 10px 0 0 !important;
    letter-spacing: 0.5px;
}
details summary::-webkit-details-marker {
    display: none !important;
}
details summary::before {
    content: "👁️" !important;
    font-size: 16px !important;
    transition: transform 0.25s ease !important;
    filter: drop-shadow(0 0 4px #ff1f3d);
}
details[open] summary::before {
    transform: rotate(90deg) !important;
}
details summary:hover {
    background: linear-gradient(90deg, #3d0d16, #2a0a10) !important;
    color: #fff !important;
}
details[open] {
    transform: translate(2px, 2px) scale(1.005) !important;
    box-shadow: 2px 2px 0 rgba(122, 10, 29, 0.6), 0 0 14px rgba(255, 31, 61, 0.4) !important;
}
details > div, details > p, details > .content {
    padding: 14px 18px !important;
    color: #e8dfe0 !important;
    line-height: 1.7 !important;
}

/* 深色模式适配 · 暗夜作战终端 */
@media (prefers-color-scheme: dark) {
    details {
        background: #08080b !important;
        border-color: #b80e2a !important;
        box-shadow: 4px 4px 0px rgba(122, 10, 29, 0.7), 0 0 10px rgba(200, 16, 46, 0.35) !important;
        color: #f0e6e7 !important;
    }
    details summary {
        background: linear-gradient(90deg, #1f070c, #140508) !important;
        border-bottom-color: #7a0a1d !important;
        color: #ffb3bd !important;
    }
    details summary:hover {
        background: linear-gradient(90deg, #2a0a10, #1a0609) !important;
    }
    details[open] {
        box-shadow: 2px 2px 0px rgba(122, 10, 29, 0.7), 0 0 16px rgba(255, 31, 61, 0.5) !important;
    }
    details > div, details > p, details > .content {
        color: #f0e6e7 !important;
    }

    .group .bg-gray-100\/90 {
        background: #08080b !important;
        border-color: #b80e2a !important;
        box-shadow: 0 0 14px rgba(200, 16, 46, 0.4), 4px 4px 0 rgba(122, 10, 29, 0.7) !important;
        color: #f0e6e7 !important;
    }
    .group .bg-indigo-50,
    .group .bg-blue-50 {
        background: #101016 !important;
        border-color: #9e0b25 !important;
        box-shadow: 4px 4px 0 rgba(122, 10, 29, 0.6) !important;
        color: #f3d9dc !important;
    }
    #ai-chat-input {
        background: #08080b !important;
        border-color: #b80e2a !important;
        color: #f0e6e7 !important;
    }
    div[role="dialog"], .card, .modal {
        background: #08080b !important;
        border-color: #b80e2a !important;
        box-shadow: 6px 6px 0 rgba(122, 10, 29, 0.7), 0 0 22px rgba(200, 16, 46, 0.4) !important;
        color: #f0e6e7 !important;
    }
}

/*
 * ---------------------------------
 * 模块六：Markdown表格 · 圆桌骑士战力档案
 * ---------------------------------
 */
details table,
.group .bg-gray-100\/90 table {
    width: 100% !important;
    border-collapse: collapse !important;
    display: table !important;
    table-layout: auto !important;
}
details .table-wrap,
.group .bg-gray-100\/90 .table-wrap {
    overflow-x: auto !important;
    margin: 8px 0 !important;
    border: 2px solid #7a0a1d !important;
    border-radius: 8px !important;
    box-shadow: 0 0 8px rgba(200, 16, 46, 0.25);
}
details th, details td,
.group .bg-gray-100\/90 th, .group .bg-gray-100\/90 td {
    border: 1px solid #7a0a1d !important;
    padding: 9px 12px !important;
    min-width: 60px !important;
    word-break: break-word !important;
    color: #e8dfe0 !important;
}
details th,
.group .bg-gray-100\/90 th {
    background: linear-gradient(180deg, #2a0a10, #1a0609) !important;
    font-weight: 700 !important;
    color: #ffb3bd !important;
    border-bottom: 2px solid #c8102e;
}
details tr:nth-child(even),
.group .bg-gray-100\/90 tr:nth-child(even) {
    background: #16080c !important;
}
details tr:hover,
.group .bg-gray-100\/90 tr:hover {
    background: #2a0a10 !important;
}

/* 表格hover微动效 */
.group .bg-gray-100\/90 .table-wrap:hover {
    transform: translate(1px, 1px) !important;
    transition: 0.22s ease;
    box-shadow: 0 0 12px rgba(255, 31, 61, 0.4);
}

/* 深色模式表格 */
@media (prefers-color-scheme: dark) {
    details .table-wrap,
    .group .bg-gray-100\/90 .table-wrap {
        border-color: #7a0a1d !important;
    }
    details th, details td,
    .group .bg-gray-100\/90 th, .group .bg-gray-100\/90 td {
        border-color: #5c0816 !important;
        color: #f0e6e7 !important;
    }
    details th,
    .group .bg-gray-100\/90 th {
        background: linear-gradient(180deg, #1f070c, #140508) !important;
    }
    details tr:nth-child(even),
    .group .bg-gray-100\/90 tr:nth-child(even) {
        background: #0f0608 !important;
    }
}

/*
 * ---------------------------------
 * 加载状态文字 · Geass契约缔结中
 * ---------------------------------
 */
.flex.items-center.justify-center.w-6.h-5 {
    width: auto !important;
    height: auto !important;
    min-width: 90px !important;
    padding: 3px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}
.flex.items-center.justify-center.w-6.h-5::after {
    content: "👁️ Geass激活中" !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    color: #ffb3bd !important;
    text-shadow: 0 0 6px rgba(255, 31, 61, 0.6);
    animation: text-glow 2s infinite ease-in-out;
}
@keyframes text-glow {
    0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255, 31, 61, 0.6); }
    50% { opacity: 0.7; text-shadow: 0 0 12px rgba(255, 31, 61, 0.9); }
}

@media (prefers-color-scheme: dark) {
    .flex.items-center.justify-center.w-6.h-5::after {
        color: #ffccd2 !important;
    }
}
/* 给不同角色的对话上色 */
user-dialogue {
    color: #FF4500; /* 猩红色，给主角用，够醒目！ */
}

partner-dialogue {
    color: #FF69B4; /* 亮粉色，给亲密伴侣，甜就完事了！ */
}

npc-dialogue {
    color: #1E90FF; /* 道奇蓝，给其他路人NPC，清晰不抢戏！ */}