/* 移动端响应式样式 - Mobile Responsive Styles */

@media (max-width: 768px) {
    .header {
        padding: 12px 16px;
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .content-type-selector {
        max-width: 100%;
        gap: 12px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }

    .editor-container {
        margin: 16px 12px !important;
        border-radius: var(--radius-lg) !important;
        max-width: calc(100% - 24px) !important;
        box-shadow: var(--shadow-lg) !important;
        height: calc(var(--vh, 1vh) * 100 - 80px) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        background: var(--bg-surface) !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .editor-container:hover {
        transform: none !important;
        box-shadow: var(--shadow-lg) !important;
    }

    /* 移动端编辑器内边距调整 */
    .vditor-ir .vditor-ir__main,
    .vditor-wysiwyg .vditor-wysiwyg__main,
    .vditor-sv .vditor-sv__main,
    .vditor-preview {
        padding: 20px 16px !important;
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

    .vditor-ir .vditor-ir__main textarea,
    .vditor-sv .vditor-sv__main textarea,
    .vditor-wysiwyg .vditor-wysiwyg__main,
    .vditor-ir .vditor-reset,
    .vditor-wysiwyg .vditor-reset,
    .vditor-preview .vditor-reset {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

    .type-buttons {
        display: none !important;
    }

    .action-buttons {
        display: flex;
        gap: 12px;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .action-buttons .publish-button {
        margin-left: 0;
    }

    /* 优化移动端按钮样式 - 确保触摸目标足够大 */
    .toolbar-icon-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: var(--radius-full) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
    }

    /* 触摸反馈效果 */
    .toolbar-icon-button:active {
        background: var(--bg-surface-hover) !important;
        transform: scale(0.92) !important;
    }

    /* 添加触摸波纹效果的容器 */
    .toolbar-icon-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
        pointer-events: none;
    }

    .toolbar-icon-button:active::before {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }

    .toolbar-icon-button i {
        font-size: 24px !important;
        color: var(--text-main) !important;
        pointer-events: none !important;
    }

    .toolbar-icon-button img {
        width: 24px !important;
        height: 24px !important;
        filter: invert(1) brightness(1.2);
        pointer-events: none !important;
    }

    .el-button.publish-button {
        padding: 10px 24px !important;
        font-size: 15px !important;
        height: 44px !important;
        min-width: 100px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: 0 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 发布按钮触摸反馈 */
    .el-button.publish-button:active {
        transform: scale(0.96) !important;
    }

    /* Dialog */
    body {
        font-size: 16px !important;
    }

    .el-dialog {
        width: 90% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-radius: var(--radius-lg) !important;
    }

    .el-dialog__header {
        padding: 16px 20px !important;
    }

    .el-dialog__body {
        padding: 0 20px 20px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    .el-dialog__footer {
        padding: 16px 20px !important;
    }

    /* 移动端表单元素优化 */
    .el-input__inner {
        font-size: 16px !important;
        height: 40px !important;
        line-height: 40px !important;
    }

    .el-button {
        padding: 8px 16px !important;
        font-size: 14px !important;
        height: 36px !important;
    }

    /* 移动端对话框 - 移除所有模糊效果 */
    .v-modal,
    .el-dialog__wrapper,
    .el-dialog,
    .upload-progress-dialog,
    .upload-feedback-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* 确保上传进度对话框完全清晰 */
    .upload-progress-dialog .el-dialog {
        background: rgb(30, 41, 59) !important;
    }

    .upload-progress-card {
        background: rgb(30, 41, 59) !important;
    }
}