/* ========================================
   外部聊天專用樣式
   僅包含外部聊天特有的功能樣式
   布局方案與內部聊天統一（Flexbox）
   Version: 6.0.0
   ======================================== */

/* ==================== CSS 變數 ==================== */
:root {
    /* 安全區域變數（iOS 等裝置） */
    --external-chat-safe-bottom: 0px;
    --external-chat-vh: 1vh;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    :root {
        --external-chat-safe-bottom: env(safe-area-inset-bottom);
    }
}

/* ==================== 外部聊天頁面基礎布局 ==================== */
/* 外部聊天沒有 Header，需要覆蓋內部聊天針對有 Header 頁面的設定 */
body.external-chat-page {
    min-height: calc(var(--external-chat-vh) * 100);
    height: calc(var(--external-chat-vh) * 100);
    overflow: hidden;
}

/* 覆蓋 _layout.css 的 main#main 樣式（移除 Header 高度） */
body.external-chat-page main#main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: calc(var(--external-chat-vh) * 100);
    height: calc(var(--external-chat-vh) * 100) !important;
}

/* ==================== Flexbox 統一布局 ==================== */
/* 與內部聊天使用相同的 Flexbox 布局，不使用 position: absolute */

/* 聊天主區域 - 確保 Flexbox 布局 */
body.external-chat-page .je-chat-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 訊息區域 - 佔用剩餘空間 */
body.external-chat-page .je-chat-messages-section {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* 確保 flex 子元素可以正確收縮 */
}

/* 輸入區域 - 固定在底部（Flexbox 自然定位） */
body.external-chat-page .je-chat-input-section {
    flex-shrink: 0;
    padding-bottom: calc(var(--je-space-4) + var(--external-chat-safe-bottom, 0px));
    background: var(--je-bg-primary);
}

/* ==================== 動態視窗高度支援 ==================== */
@supports (height: 100dvh) {
    body.external-chat-page,
    body.external-chat-page main#main {
        min-height: 100dvh;
        height: 100dvh;
    }
}

/* ==================== 側邊欄切換按鈕（無 Header 修正） ==================== */
body.external-chat-page .je-sidebar-toggle {
    top: var(--je-space-3);
}

/* ==================== 響應式調整 ==================== */
@media (max-width: 768px) {
    /* 手機版側邊欄覆蓋樣式（無 Header 版本） */
    body.external-chat-page .je-chat-sidebar {
        top: 0; /* 外部聊天沒有 Header，從頂部開始 */
    }

    body.external-chat-page .je-sidebar-overlay {
        top: 0; /* 外部聊天沒有 Header，從頂部開始 */
    }

    /* 確保輸入區安全區域在手機上正確顯示 */
    body.external-chat-page .je-chat-input-section {
        padding-bottom: calc(var(--je-space-3) + var(--external-chat-safe-bottom, 0px));
    }
}