@layer components {
  .app-update-notice {
    position: fixed;
    z-index: 120;
    right: max(var(--space-4), var(--safe-right));
    bottom: max(var(--space-4), var(--safe-bottom));
    width: min(430px, calc(100vw - var(--space-7)));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-overlay);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-toast);
  }

  .app-update-brand {
    flex: 0 0 auto;
  }

  .app-update-copy {
    min-width: 0;
    flex: 1;
  }

  .app-update-copy > strong,
  .app-update-copy > span {
    display: block;
  }

  .app-update-copy > strong {
    font-size: var(--type-body);
  }

  .app-update-copy > span {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--type-caption);
  }

  .app-update-notice .button {
    min-width: 76px;
    flex: 0 0 auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .app-update-notice {
      animation: setae-update-enter var(--motion-enter) var(--ease-emphasized) both;
    }

    @keyframes setae-update-enter {
      from { opacity: 0; transform: translateY(var(--space-2)); }
      to { opacity: 1; transform: translateY(0); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-update-notice {
      animation: none;
      transform: none;
    }
  }

  @media (max-width: 767px) {
    .app-update-notice {
      right: max(var(--space-3), var(--safe-right));
      bottom: calc(var(--mobile-navigation-current-height, var(--bottom-nav-height)) + var(--safe-bottom) + var(--space-3));
      left: max(var(--space-3), var(--safe-left));
      width: auto;
      gap: var(--space-2);
    }

    .app-update-brand {
      display: none;
    }
  }
}