.explore-comment-overlay {
    position: fixed;
    inset: 0;
    /* Must sit ABOVE the fixed top nav/action bar (z-index 1051) so its badges/coins
       don't bleed on top of the comment panel header. */
    z-index: 2000;
    pointer-events: none;
    display: flex;
}
.explore-comment-overlay.open {
    pointer-events: auto;
}

.explore-comment-overlay.open::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 85%, rgba(184, 1, 37, 0.18), transparent 32%),
        linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, 0.65));
    z-index: 0;
}

/* Backdrop: hidden on mobile, visible on desktop */
.explore-comment-backdrop {
    display: none;
}

/* ── Mobile "comments over the post" (Instagram) ─────────────────────────────
   `sheet-over-page` is set for every mobile open (see LiveImageCommentModal.
   open()). There is no image viewer in this mode: the post you tapped stays on
   screen underneath, the thread slides up over it, and the scrim is light
   enough that you can still see what you're commenting on. Tapping the scrim
   dismisses — which is why the backdrop element has to exist here at all
   (it carries the close handler; the overlay's ::before wash cannot). */
.explore-comment-overlay.sheet-over-page.open::before {
    /* Softer than the full-screen viewer's wash — the picture must read through it. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.55) 100%);
}

.explore-comment-overlay.sheet-over-page .explore-comment-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: transparent;
}

/* A phone sheet that only reaches 58vh shows two comments; Instagram's opens
   at roughly three-quarters of the screen. The drag handle still expands it. */
.explore-comment-overlay.sheet-over-page .explore-comment-sheet {
    max-height: min(74vh, 720px);
}
.explore-comment-overlay.sheet-over-page .explore-comment-sheet.expanded {
    max-height: min(92vh, 900px);
}

/* Image viewer: hidden on mobile, visible on desktop */
.explore-comment-image-viewer {
    display: none;
}

.explore-comment-nav-btn {
    display: none;
}

.explore-comment-overlay.viewer-only .explore-comment-sheet {
    display: none;
}

@media (max-width: 767.98px) {
    .explore-comment-overlay.image-viewer-active .explore-comment-image-viewer {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 2;
        align-items: center;
        justify-content: center;
        padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
        background: var(--surface-page);
    }

    .explore-comment-overlay.image-viewer-active .explore-comment-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
    }
}

/* Desktop close button (top-left of image) */
.explore-comment-close-btn {
    display: none;
}

.explore-comment-overlay.image-viewer-active .explore-comment-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--veil);
    color: var(--ink);
}

/* A video post plays in the viewer; it shares the image's box so both layouts
   (mobile full-screen, desktop left column) size it the same way. */
.explore-comment-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Letterbox bars take the page's own surface, like the IG post's video bed —
       a hardcoded black would be a hole in any re-skin. */
    background: var(--surface-page);
}

.explore-comment-video[hidden],
.explore-comment-image[hidden] {
    display: none;
}

/* ── Owner ⋮ menu (top-right of the preview) ─────────────────────────────────
   Mirrors the close button on the opposite corner. Only rendered when the
   surface passed a `postMenu`, so a visitor's DOM has no owner tooling in it. */
.explore-comment-post-menu {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 5;
}

.explore-comment-post-menu[hidden] {
    display: none;
}

.explore-comment-post-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--veil);
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.explore-comment-post-menu-btn:hover {
    background: var(--veil-strong);
}

.explore-comment-post-menu-list {
    position: absolute;
    top: 46px;
    right: 0;
    min-width: 208px;
    padding: 6px;
    border-radius: 14px;
    background: var(--surface-overlay);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.explore-comment-post-menu-list[hidden] {
    display: none;
}

.explore-comment-post-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.explore-comment-post-menu-item:hover {
    background: var(--glass-strong, rgba(0, 0, 0, 0.06));
}

.explore-comment-post-menu-item i {
    font-size: 16px;
    opacity: 0.85;
}

.explore-comment-post-menu-item.is-danger {
    color: #b00020;
}

/* ── The post's own words, above the thread ───────────────────────────────── */
.explore-comment-post-caption {
    padding: 10px 14px 0;
    color: var(--ink);
}

.explore-comment-post-caption[hidden] {
    display: none;
}

.explore-comment-post-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.explore-comment-post-text {
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    max-height: 96px;
    overflow-y: auto;
}

.explore-comment-viewer-actions {
    display: none;
}

.explore-comment-overlay.viewer-only .explore-comment-viewer-actions {
    display: flex;
    position: absolute;
    right: 14px;
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 76px));
    z-index: 4;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.explore-comment-viewer-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.explore-comment-viewer-action-btn i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--veil);
    font-size: 24px;
}

.explore-comment-latest-feed {
    display: none;
    position: absolute;
    left: 14px;
    right: 78px;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 4;
    pointer-events: none;
}

.explore-comment-overlay.viewer-only .explore-comment-latest-feed {
    display: block;
}

.explore-comment-latest-feed[hidden] {
    display: none;
}

.explore-comment-latest-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--veil);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    animation: liveCommentFadeIn 0.28s ease both;
}

.explore-comment-latest-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.explore-comment-latest-item span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    line-height: 1.25;
}

/* --- Mobile: Bottom sheet (default, <768px) --- */
.explore-comment-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1051;
    background: var(--surface-overlay);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 22px 22px 0 0;
    max-height: min(58vh, 520px);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    pointer-events: none;
}
.explore-comment-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
}
.explore-comment-sheet.expanded {
    max-height: min(88vh, 760px);
}

.explore-comment-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 9px 0 3px;
    cursor: ns-resize;
    flex-shrink: 0;
    touch-action: none;
}
.explore-comment-sheet-handle-bar {
    width: 44px;
    height: 4px;
    background: var(--scrim-soft);
    border-radius: 999px;
}

.explore-comment-sheet-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.explore-comment-sheet-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.explore-comment-sheet-author-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.explore-comment-sheet-title {
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.explore-comment-sheet-author-name {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explore-comment-sheet-date {
    color: var(--ink-muted);
    font-size: 10px;
}

.explore-comment-sheet-close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    border: none;
    color: var(--ink-muted);
    border-radius: 50%;
    font-size: 14px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.explore-comment-sheet-close:hover {
    color: var(--ink);
}

.explore-live-comment-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--glass-strong);
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.explore-live-comment-session.active {
    background: linear-gradient(135deg, rgba(147, 147, 147, 0.14), rgba(110, 110, 110, 0.16));
}

.explore-live-comment-copy {
    min-width: 0;
}

.explore-live-comment-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.explore-live-comment-copy small {
    display: block;
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 10px;
}

.explore-live-comment-toggle {
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: var(--brand-fill);
    color: var(--ink-inverse);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.explore-live-comment-toggle:hover {
    transform: translateY(-1px);
}

.explore-live-comment-toggle.active {
    background: var(--fill-mid);
    border-color: var(--line-strong);
    color: var(--ink);
}

.explore-live-comment-generating {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink-soft);
    font-size: 12px;
    flex-shrink: 0;
    animation: liveCommentFadeIn 0.28s ease both;
}

.explore-live-comment-generating[hidden] {
    display: none;
}

.explore-live-comment-generating img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16);
}

.explore-comment-sheet-comments {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    min-height: 80px;
    overscroll-behavior: contain;
}
.explore-comment-sheet-comments::-webkit-scrollbar {
    width: 3px;
}
.explore-comment-sheet-comments::-webkit-scrollbar-track {
    background: transparent;
}
.explore-comment-sheet-comments::-webkit-scrollbar-thumb {
    background: var(--glass-strong);
    border-radius: 2px;
}

.explore-comment-item {
    display: flex;
    gap: 9px;
    margin-bottom: 10px;
    animation: liveCommentFadeIn 0.28s ease both;
}

.explore-comment-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.explore-comment-body {
    flex: 1;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 14px;
    background: var(--glass-strong);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.explore-comment-author {
    font-weight: 600;
    color: var(--ink);
    font-size: 11px;
    margin-right: 5px;
}

button.explore-comment-author {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.explore-comment-author.mentionable {
    color: var(--ink);
}

.explore-comment-text {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.32;
    word-break: break-word;
}

.explore-comment-time {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--ink-disabled);
    font-size: 10px;
    margin-top: 2px;
}

.explore-comment-reply-reference {
    margin-bottom: 5px;
    padding-left: 8px;
    border-left: 2px solid rgba(0, 0, 0, 0.22);
    color: var(--ink-muted);
    font-size: 11px;
}

.explore-comment-reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 2px 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: var(--glass-strong);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.explore-comment-reply-btn:hover,
.explore-comment-reply-btn:focus-visible {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    color: var(--ink);
}

.explore-comment-reply-btn:active {
    transform: translateY(1px);
}

.explore-comment-item.live-generated .explore-comment-body,
.gallery-preview-comment-item.live-generated .gallery-preview-comment-body,
.post-preview-comment-item.live-generated .post-preview-comment-body {
    background: linear-gradient(135deg, rgba(147, 147, 147, 0.14), rgba(110, 110, 110, 0.16));
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.explore-comment-item.live-comment-new .explore-comment-body,
.gallery-preview-comment-item.live-comment-new .gallery-preview-comment-body,
.post-preview-comment-item.live-comment-new .post-preview-comment-body {
    animation: liveCommentBubbleIn 0.38s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}


.explore-comment-typing {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.explore-comment-typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--scrim-strong);
    animation: liveCommentTypingDot 1s ease-in-out infinite;
}

.explore-comment-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.explore-comment-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes liveCommentFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes liveCommentBubbleIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    70% {
        opacity: 1;
        transform: translateY(-1px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes liveCommentTypingDot {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.comment-reaction-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.comment-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--glass-strong);
    color: var(--ink);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.comment-reaction-pill:hover {
    transform: translateY(-1px);
    background: var(--scrim-soft);
}

.comment-reaction-pill.active {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
}

.comment-reaction-pill strong {
    font-size: 11px;
}

.explore-comment-sheet-loading,
.explore-comment-sheet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    color: var(--ink-muted);
    font-size: 13px;
}

.explore-comment-sheet-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.explore-comment-sheet-action-buttons {
    display: flex;
    gap: 9px;
    margin-bottom: 0;
}

.explore-comment-sheet-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    border: none;
    color: var(--ink);
    border-radius: 50%;
    font-size: 17px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.explore-comment-sheet-action-btn:hover {
    transform: scale(1.1);
}
.explore-comment-sheet-action-btn.liked i {
    color: #c30021;
}
.explore-comment-sheet-action-btn.liked i::before {
    content: "\f415";
}

.explore-comment-sheet-likes-count {
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-soft);
}

.explore-comment-sheet-add-comment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.explore-comment-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.explore-comment-reply-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink-soft);
    font-size: 12px;
    flex-shrink: 0;
}

.explore-comment-reply-context[hidden] {
    display: none;
}

.explore-comment-reply-context span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-comment-reply-context button {
    border: none;
    background: var(--glass-strong);
    color: var(--ink);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.explore-comment-sheet-input {
    width: 100%;
    background: var(--glass-strong);
    border: none;
    color: var(--ink);
    font-size: 13px;
    outline: none;
    padding: 9px 12px;
    border-radius: 999px;
}
.explore-comment-sheet-input::placeholder {
    color: var(--ink-disabled);
}

.explore-mention-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    padding: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    background: var(--veil-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    z-index: 5;
    max-height: 230px;
    overflow-y: auto;
}

.explore-mention-suggestions[hidden] {
    display: none;
}

.explore-mention-suggestion {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.explore-mention-suggestion:hover,
.explore-mention-suggestion.active {
    background: var(--glass-strong);
}

.explore-mention-suggestion img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.explore-comment-sheet-submit {
    background: var(--brand-fill);
    border: none;
    color: var(--ink-inverse);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    padding: 9px 13px;
    border-radius: 999px;
    flex-shrink: 0;
}
.explore-comment-sheet-submit:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ====================================================
   Desktop: Twitter/X-style overlay (>=768px)
   Image on left, comment panel on right
   ==================================================== */
@media (min-width: 768px) {
    .explore-comment-overlay {
        display: none;
        align-items: stretch;
    }
    .explore-comment-overlay.open {
        display: flex;
    }

    /* Dark backdrop */
    .explore-comment-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--veil-strong);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1;
    }

    /* Image viewer: left side */
    .explore-comment-image-viewer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 28px;
    }

    .explore-comment-image {
        max-width: 100%;
        max-height: calc(100vh - 56px);
        object-fit: contain;
        border-radius: 18px;
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.16);
        user-select: none;
        -webkit-user-drag: none;
    }

    /* Nav arrows */
    .explore-comment-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: var(--veil);
        border: none;
        color: var(--ink);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
        transition: background 0.2s;
    }
    .explore-comment-nav-btn:hover {
        background: var(--veil-strong);
    }
    .explore-comment-nav-prev {
        left: 16px;
    }
    .explore-comment-nav-next {
        right: 16px;
    }

    /* Close button (top-left corner) */
    .explore-comment-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 4;
        background: var(--veil);
        border: none;
        color: var(--ink);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .explore-comment-close-btn:hover {
        background: var(--veil-strong);
    }

    /* Comment panel: right side, fixed width column */
    .explore-comment-sheet {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        z-index: 2;
        width: 360px;
        min-width: 360px;
        max-height: none;
        height: calc(100vh - 32px);
        margin: 16px 16px 16px 0;
        border-radius: 22px;
        border-top: none;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: var(--surface-overlay);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
        transform: none;
        pointer-events: auto;
        transition: none;
    }
    .explore-comment-sheet.open {
        transform: none;
    }

    /* Hide mobile handle on desktop */
    .explore-comment-sheet-handle {
        display: none;
    }

    /* Hide mobile close on desktop (use the overlay X button instead) */
    .explore-comment-sheet-close {
        display: none;
    }

    /* Expand comments to fill available space */
    .explore-comment-sheet-comments {
        min-height: 200px;
        padding: 10px 12px;
    }

    /* Slightly larger elements on desktop */
    .explore-comment-sheet-avatar {
        width: 32px;
        height: 32px;
    }
    .explore-comment-sheet-title {
        font-size: 15px;
    }
    .explore-comment-sheet-author-name {
        font-size: 11px;
    }
    .explore-comment-sheet-date {
        font-size: 12px;
    }
    .explore-comment-item {
        margin-bottom: 10px;
    }
    .explore-comment-avatar {
        width: 28px;
        height: 28px;
    }
    .explore-comment-author {
        font-size: 12px;
    }
    .explore-comment-text {
        font-size: 13px;
    }
    .explore-comment-time {
        font-size: 11px;
    }
    .explore-comment-sheet-action-btn {
        font-size: 17px;
    }
    .explore-comment-sheet-likes-count {
        font-size: 13px;
    }
    .explore-comment-sheet-input {
        font-size: 14px;
    }
    .explore-comment-sheet-submit {
        font-size: 14px;
    }
    .explore-comment-sheet-header {
        padding: 10px 14px;
    }
    .explore-comment-sheet-actions {
        padding: 8px 14px;
    }
    .explore-comment-sheet-add-comment {
        padding: 10px 14px 12px;
    }
}

/* Hide the sticky bottom nav while gallery full-screen is active (mobile & desktop) */
.gallery-fullscreen-active .sticky-bottom-nav,
.gallery-fullscreen-active #stickyBottomNav {
    display: none !important;
}