/**
 * responsive.css — Shared breakpoint layout (tablet/phone grids, overlay drawer).
 * Split from style.css with rule order preserved.
 */
.visual-lab-phone-hint {
    display: none;
    font-size: 11px;
    opacity: 0.65;
    margin: 0;
    line-height: 1.4;
}

/* ==================== 响应式设计 ==================== */
@media (min-width: 1025px) {
    body.sidebar-pinned .main-content {
        margin-left: var(--sidebar-width);
    }
    body:not(.sidebar-pinned) .main-content {
        margin-left: var(--sidebar-mini-width);
    }
}

@media (max-width: 1024px) {
    :root {
        --card-w-base: 80px;
        --card-h-base: 80px;
        --grid-gap-base: 14px;
    }

    /* Tablet 端默认折叠 */
    body:not(.sidebar-pinned) {
        --sidebar-current-width: var(--sidebar-mini-width);
    }
    
    body:not(.sidebar-pinned) .main-content {
        margin-left: var(--sidebar-mini-width);
    }
    
    body.sidebar-pinned .main-content {
        margin-left: var(--sidebar-width);
    }

    .nav-grid {
        /* 平板端根据屏幕大小自适应多列，极大提升大屏平板的信息密度，拒绝白空位 */
        grid-template-columns: repeat(auto-fill, minmax(var(--card-w, 80px), 1fr)) !important;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 窄屏（≤540）经典卡片固定 3 列；541–768 小平板 auto-fill 多列。密度锁定仍在 768。 */

/* 触控反馈优化 */
.card:active, .sidebar-nav-item:active, .tab-btn:active {
    transform: scale(0.96);
    opacity: 0.8;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2900; /* 高于常规，低于侧边栏 sidebar 的 3000 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* 页面管理模式下强制隐退侧边栏遮罩，方便拖放重排 */
body.page-manage-active .sidebar-overlay {
    display: none !important;
}

@media (max-width: 768px) {
    :root {
        --card-w-base: 75px;
        --card-h-base: 75px;
        --grid-gap-base: 10px;
        --sidebar-width: 250px;
    }

    /* 彻底锁定手机端整个视窗、页面和容器横向无溢出，坚决遏制并抹杀任何由于元素溢出屏幕导致的横向滚动和挤偏 */
    html,
    body,
    .app-layout {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* 移动端：侧边栏变为滑出式，并给予绝对层级压制防止穿透 */
    .sidebar {
        transform: translateX(-100%);
        z-index: 16000 !important;
    }

    .sidebar-overlay {
        z-index: 15000 !important;
    }

    body.page-manage-active .sidebar-overlay.visible {
        display: block !important;
    }

    /* 双保险防穿透：当移动端侧边栏滑出打开时，由于汉堡按钮已右置，保持其可见性以便一键关闭；其余按钮在手机端完美淡出，消除任何穿透与遮挡 */
    body.sidebar-open .summon-search-btn,
    body.sidebar-open .quick-nav-group {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.9) translateY(-10px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: flex;
    }

    /* 强行消除手机端下图钉固定、折叠侧边栏对主内容的任何横向偏移，坚决根治登录态下页面被往右挤偏 250px 导致按钮偏出屏幕的 Bug */
    body.sidebar-pinned .main-content,
    body:not(.sidebar-pinned) .main-content,
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 60px 12px 80px !important;
    }

    body.view-style-2 .nav-grid {
        gap: 12px;
    }

    /* 手机端经典地址卡片：锁定密度，完整显示图标与标题。不改缤纷列表（view-style-2）。 */
    body,
    body.density-compact,
    body.density-standard,
    body.density-comfortable {
        --card-scale: 1;
        --card-font-scale: 1;
        --icon-size: 32px;
        --emoji-size: 32px;
    }

    .visual-lab-phone-hint {
        display: block;
    }

    body:not(.view-style-2) .nav-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        justify-items: stretch;
        gap: 8px;
    }

    body:not(.view-style-2) .nav-grid .card,
    body:not(.view-style-2) .nav-grid .add-new-card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 96px;
        aspect-ratio: unset;
        padding: 10px 4px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
    }

    body:not(.view-style-2) .nav-grid .card a {
        overflow: visible;
        height: auto;
        justify-content: flex-start;
        gap: 8px;
    }

    body:not(.view-style-2) .nav-grid .card .icon-wrapper,
    body:not(.view-style-2) .nav-grid .add-new-card .icon-wrapper {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto 0 auto;
        flex-shrink: 0;
    }

    body:not(.view-style-2) .nav-grid .card img,
    body:not(.view-style-2) .nav-grid .add-new-card img {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px;
        max-height: 32px;
    }

    body:not(.view-style-2) .nav-grid .card .emoji-icon {
        font-size: 32px;
    }

    body:not(.view-style-2) .nav-grid .card h3,
    body:not(.view-style-2) .nav-grid .add-new-card h3 {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-height: none;
        min-height: 0;
        font-size: 11px;
        line-height: 1.35;
        width: 100%;
        text-align: center;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-modal-content {
        width: 96%;
        max-width: none;
    }

    .monaco-modal-content {
        width: 98%;
        height: 90vh;
    }

    .category-section-title {
        font-size: 14px;
    }
}

@media (max-width: 540px) {
    body:not(.view-style-2) .nav-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --card-w-base: 68px;
        --card-h-base: 68px;
        --grid-gap-base: 8px;
    }

    .main-content {
        padding: 60px 10px 80px;
    }

    .batch-actions-bar {
        bottom: 60px;
        padding: 8px 14px;
    }

    .batch-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* 移动端表单自动适配独立行 */
    .form-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px;
        margin-bottom: 12px;
    }
    .form-row label {
        width: 100% !important;
        text-align: left;
        margin-bottom: 2px;
    }
    /* 含有Checkbox的行保持横向 */
    .form-row:has(input[type="checkbox"]) {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    .form-row:has(input[type="checkbox"]) label {
        width: 70px !important;
    }

    /* 移动端搜索引擎Tab自适应 */
    .engine-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }
    .engine-tab {
        flex: 1 1 calc(33.333% - 6px);
        font-size: 11px;
        padding: 8px 10px;
    }
}