/* V27 sender-only envelope layer. Production style.css remains the base. */
.sender-actions{
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:nowrap;
  width:280px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
/* V23: keep the production Copy Link control in the DOM for existing JS, but remove it visually so the envelope owns the row and is truly centered. */
.sender-actions #copy-button{
  display:none !important;
}
.envelope-share{
  width:280px;
  min-height:214px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  display:grid;
  place-items:center;
  overflow:visible;
  cursor:pointer;
}
.envelope-share:hover,
.envelope-share:focus-visible{
  background:transparent;
  box-shadow:none;
  transform:none;
}
.envelope-share:disabled{opacity:.58;cursor:default}
.env-shell{
  --env-w:280px;
  --env-h:180px;
  position:relative;
  display:block;
  width:var(--env-w);
  height:var(--env-h);
  perspective:900px;
  filter:none;
}
.env-back{
  position:absolute;
  inset:0;
  background:#00334c;
  border-radius:0 0 7px 7px;
  box-shadow:0 9px 24px rgba(25,40,50,.18);
  z-index:20;
}
.env-flap{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  border-left:140px solid transparent;
  border-right:140px solid transparent;
  border-bottom:82px solid transparent;
  border-top:98px solid #00334c;
  transform-origin:top center;
  transform:rotateX(0deg);
  backface-visibility:visible;
  will-change:transform;
  z-index:70;
}
.env-pocket{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  border-left:140px solid #0077b2;
  border-right:140px solid #0077b2;
  border-bottom:90px solid #006ba3;
  border-top:90px solid transparent;
  border-radius:0 0 7px 7px;
  z-index:90;
  pointer-events:none;
}
.env-label{
  position:absolute;
  left:50%;
  top:112px;
  transform:translateX(-50%);
  z-index:100;
  color:white;
  font-weight:700;
  font-size:.93rem;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  pointer-events:none;
}
.env-label span{margin-left:4px}
.env-seal{
  position:absolute;
  left:50%;
  top:70px;
  width:60px;
  height:60px;
  margin-left:-30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index:120;
  opacity:0;
  transform:scale(.45);
  color:#f8cfdb;
  background:radial-gradient(circle at 35% 25%,#e7a5bb,#c76787 56%,#913c5e 100%);
  box-shadow:inset 2px 3px 4px rgba(255,255,255,.32),inset -3px -4px 6px rgba(94,31,54,.28),0 4px 9px rgba(59,27,39,.22);
  will-change:transform,opacity;
  pointer-events:none;
}
.env-seal>span{font:30px Georgia,serif;line-height:1;transform:translateY(-4px)}

.env-card-viewport{
  position:absolute;
  inset:0;
  height:var(--env-h);
  z-index:50;
  pointer-events:none;
  overflow:visible;
  /* The card may begin far above the envelope, but never leaks below it. */
  clip-path:inset(-1600px -1600px 0 -1600px);
}
.sender-motion-card{
  position:absolute;
  z-index:50;
  display:none;
  box-sizing:border-box;
  padding:0;
  border-radius:7px;
  background:#eee9d5;
  box-shadow:0 12px 30px rgba(46,37,25,.18);
  overflow:hidden;
  pointer-events:none;
  will-change:transform,opacity;
  transform-origin:top left;
}
.motion-card-inner{
  position:absolute;
  inset:4.5%;
  background:#fffefa;
  border-radius:5px;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto auto;
  align-items:center;
  justify-items:center;
  padding:7% 7% 5.2%;
  box-sizing:border-box;
}
.motion-card-title{
  color:#a3466b;
  font-family:"DM Serif Display", Georgia, serif;
  font-size:clamp(24px,3vw,36px);
  line-height:1.05;
  text-align:center;
  width:100%;
  white-space:nowrap;
  font-weight:400;
  letter-spacing:-.01em;
}
.motion-card-rule{
  width:32%;
  margin-top:5%;
  border-top:2px solid #dba5b7;
  opacity:.9;
}
.motion-card-words{
  align-self:center;
  width:86%;
  color:#3d4838;
  font-family:"DM Serif Display", Georgia, serif;
  font-size:clamp(18px,3vw,38px);
  line-height:1.28;
  text-align:center;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.motion-card-heart{color:#a3466b;font:28px Georgia,serif;line-height:1}
.motion-card-brand{color:#747650;font-family:"DM Serif Display",Georgia,serif;font-size:clamp(16px,2.4vw,28px)}
.motion-card-foot{color:#797c66;font:12px Arial,sans-serif;letter-spacing:.01em}

.sender-emoji-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:85;
  overflow:visible;
}
.sender-flight-emoji{
  position:fixed;
  left:0;
  top:0;
  opacity:0;
  line-height:1;
  pointer-events:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.10));
}

/* The existing sender completion stage is retained only for its copy and Make-new button. */
.scroll-stage .scroll-roll[hidden]{display:none!important}

@media(max-width:620px){
  .envelope-share{width:280px;min-height:205px}
  .env-shell{transform:scale(.96)}
}
@media(prefers-reduced-motion:reduce){
  .sender-flight-emoji{display:none!important}
}


/* V25 completion layout: once the paper collapses, the envelope owns the space and the completion message lives beneath it. */
.sender-envelope-completion{
  display:block;
  width:280px;
  max-width:100%;
  min-height:0;
  margin:6px auto 0;
  padding:0;
  text-align:center;
  background:transparent;
}
.sender-envelope-completion[hidden]{display:none!important}
.sender-envelope-completion .scroll-roll,
.sender-envelope-completion p{display:none!important}
.sender-envelope-completion h2{
  margin:0;
  color:#3d4838;
  font-family:"DM Serif Display",Georgia,serif;
  font-size:clamp(24px,3vw,34px);
  font-weight:400;
  line-height:1.1;
  opacity:0;
  transform:translate3d(0,-6px,0);
}
.sender-envelope-completion .primary{
  margin-top:14px;
  opacity:0;
  transform:translate3d(0,-6px,0);
}
.sender-actions{
  will-change:transform;
}


/* V26 polish: the chooser leaves with the paper, and all sender completion elements share one centerline. */
#composer .mode-picker{
  will-change:transform,opacity;
}


/* V27 optical-centering correction.
   Photoshop measurement showed the envelope action row ~27px right of the page center.
   Keep the completion block on the true centerline and shift only the envelope row. */
.sender-actions{
  position:relative;
  left:-27px;
}

/* Keep the completion message centered on the page and on one line. */
.sender-envelope-completion{
  width:360px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.sender-envelope-completion h2{
  white-space:nowrap;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.12;
}

@media(max-width:620px){
  /* On narrow screens there is much less surrounding layout to create the desktop optical shift. */
  .sender-actions{left:0;}
  .sender-envelope-completion{width:320px;}
  .sender-envelope-completion h2{font-size:clamp(21px,7vw,27px);}
}


/* V30 recipient reveal: the exact generated Promise Card image owns the entire motion. */
.recipient-received{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.recipient-reveal{
  width:100%;
  min-height:calc(100vh - 150px);
  display:grid;
  grid-template-rows:minmax(570px,1fr) auto;
  justify-items:center;
  align-items:center;
  padding:12px 20px 34px;
}
.recipient-reveal[hidden]{display:none!important}
.recipient-stage{
  position:relative;
  width:min(920px,100%);
  min-height:610px;
  display:grid;
  place-items:center;
}
.recipient-envelope-button{
  position:absolute;
  left:50%;
  top:50%;
  width:280px;
  height:180px;
  transform:translate3d(-50%,-50%,0);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  perspective:1000px;
  -webkit-tap-highlight-color:transparent;
}
.recipient-envelope-button:disabled{cursor:default;opacity:1}
.recipient-envelope-button:focus-visible{outline:2px solid #a3466b;outline-offset:14px;border-radius:10px}
.recipient-envelope-shell{position:absolute;inset:0;overflow:visible}
.recipient-env-back{
  position:absolute;inset:0;
  background:#00334c;
  border-radius:0 0 7px 7px;
  box-shadow:0 12px 28px rgba(21,38,48,.18);
  z-index:20;
}
.recipient-env-flap{
  position:absolute;left:0;top:0;width:0;height:0;
  border-left:140px solid transparent;
  border-right:140px solid transparent;
  border-bottom:82px solid transparent;
  border-top:98px solid #00334c;
  transform-origin:top center;
  transform:rotateX(0deg);
  backface-visibility:visible;
  z-index:70;
  will-change:transform,opacity;
}
.recipient-env-pocket{
  position:absolute;left:0;top:0;width:0;height:0;
  border-left:140px solid #0077b2;
  border-right:140px solid #0077b2;
  border-bottom:90px solid #006ba3;
  border-top:90px solid transparent;
  border-radius:0 0 7px 7px;
  z-index:90;
}
.recipient-env-seal{
  position:absolute;left:50%;top:70px;
  width:60px;height:60px;margin-left:-30px;
  display:grid;place-items:center;
  border-radius:50%;z-index:120;
  color:#f8cfdb;
  background:radial-gradient(circle at 35% 25%,#e7a5bb,#c76787 56%,#913c5e 100%);
  box-shadow:inset 2px 3px 4px rgba(255,255,255,.32),inset -3px -4px 6px rgba(94,31,54,.28),0 4px 9px rgba(59,27,39,.22);
  will-change:transform,opacity;
}
.recipient-env-seal>span{font:30px Georgia,serif;line-height:1;transform:translateY(-4px)}
.recipient-card-viewport{
  position:absolute;inset:0;height:180px;
  z-index:50;
  overflow:visible;
  clip-path:inset(-2000px -2000px 0 -2000px);
  pointer-events:none;
  will-change:clip-path;
}
.recipient-motion-card{
  position:absolute;
  left:25px;
  top:18px;
  width:230px;
  height:auto;
  aspect-ratio:4/5;
  display:block;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 12px 34px rgba(46,37,25,.18);
  z-index:50;
  transform-origin:top left;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.recipient-motion-card[hidden]{display:none!important}
.recipient-open-prompt{
  position:absolute;
  left:50%;top:calc(50% + 124px);
  transform:translateX(-50%);
  margin:0;
  color:#777a68;
  font-size:.95rem;
  white-space:nowrap;
  text-align:center;
}
.recipient-final-zone{
  position:absolute;
  left:50%;top:50%;
  width:min(660px,84vw);
  aspect-ratio:4/5;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:160;
}
.recipient-final-image{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  border-radius:8px;
  box-shadow:0 16px 42px rgba(46,37,25,.16);
  will-change:opacity;
}
.recipient-finish-actions{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  opacity:1;
}
.recipient-finish-actions #new-promise,
.recipient-finish-actions .recipient-share-promise{
  opacity:0;
  transform:translate3d(0,-8px,0);
  will-change:opacity,transform;
}
.recipient-finish-actions .recipient-share-promise{pointer-events:none}
.recipient-card-status,
.recipient-card-actions,
#received-transcript{display:none!important}
.recipient-emoji-layer{
  position:fixed;
  inset:0;
  z-index:500;
  pointer-events:none;
  overflow:hidden;
}
.recipient-flight-emoji{
  position:fixed;left:0;top:0;
  opacity:0;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.10));
  will-change:transform,opacity;
}
@media(max-width:620px){
  .recipient-reveal{grid-template-rows:minmax(520px,1fr) auto;padding-inline:10px}
  .recipient-stage{min-height:540px}
  .recipient-final-zone{width:min(88vw,520px)}
  .recipient-open-prompt{top:calc(50% + 120px)}
}
@media(prefers-reduced-motion:reduce){
  .recipient-flight-emoji{display:none!important}
}


/* V34: final recipient actions are a matched pair. */
.recipient-finish-actions #new-promise,
.recipient-finish-actions .recipient-share-promise{
  box-sizing:border-box;
  width:224px;
  min-width:224px;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}
@media(max-width:520px){
  .recipient-finish-actions{width:min(100%,330px);}
  .recipient-finish-actions #new-promise,
  .recipient-finish-actions .recipient-share-promise{
    width:100%;
    min-width:0;
  }
}


/* Visible test-build marker for deployed-cache diagnostics. */
footer .build-version{
  display:block;
  width:100%;
  margin-top:8px;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.58;
}


/* V38 shared paper texture — narrowly scoped so sender envelope geometry is untouched. */
:root{--promise-paper-texture-v40:url('promise-paper-texture-v40.png')}
#composer > #promise-form > .paper,
#received > .paper,
.motion-card-inner{
  background-color:#fffefa;
  background-image:var(--promise-paper-texture-v40);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
#composer > #promise-form > .paper textarea{
  background-color:transparent !important;
  background-image:none !important;
}
/* Envelope/button styles intentionally inherit unchanged from V36. */