#client-invoice-notices{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.invoice-notice-dialog{width:min(720px,calc(100vw - 28px));max-height:86dvh;overflow:auto;padding:26px;border:1px solid var(--jf-line,var(--line,#d6c9de));border-radius:18px;background:var(--jf-surface,#fff);color:var(--jf-ink,var(--ink,#291b35));box-shadow:0 24px 90px #13082044}
.invoice-notice-dialog::backdrop{background:#180c2b9c}
.invoice-notice-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.invoice-notice-dialog h2{margin:0;font-family:inherit;font-size:24px;letter-spacing:-.03em}
.invoice-notice-row{border-top:1px solid var(--jf-line,var(--line,#e1d9e7));padding:20px 0}
.invoice-notice-row.unread{border-left:3px solid var(--jf-orange,var(--primary,#713c96));padding-left:14px}
.invoice-notice-heading{display:flex;align-items:start;justify-content:space-between;gap:14px}
.invoice-notice-heading span{font-weight:700;white-space:nowrap}
.invoice-notice-row p{margin:9px 0;font-size:14px;overflow-wrap:anywhere}
.invoice-notice-row small{color:var(--jf-muted,var(--text-secondary,#6a5d74))}
.invoice-notice-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.invoice-notice-actions .btn{white-space:normal}
.invoice-notice-toast{position:fixed;z-index:650;right:22px;bottom:22px;width:min(540px,calc(100vw - 32px));display:flex;align-items:center;gap:14px;padding:20px 42px 20px 20px;border:1px solid var(--jf-line,var(--line,#d6c9de));border-left:4px solid var(--jf-orange,var(--primary,#713c96));border-radius:14px;background:var(--jf-surface,#fff);color:var(--jf-ink,var(--ink,#291b35));box-shadow:0 12px 40px #180c2b24}
.invoice-notice-toast p{margin:7px 0 0;font-size:13px;line-height:1.5}
.invoice-notice-toast .btn{flex-shrink:0}
.invoice-toast-close{position:absolute;right:5px;top:5px;border:0;background:transparent;color:inherit;font-size:24px;cursor:pointer;width:34px;height:34px}
@media(max-width:760px){
 #client-invoice-notices{grid-column:1/3;grid-row:3;order:5;min-height:44px}
 body.jamfam-themed #app .topbar #client-invoice-notices{order:5}
 .invoice-notice-dialog{padding:20px}
 .invoice-notice-toast{bottom:calc(var(--hub-nav-height,142px) + 16px);right:16px;align-items:stretch;flex-direction:column;gap:12px}
 .invoice-notice-toast .btn{align-self:flex-start}
 .invoice-notice-heading{flex-wrap:wrap}
}