<!-- SOLUV · part 461 -->
/* Errors: always visible, never swallowed. */
.sr-errors{ flex:0 0 auto; }
.sr-error{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:#4a1418; color:#ffe3e3;
  border-bottom:1px solid #7a2a30; font-size:17px; }
.sr-error p{ margin:0; flex:1 1 auto; overflow-wrap:anywhere; }

/* Letters list */
.sr-list{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:16px 12px 24px; display:flex; flex-direction:column; gap:22px; }
.sr-letter{ position:relative; background:var(--sr-paper); color:var(--sr-text); border-radius:6px;
  border:1px solid var(--sr-paper-edge); box-shadow:0 2px 0 #c9b88f; padding:14px 14px 12px; margin-top:10px; }
.sr-letter.sr-mine{ margin-left:28px; }
.sr-letter.sr-theirs{ margin-right:28px; }
.sr-letter.sr-king{ border:2px solid var(--sr-gold); box-shadow:0 0 0 3px rgba(231,181,58,.35), 0 0 18px rgba(231,181,58,.55); }
.sr-letter-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; padding-right:52px; }
.sr-face{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; color:#fff; background:var(--sr-c,#555); border:2px solid rgba(0,0,0,.15); }
.sr-king .sr-face{ background:linear-gradient(145deg,#f6d77a,#c8901c); color:#3a2600; border-color:#8a6210; }
.sr-name{ font-weight:700; font-size:17px; color:var(--sr-cn,#333); overflow-wrap:anywhere; }
.sr-king .sr-name{ color:#8a5a00; }
.sr-time{ font-size:15px; color:var(--sr-muted); margin-left:auto; flex:0 0 auto; }
.sr-text{ margin:0; font-size:18px; white-space:pre-wrap; overflow-wrap:anywhere; }
.sr-note{ font-size:15px; color:var(--sr-muted); margin-top:6px; min-height:0; }
.sr-letter.sr-failed .sr-note{ color:var(--sr-bad); font-weight:600; }
.sr-letter .sr-retry{ margin-top:8px; background:var(--sr-wax); border-color:var(--sr-wax-dark); color:#fff; }

/* The wax seal: two halves that crack apart once, then rest in place (never removed, so nothing shifts). */
.sr-seal{ position:absolute; top:-14px; right:12px; width:44px; height:44px; pointer-events:none; }
.sr-seal::before, .sr-seal::after{ content:""; position:absolute; top:0; width:22px; height:44px;
  background:radial-gradient(circle at 70% 35%, #c9343e 0, var(--sr-wax) 45%, var(--sr-wax-dark) 100%); }
.sr-seal::before{ left:0; border-radius:22px 0 0 22px; }
.sr-seal::after{ right:0; border-radius:0 22px 22px 0;
  background:radial-gradient(circle at 30% 35%, #c9343e 0, var(--sr-wax) 45%, var(--sr-wax-dark) 100%); }
.sr-seal span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;
  font:700 18px/1 Georgia,serif; color:#f3c9b0; }
.sr-king .sr-seal::before, .sr-king .sr-seal::after{ background:radial-gradient(circle, #f6d77a 0, #c8901c 70%, #8a6210 100%); }
.sr-king .sr-seal span{ color:#4a3000; }

/* Sealed: body folded (transform only — layout box already has its full size, so nothing below moves). */
.sr-letter .sr-fold{ transform-origin:50% 0; }
.sr-letter.sr-sealed .sr-fold{ transform:perspective(600px) rotateX(-70deg); opacity:0; }
.sr-letter.sr-opening .sr-fold{ animation:sr-unfold .45s ease-out both; }
.sr-letter.sr-opening .sr-seal::before{ animation:sr-crack-l .45s ease-out both; }
.sr-letter.sr-opening .sr-seal::after{ animation:sr-crack-r .45s ease-out both; }
.sr-letter.sr-opened .sr-seal::before{ transform:translateX(-5px) rotate(-14deg); }
.sr-letter.sr-opened .sr-seal::after{ transform:translateX(5px) rotate(14deg); }
@keyframes sr-unfold{ from{ transform:perspective(600px) rotateX(-70deg); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes sr-crack-l{ from{ transform:none; } to{ transform:translateX(-5px) rotate(-14deg); } }
@keyframes sr-crack-r{ from{ transform:none; } to{ transform:translateX(5px) rotate(14deg); } }

/* Welcome letter at the entrance */
.sr-welcome{ text-align:center; padding:32px 16px 18px; background:#fbf3df; }  /* top padding clears the seal */
.sr-welcome .sr-seal{ left:50%; right:auto; margin-left:-22px; top:-18px; }
.sr-welcome .sr-text{ font-family:Georgia,"Times New Roman",serif; font-size:19px; line-height:1.55; }
.sr-welcome .sr-sign{ display:block; margin-top:10px; font-size:15px; color:var(--sr-muted); font-style:italic; }

/* Composer: stays at the bottom of the room box; the box itself is sized to the visual viewport. */
.sr-compose{ flex:0 0 auto; background:var(--sr-ink2); border-top:1px solid #3a3145;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); }
.sr-row{ display:flex; align-items:flex-end; gap:8px; }
.sr-input{ flex:1 1 auto; min-width:0; min-height:48px; max-height:30vh; resize:none; padding:11px 12px;
  border-radius:12px; border:2px solid #4a4056; background:#fffaf0; color:var(--sr-text);
  font-size:17px; line-height:1.4; font-family:inherit; }
.sr-input:focus{ outline:none; border-color:var(--sr-gold); }
.sr-send{ background:var