/* SocialHeat v03: three compact notification variants. */
html body #toastContainer {
    position:fixed;top:20px;right:20px;left:auto;bottom:auto;
    width:min(380px,calc(100vw - 32px));max-width:380px;
    max-height:calc(100dvh - 40px);overflow-y:auto;
    display:flex;flex-direction:column;gap:10px;z-index:10000;pointer-events:none;
}
#toastContainer .sh-notice {
    --notice-ink:#0b61b4;--notice-soft:#eaf3fc;
    display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:start;gap:10px;
    width:100%;box-sizing:border-box;padding:14px;border-radius:12px;
    border:1px solid var(--border-color,#e2e8f0);background:var(--bg-card,#fff);
    color:var(--text-primary,#0f172a);box-shadow:0 8px 24px #0f172a14;
    font-family:Inter,system-ui,sans-serif;pointer-events:auto;animation:shNoticeEnter .18s ease;
}
#toastContainer .sh-notice-success {--notice-ink:#047857;--notice-soft:#e9f8f1}
#toastContainer .sh-notice-error {--notice-ink:#be123c;--notice-soft:#fff1f5}
.sh-notice-icon {display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--notice-soft);color:var(--notice-ink)}
.sh-notice-icon svg {width:18px;height:18px}
.sh-notice-copy {min-width:0}
.sh-notice-copy strong {display:block;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:3px}
.sh-notice-copy p {margin:0;font-size:12px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.sh-notice-close {width:24px;height:24px;padding:3px;border:0;border-radius:5px;background:transparent;color:var(--text-secondary,#64748b);cursor:pointer}
.sh-notice-close svg {width:18px;height:18px}
.sh-notice-close:hover {background:var(--bg-subtle,#f1f5f9)}
.sh-notice-close:focus-visible {outline:2px solid var(--notice-ink);outline-offset:2px}
[data-sh-notice] {display:none!important}
[data-theme=dark] #toastContainer .sh-notice-success {--notice-ink:#6ee7b7;--notice-soft:#064e3b}
[data-theme=dark] #toastContainer .sh-notice-error {--notice-ink:#fda4af;--notice-soft:#4c0519}
[data-theme=dark] #toastContainer .sh-notice-notice {--notice-ink:#93c5fd;--notice-soft:#172f4f}
@keyframes shNoticeEnter {from {opacity:0;transform:translateY(-6px)}to {opacity:1;transform:translateY(0)}}
@media(max-width:600px) {html body #toastContainer {top:12px;right:16px}}
@media(prefers-reduced-motion:reduce) {#toastContainer .sh-notice {animation:none}}

/* Guideline typography for notifications and progress dialogs. */
:is(.waiting-modal-box,.custom-modal-box,.sh-notice) {
    font-family: SHSidebarInter, Inter, system-ui, sans-serif;
}
.waiting-modal-box .waiting-modal-title {font-family:inherit;font-size:18px;font-weight:600;line-height:1.4;letter-spacing:0;}
.waiting-modal-box :is(.waiting-modal-message,.waiting-notice-banner) {font-family:inherit;font-size:13px;line-height:1.6;}
.waiting-modal-box :is(.waiting-status-chip,.waiting-progress-detail,.waiting-progress-percent) {font-family:inherit;font-size:12px;font-weight:500;line-height:1.5;}
.waiting-modal-box .waiting-status-chip {white-space:normal;text-align:left;overflow-wrap:anywhere;}