/* Mobile layout shared by the dark and light forum themes. */
.reply-edit-toggle { display: inline-flex; }
.reply-edit-options { display: none; gap: 5px; }
.reply-edit-options a { color: inherit; text-decoration: none; }
@media (max-width: 760px) {
    #user-tooltip { pointer-events: auto; }
    html { min-width: 0; overflow-x: hidden; }
    body { min-width: 0; padding: 0; overflow-x: hidden; }
    .container { width: 100%; max-width: 100%; min-height: 100vh; margin: 0; padding: 12px; border-width: 0; box-sizing: border-box; box-shadow: none; }
    input:not([type="hidden"]), select, textarea { font-size: 16px !important; }

    .header { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 9px; align-items: start; padding-bottom: 10px; }
    .forum-brand { min-width: 0; align-self: center; }
    .forum-brand h2 { overflow: hidden; font-size: 18px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
    .forum-brand > div { display: none; }
    .top-right-auth { display: contents; }
    .auth-identity { display: flex !important; grid-column: 2; grid-row: 1; align-items: center; justify-content: flex-end; gap: 4px; max-width: 68vw; margin: 0 !important; white-space: nowrap; }
    .auth-identity .user-level-badge { flex: 0 0 auto; padding: 2px 5px; font-size: 10px; letter-spacing: 0; }
    .auth-identity .user-tag { max-width: 64px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
    #user_style_switch { flex: 0 0 86px; width: 86px !important; margin: 0 !important; padding: 3px !important; }
    .auth-guest { gap: 6px; }
    .auth-guest .btn { padding: 5px 9px; }
    .header-search { display: flex !important; grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 2px 0 0 !important; gap: 6px; }
    .header-search input { width: auto !important; min-width: 0; flex: 1; }
    .header-actions { display: flex; grid-column: 1 / -1; grid-row: 3; gap: 5px; overflow-x: auto; margin: 0 !important; padding: 2px 0; white-space: nowrap; }
    .header-actions > * { flex: 0 0 auto; }

    .nav-bar { display: block; padding: 9px; margin-bottom: 14px; border-radius: 4px; font-size: 14px; letter-spacing: 0; text-transform: none; }
    .mobile-nav-hint { display: block !important; margin-bottom: 4px; color: #aaa; font-size: 11px; text-align: center; animation: mobile-nav-hint-pulse 1.8s ease-in-out infinite; }
    .nav-links { display: flex; overflow-x: scroll; gap: 3px; padding-bottom: 6px; scrollbar-color: #d4af37 transparent; scrollbar-width: thin; overscroll-behavior-x: contain; }
    .nav-bar a { flex: 0 0 auto; padding: 7px 9px; white-space: nowrap; }
    .sort-controls { justify-content: flex-end; margin-top: 6px; }
    @keyframes mobile-nav-hint-pulse { 50% { opacity: .45; } }

    .thread-row { display: block; padding: 10px; transform: none !important; }
    .thread-main { align-items: flex-start; flex-wrap: nowrap; gap: 4px; }
    .thread-category, .thread-stats, .thread-open-control, .default-open-setting { display: none !important; }
    .thread-title-box { width: auto; min-width: 0; flex: 1; padding: 2px 0 6px; font-size: min(var(--thread-title-size, 16px), 17px); overflow-wrap: anywhere; }
    .thread-title-box > a { width: 100%; }
    .thread-meta { justify-content: space-between; flex-wrap: nowrap; margin-top: 3px; gap: 8px; white-space: normal; }
    .thread-meta-info { display: none; }
    .mobile-thread-meta { display: block !important; min-width: 0; overflow: hidden; color: var(--thread-meta-color, #888); font-family: var(--thread-meta-font, "Microsoft YaHei", sans-serif); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-thread-stats { display: flex !important; flex: 0 0 auto; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }

    .post-content { font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
    .thread-body :where(p, div, span, font, li, td, th, a, strong, em, blockquote) { line-height: inherit; }
    .thread-body p { margin: 0 0 .85em; }
    .thread-body h1 { font-size: 1.35em !important; line-height: 1.45; }
    .thread-body h2 { font-size: 1.25em !important; line-height: 1.5; }
    .thread-body h3, .thread-body h4, .thread-body h5, .thread-body h6 { font-size: 1.1em !important; line-height: 1.55; }
    .container .post-content blockquote, .container .forum-quote {
        width: 100%;
        max-width: 100%;
        margin: 10px 0 !important;
        padding: 9px 10px !important;
        border-left-width: 3px !important;
        border-radius: 3px !important;
        box-sizing: border-box;
        box-shadow: none !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        overflow-wrap: anywhere;
    }
    .container .post-content blockquote > :first-child { margin-top: 0 !important; }
    .container .post-content blockquote > :last-child { margin-bottom: 0 !important; }
    .container .post-content img { width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: 8px !important; }
    .post-content table, .fav-table { display: block; max-width: 100%; overflow-x: auto; }
    .thread-author-bar { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 3px; overflow: hidden; font-size: clamp(9px, 2.8vw, 12px) !important; white-space: nowrap; }
    .thread-author-bar .btn { flex: 0 0 auto; margin-left: 3px !important; padding: 2px 5px !important; font-size: 10px !important; }
    .thread-highlight-title { display: block !important; width: 100%; max-width: 100%; padding: 11px 6px !important; overflow: hidden; font-size: 19px !important; white-space: nowrap; overflow-wrap: normal; box-sizing: border-box; }
    .reply-head { align-items: center; gap: 6px; margin-bottom: 2px !important; }
    .reply-author { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .reply-actions { display: flex; position: relative; flex: 0 0 auto; align-items: center; white-space: nowrap; }
    .reply-edit-toggle { display: inline-flex !important; width: 16px; height: 16px; align-items: center; justify-content: center; padding: 0; color: var(--mobile-action-accent, #d4af37); background: transparent; border: 0; border-radius: 0; font: inherit; font-size: 10px; line-height: 1; cursor: pointer; }
    .reply-edit-options { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: max-content; padding: 5px; background: var(--mobile-action-menu-bg, #111); border: 1px solid var(--mobile-action-menu-border, #555); border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
    .reply-edit-options.is-open { display: flex; gap: 4px; }
    .reply-edit-options a { color: var(--mobile-action-accent, #d4af37) !important; padding: 4px 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; line-height: 1.2; white-space: nowrap; }
    .reply-edit-options .reply-action-delete { color: #ff6666 !important; }
    .reply-edit-menu { position: relative; display: inline-flex; }
    .sub-reply-level .sub-reply-level { margin-left: 8px; padding-left: 7px; }
    .sub-reply-item { position: relative; min-height: 16px; padding-right: 0 !important; }
    .sub-reply-row { align-items:baseline; }
    .sub-reply-actions { position:static; flex:0 0 auto; align-self:baseline; margin-top:0; }

    .modal { padding: 12px; box-sizing: border-box; }
    .modal-content, #loginModal .modal-content, #regModal .modal-content { width: 100% !important; max-width: 420px; padding: 18px !important; box-sizing: border-box; }
    #lb-img { max-width: calc(100vw - 24px); max-height: calc(90vh - 58px); }
    #lb-prev, #lb-next { z-index: 5; top: 50% !important; width: 42px; height: 64px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0; font-size:38px; line-height:1; opacity: .72; transform: translateY(-50%) !important; pointer-events:auto; text-shadow: 0 1px 5px rgba(0,0,0,.9); transition:opacity .2s ease, background .2s ease; }
    #lb-prev { left: 12px; }
    #lb-next { right: 4px; }
    #lb-prev:active, #lb-next:active { opacity: .98; transform: translateY(-50%) !important; background:rgba(0,0,0,.2); }

    .profile-hero { display: block !important; padding: 18px !important; }
    .profile-hero h1 { font-size: 25px !important; }
    .profile-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 16px; }
    .stat-box { padding: 11px 6px !important; }
    .tabs { overflow-x: auto; gap: 0; }
    .tab-btn { flex: 0 0 auto; padding: 10px 14px; font-size: 14px; }
    .tab-content { min-height: 0; padding: 14px !important; }
    .tab-content[style*="display:flex"] { flex-direction: column; gap: 18px !important; }
    .tab-content[style*="display:flex"] > div:first-child { border-right: 0 !important; border-bottom: 1px dashed #333; padding-right: 0 !important; padding-bottom: 16px; }
    .profile-hero + div[style*="display:flex"] { flex-wrap: wrap; gap: 8px !important; }
    .profile-hero + div[style*="display:flex"] input { width: 100% !important; }
    .tab-content form[style*="display:flex"] { flex-wrap: wrap; }
    .tab-content form[style*="display:flex"] input { width: 100% !important; }
    .fav-table td { min-width: 100px; }

    .shop-header { margin-bottom: 22px !important; }
    .shop-header h2 { font-size: 22px; }
    .shop-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .shop-card { padding: 18px !important; }

    div[style*="padding:30px"] { padding: 16px !important; }
    select[style*="width:200px"] { width: 100% !important; }
    #editor-container, #reply-container { height: 280px !important; }
    .editor-upload-options { min-height:30px; }
    .editor-attachment-control { display: none !important; }
    .attachment-upload-panel { flex-wrap: wrap; }
    .attachment-limit { white-space: normal; }
    .w-e-toolbar { display: flex !important; flex-wrap: nowrap !important; min-height: 40px; overflow-x: auto !important; overflow-y: hidden; white-space: nowrap; }
    .w-e-toolbar .w-e-bar-item { flex: 0 0 auto; }
    .w-e-text-container { min-height: 190px; }
}