/* 確保 body 和 html 佔滿整個視口 */
html, body {
    height: 100%; /* 讓 html 和 body 佔滿整個頁面 */
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    -webkit-overflow-scrolling: touch; /* iOS 上的平滑滾動 */
    background-color: #F2F4F7;
    overflow: hidden ; /* 防止整個頁面出現捲軸，讓 .chat-window 負責內部捲動 */

}
/* 聊天容器：使用 Flexbox 垂直佈局，佔滿整個視口 */
.chat-container {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    height: 100vh; /* 佔滿整個視口高度 */

    width: 100%; /* 預設佔據大部分寬度 */
    max-width: 700px; /* 最大寬度，避免過寬 */
    margin: 0 auto; /* 水平居中 */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #F2F4F7;
    /*background-color: #27AE60;*/
    overflow: hidden; /* 隱藏超出部分的內容，讓內部元素負責滾動 */
}
/* 聊天視窗：自動佔據剩餘空間並可滾動 */
.chat-window {
    flex-grow: 1; /* 讓聊天視窗佔滿所有剩餘的垂直空間 */
    overflow-y: auto; /* 啟用垂直滾動條 */
    -webkit-overflow-scrolling: touch; /* iOS 上的平滑滾動 */
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* padding-bottom: 70px; */ /* 如果輸入框有半透明效果，可增加底部內邊距避免內容被遮擋 */
}

/* 輸入區域：固定在底部，高度不變 */
.input-area {
    /* 保持 display: flex; 以便內部元素水平排列 */
    display: flex;
    flex-direction: row;
    padding: 15px;
    border-top: 1px solid #eee;
    background-color: #f8f9fa;
    align-items: center;
    flex-shrink: 0; /* 防止輸入區域在空間不足時縮小 */
}

.input-area input {
    flex-grow: 1; /* 輸入框佔滿大部分空間 */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 1rem; /* 響應式字體 */
    outline: none;
}


.input-area button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}
/* "發送"按鈕的特定樣式 */
#sendButton {
    background-color: #28a745; /* 綠色 */
    color: white;
}

#sendButton:hover {
    background-color: #218838;
}

/* "Help"按鈕的特定樣式 */
#helpButton {
    background-color: #007bff; /* 藍色 */
    color: white;
    margin-right: 10px; /* "Help"按鈕與"發送"按鈕之間的間距 */
}

#helpButton:hover {
    background-color: #0056b3;
}
#clearHistoryButton {
    background-color: #6c757d; /* 灰色 */
    color: white;
    margin-right: 10px; /* 與旁邊按鈕的間距 */
}

#clearHistoryButton:hover {
    background-color: #5a6268;
}

/* 禁用按鈕的樣式 */
.input-area button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
/* 聊天室容器的樣式 */
.chat-room-container {
    background-color: #EDEDED; /* 淺藍色背景 */
    border: 1px solid #111111;  /* 藍色邊框 */
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px; /* 與下一個訊息之間留有間距 */
    /* 這裡使用 Flexbox 垂直排列，並讓內容對齊 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* 內部消息的間距 */
}
/* 聊天室名稱 */
.chat-room-container .room-name {
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #940D06; /* 深藍色文字 */
    text-align: center; /* <-- 關鍵：讓聊天室名稱文字置中 */
}


/* 確保聊天訊息在聊天室框框內時也能正確對齊 */
.chat-room-container .message {
    align-self: flex-start;
}

.chat-room-container .user-message {
    align-self: flex-end;
}

/* 訊息樣式 (簡單示例) */
.message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
    max-width: 80%; /* 訊息最大寬度 */
    word-wrap: break-word; /* 自動換行 */
}
/* 縮折內容的容器 */
.collapsible-content {
    max-height: 120px; /* 預設顯示的高度，例如顯示 5-6 行文字 */
    overflow: hidden;  /* 隱藏超出高度的內容 */
    position: relative; /* 為了漸變效果 */
    padding-bottom: 20px; /* 為漸變和按鈕留出空間 */
}

/* 內容底部的漸變遮罩，表示內容被截斷 */
.collapsible-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* 漸變的高度 */
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); /* 從不透明到透明的漸變 */
    pointer-events: none; /* 讓點擊穿透到下面的按鈕 */
}
/* 針對深色訊息泡泡的漸變色 */
.message.bot-message .collapsible-content::after {
    background: linear-gradient(to top, var(--bot-background-color, #E8F5E9), rgba(232,245,233,0)); /* 機器人背景色 */
}
.message.user-message .collapsible-content::after {
    background: linear-gradient(to top, var(--user-background-color, #DCF8C6), rgba(220,248,198,0)); /* 使用者背景色 */
}

/* 展開按鈕的樣式 */
.toggle-collapse-btn {
    display: block; /* 讓按鈕獨佔一行 */
    width: fit-content; /* 按鈕寬度適應內容 */
    margin-top: 5px; /* 與內容的間距 */
    background: none; /* 無背景 */
    border: none;
    color: #007bff; /* 藍色文字，表示可點擊 */
    text-decoration: underline; /* 下劃線 */
    cursor: pointer;
    font-size: 0.85rem; /* 小字體 */
    font-weight: bold;
    padding: 2px 0;
    outline: none; /* 移除點擊時的外框 */
}

/* 內容展開後的樣式 */
.collapsible-content.expanded {
    max-height: none; /* 完全展開 */
    overflow: visible; /* 允許內容可見 */
    padding-bottom: 0; /* 移除額外底部空間 */
}
/* 內容展開後，移除漸變遮罩 */
.collapsible-content.expanded::after {
    display: none;
}

/* ----------------------------------------------------------- */
/* 補充：為訊息類型定義 CSS 變數，方便在 JavaScript 中使用漸變色 */
/* 您可以將這些顏色替換為您選擇的配色方案中的顏色 */
.message.bot-message {
    --bot-background-color: #E8F5E9; /* 方案1的機器人背景色 */
}
.message.user-message {
    --user-background-color: #DCF8C6; /* 方案1的使用者背景色 */
}

.user-message {
    align-self: flex-end; /* 靠右對齊 */
    /*background-color: #F3D8C8; !* 清新淺綠 *!*/
    background-color: #27AE60; /* 清新淺綠 */
    color: #FFFFFF;
}

.bot-message {
    align-self: flex-start; /* 靠左對齊 */
    background-color: #ECF9F4; /* 淺綠 */
    color: #000000;
}
.system-message {
    align-self: flex-start; /* 靠左對齊 */
    background-color: #E6E9EF;
    color: #606266;
    border: 1px solid #D8DCE6;
    /*background-color: #fff0ff; !* 淺灰色 *!*/
}
.error-message {
    align-self: flex-start; /* 靠左對齊 */
    background-color: #FFD9D9; /* 淡粉紅 */
    color: #CC3333;           /* 紅色 */
    border: 1px solid #FFB3B3; /* 粉紅邊框 */
    font-weight: bold;

}

/* RWD - 小螢幕調整 */
@media (max-width: 600px) {
    html, body {
        /* 在行動裝置上，可能需要移除 overflow: hidden; 或調整以處理地址欄和工具欄的行為 */
        /* 但對於聊天頁面，通常還是希望佔滿 */

        overflow: hidden ; /* 防止整個頁面出現捲軸，讓 .chat-window 負責內部捲動 */
    }

    .chat-container {
        /*height: 100vh; !* 在行動裝置上確保佔滿高度 *!*/
        height: calc(var(--vh, 1vh) * 100);
        width: 100%;
        max-width: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* --- MODIFIED: 僅放大聊天訊息文字 --- */
    .message {
        font-size: 1.3rem; /* 在手機上放大聊天訊息文字 */
        line-height: 1.5;  /* 搭配較大字體，增加行高以利閱讀 */
    }
    .input-area {
        flex-direction: column; /* 垂直排列 */
        gap: 10px; /* 行之間的間距 */
        padding: 10px; /* 調整內邊距 */
        transform: none; /* 移除水平置中 */
        left: 0;
    }
    
    .input-area input {
        width: 90%;
        margin-right: 5px;
        font-size: 0.9rem;
    }
    /* 讓按鈕容器在小螢幕上也佔滿整行 */
    .input-buttons-wrapper {
        width: 100%;
        justify-content: flex-end; /* 將按鈕靠右對齊 (類似 Line 的佈局) */
        gap: 8px;
    }

    .input-area button {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}
/* Basic style for thinking message */
.thinking-message {
    font-style: italic;
    color: #888;
    background-color: #e9e9eb; /* Keep it consistent with bot messages */
    align-self: flex-start;
    padding: 10px 15px; /* Slightly more padding for aesthetics */
    border-radius: 18px;
    max-width: 80%;
    word-wrap: break-word;
    line-height: 1.4;
    font-size: 1rem;

    /* Flexbox for text + dots */
    display: flex;
    align-items: flex-end; /* Align dots with bottom of text */
}

/* Hide the actual "思考中..." text slightly if you just want dots */
.thinking-message strong {
    margin-right: 5px; /* Space between "機器人:" and "思考中..." */
}

.thinking-message span {
    /* This span will contain the "思考中..." text */
    /* You could also hide the text and only show dots if preferred */
}


/* --- Typing Dots Animation --- */

/* The container for the dots */
.thinking-message .dots {
    display: inline-flex; /* Make it inline with text */
    align-items: center; /* Vertically align dots */
    margin-left: 5px; /* Space between "思考中" and dots */
    height: 1em; /* Ensure consistent height */
}

/* Individual dot style */
.thinking-message .dots span {
    width: 6px; /* Dot size */
    height: 6px;
    background-color: #888; /* Dot color */
    border-radius: 50%; /* Make them perfectly round */
    margin: 0 2px; /* Space between dots */
    display: inline-block; /* Essential for animation */
    opacity: 0; /* Start invisible */
    animation: typingDots 1.5s infinite ease-in-out; /* Apply animation */
}

/* Delay for each dot */
.thinking-message .dots span:nth-child(1) {
    animation-delay: 0s;
}
.thinking-message .dots span:nth-child(2) {
    animation-delay: 0.3s;
}
.thinking-message .dots span:nth-child(3) {
    animation-delay: 0.6s;
}


/* The Keyframe Animation */
@keyframes typingDots {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    25% {
        opacity: 1;
        transform: translateY(-3px); /* Lift the dot slightly */
    }
    50% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}


/* --- Optional: If you want just dots without the "思考中..." text --- */
/* You would modify showThinkingMessage to pass an empty string for message,
    and then uncomment the following CSS if you also want a pulsating background.
*/
/*
.thinking-message {
    animation: pulseBackground 1.5s infinite alternate;
    justify-content: center; // Center dots if no text
}

@keyframes pulseBackground {
    0% { background-color: #e9e9eb; }
    100% { background-color: #dcdcdc; }
}
*/

/* Mobile responsiveness (from previous code) */
@media (max-width: 600px) {
    .thinking-message {
        padding: 8px 12px;
        font-size: 0.95rem;
    }
    .thinking-message .dots span {
        width: 5px;
        height: 5px;
        margin: 0 1.5px;
    }
    /* 調整手機上按鈕間距 */
    .input-area input {
        margin-right: 8px;
    }
    #helpButton {
        margin-right: 8px;
    }
}