/* Token namespace: this page loads src/styles/tokens.css (--surface-*, --border-*,
   --fg*, --bg-*), NOT src/styles/base/variables.css (--color-*). Every --color-*
   reference here resolved to nothing, which made the whole declaration invalid at
   computed-value time — e.g. .journal-modal-content lost its background AND its
   border. Use the tokens.css names with a literal fallback; do not reintroduce
   --color-*, and do not load variables.css here (two token systems on one page
   is the cozy-persona-token-leak trap). */

        :root {
            --accent: #4facfe;
            --accent-2: #9479ff;
            --accent-warm: #f97316;
            --success: #34d399;
            --danger: #ef4444;
            --glass-bg: var(--surface-1, rgba(8, 13, 26, 0.75));
            --glass-border: var(--border-subtle, rgba(148, 121, 255, 0.22));
            --shadow-lg: 0 45px 120px rgba(15, 23, 42, 0.45);
            --text-primary: var(--fg, #e6edf3);
            --text-muted: var(--fg-muted, #94a3b8);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg-body, #0b0f14);
            color: var(--text-primary);
            min-height: 100vh;
            /* D-03: Make body a flex column so the injected .dashboard-footer
               sits flush under the main content instead of leaving a ~900px
               empty band below the last entry card. */
            display: flex;
            flex-direction: column;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .journal-page {
            max-width: 1200px;
            margin: 0 auto;
            padding: clamp(2rem, 4vw, 3.5rem) 1.6rem 2rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            width: 100%;
            /* Don't force main to grow beyond its content — the footer
               should sit just below the entries list, not be pushed to
               the viewport bottom on short content. */
        }

        .glass-panel {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 32px;
            box-shadow: var(--shadow-lg);
            padding: clamp(1.8rem, 4vw, 2.6rem);
        }

        .brand-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1.35rem;
            border-radius: 999px;
            background: var(--surface-2, rgba(15, 23, 42, 0.85));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            box-shadow: 0 18px 44px rgba(79, 172, 254, 0.28);
            text-decoration: none;
            color: var(--text-primary);
            font-weight: 600;
            letter-spacing: 0.04em;
        }

        .brand-chip img {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            box-shadow: 0 12px 28px rgba(79, 172, 254, 0.3);
        }

        .brand-chip-text {
            font-size: 1.2rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.65rem 1.6rem;
            border-radius: 999px;
            border: none;
            font-weight: 600;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: all 0.25s ease;
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            color: var(--text-primary);
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.35);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 26px 58px rgba(79, 172, 254, 0.28);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #05070f;
            box-shadow: 0 24px 60px rgba(148, 121, 255, 0.35);
        }

        .btn-primary:hover {
            box-shadow: 0 32px 70px rgba(148, 121, 255, 0.45);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #05070f;
            box-shadow: 0 22px 52px rgba(102, 126, 234, 0.28);
        }

        .btn-outline {
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
        }

        .btn-outline:hover {
            border-color: var(--border-strong, rgba(79, 172, 254, 0.35));
            box-shadow: 0 22px 52px rgba(79, 172, 254, 0.28);
        }

        .journal-hero {
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            display: flex;
            flex-direction: column;
            gap: clamp(1.4rem, 3vw, 2.5rem);
        }

        .hero-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .hero-link {
            white-space: nowrap;
        }

        .hero-body h1 {
            margin: 0 0 0.75rem 0;
            font-size: clamp(2.2rem, 4.5vw, 3.3rem);
            letter-spacing: -0.02em;
        }

        .hero-body p {
            margin: 0;
            color: var(--text-muted);
            font-size: 1.05rem;
            max-width: 620px;
            line-height: 1.7;
        }

        /* =========================================================
           Journal Action Cards (review M6)
           =========================================================
           Each card IS the action, not a description of one. Taps
           the whole card. Primary card (Just talk) is highlighted
           in brand accent so the voice-first path is obvious at a
           glance. All cards min-height: 150px so tap targets are
           oversized for the 55+ audience.
        */
        .journal-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.1rem;
            margin-top: 1.5rem;
        }

        .journal-action-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
            min-height: 150px;
            padding: 1.5rem 1.6rem;
            border-radius: 20px;
            border: 1.5px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            box-shadow: var(--elev-2, 0 24px 60px rgba(15, 23, 42, 0.28));
            color: var(--fg, #f8fafc);
            text-align: left;
            font: inherit;
            cursor: pointer;
            transition: transform 0.15s ease, border-color 0.2s ease,
                        background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .journal-action-card:hover {
            border-color: var(--border-strong, rgba(79, 172, 254, 0.35));
            background: var(--surface-2, rgba(15, 23, 42, 0.85));
            transform: translateY(-2px);
            box-shadow: var(--elev-3, 0 30px 72px rgba(15, 23, 42, 0.4));
        }

        .journal-action-card:focus-visible {
            outline: 3px solid var(--accent-cyan, #9580ff);
            outline-offset: 3px;
        }

        .journal-action-card:active {
            transform: scale(0.98);
        }

        /* Primary card — voice. Highlighted so the elder user knows
           which path the product recommends. */
        .journal-action-primary {
            background: linear-gradient(135deg,
                hsla(var(--primary-hue, 250), 80%, 45%, 0.85),
                hsla(var(--primary-hue, 250), 90%, 35%, 0.95));
            border-color: hsla(var(--primary-hue, 250), 100%, 75%, 0.55);
            box-shadow: var(--elev-3, 0 24px 60px rgba(79, 172, 254, 0.28));
        }

        .journal-action-primary:hover {
            background: linear-gradient(135deg,
                hsla(var(--primary-hue, 250), 85%, 50%, 0.95),
                hsla(var(--primary-hue, 250), 95%, 40%, 1));
            border-color: hsla(var(--primary-hue, 250), 100%, 85%, 0.75);
            box-shadow: var(--elev-4, 0 32px 80px rgba(79, 172, 254, 0.4));
        }

        .jac-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 14px;
            font-size: 1.75rem;
            background: rgba(79, 172, 254, 0.22);
            color: #ffffff;
            flex-shrink: 0;
        }

        .journal-action-primary .jac-icon {
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
        }

        .jac-body {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .jac-title {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -0.01em;
            color: inherit;
        }

        .jac-desc {
            font-size: 0.92rem;
            line-height: 1.45;
            color: var(--fg-muted, rgba(248, 250, 252, 0.72));
        }

        .journal-action-primary .jac-desc {
            color: rgba(255, 255, 255, 0.85);
        }

        .controls-panel {
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
        }

        .panel-header {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .panel-title {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 600;
        }

        .panel-subtitle {
            margin: 0;
            color: var(--text-muted);
            max-width: 520px;
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
        }

        .input-chip {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .chip-label {
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--fg-faded, rgba(148, 163, 184, 0.85));
        }

        .chip-input {
            width: 100%;
            padding: 0.75rem 1.1rem;
            border-radius: 999px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            background: var(--surface-2, rgba(15, 23, 42, 0.85));
            color: var(--text-primary);
            font-size: 0.95rem;
            transition: all 0.25s ease;
        }

        .chip-input:focus {
            outline: none;
            border-color: var(--border-strong, rgba(79, 172, 254, 0.35));
            box-shadow: 0 16px 38px rgba(79, 172, 254, 0.25);
        }

        .voice-card {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
        }

        .voice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .voice-header h2 {
            margin: 0 0 0.4rem 0;
            font-size: 1.6rem;
        }

        .voice-header p {
            margin: 0;
            color: var(--text-muted);
            max-width: 520px;
            line-height: 1.6;
        }

        .entries-panel {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .entries-header h2 {
            margin: 0 0 0.4rem 0;
            font-size: 1.5rem;
        }

        .entries-header p {
            margin: 0;
            color: var(--text-muted);
        }

        .journal-entries {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
        }

        .journal-entry {
            position: relative;
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            border-radius: 24px;
            padding: 1.75rem;
            box-shadow: 0 28px 65px rgba(15, 23, 42, 0.4);
            overflow: hidden;
            transition: all 0.3s ease;
            backdrop-filter: blur(8px);
        }

        .journal-entry:hover {
            transform: translateY(-4px);
            border-color: var(--border-strong, rgba(79, 172, 254, 0.35));
            box-shadow: 0 38px 80px rgba(79, 172, 254, 0.28);
        }

        .entry-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .entry-title {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .entry-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .entry-actions button {
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.35rem 0.95rem;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .entry-actions button:hover {
            transform: translateY(-2px);
            border-color: var(--border-strong, rgba(79, 172, 254, 0.35));
        }

        .entry-content {
            color: var(--fg, #e6edf3);
            line-height: 1.7;
            margin-bottom: 1.1rem;
        }

        .entry-meta {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .entry-tags {
            display: flex;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.75rem;
            border-radius: 999px;
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            font-size: 0.75rem;
            color: var(--text-primary);
        }

        .journal-loading,
        .journal-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 2.5rem 1.5rem;
            border-radius: 24px;
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px dashed var(--border-subtle, rgba(148, 121, 255, 0.22));
            color: var(--text-muted);
        }

        .journal-empty h3 {
            margin: 0 0 0.75rem 0;
            font-size: 1.4rem;
            color: var(--text-primary);
        }

        .journal-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
        }

        .pagination-btn {
            min-width: 140px;
        }

        .pagination-info {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .journal-modal {
            position: fixed;
            inset: 0;
            background: rgba(5, 10, 20, 0.9);
            backdrop-filter: blur(16px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            z-index: 20000;
        }

        .journal-modal-content {
            position: relative;
            max-width: min(95vw, 1200px);
            width: 100%;
            max-height: 92vh;
            overflow-y: auto;
            border-radius: 32px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            background: var(--surface-2, rgba(15, 23, 42, 0.85));
            box-shadow: 0 55px 120px rgba(15, 23, 42, 0.5);
        }

        /* Anchored to the CARD (.journal-modal-content is position:relative),
           not the full-viewport overlay. Scoped to the view modal on purpose:
           #editModalClose carries the same class but lives inside the edit
           modal's flex header, and .journal-edit-modal-content is static — an
           unscoped `position:absolute` would resolve against the fixed overlay
           and throw that button into the viewport corner.
           ⚠️ The buttons ALSO need class="icon-btn" in the markup. Without it
           the blanket `button:not(.icon-btn):not(.danger)` rule in styles.css
           (specificity 0,2,1) beats this one (0,2,0 / formerly 0,1,0) and
           forces `position:relative`, so the button rendered at the card's
           top-LEFT, half outside it (OPEN_TASKS 0e, fixed 2026-08-01). */
        .journal-modal .journal-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .journal-modal-close {
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            border-radius: 14px;
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: var(--fg-muted, #94a3b8);
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .journal-modal-close:hover {
            /* Restated because the markup now carries `icon-btn`, and
               styles.css `.icon-btn:hover` sets `background: rgba(255,255,255,.08)`
               at equal specificity — without this the card would show through
               the button on hover (badly on cozy cream). */
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            color: var(--fg, #e6edf3);
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(79, 172, 254, 0.28);
        }

        .journal-modal-body {
            padding: clamp(1.8rem, 4vw, 2.6rem);
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .journal-modal-header {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .journal-modal-title {
            margin: 0;
            font-size: 1.7rem;
        }

        .journal-modal-date {
            color: var(--text-muted);
        }

        .journal-modal-content-text {
            line-height: 1.7;
            color: var(--fg, #e6edf3);
            font-size: 1.02rem;
            display: grid;
            gap: 1rem;
        }

        .journal-modal-content-text p {
            margin: 0;
        }

        .journal-modal-insights {
            border-radius: 22px;
            padding: 1.4rem;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.45);
        }

        .journal-modal-media {
            border-radius: 22px;
            padding: 1.4rem;
            background: rgba(79, 172, 254, 0.12);
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
        }

        .journal-modal-media h4,
        .journal-modal-insights h4 {
            margin: 0 0 0.75rem 0;
        }

        .media-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.9rem;
        }

        .media-grid .media-item img,
        .media-grid .media-item video {
            width: 100%;
            border-radius: 16px;
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.3);
        }

        /* Document attachments (markdown, pdf, txt, etc.) — clickable link */
        .media-grid .media-item .media-document-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem;
            min-height: 120px;
            text-decoration: none;
            color: var(--fg, #e5e7eb);
            background: rgba(79, 172, 254, 0.08);
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            word-break: break-word;
            text-align: center;
            font-size: 0.85rem;
        }
        .media-grid .media-item .media-document-link:hover {
            background: rgba(79, 172, 254, 0.18);
            transform: translateY(-1px);
        }
        .media-grid .media-item .media-document-link:active {
            transform: translateY(0);
        }

        /* Action buttons in view modal */
        .journal-modal-actions {
            display: flex;
            gap: 0.75rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
        }

        .journal-action-btn {
            flex: 1;
            padding: 0.7rem 1rem;
            border-radius: 14px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            background: rgba(79, 172, 254, 0.08);
            color: var(--fg, #e6edf3);
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .journal-action-btn:hover {
            background: rgba(79, 172, 254, 0.18);
            transform: translateY(-1px);
        }

        .journal-action-btn.danger {
            border-color: rgba(239, 68, 68, 0.35);
            background: rgba(239, 68, 68, 0.08);
        }

        .journal-action-btn.danger:hover {
            background: rgba(239, 68, 68, 0.22);
            border-color: rgba(239, 68, 68, 0.6);
        }

        .journal-action-btn.save {
            border-color: rgba(16, 185, 129, 0.45);
            background: rgba(16, 185, 129, 0.15);
        }

        .journal-action-btn.save:hover {
            background: rgba(16, 185, 129, 0.3);
        }

        /* Edit modal */
        .journal-edit-modal {
            position: fixed;
            inset: 0;
            background: rgba(5, 10, 20, 0.92);
            backdrop-filter: blur(16px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            z-index: 21000;
        }

        .journal-edit-modal-content {
            max-width: min(95vw, 760px);
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 32px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            background: var(--surface-2, rgba(15, 23, 42, 0.85));
            box-shadow: 0 55px 120px rgba(15, 23, 42, 0.5);
        }

        .journal-edit-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem 2rem 0;
        }

        .journal-edit-modal-title {
            margin: 0;
            font-size: 1.4rem;
        }

        .journal-edit-modal-body {
            padding: 1.5rem 2rem 2rem;
        }

        .edit-form-group {
            margin-bottom: 1.2rem;
        }

        .edit-form-group label {
            display: block;
            margin-bottom: 0.4rem;
            color: var(--fg-faded, rgba(148, 163, 184, 0.85));
            font-size: 0.9rem;
        }

        .edit-form-input,
        .edit-form-textarea {
            width: 100%;
            padding: 0.65rem 0.9rem;
            border-radius: 12px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            color: var(--fg, #e6edf3);
            font-size: 1rem;
            font-family: inherit;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        .edit-form-input:focus,
        .edit-form-textarea:focus {
            outline: none;
            border-color: var(--border-strong, rgba(79, 172, 254, 0.35));
        }

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

        .edit-form-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.5rem;
        }

        .image-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(5, 10, 20, 0.92);
            backdrop-filter: blur(14px);
            align-items: center;
            justify-content: center;
            z-index: 21000;
            padding: 2rem;
        }

        .image-modal-content {
            background: var(--surface-2, rgba(15, 23, 42, 0.85));
            border-radius: 28px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            box-shadow: 0 45px 110px rgba(15, 23, 42, 0.5);
            overflow: hidden;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        .image-modal-header {
            padding: 1.2rem 1.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
        }

        .image-modal-title {
            margin: 0;
            font-size: 1.1rem;
        }

        .image-modal-close {
            background: var(--surface-1, rgba(8, 13, 26, 0.75));
            border: 1px solid var(--border-strong, rgba(79, 172, 254, 0.35));
            border-radius: 12px;
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.3rem;
            color: var(--fg-muted, #94a3b8);
            transition: all 0.25s ease;
        }

        .image-modal-close:hover {
            color: var(--fg, #e6edf3);
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(79, 172, 254, 0.28);
        }

        .image-modal-body {
            padding: 1.6rem;
            display: flex;
            justify-content: center;
        }

        .image-modal-body img {
            max-width: min(80vw, 720px);
            max-height: 70vh;
            border-radius: 20px;
            border: 1px solid var(--border-subtle, rgba(148, 121, 255, 0.22));
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.38);
        }

        .journal-loading .loading-icon {
            display: block;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        @media (max-width: 900px) {
            .journal-page {
                padding: 2rem 1.25rem 3rem;
            }

            .journal-hero,
            .controls-panel,
            .voice-card,
            .entries-panel {
                padding: 1.75rem;
            }

            .hero-header .brand-chip {
                display: none;
            }

            .hero-actions {
                width: 100%;
            }

            .hero-link {
                width: 100%;
                justify-content: center;
            }

            .filter-grid {
                grid-template-columns: 1fr;
            }

            .journal-entries {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            .journal-modal {
                padding: 1.25rem;
            }

            .journal-modal-content {
                max-width: 100%;
                border-radius: 26px;
            }

            .journal-modal-body {
                padding: 1.6rem;
            }

            /* Same view-modal scoping as the desktop rule above. */
            .journal-modal .journal-modal-close {
                top: 0.75rem;
                right: 0.75rem;
            }

            .journal-pagination {
                flex-direction: column;
                gap: 0.75rem;
            }

            .pagination-btn {
                width: 100%;
            }
        }

/* 深链接高亮 — 用户从 /chinese/progress.html 起草胶囊跳转到对应条目时
   播放 2.4 秒淡出效果。 */
.journal-entry--deep-linked {
  animation: deep-link-pulse 2.4s ease-out;
  outline: 2px solid rgba(148, 121, 255, 0.7);
  outline-offset: 4px;
  border-radius: 8px;
}
@keyframes deep-link-pulse {
  0%   { background: rgba(148, 121, 255, 0.20); }
  100% { background: transparent; }
}
    
/* §91: an iSpirit-sensed (inferred) mood, made visually distinct from a
   user-entered one — the entry text already reads "~N sensed" / "~N 感知";
   the soft dotted underline + italic keeps it from ever reading as a hard
   user value. Loaded by both EN + CN journal.html. */
.journal-mood-sensed {
    /* No opacity dim — the italic + dotted underline already mark this as an
       inferred (sensed) mood, and opacity:0.85 pushed cozy to 3.93:1, below
       AA on the cream card (sweep-07 B3). The un-dimmed faded tag color clears
       4.5:1. */
    font-style: italic;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}