/* Reels player extras: the comments sheet, the double-tap heart, the verified mark and
   caption tags. The player itself keeps its base layout in media.css.

   v2 exists because the site-wide long-press sheet in post-sheet-v1.css uses the same
   .mtv-sheet class names and was loaded on every page first. Its hidden state is built
   from opacity:0 plus a translate that only clears when the sheet adds an .is-open
   class — a class the reels player never sets, because it hides with the hidden
   attribute instead. Measured at 390x844 before this file: the player's own sheet ended
   up at opacity 0 with its panel rect starting at y=844, and a tap in the middle of it
   hit the dock underneath. hCDN caches a stylesheet filename for a week regardless of
   the query string, so the fix ships as a new file rather than an edit to v1.

   v3 adds the phone dock clearance at the bottom of this file. It was found on the live site
   after v2 shipped: the sheet painted correctly but its last row sat under the tab bar. */

.mtv-reel__verified {
    display: inline-flex;
    vertical-align: -2px;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    color: #3897f0;
}
.mtv-reel__verified svg {
    width: 100%;
    height: 100%;
}

.mtv-reel__tag {
    color: #8fd3ff;
    text-decoration: none;
}
.mtv-reel__tag:active {
    text-decoration: underline;
}

/* Double-tap like: one heart flashes where the finger landed. */
.mtv-reel__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    color: #fff;
    pointer-events: none;
    z-index: 4;
    animation: mtv-reel-burst .68s cubic-bezier(.2, .8, .3, 1) forwards;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35));
}
.mtv-reel__burst svg {
    width: 100%;
    height: 100%;
}
@keyframes mtv-reel-burst {
    0% { opacity: 0; transform: scale(.4) rotate(-12deg); }
    22% { opacity: 1; transform: scale(1.12) rotate(4deg); }
    62% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.28); }
}
@media (prefers-reduced-motion: reduce) {
    .mtv-reel__burst { animation-duration: .01s; }
}

/* ------------------------------------------------------------- comments sheet */

.mtv-sheet {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.mtv-sheet[hidden] {
    display: none;
}

.mtv-sheet__veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
}

.mtv-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 72%;
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: #14171c;
    color: #f4f6f8;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, .45);
    transition: transform .18s ease;
    touch-action: pan-y;
}
.mtv-sheet__panel.is-dragging {
    transition: none;
}

.mtv-sheet__grip {
    display: block;
    width: 42px;
    height: 4px;
    margin: 2px auto 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    flex: 0 0 auto;
}

.mtv-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    touch-action: none;
    flex: 0 0 auto;
}
.mtv-sheet__head strong {
    font-size: 15px;
    font-weight: 700;
}
.mtv-sheet__close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mtv-sheet__list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px;
    min-height: 120px;
    overscroll-behavior: contain;
}

.mtv-sheet__empty {
    margin: 26px 0;
    text-align: center;
    color: rgba(244, 246, 248, .62);
    font-size: 14px;
}

.mtv-sheet__row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}
.mtv-sheet__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.mtv-sheet__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mtv-sheet__body {
    min-width: 0;
    flex: 1 1 auto;
}
.mtv-sheet__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 2px;
    font-size: 13px;
    color: rgba(244, 246, 248, .66);
}
.mtv-sheet__meta a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.mtv-sheet__meta time {
    margin-left: 2px;
}
.mtv-sheet__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.mtv-sheet__at {
    color: #8fd3ff;
}
.mtv-sheet__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 0;
}
.mtv-sheet__reply,
.mtv-sheet__like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: rgba(244, 246, 248, .66);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.mtv-sheet__like.is-on {
    color: #ff4d6d;
}
.mtv-sheet__heart {
    display: inline-flex;
    width: 15px;
    height: 15px;
}
.mtv-sheet__heart svg {
    width: 100%;
    height: 100%;
}

.mtv-sheet__more {
    padding: 0 16px 6px;
    flex: 0 0 auto;
}
.mtv-sheet__more:empty {
    display: none;
}
.mtv-sheet__more button {
    border: 0;
    background: none;
    color: #8fd3ff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
}

.mtv-sheet__foot {
    flex: 0 0 auto;
    padding: 8px 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.mtv-sheet__login {
    display: block;
    padding: 10px 0;
    text-align: center;
    color: #8fd3ff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.mtv-sheet__replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 12px;
    color: rgba(244, 246, 248, .66);
}
.mtv-sheet__replying button {
    border: 0;
    background: none;
    color: #8fd3ff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.mtv-sheet__form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 2px;
}
.mtv-sheet__form textarea {
    flex: 1 1 auto;
    min-height: 38px;
    max-height: 96px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 19px;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1.35;
    resize: none;
}
.mtv-sheet__form textarea::placeholder {
    color: rgba(244, 246, 248, .46);
}
.mtv-sheet__send {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: #e0218a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.mtv-sheet__send[data-busy="1"] {
    opacity: .6;
}

@media (min-width: 720px) {
    .mtv-sheet {
        align-items: center;
    }
    .mtv-sheet__panel {
        max-width: 460px;
        max-height: 76%;
        border-radius: 18px;
        margin-bottom: 6vh;
    }
}

/* -------------------------------------------------- undo the long-press sheet leak */

/* Scoped to the player so the feed card's own sheet keeps the behaviour it was written
   for. Inside .mtv-reels the veil is a real element, so the chassis itself must not add
   a second dimming layer or hold itself transparent. */
.mtv-reels .mtv-sheet {
    opacity: 1;
    background: none;
}

/* Off-screen until the wrapper loses [hidden]; the transition already on the panel turns
   that into the slide-up the drag gesture expects. Inline styles from the drag handler
   still win over both rules, which is what lets a pull follow the finger. */
.mtv-reels .mtv-sheet__panel {
    transform: translate3d(0, 100%, 0);
}

.mtv-reels .mtv-sheet:not([hidden]) .mtv-sheet__panel {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mtv-reels .mtv-sheet__panel {
        transition: none;
    }
}

/* -------------------------------------------------- keep the sheet above the phone dock */
/* reels-dock-v1.css reserves 67px + the bottom inset by padding the player, and the dock is
   painted at z-index 1450 over that strip on purpose so the tab bar stays usable. An absolutely
   positioned sheet is sized to the padding box, so `inset:0` runs it straight through that
   reservation and the last row — Cancel, and the bottom of the comments list — landed under the
   dock where a thumb could not reach it. Lifting the sheet by the same amount the player already
   gives up puts its bottom edge on the dock's top edge; the panel then needs only its own 10px,
   because the inset is already counted in the offset. */
@media (max-width: 820px) {
    .mtv-reels .mtv-sheet {
        bottom: calc(67px + env(safe-area-inset-bottom, 0px));
    }

    .mtv-reels .mtv-sheet__panel {
        padding-bottom: 10px;
    }
}