/* =============================================
   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;
}

/* Slide-off-screen still leaves a fullscreen fixed layer in the stacking tree; without
 * this it can steal hit-tests from the story panel-logo (same z-index) on web. */
.overlay-menu:not(.visible) {
    pointer-events: none;
}

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

/* The journey overlay's header row is the shared site `AppHeader`
 * (`data-freeroam-shell-header`, rendered in `staticPosition` mode), injected
 * by `StoryReaderOverlay`. Its styles live in `app-header-react.css`; the old
 * bespoke `.overlay-menu-header` / `.overlay-menu-logo` / `.overlay-header-create`
 * rules were removed in the header consolidation. */

/* The AppHeader search dropdown uses a frosted `backdrop-filter` to blur what's
 * behind it. Inside the overlay that can't work: `.overlay-menu` is itself
 * `backdrop-filter: blur(70px)`, and Chromium won't composite a nested
 * backdrop-filter when an ancestor already has one (the inner blur renders
 * nothing, leaving only the ~transparent tint). Fall back to the same solid
 * dark panel used for browsers without backdrop-filter support so the dropdown
 * stays legible over the menu. */
.overlay-menu .search-suggestions-dropdown {
    background: rgba(12, 12, 16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 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 {
    /* UI tier — demoted from 15px so the hero number and description own
       their tiers. "Page" reads as a UI label, not body. */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.overlay-page-current {
    /* Number tier — the lone 24px element so the page number is the visual
       anchor of the nav row. */
    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 {
    /* UI tier — paired with .overlay-page-label-text */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

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

.overlay-page-input {
    /* Number tier (input variant) */
    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;
    /* Caption tier */
    font-size: 11px;
    font-weight: 600;
    color: black;
    background: white;
    border: none;
    border-radius: 12px;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.overlay-page-go:hover { background: rgba(255, 255, 255, 0.85); }
.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;
    /* UI tier — list rows match pill labels and page nav */
    font-size: 14px;
    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;
    /* UI tier */
    font-size: 14px;
    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;
}

/* Related worlds uses shared SectionHead — align its inset with carousel cards.
   `.overlay-story-section` sits inside `.overlay-menu-content`'s 20px padding, and
   `.carousel-items` reapplies 20px padding after the -20px breakout, so zero left
   inset on the head puts the title flush with the first card. */
.overlay-story-related .section-head {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}

/* ── 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;
    /* Caption tier bumped slightly for legibility on a busy card.
       Stays subordinate to the 14px UI tier. */
    font-size: 13px;
    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;
    /* Caption tier — uppercase + letter-spacing makes it read as a section
       label, not body. Same 11px as stat labels and follow btn. */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    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;
}

/* Bookmark on an abandoned branch / pre-restart journey: still navigable, but
   it has no tick on the page slider (its page number belongs to a different
   story line), so dim it and dash the border so it reads as "elsewhere". */
.overlay-navigation-bookmark-card--other-branch {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.18);
}

.overlay-navigation-bookmark-card--other-branch .overlay-navigation-bookmark-thumb img {
    opacity: 0.7;
}

.overlay-navigation-bookmark-card--other-branch .overlay-navigation-bookmark-page {
    color: rgba(255, 255, 255, 0.75);
}

.overlay-navigation-bookmark-card--other-branch .overlay-navigation-bookmark-type {
    font-style: italic;
}

.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: 'Outfit', 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: 'Outfit', 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-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 pull pill + chevron: hide completely while the world menu is open (sheet has its own dismiss). */
.overlay-menu.visible ~ .top-menu-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    animation: none !important;
}

.overlay-menu.visible ~ .top-menu-indicator .overlay-menu-trigger-icon {
    display: none !important;
}

/* Hide tap zones, side nav halos, and jump pill when overlay menu is visible */
.overlay-menu.visible ~ .container .tap-zone,
.overlay-menu.visible ~ .container .navigation-halo,
.overlay-menu.visible ~ .container .jump-to-latest-btn {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    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;
}

/* Panel text edit active state — owner is editing a speech bubble.
   Mirrors journal-modal-active: hide overlay menus, disable tap zones,
   suppress the navigation halo, and lock page scroll so nothing moves
   under the editor. */
body.panel-text-edit-active {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: none;
}
body.panel-text-edit-active .container .tap-zone,
body.panel-text-edit-active .container .navigation-halo {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.panel-text-edit-active #overlayMenu,
body.panel-text-edit-active #bottomOverlay {
    pointer-events: none;
    transform: translateY(-100%);
}
body.panel-text-edit-active #bottomOverlay {
    transform: translateY(100%);
}
body.panel-text-edit-active .top-menu-indicator,
body.panel-text-edit-active .bottom-indicator,
body.panel-text-edit-active .bottom-menu-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.panel-text-edit-active .bottom-action-bar {
    pointer-events: none !important;
    opacity: 0 !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;
}

/* GrowthBook action_bar_input_always_open / action_bar_input_open_after_first_choice */
.bottom-action-bar--persist-input.state-full .action-bar-input-row {
    /* Match (and exceed) control's 50vh ceiling so the row grows with the
       textarea as the user types — the prior 56px hard cap pinned the row
       to one line, and 50vh still left room for one floor (Cloudflare /
       browser cache) to keep serving the old rule for a while. `100vh` +
       `!important` is large enough that nothing in the cascade short of an
       explicit fixed-pixel cap can reintroduce the cap; the textarea's own
       `max-height: 45vh` (panel-components.css) is the real ceiling, after
       which it scrolls internally — same shape as control. The smaller
       padding / min-height / send-button overrides below still keep the
       *resting* (empty input) bar visibly shorter than control. */
    max-height: 100vh !important;
    padding-top: 2px;
    padding-bottom: 4px;
    /* `.action-bar-input-row` ships with `overflow: hidden` so the row can
       cleanly collapse via the `max-height: 0` transition on hinted →
       full / full → hinted state changes. While `state-full` is active
       there's nothing useful to clip (the textarea + send button already
       fit inside the row's intrinsic content height), so flip to
       `visible` — this guarantees a stale or unexpected `max-height`
       value (e.g. the cached 56px rule) cannot truncate the textarea. */
    overflow: visible;
}

.bottom-action-bar--persist-input.state-full .action-bar-input-row .custom-choice-container {
    padding: 6px 10px;
    gap: 6px;
    border-radius: 12px;
    /* Anchor the send button to the bottom as the textarea grows — mirrors
       the compact variant's `.action-bar-row--compact` (which uses the same
       pattern) and keeps the button visually pinned at the lower-right of
       the bar instead of drifting toward the vertical center as the input
       elongates. (Default base rule is `align-items: center` — fine while
       the input is one line, distracting once it's three+.) */
    align-items: flex-end;
}

.bottom-action-bar--persist-input .action-bar-input-row .custom-choice-input {
    min-height: 18px;
    font-size: 14px;
    line-height: 1.25;
    /* Mirror the compact variant's textarea sizing model so the JS auto-
       resize in `ActionBar.web.tsx` (`style.height = scrollHeight`) is the
       sole authority on rendered height: explicit `height: auto` defeats
       any cached / inherited fixed height, `max-height: 45vh` is the cap
       at which it switches to internal scrolling, and `overflow-y: auto`
       enables the scrollbar at that point. Same end-state behaviour as
       control — short bar at rest, grows line-by-line with text, then
       internally scrolls past 45vh. */
    height: auto;
    max-height: 45vh;
    overflow-y: auto;
}

/* iOS Safari auto-zooms inputs whose computed font-size is < 16px, and that
   zoom hijacks iOS's normal "lift the fixed-bottom bar above the keyboard"
   behavior — leaving the bar (and keyboard) covering the panel.
   Control variant inherits the base 16px and never trips this, which is why
   the keyboard slides the screen up correctly there. Match that on the
   persist-input variants so the same iOS lift behavior kicks in.
   Desktop keeps the tighter 14px. Mirrors the compact-variant fix below. */
@media (hover: none) and (pointer: coarse) {
    .bottom-action-bar--persist-input .action-bar-input-row .custom-choice-input {
        font-size: 16px;
    }
}

.bottom-action-bar--persist-input .action-bar-input-row .custom-choice-send {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 14px;
}

/* =============================================
   COMPACT ACTION BAR (GrowthBook action_bar_compact_input)
   Single row: rounded text input + circular kebab.
   Visually mirrors the existing custom-choice-container shown when
   the user expanded the default bar via the Direct/Action pill.
   ============================================= */

.bottom-action-bar--compact {
    overflow: visible;
    /* No bar-level scrim/blur for the compact variant: the input chip (its own
       blur(14px) + border) and the phone button float directly over the panel
       image's bottom blur instead of sitting on a frosted bar. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.bottom-action-bar--compact .action-bar-row--compact {
    display: flex;
    /* flex-end so circle buttons stay anchored to the bottom as the input grows. */
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px calc(16px + env(safe-area-inset-bottom, 0px)) 12px;
    /* Match the non-compact `.action-bar-row` (pills row) min-height so the
       bottom-of-viewport footprint is identical — keeps panel content layout
       consistent with the old bar (esp. Android Firefox where the URL bar
       chrome shifts available height in non-trivial ways). */
    min-height: 44px;
}

/* When the input is focused, hide the phone pill and let the input claim the
   full width and a bit more height. */
.bottom-action-bar--compact .action-bar-row--input-focused .action-bar-icon-btn--phone {
    display: none;
}

.bottom-action-bar--compact .action-bar-row--input-focused .action-bar-compact-input {
    max-width: none;
}

/* Auto-grows vertically with the textarea (handleInputChange sets inline
   style.height on the textarea; the flex container then grows to fit). */
.bottom-action-bar--compact .action-bar-compact-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
    /* 36px so the chip and the phone button (same min-height) match exactly. */
    min-height: 36px;
    max-height: 45vh;
    box-sizing: border-box;
    display: flex;
    /* Center the resting single-line placeholder; the send button anchors itself
       to the bottom (align-self below) so it stays put as the textarea grows. */
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 4px 4px 12px;
    /* Frosted glass matching the choice options for a clean, consistent look. */
    background-color: rgba(28, 28, 30, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* `transform` + `max-width` are animated so the NUX upsell can lift JUST
       the input oval and simultaneously shrink it to a narrower mid-screen
       footprint (bar background, icon buttons, and panel bubbles stay put). */
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.2s ease,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-action-bar--compact .action-bar-compact-input:focus-within {
    background-color: rgba(12, 14, 20, 0.88);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 8px 36px rgba(0, 0, 0, 0.55),
        0 2px 12px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.bottom-action-bar--compact .action-bar-compact-input .custom-choice-input {
    min-height: 22px;
    max-height: calc(45vh - 16px);
    line-height: 22px;
    padding: 0;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    /* Allow inline-style height (set by handleInputChange) to take over */
    height: auto;
    overflow-y: auto;
}

/* iOS Safari auto-zooms inputs whose computed font-size is < 16px. Bump to
   16px on touch devices to suppress the zoom; desktop keeps the tighter 14px. */
@media (hover: none) and (pointer: coarse) {
    .bottom-action-bar--compact .action-bar-compact-input .custom-choice-input {
        font-size: 16px;
    }
}

/* Faint placeholder so the rotating typewriter prompt feels like a hint */
.bottom-action-bar--compact .action-bar-compact-input .custom-choice-input::placeholder {
    color: rgba(255, 255, 255, 0.58);
    font-style: normal;
    /* `color` is animated so the placeholder fades up to its high-opacity
       NUX state in step with the lift (and back down on dismissal). */
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NUX upsell: the lifted oval sits over busy panel art — keep the rotating
   hints high-contrast on the dark frosted chip. */
.bottom-action-bar--compact.bottom-action-bar--nux-upsell .action-bar-compact-input .custom-choice-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.bottom-action-bar--compact .action-bar-compact-input .custom-choice-send {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    /* Stay pinned to the bottom of the chip as the textarea grows multi-line. */
    align-self: flex-end;
}

/* ── Icon circles (Characters / Share) — matches WorldCard `.card-menu-btn` ── */
.bottom-action-bar--compact .action-bar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    /* Frosted glass matching the input chip + choice options for a clean, consistent look. */
    background: rgba(28, 28, 30, 0.42);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.bottom-action-bar--compact .action-bar-icon-btn--phone {
    width: auto;
    height: auto;
    /* Match the input chip's min-height exactly so the two sit at equal height. */
    min-height: 36px;
    align-self: stretch;
    gap: 6px;
    padding: 0 12px;
    border-radius: 16px;
}

.bottom-action-bar--compact .action-bar-icon-btn-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.bottom-action-bar--compact .action-bar-icon-btn:hover {
    background: rgba(28, 28, 30, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.bottom-action-bar--compact .action-bar-icon-btn:active {
    transform: scale(0.92);
}

.bottom-action-bar--compact .action-bar-icon-dot {
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Compact bar is always "open" — neutralize the default state-{full|hinted}
   transitions so it doesn't slide / collapse. `state-invisible` still slides
   the bar off-screen via the parent rule, which is desirable for dismissal. */
.bottom-action-bar--compact.state-hinted,
.bottom-action-bar--compact.state-full {
    transform: translateY(0);
}

/* Onboarding preview — visible but inactive until the opening scene ends.
   The phone launcher is EXEMPT: the phone opens view-only during the opening
   (story-advancing phone events are guarded in StoryReaderShell), so it stays
   live and full-strength while the rest of the bar dims. Dim per-child rather
   than on the bar so the launcher can escape it (a child can't undo a parent's
   opacity). */
.bottom-action-bar--locked > :not(.action-bar-row) {
    opacity: 0.42;
    filter: grayscale(0.25);
}

.bottom-action-bar--locked .action-bar-row > :not(.action-bar-icon-btn--phone) {
    opacity: 0.42;
    filter: grayscale(0.25);
}

.bottom-action-bar--locked .custom-choice-input,
.bottom-action-bar--locked .action-bar-icon-btn:not(.action-bar-icon-btn--phone),
.bottom-action-bar--locked .action-bar-pill,
.bottom-action-bar--locked .action-bar-toggle,
.bottom-action-bar--locked .custom-choice-send {
    cursor: not-allowed;
}

/* =============================================
   NUX UPSELL — one-time "Shape the story" hint for brand-new accounts.
   Triggered by the host (StoryReaderShell) after a few panel taps. Lifts
   ONLY the input oval (and its floating label) toward viewport-center; the
   bar background, icon buttons, and any speech bubbles on the panel all
   stay exactly where they were so the page layout doesn't shift.
   Dismissed by tap-outside or first keystroke → host drops the class and
   the input slides back down to the bar along the same easing.
   ============================================= */

/* Shared lift distance — used by both the input oval and the floating label
   below so they animate in lockstep. `min(50vh, 420px)` raises the oval
   close to vertical center on tall viewports while still keeping it inside
   the viewport on short screens.
   `--nux-shift-x` re-centers the oval in the viewport: in the resting bar
   the row is `justify-content: center` over `[input][gap][char][gap][share]`,
   which puts the input center 40px LEFT of viewport center
   (`(gap + icon + gap + icon) / 2 = (8 + 32 + 8 + 32) / 2 = 40px`). Shifting
   the lifted oval by `+40px` lines its center up with the viewport — and
   thus with the world-panel image, which is itself centered. */
.bottom-action-bar--compact.bottom-action-bar--nux-upsell {
    --nux-lift: min(50vh, 420px);
    --nux-shift-x: 40px;
}

/* Lifted state — translate the input upward AND rightward so it sits
   visually centered between the panel edges, shrink its max-width so it
   reads as a focused mid-screen prompt, and bump the fill/border opacity
   so the oval stays legible against busy panel art. The `transition`
   declarations for `transform`, `max-width`, `background-color` and
   `border-color` all live on the base `.action-bar-compact-input` rule
   above, so each property animates in lockstep with the lift. */
.bottom-action-bar--compact.bottom-action-bar--nux-upsell .action-bar-compact-input {
    transform: translate(var(--nux-shift-x), calc(-1 * var(--nux-lift)));
    max-width: min(420px, calc(100vw - 64px));
    /* Lifted over full-bleed panel art — max contrast + deeper drop shadow. */
    background-color: rgba(10, 12, 18, 0.92);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
        0 14px 48px rgba(0, 0, 0, 0.62),
        0 6px 22px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bottom-action-bar--compact.bottom-action-bar--nux-upsell .action-bar-compact-input:focus-within {
    background-color: rgba(8, 10, 16, 0.96);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow:
        0 16px 52px rgba(0, 0, 0, 0.66),
        0 6px 24px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Floating "Shape the story" hint. Positioned absolutely against the bar
   container — when active it translates up by the same amount as the input
   oval so it sits just above the lifted oval. The host only mounts this
   markup while the NUX is active (ActionBar.web.tsx). */
.action-bar-nux-upsell-label {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 18px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.96);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    /* Title is decorative for hit-testing; Skip is interactive (see below). */
    pointer-events: none;
    opacity: 0;
    /* Both `translateX(-50%)` for centering and the vertical offset live on
       the same `transform`; the `--nux-upsell` rule below swaps in the
       lifted translation when active. */
    transform: translate(-50%, 6px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-action-bar--nux-upsell .action-bar-nux-upsell-label {
    opacity: 1;
    /* Match the input-oval lift exactly so the label sits directly above it. */
    transform: translate(-50%, calc(-1 * var(--nux-lift)));
    /* Let the oval lift start first so the label rises into place beneath
       the cursor's focal path rather than appearing flat-footed. */
    transition-delay: 0.12s;
}

.action-bar-nux-upsell-title {
    pointer-events: none;
}

.action-bar-nux-upsell-skip {
    pointer-events: auto;
    margin: 0;
    padding: 2px 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.action-bar-nux-upsell-skip:hover,
.action-bar-nux-upsell-skip:focus-visible {
    color: #fff;
    outline: none;
}

/* Subtle backing glow so the label reads on light panels too. */
.bottom-action-bar--nux-upsell .action-bar-nux-upsell-label::before {
    content: '';
    position: absolute;
    inset: -6px -18px;
    border-radius: 14px;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    z-index: -1;
}

@media (max-width: 480px) {
    .bottom-action-bar--compact .action-bar-row--compact {
        padding: 4px 8px calc(16px + env(safe-area-inset-bottom, 0px)) 8px;
        gap: 6px;
    }
}

/* =============================================
   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 — default (e.g. bottom overlay): compact pill */
.overlay-chevron {
    position: relative;
    align-self: center;
    margin-bottom: 10px;
    width: 36px;
    height: 24px;
    border: none;
    border-radius: 12px;
    background: #3d3d42;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.overlay-chevron:hover {
    background: #4a4a50;
}

.overlay-chevron:active {
    transform: scale(0.95);
    background: #323236;
}

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

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

/*
 * World/story swipe-down menu: single floating disc — not a full-width footer row
 * (flex + full-bleed blur read as a “dark rectangle” under a small pill).
 */
.overlay-menu > .overlay-chevron {
    position: fixed;
    left: 50%;
    bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    margin-bottom: 0;
    align-self: unset;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.45),
        0 3px 10px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    z-index: 2105;
}

.overlay-menu > .overlay-chevron:hover {
    transform: translateX(-50%);
    background: #4a4a50;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.38);
}

.overlay-menu > .overlay-chevron:active {
    transform: translateX(-50%) scale(0.96);
    background: #323236;
}

.overlay-menu > .overlay-chevron i {
    font-size: 0.88rem;
}

/* =============================================
   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;
}

/* Hide persona upsell chrome when the bar is fully slid off-screen (all web variants). */
body.action-bar-invisible #personaFirstTimeHint,
body.action-bar-invisible #personaFirstTimeHint.visible {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.action-bar-invisible .persona-notification-dot.visible {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Persona hint — left/bottom set from StoryReaderShell (Characters pill rect). */
#personaFirstTimeHint {
    position: fixed !important;
    left: 50%;
    bottom: auto;
    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;
}

/* Second-step hint: label left of Characters icon, arrow points right */
#personaFirstTimeHint.persona-hint--point-character::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -5px;
    transform: translateY(-50%);
    border-left: 5px solid rgba(255, 255, 255, 0.6);
    border-right: none;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* 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 (pill bar + compact icon) */
#charactersActionPill.persona-highlight,
#charactersActionPill.action-bar-pill.persona-highlight,
.action-bar-icon-btn--characters.persona-highlight {
    border-color: #f5c542 !important;
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.4) !important;
}

/* Red unread-message dot on the phone button (Instaroam experiment).
   Positioned via the shared `.action-bar-icon-dot` rule above. */
.action-bar-phone-unread-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30; /* iOS-y red */
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 4px rgba(255, 59, 48, 0.65);
}

/* 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 — full-width input box.
   `:has()` lets us scope all of these overrides to the flag's experiment ONLY;
   default-path panels still use the centered, max-width-capped option column. */

/* `.choice-container` (no panel image) ships with `margin: 24px 16px;
   max-width: calc(100vw - 32px); padding: 24px;` which keeps a normal options
   list visually centered. In manual-only the box is meant to span the column,
   so collapse the container's lateral chrome and pin to the viewport bottom
   like `.choice-container-overlay` already does. */
.choice-container:has(.custom-choice-container.manual-only) {
    margin: 0;
    max-width: 100%;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Both choice containers center their flex column (`align-items: center`),
   which collapses `#choiceContent` to its content width and makes `width: 100%`
   on its children circular — short option text → narrow option pills that don't
   reach the screen edges. Stretch the column so option/input children resolve
   `width: 100%` against the full container width (still capped per-child by
   `.choice-option { max-width: 480px }` and `.custom-choice-container
   { max-width: 480px }` on wide viewports). */
.choice-container-overlay > #choiceContent,
.choice-container > #choiceContent {
    align-self: stretch;
    width: 100%;
}

/* Tighten question→box gap (default `.choice-question` reserves space for the
   options list; in manual-only the box is the immediate next element). */
.choice-container-overlay:has(.custom-choice-container.manual-only) .choice-question,
.choice-container:has(.custom-choice-container.manual-only) .choice-question {
    margin-bottom: 4px;
}

.custom-choice-container.manual-only {
    width: 100%;
    max-width: none;
    margin-top: 6px;
}

.custom-choice-container.manual-only .custom-choice-input {
    font-size: 16px;
    min-height: 24px;
    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);
}

/* Persist-input: lift by one slim input row (~50px) so clearance matches hinted (pills-only). */
body.comic-bubbles:has(.bottom-action-bar--persist-input.state-full) .speech-bubble-v2[data-position="bottom"],
body.comic-bubbles:has(.bottom-action-bar--persist-input.state-full) .speech-bubble-v2[data-corner="bottomLeft"],
body.comic-bubbles:has(.bottom-action-bar--persist-input.state-full) .speech-bubble-v2[data-corner="bottomRight"] {
    transform: translateY(-50px);
}

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

body.comic-bubbles:has(.bottom-action-bar--persist-input.state-full) .container:has(.custom-choice-input:focus) .speech-bubble-v2[data-position="bottom"],
body.comic-bubbles:has(.bottom-action-bar--persist-input.state-full) .container:has(.custom-choice-input:focus) .speech-bubble-v2[data-corner="bottomLeft"],
body.comic-bubbles:has(.bottom-action-bar--persist-input.state-full) .container:has(.custom-choice-input:focus) .speech-bubble-v2[data-corner="bottomRight"] {
    transform: translateY(-110px);
}