[data-fui-comp="ui-notification"] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--spacing-md, 8px);
  padding: var(--spacing-md, 8px) var(--spacing-lg, 16px);
  border-radius: var(--radii-md, 8px);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E4E4E7);
  border-inline-start: 4px solid var(--color-info, #2563EB);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  max-inline-size: 28rem;
}
[data-fui-comp="ui-notification"] .ui-notification__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radii-full, 9999px);
  color: var(--color-primary-fg, #FFFFFF);
  background: var(--color-info, #2563EB);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
[data-fui-comp="ui-notification"] .ui-notification__text { display: grid; gap: var(--spacing-xs, 2px); }
[data-fui-comp="ui-notification"] .ui-notification__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #18181B);
}
[data-fui-comp="ui-notification"] .ui-notification__body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted, #52525B);
}
[data-fui-comp="ui-notification"] .ui-notification__dismiss {
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.5 — 44×44 tap target. The 24×24 in chaos sweep was
     <30% of WCAG's 1936px² floor. */
  min-inline-size: var(--spacing-touch-target);
  min-block-size: var(--spacing-touch-target);
  border-radius: var(--radii-full, 9999px);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted, #52525B);
  text-decoration: none;
}
[data-fui-comp="ui-notification"] .ui-notification__dismiss:hover {
  background: var(--color-surface-soft, #F4F4F5);
  color: var(--color-text, #18181B);
  text-decoration: none;
}
[data-fui-comp="ui-notification"].ui-notification--success { border-inline-start-color: var(--color-success, #16A34A); }
[data-fui-comp="ui-notification"].ui-notification--success .ui-notification__icon { background: var(--color-success, #16A34A); }
[data-fui-comp="ui-notification"].ui-notification--warning { border-inline-start-color: var(--color-warning, #CA8A04); }
[data-fui-comp="ui-notification"].ui-notification--warning .ui-notification__icon { background: var(--color-warning, #CA8A04); }
[data-fui-comp="ui-notification"].ui-notification--danger  { border-inline-start-color: var(--color-danger, #DC2626); }
[data-fui-comp="ui-notification"].ui-notification--danger  .ui-notification__icon { background: var(--color-danger, #DC2626); }
[data-fui-comp="ui-notification"].ui-notification--info    { border-inline-start-color: var(--color-info, #2563EB); }
[data-fui-comp="ui-notification"].ui-notification--info    .ui-notification__icon { background: var(--color-info, #2563EB); }
[data-fui-comp="ui-notification"].ui-notification--neutral { border-inline-start-color: var(--color-border-strong, #A1A1AA); }
[data-fui-comp="ui-notification"].ui-notification--neutral .ui-notification__icon {
  background: var(--color-surface-soft, #F4F4F5);
  color: var(--color-text-muted, #52525B);
}
[data-fui-comp="ui-notification"].ui-notification--floating {
  position: fixed;
  z-index: 1000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: ui-notification-slide-in 220ms ease-out;
}
[data-fui-comp="ui-notification"].ui-notification--at-top-right    { top: 1rem; right: 1rem; }
[data-fui-comp="ui-notification"].ui-notification--at-top-left     { top: 1rem; left: 1rem; }
[data-fui-comp="ui-notification"].ui-notification--at-bottom-right { bottom: 1rem; right: 1rem; }
[data-fui-comp="ui-notification"].ui-notification--at-bottom-left  { bottom: 1rem; left: 1rem; }
@keyframes ui-notification-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-fui-comp="ui-notification"].ui-notification--at-bottom-right,
[data-fui-comp="ui-notification"].ui-notification--at-bottom-left {
  animation-name: ui-notification-slide-in-up;
}
@keyframes ui-notification-slide-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-notification"].ui-notification--floating { animation: none; }
}