/* 防止页面向右偏移的核心CSS修复 */

/* 1. 全局盒模型和溢出控制 - 保守版本 */
* {
    box-sizing: border-box;
}

/* 只对明显会导致问题的元素限制最大宽度 */
.chart-container,
.trading-area,
.app-container,
.main-content,
.left-panel,
.right-panel {
    max-width: 100%;
}

/* 2. HTML和Body固定 */
html {
    overflow-x: hidden !important;
    overflow-y: auto;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
    transform: translateX(0) !important;
}

/* 3. 主容器约束 */
.app-container {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    margin: 0 auto;
    transform: translateX(0) !important;
}

/* 4. 防止flex布局溢出 */
.main-content {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    flex-wrap: nowrap;
}

.left-panel,
.right-panel {
    flex-shrink: 0;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

.trading-area {
    flex: 1;
    min-width: 0; /* 关键：防止flex子元素撑开 */
    overflow: hidden;
}

/* 5. 图表容器固定 */
.chart-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#chart {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 6. 防止表格溢出 */
table {
    table-layout: fixed;
    width: 100%;
}

td, th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 7. 防止长文本溢出 - 只针对关键元素 */
.symbol-name,
.price-display,
.ranking-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 8. 允许某些元素溢出 - 功能组件例外 */
.dropdown-menu,
.tooltip,
.popover,
.modal,
.chart-tooltip,
.notification,
.simple-notification {
    max-width: none !important;
}

/* 9. 防止动画造成的偏移 - 更保守 */
.chart-container * {
    transition-property: opacity, color, background-color !important;
}

/* 10. 隐藏水平滚动条 */
::-webkit-scrollbar-x {
    display: none !important;
}

/* 11. 防止klinecharts图表溢出 */
.klinecharts-container,
.klinecharts-chart,
.klinecharts-main,
.klinecharts-pane {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 12. 防止排行榜项目溢出 */
.ranking-symbol {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 13. 防止市场概览数据溢出 */
.price-display .price,
.price-display .change {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 14. 紧急修复类 */
.layout-fixed {
    max-width: 100% !important;
    overflow-x: hidden !important;
    transform: translateX(0) !important;
}

/* 15. 防止持仓面板溢出 */
.position-item {
    max-width: 100%;
    overflow: hidden;
}

.position-header,
.position-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* 16. 允许溢出的例外类 */
.allow-overflow {
    max-width: none !important;
    overflow: visible !important;
}

/* 17. 响应式断点保护 */
@media (max-width: 1400px) {
    .app-container {
        min-width: 1200px;
        overflow-x: auto;
    }
}

@media (max-width: 1200px) {
    .left-panel,
    .right-panel {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
}