/* ════════════════════════════════════════════════════════════════
   KhushFlix on phones (see static/js/app.js)
   Phone layout = narrow screens, plus touch screens up to small-tablet
   size (unfolded foldables, iPad portrait). Desktop is untouched.
   ════════════════════════════════════════════════════════════════ */
:root { --bnav-h: 0px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
        --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }

.kf-bnav, .kf-ptr, .kf-install, .kf-sheet-wrap { display: none; }

html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) {
    :root { --bnav-h: calc(60px + var(--safe-b)); --side-pad: max(16px, var(--safe-l), var(--safe-r)); }
    html { overscroll-behavior-y: none; }               /* our pull-to-refresh, not the browser's reload */
    body { padding-bottom: var(--bnav-h); }

    /* Header: compact, clear of the notch / status bar */
    .container > h1.brand-h1 {
        font-size: 1.55rem; padding-top: calc(14px + var(--safe-t)); padding-bottom: 2px; letter-spacing: 1.5px;
    }
    .tabs { display: none !important; }                  /* the bottom tab bar replaces them */
    .section-header { padding-top: 18px; }
    .section-header h2 { font-size: 1.3rem; }

    /* Bottom tab bar */
    .kf-bnav {
        display: flex; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
        height: var(--bnav-h); padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
        background: rgba(10, 11, 16, 0.88);
        -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        transition: transform 0.22s ease;
    }
    .kf-bnav button {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; background: none; border: 0; color: #8b90a3; font: 600 10.5px/1.1 var(--font-body, system-ui);
        letter-spacing: 0.01em; cursor: pointer; padding: 6px 0 4px; -webkit-user-select: none; user-select: none;
    }
    .kf-bnav svg { width: 24px; height: 24px; fill: currentColor; transition: transform 0.18s ease; }
    .kf-bnav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .kf-bnav button.on { color: #fff; }
    .kf-bnav button.on svg { fill: #a5b4fc; transform: translateY(-1px); filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.55)); }
    .kf-bnav button:active svg { transform: scale(0.9); }
    html.kf-typing .kf-bnav, html.kf-playing .kf-bnav { transform: translateY(110%); }

    /* Toasts sit above the tab bar */
    /* Toasts: a compact pill above the tab bar. The inline style sets top:20px, which together
       with bottom used to stretch it over the whole screen, so top is cleared here. */
    .notification {
        top: auto !important; bottom: calc(var(--bnav-h) + 14px) !important;
        left: 0 !important; right: 0 !important; margin: 0 auto !important;
        width: -webkit-fit-content !important; width: fit-content !important; max-width: calc(100vw - 32px) !important;
        height: auto !important; padding: 11px 18px !important; border-radius: 999px !important;
        font-size: 0.9rem; line-height: 1.3; text-align: center;
        animation: kfToastUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    @keyframes kfToastUp { from { opacity: 0; transform: translateY(12px); } }

    /* Text boxes: 16px so iPhone doesn't zoom in when you tap one */
    input, select, textarea, .gd-search input, .search-input, .kfs-search input { font-size: 16px !important; }

    /* Rows swipe and snap like an app */
    .poster-rail, .continue-watching-grid { scroll-snap-type: x mandatory; scroll-padding-inline: var(--side-pad);
        padding-left: var(--side-pad); padding-right: var(--side-pad); -webkit-overflow-scrolling: touch; }
    .poster-rail > *, .continue-watching-grid > * { scroll-snap-align: start; }
    .continue-card { flex: 0 0 min(78vw, 300px) !important; }
    .poster-rail .poster-card, .od-rail .poster-card { flex-basis: 31vw !important; max-width: 150px; }
    .poster-caption { opacity: 1 !important; transform: none !important; }   /* no hover on phones: always show titles */
    .continue-remove, .poster-remove { opacity: 1 !important; }

    /* Pop-ups: centred cards, easy to reach and read (players stay full screen) */
    .modal-overlay:not(#streamModal):not(#playerModal) { align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b)); }
    .modal-overlay:not(#streamModal):not(#playerModal) .modal-content {
        width: 100%; max-width: 520px !important; margin: auto !important;
        max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 32px); border-radius: 22px;
        overscroll-behavior: contain;
    }
    .modal-overlay.active:not(#streamModal):not(#playerModal) .modal-content { animation: kfModalIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .modal-content > .kf-grab { display: none; }       /* the grab handle was a bottom-sheet cue */
    #shareModal .modal-content { max-width: 440px !important; }
    #shareModal .share-body { padding: 16px 18px 20px; }
    #shareModal .share-durations { flex-wrap: nowrap; gap: 6px; }
    #shareModal .share-dur { min-width: 0; flex: 1 1 0; padding: 12px 0; }
    #shareModal .share-link-row button { padding: 0 14px; }
    /* Active links: "Created … · views" on its own line, time left and Revoke beneath */
    #shareModal .share-row { flex-wrap: wrap; row-gap: 6px; padding: 12px 0; }
    #shareModal .share-row span:first-child { flex: 1 1 100%; }
    #shareModal .share-row .share-left { flex: 1; }
    #shareModal .share-row button { padding: 8px 16px; }
    .details-hero { border-radius: 22px 22px 0 0; aspect-ratio: 16 / 10; }
    .details-main { padding-left: 18px; padding-right: 18px; }
    .details-actions { flex-wrap: wrap; }
    .details-actions .btn-detail { flex: 1 1 auto; justify-content: center; min-height: 46px; }

    /* Players: edge to edge */
    #streamModal .modal-content, #playerModal .modal-content {
        max-width: none !important; width: 100%; height: 100%; max-height: none; margin: 0 !important; border-radius: 0;
        padding-top: var(--safe-t);
    }

    /* Bigger touch targets */
    .btn-new-folder, .gd-btn, .sec-btn, .btn-detail, .kfs-btn { min-height: 44px; }
    .od-seg button { height: 40px; }

    /* Sheets (More, install steps) */
    .kf-sheet-wrap {
        display: flex; position: fixed; z-index: 120; left: 0; top: 0; right: 0; bottom: 0; align-items: center; justify-content: center;
        padding: calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b));
        background: rgba(0, 0, 0, 0); pointer-events: none; transition: background 0.25s ease;
    }
    .kf-sheet-wrap.open { background: rgba(0, 0, 0, 0.55); pointer-events: auto; }
    .kf-sheet {
        width: 100%; max-width: 440px; max-height: 85dvh; overflow-y: auto; transform: scale(0.94); opacity: 0;
        transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.2s ease;
        background: #15161d; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 18px 16px;
    }
    .kf-sheet-wrap.open .kf-sheet { transform: none; opacity: 1; }
    .kf-sheet > .kf-grab { display: none; }
    .kf-grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); margin: 6px auto 12px; }
    .modal-content > .kf-grab { position: absolute; left: 50%; top: 4px; margin: 0 0 0 -19px; z-index: 6; }
    .kf-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
    .kf-sheet-grid button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 86px;
        border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.04);
        color: #d6d8e2; font: 600 12.5px var(--font-body, system-ui); cursor: pointer;
    }
    .kf-sheet-grid svg { width: 26px; height: 26px; fill: #a5b4fc; }
    .kf-sheet-grid button.on { background: rgba(99, 102, 241, 0.22); border-color: rgba(99, 102, 241, 0.5); color: #fff; }
    .kf-sheet-grid button:active { transform: scale(0.97); }

    /* Install offer */
    .kf-install {
        display: flex; align-items: center; gap: 12px; position: fixed; z-index: 95;
        left: 12px; right: 12px; bottom: calc(var(--bnav-h) + 12px); padding: 12px 12px 12px 14px;
        background: rgba(24, 26, 36, 0.96); border: 1px solid rgba(99, 102, 241, 0.45); border-radius: 18px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); transform: translateY(20px); opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .kf-install.in { transform: none; opacity: 1; }
    .kf-install img { width: 38px; height: 38px; flex: none; }
    .kf-install div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .kf-install b { font-size: 14px; color: #fff; }
    .kf-install span { font-size: 12px; color: #9aa0b4; }
    .kf-install-go { flex: none; height: 38px; padding: 0 16px; border-radius: 12px; border: 0; background: #6366f1; color: #fff; font: 700 14px var(--font-body, system-ui); }
    .kf-install-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: #9aa0b4; font-size: 16px; }
    .kf-ios-steps { text-align: center; }
    .kf-ios-icon { width: 72px; height: 72px; border-radius: 16px; margin: 4px auto 10px; display: block; }
    .kf-ios-steps h3 { font-size: 18px; margin: 0 0 14px; }
    .kf-ios-steps ol { text-align: left; margin: 0 0 18px; padding-left: 22px; display: grid; gap: 12px; color: #d6d8e2; font-size: 15px; line-height: 1.4; }
    .kf-ios-share { width: 20px; height: 20px; fill: #3b82f6; vertical-align: -4px; }
    .kf-btn-primary { width: 100%; height: 48px; border: 0; border-radius: 14px; background: #6366f1; color: #fff; font: 700 16px var(--font-body, system-ui); }

    /* Pull to refresh */
    .kf-ptr {
        display: grid; place-items: center; position: fixed; z-index: 80; left: 50%; top: calc(var(--safe-t) + 6px);
        width: 40px; height: 40px; border-radius: 50%; background: #1d1f2b; border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); transform: translate(-50%, -60px); opacity: 0; pointer-events: none;
    }
    .kf-ptr svg { width: 22px; height: 22px; fill: #8b90a3; }
    .kf-ptr.ready svg { fill: #a5b4fc; }
    .kf-ptr.spin { transform: translate(-50%, 14px) !important; opacity: 1 !important; transition: transform 0.2s ease; }
    .kf-ptr.spin svg { fill: #a5b4fc; animation: kfSpin 0.8s linear infinite; }

    /* Live TV: the guide fills the space above the tab bar */
    .gd { --gd-ch: 108px; }
    .gd-bar { gap: 8px; }
    .gd-bar .gd-search { flex: 1 1 100%; order: 5; }
    .gd-clock { display: none; }
    .gd-view span { display: none; }                 /* icon only: fits on one line with the filters */
    .gd-view { width: 44px; padding: 0; justify-content: center; }
    .gd-bar .gd-select .kfs-btn { min-width: 0; max-width: 46vw; }
}

@keyframes kfSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kfSpin { to { transform: rotate(360deg); } }

/* Very small screens: flip-phone cover screens, iPhone SE (1st gen), small Androids */
@media (max-width: 380px) {
    :root { --side-pad: max(12px, var(--safe-l), var(--safe-r)); }
    .container > h1.brand-h1 { font-size: 1.3rem; }
    .kf-bnav button { font-size: 9.5px; }
    .kf-bnav svg { width: 22px; height: 22px; }
    .poster-rail .poster-card, .od-rail .poster-card { flex-basis: 40vw !important; }
    .continue-card { flex-basis: 84vw !important; }
    .kf-sheet-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Short screens: phones held sideways, flip-phone cover screens. The tab bar
   gets slimmer and loses its labels so the content keeps the room. */
@media (max-height: 480px) and (pointer: coarse) {
    :root { --bnav-h: calc(48px + var(--safe-b)); }
    .kf-bnav button span { display: none; }
    .container > h1.brand-h1 { padding-top: calc(8px + var(--safe-t)); font-size: 1.25rem; }
    .modal-overlay:not(#streamModal):not(#playerModal) .modal-content { max-height: calc(100dvh - 8px); }
}

/* Unfolded foldables and small tablets (touch, 600px and up): wider sheets
   centred instead of full width, more poster columns */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1100px) {
    .modal-overlay:not(#streamModal):not(#playerModal) { align-items: center; }
    .modal-overlay:not(#streamModal):not(#playerModal) .modal-content { width: min(92vw, 760px); border-radius: 22px; max-height: 88dvh; }
    .kf-sheet { max-width: 560px; }
    .poster-rail .poster-card, .od-rail .poster-card { flex-basis: 150px !important; }
    .kf-install { left: auto; right: 16px; width: 420px; }
}

/* Dual-screen phones and foldables with a visible hinge: keep sheets and the
   player off the fold (on the right-hand screen) */
@media (horizontal-viewport-segments: 2) {
    .modal-overlay:not(#streamModal):not(#playerModal) {
        justify-content: flex-end;
        padding-left: env(viewport-segment-left 1 0, 0px);
    }
    .modal-overlay:not(#streamModal):not(#playerModal) .modal-content { width: env(viewport-segment-width 1 0, 100%); border-radius: 22px 22px 0 0; }
}
@media (vertical-viewport-segments: 2) {
    /* Laptop-style fold (top half screen, bottom half keyboard/controls): sheets on the top half */
    .modal-overlay:not(#streamModal):not(#playerModal) { align-items: flex-start; padding-top: env(viewport-segment-top 0 0, 0px); }
    .modal-overlay:not(#streamModal):not(#playerModal) .modal-content { max-height: env(viewport-segment-height 0 0, 100dvh); border-radius: 0 0 22px 22px; }
}

/* Installed app: no browser chrome, so mind the status bar and stop rubber-banding */
html.kf-app body { -webkit-user-select: none; user-select: none; }
html.kf-app input, html.kf-app textarea, html.kf-app [contenteditable] { -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
    .kf-sheet, .kf-bnav, .kf-install { transition: none; }
    .modal-overlay.active .modal-content { animation: none !important; }
}