update ui

web/css/index.css

@@ -241,9 +241,11 @@ body {
     color: var(--text-primary);
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: calc(100vh-20px);
     transition: transform 0.3s ease;
     border-right: 1px solid var(--border-color);
+    border-radius: 20px;
+    margin: 10px;
 }
 
 .chats-header {
@@ -310,11 +312,13 @@ body {
 
 .chat-item {
     padding: 12px 15px;
-    border-bottom: 1px solid var(--border-color);
+    /*border-bottom: 1px solid var(--border-color);*/
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
+    border-radius: 15px;
+    margin: 5px;
 }
 
 .chat-item:hover {
@@ -364,13 +368,13 @@ body {
 
 .chat-phone {
     font-size: 11px;
-    color: var(--text-secondary);
+    /*color: var(--text-secondary);*/
     margin-bottom: 3px;
 }
 
 .chat-last-message {
     font-size: 12px;
-    color: var(--text-secondary);
+    /*color: var(--text-secondary);*/
     opacity: 0.8;
     white-space: nowrap;
     overflow: hidden;
@@ -387,7 +391,7 @@ body {
 
 .chat-time {
     font-size: 10px;
-    color: var(--text-secondary);
+    /*color: var(--text-secondary);*/
     margin-bottom: 5px;
 }
 
@@ -411,6 +415,7 @@ body {
     background: var(--bg-primary);
     height: 100vh;
     position: relative;
+    margin-right: 10px;
 }
 
 .chat-header {
@@ -566,10 +571,14 @@ body {
 .chat-input-container {
     position: sticky;
     bottom: 0;
-    background: var(--bg-primary);
-    border-top: 1px solid var(--border-color);
-    padding: 15px;
+    /*background: var(--bg-primary);*/
+    /*border-top: 1px solid var(--border-color);*/
+    /*padding: 15px;*/
     z-index: 10;
+    background: #212121;
+    padding: 2px;
+    border-radius: 25px;
+    margin-bottom: 10px;
 }
 
 .chat-input-area {
@@ -577,17 +586,20 @@ body {
     gap: 10px;
     align-items: flex-end;
     max-height: 120px;
+    /*background: #212121;*/
 }
 
 .message-input {
     flex: 1;
+    border: none;
     padding: 12px 15px;
-    border: 2px solid var(--border-color);
+    /*border: 2px solid var(--border-color);*/
     border-radius: 25px;
     outline: none;
     font-size: 14px;
     transition: border-color 0.3s ease;
-    background: var(--bg-primary);
+    /*background: var(--bg-primary);*/
+    background: #212121;
     color: var(--text-primary);
     resize: none;
     min-height: 44px;
@@ -597,16 +609,13 @@ body {
 }
 
 .message-input:focus {
-    border-color: var(--primary-color);
+    /*border-color: var(--primary-color);*/
 }
 
 .send-button {
-    padding: 12px 20px;
-    background: linear-gradient(
-        135deg,
-        var(--primary-color),
-        var(--primary-hover)
-    );
+    position: relative;
+    padding: 0 28px;
+    background: var(--primary-color);
     color: white;
     border: none;
     border-radius: 25px;
@@ -619,8 +628,13 @@ body {
 }
 
 .send-button:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
+    /*background: hsl(
+        from var(--primary-color) calc(h - 2%) calc(s - 2%) calc(l - 2%)
+    );*/
+    /*transform: translateY(-2px);*/
+    /*box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);*/
+    /*background-opacity: 0.8;*/
+    background: color-mix(in srgb, var(--primary-color) 70%, transparent);
 }
 
 .send-button:disabled {
@@ -1064,6 +1078,7 @@ body {
     .chat-panel {
         width: 100%;
         height: 100vh;
+        margin-right: 10px;
     }
 
     .mobile-header {
@@ -1217,7 +1232,7 @@ body {
 /* Safe area support for notches */
 @supports (padding: max(0px)) {
     .chat-input-container {
-        padding-bottom: max(15px, env(safe-area-inset-bottom));
+        /*padding-bottom: max(15px, env(safe-area-inset-bottom));*/
     }
 
     @media (max-width: 768px) {