.media-compose-dialog {
  color: var(--ink); background: var(--card, var(--bg)); border: 1px solid var(--line);
  border-radius: 8px; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; margin: auto; overflow: auto; box-sizing: border-box; font: inherit;
}
.media-compose-dialog::backdrop { background: rgb(0 0 0 / .48); }
.media-compose-dialog header, .media-compose-dialog footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.media-compose-dialog header { justify-content: space-between; border-bottom: 1px solid var(--line); }
.media-compose-dialog header > div { min-width: 0; }
.media-compose-dialog h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.media-compose-dialog p { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.media-compose-dialog footer { justify-content: flex-end; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--card, var(--bg)); }
.media-compose-dialog button { min-height: 44px; }
.media-compose-body { padding: 12px 16px; }
.media-compose-preview { display: grid; place-items: center; min-height: 80px; background: var(--bg); border-radius: 4px; }
.media-compose-preview img { display: block; max-width: 100%; max-height: 34dvh; object-fit: contain; }
.media-compose-preview .media-compose-file-icon { width: 64px; height: 64px; margin: 12px; }
.media-compose-file { margin: 10px 0 14px; overflow-wrap: anywhere; }
.media-compose-file strong, .media-compose-file small { display: block; }
.media-compose-file small { font-size: 12px; margin-top: 4px; }
.media-compose-body label { display: block; margin-bottom: 6px; font-size: 13px; }
.media-compose-body textarea { width: 100%; box-sizing: border-box; resize: vertical; font-size: 16px; min-height: 72px; }
.media-compose-error { border-inline-start: 3px solid currentColor; padding-inline-start: 8px; }
.media-compose-dialog [data-send] { display: inline-flex; align-items: center; gap: 8px; }
.media-compose-dialog [data-send] ion-icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .image-viewer { animation: none; } }