/* ============================================
   Mobile-first UI/UX Overhaul
   story.nova8x.com — v2.1
   ============================================ */

/* ── GLOBAL MOBILE TOUCH TARGETS ── */
@media (max-width: 768px) {
    /* Ensure minimum touch target 44px */
    .btn, .nav-btn, .genre-pill, .status-pill,
    .tab, .back-btn, .header-btn, .btn-icon,
    .font-ctrl-btn, .outline-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Smooth momentum scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
}

/* ============================================
   INDEX PAGE — Mobile
   ============================================ */
@media (max-width: 640px) {
    /* ── Navbar ── */
    .navbar {
        height: 56px;
        padding: 0 12px;
    }

    .navbar-inner {
        gap: 8px;
    }

    .navbar-brand {
        font-size: 1rem;
        gap: 8px;
    }

    .navbar-brand-icon {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .navbar-actions .btn-sm {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .navbar-actions .btn-sm svg {
        width: 14px;
        height: 14px;
    }

    /* ── Hero compact ── */
    .hero {
        padding: 24px 16px 16px;
    }

    .hero h1 {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 0.875rem;
        margin-bottom: 4px;
    }

    .hero-stats {
        gap: 12px;
        margin-top: 12px;
    }

    .hero-stat {
        font-size: 0.8125rem;
    }

    .hero-stat-value {
        font-size: 1rem;
    }

    /* ── Container ── */
    .container {
        padding: 0 12px;
    }

    /* ── Filters ── */
    .filters-section {
        margin-bottom: 20px;
    }

    .genre-pills, .status-pills {
        gap: 6px;
        padding-bottom: 4px;
        /* horizontal scroll — no wrap */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .genre-pills::-webkit-scrollbar,
    .status-pills::-webkit-scrollbar {
        display: none;
    }

    .genre-pill, .status-pill {
        padding: 8px 14px;
        font-size: 0.75rem;
        flex-shrink: 0;
        border-radius: 20px;
    }

    .status-pills {
        margin-top: 8px;
    }

    /* ── Controls row ── */
    .controls-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 12px;
    }

    .controls-left {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .control-label {
        display: none; /* hide labels on mobile, selects are self-explanatory */
    }

    .controls-row select {
        padding: 8px 10px;
        font-size: 0.75rem;
        min-height: 36px;
    }

    /* ── Story Cards — LIST view on mobile ── */
    .stories-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .story-card {
        flex-direction: row;
        border-radius: 12px;
        overflow: hidden;
    }

    .card-gradient {
        width: 80px;
        height: auto;
        min-height: 100px;
        flex-shrink: 0;
        border-radius: 0;
    }

    .card-number {
        top: 8px;
        left: 8px;
        width: 24px;
        height: 24px;
        font-size: 0.6875rem;
    }

    .card-body {
        padding: 12px;
        gap: 6px;
        flex: 1;
        min-width: 0;
    }

    .card-title {
        font-size: 0.875rem;
        -webkit-line-clamp: 2;
    }

    .card-genre-badge {
        font-size: 0.625rem;
        padding: 1px 8px;
    }

    .card-stats {
        gap: 12px;
        font-size: 0.75rem;
    }

    .card-progress {
        margin-top: 4px;
    }

    .progress-text {
        font-size: 0.625rem;
    }

    .card-footer {
        display: none; /* hide footer in list mode — status is in gradient */
    }

    /* ── Pagination ── */
    .pagination {
        gap: 6px;
        margin: 16px 0 32px;
    }

    .pagination button {
        padding: 10px 16px;
        font-size: 0.8125rem;
        min-height: 44px;
    }

    .pagination-info {
        font-size: 0.75rem;
    }

    /* ── Footer ── */
    .site-footer {
        padding: 24px 16px;
        font-size: 0.75rem;
        margin-top: 24px;
    }
}

/* Tablet tweaks */
@media (min-width: 641px) and (max-width: 900px) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hero {
        padding: 40px 24px 24px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .container {
        padding: 0 20px;
    }
}

/* ============================================
   READ CHAPTER — Mobile
   ============================================ */
@media (max-width: 768px) {
    /* ── Reading container ── */
    .reading-container {
        padding: 70px 16px 110px !important;
        padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ── Header — slimmer ── */
    .reader-header {
        padding: 8px 12px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    .back-btn {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 14px;
    }

    .header-story-title {
        font-size: 13px;
    }

    .header-btn {
        width: 34px;
        height: 34px;
    }

    .header-btn svg {
        width: 16px;
        height: 16px;
    }

    /* ── Chapter header ── */
    .chapter-header {
        margin-bottom: 28px;
        padding-bottom: 24px;
    }

    .chapter-breadcrumb {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .chapter-number {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .chapter-title {
        font-size: 20px !important;
        line-height: 1.35;
    }

    .chapter-meta {
        font-size: 12px;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ── Content — optimized for mobile reading ── */
    .chapter-content {
        font-size: 17px !important;
        line-height: 1.85;
    }

    .chapter-content p {
        margin-bottom: 1.3em;
        text-indent: 1.5em;
    }

    .chapter-content p:first-child::first-letter {
        font-size: 2.4em;
        padding-right: 6px;
    }

    /* ── Outline panel ── */
    .outline-panel {
        border-radius: 10px;
        margin-bottom: 24px;
    }

    .outline-toggle {
        padding: 12px 14px;
        font-size: 13px;
    }

    .outline-content-inner {
        padding: 0 14px 12px;
    }

    .outline-item {
        font-size: 12px;
    }

    /* ── Bottom nav — optimized touch ── */
    .bottom-nav {
        padding: 8px 10px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
    }

    .nav-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 8px;
        flex: 1;
        justify-content: center;
    }

    .nav-btn.primary {
        flex: 1.2; /* slightly wider for "next" */
    }

    /* Chapter selector — compact */
    .chapter-selector {
        height: 40px;
        padding: 0 10px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .chapter-selector select {
        font-size: 12px;
        max-width: 70px;
    }

    /* Font controls already hidden at 768px via original CSS */

    /* ── Settings panel ── */
    .settings-panel {
        padding: 16px 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 16px 16px 0 0;
    }

    .settings-title {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .setting-group {
        margin-bottom: 20px;
    }

    .setting-label {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .theme-options {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .theme-btn {
        font-size: 10px;
        border-radius: 8px;
    }

    .font-options {
        gap: 6px;
    }

    .font-btn {
        padding: 10px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* ── Chapter end ── */
    .chapter-end {
        margin-top: 36px;
        padding-top: 24px;
        font-size: 13px;
    }

    .chapter-end-icon {
        font-size: 20px;
    }
}

/* Very small screens (iPhone SE etc) */
@media (max-width: 375px) {
    .reading-container {
        padding: 65px 12px 105px !important;
    }

    .chapter-title {
        font-size: 18px !important;
    }

    .chapter-content {
        font-size: 16px !important;
        line-height: 1.8;
    }

    .nav-btn {
        padding: 0 8px;
        font-size: 12px;
    }

    .chapter-selector select {
        font-size: 11px;
        max-width: 60px;
    }

    .bottom-nav {
        gap: 4px;
    }
}

/* ============================================
   STORY DETAIL — Mobile
   ============================================ */
@media (max-width: 768px) {
    /* ── Header ── */
    .header {
        padding: 12px 14px;
    }

    .header-content {
        gap: 12px;
    }

    .logo {
        font-size: 1.1rem;
    }

    .nav-links {
        gap: 12px;
    }

    .nav-links a {
        font-size: 0.8rem;
    }

    /* ── Story Hero ── */
    .story-hero {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .story-hero > div:first-child {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 12px !important;
    }

    .story-hero h1,
    .story-hero > div > div > h1 {
        font-size: 1.35rem !important;
        text-align: center;
    }

    /* Cover image — centered, smaller */
    #cover-container img,
    #cover-placeholder {
        width: 100px !important;
        height: 148px !important;
    }

    /* Action buttons — full width row */
    .story-hero > div > div:last-child {
        display: flex !important;
        width: 100%;
        justify-content: center;
        gap: 8px !important;
    }

    .story-hero .btn {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    /* Stats row */
    .story-card-stats {
        justify-content: center;
        gap: 16px;
        margin-top: 12px !important;
    }

    .stat-value {
        font-size: 1.2rem !important;
    }

    .stat-label {
        font-size: 0.7rem !important;
    }

    /* ── Tabs ── */
    .tabs {
        margin-bottom: 16px;
        gap: 2px;
        padding: 3px;
        border-radius: 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        padding: 10px 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: auto;
        border-radius: 8px;
    }

    /* ── Cards generic ── */
    .card {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .card-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start !important;
    }

    /* ── Action bar ── */
    .action-bar {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .action-bar-left {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .action-bar .btn {
        font-size: 0.75rem;
        padding: 8px 12px;
        flex: 1;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    /* ── Bible sections ── */
    .bible-section {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .bible-section-title {
        font-size: 0.875rem;
    }

    /* Characters grid */
    .characters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .character-card {
        padding: 12px;
        border-radius: 10px;
    }

    .character-name {
        font-size: 0.9rem;
    }

    .character-detail {
        font-size: 0.8rem;
    }

    /* ── Outline list ── */
    .outline-list {
        gap: 8px;
    }

    .outline-item {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 10px;
    }

    /* ── Forms ── */
    .form-group {
        margin-bottom: 14px;
    }

    .form-label {
        font-size: 0.8rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: 10px 12px;
        font-size: 0.875rem;
    }

    .form-textarea {
        min-height: 120px;
    }

    /* ── Export row ── */
    .export-row {
        flex-direction: column;
        gap: 8px;
    }

    .export-row .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Log panel ── */
    .log-panel {
        padding: 12px;
        font-size: 0.7rem;
        max-height: 300px;
    }

    /* ── JSON viewer ── */
    .json-viewer {
        padding: 12px;
        font-size: 0.7rem;
        max-height: 300px;
    }

    /* ── Modals ── */
    .modal {
        max-width: 95vw !important;
        margin: 8px;
        border-radius: 12px !important;
    }

    .modal-body {
        padding: 14px;
    }

    .modal-footer {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    /* ── Timeline ── */
    .timeline-line {
        padding-left: 18px;
    }

    /* ── Progress container ── */
    .progress-container {
        padding: 12px;
        border-radius: 10px;
    }

    /* ── Guide/Warning boxes ── */
    .guide-box, .warning-box {
        padding: 10px 12px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    /* ── Continue reading ── */
    #continue-reading {
        padding: 12px !important;
    }

    #continue-reading > div {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .continue-title {
        font-size: 0.9rem;
    }

    .continue-info {
        font-size: 0.8rem !important;
    }

    /* ── Power level cards ── */
    .power-level-card {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* ============================================
   SEARCH, GENRES, LOGIN, REGISTER — Mobile
   ============================================ */
@media (max-width: 640px) {
    /* Search page */
    .search-results {
        gap: 10px;
    }

    /* Login/Register pages */
    .auth-container,
    .login-container,
    .register-container {
        padding: 20px 16px;
        margin: 16px;
        border-radius: 12px;
    }

    .auth-container h1,
    .auth-container h2 {
        font-size: 1.25rem;
    }

    .auth-container .btn {
        width: 100%;
        padding: 12px;
        font-size: 0.9rem;
    }
}

/* ============================================
   NEW STORY PAGE — Mobile
   ============================================ */
@media (max-width: 768px) {
    /* Make the creation form more mobile-friendly */
    .new-story-form,
    .story-form {
        padding: 16px;
    }

    .new-story-form .btn-group,
    .story-form .btn-group {
        flex-direction: column;
    }

    .new-story-form .btn,
    .story-form .btn {
        width: 100%;
    }
}

/* ============================================
   SAFE AREA — iOS notch/dynamic island
   ============================================ */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .navbar {
            padding-top: env(safe-area-inset-top);
        }

        .header {
            padding-top: calc(12px + env(safe-area-inset-top));
        }

        .site-footer {
            padding-bottom: calc(24px + env(safe-area-inset-bottom));
        }
    }
}

/* ============================================
   LANDSCAPE MOBILE — prevent awkward layouts
   ============================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        padding: 16px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reader: tighter padding in landscape */
    .reading-container {
        max-width: 100% !important;
        padding: 60px 24px 100px !important;
    }

    .reader-header,
    .bottom-nav {
        opacity: 0.9;
    }
}

/* ============================================
   ACCESSIBILITY — reduce motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reading-progress {
        transition: none !important;
    }
}
/* ============================================
   Mobile UI/UX Fix v2.2
   - Better modals (bottom sheet on mobile)
   - Better toasts (mobile-safe position)
   - Action buttons in bible sections
   - Status feedback for long operations
   ============================================ */

/* ── TOAST — mobile-safe ── */
#toast-container {
    position: fixed;
    top: auto !important;
    bottom: 80px !important;
    right: 50% !important;
    transform: translateX(50%);
    z-index: 10000 !important;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    width: 90vw;
    max-width: 400px;
    pointer-events: none;
}

#toast-container > div {
    pointer-events: auto;
    width: 100%;
    text-align: center;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
    animation: toastSlideUp 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    backdrop-filter: blur(12px);
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── MODAL — bottom sheet on mobile ── */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0;
    }

    .modal-overlay .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1) !important;
    }

    .modal-overlay.active .modal {
        transform: translateY(0) !important;
    }

    /* Modal handle bar (visual) */
    .modal-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--text-muted, #555);
        border-radius: 2px;
        margin: 0 auto 12px;
        opacity: 0.4;
    }

    .modal-header {
        padding: 12px 16px 12px;
        flex-wrap: wrap;
    }

    .modal-title {
        font-size: 1rem;
        width: 100%;
        text-align: center;
        order: 1;
    }

    .modal-close {
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 1.25rem;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--bg-secondary, rgba(255,255,255,0.1));
    }

    .modal-body {
        padding: 14px 16px !important;
        max-height: 55vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1;
        min-height: 44px;
        justify-content: center;
        font-size: 0.875rem;
    }
}

/* ── BIBLE SECTION TITLE — action buttons row below ── */
@media (max-width: 768px) {
    .bible-section-title {
        flex-wrap: wrap !important;
        gap: 8px;
        padding-bottom: 8px;
    }

    /* Action buttons inside bible section title — full row below */
    .bible-section-title .btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 0.75rem;
        padding: 8px 12px;
        min-height: 38px;
    }

    /* Make the buttons row wrap properly */
    .bible-section-title > .btn:first-of-type {
        margin-top: 4px;
    }

    /* Bible section action-bar buttons */
    .action-bar {
        flex-direction: column;
        gap: 8px;
    }

    .action-bar-left {
        flex-wrap: wrap;
        width: 100%;
        gap: 6px !important;
    }

    .action-bar-left .btn {
        font-size: 0.75rem;
        padding: 8px 10px;
        flex: 1;
        min-width: 0;
        min-height: 40px;
        justify-content: center;
        text-align: center;
    }

    /* Outline/Chapter range inputs */
    .action-bar-left > div {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
    }

    .action-bar-left input.form-input {
        width: 60px !important;
        padding: 8px;
        font-size: 0.8rem;
    }

    /* Guide box */
    .guide-box {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    /* Pagination controls */
    .pagination-controls {
        flex-wrap: wrap;
        gap: 8px !important;
        font-size: 0.8rem;
    }

    .pagination-controls > div {
        flex-wrap: wrap;
        gap: 4px !important;
    }
}

/* ── STATUS INDICATOR — global operation feedback ── */
.op-status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--bg-elevated, #252540);
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: none;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(16px);
    animation: slideUpStatus 0.3s ease-out;
}

.op-status-bar.active {
    display: flex;
}

.op-status-bar .op-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border, rgba(255,255,255,0.1));
    border-top-color: var(--accent, #818cf8);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.op-status-bar .op-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary, #e4e4e7);
    font-weight: 500;
}

.op-status-bar .op-progress {
    font-size: 0.75rem;
    color: var(--accent, #818cf8);
    font-weight: 600;
    flex-shrink: 0;
}

@keyframes slideUpStatus {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── ACCORDION — better touch on mobile ── */
@media (max-width: 768px) {
    .accordion-header {
        padding: 14px 12px !important;
        min-height: 48px;
    }

    .accordion-content {
        padding: 12px !important;
        font-size: 0.85rem;
    }

    .accordion-icon {
        font-size: 14px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Arc accordion buttons */
    .accordion-header .btn {
        font-size: 0.7rem;
        padding: 6px 8px;
        min-height: 32px;
    }
}

/* ── STORY ARCS section buttons on mobile ── */
@media (max-width: 768px) {
    #section-story_arcs .bible-section-title {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    #section-story_arcs .bible-section-title .btn {
        flex: 1;
        min-width: 80px;
    }

    /* Story plan containers inside arcs */
    .arc-blueprint-container {
        padding: 10px !important;
        font-size: 0.8rem;
    }

    .brief-item {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* ── TABS overflow indicator (subtle gradient fade) ── */
@media (max-width: 768px) {
    .tabs {
        position: relative;
    }

    .tabs::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, transparent, var(--bg-secondary, #f4f4f5));
        pointer-events: none;
        border-radius: 0 10px 10px 0;
    }

    [data-theme="dark"] .tabs::after,
    .tabs::after {
        background: linear-gradient(to right, transparent, var(--bg-secondary, #12121a));
    }
}

/* ── CONFIRM DIALOG — better than browser default ── */
@media (max-width: 768px) {
    /* Just make sure native confirm dialogs look ok */
    /* Actual custom confirm would require JS changes */
}

/* ── POWER SYSTEM LEVELS — horizontal scroll on mobile ── */
@media (max-width: 768px) {
    #content-power_system > div > div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
}

/* ── Custom Modal (JS-created) — mobile bottom sheet ── */
@media (max-width: 768px) {
    #storyPlanModal .modal-content,
    #outlineDetailModal .modal-content {
        border-radius: 16px 16px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #storyPlanModal .modal-content > div:first-child,
    #outlineDetailModal .modal-content > div:first-child {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #1e1e2e;
    }

    /* Handle bar for custom modals */
    #storyPlanModal .modal-content > div:first-child::before,
    #outlineDetailModal .modal-content > div:first-child::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 2px;
        margin: 0 auto 8px;
        padding-top: 8px;
    }

    /* Modal body content — better padding & readability */
    #storyPlanModalBody,
    #outlineDetailModalBody {
        padding: 16px !important;
        font-size: 0.875rem;
        line-height: 1.6;
    }

    /* Milestone items, brief items inside modals */
    #storyPlanModalBody .brief-item,
    #storyPlanModalBody [style*="border-bottom"] {
        padding: 10px 0 !important;
    }

    /* Modal footer — sticky at bottom */
    #storyPlanModal .modal-content > div:last-child,
    #outlineDetailModal .modal-content > div:last-child {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: #1e1e2e;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Ensure buttons in modal footer are full-width */
    #storyPlanModal .btn,
    #outlineDetailModal .btn {
        min-height: 44px;
    }
}