fix chatbox

src/app/globals.css

@@ -30,18 +30,33 @@ html {
 }
 
 @layer components {
-  /* Global Data Table Inset Contract: 24px left lead-in, 32px right inset */
+  /*
+   * Global Data Table Inset Contract: 24px left lead-in, 32px right inset.
+   *
+   * `[data-ai-report]` is excluded, and that exclusion is a bug fix rather
+   * than a preference. These rules were written for full-page dashboard
+   * tables, but the selector is bare `table` with `!important`, so they also
+   * hit the report tables rendered inside the Loyaly AI panel — adding 24px +
+   * 32px of inset to a table that only has ~376px to begin with, on top of
+   * its own px-4 cells. Roughly a sixth of the panel went to padding the
+   * report could not opt out of, which is a large part of why its columns
+   * came out unreadably narrow.
+   *
+   * The AI report sets its own cell padding for its own width. Scoping by
+   * attribute keeps the dashboard contract exactly as it was for every table
+   * that is genuinely on a full page.
+   */
   .astryx-table-cell:first-child,
   .astryx-table-header-cell:first-child,
-  table th:first-child,
-  table td:first-child {
+  table:not([data-ai-report]) th:first-child,
+  table:not([data-ai-report]) td:first-child {
     padding-inline-start: var(--spacing-6) !important;
   }
 
   .astryx-table-cell:last-child,
   .astryx-table-header-cell:last-child,
-  table th:last-child,
-  table td:last-child {
+  table:not([data-ai-report]) th:last-child,
+  table:not([data-ai-report]) td:last-child {
     padding-inline-end: var(--spacing-8) !important;
   }