Improve SMS settings layout and add send-modal variable chips.

Credit/usage divider, total row plus typed counts grid, and insertable template vars on compose.

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

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -2173,29 +2173,30 @@ export function BusinessesPage() {
                 {(smsSettingsBusiness?.smsSentCount ?? 0).toLocaleString('en-US')}
               </strong>
             </div>
-            {(
-              [
-                ['Mass send', smsSettingsBusiness?.smsSentByType?.mass],
-                ['Singular', smsSettingsBusiness?.smsSentByType?.singular],
-                ['Auth service', smsSettingsBusiness?.smsSentByType?.auth],
+            <div className={styles.smsSentTypesRow}>
+              {(
                 [
-                  'Auto customer',
-                  smsSettingsBusiness?.smsSentByType?.autoCustomer,
-                ],
-                ['Admin notification', smsSettingsBusiness?.smsSentByType?.admin],
-              ] as const
-            ).map(([label, value]) => (
-              <div
-                key={label}
-                className={`${styles.dataRow} ${styles.dataRowNeutral}`}
-                role="status"
-              >
-                <span className={styles.dataRowLabel}>{label}</span>
-                <strong className={styles.dataRowValue}>
-                  {(value ?? 0).toLocaleString('en-US')}
-                </strong>
-              </div>
-            ))}
+                  ['Mass send', smsSettingsBusiness?.smsSentByType?.mass],
+                  ['Singular', smsSettingsBusiness?.smsSentByType?.singular],
+                  ['Auth service', smsSettingsBusiness?.smsSentByType?.auth],
+                  [
+                    'Auto customer',
+                    smsSettingsBusiness?.smsSentByType?.autoCustomer,
+                  ],
+                  [
+                    'Admin notification',
+                    smsSettingsBusiness?.smsSentByType?.admin,
+                  ],
+                ] as const
+              ).map(([label, value]) => (
+                <div key={label} className={styles.smsSentTypeCell} role="status">
+                  <span className={styles.smsSentTypeLabel}>{label}</span>
+                  <strong className={styles.smsSentTypeValue}>
+                    {(value ?? 0).toLocaleString('en-US')}
+                  </strong>
+                </div>
+              ))}
+            </div>
           </div>
           <p className={styles.helperText}>
             Lifetime messages billed (one per recipient), split by type. Auto customer and