/* ====== 归葬之契 - 全局界面美化 ====== */
/* 核心色板 */
:root {
    --color-bg: #0a0a0f; /* 背景底色 */
    --color-surface: #12121a; /* 内容区域底色 */
    --color-surface-light: #1a1a26;
    --color-primary: #8b0000; /* 血色-主色调 */
    --color-primary-light: #c53030;
    --color-secondary: #5d5d8d; /* 幽紫色 */
    --color-accent: #d4af37; /* 金色点缀 */
    --color-text: #e0e0e0; /* 主要文字 */
    --color-text-muted: #a0a0b0; /* 次要文字 */
    --border-radius-md: 10px;
    --border-radius-lg: 15px;
}

/* 1. 整体背景与聊天容器 */
body, .chat-container, .message-list {
    background-color: var(--color-bg) !important;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(139, 0, 0, 0.03) 0%, transparent 25%),
        radial-gradient(circle at 85% 20%, rgba(93, 93, 141, 0.03) 0%, transparent 25%) !important;
    color: var(--color-text) !important;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* 2. 用户消息气泡 (玩家-契主) */
.message.user {
    background-color: rgba(26, 26, 38, 0.85) !important; /* 深灰蓝底 */
    border: 1.5px solid var(--color-primary) !important; /* 血色边框 */
    border-left: 5px solid var(--color-primary) !important; /* 左侧粗边 */
    border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0 !important;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.2) !important;
    color: var(--color-text) !important;
    margin: 10px 0 !important;
    padding: 14px 18px !important;
    position: relative;
}
.message.user::before {
    content: '👤 契主';
    position: absolute;
    top: -20px;
    left: 5px;
    font-size: 0.8rem;
    color: var(--color-primary-light);
    font-weight: bold;
    background: var(--color-surface);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--color-primary);
}

/* 3. AI消息气泡 (僵尸娘-玉傀) */
.message.assistant, .message.bot {
    background-color: rgba(255, 255, 255, 0.05) !important; /* 半透明白底 */
    border: 1.5px solid var(--color-secondary) !important; /* 幽紫边框 */
    border-right: 5px solid var(--color-secondary) !important;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 var(--border-radius-md) !important;
    box-shadow: 0 4px 12px rgba(93, 93, 141, 0.15) !important;
    color: var(--color-text) !important;
    margin: 10px 0 !important;
    padding: 14px 18px !important;
    position: relative;
}
.message.assistant::before, .message.bot::before {
    content: '🧟 玉傀';
    position: absolute;
    top: -20px;
    right: 5px;
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-weight: bold;
    background: var(--color-surface);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--color-secondary);
}

/* 4. 消息内部文字与链接 */
.message p, .message div, .message span:not(.timestamp) {
    color: var(--color-text) !important;
    line-height: 1.7 !important;
    font-size: 1.05rem !important;
}
.message a {
    color: var(--color-accent) !important;
    text-decoration: underline dotted;
}
.message a:hover {
    color: var(--color-primary-light) !important;
}

/* 5. 状态栏折叠细节美化 (targeting details/summary) */
/* 针对主提示词中状态栏的HTML结构进行美化 */
details {
    background-color: var(--color-surface) !important;
    border: 1px solid rgba(139, 0, 0, 0.3) !important;
    border-radius: var(--border-radius-md) !important;
    margin: 15px 0 !important;
    padding: 5px !important;
    transition: all 0.3s ease;
}
details:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 5px 15px rgba(139, 0, 0, 0.2) !important;
}
summary {
    color: var(--color-accent) !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    padding: 12px 15px !important;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(139,0,0,0.1), transparent) !important;
    border-radius: var(--border-radius-md) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
summary:hover {
    background: linear-gradient(90deg, rgba(139,0,0,0.2), transparent) !important;
}
summary::marker, summary::-webkit-details-marker {
    color: var(--color-primary) !important;
}
/* 状态栏内部内容样式 */
details > div, details > :not(summary) {
    padding: 15px !important;
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    margin-top: 5px !important;
}
details table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
details th {
    background-color: rgba(139, 0, 0, 0.2);
    color: var(--color-accent);
    padding: 10px;
    text-align: left;
    border: 1px solid rgba(139, 0, 0, 0.5);
}
details td {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}
details tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* 6. 输入框区域美化 */
.input-area, .chat-input-container, textarea {
    background-color: var(--color-surface) !important;
    border: 2px solid var(--color-surface-light) !important;
    border-radius: var(--border-radius-lg) !important;
    color: var(--color-text) !important;
    font-family: inherit !important;
    padding: 15px !important;
}
textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.2) !important;
}

/* 7. 按钮通用美化 */
button:not(.step-button):not(.roll-button):not(.action-btn):not(.lock-btn) {
    background-color: var(--color-surface-light) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-secondary) !important;
    border-radius: var(--border-radius-md) !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
button:hover:not(.step-button):not(.roll-button):not(.action-btn):not(.lock-btn) {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* 8. 移动端适配优化 */
@media (max-width: 768px) {
    .message.user, .message.assistant, .message.bot {
        padding: 12px 15px !important;
        margin: 8px 0 !important;
        font-size: 1rem !important;
    }
    details {
        margin: 10px 0 !important;
    }
    summary {
        padding: 10px 12px !important;
        font-size: 1rem !important;
    }
}