1 files changed, 17 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
index 275bb59..384b6d6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -929,6 +929,23 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .live-line-body { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.35; }
 .live-zap .live-line-body b { color: var(--accent); }
 .live-chat .chat-row { padding-right: 2px; }
+/* on phones the stream is the page, the way Nostrich lays one out: the
+   picture runs edge to edge and the chat under it is a plain full-width
+   list of lines, no bubbles — the card walls step outside #app's padding */
+@media (max-width: 520px) {
+  .live-page > .card {
+    margin-left: -16px; margin-right: -16px; padding: 10px 0 12px;
+    border-left: none; border-right: none; border-radius: 0; box-shadow: none;
+  }
+  .live-page > .live-chat-card { margin-top: 0; padding-top: 6px; border-top: none; }
+  .live-page > .card > :not(.live-player, .live-chat) { margin-left: 14px; margin-right: 14px; }
+  .live-page .live-player { border-radius: 0; }
+  .live-page .live-chat { padding: 10px 14px 0; max-height: 60vh; }
+  .live-page .live-title { font-size: 17px; }
+  .live-chat .chat-row { gap: 10px; }
+  .live-chat .chat-bubble { display: block; background: transparent; border: 0; border-radius: 0; padding: 0; font-size: 15px; }
+  .live-chat .chat-quote { margin-bottom: 2px; }
+}
 .bc-preview.mirror { transform: scaleX(-1); }
 .bc-bar .bc-clock { font-variant-numeric: tabular-nums; font-weight: 650; }
 .go-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e0245e; box-shadow: 0 0 0 3px rgba(224, 36, 94, .25); }