hide messages

public/style.css

@@ -666,6 +666,16 @@ body {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
   max-width: 320px;
   margin: 0 auto;
+  cursor: pointer;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.tg-status-message:active {
+  transform: scale(0.98);
+}
+
+.tg-status-message--hiding {
+  animation: tg-fade-out 0.3s ease-out forwards;
 }
 
 .tg-status-message--success {
@@ -686,6 +696,12 @@ body {
   color: #ffffff;
 }
 
+.tg-status-message--warning {
+  background: #ff9500;
+  border: 1px solid #e68500;
+  color: #ffffff;
+}
+
 @keyframes tg-slide-down {
   from {
     opacity: 0;
@@ -698,6 +714,18 @@ body {
   }
 }
 
+@keyframes tg-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+}
+
 /* Update notification */
 .tg-update-notification {
   position: fixed;