/* Yksityisviestin omat tyylit (viestikenttä, asetukset, avattu viesti).
 * Yhteiset tokenit, fontit ja komponentit ovat alustan tiedostossa alusta.css. */

/* ---------- viestikenttä ---------- */
.msg-field textarea {
  width: 100%; min-height: 168px; padding: var(--space-3); resize: vertical;
  border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--bg-100); color: var(--ink);
  font: 400 14px/21px var(--font-mono); outline: none; transition: border-color .15s;
}
.msg-field textarea:focus { border-color: var(--accent); }
.total .over { color: var(--fail); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 .field:last-child { grid-column: 1 / -1; } }
@media (max-width: 380px) { .grid3 { grid-template-columns: 1fr; } }
#pw-wrap { margin-top: var(--space-3); }
.hint.warn { color: var(--fail-ink-2, var(--fail)); }

/* vanha Cryptletter-linkki */
.notice { margin: 0 0 var(--space-6); padding: var(--space-4); border: 1px solid var(--fail-line); border-radius: var(--radius-md); background: var(--fail-ground); }
.notice h2 { color: var(--fail); font-size: 15px; line-height: 20px; }
.notice p { margin: 0; color: var(--fail-ink-2); }

/* ---------- avaus ---------- */
#open-form { gap: var(--space-3); margin-top: var(--space-5); }
#open-form .btn.wide { margin-top: 0; }
.notice-line { margin: var(--space-4) 0 0; padding: var(--space-3); text-align: center; border: 1px solid var(--line-100); border-radius: var(--radius-md); background: var(--bg-100); color: var(--ink-2); font-size: 13px; line-height: 18px; }
#read-view:has(#rd-error:not([hidden])) { background: var(--fail-ground); border-color: var(--fail-line); }
#rd-error-msg { color: var(--fail-ink-2); }

.msg-text {
  margin-top: var(--space-4); padding: var(--space-4); max-height: 60vh; overflow: auto;
  border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--bg-100);
  font: 400 15px/23px var(--font-mono); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text;
}
.msg-text a { color: var(--accent); }
.msg-text.hidden-text { filter: blur(7px); user-select: none; }

/* omat viestit: tila */
.mine .st .ok { color: var(--accent); }
.mine .st .gone { color: var(--ink-muted); }