@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   MEMORY VIEW — theme-clean-memory-view.css
   Immersive viewer. Default mood only (pm-mood-* additions later).
   ============================================================ */

/* === OVERLAY & CONTAINER === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view
 * @description Root full-screen overlay for the immersive memory viewer.
 *   Completely standalone — does not use pm-modal-overlay.
 *   Hidden by default, shown by adding pm-active.
 * @called-by  pm-modal-memory-view.html
 * @depends-on --pm-z-modal
 * @tags        TODO
 * @updated 2026-04-26
 */
#pm-modal-memory-view {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-modal);
    background: var(--pm-dark-bg);
    flex-direction: column;
}

#pm-modal-memory-view.pm-active {
    display: flex;
}

/* === HEADER BAR === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-header
 * @description Overrides pm-modal-header for the full-screen viewer — dark background,
 *   title+date on left, ✎ and ✕ buttons on right via pm-modal-header-actions.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-header {
    background: var(--pm-surface-1, var(--pm-dark-bg));
    border-bottom-color: var(--pm-overlay-white-faint);
    padding: calc(7px + var(--pm-safe-top)) 16px 7px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-view-header-text
 * @tags        themes
 * @description Configures the header text area in the memory view to fill available space and prevent overflow.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-memory-view-header-text {
    flex: 1;
    min-width: 0;
}

.pm-memory-view-header .pm-button-close {
    width: 29px;
    height: 29px;
    font-size: 0.9rem;
}

.pm-memory-view-header .pm-header-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pm-panel-surface);
    font-size: 0.85rem;
    font-weight: 600;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-scroll
 * @description Scrollable body of the viewer. flex:1 fills remaining height below the header.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
}

/* === CONTROLS OVERLAY (prev/next arrows only — never wiped by JS) === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-controls
 * @description Pointer-events:none overlay holding prev/next arrows over the scroll area.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-hero-prev
 * @description Left navigation arrow for cycling hero assets.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-hero-prev,
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-view-hero-next
 * @tags        themes
 * @description TODO
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-view-hero-next {
    position: absolute;
    top: 35vh;
    transform: translateY(-50%);
    width: 28px;
    height: 32px;
    border: none;
    background: var(--pm-overlay-dark-soft);
    color: var(--pm-panel-surface);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: background 0.15s;
}

.pm-view-hero-prev:hover,
.pm-view-hero-next:hover { background: var(--pm-overlay-dark-mid); }

.pm-view-hero-prev { left: 0; border-radius: 0 6px 6px 0; }
.pm-view-hero-next { right: 0; border-radius: var(--pm-radius-xsmall) 0 0 6px; }

.pm-view-hero-prev[hidden],
.pm-view-hero-next[hidden] { display: none; }

/* date sits under the title in the header bar */
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-view-date
 * @tags        themes
 * @description TODO
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-memory-view-date {
    font-size: 0.72rem;
    color: var(--pm-overlay-white-mid);
    margin: 1px 0 0;
}

/* === HERO === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-hero
 * @description Full-bleed hero media area. Top of image anchored so portrait shots show from the top.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 300px;
    max-height: 700px;
    background: var(--pm-dark-bg);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-memory-view-hero > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.pm-memory-view-hero > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-hero-tap-hint
 * @description Fading hint label on the hero ("Tap to expand"). Fades out automatically.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-hero-tap-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--pm-overlay-dark-mid);
    color: var(--pm-overlay-white-strong);
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: var(--pm-radius-small);
    pointer-events: none;
    animation: pmViewHintFade 3.5s forwards;
}

/* === HERO — VIDEO CONTROLS BAR === */

/**
 * @pm-registry
 * @type css
 * @name pm-view-hero-video-bar
 * @description Custom playback controls bar overlaid at the bottom of the hero video. Gradient fade from black.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-hero-video-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 12px;
    background: linear-gradient(to top, var(--pm-overlay-dark-strong) 0%, transparent 100%);
    z-index: 2;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-play-btn
 * @description Circular play/pause button in the hero video controls bar.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-play-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--pm-overlay-white-strong);
    background: var(--pm-overlay-white-faint);
    color: var(--pm-panel-surface);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pm-view-video-play-btn:hover { background: var(--pm-overlay-white-soft); }

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-seeker
 * @description White range scrubber for hero video progress.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-seeker {
    flex: 1;
    min-width: 60px;
    height: 4px;
    accent-color: var(--pm-panel-surface);
    cursor: pointer;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-time
 * @description Elapsed time display in the hero video controls bar.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-time {
    font-size: 0.7rem;
    color: var(--pm-overlay-white-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-expand-btn
 * @description Expand-to-fullscreen button in the hero video controls bar.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-expand-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--pm-radius-xsmall);
    border: 1px solid var(--pm-overlay-white-mid);
    background: var(--pm-overlay-white-faint);
    color: var(--pm-panel-surface);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.pm-view-video-expand-btn:hover { background: var(--pm-overlay-white-soft); }

/* === HERO — VIDEO LOADING SPLASH === */

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-splash
 * @description Full-hero loading screen shown while a video-only memory buffers. Deep blue gradient background.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-splash {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 20px;
    background: linear-gradient(160deg, var(--pm-dark-bg) 0%, var(--pm-dark-bg) 55%, var(--pm-dark-surface) 100%);
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-loading
 * @description Row of animated dots + "Memory loading…" label inside the video splash screen.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-loading-dot
 * @description Individual animated dot in the loading indicator. Stagger delay set via nth-child.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-loading-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pm-overlay-white-muted);
    animation: pmViewDotPulse 1.4s ease-in-out infinite;
}
.pm-view-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.pm-view-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pmViewDotPulse {
    0%, 80%, 100% { transform: scale(0.65); opacity: 0.35; }
    40%           { transform: scale(1);    opacity: 1; }
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-loading-label
 * @description "Memory loading…" text in the video splash screen.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-loading-label {
    font-size: 0.88rem;
    color: var(--pm-overlay-white-muted);
    letter-spacing: 0.05em;
    margin-left: 4px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-splash-card
 * @description White summary/transcript card shown below the loading indicator while video buffers.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-splash-card {
    background: var(--pm-overlay-white-strong);
    color: var(--pm-text-1);
    border-radius: var(--pm-radius-small);
    padding: 16px 18px;
    font-size: 0.87rem;
    line-height: 1.6;
    width: 100%;
    max-height: 150px;
    overflow: hidden;
    box-shadow: var(--pm-shadow-sheet);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-video-ready-badge
 * @description Pill button that appears on the photo slideshow hero when the background video has finished buffering.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-video-ready-badge {
    display: none;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pm-overlay-dark-strong);
    color: var(--pm-panel-surface);
    border: 1px solid var(--pm-overlay-white-mid);
    border-radius: var(--pm-radius-medium);
    padding: 8px 20px;
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
    white-space: nowrap;
    transition: background 0.15s;
}
.pm-view-video-ready-badge:hover { background: var(--pm-overlay-dark-strong); }

/* === HERO — SLIDESHOW === */

/**
 * @pm-registry
 * @type css
 * @name pm-view-hero-slide
 * @description Individual photo slide in hero crossfade slideshow (photos + audio memories).
 *   All slides stack absolutely. JS toggles pm-view-slide-active to fade between them.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.pm-view-hero-slide.pm-view-slide-active {
    opacity: 1;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-audio-bar
 * @description Audio playback bar sitting directly below the hero. Shown only when memory has audio.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-audio-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--pm-overlay-dark-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* === HERO — AUDIO WAVEFORM (audio-only memories) === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-audio-hero
 * @description Hero area for audio-only memories. Dark gradient with centred animated waveform.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-audio-hero {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--pm-dark-bg) 0%, var(--pm-dark-bg) 60%, var(--pm-dark-surface) 100%);
    gap: 24px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-waveform
 * @description Animated waveform bar container in audio hero. Seven bars pulsing in sequence.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-waveform {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 64px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-wave-bar
 * @description Single animated bar in the audio hero waveform. Paused state stops animation.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-wave-bar {
    width: 6px;
    border-radius: var(--pm-radius-xsmall);
    background: var(--pm-overlay-white-muted);
    animation: pmViewWave 1.1s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

.pm-memory-view-wave-bar:nth-child(1) { height: 22px; animation-delay: 0s; }
.pm-memory-view-wave-bar:nth-child(2) { height: 38px; animation-delay: 0.12s; }
.pm-memory-view-wave-bar:nth-child(3) { height: 56px; animation-delay: 0.24s; }
.pm-memory-view-wave-bar:nth-child(4) { height: 44px; animation-delay: 0.36s; }
.pm-memory-view-wave-bar:nth-child(5) { height: 28px; animation-delay: 0.48s; }
.pm-memory-view-wave-bar:nth-child(6) { height: 48px; animation-delay: 0.6s; }
.pm-memory-view-wave-bar:nth-child(7) { height: 32px; animation-delay: 0.72s; }

.pm-memory-view-wave-bar.pm-wave-paused {
    animation-play-state: paused;
}

/* === HERO — AUDIO CONTROLS === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-audio-controls
 * @description Pill-shaped audio play/scrub/time control bar. Used in audio hero and slideshow overlay.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-audio-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--pm-overlay-dark-mid);
    border-radius: var(--pm-radius-large);
    color: var(--pm-panel-surface);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-audio-play-btn
 * @description Circular play/pause button in the hero audio control bar.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-audio-play-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--pm-btn-gradient, linear-gradient(135deg, var(--pm-reminder), var(--pm-reminder-gradient-end)));
    color: var(--pm-panel-surface);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.pm-view-audio-play-btn:hover { opacity: 0.85; }

/**
 * @pm-registry
 * @type css
 * @name pm-view-audio-seeker
 * @description Range scrubber for hero audio. White accent colour.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-audio-seeker {
    flex: 1;
    min-width: 80px;
    height: 4px;
    accent-color: var(--pm-panel-surface);
    cursor: pointer;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-audio-time
 * @description Elapsed time display in the hero audio control bar.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-audio-time {
    font-size: 0.7rem;
    color: var(--pm-overlay-white-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

/* === ASSET GRID === */

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-assets
 * @description 2-column square thumbnail grid of all memory assets. Tap any for fullscreen.
 *   3 columns in landscape orientation.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-assets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 16px;
    background: transparent;
}

.pm-memory-view-assets:empty {
    display: none;
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-asset-thumb
 * @description Square asset thumbnail in the memory view grid. Aspect-ratio locked, overflow hidden.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-asset-thumb {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--pm-text-1);
    border-radius: var(--pm-radius-small);
    cursor: pointer;
}

.pm-view-asset-thumb img,
.pm-view-asset-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.pm-view-asset-thumb:hover img,
.pm-view-asset-thumb:hover video {
    transform: scale(1.04);
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-asset-icon-overlay
 * @description Icon badge in the corner of an asset thumbnail (🎥 for video, PDF for doc).
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-asset-icon-overlay {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: var(--pm-overlay-dark-strong);
    border-radius: var(--pm-radius-xsmall);
    padding: 2px 6px;
    font-size: 0.78rem;
    pointer-events: none;
    color: var(--pm-panel-surface);
}

/**
 * @pm-registry
 * @type css
 * @name pm-view-asset-audio
 * @description Full-fill audio asset tile in the grid. Dark gradient background with waveform icon.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-view-asset-audio {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--pm-dark-bg), var(--pm-dark-surface));
    color: var(--pm-overlay-white-muted);
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.pm-view-asset-audio:hover {
    background: linear-gradient(135deg, var(--pm-dark-bg), var(--pm-dark-surface));
}

/* === NOTE CARD === */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-view-note-wrap
 * @tags        themes
 * @description TODO
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-memory-view-note-wrap {
    padding: 28px 16px 12px;
    background: var(--pm-overlay-white-faint);
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-note
 * @description The "precious document" note card for summary and transcript.
 *   Slightly rotated for physical presence. Note style class (pm-note-style-card, etc.) added by JS.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-note {
    background: var(--pm-panel-surface);
    border-radius: var(--pm-radius-small);
    padding: 24px 22px;
    box-shadow: var(--pm-shadow-large);
    transform: rotate(-1deg);
    max-width: 640px;
    margin: 0 auto;
    font-family: 'Lora', Georgia, serif;
    color: var(--pm-text-1);
    line-height: 1.75;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-summary
 * @description AI summary text on the note card. Italic, prominent. Hidden when empty.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-summary {
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
    color: var(--pm-text-1);
    margin-bottom: 14px;
    line-height: 1.6;
}

.pm-memory-view-summary:empty { display: none; }

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-transcript-preview
 * @description First 4 lines of transcription on the note card. Clipped — toggle reveals the rest.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-transcript-preview {
    font-size: 0.9rem;
    color: var(--pm-text-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

.pm-memory-view-transcript-preview:empty { display: none; }

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-transcript-toggle
 * @description "Read full transcript" expand/collapse button on the note card.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-transcript-toggle {
    background: none;
    border: none;
    color: var(--pm-reminder);
    font-family: 'Lora', Georgia, serif;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-transcript-full
 * @description Full transcription text revealed by toggle. Pre-wrap preserves line breaks.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-transcript-full {
    font-size: 0.875rem;
    color: var(--pm-text-2);
    margin-top: 14px;
    line-height: 1.8;
    border-top: 1px solid var(--pm-border);
    padding-top: 14px;
    white-space: pre-wrap;
}

.pm-memory-view-transcript-full[hidden] { display: none; }

/* === META TAGS === */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-view-meta-wrap
 * @tags        themes
 * @description Applies padding to the wrapper containing metadata tags within the memory view.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-memory-view-meta-wrap {
    padding: 16px 16px 4px;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-meta
 * @description Flex-wrap row of metadata pill tags below the note card (speaker, location, people, feeling).
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pm-memory-view-meta:empty { display: none; }

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-tag
 * @description Individual metadata pill in the viewer (speaker, location, people, feeling).
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-tag {
    background: var(--pm-overlay-white-faint);
    border: 1px solid var(--pm-overlay-white-soft);
    border-radius: var(--pm-radius-medium);
    padding: 5px 13px;
    font-size: 0.8rem;
    color: var(--pm-overlay-white-strong);
}

/* === EDIT CTA === */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-memory-view-cta
 * @tags        themes
 * @description TODO
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-memory-view-cta {
    padding: 20px 16px 36px;
    display: flex;
    justify-content: center;
}

/**
 * @pm-registry
 * @type css
 * @name pm-memory-view-edit-btn
 * @description Full-width "Edit Memory" call-to-action button at the bottom of the viewer.
 * @called-by  pm-modal-memory-view.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-26
 */
.pm-memory-view-edit-btn {
    background: var(--pm-btn-gradient, linear-gradient(135deg, var(--pm-reminder), var(--pm-reminder-gradient-end)));
    color: var(--pm-panel-surface);
    border: none;
    border-radius: var(--pm-radius-large);
    padding: 12px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    min-width: 180px;
}

.pm-memory-view-edit-btn:hover { opacity: 0.88; }

/* === LANDSCAPE RESPONSIVE === */

@media (orientation: landscape) and (max-width: 1024px) {
    .pm-memory-view-hero {
        height: 75vw;
        max-height: 380px;
    }

    .pm-memory-view-assets {
        grid-template-columns: repeat(4, 1fr);
    }

    .pm-memory-view-note {
        transform: rotate(-0.5deg);
    }
}


/* === ANIMATIONS === */

@keyframes pmViewWave {
    from { transform: scaleY(0.35); }
    to   { transform: scaleY(1); }
}

@keyframes pmViewHintFade {
    0%   { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
}
 { opacity: 0; }
}
}
; }
}
 1; }
    100% { opacity: 0; }
}