/* ========================================
   Chat Fullscreen - 響應式設計
   ======================================== */

/* 側邊欄遮罩 - 預設隱藏 */
.je-sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    /* 聊天版面 - 手機允許滾動 */
    .je-chat-layout {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 側邊欄作為手機抽屜面板 */
    .je-chat-sidebar {
        position: fixed;
        top: var(--je-header-height, var(--je-space-20, 80px)); /* 原始: 80px */
        left: 0;
        bottom: 0;
        width: var(--je-space-70); /* 280px */
        max-width: 85vw; /* 百分比，非尺寸 */
        height: auto !important;
        z-index: 201; /* z-index，非尺寸 */
        background: var(--je-bg-secondary);
        transform: translateX(0);
        transition: transform 0.3s ease;
        box-shadow: var(--je-shadow-lg);
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 手機上側邊欄歷史不佔滿空間，讓提示可見 */
    .je-sidebar-history {
        flex: 0 1 auto;
        max-height: 50vh; /* 百分比，非尺寸 */
        min-height: 150px; /* 固定尺寸，無對應變數 */
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.je-sidebar-collapsed .je-chat-sidebar {
        transform: translateX(-100%);
    }

    /* 側邊欄遮罩 */
    .je-sidebar-overlay {
        display: block;
        position: fixed;
        top: var(--je-header-height, var(--je-space-20, 80px)); /* 原始: 80px */
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--je-overlay-medium); /* 透明度，非尺寸 */
        z-index: 200; /* z-index，非尺寸 */
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.je-sidebar-collapsed .je-sidebar-overlay {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* 切換按鈕 - 固定左側 */
    .je-sidebar-toggle {
        left: var(--je-space-3) !important; /* 原始: 12px */
        z-index: 202; /* z-index，非尺寸 */
    }

    /* 主聊天區佔滿寬度 */
    .je-chat-main {
        width: 100%;
    }

    /* 聊天區內距 */
    .je-chat-messages-section {
        padding: var(--je-space-4);
        padding-top: var(--je-space-15, 60px); /* 原始: 60px */
    }

    .je-chat-input-section {
        padding: var(--je-space-3);
    }

    .je-chat-messages-inner,
    .je-chat-input-container {
        max-width: 100%;
    }

    .je-message-content {
        max-width: 90%; /* 百分比，非尺寸 */
    }

    /* 歡迎畫面 */
    .je-chat-empty-state {
        padding: var(--je-space-8) var(--je-space-4);
    }

    .je-chat-empty-state .je-welcome-avatar {
        width: var(--je-space-16, 64px); /* 原始: 64px */
        height: var(--je-space-16, 64px); /* 原始: 64px */
        font-size: var(--je-text-2xl); /* 原始: 24px */
    }

    .je-chat-empty-state h1 {
        font-size: var(--je-text-xl);
    }

    /* 手機上的歷史項目 */
    .je-history-item {
        padding: var(--je-space-2);
        gap: var(--je-space-2);
    }

    .je-history-avatar {
        width: var(--je-space-8); /* 原始: 32px */
        height: var(--je-space-8); /* 原始: 32px */
        min-width: var(--je-space-8); /* 原始: 32px */
        font-size: var(--je-text-xs); /* 原始: 12px */
    }

    .je-history-item-actions {
        gap: var(--je-space-0-5, 2px); /* 原始: 2px，無對應變數 */
    }

    .je-edit-title-btn,
    .je-delete-thread-btn,
    .je-history-item > .je-edit-title-btn,
    .je-history-item > .je-delete-thread-btn {
        width: 26px; /* 固定尺寸，無對應變數 */
        height: 26px; /* 固定尺寸，無對應變數 */
    }

    .je-history-item > .je-edit-title-btn {
        right: 34px; /* 固定位置，無對應變數 */
    }

    .je-history-item > .je-delete-thread-btn {
        right: var(--je-space-1-5, 6px); /* 原始: 6px，無對應變數 */
    }

    /* 手機上永遠顯示操作按鈕（觸控裝置無 hover） */
    .je-history-item-actions {
        opacity: 1;
    }

    .je-history-item > .je-edit-title-btn,
    .je-history-item > .je-delete-thread-btn {
        opacity: 1;
    }

    /* 側邊欄 Agent 資料卡 */
    .je-sidebar-agent {
        padding: var(--je-space-2);
    }

    .je-agent-avatar {
        width: var(--je-space-10, 40px); /* 原始: 40px */
        height: var(--je-space-10, 40px); /* 原始: 40px */
        min-width: var(--je-space-10, 40px); /* 原始: 40px */
        font-size: var(--je-text-base); /* 原始: 16px */
    }
}

@media (max-width: 639px) /* sm 斷點 */ {
    .je-chat-input-row {
        gap: var(--je-space-1);
    }

    .je-chat-action-btn {
        width: var(--je-space-8); /* 原始: 32px */
        height: var(--je-space-8); /* 原始: 32px */
    }

    .je-chat-window-input-wrapper .je-chat-input {
        font-size: var(--je-text-sm);
    }

    .je-suggested-question-item {
        padding: var(--je-space-2);
        font-size: var(--je-text-xs);
    }

    /* 訊息氣泡 */
    .je-chat-content {
        padding: var(--je-space-2) var(--je-space-3);
        font-size: var(--je-text-sm);
    }

    /* 提示區塊 */
    .je-sidebar-tips li {
        padding: var(--je-space-2);
        font-size: 11px; /* 固定尺寸，無對應變數 */
    }

    .je-sidebar-tips li::before {
        font-size: var(--je-space-2); /* 原始: 8px */
    }
}