/* 聊天室特殊布局调整 */
        /* 【2026-07-21 修復】用戶回報F12/CDP開發者工具模擬手機時私信頁面完全空白（實測確認：
           #chat-container/.chat-main-container等元素computed height塌陷為0px）。真正併因：
           chart-pro.css有一條`html, body{height:100% !important}`規則（只在手機版@media區
           塊），chat.css從未定義過相同規則。#chat-container靠`height:100%`從.main-content繼
           承高度，但.main-content本身雖然有`height:calc(100vh...)`，百分比高度鏈式繼承在每一層
           的父元素都需要有明確高度才能成立，而`html`/`body`在chat.html範圍內沒有任何明確height
           設定，導致百分比高度鏈在這一環斷裂。真實手機瀏覽器不受影響推測是別有fallback行為（如
           根據window.innerHeight補償），但CDP/嚴格遵循CSS規範的環境不會。修法：在chat.css新增
           `html, body{height:100%}`規則，與chart-pro.css同步，從根源修好這條斷裂的鏈。 */
        body[data-page="chat"] html,
        html:has(body[data-page="chat"]) {
            height: 100%;
        }
        body[data-page="chat"] .main-content{
            padding: 0 !important;
            max-width: none !important;
            height: calc(100vh - 0px);
        }
        @media (max-width: 768px) {
            body[data-page="chat"] .main-content{
                height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
            }
        }
        
        body[data-page="chat"] #chat-container{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        body[data-page="chat"] .chat-main-container{
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        body[data-page="chat"] .chat-sidebar{
            width: 320px;
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            background: var(--card-bg);
        }
        
        body[data-page="chat"] .chat-content{
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--bg-primary);
        }
        @keyframes skeletonPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        @media (max-width: 768px) {
            body[data-page="chat"] .chat-main-container{
                position: relative;
                overflow: hidden;
            }
            body[data-page="chat"] .chat-sidebar{
                width: 100%;
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                z-index: 2;
                transition: transform 0.3s ease;
            }
            body[data-page="chat"] .chat-content{
                width: 100%;
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                z-index: 1;
                transform: translateX(100%);
                transition: transform 0.3s ease;
            }
            body[data-page="chat"] .chat-main-container.chat-open .chat-sidebar{
                transform: translateX(-100%);
            }
            body[data-page="chat"] .chat-main-container.chat-open .chat-content{
                transform: translateX(0);
            }
            body[data-page="chat"] .mobile-back-btn{
                display: flex;
            }
        }
        @media (min-width: 769px) {
            body[data-page="chat"] .mobile-back-btn{ display: none !important; }
            body[data-page="chat"] .chat-sidebar{ position: relative; transform: none !important; }
            body[data-page="chat"] .chat-content{ position: relative; transform: none !important; }
        }