/* Mobile readability — last-loaded overlay.
   Goal: type stays readable, chrome/FABs do not cover the page. */

:root {
    --hkl-fab-reserve: 0px;
}

@media (max-width: 1023px) {
    :root {
        --hkl-fab-reserve: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    html,
    body {
        overflow-x: clip;
        max-width: 100%;
    }

    body:not(.convert-app-page):not(.qk-studio-page) {
        padding-bottom: var(--hkl-fab-reserve);
    }

    #turbo-container,
    .container,
    .site-page-body,
    .site-page-main,
    .site-page-aside {
        min-width: 0;
        max-width: 100%;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
    }

    #chapter_001 img,
    .site-post-content img,
    #comments-wrapper img,
    .font-content img {
        height: auto;
    }

    #chapter_001 table,
    .site-post-content table,
    .font-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .site-topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Do not wash the last home-list rows. */
    .site-home-tabs-root::after {
        display: none;
    }

    /* Compact chrome: keep tap size via padding, not giant visual chips. */
    .site-mobile-quick-chip,
    .site-subnav-link,
    .site-home-tab,
    .site-action-chip,
    .category-item {
        min-height: 36px;
    }

    .site-mobile-menu-button,
    .site-category-button {
        min-width: 40px;
        min-height: 40px;
    }

    .site-search-input {
        font-size: 16px !important;
    }

    .site-story-title {
        font-size: 16px;
        line-height: 1.4;
    }

    .site-story-status-line,
    .site-story-meta {
        font-size: 13px;
        line-height: 1.4;
    }

    .site-home-tab,
    .site-subnav-link {
        font-size: 13px;
    }

    .site-page-heading {
        font-size: 22px;
        line-height: 1.3;
    }

    .site-page-lead,
    .site-post-content,
    .post-show-page #comments-wrapper .font-content {
        font-size: 16px;
        line-height: 1.7;
    }

    .site-related-title {
        font-size: 15px;
        line-height: 1.4;
    }

    .site-post-latest-title {
        font-size: 14px;
    }

    .site-post-latest-time,
    .site-post-meta-label,
    .site-post-purchase-meta,
    .site-post-kicker {
        font-size: 12px;
    }

    .site-post-meta-value,
    .site-post-section-title {
        font-size: 14px;
    }

    .hkl-global-footer {
        margin-top: 20px;
        padding-bottom: 8px;
    }

    .hkl-pwa-sub,
    .hkl-pwa-text,
    .hkl-global-footer .footer-nav a,
    .hkl-global-footer .footer-copy {
        font-size: 13px;
        line-height: 1.45;
    }
}

@media (max-width: 768px) {
    /* Post detail: keep a readable stacked hero, do not squeeze title beside cover. */
    .post-show-v5 {
        gap: 12px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .post-v5-hero {
        border-radius: 0;
        box-shadow: none;
    }

    .post-v5-content {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        grid-template-columns: none;
        padding: 14px 12px 10px;
        gap: 12px;
    }

    .post-v5-cover {
        width: var(--shell-hero-cover-w);
        height: var(--shell-hero-cover-h);
    }

    .post-v5-cover img {
        width: var(--shell-hero-cover-w);
        height: var(--shell-hero-cover-h);
        max-height: var(--shell-hero-cover-h);
    }

    .post-v5-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .post-v5-meta-inline {
        font-size: 13px;
        gap: 8px;
        opacity: 1;
    }

    .post-v5-grid-item span,
    .post-v5-stat {
        font-size: 12px;
    }

    .post-v5-grid-item strong {
        font-size: 14px;
    }

    .post-v5-btn {
        height: 40px;
        font-size: 13px;
        padding: 0 14px;
    }

    .post-v3-title,
    .site-post-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .post-v3-info-item span,
    .post-v3-stat > span,
    .post-v3-status {
        font-size: 12px;
    }

    .post-v3-info-item strong,
    .post-v3-stat strong {
        font-size: 14px;
        max-width: 100%;
    }

    .site-post-content {
        padding: 12px !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .site-post-chip,
    .site-post-action,
    .site-post-admin-link,
    .site-post-tag,
    .site-post-purchase-button {
        min-height: 36px;
        font-size: 13px;
    }

    /* Chapter reading: keep the last lines above FABs. */
    body.chapter-reading-page #chapter_001 {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 8px;
        line-height: 1.75;
    }

    body.chapter-reading-page #content {
        padding-bottom: 8px;
    }

    #ttsToolbar {
        gap: 8px;
        margin: 10px 0 14px;
    }

    #ttsToolbar select,
    #ttsFontFamily {
        font-size: 14px !important;
        max-width: 100%;
    }

    .chapter-route-kicker,
    .chapter-toc-trigger span {
        font-size: 11px;
    }

    .chapter-route-title {
        font-size: 13px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }

    .chapter-toc-panel {
        width: min(100vw, 430px);
        min-width: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Donate is a left FAB on chapter pages — icon only so it does not cover text. */
    body.chapter-reading-page #donate {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 0;
        gap: 0;
        font-size: 0;
        letter-spacing: 0;
        overflow: hidden;
    }

    body.chapter-reading-page #donate svg {
        width: 16px;
        height: 16px;
        margin: 0 !important;
    }

    /* Auth: huge welcome type used to fill the phone screen. */
    .bg-img-login-3 {
        height: auto;
        min-height: 100dvh;
        padding: 16px 12px 24px;
        box-sizing: border-box;
    }

    .bg-img-login-3 .text-5xl,
    .bg-img-login-3 .text-6xl {
        font-size: 1.5rem !important;
        line-height: 1.35 !important;
    }

    .bg-img-login-3 .p-10 {
        padding: 1.25rem;
    }

    .bg-img-login-3 .w-3\/4,
    .bg-img-login-3 input {
        width: 100% !important;
        max-width: 100%;
    }

    /* Leaderboard decorative rails overflow the viewport. */
    #mo-dau-board-scroll {
        padding: 18px 14px !important;
        overflow: hidden;
    }

    #mo-dau-board-scroll::before,
    #mo-dau-board-scroll::after {
        display: none;
    }

    .thien-dao-text,
    .van-co-text,
    #mo-dau-board-scroll .scroll-body {
        font-size: 15px;
        line-height: 1.65;
    }

    .thunder-overlay {
        opacity: .1;
    }

    /* Nhiệm vụ / VIP / payments: stop 8–9px labels. */
    .sect-title p,
    .stat-label,
    .status-badge,
    .reward-unit,
    .btn-mystic,
    .task-status,
    .sect-banner {
        font-size: 12px !important;
        letter-spacing: 0.02em;
    }

    .task-name {
        font-size: 14px !important;
        max-width: none !important;
        white-space: normal !important;
    }

    .stat-value,
    .reward-amount {
        font-size: 15px !important;
    }

    .lt-tab-btn,
    .lt-metric-label {
        font-size: 12px !important;
    }

    .lt-metric-value {
        font-size: 14px !important;
    }

    .p-nav-label,
    .p-table th,
    .p-table td {
        font-size: 12px !important;
    }

    .p-title-group h2 {
        font-size: 20px;
    }

    /* Member / search / generic forms */
    form input[type="search"],
    form input[type="text"],
    form input[type="email"],
    form input[type="password"] {
        max-width: 100%;
    }

    .hkl-scroll-body {
        padding: 12px 12px;
    }

    .hkl-title {
        font-size: 17px;
    }

    .hkl-subtitle,
    .hkl-tea-meta {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 520px) {
    .site-logo-link img,
    body:not(.dark) .site-logo-link img,
    body.dark .site-logo-link img {
        width: 108px;
    }

    .site-header-main {
        min-height: 48px;
        gap: 6px;
        padding: 4px 0 6px;
    }

    .site-mobile-quick-actions {
        gap: 6px;
        padding-bottom: 0;
    }

    .site-mobile-quick-chip {
        height: 34px;
        min-height: 34px;
        font-size: 12px;
        padding: 0 8px;
    }

    .site-story-grid {
        grid-template-columns: 1fr;
    }

    .site-story-card {
        min-height: 0;
        padding: 10px;
    }

    .site-story-cover {
        width: var(--shell-cover-w);
        flex-basis: var(--shell-cover-w);
        height: var(--shell-cover-h);
        aspect-ratio: auto;
    }

    .site-post-side .site-post-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Coarse pointers: do not inflate every control to 44px (covers the reading area). */
@media (pointer: coarse) {
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-width: 0;
        min-height: 0;
    }

    .site-mobile-menu-button,
    .site-category-button,
    #theme-toggle,
    #global-chat-btn,
    #donate,
    #tts-global-btn {
        min-width: 40px;
        min-height: 40px;
    }

    .site-search-input,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .site-mobile-quick-chip,
    .site-subnav-link,
    .site-home-tab {
        min-height: 36px;
    }
}

/* Hide FABs while scrolling so they do not sit on top of text. */
body.hide-floating #theme-toggle,
body.hide-floating #donate,
body.hide-floating #tts-global-btn,
body.hide-floating #global-chat-btn {
    transform: translateY(120%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}