/* ==================== chart-pro.html 專用樣式（原內嵌 <style>，2026-07-16 抽成外部檔案以支援SPA Router的CSS管理） ==================== */
/* 抽出原因：Router的ensureCss()只管理<link>外部樣式表，內嵌<style>區塊在SPA導航時不會被載入/執行，
   曾導致.modal-overlay預設隱藏規則失效，讓customIndicatorEditor等彈窗在SPA導航進首頁時直接顯示出來
   （2026-07-16瀏覽器實測發現，純code review無法測出）。改抽成外部CSS檔案由manifest.css管理後修復。 */

        /* 圖表專用變數 */
        :root, [data-theme="dark"] { --chart-bg:#0F1419; --chart-text:#71767B; --chart-grid:rgba(47,51,54,0.6); }
        [data-theme="light"] { --chart-bg:#ffffff; --chart-text:#71767B; --chart-grid:rgba(200,200,200,0.4); }
        [data-theme="dark-blue"] { --chart-bg:#0d1b2e; --chart-text:#6b8cae; --chart-grid:rgba(30,60,90,0.5); }
        [data-theme="eye-care"] { --chart-bg:#f5f0e8; --chart-text:#7a6a52; --chart-grid:rgba(180,160,120,0.4); }
        [data-theme="eye-care-2"] { --chart-bg:#1a2a1a; --chart-text:#6a8c6a; --chart-grid:rgba(40,80,40,0.5); }
        /* 圖表容器 */
        .chart-section { position:relative; }
        /* chart-container 覆寫 */
        #mainView .chart-container {
            margin: 0 !important;
            border-radius: 0 !important;
            width: 100% !important;
            height: auto !important;
            background: transparent !important;
        }
        #subChartsContainer { margin: 0 !important; padding: 0 !important; width: 100% !important; }
        /* 發布面板預設隱藏，開啟時才顯示 */
        #cmPublishSheet:not(.show) { display: none !important; }
        #mainView .chart-section {
            margin: 0 !important;
        }
        .chart-container.sub { height:150px !important; }
        .chart-section.hidden { display:none; }
        /* 十字線資訊 */
        .crosshair-info { position:absolute; top:36px; left:8px; z-index:10; background:rgba(0,0,0,0.7); padding:4px 8px; border-radius:4px; font-size:12px; color:#e5e7eb; pointer-events:none; white-space:nowrap; }
        .mode-data-info { position:absolute; top:32px; left:8px; z-index:20; background:var(--bg-secondary,#16181C); border:1px solid var(--border-color,#2F3336); padding:6px 12px; border-radius:8px; font-size:12px; color:#e5e7eb; pointer-events:auto; max-width:400px; cursor:default; }
        /* 篩選浮層 */
        .filter-panel { display:flex; align-items:center; gap:5px; background:rgba(15,20,25,0.92); border:1px solid var(--border-color); border-radius:8px; padding:4px 8px; backdrop-filter:blur(12px); white-space:nowrap; }
        /* filterPopover 裡的 filter-panel 取消 insights.css 的 border-bottom + padding（改為簡潔內嵌樣式）*/
        #filterPopover .filter-panel { border-bottom:none !important; padding:0 !important; animation:none !important; background:none !important; border:none !important; backdrop-filter:none !important; border-radius:0 !important; }
        .filter-input-compact { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:4px; padding:4px 8px; font-size:12px; width:80px; }
        .filter-select-compact { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:4px; padding:4px 8px; font-size:12px; }
        .filter-btn-compact { background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:4px; padding:4px 10px; font-size:12px; cursor:pointer; }
        .filter-btn-compact:hover, .filter-btn-compact.primary { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
        /* mode tab */
        .mode-buttons { display:flex; gap:4px; padding:8px 16px; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); }
        .mode-btn { padding:6px 16px; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:6px; color:var(--text-secondary); font-size:13px; cursor:pointer; }
        .mode-btn.active { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
        /* 內容面板 */
        .content-panel { display:none; padding:16px; }
        .content-panel.active { display:block; }
        .positions-panel { background:var(--bg-secondary); border-radius:8px; padding:16px; }
        .panel-title { font-size:15px; font-weight:600; margin-bottom:12px; }
        .empty-state { text-align:center; padding:40px; color:var(--text-secondary); }
        .empty-state i { font-size:32px; margin-bottom:12px; display:block; }
        /* 下單側欄 */
        .sidebar-order { position:fixed; top:0; right:-380px; width:360px; height:100vh; background:var(--bg-primary); border-left:1px solid var(--border-color); z-index:500; transition:right 0.3s; overflow-y:auto; padding:20px; }
        .sidebar-order.open { right:0; }
        /* ===== 投資觀點卡片樣式 ===== */
        .feed-card {
            background: var(--bg-secondary, #16181C);
            border: 1px solid var(--border-color, #2F3336);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 8px;
            transition: border-color 0.2s, background 0.2s, transform 0.1s;
        }
        .feed-card:hover {
            border-color: var(--primary-color, #1D9BF0);
            background: var(--bg-hover, #1E2126);
        }
        .feed-card-active {
            border-color: var(--primary-color, #1D9BF0) !important;
            background: var(--bg-hover, #1E2126) !important;
            box-shadow: 0 0 0 2px rgba(29,155,240,0.25);
        }
        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .card-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-color, #1D9BF0);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 15px;
            color: white;
            flex-shrink: 0;
        }
        .card-user-info { flex: 1; min-width: 0; }
        .card-username {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary, #E7E9EA);
        }
        .card-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-secondary, #71767B);
            margin-top: 2px;
            flex-wrap: wrap;
        }
        .card-badge {
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
        }
        .card-badge.long { background: rgba(0,186,124,0.15); color: #00BA7C; }
        .card-badge.short { background: rgba(244,33,46,0.15); color: #F4212E; }
        .card-content {
            font-size: 13px;
            color: var(--text-primary, #E7E9EA);
            line-height: 1.6;
            margin: 6px 0;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 80px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
        }
        .card-tag {
            padding: 2px 8px;
            background: var(--bg-tertiary, #1C1F26);
            border-radius: 12px;
            font-size: 11px;
            color: var(--text-secondary, #71767B);
            cursor: pointer;
        }
        .card-tag:hover { color: var(--primary-color, #1D9BF0); }
        .card-actions {
            display: flex;
            gap: 16px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color, #2F3336);
        }
        .card-action-btn {
            background: none;
            border: none;
            color: var(--text-secondary, #71767B);
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0;
            transition: color 0.15s;
        }
        .card-action-btn:hover { color: var(--primary-color, #1D9BF0); }
        .card-action-btn.favorited { color: #F59E0B; }
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary, #71767B);
        }
        .empty-state i { font-size: 32px; margin-bottom: 12px; opacity: 0.4; }
    
        /* ===== 技術指標副圖 ===== */
        .sub-chart { position:relative; border-top:1px solid var(--border-color,#2F3336); margin:0 !important; padding:0 !important; width:100% !important; box-sizing:border-box; border-radius:0 !important; overflow:hidden; height:150px; }
        .sub-chart canvas { border-radius:0 !important; }
        .sub-chart > div { border-radius:0 !important; }
        .indicator-tags { display:flex; flex-wrap:wrap; gap:4px; pointer-events:auto; }
        .indicator-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.6); border:1px solid var(--border-color,#2F3336); border-radius:4px; padding:2px 8px; font-size:12px; color:var(--text-primary,#E7E9EA); }
        .indicator-tag-name { font-weight:500; }
        .indicator-tag-value { font-size:11px; }
        .indicator-tag-settings,.indicator-tag-close { cursor:pointer; color:var(--text-secondary,#71767B); font-size:11px; }
        .indicator-tag-settings:hover { color:var(--primary-color,#1D9BF0); }
        .indicator-tag-close:hover { color:#ef4444; }
        /* 貼文副圖右側結果欄：對齊技術指標副圖的 rightPriceScale minimumWidth:80，讓貼文副圖讀起來像同家族其他副圖一樣“左圖右數據” */
        #postPanelResult { transition: background 0.15s; }
        #postPanelResult:hover { background: rgba(255,255,255,0.03); }
        /* 原地編輯發文（2026-07-20 Phase A）：#ppeContent 是動態插入的 textarea，::placeholder 無法用 inline style 設定，需要外部 CSS rule */
        #ppeContent { font-family: inherit; }
        #ppeContent::placeholder { color: var(--text-tertiary,#536471); }
        #ppeDirBtns button { transition: background 0.15s, border-color 0.15s; }
        #ppeDirBtns button:hover { border-color: var(--primary-color,#1D9BF0); }
        /* 內容類型標籤（觀點/交易紀錄）：外觀比照 indicator-tag，但為開關型（無 ⚙️/✕），常駐顯示於圖表指標標籤區 */
        .content-type-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,0.6); border:1px solid var(--border-color,#2F3336); border-radius:4px; padding:2px 9px; font-size:12px; font-weight:500; color:var(--text-secondary,#71767B); cursor:pointer; user-select:none; transition:color .15s,border-color .15s; }
        .content-type-tag .ctt-dot { width:6px; height:6px; border-radius:50%; background:var(--text-tertiary,#536471); flex-shrink:0; }
        .content-type-tag.active { color:var(--text-primary,#E7E9EA); border-color:var(--primary-color,#1D9BF0); }
        .content-type-tag.active .ctt-dot { background:var(--primary-color,#1D9BF0); }
        .content-type-tag[data-type="trade"].active .ctt-dot { background:#10b981; }
        .content-type-tag[data-type="trade"].active { border-color:#10b981; }
        .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center; }
        .modal-overlay.active,.modal-overlay[style*="flex"] { display:flex !important; }
        .modal-content { background:var(--bg-secondary,#16181C); border:1px solid var(--border-color,#2F3336); border-radius:12px; width:90%; max-width:600px; max-height:85vh; display:flex; flex-direction:column; }
        .indicator-panel-content { max-width:520px; }
        .modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-color,#2F3336); flex-shrink:0; }
        .modal-header h2 { font-size:16px; font-weight:600; }
        .modal-close { background:none; border:none; color:var(--text-secondary,#71767B); font-size:18px; cursor:pointer; }
        .modal-body { flex:1; overflow-y:auto; padding:16px 20px; }
        .modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border-color,#2F3336); }
        .indicator-tabs { display:flex; gap:4px; margin-bottom:16px; }
        .indicator-tab { background:var(--bg-tertiary,#1C1F26); border:1px solid var(--border-color,#2F3336); color:var(--text-secondary,#71767B); border-radius:6px; padding:6px 16px; cursor:pointer; font-size:13px; }
        .indicator-tab.active { background:var(--primary-color,#1D9BF0); color:#fff; border-color:var(--primary-color,#1D9BF0); }
        .indicator-tab-content { display:none; }
        .indicator-tab-content.active { display:block; }
        .indicator-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
        .indicator-card { background:var(--bg-tertiary,#1C1F26); border:1px solid var(--border-color,#2F3336); border-radius:8px; padding:12px; cursor:pointer; text-align:center; transition:border-color 0.15s; }
        .indicator-card:hover { border-color:var(--primary-color,#1D9BF0); }
        .indicator-card h4 { font-size:14px; font-weight:600; margin-bottom:4px; }
        .indicator-card p { font-size:11px; color:var(--text-secondary,#71767B); }
        .saved-indicator-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--bg-tertiary,#1C1F26); border-radius:8px; margin-bottom:8px; }
        .indicator-info { flex:1; min-width:0; } .indicator-name { font-size:13px; font-weight:600; } .indicator-formula { font-size:11px; color:var(--text-secondary); font-family:monospace; }
        .indicator-meta { display:flex; gap:6px; margin-top:4px; } .indicator-actions { display:flex; gap:4px; flex-shrink:0; }
        .btn-icon { background:var(--bg-secondary); border:1px solid var(--border-color); color:var(--text-secondary); border-radius:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; }
        .btn-icon:hover { color:var(--primary-color); border-color:var(--primary-color); } .btn-icon.btn-danger:hover { color:#ef4444; border-color:#ef4444; }
        .custom-indicator-editor { max-width:500px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .form-group { margin-bottom:12px; }
        .form-label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
        .form-input-color { width:100%; height:36px; border:1px solid var(--border-color); border-radius:6px; padding:2px; cursor:pointer; }
        .form-select,.form-textarea { width:100%; background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:6px; padding:6px 10px; font-size:13px; }
        .form-textarea { font-family:monospace; resize:vertical; padding:8px 10px; }
        .function-library { margin-top:12px; } .function-library h4 { font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
        .function-buttons { display:flex; flex-wrap:wrap; gap:4px; }
        .btn-function { background:var(--bg-tertiary); border:1px solid var(--border-color); color:var(--text-primary); border-radius:4px; padding:3px 8px; font-size:11px; cursor:pointer; font-family:monospace; }
        .btn-function:hover { background:var(--primary-color); color:#fff; }
        .error-message { color:#ef4444; font-size:12px; margin-top:6px; }
        .btn-primary { background:var(--primary-color); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
        .btn-secondary { background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:8px; padding:8px 16px; font-size:13px; cursor:pointer; }
        .badge { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:4px; padding:1px 6px; font-size:10px; color:var(--text-secondary); }
        .parameter-section { margin-top:12px; padding:10px; background:var(--bg-tertiary); border-radius:6px; }
        .parameter-section h4 { font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
        .parameter-item { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
        .parameter-item label { font-size:12px; color:var(--text-secondary); min-width:80px; }
        /* Indicator param panel */
        #indicatorParamPanel { margin-top:16px; border-top:1px solid var(--border-color,#2F3336); padding-top:14px; }
        .ip-panel-inner { background:var(--bg-secondary,#16181C); border:1px solid var(--border-color,#2F3336); border-radius:10px; padding:14px 16px; }
        .ip-panel-title { font-size:13px; font-weight:600; margin-bottom:10px; color:var(--text-primary,#E7E9EA); }
        .ip-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
        .param-row { display:flex; flex-direction:column; gap:3px; }
        .param-row label { font-size:11px; color:var(--text-secondary,#71767B); }
        .param-input { background:var(--bg-tertiary,#1C1F26); color:var(--text-primary,#E7E9EA); border:1px solid var(--border-color,#2F3336); border-radius:6px; padding:5px 8px; font-size:13px; width:100%; }
        .param-color { width:100%; height:32px; border:1px solid var(--border-color,#2F3336); border-radius:6px; padding:2px; cursor:pointer; }
        .param-select { background:var(--bg-tertiary,#1C1F26); color:var(--text-primary,#E7E9EA); border:1px solid var(--border-color,#2F3336); border-radius:6px; padding:5px 8px; font-size:13px; width:100%; }
        .ip-actions { display:flex; align-items:center; }
        .parameter-item input { flex:1; background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:4px; padding:4px 8px; font-size:12px; }

    
        .ind-section-title {
            padding: 8px 16px 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .ind-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 16px;
            cursor: pointer;
            transition: background 0.12s;
        }
        .ind-item:hover { background: var(--bg-tertiary); }
        .ind-item-name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
        .ind-item-desc { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; font-weight: 400; }
        .ind-item-add { font-size: 12px; color: var(--text-tertiary); }
        .ind-item:hover .ind-item-add { color: var(--primary-color); }
        .ind-active-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 16px;
            font-size: 13px;
            color: var(--text-primary);
        }
        .ind-active-dot {
            width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
        }
        .ind-active-name { flex: 1; font-weight: 500; }
        .ind-active-btn {
            background: none; border: none; cursor: pointer;
            color: var(--text-tertiary); font-size: 13px; padding: 2px 4px;
            transition: color 0.12s;
        }
        .ind-active-btn:hover { color: var(--text-primary); }
        .ind-active-btn.del:hover { color: #ef4444; }
        #indicatorPanelOverlay {
            display: none; position: fixed; inset: 0; z-index: 8999;
            background: rgba(0,0,0,0.3);
        }

        /* ==================== 底部上一則/下一則操作列（仿下單App買賣鈕位置）==================== */
        /* 桌面預設：固定於主圖表欄下方（寬度對齊 .main-content，不包含右側商品清單欄） */
        #postNavActionBar {
            position: fixed;
            bottom: 0;
            z-index: 900;
            display: none;
            align-items: stretch;
            height: 52px;
            background: var(--bg-primary, #0F1419);
            border-top: 1px solid var(--border-color, #2F3336);
            box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
            touch-action: manipulation; /* 2026-07-18新增：上一則/下一則按鈕在手機版快速點擊時會被誤判為雙擊縮放（同 mobileBottomNav那次修復的根因，viewport user-scalable=no 在部分裝置不可靠），加在基礎規則同時涵蓋桌面/手機兩種版面 */
        }
        #postNavActionBar.show { display: flex !important; }
        #postNavActionBar .pnab-quick {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0 10px;
            flex-shrink: 0;
            border-right: 1px solid var(--border-color, #2F3336);
        }
        #postNavActionBar .pnab-quick button {
            width: 34px; height: 34px;
            border-radius: 8px;
            border: 1px solid var(--border-color, #2F3336);
            background: var(--bg-tertiary, #1C1F26);
            color: var(--text-secondary, #71767B);
            font-size: 14px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        #postNavActionBar .pnab-quick button:hover { color: var(--text-primary,#E7E9EA); border-color: var(--primary-color); }
        #postNavActionBar .pnab-nav {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
        }
        #postNavActionBar .pnab-nav-btn {
            flex: 1;
            height: 36px;
            background: rgba(245,158,11,0.12);
            border: 1px solid rgba(245,158,11,0.45);
            color: #F59E0B;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 5px;
        }
        #postNavActionBar .pnab-nav-btn:disabled { opacity: 0.35; cursor: default; }
        #postNavActionBar .pnab-nav-count {
            font-size: 12px; font-weight: 700; color: var(--text-primary,#E7E9EA);
            flex-shrink: 0; min-width: 40px; text-align: center;
        }
        /* 篩選圖示：有套用中的篩選條件時顯示小圓點提示 */
        #postNavActionBar .pnab-quick button.has-filter {
            position: relative;
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        #postNavActionBar .pnab-quick button.has-filter::after {
            content: '';
            position: absolute;
            top: 4px; right: 4px;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--primary-color, #1D9BF0);
        }

        /* ==================== 篩選條件 popover（貼文導航列篩選圖示觸發）==================== */
        /* 輕量彈出卡片，貼齊貼文導航列上方彈出，不佔用工具列常駐空間 */
        #filterPopover {
            display: none;
            position: fixed;
            z-index: 901;
            background: var(--bg-primary, #0F1419);
            border: 1px solid var(--border-color, #2F3336);
            border-radius: 10px;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
            padding: 10px 12px;
            width: 320px;
            max-width: calc(100vw - 20px);
        }
        #filterPopover.show { display: block; }

        /* ==================== K線圖載入骨架屏（chartSkeleton）==================== */
        /* 初次載入/切換商品週期時顯示，避免空白畫面體感差；資料就緒後淡出 */
        #chartSkeleton {
            position: absolute;
            inset: 0;
            z-index: 30;
            display: none;
            flex-direction: column;
            justify-content: flex-end;
            gap: 6px;
            padding: 20px 16px 40px;
            background: var(--chart-bg, #0F1419);
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.25s ease;
        }
        #chartSkeleton.show { display: flex; }
        #chartSkeleton.fade-out { opacity: 0; }
        #chartSkeleton .sk-bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
        #chartSkeleton .sk-bar {
            flex: 1;
            max-width: 14px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--bg-tertiary, #1c2733) 25%, var(--bg-hover, #26333f) 50%, var(--bg-tertiary, #1c2733) 75%);
            background-size: 200% 100%;
            animation: sk-shimmer 1.4s ease-in-out infinite;
        }
        @keyframes sk-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        #chartSkeleton .sk-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            color: var(--text-tertiary, #71767B);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        #chartSkeleton .sk-spinner {
            width: 14px; height: 14px;
            border: 2px solid var(--border-color, #2F3336);
            border-top-color: var(--primary-color, #1D9BF0);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }


/* ==================== 手機版響應式覆寫（原第二段內嵌 <style id='cm-mobile-override'> 區塊）==================== */
  @media (max-width: 768px) {
    html, body { overflow: hidden !important; height: 100% !important; }

    /* 左側 sidebar 隱藏 */
    .sidebar { display: none !important; }

    /* app-container：fixed 全屏，兩個子面板（列表/圖表）左右滑動 */
    .app-container {
      position: fixed !important;
      inset: 0 !important;
      max-width: 100% !important;
      margin: 0 !important;
      overflow: hidden !important;
      display: block !important;
    }

    /* 右側欄（商品列表）：預設在左，chart-mode 時滑出 */
    .right-sidebar {
      display: flex !important;
      flex-direction: column !important;
      position: absolute !important;
      inset: 0 !important;
      /* 底部留出 sidebar nav bar 高度 */
      bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
      width: 100% !important;
      transform: translateX(0) !important;
      transition: transform 0.3s ease !important;
      padding: 0 !important;
      background: var(--bg-primary, #0F1419) !important;
      overflow: hidden !important;
      z-index: 10 !important;
    }
    .right-sidebar .card {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      border-radius: 0 !important;
      border: none !important;
      margin: 0 !important;
      overflow: hidden !important;
    }
    .right-sidebar #symbolList {
      flex: 1 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    /* 主內容（圖表）：預設在右，chart-mode 時滑入 */
    .main-content {
      position: absolute !important;
      inset: 0 !important;
      /* 底部：sidebar nav bar + 上一則下一則 bar */
      bottom: calc(56px + 64px + env(safe-area-inset-bottom, 0px)) !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 !important;
      max-width: 100% !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      transform: translateX(100%) !important;
      transition: transform 0.3s ease !important;
      z-index: 20 !important;
      background: var(--bg-primary, #0F1419) !important;
      /* flex column 讓 order 重排生效 */
      display: flex !important;
      flex-direction: column !important;
    }

    /* chart-mode 滑動切換 */
    .app-container.chart-mode .right-sidebar { transform: translateX(-100%) !important; }
    .app-container.chart-mode .main-content  { transform: translateX(0) !important; }

    /* mainView：flex column */
    #mainView {
      display: flex !important;
      flex-direction: column !important;
      min-height: 100% !important;
    }

    /* ── 各區塊 order 排序 ── */
    /* .page-header 已移除（動態/圖表切換 + 返回箭頭併入 #mobileSymbolBar，節省一整排空間）*/
    /* postIndicatorPanel 不再固定 order：它實際掛載於 #subChartsContainer 內（與其他技術指標副圖同層），
       排序改依 JS appendChild 的加入順序決定（比照桌面版邏輯），不要在此覆蓋 order，否則會脫離
       subChartsContainer 的排序規則，導致貼文摘要面板永遠固定在某個位置，和使用者實際開啟順序不一致 */
    #postIndicatorPanel { flex-shrink: 0;
                          overflow: hidden !important; }
    #postPanelContent   { height: 100% !important; overflow: hidden !important;
                          padding: 8px 12px 6px !important; }
    #postPanelContent .post-actions { padding-top: 8px !important; margin-top: auto !important; border-top: 1px solid rgba(255,255,255,0.08) !important; flex-shrink: 0 !important; }
    #postPanelContent .action-btn   { min-height: unset !important; padding: 2px 6px !important; font-size: 12px !important; }

    /* 手機版商品列 */
    #mobileSymbolBar { display: flex !important; order: 1 !important; }

    /* chartTopBar：指標標籤 + 內容類型開關（商品/時間已移到 mobileSymbolBar）*/
    #chartTopBar { top: 6px !important; left: 6px !important; }

    /* 手機版隱藏 OHLC crosshair-info（圖表上的數據列）*/
    #mainCrosshairInfo { display: none !important; }
    #volumeCrosshairInfo { display: none !important; }

    /* 手機版隱藏圖表上的浮動貼文卡片（已由 postIndicatorPanel 取代）*/
    #modeDataInfo { display: none !important; }

    /* mobileChartTools：右上角浮動工具列（手機+桌面共用）*/
    #mobileChartTools { display: flex !important; }

    /* TradingView 容器 */
    #tvWidgetContainer { order: 3 !important; }

    /* K線主圖：高度由 CSS dvh 決定，JS ResizeObserver 讀實際值後 pass 給 LightweightCharts */
    .chart-section      { order: 3 !important; flex-shrink: 0; }
    /* #mainChart 高度改由 JS _getTotalChartHeight()/applyChartHeights() 動態計算並直接寫入 inline style.height（比照桌面版邏輯，依可用高度+副圖數量分配），不再用固定 dvh 百分比 */
    #mainChart          { min-height: 180px; }

    /* 成交量 */
    #volumeSection      { order: 4 !important; flex-shrink: 0; }

    /* 技術指標副圖（含貼文副圖）：高度由副圖數量動態決定 */
    #subChartsContainer { order: 5 !important; flex-shrink: 0; }
    /* 每個副圖（含貼文副圖）預設高度 */
    /* .sub-chart 高度改由 JS _getSubChartHeight()/applyChartHeights() 動態計算並直接寫入 inline style.height，不再用固定 dvh 百分比 */
    #subChartsContainer .sub-chart { min-height: 100px; }

    /* 觀點/交易列表：圖+文模式下永遠 display:none（副圖顯示選中貼文，不需重複列表），
       此處 min/max-height 規則实際上永遠不會生效（日後若要恢復列表顯示才需要），
       故直接合併為單一規則避免重複定義互相打架（舊版 min-height:25dvh被後段 200px 覆蓋的死代碼已清除） */
    #insightsPanel, #tradesPanel {
      display: flex !important;
      order: 6 !important;
      flex-direction: column !important;
      min-height: 200px !important;
      flex-shrink: 0 !important;
    }
    #tradePanel { display: none !important; }
    /* 圖+文模式：觀點列表隱藏（副圖顯示選中貼文，不需列表）
       但交易紀錄 scope 時例外（trades-scope class：交易紀錄開＋觀點關），列表要顯示 */
    body.insights-mode:not(.trades-scope) #insightsPanel,
    body.insights-mode #tradesPanel { display: none !important; }
    /* 交易紀錄 scope：列表也隱藏，改用副圖顯示 */
    body.trades-scope #tradesPanel,
    body.trades-scope #insightsPanel { display: none !important; }
    #insightsList, #tradesList {
      overflow-y: visible !important;
      height: auto !important;
      flex: none !important;
    }

    /* 手機版：chartTopBar 內所有元素隱藏（已移到 mobileSymbolBar）*/
    #mobileSymbolTitle { display: none !important; }
    #mobileFavBtn      { display: none !important; }
    #chartTopBar .hide-on-desktop { display: none !important; }
    #chartTimeLabel    { display: none !important; }

    /* 指標面板底部安全區域 */
    #indicatorPanel {
      height: calc(100vh - 80px - env(safe-area-inset-bottom)) !important;
      padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }

    /* 底部上一則/下一則操作列（手機版）：疊在現有 5 圖示底部導航之上方，兩排都保留 */
    #postNavActionBar {
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
      z-index: 950 !important;
    }
    /* 手機版商品清單模式（非 chart-mode）時不顯示底部操作列（避免疊在商品清單上） */
    .app-container:not(.chart-mode) #postNavActionBar { display: none !important; }

    /* 篩選 popover（手機版）：貼齊貼文導航列上方，左右留邊 */
    #filterPopover {
      left: 10px !important;
      right: 10px !important;
      width: auto !important;
      bottom: calc(56px + 52px + 8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 【2026-07-19 修復】下單抽屬(#tradingDrawer)手機版顏示不完整：原本寬度寫死width:400px（chart-pro.html
       inline style），手機視窗一旦小於400px（如390px）就會溯出右邊，造成左邊留空隙+右邊關閉按鈕被推到視窗外看不到。
       改為width:100vw，抽屬滿寬顯示，與其他手機全屏 drawer/modal（如indicatorPanel）行為一致。 */
    #tradingDrawer {
      width: 100vw !important;
      max-width: 100vw !important;
    }
  }