Force portrait layout on phones instead of landscape prompt.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/styles/app.css

@@ -33,37 +33,37 @@ body {
     var(--bg);
 }
 
-.portrait-lock-gate {
-  display: none;
+/*
+ * 手机横屏时不进入横屏布局：把 #root 旋成竖屏坐标系。
+ * 能调用 screen.orientation.lock 的环境（如安卓已安装 PWA）则系统本身不转，此类样式不生效。
+ */
+html.phone-portrait-lock.phone-landscape,
+html.phone-portrait-lock.phone-landscape body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+html.phone-portrait-lock.phone-landscape body {
   position: fixed;
   inset: 0;
-  z-index: 9999;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: rgba(11, 14, 17, 0.96);
-  text-align: center;
 }
 
-.portrait-lock-gate.show {
-  display: flex;
-}
-
-.portrait-lock-card {
-  max-width: 280px;
-}
-
-.portrait-lock-title {
-  margin: 0 0 8px;
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--accent);
-}
-
-.portrait-lock-sub {
-  margin: 0;
-  font-size: 14px;
-  color: var(--muted);
+html.phone-portrait-lock.phone-landscape #root {
+  position: absolute;
+  width: 100vh;
+  width: 100dvh;
+  height: 100vw;
+  height: 100dvw;
+  top: 100%;
+  top: 100dvh;
+  left: 0;
+  transform: rotate(-90deg);
+  transform-origin: left top;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
 }
 
 button,