/* =========================================
   FFLIPP ZINE THEATER - CORE STYLES
   ========================================= */

/* 1. GLOBAL & BODY THEME */
body.zine-theater {
    background-color: #020617; /* Deep blue-black */
    color: #f8fafc;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    overflow-y: auto; /* Allow vertical scrolling to read description */
}

/* 2. FULL-SCREEN NSFW ENFORCER */
.nsfw-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background-color: rgba(2, 6, 23, 0.98);
    z-index: 100000 !important; /* Always on top */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(25px);
}

.nsfw-card {
    background: #1e293b;
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid #334155;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.btn-enter {
    background: #38bdf8;
    color: white;
    border: none;
    padding: 14px 35px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    margin-top: 15px;
    font-size: 1rem;
    transition: transform 0.2s;
}
.btn-enter:hover { transform: scale(1.05); }

/* 3. TRANSPARENT FLOATING HEADER */
.z-header {
    height: 60px;
    background: transparent; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.z-header a { 
    color: #94a3b8; 
    text-decoration: none; 
    font-size: 0.85rem; 
    font-weight: 700; 
    transition: 0.3s; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
}
.z-header a:hover { color: white; }

.switch-view-btn { 
    background: rgba(30, 41, 59, 0.6); 
    padding: 8px 16px; 
    border-radius: 50px; 
    backdrop-filter: blur(5px); 
    border: 1px solid rgba(255,255,255,0.1); 
}

/* 4. THE STAGE (FLIPBOOK AREA) */
#z-stage {
    height: 92vh; /* Increased from 85vh to maximize screen usage */
    min-height: 600px;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
    position: relative;
    overflow: hidden;   
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px; /* Increased to 40px to safely clear the floating header */
}

#container { 
    width: 98%;  /* Increased from 92% to use edge-to-edge width */
    height: 98%; /* Increased from 82% to use full vertical stage space */
    position: relative; 
    z-index: 5; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Professional Glow for the Book */
body.zine-theater .flipbook {
    box-shadow: 0 0 50px rgba(0,0,0,0.8), 0 0 20px rgba(56, 189, 248, 0.1) !important;
    transition: box-shadow 0.3s ease;
}

/* NAVIGATION ARROWS */
.z-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255,255,255,0.05);
    color: white;
    font-size: 1.2rem;
    padding: 20px 12px;
    cursor: pointer;
    z-index: 10;
    border-radius: 10px;
    transition: 0.3s;
}
.z-nav-btn:hover { background: #38bdf8; border-color: #38bdf8; }

/* 5. DETAILS AREA (SOCIAL & INFO) */
.z-details-area {
    background-color: #0f172a; 
    border-top: 1px solid #1e293b;
    padding: 30px 20px 60px 20px;
}

.z-dock {
    max-width: 1100px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 20px;
}

.z-info-main h1 { 
    margin: 0; 
    font-size: 1.5rem; /* Reduced Font Size */
    font-weight: 800; 
    letter-spacing: -0.02em;
}

.z-author-line { 
    color: #94a3b8; 
    margin-top: 8px; 
    font-size: 0.9rem; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.tiny-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #334155;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.z-genre-tag { 
    border: 1px solid #38bdf8; 
    color: #38bdf8; 
    padding: 1px 10px; 
    border-radius: 50px; 
    font-size: 0.65rem; 
    font-weight: 800; 
    text-transform: uppercase; 
}

/* 6. ACTIONS & ICONS */
.z-actions { display: flex; align-items: center; gap: 12px; }
.z-stat { display: flex; align-items: center; gap: 6px; color: #94a3b8; font-weight: 700; font-size: 0.85rem; margin-right: 8px; }

.z-icon-svg {
    width: 18px; 
    height: 18px; 
    fill: currentColor;
}

.z-action-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.z-action-btn:hover { background: #334155; border-color: #475569; }
.z-action-btn.liked { background: linear-gradient(45deg, #38bdf8, #f97316); border: none; }

.z-description { max-width: 1100px; margin: 0 auto; line-height: 1.6; color: #cbd5e1; font-size: 0.95rem; } /* Reduced Font Size */
.z-date { margin-top: 20px; font-size: 0.8rem; color: #475569; }

/* 7. MODALS (LIKERS / SHARE) */
.z-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(2, 6, 23, 0.85);
    z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px);
}

.z-modal-content {
    background: #1e293b;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    position: relative;
    border: 1px solid #334155;
    text-align: center;
    color: white;
}

.z-close-modal {
    position: absolute; top: 15px; right: 15px;
    background: none; border: none; color: #94a3b8;
    font-size: 1.8rem; cursor: pointer; line-height: 1;
}

/* =========================================
   ZINE THEATER - CENTERED COMMENT MODAL
   ========================================= */

/* Use a heavy blur on the background for focus */
#comments-overlay.z-modal-overlay {
    backdrop-filter: blur(15px);
    background: rgba(2, 6, 23, 0.85);
}

/* The Modal Box */
.z-comment-modal {
    background: #1e293b; /* Deep Slate */
    width: 90%;
    max-width: 500px;
    height: 80vh;
    max-height: 600px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #334155;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- FORCED DARK MODAL HEADER --- */
body.zine-theater .z-modal-header,
body.zine-theater .z-sidebar-header {
    background-color: #1e293b !important; /* Deep Slate */
    background-image: none !important;
    border-bottom: 1px solid #334155 !important;
    padding: 20px 25px !important;
    color: #f8fafc !important;
}

/* Force the H3 inside to be white */
body.zine-theater .z-modal-header h3,
body.zine-theater .z-sidebar-header h3 {
    color: #f8fafc !important;
    background: transparent !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
}

/* Ensure the Close Button (X) is visible */
body.zine-theater .z-close-modal {
    color: #94a3b8 !important;
    opacity: 1 !important;
    background: transparent !important;
}

body.zine-theater .z-close-modal:hover {
    color: #f8fafc !important;
}

/* --- THE STUBBORN INPUT BOX BACKGROUND --- */
/* If it's still white, it's likely a browser "user-agent" style or an !important light-mode rule */
body.zine-theater .z-comment-input-wrapper textarea#comment-content {
    background-color: #020617 !important; /* Pure black-blue */
    background: #020617 !important;
    color: #f8fafc !important;
    -webkit-appearance: none; /* Remove iOS/Chrome defaults */
}

/* Force the buttons to be absolute and pinned to the STAGE, not the body */
body.zine-theater #prev-btn,
body.zine-theater #next-btn {
    position: absolute !important; /* Overrides any 'fixed' setting from sc.sc.js */
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(15, 23, 42, 0.2) !important; /* Made more transparent (0.4 to 0.2) */
    padding: 30px 10px !important; /* Taller and slimmer for better ergonomics */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

/* Positioning and Hover */
body.zine-theater #prev-btn { left: 10px !important; }
body.zine-theater #next-btn { right: 10px !important; }

body.zine-theater #prev-btn:hover,
body.zine-theater #next-btn:hover {
    background: #38bdf8 !important;
    border-color: #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

/* Hide arrows when the zine is 'zoomed in' to prevent UI clutter */
body.zine-theater.zoom-active #prev-btn,
body.zine-theater.zoom-active #next-btn {
    opacity: 0;
    pointer-events: none;
}

/* The Scrolling List */
.z-comments-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 25px;
    background: #1e293b; /* Ensure background is solid */
}

/* --- THE Stubborn COMMENT BOX FIX --- */
.z-comment-input-wrapper {
    background: #0f172a !important; /* Pinned dark bottom area */
    padding: 20px;
    border-top: 1px solid #334155;
}

/* Force dark theme on textarea with heavy specificity */
body.zine-theater textarea#comment-content {
    background-color: #020617 !important; /* Pure dark background */
    color: #f8fafc !important;             /* White text */
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    width: 100% !important;
    min-height: 80px !important;
    font-family: inherit;
    font-size: 0.95rem !important;
    resize: none !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
    outline: none !important;
}

body.zine-theater textarea#comment-content:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* Form Footer */
.z-comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

#char-counter {
    font-size: 0.75rem;
    color: #64748b;
}

.z-post-btn {
    background: #38bdf8;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}
.z-post-btn:hover { background: #0ea5e9; transform: scale(1.05); }

/* Login Prompt */
.z-login-prompt {
    padding: 30px;
    text-align: center;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Style the Scrollbar for dark mode */
.z-comments-scroll-area::-webkit-scrollbar { width: 6px; }
.z-comments-scroll-area::-webkit-scrollbar-track { background: transparent; }
.z-comments-scroll-area::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

/* --- DARK THEME TEXT ENFORCEMENT --- */
.z-modal-content h3, 
.z-sidebar-header h3 {
    color: #f8fafc !important;
    margin: 0;
}

.z-modal-content p, 
#likers-list-container p {
    color: #cbd5e1 !important;
}

/* --- COMMENT FORM FIXES --- */
/* We use .zine-theater prefix to ensure these rules win over standard style.css */
body.zine-theater .comment-form-container {
    display: block !important; 
    background-color: #1e293b !important;
    padding: 15px;
    border-top: 1px solid #334155;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

body.zine-theater .comment-form-container textarea#comment-content {
    width: 100% !important;
    background-color: #0f172a !important; /* Forced dark background */
    color: #f8fafc !important;            /* Forced light text */
    border: 1px solid #475569 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    resize: none !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Ensure the cursor and text are visible when typing */
body.zine-theater .comment-form-container textarea#comment-content:focus {
    border-color: #38bdf8 !important;
    background-color: #020617 !important;
}

body.zine-theater .comment-form-container #comment-content::placeholder {
    color: #64748b !important;
}

#comment-content::placeholder {
    color: #64748b;
}

/* --- LIKER ITEM BRIGHTNESS --- */
.liker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    text-decoration: none;
    color: #f8fafc !important;
    border-radius: 8px;
    transition: background 0.2s;
}

.liker-item:hover {
    background: #334155;
}

/* --- COMMENT ITEM BRIGHTNESS --- */
.comment-item {
    border-bottom: 1px solid #1e293b;
    padding: 15px 0;
}

.comment-author {
    color: #38bdf8 !important;
    font-weight: bold;
    font-size: 0.9rem;
}

.comment-text {
    color: #cbd5e1 !important;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 5px;
}

.comment-timestamp {
    color: #64748b !important;
    font-size: 0.75rem;
    margin-left: 10px;
}

/* SOCIAL ICON STYLING IN MODAL */
.social-icon-link {
    color: #94a3b8; /* Slate 400 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon-link:hover {
    color: #38bdf8; /* Sky Blue */
    transform: translateY(-3px);
}

/* Specific hover color for X if you want brand accuracy */
#share-x-viewer:hover { color: #ffffff; }
#share-facebook-viewer:hover { color: #1877F2; }
#share-linkedin-viewer:hover { color: #0A66C2; }
#share-email-viewer:hover { color: #10b981; }

/* Interactive Selector for OG Image */
.style-preview {
    width: 100px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.style-preview div {
    border: 2px solid #334155;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    color: white !important;
    z-index: 2;
}
/* Add a very subtle dark overlay to the selector buttons to make white text pop */
.style-preview div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.style-preview.active div {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}
.style-preview:hover { transform: scale(1.05); }

/* Header Icon Hover States */
.z-header-right a svg {
    transition: all 0.3s ease;
}

.z-header-right a:hover svg {
    fill: #38bdf8 !important; /* Glow blue on hover */
    transform: scale(1.1);
}

/* Author Line spacing for the new Category SVG */
.z-author-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Ensure Category Link pops but stays professional */
.z-author-line a[title="View Creator Portfolio"] {
    transition: opacity 0.2s;
}

.z-author-line a[title="View Creator Portfolio"]:hover {
    opacity: 0.8;
}

/* Next Chapter Specific Enhancements */
#next-chapter-overlay .z-modal-content {
    animation: slideUpScale 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.2);
}

@keyframes slideUpScale {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================================== */
/* --- UNIVERSAL Z-PROFILE DROPDOWN --- */
/* ==================================== */
.z-profile-wrapper { 
    position: relative; 
    display: inline-block; 
}

/* The circular button trigger */
.z-profile-btn {
    width: 34px; 
    height: 34px; 
    border-radius: 50%;
    background: #1e293b; 
    border: 1px solid #334155;
    cursor: pointer; 
    overflow: hidden; /* Ensures image/emoji stays inside the circle */
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 0; 
    transition: all 0.3s ease;
    outline: none;
}

/* Glow effect on hover */
.z-profile-btn:hover { 
    border-color: #38bdf8; 
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.z-avatar-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.z-avatar-emoji { 
    font-size: 1.2rem; 
    line-height: 1; 
    display: block;
    margin-top: 1px; /* Optical alignment */
}

/* The Actual Menu Box */
.z-dropdown-content {
    display: none; 
    position: absolute; 
    right: 0; 
    top: 45px;
    background-color: #1e293b; 
    min-width: 220px;
    border-radius: 12px; 
    border: 1px solid #334155;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6); 
    z-index: 10000; /* Must be higher than the flipbook and stage */
    padding: 8px 0; 
    overflow: hidden;
}

/* Triggered by JavaScript */
.z-dropdown-content.show { 
    display: block; 
    animation: zFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}

@keyframes zFadeIn { 
    from { opacity: 0; transform: translateY(-10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Username Header inside menu */
.z-dropdown-header { 
    padding: 12px 20px; 
    border-bottom: 1px solid #334155; 
    margin-bottom: 5px; 
    font-size: 0.8rem; 
    color: #94a3b8; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Menu Links */
.z-dropdown-content a {
    color: #cbd5e1; 
    padding: 12px 20px; 
    text-decoration: none;
    display: flex; 
    align-items: center; 
    gap: 12px;
    font-size: 0.9rem; 
    font-weight: 600; 
    transition: background 0.2s, color 0.2s;
}

.z-dropdown-content a:hover { 
    background-color: rgba(56, 189, 248, 0.1); /* Subtle blue tint */
    color: #38bdf8; 
}

/* Ensure logout hover stays orange and doesn't turn blue */
.z-dropdown-content a[style*="color: #f97316"]:hover {
    background-color: rgba(249, 115, 22, 0.1) !important; /* Light orange tint */
    color: #fb923c !important; /* Slightly lighter orange */
}

/* The SVG icons inside the menu */
.menu-icon { 
    width: 18px; 
    height: 18px; 
    fill: currentColor; 
    opacity: 0.8;
}

.z-dropdown-content a:hover .menu-icon {
    opacity: 1;
}

/* Logged-out Icon Tweak */
.z-login-icon-link {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}
.z-login-icon-link:hover {
    transform: scale(1.1);
}

/* Header spacing adjustments */
.z-header-right { 
    display: flex;
    align-items: center;
    gap: 15px !important; 
}

/* =========================================
   MOBILE MAXIMIZATION (Full Screen Style)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Maximize the Stage height */
    #z-stage { 
        height: 92vh; /* Occupies almost the entire screen height */
        min-height: 450px; 
        padding-top: 50px; /* Room for the transparent header */
        padding-bottom: 10px;
    }

    /* 2. Allow the flipbook to touch the edges of the screen */
    #container { 
        width: 100%; 
        height: 95%; 
    }

    /* 3. Navigation arrows are usually annoying on mobile (we use swipe), 
       but if you want them, we make them tiny and subtle */
    .z-nav-btn { 
        display: none; /* Recommended: Mobile users prefer swiping */
    }

    /* 4. Tighten the Info area so it stays "below the fold" until scrolled */
    .z-details-area {
        padding: 20px 15px 40px 15px;
    }

    .z-dock { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
        padding-bottom: 15px;
    }

    /* 5. Scale down text further for tiny screens */
    .z-info-main h1 { 
        font-size: 1.25rem; 
    }

    .z-actions { 
        width: 100%; 
        justify-content: space-between; 
        gap: 5px;
    }

    .z-action-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* 6. Ensure Modals (Comments/Like) take up more space on mobile */
    .z-sidebar { 
        width: 100%; 
    }
}

/* --- MODERN INTEGRATED SHARE FIELD --- */
.z-share-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.z-share-field-wrapper input#share-url-input {
    width: 100% !important;
    background: #020617 !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 12px 50px 12px 15px !important; /* Extra right padding for the icon */
    font-size: 0.85rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Small square button positioned inside the input */
#copy-url-btn {
    position: absolute;
    right: 6px;
    height: 34px;
    width: 34px;
    background: #38bdf8 !important; /* Your signature blue */
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

#copy-url-btn svg {
    width: 18px;
    height: 18px;
}

#copy-url-btn:hover {
    background: #0ea5e9 !important;
    transform: scale(1.05);
}

#copy-url-btn:active {
    transform: scale(0.9);
}

/* --- MOBILE TWEAK FOR MODALS --- */
@media (max-width: 480px) {
    .z-modal-content {
        padding: 20px 15px !important; /* Tighter padding on very small phones */
        width: 95% !important;
    }
    
    .z-modal-content h3 {
        font-size: 1.1rem !important;
    }
}