update

fusion_chatter_enhance/static/src/scss/chatter_enhance.scss

@@ -196,29 +196,40 @@
 
 .fce-toggle-btn {
     position: absolute;
-    top: 8px;
-    left: -14px;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    border: 1px solid var(--o-border-color, #dee2e6);
-    background: var(--o-bg-card, #fff);
-    color: var(--o-text-muted, #6c757d);
+    top: 50%;
+    left: -11px;
+    transform: translateY(-50%);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 20;
-    opacity: 0;
-    transition: opacity 0.2s ease, background-color 0.15s ease, color 0.15s ease;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-    font-size: 12px;
+    width: 22px;
+    height: 22px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.06);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    color: var(--o-text-muted, #8b95a2);
+    font-size: 10px;
     padding: 0;
+    opacity: 0;
+    transition: opacity 0.25s ease,
+                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+                background 0.2s ease,
+                color 0.2s ease,
+                box-shadow 0.2s ease;
 
     &:hover {
-        background: var(--o-action, #0077b6);
+        background: var(--o-action, #714b67);
         color: #fff;
-        border-color: var(--o-action, #0077b6);
+        transform: translateY(-50%) scale(1.15);
+        box-shadow: 0 2px 10px rgba(113, 75, 103, 0.35);
+    }
+
+    &:active {
+        transform: translateY(-50%) scale(0.9);
     }
 }
 
@@ -229,8 +240,8 @@
 }
 
 .fce-expand-btn {
-    position: fixed;
-    right: 8px;
+    position: absolute;
+    right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 28px;
@@ -269,6 +280,37 @@
     padding: 4px 8px !important;
 }
 
+// =============================================================================
+// MESSAGE ACTIONS: HOVER-ONLY
+// Hide the per-message action icons (react, star, edit, menu) by default.
+// Show them as a compact floating bar on message hover.
+// =============================================================================
+
+.o-mail-Message {
+    position: relative;
+
+    .o-mail-Message-actions {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute !important;
+        top: 2px;
+        right: 4px;
+        z-index: 5;
+        background: var(--o-bg-card, #fff);
+        border: 1px solid var(--o-border-color, #dee2e6);
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        padding: 2px 4px;
+        gap: 2px;
+        transition: opacity 0.15s ease;
+    }
+
+    &:hover .o-mail-Message-actions {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+
 // =============================================================================
 // ICON-ONLY TOPBAR BUTTONS
 // =============================================================================