v0.7.8 bugs fixes for pinned messages

frontend/src/components/Message.css

@@ -334,72 +334,46 @@
   user-select: text;
 }
 
-/* Triple-dot pin button wrapper */
-.msg-pin-wrap {
-  position: relative;
+/* Pinned state highlight for toolbar pin button */
+.action-pinned {
+  color: var(--primary) !important;
+}
+
+/* Mobile bottom-sheet overlay for long-press / right-click pin */
+.msg-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  background: rgba(0,0,0,0.35);
   display: flex;
-  align-items: center;
-  align-self: flex-end;
-  margin-bottom: 2px;
+  align-items: flex-end;
+  justify-content: center;
 }
 
-.msg-pin-btn {
-  opacity: 0;
-  transition: opacity 0.15s;
-  color: var(--text-tertiary);
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-
-.msg-pin-btn:hover,
-.msg-pin-btn.active {
-  opacity: 1 !important;
-  color: var(--text-primary);
-  background: var(--surface-variant);
-}
-
-/* Show pin button on message row hover */
-.msg-bubble-wrap:hover .msg-pin-btn,
-.msg-pin-btn.active {
-  opacity: 1;
-}
-
-/* On touch devices always show it so users know it's there */
-@media (hover: none) {
-  .msg-pin-btn {
-    opacity: 0.45;
-  }
-}
-
-/* Message pin/options popup menu */
-.msg-options-menu {
-  position: absolute;
-  z-index: 200;
+.msg-sheet {
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-md);
-  padding: 4px 0;
-  min-width: 170px;
-  bottom: calc(100% + 4px);
-  white-space: nowrap;
+  border-radius: 16px 16px 0 0;
+  padding: 8px 0 max(16px, env(safe-area-inset-bottom)) 0;
+  width: 100%;
+  max-width: 480px;
+  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
 }
 
-.msg-options-menu.options-left {
-  right: 0;
+.msg-sheet-handle {
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--border);
+  margin: 0 auto 12px;
 }
 
-.msg-options-menu.options-right {
-  left: 0;
-}
-
-.msg-options-menu button {
+.msg-sheet-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 14px;
   width: 100%;
-  padding: 8px 14px;
-  font-size: 13px;
+  padding: 14px 24px;
+  font-size: 15px;
   color: var(--text-primary);
   background: none;
   border: none;
@@ -408,11 +382,20 @@
   transition: background var(--transition);
 }
 
-.msg-options-menu button:hover:not(:disabled) {
+.msg-sheet-btn:hover:not(:disabled) {
   background: var(--surface-variant);
 }
 
-.msg-options-menu button:disabled {
+.msg-sheet-btn:disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
+
+.msg-sheet-cancel {
+  color: var(--text-secondary);
+  font-weight: 500;
+  border-top: 1px solid var(--border);
+  margin-top: 4px;
+  justify-content: center;
+  gap: 0;
+}