Worked more on zen rices

src/browser/base/content/zen-styles/zen-animations.css

@@ -349,3 +349,64 @@
     transform: translateX(-100%) translateY(-50%);
   }
 }
+
+@keyframes zen-rice-form-out {
+  0% {
+    transform: translateX(0);
+    max-height: 350px;
+    opacity: 1;
+    position: relative;
+  }
+
+  50% {
+    transform: translateX(-100%);
+    opacity: 0;
+    position: relative;
+  }
+
+  99% {
+    transform: translateX(-100%);
+    opacity: 0;
+    max-height: 50px;
+    position: relative;
+  }
+
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+    pointer-events: none;
+    position: relative;
+  }
+}
+
+@keyframes zen-rice-form-in {
+  0% {
+    position: absolute;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  99% {
+    position: absolute;
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    position: relative;
+  }
+}
+
+@keyframes zen-rice-form-in-2 {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+    max-height: 50px;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 450px;
+  }
+}

src/browser/base/content/zen-styles/zen-rices.css

@@ -24,12 +24,25 @@
   max-width: 400px;
 
   & .zen-rice-share-content {
-    padding: 10px;
-    padding-top: 20px;
+    padding: 10px 0;
     border-top: var(--zen-appcontent-border);
     background: var(--arrowpanel-background);
+    position: relative;
+    align-items: center;
 
-    & input[type="text"] {
+    min-height: 50px;
+
+    &:has(#zen-rice-share-first-form:not([fade-out])),
+    &:has(#zen-rice-share-success) {
+      padding-top: 20px;
+    }
+
+    & > vbox {
+      width: 100%;
+      padding: 0 10px;
+    }
+
+    & #zen-rice-share-first-form input[type="text"] {
       width: 100%;
       padding: 1px 2px;
       border: 0;
@@ -60,7 +73,7 @@
 
     max-height: 30px;
     overflow: hidden;
-    transition: max-height 0.3s ease;
+    transition: max-height 0.3s ease, height 0.3s ease;
     &[zen-collapsed="false"] {
       max-height: 350px;
     }
@@ -105,4 +118,81 @@
       justify-content: center;
     }
   }
+
+  #zen-rice-share-error {
+    border: 1px solid rgba(255, 0, 0, 0.5);
+    background: rgba(255, 0, 0, 0.1);
+    padding: 5px;
+    transition: opacity 0.3s ease;
+    border-radius: var(--zen-panel-radius);
+
+    @starting-style {
+      opacity: 0;
+    }
+
+    & button {
+      margin-left: auto;
+      margin-top: 2px;
+    }
+  }
+
+  /* Animations */
+  #zen-rice-share-first-form[fade-out] {
+    position: absolute;
+    transform: translateX(-100%);
+    pointer-events: none;
+    animation: zen-rice-form-out 0.8s ease;
+  }
+
+  #zen-rice-share-second-form {
+    animation: zen-rice-form-in 0.8s ease forwards;
+    justify-content: center;
+
+    & > hbox {
+      width: 100%;
+      height: 5px;
+      border-radius: 100px;
+      border: 1px solid var(--zen-colors-border);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--zen-primary-color);
+        transition: width 4s cubic-bezier(1, 0, 0, 1);
+
+        @starting-style {
+          width: 0;
+        }
+      }
+    }
+
+    &[fade-out] {
+      position: absolute !important;
+      animation: zen-rice-form-out 0.5s ease forwards;
+    }
+  }
+
+  #zen-rice-share-success {
+    overflow-y: hidden;
+    max-height: 0px;
+    animation: zen-rice-form-in-2 0.5s ease forwards;
+
+    & h1 {
+      margin: 0;
+      font-size: 20px;
+    }
+
+    & label {
+      margin: 0;
+      margin-top: 15px;
+      font-weight: 600;
+      margin-bottom: 5px;
+    }
+  }
 }