/**
 *                          ___                   _       _         _
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *
 *  Shorts - the upright player and the home page shelf. Written against the
 *  site's shared colour variables, so it follows whichever theme is in use.
 */

/* ================================================================ shelf */

.shorts-shelf { margin: 24px 0 8px; }
.shorts-shelf-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 20px; line-height: 28px; }
.shorts-shelf-head svg { width: 24px; height: 24px; fill: #ff0033; }
.shorts-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 12px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.shorts-row::-webkit-scrollbar { display: none; }
.shorts-card { display: block; color: var(--ink); text-decoration: none; }
.shorts-card:hover { color: var(--ink); }
.shorts-thumb { display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.shorts-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shorts-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 8px; font-weight: 500; font-size: 16px; line-height: 22px;
}
.shorts-views { display: block; color: var(--muted); font-size: 14px; }

/* =============================================================== player */

body.page-feed .page { padding: var(--topbar, 56px) 0 0; }
.shorts-feed {
    height: calc(100vh - var(--topbar, 56px)); overflow-y: auto; scroll-snap-type: y mandatory;
    scrollbar-width: none; overscroll-behavior: contain;
}
.shorts-feed::-webkit-scrollbar { display: none; }

.short {
    height: calc(100vh - var(--topbar, 56px)); scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center; padding: 16px 0;
}
.short-stage { display: flex; align-items: flex-end; gap: 16px; height: 100%; }
.short-frame {
    position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100vw - 32px);
    border-radius: 12px; overflow: hidden; background: #000; color: #fff;
}
.short-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; background: #000; }
.short-tap { position: absolute; inset: 0; cursor: pointer; }

.short-paused {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); opacity: 0;
    width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 0, 0, .45);
    display: grid; place-items: center; pointer-events: none; transition: opacity .15s, transform .15s;
}
.short-paused svg { width: 40px; height: 40px; fill: #fff; }
.short.is-paused .short-paused { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.short-sound {
    position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.short-sound svg { width: 24px; height: 24px; fill: #fff; display: block; }
.short-sound .on { display: none; }
.shorts-sound-on .short-sound .on { display: block; }
.shorts-sound-on .short-sound .off { display: none; }

.short-info {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65)); pointer-events: none;
}
.short-info a, .short-info button { pointer-events: auto; }
.short-who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.short-who a { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; text-decoration: none; font-size: 14px; }
.short-who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #333; }
.short-sub {
    height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: #fff; color: #0f0f0f;
    font: 500 13px/32px inherit; font-family: inherit; cursor: pointer;
}
.short-sub.on { background: rgba(255, 255, 255, .2); color: #fff; }
.short-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: #fff; font-size: 15px; line-height: 21px; text-decoration: none;
}
.short-title:hover { color: #fff; }
.short-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.short-progress i { display: block; height: 100%; width: 0; background: #ff0033; }

.short-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 4px; }
.short-act {
    display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer;
    color: var(--ink); font: 400 12px/16px inherit; font-family: inherit; text-decoration: none; padding: 0;
}
.short-act:hover { color: var(--ink); }
.short-act .ico {
    width: 48px; height: 48px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center;
}
.short-act:hover .ico { filter: brightness(.94); }
.short-act .ico svg { width: 24px; height: 24px; fill: currentColor; }
.short-act.on .ico { background: var(--ink); color: var(--bg); }
.short-avatar img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg-soft); }

.shorts-nav {
    position: fixed; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; z-index: 50;
}
.shorts-nav button {
    width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--ink); cursor: pointer;
    display: grid; place-items: center;
}
.shorts-nav button:hover { filter: brightness(.94); }
.shorts-nav svg { width: 24px; height: 24px; fill: currentColor; }

.shorts-empty { text-align: center; padding: 80px 16px; color: var(--muted); }
.shorts-empty svg { width: 96px; height: 96px; fill: currentColor; opacity: .4; }
.shorts-empty p { font-size: 16px; }

.shorts-toast {
    position: fixed; left: 24px; bottom: 24px; z-index: 3000; background: #0f0f0f; color: #fff; border-radius: 8px;
    padding: 14px 16px; font-size: 14px; transform: translateY(160%); transition: transform .25s ease;
}
.shorts-toast.show { transform: none; }

/* ============================================================== phones */

@media (max-width: 791px) {
    .shorts-nav { display: none; }
    .short { padding: 0; }
    .short-stage { width: 100%; position: relative; }
    .short-frame { width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
    .short-actions {
        position: absolute; right: 8px; bottom: 90px; z-index: 2; gap: 14px;
    }
    .short-act { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
    .short-act:hover { color: #fff; }
    .short-act .ico { background: rgba(0, 0, 0, .3); }
    .short-act.on .ico { background: #fff; color: #0f0f0f; }
    .short-info { padding-right: 72px; }
    body.page-feed .page { padding-bottom: 0; }
    .shorts-feed, .short { height: calc(100vh - var(--topbar, 56px) - 48px); }
}
/* 1.1.0: another site's Short. YouTube's is driven from our tap and sound button, three times as tall
   as the frame so its own title and logo fall outside; any other site's player is used as it is */
.short-yt { overflow: hidden; }
.short-yt iframe { position: absolute; left: 0; top: -100%; width: 100%; height: 300%; border: 0; pointer-events: none; }
.short:has(.short-embed) .short-tap { pointer-events: none; }
.short:has(.short-embed) .short-paused, .short:has(.short-embed) .short-sound { display: none; }

/* 1.2.0: the Shorts tab of a channel - upright cards that wrap */
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 12px; margin: 4px 0 24px; }
.shorts-grid .shorts-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 14px; line-height: 20px; margin-top: 8px; }
.shorts-grid .shorts-views { display: block; font-size: 13px; color: var(--muted, #606060); margin-top: 2px; }
.shorts-empty { margin-top: 12px; }
@media (max-width: 520px) { .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; } }

/* 1.3.0: the AIO Player inside a Short, advertisement items, promoted Shorts */
.short-player { position: absolute; inset: 0; overflow: hidden; }
.short-player .aiop { position: absolute; inset: 0; width: 100%; height: 100%; }
.short.has-player .short-info, .short.has-player .short-progress, .short.has-player .short-sound, .short.has-player .short-paused { z-index: 14; }
.short.has-player .short-info { pointer-events: none; }
.short.has-player .short-paused { pointer-events: none; }
.short.has-player .short-sound { top: 12px; }
.short-chip {
    position: absolute; left: 12px; top: 14px; z-index: 15; padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; background: rgba(255, 204, 0, .95); color: #111; pointer-events: none;
}
.short-ad .short-video { background: #000; }
.short-ad img.short-video { object-fit: contain; }
.short-ad-html { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.short-ad-title { color: #fff; font-size: 15px; line-height: 21px; margin-bottom: 10px; }
.short-ad-go {
    display: inline-block; pointer-events: auto; padding: 9px 18px; border-radius: 18px; background: #fff; color: #0f0f0f; font-size: 14px; font-weight: 600; text-decoration: none;
}
.short-ad-go:hover { color: #0f0f0f; filter: brightness(.94); }
.short-ad .short-info { padding-bottom: 24px; }
/* while an advertisement plays inside a Short's player its own words step aside */
.short:has(.aiop.is-break) .short-info, .short:has(.aiop.is-break) .short-progress, .short:has(.aiop.is-break) .short-chip, .short:has(.aiop.is-break) .short-paused { opacity: 0; pointer-events: none; }

/* 1.4.0: the views under the title, and the three-dot sheet */
.short-views { display: block; margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.shorts-sheet { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-end; justify-content: center; }
.shorts-sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.shorts-sheet-box {
    position: relative; width: min(100%, 460px); max-height: 82vh; overflow: auto; border-radius: 16px 16px 0 0; background: var(--bg, #fff); color: var(--ink, #0f0f0f);
    padding: 8px 0 max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); animation: shorts-sheet-up .18s ease-out;
}
@keyframes shorts-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) { .shorts-sheet { align-items: center; } .shorts-sheet-box { border-radius: 14px; padding-bottom: 10px; } }
.shorts-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 6px; font-size: 16px; }
.shorts-sheet-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted, #666); cursor: pointer; padding: 0 2px; }
.shorts-sheet-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 20px; border: 0; background: none; color: inherit; font: 500 15px/1.3 inherit; font-family: inherit; text-align: left; cursor: pointer; }
.shorts-sheet-row:hover { background: var(--bg-soft, #f2f2f2); }
.shorts-sheet-row .ico { width: 24px; height: 24px; display: grid; place-items: center; flex: none; font-size: 16px; }
.shorts-sheet-row .ico svg { width: 24px; height: 24px; fill: currentColor; }
.shorts-sheet-row .t { flex: 1; }
.shorts-sheet-row .v { color: var(--muted, #666); font-size: 14px; }
.shorts-sheet-row.is-off { opacity: .5; }
.shorts-sheet-body { padding: 6px 18px 12px; font-size: 14px; line-height: 1.5; }
.shorts-sheet-meta { color: var(--muted, #666); font-size: 13px; margin-bottom: 8px; }
.shorts-sheet-text { white-space: pre-wrap; word-break: break-word; }
.shorts-sheet-link { display: inline-block; margin-top: 10px; font-weight: 500; color: var(--brand, #065fd4); text-decoration: none; }
.shorts-sheet-check { display: flex; align-items: center; gap: 12px; padding: 10px 2px; font-size: 15px; cursor: pointer; }
.shorts-sheet-check input { width: 18px; height: 18px; }
.shorts-sheet-new { display: flex; gap: 8px; margin-top: 10px; }
.shorts-sheet-new input { flex: 1; padding: 9px 12px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--bg, #fff); color: inherit; font: inherit; }
.shorts-sheet-new button { padding: 9px 16px; border: 0; border-radius: 18px; background: var(--ink, #0f0f0f); color: var(--bg, #fff); font: 500 14px/1 inherit; font-family: inherit; cursor: pointer; }
body.shorts-sheet-open { overflow: hidden; }