feat: updated

frontend/src/styles.css

@@ -138,6 +138,11 @@ input {
   font: inherit;
 }
 
+input[type='range'] {
+  padding: 0;
+  accent-color: var(--primary);
+}
+
 .btn,
 .icon-btn,
 .toggle-btn {
@@ -180,6 +185,9 @@ input {
   min-height: 50px;
   background: #1f2937;
   color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .icon-btn.small {
@@ -205,6 +213,25 @@ input {
   border: 1px solid #4b5563;
 }
 
+.toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.control-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  display: block;
+}
+
+.icon-btn .control-icon {
+  width: 26px;
+  height: 26px;
+}
+
 .home-actions {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -382,6 +409,16 @@ input {
   justify-content: space-between;
 }
 
+.participant-volume {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(15, 23, 42, 0.72);
+  color: var(--muted);
+  font-size: 13px;
+}
+
 .screen-slot {
   height: 260px;
   background: #020617;
@@ -473,10 +510,24 @@ input {
 
 .chat-form {
   margin-top: 14px;
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
   gap: 10px;
 }
 
+.chat-form input[type='text'] {
+  min-width: 220px;
+  flex: 1 1 260px;
+}
+
+.hidden-file-input {
+  display: none;
+}
+
+.attachment-btn {
+  flex: 0 0 auto;
+}
+
 .file-link {
   color: #93c5fd;
 }