/* Isolated received-Note demonstration. No real inbox, API, or personal data. */
.demo-layer{position:absolute;z-index:29;inset:0;background:rgba(249,249,247,.96);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:0 20px}
.demo-panel{position:relative;width:100%;height:100%;display:flex;align-items:center;flex-direction:column;padding:94px 4px 68px;min-height:0;overflow-y:auto}
.demo-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}
.demo-top h2{font:italic 22px Georgia,serif;font-weight:400;margin:0;color:#54534d}
.demo-close{border:1px solid #d6d5d1;background:#fff;color:#777;width:35px;height:35px;border-radius:50%;font-size:20px;flex-shrink:0}
.demo-chip{align-self:flex-start;color:#898781;font-size:10px;letter-spacing:.12em;margin:14px 0 16px}
.demo-paper{width:min(274px,100%);min-height:274px;padding:26px 20px 23px;background:linear-gradient(145deg,#fff,#fbfaf7);border:1px solid #e7e4e0;box-shadow:0 17px 35px #00000016,0 4px 9px #0000000b;transform:rotate(-1.4deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.demo-note-heading{font:italic 14px Georgia,serif;color:#a7a39d;align-self:flex-start}
.demo-note-text{font:19px/1.55 Georgia,serif;letter-spacing:.005em;color:#55514b;text-align:center;margin:0}
.demo-face{font:90px/1 Georgia,serif;color:#67645d;margin:-14px 0 -8px}
.demo-paper[data-kind=smile] .demo-note-text{font-size:15px}
.demo-body{font-size:11px;line-height:1.55;color:#898781;text-align:center;width:min(285px,100%);margin-top:19px}
.demo-nav{display:flex;justify-content:center;align-items:center;gap:17px;margin-top:13px;font-size:12px;color:#85827e}
.demo-nav-button{background:transparent;border:0;color:#696661;padding:9px 4px;font-size:12px}
.demo-actions{display:flex;flex-direction:column;align-items:center;width:100%;gap:9px;margin-top:15px}
.demo-field-title{font-size:11px;color:#87837e;letter-spacing:.02em;padding-bottom:9px}
.demo-reactions{text-align:center}
.demo-action{border:1px solid #dedbd5;border-radius:20px;background:#fff;color:#777;font-size:11px;padding:7px 10px;margin:0 2px 5px}
.demo-action[aria-pressed=true]{background:#eeece7;border-color:#a9a39a;color:#3d3b38}
.demo-keep,.demo-forward{border:0;background:transparent;color:#64615c;font-size:12px;padding:5px 9px}
.demo-forward{color:#aba8a2}
.demo-book-list{display:flex;flex-direction:column;gap:12px;margin-top:18px;width:100%}
.demo-book-entry{background:#fff;border:1px solid #e8e6e1;border-radius:12px;color:#67645e;font-size:13px;line-height:1.45;text-align:left;padding:14px 12px}
.demo-layer[data-view=book] .demo-body{font-size:12px;text-align:left;width:100%}
@media(max-height:720px){.demo-panel{padding-top:64px;padding-bottom:38px}.demo-paper{min-height:220px}.demo-note-text{font-size:16px}.demo-paper{gap:12px}.demo-chip{margin:10px 0}.demo-body{margin-top:12px}.demo-actions{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.demo-layer{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Keep the tiny mailbox accessible even while editing text or cropping. */
.app.is-editing .side-items{opacity:.9;pointer-events:auto}

/* [A] Spatial mailbox study: the creator stays behind; sample Note comes forward. */
.app .stage,.app .creation-actions,.app .mode-switch{transition:opacity .32s ease,transform .36s ease}
.app.is-reading .stage{opacity:.27;transform:translateY(-46%) scale(.89)}
.app.is-reading .creation-actions,.app.is-reading .mode-switch{opacity:.25}
.demo-layer{background:rgba(248,248,246,.91);animation:demo-layer-enter .32s ease both}
.demo-paper{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;animation:demo-note-enter .64s cubic-bezier(.18,.8,.22,1.07) both}
.demo-paper:focus-visible{outline:2px solid #79766f;outline-offset:4px}
.demo-paper.is-forward-source{filter:drop-shadow(0 0 4px #b2b2ac38)}
.demo-gesture-status{min-height:23px;width:min(282px,100%);margin:13px 0 0;text-align:center;line-height:1.45;letter-spacing:.01em;font-size:11px;color:#807e79}
.demo-forward-ghost{position:absolute;z-index:8;pointer-events:none!important;opacity:.55;filter:drop-shadow(0 22px 15px #0000001c);transition:none;animation:none!important;will-change:transform,opacity}
.demo-forward-ghost.is-flying{transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .7s ease;opacity:0!important}
@keyframes demo-layer-enter{from{opacity:0}to{opacity:1}}
@keyframes demo-note-enter{from{opacity:.2;transform:translate3d(-48px,125px,0) scale(.52) rotate(-16deg)}to{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(-1.4deg)}}
@media(max-width:899px){
 .app.is-reading .stage{transform:translateY(-48%) scale(.89)}
}
@media(max-height:680px){
 .app.is-reading .stage{transform:translateY(-44%) scale(.84)}
 .demo-gesture-status{margin:8px 0 0;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .demo-layer,.demo-paper,.demo-forward-ghost{animation:none!important;transition:none!important}
 .app .stage,.app .creation-actions,.app .mode-switch{transition:none!important}
}


/* Founder: direct front-of-Note reading; unread flag means never yet displayed. */
.demo-mailbox-return{position:absolute;z-index:9;left:4px;bottom:12px;min-width:44px;min-height:44px;border:0;background:#fff9;border-radius:17px;color:#716e69;font:24px Georgia,serif}
.demo-paper{position:relative;touch-action:none;overflow:visible}
.demo-photo-sample{width:100%;height:146px;flex-shrink:0;border-radius:3px;background:radial-gradient(circle at 72% 30%,#ffdcab 0%,#e8c7a7 17%,transparent 43%),linear-gradient(132deg,#a8b6b1,#d4d3c0 40%,#a1a995 70%,#f2e4d1);box-shadow:inset 0 0 0 1px #e4dac8}
.demo-paper[data-kind="photo"]{gap:12px;padding-top:16px}
.demo-paper[data-kind="photo"] .demo-note-text{font-size:13px}
.demo-reaction-toggle{position:absolute;right:-18px;bottom:27px;border:1px solid #e0d8cc;background:#fff;border-radius:100%;width:43px;height:43px;display:grid;place-items:center;font:24px Georgia,serif;color:#79746e;box-shadow:0 3px 13px #0001;z-index:3}
.demo-reactions-edge{position:absolute;z-index:4;right:21px;bottom:-64px;min-width:210px;max-width:260px;border:1px solid #ddd7ce;border-radius:12px;background:#fffdfa;padding:10px 6px;box-shadow:0 7px 25px #0002}
.demo-reactions-edge .demo-action{font-size:10px;margin:2px;padding:6px}
.demo-panel:has(.demo-reactions-edge:not([hidden])) .demo-actions{margin-top:92px}
.demo-panel .demo-paper .demo-reactions-edge{transform:rotate(1.4deg)}
@media(max-width:400px){.demo-reaction-toggle{right:-10px}.demo-reactions-edge{right:10px}}