fix czat in mobile

static/css/styles.css

@@ -4537,7 +4537,8 @@ dialog::backdrop {
     backdrop-filter: blur(10px);
   }
 
-  .mobile-editor-bubble>button {
+  .mobile-editor-bubble>button,
+  .mobile-editor-bubble>.mobile-color-button {
     display: inline-grid;
     width: 34px;
     height: 34px;
@@ -4548,6 +4549,25 @@ dialog::backdrop {
     background: rgba(255, 255, 255, .07);
     color: var(--text);
     font-size: 1rem;
+    touch-action: manipulation;
+  }
+
+  .mobile-color-button {
+    position: relative;
+    flex: 0 0 auto;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .mobile-color-button input[type="color"] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
   }
 
   .mobile-color-dot {
@@ -4583,7 +4603,6 @@ dialog::backdrop {
 /* Movable quick actions for compact editor screens. */
 @media (max-width: 1499px) {
   .pad-page .mobile-editor-bubble {
-    touch-action: none;
     user-select: none;
   }
 
@@ -4591,10 +4610,10 @@ dialog::backdrop {
     display: none;
   }
 
-  .pad-page .room-details.is-mobile-open .room-popover {
+  .pad-page .room-popover.is-mobile-open {
     position: fixed;
     right: 12px;
-    bottom: 72px;
+    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
     left: auto;
     z-index: 60;
     width: min(560px, calc(100vw - 24px));