diff --git a/src/styles/global.less b/src/styles/global.less
index cff90b8..f84a2d6 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -3,3 +3,7 @@ body,
 #app {
 	height: 100%;
 }
+
+body {
+	padding-bottom: constant(safe-area-inset-bottom);
+}
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 031729c..b34d39e 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -333,7 +333,7 @@ const wrapClass = computed(() => {
 const footerClass = computed(() => {
   let classes = ['p-4']
   if (isMobile.value)
-    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'h-14', 'overflow-hidden']
+    classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
   return classes
 })
 
diff --git a/src/views/chat/layout/sider/index.vue b/src/views/chat/layout/sider/index.vue
index b8f47c0..6a70beb 100644
--- a/src/views/chat/layout/sider/index.vue
+++ b/src/views/chat/layout/sider/index.vue
@@ -32,6 +32,15 @@ const getMobileClass = computed<CSSProperties>(() => {
   return {}
 })
 
+const mobileSafeArea = computed(() => {
+  if (isMobile.value) {
+    return {
+      paddingBottom: 'env(safe-area-inset-bottom)',
+    }
+  }
+  return {}
+})
+
 watch(
   isMobile,
   (val) => {
@@ -56,7 +65,7 @@ watch(
     :style="getMobileClass"
     @update-collapsed="handleUpdateCollapsed"
   >
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col h-full" :style="mobileSafeArea">
       <main class="flex flex-col flex-1 min-h-0">
         <div class="p-4">
           <NButton dashed block @click="handleAdd">