:root {
    --bg-color: #f0f2f5; /* 修改：背景色稍加深，突出卡片 */
    --surface-color: #ffffff;
    --primary-color: #4f46e5;
    --primary-hover-color: #4338ca;
    --text-color: #1f2937;
    --subtle-text-color: #6b7280;
    --border-color: #e5e7eb;
    --pro-color: #10b981;
    --con-color: #3b82f6;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* 新增：更强的阴影用于主要面板 */
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;
}

body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    padding: 2rem;
    width: 100%;
    max-width: 1600px;
    margin: 1.5rem auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.main-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    flex-grow: 1;
    min-height: 0;
}

.sidebar { /* 修改：移除 .chat-area，它不再是带样式的面板 */
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* 新增：为对话和评判区创建共享的面板样式 */
.conversation-wrapper,
#judge-section {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* 新增：面板标题样式 */
.panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-top: 0;
}

.sidebar {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.chat-area {
    /* 修改：现在只作为布局容器，负责排列两个面板 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 这里设置两个面板之间的间距 */
    min-width: 0;
}

.conversation-wrapper {
    flex-grow: 1; /* 让对话面板占据更多可用空间 */
    min-height: 0; /* 关键修复：确保wrapper可以收缩 */
}

.header {
    margin-bottom: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* 新增：允许在极窄屏幕上换行 */
    gap: 1rem; /* 新增：为换行元素提供间距 */
}

.header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    margin-top: 0; /* 新增：移除默认的上边距 */
}

.header p {
    color: var(--subtle-text-color);
    font-size: 1rem;
    margin-top: 0; /* 新增：移除默认的上边距 */
}

.header-title {
    flex-grow: 1; /* 新增：让标题部分占据多余空间 */
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 修改：增大间距 */
    flex-shrink: 0; /* 新增：防止控件被压缩 */
}

.controls {
    display: flex;
    gap: 0.75rem;
}

.control-group {
    display: flex;
    flex-direction: column;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.875rem;
}

input[type="text"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #f9fafb;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    background-color: var(--primary-color);
    color: white;
}

button:hover {
    background-color: var(--primary-hover-color);
}

button:active {
    transform: scale(0.98);
}

button:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    transform: none;
}

.output-container {
    padding: 0; /* 移除：因为父面板已经有了内边距 */
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 新增：对话实况容器固定初始高度，防止随内容无限增长 */
#output {
    /* 采用flex简写固定初始高度，禁止拉伸和收缩，并提高优先级 */
    flex: 0 0 70vh !important;  /* grow:0, shrink:0, basis:70vh */
    max-height: 80vh !important;
    overflow-y: auto; /* 再强调一次滚动在容器内 */
}

/* 新增：评判输出容器固定初始高度，防止随内容无限增长（桌面端） */
#judge-output {
    flex: 0 0 60vh !important;
    max-height: 70vh !important;
    overflow-y: auto;
}

/* 新增：解除wrapper高度限制，保证#output的固定高度可见 */
/* .conversation-wrapper {
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important;
} */ /* 注释掉：旧的hack规则，现在由新的flex布局处理 */

/* 聊天气泡样式 */
.message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 85%;
}

.message .avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 1rem;
}

.message .content {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.message .sender {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.message.pro { align-self: flex-start; }
.message.pro .avatar { background-color: var(--pro-color); }
.message.pro .content { background-color: #f0fdf4; border: 1px solid #dcfce7; border-top-left-radius: 0.25rem; }
.message.pro .sender { color: var(--pro-color); }

.message.con { align-self: flex-end; flex-direction: row-reverse; }
.message.con .avatar { background-color: var(--con-color); }
.message.con .content { background-color: #eff6ff; border: 1px solid #dbeafe; border-top-right-radius: 0.25rem; }
.message.con .sender { text-align: right; color: var(--con-color); }

.message .text {
    line-height: 1.6;
}

.message .text p:last-child { margin-bottom: 0; }
.message .text h1, .message .text h2, .message .text h3 { margin-top: 1em; margin-bottom: 0.5em; }
.message .text ul, .message .text ol { padding-left: 1.5em; }
.message .text code { background-color: rgba(0,0,0,0.05); padding: 0.2em 0.4em; border-radius: 0.25rem; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9em; }
.message .text pre { background-color: #1f2937; color: #f3f4f6; padding: 1rem; border-radius: var(--radius-md); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.message .text pre code { background-color: transparent; padding: 0; }

.round-separator {
    text-align: center;
    color: var(--subtle-text-color);
    font-size: 0.875rem;
    margin: 1.5rem 0;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
}
.round-separator::before, .round-separator::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: var(--border-color);
}
.round-separator::before { margin-right: 1em; }
.round-separator::after { margin-left: 1em; }

.radio-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.radio-group input { width: auto; }
.radio-group label { margin-bottom: 0; font-weight: normal; cursor: pointer; padding: 0.25rem; }

.judge-section {
    flex-shrink: 0; /* 关键修复：防止评判部分被挤压 */
}
.judge-controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.judge-controls label { margin-bottom: 0; font-weight: 600; }
.judge-controls select { flex-grow: 1; min-width: 150px; }
.judge-controls button { flex-shrink: 0; }
.judge-output { background-color: #fafafa; border-radius: var(--radius-md); padding: 1rem; min-height: 150px; }

/* 元信息区样式，避免窄屏竖排难读 */
.debate-meta {
    background: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}
.debate-meta .meta { white-space: normal; }
.debate-meta .meta-topic { word-break: break-word; }

/* 桌面端：横向排版更紧凑 */
@media (min-width: 993px) {
    .debate-meta { flex-wrap: nowrap; gap: 1.25rem; }
}

/* 评判输出容器：桌面端固定更高初始高度并滚动 */
#judge-output {
    height: 60vh !important;      /* 显式高度，避免受父级布局影响 */
    max-height: 70vh !important;  /* 上限保护 */
    overflow-y: auto;             /* 在框内滚动 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 300px 1fr;
    }
}
@media (max-width: 992px) {
    .main-layout {
        display: flex; /* 修改：切换为flex布局以确保order属性可靠 */
        flex-direction: column; /* 修改：垂直排列 */
    }
    .sidebar {
        order: 1; /* 修改：设置区在上方 */
    }
    .chat-area {
        order: 2; /* 修改：对话区在下方 */
        flex-grow: 1; /* 关键：让聊天区占据所有剩余垂直空间 */
        min-height: auto !important; /* 取消最小高度限制，按内容自然撑开 */
        overflow: visible !important; /* 可见溢出，避免“重叠被裁剪”的视觉问题 */
        padding-bottom: 1rem; /* 与底部组件留出安全距离 */
    }
    /* 移动端：固定稍低的初始高度，避免与评判区重叠 */
    #output {
        flex: 0 0 55vh !important;
        max-height: 65vh !important;
        margin-bottom: 1rem !important; /* 增大与评判区的可视间距 */
        border-bottom: 1px solid var(--border-color); /* 视觉分隔 */
    }
    /* 移动端：让包裹层不再拉伸，顺序堆叠更稳定 */
    .conversation-wrapper { flex: none !important; }
    /* 移动端：评判输出容器也固定高度并内部滚动 */
    #judge-output {
        flex: 0 0 40vh !important;
        max-height: 50vh !important;
        overflow-y: auto;
    }
    /* 增加对话区与评判区之间的间距 */
    .conversation-wrapper { margin-bottom: 1rem; }
    .judge-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
}
@media (max-width: 768px) {
    .container {
        margin: 0;
        padding: 1rem;
        border-radius: 0;
        height: 100%;
    }
    .header h1 { font-size: 1.75rem; }
    .header { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .header-controls { justify-content: flex-end; }
}

#exportFormat {
    width: auto; /* 新增：让下拉框宽度自适应内容 */
    min-width: 180px; /* 新增：保证最小宽度，避免文字换行 */
}