/* marketProfile.css - v4.2 (Inline Mode Support) */

/* --- 1. Main Wrapper & State --- */
/* This is the main container that handles positioning, scaling, and state. */
.market-profile-wrapper {
    position: fixed;
    top: 120px;
    left: 20px;
    z-index: 999;
    transform: scale(0.2);
    transform-origin: top left;
    opacity: 0.15;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease, left 0.3s ease;
    /* Flexbox layout for side-by-side panels */
    display: flex;
    align-items: flex-start;
    max-height: 80vh; /* Set a maximum height for the entire component */
    max-width: 95vw; /* 防止超出視窗寬度 */
}

    .market-profile-wrapper:hover {
        opacity: 1;
        transform: scale(0.8);
    }

    .market-profile-wrapper.widget-expanded {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
        z-index: 1001;
        cursor: default;
        max-height: 90vh; /* 擴展時允許更大高度 */
        max-width: 95vw;
    }

    /* NEW: Inline mode styles - 讓圖表可以直接嵌入文章中 */
    .market-profile-wrapper.inline-mode {
        position: static; /* 改為靜態定位，嵌入文章流中 */
        transform: none;
        opacity: 1;
        cursor: default;
        max-height: none; /* 移除高度限制 */
        max-width: 100%;
        width: 100%;
        margin: 20px 0; /* 上下留白 */
    }

        .market-profile-wrapper.inline-mode:hover {
            transform: none; /* 移除 hover 縮放效果 */
        }

        .market-profile-wrapper.inline-mode.widget-expanded {
            position: static;
            transform: none;
            top: auto;
            left: auto;
            max-height: none;
        }

/* --- 2. Scrollable Chart Container --- */
/* 這是關鍵修復：明確設置滾動容器的高度和滾動行為 */
.market-profile-scroll-container {
    overflow: auto; /* Enable both vertical and horizontal scrolling */
    flex-grow: 1; /* Allow it to take up available space */
    /* 關鍵修復：明確設置最大高度 */
    max-height: inherit; /* 繼承父容器的最大高度 */
    min-height: 200px; /* 最小高度確保內容可見 */
    /* 確保滾動條可見 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1; /* Firefox */
}

    /* Webkit 滾動條樣式 (Chrome, Safari, Edge) */
    .market-profile-scroll-container::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .market-profile-scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .market-profile-scroll-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .market-profile-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* NEW: Inline mode 的滾動容器樣式調整 */
.inline-mode .market-profile-scroll-container {
    max-height: 600px; /* inline 模式下設定一個合理的最大高度 */
    min-height: 400px;
}

/* --- 3. Backdrop --- */
.widget-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.6);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .widget-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

/* --- 4. Chart Grid & Cells --- */
#marketProfileContainer {
    display: grid;
    position: relative;
    line-height: 1.3;
    /* 確保網格容器有足夠的最小尺寸 */
    min-height: fit-content;
    width: fit-content; /* 讓寬度適應內容 */
}

#highlightOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 8;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

    #highlightOverlay.active {
        opacity: 1;
        visibility: visible;
    }

.header-cell, .data-cell {
    padding: 4px;
    box-sizing: border-box;
    text-align: center;
}

.header-cell {
    background-color: #e0e0e0;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 20;
    line-height: 1.2;
    /* 支援自動換行 */
    white-space: pre-line; /* 支援 \n 換行符號 */
    word-wrap: break-word; /* 長字自動換行 */
    overflow-wrap: break-word; /* 更好的換行支援 */
    hyphens: auto; /* 自動連字符 */
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px; /* 確保有足夠高度顯示多行文字 */
}

.data-cell {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 0px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-cell {
    position: sticky;
    left: 0;
    background-color: #f8f9fa;
    z-index: 1;
    font-weight: bold;
}

.header-cell.price-header {
    left: 0;
    z-index: 3;
}

.terminology-cell {
    position: sticky;
    right: 0; /* Sticky to the right edge of the scroll container */
    background-color: #fff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 8px;
    text-align: left;
    border-left: 1px solid #e0e0e0;
}

.header-cell.terminology-header {
    right: 0;
    z-index: 3;
}

.tpo-structure-cell {
    justify-content: flex-start;
    gap: 1px;
    padding: 0 5px;
}

.tpo-character {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.85em;
    font-weight: bold;
    background-color: #d1ecf1;
    color: #333;
    border-radius: 2px;
}

/* --- 5. Definition Panel --- */
.definition-panel {
    border-left: 1px solid #e0e0e0;
    padding: 20px;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 320px;
    flex-shrink: 0;
    align-self: stretch;
    /* 確保定義面板也有滾動限制 */
    max-height: inherit;
    overflow-y: auto; /* 如果內容太長，允許滾動 */
}

/* NEW: Inline mode 下的定義面板樣式 */
.inline-mode .definition-panel {
    max-height: 600px; /* 與滾動容器同高 */
}

.definition-panel h4 {
    margin-top: 0;
    color: #1E3A8A;
    border-bottom: 2px solid #FACC15;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.definition-panel p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.7;
    white-space: pre-wrap;
}

.definition-panel .placeholder {
    color: #888;
    font-style: italic;
}

/* --- 6. Highlighting & Special Styles --- */
.terminology-label {
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s;
    font-size: 0.9em;
    white-space: nowrap;
}

    .terminology-label:hover {
        background-color: #e6e6e6;
    }

    .terminology-label.highlighted,
    .initial-balance-label.highlighted {
        outline: 2px solid #007bff;
        background-color: #ffffcc !important;
        font-weight: bold;
        z-index: 10;
    }

.tpo-character.highlighted-tpo {
    outline: 2px solid #007bff !important;
    background-color: #ffffcc !important;
    color: #333 !important;
    z-index: 10;
}

.poc-row-bg {
    background-color: #fff0f0 !important;
}

.value-area-bg {
    background-color: #f7e1f4;
}

.price-above-va-bg, .price-below-va-bg {
    background-color: #fce4d6;
}

.initial-balance-label {
    width: 20px;
    background-color: #e7e1f4;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-align: center;
    padding: 5px 2px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #b0c4de;
    white-space: nowrap;
    position: relative;
}

/* 確保當組件展開時，body 不會滾動 */
body.widget-open {
    overflow: hidden;
}

    /* NEW: Inline mode 下不鎖定 body 滾動 */
    body.widget-open:has(.market-profile-wrapper.inline-mode) {
        overflow: auto;
    }

/* Styles for the toggle button */
.view-toggle-button {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 20px; /* Space between button and definition */
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s;
}

    .view-toggle-button:hover {
        background-color: #e0e0e0;
    }

/* When fit-to-view is active, hide the scrollbars */
.market-profile-scroll-container.fit-to-view-active {
    overflow: hidden;
}

#marketProfileContainer {
    transform-origin: top left;
    transition: transform 0.3s ease-in-out;
}

.gap-bg {
    background-color: #f5f7fa !important; /* A light, neutral gray */
}

.highlighted-row-bg {
    background-color: #ffffcc !important;
}