.inbox-flow { position: fixed; inset: 0; z-index: 30; display: block; overflow-y: auto; padding: max(26px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 0%, #263036 0%, #0d1215 48%, #080a0c 100%); animation: inbox-arrive 520ms cubic-bezier(.2,.8,.2,1) both; }
.inbox-flow[hidden] { display: none; }
@keyframes inbox-arrive { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
.inbox-panel { width: min(1000px, 100%); min-height: calc(100dvh - 56px); max-height: none; margin: 0 auto; padding: 32px 20px; position: relative; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #edf4f0; }
.inbox-list { display: flex; flex-direction: column; }
.inbox-state-action { text-align: center; }
.inbox-retry, .inbox-load-more, .received-report { min-height:44px; padding:.65rem 1rem; border:1px solid #b99686; border-radius:12px; background:#fff5ef; color:#4b3026; font:400 .875rem/1.5 Inter,Arial,sans-serif; cursor:pointer; }
.inbox-load-more { order:3; align-self:center; margin:1rem 0; }
.received-report { margin:1rem auto 0; }
.received-report[hidden] { display:none; }
.inbox-retry:focus-visible, .inbox-load-more:focus-visible, .received-report:focus-visible { outline:2px solid #4b3026; outline-offset:4px; }
.inbox-load-more:disabled, .received-report:disabled { opacity:.6; cursor:wait; }
.inbox-summary { order: 0; }
.received-grid { order: 1; }
.inbox-navigation { order: 2; }
.inbox-summary { margin: .5rem 0 1.5rem; color: #4b3026; font: 400 1rem/1.5 Inter, Arial, sans-serif; text-align: center; }
.received-grid { position: relative; display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 16px max(0px, calc((100% - 300px) / 2)) 30px; scrollbar-width: thin; scrollbar-color: #b99686 transparent; }
.received-grid > .received-note { flex: 0 0 300px; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.received-grid:not(.is-reading) .book-stage { transform: translateX(var(--card-shift, 0px)) scale(var(--card-scale, 1)); opacity: var(--card-opacity, 1); transform-origin: center; transition: opacity 180ms ease-out; }
.received-grid .received-label { font-size: .875rem; letter-spacing: 0; }
.received-grid .is-centered .received-state { background: #4b3026; color: #fff5ef; }
.received-grid.is-reading { display: block; overflow: visible; padding: 16px 0 30px; }
.received-grid.is-reading > .received-note { width: 100%; }
.received-grid:focus-visible { outline: 2px solid #4b3026; outline-offset: 3px; }
.received-note[hidden], .inbox-navigation[hidden], .inbox-navigation button[hidden] { display: none; }
.received-grid:not(.is-reading) .note-book { width: min(300px, 100%); }
.inbox-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin: 0 0 20px; }
.inbox-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.inbox-pagination { display: none; }
.inbox-position { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inbox-dots { display: flex; align-items: center; max-width: min(360px, 48vw); overflow-x: auto; }
.inbox-navigation .inbox-dot { flex: 0 0 28px; min-height: 44px; padding: 0; border: 0; background: transparent; border-radius: 0; }
.inbox-dot::after { content: ''; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: #b99686; }
.inbox-dot[aria-current="true"]::after { background: #4b3026; }
.inbox-navigation .inbox-previous, .inbox-navigation .inbox-next { width: 44px; padding: 0; border-radius: 50%; font-size: 1.75rem; }
.inbox-navigation button { min-height: 44px; padding: .6rem .9rem; border: 1px solid #b99686; border-radius: 12px; background: rgba(255,245,239,.8); color: #4b3026; font: 500 .875rem/1.4 Inter, Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
.inbox-navigation button:hover { background: #f3d8cf; }
.inbox-navigation button:active { transform: scale(.98); }
.inbox-navigation button:disabled { opacity: .45; cursor: default; }
.inbox-navigation button:focus-visible, .book-outside:focus-visible, .mounted-note .keepsake-card:focus-visible { outline: 2px solid #4b3026; outline-offset: 4px; }
.received-label { display: flex; align-items: center; justify-content: center; gap: 10px; }
.received-state { padding: .25rem .65rem; border-radius: 999px; background: #fff5ef; color: #4b3026; font-size: .875rem; letter-spacing: 0; }
.received-label > span:last-child { color: #4b3026; }
.inbox-panel > .inbox-intro { margin-bottom: 30px; }
.received-note { text-align: center; margin: 0 0 36px; }
.received-label { color: #b9c6c9; font: 12px/1.5 Helvetica, Arial, sans-serif; letter-spacing: .06em; margin: 0 0 22px; }
.book-stage { width: 100%; padding: 12px 0 28px; perspective: 1600px; }
.note-book { position: relative; width: min(352px, 48%); aspect-ratio: 352 / 490; margin: auto; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.2,.8,.2,1); }
.is-open .note-book { transform: none; width: min(352px, 100%); height: var(--open-height, 490px); aspect-ratio: auto; }
.book-message { position: absolute; inset: 0; display: flex; padding: 24px; background: linear-gradient(132deg, #fff 0%, #fdfdfb 34%, #fafaf7 72%, #f6f6f1 100%); border-radius: 0 10px 10px 0; box-shadow: 1px 2px 1px #d5d1c0, inset 0 0 0 1px #e8e7df, 0 18px 35px -20px #0009; overflow: hidden; }
.book-message::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 18px; background: linear-gradient(90deg, #a29b8826, #fff4 18%, transparent); pointer-events: none; }
.is-open .book-message { padding: 0; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.is-open .book-message::after { display: none; }
.mounted-note { position: relative; width: 100%; min-width: 0; height: var(--insert-height); }
.mounted-note > .keepsake-card { width: 352px; max-width: none; height: 490px; margin: 0; transform-origin: top left; transform: scale(var(--insert-scale, 1)); transition: none; }
.is-open .book-message, .is-open .book-inside,
.is-open .mounted-note .card-picture { cursor: pointer; }
.book-cover { position: absolute; inset: 0; z-index: 2; transform-origin: left center; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.2,.8,.2,1); }
.is-open .book-cover { transform: rotateY(-180deg); }
.book-outside, .book-inside { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px 18px 18px 4px; }
.book-outside { display: block; padding: 0; border: 0; overflow: hidden; background: #d9b49f; cursor: pointer; box-shadow: 0 12px 40px -16px #000a; }
.book-outside img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-outside { container-type: inline-size; }
.book-outside img { object-position: center top; }
.cover-foil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8%;
  font: 500 clamp(27px, 15cqi, 52px)/1.02 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.045em; text-align: center;
  color: #815127; pointer-events: none;
  background: linear-gradient(115deg, #654020 0%, #94602d 20%, #c49a49 34%, #8b5c29 46%, #745023 49%, #f4dda0 51%, #c3a052 55%, #94622f 65%, #ba9145 82%, #654020 100%);
  background-size: 250% 100%; background-position: var(--foil-position, 75%) 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(-.25px -.35px .15px #fff3cd80) drop-shadow(.25px .5px .25px #56391d60);
  transition: background-position 420ms cubic-bezier(.2,.8,.2,1);
}
.book-outside:focus-visible .cover-foil { --foil-position: 35%; }
.cover-foil.is-touched { animation: cover-foil-light 600ms ease-out; }
@keyframes cover-foil-light {
  0%, 20%, 100% { background-position: 75% 50%; }
  60% { background-position: 15% 50%; }
}
.book-inside { transform: rotateY(180deg); background: linear-gradient(118deg, #fff 0%, #fdfdfb 38%, #fafaf7 72%, #f6f6f1 100%); border-radius: 10px 0 0 10px; box-shadow: -1px 2px 1px #d5d1c0, inset 0 0 0 1px #e8e7df, 0 18px 35px -20px #0009; }
.is-open .book-inside { visibility: hidden; }
.book-stage { transform-style: preserve-3d; }
.book-message { z-index: 0; transform: translateZ(-1px); }
/* Receive the same 352:490 keepsake and wrapping cover used when sending. */
.received-grid, .received-grid.is-reading { display: flex; overflow-x: auto; overflow-y: hidden; padding: 16px max(0px, calc((100% - 352px) / 2)) 30px; }
.received-grid > .received-note, .received-grid:not(.is-reading) > .received-note, .received-grid.is-reading > .received-note { flex: 0 0 min(352px, 100%); width: min(352px, 100%); }
.received-grid .book-stage { transform: none; }
.received-grid .note-book, .received-grid:not(.is-reading) .note-book, .received-grid .is-open .note-book { width: 100%; height: auto; min-height: 0; aspect-ratio: 352 / 490; transform: none; }
.received-grid .book-message, .received-grid .is-open .book-message { position: absolute; inset: 0; padding: 0; background: transparent; box-shadow: none; overflow: hidden; border-radius: 24px; }
.received-grid .book-message::after { display: none; }
.received-grid .mounted-note { width: 100%; height: 100%; }
.received-grid .mounted-note > .keepsake-card { width: 100%; height: 100%; min-height: 0; aspect-ratio: 352 / 490; transform: none; }
.received-grid .mounted-note .card-front { position: absolute; inset: 5px; grid-template-rows: 55% 45%; }
.received-grid .mounted-note .card-picture { aspect-ratio: auto; }
.received-grid .mounted-note .card-letter { padding: 1.25rem 1.35rem 1.15rem; }
.received-grid .mounted-note .card-message { height: 96px; min-height: 96px; max-height: 96px; overflow: auto; }
.received-grid .mounted-note .card-signature { margin: auto 0 0; }
.received-grid .book-cover { transition: transform 620ms cubic-bezier(.2,.72,.24,1); }
.received-grid .is-open .book-cover { transform: rotateY(-88deg); visibility: visible; }
.received-grid .book-outside { border-radius: 10px; }
.received-grid .book-inside { border-radius: 10px 0 0 10px; }
.received-grid .book-outside { background: #f8e4e7; }
.received-grid .book-outside img { object-position: center; }
.received-grid .book-inside { visibility: visible; background: linear-gradient(110deg, #fffdf6, #f8f6ed 90%, #ded8c8); }
.received-grid .is-open .book-cover { pointer-events: none; }
.received-grid .book-message { transform: none; z-index: 1; }
.received-grid .mounted-note .keepsake-card, .received-grid .mounted-note .card-front { transform-style: flat; }
@media (prefers-reduced-motion: reduce) { .received-grid .book-cover { transition: none; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .received-note:not(.is-open) .note-book { transition: transform 620ms cubic-bezier(.2,.8,.2,1); }
  .received-note:not(.is-open) .note-book:hover { transform: rotateY(-4deg) rotateZ(1deg); }
  .received-note:not(.is-open) .book-outside:hover .cover-foil { background-position: var(--foil-position, 35%) 50%; }
}
.book-inside::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 20px; background: linear-gradient(270deg, #91887229, #fff3 20%, transparent); pointer-events: none; }
.book-outside:focus-visible, .mounted-note .keepsake-card:focus-visible { outline: 2px solid #d7e9f5; outline-offset: 5px; }
.is-open .mounted-note .keepsake-card { cursor: pointer; }
.inbox-panel > h2 { text-align: center; }
/* Desktop opens like a book; mobile keeps the readable single-card view. */
@media (min-width: 641px) {
  .note-book, .is-open .note-book {
    width: min(352px, 44%, calc((100dvh - 180px) * .718367));
    height: auto;
    aspect-ratio: 352 / 490;
  }
  .is-open .note-book { transform: translateX(50%); }
  .is-open .book-inside { visibility: visible; }
  .is-open .book-message {
    padding: 24px;
    align-items: center;
    background: linear-gradient(132deg, #fff, #f6f6f1);
    border-radius: 0 10px 10px 0;
    box-shadow: 1px 2px 1px #d5d1c0, inset 0 0 0 1px #e8e7df;
    overflow: hidden;
  }
  .is-open .book-message::after { display: block; }
  .is-open .mounted-note .card-letter { padding-inline: 5px; }
}
@media (max-width: 640px) {
  .received-grid:not(.is-reading) { gap: 16px; padding-inline: max(0px, calc((100% - 352px) / 2)); }
  .received-grid:not(.is-reading) > .received-note { flex-basis: min(352px, 100%); }
  .received-grid:not(.is-reading) .note-book { width: 100%; }
  .inbox-pagination { gap: 8px; flex-wrap: nowrap; }
  .inbox-navigation button { padding: .6rem .7rem; }
  .received-grid { grid-template-columns: minmax(0, 1fr); }
  .inbox-flow { padding: max(18px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); }
  .inbox-panel { width: 100%; min-height: calc(100dvh - 38px); padding: 24px 12px; }
  .note-book { width: 48%; aspect-ratio: 352 / 490; height: var(--open-height, auto); }
  .cover-foil { font-size: 15cqi; }
  .book-message { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .note-book, .book-cover, .inbox-flow { transition: none; animation: none; }
  .cover-foil, .cover-foil.is-touched { animation: none; transition: none; }
}
/* Keep the same card width and center throughout the fold and layout reset. */
@media (min-width: 800px) {
  .received-grid.is-reading { display: block; overflow: visible; padding: 16px 0 30px; }
  .received-grid.is-reading > .received-note { width: 100%; }
  .received-grid.is-reading .book-stage { width: 704px; max-width: 100%; margin: auto; }
  .received-grid.is-reading .note-book {
    width: 50%; margin-left: 50%; margin-right: 0;
    transform: translateX(-50%);
    transition: transform 620ms cubic-bezier(.2,.72,.24,1);
  }
  .received-grid.is-reading .is-open .note-book { transform: translateX(0); }
  .received-grid.is-reading .is-open .book-cover { transform: rotateY(-180deg); }
  .received-grid .received-note .book-message {
    padding: 24px;
    align-items: center;
    background: linear-gradient(110deg, #fffdf6, #f8f6ed 90%, #ded8c8);
    border-radius: 0 10px 10px 0;
    box-shadow: 1px 2px 1px #d5d1c0, inset 0 0 0 1px #e8e7df;
  }
  .received-grid .received-note .book-message::after { display: block; }
  .received-grid .received-note .mounted-note {
    height: calc(490px * 304 / 352);
  }
  .received-grid .received-note .mounted-note > .keepsake-card {
    width: 352px;
    height: 490px;
    transform: scale(calc(304 / 352));
  }
  .received-grid.is-reading .mounted-note .card-letter { padding-inline: 1.35rem; }
}
.note-export { display: none; max-width: 704px; margin: 8px auto 0; color: #4b3026; }
.is-open .note-export { display: block; }
.note-export .export-actions { display: flex; justify-content: center; gap: 12px; }
.note-export button, .note-export a {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,245,239,.7); color: #4b3026; cursor: pointer;
  box-shadow: 0 0 0 1px #4b30261a, 0 2px 5px #4b302614;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.note-export button:hover, .note-export a:hover { background: #f3d8cf; }
.note-export button:active, .note-export a:active { transform: scale(.96); }
.note-export button:focus-visible, .note-export a:focus-visible { outline: 2px solid #782345; outline-offset: 4px; }
.note-export button:disabled { opacity: .6; cursor: progress; }
.note-export .export-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding-inline: 16px; border-radius: 999px; font: 500 14px/1.4 Inter, Arial, sans-serif; }
.note-export .export-hint { display: none; margin: 10px auto 0; text-align: center; font: 400 13px/1.5 Inter, Arial, sans-serif; }
@media (min-width: 800px) { .note-export .export-hint { display: block; } }
.note-export .export-status { margin: 10px auto; text-align: center; font: 400 14px/1.5 Inter, Arial, sans-serif; }
.note-export [hidden] { display: none; }
/* Keep the date, full-size card and export controls in the desktop viewport. */
@media (min-width: 800px) {
  .inbox-list { margin-top: 0; }
  .received-grid, .received-grid.is-reading { padding-top: 4px; }
  .received-label { margin-bottom: 10px; }
  .book-stage { padding-top: 4px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .received-grid.is-reading .note-book, .note-export button, .note-export a { transition: none; }
}