diff --git a/lyra/web/static/index.html b/lyra/web/static/index.html
index 499f133..df4682b 100644
--- a/lyra/web/static/index.html
+++ b/lyra/web/static/index.html
@@ -3,14 +3,14 @@
Lyra Core Chat
-
+
-
+
diff --git a/lyra/web/static/style.css b/lyra/web/static/style.css
index cf8754e..e41aeb4 100644
--- a/lyra/web/static/style.css
+++ b/lyra/web/static/style.css
@@ -62,6 +62,12 @@ html {
text-size-adjust: 100%;
}
+html {
+ /* Paints the iOS home-indicator strip below the dvh shell; match the tab bar so the
+ bar looks like it continues to the physical bottom edge. */
+ background: var(--bg-line);
+}
+
body {
margin: 0;
background: var(--bg-dark);
@@ -830,16 +836,17 @@ select:hover {
@media screen and (max-width: 768px) {
body {
padding: 0;
- background: var(--bg-elev); /* matches the tab bar so any strip below #chat is seamless */
+ background: var(--bg-line); /* matches the tab bar so any strip below #chat is seamless */
}
#chat {
position: fixed;
top: 0; left: 0; right: 0;
width: 100%;
- height: 100vh; /* full physical screen (incl. home-indicator zone) so the
- tab bar can fill that zone instead of leaving an empty band */
- height: 100lvh; /* explicit: largest viewport == physical screen */
+ height: 100vh; /* fallback for old browsers */
+ height: 100dvh; /* the *visible* viewport — keep all content (incl. the tab bar)
+ inside what iOS actually paints, so nothing is clipped into the
+ home-indicator dead zone. The strip below is matched in color. */
background: var(--bg-dark);
border-radius: 0;
border: none;
@@ -923,10 +930,11 @@ select:hover {
display: flex;
flex: none; /* never let it be compressed/clipped by the flex column */
border-top: 1px solid var(--border);
- background: var(--bg-elev);
- /* shell is full-height (100vh), so the bar reaches the physical bottom; pad its
- icons up above the home indicator and let its bg fill the inset zone. */
- padding-bottom: calc(6px + env(safe-area-inset-bottom));
+ background: var(--bg-line); /* lighter than the page so it reads as a solid bar */
+ /* Shell is 100dvh, so the bar sits at the bottom of the rendered area with the icons
+ fully visible. Minimal padding keeps them low; the home-indicator strip just below
+ the rendered area is painted the same color (html bg) so the bar looks continuous. */
+ padding-bottom: 4px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}