/* css/responsive.css */

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

    /* 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;
        max-width: 100%;
        padding-left: 10px; padding-right: 10px;

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

        display: grid;
        grid-template-columns: repeat(4, var(--mobile-card-size)); /* 4列 */
        gap: var(--mobile-gap);
        width: auto;
    }

    /* 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. 确保“编辑书签”按钮在菜单中显示 */
    .user-menu .menu-item[onclick*="handleMenuEdit"] { display: flex !important; }

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

    /* 移除之前的 !important，让 .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 !important;
    }

    /* 针对手机端调整按钮样式 */
    #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 !important; }
    #theme-controls .control-divider { display: none; }

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

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

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

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

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

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

        justify-content: flex-start !important;

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

        border-radius: 20px !important;
    }

    .input-wrapper {
        display: block !important;
    }

    .input-row {
        display: block !important;
        justify-content: flex-start !important; align-items: center !important; gap: 10px !important;
    }
    .input-label {
        width: auto !important; min-width: 40px; flex-shrink: 0;
        text-align: left !important; padding-right: 0;
    }

    /* 修改：减小输入框高度 */
    .modal-content input {
        flex: 1 !important; width: auto !important;
        height: 40px !important; /* 从 52px 减小到 40px */
        font-size: 14px !important; padding: 0 10px;
        margin-bottom: 0 !important;
    }

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

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

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

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

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