/* =============================================
   PANEL-OVERLAYS.CSS - Overlay and Indicator Styles
   =============================================
   This file contains styles for:
   - Swipe-down overlay menu (top overlay)
   - Bottom overlay (swipe-up from bottom)
   - Top menu indicator
   - Bottom indicator
   - Overlay chevrons and controls
   - Modal interactions with overlays
   ============================================= */

/* =============================================
   SWIPE-DOWN OVERLAY MENU
   ============================================= */

.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    background: rgba(50, 50, 50, 0.5);
    backdrop-filter: blur(70px);
    -webkit-backdrop-filter: blur(70px);
    z-index: 2000;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.overlay-menu.visible {
    transform: translateY(0);
}

/* Header Bar */
.overlay-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    flex-shrink: 0;
}

.overlay-menu-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.overlay-logo-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.overlay-logo-text {
    font-family: 'NewSpirit-SemiBold', sans-serif;
    font-size: 1.3rem;
    color: white;
    letter-spacing: -0.02em;
}

.overlay-header-create {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(249, 115, 22, 0.8));
    color: white;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: none;
}

.overlay-header-create:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: none;
}

.overlay-header-create i {
    font-size: 0.8rem;
}

/* Tab Bar */
.overlay-menu-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0 20px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.overlay-tab {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.overlay-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.overlay-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}

.overlay-tab.active {
    color: white;
}

.overlay-tab.active::after {
    width: 60%;
}

/* =============================================
   UNIFIED STORY TAB — "Now Playing" View
   ─────────────────────────────────────────────
   Type scale (px, Outfit family throughout):
     xxs   11px   section headers, badges
     xs    12.5px footer links, "Go" button
     sm    13.6px secondary text, counts, icons
     base  15px   list rows, page label
     lg    20px   page number (input)
     xl    24px   current page number (hero)
   ============================================= */

.overlay-story-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* flex: allow children to shrink so tag carousels can scroll */
    padding: 4px 0 0;
}

/* ── Dividers ── */
.overlay-story-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
    flex-shrink: 0;
}

/* ── Social icons row — ghost buttons, centered ── */
.overlay-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 4px 0 0;
}

.overlay-social-icon {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    font-size: 18px;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
}

.overlay-social-icon:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
}

.overlay-social-icon:active {
    transform: scale(0.88);
}

.overlay-social-icon.active .fa-heart {
    color: #ff4757;
}

.overlay-social-icon.active .fa-bookmark {
    color: #ffa502;
}

.overlay-social-count {
    font-family: 'Outfit', sans-serif;
    font-size: 13.6px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Page position + slider ── */
.overlay-story-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.overlay-page-label {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
    max-width: 100%;
}

.overlay-page-label-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.overlay-page-current {
    font-size: 24px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    min-width: 1.5em;
    text-align: center;
    transition: opacity 0.15s;
}

.overlay-page-current:hover {
    opacity: 0.7;
}

.overlay-page-of {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.overlay-page-max {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}

.overlay-page-input {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    text-align: center;
    padding: 4px 8px;
    outline: none;
    max-width: 8em;
}

@media (max-width: 380px) {
    .overlay-page-input {
        font-size: 16px;
        padding: 3px 6px;
        max-width: 6em;
    }
    .overlay-page-current {
        font-size: 20px;
    }
}

.overlay-page-go {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: white;
    background: rgba(139, 92, 246, 0.7);
    border: none;
    border-radius: 12px;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.overlay-page-go:hover { background: rgba(139, 92, 246, 0.9); }
.overlay-page-go:disabled { opacity: 0.5; cursor: default; }

/* Range input only — do not use `.overlay-page-slider` on wrapper divs (NavigationTabView). */
input.overlay-page-slider-input[type="range"] {
    width: 100%;
    max-width: 320px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1.5px;
    outline: none;
    cursor: pointer;
}

input.overlay-page-slider-input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: grab;
    transition: transform 0.15s;
}

input.overlay-page-slider-input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.15);
    cursor: grabbing;
}

input.overlay-page-slider-input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: grab;
}

/* ── Slider track wrapper with bookmark markers ── */
.overlay-slider-track {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 24px;
    display: flex;
    align-items: center;
}

.overlay-slider-track .overlay-page-slider-input[type="range"] {
    max-width: none;
    z-index: 2;
}

/* Bookmark tick marks — thin vertical lines sitting under the slider */
.overlay-slider-marker {
    position: absolute;
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: auto;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    top: 50%;
    margin-top: -6px;
}

.overlay-slider-marker:hover {
    background: rgba(255, 255, 255, 0.7);
    height: 16px;
    margin-top: -8px;
}

.overlay-slider-marker--progress {
    background: rgba(139, 92, 246, 0.8);
    width: 3px;
    height: 14px;
    margin-top: -7px;
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.4);
}

.overlay-slider-marker--progress:hover {
    background: rgba(139, 92, 246, 1);
    height: 18px;
    margin-top: -9px;
}

/* ── List sections (bookmarks, chapters) ── */
.overlay-story-list-section {
    width: 100%;
    text-align: left;
}

.overlay-story-section-header {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 8px;
    text-align: center;
}

/* ── Collapsible section toggle (bookmarks) ── */
.overlay-story-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 20px 4px 20px;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}

.overlay-story-section-toggle:hover {
    opacity: 0.8;
}

.overlay-story-section-toggle .overlay-story-section-header {
    margin: 0;
    text-align: left;
}

.overlay-section-count {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.25);
}

.overlay-section-chevron {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.overlay-list-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    transition: background 0.15s;
    text-align: left;
    gap: 0;
    -webkit-tap-highlight-color: transparent;
}

.overlay-list-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.overlay-list-row:active {
    background: rgba(255, 255, 255, 0.1);
}

.overlay-list-row--progress {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.overlay-list-row--progress:hover {
    background: rgba(139, 92, 246, 0.15);
}

.overlay-list-row-main {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    gap: 0;
    -webkit-tap-highlight-color: transparent;
}

.overlay-list-icon {
    width: 28px;
    flex-shrink: 0;
    font-size: 13.6px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

.overlay-list-row--progress .overlay-list-icon {
    color: rgba(139, 92, 246, 0.8);
}

.overlay-list-label {
    flex: 1;
    font-weight: 500;
}

.overlay-list-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(139, 92, 246, 0.9);
    margin-left: auto;
    padding-left: 8px;
}

.overlay-list-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 13.6px;
    border-radius: 50%;
    transition: all 0.15s;
    margin-left: 4px;
    -webkit-tap-highlight-color: transparent;
}

.overlay-list-remove:hover {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
}

/* ── Carousel sections (tags, related) ── */
.overlay-story-section {
    width: 100%;
    max-width: 100%;
    min-width: 0; /* critical: min-width:auto would equal full tag row width and kill horizontal scroll */
    box-sizing: border-box;
}

.overlay-story-section .horizontal-carousel {
    position: relative;
    padding: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.overlay-story-section .carousel-items {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 16px 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    min-width: 0;
    /* pan-x: horizontal swipe scrolls the row; vertical goes to overlay scroll */
    touch-action: pan-x;
    justify-content: flex-start;
}

/* Desktop / wide viewports: center short rows (mobile stays flex-start above) */
@media (min-width: 769px) {
    .overlay-story-section .carousel-items {
        justify-content: center;
    }
}

@supports (justify-content: safe center) {
    @media (min-width: 769px) {
        .overlay-story-section .carousel-items {
            justify-content: safe center;
        }
    }
}

.overlay-story-section .carousel-items::-webkit-scrollbar {
    display: none;
}

/* Tags: extra end inset so the final pill fully clears the edge + safe area (mobile-first; applies all widths) */
.overlay-story-tags .carousel-items {
    padding-inline-end: max(32px, calc(env(safe-area-inset-right, 0px) + 28px));
    scroll-padding-inline-end: max(24px, env(safe-area-inset-right, 0px));
}

/* ── Bookmark/Chapter section headers — left-aligned to match carousel inset ── */
.overlay-story-bookmarks .overlay-story-section-header,
.overlay-story-chapters .overlay-story-section-header {
    text-align: left;
    padding-left: 20px;
}

/* ── Bookmark & chapter thumbnail cards ── */
.overlay-bookmark-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.overlay-bookmark-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.overlay-bookmark-card:active {
    transform: scale(0.96);
}

.overlay-bookmark-card--progress {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.08);
}

.overlay-bookmark-card--progress:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
}

.overlay-bookmark-card-thumb {
    width: 100%;
    height: 130px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-bookmark-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-bookmark-card-thumb i {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.2);
}

.overlay-bookmark-card--progress .overlay-bookmark-card-thumb i {
    color: rgba(139, 92, 246, 0.5);
}

.overlay-bookmark-card-info {
    padding: 8px 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overlay-bookmark-card-page {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.overlay-bookmark-card--chapter {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.05);
}

.overlay-bookmark-card--chapter:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.overlay-bookmark-card-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(139, 92, 246, 0.9);
}

.overlay-bookmark-card-badge--chapter {
    color: rgba(59, 130, 246, 0.8);
}

.overlay-bookmark-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.overlay-bookmark-card-remove:hover {
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

.overlay-bookmark-card-remove:active {
    background: rgba(255, 80, 80, 0.6);
    color: white;
}

.overlay-bookmark-card-remove i {
    font-size: 10px;
    line-height: 1;
}

/* ── Footer actions (restart, edit, regenerate) ── */
.overlay-story-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.overlay-footer-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.overlay-footer-link:hover {
    color: rgba(255, 255, 255, 0.6);
}

.overlay-footer-link i {
    font-size: 11px;
}

.overlay-footer-owner {
    display: flex;
    align-items: center;
    gap: 4px;
}

.overlay-footer-dot {
    color: rgba(255, 255, 255, 0.15);
    font-size: 13.6px;
}

/* ── WorldInfo tightening inside overlay ── */
.overlay-story-content .world-info-section {
    padding: 0;
    max-width: none;
}

.overlay-story-content .world-info-title {
    margin-bottom: 4px;
}

.overlay-story-content .world-info-creator-row {
    margin-bottom: 6px;
}

.overlay-story-content .world-stats-row {
    margin-bottom: 8px;
}

.overlay-story-content .world-info-description {
    text-align: center;
    margin-bottom: 4px;
}

/* Legacy compat */
.overlay-about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 20px 0;
}

/* Navigation screen content wrapper */
.overlay-navigation-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.overlay-navigation-section {
    width: 100%;
}

.overlay-navigation-section-header {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 2px;
}

/* Restart (world overlay nav tab) — same treatment as legacy `panel.html` inline block */
.overlay-navigation-restart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.overlay-navigation-restart-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.overlay-navigation-restart-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.overlay-navigation-restart-btn i {
    font-size: 0.85rem;
}

.overlay-navigation-bookmarks {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.overlay-navigation-bookmarks::-webkit-scrollbar {
    display: none;
}

.overlay-navigation-bookmark-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    scroll-snap-align: start;
}

.overlay-navigation-bookmark-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.overlay-navigation-bookmark-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-navigation-bookmark-info {
    padding: 10px 12px;
    text-align: left;
}

.overlay-navigation-bookmark-page {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.overlay-navigation-bookmark-type {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.overlay-navigation-bookmark-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    padding: 0;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.overlay-navigation-bookmark-remove:hover {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.overlay-navigation-bookmark-remove:active {
    background: rgba(255, 100, 100, 0.5);
    color: white;
}

.overlay-navigation-bookmark-remove i {
    font-size: 10px;
    line-height: 1;
}

.overlay-navigation-empty {
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
    width: 100%;
}

/* Chapters carousel - same style as bookmarks */
.overlay-navigation-chapters {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.overlay-navigation-chapters::-webkit-scrollbar {
    display: none;
}

.overlay-navigation-chapter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    scroll-snap-align: start;
}

.overlay-navigation-chapter-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.overlay-navigation-chapter-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-navigation-chapter-info {
    padding: 10px 12px;
    text-align: left;
}

.overlay-navigation-chapter-title {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.overlay-menu-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    padding-bottom: 80px; /* Space for drag handle */
    scrollbar-width: none; /* Firefox */
}

.overlay-menu-content::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Each tab panel */
.overlay-menu-screen {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.overlay-menu-screen.active {
    display: flex;
}

/* Story tab: constrain width — do NOT use overflow-x: hidden here; carousel uses
   negative horizontal margins + wider track and the last items would clip */
.overlay-menu-screen[data-screen="0"] {
    max-width: 100%;
}
.overlay-menu-screen[data-screen="0"] > div {
    max-width: 100%;
    min-width: 0;
}
.overlay-menu-screen[data-screen="0"] .overlay-navigation-content {
    max-width: 100%;
    min-width: 0;
}

.overlay-menu-title {
    box-shadow: 0px 2px 0 #444,
        -1px -1px 0 #444,
        1px -1px 0 #444,
        -1px 1px 0 #444,
        0 0 1px rgba(0, 0, 0, 0.2);
}

/* Action buttons container in overlay about section */
.overlay-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 12px;
    justify-content: center;
}

/* Share/restart/edit buttons in overlay about section */
.overlay-share-button,
.overlay-restart-button,
.overlay-edit-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.overlay-share-button:hover,
.overlay-restart-button:hover,
.overlay-edit-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.overlay-share-button:active,
.overlay-restart-button:active,
.overlay-edit-button:active {
    transform: translateY(0);
}

.overlay-about-content .overlay-share-button svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
}

.overlay-restart-button i,
.overlay-edit-button i {
    font-size: 18px;
}

.overlay-menu-world-title {
    font-family: 'NewSpirit-SemiBold', sans-serif;
    font-size: 1.6rem;
    color: white;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Stats row - journey style */
.overlay-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px 0;
    flex-wrap: wrap;
}

.overlay-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.overlay-stat-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.overlay-stat-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 400;
}

.overlay-stat-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

/* Logline with expand/collapse */
.overlay-logline-container {
    position: relative;
    margin: 0 0 16px 0;
    text-align: left;
}

.overlay-menu-logline {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: max-height 0.3s ease;
}

.overlay-logline-container.collapsed .overlay-menu-logline {
    max-height: 3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.overlay-logline-expand {
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
    font-family: 'Outfit', sans-serif;
    transition: color 0.2s ease;
}

.overlay-logline-expand:hover {
    color: rgba(255, 255, 255, 0.9);
}

.overlay-logline-expand i {
    margin-left: 4px;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.overlay-logline-container.collapsed .overlay-logline-expand {
    display: inline-flex;
    align-items: center;
}

.overlay-logline-container.expanded .overlay-logline-expand {
    display: inline-flex;
    align-items: center;
}

.overlay-logline-container.expanded .overlay-logline-expand .expand-text {
    display: none;
}

.overlay-logline-container.expanded .overlay-logline-expand::before {
    content: 'less';
}

.overlay-logline-container.expanded .overlay-logline-expand i {
    transform: rotate(180deg);
}

.overlay-menu-creator {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
}

.overlay-menu-creator a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.overlay-menu-creator a:hover {
    color: white;
    text-decoration: underline;
}

/* =============================================
   OVERLAY JOURNAL STYLES
   ============================================= */

.overlay-journal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-width: 100%;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

.overlay-journal-tabs {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.overlay-journal-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-journal-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

.overlay-journal-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.overlay-journal-panel {
    display: none;
    flex: 1;
    overflow: visible;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

.overlay-journal-panel.active {
    display: flex;
    flex-direction: column;
}

.overlay-journal-chapters,
.overlay-journal-bookmarks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.overlay-journal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    padding: 40px 20px;
}

/* Chapter/Bookmark card with background image */
.overlay-journal-chapter-btn,
.overlay-journal-bookmark-btn {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 2px);
    margin: 0 1px;
    padding: 20px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    min-height: 70px;
    box-sizing: border-box;
    flex-shrink: 0;
    backdrop-filter: blur(1px);
}

/* Background image layer (blurred) */
.overlay-journal-chapter-btn.has-background::after,
.overlay-journal-bookmark-btn.has-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    filter: blur(1px) brightness(0.6);
    border-radius: 15px;
    z-index: 0;
}

/* Overlay gradient */
.overlay-journal-chapter-btn::before,
.overlay-journal-bookmark-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.4) 0%, rgba(20, 20, 40, 0.5) 100%);
    border-radius: 15px;
    z-index: 1;
    transition: all 0.2s ease;
}

.overlay-journal-chapter-btn:hover,
.overlay-journal-bookmark-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.overlay-journal-chapter-btn:hover::before,
.overlay-journal-bookmark-btn:hover::before {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.3) 0%, rgba(20, 20, 40, 0.4) 100%);
}

.overlay-journal-chapter-btn.current {
    border-color: rgba(139, 92, 246, 0.5);
}

.overlay-journal-chapter-btn.current::before {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(109, 40, 217, 0.3) 100%);
}

/* Content positioned above backgrounds */
.overlay-journal-chapter-text {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.overlay-journal-chapter-arrow {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    font-weight: 300;
}

/* Bookmark icon for removing bookmarks */
.overlay-journal-bookmark-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.overlay-journal-bookmark-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fbbf24;
    transform: scale(1.1);
}

/* Bookmarks section grouping */
.bookmarks-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.bookmarks-section:last-child {
    margin-bottom: 0;
}

.bookmarks-section-header {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px;
    margin-bottom: 4px;
}

.overlay-journal-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    padding: 40px 20px;
}

/* Journal Detail View */
.overlay-journal-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.overlay-journal-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.2s ease;
    margin-bottom: 16px;
    align-self: flex-start;
}

.overlay-journal-back:hover {
    color: white;
}

.overlay-journal-detail-content {
    flex: 1;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

.overlay-journal-detail-title {
    font-family: 'Shantell Sans', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: white;
}

.overlay-journal-jump {
    margin-top: 16px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.overlay-journal-jump:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* Journal detail actions container */
.overlay-journal-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    align-items: center;
    flex-shrink: 0;
}

.overlay-journal-detail-actions .overlay-journal-jump,
.overlay-journal-detail-actions .overlay-journal-edit {
    margin-top: 0;
    flex: 1;
    height: 48px;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Journal edit button */
.overlay-journal-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.overlay-journal-edit:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-2px);
}

.overlay-journal-edit i {
    font-size: 0.9rem;
}

/* Journal detail text container */
.overlay-journal-detail-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Journal edit textarea */
.overlay-journal-edit-textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s ease;
}

.overlay-journal-edit-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.overlay-journal-edit-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* =============================================
   JOURNAL CONTENT PANELS (Summary, State, Threads)
   ============================================= */

.overlay-journal-summary,
.overlay-journal-state,
.overlay-journal-threads,
.overlay-journal-preferences {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 20px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Summary panel - story text */
.overlay-journal-summary-text {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    text-align: left !important;
    white-space: pre-wrap;
    width: 100%;
}

/* Summary action buttons container */
.overlay-journal-summary-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
}

.overlay-journal-summary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.overlay-journal-summary-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-1px);
}

.overlay-journal-summary-btn:active {
    transform: translateY(0);
}

.overlay-journal-summary-btn i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.overlay-journal-summary-btn.copied {
    background: rgba(255, 255, 255, 0.12);
}

/* Summary edit mode */
.overlay-journal-summary-edit-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.overlay-journal-summary-textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    resize: none;
    box-sizing: border-box;
    overflow: hidden;
}

.overlay-journal-summary-textarea:focus {
    outline: none;
}

.overlay-journal-summary-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.overlay-journal-summary-btn.cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.overlay-journal-summary-btn.save {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.overlay-journal-summary-btn.save:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.overlay-journal-summary-btn.saving {
    opacity: 0.6;
    pointer-events: none;
}

/* Summary blocks - multiple compressed context sections */
.overlay-journal-summary-blocks {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.overlay-journal-summary-block {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 16px;
    text-align: left;
}

.overlay-journal-summary-block:last-child {
    margin-bottom: 0;
}

.overlay-journal-summary-block-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 6px;
}

.overlay-journal-summary-block-chapters {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    letter-spacing: 0.5px;
}

.overlay-journal-summary-block-edit {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.overlay-journal-summary-block-edit:hover {
    color: rgba(255, 255, 255, 0.8);
}

.overlay-journal-summary-block-edit i {
    font-size: 11px;
}

.overlay-journal-summary-block-content {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.overlay-journal-summary-block-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.overlay-journal-summary-block-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.25);
}

.overlay-journal-summary-block-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Summary header with single edit button */
.overlay-journal-summary-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    width: 100%;
}

.overlay-journal-summary-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.overlay-journal-summary-edit-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.overlay-journal-summary-edit-btn i {
    font-size: 14px;
}

.overlay-journal-summary-edit-btn.locked,
.overlay-journal-summary-edit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.overlay-journal-summary-edit-btn.locked:hover,
.overlay-journal-summary-edit-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: none;
}

.overlay-journal-summary-edit-locked-msg {
    margin: 8px 0 0 0;
    padding: 0;
    max-width: 280px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* State panel - entity cards */
.overlay-journal-state-section {
    width: 100%;
    margin-bottom: 16px;
}

.overlay-journal-state-header {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-left: 2px;
}

.overlay-journal-state-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.overlay-journal-state-name {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.overlay-journal-state-description {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Character cards with headshots */
.overlay-journal-character-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

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

.character-card-headshot {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

/* Match CharacterAvatarCard: center so display_headshot (pre-cropped) looks identical everywhere */
.character-card-headshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.character-card-headshot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
}

.character-card-headshot-placeholder span {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

.character-card-name {
    color: white;
    font-family: 'NewSpirit-SemiBold', sans-serif;
    font-size: 1rem;
    text-transform: capitalize;
}

.character-card-state {
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

.character-card-state em {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

.character-card-state .no-state {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.character-card-archived {
    opacity: 0.5;
}

.character-card-headshot-archived {
    filter: grayscale(100%);
}

.character-card-archived-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: auto;
}

/* Threads panel - narrative thread cards */
.overlay-journal-thread-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    text-align: left;
    box-sizing: border-box;
}

.overlay-journal-thread-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 8px;
}

.overlay-journal-thread-importance {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

.overlay-journal-thread-importance.major {
    color: rgba(251, 191, 36, 0.8);
}

.overlay-journal-thread-importance.minor {
    color: rgba(148, 163, 184, 0.7);
}

.overlay-journal-thread-importance.background {
    color: rgba(150, 150, 150, 0.6);
}

.overlay-journal-thread-name {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.overlay-journal-thread-notes {
    margin: 10px 0 0 0;
    padding: 0 0 0 5px;
    list-style: none;
    text-align: left;
}

.overlay-journal-thread-notes li {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 6px;
    position: relative;
    text-align: left;
}

.overlay-journal-thread-notes li::before {
    content: '•';
    position: absolute;
    left: -14px;
    color: rgba(255, 255, 255, 0.4);
}

.overlay-journal-thread-description {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Preferences panel */
.overlay-journal-preferences-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.overlay-journal-preferences-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
}

.overlay-journal-preferences-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
}

.overlay-journal-preferences-textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.overlay-journal-preferences-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
}

.overlay-journal-preferences-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.overlay-journal-preferences-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.overlay-journal-preferences-error {
    color: #ff6b6b;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
}

.overlay-journal-preferences-saved {
    color: #51cf66;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
}

.overlay-journal-preferences-save {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.overlay-journal-preferences-save:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.25);
}

.overlay-journal-preferences-save:disabled {
    opacity: 0.4;
    cursor: default;
}

.overlay-journal-preferences-save.success {
    border-color: rgba(81, 207, 102, 0.4);
    color: #51cf66;
}

/* Tags in overlay menu - horizontal scrolling like journey-entry-tags */
.overlay-menu-tags {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding: 0.5rem 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}

.overlay-menu-tags::-webkit-scrollbar {
    display: none;
}

/* Ensure tag pills display properly in overlay menu */
.overlay-menu-tags .tag-pill {
    min-height: 28px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Restart pill button in Navigation section */
.overlay-restart-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.overlay-restart-pill i {
    font-size: 14px;
    opacity: 0.8;
}

.overlay-restart-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.overlay-restart-pill:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.98);
}

.overlay-restart-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* About overlay section (tags, related) — shared overlay-about island */
.overlay-menu .overlay-about-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}
/* Match mobile overlay About: 11px, Outfit Bold, uppercase, left-aligned above carousel */
.overlay-menu .overlay-about-section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0px 0;
    padding: 0;
    text-align: left;
    align-self: flex-start;
}
.overlay-menu .overlay-about-related {
    align-items: flex-start;
}
.overlay-menu .overlay-about-section .horizontal-carousel {
    position: relative;
    padding: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    display: flex;
    justify-content: flex-start;
}
.overlay-menu .overlay-about-section .carousel-items {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 20px 20px 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 100%;
    touch-action: pan-x pan-y;
}
.overlay-menu .overlay-about-section .carousel-items::-webkit-scrollbar {
    display: none;
}

/* Center tags carousel items when it doesn't overflow */
.overlay-menu .overlay-about-section.overlay-about-tags .carousel-items {
    justify-content: center;
}

/* Similar Worlds inside overlay dropdown */
.overlay-menu .similar-worlds-section {
    margin: 16px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    flex: 1;
}

.overlay-menu .similar-worlds-title {
    font-family: 'Shantell Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 auto 20px auto;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-shadow: 1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        0 0 3px rgba(0, 0, 0, 0.8) !important;
}

.overlay-menu .similar-worlds-section .carousel {
    position: relative;
    padding: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    display: flex;
    justify-content: flex-start;
}

.overlay-menu .similar-worlds-section .carousel-items {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 20px 20px 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 100%;
    touch-action: pan-x pan-y;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .overlay-menu .similar-worlds-section .carousel-items {
        justify-content: flex-start;
    }

    .overlay-menu-header {
        padding: 12px 16px;
    }

    .overlay-logo-icon {
        width: 24px;
        height: 24px;
    }

    .overlay-logo-text {
        font-size: 1.1rem;
    }

    .overlay-header-create {
        padding: 4px 12px;
        font-size: 0.85rem;
    }

    .overlay-tab {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

.overlay-menu .similar-worlds-section .carousel-items::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Card look & feel (using continue-card, scoped to overlay) */
.overlay-menu .similar-worlds-section .continue-card {
    flex: 0 0 340px;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.overlay-menu .similar-worlds-section .continue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.overlay-menu .similar-worlds-section .continue-card:hover {
    transform: translateY(-5px) scale(1.03);
    z-index: 2;
}

.overlay-menu .similar-worlds-section .continue-card:hover::before { opacity: 1; }

.overlay-menu .similar-worlds-section .continue-card .world-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.overlay-menu .similar-worlds-section .continue-card .world-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 1;
    border-radius: 8px;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.overlay-menu .similar-worlds-section .continue-card:hover .world-image-overlay { opacity: 0.9; }

.overlay-menu .similar-worlds-section .continue-card .journey-title {
    font-family: 'NewSpirit-SemiBold', sans-serif;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: 56px;
    left: 10px;
    right: 10px;
    z-index: 3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    margin: 0;
    text-wrap: balance;
}

.overlay-menu .similar-worlds-section .continue-card .journey-info {
    padding: 0;
    position: relative;
    z-index: 2;
    background: none;
    min-height: 0;
    height: 0;
    overflow: hidden;
}

/* Metadata (author + logline) shown at bottom of card with clamps */
.overlay-menu .similar-worlds-section .continue-card .journey-meta {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 3;
    text-align: left;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.overlay-menu .similar-worlds-section .continue-card .journey-author {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-menu .similar-worlds-section .continue-card .journey-logline {
    font-size: 0.8rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.4rem;
}

/* Slight dark gradient behind the text area to ensure readability */
.overlay-menu .similar-worlds-section .continue-card .journey-meta::before {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: -6px;
    top: -26px; /* extends behind title+meta region */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.35) 40%,
        rgba(0,0,0,0.7) 100%
    );
    z-index: -1;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .overlay-menu .similar-worlds-section .continue-card {
        flex: 0 0 260px;
        height: 160px;
    }
    .overlay-menu .similar-worlds-section .continue-card .journey-title {
        bottom: 50px;
        font-size: 0.9rem;
    }
    .overlay-menu .similar-worlds-section .continue-card .journey-logline,
    .overlay-menu .similar-worlds-section .continue-card .journey-author {
        font-size: 0.75rem;
    }

    .overlay-menu-content {
        padding: 15px;
        padding-bottom: 100px;
    }

    .overlay-menu-world-title {
        font-size: 1.3rem;
    }

    .overlay-menu-logline {
        font-size: 0.9rem;
    }

    .overlay-title-row {
        gap: 8px;
    }

    .overlay-title-row .overlay-share-button,
    .overlay-title-row .overlay-edit-button {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .overlay-title-row .overlay-share-button svg,
    .overlay-title-row .overlay-edit-button i {
        width: 12px;
        height: 12px;
        font-size: 12px;
    }

    .overlay-menu .similar-worlds-section .carousel {
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
    }

    .overlay-menu .similar-worlds-section .carousel-items {
        padding: 10px 15px 20px 15px;
        gap: 10px;
    }

    .overlay-tab {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .overlay-journal-chapter-btn,
    .overlay-journal-bookmark-btn {
        padding: 16px 14px;
        min-height: 60px;
        font-size: 0.95rem;
    }

    .overlay-journal-chapter-arrow {
        font-size: 1.25rem;
    }
}

/* Optional: creator link style reuse (if we add creator later) */
.overlay-menu .similar-worlds-section .world-creator-link { color: rgba(255,255,255,0.85); text-decoration: none; }
.overlay-menu .similar-worlds-section .world-creator-link:hover { text-decoration: underline; }

/* World card styles for overlay - override center alignment from overlay-menu-screen */
.overlay-menu .similar-worlds-section .world-card {
    text-align: left;
    flex-shrink: 0;
}

.overlay-menu .similar-worlds-section .world-info {
    text-align: left;
}

/* Floating close button for overlay menu - positioned at bottom center */
/* ── Drag-to-dismiss handle (iOS sheet pattern) ── */
.overlay-menu .overlay-drag-dismiss {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 24px);
    cursor: grab;
    z-index: 2100;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.overlay-menu .overlay-drag-dismiss:active {
    cursor: grabbing;
}

.overlay-menu .overlay-drag-handle {
    width: 36px;
    height: 5px;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.2s ease;
}

.overlay-menu .overlay-drag-dismiss:hover .overlay-drag-handle {
    width: 44px;
    background: rgba(255, 255, 255, 0.5);
}

.overlay-menu .overlay-drag-dismiss:active .overlay-drag-handle {
    width: 48px;
    background: rgba(255, 255, 255, 0.6);
}

/* Deprecated - keeping for backwards compatibility */
.overlay-menu-chevron {
    display: none;
}

/* =============================================
   TOP MENU INDICATOR
   ============================================= */

/* Gentle bob — teaches new users "this is interactive, pull me down" */
@keyframes pillBob {
    0%   { transform: translateX(-50%) translateY(0); }
    40%  { transform: translateX(-50%) translateY(5px); }
    60%  { transform: translateX(-50%) translateY(2px); }
    80%  { transform: translateX(-50%) translateY(4px); }
    100% { transform: translateX(-50%) translateY(0); }
}

.top-menu-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 32px;
    border-radius: 0 0 14px 14px;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 7px;
    cursor: pointer;
    transition: opacity 0.25s ease;
    z-index: 1500;
    opacity: 0.9;
    overflow: visible;
    /* Bob 3× on load after a short delay, then stop */
    animation: pillBob 0.9s ease-in-out 1s 3;
}

/* Pill grip — prominent, clearly interactive */
.top-menu-indicator::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.top-menu-indicator:hover {
    opacity: 1;
}

.top-menu-indicator:hover::before {
    background: rgba(255, 255, 255, 1);
}

.top-menu-indicator i {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
}

/* Hide the chevron — pill grip is the sole affordance */
.top-menu-indicator .overlay-menu-trigger-icon {
    display: none;
}

/* Journal notification dot - shows when new chapter is added */
.top-menu-indicator .journal-notification-dot {
    display: block;
    position: absolute;
    top: 12px;
    right: -3px;
    width: 7px;
    height: 7px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1501;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.top-menu-indicator.has-notification .journal-notification-dot {
    opacity: 1;
    visibility: visible;
}

/* Journal tab notification dot - shows when new journal content is available */
.overlay-tab {
    position: relative;
}

.overlay-tab .journal-tab-notification-dot {
    display: block;
    position: absolute;
    top: 4px;
    right: -1px;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.overlay-tab.has-notification .journal-tab-notification-dot {
    opacity: 1;
    visibility: visible;
}

/* Journal first-time hint - positioned below the top menu indicator */
#journalFirstTimeHint {
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Arrow pointing up toward the indicator */
#journalFirstTimeHint::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(255, 255, 255, 0.95);
    border-top: none;
}

/* ── Bottom pull-up indicator — drag up or tap to open overlay ── */
.bottom-menu-indicator {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    border-radius: 14px 14px 0 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    cursor: grab;
    z-index: 1500;
    opacity: 0.9;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.bottom-menu-indicator::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.bottom-menu-indicator:hover {
    opacity: 1;
}

.bottom-menu-indicator:hover::before,
.bottom-menu-indicator:active::before {
    width: 44px;
    background: rgba(255, 255, 255, 0.85);
}

/* Bottom pull indicator: hide while overlay is open */
.overlay-menu.visible ~ .bottom-menu-indicator {
    opacity: 0;
    pointer-events: none;
}

/* Top pill: stay above overlay (2200 > 2000) so it stays clickable; chevron shows "close" */
.overlay-menu.visible ~ .top-menu-indicator {
    opacity: 0.95;
    pointer-events: auto;
    z-index: 2200;
    animation: none;
}

.overlay-menu.visible ~ .top-menu-indicator .overlay-menu-trigger-icon {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    transform: rotate(180deg);
    fill: rgba(255, 255, 255, 0.92);
}

/* Hide tap zones and halos when overlay menu is visible */
.overlay-menu.visible ~ .container .tap-zone,
.overlay-menu.visible ~ .container .navigation-halo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show tap zones and halos when overlay menu is hidden */
.container .tap-zone,
.container .navigation-halo {
    transition: opacity 0.3s ease;
}

/* Hide tap zones and halos when bottom overlay is visible */
.bottom-overlay.visible ~ .container .tap-zone,
.bottom-overlay.visible ~ .container .navigation-halo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Disable swipe indicators and interactions when auth modal is active */
body.auth-modal-active .top-menu-indicator,
body.auth-modal-active .bottom-indicator,
body.auth-modal-active .bottom-menu-indicator {
    opacity: 0;
    pointer-events: none;
}

/* Hide navigation indicators when chapter completion panel is visible */
body.chapter-completion-active .top-menu-indicator,
body.chapter-completion-active .bottom-indicator,
body.chapter-completion-active .bottom-menu-indicator {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-100%);
}

body.chapter-completion-active .bottom-indicator,
body.chapter-completion-active .bottom-menu-indicator {
    transform: translateX(-50%) translateY(100%);
}

body.chapter-completion-active .container .tap-zone,
body.chapter-completion-active .container .navigation-halo {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.auth-modal-active .container .tap-zone,
body.auth-modal-active .container .navigation-halo {
    opacity: 0;
    pointer-events: none;
}

body.auth-modal-active #overlayMenu,
body.auth-modal-active #bottomOverlay {
    pointer-events: none;
}

/* Journal modal active state - hide overlays and disable interactions */
body.journal-modal-active .container .tap-zone {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.journal-modal-active .navigation-halo {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.journal-modal-active #overlayMenu,
body.journal-modal-active #bottomOverlay {
    pointer-events: none;
    transform: translateY(-100%);
}

body.journal-modal-active #bottomOverlay {
    transform: translateY(100%);
}

/* Loading screen active state - hide overlays and disable all interactions */
body.loading-screen-active .container .tap-zone {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.loading-screen-active .navigation-halo {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Jump pill stacks above halos (high z-index); hide until journey entry / world preview is dismissed */
body.loading-screen-active .jump-to-latest-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

body.loading-screen-active .top-menu-indicator,
body.loading-screen-active .bottom-indicator,
body.loading-screen-active .bottom-menu-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.loading-screen-active #overlayMenu,
body.loading-screen-active #bottomOverlay {
    pointer-events: none;
    transform: translateY(-100%);
}

body.loading-screen-active #bottomOverlay {
    transform: translateY(100%);
}

/* Chat input active state - disable tap zones so chat input can receive taps */
body.chat-input-active .container .tap-zone {
    pointer-events: none !important;
}

/* =============================================
   UNIFIED BOTTOM ACTION BAR - Three States System
   States: full (pills + input), hinted (pills only), invisible (hidden)
   ============================================= */

.bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(70px);
    -webkit-backdrop-filter: blur(70px);
    z-index: 1800;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

/* =============================================
   ACTION BAR ROW (Pills + Toggle)
   ============================================= */

.action-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px 4px 4px;
    min-height: 44px;
}

/* Action bar home button — leftmost, navigates to homepage. Matches toggle exactly. */
.action-bar-home-btn {
    display: none;
}

body.comic-bubbles .action-bar-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

.action-bar-home-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.action-bar-home-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.2);
}

/* Action bar visibility toggle button - matches pill styling but circular */
.action-bar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

.action-bar-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.action-bar-toggle:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

/* Action bar pills container */
.action-bar-pills {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}

.action-bar-pills::-webkit-scrollbar {
    display: none;
}

/* Action bar pill buttons */
.action-bar-pills {
    /* Subtle left divider separates utility (home/toggle) from story actions */
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 6px;
    margin-left: 2px;
}

.action-bar-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 2px 3px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}


.action-bar-pill:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.18);
}

.action-bar-pill .pill-icon {
    font-size: 14px;
    line-height: 1;
}

.action-bar-pill .pill-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* =============================================
   ACTION BAR INPUT ROW
   ============================================= */

.action-bar-input-row {
    display: flex;
    justify-content: center;
    padding: 0 12px 4px 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-bar-input-row .custom-choice-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    gap: 8px;
    padding: 12px 14px;
}

.action-bar-input-row .custom-choice-container:focus-within {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* =============================================
   STATE: HINTED (default - shows pills only)
   ============================================= */

.bottom-action-bar.state-hinted {
    transform: translateY(0);
}

.bottom-action-bar.state-hinted .action-bar-input-row {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* =============================================
   STATE: FULL (shows pills AND input)
   ============================================= */

.bottom-action-bar.state-full {
    transform: translateY(0);
}

.bottom-action-bar.state-full .action-bar-input-row {
    max-height: 50vh; /* Allow input row to expand with textarea */
    opacity: 1;
    padding-top: 4px;
    padding-bottom: 8px;
}

/* =============================================
   STATE: INVISIBLE (completely hidden)
   ============================================= */

.bottom-action-bar.state-invisible {
    transform: translateY(100%);
    pointer-events: none;
}

/* Fixed control when bar is slid off-screen (sibling of #bottomActionBar — bar itself has pointer-events: none). */
.action-bar-expand-handle {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1850;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-sizing: border-box;
    pointer-events: auto;
}

.action-bar-expand-handle:hover {
    color: #ffffff;
}

.action-bar-expand-handle:active {
    transform: translateX(-50%) scale(0.92);
    opacity: 0.85;
}

/* Legacy classes for backwards compatibility */
.bottom-action-bar.collapsed,
.bottom-action-bar.hidden {
    transform: translateY(100%);
    pointer-events: none;
}

/* Mobile responsive - slightly smaller padding on very small screens */
@media (max-width: 380px) {
    .action-bar-pill {
        padding: 8px 12px;
    }

    .action-bar-input-row {
        padding: 0 8px 4px 8px;
    }
}

/* Hide bar during loading, headshot popup, etc */
body.loading-screen-active .bottom-action-bar,
body.chapter-completion-active .bottom-action-bar,
body.journal-modal-active .bottom-action-bar,
body:has(.headshot-popup) .bottom-action-bar {
    transform: translateY(100%) !important;
    pointer-events: none;
}

/* On choice panels: hide action bar entirely (mobile web) */
body.action-bar-blocked .bottom-action-bar {
    display: none !important;
}

/* Hide bottom indicator when action bar is present */
body:has(.bottom-action-bar) .bottom-indicator {
    display: none;
}

/* =============================================
   BOTTOM DROP-UP OVERLAY
   ============================================= */

.bottom-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 120px;
    max-height: 50vh;
    height: auto;
    background-color: #00000080;
    backdrop-filter: blur(70px);
    -webkit-backdrop-filter: blur(70px);
    z-index: 2000;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 8px 8px 20px 8px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.bottom-overlay.visible {
    transform: translateY(0);
}

.bottom-overlay-header {
    display: none; /* Hide header - keep design minimal */
}

.bottom-overlay-title {
    display: none;
}

.bottom-overlay-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
    overflow: visible;
    gap: 12px;
}

/* Chevron close button - centered above the modal */
.overlay-chevron {
    position: relative;
    align-self: center;
    margin-bottom: 10px;
    width: 36px;
    height: 24px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.overlay-chevron:hover {
    background: rgba(255, 255, 255, 0.2);
}

.overlay-chevron:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.25);
}

.overlay-chevron i {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.bottom-overlay.visible .overlay-chevron i {
    transform: rotate(180deg);
}

/* =============================================
   BOTTOM INDICATOR
   ============================================= */

.bottom-indicator {
    position: fixed;
    bottom: max(0px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: max(30px, 2.5vw);
    height: max(20px, 1.5vh);
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1500;
    opacity: 0.6;
}

.bottom-indicator:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transform: translateX(-50%) translateY(-1px);
}

.bottom-indicator i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.bottom-indicator:hover i {
    color: rgba(255, 255, 255, 0.9);
}

/* Hide bottom indicator when overlay is visible */
.bottom-overlay.visible ~ .bottom-indicator {
    opacity: 0;
    pointer-events: none;
}

/* =============================================
   FIRST-TIME HINTS AND TOOLTIPS
   ============================================= */

.first-time-hint {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.first-time-hint.visible {
    opacity: 1;
}

/* Arrow pointing down toward chevron button */
.first-time-hint::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.95);
}

/* Special positioning for right nav tooltip to prevent cutoff */
#rightNavFirstTimeHint {
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    right: auto;
}

/* Arrow for right nav tooltip pointing right */
#rightNavFirstTimeHint::after {
    bottom: 50%;
    right: -4px;
    left: auto;
    top: auto;
    transform: translateY(50%);
    border-left: 5px solid rgba(255, 255, 255, 0.9);
    border-right: none;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* Persona hint - positioned dynamically via JS */
#personaFirstTimeHint {
    position: fixed !important;
    left: 50%;
    bottom: 70px;
    top: auto !important;
    transform: translateX(-50%);
    z-index: 10000;
    display: block !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px !important;
    border-radius: 12px;
    color: #333 !important;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 1.4;
    box-sizing: border-box;
    overflow: visible;
}

/* Arrow pointing down toward button */
#personaFirstTimeHint::after {
    content: '';
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.6);
    border-bottom: none;
}

/* Gold notification dot on Characters button */
.persona-notification-dot {
    position: absolute;
    top: -2px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #f5c542;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    box-shadow: 0 0 4px rgba(245, 197, 66, 0.6);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.persona-notification-dot.visible {
    opacity: 1;
    visibility: visible;
}

/* Gold border highlight on Characters button */
#charactersActionPill.persona-highlight {
    border-color: #f5c542;
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.4);
}

/* Hide bottom overlay and indicator on choice/action panels */
.bottom-overlay.hidden,
.bottom-indicator.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%) !important;
}

.bottom-indicator.hidden {
    transform: translateX(-50%) translateY(100%) !important;
}

/* =============================================
   BOTTOM OVERLAY CHOICE STYLING
   ============================================= */

.bottom-overlay .custom-choice-container {
    width: 100%;
    max-width: 100%;
    max-height: 40vh;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    gap: 8px;
    overflow-y: auto;
    padding: 12px 14px;
}

.bottom-overlay .custom-choice-container:focus-within {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Manual-only choice styling - make input more prominent */
.custom-choice-container.manual-only {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.custom-choice-container.manual-only .custom-choice-input {
    font-size: 16px;
    min-height: 48px;
    background: transparent;
    border: none;
}

.custom-choice-container.manual-only .custom-choice-input:focus {
    background: transparent;
    outline: none;
}

/* =============================================
   QTE TIMER BAR (for overlays)
   ============================================= */

.qte-timer-bar {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    max-width: 500px;
    margin: 0 auto;
    height: 12px;
    background: rgba(40, 40, 40, 0.95);
    border-radius: 4px;
    overflow: hidden;
    display: none;
    z-index: 9999;
    border: 1px solid #cc3333;
}

.qte-timer-fill {
    height: 100%;
    background: #cc3333;
    width: 100%;
    border-radius: 3px;
    animation: qteCountdown 15s linear forwards;
}

@keyframes qteCountdown {
    from { width: 100%; }
    to { width: 0%; }
}

/* =============================================
   SPEECH BUBBLE POSITIONING BASED ON ACTION BAR STATE
   ============================================= */

/* Bottom-positioned speech bubbles shift down when action bar is invisible */
body.action-bar-invisible .speech-bubble-v2[data-position="bottom"] {
    transform: translateY(50px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure smooth transition when action bar becomes visible again */
body.action-bar-visible .speech-bubble-v2[data-position="bottom"] {
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════
   COMIC BUBBLES — overlay fixes (body.comic-bubbles)
   ══════════════════════════════════════════════════════════════════════ */

/* Fix hardcoded white backgrounds that bleed through on dark panels */
body.comic-bubbles .overlay-tab::after {
    background: currentColor;
}

body.comic-bubbles .overlay-page-slider-input[type="range"]::-webkit-slider-thumb {
    background: rgba(255, 255, 255, 0.9);
}

body.comic-bubbles .overlay-page-slider-input[type="range"]::-moz-range-thumb {
    background: rgba(255, 255, 255, 0.9);
}

/* Ensure bottom action bar has no white bleed */
body.comic-bubbles .bottom-action-bar {
    background: transparent;
}

/* Smooth transition base for bottom bubbles */
body.comic-bubbles .speech-bubble-v2[data-position="bottom"],
body.comic-bubbles .speech-bubble-v2[data-corner="bottomLeft"],
body.comic-bubbles .speech-bubble-v2[data-corner="bottomRight"] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lift bottom speech bubbles when action bar is expanded (state-full: pills + input) */
body.comic-bubbles:has(.bottom-action-bar.state-full) .speech-bubble-v2[data-position="bottom"],
body.comic-bubbles:has(.bottom-action-bar.state-full) .speech-bubble-v2[data-corner="bottomLeft"],
body.comic-bubbles:has(.bottom-action-bar.state-full) .speech-bubble-v2[data-corner="bottomRight"] {
    transform: translateY(-100px);
}

/* Extra lift when keyboard opens (custom input focused) */
body.comic-bubbles .container:has(.custom-choice-input:focus) .speech-bubble-v2[data-position="bottom"],
body.comic-bubbles .container:has(.custom-choice-input:focus) .speech-bubble-v2[data-corner="bottomLeft"],
body.comic-bubbles .container:has(.custom-choice-input:focus) .speech-bubble-v2[data-corner="bottomRight"] {
    transform: translateY(-160px);
}