/* SavvyGreat Snapic mobile overlay refinement — 20260810-mobile-overlay-10.
   Keeps feed-9 paging/swipe intact; only adjusts mobile viewer presentation. */

@media (max-width: 760px) {
    /* Full-width bottom shade. Content is right-aligned, but the gesture layer
       remains the dialog itself so this visual panel does not create a dead zone. */
    html.sgsnapic-reels-enabled .sgsnapic-photo-info {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 31dvh !important;
        padding: 28px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        background: linear-gradient(
            to bottom,
            rgba(92, 92, 92, 0) 0%,
            rgba(70, 70, 70, .18) 24%,
            rgba(46, 46, 46, .54) 56%,
            rgba(30, 30, 30, .82) 100%
        ) !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-reactions {
        justify-content: flex-end !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 0 7px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-reaction {
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        gap: 4px !important;
        padding: 0 9px !important;
        border-radius: 17px !important;
        background: rgba(20, 20, 20, .48) !important;
        border-color: rgba(255, 255, 255, .38) !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-reaction svg {
        width: 18px !important;
        height: 18px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-reaction span {
        display: inline !important;
        color: rgba(255, 255, 255, .94) !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-reaction b {
        font-size: 10px !important;
        color: rgba(255, 255, 255, .92) !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-details {
        width: min(88vw, 390px) !important;
        max-width: min(88vw, 390px) !important;
        margin-left: auto !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-details h2 {
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1.18 !important;
        font-weight: 650 !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-details time {
        display: block !important;
        margin-top: 3px !important;
        color: rgba(242, 242, 242, .88) !important;
        font-size: 11px !important;
        line-height: 1.18 !important;
        text-align: right !important;
    }

    /* Bring the description back, but cap it at two lines so the image remains
       dominant and the full-modal swipe can still start from the bottom area. */
    html.sgsnapic-reels-enabled .sgsnapic-photo-details p {
        display: -webkit-box !important;
        margin: 4px 0 0 auto !important;
        max-width: min(88vw, 390px) !important;
        color: rgba(242, 242, 242, .86) !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        text-align: right !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .78) !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-message {
        margin: 3px 0 0 auto !important;
        max-width: min(88vw, 390px) !important;
        color: rgba(242, 242, 242, .82) !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comments {
        width: min(88vw, 390px) !important;
        max-width: min(88vw, 390px) !important;
        margin: 7px 0 0 auto !important;
        padding: 5px 0 0 !important;
        border-top-color: rgba(255, 255, 255, .24) !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comments-head {
        min-height: 20px !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comments-title {
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comments-title svg {
        width: 15px !important;
        height: 15px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comments-head h3 {
        color: rgba(255, 255, 255, .95) !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comments-head > span {
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 5px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-list {
        max-height: 44px !important;
        margin-top: 3px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment {
        grid-template-columns: minmax(0, 1fr) 22px !important;
        gap: 6px !important;
        direction: rtl !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-avatar {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment > div {
        direction: ltr !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-meta {
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-meta strong,
    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-meta time,
    html.sgsnapic-reels-enabled .sgsnapic-photo-comment p,
    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-empty {
        color: rgba(245, 245, 245, .84) !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-form {
        justify-content: flex-end !important;
        gap: 5px !important;
        margin-top: 5px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-form textarea {
        min-height: 32px !important;
        height: 32px !important;
        padding: 6px 8px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
        text-align: right !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-comment-form button {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 10px !important;
        border-radius: 11px !important;
        font-size: 10px !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-signin {
        display: inline-flex !important;
        float: right !important;
        margin: 5px 0 0 auto !important;
        padding: 5px 8px !important;
        border-radius: 11px !important;
        background: rgba(20, 20, 20, .46) !important;
    }

    html.sgsnapic-reels-enabled .sgsnapic-photo-signin a {
        color: rgba(255, 255, 255, .94) !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 550 !important;
    }
}