Layout: min-width:0 on grid children for proper shrinking; mobile media query

static/index.html

@@ -35,6 +35,19 @@
     font-size: 12px; font-weight: 300; line-height: 1.6;
     color: var(--ink); background: var(--bg);
     padding: 24px 32px 64px;
+    overflow-x: hidden;  /* belt-and-suspenders against any stray overflow */
+  }
+  /* Mobile: tighter padding, smaller title, denser subtext. */
+  @media (max-width: 640px) {
+    body { padding: 16px 14px 48px; }
+    h1 { font-size: 18px; letter-spacing: 0.1px; }
+    .subtext { font-size: 10px; letter-spacing: 0.3px; }
+    .subtext .sep { margin: 0 6px; }
+    .btn-primary { font-size: 10px; padding: 6px 10px; }
+    .btn-primary .plus { font-size: 13px; margin-right: 4px; }
+    .title-row { gap: 10px; }
+    .subtitle { font-size: 12px; }
+    .chart-wrap { height: 260px; padding: 8px; }
   }
 
   /* --- Header --- */
@@ -124,10 +137,14 @@
   /* --- Layout --- */
   .columns {
     display: grid;
-    grid-template-columns: 1fr 380px;
+    grid-template-columns: minmax(0, 1fr) 380px;
     gap: 28px;
     align-items: start;
   }
+  /* min-width: 0 lets grid children shrink with the viewport — without this,
+     `min-width: auto` defaults pin the children to their content min-width
+     and the chart canvas refuses to shrink when the window narrows. */
+  .col-left, .messages-col { min-width: 0; }
   @media (max-width: 900px) {
     .columns { grid-template-columns: 1fr; }
   }