/* Explore Gallery - Mobile-First Instagram-Style Design */

/* ===== CSS Variables ===== */
:root {
    --explore-bg: var(--surface-page);
    --explore-header-bg: var(--glass-strong);
    --explore-card-bg: var(--surface-raised);
    --explore-text: var(--ink);
    --explore-text-secondary: var(--ink-soft);
    --explore-accent: var(--brand-fill);
    --explore-accent-light: var(--brand-fill-hover);
    --explore-border: var(--line);
    --explore-overlay: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 50%);
    --explore-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --explore-safe-area-top: env(safe-area-inset-top, 0px);
}

/* ===== Base Styles ===== */
.explore-body {
    background: var(--explore-bg);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    /* Prevent pull-to-refresh on mobile browsers */
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

.explore-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--explore-bg);
    display: flex;
    flex-direction: column;
    z-index: 100;
    padding-top: var(--explore-safe-area-top);
    /* Prevent pull-to-refresh and overscroll bouncing */
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
}

/* ===== Floating Navigation Buttons ===== */
.explore-floating-nav {
    position: fixed;
    top: calc(10px + var(--explore-safe-area-top, 0px));
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    pointer-events: none;
}

.explore-floating-nav > *,
.explore-floating-nav a,
.explore-floating-nav button {
    pointer-events: auto;
}

.explore-fab-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.explore-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--veil-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--ink);
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    font-size: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.explore-fab:hover {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    color: var(--ink);
}

.explore-fab:active {
    transform: scale(0.92);
}

.explore-fab i {
    font-size: 20px;
    line-height: 1;
}

.explore-fab-search i {
    font-size: 18px;
}

.explore-fab-avatar {
    overflow: hidden;
}

.explore-fab-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.explore-brand-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-shrink: 0;
}

.explore-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 6px 12px 6px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.68), rgba(147, 147, 147, 0.48));
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(0, 0, 0, 0.06);
    color: var(--ink);
    text-decoration: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
}

.explore-brand-link:hover {
    color: var(--ink);
}

.explore-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.explore-brand-copy strong {
    font-size: 13px;
    letter-spacing: -0.01em;
}

.explore-brand-copy small {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.explore-discovery-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    padding: 2px 0;
    mask-image: linear-gradient(90deg, transparent 0, #ffffff 18px, #ffffff calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #ffffff 18px, #ffffff calc(100% - 18px), transparent 100%);
}

.explore-discovery-tags::-webkit-scrollbar {
    display: none;
}

.explore-discovery-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--veil-strong);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.explore-discovery-tag:hover {
    color: var(--ink);
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

/* ===== Search Modal ===== */
.explore-search-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--veil-strong);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.explore-search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.explore-search-modal {
    background: var(--surface-sunken);
    border-radius: 20px;
    width: 92%;
    max-width: 460px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.explore-search-modal-overlay.active .explore-search-modal {
    transform: translateY(0) scale(1);
}

.explore-search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.explore-search-modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.explore-search-modal-close {
    background: none;
    border: none;
    color: var(--ink-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.explore-search-modal-close:hover {
    color: var(--ink);
}

.explore-search-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.explore-search-modal-input-wrap {
    display: flex;
    align-items: center;
    background: var(--glass-strong);
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    margin-bottom: 18px;
    transition: box-shadow 0.2s;
}

.explore-search-modal-input-wrap:focus-within {
    box-shadow: 0 0 0 2px var(--explore-accent);
}

.explore-search-modal-input-wrap i {
    color: var(--ink-muted);
    font-size: 15px;
    flex-shrink: 0;
}

.explore-search-modal-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-size: 15px;
    padding: 0 12px;
    min-width: 0;
}

.explore-search-modal-input-wrap input::placeholder {
    color: var(--ink-disabled);
}

.explore-search-modal-tags {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.explore-search-modal-loading {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.search-tag-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-tag-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
}

.search-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag-chip {
    background: var(--glass-strong);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--ink-soft);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.search-tag-chip:hover {
    background: var(--scrim-soft);
    color: var(--ink);
}

.search-tag-chip.active {
    background: var(--explore-accent);
    border-color: var(--explore-accent);
    color: var(--ink);
}

.explore-search-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.explore-search-modal-clear {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 10px 18px;
    color: var(--ink-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.explore-search-modal-clear:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.explore-search-modal-submit {
    background: var(--explore-accent);
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.explore-search-modal-submit:hover {
    background: var(--explore-accent-light);
}

.explore-search-modal-submit:active {
    transform: scale(0.97);
}

/* Floating Back Button */
.explore-back-btn {
    position: absolute;
    top: calc(12px + var(--explore-safe-area-top, 0px));
    left: 16px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--veil);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: 22px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.explore-back-btn:hover {
    background: var(--veil-strong);
}

/* Logo Link */
.explore-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #828282 0%, #6e6e6e 100%);
    border-radius: 12px;
}

.explore-logo-icon {
    font-size: 24px;
    color: var(--ink);
    transition: transform 0.2s ease;
}

.explore-logo-link:hover .explore-logo-icon {
    transform: scale(1.1);
}

.explore-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
}

/* Spacer to push buttons right */
.explore-nav-spacer {
    flex: 1;
}

/* Right-aligned navigation actions */
.explore-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Generic action button style */
.explore-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--glass-strong);
    color: var(--explore-text);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.explore-action-btn i {
    font-size: 18px;
}

.explore-action-btn:hover {
    background: var(--scrim-soft);
}

.explore-action-btn:active {
    transform: scale(0.95);
}

.explore-action-btn.active {
    background: var(--explore-accent);
}

/* Search Toggle Button (keeping for backward compatibility) */
.explore-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--glass-strong);
    color: var(--explore-text);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.explore-search-toggle i {
    font-size: 18px;
}

.explore-search-toggle:hover {
    background: var(--scrim-soft);
}

.explore-search-toggle:active {
    transform: scale(0.95);
}

/* Auth/Login Button */
.explore-auth-btn {
    flex-shrink: 0;
}

.auth-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-strong);
    color: var(--explore-text);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.auth-icon-btn i {
    font-size: 22px;
}

.auth-icon-btn:hover {
    background: var(--scrim-soft);
    color: var(--explore-text);
}

.auth-icon-btn:active {
    transform: scale(0.95);
}

.auth-profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* Expanded Search Section (below navbar) */
.explore-search-expanded {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 0;
}

.explore-search-expanded.expanded {
    max-height: 70px;
    padding: 12px 0 0;
}

.explore-search-expanded .explore-search-form {
    width: 100%;
}

/* Back/Home Button (keeping for backward compatibility) */
.explore-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--glass-strong);
    color: var(--explore-text);
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.explore-back-btn i {
    font-size: 18px;
}

.explore-back-btn:hover {
    background: var(--scrim-soft);
    color: var(--explore-text);
}

.explore-back-btn:active {
    transform: scale(0.95);
}

.explore-search-form {
    flex: 1;
    min-width: 0;
    transition: all 0.3s ease;
}

/* Collapsible search form (keeping for backward compatibility) */
.explore-search-form.collapsed {
    flex: 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.explore-search-form:not(.collapsed) {
    flex: 1;
    opacity: 1;
    pointer-events: auto;
}

.search-input-group {
    display: flex;
    align-items: center;
    background: var(--glass-strong);
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    transition: all 0.2s ease;
}

.search-input-group:focus-within {
    background: var(--scrim-soft);
    box-shadow: 0 0 0 2px var(--explore-accent);
}

.search-input-group i {
    color: var(--explore-text-secondary);
    font-size: 16px;
    flex-shrink: 0;
}

.search-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--explore-text);
    font-size: 15px;
    padding: 0 12px;
    min-width: 0;
}

.search-input-group input::placeholder {
    color: var(--explore-text-secondary);
}

.search-clear-btn {
    background: none;
    border: none;
    color: var(--explore-text-secondary);
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.search-clear-btn:hover {
    color: var(--explore-text);
}

/* ===== NSFW Toggle Button ===== */
.nsfw-filter-toggle {
    flex-shrink: 0;
}

.nsfw-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: 20px;
    padding: 8px 14px;
    color: #22c55e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nsfw-btn i {
    font-size: 14px;
}

.nsfw-btn[data-nsfw="true"] {
    background: rgba(175, 15, 15, 0.2);
    border-color: rgba(175, 15, 15, 0.5);
    color: #af0f0f;
}



.nsfw-btn:hover {
    transform: scale(1.02);
}

.nsfw-btn:active {
    transform: scale(0.98);
}

/* ===== Gallery Wrapper ===== */
.explore-gallery-wrapper {
    flex: 1;
    position: relative;
    margin-top: 0;
    height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    overflow: hidden;
}

/* ===== Vertical Swiper (Characters) ===== */
.explore-vertical-swiper {
    width: 100%;
    height: 100%;
    /* Prevent overscroll at swiper boundaries */
    overscroll-behavior: contain;
}

/* Smooth deceleration when the vertical swiper settles a slide to center —
   an ease-out curve removes the abrupt "bump" at the end of the snap.
   (Swiper sets transition-duration inline; the timing function comes from here.) */
.explore-vertical-swiper > .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ===== Character Slide ===== */
.character-slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== Horizontal Swiper (Images) ===== */
.character-images-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.character-images-swiper .swiper-wrapper {
    height: 100%;
}

.character-images-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--explore-bg);
}

/* ===== Image Card ===== */
.explore-image-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.explore-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* Alternative: Cover mode for more immersive experience */
.explore-image-card.cover-mode .explore-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image placeholder/loading state */
.explore-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--explore-card-bg);
}

.explore-image-placeholder .loading-spinner {
    width: 40px;
    height: 40px;
}

/* ===== Character Info Overlay ===== */
.character-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 16px 80px;
    background: var(--explore-overlay);
    z-index: 10;
    pointer-events: none;
}

.character-info-overlay > * {
    pointer-events: auto;
}

.character-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.character-avatar-link {
    display: block;
    flex-shrink: 0;
}

.character-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.character-avatar:hover {
    transform: scale(1.05);
    border-color: var(--explore-accent);
}

.character-details {
    flex: 1;
    min-width: 0;
}

.character-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--explore-text);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-name a {
    color: inherit;
    text-decoration: none;
}

.character-name a:hover {
    text-decoration: underline;
}

.image-counter {
    font-size: 13px;
    color: var(--explore-text-secondary);
    margin: 2px 0 0;
}

/* Action buttons in overlay */
.character-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--scrim-soft);
    backdrop-filter: blur(10px);
    border: none;
    color: var(--explore-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn i {
    font-size: 18px;
}

.action-btn:hover {
    background: var(--scrim-soft);
    transform: scale(1.1);
}

.action-btn.primary {
    background: linear-gradient(135deg, #828282 0%, #6e6e6e 100%);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #6f6f6f 0%, #5f5f5f 100%);
}

/* Image pagination dots */
.image-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.image-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--scrim-soft);
    transition: all 0.2s ease;
}

.image-dot.active {
    background: var(--explore-text);
    width: 18px;
    border-radius: 3px;
}

.more-indicator {
    font-size: 11px;
    color: var(--explore-text-secondary);
    margin-left: 4px;
}



/* ===== Loading State ===== */
.explore-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--explore-bg);
    z-index: 50;
}

.explore-loading p {
    color: var(--explore-text-secondary);
    margin-top: 16px;
    font-size: 14px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--explore-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Empty State ===== */
.explore-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--explore-bg);
    padding: 24px;
    text-align: center;
}

.explore-empty i {
    font-size: 64px;
    color: var(--explore-text-secondary);
    margin-bottom: 16px;
}

.explore-empty h3 {
    color: var(--explore-text);
    font-size: 20px;
    margin: 0 0 8px;
}

.explore-empty p {
    color: var(--explore-text-secondary);
    font-size: 14px;
    margin: 0;
}

/* ===== Swipe Hint =====
   A dark-purple glass pill, centred low on screen, with NO dimming backdrop.
   An arrow sweeps right→left across the pill and the text is revealed behind
   it (right→left). It floats above the feed and never blocks interaction. */
.swipe-hint {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%);
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;          /* purely a hint — never intercept swipes */
    max-width: calc(100vw - 32px);
}

.swipe-hint.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

.swipe-hint-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    /* semi-blurry, transparent, dark purple */
    background: linear-gradient(135deg, rgba(171, 171, 171, 0.34), rgba(133, 133, 133, 0.22));
    border: 1px solid rgba(88, 88, 88, 0.32);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16), inset 0 0 22px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Soft moving sheen so the pill feels alive */
.swipe-hint-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(37, 37, 37, 0.22) 50%, transparent 80%);
    transform: translateX(120%);
    animation: swipeHintSheen 2.6s ease-in-out infinite;
    pointer-events: none;
}

.swipe-hint-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    color: var(--ink-soft);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.16));
    animation: swipeHintArrow 2.6s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}

.swipe-hint-text {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
    /* revealed right→left in sync with the arrow sweep */
    clip-path: inset(0 0 0 100%);
    animation: swipeHintReveal 2.6s ease-in-out infinite;
}

/* Arrow starts at the right and sweeps left, fading in then settling. */
@keyframes swipeHintArrow {
    0%   { transform: translateX(18px); opacity: 0; }
    18%  { opacity: 1; }
    55%  { transform: translateX(-2px); opacity: 1; }
    80%  { transform: translateX(-2px); opacity: 1; }
    100% { transform: translateX(-2px); opacity: 0.9; }
}

/* Text wipes into view from the right edge leftward as the arrow passes. */
@keyframes swipeHintReveal {
    0%   { clip-path: inset(0 0 0 100%); opacity: 0.2; }
    18%  { clip-path: inset(0 0 0 100%); opacity: 0.4; }
    55%  { clip-path: inset(0 0 0 0);    opacity: 1; }
    100% { clip-path: inset(0 0 0 0);    opacity: 1; }
}

@keyframes swipeHintSheen {
    0%   { transform: translateX(120%); }
    55%  { transform: translateX(-120%); }
    100% { transform: translateX(-120%); }
}

@media (prefers-reduced-motion: reduce) {
    .swipe-hint-arrow,
    .swipe-hint-text,
    .swipe-hint-pill::after {
        animation: none;
    }
    .swipe-hint-text { clip-path: none; opacity: 1; }
    .swipe-hint-arrow { opacity: 1; transform: none; }
}

/* ===== NSFW Blur Overlay ===== */
.nsfw-blur-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: radial-gradient(ellipse at center, rgba(170, 170, 170, 0.45) 0%, rgba(243, 243, 243, 0.62) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
}

.nsfw-blur-content {
    text-align: center;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nsfw-blur-content i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 26px;
    margin: 0 auto 14px;
    color: var(--ink);
}

.nsfw-blur-content p {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}

.nsfw-blur-content small {
    font-size: 12px;
    color: var(--ink-soft);
    opacity: 1;
}

/* --- Tier-specific overlay styles --- */

/* Anonymous / Login CTA */
.nsfw-overlay-login .nsfw-blur-content i {
    background: linear-gradient(145deg, #5e5e5e, #7a7a7a);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}
.nsfw-overlay-login .nsfw-blur-content p {
    color: var(--ink);
}
.nsfw-overlay-login .nsfw-blur-content small {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6c6c6c, #7b7b7b);
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.02em;
}

/* Free user / Unlock */
.nsfw-overlay-unlock .nsfw-blur-content i {
    background: linear-gradient(145deg, #1d8660, #16a34a);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}
.nsfw-overlay-unlock .nsfw-blur-content p {
    color: var(--ink);
}
.nsfw-overlay-unlock .nsfw-blur-content small {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.25);
    color: #1eb579;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

/* Free user / Upgrade CTA */
.nsfw-overlay-upgrade .nsfw-blur-content i {
    background: linear-gradient(145deg, #5e5e5e, #7a7a7a);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}
.nsfw-overlay-upgrade .nsfw-blur-content p {
    color: var(--ink);
}
.nsfw-overlay-upgrade .nsfw-blur-content small {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6c6c6c, #7b7b7b);
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    letter-spacing: 0.02em;
}

/* Blurred image state for NSFW content in SFW mode */
.explore-image-card.nsfw-blurred .explore-image {
    filter: blur(15px);
    transform: scale(1.1);
}


/* ===== Swiper Custom Navigation ===== */
.swiper-pagination {
    display: none !important;
}

/* Custom scrollbar (hidden) */
.explore-vertical-swiper::-webkit-scrollbar,
.character-images-swiper::-webkit-scrollbar {
    display: none;
}

/* ===== Responsive Adjustments ===== */
@media (min-width: 768px) {
    .explore-sticky-header {
        padding: 12px 24px;
    }
    
    .explore-search-bar {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .character-info-overlay {
        padding: 80px 24px 24px;
    }
    
    .character-avatar {
        width: 56px;
        height: 56px;
    }
    
    .character-name {
        font-size: 18px;
    }
    
    .explore-quick-actions {
        right: 24px;
        bottom: calc(100px + var(--explore-safe-area-bottom));
    }
    
    .quick-action-btn {
        width: 56px;
        height: 56px;
    }
    
    .quick-action-btn i {
        font-size: 24px;
    }
}

@media (min-width: 1024px) {
    .explore-gallery-wrapper {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .explore-quick-actions {
        right: calc(50% - 300px);
    }
}

/* ===== Touch Feedback ===== */
.explore-image-card:active .explore-image {
    transform: scale(0.98);
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner {
        animation: none;
    }
    
    .explore-image,
    .character-avatar,
    .action-btn,
    .quick-action-btn {
        transition: none;
    }
}

/* ===== Hide default footer elements ===== */
.explore-body footer,
.explore-body .sticky-bottom,
.explore-body #footer-toolbar {
    display: none !important;
}

/* ===== Dark mode support ===== */
@media (prefers-color-scheme: light) {
    .explore-body {
        /* Keep dark theme for immersive gallery experience */
        background: var(--explore-bg);
    }
}

/* ===== Premium Required Overlay ===== */
.premium-required-overlay {
    position: absolute;
    inset: 0;
    background: var(--veil-strong);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    text-align: center;
}

.premium-required-overlay i {
    font-size: 48px;
    color: #af7f03;
    margin-bottom: 16px;
}

.premium-required-overlay h3 {
    color: var(--explore-text);
    font-size: 18px;
    margin: 0 0 8px;
}

.premium-required-overlay p {
    color: var(--explore-text-secondary);
    font-size: 14px;
    margin: 0 0 16px;
}

.premium-required-overlay .upgrade-btn {
    background: linear-gradient(135deg, #6e6e6e, #6f6f6f);
    color: var(--brand-ink);
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.premium-required-overlay .upgrade-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ===== Mobile Full Screen Images ===== */
@media (max-width: 768px) {
    .explore-sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        height: auto;
        background: var(--veil-strong);
        backdrop-filter: blur(10px);
        padding: 8px 12px;
    }
    
    .explore-gallery-wrapper {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
        margin-top: 0;
    }
    
    .explore-vertical-swiper {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    .swiper-slide {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    /* Ensure images take full height on mobile */
    .explore-image-card {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    .explore-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .character-slide {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    .character-images-swiper {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    .character-images-swiper .swiper-slide {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    .tiktok-actions {
        right: 12px;
        bottom: 80px;
        gap: 12px;
        --tiktok-btn-size: 48px;
        --tiktok-icon-size: 20px;
    }
}

/* Mobile specific image card styles for preview */
@media (max-width: 480px) {
    .explore-image-card {
        width: 100vw;
        height: 100vh; /* fallback */
    height: 100dvh; /* match the visible viewport so every frame is identical and the bottom overlay/nav never gets pushed off-screen */
    }
    
    .character-info-overlay {
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        /* Don't trap the overlay in a tiny scroll box — it clipped the caption
           out of view. The caption is line-clamped, so height stays bounded.
           Extra bottom padding lifts text above the in-app browser toolbar. */
        padding: 48px 14px calc(90px + var(--explore-safe-area-bottom));
    }

    /* Keep the caption compact on phones so it never crowds the toolbar */
    .post-slide .post-caption {
        -webkit-line-clamp: 2;
    }
    
    .tiktok-actions {
        right: 10px;
        bottom: 70px;
        gap: 10px;
        --tiktok-btn-size: 44px;
        --tiktok-icon-size: 18px;
    }

    .action-count {
        font-size: 10px;
    }
}


/* ===== Floating Favorite Button (deprecated - using TikTok buttons instead) ===== */
.image-favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.95), rgba(35, 35, 35, 0.95));
    border: none;
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.image-favorite-btn i {
    font-size: 20px;
    transition: all 0.2s ease;
}

.image-favorite-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.image-favorite-btn:active {
    transform: scale(0.95);
}

.image-favorite-btn.liked {
    background: linear-gradient(135deg, #939393, #727272);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.image-favorite-btn.liked:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

/* Show button on image hover */
.explore-image-card:hover .image-favorite-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Button appears on touch/mobile */
.explore-image-card.active .image-favorite-btn {
    opacity: 1;
    pointer-events: auto;
}

/* ===== TikTok Style Action Buttons =====
   SINGLE SOURCE OF TRUTH for the action-rail button + icon size.
   Every button in the rail (heart, comment, chat, profile, admin…) reads these
   two vars — never hard-code width/height/font-size on an individual button, or
   the rail goes uneven again. Responsive tweaks only re-declare the vars. */
.tiktok-actions {
    --tiktok-btn-size: 50px;
    --tiktok-icon-size: 24px;
    position: absolute;
    right: 16px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 20;
}

.tiktok-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Monochrome and OPAQUE. A translucent pill over the photo took on whatever
       colour sat behind it, so the same rail rendered teal on one post and brown
       on the next. White circle, ink glyph, everywhere. */
    background: var(--surface-overlay);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: var(--tiktok-btn-size, 50px);
    height: var(--tiktok-btn-size, 50px);
    min-width: var(--tiktok-btn-size, 50px);
    min-height: var(--tiktok-btn-size, 50px);
    /* <button> brings its own padding/box-sizing/font — normalize so it lands at
       exactly the same box as the <span> buttons next to it. */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.22s ease;
    flex-shrink: 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.tiktok-action-btn .action-icon,
.tiktok-action-btn .action-icon i {
    font-size: var(--tiktok-icon-size, 24px);
    line-height: 1;
}

.tiktok-action-btn.comment-btn:hover {
    background: var(--surface-sunken);
}

.tiktok-action-btn.comment-btn .comment-count {
    position: absolute;
    right: -5px;
    top: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-fill);
    color: var(--brand-ink);
    font-size: 10px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.06);
}

.tiktok-action-btn.comment-btn .comment-count:empty {
    display: none;
}

.tiktok-action-btn:hover {
    background: var(--surface-sunken);
    transform: scale(1.1);
}

.tiktok-action-btn:active {
    transform: scale(0.95);
}

.action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.image-live-comment-feed {
    position: absolute;
    left: 12px;
    right: 74px;
    bottom: 178px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 12;
    pointer-events: none;
}

.image-live-comment-feed[hidden] {
    display: none;
}

.image-live-comment {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--veil);
    color: var(--ink);
    font-size: 11px;
    line-height: 1.25;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: liveCommentFadeIn 0.28s ease both;
}

.image-live-comment img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.image-live-comment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-live-comment strong {
    color: var(--ink);
}

.action-count {
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
}

/* Heart button — the only filled state in the rail: liked flips to the brand
   fill so it reads at a glance without introducing a colour. */
.tiktok-action-btn.heart-btn:hover {
    background: var(--surface-sunken);
}

.tiktok-action-btn.heart-btn.liked {
    background: var(--brand-fill);
    border-color: transparent;
    color: var(--brand-ink);
}

.tiktok-action-btn.heart-btn.liked .action-icon i {
    color: var(--brand-ink);
}

/* Profile button */
.tiktok-action-btn.profile-btn:hover {
    background: var(--surface-sunken);
}

/* Chat button — the rail's primary action, so it carries the brand fill. */
.tiktok-action-btn.chat-btn {
    background: var(--brand-gradient);
    border-color: transparent;
    color: var(--brand-ink);
}

.tiktok-action-btn.chat-btn:hover {
    background: var(--brand-gradient-hover);
}

/* Admin action buttons */
.admin-actions-divider {
    width: 24px;
    height: 1px;
    background: var(--scrim-soft);
    margin: 2px auto;
}

/* Admin buttons stay red — both of them destroy something (un-publish, delete),
   and a destructive action must not look like a safe one. */
.tiktok-action-btn.admin-btn {
    color: var(--status-danger);
    border-color: var(--status-danger);
}

.tiktok-action-btn.admin-btn:hover {
    background: var(--status-danger);
    color: var(--status-ink);
}

/* Not destructive — plain mono like the rest of the rail. */
.tiktok-action-btn.admin-btn.preview-model-btn {
    color: var(--ink);
    border-color: var(--line);
}

.tiktok-action-btn.admin-btn.preview-model-btn:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

/* ===== Double Tap Heart Animation ===== */
.double-tap-heart {
    position: fixed;
    pointer-events: none;
    z-index: 999999 !important;
    font-size: 80px;
    color: var(--ink-muted);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
    transform-origin: center;
    will-change: transform, opacity;
    /* Add visible background for debugging */
    background: radial-gradient(circle, rgba(147, 147, 147, 0.3) 0%, transparent 70%);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure it's not hidden */
    visibility: visible !important;
    opacity: 1;
}

.double-tap-heart i {
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.16));
    color: var(--ink-muted);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.16);
}

@keyframes floatHeart {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    40% {
        transform: translate(-50%, -60%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -120%) scale(0.8) rotate(15deg);
    }
}

/* Multiple hearts variation */
.double-tap-heart.heart-1 {
    animation-delay: 0s;
}

.double-tap-heart.heart-2 {
    animation-delay: 0.1s;
    font-size: 60px;
}

.double-tap-heart.heart-3 {
    animation-delay: 0.2s;
    font-size: 70px;
}

@keyframes floatHeartLeft {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(-10deg);
    }
    100% {
        opacity: 0;
        transform: translate(-80%, -130%) scale(0.6) rotate(-20deg);
    }
}

@keyframes floatHeartRight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(10deg);
    }
    100% {
        opacity: 0;
        transform: translate(-20%, -130%) scale(0.6) rotate(20deg);
    }
}

/* ===== Explore Comment Overlay & Bottom Sheet ===== */

/* --- Overlay container (wraps everything) --- */
.explore-comment-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    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;
}

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

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

/* --- 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;
}


@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);
    }
}


.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;
    }
}

@media (max-width: 900px) {
    .explore-brand-copy {
        display: none;
    }

    .explore-brand-link {
        width: 44px;
        padding: 6px;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .explore-floating-nav {
        align-items: flex-start;
        gap: 8px;
        padding: 0 10px;
    }

    .explore-brand-cluster {
        gap: 8px;
    }

    .explore-discovery-tags {
        position: fixed;
        top: calc(60px + var(--explore-safe-area-top, 0px));
        left: 0;
        right: 0;
        padding: 0 12px 4px;
    }

    .explore-discovery-tag {
        height: 32px;
        padding: 0 11px;
        font-size: 12px;
    }

    .explore-fab {
        width: 40px;
        height: 40px;
    }

    .tiktok-actions {
        bottom: 112px;
        right: 12px;
        gap: 15px;
        --tiktok-btn-size: 48px;
        --tiktok-icon-size: 20px;
    }

    .image-live-comment-feed {
        right: 70px;
        bottom: 168px;
    }

    .character-info-overlay {
        padding-right: 78px;
    }
}

/* ===== CTA Card (End of images for a character) ===== */
.explore-cta-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.explore-cta-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(110, 110, 110, 0.15) 0%, var(--explore-bg) 70%);
}

.explore-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    max-width: 320px;
    gap: 16px;
}

.explore-cta-avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--explore-accent), #7c7c7c, var(--explore-accent-light));
    animation: ctaAvatarGlow 3s ease-in-out infinite;
}

@keyframes ctaAvatarGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.06); }
    50% { box-shadow: 0 0 30px rgba(0, 0, 0, 0.06), 0 0 60px rgba(0, 0, 0, 0.06); }
}

.explore-cta-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--explore-bg);
}

.explore-cta-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--explore-text);
    margin: 0;
    line-height: 1.2;
}

.explore-cta-message {
    font-size: 14px;
    color: var(--explore-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.explore-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.explore-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.explore-cta-btn:active {
    transform: scale(0.97);
}

.explore-cta-btn-chat {
    background: linear-gradient(135deg, var(--explore-accent), var(--explore-accent-light));
    color: var(--ink);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.explore-cta-btn-chat:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    color: var(--ink);
    text-decoration: none;
}

.explore-cta-btn-create {
    background: var(--glass-strong);
    color: var(--explore-text);
    border: 1px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.explore-cta-btn-create:hover {
    background: var(--scrim-soft);
    color: var(--explore-text);
    text-decoration: none;
}

.explore-cta-btn i {
    font-size: 18px;
}

/* =========================================================================
   USER PROFILE POSTS in the discovery feed (interleaved among characters)
   Post slides reuse .character-slide / .character-info-overlay / .tiktok-actions
   chrome; only the post-specific accents are defined here.
   ========================================================================= */

.post-slide .post-images-swiper {
    width: 100%;
    height: 100%;
}

.post-slide .explore-post-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--surface-page);
}

/* The clip's sound toggle. It borrows .igp-video-sound from ig-post.css (one
   look for the control everywhere) but moves to the TOP-right: the bottom-right
   of a slide belongs to the .tiktok-actions rail. */
.post-slide .explore-post-sound {
    top: 12px;
    right: 12px;
    bottom: auto;
    z-index: 21;
}

/* "Post" pill above the author row in the bottom overlay */
.post-feed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(135deg, rgba(130, 130, 130, 0.95), rgba(145, 145, 145, 0.9));
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.post-feed-badge i {
    font-size: 12px;
}

/* Character-attribution line under the author name */
.post-slide .post-character-line {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ink-soft);
}

.post-slide .post-character-line i {
    font-size: 11px;
    color: #b7890a;
}

/* Post caption in the overlay (clamped so it never eats the screen) */
.post-slide .post-caption {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

/* Liked state for the post heart button */
.post-like-btn.liked .action-icon i {
    color: #ba0023;
}

/* ============================================================
   All Images feed — flat grid of every public image (default
   Search view) + the All images / For you mode toggle.
   ============================================================ */
.explore-mode-switch {
    position: fixed;
    /* Below the fixed public bar, with the same 10px gap the floating FAB row
       uses: 68px is `.pnav-inner`'s height (public-nav.css) and these two
       numbers must stay in step. The OLD 58px sat the pill's top edge BEHIND
       the bar. Signed-in bars are taller still — search.hbs carries the
       member overrides (100px mobile / 60px desktop brand row). */
    top: calc(78px + var(--explore-safe-area-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--veil-strong);
    border: 1px solid var(--explore-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease;
}
/* Hide-on-scroll: slides up out of view when scrolling down, back on scroll up */
.explore-mode-switch.nav-hidden {
    transform: translateX(-50%) translateY(calc(-100% - 70px));
    opacity: 0;
    pointer-events: none;
}
.explore-mode-btn {
    border: 0;
    background: transparent;
    color: var(--explore-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.explore-mode-btn.active {
    background: var(--brand-fill);
    color: var(--brand-ink);
}
/* The Characters entry is an <a> in the same pill row — dress it as a button. */
a.explore-mode-btn,
a.explore-mode-btn:hover {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
a.explore-mode-btn:hover {
    color: var(--ink);
}

.all-images-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Clear the floating nav + mode switch on top: 78px switch top + ~35px
       pill height + breathing room. search.hbs raises it further for the
       taller signed-in bars. */
    padding: calc(122px + var(--explore-safe-area-top, 0px)) 10px calc(24px + var(--explore-safe-area-bottom, 0px));
}
.all-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 900px;
    margin: 0 auto;
}
.all-images-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--explore-card-bg);
    text-decoration: none;
}
.all-images-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.all-images-img.all-images-nsfw {
    filter: blur(24px);
    transform: scale(1.1);
}
/* A video result is a real <video> so it can paint its own first frame when the
   server has no still for it, and so it can play while it's on screen (see
   tileMediaHtml). It must never take the tap — the tile is a link into the
   feed. The tile's own 3/4 aspect-ratio holds the grid still while it loads. */
.all-images-video {
    pointer-events: none;
    background: var(--explore-card-bg);
}
.all-images-video-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--veil-strong);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1;
    pointer-events: none;
}
.all-images-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 1.4rem;
    pointer-events: none;
}
.all-images-status {
    text-align: center;
    color: var(--explore-text-secondary);
    font-size: 0.8rem;
    padding: 20px 0 8px;
}
.all-images-sentinel { height: 1px; }
.all-images-empty {
    text-align: center;
    color: var(--explore-text-secondary);
    padding: 60px 20px;
}
.all-images-empty i { font-size: 2rem; display: block; margin-bottom: 12px; }
.all-images-empty p { margin: 0; font-size: 0.9rem; }

/* Roomier grid on larger screens */
@media (min-width: 640px) {
    .all-images-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (min-width: 980px) {
    .all-images-grid { grid-template-columns: repeat(5, 1fr); max-width: 1100px; }
}

/* ===== All-images single-column feed (opened by tapping a grid image) =====
   Layout only — each post is a shared .igp-card (docs/IG_POST_COMPONENT.md). */
.all-images-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 500px;
    margin: 0 auto;
}
.all-images-feed[hidden] { display: none; }
/* Card styles live in the SHARED post component (public/css/ig-post.css,
   docs/IG_POST_COMPONENT.md) — the all-images feed renders .igp-card, the same
   markup as the character feed and the full-screen post page. */

/* Monetization signal — a paid character must not look free in browse */
/* Subscription price tag — see .char-card-premium-badge for the rationale.
   Neutral dark glass, price-first, lock in brand violet. */
.ai-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 7px;
    background: var(--veil-strong);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--ink);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ai-premium-badge i { font-size: 0.9em; color: var(--ink-soft); }
.ai-premium-badge em { font-style: normal; font-weight: 500; opacity: 0.72; }

/* Compact variant sits on the grid tile itself */
.ai-premium-badge-sm {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 6px;
    border-radius: 8px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.all-images-card { position: relative; }

/* ============================================================
   Guest "Create Now" CTA — floating pill, bottom centre.
   Rendered only for signed-out (temporary) visitors by
   views/search.hbs; it takes them to /login. Deliberately the one
   colourless control on the page: it inverts the page's own ink /
   page tokens, so it is black-on-white in the light theme and
   white-on-black in dark, and never competes with the media.
   ============================================================ */
.explore-create-cta {
    position: fixed;
    left: 50%;
    bottom: calc(18px + var(--explore-safe-area-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--surface-page);
    border: 1px solid var(--surface-page);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.explore-create-cta:hover,
.explore-create-cta:focus-visible {
    color: var(--surface-page);
    text-decoration: none;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}
.explore-create-cta:active {
    transform: translateX(-50%) scale(0.97);
}
.explore-create-cta i {
    font-size: 1.05em;
}

/* Keep the last row of the grid / feed reachable above the pill. */
.explore-guest .all-images-view {
    padding-bottom: calc(88px + var(--explore-safe-area-bottom, 0px));
}

/* "For you" mode puts the swipe hint at bottom:88px — on a device with a home
   indicator the pill reaches that high, so lift the hint clear of it. */
.explore-guest .swipe-hint {
    bottom: calc(112px + var(--explore-safe-area-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .explore-create-cta { transition: none; }
    .explore-create-cta:hover,
    .explore-create-cta:focus-visible { transform: translateX(-50%); }
}