/* V23.6 — polimento visual das cartas recebidas
   Foco: timeline, título personalizado, unlock e encerramento.
   Sem alterar lógica ou estrutura persistida. */

/* ---------- Base de leitura ---------- */
.opened-message .paper{
  --reader-panel-max:760px;
  --reader-gap:clamp(34px,5vw,58px);
}
.opened-message .story-result > * + *{
  margin-top:var(--reader-gap)!important;
}
.opened-message .reader-section-heading,
.opened-message .story-heading-result,
.opened-message .reader-timeline,
.opened-message .reader-storymap,
.opened-message .story-unlock,
.opened-message .emotional-ending{
  width:min(100%,var(--reader-panel-max));
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ---------- Título personalizado ---------- */
.opened-message .story-heading-result{
  padding:clamp(8px,1vw,14px) 0;
  text-align:center;
}
.opened-message .story-heading-result.align-left{
  text-align:left;
}
.opened-message .story-heading-result .heading-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto 16px;
  max-width:360px;
}
.opened-message .story-heading-result.align-left .heading-divider{
  justify-content:flex-start;
  margin-left:0;
}
.opened-message .story-heading-result .heading-divider > i{
  height:1px;
  flex:1 1 76px;
  max-width:110px;
  background:linear-gradient(90deg,transparent,rgba(221,112,158,.38),transparent)!important;
}
.opened-message .story-heading-result .heading-divider-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#d95791;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(249,226,237,.92));
  border:1px solid rgba(202,91,139,.12);
  box-shadow:0 12px 24px rgba(149,60,101,.10);
}
.opened-message .story-heading-result .heading-divider-icon .ui-icon{
  width:15px;
  height:15px;
}
.opened-message .story-heading-result .heading-pill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(184,83,128,.13);
  background:rgba(255,255,255,.72);
  color:#9b5d79;
  font-family:"DM Sans",sans-serif!important;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.opened-message .story-heading-result h4{
  max-width:18ch;
  margin:0 auto 16px!important;
  text-wrap:balance;
  line-height:1.08!important;
}
.opened-message .story-heading-result.align-left h4{
  margin-left:0!important;
}
.opened-message .story-heading-result p{
  max-width:58ch;
  margin:0 auto!important;
  line-height:1.78!important;
}
.opened-message .story-heading-result.align-left p{
  margin-left:0!important;
}

/* ---------- Linha do tempo ---------- */
.opened-message .reader-timeline{
  padding:clamp(24px,3.6vw,40px);
  border-radius:30px;
  border:1px solid rgba(118,69,91,.12);
  background:
    radial-gradient(circle at 50% 0,rgba(224,106,157,.07),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,250,252,.46));
  box-shadow:0 18px 42px rgba(74,34,52,.07);
}
.opened-message .reader-timeline .reader-section-heading{
  margin-bottom:28px!important;
}
.opened-message .reader-section-heading .reader-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:18px;
  background:linear-gradient(145deg,#fff8fb,#f7dce8);
  border:1px solid rgba(197,94,139,.12);
  box-shadow:0 14px 30px rgba(114,48,79,.08);
}
.opened-message .reader-section-heading .reader-icon .ui-icon{
  width:21px;
  height:21px;
}
.opened-message .reader-section-heading h4{
  max-width:20ch;
  margin-inline:auto!important;
  line-height:1.1!important;
  text-wrap:balance;
}
.opened-message .reader-timeline-list{
  position:relative;
  display:grid;
  gap:0!important;
  padding:2px 0 2px 30px!important;
}
.opened-message .reader-timeline-list:before{
  left:8px!important;
  top:10px!important;
  bottom:10px!important;
  width:2px!important;
  border-radius:999px;
  background:linear-gradient(180deg,#e6639e,rgba(230,99,158,.18))!important;
}
.opened-message .reader-timeline-item{
  position:relative;
  padding:0 0 30px 12px;
}
.opened-message .reader-timeline-item:last-child{
  padding-bottom:0;
}
.opened-message .reader-timeline-dot{
  left:-29px!important;
  top:4px!important;
  width:16px!important;
  height:16px!important;
  border:4px solid rgba(255,255,255,.98)!important;
  background:#d85790!important;
  box-shadow:0 0 0 1px rgba(200,76,132,.22),0 8px 16px rgba(161,61,107,.16)!important;
}
.opened-message .reader-timeline-item b{
  display:inline-block!important;
  margin-bottom:7px;
  font-family:"DM Sans",sans-serif!important;
  font-size:10px!important;
  line-height:1.2;
  letter-spacing:.17em!important;
  text-transform:uppercase;
  font-weight:800;
  color:#ae6686!important;
}
.opened-message .reader-timeline-item strong{
  display:block;
  max-width:60ch;
  margin:0 0 7px!important;
  font-size:clamp(18px,1.45vw,22px)!important;
  line-height:1.48!important;
  color:#523342!important;
}
.opened-message .reader-timeline-item p{
  max-width:62ch;
  margin:0!important;
  color:#765a67!important;
  font-size:14px!important;
  line-height:1.7!important;
}

/* ---------- Pergunta / desbloqueio ---------- */
.opened-message .story-unlock{
  padding:clamp(24px,3.4vw,36px)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(225,96,154,.08),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,249,252,.76))!important;
  border:1px solid rgba(133,72,99,.12)!important;
  box-shadow:0 20px 48px rgba(69,31,48,.08)!important;
}
.opened-message .story-unlock-top{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px!important;
}
.opened-message .story-unlock-top > span{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  width:auto;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(181,88,129,.11);
  color:#9a5775!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:9px!important;
  font-weight:800;
  letter-spacing:.17em!important;
  text-transform:uppercase;
}
.opened-message .story-unlock-top > span .ui-icon{
  width:14px;
  height:14px;
}
.opened-message .story-unlock-top > strong{
  max-width:18ch;
  margin:0 auto;
  color:#563248!important;
  font-size:clamp(28px,3vw,42px)!important;
  line-height:1.08!important;
  text-wrap:balance;
}
.opened-message .story-unlock-top > small{
  max-width:48ch;
  color:#8b6979!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:11px!important;
  line-height:1.6!important;
}
.opened-message .story-unlock-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:stretch!important;
  max-width:620px;
  margin:22px auto 0!important;
}
.opened-message .story-unlock .unlock-answer{
  min-height:58px!important;
  padding:0 18px!important;
  border-radius:18px!important;
  background:#fff!important;
  color:#4b2e3c!important;
  border:1px solid rgba(101,58,78,.13)!important;
  box-shadow:0 10px 24px rgba(73,36,52,.05)!important;
}
.opened-message .story-unlock .unlock-submit-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:176px!important;
  min-height:58px!important;
  padding:0 20px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f34d99,#b453e9)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 14px 30px rgba(196,70,143,.22)!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
}
.opened-message .story-unlock .unlock-submit-btn .ui-icon{
  width:16px;
  height:16px;
}
.opened-message .story-unlock .unlock-submit-btn:disabled{
  background:linear-gradient(135deg,#5ebd96,#4b9478)!important;
}
.opened-message .story-unlock-reveal{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(118,69,91,.10);
  text-align:center;
}

/* ---------- Encerramento ---------- */
.opened-message .emotional-ending{
  padding:clamp(28px,4vw,42px)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(235,102,162,.08),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,249,252,.82))!important;
  border:1px solid rgba(125,69,94,.12)!important;
  box-shadow:0 22px 52px rgba(69,31,48,.08)!important;
  text-align:center;
}
.opened-message .ending-kicker{
  display:inline-flex!important;
  margin:0 auto 14px!important;
  color:#a16781!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:10px!important;
  font-weight:800;
  letter-spacing:.18em!important;
  text-transform:uppercase;
}
.opened-message .ending-lead{
  max-width:24ch;
  margin:0 auto 22px!important;
  color:#4f3040!important;
  font-size:clamp(28px,2.8vw,40px)!important;
  line-height:1.14!important;
  text-wrap:balance;
}
.opened-message .ending-reveal-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:58px;
  margin:0 auto!important;
  padding:0 22px!important;
  border-radius:18px!important;
  border:0!important;
  background:linear-gradient(135deg,#f34e99,#bd55f0)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(199,72,148,.22)!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
}
.opened-message .ending-reveal-btn .ui-icon{
  width:16px;
  height:16px;
}
.opened-message .final-secret{
  width:100%;
  max-width:620px;
  margin:0 auto;
}
.opened-message .final-secret > strong{
  display:block;
  margin:8px auto 0;
  max-width:44ch;
  color:#563546!important;
  line-height:1.75!important;
}
.opened-message .post-letter-actions button,
.opened-message .recipient-response-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.opened-message .post-letter-actions .ui-icon,
.opened-message .recipient-response-btn .ui-icon{
  width:15px;
  height:15px;
}

/* ---------- Tema escuro ---------- */
.opened-message .paper.paper-night{
  color:#f8edf3!important;
}
.opened-message .paper.paper-night .story-heading-result .heading-divider-icon,
.opened-message .paper.paper-night .reader-section-heading .reader-icon{
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045))!important;
  border-color:rgba(255,220,236,.12)!important;
  color:#ff83b8!important;
  box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
}
.opened-message .paper.paper-night .story-heading-result .heading-pill{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,222,237,.10)!important;
  color:#d9a8bd!important;
}
.opened-message .paper.paper-night .reader-timeline,
.opened-message .paper.paper-night .story-unlock,
.opened-message .paper.paper-night .emotional-ending{
  background:
    radial-gradient(circle at 50% 0,rgba(255,99,164,.075),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border-color:rgba(255,224,238,.10)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.opened-message .paper.paper-night .reader-timeline-item b{
  color:#e4a1bd!important;
}
.opened-message .paper.paper-night .reader-timeline-item strong,
.opened-message .paper.paper-night .story-unlock-top > strong,
.opened-message .paper.paper-night .ending-lead,
.opened-message .paper.paper-night .final-secret > strong{
  color:#ffe7f0!important;
}
.opened-message .paper.paper-night .reader-timeline-item p,
.opened-message .paper.paper-night .story-unlock-top > small{
  color:#d6b7c5!important;
}
.opened-message .paper.paper-night .story-unlock-top > span{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,218,235,.10)!important;
  color:#e2a6c0!important;
}
.opened-message .paper.paper-night .story-unlock .unlock-answer{
  background:rgba(255,255,255,.08)!important;
  color:#fff3f8!important;
  -webkit-text-fill-color:#fff3f8!important;
  border-color:rgba(255,224,238,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.opened-message .paper.paper-night .story-unlock .unlock-answer::placeholder{
  color:#bd98aa!important;
  -webkit-text-fill-color:#bd98aa!important;
}
.opened-message .paper.paper-night .ending-kicker{
  color:#d5a5bb!important;
}
.opened-message .paper.paper-night .post-letter-actions button{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,221,236,.10)!important;
  color:#f3dce7!important;
}

/* ---------- Tema vidro ---------- */
.opened-message .paper.paper-glass .reader-timeline,
.opened-message .paper.paper-glass .story-unlock,
.opened-message .paper.paper-glass .emotional-ending{
  background:
    radial-gradient(circle at 50% 0,rgba(255,114,176,.09),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;
  border-color:rgba(255,224,238,.12)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.opened-message .paper.paper-glass .reader-timeline-item strong,
.opened-message .paper.paper-glass .story-unlock-top > strong,
.opened-message .paper.paper-glass .ending-lead,
.opened-message .paper.paper-glass .final-secret > strong{
  color:#fff0f6!important;
}
.opened-message .paper.paper-glass .reader-timeline-item p,
.opened-message .paper.paper-glass .story-unlock-top > small{
  color:#d8b8c6!important;
}
.opened-message .paper.paper-glass .story-heading-result .heading-divider-icon,
.opened-message .paper.paper-glass .reader-section-heading .reader-icon{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;
  border-color:rgba(255,220,236,.13)!important;
  color:#ff7db5!important;
}
.opened-message .paper.paper-glass .story-unlock-top > span,
.opened-message .paper.paper-glass .story-heading-result .heading-pill{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,220,236,.11)!important;
  color:#deb0c3!important;
}
.opened-message .paper.paper-glass .story-unlock .unlock-answer{
  background:rgba(255,255,255,.08)!important;
  color:#fff2f8!important;
  -webkit-text-fill-color:#fff2f8!important;
  border-color:rgba(255,225,239,.13)!important;
}
.opened-message .paper.paper-glass .story-unlock .unlock-answer::placeholder{
  color:#c3a0b0!important;
  -webkit-text-fill-color:#c3a0b0!important;
}
.opened-message .paper.paper-glass .ending-kicker{
  color:#d7a9bd!important;
}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .opened-message .reader-timeline,
  .opened-message .story-unlock,
  .opened-message .emotional-ending{
    width:100%;
    padding:22px 16px!important;
    border-radius:24px!important;
  }
  .opened-message .reader-timeline-list{
    padding-left:27px!important;
  }
  .opened-message .reader-timeline-item{
    padding-left:8px;
    padding-bottom:26px;
  }
  .opened-message .story-unlock-form{
    grid-template-columns:1fr!important;
  }
  .opened-message .story-unlock .unlock-submit-btn{
    width:100%!important;
    min-width:0!important;
  }
  .opened-message .ending-reveal-btn{
    width:100%!important;
  }
  .opened-message .story-heading-result h4{
    max-width:15ch;
  }
}

@media(prefers-reduced-motion:reduce){
  .opened-message .reader-timeline-dot,
  .opened-message .ending-reveal-btn,
  .opened-message .unlock-submit-btn{
    transition:none!important;
  }
}