Add Jitsi call button

client-web/index.css

@@ -69,7 +69,14 @@ p {
     font-family: inter;
     border-radius: 10px;
     border: none;
-    padding: 5px;
+    padding: 8px 12px;  /* Increased padding for better text containment */
+    max-width: none;    /* Remove max-width restriction */
+    width: auto;        /* Allow button to size to content */
+    margin: 5px 0;      /* Add some vertical spacing */
+    white-space: normal; /* Allow text to wrap if needed */
+    word-wrap: break-word; /* Break long words if necessary */
+    text-align: center;  /* Center the text */
+    cursor: pointer;    /* Add pointer cursor for better UX */
 }
 .greenbutton {
     color: white;
@@ -168,6 +175,9 @@ body {
     text-align: left;
     margin: 5px 0;
     width: 100%;
+    display: flex;     /* Use flexbox for better content handling */
+    flex-direction: column; /* Stack content vertically */
+    align-items: flex-start; /* Align items to the left */
 }
 
 .file {
@@ -202,7 +212,7 @@ input {
 #messageInput {
     max-width: none;
     flex-grow: 1; /* Take up remaining space */
-    margin: 0; /* Remove default margins */
+        margin: 0; /* Remove default margins */
 }
 
 /* Update button styles */
@@ -212,6 +222,23 @@ input {
     margin: 0; /* Remove default margins */
     white-space: nowrap; /* Prevent button text from wrapping */
 }
+.bluebutton:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+}
+#users {
+    display: flex;
+    align-items: left;
+    justify-content: space-between;
+    width: 100%;
+}
+
+#meeting {
+    cursor: pointer;
+    padding: 5px 10px;
+    margin-right: 10px;
+    align-items: right;
+}
 
 .suttle {
     text-align: left;
@@ -221,3 +248,33 @@ input {
     font-size: 0.9em;
     color: rgba(255, 255, 255, 0.7);  /* Makes it slightly subtle */
 }
+
+#users {
+    position: relative;  /* Allow absolute positioning within */
+    width: 100%;
+}
+
+#meeting {
+    position: absolute;
+    right: 10px;  /* Matches your box margin */
+    top: 0;
+    cursor: pointer;
+    padding: 5px 10px;
+}
+.message.call-notification {
+    color: lightblue;
+}
+
+#meet {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.9);
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+    height: 80%;
+}