/* css/responsive.css */

/* --- 移动端适配 --- */
@media (max-width: 768px) {
    /* 1. 整体上移 */
    .container { padding-top: 10px; padding-bottom: 72px; }

    /* 2. 标题绝对定位，与右上角 Logo 对齐 */
    .bookmark-page { position: relative; padding-top: 0; }

    .page-title {
        position: absolute; top: 15px; left: 32px;
        font-size: 22px; margin: 0; z-index: 10;
        text-align: left; padding: 0; width: auto;
    }

    /* 3. 内容区域：4列布局，大图标，大间距 */
    .bookmark-page-content {
        margin-top: 70px;
        justify-content: center;
        align-content: flex-start;
        padding-bottom: 80px;
        width: min(100%, 360px);
        max-width: 100%;
        padding-left: 10px; padding-right: 10px;
        box-sizing: border-box;

        /* --- 核心参数调整 --- */
        --mobile-card-size: 70px; /* 图标加大 */
        --mobile-gap: 20px;       /* 间距加大 */
        /* ------------------ */

        display: grid;
        grid-template-columns: repeat(auto-fit, var(--mobile-card-size));
        gap: var(--mobile-gap);
    }

    /* 4. 图标样式适配 */
    .bookmark-item { width: var(--mobile-card-size); }
    .icon-box {
        width: var(--mobile-card-size);
        height: var(--mobile-card-size);
        border-radius: 18px; /* 圆角微调 */
    }
    .text-icon { font-size: 30px; } /* 文字图标加大 */
    .bookmark-title {
        font-size: 13px; margin-top: 6px; width: 120%;
    }

    /* 5. 确保“编辑书签”按钮在菜单中显示 */

    /* 6. 底部控件适配 (修复：默认隐藏，点击后显示) */

    /* 移除之前的，让 .hidden 类生效 */
    #edit-controls.edit-controls {
        display: flex;            /* 使用 flex 布局，但权重要允许 .hidden 覆盖 */
        width: 92%;               /* 宽度适配 */
        padding: 12px;
        flex-wrap: wrap;          /* 允许按钮换行 */
        justify-content: center;  /* 居中对齐 */
        bottom: 30px;
        gap: 8px;                 /* 减小按钮间距 */
        z-index: 1001;
    }

    /* 确保隐藏类优先级更高 */
    #edit-controls.edit-controls.hidden {
        display: none;
    }

    /* 针对手机端调整按钮样式 */
    #edit-controls button {
        padding: 8px 12px;
        font-size: 13px;
        flex: 1 1 auto; /* 允许按钮根据宽度自动缩放 */
    }

    /* 主题控件单独处理 */
    #theme-controls.edit-controls {
        display: flex;
        width: 90%; padding: 15px;
        flex-wrap: wrap; justify-content: center;
        bottom: 30px; z-index: 1001;
    }
    #theme-controls.edit-controls.hidden { display: none; }
    #theme-controls .control-divider { display: none; }

    /* 其他适配 */
    .user-trigger-area { padding: 15px; }
    .user-pill { padding: 4px 12px 4px 4px; }
    .pagination-dots { bottom: 74px; }

    .bookmark-dock {
        bottom: 10px; gap: 6px;
        width: fit-content;
        max-width: min(372px, calc(100vw - 16px));
        padding: 6px 8px; border-radius: 18px;
    }
    .dock-group,
    .dock-items { gap: 6px; }
    .dock-divider { height: 28px; }
    .dock-item { --dock-item-size: 40px; }
    .dock-icon { border-radius: 11px; }
    .dock-icon .text-icon { font-size: 18px; }
    .dock-empty { min-height: 34px; padding: 0 6px; font-size: 10px; }

    .modal-content.dock-edit-modal-content {
        width: min(calc(100vw - 24px), 420px);
        max-width: min(calc(100vw - 24px), 420px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 18px 14px;
        gap: 12px;
        overflow-y: auto;
    }
    .dock-edit-sections {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 12px;
    }
    .dock-edit-section { padding: 10px; }
    .dock-edit-list { max-height: min(24vh, 170px); }

    @media (max-height: 640px) {
        .dock-edit-section { padding: 8px; }
        .dock-edit-header { margin-bottom: 6px; }
        .dock-edit-list { gap: 6px; max-height: 142px; }
        .dock-edit-item { min-height: 42px; padding: 5px 7px; gap: 8px; }
        .dock-edit-icon { width: 32px; height: 32px; flex-basis: 32px; }
        .dock-edit-toggle { width: 26px; height: 26px; flex-basis: 26px; font-size: 18px; }
    }

    /* 7. 登录窗口/弹窗适配 (修复：垂直居中 & 高度自适应 & 内容溢出) */

    /* 确保父容器 flex 居中生效 */
    .modal {
        align-items: center;
        padding-bottom: 5%; /* 稍微向上提 */
    }

    .modal-content {
        min-width: unset;
        width: 90%;
        max-width: 350px;

        /* 修改：减小内边距，腾出空间 */
        padding: 20px 15px;
        gap: 12px; /* 减小间距 */

        /* 核心修复：高度自适应，去掉强制定位 */
        height: auto;
        position: relative;
        top: auto;
        transform: none;
        margin: 0 auto;

        justify-content: flex-start;

        /* 防止内容过多溢出 */
        max-height: 90vh;
        overflow-y: auto;

        border-radius: 20px;
    }

    .modal-content.bookmark-modal-content {
        width: min(calc(100vw - 16px), 440px);
        max-width: min(calc(100vw - 16px), 440px);
        max-height: calc(100vh - 128px);
        max-height: calc(100dvh - 128px);
        padding: 16px 18px;
        gap: 10px;
        overflow-y: auto;
    }

    .bookmark-modal-content .form-group { gap: 8px; }
    .bookmark-modal-content .inline-field {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
    }

    .input-row {
        display: block;
    }

    /* 修改：减小输入框高度 */
    .modal-content input {
        flex: 1;
        /* === 修改点：将 auto 改为 100% 以确保右侧对齐 === */
        width: 100%;
        height: 40px; /* 从 52px 减小到 40px */
        font-size: 14px; padding: 0 10px;
        margin-bottom: 0;
    }

    /* === 新增：修复弹窗溢出 & Logo 缩小 === */

    /* 1. 减小预览区域上下间距 */
    .preview-section {
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        border-right: none; /* 手机端去掉右边框 */
        padding-right: 0;
    }

    /* 2. 核心：把预览 Logo 改小 */
    #preview-card {
        width: 60px; /* 原来可能很大，强制改小 */
    }
    #preview-card .icon-box {
        width: 60px;
        height: 60px;
        border-radius: 14px;
    }
    #preview-card .text-icon {
        font-size: 24px;
    }
    #preview-card .bookmark-title {
        font-size: 12px;
    }

    /* 3. 减小候选图标尺寸 */
    .candidate-item {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    .candidate-grid {
        gap: 6px;
    }

    .modal-top-split {
        flex-direction: column; /* 强制垂直排列 */
        gap: 10px;
        padding: 10px;
    }
}

@media (min-width: 769px) and (max-height: 460px) {
    .dock-edit-modal-content {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 18px 20px;
        gap: 12px;
    }
    .dock-edit-sections { min-height: 0; gap: 12px; }
    .dock-edit-section { padding: 10px; }
    .dock-edit-header { margin-bottom: 6px; }
    .dock-edit-list { gap: 6px; max-height: 110px; }
    .dock-edit-item { min-height: 42px; padding: 5px 7px; gap: 8px; }
    .dock-edit-icon { width: 32px; height: 32px; flex-basis: 32px; }
    .dock-edit-toggle { width: 26px; height: 26px; flex-basis: 26px; font-size: 18px; }
}