.gallery-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.gallery-tag-sidebar {
    min-width: 0;
}

.gallery-tag-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 18rem;
    overflow-y: auto;
}

.gallery-tag-menu a {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-wrap: anywhere;
}

.gallery-content {
    flex: 1;
    min-width: 0;
}

@media (min-width: 1024px) {
    .gallery-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .gallery-tag-sidebar {
        flex: 0 0 240px;
    }

    .gallery-tag-menu {
        max-height: none;
    }
}

body.theme-light {
    background: #f8fafc;
    color: #0f172a;
}

body.theme-light [class*="bg-slate-900"],
body.theme-light [class*="bg-slate-950"],
body.theme-light [class*="bg-slate-800"] {
    background-color: #ffffff !important;
}

body.theme-light [class*="border-slate-700"],
body.theme-light [class*="border-slate-800"],
body.theme-light [class*="border-slate-900"] {
    border-color: #cbd5e1 !important;
}

body.theme-light [class*="text-slate-100"],
body.theme-light [class*="text-slate-200"],
body.theme-light [class*="text-slate-300"],
body.theme-light [class*="text-slate-400"],
body.theme-light [class*="text-slate-500"],
body.theme-light [class*="text-slate-600"] {
    color: #334155 !important;
}

body.theme-light .text-white {
    color: #161d2c !important;
}

body.theme-light .light-soft-add-btn {
    background-color: #c7d2fe !important;
    border: 1px solid #a5b4fc !important;
    color: #3730a3 !important;
}

body.theme-light .light-soft-add-btn:hover {
    background-color: #a5b4fc !important;
    color: #312e81 !important;
}

body.theme-light .light-soft-image-btn {
    background-color: #bbf7d0 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

body.theme-light .light-soft-image-btn:hover {
    background-color: #86efac !important;
    color: #14532d !important;
}

body.theme-light .light-soft-tag-btn {
    background-color: #ddd6fe !important;
    border: 1px solid #c4b5fd !important;
    color: #5b21b6 !important;
}

body.theme-light .light-soft-tag-btn:hover {
    background-color: #c4b5fd !important;
    color: #4c1d95 !important;
}

body.theme-light .image-overlay-tag {
    color: #1e1b4b !important;
    border-color: #818cf8 !important;
    font-weight: 700;
}

body.theme-light .image-overlay-title {
    color: #ffffff !important;
}

body.theme-light .story-card-hover-overlay {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

body.theme-light .gallery-list-title {
    color: #ffffff !important;
}

.story-comments-panel {
    height: min(72vh, 760px);
    min-height: 420px;
}

.story-comment-list {
    min-height: 0;
}

.story-post-comment {
    background: #1e1b4b;
    border: 1px solid #818cf8;
    color: #e0e7ff;
    overflow-wrap: anywhere;
}

body.theme-light .story-post-comment {
    background: #eef2ff;
    border-color: #6366f1;
    color: #312e81;
}

.comments-backdrop {
    display: none;
}

.modal-comments-backdrop {
    display: none;
    position: fixed;
    z-index: 65;
    inset: 0;
    background: rgb(2 6 23 / 0.65);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.modal-comments-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal-comments-panel {
    position: fixed;
    z-index: 70;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(420px, 40vw);
    height: 100vh;
    height: 100dvh;
    transform: translateX(105%);
    transition: transform 220ms ease;
}

.modal-comments-panel.is-open {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    #storyModal > div:first-child {
        transition: width 220ms ease;
    }

    body.modal-comments-open #storyModal > div:first-child {
        width: calc(100% - min(420px, 40vw));
        margin-left: 0;
        margin-right: auto;
    }

    body.modal-comments-open #modalWindowArea img {
        max-width: calc(100% - 2rem);
    }

    .story-comments-panel {
        position: sticky;
        top: 88px;
    }
}

@media (max-width: 1023px) {
    .modal-comments-backdrop {
        display: block;
    }

    .modal-comments-panel {
        inset: auto 0 0;
        width: 100%;
        height: min(82dvh, 720px);
        transform: translateY(105%);
        border-radius: 1.5rem 1.5rem 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal-comments-panel.is-open {
        transform: translateY(0);
    }

    .story-comments-panel {
        position: fixed;
        z-index: 50;
        inset: auto 0 0;
        width: 100%;
        height: min(82dvh, 720px);
        min-height: 0;
        transform: translateY(105%);
        transition: transform 220ms ease;
        border-radius: 1.5rem 1.5rem 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .story-comments-panel.is-open {
        transform: translateY(0);
    }

    .comments-backdrop {
        display: block;
        position: fixed;
        z-index: 49;
        inset: 0;
        background: rgb(2 6 23 / 0.65);
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    .comments-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }

    body.comments-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-comments-panel,
    .comments-backdrop,
    .modal-comments-panel,
    .modal-comments-backdrop {
        transition: none;
    }
}