@layer components {
.c-component-notice { --card-container: normal; --card-radius: var(--wa-radius-panel); --card-shadow: var(--wa-shadow-level); position: fixed; z-index: 80; inset-inline: var(--space-4); inset-block-end: max(var(--space-4), env(safe-area-inset-bottom)); margin-inline: auto; max-inline-size: var(--wa-content-width); max-block-size: calc(100dvh - var(--space-8)); overflow: auto; text-align: start; }
.c-component-notice[hidden] { display: none; }
.c-component-notice__layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: center; }
.c-component-notice__copy { --stack-gap: var(--space-2); min-inline-size: 0; }
.c-component-notice__title, .c-component-notice__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-component-notice__title { font-family: var(--wa-font-heading-family); font-size: var(--wa-font-body-size); font-weight: var(--wa-font-heading-weight); line-height: var(--wa-font-heading-line-height); }
.c-component-notice__body { font-family: var(--wa-font-body-family); font-size: var(--wa-font-caption-size); line-height: var(--wa-font-body-line-height); }
.c-component-notice__link { color: inherit; }
.c-component-notice__link:not([href]), .c-component-notice__link:empty { display: none; }
.c-component-notice__close { --btn-bg: var(--wa-color-action); --btn-fg: var(--wa-color-on-action); --btn-border: var(--wa-color-action); --btn-bg-hover: var(--wa-color-action-hover); }
@media (max-width: 40rem) { .c-component-notice__layout { grid-template-columns: minmax(0, 1fr); } .c-component-notice__close { inline-size: 100%; } }
@media print { .c-component-notice { display: none; } }
}