.letter-tools > div { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.letter-tools button { padding: 7px 9px; }
.edit-hint { margin-top: 26px; color: #8a8a8a; font-size: 8px; line-height: 1.5; letter-spacing: .12em; }
.answer.editable { min-height: 170px; margin-top: 10px; padding: 23px; border: 1px dashed transparent; outline: 0; transition: border-color .25s, background .25s; }
.answer.editable:hover { border-color: #c7c7c7; }
.answer.editable:focus { border-color: #d71920; background: #faf9f5; }
.quick-actions { display: flex; gap: 9px; padding: 30px 0; border-top: 1px solid #deddd8; margin-top: 28px; }
.quick-actions button { border: 1px solid #111; background: #fff; padding: 13px 18px; font-size: 9px; letter-spacing: .1em; cursor: pointer; }
.quick-actions button:first-child { background: #111; color: #fff; }
#compose-form label { position: relative; }
#compose-form input[readonly] { color: #6d2239; font-weight: 700; cursor: not-allowed; }
.field-link { position: absolute; right: 18px; border: 0; background: none; color: #6d2239; font-size: 8px; letter-spacing: .12em; cursor: pointer; }
.cc-row { display: none !important; }
.cc-row.visible { display: grid !important; }
.editor-tools { min-height: 42px; padding: 7px 20px; border-bottom: 1px solid #deddd8; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.editor-tools button { border: 0; background: #e7e5df; padding: 7px 9px; font-size: 8px; letter-spacing: .07em; cursor: pointer; }
.editor-tools span { margin-left: auto; color: #d71920; font-size: 8px; letter-spacing: .1em; }
#compose-form .body-row { align-items: start; }
#compose-form .body-row textarea { height: 86px; resize: vertical; line-height: 1.55; }
@media (max-width:650px) {
  .letter-tools { gap: 8px; align-items: flex-start; }
  .letter-tools > div { max-width: 75%; }
  .letter-tools button { font-size: 7px; padding: 6px; }
  .answer.editable { padding: 16px; }
  #compose-form label { grid-template-columns: 70px 1fr; padding: 10px 13px; }
  .editor-tools { padding: 7px 13px; }
  .editor-tools span { width: 100%; margin: 4px 0; }
}

/* Mail behavior and restrained branded postcard */
.mail-app, .messages { min-height: 0; }
.messages { overflow: hidden; }
.message-list { overscroll-behavior: contain; scrollbar-width: thin; }
.empty-logo { display: block; width: 92px; height: 38px; object-fit: contain; margin: 0 auto 24px; }
.mail-mark { display: none; }
.compose { line-height: 1.2; }
.card-option { margin: 18px 20px; padding: 14px 16px; border: 1px solid #d1cfc9; background: #fff; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 14px; }
.card-option img { width: 58px; height: 28px; object-fit: contain; }
.card-option strong { display: block; font-size: 10px; letter-spacing: .08em; }
.card-option p { margin: 5px 0 0; color: #777; font-size: 9px; line-height: 1.4; }
.card-option span { color: #6d2239; font-size: 8px; letter-spacing: .08em; }
.postcard { min-height: 310px; display: flex; flex-direction: column; justify-content: flex-end; }
.postcard > img { position: absolute; left: 25px; top: 22px; width: 80px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); opacity: .94; }
.postcard > small { position: absolute; right: 25px; top: 29px; }
dialog { width: min(680px, calc(100% - 32px)); margin: auto 20px 20px auto; }
dialog::backdrop { background: #1113; backdrop-filter: none; }
#compose-form { border-radius: 0; box-shadow: 0 16px 55px #0005; max-height: calc(100vh - 88px); overflow: auto; }
.toast { border-left: 3px solid #d71920; box-shadow: 0 10px 30px #0003; }
@media (max-width:650px) {
  dialog { width: 100%; max-width: none; height: calc(100% - 58px); margin: 58px 0 0; }
  #compose-form { min-height: 100%; max-height: 100%; }
  .card-option { grid-template-columns: 48px 1fr; margin: 12px; }
  .card-option span { grid-column: 2; }
}