update

ts_web/elements/sio-combox.ts

@@ -113,6 +113,19 @@ export class SioCombox extends DeesElement {
         overflow: hidden;
         font-family: ${unsafeCSS(fontFamilies.sans)};
         position: relative;
+        animation: scaleIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        transform-origin: bottom right;
+      }
+      
+      @keyframes scaleIn {
+        from {
+          opacity: 0;
+          transform: scale(0.9) translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1) translateY(0);
+        }
       }
       
       :host::before {
@@ -150,31 +163,35 @@ export class SioCombox extends DeesElement {
           position: absolute;
           width: 100%;
           height: 100%;
-          transition: left 300ms ease;
+          transition: left 300ms ease, opacity 200ms ease;
         }
 
         sio-conversation-view {
           position: absolute;
           width: 100%;
           height: 100%;
-          transition: left 300ms ease;
+          transition: left 300ms ease, opacity 200ms ease;
         }
 
         /* Mobile navigation states */
         .container.show-list sio-conversation-selector {
           left: 0;
+          opacity: 1;
         }
 
         .container.show-list sio-conversation-view {
           left: 100%;
+          opacity: 0;
         }
 
         .container.show-conversation sio-conversation-selector {
           left: -100%;
+          opacity: 0;
         }
 
         .container.show-conversation sio-conversation-view {
           left: 0;
+          opacity: 1;
         }
       }
 

ts_web/elements/sio-conversation-view.ts

@@ -246,10 +246,20 @@ export class SioConversationView extends DeesElement {
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        gap: ${unsafeCSS(spacing[4])};
+        gap: ${unsafeCSS(spacing["4"])};
         padding: ${unsafeCSS(spacing["8"])};
         text-align: center;
         color: ${bdTheme('mutedForeground')};
+        animation: fadeIn 500ms ease-out;
+      }
+      
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
 
       .empty-icon {

ts_web/elements/sio-fab.ts

@@ -67,15 +67,27 @@ export class SioFab extends DeesElement {
           border-radius: ${radius.full};
           user-select: none;
           border: 1px solid ${bdTheme('border')};
+          animation: fabEntrance 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        
+        @keyframes fabEntrance {
+          from {
+            transform: scale(0) rotate(-180deg);
+            opacity: 0;
+          }
+          to {
+            transform: scale(1) rotate(0deg);
+            opacity: 1;
+          }
         }
 
         #mainbox:hover {
           box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)};
-          transform: translateY(-2px);
+          transform: translateY(-2px) scale(1.05);
         }
 
         #mainbox:active {
-          transform: translateY(0);
+          transform: translateY(0) scale(0.98);
           box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)};
         }
 
@@ -84,8 +96,8 @@ export class SioFab extends DeesElement {
           top: 0px;
           left: 0px;
           will-change: transform;
-          transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'};
-          transition: ${transitions.transform};
+          transform: ${this.showCombox ? 'rotate(180deg)' : 'rotate(0deg)'};
+          transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
           height: 100%;
           width: 100%;
           object-fit: contain;
@@ -150,11 +162,11 @@ export class SioFab extends DeesElement {
 
         #comboxContainer sio-combox {
           position: absolute;
-          bottom: calc(56px + ${spacing[4]});
+          bottom: calc(56px + ${spacing["4"]});
           right: 0;
           transition: ${transitions.all};
           will-change: transform;
-          transform: translateY(${spacing[5]});
+          transform: translateY(${spacing["5"]});
           opacity: 0;
           pointer-events: none;
         }