/**
 * 股票表格分割視圖樣式
 * Author: Claude
 * Date: 2026-01-20
 * Design Tokens from brand-system.css
 */

/* ============================================================================
   Grid 佈局與分割動畫
   ============================================================================ */

.chat-workspace {
    position: relative;  /* 邊緣拖曳條 (panelEdgeTab) 的定位基準 */
    display: grid;
    grid-template-columns: 1fr 0;  /* 初始：左側全寬，右側隱藏 */
    gap: 0;
    height: 100%;
    transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 分割狀態 */
.chat-workspace.split {
    grid-template-columns: 1fr var(--stock-panel-width, 600px);
    gap: 1px;  /* 分隔線 */
    background: var(--quote-table-border, var(--color-border-default));  /* 暖色分隔線 */
}

/* 拖曳中狀態 */
.chat-workspace.resizing {
    user-select: none;
}

.chat-workspace.resizing * {
    cursor: col-resize !important;
}

/* ============================================================================
   左側對話面板
   ============================================================================ */

.chat-panel {
    /* overflow-y: auto;  已移至 styles.css 統一管理 */
    min-width: 0;  /* 防止 Grid 溢出 */
    background: var(--color-bg-secondary);
}

/* ============================================================================
   右側股票表格面板
   ============================================================================ */

.right-panel {
    position: relative;
    opacity: 0;
    overflow: visible;  /* 允許收合按鈕延伸到面板外 */
    background: var(--quote-panel-surface, var(--color-bg-secondary));
    transition: opacity 0.3s ease-in-out 0.2s;
}

.right-panel.genie-collapse {
    overflow: hidden;  /* 動畫期間裁切內容 */
}

.right-panel.hidden {
    display: none;
}

.right-panel.content-visible {
    opacity: 1;
}

/* 收合時的「阿拉丁吸入」動畫 */
@keyframes genieCollapse {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }
    30% {
        transform: scale(0.5, 0.85);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.01, 0.1);
        opacity: 0;
    }
}

.right-panel.genie-collapse {
    transform-origin: right center;
    animation: genieCollapse 0.5s ease-in forwards;
    pointer-events: none;
}

/* 固定位置收合按鈕（浮動在分隔線左側，屬於聊天面板區域） */
.collapse-panel-btn {
    position: absolute;
    top: 8px;
    right: calc(100% + 8px);  /* 面板左邊界再往左 8px（跳過 resize-handle） */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--quote-table-border, var(--color-border-default));
    background: var(--quote-panel-surface, var(--color-bg-secondary));
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.collapse-panel-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent);
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.12);
}

.collapse-panel-btn:active {
    transform: scale(0.95);
}

/* 拖曳手柄（必須是 .right-panel 的直接子元素才能正確取得 100% 高度） */
.resize-handle {
    position: absolute;
    left: -4px;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: var(--quote-table-border, var(--color-border-default));  /* 暖色分隔線 */
    z-index: 20;  /* 提高 z-index 確保在最上層 */
    transition: background 0.2s;
}

.resize-handle:hover {
    background: var(--color-accent);
}

.resize-handle.dragging {
    background: var(--color-accent-hover);
}

/* ============================================================================
   表格容器與樣式
   ============================================================================ */

.table-container {
    height: calc(100vh - 60px);  /* 扣除底部間距（已移除控制列） */
    overflow-y: auto;
    overflow-x: auto;  /* 支援水平滾動 */
    padding: 0 16px 16px 16px;  /* 頂部 0，報價欄位貼齊面板頂端 */
}

/* 表格 */
.stock-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--quote-panel-surface, var(--color-bg-secondary));

    /* Sticky 欄位不透明背景（rgba 與基底色預混合，防止水平滾動透視） */
    --sticky-hover-bg: #FEF5ED;
    --sticky-selected-bg: #FEEFE4;
    --sticky-selected-hover-bg: #FDEADB;
}

[data-theme="dark"] .stock-table {
    --sticky-hover-bg: #2E2017;
    --sticky-selected-bg: #3D2717;
    --sticky-selected-hover-bg: #3B2617;
}

/* 表頭（固定） */
.stock-table thead {
    position: sticky;
    top: 0;
    background: var(--quote-table-header-bg, var(--color-bg-hover));
    z-index: 1;
    box-shadow: 0 2px 4px rgba(28, 25, 23, 0.04);
}

.stock-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--quote-table-header-text, var(--color-text-secondary));
    border-bottom: 2px solid var(--quote-table-border, var(--color-border-default));
    white-space: nowrap;
}

/* 表格內容 */
.stock-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border-default);
    color: var(--quote-table-text, var(--color-text-primary));
}

/* ============================================================================
   固定欄位：代碼和名稱（水平滾動時保持可見）
   統一使用 JS 渲染的 class: code-col / name-col
   ============================================================================ */

/* 代碼和名稱欄位設為 sticky */
.stock-table th.code-col,
.stock-table th.name-col,
.stock-table td.code-col,
.stock-table td.name-col {
    position: sticky;
    z-index: 2;
}

/* 代碼欄位固定在最左邊 */
.stock-table th.code-col,
.stock-table td.code-col {
    left: 0;
}

/* 名稱欄位固定在代碼欄位右邊（代碼欄位約 64px） */
.stock-table th.name-col,
.stock-table td.name-col {
    left: 64px;
}

/* 表頭固定欄位背景色（要比 tbody 的 z-index 更高） */
.stock-table thead th.code-col,
.stock-table thead th.name-col {
    background-color: var(--quote-table-header-bg, var(--color-bg-hover));
    z-index: 8;  /* 同時 sticky-top + sticky-left 交叉點 */
}

/* 表格內容固定欄位背景色（不透明，防止滾動穿透） */
.stock-table tbody td.code-col,
.stock-table tbody td.name-col {
    background-color: var(--quote-panel-surface, var(--color-bg-secondary));
}

/* 偶數行固定欄位背景 */
.stock-table tbody tr:nth-child(even) td.code-col,
.stock-table tbody tr:nth-child(even) td.name-col {
    background-color: var(--quote-row-alt-bg, var(--color-bg-inset));
}

/* 處理 hover 狀態的背景色（使用不透明預混合色，防止 sticky 欄位透視） */
.stock-table tbody tr:hover td.code-col,
.stock-table tbody tr:hover td.name-col {
    background-color: var(--sticky-hover-bg);
}

/* 處理選中行的背景色 */
.stock-table tbody tr.selected td.code-col,
.stock-table tbody tr.selected td.name-col {
    background-color: var(--sticky-selected-bg) !important;
}

.stock-table tbody tr.selected:hover td.code-col,
.stock-table tbody tr.selected:hover td.name-col {
    background-color: var(--sticky-selected-hover-bg) !important;
}

/* 處理對比行的背景色（如有使用） */
.stock-table tbody tr.compared td.code-col,
.stock-table tbody tr.compared td.name-col {
    background-color: var(--sticky-selected-bg);
}

/* 添加右側陰影，增強固定欄位與滾動內容的視覺分隔 */
.stock-table th.name-col,
.stock-table td.name-col {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* 數字欄位右對齊 */
.stock-table .price-col,
.stock-table .change-col,
.stock-table .change-percent-col,
.stock-table .open-col,
.stock-table .high-col,
.stock-table .low-col,
.stock-table .volume-col {
    text-align: right;
}

/* 漲跌欄位樣式 */
.stock-table td.change-col,
.stock-table td.change-percent-col {
    font-weight: 600;
}

/* 上漲：紅色 */
.stock-table tr.up .change-col,
.stock-table tr.up .change-percent-col {
    color: var(--quote-price-up, var(--color-market-up));
}

/* 下跌：綠色 */
.stock-table tr.down .change-col,
.stock-table tr.down .change-percent-col {
    color: var(--quote-price-down, var(--color-market-down));
}

/* 平盤：灰色 */
.stock-table tr.flat .change-col,
.stock-table tr.flat .change-percent-col {
    color: var(--color-text-tertiary);
}

/* 滑鼠懸停效果 */
.stock-table tbody tr {
    transition: background 0.15s;
}

.stock-table tbody tr:hover {
    background: var(--quote-row-hover-bg, var(--color-accent-muted));
}

/* 選中狀態 */
.stock-table tbody tr.selected {
    background: var(--color-accent-muted) !important;
    box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.3);
}

.stock-table tbody tr.selected:hover {
    background: var(--color-accent-subtle) !important;
}

/* 表格行 — 立即可見（效能優先） */
.stock-table tbody tr {
    opacity: 1;
}

/* ============================================================================
   響應式設計
   ============================================================================ */

/* 桌面（>= 1600px）：標準分割視圖 */
@media (min-width: 1600px) {
    .chat-workspace.split {
        grid-template-columns: 1fr var(--stock-panel-width, 600px);
    }
}

/* 中型螢幕（1200px - 1599px）：限制右側最大寬度 */
@media (min-width: 1200px) and (max-width: 1599px) {
    .chat-workspace.split {
        grid-template-columns: 1fr min(var(--stock-panel-width, 600px), 50vw);
    }
}

/* ============================================================================
   面板收合後的邊緣拖曳條
   ============================================================================ */

.panel-edge-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    background: var(--quote-panel-surface, var(--color-bg-secondary));
    border: 1px solid var(--quote-table-border, var(--color-border-default));
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.panel-edge-tab:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3);
}

.panel-edge-tab.dragging {
    background: var(--color-accent-hover);
    color: white;
    border-color: var(--color-accent-hover);
}

/* 收合時的一次性暗示動畫 */
@keyframes edgeTabNudge {
    0%   { transform: translateY(-50%) scale(1); }
    30%  { transform: translateY(-50%) scale(1.2); box-shadow: 0 3px 12px rgba(249, 115, 22, 0.4); }
    100% { transform: translateY(-50%) scale(1); }
}

.panel-edge-tab.nudge {
    animation: edgeTabNudge 1.5s ease-in-out;
}

[data-theme="dark"] .panel-edge-tab {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .panel-edge-tab:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* 小型螢幕（< 1200px）：全螢幕彈窗模式 */
@media (max-width: 1199px) {
    .chat-workspace {
        display: block;
    }

    .right-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .right-panel.content-visible {
        transform: translateX(0);
    }

    /* 小螢幕不支援拖曳調整 */
    .resize-handle {
        display: none;
    }

    .panel-edge-tab {
        display: none !important;  /* 小螢幕不顯示（全螢幕彈窗模式） */
    }

    /* 調整表格容器高度（已移除控制列） */
    .table-container {
        height: 100vh;
    }
}

/* ============================================================================
   滾動條樣式（可選美化）
   ============================================================================ */

.table-container::-webkit-scrollbar {
    width: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: var(--quote-panel-bg, var(--color-bg-page));
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--quote-splitter-handle, var(--color-border-strong));
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.3);
}

/* ============================================================================
   輸入框容器響應式調整
   ============================================================================ */

/* 當分割視圖啟用時，輸入框對齊 sidebar 和股票面板 */
.chat-workspace.split .chat-input-container {
    left: var(--sidebar-width, 80px);   /* 跳過 sidebar，避免被遮住 */
    right: calc(var(--stock-panel-width, 600px) + 1px);
    transition: left 0.3s ease,
                right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 當分割視圖啟用時，Footer Links 對齊 sidebar 和股票面板 */
.chat-workspace.split .chat-footer-links {
    right: calc(var(--stock-panel-width, 600px) + 1px);
    transition: left var(--sidebar-transition, 300ms ease),
                right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 中型螢幕：使用限制後的寬度 */
@media (min-width: 1200px) and (max-width: 1599px) {
    .chat-workspace.split .chat-input-container {
        right: calc(min(var(--stock-panel-width, 600px), 50vw) + 1px);
    }

    .chat-workspace.split .chat-footer-links {
        right: calc(min(var(--stock-panel-width, 600px), 50vw) + 1px);
    }
}

/* 小型螢幕：全螢幕彈窗模式，輸入框保持全寬 */
@media (max-width: 1199px) {
    .chat-workspace.split .chat-input-container {
        left: 0;
        right: 0;
    }

    .chat-workspace.split .chat-footer-links {
        right: 0;
    }
}