enhance(ui): improve action bar styles and button interaction

src/main/frontend/mobile/index.css

@@ -1,26 +1,22 @@
 .action-bar {
   @apply fixed bottom-[100px] h-[70px] p-1.5 rounded-md overflow-y-hidden overflow-x-auto
-  shadow-md bg-[var(--ls-secondary-background-color)] z-[99999];
+  shadow-lg bg-[var(--ls-secondary-background-color)] z-[99999] border;
 
   .action-bar-commands {
     @apply relative flex w-full;
 
 
     .ti, .tie {
-      @apply text-[var(--ls-primary-text-color)] text-[23px] opacity-75;
+      @apply text-[var(--ls-primary-text-color)] text-[23px] opacity-90;
     }
 
     .description {
-      @apply text-[var(--ls-primary-text-color)] text-[10px] opacity-75;
+      @apply text-[var(--ls-primary-text-color)] text-[10px] opacity-100;
     }
 
     button {
-        flex: 1;
-        display: flex;
-        flex-direction: column;   /* Stack icon and label */
-        align-items: center;      /* Center horizontally */
-        justify-content: center;  /* Center vertically */
-        padding: 12px 4px;
+      @apply flex-1 flex flex-col items-center justify-center py-3 px-1
+      opacity-80 active:opacity-100;
     }
   }
 }