diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js
index ecd51413..f514589c 100644
--- a/android/app/src/main/assets/public/main.js
+++ b/android/app/src/main/assets/public/main.js
@@ -1461,8 +1461,8 @@ function showFixedContextMenu(rect, html) {
 
     fixedContextMenu.style.transition = 'none';
     fixedContextMenu.style.opacity = '0';
-    fixedContextMenu.style.left = '0px';
-    fixedContextMenu.style.top = '0px';
+    fixedContextMenu.style.left = '0rem';
+    fixedContextMenu.style.top = '0rem';
 
     fixedContextMenu.classList.add("show");
 
@@ -3139,7 +3139,7 @@ async function generateMessagesHtml(entries, isPinnedContext = false) {
                             let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
                             let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
 
-                            attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 120px; max-width: 300px; min-height: 100px; max-height: 300px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
+                            attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 7.5rem; max-width: 18.75rem; min-height: 6.25rem; max-height: 18.75rem; background: rgba(0,0,0,0.2); border: 0.0625rem solid var(--border-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
                                 <div style="padding: 1rem; text-align: center; color: var(--text-color);">
                                     ${iconSvg}
                                     <div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
@@ -3653,12 +3653,12 @@ async function downloadAndRenderAttachment(container, msgId, attId, type, name,
         container.dataset.url = blobUrl;
         
         if (type.startsWith("image/")) {
-            container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 300px; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
+            container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 18.75rem; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
         } else if (type.startsWith("video/")) {
-            container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 300px; display: block;"></video>`;
+            container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 18.75rem; display: block;"></video>`;
         } else {
             container.innerHTML = originalHtml;
-            container.style.border = "1px solid var(--accent-color)";
+            container.style.border = "0.0625rem solid var(--accent-color)";
             let a = document.createElement("a");
             a.href = blobUrl;
             a.download = name;
@@ -3716,7 +3716,7 @@ function renderAttachmentsPreview() {
         }
         
         html += `
-        <div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
+        <div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
             <div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
             <div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
             <button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css
index a254bfcc..7c4985ce 100644
--- a/android/app/src/main/assets/public/style.css
+++ b/android/app/src/main/assets/public/style.css
@@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
 }
 
 /* Custom Zoom Slider Styling */
-#cropper-zoom {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-    outline: none;
-    margin: 10px 0;
-}
-
-#cropper-zoom::-webkit-slider-thumb {
+#cropper-zoom,
+.voice-setting-row input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
-    width: 16px;
-    height: 16px;
+    width: 100%;
+    height: 0.375rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 0.1875rem;
+    outline: none;
+}
+
+#cropper-zoom {
+    margin: 0.625rem 0;
+}
+
+#cropper-zoom::-webkit-slider-thumb,
+.voice-setting-row input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
     border-radius: 50%;
     background: var(--text-color);
     cursor: pointer;
     transition: transform 0.2s, background 0.2s;
 }
 
-#cropper-zoom::-webkit-slider-thumb:hover {
+#cropper-zoom::-webkit-slider-thumb:hover,
+.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
     transform: scale(1.2);
     background: #fff;
 }
 
-#cropper-zoom::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
+#cropper-zoom::-moz-range-thumb,
+.voice-setting-row input[type="range"]::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
     border-radius: 50%;
     background: var(--text-color);
     cursor: pointer;
@@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     border: none;
 }
 
-#cropper-zoom::-moz-range-thumb:hover {
+#cropper-zoom::-moz-range-thumb:hover,
+.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
     transform: scale(1.2);
     background: #fff;
 }
@@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
     z-index: 100;
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-10px);
+    transform: translateY(-0.625rem);
     transition: all 0.2s ease;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
     padding: 0.4rem;
     pointer-events: none;
 }
@@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
 /* Voice UI Styles */
 #voice-call-popup {
     position: fixed;
-    width: 600px;
-    height: 450px;
+    width: 37.5rem;
+    height: 28.125rem;
+    min-width: 20rem;
+    min-height: 14rem;
     background-color: var(--main-bg-color);
     border: var(--border-width) solid var(--light-border-color);
     border-radius: 0.9rem;
@@ -1288,25 +1299,68 @@ input:checked + .toggle-slider:before {
     flex-direction: column;
     overflow: hidden;
     resize: both;
+
+    opacity: 0;
+    transform: translateY(1.5rem) scale(0.92);
+    pointer-events: none;
+    transition:
+            opacity 0.2s ease,
+            transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#voice-call-popup.show {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+}
+#voice-call-popup.hide {
+    opacity: 0;
+    transform: translateY(1rem) scale(0.95);
 }
 
 #voice-header {
     height: 3rem;
-    background: var(--light-border-color);
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.03);
     display: flex;
     align-items: center;
-    padding: 0 15px;
+    justify-content: space-between;
+    padding: 0 0.9375rem;
     cursor: grab;
     font-weight: bold;
     user-select: none;
-    border-bottom: var(--border-width) solid rgba(255,255,255,0.05);
+    -webkit-user-select: none;
+    border-bottom: var(--border-width) solid var(--light-border-color);
+}
+#voice-header:active {
+    cursor: grabbing;
+}
+.voice-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-color);
+}
+.voice-title svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    pointer-events: none !important;
+}
+
+#voice-status {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--darker-text-color);
+    background: rgba(255, 255, 255, 0.05);
+    border: var(--border-width) solid var(--light-border-color);
+    padding: 0.15rem 0.6rem;
+    border-radius: 50rem;
 }
 
 #voice-users {
-    padding: 15px;
+    padding: 0.9375rem;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
+    gap: 0.75rem;
     overflow-y: auto;
     flex-grow: 1;
 }
@@ -1314,94 +1368,253 @@ input:checked + .toggle-slider:before {
 .voice-tile {
     position: relative;
     background: var(--light-border-color);
-    border-radius: 8px;
-    overflow: hidden;
     background-size: cover;
     background-position: center;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-    cursor: pointer;
-    border: 2px solid transparent;
-}
-.voice-tile.speaking {
-    border-color: #4cd137;
-    box-shadow: 0 0 8px 2px #4cd137;
-}
-
-.voice-tile-name {
-    position: absolute;
-    bottom: 6px;
-    left: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    padding: 2px 6px;
-    background: rgba(0,0,0,0.6);
-    border-radius: 4px;
-    color: #fff;
-    max-width: calc(100% - 12px);
+    border-radius: 0.65rem;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    cursor: pointer;
+    border: var(--border-width) solid transparent;
+    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
+    animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
-
-.voice-tile-icons {
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-    display: flex;
-    gap: 4px;
+.voice-tile:hover {
+    transform: translateY(-0.125rem);
 }
-
-.voice-tile video {
+.voice-tile video,
+.voice-tile canvas {
+    display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     background: #000;
 }
+@keyframes voice-tile-in {
+    from { opacity: 0; transform: scale(0.85); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+.voice-tile.speaking {
+    border-color: var(--big-green);
+    box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
+}
+
+.voice-tile-name {
+    position: absolute;
+    bottom: 0.375rem;
+    left: 0.375rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    padding: 0.125rem 0.5rem;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(0.5rem);
+    -webkit-backdrop-filter: blur(0.5rem);
+    border-radius: 50rem;
+    color: #fff;
+    max-width: calc(100% - 0.75rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+}
+
+.voice-tile-icons {
+    position: absolute;
+    bottom: 0.375rem;
+    right: 0.375rem;
+    display: flex;
+    gap: 0.25rem;
+}
+.voice-tile-icons svg {
+    filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
+}
+
+.voice-mic-meter {
+    height: 0.25rem;
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.06);
+    width: 100%;
+}
+#voice-mic-level {
+    height: 100%;
+    width: 0%;
+    background: rgba(255, 255, 255, 0.15);
+    transition: width 0.1s linear, background-color 0.2s ease;
+}
 
 .voice-controls {
     height: 4rem;
-    background: var(--main-bg-color);
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.02);
     border-top: var(--border-width) solid var(--light-border-color);
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 15px;
+    gap: 0.9375rem;
+    padding: 0 0.9375rem;
 }
 
 .voice-btn {
     border: var(--border-width) solid var(--light-border-color);
-    background: var(--main-bg-color);
-    color: var(--fg-1);
-    border-radius: 0.6rem;
-    padding: 0.6rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-color) !important;
+    width: 2.6rem;
+    height: 2.6rem;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
+    border-radius: 0.8rem;
     cursor: pointer;
-    font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    transition: all 0.2s;
-}
 
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    touch-action: manipulation;
+}
+.voice-btn svg {
+    width: 1.4rem;
+    height: 1.4rem;
+    pointer-events: none !important;
+}
 .voice-btn:hover {
-    background: var(--light-border-color);
+    background: rgba(255, 255, 255, 0.1);
+}
+.voice-btn:active, .voice-btn.is-pressed {
+    transform: var(--press-scale);
 }
-
 .voice-btn.voice-btn-active {
-    background: #27ae60;
-    color: #fff;
-    border-color: #27ae60;
-}
-
-.voice-btn-danger {
-    background: #e74c3c !important;
+    background: var(--big-green) !important;
+    border-color: transparent !important;
+    color: white !important;
+}
+.voice-btn.voice-btn-active:hover {
+    filter: brightness(1.1);
+}
+.voice-btn.voice-btn-danger {
+    background: var(--big-red) !important;
+    border-color: transparent !important;
     color: white !important;
-    border-color: #e74c3c !important;
 }
 
-.voice-btn-danger:hover {
-    background: #c0392b !important;
-    border-color: #c0392b !important;
+/* Incoming Call Popup */
+#incoming-call-popup {
+    position: fixed;
+    top: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(calc(-100% - 3rem));
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.7rem 0.7rem 0.7rem 1rem;
+    background: rgba(255, 255, 255, 0.015);
+    backdrop-filter: blur(1.2rem);
+    -webkit-backdrop-filter: blur(1.2rem);
+    border: var(--border-width) solid var(--big-green);
+    border-radius: 0.9rem;
+    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
+    z-index: 9999;
+    opacity: 0;
+    transition:
+            opacity 0.25s ease,
+            transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#incoming-call-popup.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+#incoming-call-popup.hide {
+    opacity: 0;
+    transform: translateX(-50%) translateY(calc(-100% - 2rem));
+}
+
+.incoming-call-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--big-green);
+    color: white !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: voice-call-pulse 1.5s ease-out infinite;
+}
+.incoming-call-icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    pointer-events: none !important;
+}
+@keyframes voice-call-pulse {
+    0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
+    70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
+    100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
+}
+
+.incoming-call-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    text-align: left;
+}
+.incoming-call-title {
+    font-weight: bold;
+    font-size: 1.05rem;
+    color: var(--text-color);
+}
+.incoming-call-subtitle {
+    font-size: 0.85rem;
+    color: var(--darker-text-color);
+    opacity: 0.8;
+}
+
+.incoming-call-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: 0.4rem;
+}
+.voice-call-btn {
+    height: 2.4rem;
+    padding: 0 0.9375rem;
+    margin: 0;
+    border-radius: 0.8rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    font-weight: 700;
+
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    touch-action: manipulation;
+}
+.voice-call-btn svg {
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none !important;
+}
+.voice-call-btn.accept {
+    background: var(--big-green) !important;
+    border: none !important;
+    color: white !important;
+}
+.voice-call-btn.decline {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: var(--border-width) solid var(--light-border-color) !important;
+    color: var(--text-color) !important;
+}
+.voice-call-btn.accept:hover {
+    filter: brightness(1.12);
+}
+.voice-call-btn.decline:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+.voice-call-btn:active, .voice-call-btn.is-pressed {
+    transform: var(--press-scale);
 }
 
 /* Voice User Settings Popup */
@@ -1409,39 +1622,63 @@ input:checked + .toggle-slider:before {
     position: fixed;
     background: var(--main-bg-color);
     border: var(--border-width) solid var(--light-border-color);
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+    padding: 0.4rem;
+    border-radius: 0.8rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
     z-index: 10000;
+    min-width: 13rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    transform-origin: top left;
+    transform: scale(0.9);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+            opacity 0.15s ease,
+            transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#voice-user-settings.open {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
 }
 
 .voice-setting-row {
     display: flex;
     flex-direction: column;
-    margin-bottom: 10px;
+    gap: 0.3rem;
+    margin-bottom: 0;
+    padding: 0.5rem;
+    border-radius: 0.65rem;
+}
+.voice-setting-row:hover {
+    background-color: rgba(255, 255, 255, 0.04);
 }
-
 .voice-setting-row label {
-    font-size: 11px;
-    color: var(--fg-1);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--darker-text-color);
     display: flex;
     justify-content: space-between;
 }
-
 .voice-setting-row input[type="range"] {
+    margin: 0;
     width: 100%;
-    height: 4px;
     appearance: none;
-    background: var(--bg-2);
+    -webkit-appearance: none;
     outline: none;
-    border-radius: 2px;
 }
 
-.voice-setting-row input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background: var(--accent);
-    border-radius: 50%;
-    cursor: pointer;
+@media (max-width: 55rem) {
+    #voice-call-popup {
+        width: calc(100vw - 2rem);
+        height: 60vh;
+        left: 1rem;
+        right: unset;
+    }
+    #incoming-call-popup {
+        width: calc(100vw - 2rem);
+        box-sizing: border-box;
+    }
 }
diff --git a/android/app/src/main/assets/public/voice.js b/android/app/src/main/assets/public/voice.js
index 58c9a6c9..7c3e5616 100644
--- a/android/app/src/main/assets/public/voice.js
+++ b/android/app/src/main/assets/public/voice.js
@@ -15,6 +15,35 @@ let isMicMuted = false;
 let remoteVideos = {}, videoDecryptChains = {};
 let camControl = null, screenControl = null;
 
+const SPEAKING_HANGOVER_MS = 400;
+
+function setTileSpeaking(clientId, speaking) {
+    let tile = document.getElementById(`voice-tile-${clientId}`);
+    if (!tile) return;
+
+    if (tile._speakingTimer) {
+        clearTimeout(tile._speakingTimer);
+        tile._speakingTimer = null;
+    }
+
+    if (speaking) {
+        tile.classList.add("speaking");
+        tile._speakingTimer = setTimeout(() => {
+            tile._speakingTimer = null;
+            tile.classList.remove("speaking");
+        }, SPEAKING_HANGOVER_MS);
+    } else {
+        tile.classList.remove("speaking");
+    }
+}
+
+function clearAllSpeaking() {
+    for (const el of document.querySelectorAll(".voice-tile.speaking")) {
+        if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
+        el.classList.remove("speaking");
+    }
+}
+
 setInterval(() => {
     const now = Date.now();
     let changed = false;
@@ -32,6 +61,7 @@ setInterval(() => {
 
 const voiceWorkletCode = `
 class AudioProcessor extends AudioWorkletProcessor {
+
     constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
     process(inputs) {
         const input = inputs[0][0];
@@ -157,7 +187,7 @@ async function startVoiceSession(serverUrl) {
         
         currentVoiceWs.onopen = async () => {
             document.getElementById("voice-status").innerText = "Connected";
-            document.getElementById("voice-status").style.color = "#4cd137";
+            document.getElementById("voice-status").style.color = "var(--big-green)";
             let btn = document.getElementById("voice-btn-mic");
             if (btn) {
                 if (isMicMuted) btn.classList.add("voice-btn-danger");
@@ -210,9 +240,12 @@ async function startVoiceSession(serverUrl) {
                 if (micLevelBar) micLevelBar.style.width = percent + '%';
                 
                 if (db >= sensitivity) vadHangover = 75;
+                let isSpeaking = vadHangover > 0 && !isMicMuted;
+                setTileSpeaking(String(window.id), isSpeaking);
+
                 if (vadHangover > 0 && !isMicMuted) {
                     vadHangover--;
-                    if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60';
+                    if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
                     
                     if (!voiceAesCryptoKey) return;
                     const iv = crypto.getRandomValues(new Uint8Array(12));
@@ -221,7 +254,7 @@ async function startVoiceSession(serverUrl) {
                     payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
                     currentVoiceWs.send(payload.buffer);
                 } else {
-                    if (micLevelBar) micLevelBar.style.backgroundColor = '#555';
+                    if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                 }
             };
         };
@@ -260,12 +293,7 @@ async function startVoiceSession(serverUrl) {
                         const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
                         if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
                         
-                        let userItem = document.getElementById(`voice-tile-${clientId}`);
-                        if (userItem) {
-                            userItem.classList.add("speaking");
-                            if (userItem.timer) clearTimeout(userItem.timer);
-                            userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
-                        }
+                        setTileSpeaking(clientId, true);
                     } catch (err) {}
                 });
             } else if (type === 1 || type === 2) {
@@ -417,45 +445,49 @@ function handleCallUpdate(data) {
             showIncomingCallUI(roomId);
         }
     } else if (state.length === 0) {
-        let incomingUi = document.getElementById("incoming-call-popup");
-        if (incomingUi) incomingUi.remove();
+        dismissIncomingCall();
     }
 }
 
 function showIncomingCallUI(roomId) {
     if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
-    
+
     let incomingUi = document.createElement("div");
     incomingUi.id = "incoming-call-popup";
-    incomingUi.style.position = "fixed";
-    incomingUi.style.top = "80px";
-    incomingUi.style.left = "50%";
-    incomingUi.style.transform = "translateX(-50%)";
-    incomingUi.style.backgroundColor = "var(--main-bg-color, #1a1a1a)";
-    incomingUi.style.padding = "15px 25px";
-    incomingUi.style.borderRadius = "0.9rem";
-    incomingUi.style.boxShadow = "0 1rem 3rem rgba(0, 0, 0, 0.5)";
-    incomingUi.style.display = "flex";
-    incomingUi.style.alignItems = "center";
-    incomingUi.style.gap = "20px";
-    incomingUi.style.zIndex = "9999";
-    incomingUi.style.border = "var(--border-width, 1px) solid var(--light-border-color, #333)";
-    
     incomingUi.innerHTML = `
-        <div style="display: flex; flex-direction: column;">
-            <span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
-            <span style="color: var(--fg-1); font-size: 0.9rem;">${voiceActiveUsers.length} in chat</span>
+        <div class="incoming-call-icon">
+            ${ICONS.call({width: "1.25rem", height: "1.25rem"})}
         </div>
-        <div style="display: flex; gap: 10px;">
-            <button onclick="document.getElementById('incoming-call-popup').remove(); initiateVoiceCall('${roomId}')" style="background: #27ae60; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
-                ${ICONS.call({width: "16px", height: "16px"})} Join
+        <div class="incoming-call-info">
+            <span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
+            <span class="incoming-call-subtitle">${voiceActiveUsers.length} in chat</span>
+        </div>
+        <div class="incoming-call-actions">
+            <button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
+                ${ICONS.call({width: "1rem", height: "1rem"})} Join
             </button>
-            <button onclick="document.getElementById('incoming-call-popup').remove()" style="background: #e74c3c; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
-                ${ICONS.close({width: "16px", height: "16px"})} Decline
+            <button class="voice-call-btn decline" onclick="dismissIncomingCall()">
+                ${ICONS.close({width: "1rem", height: "1rem"})} Decline
             </button>
         </div>
     `;
     document.body.appendChild(incomingUi);
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => incomingUi.classList.add("show"));
+    });
+}
+
+function dismissIncomingCall() {
+    let el = document.getElementById("incoming-call-popup");
+    if (!el || el.classList.contains("hide")) return;
+    el.classList.remove("show");
+    el.classList.add("hide");
+    setTimeout(() => el.remove(), 400);
+}
+
+function joinIncomingCall(roomId) {
+    dismissIncomingCall();
+    initiateVoiceCall(roomId);
 }
 
 async function sendVoiceSignalToUser(targetUserId, roomId) {
@@ -510,19 +542,20 @@ function showVoiceUI() {
     voiceUiContainer.id = "voice-call-popup";
     
     voiceUiContainer.innerHTML = `
-        <div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
-            <div style="display: flex; align-items: center; gap: 8px;">
-                <span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span>
+        <div id="voice-header">
+            <div class="voice-title">
+                ${ICONS.call({width: "1.1rem", height: "1.1rem"})}
+                <span>Voice Chat</span>
             </div>
-            <div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div>
+            <div id="voice-status">Connecting...</div>
         </div>
         <div id="voice-users"></div>
-        <div style="height: 4px; background: var(--bg-2); width: 100%;">
-            <div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div>
+        <div class="voice-mic-meter">
+            <div id="voice-mic-level"></div>
         </div>
         <div id="voice-footer" class="voice-controls">
             <button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone">
-                ${ICONS.mic({width: "20px", height: "20px"})}
+                ${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
             </button>
             <button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
@@ -531,12 +564,15 @@ function showVoiceUI() {
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
             </button>
             <button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect">
-                ${ICONS.call({width: "20px", height: "20px"})}
+                ${ICONS.call({width: "1.4rem", height: "1.4rem"})}
             </button>
         </div>
     `;
-    
+
     document.body.appendChild(voiceUiContainer);
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
+    });
     
     let header = document.getElementById("voice-header");
     let isDragging = false;
@@ -639,10 +675,6 @@ function updateVoiceUIUsers() {
             
             let mediaEl = streamData.canvas || streamData.video;
             if (mediaEl) {
-                mediaEl.style.width = "100%";
-                mediaEl.style.height = "100%";
-                mediaEl.style.objectFit = "cover";
-                mediaEl.style.background = "#000";
                 div.appendChild(mediaEl);
             }
             
@@ -696,6 +728,9 @@ function showVoiceUserSettings(clientId, e) {
     if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
     popup.style.left = left + "px";
     popup.style.top = top + "px";
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => popup.classList.add("open"));
+    });
     
     const closePopup = (ev) => {
         if (!popup.contains(ev.target)) {
@@ -718,6 +753,7 @@ window.updateVoiceVol = function(clientId, val, type) {
 
 function toggleVoiceMic() {
     isMicMuted = !isMicMuted;
+    if (isMicMuted) setTileSpeaking(String(window.id), false);
     let btn = document.getElementById("voice-btn-mic");
     if (btn) {
         if (isMicMuted) {
@@ -779,9 +815,14 @@ function endVoiceSession() {
     currentVoiceCallType = null;
     currentVoiceCallId = null;
     
+    clearAllSpeaking();
+    
     if (voiceUiContainer) {
-        voiceUiContainer.remove();
+        let popupEl = voiceUiContainer;
         voiceUiContainer = null;
+        popupEl.classList.remove("show");
+        popupEl.classList.add("hide");
+        setTimeout(() => popupEl.remove(), 350);
     }
 }
 
diff --git a/webroot/main.js b/webroot/main.js
index ecd51413..f514589c 100644
--- a/webroot/main.js
+++ b/webroot/main.js
@@ -1461,8 +1461,8 @@ function showFixedContextMenu(rect, html) {
 
     fixedContextMenu.style.transition = 'none';
     fixedContextMenu.style.opacity = '0';
-    fixedContextMenu.style.left = '0px';
-    fixedContextMenu.style.top = '0px';
+    fixedContextMenu.style.left = '0rem';
+    fixedContextMenu.style.top = '0rem';
 
     fixedContextMenu.classList.add("show");
 
@@ -3139,7 +3139,7 @@ async function generateMessagesHtml(entries, isPinnedContext = false) {
                             let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
                             let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
 
-                            attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 120px; max-width: 300px; min-height: 100px; max-height: 300px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
+                            attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 7.5rem; max-width: 18.75rem; min-height: 6.25rem; max-height: 18.75rem; background: rgba(0,0,0,0.2); border: 0.0625rem solid var(--border-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
                                 <div style="padding: 1rem; text-align: center; color: var(--text-color);">
                                     ${iconSvg}
                                     <div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
@@ -3653,12 +3653,12 @@ async function downloadAndRenderAttachment(container, msgId, attId, type, name,
         container.dataset.url = blobUrl;
         
         if (type.startsWith("image/")) {
-            container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 300px; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
+            container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 18.75rem; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
         } else if (type.startsWith("video/")) {
-            container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 300px; display: block;"></video>`;
+            container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 18.75rem; display: block;"></video>`;
         } else {
             container.innerHTML = originalHtml;
-            container.style.border = "1px solid var(--accent-color)";
+            container.style.border = "0.0625rem solid var(--accent-color)";
             let a = document.createElement("a");
             a.href = blobUrl;
             a.download = name;
@@ -3716,7 +3716,7 @@ function renderAttachmentsPreview() {
         }
         
         html += `
-        <div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
+        <div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
             <div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
             <div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
             <button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
diff --git a/webroot/style.css b/webroot/style.css
index a254bfcc..7c4985ce 100644
--- a/webroot/style.css
+++ b/webroot/style.css
@@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
 }
 
 /* Custom Zoom Slider Styling */
-#cropper-zoom {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-    outline: none;
-    margin: 10px 0;
-}
-
-#cropper-zoom::-webkit-slider-thumb {
+#cropper-zoom,
+.voice-setting-row input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
-    width: 16px;
-    height: 16px;
+    width: 100%;
+    height: 0.375rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 0.1875rem;
+    outline: none;
+}
+
+#cropper-zoom {
+    margin: 0.625rem 0;
+}
+
+#cropper-zoom::-webkit-slider-thumb,
+.voice-setting-row input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
     border-radius: 50%;
     background: var(--text-color);
     cursor: pointer;
     transition: transform 0.2s, background 0.2s;
 }
 
-#cropper-zoom::-webkit-slider-thumb:hover {
+#cropper-zoom::-webkit-slider-thumb:hover,
+.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
     transform: scale(1.2);
     background: #fff;
 }
 
-#cropper-zoom::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
+#cropper-zoom::-moz-range-thumb,
+.voice-setting-row input[type="range"]::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
     border-radius: 50%;
     background: var(--text-color);
     cursor: pointer;
@@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
     border: none;
 }
 
-#cropper-zoom::-moz-range-thumb:hover {
+#cropper-zoom::-moz-range-thumb:hover,
+.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
     transform: scale(1.2);
     background: #fff;
 }
@@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
     z-index: 100;
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-10px);
+    transform: translateY(-0.625rem);
     transition: all 0.2s ease;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
     padding: 0.4rem;
     pointer-events: none;
 }
@@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
 /* Voice UI Styles */
 #voice-call-popup {
     position: fixed;
-    width: 600px;
-    height: 450px;
+    width: 37.5rem;
+    height: 28.125rem;
+    min-width: 20rem;
+    min-height: 14rem;
     background-color: var(--main-bg-color);
     border: var(--border-width) solid var(--light-border-color);
     border-radius: 0.9rem;
@@ -1288,25 +1299,68 @@ input:checked + .toggle-slider:before {
     flex-direction: column;
     overflow: hidden;
     resize: both;
+
+    opacity: 0;
+    transform: translateY(1.5rem) scale(0.92);
+    pointer-events: none;
+    transition:
+            opacity 0.2s ease,
+            transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#voice-call-popup.show {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+}
+#voice-call-popup.hide {
+    opacity: 0;
+    transform: translateY(1rem) scale(0.95);
 }
 
 #voice-header {
     height: 3rem;
-    background: var(--light-border-color);
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.03);
     display: flex;
     align-items: center;
-    padding: 0 15px;
+    justify-content: space-between;
+    padding: 0 0.9375rem;
     cursor: grab;
     font-weight: bold;
     user-select: none;
-    border-bottom: var(--border-width) solid rgba(255,255,255,0.05);
+    -webkit-user-select: none;
+    border-bottom: var(--border-width) solid var(--light-border-color);
+}
+#voice-header:active {
+    cursor: grabbing;
+}
+.voice-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-color);
+}
+.voice-title svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    pointer-events: none !important;
+}
+
+#voice-status {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--darker-text-color);
+    background: rgba(255, 255, 255, 0.05);
+    border: var(--border-width) solid var(--light-border-color);
+    padding: 0.15rem 0.6rem;
+    border-radius: 50rem;
 }
 
 #voice-users {
-    padding: 15px;
+    padding: 0.9375rem;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
+    gap: 0.75rem;
     overflow-y: auto;
     flex-grow: 1;
 }
@@ -1314,94 +1368,253 @@ input:checked + .toggle-slider:before {
 .voice-tile {
     position: relative;
     background: var(--light-border-color);
-    border-radius: 8px;
-    overflow: hidden;
     background-size: cover;
     background-position: center;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-    cursor: pointer;
-    border: 2px solid transparent;
-}
-.voice-tile.speaking {
-    border-color: #4cd137;
-    box-shadow: 0 0 8px 2px #4cd137;
-}
-
-.voice-tile-name {
-    position: absolute;
-    bottom: 6px;
-    left: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    padding: 2px 6px;
-    background: rgba(0,0,0,0.6);
-    border-radius: 4px;
-    color: #fff;
-    max-width: calc(100% - 12px);
+    border-radius: 0.65rem;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    cursor: pointer;
+    border: var(--border-width) solid transparent;
+    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
+    animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
-
-.voice-tile-icons {
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-    display: flex;
-    gap: 4px;
+.voice-tile:hover {
+    transform: translateY(-0.125rem);
 }
-
-.voice-tile video {
+.voice-tile video,
+.voice-tile canvas {
+    display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     background: #000;
 }
+@keyframes voice-tile-in {
+    from { opacity: 0; transform: scale(0.85); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+.voice-tile.speaking {
+    border-color: var(--big-green);
+    box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
+}
+
+.voice-tile-name {
+    position: absolute;
+    bottom: 0.375rem;
+    left: 0.375rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    padding: 0.125rem 0.5rem;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(0.5rem);
+    -webkit-backdrop-filter: blur(0.5rem);
+    border-radius: 50rem;
+    color: #fff;
+    max-width: calc(100% - 0.75rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+}
+
+.voice-tile-icons {
+    position: absolute;
+    bottom: 0.375rem;
+    right: 0.375rem;
+    display: flex;
+    gap: 0.25rem;
+}
+.voice-tile-icons svg {
+    filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
+}
+
+.voice-mic-meter {
+    height: 0.25rem;
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.06);
+    width: 100%;
+}
+#voice-mic-level {
+    height: 100%;
+    width: 0%;
+    background: rgba(255, 255, 255, 0.15);
+    transition: width 0.1s linear, background-color 0.2s ease;
+}
 
 .voice-controls {
     height: 4rem;
-    background: var(--main-bg-color);
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.02);
     border-top: var(--border-width) solid var(--light-border-color);
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 15px;
+    gap: 0.9375rem;
+    padding: 0 0.9375rem;
 }
 
 .voice-btn {
     border: var(--border-width) solid var(--light-border-color);
-    background: var(--main-bg-color);
-    color: var(--fg-1);
-    border-radius: 0.6rem;
-    padding: 0.6rem 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-color) !important;
+    width: 2.6rem;
+    height: 2.6rem;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
+    border-radius: 0.8rem;
     cursor: pointer;
-    font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    transition: all 0.2s;
-}
 
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    touch-action: manipulation;
+}
+.voice-btn svg {
+    width: 1.4rem;
+    height: 1.4rem;
+    pointer-events: none !important;
+}
 .voice-btn:hover {
-    background: var(--light-border-color);
+    background: rgba(255, 255, 255, 0.1);
+}
+.voice-btn:active, .voice-btn.is-pressed {
+    transform: var(--press-scale);
 }
-
 .voice-btn.voice-btn-active {
-    background: #27ae60;
-    color: #fff;
-    border-color: #27ae60;
-}
-
-.voice-btn-danger {
-    background: #e74c3c !important;
+    background: var(--big-green) !important;
+    border-color: transparent !important;
+    color: white !important;
+}
+.voice-btn.voice-btn-active:hover {
+    filter: brightness(1.1);
+}
+.voice-btn.voice-btn-danger {
+    background: var(--big-red) !important;
+    border-color: transparent !important;
     color: white !important;
-    border-color: #e74c3c !important;
 }
 
-.voice-btn-danger:hover {
-    background: #c0392b !important;
-    border-color: #c0392b !important;
+/* Incoming Call Popup */
+#incoming-call-popup {
+    position: fixed;
+    top: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(calc(-100% - 3rem));
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.7rem 0.7rem 0.7rem 1rem;
+    background: rgba(255, 255, 255, 0.015);
+    backdrop-filter: blur(1.2rem);
+    -webkit-backdrop-filter: blur(1.2rem);
+    border: var(--border-width) solid var(--big-green);
+    border-radius: 0.9rem;
+    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
+    z-index: 9999;
+    opacity: 0;
+    transition:
+            opacity 0.25s ease,
+            transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#incoming-call-popup.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+#incoming-call-popup.hide {
+    opacity: 0;
+    transform: translateX(-50%) translateY(calc(-100% - 2rem));
+}
+
+.incoming-call-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--big-green);
+    color: white !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: voice-call-pulse 1.5s ease-out infinite;
+}
+.incoming-call-icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    pointer-events: none !important;
+}
+@keyframes voice-call-pulse {
+    0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
+    70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
+    100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
+}
+
+.incoming-call-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    text-align: left;
+}
+.incoming-call-title {
+    font-weight: bold;
+    font-size: 1.05rem;
+    color: var(--text-color);
+}
+.incoming-call-subtitle {
+    font-size: 0.85rem;
+    color: var(--darker-text-color);
+    opacity: 0.8;
+}
+
+.incoming-call-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-left: 0.4rem;
+}
+.voice-call-btn {
+    height: 2.4rem;
+    padding: 0 0.9375rem;
+    margin: 0;
+    border-radius: 0.8rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    font-weight: 700;
+
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    touch-action: manipulation;
+}
+.voice-call-btn svg {
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none !important;
+}
+.voice-call-btn.accept {
+    background: var(--big-green) !important;
+    border: none !important;
+    color: white !important;
+}
+.voice-call-btn.decline {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: var(--border-width) solid var(--light-border-color) !important;
+    color: var(--text-color) !important;
+}
+.voice-call-btn.accept:hover {
+    filter: brightness(1.12);
+}
+.voice-call-btn.decline:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+.voice-call-btn:active, .voice-call-btn.is-pressed {
+    transform: var(--press-scale);
 }
 
 /* Voice User Settings Popup */
@@ -1409,39 +1622,63 @@ input:checked + .toggle-slider:before {
     position: fixed;
     background: var(--main-bg-color);
     border: var(--border-width) solid var(--light-border-color);
-    padding: 15px;
-    border-radius: 8px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+    padding: 0.4rem;
+    border-radius: 0.8rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
     z-index: 10000;
+    min-width: 13rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    transform-origin: top left;
+    transform: scale(0.9);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+            opacity 0.15s ease,
+            transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#voice-user-settings.open {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
 }
 
 .voice-setting-row {
     display: flex;
     flex-direction: column;
-    margin-bottom: 10px;
+    gap: 0.3rem;
+    margin-bottom: 0;
+    padding: 0.5rem;
+    border-radius: 0.65rem;
+}
+.voice-setting-row:hover {
+    background-color: rgba(255, 255, 255, 0.04);
 }
-
 .voice-setting-row label {
-    font-size: 11px;
-    color: var(--fg-1);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--darker-text-color);
     display: flex;
     justify-content: space-between;
 }
-
 .voice-setting-row input[type="range"] {
+    margin: 0;
     width: 100%;
-    height: 4px;
     appearance: none;
-    background: var(--bg-2);
+    -webkit-appearance: none;
     outline: none;
-    border-radius: 2px;
 }
 
-.voice-setting-row input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    background: var(--accent);
-    border-radius: 50%;
-    cursor: pointer;
+@media (max-width: 55rem) {
+    #voice-call-popup {
+        width: calc(100vw - 2rem);
+        height: 60vh;
+        left: 1rem;
+        right: unset;
+    }
+    #incoming-call-popup {
+        width: calc(100vw - 2rem);
+        box-sizing: border-box;
+    }
 }
diff --git a/webroot/voice.js b/webroot/voice.js
index 58c9a6c9..7c3e5616 100644
--- a/webroot/voice.js
+++ b/webroot/voice.js
@@ -15,6 +15,35 @@ let isMicMuted = false;
 let remoteVideos = {}, videoDecryptChains = {};
 let camControl = null, screenControl = null;
 
+const SPEAKING_HANGOVER_MS = 400;
+
+function setTileSpeaking(clientId, speaking) {
+    let tile = document.getElementById(`voice-tile-${clientId}`);
+    if (!tile) return;
+
+    if (tile._speakingTimer) {
+        clearTimeout(tile._speakingTimer);
+        tile._speakingTimer = null;
+    }
+
+    if (speaking) {
+        tile.classList.add("speaking");
+        tile._speakingTimer = setTimeout(() => {
+            tile._speakingTimer = null;
+            tile.classList.remove("speaking");
+        }, SPEAKING_HANGOVER_MS);
+    } else {
+        tile.classList.remove("speaking");
+    }
+}
+
+function clearAllSpeaking() {
+    for (const el of document.querySelectorAll(".voice-tile.speaking")) {
+        if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
+        el.classList.remove("speaking");
+    }
+}
+
 setInterval(() => {
     const now = Date.now();
     let changed = false;
@@ -32,6 +61,7 @@ setInterval(() => {
 
 const voiceWorkletCode = `
 class AudioProcessor extends AudioWorkletProcessor {
+
     constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
     process(inputs) {
         const input = inputs[0][0];
@@ -157,7 +187,7 @@ async function startVoiceSession(serverUrl) {
         
         currentVoiceWs.onopen = async () => {
             document.getElementById("voice-status").innerText = "Connected";
-            document.getElementById("voice-status").style.color = "#4cd137";
+            document.getElementById("voice-status").style.color = "var(--big-green)";
             let btn = document.getElementById("voice-btn-mic");
             if (btn) {
                 if (isMicMuted) btn.classList.add("voice-btn-danger");
@@ -210,9 +240,12 @@ async function startVoiceSession(serverUrl) {
                 if (micLevelBar) micLevelBar.style.width = percent + '%';
                 
                 if (db >= sensitivity) vadHangover = 75;
+                let isSpeaking = vadHangover > 0 && !isMicMuted;
+                setTileSpeaking(String(window.id), isSpeaking);
+
                 if (vadHangover > 0 && !isMicMuted) {
                     vadHangover--;
-                    if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60';
+                    if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
                     
                     if (!voiceAesCryptoKey) return;
                     const iv = crypto.getRandomValues(new Uint8Array(12));
@@ -221,7 +254,7 @@ async function startVoiceSession(serverUrl) {
                     payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
                     currentVoiceWs.send(payload.buffer);
                 } else {
-                    if (micLevelBar) micLevelBar.style.backgroundColor = '#555';
+                    if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                 }
             };
         };
@@ -260,12 +293,7 @@ async function startVoiceSession(serverUrl) {
                         const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
                         if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
                         
-                        let userItem = document.getElementById(`voice-tile-${clientId}`);
-                        if (userItem) {
-                            userItem.classList.add("speaking");
-                            if (userItem.timer) clearTimeout(userItem.timer);
-                            userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
-                        }
+                        setTileSpeaking(clientId, true);
                     } catch (err) {}
                 });
             } else if (type === 1 || type === 2) {
@@ -417,45 +445,49 @@ function handleCallUpdate(data) {
             showIncomingCallUI(roomId);
         }
     } else if (state.length === 0) {
-        let incomingUi = document.getElementById("incoming-call-popup");
-        if (incomingUi) incomingUi.remove();
+        dismissIncomingCall();
     }
 }
 
 function showIncomingCallUI(roomId) {
     if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
-    
+
     let incomingUi = document.createElement("div");
     incomingUi.id = "incoming-call-popup";
-    incomingUi.style.position = "fixed";
-    incomingUi.style.top = "80px";
-    incomingUi.style.left = "50%";
-    incomingUi.style.transform = "translateX(-50%)";
-    incomingUi.style.backgroundColor = "var(--main-bg-color, #1a1a1a)";
-    incomingUi.style.padding = "15px 25px";
-    incomingUi.style.borderRadius = "0.9rem";
-    incomingUi.style.boxShadow = "0 1rem 3rem rgba(0, 0, 0, 0.5)";
-    incomingUi.style.display = "flex";
-    incomingUi.style.alignItems = "center";
-    incomingUi.style.gap = "20px";
-    incomingUi.style.zIndex = "9999";
-    incomingUi.style.border = "var(--border-width, 1px) solid var(--light-border-color, #333)";
-    
     incomingUi.innerHTML = `
-        <div style="display: flex; flex-direction: column;">
-            <span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
-            <span style="color: var(--fg-1); font-size: 0.9rem;">${voiceActiveUsers.length} in chat</span>
+        <div class="incoming-call-icon">
+            ${ICONS.call({width: "1.25rem", height: "1.25rem"})}
         </div>
-        <div style="display: flex; gap: 10px;">
-            <button onclick="document.getElementById('incoming-call-popup').remove(); initiateVoiceCall('${roomId}')" style="background: #27ae60; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
-                ${ICONS.call({width: "16px", height: "16px"})} Join
+        <div class="incoming-call-info">
+            <span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
+            <span class="incoming-call-subtitle">${voiceActiveUsers.length} in chat</span>
+        </div>
+        <div class="incoming-call-actions">
+            <button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
+                ${ICONS.call({width: "1rem", height: "1rem"})} Join
             </button>
-            <button onclick="document.getElementById('incoming-call-popup').remove()" style="background: #e74c3c; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
-                ${ICONS.close({width: "16px", height: "16px"})} Decline
+            <button class="voice-call-btn decline" onclick="dismissIncomingCall()">
+                ${ICONS.close({width: "1rem", height: "1rem"})} Decline
             </button>
         </div>
     `;
     document.body.appendChild(incomingUi);
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => incomingUi.classList.add("show"));
+    });
+}
+
+function dismissIncomingCall() {
+    let el = document.getElementById("incoming-call-popup");
+    if (!el || el.classList.contains("hide")) return;
+    el.classList.remove("show");
+    el.classList.add("hide");
+    setTimeout(() => el.remove(), 400);
+}
+
+function joinIncomingCall(roomId) {
+    dismissIncomingCall();
+    initiateVoiceCall(roomId);
 }
 
 async function sendVoiceSignalToUser(targetUserId, roomId) {
@@ -510,19 +542,20 @@ function showVoiceUI() {
     voiceUiContainer.id = "voice-call-popup";
     
     voiceUiContainer.innerHTML = `
-        <div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
-            <div style="display: flex; align-items: center; gap: 8px;">
-                <span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span>
+        <div id="voice-header">
+            <div class="voice-title">
+                ${ICONS.call({width: "1.1rem", height: "1.1rem"})}
+                <span>Voice Chat</span>
             </div>
-            <div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div>
+            <div id="voice-status">Connecting...</div>
         </div>
         <div id="voice-users"></div>
-        <div style="height: 4px; background: var(--bg-2); width: 100%;">
-            <div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div>
+        <div class="voice-mic-meter">
+            <div id="voice-mic-level"></div>
         </div>
         <div id="voice-footer" class="voice-controls">
             <button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone">
-                ${ICONS.mic({width: "20px", height: "20px"})}
+                ${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
             </button>
             <button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
@@ -531,12 +564,15 @@ function showVoiceUI() {
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
             </button>
             <button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect">
-                ${ICONS.call({width: "20px", height: "20px"})}
+                ${ICONS.call({width: "1.4rem", height: "1.4rem"})}
             </button>
         </div>
     `;
-    
+
     document.body.appendChild(voiceUiContainer);
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
+    });
     
     let header = document.getElementById("voice-header");
     let isDragging = false;
@@ -639,10 +675,6 @@ function updateVoiceUIUsers() {
             
             let mediaEl = streamData.canvas || streamData.video;
             if (mediaEl) {
-                mediaEl.style.width = "100%";
-                mediaEl.style.height = "100%";
-                mediaEl.style.objectFit = "cover";
-                mediaEl.style.background = "#000";
                 div.appendChild(mediaEl);
             }
             
@@ -696,6 +728,9 @@ function showVoiceUserSettings(clientId, e) {
     if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
     popup.style.left = left + "px";
     popup.style.top = top + "px";
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => popup.classList.add("open"));
+    });
     
     const closePopup = (ev) => {
         if (!popup.contains(ev.target)) {
@@ -718,6 +753,7 @@ window.updateVoiceVol = function(clientId, val, type) {
 
 function toggleVoiceMic() {
     isMicMuted = !isMicMuted;
+    if (isMicMuted) setTileSpeaking(String(window.id), false);
     let btn = document.getElementById("voice-btn-mic");
     if (btn) {
         if (isMicMuted) {
@@ -779,9 +815,14 @@ function endVoiceSession() {
     currentVoiceCallType = null;
     currentVoiceCallId = null;
     
+    clearAllSpeaking();
+    
     if (voiceUiContainer) {
-        voiceUiContainer.remove();
+        let popupEl = voiceUiContainer;
         voiceUiContainer = null;
+        popupEl.classList.remove("show");
+        popupEl.classList.add("hide");
+        setTimeout(() => popupEl.remove(), 350);
     }
 }