Ajusta layout responsivo no mobile usando dynamic viewport height e margens safe-area

public/style.css

@@ -70,6 +70,11 @@
   padding: 0;
 }
 
+html {
+  height: 100%;
+  height: -webkit-fill-available;
+}
+
 body {
   font-family: var(--font-sans);
   background-color: var(--bg-primary);
@@ -78,7 +83,9 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.5;
-  height: 100vh;
+  height: 100%;
+  height: -webkit-fill-available;
+  height: 100dvh;
   width: 100%;
 }
 
@@ -319,7 +326,9 @@ body {
 .app-container {
   display: flex;
   width: 100%;
-  height: 100vh;
+  height: 100%;
+  height: -webkit-fill-available;
+  height: 100dvh;
   position: relative;
   overflow: hidden;
 }
@@ -339,6 +348,7 @@ body {
 
 .sidebar-header {
   padding: 16px;
+  padding-top: calc(16px + env(safe-area-inset-top));
   display: flex;
   align-items: center;
   gap: 12px;
@@ -656,6 +666,7 @@ body {
 /* Rodapé Sidebar */
 .sidebar-footer {
   padding: 16px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
   border-top: 1px solid var(--border-light);
 }
 
@@ -762,8 +773,10 @@ body {
 
 /* Header */
 .chat-header {
-  height: var(--header-height);
+  height: auto;
+  min-height: var(--header-height);
   padding: 0 16px;
+  padding-top: env(safe-area-inset-top);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1151,6 +1164,7 @@ code {
 /* Rodapé / Input Area */
 .chat-footer {
   padding: 16px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
   background-color: var(--bg-primary);
 }