diff --git a/openpilot/selfdrive/carrot/README.md b/openpilot/selfdrive/carrot/README.md
index d499db44fbd..f1be576f84f 100644
--- a/openpilot/selfdrive/carrot/README.md
+++ b/openpilot/selfdrive/carrot/README.md
@@ -405,6 +405,9 @@ web/js/realtime/
   carrot_map.js
   home_drive.js
   hud_card.js
+  mini_hud.js
+  mini_hud_mode.js
+  mini_hud_model.js
   nav_hud.js
   raw_capnp.js
   raw_capnp_worker.js
@@ -419,6 +422,9 @@ web/js/realtime/
 | `realtime/app_realtime.js` | Live runtime polling/raw stream wiring and HUD bridge. |
 | `realtime/home_drive.js` | Drive/Carrot Vision renderer and overlay canvas. |
 | `realtime/hud_card.js` | HUD card data rendering. |
+| `realtime/mini_hud_mode.js` | Compact HUD eligibility, viewport hysteresis, and activation events. |
+| `realtime/mini_hud_model.js` | Pure STOCK/NAV/WAZE compact HUD data normalization. |
+| `realtime/mini_hud.js` | Compact HUD DOM rendering and responsive typography. |
 | `realtime/carrot_map.js` | Kakao minimap iframe bridge (kmap), `FRAME_VERSION` gated to limit SDK quota. |
 | `realtime/nav_hud.js` | Carrot Nav HUD V2 — top-center guidance card from `carrotMan` state, no iframe/network. |
 | `realtime/raw_capnp.js` | Raw capnp decode entry. |
@@ -428,6 +434,23 @@ web/js/realtime/
 | `realtime/vision_raw.js` | Raw WebSocket client and worker bridge. |
 | `realtime/vision_diag.js` | Silent WebRTC/video diagnostic recorder (localStorage ring buffer) feeding the vision diag upload. |
 
+### Compact HUD mode
+
+Compact HUD is an adaptive CWeb surface for resizable launcher panels and
+Android multi-window use. By default it enters at viewport widths up to `480px`
+when the viewport is at least 22% smaller than the exposed screen or outer
+window. Widths up to `280px` are treated as unambiguously compact. The mode
+stays active through `539px` and exits at `540px`.
+
+`?mini_hud=auto` bypasses the windowed-evidence check but keeps the width
+thresholds. `?mini_hud=force` always enables the surface, and `?mini_hud=off`
+disables adaptive detection. Browser JavaScript has no reliable equivalent of
+Android `Activity.isInMultiWindowMode()`, so the default evidence check keeps
+ordinary full-screen phones out while supporting launcher panels, popup
+windows, desktop responsive windows, and multi-window layouts. While active,
+raw HUD realtime remains connected and Vision/WebRTC is suspended until the
+window leaves Compact HUD mode.
+
 ### Translations JS
 
 ```text
diff --git a/openpilot/selfdrive/carrot/web/css/base.css b/openpilot/selfdrive/carrot/web/css/base.css
index 994cde8ce13..983a6dc4521 100644
--- a/openpilot/selfdrive/carrot/web/css/base.css
+++ b/openpilot/selfdrive/carrot/web/css/base.css
@@ -526,7 +526,7 @@ body:has(.page-transitioning) {
   line-height: 1.4;
 }
 
-@media (max-width: 640px), (orientation: portrait) {
+@media (max-width: 640px), (aspect-ratio < 13/10) {
   .settings-diff-summary {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
diff --git a/openpilot/selfdrive/carrot/web/css/components.css b/openpilot/selfdrive/carrot/web/css/components.css
index 7aa49b7224a..e15e98aa633 100644
--- a/openpilot/selfdrive/carrot/web/css/components.css
+++ b/openpilot/selfdrive/carrot/web/css/components.css
@@ -72,7 +72,17 @@ body[data-page="terminal"] .app-toast-host {
 
 .app-dialog {
   position: fixed;
-  inset: 0;
+  /* Anchor to the *visual* viewport, not the layout viewport. With the
+     on-screen keyboard open, inset:0 centered the sheet in the full-screen
+     height — so it floated up behind the keyboard (the near-square/landscape
+     case never hit the bottom-sheet fallback below). viewport.js keeps
+     --app-vv-top / --app-vv-height in sync with visualViewport, so centering
+     here always lands in the visible area above the keyboard. Same pattern as
+     .setting-search-panel. */
+  top: var(--app-vv-top, 0px);
+  left: 0;
+  right: 0;
+  height: var(--app-vv-height, 100dvh);
   z-index: var(--z-modal);
   display: flex;
   align-items: center;
@@ -334,7 +344,7 @@ body[data-page="terminal"] .app-toast-host {
   line-height: 1.4;
 }
 
-@media (max-width: 640px) and (orientation: portrait) {
+@media (max-width: 640px) and (aspect-ratio < 13/10) {
   .app-dialog {
     align-items: center;
     padding: calc(12px + env(safe-area-inset-top, 0px)) 8px calc(12px + env(safe-area-inset-bottom, 0px));
@@ -368,30 +378,14 @@ body[data-page="terminal"] .app-toast-host {
     min-height: 40px;
   }
 
-  .app-dialog--form {
-    align-items: flex-end;
-    padding: env(safe-area-inset-top, 0px) 0 0;
-  }
-
-  .app-dialog--form .app-dialog__sheet {
-    width: 100vw;
-    max-height: min(72dvh, var(--dialog-sheet-mobile-max-height));
-    padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + env(safe-area-inset-bottom, 0px));
-    border-right: 0;
-    border-bottom: 0;
-    border-left: 0;
-    border-radius: var(--dialog-sheet-radius-mobile) var(--dialog-sheet-radius-mobile) 0 0;
-    transform: translateY(24px);
-  }
-
-  .app-dialog--form .app-dialog__actions {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .app-dialog--form .app-dialog__actions .smallBtn {
-    width: 100%;
-  }
+  /* Form dialogs (stream key, mapbox token, device actions, …) render as the
+     SAME centered floating card as every other dialog — no full-width bottom
+     sheet jammed onto the keyboard. They inherit the mobile card sheet above
+     (side margins, all corners rounded, full border) and the right-aligned
+     flex actions from .app-dialog__actions. Because .app-dialog is anchored to
+     --app-vv-height, the card floats just above the on-screen keyboard when one
+     is open, and simply centers when there is none — consistent across phone,
+     foldable and desktop (no keyboard-toolbar dependency). */
 }
 
 .app-branch-picker__sheet {
@@ -1069,6 +1063,27 @@ body[data-page="terminal"] .app-toast-host {
   margin-top: var(--sp-sm);
 }
 
+/* Form dialogs anchor to the bottom of the visible area (which is
+   --app-vv-height = above the on-screen keyboard) so the floating card sits
+   just above the keyboard — the input auto-focuses and the keyboard opens
+   immediately — instead of floating centered far above it. The container's
+   bottom padding gives the breathing gap between card and keyboard. */
+/* Any dialog that shows a text input (prompt OR form) centers when no keyboard
+   is up (desktop, keyboard-less devices, or before the field focuses), and hugs
+   just above the on-screen keyboard with a consistent gap when it is — toggled
+   by html[data-kb-open] from viewport.js. --kb-inset is the exact keyboard
+   height incl. the Samsung toolbar on Chromium (VirtualKeyboard API), 0
+   elsewhere (where --app-vv-height already excludes the keyboard). One shared
+   --kb-gap keeps this consistent with the terminal and search panel. */
+.app-dialog--input {
+  align-items: center;
+}
+
+html[data-kb-open="1"] .app-dialog--input {
+  align-items: flex-end;
+  padding-bottom: calc(var(--kb-gap) + var(--kb-inset) + env(safe-area-inset-bottom, 0px));
+}
+
 .app-dialog__inputError {
   color: var(--md-error);
   font-size: var(--fs-label-sm);
diff --git a/openpilot/selfdrive/carrot/web/css/components/mini_hud.css b/openpilot/selfdrive/carrot/web/css/components/mini_hud.css
new file mode 100644
index 00000000000..e3b9d7787bb
--- /dev/null
+++ b/openpilot/selfdrive/carrot/web/css/components/mini_hud.css
@@ -0,0 +1,447 @@
+/* Compact HUD (mini_hud) — pixel-matched to carrot-hud-only-preview.html.
+   Intentionally SEPARATE from the green drive HUD (hud_card): this file owns the
+   compact/HUD-only surface only. The token model, colors, gradients, shapes and
+   spacing mirror the preview 1:1; the only differences from the preview are the
+   class namespace (carrot-mini-hud__*), the runtime var names (--mini-*, driven
+   by mini_hud.js applyLayout), and the fixed-inset window wrapper so the surface
+   fills a small/multi-window viewport. */
+
+.carrot-mini-hud[hidden] {
+  display: none !important;
+}
+
+.carrot-mini-hud {
+  /* Runtime-fit fonts/sizes (mini_hud.js applyLayout). Defaults mirror the
+     preview's .hudWrap token defaults. */
+  --mini-ui-scale: 1;
+  --mini-top-font: 32px;
+  --mini-speed-font: 128px;
+  --mini-set-font: 60px;
+  --mini-speed-scale-x: 1;
+  --mini-set-scale-x: 1;
+  --mini-limit-size: 240px;
+  --mini-limit-font: 96px;
+  --mini-limit-label-font: 34px;
+  --mini-badge-font: 46px;
+  --mini-alert-font: 34px;
+  --mini-mode-font: 62px;
+  --mini-gear-font: 136px;
+
+  --mini-radius: calc(20px * var(--mini-ui-scale));
+  --mini-padding: calc(12px * var(--mini-ui-scale));
+  --mini-section-gap: calc(10px * var(--mini-ui-scale));
+  --mini-band-height: calc(54px * var(--mini-ui-scale));
+  --mini-panel-top: rgba(13, 56, 38, 1);
+  --mini-panel-mid: rgba(18, 65, 44, 1);
+  --mini-panel-bottom: rgba(8, 31, 21, 1);
+  --mini-panel-border: rgba(255, 255, 255, 0.18);
+  --mini-text-shadow-strong: 0 1.4px 3.6px rgba(0, 0, 0, 0.94), 0 0 1.2px rgba(0, 0, 0, 0.62);
+
+  position: fixed;
+  inset: 0;
+  z-index: 5000;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: var(--mini-padding);
+  border: 1px solid var(--mini-panel-border);
+  border-radius: var(--mini-radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 38%, transparent 72%),
+    linear-gradient(145deg, var(--mini-panel-top), var(--mini-panel-mid) 58%, var(--mini-panel-bottom));
+  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.54);
+  color: #fff;
+  isolation: isolate;
+  contain: strict;
+  user-select: none;
+  touch-action: none;
+  pointer-events: auto;
+}
+
+.carrot-mini-hud * {
+  box-sizing: border-box;
+}
+
+.carrot-mini-hud::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.05), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%);
+  pointer-events: none;
+}
+
+.carrot-mini-hud > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Top metric bar (green) ──────────────────────────────────── */
+.carrot-mini-hud__top {
+  min-height: var(--mini-band-height);
+  flex: 0 0 var(--mini-band-height);
+  border-radius: 0;
+  background: #187047;
+  border: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: stretch;
+  margin:
+    calc(var(--mini-padding) * -1)
+    calc(var(--mini-padding) * -1)
+    calc(var(--mini-section-gap) * 0.20);
+  padding: 0 var(--mini-padding);
+}
+
+.carrot-mini-hud__top-cell {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 calc(var(--mini-section-gap) * 0.24);
+  overflow: hidden;
+  color: #fff;
+  font-size: var(--mini-top-font);
+  font-weight: 950;
+  line-height: 1;
+  letter-spacing: 0;
+  text-shadow: var(--mini-text-shadow-strong);
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__top-cell + .carrot-mini-hud__top-cell {
+  border-left: 1px solid rgba(255, 255, 255, 0.24);
+}
+
+/* ── Main region: limit | detail, or stock ───────────────────── */
+.carrot-mini-hud__main {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
+  column-gap: calc(var(--mini-section-gap) * 1.10);
+  align-items: center;
+  padding: 0 calc(var(--mini-padding) * 0.18);
+}
+
+.carrot-mini-hud__limit {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: stretch;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.carrot-mini-hud__limit-sign {
+  position: relative;
+  width: var(--mini-limit-size);
+  height: var(--mini-limit-size);
+  flex: 0 0 auto;
+  border-radius: 50%;
+  border: max(3px, calc(var(--mini-limit-size) * 0.095)) solid #ff3348;
+  background: radial-gradient(circle at 50% 48%, #ffffff 0 55%, #fff7f7 56% 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--mini-limit-size) * 0.025);
+  box-shadow:
+    0 14px 30px rgba(0, 0, 0, 0.40),
+    0 0 26px rgba(255, 51, 72, 0.30),
+    inset 0 0 0 2px rgba(255, 255, 255, 0.70);
+}
+
+.carrot-mini-hud__limit-sign > span {
+  color: #050807;
+  font-size: var(--mini-limit-font);
+  font-weight: 900;
+  line-height: 0.92;
+  letter-spacing: 0;
+  text-shadow: none;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__limit-sign > small {
+  color: #050807;
+  font-size: var(--mini-limit-label-font);
+  font-weight: 950;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__limit-badge {
+  position: relative;
+  z-index: 1;
+  margin-top: calc(var(--mini-limit-size) * -0.08);
+  min-width: calc(var(--mini-limit-size) * 0.72);
+  height: calc(var(--mini-limit-size) * 0.30);
+  border-radius: calc(var(--mini-limit-size) * 0.045);
+  background: linear-gradient(180deg, #f04a23, #d93318);
+  display: grid;
+  place-items: center;
+  padding: 0 calc(var(--mini-limit-size) * 0.08);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
+  color: #fff;
+  font-size: var(--mini-badge-font);
+  font-weight: 950;
+  line-height: 1;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__limit-badge[hidden],
+.carrot-mini-hud__limit-sign > small[hidden] {
+  display: none !important;
+}
+
+/* ── Detail (alert) zone: countdown / distance / type ────────── */
+.carrot-mini-hud__alert {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: stretch;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: calc(var(--mini-section-gap) * 1.90);
+  padding:
+    0
+    calc(var(--mini-padding) * 0.06)
+    0
+    clamp(6px, calc(var(--mini-padding) * 1.05), 24px);
+}
+
+.carrot-mini-hud__alert > * {
+  min-width: 0;
+  color: #fff;
+  font-size: var(--mini-alert-font);
+  font-weight: 950;
+  line-height: 0.92;
+  letter-spacing: 0;
+  text-shadow: var(--mini-text-shadow-strong);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__alert > strong {
+  color: #ff6a76;
+}
+
+.carrot-mini-hud[data-alert-kind="police"] .carrot-mini-hud__alert > strong,
+.carrot-mini-hud[data-alert-kind="bump"] .carrot-mini-hud__alert > strong {
+  color: #ffc24b;
+}
+
+/* ── Stock zone (source = STOCK): drive mode + gear ──────────── */
+.carrot-mini-hud__stock {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
+  align-items: center;
+}
+
+.carrot-mini-hud__stock[hidden],
+.carrot-mini-hud__limit[hidden],
+.carrot-mini-hud__alert[hidden] {
+  display: none !important;
+}
+
+.carrot-mini-hud__drive-mode,
+.carrot-mini-hud__gear {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carrot-mini-hud__drive-mode {
+  width: 92%;
+  justify-self: center;
+  min-height: calc(var(--mini-mode-font) * 1.62);
+  padding: 0 calc(var(--mini-mode-font) * 0.18);
+  border: max(1px, calc(2px * var(--mini-ui-scale))) solid rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.035);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
+}
+
+.carrot-mini-hud__drive-mode[data-mini-hud-drive-kind="eco"] {
+  border-color: rgba(73, 221, 130, 0.42);
+}
+
+.carrot-mini-hud__drive-mode[data-mini-hud-drive-kind="safe"] {
+  border-color: rgba(120, 213, 238, 0.42);
+}
+
+.carrot-mini-hud__drive-mode[data-mini-hud-drive-kind="sport"] {
+  border-color: rgba(255, 102, 115, 0.42);
+}
+
+.carrot-mini-hud__drive-mode > span {
+  max-width: 100%;
+  overflow: hidden;
+  color: #fff;
+  font-family: "Roboto Condensed", "Arial Narrow", "Noto Sans Condensed", "sans-serif-condensed", sans-serif;
+  font-size: var(--mini-mode-font);
+  font-stretch: condensed;
+  font-weight: 950;
+  line-height: 0.94;
+  letter-spacing: 0;
+  text-overflow: clip;
+  text-shadow: var(--mini-text-shadow-strong);
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__drive-mode[data-mini-hud-drive-kind="eco"] > span {
+  color: #49dd82;
+}
+
+.carrot-mini-hud__drive-mode[data-mini-hud-drive-kind="safe"] > span {
+  color: #78d5ee;
+}
+
+.carrot-mini-hud__drive-mode[data-mini-hud-drive-kind="sport"] > span {
+  color: #ff6673;
+}
+
+.carrot-mini-hud__gear {
+  align-items: baseline;
+  gap: calc(4px * var(--mini-ui-scale));
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__gear small {
+  color: rgba(255, 255, 255, 0.58);
+  font-size: calc(var(--mini-gear-font) * 0.34);
+  font-weight: 900;
+  line-height: 1;
+  text-shadow: var(--mini-text-shadow-strong);
+}
+
+.carrot-mini-hud__gear small[hidden] {
+  display: none !important;
+}
+
+.carrot-mini-hud__gear strong {
+  color: #fff;
+  font-size: var(--mini-gear-font);
+  font-weight: 950;
+  line-height: 0.9;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+  text-shadow: var(--mini-text-shadow-strong);
+}
+
+/* ── Speed row: current speed (70%) | set speed (30%) ────────── */
+.carrot-mini-hud__speed-row {
+  flex: 0 0 34%;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
+  align-items: end;
+  column-gap: 0;
+  margin-bottom: calc(var(--mini-section-gap) * 0.26);
+}
+
+.carrot-mini-hud__speed,
+.carrot-mini-hud__set-speed {
+  min-width: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  overflow: visible;
+  font-weight: 900;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0 1.4px 3.6px rgba(0, 0, 0, 0.94);
+  white-space: nowrap;
+}
+
+.carrot-mini-hud__speed {
+  justify-content: flex-start;
+  padding:
+    calc(var(--mini-padding) * 0.18)
+    calc(var(--mini-padding) * 0.10)
+    calc(var(--mini-padding) * 0.10)
+    calc(var(--mini-padding) * 0.16);
+  color: #fff;
+  font-size: var(--mini-speed-font);
+  line-height: 0.84;
+}
+
+.carrot-mini-hud__set-speed {
+  justify-content: flex-end;
+  padding:
+    calc(var(--mini-padding) * 0.18)
+    calc(var(--mini-padding) * 0.16)
+    calc(var(--mini-padding) * 0.10)
+    calc(var(--mini-padding) * 0.10);
+  color: #f4f7fb;
+  font-size: var(--mini-set-font);
+  line-height: 0.92;
+}
+
+.carrot-mini-hud__speed > span,
+.carrot-mini-hud__set-speed > span {
+  display: inline-block;
+  line-height: inherit;
+  transform-origin: center bottom;
+  text-rendering: optimizeLegibility;
+}
+
+.carrot-mini-hud__speed > span {
+  transform: scaleX(var(--mini-speed-scale-x));
+}
+
+.carrot-mini-hud__set-speed > span {
+  transform: scaleX(var(--mini-set-scale-x));
+}
+
+.carrot-mini-hud.is-three-digit .carrot-mini-hud__speed,
+.carrot-mini-hud.is-three-digit .carrot-mini-hud__set-speed {
+  justify-content: center;
+  text-align: center;
+}
+
+.carrot-mini-hud.is-three-digit .carrot-mini-hud__speed > span,
+.carrot-mini-hud.is-three-digit .carrot-mini-hud__set-speed > span {
+  font-family: "Roboto Condensed", "Arial Narrow", "Noto Sans Condensed", "sans-serif-condensed", sans-serif;
+  font-stretch: condensed;
+}
+
+/* ── Drive-page integration: while active, hide the normal CWeb UI ── */
+html[data-carrot-mini-hud="1"],
+html[data-carrot-mini-hud="1"] body {
+  overflow: hidden !important;
+}
+
+html[data-carrot-mini-hud="1"] body .topbar,
+html[data-carrot-mini-hud="1"] body > .wrap,
+html[data-carrot-mini-hud="1"] body #driveHudCard {
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+
+html[data-carrot-mini-hud="1"] body #carrotMiniHud {
+  visibility: visible !important;
+  pointer-events: auto !important;
+}
diff --git a/openpilot/selfdrive/carrot/web/css/components/nav_hud.css b/openpilot/selfdrive/carrot/web/css/components/nav_hud.css
index b86b415def2..bed337bce57 100644
--- a/openpilot/selfdrive/carrot/web/css/components/nav_hud.css
+++ b/openpilot/selfdrive/carrot/web/css/components/nav_hud.css
@@ -1,4 +1,4 @@
-/*
+/*
  * Carrot Nav HUD
  *
  * Stable layout:
@@ -440,13 +440,13 @@
   color: #fff;
 }
 
-@media (max-width: 980px) and (orientation: landscape) {
+@media (max-width: 980px) and (min-aspect-ratio: 13/10), (max-width: 980px) and (horizontal-viewport-segments: 2), (max-width: 980px) and (vertical-viewport-segments: 2), (min-width: 640px) and (max-width: 980px) and (min-height: 650px) {
   .carrot-nav-hud {
     --nav-top: 52px;
   }
 }
 
-@media (orientation: portrait) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .carrot-nav-hud {
     display: none !important;
   }
diff --git a/openpilot/selfdrive/carrot/web/css/layout_tokens.css b/openpilot/selfdrive/carrot/web/css/layout_tokens.css
index 1dc0e8dc955..21a16e874da 100644
--- a/openpilot/selfdrive/carrot/web/css/layout_tokens.css
+++ b/openpilot/selfdrive/carrot/web/css/layout_tokens.css
@@ -39,7 +39,9 @@
   }
 }
 
-@media (orientation: landscape) {
+/* Wide layout — offset page content for the left nav rail. Must track the
+   rail gate in responsive.css / viewport.js exactly. */
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   :root {
     --page-shell-margin-left: var(--app-nav-left-gap, var(--nav-rail-width));
     --page-shell-margin-right: 0px;
diff --git a/openpilot/selfdrive/carrot/web/css/pages/drive.css b/openpilot/selfdrive/carrot/web/css/pages/drive.css
index 215654e184d..ba1520f2f9c 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/drive.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/drive.css
@@ -1,4 +1,4 @@
-/* ── WebRTC Video ─────────────────────────────────────────── */
+/* ?€?€ WebRTC Video ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
 .rtcVideo {
   width: 100%;
   border-radius: var(--r-md);
@@ -285,6 +285,10 @@ body[data-page="carrot"] #driveHudCard {
   transition: opacity 0.3s ease;
 }
 
+.vision-start-overlay[hidden] {
+  display: none !important;
+}
+
 .vision-start-overlay__message {
   position: absolute;
   top: 50%;
@@ -470,7 +474,7 @@ body[data-page="carrot"] #driveHudCard {
 .carrot-stage__loadingActions {
   width: 100%;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 8px;
   margin-top: 2px;
 }
@@ -483,12 +487,6 @@ body[data-page="carrot"] #driveHudCard {
   background: color-mix(in srgb, var(--md-surface-cont-h) 84%, transparent);
 }
 
-.carrot-stage__loadingAction--primary {
-  border-color: color-mix(in srgb, var(--md-primary) 58%, var(--md-outline-var));
-  background: color-mix(in srgb, var(--md-primary) 18%, var(--md-surface-cont-h));
-  color: var(--md-primary);
-}
-
 .carrot-stage__loadingAction:disabled {
   opacity: 0.5;
   cursor: wait;
@@ -547,7 +545,7 @@ body[data-page="carrot"] .carrot-hud-dock {
   overflow: hidden;
 }
 
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .page--drive {
     display: block;
     height: var(--app-vv-height, 100dvh);
@@ -680,7 +678,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--overlay .hudWrap {
   background: transparent;
 }
 
-/* Zoom-bias controls — bottom edge of the map dock. They nudge the global
+/* Zoom-bias controls ??bottom edge of the map dock. They nudge the global
    zoom offset (added on top of the automatic speed-based zoom) so each
    device/resolution can be tuned. */
 .carrot-map-zoom {
@@ -773,7 +771,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--overlay .hudWrap {
   display: none !important;
 }
 
-@media (orientation: portrait) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .carrot-map-dock {
     display: none !important;
   }
@@ -817,7 +815,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--loading {
   background: transparent;
 }
 
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .rtcVideo {
     max-height: 40vh;
     width: auto;
@@ -879,7 +877,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--loading {
   z-index: 2;
 }
 
-@media (orientation: portrait) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .carrot-rtc-perf-summary {
     display: none !important;
   }
diff --git a/openpilot/selfdrive/carrot/web/css/pages/logs.css b/openpilot/selfdrive/carrot/web/css/pages/logs.css
index 0a9e6ffa3c4..76253a0098d 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/logs.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/logs.css
@@ -1,12 +1,12 @@
-/* ── Logs / Dashcam ───────────────────────────────────────── */
+/* ?€?€ Logs / Dashcam ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
 .page--logs {
-  height: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height));
+  height: calc(var(--app-vv-height, 100dvh) - var(--app-nav-bottom-gap, var(--nav-bar-height)));
   min-height: 0;
   background: var(--md-surface);
   overflow: hidden;
 }
 
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .page--logs {
     height: var(--page-content-height, calc(var(--app-vv-height, 100dvh) - 24px));
   }
@@ -186,7 +186,7 @@
   overscroll-behavior: contain;
   overflow-anchor: none;
   scrollbar-gutter: stable;
-  padding: 6px var(--logs-content-inline) calc(var(--nav-bar-height) + 16px + env(safe-area-inset-bottom, 0px));
+  padding: 6px var(--logs-content-inline) calc(var(--app-nav-bottom-gap, var(--nav-bar-height)) + 16px + env(safe-area-inset-bottom, 0px));
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -427,7 +427,7 @@
 .dashcam-segment-loader {
   flex: 0 0 auto;
   width: 100%;
-  /* Fixed height in both states — prevents layout shift / "shake" when the
+  /* Fixed height in both states ??prevents layout shift / "shake" when the
      loader toggles on near the bottom of the list. */
   height: 22px;
   position: relative;
@@ -584,7 +584,7 @@
   transform: translateZ(0);
 }
 
-/* Group (route) overflow menu — range select / sort.
+/* Group (route) overflow menu ??range select / sort.
    Uses the shared boxed control shape in both portrait and landscape.
    Pushed to the right end in portrait. */
 .dashcam-group-menu-btn {
@@ -840,7 +840,7 @@
   opacity: 0.62;
 }
 
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .dashcam-share-card {
     gap: 8px;
   }
@@ -1117,7 +1117,7 @@
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
-  padding: 10px var(--logs-content-inline) calc(var(--nav-bar-height) + 16px + env(safe-area-inset-bottom, 0px));
+  padding: 10px var(--logs-content-inline) calc(var(--app-nav-bottom-gap, var(--nav-bar-height)) + 16px + env(safe-area-inset-bottom, 0px));
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -1285,7 +1285,7 @@
   }
 }
 
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .dashcam-route-card {
     display: grid;
     grid-template-columns: minmax(230px, 32%) minmax(0, 1fr);
@@ -1420,7 +1420,7 @@
   }
 }
 
-@media (orientation: landscape) and (max-height: 620px) {
+@media (max-height: 620px) and (min-aspect-ratio: 13/10), (max-height: 620px) and (horizontal-viewport-segments: 2), (max-height: 620px) and (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) and (max-height: 620px) {
   .logs-tabbar {
     padding-top: 6px;
     padding-bottom: 4px;
diff --git a/openpilot/selfdrive/carrot/web/css/pages/settings/device.css b/openpilot/selfdrive/carrot/web/css/pages/settings/device.css
index f27e0d50f3f..60c70a29bea 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/settings/device.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/settings/device.css
@@ -1,4 +1,4 @@
-.app-dialog--settings-diff .app-dialog__sheet {
+.app-dialog--settings-diff .app-dialog__sheet {
   width: min(calc(100vw - 24px), 520px);
   max-height: min(calc(100dvh - 24px), 680px);
   overflow: hidden;
@@ -27,10 +27,10 @@
   white-space: nowrap;
 }
 
-/* setting-content-enter(opacity 0→1 + translateY 4px→0) 제거 —
-   단계 전환이 끝나며(전환 중 `animation:none` 억제가 풀릴 때) 이 애니메이션이 재생돼
-   콘텐츠가 한 번 페이드(깜박)+4px 세로 점프(하단 위아래 흔들)하던 직접 원인이었다.
-   좌우 슬라이드가 이미 화면 진입을 표현하므로 별도 콘텐츠 진입 애니메이션은 불필요하다. */
+/* setting-content-enter(opacity 0?? + translateY 4px??) ?쒓굅 ??
+   ?④퀎 ?꾪솚???앸굹硫??꾪솚 以?`animation:none` ?듭젣媛€ ?€由??? ???좊땲硫붿씠?섏씠 ?ъ깮??
+   肄섑뀗痢좉? ??踰??섏씠??源쒕컯)+4px ?몃줈 ?먰봽(?섎떒 ?꾩븘???붾뱾)?섎뜕 吏곸젒 ?먯씤?댁뿀??
+   醫뚯슦 ?щ씪?대뱶媛€ ?대? ?붾㈃ 吏꾩엯???쒗쁽?섎?濡?蹂꾨룄 肄섑뀗痢?吏꾩엯 ?좊땲硫붿씠?섏? 遺덊븘?뷀븯?? */
 
 .setting-search-result {
   width: 100%;
@@ -112,7 +112,7 @@
   pointer-events: none;
 }
 
-@media (min-width: 769px) {
+@media (min-width: 769px) and (min-aspect-ratio: 13/10), (min-width: 769px) and (horizontal-viewport-segments: 2), (min-width: 769px) and (vertical-viewport-segments: 2), (min-width: 769px) and (min-height: 650px) {
   .setting-search-panel {
     --setting-search-form-width: clamp(360px, 34vw, 540px);
     --setting-search-results-width: min(64vw, 820px);
@@ -123,7 +123,7 @@
   }
 }
 
-@media (max-width: 640px) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page--setting .settingTop {
     flex-direction: column;
     align-items: stretch;
@@ -152,13 +152,16 @@
 }
 
 /* Portrait at ANY width (phone / foldable / tablet / wide window): the
-   group↔items slide in runSettingScreenSlide() assumes both screens are
+   group?봧tems slide in runSettingScreenSlide() assumes both screens are
    stacked as position:absolute; inset:0 inside the host so the transition is
-   pure transform. That overlap must exist for every portrait width — not just
-   ≤640px — otherwise the screens fall back to normal flow and the submenu
+   pure transform. That overlap must exist for every portrait width ??not just
+   ??40px ??otherwise the screens fall back to normal flow and the submenu
    appears to slide in vertically / only after the slide finishes. Landscape
-   has its own absolute-overlap block below, so the two together leave no gap. */
-@media (orientation: portrait) {
+   has its own absolute-overlap block below, so the two together leave no gap.
+   Narrow layout (aspect-ratio < 13/10) covers portrait phones AND near-square
+   foldables ??the complement of the wide (>= 13/10) split block below, so the
+   two stay mutually exclusive and exhaustive (no square-aspect gap). */
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page--setting #settingScreenItems {
     padding-top: 0;
   }
@@ -194,9 +197,9 @@
     display: grid;
   }
 
-  /* ── 세로(phone): 설정을 뷰포트 고정 높이로, 두 화면을 absolute inset:0 로 '항상' 겹쳐
-     각자 내부 스크롤시킨다 → 단계 전환이 순수 transform(레이아웃 변화 0)이라 끝에
-     흔들림/깜박임이 구조적으로 생기지 않는다. (가로 split 모드와 동일 원리) ── */
+  /* ?€?€ ?몃줈(phone): ?ㅼ젙??酉고룷??怨좎젙 ?믪씠濡? ???붾㈃??absolute inset:0 濡?'??긽' 寃뱀퀜
+     媛곸옄 ?대? ?ㅽ겕濡ㅼ떆?⑤떎 ???④퀎 ?꾪솚???쒖닔 transform(?덉씠?꾩썐 蹂€??0)?대씪 ?앹뿉
+     ?붾뱾由?源쒕컯?꾩씠 援ъ“?곸쑝濡??앷린吏€ ?딅뒗?? (媛€濡?split 紐⑤뱶?€ ?숈씪 ?먮━) ?€?€ */
   .page.page--setting {
     display: flex;
     flex-direction: column;
@@ -229,8 +232,8 @@
     will-change: transform;
   }
 
-  /* 최상위 그룹 화면은 탭과 첫 버튼을 선명하게 유지한다.
-     스크롤 가장자리 페이드는 하위 설정 화면에만 적용한다. */
+  /* 理쒖긽??洹몃９ ?붾㈃?€ ??낵 泥?踰꾪듉???좊챸?섍쾶 ?좎??쒕떎.
+     ?ㅽ겕濡?媛€?μ옄由??섏씠?쒕뒗 ?섏쐞 ?ㅼ젙 ?붾㈃?먮쭔 ?곸슜?쒕떎. */
   .page.page--setting > #settingScreenHost > #settingScreenGroups {
     -webkit-mask-image: none;
             mask-image: none;
@@ -251,7 +254,10 @@
   }
 }
 
-@media (orientation: landscape) {
+/* Wide layout ??two-column split (group list | detail). Complement of the
+   narrow single-column block above; only engages at aspect-ratio >= 13/10 so
+   near-square foldables don't get the cramped split. */
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .page.page--setting {
     --setting-landscape-left-width: clamp(208px, 28vw, 260px);
     --setting-landscape-gap: 12px;
@@ -306,7 +312,7 @@
             mask-image: none;
   }
 
-  /* 가로모드도 하위 설정 화면에만 스크롤 가장자리 페이드를 유지한다. */
+  /* 媛€濡쒕え?쒕룄 ?섏쐞 ?ㅼ젙 ?붾㈃?먮쭔 ?ㅽ겕濡?媛€?μ옄由??섏씠?쒕? ?좎??쒕떎. */
   .page.page--setting > #settingScreenHost > #settingScreenItems {
     -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 6px), transparent 100%);
             mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 6px), transparent 100%);
@@ -439,7 +445,7 @@
   /* Flow the menu inside the page-anchored absolute layer instead of leaving it
      viewport-fixed. A position:fixed element re-anchors to the page's transform
      during page transitions (the page briefly gets will-change/transform), so
-     when the transition ends the FAB snaps by the nav-rail width — that is the
+     when the transition ends the FAB snaps by the nav-rail width ??that is the
      "jumps to another spot then returns" jitter. Page-relative flow stays put. */
   .page.page--setting > .page-fab-layer--setting .setting-fab-menu {
     position: relative;
@@ -503,7 +509,7 @@
   }
 }
 
-@media (orientation: landscape) and (max-width: 760px) {
+@media (max-width: 760px) and (min-aspect-ratio: 13/10), (max-width: 760px) and (horizontal-viewport-segments: 2), (max-width: 760px) and (vertical-viewport-segments: 2), (min-width: 640px) and (max-width: 760px) and (min-height: 650px) {
   .page.page--setting {
     --setting-landscape-left-width: clamp(184px, 27vw, 220px);
   }
@@ -536,7 +542,7 @@
 }
 
 /* Long descriptions / range legends with no break opportunities (e.g. English
-   "0:stock,1,2:REC,..." — unlike CJK, Latin runs without spaces don't break)
+   "0:stock,1,2:REC,..." ??unlike CJK, Latin runs without spaces don't break)
    must wrap instead of forcing the row wider than the viewport, which would
    push the right-side control off-screen. CJK wraps per-character on its own,
    which is why this only surfaced in English. The landscape split layout
@@ -873,8 +879,8 @@
   color: var(--md-on-surface);
 }
 
-/* Footer actions row — holds the optional unit-cycle (배율) and the
-   reset-to-default (기본값) button, right-aligned under the item. */
+/* Footer actions row ??holds the optional unit-cycle (諛곗쑉) and the
+   reset-to-default (湲곕낯媛? button, right-aligned under the item. */
 .page--setting #settingScreenItems .setting--has-actions {
   padding-bottom: var(--sp-md);
 }
@@ -1336,22 +1342,22 @@
   text-align: left;
 }
 
-@media (max-width: 640px) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page--setting #settingScreenItems .ctrl {
     justify-content: center;
   }
 }
 
-@media (orientation: landscape) and (max-width: 760px) {
+@media (max-width: 760px) and (min-aspect-ratio: 13/10), (max-width: 760px) and (horizontal-viewport-segments: 2), (max-width: 760px) and (vertical-viewport-segments: 2), (min-width: 640px) and (max-width: 760px) and (min-height: 650px) {
   .page--setting #settingScreenItems .ctrl {
     justify-content: start;
   }
 }
 
-@media (max-width: 640px) and (orientation: portrait) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page--setting #settingScreenItems > .row-between.mb-sm {
     /* min-height was 48px while the row content (42px back-icon + title) is
-       shorter, and align-items:end pushed the ~6px slack ABOVE the title —
+       shorter, and align-items:end pushed the ~6px slack ABOVE the title ??
        the thin band the user saw. Collapse to content height so the title
        starts at the top edge, like the groups screen. */
     min-height: 0;
@@ -1637,7 +1643,7 @@
   overflow: hidden;
 }
 
-@media (max-width: 640px) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page--setting #deviceItems .device-ssh-control {
     grid-column: 1 / -1;
     width: 100%;
@@ -1900,12 +1906,12 @@
 /* Portrait (phone): anchor the settings FAB as page-relative ABSOLUTE flow,
    the same approach landscape already uses. As position:fixed the FAB was
    captured by .page-active's transform (an ancestor transform is the
-   containing block for fixed children), so it followed the page geometry —
-   --app-vv-height settling on load, page transitions — and drifted up/down.
+   containing block for fixed children), so it followed the page geometry ??
+   --app-vv-height settling on load, page transitions ??and drifted up/down.
    As a normal absolute child of the page it simply sits at the page's
    bottom-right and stays put. The page already excludes the nav bar + safe
    area from its height, so the offset here is just the small visual gap. */
-@media (max-width: 640px) and (orientation: portrait) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page.page--setting > .page-fab-layer--setting {
     position: absolute;
     top: auto;
diff --git a/openpilot/selfdrive/carrot/web/css/pages/settings/panels.css b/openpilot/selfdrive/carrot/web/css/pages/settings/panels.css
index 1d1cd084635..e4ffdc8dc7c 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/settings/panels.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/settings/panels.css
@@ -18,7 +18,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 14px;
-  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--sp-lg) calc(var(--app-nav-bottom-gap, var(--nav-bar-height)) + 18px + env(safe-area-inset-bottom, 0px));
+  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--sp-lg) calc(var(--app-nav-bottom-gap, var(--nav-bar-height)) + 18px + var(--kb-inset) + env(safe-area-inset-bottom, 0px));
   pointer-events: none;
 }
 
diff --git a/openpilot/selfdrive/carrot/web/css/pages/settings/youtube_live.css b/openpilot/selfdrive/carrot/web/css/pages/settings/youtube_live.css
index 104bf0ef201..5cda71ba69e 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/settings/youtube_live.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/settings/youtube_live.css
@@ -1,4 +1,4 @@
-.youtube-live-section {
+.youtube-live-section {
   display: grid;
   gap: var(--sp-md);
   margin: 0;
@@ -91,7 +91,7 @@
   box-shadow: none;
 }
 
-@media (max-width: 430px) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .youtube-live-metrics {
     grid-template-columns: 1fr;
   }
diff --git a/openpilot/selfdrive/carrot/web/css/pages/terminal.css b/openpilot/selfdrive/carrot/web/css/pages/terminal.css
index 781f1a653a1..e298946eb79 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/terminal.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/terminal.css
@@ -1,4 +1,4 @@
-.page--terminal {
+.page--terminal {
   --terminal-bottom-gap: calc(var(--nav-bar-height) + env(safe-area-inset-bottom, 0px));
   --terminal-form-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
   --terminal-inline: max(var(--sp-lg), calc((100vw - var(--content-max-width)) / 2));
@@ -303,7 +303,7 @@
   }
 }
 
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   body[data-page="terminal"] .app-toast-host {
     left: var(--terminal-toast-left, calc(var(--nav-rail-width) + 20px));
     right: auto;
diff --git a/openpilot/selfdrive/carrot/web/css/pages/tools/main.css b/openpilot/selfdrive/carrot/web/css/pages/tools/main.css
index 2f27db66057..201ec59e3fd 100644
--- a/openpilot/selfdrive/carrot/web/css/pages/tools/main.css
+++ b/openpilot/selfdrive/carrot/web/css/pages/tools/main.css
@@ -1,4 +1,4 @@
-@media (max-width: 640px), (orientation: portrait) {
+@media (max-width: 640px), (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .app-dialog--web-settings .app-dialog__sheet {
     --web-settings-sheet-width: 420px;
     --web-settings-sheet-height: clamp(440px, 72dvh, 560px);
@@ -76,7 +76,7 @@
   }
 }
 
-@media (max-height: 430px) and (orientation: landscape) {
+@media (max-height: 430px) and (min-aspect-ratio: 13/10) {
   .app-dialog--web-settings .app-dialog__sheet {
     --web-settings-sheet-height: calc(100dvh - 20px);
     --web-settings-row-min: 56px;
@@ -167,7 +167,7 @@
 
 /* One-shot fold (same pattern as the settings profile section). JS adds the
    motion class then removes it after the run, so the finish lands on the
-   static open/closed state instead of a lingering transition — that lingering
+   static open/closed state instead of a lingering transition ??that lingering
    transition was what made the finish look off with taller (2-line) buttons. */
 .tools-group.is-collapsing > .tools-group__body {
   animation: tools-group-fold var(--motion-medium) var(--ease-emphasized) both;
@@ -842,7 +842,7 @@
 }
 
 /* Tools notifications: landscape keeps commands left and the log dock right. */
-@media (orientation: landscape) {
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   .page--tools {
     --tools-detail-duration: 340ms;
     --tools-log-scroll-gap: 10px;
@@ -1107,7 +1107,7 @@
 }
 
 /* Tools notifications: portrait becomes a page-contained notification center. */
-@media (orientation: portrait) {
+@media (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px) {
   .page--tools {
     --tools-detail-duration: 360ms;
     --tools-log-scroll-gap: 6px;
diff --git a/openpilot/selfdrive/carrot/web/css/responsive.css b/openpilot/selfdrive/carrot/web/css/responsive.css
index efe7d055522..d4502d39092 100644
--- a/openpilot/selfdrive/carrot/web/css/responsive.css
+++ b/openpilot/selfdrive/carrot/web/css/responsive.css
@@ -32,7 +32,7 @@
     margin-left: 0;
   }
 
-  .page {
+  .page:not(.page--full):not(.page--setting) {
     padding-bottom: var(--page-bottom-gutter, calc(var(--nav-bar-height-desktop) + 22px + env(safe-area-inset-bottom, 0px)));
     min-height: var(--page-min-height, calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height-desktop) - env(safe-area-inset-bottom, 0px)));
   }
@@ -71,7 +71,9 @@
 
 }
 
-@media (orientation: landscape) {
+/* Wide layout: left nav rail. Tracks viewport.js LAYOUT_WIDE_QUERY:
+   landscape-ish viewports, fold/viewport segments, and large fold/tablet panels. */
+@media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
   :root {
     --nav-bar-height: 0px;
     --nav-rail-width: 92px;
diff --git a/openpilot/selfdrive/carrot/web/css/tokens.css b/openpilot/selfdrive/carrot/web/css/tokens.css
index 7187fb9daa9..74abcd18e85 100644
--- a/openpilot/selfdrive/carrot/web/css/tokens.css
+++ b/openpilot/selfdrive/carrot/web/css/tokens.css
@@ -105,6 +105,17 @@
   --dialog-sheet-max-height: calc(100dvh - var(--sp-lg) * 2);
   --dialog-sheet-mobile-max-height: min(88dvh, 720px);
 
+  /* ── On-screen keyboard ───────────────────────────────────────
+     --kb-inset: exact keyboard height (INCLUDING the Samsung suggestion/autofill
+     toolbar) on Chromium via the VirtualKeyboard API (viewport.js opts in);
+     resolves to 0 on iOS Safari / Firefox / desktop, where the visualViewport
+     path handles the keyboard instead.
+     --kb-gap: the breathing space every keyboard-anchored surface keeps above
+     the keyboard. One source of truth so dialogs, terminal and the settings
+     search panel are consistent. */
+  --kb-inset: env(keyboard-inset-height, 0px);
+  --kb-gap: 36px;
+
   /* ── Popup surface ────────────────────────────────────────────
      One surface for every floating popup (dialog sheet, dropdown
      menu, popover) so they share background / border / shadow /
diff --git a/openpilot/selfdrive/carrot/web/index.html b/openpilot/selfdrive/carrot/web/index.html
index 6f6404c54f4..37816d76825 100644
--- a/openpilot/selfdrive/carrot/web/index.html
+++ b/openpilot/selfdrive/carrot/web/index.html
@@ -3,6 +3,12 @@
 <head>
   <meta charset="utf-8" />
   <meta name="google" content="notranslate" />
+  <!-- Keep the default interactive-widget=resizes-visual: the on-screen keyboard
+       must shrink only the *visual* viewport, not the layout viewport. Dialogs
+       anchor to --app-vv-* (visualViewport) so they stay keyboard-safe, while the
+       layout-viewport aspect-ratio (which drives rail/split via 13/10) stays
+       stable — otherwise opening the keyboard on a near-square device would push
+       aspect-ratio past 13/10 and flip the whole app to the rail layout mid-typing. -->
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
   <title>CarrotPilot</title>
   <link rel="icon" type="image/png" href="/assets/img_chffr_wheel.png?v=2604-01" />
@@ -11,9 +17,12 @@
       var primaryPages = { carrot: 1, setting: 1, tools: 1, logs: 1, terminal: 1 };
       var startPage = "carrot";
       try {
+        var miniHudRequested = /(?:^|[?&])mini_hud=(?:auto|force|1)(?:&|$)/.test(window.location.search || "");
         var webSettings = window.__CARROT_BOOTSTRAP__ && window.__CARROT_BOOTSTRAP__.webSettings;
         var setting = (webSettings && webSettings.start_page) || "last";
-        if (setting === "last") {
+        if (miniHudRequested) {
+          startPage = "carrot";
+        } else if (setting === "last") {
           var lastPage = localStorage.getItem("carrot_web_last_page");
           startPage = primaryPages[lastPage] ? lastPage : "carrot";
         } else {
@@ -39,6 +48,23 @@
         s.setProperty("--app-vv-height", h + "px");
         s.setProperty("--app-vv-width", w + "px");
         s.setProperty("--app-vv-top", t + "px");
+        // Mirror the coarse layout mode before first paint so CSS attribute /
+        // container hooks (and JS read on early pages) match viewport.js.
+        var lw = window.innerWidth || w;
+        var lh = window.innerHeight || h;
+        var ratio = lh > 0 ? lw / lh : 1;
+        var segmented = false;
+        try {
+          segmented =
+            (window.viewport && Array.isArray(window.viewport.segments) && window.viewport.segments.length > 1) ||
+            (window.matchMedia && (
+              window.matchMedia("(horizontal-viewport-segments: 2)").matches ||
+              window.matchMedia("(vertical-viewport-segments: 2)").matches
+            ));
+        } catch (e) {}
+        var wide = ratio >= 1.3 || segmented || (lw >= 640 && lh >= 650);
+        document.documentElement.dataset.layout =
+          wide ? "wide" : (ratio >= 0.92 ? "square" : "tall");
       } catch (e) {}
     })();
   </script>
@@ -67,7 +93,7 @@
       display: block !important;
     }
 
-    @media (orientation: landscape) {
+    @media (min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px) {
       html[data-carrot-start-page="tools"]:not([data-carrot-bootstrapped]) #pageTools {
         display: grid !important;
       }
@@ -89,26 +115,27 @@
       background: color-mix(in srgb, var(--md-primary) 14%, transparent) !important;
     }
   </style>
-  <link rel="stylesheet" href="/css/tokens.css?v=2607-01" />
-  <link rel="stylesheet" href="/css/layout_tokens.css?v=2605-07" />
+  <link rel="stylesheet" href="/css/tokens.css?v=2607-45" />
+  <link rel="stylesheet" href="/css/layout_tokens.css?v=2607-42" />
   <link rel="stylesheet" href="/css/hud_card.css?v=2605-03" />
-  <link rel="stylesheet" href="/css/base.css?v=2605-10" />
+  <link rel="stylesheet" href="/css/base.css?v=2607-40" />
   <link rel="stylesheet" href="/css/layout.css?v=2605-08" />
-  <link rel="stylesheet" href="/css/components.css?v=2607-03" />
+  <link rel="stylesheet" href="/css/components.css?v=2607-45" />
   <link rel="stylesheet" href="/css/components/nav_status_badges.css?v=2607-04" />
-  <link rel="stylesheet" href="/css/pages/logs.css?v=2607-01" />
-  <link rel="stylesheet" href="/css/pages/terminal.css?v=2606-01" />
+  <link rel="stylesheet" href="/css/pages/logs.css?v=2607-43" />
+  <link rel="stylesheet" href="/css/pages/terminal.css?v=2607-42" />
   <link rel="stylesheet" href="/css/pages/settings/base.css?v=2606-21" />
-  <link rel="stylesheet" href="/css/pages/settings/panels.css?v=2606-12" />
-  <link rel="stylesheet" href="/css/pages/settings/device.css?v=2606-42" />
-  <link rel="stylesheet" href="/css/pages/settings/youtube_live.css?v=2607-20" />
+  <link rel="stylesheet" href="/css/pages/settings/panels.css?v=2607-44" />
+  <link rel="stylesheet" href="/css/pages/settings/device.css?v=2607-50" />
+  <link rel="stylesheet" href="/css/pages/settings/youtube_live.css?v=2607-23" />
   <link rel="stylesheet" href="/css/pages/settings/token_card.css?v=2607-08" />
   <link rel="stylesheet" href="/css/pages/tools/base.css?v=2605-43" />
   <link rel="stylesheet" href="/css/pages/tools/qr.css?v=2605-40" />
-  <link rel="stylesheet" href="/css/pages/tools/main.css?v=2605-53" />
-  <link rel="stylesheet" href="/css/pages/drive.css?v=2606-05" />
-  <link rel="stylesheet" href="/css/components/nav_hud.css?v=2605-26" />
-  <link rel="stylesheet" href="/css/responsive.css?v=2605-10" />
+  <link rel="stylesheet" href="/css/pages/tools/main.css?v=2607-42" />
+  <link rel="stylesheet" href="/css/pages/drive.css?v=2607-43" />
+  <link rel="stylesheet" href="/css/components/nav_hud.css?v=2607-42" />
+  <link rel="stylesheet" href="/css/components/mini_hud.css?v=2607-06" />
+  <link rel="stylesheet" href="/css/responsive.css?v=2607-44" />
   <link rel="stylesheet" href="/css/vendor/plyr.css?v=3.7.8" />
 </head>
 
@@ -491,7 +518,6 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
             <div id="carrotStageLoadingText" class="carrot-stage__loadingText"></div>
             <div id="carrotStageLoadingDetail" class="carrot-stage__loadingDetail"></div>
             <div class="carrot-stage__loadingActions" role="group" aria-label="Vision connection actions">
-              <button id="btnVisionReconnect" class="smallBtn carrot-stage__loadingAction carrot-stage__loadingAction--primary" type="button">다시 연결</button>
               <button id="btnVisionStop" class="smallBtn carrot-stage__loadingAction" type="button">중지</button>
             </div>
           </div>
@@ -512,6 +538,47 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
     </div>
   </div>
 
+  <section id="carrotMiniHud" class="carrot-mini-hud" hidden aria-label="Carrot compact driving HUD">
+    <div class="carrot-mini-hud__top">
+      <div class="carrot-mini-hud__top-cell">
+        <span data-mini-hud-cpu>CPU:--°</span>
+      </div>
+      <div class="carrot-mini-hud__top-cell">
+        <span data-mini-hud-source>STOCK</span>
+      </div>
+    </div>
+
+    <div class="carrot-mini-hud__main">
+      <div class="carrot-mini-hud__limit" data-mini-hud-limit-zone>
+        <div class="carrot-mini-hud__limit-sign">
+          <span data-mini-hud-limit>--</span>
+          <small data-mini-hud-limit-label hidden></small>
+        </div>
+        <div class="carrot-mini-hud__limit-badge" data-mini-hud-limit-badge hidden></div>
+      </div>
+
+      <div class="carrot-mini-hud__alert" data-mini-hud-alert-zone>
+        <span data-mini-hud-countdown></span>
+        <span data-mini-hud-distance></span>
+        <strong data-mini-hud-alert></strong>
+      </div>
+
+      <div class="carrot-mini-hud__stock" data-mini-hud-stock-zone hidden>
+        <div class="carrot-mini-hud__drive-mode" data-mini-hud-drive-kind="normal">
+          <span data-mini-hud-drive-mode>NORMAL</span>
+        </div>
+        <div class="carrot-mini-hud__gear" aria-label="Current gear step">
+          <small>D</small><strong data-mini-hud-gear>--</strong>
+        </div>
+      </div>
+    </div>
+
+    <div class="carrot-mini-hud__speed-row">
+      <div class="carrot-mini-hud__speed"><span data-mini-hud-speed>--</span></div>
+      <div class="carrot-mini-hud__set-speed"><span data-mini-hud-set-speed>--</span></div>
+    </div>
+  </section>
+
   <div id="driveHudCard">
     <div id="carrotRtcPerfHud" class="carrot-rtc-perf" hidden>
       <section id="carrotRtcPerfSummary" class="carrot-rtc-perf-summary" data-tone="offline" hidden aria-label="Carrot Vision live diagnostic summary">
@@ -716,49 +783,52 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/translations/ko.js?v=2607-30"></script>
   <script src="/js/translations/en.js?v=2607-30"></script>
   <script src="/js/translations/zh.js?v=2607-30"></script>
-  <script src="/js/realtime/hud_card.js?v=2604-05"></script>
+  <script src="/js/realtime/hud_card.js?v=2607-42"></script>
   <script src="/js/shared/constants.js?v=2604-72"></script>
   <script src="/js/shared/dom.js?v=2607-01"></script>
   <script src="/js/shared/utils.js?v=2604-71"></script>
-  <script src="/js/shared/i18n.js?v=2606-02"></script>
+  <script src="/js/shared/i18n.js?v=2606-03"></script>
   <script src="/js/shared/api.js?v=2604-73"></script>
   <script src="/js/shared/setting_diff.js?v=2605-01"></script>
   <script src="/js/shared/activity.js?v=2604-04"></script>
   <script src="/js/shared/ui/focus_trap.js?v=2605-15"></script>
-  <script src="/js/shared/ui/dialog.js?v=2607-03"></script>
+  <script src="/js/shared/ui/dialog.js?v=2607-44"></script>
   <script src="/js/shared/ui/setting_form.js?v=2607-03"></script>
-  <script src="/js/shared/ui/viewport.js?v=2604-71"></script>
+  <script src="/js/shared/ui/viewport.js?v=2607-47"></script>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
-  <script src="/js/shared/ui/navigation.js?v=2606-19"></script>
+  <script src="/js/shared/ui/navigation.js?v=2607-42"></script>
   <script src="/js/pages/car.js?v=2607-01"></script>
   <script src="/js/pages/setting_youtube_live.js?v=2607-31"></script>
   <script src="/js/pages/setting_mapbox_tokens.js?v=2607-06"></script>
   <script src="/js/shared/ui/nav_status_badges.js?v=2607-01"></script>
-  <script src="/js/pages/setting.js?v=2607-15"></script>
+  <script src="/js/pages/setting.js?v=2607-49"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-06"></script>
   <script src="/js/pages/setting_device_render.js?v=2607-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
   <script src="/js/pages/setting_device_actions.js?v=2607-02"></script>
   <script src="/js/pages/setting_device.js?v=2607-02"></script>
   <script src="/js/pages/tools_web_settings.js?v=2605-10"></script>
-  <script src="/js/pages/tools_notifications.js?v=2605-30"></script>
-  <script src="/js/pages/tools.js?v=2605-19"></script>
+  <script src="/js/pages/tools_notifications.js?v=2607-42"></script>
+  <script src="/js/pages/tools.js?v=2607-42"></script>
   <script src="/js/pages/tools_settings_qr.js?v=2605-11"></script>
   <script src="/js/pages/branch.js?v=2604-82"></script>
   <script src="/js/pages/logs/shared.js?v=2607-01"></script>
   <script src="/js/pages/logs/dashcam.js?v=2607-02"></script>
   <script src="/js/pages/logs/screenrecord.js?v=2605-15"></script>
-  <script src="/js/pages/terminal.js?v=2604-73"></script>
+  <script src="/js/pages/terminal.js?v=2607-44"></script>
   <script src="/js/realtime/raw_capnp.js?v=2604-05"></script>
+  <script src="/js/realtime/mini_hud_model.js?v=2607-04"></script>
+  <script src="/js/realtime/mini_hud_mode.js?v=2607-10"></script>
+  <script src="/js/realtime/mini_hud.js?v=2607-06"></script>
   <script src="/js/realtime/vision_state.js?v=2605-01"></script>
   <script src="/js/realtime/vision_rtc.js?v=2606-06"></script>
-  <script src="/js/realtime/vision_raw.js?v=2605-01"></script>
-  <script src="/js/realtime/app_realtime.js?v=2606-05"></script>
+  <script src="/js/realtime/vision_raw.js?v=2607-04"></script>
+  <script src="/js/realtime/app_realtime.js?v=2607-44"></script>
   <script src="/js/realtime/vision_diag.js?v=2606-07"></script>
-  <script src="/js/realtime/carrot_map.js?v=2606-02"></script>
-  <script src="/js/realtime/nav_hud.js?v=2605-17"></script>
+  <script src="/js/realtime/carrot_map.js?v=2607-42"></script>
+  <script src="/js/realtime/nav_hud.js?v=2607-42"></script>
   <script src="/js/pages/vision_background.js?v=2605-01"></script>
-  <script src="/js/realtime/home_drive.js?v=2606-05"></script>
+  <script src="/js/realtime/home_drive.js?v=2607-42"></script>
   <script src="/js/app.js?v=2606-11"></script>
 </body>
 </html>
diff --git a/openpilot/selfdrive/carrot/web/js/pages/setting.js b/openpilot/selfdrive/carrot/web/js/pages/setting.js
index 31add053714..c5a7fbafef4 100644
--- a/openpilot/selfdrive/carrot/web/js/pages/setting.js
+++ b/openpilot/selfdrive/carrot/web/js/pages/setting.js
@@ -1330,7 +1330,11 @@ let settingFabMenuOpen = false;
 let CURRENT_SETTING_DETAIL = null;
 
 function isCompactLandscapeMode() {
-  return window.matchMedia("(orientation: landscape)").matches;
+  // Wide layout = nav rail + two-column split. Shared with the whole app via
+  // CarrotLayout so fold/large-panel detection matches CSS.
+  return window.CarrotLayout
+    ? window.CarrotLayout.isWide()
+    : window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches;
 }
 
 function getLandscapeDefaultSettingGroup() {
@@ -1907,7 +1911,8 @@ function hasSettingViewportLayoutChanged() {
 }
 
 function isPortraitInternalScrollMode() {
-  return Boolean(window.matchMedia && window.matchMedia("(max-width: 640px) and (orientation: portrait)").matches);
+  if (window.CarrotLayout?.isWide?.()) return false;
+  return Boolean(window.matchMedia && window.matchMedia("(max-width: 640px), (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px)").matches);
 }
 
 function getSettingItemsScrollContainer() {
@@ -2022,6 +2027,23 @@ function isSettingInlineControlTarget(target) {
   return Boolean(target?.closest?.(".ctrl, button, input, select, textarea, a"));
 }
 
+const SETTING_VALUE_CONTROL_HIT_OUTSET = 8;
+
+function isSettingValueControlHit(event, row = null) {
+  if (!event || typeof event.clientX !== "number" || typeof event.clientY !== "number") return false;
+  const root = row || event.target?.closest?.(".setting[data-setting-name]");
+  const ctrl = root?.querySelector?.(".ctrl--value");
+  if (!ctrl) return false;
+  const rect = ctrl.getBoundingClientRect();
+  const outset = SETTING_VALUE_CONTROL_HIT_OUTSET;
+  return (
+    event.clientX >= rect.left - outset &&
+    event.clientX <= rect.right + outset &&
+    event.clientY >= rect.top - outset &&
+    event.clientY <= rect.bottom + outset
+  );
+}
+
 async function selectSettingDetail(group, name, pushHistory = true) {
   const targetGroup = group || CURRENT_GROUP;
   const targetName = String(name || "").trim();
@@ -2845,9 +2867,7 @@ async function renderItems(group, options = {}) {
     const val = document.createElement("button");
     val.type = "button";
     val.className = compactNumeric ? "value-surface val setting-value-compact" : "value-surface val";
-    val.setAttribute("aria-label", compactNumeric
-      ? getUIText("setting_value_detail", "Open detail")
-      : getUIText("setting_value_edit", "Edit value"));
+    val.setAttribute("aria-label", getUIText("setting_value_edit", "Edit value"));
 
     let btnMinus = null;
     let btnPlus = null;
@@ -3294,10 +3314,9 @@ async function renderItems(group, options = {}) {
 
     val.onclick = (event) => {
       event.stopPropagation();
-      if (!detailMode && compactNumeric) {
-        selectSettingDetail(originGroup, name).catch(() => {});
-        return;
-      }
+      // Tapping the value opens the number-entry popup directly (both in the
+      // items list and the detail screen) — it no longer drills into the detail
+      // screen. The detail screen is still reachable by tapping the row's title.
       if (controlConfig.kind === "slider") promptSettingValue();
     };
 
@@ -3332,6 +3351,7 @@ async function renderItems(group, options = {}) {
     if (!detailMode) {
       el.onclick = (event) => {
         if (el.dataset.settingSuppressClick === "1") return;
+        if (isSettingValueControlHit(event, el)) return;
         if (isSettingInlineControlTarget(event.target)) return;
         selectSettingDetail(originGroup, name).catch(() => {});
       };
@@ -3372,14 +3392,14 @@ function bindSettingFavoriteLongPress() {
     press = null;
   }
 
-  function isIgnoredFavoritePressTarget(target) {
-    return isSettingInlineControlTarget(target);
+  function isIgnoredFavoritePressTarget(event, row) {
+    return isSettingInlineControlTarget(event.target) || isSettingValueControlHit(event, row);
   }
 
   itemsBox.addEventListener("pointerdown", (event) => {
     if (event.button !== undefined && event.button !== 0) return;
     const row = event.target.closest(".setting[data-setting-name]");
-    if (!row || !itemsBox.contains(row) || isIgnoredFavoritePressTarget(event.target)) return;
+    if (!row || !itemsBox.contains(row) || isIgnoredFavoritePressTarget(event, row)) return;
 
     clearPress();
     const startX = event.clientX;
diff --git a/openpilot/selfdrive/carrot/web/js/pages/terminal.js b/openpilot/selfdrive/carrot/web/js/pages/terminal.js
index ebe8ec6a5f9..84bd55847de 100644
--- a/openpilot/selfdrive/carrot/web/js/pages/terminal.js
+++ b/openpilot/selfdrive/carrot/web/js/pages/terminal.js
@@ -238,7 +238,14 @@ function updateTerminalViewportMetrics() {
   const layoutHeight = Math.max(320, Math.round(window.innerHeight || vv?.height || 0));
   const height = Math.max(320, Math.round(vv?.height || window.innerHeight || 0));
   const top = Math.max(0, Math.round(vv?.offsetTop || 0));
-  const keyboardInset = Math.max(0, Math.round(layoutHeight - height - top));
+  const vk = navigator.virtualKeyboard;
+  const vkActive = !!(vk && document.documentElement.dataset.vk);
+  // VK API mode: visualViewport does NOT shrink for the keyboard, so derive the
+  // occlusion (keys + Samsung suggestion toolbar) from the keyboard's own
+  // bounding rect. Otherwise fall back to the visualViewport delta.
+  const keyboardInset = vkActive
+    ? Math.round((vk.boundingRect && vk.boundingRect.height) || 0)
+    : Math.max(0, Math.round(layoutHeight - height - top));
   const keyboardOpen = !landscapeRail && keyboardInset > 120;
   const desktopBottomNav = window.matchMedia?.("(min-width: 769px)")?.matches;
   const restingBottomGap = landscapeRail
@@ -250,16 +257,24 @@ function updateTerminalViewportMetrics() {
   document.documentElement.style.setProperty("--terminal-vv-height", `${height}px`);
   document.documentElement.style.setProperty("--terminal-vv-top", `${top}px`);
   const layoutStyle = terminalPageEl?.style || document.documentElement.style;
+  // In VK mode --terminal-vv-height is the FULL height (vv doesn't shrink), so the
+  // page height must also subtract the keyboard occlusion via the bottom gap; the
+  // form's own inner margin stays a small constant. In non-VK mode vv-height is
+  // already reduced, so only the small gap is needed.
+  // Page ends at the keyboard top (VK: subtract the keyboard occlusion since the
+  // visual viewport didn't shrink; non-VK: vv already excludes it), and the input
+  // form keeps the shared --kb-gap above that — same gap the dialogs use.
+  const keyboardBottomGap = vkActive
+    ? `calc(${keyboardInset}px + env(safe-area-inset-bottom, 0px))`
+    : `env(safe-area-inset-bottom, 0px)`;
   layoutStyle.setProperty(
     "--terminal-bottom-gap",
-    keyboardOpen
-      ? `calc(6px + env(safe-area-inset-bottom, 0px))`
-      : restingBottomGap,
+    keyboardOpen ? keyboardBottomGap : restingBottomGap,
   );
   layoutStyle.setProperty(
     "--terminal-form-bottom",
     keyboardOpen
-      ? `calc(6px + env(safe-area-inset-bottom, 0px))`
+      ? `calc(var(--kb-gap) + env(safe-area-inset-bottom, 0px))`
       : restingFormBottom,
   );
   document.documentElement.classList.toggle("terminal-keyboard-open", keyboardOpen);
@@ -281,6 +296,11 @@ function bindTerminalLayoutObservers() {
     window.visualViewport.addEventListener("resize", handleLayout, { passive: true });
     window.visualViewport.addEventListener("scroll", handleLayout, { passive: true });
   }
+  // VK API mode: the keyboard show/hide fires geometrychange, not a
+  // visualViewport resize (the visual viewport no longer moves).
+  if (navigator.virtualKeyboard) {
+    navigator.virtualKeyboard.addEventListener("geometrychange", handleLayout, { passive: true });
+  }
 }
 
 function closeTerminalSocket() {
diff --git a/openpilot/selfdrive/carrot/web/js/pages/tools.js b/openpilot/selfdrive/carrot/web/js/pages/tools.js
index 33f8a2994f9..5621546f67a 100644
--- a/openpilot/selfdrive/carrot/web/js/pages/tools.js
+++ b/openpilot/selfdrive/carrot/web/js/pages/tools.js
@@ -15,7 +15,8 @@ let uiWarmupTimer = null;
 let toolsLogHistoryClosing = false;
 
 function isToolsPortraitMode() {
-  return Boolean(window.matchMedia?.("(orientation: portrait)")?.matches);
+  if (window.CarrotLayout?.isWide?.()) return false;
+  return Boolean(window.matchMedia?.("(max-width: 640px), (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px)")?.matches);
 }
 
 function pushToolsLogHistoryState() {
diff --git a/openpilot/selfdrive/carrot/web/js/pages/tools_notifications.js b/openpilot/selfdrive/carrot/web/js/pages/tools_notifications.js
index 3f716259ef9..46666ad511d 100644
--- a/openpilot/selfdrive/carrot/web/js/pages/tools_notifications.js
+++ b/openpilot/selfdrive/carrot/web/js/pages/tools_notifications.js
@@ -89,7 +89,8 @@
   }
 
   function getMode() {
-    return global.matchMedia?.("(orientation: portrait)")?.matches ? MODE.PORTRAIT : MODE.LANDSCAPE;
+    if (global.CarrotLayout?.isWide?.()) return MODE.LANDSCAPE;
+    return global.matchMedia?.("(max-width: 640px), (aspect-ratio < 13/10) and (max-width: 639px), (aspect-ratio < 13/10) and (max-height: 649px)")?.matches ? MODE.PORTRAIT : MODE.LANDSCAPE;
   }
 
   function syncHostMode(out, mode = getMode()) {
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/app_realtime.js b/openpilot/selfdrive/carrot/web/js/realtime/app_realtime.js
index 3af25bfe4f9..da17a0f792c 100644
--- a/openpilot/selfdrive/carrot/web/js/realtime/app_realtime.js
+++ b/openpilot/selfdrive/carrot/web/js/realtime/app_realtime.js
@@ -75,7 +75,7 @@ function isCarrotPageVisible() {
 }
 
 function shouldRunCarrotHudRealtime() {
-  return isCarrotPageActive();
+  return isCarrotPageActive() || Boolean(window.CarrotMiniHudMode?.isActive?.());
 }
 
 function isCarrotVisionTestActive() {
@@ -85,6 +85,7 @@ window.isCarrotVisionTestActive = isCarrotVisionTestActive;
 
 function getCarrotVisionRealtimeBlockReason() {
   if (!isCarrotPageActive() || !isCarrotVisionActive()) return "";
+  if (window.CarrotMiniHudMode?.isActive?.()) return "mini-hud";
 
   const runtimeState = window.CarrotLiveRuntimeState || CARROT_LIVE_RUNTIME_STATE;
   if (!runtimeState?.ok) return "runtime-unavailable";
@@ -116,9 +117,10 @@ function shouldRunCarrotVisionRealtime() {
 }
 
 function isLandscapeOrientation() {
+  if (window.CarrotLayout?.isWide) return window.CarrotLayout.isWide();
   if (typeof window.matchMedia === "function") {
     try {
-      return window.matchMedia("(orientation: landscape)").matches;
+      return window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches;
     } catch {}
   }
   return Number(window.innerWidth || 0) > Number(window.innerHeight || 0);
@@ -213,7 +215,7 @@ function requestCarrotVisionDefaultFullscreen(options = {}) {
 }
 
 function shouldKeepCarrotFullscreen() {
-  return document.body?.dataset?.page === "carrot" && isCarrotVisionActive();
+  return document.body?.dataset?.page === "carrot" && isCarrotVisionActive() && !window.CarrotMiniHudMode?.isActive?.();
 }
 
 async function syncCarrotFullscreenLifecycle() {
@@ -231,6 +233,10 @@ window.addEventListener("carrot:pagechange", () => {
 window.addEventListener("carrot:visionchange", () => {
   void syncCarrotFullscreenLifecycle();
 });
+window.addEventListener("carrot:minihudchange", () => {
+  void syncCarrotFullscreenLifecycle();
+  syncCarrotRealtimeLifecycle(true);
+});
 window.addEventListener("carrot:websettingschange", (event) => {
   if (event?.detail?.key !== "vision_fullscreen_default") return;
   if (isCarrotVisionDefaultFullscreenEnabled()) return;
@@ -328,9 +334,10 @@ function isKmapStreaming() {
     ? ["1", "true", "yes", "on"].includes(enabled.trim().toLowerCase())
     : Boolean(enabled);
   if (!enabledBool) return false;
+  if (window.CarrotLayout?.isWide) return window.CarrotLayout.isWide();
   if (typeof window.matchMedia === "function") {
     try {
-      if (!window.matchMedia("(orientation: landscape)").matches) return false;
+      if (!window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches) return false;
     } catch {}
   }
   return true;
@@ -526,26 +533,13 @@ async function syncCarrotVisionAvailability() {
   }
 }
 
-async function reconnectCarrotVisionRealtime(reason = "manual reconnect") {
-  if (!isCarrotVisionActive()) return;
-  console.warn("[vision] reconnect requested", reason);
-  rtcStatusSet(getUIText("reconnecting", "Reconnecting..."));
-  setCarrotVisionPhase(CARROT_VISION_PHASE.RECOVERING, {
-    reason,
-    updateRtcStatus: false,
-  });
-  rtcCaptureVideoHoldFrame();
-  stopCarrotVisionHealthWatch();
-  await rawOverlayDisconnectAll().catch(() => {});
-  await rtcDisconnect({ keepVideo: true }).catch(() => {});
-  _carrotVisionRealtimeActive = false;
-  syncCarrotRealtimeLifecycle(true);
-  startCarrotVisionHealthWatch();
-  requestCarrotVisionRender();
+function syncCarrotVisionStartOverlay() {
+  const overlay = document.getElementById("visionStartOverlay");
+  if (!overlay) return;
+  overlay.hidden = isCarrotVisionActive();
+  overlay.style.removeProperty("display");
 }
 
-window.CarrotVisionReconnect = reconnectCarrotVisionRealtime;
-
 async function stopCarrotVisionRealtime(reason = "user stop") {
   if (!isCarrotVisionActive()) return;
   console.warn("[vision] stop requested", reason);
@@ -557,8 +551,7 @@ async function stopCarrotVisionRealtime(reason = "user stop") {
   });
   syncCarrotRealtimeLifecycle(true);
   await exitCarrotFullscreen({ quiet: true }).catch(() => {});
-  const overlay = document.getElementById("visionStartOverlay");
-  if (overlay) overlay.style.removeProperty("display");
+  syncCarrotVisionStartOverlay();
   rtcStatusSet(getUIText("start_vision_hint", "Tap the start button to enable drive vision."));
   requestCarrotVisionRender({ reason });
 }
@@ -567,7 +560,7 @@ window.CarrotVisionStop = stopCarrotVisionRealtime;
 
 window.CarrotVisionStart = async function() {
   if (isCarrotVisionActive()) {
-    await reconnectCarrotVisionRealtime("start button while active");
+    syncCarrotVisionStartOverlay();
     return;
   }
   if (!CARROT_VISION_STATE.available && !(await syncCarrotVisionAvailability())) {
@@ -580,8 +573,7 @@ window.CarrotVisionStart = async function() {
     reason: "user start",
   });
   
-  const btn = document.getElementById("visionStartOverlay");
-  if (btn) btn.style.display = "none";
+  syncCarrotVisionStartOverlay();
 
   rtcStatusSet(getUIText("connecting", "Connecting..."));
   syncCarrotRealtimeLifecycle(true);
@@ -590,32 +582,25 @@ window.CarrotVisionStart = async function() {
 function rtcInitAuto() {
   const btn = document.getElementById("btnStartVision");
   if (btn) btn.onclick = window.CarrotVisionStart;
-  const reconnectButton = document.getElementById("btnVisionReconnect");
   const stopButton = document.getElementById("btnVisionStop");
   let actionBusy = false;
   const runLoadingAction = async (action) => {
     if (actionBusy) return;
     actionBusy = true;
-    if (reconnectButton) reconnectButton.disabled = true;
     if (stopButton) stopButton.disabled = true;
     try {
       await action();
     } finally {
       actionBusy = false;
-      if (reconnectButton) reconnectButton.disabled = false;
       if (stopButton) stopButton.disabled = false;
     }
   };
-  if (reconnectButton) {
-    reconnectButton.onclick = () => runLoadingAction(
-      () => reconnectCarrotVisionRealtime("loading panel reconnect"),
-    );
-  }
   if (stopButton) {
     stopButton.onclick = () => runLoadingAction(
       () => stopCarrotVisionRealtime("loading panel stop"),
     );
   }
+  syncCarrotVisionStartOverlay();
   syncCarrotVisionAvailability().catch(() => {});
   rtcBindVideoEvents();
 }
@@ -625,6 +610,9 @@ window.addEventListener("carrot:paramchange", (ev) => {
   syncCarrotVisionAvailability().catch(() => {});
 });
 
+window.addEventListener("carrot:visionchange", syncCarrotVisionStartOverlay);
+window.addEventListener("carrot:visionstatechange", syncCarrotVisionStartOverlay);
+
 window.addEventListener("carrot:pagechange", (ev) => {
   if (ev?.detail?.page !== "carrot") return;
   syncCarrotVisionAvailability().catch(() => {});
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/carrot_map.js b/openpilot/selfdrive/carrot/web/js/realtime/carrot_map.js
index 2c80dcf9854..f94e8c1056c 100644
--- a/openpilot/selfdrive/carrot/web/js/realtime/carrot_map.js
+++ b/openpilot/selfdrive/carrot/web/js/realtime/carrot_map.js
@@ -70,9 +70,10 @@
   }
 
   function isLandscape() {
+    if (window.CarrotLayout?.isWide) return window.CarrotLayout.isWide();
     if (typeof window.matchMedia === "function") {
       try {
-        return window.matchMedia("(orientation: landscape)").matches;
+        return window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches;
       } catch {}
     }
     return Number(window.innerWidth || 0) >= Number(window.innerHeight || 0);
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/home_drive.js b/openpilot/selfdrive/carrot/web/js/realtime/home_drive.js
index 447e39bf105..d7bb8419c2b 100644
--- a/openpilot/selfdrive/carrot/web/js/realtime/home_drive.js
+++ b/openpilot/selfdrive/carrot/web/js/realtime/home_drive.js
@@ -1803,7 +1803,7 @@ window.HomeDrive = (() => {
   }
 
   function applyCarrotHudLayout(viewportRect) {
-    if (window.matchMedia("(orientation: portrait)").matches) {
+    if (!window.CarrotLayout?.isWide?.()) {
       if (_lastHudLeft !== "" || _lastHudBottom !== "") {
         if (driveHudCardEl) {
           driveHudCardEl.style.removeProperty("--carrot-hud-left");
@@ -1853,7 +1853,7 @@ window.HomeDrive = (() => {
 
   function getCanvasDpr() {
     const rawDpr = window.devicePixelRatio || 1;
-    const portrait = window.matchMedia("(orientation: portrait)").matches;
+    const portrait = !window.CarrotLayout?.isWide?.();
     const shortSide = Math.min(window.innerWidth || 0, window.innerHeight || 0);
     if (portrait && shortSide > 0 && shortSide <= 540) {
       return Math.min(rawDpr, PHONE_PORTRAIT_DPR_CAP);
@@ -3231,7 +3231,7 @@ window.HomeDrive = (() => {
   let _rtcPerfSummaryCloseTimer = null;
 
   function isRtcPerfSummaryAvailable() {
-    return window.matchMedia("(orientation: landscape)").matches;
+    return Boolean(window.CarrotLayout?.isWide?.() ?? window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches);
   }
 
   function clearRtcPerfSummaryCloseTimer() {
@@ -3323,7 +3323,7 @@ window.HomeDrive = (() => {
   }
 
   function drawHudTopLeftText(stageWidth, stageHeight, viewportRect, text, pathMode) {
-    if (window.matchMedia("(orientation: portrait)").matches) return;
+    if (!window.CarrotLayout?.isWide?.()) return;
     const label = shortText(text, 160);
     if (!label) return;
     const exactC3Mode = stageWidth >= 1280 && stageHeight >= 720;
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/hud_card.js b/openpilot/selfdrive/carrot/web/js/realtime/hud_card.js
index c56188e430c..2dc2c4049d7 100644
--- a/openpilot/selfdrive/carrot/web/js/realtime/hud_card.js
+++ b/openpilot/selfdrive/carrot/web/js/realtime/hud_card.js
@@ -82,13 +82,13 @@
 
   function isOverlayMount() {
     const page = document.body?.dataset?.page || "carrot";
-    return page === "carrot" && window.matchMedia("(orientation: landscape)").matches;
+    return page === "carrot" && Boolean(window.CarrotLayout?.isWide?.() ?? window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches);
   }
 
   function getHudSurface() {
     const page = document.body?.dataset?.page || "carrot";
     if (page !== "carrot") return SURFACE_HOME;
-    return window.matchMedia("(orientation: landscape)").matches ? SURFACE_OVERLAY : SURFACE_INLINE;
+    return Boolean(window.CarrotLayout?.isWide?.() ?? window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches) ? SURFACE_OVERLAY : SURFACE_INLINE;
   }
 
   function getPreferredAspectRatioForWindow(windowClass, wide) {
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/mini_hud.js b/openpilot/selfdrive/carrot/web/js/realtime/mini_hud.js
new file mode 100644
index 00000000000..1bbc79e8b0a
--- /dev/null
+++ b/openpilot/selfdrive/carrot/web/js/realtime/mini_hud.js
@@ -0,0 +1,227 @@
+"use strict";
+
+(function () {
+  const root = document.getElementById("carrotMiniHud");
+  if (!root) return;
+
+  const elements = {
+    cpu: root.querySelector("[data-mini-hud-cpu]"),
+    source: root.querySelector("[data-mini-hud-source]"),
+    limitZone: root.querySelector("[data-mini-hud-limit-zone]"),
+    limit: root.querySelector("[data-mini-hud-limit]"),
+    limitLabel: root.querySelector("[data-mini-hud-limit-label]"),
+    limitBadge: root.querySelector("[data-mini-hud-limit-badge]"),
+    alertZone: root.querySelector("[data-mini-hud-alert-zone]"),
+    countdown: root.querySelector("[data-mini-hud-countdown]"),
+    distance: root.querySelector("[data-mini-hud-distance]"),
+    alert: root.querySelector("[data-mini-hud-alert]"),
+    stockZone: root.querySelector("[data-mini-hud-stock-zone]"),
+    driveMode: root.querySelector("[data-mini-hud-drive-mode]"),
+    driveModeFrame: root.querySelector(".carrot-mini-hud__drive-mode"),
+    gearDrive: root.querySelector(".carrot-mini-hud__gear small"),
+    gear: root.querySelector("[data-mini-hud-gear]"),
+    speed: root.querySelector("[data-mini-hud-speed]"),
+    setSpeed: root.querySelector("[data-mini-hud-set-speed]"),
+    speedCell: root.querySelector(".carrot-mini-hud__speed"),
+    setSpeedCell: root.querySelector(".carrot-mini-hud__set-speed"),
+    main: root.querySelector(".carrot-mini-hud__main"),
+  };
+
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  let latestModel = null;
+  let layoutRaf = 0;
+  let resizeObserver = null;
+
+  function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+  }
+
+  function setText(element, value) {
+    if (!element) return;
+    const text = value == null ? "" : String(value);
+    if (element.textContent !== text) element.textContent = text;
+  }
+
+  function setHidden(element, hidden) {
+    if (element) element.hidden = Boolean(hidden);
+  }
+
+  function measure(text, size, family = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') {
+    if (!context) return String(text).length * size * 0.62;
+    context.font = `900 ${size}px ${family}`;
+    return context.measureText(String(text)).width;
+  }
+
+  function contentWidth(element, fallback) {
+    if (!element) return fallback;
+    const rect = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    const padding = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+    const inner = rect.width - padding;
+    // A grid/flex cell can measure ~0 for a frame right as Compact HUD activates
+    // (layout not resolved yet). Using that 0 collapsed the auto-fit font to 1px
+    // and it stuck. Fall back to the proportional estimate instead.
+    return inner > 4 ? inner : fallback;
+  }
+
+  function render(model) {
+    if (!model) return;
+    latestModel = model;
+
+    const stock = model.source === "stock";
+    const limitVisible = !stock && model.roadLimit && model.roadLimit !== "--";
+    const alertVisible = !stock && Boolean(model.alert?.visible);
+
+    root.dataset.source = model.source;
+    root.dataset.alertKind = model.alert?.kind || "none";
+    root.classList.toggle("is-three-digit", String(model.speed).length >= 3 || String(model.setSpeed).length >= 3);
+
+    setText(elements.cpu, `CPU:${model.cpu == null ? "--" : model.cpu}°`);
+    setText(elements.source, model.source.toUpperCase());
+    setText(elements.speed, model.speed);
+    setText(elements.setSpeed, model.setSpeed);
+
+    setHidden(elements.limitZone, !limitVisible);
+    setText(elements.limit, model.roadLimit);
+    setText(elements.limitLabel, model.alert?.section ? "구간단속" : "");
+    setHidden(elements.limitLabel, !model.alert?.section);
+    setText(elements.limitBadge, model.alert?.badge || "");
+    setHidden(elements.limitBadge, !model.alert?.badge);
+
+    setHidden(elements.alertZone, !alertVisible);
+    setText(elements.countdown, model.alert?.countdown || "");
+    setHidden(elements.countdown, !model.alert?.countdown);
+    setText(elements.distance, model.alert?.distance || "");
+    setHidden(elements.distance, !model.alert?.distance);
+    setText(elements.alert, model.alert?.name || "");
+
+    setHidden(elements.stockZone, !stock);
+    setText(elements.driveMode, model.driveMode?.name || "NORMAL");
+    if (elements.driveModeFrame) elements.driveModeFrame.dataset.miniHudDriveKind = model.driveMode?.kind || "normal";
+    setText(elements.gear, model.gearStep || "--");
+    setHidden(elements.gearDrive, model.gearStep == null);
+
+    scheduleLayout();
+  }
+
+  function applyLayout() {
+    layoutRaf = 0;
+    if (!window.CarrotMiniHudMode?.isActive?.() || root.hidden) return;
+
+    const rect = root.getBoundingClientRect();
+    // Degenerate frame during activation — skip so we never bake a 1px font from
+    // a not-yet-laid-out root; a later resize/render tick re-runs the layout.
+    if (rect.width < 40 || rect.height < 40) {
+      scheduleLayout();
+      return;
+    }
+    const width = Math.max(1, rect.width);
+    // Width-referenced scale, exactly like the preview (reference width 404).
+    const layoutScale = clamp(width / 404, 0.46, 1);
+
+    const topCells = root.querySelectorAll(".carrot-mini-hud__top-cell");
+    const tempCellWidth = contentWidth(topCells[0], width * 0.50);
+    const sourceCellWidth = contentWidth(topCells[1], width * 0.50);
+    const tempText = elements.cpu?.textContent || "CPU:--°";
+    const sourceText = elements.source?.textContent || "STOCK";
+    const tempUnit = Math.max(1, measure(tempText, 100) / 100);
+    const sourceUnit = Math.max(1, measure(sourceText, 100) / 100);
+    const tempFont = Math.max(1, Math.min(32 * layoutScale, tempCellWidth * 0.90 / tempUnit));
+    const sourceFont = Math.max(1, Math.min(32 * layoutScale, sourceCellWidth * 0.90 / sourceUnit));
+
+    const speedText = elements.speed?.textContent || "--";
+    const cruiseText = elements.setSpeed?.textContent || "--";
+    const speedColWidth = contentWidth(elements.speedCell, width * 0.70);
+    const cruiseColWidth = contentWidth(elements.setSpeedCell, width * 0.30);
+    const baseSpeedUnit = Math.max(1, measure("72", 100) / 100);
+    const baseCruiseUnit = Math.max(1, measure("80", 100) / 100);
+    const speedSize = Math.max(1, Math.min(220, speedColWidth / baseSpeedUnit));
+    const cruiseSize = Math.max(1, Math.min(104, cruiseColWidth / baseCruiseUnit));
+    const speedFamily = getComputedStyle(elements.speed).fontFamily;
+    const cruiseFamily = getComputedStyle(elements.setSpeed).fontFamily;
+    const speedRendered = Math.max(1, measure(speedText, speedSize, speedFamily));
+    const cruiseRendered = Math.max(1, measure(cruiseText, cruiseSize, cruiseFamily));
+    const speedScaleX = speedText.length > 2 ? Math.min(1, speedColWidth * 0.98 / speedRendered) : 1;
+    const cruiseScaleX = cruiseText.length > 2 ? Math.min(1, cruiseColWidth * 0.98 / cruiseRendered) : 1;
+
+    // Limit / detail / stock fonts are measured from their own zone rects, exactly
+    // like the preview's syncHudScale (not the whole main region).
+    const limitRect = elements.limitZone?.getBoundingClientRect?.();
+    const limitAreaWidth = limitRect?.width || width * 0.52;
+    const limitAreaHeight = limitRect?.height || width * 0.55;
+    const limitSize = Math.max(42, Math.min(220, limitAreaWidth * 0.90, limitAreaHeight * 0.86));
+    const limitInnerWidth = Math.max(1, limitSize * 0.66);
+    const limitNumUnit = Math.max(1, measure(elements.limit?.textContent || "110", 100) / 100);
+    const limitLabelUnit = Math.max(1, measure(elements.limitLabel?.textContent || "", 100) / 100);
+    const limitBadgeUnit = Math.max(1, measure(elements.limitBadge?.textContent || "", 100) / 100);
+    const limitFont = Math.max(14, Math.min(72, limitSize * 0.40, limitInnerWidth / limitNumUnit));
+    const limitLabelFont = Math.max(7, Math.min(26, limitSize * 0.142, limitInnerWidth / limitLabelUnit));
+    const badgeFont = Math.max(10, Math.min(34, limitSize * 0.19, (limitSize * 0.80) / limitBadgeUnit));
+
+    const detailRect = elements.alertZone?.getBoundingClientRect?.();
+    const detailWidth = detailRect?.width || width * 0.48;
+    const detailHeight = detailRect?.height || width * 0.45;
+    const detailUnit = Math.max(
+      measure(elements.countdown?.textContent || "", 100) / 100,
+      measure(elements.distance?.textContent || "", 100) / 100,
+      measure(elements.alert?.textContent || "", 100) / 100,
+      1,
+    );
+    const detailFont = Math.max(1, Math.min(46, detailWidth * 0.88 / detailUnit, detailHeight * 0.165));
+
+    const stockRect = elements.stockZone?.getBoundingClientRect?.();
+    const stockWidth = stockRect?.width || width;
+    const stockHeight = stockRect?.height || width * 0.60;
+    const modeUnit = Math.max(1, measure("NORMAL", 100, getComputedStyle(elements.driveMode).fontFamily) / 100);
+    const modeFrameWidth = stockWidth * 0.48 * 0.92;
+    const modeFont = Math.max(1, Math.min(80, modeFrameWidth / (modeUnit + 0.36), stockHeight * 0.28));
+    const gearUnit = Math.max(1, measure(elements.gear?.textContent || "4", 100) / 100);
+    const gearDriveUnit = Math.max(0, measure("D", 100) * 0.34 / 100);
+    const gearWidth = Math.max(1, stockWidth * 0.52 * 0.88 - 4 * layoutScale);
+    const gearFont = Math.max(1, Math.min(180, gearWidth / (gearUnit + gearDriveUnit), stockHeight * 0.50));
+
+    const style = root.style;
+    style.setProperty("--mini-ui-scale", layoutScale.toFixed(4));
+    style.setProperty("--mini-top-font", `${Math.min(tempFont, sourceFont).toFixed(1)}px`);
+    style.setProperty("--mini-speed-font", `${speedSize.toFixed(1)}px`);
+    style.setProperty("--mini-set-font", `${cruiseSize.toFixed(1)}px`);
+    style.setProperty("--mini-speed-scale-x", speedScaleX.toFixed(4));
+    style.setProperty("--mini-set-scale-x", cruiseScaleX.toFixed(4));
+    style.setProperty("--mini-limit-size", `${limitSize.toFixed(1)}px`);
+    style.setProperty("--mini-limit-font", `${limitFont.toFixed(1)}px`);
+    style.setProperty("--mini-limit-label-font", `${limitLabelFont.toFixed(1)}px`);
+    style.setProperty("--mini-badge-font", `${badgeFont.toFixed(1)}px`);
+    style.setProperty("--mini-alert-font", `${detailFont.toFixed(1)}px`);
+    style.setProperty("--mini-mode-font", `${modeFont.toFixed(1)}px`);
+    style.setProperty("--mini-gear-font", `${gearFont.toFixed(1)}px`);
+  }
+
+  function scheduleLayout() {
+    if (layoutRaf) return;
+    layoutRaf = requestAnimationFrame(applyLayout);
+  }
+
+  function init() {
+    window.CarrotMiniHudMode?.bind?.();
+    const onResize = () => scheduleLayout();
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("orientationchange", onResize, { passive: true });
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", onResize, { passive: true });
+    }
+    window.addEventListener("carrot:minihudchange", (event) => {
+      if (event?.detail?.active) {
+        if (latestModel) render(latestModel);
+        scheduleLayout();
+      }
+    });
+    if (typeof ResizeObserver === "function") {
+      resizeObserver = new ResizeObserver(scheduleLayout);
+      resizeObserver.observe(root);
+    }
+  }
+
+  window.CarrotMiniHud = { init, render, update: render, relayout: scheduleLayout };
+  init();
+})();
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/mini_hud_mode.js b/openpilot/selfdrive/carrot/web/js/realtime/mini_hud_mode.js
new file mode 100644
index 00000000000..692d660668b
--- /dev/null
+++ b/openpilot/selfdrive/carrot/web/js/realtime/mini_hud_mode.js
@@ -0,0 +1,260 @@
+"use strict";
+
+(function () {
+  const ENTER_MAX_WIDTH = 450;
+  const EXIT_MIN_WIDTH = 520;
+  const MIN_HEIGHT = 160;
+  const COMPACT_MAX_HEIGHT = 760;
+  const LARGE_CANVAS_MIN = 700;
+  const PARAM = "mini_hud";
+
+  let active = false;
+  let bound = false;
+  let rafId = 0;
+  let overlayObserver = null;
+  let lastDecisionLogKey = "";
+
+  function readRequestMode() {
+    const value = new URLSearchParams(window.location.search).get(PARAM);
+    if (value === "0" || value === "off") return "off";
+    if (value === "1" || value === "force") return "force";
+    if (value === "auto") return "auto";
+    return "detect";
+  }
+
+  function viewportMetrics() {
+    const viewport = window.visualViewport;
+    const root = document.documentElement;
+    const layoutWidth = Math.max(0, Math.round(root?.clientWidth || window.innerWidth || 0));
+    const layoutHeight = Math.max(0, Math.round(root?.clientHeight || window.innerHeight || 0));
+    const visualWidth = Math.max(0, Math.round(viewport?.width || window.innerWidth || layoutWidth || 0));
+    const visualHeight = Math.max(0, Math.round(viewport?.height || window.innerHeight || layoutHeight || 0));
+    return {
+      width: layoutWidth,
+      height: Math.min(layoutHeight || visualHeight, visualHeight || layoutHeight),
+      layoutWidth,
+      layoutHeight,
+      visualWidth,
+      visualHeight,
+    };
+  }
+
+  function currentPage() {
+    return document.body?.dataset.page || document.documentElement?.dataset.page || "";
+  }
+
+  function isRendered(el) {
+    if (!el || el.hidden || el.closest?.("[hidden]")) return false;
+    const style = window.getComputedStyle(el);
+    if (style.display === "none" || style.visibility === "hidden") return false;
+    return el.getClientRects().length > 0;
+  }
+
+  function hasBlockingOverlay() {
+    if (document.body?.classList.contains("dialog-open")) return true;
+
+    const fixedOverlays = [
+      "appDialog",
+      "appBranchPicker",
+      "appCarPicker",
+      "settingSearchPanel",
+    ];
+    if (fixedOverlays.some((id) => isRendered(document.getElementById(id)))) return true;
+
+    const modalSelector = [
+      '[role="dialog"][aria-modal="true"]',
+      ".training-guide-modal",
+      ".dashcam-player-overlay.is-open",
+      ".dashcam-upload-progress",
+    ].join(",");
+    return Array.from(document.querySelectorAll(modalSelector)).some(isRendered);
+  }
+
+  function windowedEvidence(metrics) {
+    if (metrics.width <= 280) return { detected: true, reason: "ultra-narrow" };
+
+    const screenWidth = Math.max(Number(window.screen?.availWidth) || 0, Number(window.screen?.width) || 0);
+    const screenHeight = Math.max(Number(window.screen?.availHeight) || 0, Number(window.screen?.height) || 0);
+    const outerWidth = Number(window.outerWidth) || 0;
+
+    const narrowerThanScreen = screenWidth > 0 && metrics.width <= screenWidth * 0.78;
+    const narrowerThanWindow = outerWidth > 0 && metrics.width <= outerWidth * 0.80;
+    const compactOnLargeCanvas =
+      metrics.width <= ENTER_MAX_WIDTH &&
+      metrics.height <= COMPACT_MAX_HEIGHT &&
+      (screenWidth >= LARGE_CANVAS_MIN || outerWidth >= LARGE_CANVAS_MIN);
+
+    if (narrowerThanScreen) return { detected: true, reason: "narrower-than-screen" };
+    if (narrowerThanWindow) return { detected: true, reason: "narrower-than-window" };
+    if (compactOnLargeCanvas) return { detected: true, reason: "compact-on-large-canvas" };
+    return {
+      detected: false,
+      reason: "no-horizontal-windowing",
+      screen: { width: screenWidth, height: screenHeight },
+      outer: { width: outerWidth, height: Number(window.outerHeight) || 0 },
+    };
+  }
+
+  function hasWindowedEvidence(metrics) {
+    return windowedEvidence(metrics).detected;
+  }
+
+  function evaluateActivation() {
+    const requestMode = readRequestMode();
+    const metrics = viewportMetrics();
+    const page = currentPage();
+    const overlayOpen = hasBlockingOverlay();
+    const windowed = windowedEvidence(metrics);
+    const result = {
+      active: false,
+      reason: "idle",
+      requestMode,
+      page,
+      overlayOpen,
+      metrics,
+      windowed,
+      thresholds: {
+        enterMaxWidth: ENTER_MAX_WIDTH,
+        exitMinWidth: EXIT_MIN_WIDTH,
+        minHeight: MIN_HEIGHT,
+      },
+    };
+
+    if (requestMode === "off") {
+      result.reason = "request-off";
+      return result;
+    }
+    if (requestMode === "force") {
+      result.active = true;
+      result.reason = "request-force";
+      return result;
+    }
+
+    if (overlayOpen) {
+      result.reason = "overlay-open";
+      return result;
+    }
+
+    if (metrics.height < MIN_HEIGHT) {
+      result.reason = "height-too-small";
+      return result;
+    }
+
+    const eligible = requestMode === "auto" || windowed.detected;
+    if (!eligible) {
+      result.reason = "not-windowed";
+      return result;
+    }
+
+    if (active) {
+      result.active = metrics.width < EXIT_MIN_WIDTH;
+      result.reason = result.active ? "hold-below-exit-width" : "exit-width";
+      return result;
+    }
+
+    result.active = metrics.width <= ENTER_MAX_WIDTH;
+    result.reason = result.active ? "enter-width" : "above-enter-width";
+    return result;
+  }
+
+  function shouldActivate() {
+    return evaluateActivation().active;
+  }
+
+  function logDecision(next, reason, evaluation) {
+    const tone = next ? "active" : "idle";
+    console.log(`[mini_hud] ${tone}`, {
+      event: reason,
+      decision: evaluation.reason,
+      requestMode: evaluation.requestMode,
+      page: evaluation.page,
+      overlayOpen: evaluation.overlayOpen,
+      metrics: evaluation.metrics,
+      windowed: evaluation.windowed,
+      thresholds: evaluation.thresholds,
+    });
+  }
+
+  function apply(evaluation, reason) {
+    const next = Boolean(evaluation?.active);
+    const metrics = evaluation?.metrics || {};
+    const logKey = [
+      next ? "1" : "0",
+      evaluation?.reason || "",
+      evaluation?.requestMode || "",
+      evaluation?.overlayOpen ? "overlay" : "clear",
+      evaluation?.windowed?.reason || "",
+      metrics.width || 0,
+      metrics.height || 0,
+    ].join("|");
+    if (active === next) {
+      if (logKey !== lastDecisionLogKey) {
+        lastDecisionLogKey = logKey;
+        logDecision(next, `stable:${reason}`, evaluation);
+      }
+      return;
+    }
+    active = next;
+    lastDecisionLogKey = logKey;
+
+    const root = document.getElementById("carrotMiniHud");
+    if (root) root.hidden = !active;
+
+    if (active) document.documentElement.dataset.carrotMiniHud = "1";
+    else delete document.documentElement.dataset.carrotMiniHud;
+
+    logDecision(active, reason, evaluation);
+
+    window.dispatchEvent(new CustomEvent("carrot:minihudchange", {
+      detail: { active, reason, decision: evaluation.reason, page: evaluation.page, overlayOpen: evaluation.overlayOpen, metrics: evaluation.metrics },
+    }));
+  }
+
+  function sync(reason = "sync") {
+    apply(evaluateActivation(), reason);
+  }
+
+  function schedule(reason) {
+    if (rafId) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      sync(reason);
+    });
+  }
+
+  function bind() {
+    if (bound) return;
+    bound = true;
+
+    const onResize = () => schedule("resize");
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("orientationchange", onResize, { passive: true });
+    window.addEventListener("carrot:pagechange", () => schedule("pagechange"));
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", onResize, { passive: true });
+    }
+    if (window.MutationObserver && document.body) {
+      overlayObserver = new MutationObserver(() => schedule("overlay"));
+      overlayObserver.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["class", "hidden", "aria-hidden"],
+        childList: true,
+        subtree: true,
+      });
+    }
+    sync("init");
+  }
+
+  window.CarrotMiniHudMode = {
+    bind,
+    sync,
+    isActive: () => active,
+    requestMode: readRequestMode,
+    thresholds: Object.freeze({ enterMaxWidth: ENTER_MAX_WIDTH, exitMinWidth: EXIT_MIN_WIDTH, minHeight: MIN_HEIGHT }),
+    hasWindowedEvidence,
+    windowedEvidence,
+    hasBlockingOverlay,
+    currentPage,
+    evaluateActivation,
+  };
+})();
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/mini_hud_model.js b/openpilot/selfdrive/carrot/web/js/realtime/mini_hud_model.js
new file mode 100644
index 00000000000..b4b48343576
--- /dev/null
+++ b/openpilot/selfdrive/carrot/web/js/realtime/mini_hud_model.js
@@ -0,0 +1,100 @@
+"use strict";
+
+(function () {
+  const WAZE_TYPES = new Set([100, 101]);
+  const SECTION_TYPES = new Set([2, 3, 4]);
+  const CAMERA_TYPES = new Set([0, 1, 7, 8, 75, 76, 101]);
+
+  function finite(value) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : null;
+  }
+
+  function integer(value, fallback = null) {
+    const number = finite(value);
+    return number == null ? fallback : Math.round(number);
+  }
+
+  function displaySpeed(kph, isMetric) {
+    const value = finite(kph);
+    if (value == null || value < 0 || value >= 250) return "--";
+    return String(Math.round(isMetric ? value : value * 0.621371));
+  }
+
+  function displayLimit(kph, isMetric) {
+    const value = finite(kph);
+    return value != null && value > 0 ? displaySpeed(value, isMetric) : "--";
+  }
+
+  function displayDistance(meters, isMetric) {
+    const value = finite(meters);
+    if (value == null || value <= 0) return "";
+    if (!isMetric) {
+      const feet = value * 3.28084;
+      if (feet < 1000) return `${Math.round(feet / 10) * 10}ft`;
+      return `${(feet / 5280).toFixed(feet >= 5280 ? 1 : 2)}mi`;
+    }
+    if (value < 1000) return `${Math.round(value)}m`;
+    return `${(value / 1000).toFixed(value >= 10000 ? 1 : 2)}km`;
+  }
+
+  function alertDescriptor(type) {
+    if (type === 100) return { name: "POLICE", kind: "police" };
+    if (type === 22) return { name: "BUMP", kind: "bump" };
+    if (SECTION_TYPES.has(type)) return { name: "SECTION", kind: "section" };
+    if (CAMERA_TYPES.has(type)) return { name: "CAM", kind: "camera" };
+    return { name: "ALERT", kind: "alert" };
+  }
+
+  function sourceMode(carrotMan) {
+    const type = integer(carrotMan?.xSpdType, -1);
+    const desiredSource = String(carrotMan?.desiredSource || "").trim().toLowerCase();
+    if (WAZE_TYPES.has(type) || desiredSource === "police" || desiredSource === "waze") return "waze";
+    if (type >= 0) return "nav";
+    if (integer(carrotMan?.activeCarrot, 0) > 1) return "nav";
+    return "stock";
+  }
+
+  function driveMode(payload) {
+    const rawKind = String(payload?.driveMode?.kind || "normal").trim().toLowerCase();
+    const kind = ["normal", "eco", "safe", "sport"].includes(rawKind) ? rawKind : "normal";
+    return { kind, name: kind.toUpperCase() };
+  }
+
+  function build(payload, rawState, liveState) {
+    const liveCarrotMan = liveState?.services?.carrotMan;
+    const rawCarrotMan = rawState?.carrotMan;
+    const carrotMan = liveCarrotMan && typeof liveCarrotMan === "object" ? liveCarrotMan : (rawCarrotMan || {});
+    const isMetric = payload?.isMetric !== false;
+    const source = sourceMode(carrotMan);
+    const alertType = integer(carrotMan?.xSpdType, -1);
+    const alert = alertDescriptor(alertType);
+    const alertDistance = finite(carrotMan?.xSpdDist);
+    const countdown = integer(carrotMan?.xSpdCountDown, 0);
+    const roadLimitKph = finite(carrotMan?.nRoadLimitSpeed) ?? finite(payload?.speedLimitKph);
+    const alertVisible = source !== "stock" && alertType >= 0 && ((alertDistance ?? 0) > 0 || WAZE_TYPES.has(alertType));
+    const gearStep = integer(payload?.gearStep);
+
+    return {
+      source,
+      isMetric,
+      cpu: integer(payload?.cpuTempC),
+      speed: displaySpeed(payload?.vEgoKph, isMetric),
+      setSpeed: displaySpeed(payload?.vSetKph, isMetric),
+      roadLimit: displayLimit(roadLimitKph, isMetric),
+      alert: {
+        visible: alertVisible,
+        name: alertVisible ? alert.name : "",
+        kind: alertVisible ? alert.kind : "none",
+        distance: alertVisible ? displayDistance(alertDistance, isMetric) : "",
+        countdown: alertVisible && countdown > 0 ? `${countdown}s` : "",
+        badge: alertVisible && alert.kind === "section" ? displayDistance(alertDistance, isMetric) : "",
+        section: alertVisible && alert.kind === "section",
+      },
+      driveMode: driveMode(payload),
+      gearStep: gearStep != null && gearStep >= 1 && gearStep <= 7 ? gearStep : null,
+    };
+  }
+
+  window.CarrotMiniHudModel = { build, displayDistance, displaySpeed };
+})();
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/nav_hud.js b/openpilot/selfdrive/carrot/web/js/realtime/nav_hud.js
index 0e3e0f8e003..59ed40abd16 100644
--- a/openpilot/selfdrive/carrot/web/js/realtime/nav_hud.js
+++ b/openpilot/selfdrive/carrot/web/js/realtime/nav_hud.js
@@ -99,9 +99,10 @@
   }
 
   function isLandscape() {
+    if (window.CarrotLayout?.isWide) return window.CarrotLayout.isWide();
     if (typeof window.matchMedia === "function") {
       try {
-        return window.matchMedia("(orientation: landscape)").matches;
+        return window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches;
       } catch {}
     }
     return Number(window.innerWidth || 0) >= Number(window.innerHeight || 0);
diff --git a/openpilot/selfdrive/carrot/web/js/realtime/vision_raw.js b/openpilot/selfdrive/carrot/web/js/realtime/vision_raw.js
index 1afd48243f7..6e1995453ca 100644
--- a/openpilot/selfdrive/carrot/web/js/realtime/vision_raw.js
+++ b/openpilot/selfdrive/carrot/web/js/realtime/vision_raw.js
@@ -287,7 +287,7 @@ function handleOverlayDecodedMessage(service, data) {
 }
 
 function drivingHudUpdateFromCarPayload(j) {
-  if (!window.DrivingHud || !j) return;
+  if (!j) return;
 
   const runtimeIsMetric = window.CarrotLiveRuntimeState?.runtime?.params?.IsMetric;
   const isMetric = j.isMetric != null
@@ -317,6 +317,13 @@ function drivingHudUpdateFromCarPayload(j) {
     apm: j.apm,
   };
 
+  const miniHudPayload = window.CarrotMiniHudModel?.build?.(
+    payload,
+    RAW_HUD_STATE,
+    window.CarrotLiveRuntimeState,
+  );
+  if (miniHudPayload) window.CarrotMiniHud?.update?.(miniHudPayload);
+
   const payloadSignature = [
     typeof LANG === "string" ? LANG : "",
     payload.isMetric ? 1 : 0,
@@ -345,7 +352,7 @@ function drivingHudUpdateFromCarPayload(j) {
   ].join("|");
   if (payloadSignature === LAST_HUD_PAYLOAD_SIGNATURE) return;
   LAST_HUD_PAYLOAD_SIGNATURE = payloadSignature;
-  window.DrivingHud.update(payload);
+  window.DrivingHud?.update?.(payload);
 }
 
 function averageFiniteMetric(values) {
diff --git a/openpilot/selfdrive/carrot/web/js/shared/i18n.js b/openpilot/selfdrive/carrot/web/js/shared/i18n.js
index b2d0375201e..b45bcbcbac3 100644
--- a/openpilot/selfdrive/carrot/web/js/shared/i18n.js
+++ b/openpilot/selfdrive/carrot/web/js/shared/i18n.js
@@ -285,7 +285,6 @@ function renderUIText() {
   setText("logsDashcamTitle", s.logs_dashcam || "Dashcam");
   setText("logsScreenTitle", s.logs_screenrecord || "Screen Record");
   setText("btnStartVision", `▶ ${s.start_vision || "Start Drive Vision"}`);
-  setText("btnVisionReconnect", s.vision_reconnect || "Reconnect");
   setText("btnVisionStop", s.vision_stop || "Stop");
   if (typeof applyRecordFabState === "function") applyRecordFabState();
   if (window.HomeDrive && typeof window.HomeDrive.renderText === "function") {
diff --git a/openpilot/selfdrive/carrot/web/js/shared/ui/dialog.js b/openpilot/selfdrive/carrot/web/js/shared/ui/dialog.js
index 474247f226c..b2114bc9874 100644
--- a/openpilot/selfdrive/carrot/web/js/shared/ui/dialog.js
+++ b/openpilot/selfdrive/carrot/web/js/shared/ui/dialog.js
@@ -13,6 +13,7 @@ const APP_DIALOG_VARIANT_CLASSES = [
   "app-dialog--choice-grid",
   "app-dialog--choice-value-grid",
   "app-dialog--form",
+  "app-dialog--input",
 ];
 
 
@@ -272,6 +273,9 @@ function openAppDialog(options = {}) {
 
   resetAppDialogPresentation();
   if (appDialog && isForm) appDialog.classList.add("app-dialog--form");
+  // Any dialog that shows the text input (prompt OR form) gets the keyboard-aware
+  // positioning so it floats just above the on-screen keyboard, consistently.
+  if (appDialog && (mode === "prompt" || isForm)) appDialog.classList.add("app-dialog--input");
   if (appDialog && hasChoices) {
     appDialog.classList.add("app-dialog--choice");
     appDialog.classList.add(choiceLayout === "value-grid" ? "app-dialog--choice-grid" : "app-dialog--choice-list");
diff --git a/openpilot/selfdrive/carrot/web/js/shared/ui/navigation.js b/openpilot/selfdrive/carrot/web/js/shared/ui/navigation.js
index 5b97a4ff305..238220a209e 100644
--- a/openpilot/selfdrive/carrot/web/js/shared/ui/navigation.js
+++ b/openpilot/selfdrive/carrot/web/js/shared/ui/navigation.js
@@ -768,7 +768,10 @@ function showCarScreen(which, pushHistory = false) {
 
 /* ── Setting back-swipe support helpers ─────────────────── */
 function isLandscapeRailMode() {
-  return window.matchMedia("(orientation: landscape)").matches;
+  // Nav rail engages on the shared wide layout resolver.
+  return window.CarrotLayout
+    ? window.CarrotLayout.isWide()
+    : window.matchMedia("(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)").matches;
 }
 
 function isSettingItemsScreenActive() {
diff --git a/openpilot/selfdrive/carrot/web/js/shared/ui/viewport.js b/openpilot/selfdrive/carrot/web/js/shared/ui/viewport.js
index 043ce034a2f..a7279fda9a4 100644
--- a/openpilot/selfdrive/carrot/web/js/shared/ui/viewport.js
+++ b/openpilot/selfdrive/carrot/web/js/shared/ui/viewport.js
@@ -1,5 +1,71 @@
 "use strict";
 
+/* ── Shared layout-mode resolver ──────────────────────────────────────────
+   Single source of truth for the coarse app layout. Wide is not just
+   "landscape": unfolded foldables and tablet-like panels can report a portrait
+   viewport while still having enough room for the rail + split layout.
+
+     wide = aspect >= 13/10 OR fold/segment API says segmented OR large panel
+     tall/square = compact chrome, split layout disabled
+
+   Keep the CSS media query copies in responsive.css, layout_tokens.css, and
+   settings/device.css in sync with LAYOUT_WIDE_QUERY. */
+const LAYOUT_WIDE_QUERY = "(min-aspect-ratio: 13/10), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2), (min-width: 640px) and (min-height: 650px)";
+const LAYOUT_WIDE_MIN_WIDTH = 640;
+const LAYOUT_WIDE_MIN_HEIGHT = 650;
+const LAYOUT_SQUARE_RATIO = 0.92;
+
+function layoutViewportSize() {
+  const root = document.documentElement;
+  return {
+    width: Math.max(0, Math.round(root?.clientWidth || window.innerWidth || 0)),
+    height: Math.max(0, Math.round(root?.clientHeight || window.innerHeight || 0)),
+  };
+}
+
+function hasViewportSegments() {
+  const segments = window.viewport?.segments;
+  return Array.isArray(segments) && segments.length > 1;
+}
+
+function getDevicePostureType() {
+  const directType = navigator.devicePosture?.type;
+  if (typeof directType === "string" && directType) return directType;
+  if (typeof window.matchMedia !== "function") return "";
+  try {
+    if (window.matchMedia("(device-posture: folded)").matches) return "folded";
+    if (window.matchMedia("(device-posture: continuous)").matches) return "continuous";
+  } catch (e) {}
+  return "";
+}
+
+function isWideLayout() {
+  if (hasViewportSegments()) return true;
+  if (typeof window.matchMedia === "function") {
+    const mql = window.matchMedia(LAYOUT_WIDE_QUERY);
+    if (mql && typeof mql.matches === "boolean") return mql.matches;
+  }
+  const { width, height } = layoutViewportSize();
+  return width / Math.max(height, 1) >= 1.3 || (width >= LAYOUT_WIDE_MIN_WIDTH && height >= LAYOUT_WIDE_MIN_HEIGHT);
+}
+
+function computeLayoutMode() {
+  if (isWideLayout()) return "wide";
+  const { width: w, height: h } = layoutViewportSize();
+  // Near-square (foldable unfolded, some multi-window splits) vs true portrait.
+  // Both use the narrow chrome; the distinction is exposed for components that
+  // want to use the extra width without re-enabling the wide chrome.
+  return w / h >= LAYOUT_SQUARE_RATIO ? "square" : "tall";
+}
+
+window.CarrotLayout = {
+  WIDE_QUERY: LAYOUT_WIDE_QUERY,
+  isWide: isWideLayout,
+  mode: computeLayoutMode,
+  hasViewportSegments,
+  devicePosture: getDevicePostureType,
+};
+
 let appViewportMetricsBound = false;
 const driveHudCardEl = document.getElementById("driveHudCard");
 let driveHudLayoutObserversBound = false;
@@ -15,6 +81,19 @@ function updateAppViewportMetrics() {
   document.documentElement.style.setProperty("--app-vv-top", `${top}px`);
   document.documentElement.style.setProperty("--app-vv-width", `${width}px`);
 
+  // Keyboard-open state, so keyboard-aware surfaces can hug the keyboard when it
+  // is up and center when it is not (desktop, keyboard-less, or before focus).
+  // VirtualKeyboard bounding rect on Chromium (visualViewport doesn't shrink
+  // there); the visualViewport delta elsewhere.
+  let keyboardOpen = false;
+  if (appVirtualKeyboard) {
+    keyboardOpen = Math.round((appVirtualKeyboard.boundingRect && appVirtualKeyboard.boundingRect.height) || 0) > 120;
+  } else if (vv) {
+    keyboardOpen = Math.round((window.innerHeight || 0) - height - top) > 120;
+  }
+  if (keyboardOpen) document.documentElement.dataset.kbOpen = "1";
+  else delete document.documentElement.dataset.kbOpen;
+
   const topbarEl = document.querySelector(".topbar");
   let navLeftGap = 0;
   let navBottomGap = 0;
@@ -42,6 +121,78 @@ function updateAppViewportMetrics() {
 
   document.documentElement.style.setProperty("--app-nav-left-gap", `${navLeftGap}px`);
   document.documentElement.style.setProperty("--app-nav-bottom-gap", `${navBottomGap}px`);
+
+  const layoutMode = computeLayoutMode();
+  if (document.documentElement.dataset.layout !== layoutMode) {
+    document.documentElement.dataset.layout = layoutMode;
+  }
+}
+
+/* ── VirtualKeyboard API (Chromium: Android Chrome, Samsung Internet, Edge 94+) ─
+   Opt into overlaysContent so the browser reports the *exact* on-screen keyboard
+   geometry — including the suggestion / autofill toolbar strip that the
+   visualViewport height alone misses on Samsung (the "172.30.1.42 / ID·비번" bar
+   that was covering dialogs and the terminal input). Keyboard-aware surfaces
+   then reserve `env(keyboard-inset-height)`. iOS Safari / Firefox lack the API,
+   so `data-vk` stays unset, `env(keyboard-inset-*)` resolves to its 0 fallback,
+   and those engines keep the visualViewport path (which already shrinks with the
+   keyboard there). Unlike interactive-widget=resizes-content, overlaysContent
+   does NOT resize the layout viewport, so it can't disturb the aspect-ratio
+   layout mode. */
+function initVirtualKeyboard() {
+  try {
+    const vk = navigator.virtualKeyboard;
+    if (!vk) return null;
+    vk.overlaysContent = true;
+    document.documentElement.dataset.vk = "1";
+    return vk;
+  } catch (e) {
+    return null;
+  }
+}
+
+const appVirtualKeyboard = initVirtualKeyboard();
+
+/* overlaysContent=true also means the browser no longer auto-scrolls a focused
+   input above the keyboard (it isn't resizing anything). Dialogs, the terminal
+   and the search panel anchor themselves above the keyboard, but plain inline
+   inputs (e.g. the profile-name field) would sit behind it. This safety net
+   scrolls any other focused editable element into the visible area above the
+   keyboard — so keyboard handling is consistent everywhere in the app. */
+function isEditableTarget(el) {
+  if (!el) return false;
+  const tag = el.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || el.isContentEditable === true;
+}
+
+function ensureFocusedInputVisible(el) {
+  if (!appVirtualKeyboard || !isEditableTarget(el)) return;
+  if (el.closest(".app-dialog, .page--terminal, .setting-search-panel")) return;
+  const kb = Math.round((appVirtualKeyboard.boundingRect && appVirtualKeyboard.boundingRect.height) || 0);
+  if (kb <= 0) return;
+  const rect = el.getBoundingClientRect();
+  const visibleBottom = (window.innerHeight || 0) - kb - 24;
+  if (rect.bottom > visibleBottom) {
+    try {
+      el.scrollIntoView({ block: "center", behavior: "smooth" });
+    } catch (e) {}
+  }
+}
+
+if (appVirtualKeyboard) {
+  document.addEventListener(
+    "focusin",
+    (e) => {
+      const el = e.target;
+      setTimeout(() => ensureFocusedInputVisible(el), 250);
+    },
+    { passive: true },
+  );
+  appVirtualKeyboard.addEventListener(
+    "geometrychange",
+    () => ensureFocusedInputVisible(document.activeElement),
+    { passive: true },
+  );
 }
 
 function bindAppViewportObservers() {
@@ -58,6 +209,9 @@ function bindAppViewportObservers() {
     window.visualViewport.addEventListener("resize", handleLayout, { passive: true });
     window.visualViewport.addEventListener("scroll", handleLayout, { passive: true });
   }
+  if (appVirtualKeyboard) {
+    appVirtualKeyboard.addEventListener("geometrychange", handleLayout, { passive: true });
+  }
 }
 
 bindAppViewportObservers();
diff --git a/openpilot/selfdrive/carrot/web/js/translations/en.js b/openpilot/selfdrive/carrot/web/js/translations/en.js
index 5b0bd17682c..66722353157 100644
--- a/openpilot/selfdrive/carrot/web/js/translations/en.js
+++ b/openpilot/selfdrive/carrot/web/js/translations/en.js
@@ -411,7 +411,6 @@ window.CarrotTranslations.register("en", {
     connecting: "Connecting...",
     connected: "Connected",
     reconnecting: "Reconnecting...",
-    vision_reconnect: "Reconnect",
     vision_stop: "Stop",
     error: "Error",
     notice: "Notice",
diff --git a/openpilot/selfdrive/carrot/web/js/translations/ko.js b/openpilot/selfdrive/carrot/web/js/translations/ko.js
index e44f44012cb..f832e27439d 100644
--- a/openpilot/selfdrive/carrot/web/js/translations/ko.js
+++ b/openpilot/selfdrive/carrot/web/js/translations/ko.js
@@ -409,7 +409,6 @@ window.CarrotTranslations.register("ko", {
     not_set: "미설정",
     connecting: "연결중...",
     reconnecting: "재연결중...",
-    vision_reconnect: "다시 연결",
     vision_stop: "중지",
     error: "오류",
     notice: "알림",
diff --git a/openpilot/selfdrive/carrot/web/js/translations/zh.js b/openpilot/selfdrive/carrot/web/js/translations/zh.js
index 9744e836e0a..260cbc4d83f 100644
--- a/openpilot/selfdrive/carrot/web/js/translations/zh.js
+++ b/openpilot/selfdrive/carrot/web/js/translations/zh.js
@@ -409,7 +409,6 @@ window.CarrotTranslations.register("zh", {
     not_set: "未设置",
     connecting: "连接中...",
     reconnecting: "重连中...",
-    vision_reconnect: "重新连接",
     vision_stop: "停止",
     error: "错误",
     notice: "提示",