.light-mode {
    background-color: #ffffff;
    color: #1a1a1a;
}

.sidebar {
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background-color: #202123;
    z-index: 1010; /* 提高層級 */
    transition: transform 0.3s ease;
}

.light-mode .sidebar {
    background-color: #f7f7f8;
}


.sidebar-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 200px; /* 增加底部間距 */
}

.sidebar-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 260px;
    background-color: #1E1F24;
    padding: 1rem 0.5rem;
    z-index: 1002; /* 與側邊欄同層 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.light-mode .sidebar-menu {
    background-color: #f7f7f8;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-item {
    padding: 0.5rem; /* 增加選單項目的間距 */
    margin-bottom: 0.5rem; /* 增加項目之間的間距 */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .sidebar-item:hover {
        background-color: #3A3B41;
        color: #fff;
    }

    .sidebar-item .icon {
        font-size: 0.9rem;
        width: 1.2rem;
    }

.light-mode .sidebar-item {
    color: #1a1a1a;
}

    .light-mode .sidebar-item:hover {
        background-color: #e5e5e5;
        color: #1a1a1a;
    }



/* 聊天歷史記錄區域樣式 */
.chat-history {
    flex: 1;
    overflow-y: auto;
    margin: 1rem 0;
    font-size: 0.85rem;
}




.input-area {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 auto;
    max-width: 768px; /* 設定最大寬度 */
    width: 100%; /* 確保在最大寬度內填滿 */
    padding: 0 1rem; /* 兩側留些間距 */
}

    .input-area input {
        display: none;
    }

    .input-area textarea {
        flex: 1;
        padding: 0.5rem 0.75rem;
        border: 1px solid #3A3B41;
        border-radius: 8px;
        font-size: 0.85rem;
        transition: all 0.2s;
        background-color: #3A3B41;
        color: #fff;
        resize: none;
        min-height: 24px;
        max-height: 200px;
        line-height: 1.5;
        box-sizing: border-box;
        height: 38px; /* 明確設定高度 */
    }

.light-mode .input-area textarea {
    background-color: #f0f0f0;
    color: #1a1a1a;
    border-color: #e5e5e5;
}

.input-area input:focus {
    outline: none;
    border-color: #4CAF50;
}


.icon {
    font-size: 1.2rem;
}

/* 聊天內容區域 */
.chat-container {
    display: none;
    height: calc(100vh - 90px); /* 減去輸入區域的高度 */
    overflow-y: auto;
    padding: 0;
    margin-bottom: 1rem;
}

.chat-message {
    display: flex;
    padding: 1rem 2rem;
    position: relative;
}

.message-content {
    line-height: 1.5;
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1.06rem;   
}

.chat-message.user {
    justify-content: flex-end;
}

    .chat-message.user .message-content {
        margin-right: 2.5rem;
        max-width: 60%;
        background-color: #4CAF50;
        color: white;
        border-radius: 8px;
        padding: 0.8rem 1rem;
    }

.chat-message.assistant {
    justify-content: flex-start;
}

    .chat-message.assistant .message-content {
        margin-left: 2.5rem;
        width: calc(100% - 3rem);
        padding: 0.5rem 0.75rem;
    }

.chat-message.user .avatar {
    right: 1rem;
}

.chat-message.assistant .avatar {
    left: 1rem;
}

.chat-message .avatar {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
}

.avatar .icon {
    font-size: 1.2rem;
    color: #666;
}

.light-mode .avatar .icon {
    color: #999;
}

.main-content {
    flex: 1;
    padding: 1rem;
    margin: 0 auto;
    margin-left: 260px;
    width: calc(100% - 260px);
    padding-bottom: 90px; /* 為輸入區域預留空間 */
    overflow-y: auto; /* 允許主內容區域滾動 */
    height: 100vh; /* 設定高度 */
    padding-top: 3rem; /* 稍微調整頂部間距 */
}

/* 當側邊欄展開時，移動漢堡選單按鈕到右側 */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 修正側邊欄隱藏問題 */
    .sidebar {
        height: 100%;
        overflow: hidden; /* 防止整個側邊欄滾動 */
    }

    .sidebar-content {
        padding-bottom: 180px; /* 保持一致的底部間距 */
    }

    .sidebar-menu {
        padding: 1rem 0.5rem;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* 調整輸入區域 */
    .input-container {
        left: 0;
        z-index: 1001;
    }

    /* 當側邊欄展開時的按鈕樣式 */
    .sidebar:not(.mobile-hidden) ~ .menu-toggle i {
        transform: rotate(180deg);
    }

    /* 調整資料來源下拉選單位置 */
    .data-source-select {
        top: 0.75rem;
        left: 1rem; /* 在手機版時固定在左側 */
    }

    .chat-message {
        padding: 0.75rem 1rem;
    }

        .chat-message.assistant .message-content {
            margin-left: 2rem;
            width: calc(100% - 2.5rem);
            padding: 0.4rem 0.6rem;
        }

        .chat-message.user .message-content {
            margin-right: 2rem;
            max-width: 80%;
        }

    .chat-container {
        height: calc(100vh - 100px); /* 在小螢幕上調整高度 */
    }

    .sidebar.mobile-hidden {
        transform: translateX(-100%);
    }

    .sidebar-menu {
        z-index: 1002;
    }

    /* 當側邊欄隱藏時，選單也要隱藏 */
    .sidebar.mobile-hidden + .main-content + .input-container ~ .sidebar-menu {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 當側邊欄展開時，下拉選單要移動 */
    .sidebar:not(.mobile-hidden) ~ .main-content .data-source-select {
        left: 1rem; /* 保持在原位 */
        transition: none;
    }

    /* 提高側邊欄的 z-index，確保可以遮蓋下拉選單 */
    .sidebar {
        z-index: 1010; /* 確保高於其他元素 */
    }

    /* 調整設定按鈕在手機版的位置 */
    .settings-btn {
        right: 7rem; /* 增加更多間距 */
    }

    /* 頭像在手機版時的位置 */
    .user-profile {
        right: 4rem; /* 稍微向右移動 */
    }
}



/* 歡迎畫面樣式 */
.welcome-screen {
    height: 100%;
    overflow-y: auto; /* 允許歡迎畫面滾動 */
    padding-bottom: 90px; /* 為輸入框預留空間 */
}

/* RWD 調整 */
@media (max-width: 768px) {
    .sidebar.mobile-hidden {
        transform: translateX(-100%);
    }

    .sidebar-content {
        padding-bottom: 180px; /* 保持一致的底部間距 */
    }
}