/* 
 * Mobile Console Improvements for Goodnight eNight Story View
 * 
 * This file contains specific mobile improvements for the top console area
 * to create a collapsible menu on smaller screens while preserving desktop view
 */

/* Fixed Menu Button - CSS-controlled visibility */
.gtet-hamburger-button,
html body .gtet-hamburger-button,
div.gtet-hamburger-button {
    display: none !important; /* Hidden by default, shown only for mobile */
    position: fixed !important;
    right: 15px !important;
    top: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(156, 0, 255, 0.8) !important;
    border-radius: 4px !important;
    z-index: 1000000 !important; /* Higher than the top console z-index (999999) */
    cursor: pointer !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: auto !important; /* Ensure it's always clickable */
    overflow: visible !important;
}

.gtet-hamburger-button .gtet-hamburger-label,
#gtet-fixed-menu-button .gtet-hamburger-label,
.gtet-menu-button .gtet-hamburger-label {
    position: absolute !important;
    right: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(6, 9, 30, 0.92) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    display: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* Hamburger Icon Bars */
.gtet-hamburger-bar,
#gtet-fixed-menu-button .gtet-hamburger-bar {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    margin: 3px 0 !important;
    background-color: #fff !important;
    border-radius: 3px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Modify Top Console for Mobile */
@media (max-width: 768px) {
    body.single-story-view .gtet-hamburger-button .gtet-hamburger-label,
    body.single-story-view #gtet-fixed-menu-button .gtet-hamburger-label,
    body.single-story-view .gtet-menu-button .gtet-hamburger-label,
    body.single-story .gtet-hamburger-button .gtet-hamburger-label,
    body.single-story #gtet-fixed-menu-button .gtet-hamburger-label,
    body.single-story .gtet-menu-button .gtet-hamburger-label {
        display: inline-flex !important;
    }

    body.single-story-view .gtet-hamburger-button:not(.expanded):not(.active) .gtet-hamburger-label,
    body.single-story-view #gtet-fixed-menu-button:not(.expanded):not(.active) .gtet-hamburger-label,
    body.single-story-view .gtet-menu-button:not(.expanded):not(.active) .gtet-hamburger-label,
    body.single-story .gtet-hamburger-button:not(.expanded):not(.active) .gtet-hamburger-label,
    body.single-story #gtet-fixed-menu-button:not(.expanded):not(.active) .gtet-hamburger-label,
    body.single-story .gtet-menu-button:not(.expanded):not(.active) .gtet-hamburger-label {
        opacity: 1 !important;
        transform: translateY(-50%) !important;
    }

    body.single-story-view .gtet-hamburger-button.expanded .gtet-hamburger-label,
    body.single-story-view .gtet-hamburger-button.active .gtet-hamburger-label,
    #gtet-fixed-menu-button.expanded .gtet-hamburger-label,
    #gtet-fixed-menu-button.active .gtet-hamburger-label,
    body.single-story-view .gtet-menu-button.expanded .gtet-hamburger-label,
    body.single-story-view .gtet-menu-button.active .gtet-hamburger-label,
    body.single-story .gtet-hamburger-button.expanded .gtet-hamburger-label,
    body.single-story .gtet-hamburger-button.active .gtet-hamburger-label,
    body.single-story #gtet-fixed-menu-button.expanded .gtet-hamburger-label,
    body.single-story #gtet-fixed-menu-button.active .gtet-hamburger-label,
    body.single-story .gtet-menu-button.expanded .gtet-hamburger-label,
    body.single-story .gtet-menu-button.active .gtet-hamburger-label {
        opacity: 0 !important;
        transform: translateY(-50%) translateX(-6px) !important;
    }

    /* Default collapsed state for console */
    body.single-story-view .gtet-top-console {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 96% !important;
        transform: translateY(-100%) !important;
        transition: transform 0.4s ease, opacity 0.3s ease !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Only change these properties when expanded */
    body.single-story-view .gtet-top-console.expanded {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    /* Adjust title section spacing when console is collapsed */
    body.single-story-view .gtet-title-section {
        margin-top: 60px !important; /* Increased to account for hamburger button */
    }
    
    /* Make sure audio label is more visible */
    body.single-story-view .audio-label {
        display: block;
        margin-bottom: 5px !important;
        font-weight: bold;
        text-align: left;
    }
    
    /* Fix audio player container */
    body.single-story-view .gtet-audio-player {
        background: transparent !important;
        width: auto !important; 
        max-width: none !important;
        margin: 0 !important;
    }
    
    body.single-story-view .bgm-console {
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: auto !important;
        max-width: 200px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Add volume control slider for mobile - refined styles */
    body.single-story-view .audio-volume-control {
        display: flex !important;
        align-items: center !important;
        margin-top: 5px !important;
        gap: 8px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 200px !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
    }
    
    body.single-story-view .audio-volume-control:before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 24px !important; /* Allow space for icon */
        right: 0 !important;
        height: 6px !important;
        background: white !important; /* Solid white background */
        border-radius: 3px !important;
        transform: translateY(-50%) !important;
        z-index: 0 !important;
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.9) !important; /* Strong glow */
        pointer-events: none !important; /* Allow clicks to pass through */
    }
    
    body.single-story-view .volume-icon {
        width: 16px !important;
        height: 16px !important;
        color: white !important;
        flex-shrink: 0 !important;
    }
    
    body.single-story-view .volume-slider {
        flex: 1 !important;
        height: 24px !important;
        max-width: 150px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    body.single-story-view .volume-slider input[type="range"] {
        width: 100% !important;
        height: 6px !important;
        -webkit-appearance: none !important;
        background: white !important; /* Solid white background */
        border-radius: 3px !important;
        outline: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important; /* Add glow effect */
    }
    
    body.single-story-view .volume-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 15px !important;
        height: 15px !important;
        background: white !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }
    
    body.single-story-view .volume-slider input[type="range"]::-moz-range-thumb {
        width: 15px !important;
        height: 15px !important;
        background: white !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        border: none !important;
    }
    
    /* More visible track styles */
    body.single-story-view .volume-slider input[type="range"]::-webkit-slider-runnable-track {
        width: 100% !important;
        height: 6px !important;
        background: white !important; /* Solid white background */
        border-radius: 3px !important;
        border: none !important;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important; /* Add glow effect */
    }
    
    body.single-story-view .volume-slider input[type="range"]::-moz-range-track {
        width: 100% !important;
        height: 6px !important;
        background: white !important; /* Solid white background */
        border-radius: 3px !important;
        border: none !important;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important; /* Add glow effect */
    }
    
    /* Add a semi-transparent persistent background for mobile view */
    body.single-story-view.mobile-view:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1040;
        pointer-events: none;
    }
    
    /* Make hamburger stand out with semi-transparent white glow */
    body.single-story-view .gtet-hamburger-button {
        animation: gentle-pulse 2s infinite alternate;
    }
    
    @keyframes gentle-pulse {
        0% {
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
        }
        100% {
            box-shadow: 0 3px 15px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
        }
    }
    
    /* Ensure hamburger remains clickable when console is expanded */
    body.single-story-view .gtet-top-console.expanded + .gtet-hamburger-button,
    .gtet-top-console.expanded ~ .gtet-hamburger-button,
    .gtet-hamburger-button.active,
    html body .gtet-hamburger-button.active {
        z-index: 1000001 !important; /* Even higher z-index when active/expanded */
        position: fixed !important;
        pointer-events: auto !important;
    }
    
    /* Extra insurance for clickability */
    .gtet-hamburger-button,
    html body .gtet-hamburger-button,
    div.gtet-hamburger-button {
        position: fixed !important;
        z-index: 1000001 !important; /* Highest priority z-index */
        pointer-events: auto !important;
    }
}

@media (min-width: 769px) {
    body.single-story-view .gtet-hamburger-button .gtet-hamburger-label,
    #gtet-fixed-menu-button .gtet-hamburger-label {
        display: none !important;
    }
}

/* Further adjustments for smaller screens */
@media (max-width: 480px) {
    body.single-story-view .gtet-top-console {
        width: 90%;
        padding: 15px 10px;
    }
    
    body.single-story-view .gtet-mode-buttons {
        justify-content: center;
    }
    
    body.single-story-view .gtet-buttons {
        margin-top: 10px;
    }
}

/* Ensure proper image selection for different screen sizes */
@media (max-width: 768px) {
    body.single-story-view .gtet-page-image img.desktop-image {
        display: none !important;
    }
    
    body.single-story-view .gtet-page-image img.mobile-image {
        display: block !important;
    }
}

@media (min-width: 769px) {
    body.single-story-view .gtet-page-image img.desktop-image {
        display: block !important;
    }
    
    body.single-story-view .gtet-page-image img.mobile-image {
        display: none !important;
    }
}

/* Input slider direct targeting with highest specificity */
body.single-story-view input.volume-slider[type="range"],
html body.single-story-view input.volume-slider[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: white !important;
    border-radius: 3px !important;
    height: 6px !important;
    width: 100% !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Override any parent container that might be setting transparent */
body.single-story-view .volume-slider,
body.single-story-view div.volume-slider {
    background: none !important;
    max-width: 150px !important;
    opacity: 1 !important;
}

/* === Mobile Console Styles === */

/* Ensure hamburger menu is visible in all modes, including AI Edit Mode */
.hamburger-menu,
html body .hamburger-menu,
html body.story-mode-editable .hamburger-menu,
html body.story-mode-night .hamburger-menu,
html body.story-mode-printable .hamburger-menu,
html body.story-mode-default .hamburger-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important; /* Changed from absolute to fixed */
    top: 15px !important; /* Aligned with other elements in the top console */
    right: 15px !important; /* Moved from left to right side */
    z-index: 10000 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 5px !important;
    padding: 5px !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    animation: gentle-pulse 2s infinite alternate !important; /* Added animation */
}

/* Hamburger icon bars */
.hamburger-menu span,
html body .hamburger-menu span,
html body.story-mode-editable .hamburger-menu span,
html body.story-mode-night .hamburger-menu span,
html body.story-mode-printable .hamburger-menu span,
html body.story-mode-default .hamburger-menu span {
    display: block !important;
    height: 3px !important;
    width: 25px !important;
    background-color: white !important;
    margin: 5px auto !important;
    border-radius: 2px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Mode-specific hamburger styling */
html body.story-mode-editable .hamburger-menu {
    background-color: rgba(59, 98, 238, 0.8) !important; /* Blue background to match AI Edit Mode */
    box-shadow: 0 0 10px rgba(59, 98, 238, 0.7) !important;
}

html body.story-mode-night .hamburger-menu {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Darker for night mode */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

html body.story-mode-printable .hamburger-menu {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Mobile console styling in all modes */
html body .gtet-top-console.mobile-collapsed,
html body.story-mode-editable .gtet-top-console.mobile-collapsed,
html body.story-mode-night .gtet-top-console.mobile-collapsed,
html body.story-mode-printable .gtet-top-console.mobile-collapsed,
html body.story-mode-default .gtet-top-console.mobile-collapsed {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out !important;
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}

html body .gtet-top-console.mobile-expanded,
html body.story-mode-editable .gtet-top-console.mobile-expanded,
html body.story-mode-night .gtet-top-console.mobile-expanded,
html body.story-mode-printable .gtet-top-console.mobile-expanded,
html body.story-mode-default .gtet-top-console.mobile-expanded {
    max-height: 500px !important; /* Adjust based on content */
    transition: max-height 0.5s ease-in, padding 0.3s ease-in !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* For hamburger expanded state in all modes */
.hamburger-menu.expanded span:nth-child(1),
html body .hamburger-menu.expanded span:nth-child(1),
html body.story-mode-editable .hamburger-menu.expanded span:nth-child(1),
html body.story-mode-night .hamburger-menu.expanded span:nth-child(1),
html body.story-mode-printable .hamburger-menu.expanded span:nth-child(1),
html body.story-mode-default .hamburger-menu.expanded span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px) !important;
}

.hamburger-menu.expanded span:nth-child(2),
html body .hamburger-menu.expanded span:nth-child(2),
html body.story-mode-editable .hamburger-menu.expanded span:nth-child(2),
html body.story-mode-night .hamburger-menu.expanded span:nth-child(2),
html body.story-mode-printable .hamburger-menu.expanded span:nth-child(2),
html body.story-mode-default .hamburger-menu.expanded span:nth-child(2) {
    opacity: 0 !important;
}

.hamburger-menu.expanded span:nth-child(3),
html body .hamburger-menu.expanded span:nth-child(3),
html body.story-mode-editable .hamburger-menu.expanded span:nth-child(3),
html body.story-mode-night .hamburger-menu.expanded span:nth-child(3),
html body.story-mode-printable .hamburger-menu.expanded span:nth-child(3),
html body.story-mode-default .hamburger-menu.expanded span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -8px) !important;
}

/* Animation for the hamburger button */
@keyframes gentle-pulse {
    0% {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    }
    100% {
        box-shadow: 0 3px 15px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
    }
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    /* Force hamburger to be visible on mobile */
    .hamburger-menu,
    html body .hamburger-menu,
    html body.story-mode-editable .hamburger-menu,
    html body.story-mode-night .hamburger-menu,
    html body.story-mode-printable .hamburger-menu,
    html body.story-mode-default .hamburger-menu {
        display: block !important;
    }
    
    /* Position gtet-top-console for mobile screens */
    .gtet-top-console,
    html body .gtet-top-console,
    html body.story-mode-editable .gtet-top-console,
    html body.story-mode-night .gtet-top-console,
    html body.story-mode-printable .gtet-top-console,
    html body.story-mode-default .gtet-top-console {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 9999 !important;
        transform: translateY(-100%) !important; /* Start off-screen */
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        opacity: 0 !important;
    }
    
    /* Adjust title section spacing when console is collapsed */
    body.single-story-view .gtet-title-section {
        margin-top: 60px !important; /* Increased to account for hamburger button */
    }
    
    /* Hide old gtet-hamburger-button if it exists */
    body.single-story-view .gtet-hamburger-button {
        display: none !important;
    }
}

/* Desktop devices can keep the console always visible */
@media (min-width: 769px) {
    .gtet-top-console,
    html body .gtet-top-console,
    html body.story-mode-editable .gtet-top-console,
    html body.story-mode-night .gtet-top-console,
    html body.story-mode-printable .gtet-top-console,
    html body.story-mode-default .gtet-top-console {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 1024px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        opacity: 1 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Ensure proper spacing between console and content */
    .gtet-title-section {
        margin-top: 20px !important;
    }
    
    /* Hide hamburger on desktop */
    .gtet-hamburger-button,
    html body .gtet-hamburger-button {
        display: none !important;
    }
}

/* === Top Console Positioning Fix === */

/* Base styles for the top console across all screen sizes */
.gtet-top-console,
html body .gtet-top-console,
html body.story-mode-editable .gtet-top-console,
html body.story-mode-night .gtet-top-console,
html body.story-mode-printable .gtet-top-console,
html body.story-mode-default .gtet-top-console {
    position: relative !important; /* Reset fixed position from media query */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    z-index: 9999 !important;
    margin: 0 auto !important;
    padding: 5px 20px !important; /* Reduced padding from 10px to 5px */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 0 0 14px 14px !important;
    background-color: rgba(24, 23, 35, 0.75) !important;
}

/* Fix spacing for the main title section on desktop */
.gtet-title-section,
html body .gtet-title-section,
html body.single-story-view .gtet-title-section {
    margin-top: 10px !important; /* Reduced from 20px or whatever it was before */
    padding-top: 20px !important;
}

/* Fix main content container spacing */
.gtet-story-container,
html body .gtet-story-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Reduce the gap between the title section and the first content section */
.gtet-page-content:first-of-type,
html body .gtet-page-content:first-of-type {
    margin-top: 10px !important;
}

/* Media query for mobile devices - keep our existing mobile fixes */
@media (max-width: 768px) {
    /* Adjust title section spacing when console is collapsed on mobile */
    body.single-story-view .gtet-title-section {
        margin-top: 60px !important; /* Increased to account for hamburger button */
    }
}

/* Ensure hamburger menu is only on the right side and properly styled */
.hamburger-menu,
html body .hamburger-menu,
html body.story-mode-editable .hamburger-menu,
html body.story-mode-night .hamburger-menu,
html body.story-mode-printable .hamburger-menu,
html body.story-mode-default .hamburger-menu {
    display: none !important; /* Hidden by default, shown only on mobile */
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 15px !important;
    right: 15px !important; /* Always on right side */
    left: auto !important; /* Ensure it's never on the left */
    z-index: 10000 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-radius: 5px !important;
    padding: 5px !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    animation: gentle-pulse 2s infinite alternate !important;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    /* Show hamburger on mobile */
    .hamburger-menu,
    html body .hamburger-menu,
    html body.story-mode-editable .hamburger-menu,
    html body.story-mode-night .hamburger-menu,
    html body.story-mode-printable .hamburger-menu,
    html body.story-mode-default .hamburger-menu {
        display: block !important;
    }
    
    /* Position top console for mobile screens */
    .gtet-top-console,
    html body .gtet-top-console,
    html body.story-mode-editable .gtet-top-console,
    html body.story-mode-night .gtet-top-console,
    html body.story-mode-printable .gtet-top-console,
    html body.story-mode-default .gtet-top-console {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 9999 !important;
        transform: translateY(-100%) !important; /* Start off-screen */
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        opacity: 0 !important;
    }
    
    /* Expanded state for mobile */
    .gtet-top-console.mobile-expanded,
    html body .gtet-top-console.mobile-expanded,
    html body.story-mode-editable .gtet-top-console.mobile-expanded,
    html body.story-mode-night .gtet-top-console.mobile-expanded,
    html body.story-mode-printable .gtet-top-console.mobile-expanded,
    html body.story-mode-default .gtet-top-console.mobile-expanded {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

/* === Console Button Fix for All Modes === */

/* Ensure all buttons in the console are clickable across all modes */
.gtet-mode-buttons,
html body .gtet-mode-buttons,
html body.story-mode-editable .gtet-mode-buttons,
html body.story-mode-night .gtet-mode-buttons,
html body.story-mode-printable .gtet-mode-buttons,
html body.story-mode-default .gtet-mode-buttons {
    z-index: 10000 !important;
    position: relative !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
}

/* Individual buttons styling */
.gtet-mode-button,
html body .gtet-mode-button,
.gtet-mode-buttons .gtet-mode-button,
html body .gtet-mode-buttons .gtet-mode-button,
.gtet-mode-buttons a,
html body .gtet-mode-buttons a {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10001 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2) !important;
}

/* Top console container z-index fix */
.gtet-top-console,
html body .gtet-top-console,
html body.story-mode-editable .gtet-top-console,
html body.story-mode-night .gtet-top-console,
html body.story-mode-printable .gtet-top-console,
html body.story-mode-default .gtet-top-console {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    /* Ensure top console and its contents are clickable on mobile */
    .gtet-top-console,
    html body .gtet-top-console,
    html body.story-mode-editable .gtet-top-console,
    html body.story-mode-night .gtet-top-console,
    html body.story-mode-printable .gtet-top-console,
    html body.story-mode-default .gtet-top-console {
        pointer-events: auto !important;
    }
    
    /* Fix for buttons in all view modes on mobile */
    .gtet-mode-buttons,
    html body .gtet-mode-buttons,
    html body.story-mode-editable .gtet-mode-buttons,
    html body.story-mode-night .gtet-mode-buttons,
    html body.story-mode-printable .gtet-mode-buttons,
    html body.story-mode-default .gtet-mode-buttons {
        pointer-events: auto !important;
        z-index: 10000 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Center on mobile */
    }
    
    /* Ensure expanded console can receive clicks */
    .gtet-top-console.mobile-expanded,
    html body .gtet-top-console.mobile-expanded,
    html body.story-mode-editable .gtet-top-console.mobile-expanded,
    html body.story-mode-night .gtet-top-console.mobile-expanded,
    html body.story-mode-printable .gtet-top-console.mobile-expanded,
    html body.story-mode-default .gtet-top-console.mobile-expanded {
        pointer-events: auto !important;
    }
}

/* === Top Console Width Fix for Desktop === */

/* Limit max-width of top console in desktop view */
@media (min-width: 769px) {
    /* Top console width constraint */
    .gtet-top-console,
    html body .gtet-top-console,
    html body.story-mode-editable .gtet-top-console,
    html body.story-mode-night .gtet-top-console,
    html body.story-mode-printable .gtet-top-console,
    html body.story-mode-default .gtet-top-console {
        max-width: 1024px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 0 15px 15px !important;
    }
    
    /* Ensure content inside is properly laid out */
    .gtet-top-console-inner,
    .gtet-top-console > div,
    .gtet-buttons,
    .gtet-mode-buttons {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* === Story Container Width Constraint === */

/* Match story container with top console width on desktop */
@media (min-width: 769px) {
    /* Constrain story container to match top console width */
    .gtet-story-container,
    html body .gtet-story-container,
    html body.story-mode-editable .gtet-story-container,
    html body.story-mode-night .gtet-story-container,
    html body.story-mode-printable .gtet-story-container,
    html body.story-mode-default .gtet-story-container {
        max-width: 1124px !important; /* Allows all page image containers enough width to display the drop shadows */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Also limit the width of content elements */
    .gtet-title-section,
    .gtet-welcome-message,
    .gtet-page-content,
    .gtet-cover-image,
    .gtet-page-image,
    .gtet-image-controls {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Clear any parent elements that might override the width */
    #main-content .container,
    #content-area,
    #left-area,
    .et_pb_section,
    .et_pb_row {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* === Fixed Top Console === */

/* Base styles for desktop fixed console (overrides the relative positioning) */
@media (min-width: 769px) {
    /* Top console fixed positioning for desktop */
    .gtet-top-console,
    html body .gtet-top-console,
    body.single-story-view .gtet-top-console {
        position: fixed !important;
        top: 0 !important; /* Ensure it's at the very top */
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important; /* Very high z-index */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important; /* Remove all margins */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0 0 15px 15px !important;
        opacity: 1 !important;
        transform: none !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Force reset any top margin from theme */
    html body .gtet-top-console::before,
    html body .gtet-top-console::after {
        display: none !important;
        content: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Add padding to the body to prevent content from being hidden under the fixed console */
    body.single-story-view {
        padding-top: 60px !important;
        margin-top: 0 !important;
    }
    
    /* Remove any top margin from Divi theme elements that might interfere */
    #page-container, 
    #et-main-area, 
    #main-content,
    .container,
    #content-area, 
    #left-area {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Center console content within max width */
    .gtet-top-console > div.gtet-audio-player {
        flex: 0 0 auto !important;
        max-width: 250px !important;
        text-align: left !important;
        margin-right: auto !important;
    }
    
    /* Ensure mode buttons are right-aligned */
    .gtet-top-console .gtet-mode-buttons,
    html body .gtet-top-console .gtet-mode-buttons {
        flex: 0 0 auto !important;
        text-align: right !important;
        margin-left: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
    }
    
    /* Ensure the welcome message or title section has appropriate spacing */
    .gtet-title-section,
    .gtet-welcome-message {
        margin-top: 20px !important;
    }
}

/* Override for any other scripts that might change the position */
@media (min-width: 769px) {
    .gtet-top-console,
    html body .gtet-top-console,
    .single-story-view .gtet-top-console,
    html body.single-story-view .gtet-top-console {
        position: fixed !important;
    }
}

/* Mobile Console Styles with precise specificity */

/* Hamburger Menu Button */
.gtet-hamburger-button,
html body .gtet-hamburger-button,
div.gtet-hamburger-button {
    display: none !important; /* Hidden by default, shown only for mobile */
    position: fixed !important;
    right: 15px !important;
    top: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(156, 0, 255, 0.8) !important;
    border-radius: 4px !important;
    z-index: 1000000 !important; /* Higher than the top console z-index (999999) */
    cursor: pointer !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: auto !important; /* Ensure it's always clickable */
}

/* Hamburger lines */
.gtet-hamburger-button span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    margin: 3px 0 !important;
    background-color: #fff !important;
    border-radius: 3px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Hide hamburger menu on desktop */
@media (max-width: 768px) {
    .gtet-hamburger-button {
        display: flex !important;
    }
    
    /* Top console position for mobile */
    body.single-story-view .gtet-top-console {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 96% !important;
        z-index: 9999 !important;
        transition: transform 0.4s ease, opacity 0.3s ease !important;
        opacity: 0 !important;
        pointer-events: none !important; /* Make it non-interactive when hidden */
    }
    
    /* Expanded state for mobile */
    body.single-story-view .gtet-top-console.expanded {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: all !important; /* Make it interactive when visible */
    }
    
    /* Give space for the fixed top console when expanded */
    body.single-story-view .gtet-top-console.expanded + .gtet-title-section {
        margin-top: 80px !important;
    }
    
    /* Animation for hamburger to X */
    .gtet-hamburger-button.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .gtet-hamburger-button.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .gtet-hamburger-button.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }
}

/* Override for any other scripts that might affect the top console */
.gtet-top-console.mobile-collapsed {
    transform: translateX(-50%) translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important; 
}

.gtet-top-console.mobile-expanded {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Top console layout improvements for desktop */
@media (min-width: 769px) {
    /* Layout for top console interior content */
    .gtet-top-console,
    html body .gtet-top-console {
        display: flex !important;
        flex-wrap: nowrap !important; /* Keep items in a single row */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 20px !important;
        max-width: 100% !important;
    }
    
    /* Audio player container */
    .gtet-top-console .gtet-audio-player,
    html body .gtet-top-console .gtet-audio-player {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 350px !important; 
        margin-right: 20px !important;
    }
    
    /* Mode buttons container */
    .gtet-top-console .gtet-mode-buttons,
    html body .gtet-top-console .gtet-mode-buttons {
        flex: 1 0 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 5px !important;
        margin-left: auto !important;
    }
    
    /* Individual mode buttons */
    .gtet-top-console .gtet-mode-buttons a,
    .gtet-top-console .gtet-mode-button {
        margin: 0 3px !important;
        flex: 0 0 auto !important;
    }
    
    /* First button (Back to Stories) */
    .gtet-top-console .gtet-mode-buttons a:first-child,
    .gtet-top-console .gtet-mode-button:first-child {
        margin-left: 0 !important;
    }
    
    /* Last button */
    .gtet-top-console .gtet-mode-buttons a:last-child,
    .gtet-top-console .gtet-mode-button:last-child {
        margin-right: 0 !important;
    }
}

/* Force override for top positioning - highest priority */
html body .gtet-top-console,
body.single-story-view .gtet-top-console,
html body.single-story-view .gtet-top-console,
.gtet-top-console {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 5px !important;
}

/* Handle potential admin bar */
body.admin-bar .gtet-top-console {
    top: 32px !important; /* Standard WordPress admin bar height */
}

@media screen and (max-width: 782px) {
    body.admin-bar .gtet-top-console {
        top: 46px !important; /* Mobile WordPress admin bar height */
    }
}

/* Clear any Divi theme specific positioning */
#et-main-area, #main-content, #page-container {
    padding-top: 0 !important;
}

/* Override any potential theme styles that might push down the console */
@media (min-width: 769px) {
    .gtet-top-console,
    html body .gtet-top-console,
    body.single-story-view .gtet-top-console {
        top: 0 !important;
        position: fixed !important;
        z-index: 999999 !important;
    }
    
    body.admin-bar .gtet-top-console {
        top: 32px !important;
    }
    
    @media screen and (max-width: 782px) {
        body.admin-bar .gtet-top-console {
            top: 46px !important;
        }
    }
    
    /* Remove any potential transformations */
    html body .gtet-top-console {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* === FIX: Always show top console on desktop, even if mobile-collapsed class is present === */
@media (min-width: 769px) {
    /* Super high-specificity selector to override any other rules */
    body.single-story-view .gtet-top-console.mobile-collapsed,
    html body.single-story-view .gtet-top-console.mobile-collapsed,
    body.story-mode-editable .gtet-top-console.mobile-collapsed,
    body.story-mode-night .gtet-top-console.mobile-collapsed,
    body.story-mode-printable .gtet-top-console.mobile-collapsed,
    body.story-mode-default .gtet-top-console.mobile-collapsed,
    html body.story-mode-default .gtet-top-console.mobile-collapsed,
    html body.story-mode-editable .gtet-top-console.mobile-collapsed,
    html body.story-mode-night .gtet-top-console.mobile-collapsed,
    html body.story-mode-printable .gtet-top-console.mobile-collapsed,
    html body .gtet-top-console.mobile-collapsed,
    div.gtet-top-console.mobile-collapsed {
        /* Reset all properties that might hide the console */
        display: flex !important; 
        opacity: 1 !important;
        max-height: none !important;
        transform: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        padding: 5px 20px !important;
    }
}