/* 移动端优化 */

html, body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@supports (padding-top: env(safe-area-inset-top)) {
    html {
        --safe-area-top: env(safe-area-inset-top);
        --safe-area-bottom: env(safe-area-inset-bottom);
        --safe-area-left: env(safe-area-inset-left);
        --safe-area-right: env(safe-area-inset-right);
    }
}

* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img, video {
    max-width: 100%;
    height: auto;
    -webkit-touch-callout: none;
}

table, pre, code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

input, textarea, select {
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

button, .btn, .action-btn, .search-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    min-height: 44px;
}

.app-container,
.container,
.main-content,
.benchmark-app,
.benchmark-page {
    overflow-x: hidden;
}

.scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    overscroll-behavior: none;
}

.app-container {
    min-height: 100vh;
    /* display: flex; */
    flex-direction: column;
}

.main-content {
    flex: 1;
}

.keyword-tag,
.note-title,
.content-area,
.search-input-wrapper,
.card,
.publish-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.image-container,
.image-preview,
.enhanced-image {
    overflow: hidden;
    position: relative;
}

.image-container img,
.image-preview img,
.enhanced-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.header,
.navigation {
    user-select: none;
    -webkit-user-select: none;
}

@media screen and (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
    }

    .btn, button, .keyword-tag, .action-btn {
        min-height: 44px;
        min-width: 44px;
    }

    input, textarea, select {
        font-size: 16px;
    }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .main-content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}