.envelope {
  position: relative;
  width: min(92vw, 560px);
  margin: 0 auto;
  height: min(82vh, 680px);
  min-height: 420px;
  perspective: 1200px;
  transition: width 260ms ease;
}

.envelope-body {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 10%;
  height: min(54%, 380px);
  background: transparent;
  border-radius: 16px;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.envelope-body::before,
.envelope-body::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 76%;
  pointer-events: none;
}

.envelope-body::before {
  z-index: 4;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(160deg, rgba(244, 196, 219, 0.96), rgba(218, 111, 158, 0.92));
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 18px 36px rgba(71, 27, 49, 0.24);
}

.envelope-body::after {
  z-index: 2;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 238, 247, 0.96), rgba(235, 151, 190, 0.92));
  box-shadow: inset 0 0 0 1px rgba(174, 86, 125, 0.22);
}

.envelope-flap {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 24%;
  height: 44%;
  z-index: 5;
  background: linear-gradient(180deg, rgba(242, 177, 207, 0.98), rgba(203, 84, 139, 0.94));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  pointer-events: none;
}

.letter-paper {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: #fffdfd;
  border: 1px solid rgba(166, 103, 136, 0.2);
  box-shadow: 0 24px 46px rgba(71, 27, 49, 0.22);
  padding: 58px 22px 24px;
  overflow: auto;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(28%) scale(0.62);
  transform-origin: 50% 50%;
  clip-path: inset(0 0 58% 0 round 14px);
  transition: none;
  z-index: 3;
}

.letter-paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166, 103, 136, 0.22), transparent);
  pointer-events: none;
  z-index: 1;
}

.letter-paper::-webkit-scrollbar {
  display: none;
}

.letter-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  pointer-events: none;
}

.letter-actions .icon-btn {
  pointer-events: auto;
}

.letter-title {
  margin: 0 0 8px;
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.75rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 3.3em;
  overflow: hidden;
  padding-bottom: 0.2em;
}

.letter-written-at {
  position: static;
  display: block;
  margin: 0 0 10px;
  text-align: right;
  font-size: 0.76rem;
  color: rgba(95, 74, 86, 0.78);
  letter-spacing: 0.01em;
}

.letter-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.58;
  color: #4a3945;
  font-size: 0.98rem;
  max-width: 62ch;
}

.letter-segment {
  white-space: pre-wrap;
}

.letter-segment.author-admin1 {
  color: rgba(166, 42, 57, 0.98);
}

.letter-segment.author-admin2 {
  color: rgba(203, 54, 153, 0.98);
}

.letter-paper.author-admin1 .letter-title {
  color: rgba(136, 31, 48, 0.98);
}

.letter-paper.author-admin2 .letter-title {
  color: rgba(172, 40, 128, 0.98);
}

.letter-editor {
  display: grid;
  gap: 10px;
}

#openedLetterView,
.envelope:not(.open) #openedLetterView {
  opacity: 0;
}

.letter-editor textarea {
  min-height: 220px;
  resize: vertical;
  border: 1px solid rgba(50, 37, 50, 0.2);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font: inherit;
}

.letter-editor textarea:focus,
.letter-editor input:focus {
  outline: none;
  border-color: rgba(204, 79, 131, 0.5);
  box-shadow: 0 0 0 4px rgba(204, 79, 131, 0.12);
}

.envelope.open .envelope-flap {
  animation: envelope-flap-open 820ms cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}

.envelope.open .envelope-body {
  animation: envelope-shell-exit 1320ms ease 520ms forwards;
}

.envelope.open .letter-paper {
  animation: letter-pull-out 1680ms cubic-bezier(0.16, 0.84, 0.22, 1) 360ms forwards;
}

.envelope.open #openedLetterView {
  animation: letter-content-reveal 300ms ease 1640ms both;
}

@keyframes envelope-flap-open {
  0% { transform: rotateX(0deg); z-index: 5; }
  100% { transform: rotateX(178deg); z-index: 1; }
}

@keyframes envelope-shell-exit {
  0%, 66% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes letter-pull-out {
  0% { opacity: 0; transform: translateY(28%) scale(0.62); clip-path: inset(0 0 58% 0 round 14px); z-index: 3; }
  16% { opacity: 1; clip-path: inset(0 0 58% 0 round 14px); }
  55% { z-index: 6; }
  58% { transform: translateY(-14%) scale(0.84); clip-path: inset(0 0 24% 0 round 14px); z-index: 6; }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 14px); z-index: 6; }
}

@keyframes letter-content-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 700px) {
  .letter-paper {
    padding: 54px 14px 16px;
  }
}