/* ==================== 响应式设计 ==================== */
/* 移动端适配 */
@media (max-width: 480px) {
    .board-controls .control-btn:not(:has(div)) {
        width: 38px !important;
        height: 38px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }

    .board-controls .control-btn:has(div) > div > :first-child {
        width: 38px !important;
        height: 38px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }

    .board-controls .control-btn:has(div) {
        min-width: 50px !important;
        min-height: 60px !important;
    }

    .board-controls .control-btn > div span {
        font-size: 12px !important;
    }
}

/* 响应式设计 */
@media (max-width: 480px) {
    .board-controls {
        padding: 10px 14px !important;
        gap: 8px !important;
    }

    .board-controls .control-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    .board-control-buttons {
        gap: 12px !important;
    }

    /* 图标+文字模式时移除间距 - 检查是否有任何一个按钮包含div */
    .board-control-buttons:has(.control-btn > div) {
        gap: 0 !important;
    }

    .board-slider-container {
        gap: 6px !important;
        min-width: 100px !important;
    }

    .board-move-counter {
        font-size: 11px !important;
        min-width: 35px !important;
    }
}

/* 横屏模式支持 */
@media (max-width: 768px) {
    .mobile-editor-container {
        padding: 10px;
    }

    .mobile-device-frame {
        transform: scale(0.8);
    }
}

@media (max-width: 480px) {
    .mobile-device-frame {
        transform: scale(0.6);
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .left-sidebar {
        width: 200px;
    }

    .right-sidebar {
        width: 240px;
    }
}

@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    .left-sidebar,
    .right-sidebar {
        width: 100%;
        height: 200px;
    }

    .editor-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .bottom-toolbar {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 10px;
    }
}