:root { --app-open-duration: 240ms; --app-open-easing: cubic-bezier(.2,.8,.2,1); }
@keyframes lunoraOpenDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
:is(.feeding-overlay,.feeding-picker-overlay,.growth-overlay,.wiki-overlay,.selfsleep-overlay,.sounds-overlay,.growth-spurts-overlay,.diary-overlay,.sheet) {
  transform: translateY(-24px) !important; opacity: 0; visibility: hidden;
  transition: transform var(--app-open-duration) var(--app-open-easing), opacity var(--app-open-duration), visibility var(--app-open-duration) !important;
}
:is(.feeding-overlay,.feeding-picker-overlay,.growth-overlay,.wiki-overlay,.selfsleep-overlay,.growth-spurts-overlay,.diary-overlay).open,
.sounds-overlay.is-open,.sheet.show {
  transform: translateY(0) !important; opacity: 1; visibility: visible;
}
.diary-overlay { left: 0 !important; right: 0 !important; width: min(100%,560px) !important; margin-left: auto; margin-right: auto; }
.support-center-overlay.active,.tab-panel.active,
.diary-entry-editor-sheet,.diary-storage-sheet-card,.too-young-modal,
.app-confirm-backdrop.open .app-confirm-sheet,
.feedback-modal-backdrop.open .feedback-modal,
.feeding-help-modal-backdrop.open .feeding-help-modal,
.lunora-temporal-overlay.is-visible .lunora-temporal-dialog {
  animation: lunoraOpenDown var(--app-open-duration) var(--app-open-easing) both !important;
}
.diary-entry-editor[data-motion-ready] .diary-entry-editor-sheet { animation: none !important; }
.diary-upload-tray { position: relative; flex: 0 0 auto; padding: 10px 16px 0; display: grid; gap: 6px; max-height: 25vh; overflow-y: auto; }
.diary-upload-tray > div { display:flex; gap:8px; padding:10px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.diary-upload-tray button { padding:8px; border:0; border-radius:10px; background:var(--primary-soft); color:var(--primary); font:inherit; font-size:13px; }
.diary-upload-tray button:first-child { flex:1; text-align:left; }
@media (prefers-reduced-motion:reduce) {
  :is(.feeding-overlay,.feeding-picker-overlay,.growth-overlay,.wiki-overlay,.selfsleep-overlay,.sounds-overlay,.growth-spurts-overlay,.diary-overlay,.sheet) { transition: none !important; }
  .support-center-overlay.active,.tab-panel.active,.diary-entry-editor-sheet,.diary-storage-sheet-card,.too-young-modal,.app-confirm-backdrop.open .app-confirm-sheet,.feedback-modal-backdrop.open .feedback-modal,.feeding-help-modal-backdrop.open .feeding-help-modal,.lunora-temporal-overlay.is-visible .lunora-temporal-dialog { animation:none !important; }
}

.diary-upload-tray .diary-upload-dismiss { flex:0 0 36px; display:grid; place-items:center; background:transparent; color:var(--text-secondary); }
/* One-tap download lives on the media alongside Delete. */
.diary-entry-attachment .diary-file-download { position:absolute; z-index:3; top:6px; right:var(--download-right,6px); width:34px; height:34px; display:grid; place-items:center; margin:0; padding:0; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--primary); }
.diary-file-download svg { width:18px; height:18px; }
.diary-file-download[aria-busy] { opacity:.55; }
.diary-entry-attachment .diary-stored-attachment-delete { width:34px; height:34px; }
.diary-entry-attachment--audio { padding-right:48px !important; }
.diary-entry-editor .diary-entry-attachment--audio { padding-right:88px !important; }
.diary-entry-editor :is(.diary-entry-attachment--image,.diary-entry-attachment--video,.diary-draft-attachment--image,.diary-draft-attachment--video) { flex:0 0 148px; width:148px !important; height:148px !important; min-height:0 !important; max-width:100%; aspect-ratio:1; border-radius:16px; box-sizing:border-box; }
.diary-entry-editor :is(.diary-entry-attachment--video,.diary-draft-attachment--video) video { width:100%; height:100%; max-height:100%; object-fit:cover; }
.diary-entry-editor .diary-entry-attachment--image .diary-entry-image-button { width:100%; height:100%; }
.diary-entry-editor .diary-video-processing { padding:46px 10px 12px; font-size:12px; text-align:center; }
@media(max-width:360px) { .diary-entry-editor :is(.diary-entry-attachment--image,.diary-entry-attachment--video,.diary-draft-attachment--image,.diary-draft-attachment--video) { flex-basis:calc(50% - 5px); width:calc(50% - 5px) !important; height:132px !important; } }

/* Visual attachments form one touch-scrollable row in cards and editors. */
.diary-media-strip,.diary-entry-editor-existing,.diary-entry-editor .diary-draft-attachments { display:flex !important; flex-wrap:nowrap !important; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; overscroll-behavior-x:contain; padding-bottom:6px; max-width:100%; min-width:0; }
.diary-media-strip > .diary-entry-attachment,.diary-entry-editor-existing > .diary-entry-attachment:not(.diary-entry-attachment--audio) { flex:0 0 148px; width:148px !important; height:148px !important; border-radius:16px; box-sizing:border-box; scroll-snap-align:start; }
.diary-media-strip .diary-entry-image-button,.diary-media-strip video { display:block; width:100%; height:100%; object-fit:cover; }
.diary-media-strip .diary-video-processing,.diary-media-strip .diary-media-failed { padding:46px 10px 10px; font-size:12px; }
.diary-video-open { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; padding:0; border:0; background:transparent; color:white; }
.diary-video-open svg { width:38px; height:38px; padding:9px; border-radius:50%; background:rgba(0,0,0,.4); }
.diary-video-viewer { z-index:260; padding:16px; }
.diary-video-viewer-card { width:min(100%,900px); max-height:100%; background:#111; border-radius:18px; overflow:hidden; }
.diary-video-viewer video { display:block; width:100%; max-height:75dvh; object-fit:contain; }
.diary-video-viewer-actions { display:flex; justify-content:flex-end; gap:12px; padding:12px; }
.diary-video-viewer-actions button { background:#fff; color:#25213f; border:0; border-radius:10px; padding:10px 14px; font:inherit; }
.diary-video-viewer [role="status"] { padding:12px; color:white; text-align:center; }
.diary-video-viewer:fullscreen { display:grid; place-items:center; background:#000; }

/* Clip a stationary frame, not the scrolling content, on Android WebViews. */
.diary-editor-frame { width:min(100%,560px); max-height:100%; overflow:hidden; border-radius:24px 24px 0 0; isolation:isolate; background:var(--surface); }
.diary-editor-frame .diary-entry-editor-sheet { width:100%; max-height:min(85dvh,calc(100dvh - var(--app-top-offset,0px) - 30px)); border-radius:0; clip-path:none; -webkit-clip-path:none; }
.diary-editor-media { min-width:0; width:100%; }
.diary-editor-audio { display:grid; gap:10px; margin-top:12px; }
.diary-editor-audio .diary-entry-attachment--audio { flex:none; width:100% !important; height:auto !important; min-height:60px; aspect-ratio:auto !important; box-sizing:border-box; }
.diary-entry-editor-existing { align-items:flex-start; width:100%; box-sizing:border-box; }
.diary-entry-editor-existing:empty,.diary-editor-audio:empty { display:none !important; }
.diary-timeline-media > .diary-entry-attachment--audio { height:auto; aspect-ratio:auto; padding-right:10px !important; box-sizing:border-box; }
@media(min-width:600px){.diary-editor-frame { border-radius:24px; }}

/* Keep rounded top cap outside the scrolling viewport. */
.diary-entry-editor .diary-editor-frame { position:relative; box-sizing:border-box; padding-top:24px; flex:0 1 auto; clip-path:inset(0 round 24px 24px 0 0); -webkit-mask-image:linear-gradient(#fff,#fff); animation:lunoraOpenDown var(--app-open-duration) var(--app-open-easing) both; }
.diary-entry-editor .diary-editor-frame .diary-entry-editor-sheet { animation:none !important; transform:none !important; margin-bottom:0; padding-top:0; max-height:min(calc(85dvh - 24px),calc(100dvh - var(--app-top-offset,0px) - 54px)); }
.diary-editor-frame > .diary-entry-editor-handle { position:absolute; top:8px; left:50%; margin:0; transform:translateX(-50%); }
.diary-entry-editor[data-motion-ready] .diary-editor-frame { animation:none !important; }
@media(min-width:600px) { .diary-entry-editor .diary-editor-frame { margin-bottom:24px; clip-path:inset(0 round 24px); } }
@media(prefers-reduced-motion:reduce) { .diary-entry-editor .diary-editor-frame { animation:none !important; } }

.diary-gallery { position:fixed; z-index:280; inset:0; display:grid; place-items:center; padding:16px; box-sizing:border-box; background:rgba(12,10,24,.88); }
.diary-gallery-card { display:flex; flex-direction:column; width:min(100%,960px); height:min(88dvh,860px); min-height:0; background:#101015; color:#fff; border-radius:22px; overflow:hidden; }
.diary-gallery-toolbar { display:flex; align-items:center; gap:8px; flex:0 0 auto; padding:10px 12px; }
.diary-gallery-count { flex:1; padding-left:6px; font-size:14px; color:#d9d6e8; font-variant-numeric:tabular-nums; }
.diary-gallery button { display:grid; place-items:center; width:38px; height:38px; padding:9px; border:0; border-radius:50%; background:rgba(255,255,255,.10); color:white; box-shadow:none !important; }
.diary-gallery button svg { width:20px; height:20px; }
.diary-gallery button:disabled { opacity:.25; pointer-events:none; }
.diary-gallery-stage { position:relative; flex:1; min-height:0; overflow:hidden; }
.diary-gallery-slide { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.diary-gallery-slide > img,.diary-gallery-slide > video { display:block; width:100%; height:100%; max-height:100%; object-fit:contain; background:#101015; }
.diary-gallery [data-gallery-prev],.diary-gallery [data-gallery-next] { position:absolute; z-index:2; top:calc(50% - 19px); background:rgba(20,17,35,.55); }
.diary-gallery [data-gallery-prev] { left:8px; }.diary-gallery [data-gallery-next] { right:8px; transform:rotate(180deg); }
.diary-gallery-status { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:12px; padding:12px; background:rgba(16,16,21,.8); color:#fff; font-size:13px; }
.diary-gallery footer { flex:0 0 auto; padding:10px; text-align:center; color:#a9a5ba; font-size:11px; }
.diary-gallery footer[hidden] { display:none; }
.diary-gallery:fullscreen { padding:0; background:#000; }.diary-gallery:fullscreen .diary-gallery-card { width:100%; height:100%; border-radius:0; }
@media(max-height:500px){.diary-gallery{padding:6px}.diary-gallery-card{height:96dvh}.diary-gallery footer{display:none}.diary-gallery-toolbar{padding:4px 10px}}

/* A thumbnail's paused frame is a still image, not a black media surface. */
.diary-entry-attachment--video { background:var(--surface-2); }
.diary-entry-attachment--video > video:not([poster]) { opacity:0; }
.diary-entry-attachment--video > video[poster] { opacity:1; object-fit:cover; }

.diary-gallery .diary-gallery-playback { flex:0 0 auto; display:grid; grid-template-columns:38px auto; align-items:center; gap:8px 12px; padding:8px 16px 14px; color:white; }
.diary-gallery .diary-gallery-playback[hidden],.diary-gallery [data-gallery-sound][hidden] { display:none; }
.diary-gallery [data-gallery-time] { font-size:12px; font-variant-numeric:tabular-nums; }
.diary-gallery input[data-gallery-seek] { grid-column:1/-1; display:block; width:100%; min-height:24px; margin:0; padding:0; accent-color:#b1a0ef; cursor:pointer; touch-action:pan-x; }
.diary-gallery [data-gallery-sound].is-muted { position:relative; opacity:.65; }
.diary-gallery [data-gallery-sound].is-muted::after { content:''; position:absolute; width:24px; height:2px; background:white; transform:rotate(-45deg); }
.diary-gallery.is-expanded { padding:0; background:#000; }
.diary-gallery.is-expanded .diary-gallery-card { width:100%; height:100%; border-radius:0; }

/* Gallery chrome follows the same theme tokens and controls as diary audio. */
.diary-gallery-card,.diary-gallery-slide > img,.diary-gallery-slide > video { background:var(--surface); color:var(--text); }
.diary-gallery-count,.diary-gallery footer { color:var(--text-muted); }
.diary-gallery button { background:var(--surface-2); color:var(--primary); border:1px solid var(--border); }
.diary-gallery [data-gallery-prev],.diary-gallery [data-gallery-next] { background:var(--surface); color:var(--primary); }
.diary-gallery-status { background:var(--surface); color:var(--text-muted); border:1px solid var(--border); }
.diary-gallery [data-gallery-sound].is-muted::after { background:var(--primary); }
.diary-gallery.is-expanded,.diary-gallery:fullscreen { background:var(--surface); }
.diary-gallery .diary-gallery-playback { display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; width:auto; margin:12px 14px 0; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); color:var(--text); }
.diary-gallery .diary-gallery-playback[hidden] { display:none; }
.diary-gallery .diary-audio-toggle { width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--primary); color:#fff; }
.diary-gallery .diary-audio-toggle svg { width:17px; height:17px; }
.diary-gallery .diary-gallery-playback input[data-gallery-seek] { display:block; width:100%; height:4px; min-height:4px; margin:0; padding:0; appearance:none; -webkit-appearance:none; border:0; border-radius:999px; background:var(--border-strong); accent-color:var(--primary); }
.diary-gallery .diary-audio-progress > div { display:flex; justify-content:space-between; gap:8px; margin-top:6px; color:var(--text-muted); font-size:11px; font-variant-numeric:tabular-nums; line-height:1; }
.diary-gallery-card > footer { padding:12px; }