.msg-controls, .msg-result { padding: 26px 30px; }
.msg-tool .field .msg-drop { display: grid; gap: 10px; padding: 24px; border: 1px dashed var(--control-line); border-radius: 10px; background: var(--soft); text-align: center; cursor: pointer; }
.msg-drop span, .msg-status { color: var(--muted); font-size: 12px; line-height: 1.6; }
.msg-drop input { max-width: 100%; margin: auto; }
.msg-drop:hover, .msg-drop.dragover { background: var(--mint); border-color: var(--green); }
.msg-status { margin-bottom: 0; overflow-wrap: anywhere; }
.msg-status.error { color: var(--danger); }
.msg-result { border-top: 1px solid var(--line); }
.msg-result h2 { margin-top: 0; font: 600 25px var(--display); overflow-wrap: anywhere; }
.msg-details { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 16px; font-size: 13px; line-height: 1.6; }
.msg-details dt { color: var(--muted); }
.msg-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-body, .msg-headers pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.7 var(--sans, sans-serif); }
.msg-body { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.msg-attachments { margin-top: 24px; padding: 18px; background: var(--soft); border-radius: 10px; }
.msg-attachments h3 { margin: 0 0 12px; font-size: 14px; }
.msg-attachments ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.msg-attachments .button { display: inline-block; font-size: 12px; text-decoration: none; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.msg-attachments li { max-width: 100%; }
.msg-headers { margin-top: 24px; font-size: 12px; }
.msg-headers summary { cursor: pointer; color: var(--muted); }
@media (max-width: 600px) { .msg-controls, .msg-result { padding: 18px; } .msg-details { grid-template-columns: 1fr; gap: 4px; } .msg-details dd { margin-bottom: 10px; } }