/* =====================================================
   HONESTLY, E — Responsive Styles
   Mobile breakpoints, sidebar overlay, layout shifts
   ===================================================== */

/* =====================================================
   Tablet: <= 1024px
   Hide desktop timeline, adjust content area
   ===================================================== */
@media (max-width: 1024px) {
    .app-main {
        grid-template-columns: var(--sidebar-width) 1fr;
    }

    .timeline-sidebar {
        display: none;
    }

    .content-area {
        margin-right: 0;
    }
}

/* =====================================================
   Mobile: <= 768px
   Sidebar becomes overlay, full-width content
   ===================================================== */
@media (max-width: 768px) {
    :root {
        --header-height: 52px;
        --sidebar-width: 280px;
    }

    /* Header adjustments */
    .app-header {
        padding: 0 var(--spacing-md);
    }

    .header-logo span {
        font-size: 16px;
    }

    /* Main layout: single column */
    .app-main {
        grid-template-columns: 1fr;
    }

    /* Sidebar becomes slide-out drawer */
    .sidebar {
        position: fixed;
        left: 0;
        top: var(--header-height);
        bottom: 0;
        width: var(--sidebar-width);
        height: auto;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        box-shadow: none;
        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        top: var(--header-height);
        background: rgba(0, 0, 0, 0.4);
        z-index: 199;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Content area adjustments */
    .content-area {
        padding: var(--spacing-md);
    }

    .content-header {
        margin-bottom: var(--spacing-md);
    }

    .content-title {
        font-size: 24px;
    }

    /* Action bar scroll */
    .action-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--spacing-xs);
    }

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

    .action-btn {
        flex-shrink: 0;
    }

    /* Journal cards */
    .journal-card {
        padding: var(--spacing-md);
    }

    .journal-card-quote {
        font-size: 14px;
    }

    /* Settings panel full width */
    .settings-panel {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    .settings-panel.active {
        right: 0;
    }

    /* Modal adjustments */
    .modal-backdrop {
        padding: var(--spacing-sm);
        align-items: flex-end;
    }

    .modal {
        max-height: 90vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: modalSlideUpMobile 0.3s ease forwards;
    }

    .modal-header {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    }

    .modal-body {
        padding: var(--spacing-md);
    }

    .modal-footer {
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    }

    /* Companion grid: 2 columns on mobile */
    .companion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Lens grid: 2 columns on mobile */
    .lens-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Entry detail */
    .entry-detail-header {
        flex-wrap: wrap;
    }

    .entry-actions {
        flex-wrap: wrap;
    }

    /* Primary companion (sidebar) smaller on mobile */
    .primary-companion-compact {
        max-width: 100px;
    }

    /* Companion tile grid 3 cols on mobile sidebar */
    .companion-tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Companions full grid 2 cols on mobile */
    .companions-full-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    /* Editor content shorter on mobile */
    .editor-content {
        min-height: 150px;
        max-height: 300px;
    }

    /* Menu toggle visible */
    .menu-btn {
        display: flex;
    }

    /* PWA banner stack */
    .pwa-banner {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}

/* =====================================================
   Small Mobile: <= 480px
   Tighter spacing, smaller elements
   ===================================================== */
@media (max-width: 480px) {
    .content-title {
        font-size: 20px;
    }

    .content-subtitle {
        font-size: 13px;
    }

    .action-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .journal-card-header {
        gap: var(--spacing-sm);
    }

    .journal-card-avatar {
        width: 32px;
        height: 32px;
    }

    .badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    .tag {
        font-size: 11px;
        padding: 2px 8px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Companion grid: single column on tiny screens */
    .companion-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* Reflection options */
    .reflection-option {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .reflection-option-title {
        font-size: 14px;
    }

    .reflection-option-desc {
        font-size: 12px;
    }

    /* Entry detail compact */
    .entry-detail-avatar {
        width: 40px;
        height: 40px;
    }

    .entry-section-title {
        font-size: 11px;
    }

    .entry-summary {
        font-size: 14px;
    }

    .entry-transcript {
        font-size: 14px;
    }
}

/* =====================================================
   Desktop: >= 1025px
   Ensure menu button is hidden, sidebar always visible
   ===================================================== */
@media (min-width: 1025px) {
    .menu-btn {
        display: none;
    }

    .sidebar {
        position: sticky !important;
        transform: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }
}

/* =====================================================
   Mobile modal slide-up animation
   ===================================================== */
@keyframes modalSlideUpMobile {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =====================================================
   Print styles
   ===================================================== */
@media print {
    .app-header,
    .sidebar,
    .timeline-sidebar,
    .timeline-fab,
    .action-bar,
    .settings-panel,
    .modal-backdrop,
    .pwa-banner {
        display: none !important;
    }

    .app-main {
        grid-template-columns: 1fr !important;
    }

    .content-area {
        padding: 0 !important;
    }

    .journal-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}