/* css/style.css */
#chat-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}

#chat-widget-initial {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.chat-widget-initial-text-container {
    background-color: #f0f0f0; /* 可在後台調整 */
    color: #333; /* 可在後台調整 */
    padding: 0 15px;
    border-radius: 5px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px; 
    height: 40px; 
    line-height: 40px; /* 與高度相同，垂直置中文字 */
}

.chat-widget-button {
    background-color: #007bff; /* 藍色 */
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    font-size: 24px;
}

.chat-widget-button:hover {
    transform: scale(1.05);
}

#chat-widget-expanded {
    align-items: flex-end;
    display: flex; /* 使用 Flexbox 進行排列 */
    flex-direction: column; /* 垂直排列按鈕 */
    gap: 5px; /* 按鈕之間的間距 */
}

.chat-widget-expanded-button {
    display: block; /* 讓按鈕垂直排列 */
    margin-bottom: 5px; /* 按鈕之間的間距 */
    padding: 10px; /* 調整文字和圖示周圍的留白 */
    text-align: left; /* 文字靠左對齊，方便圖示顯示 */
    box-sizing: border-box; /* 確保 padding 不會增加按鈕的總寬高 */
    /* 固定寬高，根據你的需求調整 */
    width: 200px; /* 根據圖示和 10 個中文字的需求調整 */
    height: 50px; /* 根據圖示和單行文字的高度調整 */
    border-radius: 5px; /* 可選：增加圓角 */
    overflow: hidden; /* 隱藏溢出的內容 */
    white-space: nowrap; /* 防止文字換行 */

}

.chat-widget-expanded-button:hover {
    transform: scale(1.05);
}

.chat-widget-expanded-button i {
    margin-right: 10px; /* 圖示和文字之間的間距 */
    font-size: 1.6em; /* 調整圖示大小 */
    vertical-align: middle; /* 讓圖示垂直居中 */
}

.chat-widget-expanded-button span {
    vertical-align: middle; /* 讓文字垂直居中 */
    font-size: 1.4em; /* 調整文字大小，可以嘗試不同的值，例如 1.2em, 1.3em 等 */
    /* 其他你可能需要的文字樣式，例如： */
    /* font-weight: bold; */ /* 加粗文字 */
    /* text-decoration: none; */ /* 移除連結的底線 */
}

#back-to-top {
    display: flex; /* 使用 flexbox 使圖示居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%; /* 設定圓角 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 24px; /* 調整圖示的基礎大小 */
    position: relative; /* 確保在 expanded 容器內 */
    margin-top: 5px; /* 與上方按鈕保持間距 */
    margin-bottom: 10px; /* 與下方按鈕保持間距 */
    /* 背景顏色、寬度和高度將在 js 中動態設定 */
    box-sizing: border-box; /* 確保 box-sizing 是 border-box */
}

#back-to-top i {
    font-size: 1.6em; /* 調整圖示大小 */
    color: white; /* 設定圖示顏色 */
}

#back-to-top:hover {
    transform: translateY(-3px);
}

#chat-widget-toggle i {
    color: white;
    font-size: 1.4em; /* 可以根據你的喜好調整圖示大小 */
}