.event-mail-panel { margin-block:20px; min-width:0; }
.event-mail-panel h3 { margin-top:24px; }
.notice-jobs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.notice-jobs article { border:1px solid var(--line,#dce1e3); border-radius:14px; padding:16px; min-width:0; }
.notice-jobs p,.notice-jobs strong,.notice-jobs h4 { overflow-wrap:anywhere; }
.notice-recipients { border:1px solid var(--line,#dce1e3); border-radius:12px; max-height:280px; overflow:auto; padding:12px; }
.notice-recipients .checkbox-row { align-items:flex-start; min-height:44px; }
.notice-recipients span { min-width:0; }
.notice-recipients small { display:block; overflow-wrap:anywhere; }
#event-mail-compose { min-width:0; }
#event-mail-compose [hidden] { display:none!important; }
#notice-preview { border:1px solid var(--line,#dce1e3); border-radius:12px; padding:12px; min-width:0; }
#notice-preview iframe { display:block; width:100%; height:560px; border:0; background:#fff; }
#event-mail-compose .btn { min-height:44px; white-space:normal; }
#event-mail-compose .input,#event-mail-compose .select,#event-mail-compose .textarea { font-size:16px; min-width:0; width:100%; }
@media(max-width:600px) { .event-mail-panel .row { flex-direction:column; align-items:stretch; } }
/* Keep both edges of the mail dialog inside the viewport, including at 360px.
   The legacy mobile dialog width was wider than its padded grid container. */
.dialog-backdrop:has(#event-mail-compose) { padding:12px; }
.dialog:has(#event-mail-compose) { width:min(650px,100%); min-width:0; max-width:100%; }
#event-mail-compose > .checkbox-row { min-height:44px; align-items:flex-start; }