/* --- AI风月赛博朋克主题CSS (强化固定暗黑模式) --- */

/* 自定义颜色变量，方便统一管理 - 保持不变 */
.elevator-status {
    --main-bg: #000000; /* 主背景色 */
    --container-bg: rgba(10, 14, 16, 0.8); /* 容器背景色 */
    --text-color: #00ddff; /* 主要文本颜色 (天蓝色) */
    --title-color: #ff0000; /* 标题/强调色 (红色) */
    --accent-color: var(--title-color); /* 强调色 */
    --border-color: rgba(0, 221, 255, 0.2); /* 边框颜色 */
    --summary-bg-hover: rgba(0, 221, 255, 0.1); /* 悬停背景 */
    --summary-text-hover: #fff; /* 悬停文本 */
    --glitch-c1: rgba(255, 0, 0, 0.8); /* 故障色1 */
    --glitch-c2: rgba(0, 255, 255, 0.8); /* 故障色2 */
    --warning-yellow: #cfff00; /* 警告色 */
}

/* 状态栏容器 - 保持不变 */
.elevator-status {
    font-family: 'SimSun', 'NSimSun', 'Courier New', monospace; /* 字体 */
    background-color: var(--container-bg); /* 背景 */
    border: 1px solid var(--border-color); /* 边框 */
    margin-bottom: 10px; /* 底部间距 */
    color: var(--text-color); /* 文本颜色 */
    box-shadow: inset 0 0 5px rgba(0, 221, 255, 0.1), 0 0 8px rgba(0, 221, 255, 0.1); /* 内外阴影 */
    backdrop-filter: blur(1.5px); /* 背景模糊 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 定位上下文 */
    animation: container-pulse 5s ease-in-out infinite; /* 容器脉冲动画 */
}

/* summary 标题样式 - 保持不变 */
.elevator-status summary {
    display: block; /* 块级显示 */
    padding: 10px 15px; /* 内边距 */
    background: var(--main-bg); /* 背景色 */
    color: var(--title-color); /* 标题颜色 */
    font-size: 1.1em; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    cursor: pointer; /* 鼠标指针 */
    outline: none; /* 移除轮廓 */
    border-bottom: 1px solid var(--border-color); /* 底部边框 */
    position: relative; /* 定位上下文 */
    letter-spacing: 1px; /* 字间距 */
    text-shadow: 0 0 5px var(--title-color); /* 文本阴影 */
    transition: background 0.2s, color 0.2s, text-shadow 0.2s; /* 过渡效果 */
}

.elevator-status summary:hover {
    background: var(--summary-bg-hover); /* 悬停背景 */
    color: var(--summary-text-hover); /* 悬停文本颜色 */
    text-shadow: 0 0 8px var(--summary-text-hover); /* 悬停文本阴影 */
}

/* summary 展开/收起箭头图标 - 保持不变 */
.elevator-status summary::before {
    content: '▶ '; /* 默认箭头 */
    display: inline-block; /* 行内块显示 */
    margin-right: 5px; /* 右侧间距 */
    transition: transform 0.2s; /* 旋转过渡 */
    color: var(--text-color); /* 箭头颜色 */
}

.elevator-status[open] summary::before {
    content: '▼ '; /* 展开时箭头 */
    transform: rotate(90deg); /* 旋转90度 */
}

/* 状态栏内容区域 - 保持不变 */
.elevator-status .status-content {
    padding: 15px; /* 内边距 */
    line-height: 1.6; /* 行高 */
    font-size: 0.95em; /* 字体大小 */
    text-shadow: 0 0 1px var(--text-color); /* 文本阴影 */
}

/* 状态栏中的段落 - 保持不变 */
.elevator-status .status-content p {
    margin: 5px 0; /* 上下外边距 */
    display: flex; /* Flex布局 */
    flex-wrap: wrap; /* 允许换行 */
    align-items: baseline; /* 底部对齐 */
}

/* 状态标签 (如“模式：”, “时间：”) - 保持不变 */
.elevator-status .status-label {
    color: var(--text-color); /* 文本颜色 */
    font-weight: bold; /* 粗体 */
    margin-right: 8px; /* 右侧间距 */
    white-space: nowrap; /* 不换行 */
    flex-shrink: 0; /* 不缩小 */
}

/* 状态值 (如“高难度模式已开启”, “2024年...”) - 保持不变 */
.elevator-status .status-value {
    color: var(--glitch-c2); /* 强调颜色 */
    flex-grow: 1; /* 占据剩余空间 */
    word-break: break-word; /* 单词内断行 */
}

/* 记忆区标题 - 保持不变 */
.elevator-status .status-content h4 {
    color: var(--warning-yellow); /* 警告色 */
    border-bottom: 1px dashed rgba(127, 255, 0, 0.3); /* 底部虚线 */
    padding-bottom: 5px; /* 底部内边距 */
    margin-top: 15px; /* 顶部外边距 */
    margin-bottom: 10px; /* 底部外边距 */
    font-size: 1em; /* 字体大小 */
    text-shadow: 0 0 3px var(--warning-yellow); /* 文本阴影 */
}

/* 记忆区内容 - 保持不变 */
.elevator-status .status-content .panel-content p {
    margin: 3px 0; /* 上下外边距 */
    color: var(--text-color); /* 文本颜色 */
    font-size: 0.88em; /* 字体大小 */
}

/* 悬停提示 - 保持不变 */
.tooltip-trigger {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dashed var(--glitch-c1); /* 底部虚线 */
}

.tooltip-trigger::after {
    content: attr(data-tooltip-content);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 120%; /* 显示在上方 */
    background: var(--main-bg);
    border: 1px solid var(--glitch-c1);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 3px;
    white-space: pre-wrap;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    min-width: 150px;
    text-align: left;
}

.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 动画 - 保持不变 */
@keyframes container-pulse {
    0%, 100% { box-shadow: inset 0 0 15px var(--main-bg), 0 0 10px var(--border-color); }
    50% { box-shadow: inset 0 0 20px var(--main-bg), 0 0 15px rgba(0, 221, 255, 0.4); }
}

/* 滚动条美化 - 保持不变 */
.elevator-status::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}
.elevator-status::-webkit-scrollbar-track {
    background: var(--main-bg); /* 滚动条轨道背景 */
}
.elevator-status::-webkit-scrollbar-thumb {
    background: var(--border-color); /* 滚动条滑块背景 */
    border-radius: 3px; /* 滑块圆角 */
}
.elevator-status::-webkit-scrollbar-thumb:hover {
    background: var(--text-color); /* 滑块悬停背景 */
    box-shadow: 0 0 5px var(--text-color); /* 滑块悬停阴影 */
}

/* 移动端适配 - 保持不变 */
@media (max-width: 768px) {
    .elevator-status {
        margin-bottom: 8px; /* 调整底部间距 */
    }
    .elevator-status summary {
        padding: 8px 10px; /* 调整内边距 */
        font-size: 1em; /* 调整字体大小 */
    }
    .elevator-status .status-content {
        padding: 10px; /* 调整内边距 */
        font-size: 0.9em; /* 调整字体大小 */
    }
    .elevator-status .status-label {
        margin-right: 5px; /* 调整右侧间距 */
    }
    .tooltip-trigger::after {
        font-size: 0.8em; /* 调整提示字体大小 */
        padding: 6px 10px; /* 调整提示内边距 */
        min-width: 120px;
    }
}

/* --- 新增或修改部分：强制聊天区背景为深色，模拟“固定暗黑模式” --- */

/* 覆盖平台可能存在的白色背景色，针对可能包裹整个聊天区的容器 */
/* 注意：这些类名可能需要根据AI风月网站的实际HTML结构进行微调 */
/* .chat-container, .flex-1.overflow-y-auto, .h-full.w-full */
/* 这里的.flex-col.h-full.relative选择器是经验性尝试，可能会覆盖大部分聊天区域 */
/* 这是一个比较激进的覆盖方式，如果导致其他意外，可以移除 */
.flex-col.h-full.relative, /* 聊天页面的主容器 */
.flex.flex-col.flex-1.overflow-y-auto.items-center.justify-start.w-full { /* 聊天气泡列表的父容器 */
    background-color: rgba(10, 14, 16, 0.95) !important; /* 更深的背景色，几乎不透明 */
    color: var(--text-color) !important; /* 确保聊天区文字颜色可见 */
}

/* 确保输入框底部的整个区域也变成深色 */
/* 针对包裹输入框和按钮的整个底部区域 */
.relative.flex.h-full.w-full.flex-col.items-center.justify-end {
    background-color: rgba(10, 14, 16, 0.95) !important; /* 统一为深色背景 */
}

/* 覆盖可能的页面背景，确保非聊天区域（如侧边栏背景）也统一为暗色 */
/* 由于内置CSS不能使用body, html，这里只能尝试覆盖更具体的容器 */
.relative.flex.min-h-screen.flex-col.items-center, /* 页面根容器 (如果存在) */
.max-w-2xl.flex.w-full.flex-col.items-center { /* 聊天界面内容的容器 */
    background-color: #000000 !important; /* 纯黑背景 */
}



/*
 * ---------------------------------
 *   模块二：平台按钮美化 - 保持不变
 * ---------------------------------
 */
/* "mod、流式、评论、回到底部" 等按钮 */
.flex.items-center.gap-2.pb-2 > button {
    background: #000000 !important; /* 黑色背景 */
    color: #00ddff !important; /* 天蓝色文字 */
    border: 1px solid rgba(0, 221, 255, 0.5) !important; /* 天蓝色边框 */
    border-radius: 2px !important; /* 微小圆角，接近直角 */
    box-shadow: 2px 2px 0px rgba(255, 0, 0, 0.6), 0 0 5px rgba(0, 221, 255, 0.3) !important; /* 红色像素阴影 + 蓝色光晕 */
    font-weight: bold !important;
    text-transform: uppercase !important; /* 按钮文字大写，更像系统指令 */
    transition: all 0.1s ease-out !important;
    padding: 8px 18px !important; /* 调整内边距 */
    letter-spacing: 1px !important; /* 字间距 */
    font-family: 'SimSun', 'NSimSun', 'Courier New', monospace !important;
}
/* 按钮悬停效果 - “按下”与“故障”融合 - 保持不变 */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: rgba(255, 0, 0, 0.1) !important; /* 悬停时背景微红 */
    color: #ff0000 !important; /* 文字变红 */
    transform: translate(2px, 2px) !important; /* 模拟按下的位移 */
    box-shadow: 0 0 0px rgba(255, 0, 0, 0.6), inset 0 0 5px rgba(255, 0, 0, 0.5) !important; /* 外部阴影消失，内部红色光晕 */
    border-color: #ff0000 !important; /* 边框变红 */
    text-shadow: 0 0 5px #ff0000 !important; /* 文本红色光影 */
}

/*
 * ---------------------------------
 *   模块三：多余元素隐藏 (根据需要启用) - 保持不变
 * ---------------------------------
 */
/* 这些元素是平台自带的，如果你想让你的作品更纯粹，可以取消注释 */
/* .MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt, */
/* .absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5), */
/* .css-nkqe49 { */
    /* display: none !important; */
/* } */

/*
 * ---------------------------------
 *   模块四：输入栏美化 - 保持不变
 * ---------------------------------
 */
#ai-chat-input { /* 输入框本身 */
    background-color: #000000 !important; /* 纯黑背景 */
    border: 1px solid rgba(0, 221, 255, 0.6) !important; /* 天蓝色边框 */
    border-radius: 0px !important; /* 直角 */
    color: #cfff00 !important; /* 输入文字使用警告黄，突出输入 */
    box-shadow: inset 0 0 5px rgba(0, 221, 255, 0.3), 0 0 5px rgba(0, 221, 255, 0.2) !important; /* 内外蓝色光晕 */
    font-family: 'SimSun', 'NSimSun', 'Courier New', monospace !important;
    padding: 10px 12px !important; /* 调整内边距 */
    text-shadow: 0 0 2px #cfff00 !important; /* 文本黄色光影 */
}
#ai-chat-input:focus { /* 输入框聚焦时 */
    border-color: #ff0000 !important; /* 聚焦时边框变红 */
    box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.5), 0 0 10px rgba(255, 0, 0, 0.4) !important; /* 聚焦时红色光晕更强 */
    color: #ff0000 !important; /* 输入文字也变红，更具警示性 */
    text-shadow: 0 0 3px #ff0000 !important;
}
/* 输入框容器透明化，突出输入框本身 - 保持不变 */
#ai-chat-bottom-input {
    background: transparent !important; /* 这里的transparent会透出下面新加的深色背景 */
    backdrop-filter: none !important; /* 移除模糊 */
    border: none !important; /* 移除边框 */
    box-shadow: none !important; /* 移除阴影 */
}

/*
 * ---------------------------------
 *   动画效果 - 保持不变
 * ---------------------------------
 */
@keyframes glitch-border-1 {
    0% { clip-path: inset(85% 0 8% 0); transform: translate(-1px, 1px); }
    10% { clip-path: inset(50% 0 15% 0); transform: translate(0px, -1px); }
    20% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 0px); }
    30% { clip-path: inset(90% 0 2% 0); transform: translate(1px, -1px); }
    40% { clip-path: inset(40% 0 45% 0); transform: translate(-0.5px, 1px); }
    50% { clip-path: inset(80% 0 5% 0); transform: translate(1px, -0.5px); }
    60% { clip-path: inset(25% 0 60% 0); transform: translate(-1px, 0.5px); }
    70% { clip-path: inset(5% 0 88% 0); transform: translate(0.5px, -1px); }
    80% { clip-path: inset(75% 0 10% 0); transform: translate(-1px, 1px); }
    90% { clip-path: inset(33% 0 53% 0); transform: translate(1px, -0.5px); }
    100% { clip-path: inset(65% 0 20% 0); transform: translate(-0.5px, 0.5px); }
}

@keyframes glitch-border-2 {
    0% { clip-path: inset(65% 0 20% 0); transform: translate(1px, -1px); }
    10% { clip-path: inset(33% 0 53% 0); transform: translate(-1px, 1px); }
    20% { clip-path: inset(75% 0 10% 0); transform: translate(1px, -1px); }
    30% { clip-path: inset(5% 0 88% 0); transform: translate(-1px, 1px); }
    40% { clip-path: inset(25% 0 60% 0); transform: translate(1px, -1px); }
    50% { clip-path: inset(80% 0 5% 0); transform: translate(-1px, 1px); }
    60% { clip-path: inset(40% 0 45% 0); transform: translate(1px, -1px); }
    70% { clip-path: inset(90% 0 2% 0); transform: translate(-1px, 1px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(1px, -1px); }
    90% { clip-path: inset(50% 0 15% 0); transform: translate(-1px, 1px); }
    100% { clip-path: inset(85% 0 8% 0); transform: translate(1px, -1px); }
}