/* ===== 侧边栏响应式布局修复 ===== */

/* 1. 当侧边栏展开时，输入框、欢迎栏和底部图片都向右移动 */
body:not(.chat-mode):not(.sidebar-collapsed) .deepseek-input-section,
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .deepseek-input-section {
    left: calc(50% + 120px) !important;  /* 向右偏移120px（侧边栏宽度的一半） */
}

body:not(.chat-mode):not(.sidebar-collapsed) .deepseek-welcome-section,
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .deepseek-welcome-section {
    left: calc(50% + 120px) !important;  /* 向右偏移120px（侧边栏宽度的一半） */
}

/* 2. 当侧边栏展开时，底部图片向右移动并压缩 */
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-section,
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-section {
    left: 240px !important;  /* 从侧边栏右边开始 */
    right: 0 !important;
    width: calc(100% - 240px) !important;  /* 减去侧边栏宽度 */
}

/* 3. 图片容器内部的图片自适应缩放 */
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-carousel,
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-carousel {
    display: flex !important;
    justify-content: center !important;
    gap: 80px !important; /* 保持与主样式一致的间距 */
    /* 移除padding避免偏移 */
}

/* 4. 当空间不足时，隐藏部分图片 */
@media (max-width: 1400px) {
    body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card:nth-child(4),
    body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card:nth-child(4) {
        display: none !important;  /* 隐藏第4张图片 */
    }
}

@media (max-width: 1200px) {
    body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card:nth-child(3),
    body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card:nth-child(3) {
        display: none !important;  /* 隐藏第3张图片 */
    }
}

@media (max-width: 1000px) {
    body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card:nth-child(2),
    body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card:nth-child(2) {
        display: none !important;  /* 隐藏第2张图片 */
    }
}

/* 5. 侧边栏折叠状态下恢复原位 */
body:not(.chat-mode) .sidebar.collapsed ~ main .deepseek-input-section,
body.sidebar-collapsed:not(.chat-mode) .deepseek-input-section {
    left: 50% !important;  /* 恢复居中 */
}

body:not(.chat-mode) .sidebar.collapsed ~ main .deepseek-welcome-section,
body.sidebar-collapsed:not(.chat-mode) .deepseek-welcome-section {
    left: 50% !important;  /* 恢复居中 */
}

body:not(.chat-mode) .sidebar.collapsed ~ main .ticker-section,
body.sidebar-collapsed:not(.chat-mode) .ticker-section {
    left: 70px !important;  /* 只偏移折叠侧边栏的宽度 */
    right: 0 !important;
    width: calc(100% - 70px) !important;
}

/* 6. 确保图片不被压扁，保持比例 */
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card img,
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}