/* 状态栏整体容器 */
.status-bar {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 字体更现代 */
    background: linear-gradient(135deg, #1a1a2e, #16213e); /* 深邃的渐变背景 */
    border-radius: 12px; /* 圆角边框 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 柔和的阴影 */
    padding: 15px 20px; /* 内边距 */
    margin-bottom: 20px; /* 与下方内容保持距离 */
    color: #e0e0e0; /* 浅灰色文字 */
    border: 1px solid rgba(70, 70, 100, 0.5); /* 半透明边框 */
    backdrop-filter: blur(5px); /* 磨砂玻璃效果，增加高级感 */
}

/* details 标签的样式 */
.status-bar details {
    cursor: pointer; /* 鼠标悬停变手型 */
    user-select: none; /* 禁止选中文字 */
}

/* summary 标签的样式 (折叠/展开标题) */
.status-bar summary {
    font-size: 1.2em; /* 标题稍大 */
    font-weight: bold; /* 加粗 */
    color: #e0e0e0; /* 标题颜色 */
    padding: 5px 0;
    transition: color 0.3s ease; /* 颜色过渡动画 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
}

/* summary 悬停效果 */
.status-bar summary:hover {
    color: #90caf9; /* 悬停时变亮 */
}

/* summary 展开时的箭头图标 */
.status-bar details[open] summary::before {
    content: '▼'; /* 展开时显示向下箭头 */
    margin-right: 8px;
    color: #90caf9;
}

/* summary 折叠时的箭头图标 */
.status-bar details:not([open]) summary::before {
    content: '▶'; /* 折叠时显示向右箭头 */
    margin-right: 8px;
    color: #e0e0e0;
}

/* 状态栏内部的段落文本 */
.status-bar p {
    margin: 8px 0; /* 段落间距 */
    line-height: 1.6; /* 行高 */
    font-size: 0.95em; /* 稍小字体 */
    color: #c0c0c0; /* 比标题稍暗的颜色 */
}

/* 特殊状态文本颜色 */
.status-bar p strong {
    color: #ffffff; /* 强调文字更亮 */
}

/* 冷战状态的特殊样式 */
.status-bar .status-bar p span {
    color: #64b5f6; /* 默认蓝色 */
    font-weight: bold;
}
.status-bar .status-bar p span[style*="color: blue"] { /* 针对冷战中的蓝色 */
    color: #64b5f6 !important; /* 确保蓝色生效 */
}
.status-bar .status-bar p span[style*="color: red"] { /* 如果有其他红色警告 */
    color: #ef9a9a !important; /* 更柔和的红色 */
}

/* 进度条样式 */
.status-bar .status-bar p:has(span[style*="▓"]) { /* 针对包含进度条的p标签 */
    display: flex;
    align-items: center;
}
.status-bar .status-bar p span[style*="▓"] { /* 进度条本身 */
    display: inline-block;
    background: #424242; /* 进度条背景 */
    border-radius: 3px;
    height: 10px;
    margin-left: 5px;
    overflow: hidden; /* 隐藏溢出部分 */
    width: 100px; /* 固定宽度 */
}
.status-bar .status-bar p span[style*="▓"]::before {
    content: '';
    display: block;
    background: linear-gradient(90deg, #64b5f6, #90caf9); /* 渐变蓝色进度条 */
    height: 100%;
    width: var(--progress-width, 0%); /* 由JS或AI动态生成，此处仅为占位 */
    border-radius: 3px;
}

/* 情感反弹或高潮状态的动态效果 (可由JS控制或AI根据状态输出特定HTML结构) */
/* 举例: 如果进入高潮状态, 可以让某个元素轻微闪烁 */
/* @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}
.status-bar .highlight-pulse {
    animation: pulse 1.5s infinite alternate;
    color: #ffcc80;
} */

/* 针对冷战中的特殊提示 */
.status-bar .status-bar p .cold-war-tip {
    color: #ffab91; /* 暖色调，形成对比 */
    font-style: italic;
}

/* 确保行内样式优先级 */
.status-bar .status-bar p .cold-war-status {
    color: #ef9a9a !important; /* 冷战状态显示红色 */
    font-weight: bold;
    text-shadow: 0 0 5pxrgba(239, 154, 154, 0.5); /* 淡淡的光晕 */
}