/* Minimal body style to ensure full height for flex layout */
html,
body
{
    font-family: 'Lora', serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent body scrollbars */
}

.ui-font
{
    font-family: 'Inter', sans-serif;
}

.font-lora
{
    font-family: 'Lora', serif;
}

.font-inter
{
    font-family: 'Inter', sans-serif;
}

.font-roboto
{
    font-family: 'Roboto', sans-serif;
}

.font-merriweather
{
    font-family: 'Merriweather', serif;
}

.font-source-sans-pro
{
    font-family: 'Source Sans Pro', sans-serif;
}


.panel-hidden
{
    display: none !important;
}

#novelSelectionPanel.open,
#novelSelectionPanel.animate-slideInDown
{
    display: block !important;
    animation: slideInDown 0.5s ease-out forwards;
}

#novelSelectionPanel.closed,
#novelSelectionPanel.animate-slideOutUp
{
    animation: slideOutUp 0.5s ease-in forwards;
}

#rightSidePanel.open,
#rightSidePanel.animate-slideInRight
{
    display: block !important;
    animation: slideInRight 0.5s ease-out forwards;
}

#rightSidePanel.closed,
#rightSidePanel.animate-slideOutRight
{
    animation: slideOutRight 0.5s ease-in forwards;
}

#splashScreen.animate-fadeIn
{
    display: flex !important;
    animation: fadeIn 0.5s ease-out forwards;
}

#splashScreen.animate-fadeOut
{
    animation: fadeOut 0.5s ease-in forwards;
}

#characterModal.animate-fadeIn,
#objectModal.animate-fadeIn,
#nsfwModal.animate-fadeIn
{
    display: flex !important;
    animation: fadeIn 0.5s ease-out forwards;
}

#characterModal.animate-fadeOut,
#objectModal.animate-fadeOut,
#nsfwModal.animate-fadeOut
{
    animation: fadeOut 0.5s ease-in forwards;
}


::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track
{
    background: transparent;
}

::-webkit-scrollbar-thumb
{
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover
{
    background-color: rgba(107, 114, 128, 0.7);
}

.dark ::-webkit-scrollbar-thumb
{
    background-color: rgba(75, 85, 99, 0.5);
}

.dark ::-webkit-scrollbar-thumb:hover
{
    background-color: rgba(55, 65, 81, 0.7);
}

.carousel-container
{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.carousel-item
{
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin-right: 1rem;
}

.carousel-item:last-child
{
    margin-right: 0;
}

.character-link,
.object-link
{
    text-decoration: underline;
    text-decoration-color: rgba(128, 128, 128, 0.3);
    color: inherit;
    cursor: pointer;
}

.dark .character-link,
.dark .object-link
{
    text-decoration-color: rgba(160, 160, 160, 0.4);
}

.character-link:hover,
.object-link:hover
{
    text-decoration-color: rgba(0, 0, 0, 0.5);
}

.dark .character-link:hover,
.dark .object-link:hover
{
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.carousel-nav-button
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s;
}

.carousel-nav-button:hover
{
    background-color: rgba(0, 0, 0, 0.6);
}

.carousel-nav-button.prev
{
    left: 0.5rem;
}

.carousel-nav-button.next
{
    right: 0.5rem;
}

@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

@keyframes fadeOut
{
    0%
    {
        opacity: 1;
    }

    100%
    {
        opacity: 0;
    }
}

@keyframes slideInDown
{
    0%
    {
        transform: translateY(-100%);
        opacity: 0;
    }

    100%
    {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutUp
{
    0%
    {
        transform: translateY(0);
        opacity: 1;
    }

    100%
    {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight
{
    0%
    {
        transform: translateX(0);
        opacity: 1;
    }

    100%
    {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInRight
{
    0%
    {
        transform: translateX(100%);
        opacity: 0;
    }

    100%
    {
        transform: translateX(0);
        opacity: 1;
    }
}

/* article images */
#bookContent img.image-reader-width
{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.375rem;
}

#bookContent img.image-full-window
{
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0;
}

#bookContent img.image-sticky-out-left,
#bookContent img.image-sticky-out-right
{
    width: 450px;
    max-width: none;
    height: auto;
    margin-bottom: 1em;
    margin-top: 0.5em;
    border-radius: 0.25rem;
}

#bookContent img.image-sticky-out-left
{
    float: left;
    margin-left: -300px;
    margin-right: 1.5em;
}

#bookContent img.image-sticky-out-right
{
    float: right;
    margin-right: -300px;
    margin-left: 1.5em;
}

/* Sticky Button Tray Styles */
#stickyButtonTray
{
    position: fixed;
    right: 0;
    /* Initial position of the tray (handle partially visible) */
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: stretch;
    transition: right 0.3s ease-in-out;
    /* Smooth transition for the whole tray */
}

#stickyButtonContainer
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space-y-2 */
    background-color: #e5e7eb;
    /* bg-gray-200 */
    padding: 0.5rem;
    /* p-2 */
    border-top-left-radius: 0.375rem;
    /* rounded-l-md */
    border-bottom-left-radius: 0.375rem;
    /* rounded-l-md */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    /* Initially hidden to the right */
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    width: auto;
    /* Or a fixed width like 56px or 60px if buttons are uniform */
}

.dark #stickyButtonContainer
{
    background-color: #374151;
    /* dark:bg-gray-700 */
}

#stickyButtonHandle
{
    width: 1.25rem;
    /* w-5 */
    height: 5rem;
    /* h-20 */
    background-color: #9ca3af;
    /* bg-gray-400 */
    /* dark:bg-gray-500 - handled by direct dark mode style below */
    border-top-left-radius: 0.375rem;
    /* rounded-l-md */
    border-bottom-left-radius: 0.375rem;
    /* rounded-l-md */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 3px rgba(0, 0, 0, 0.1);
    /* Softer shadow for handle */
    position: relative;
    /* For z-index if needed, though flex order should suffice */
    z-index: 10;
    /* Ensure handle is clickable */
    transition: background-color 0.3s ease-in-out;
    /* Smooth bg transition */
}

.dark #stickyButtonHandle
{
    background-color: #6b7280;
    /* dark:bg-gray-500 */
}


#stickyButtonHandle svg
{
    transition: transform 0.3s ease-in-out;
}

/* State when tray is open */
#stickyButtonTray.is-open
{
    right: 0;
    /* Keeps the tray edge aligned to screen edge */
}

#stickyButtonTray.is-open #stickyButtonContainer
{
    transform: translateX(0);
    /* Slide in */
    opacity: 1;
    pointer-events: auto;
}

/* This will make the handle also move with the container */
#stickyButtonTray.is-open #stickyButtonHandle
{
    /* Optional: change handle appearance when open */
    background-color: #a0aec0;
    /* dark:bg-gray-600*/
}


#stickyButtonTray.is-open #stickyButtonHandle svg
{
    transform: rotate(180deg);
}


/* For Auto-Inserted Figures */
#bookContent figure.figure-sticky-out-left,
#bookContent figure.figure-sticky-out-right
{
    width: 450px;
    /* Or your desired fixed width */
    max-width: none;
    /* Override prose max-width if it applies one */
    height: auto;
    margin-bottom: 1em;
    /* Space below the figure */
    margin-top: 0.5em;
    /* Optional: space above */
    border-radius: 0.25rem;
    /* Optional: slight rounding for the figure box */
    /* Add any other common styles for these figures, like box-shadow if desired */
}

#bookContent figure.figure-sticky-out-left
{
    float: left;
    margin-left: -300px;
    /* Adjust based on your reading column's width and desired stick-out amount */
    margin-right: 1.5em;
    /* Space between figure and wrapped text */
}

#bookContent figure.figure-sticky-out-right
{
    float: right;
    margin-right: -300px;
    /* Adjust based on your reading column's width */
    margin-left: 1.5em;
    /* Space between figure and wrapped text */
}

/* Styling for the image inside the auto-inserted figures */
#bookContent figure.figure-sticky-out-left img,
#bookContent figure.figure-sticky-out-right img
{
    width: 100%;
    /* Make image fill the figure's width */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Remove extra space below image */
    border-radius: 0.125rem;
    /* Optional: if figure has rounded corners, image might have slightly smaller ones or none */
}

/* Styling for the figcaption (Tailwind classes are also applied in JS) */
#bookContent figure.figure-sticky-out-left figcaption,
#bookContent figure.figure-sticky-out-right figcaption
{
    /* You can add base CSS here if preferred over solely relying on Tailwind for figcaption */
    /* Example:*/
    padding-top: 0.25em;
    line-height: 1.2;

}



@media (max-width: 767px)
{
    #bookContent figure.figure-sticky-out-left
    {
        width: 45%;
        /* Or other desired responsive width */
        min-width: 175px;
        float: left;
        margin-left: -20px;
        /* Adjusted stick-out for smaller screens */
        margin-right: 20px;
    }

    #bookContent figure.figure-sticky-out-right
    {
        width: 45%;
        /* Or other desired responsive width */
        min-width: 175px;
        float: right;
        margin-left: 20px;
        margin-right: -20px;
        /* Adjusted stick-out for smaller screens */
    }

    #bookContent img.image-sticky-out-left
    {
        width: 45%;
        min-width: 175px;
        float: left;
        margin-left: -20px;
        margin-right: 20px;
    }

    #bookContent img.image-sticky-out-right
    {
        width: 45%;
        min-width: 175px;
        float: right;
        margin-left: 20px;
        margin-right: -20px;
    }
}