.dead-letter-alert-trigger[hidden], #deadLetterAlert[hidden] { display: none !important; }
.header-actions > .dead-letter-alert-trigger, .mobile-tabbar > .dead-letter-alert-trigger {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px;
  min-width: 36px; padding: 7px; border: 1px solid #d9e5e0; border-radius: 6px; background: #fff;
}
.dead-letter-alert-trigger img { width: 20px; height: 20px; }
.dead-letter-alert-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; padding: 2px 4px;
  border: 2px solid #fff; border-radius: 12px; color: #fff; background: #b83f34; font-size: 10px; line-height: 14px; }
#deadLetterAlert { position: fixed; z-index: 27; right: 22px; bottom: 24px; width: 380px; max-width: calc(100vw - 32px);
  border: 1px solid #ead9d5; border-top: 3px solid #b9483e; border-radius: 8px; background: #fff; color: #263c32;
  box-shadow: 0 12px 36px #263e3624; animation: deadLetterAlertIn .3s ease-out; font-size: 13px; letter-spacing: 0;
  max-height: calc(100dvh - 40px); overflow: auto; }
.dead-letter-alert-head { display: flex; gap: 11px; align-items: center; padding: 17px 18px 12px; }
.dead-letter-alert-mark { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px;
  border-radius: 6px; background: #24685b; color: #fff; font-size: 22px; font-weight: 700; }
.dead-letter-alert-head strong { font-size: 15px; }
.dead-letter-alert-head small { display: block; margin-top: 4px; color: #788980; font-size: 11px; }
#deadLetterAlertClose { margin-left: auto; min-width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #426e61; font-size: 24px; }
.dead-letter-alert-body { padding: 0 18px 16px; }
#deadLetterAlertTitle { margin: 2px 0 9px; color: #a9362d; font-size: 19px; line-height: 1.4; }
.dead-letter-alert-body p { margin: 0 0 13px; color: #64776c; font-size: 12px; line-height: 1.6; }
#deadLetterAlertLatest { padding-top: 12px; border-top: 1px solid #eef0ed; }
.dead-letter-alert-meta { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; color: #788980; font-size: 11px; }
.dead-letter-alert-meta span { color: #ac4037; }
#deadLetterAlertSource { display: block; margin: 8px 0 4px; font-size: 13px; overflow-wrap: anywhere; }
#deadLetterAlertReason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: 0; }
#deadLetterAlert footer { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #ecede9; }
#deadLetterAlert footer small { margin-right: auto; color: #788980; font-size: 11px; }
#deadLetterAlertView { flex-shrink: 0; border: 1px solid #267767; border-radius: 6px; padding: 9px 13px; color: #fff; background: #267767; font-size: 13px; }
#deadLetterAlert button:focus-visible, .dead-letter-alert-trigger:focus-visible { outline: 3px solid #69b4aa; outline-offset: 3px; }
body:has(#reminderDock:not([hidden])) #deadLetterAlert { visibility: hidden; }
@keyframes deadLetterAlertIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 860px) {
  body.has-dead-letter-alert .mobile-tabbar { grid-template-columns: 84px minmax(0,1fr) 40px 48px; }
  #deadLetterAlert { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 360px; max-height: calc(100dvh - 150px); }
}
@media (prefers-reduced-motion: reduce) { #deadLetterAlert { animation: none; } }