.service-announcement {
    --notice-background: #eef2ff;
    --notice-border: #a5b4fc;
    --notice-ink: #312e81;
    position: fixed;
    z-index: 40;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: min(34rem, calc(100% - 2rem));
    padding: .8rem 3.5rem .8rem 1rem;
    border: 1px solid var(--notice-border);
    border-radius: .8rem;
    background: var(--notice-background);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    color: var(--notice-ink);
    font: 600 .9rem/1.45 ui-sans-serif, system-ui, sans-serif;
}

.service-announcement[data-announcement-level="warning"] {
    --notice-background: #fffbeb;
    --notice-border: #f59e0b;
    --notice-ink: #78350f;
}

.service-announcement[data-announcement-level="critical"] {
    --notice-background: #fef2f2;
    --notice-border: #ef4444;
    --notice-ink: #7f1d1d;
}

.service-announcement > strong { margin-right: .4rem; }

.service-announcement__dismiss {
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 1px solid var(--notice-border);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

.service-announcement__dismiss:hover {
    background: color-mix(in srgb, var(--notice-ink) 9%, transparent);
    box-shadow: none;
    transform: none;
}

@media (prefers-color-scheme: dark) {
    .service-announcement {
        --notice-background: #211e3a;
        --notice-border: #7565aa;
        --notice-ink: #e7e1ff;
    }

    .service-announcement[data-announcement-level="warning"] {
        --notice-background: #2b2110;
        --notice-border: #b7791f;
        --notice-ink: #fde68a;
    }

    .service-announcement[data-announcement-level="critical"] {
        --notice-background: #311516;
        --notice-border: #b91c1c;
        --notice-ink: #fecaca;
    }
}