:root {
    --primary-color: #4a90e2;
    --bg-color: #ffffff;
    --ai-bubble: #f1f1f1;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    background-color: var(--bg-color);
}

/* 主容器：控制整體垂直居中或靠頂 */
.main-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    transition: all 0.5s ease;
    justify-content: center; /* 初始居中 */
    padding: 15px;
    box-sizing: border-box;
}

/* 當有訊息時，改為從頭排列 */
.main-wrapper.has-messages {
    justify-content: flex-start;
}

h2 {
    text-align: center;
    transition: all 0.5s ease;
    margin-bottom: 20px;
}

.main-wrapper.has-messages h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: left;
}

/* 初始狀態：對話框隱藏 */
#chatContainer {
    flex-grow: 1;
    overflow-y: auto;
    display: none; /* 重要：初始不顯示 */
    width: 100%;
    padding: 10px;
}

/* 當外層加上 has-messages 類別時，顯示對話框並改變排列 */
.main-wrapper.has-messages #chatContainer {
    display: block; /* 顯示出來 */
}

.main-wrapper.has-messages {
    justify-content: flex-start; /* 讓內容從頂部開始排 */
}

/* 輸入區域樣式 */
.input-area {
    background: white;
    border: 1px solid #ddd;
    border-radius: 24px;
    padding: 10px 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.input-area:focus-within {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

#msg {
    flex-grow: 1;
    border: none;
    outline: none;
    resize: none;
    min-height: 28px;
    max-height: 150px;
    font-size: 16px; /* 至少 16px，否則 iPhone 點擊輸入時畫面會自動跳動放大 */
    padding: 8px 0;
    background: transparent;
}
/* 4. 針對超小螢幕的微調 (Media Query) */
@media (max-width: 480px) {
    .input-row {
        gap: 5px; /* 縮小間距以騰出空間給文字框 */
    }
    
    .bubble {
        max-width: 90%; /* 手機上氣泡可以寬一點 */
        font-size: 16px; /* 文字稍微加大提升閱讀性 */
        padding: 10px 14px;
    }

    h2 {
        font-size: 1.5rem;
    }
}

.button-group {
    display: flex;
    gap: 8px;
    padding-bottom: 5px;
}

.icon-btn {
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 44px;  /* 從 36px 加大到 44px (iOS 建議的最小點擊範圍) */
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* 圖標也放大一點 */
}

.icon-btn:hover { background: #e0e0e0; }

#sendBtn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 22px;
    padding: 0 20px;
    height: 44px; /* 與 icon-btn 高度一致 */
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

#sendBtn:hover { opacity: 0.9; }

/* 訊息氣泡樣式 */
.message { display: flex; margin-bottom: 20px; }
.message.user { justify-content: flex-end; }
.bubble {
    max-width: 80%;
    padding: 12px 18px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 15px;
}
.user .bubble { background-color: var(--primary-color); color: white; border-bottom-right-radius: 4px; }
.ai .bubble { background-color: var(--ai-bubble); color: #333; border-bottom-left-radius: 4px; white-space: pre-wrap;}