Update height styling in ConversationDetail and Im components

- Adjusted height properties to use 100dvh and a calculated value based on app viewport height, improving responsiveness across different screen sizes.
- Enhanced the layout consistency for both components by ensuring they adapt better to viewport changes.

app/components/im/ConversationDetail.vue

@@ -850,6 +850,8 @@ async function handleSend() {
 <style scoped lang="scss">
 .im-detail {
   height: 100vh;
+  height: 100dvh;
+  height: calc(var(--app-vh, 1vh) * 100);
   display: flex;
   flex-direction: column;
   background: #F1F2F5;

app/components/popup/Im.vue

@@ -334,6 +334,8 @@ onBeforeUnmount(async () => {
 <style scoped lang="scss">
 .im-popup {
   height: 100vh;
+  height: 100dvh;
+  height: calc(var(--app-vh, 1vh) * 100);
   padding: 16px 16px 20px;
   position: relative;
   display: flex;

app/plugins/viewport.client.ts

@@ -0,0 +1,30 @@
+export default defineNuxtPlugin(() => {
+  if (!import.meta.client) return
+
+  const root = document.documentElement
+  let raf = 0
+
+  const apply = () => {
+    raf = 0
+    // visualViewport.height is the "real" visible area on iOS Safari (addresses bottom bar + keyboard).
+    const h = window.visualViewport?.height ?? window.innerHeight
+    const vh = Math.max(0, h) * 0.01
+    root.style.setProperty('--app-vh', `${vh}px`)
+  }
+
+  const schedule = () => {
+    if (raf) return
+    raf = window.requestAnimationFrame(apply)
+  }
+
+  schedule()
+
+  window.addEventListener('resize', schedule, { passive: true })
+  window.addEventListener('orientationchange', schedule, { passive: true })
+
+  // iOS Safari: address bar show/hide + keyboard changes affect visualViewport.
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', schedule, { passive: true })
+    window.visualViewport.addEventListener('scroll', schedule, { passive: true })
+  }
+})