feat: add application toast messages

styles.css

@@ -29,6 +29,110 @@ body {
   min-height: 100vh;
 }
 
+.message-region {
+  position: fixed;
+  z-index: 30;
+  top: 24px;
+  left: 50%;
+  display: grid;
+  width: min(420px, calc(100vw - 32px));
+  gap: 10px;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.message {
+  --message-background: #1f7a62;
+  --message-progress: #125441;
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  overflow: hidden;
+  padding: 14px 12px 16px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 16px;
+  background: var(--message-background);
+  color: #fff;
+  box-shadow: 0 16px 36px rgba(31, 42, 46, 0.26);
+  pointer-events: auto;
+  animation: message-enter 180ms ease-out;
+}
+
+.message--warning {
+  --message-background: #c76a13;
+  --message-progress: #914605;
+}
+
+.message--error {
+  --message-background: #b9382e;
+  --message-progress: #7f201a;
+}
+
+.message.is-leaving {
+  animation: message-leave 180ms ease-in forwards;
+}
+
+.message-text {
+  margin: 0;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+.message-dismiss {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.message-dismiss:hover,
+.message-dismiss:focus-visible {
+  background: rgba(255, 255, 255, 0.18);
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.message-progress {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: var(--message-progress);
+  transform-origin: right;
+  animation: message-countdown var(--message-duration) linear forwards;
+}
+
+@keyframes message-enter {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes message-leave {
+  to { opacity: 0; transform: translateY(-8px); }
+}
+
+@keyframes message-countdown {
+  to { transform: scaleX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .message,
+  .message.is-leaving,
+  .message-progress {
+    animation-duration: 1ms;
+  }
+}
+
 .app-shell {
   position: relative;
   min-height: 100vh;