body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px 30px;
}
h1 { text-align: center; color: #111; margin-bottom: 5px; }
.subtitle { text-align: center; color: #666; margin-top: 0; margin-bottom: 25px; }

/* --- 輸入界面樣式 --- */
#input-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-weight: 600; color: #333; }
.persona-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
textarea { width: 98%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; resize: vertical; }
#generate-personas-btn { align-self: flex-start; background-color: #6c757d; font-size: 14px; padding: 8px 15px; }
#generate-personas-btn:hover:not(:disabled) { background-color: #5a6268; }

button { padding: 12px 20px; font-size: 16px; font-weight: bold; color: #fff; background-color: #007bff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; }
button:hover:not(:disabled) { background-color: #0056b3; }
button:disabled { background-color: #ccc; cursor: not-allowed; }
.status-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#status-display { text-align: left; font-style: italic; color: #666; }
#download-options { display: flex; gap: 10px; }
.secondary-btn { font-size: 14px; padding: 8px 12px; background-color: #28a745; }
.secondary-btn:hover:not(:disabled) { background-color: #218838; }

#conversation-container { display: flex; flex-direction: column; gap: 15px; max-height: 60vh; overflow-y: auto; padding: 10px; border: 1px solid #eee; border-radius: 6px; }
.chat-bubble { max-width: 80%; padding: 10px 15px; border-radius: 18px; line-height: 1.5; word-wrap: break-word; }
.chat-bubble .speaker { font-weight: bold; margin-bottom: 5px; }
.alpha-bubble { background-color: #007bff; color: white; align-self: flex-start; border-bottom-left-radius: 2px; }
.bravo-bubble { background-color: #e4e6eb; color: #050505; align-self: flex-end; border-bottom-right-radius: 2px; }

/* --- 通用 Markdown 樣式 --- */
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3,
#final-report-content h1, #final-report-content h2, #final-report-content h3 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.2;
}
.chat-bubble ul, .chat-bubble ol,
#final-report-content ul, #final-report-content ol {
    padding-left: 25px;
    margin-top: 5px;
    margin-bottom: 10px;
}
.chat-bubble li,
#final-report-content li {
    margin-bottom: 4px;
    padding-left: 5px;
}
.chat-bubble p,
#final-report-content p {
    margin-top: 0;
    margin-bottom: 0.8em; 
}
.chat-bubble p:last-child,
#final-report-content p:last-child {
    margin-bottom: 0;
}

#final-report-container { 
    margin-top: 30px; 
    padding-top: 20px; 
    border-top: 2px solid #007bff; 
}
#final-report-content { 
    background-color: #f9f9f9; 
    padding: 20px; 
    border-radius: 8px;
}

/* --- ↓↓↓ 核心改動喺呢度 (V2.2) ↓↓↓ --- */
/* 專門針對最終報告，收窄排版 */
#final-report-content {
    line-height: 1.45; /* 輕微收窄整體行距 */
}
#final-report-content h1, #final-report-content h2, #final-report-content h3, #final-report-content h4 {
    margin-top: 0.8em; /* 大幅減少標題上方距離 */
    margin-bottom: 0.2em; /* 大幅減少標題下方距離 */
    line-height: 1.2;
}
#final-report-content ul, #final-report-content ol {
    margin-top: 0.2em;
    margin-bottom: 0.4em; /* 減少整個列表下方的距離 */
    padding-left: 20px;
}
#final-report-content li {
    margin-bottom: 0.1em; /* 大幅減少列表項之間的距離 */
    padding-left: 5px;
}
/* 針對嵌套列表，例如 li 入面又有個 ul */
#final-report-content li ul, #final-report-content li ol {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
#final-report-content p {
    margin-top: 0.2em;
    margin-bottom: 0.3em; /* 減少段落之間的距離 */
}
#final-report-content p:last-child {
    margin-bottom: 0;
}
#final-report-content hr {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
/* --- ↑↑↑ 核心改動結束 ↑↑↑ --- */

.hidden { display: none; }