socialcalc-ai 1.0.4 → 1.0.10

package/README.md

@@ -18,6 +18,7 @@ Derived from Dan Bricklin's proven, industrial-strength **SocialCalc** engine, `
 - [Quick Start in React / Ionic](#-quick-start-in-react--ionic)
 - [Quick Start in Vanilla JavaScript](#-quick-start-in-vanilla-javascript)
 - [Architecture Overview](#-architecture-overview)
+  - [Core Engine Reference (`core/README.md`)](core/README.md)
 - [UI Components](#-ui-components)
   - [CellEditModal](#1-celleditmodal)
   - [HorizontalScrollBar](#2-horizontalscrollbar)
@@ -37,6 +38,8 @@ Derived from Dan Bricklin's proven, industrial-strength **SocialCalc** engine, `
   - [Invoice Utilities](#9-invoice-utilities-modulesinvoicejs)
   - [AI Agent Plugin (Text Editor Agent)](#10-ai-agent-plugin-text-editor-agent-modulesagentjs)
   - [Cell Formatting & Display Suite](#11-cell-formatting--display-suite)
+  - [Offline PDF Export Plugin](#12-offline-pdf-export-plugin-socialcalc-aipdf-export)
+  - [Share, Email & Print Plugin](#13-share-email--print-plugin-socialcalc-aishare)
 - [Event-Driven Architecture](#-event-driven-architecture)
 - [AI & MultiSheet Calc (MSC) Integration](#-ai--multisheet-calc-msc-integration)
 - [TypeScript Support](#-typescript-support)
@@ -229,14 +232,21 @@ socialcalc-ai/
 ├── index.js                      # Main entry point: aggregates core, modules & UI
 ├── index.d.ts                    # Complete TypeScript typings
 ├── package.json                  # Standalone package definition
-├── core/                         # Core calculation engine & DOM table rendering
-│   ├── constants.js              # Formatting codes, default styles & limits
-│   ├── core.js                   # Spreadsheet sheet model, cell evaluation, formula AST
-│   ├── formula.js                # Built-in math, logical, string, financial functions
-│   ├── format-number.js          # Numeric and date formatting routines
-│   ├── spreadsheet-control.js    # Spreadsheet control lifecycle & pane management
-│   ├── table-editor.js           # DOM table editor layout & cursor rendering
-│   └── index.js                  # Assembled core SocialCalc singleton export
+├── core/                         # Spreadsheet engine - full reference in core/README.md
+│   ├── index.js                  # Imports the modules below in load order; exports the SocialCalc singleton
+│   ├── constants.js              # UI strings (localization), default styles & sizes
+│   ├── sheet.js                  # Cell & Sheet model, save format, command language, recalc, undo, clipboard
+│   ├── render.js                 # RenderContext (HTML table), coordinate/DOM helpers, value display, CSV/HTML conversion
+│   ├── touch.js                  # Touch detection & gesture handling
+│   ├── format-number.js          # Excel-style number and date format strings
+│   ├── formula.js                # Formula tokenizer, parser, evaluator & function registry
+│   ├── formula-functions.js      # 109 built-in functions (stat, math, text, date, lookup, financial)
+│   ├── popup.js                  # Popup list & color chooser widgets
+│   ├── table-editor.js           # Interactive grid: cursor, selection, scrolling, input box, cell actions
+│   ├── editor-widgets.js         # Cell handles, scrollbars, drag/tooltip/button/wheel registries, keyboard
+│   ├── spreadsheet-control.js    # Spreadsheet UI: toolbar tabs, formula bar, settings, save/load
+│   ├── workbook.js               # Multi-sheet WorkBook & WorkBookControl, sheet bar, MSC save/load
+│   └── environment.js            # Loaded last: JSON polyfill, app overrides, server/worker shims
 ├── modules/                      # Modular functional features & plugins
 │   ├── plugin-manager.js         # Central registry for dynamic SocialCalc plugins
 │   ├── grid-lines.js             # Cell border grid-lines plugin
@@ -605,6 +615,22 @@ AppGeneral.switchSheet("Sheet2");
 AppGeneral.addNewSheet("Expenses");
 AppGeneral.deleteSheet("Sheet3");
 AppGeneral.renameSheet("Sheet1", "Overview");
+
+// CSV files (UTF-8 BOM so Excel opens them correctly)
+await AppGeneral.exportCurrentSheetAsCSV({ filename: "invoice" });           // downloads invoice.csv
+const csvBlob = await AppGeneral.exportCurrentSheetAsCSV({ returnBlob: true });
+AppGeneral.cleanCSV(csvData);                   // drop blank lines
+AppGeneral.convertToCSV([["Item", "Price"], ["Pen", 2]]);
+
+// MSC workbook files
+await AppGeneral.exportMSC({ filename: "workbook" });                        // raw save data, workbook.msc
+await AppGeneral.exportMSC({ extension: "json", includeAppMapping: true });  // { msc, appMapping } template
+const { msc, appMapping } = AppGeneral.parseMSCFile(fileText);               // accepts either form
+AppGeneral.loadWorkbookData(msc);
+
+// File helpers
+AppGeneral.downloadBlob(blob, "file.pdf");
+const base64 = await AppGeneral.blobToBase64(blob);  // for Capacitor Filesystem.writeFile
 ```
 
 ### 9. Invoice Utilities (`modules/invoice.js`)
@@ -687,6 +713,104 @@ SocialCalc provides built-in formatters for commercial, financial, and date/time
 - **Percentage Formats**: Automatic conversion of decimals/fractions into clean percentage percentages (`15.00%`).
 - **Date & Time Formats**: ISO timestamps, short date (`MM/DD/YYYY`), medium date (`DD-MMM-YYYY`), and 12/24-hour clocks.
 
+### 12. Offline PDF Export Plugin (`socialcalc-ai/pdf-export`)
+Generates PDFs of one sheet or the whole workbook on the device, with no server involved, so it works offline and inside Capacitor apps. Pages are split on row boundaries, chart canvases in the live editor are included, and every page gets a timestamp header, a footer label and `Page X of Y`.
+
+The plugin is opt-in: it is not part of the main `socialcalc-ai` entry, so apps that do not import it do not need its dependencies. To use it, install the optional peer dependencies:
+
+```bash
+npm install jspdf html2canvas
+```
+
+```ts
+import * as AppGeneral from "socialcalc-ai";
+import {
+  configurePdfExport,
+  exportHTMLAsPDF,
+  exportAllSheetsAsPDF,
+  exportCurrentSheetAsPDF,
+  exportWorkbookAsPDF,
+  pdfBlobToBase64,
+} from "socialcalc-ai/pdf-export";
+
+// Optional app-wide defaults (per-call options still win)
+configurePdfExport({ footerText: "Invoice", format: "a4", margin: 10 });
+
+// Download the active sheet as invoice.pdf
+await exportCurrentSheetAsPDF({ filename: "invoice", onProgress: console.log });
+
+// Or pass HTML yourself and get a Blob back (e.g. to share with Capacitor)
+const blob = await exportHTMLAsPDF(AppGeneral.getCurrentHTMLContent(), { returnBlob: true });
+const base64 = await pdfBlobToBase64(blob); // ready for Filesystem.writeFile
+
+// All sheets into one PDF, each sheet starting on a new page
+await exportWorkbookAsPDF({ filename: "all_invoices" });
+await exportAllSheetsAsPDF(AppGeneral.getAllSheetsData(), { returnBlob: true });
+```
+
+| Option | Default | Description |
+|---|---|---|
+| `filename` | `"document"` / `"all_sheets"` | File name without `.pdf` |
+| `format` | `"a4"` | `"a4"`, `"letter"` or `"legal"` |
+| `orientation` | `"portrait"` | `"portrait"` or `"landscape"` |
+| `margin` | `10` | Page margin in mm |
+| `quality` | `4` (one sheet) / `2` (all sheets) | html2canvas render scale |
+| `headerText` | `null` | Top-left text; `null` prints the current date and time, `""` hides it |
+| `footerText` | `""` | Bottom-left text on every page |
+| `showPageNumbers` | `true` | Print `Page X of Y` bottom-right |
+| `editorElementId` | `"tableeditor"` | Live editor element whose chart canvases are copied |
+| `returnBlob` | `false` | Return a `Blob` instead of downloading the file |
+| `onProgress` | — | Called with progress messages |
+
+Importing the module registers it with the Plugin Manager as `"pdfExport"`, so `disablePlugin("pdfExport")` / `enablePlugin("pdfExport", defaults)` and `configurePlugin("pdfExport", defaults)` work too. Export calls reject while the plugin is disabled.
+
+### 13. Share, Email & Print Plugin (`socialcalc-ai/share`)
+Saves, shares, emails and prints exports the right way for the platform the app is running on, detected from the Capacitor runtime:
+
+| | `saveFile` | `shareFile` | `sendEmail` / `emailCurrentSheet` | `printHTML` / `printCurrentSheet` |
+|---|---|---|---|---|
+| **iOS** | Cache file + share sheet | Share sheet | Share sheet with the attachment (PDF by default) | Native printer (AirPrint); PDF first, then HTML |
+| **Android** | Cache file + share sheet | Share sheet | EmailComposer with the attachment (HTML by default) | Native printer (PrintService); PDF first, then HTML |
+| **Web** | Download | Web Share API with the file, else download | Web Share with the file, else `mailto:` plus a download of the attachment | Hidden iframe + print dialog (no pop-up) |
+
+The plugin does not import any Capacitor packages. On iOS and Android, pass in the ones your app has installed. On the web it needs nothing:
+
+```bash
+npm install @capacitor/filesystem @capacitor/share capacitor-email-composer @bcyesil/capacitor-plugin-printer
+```
+
+```ts
+import { Filesystem, Directory, Encoding } from "@capacitor/filesystem";
+import { Share } from "@capacitor/share";
+import { EmailComposer } from "capacitor-email-composer";
+import { Printer } from "@bcyesil/capacitor-plugin-printer";
+import "socialcalc-ai/pdf-export"; // optional: lets email and print use PDFs
+import {
+  configureShare, getShareCapabilities,
+  saveFile, shareFile, emailCurrentSheet, sendEmail, printCurrentSheet,
+} from "socialcalc-ai/share";
+import { exportCurrentSheetAsPDF } from "socialcalc-ai/pdf-export";
+
+configureShare({ Filesystem, Directory, Encoding, Share, EmailComposer, Printer });
+
+getShareCapabilities(); // { platform: "ios", emailMethod: "share-sheet", printMethod: "native-printer", ... }
+
+// Export + deliver (download on the web, share sheet on devices)
+const pdf = await exportCurrentSheetAsPDF({ returnBlob: true });
+await saveFile({ blob: pdf, filename: "invoice.pdf", dialogTitle: "Share PDF" });
+
+// Email the active sheet (attachment format chosen per platform, or set attachmentFormat)
+await emailCurrentSheet({ filename: "INV-001", subject: "Your invoice", body: "Please find it attached." });
+
+// Or any email / attachment
+await sendEmail({ to: ["a@b.com"], subject: "Data", attachment: { text: csv, filename: "data.csv", mimeType: "text/csv" } });
+
+// Print the active sheet
+await printCurrentSheet({ name: "INV-001", orientation: "portrait" });
+```
+
+Every call resolves to `{ method, platform }` (e.g. `{ method: "email-composer", platform: "android" }`), so the app can show the right message. Temporary cache files are deleted 60 s after sharing (`configureShare({ cleanupAfterMs })`). The plugin registers as `"share"` with the Plugin Manager, and calls reject while it is disabled.
+
 ---
 
 ## 📡 Event-Driven Architecture
@@ -766,6 +890,14 @@ import {
 
 ## 📦 Release Notes
 
+### v1.0.8
+- **Share, Email & Print Plugin**: New opt-in `socialcalc-ai/share` entry for platform-aware (iOS / Android / web) file saving and sharing, email with attachments, and printing. Capacitor plugins are passed in with `configureShare()`.
+- **CSV & MSC exporters**: `exportCurrentSheetAsCSV`, `exportCSV`, `cleanCSV`, `convertToCSV`, `exportMSC`, `parseMSCFile`, `downloadBlob` and `blobToBase64` in the main entry.
+- **Plugin Manager**: `getPlugin(name)` returns a registered plugin, including the `api` it exposes.
+
+### v1.0.7
+- **Offline PDF Export Plugin**: New opt-in `socialcalc-ai/pdf-export` entry that exports the active sheet or the whole workbook to PDF on the device (jsPDF + html2canvas as optional peer dependencies), registered as the `pdfExport` plugin.
+
 ### v1.0.3
 - **Node.js ESM & Runtime Compatibility**: Enhanced UMD root resolution across all core modules to support `globalThis`, eliminating undefined root errors in Node.js ES module loaders.
 - **TypeScript Declarations**: Bundled official type declarations (`index.d.ts`) covering all core exports, plugin modules, and React/Ionic UI modal components.

package/components/AgentModal/AgentModal.css

@@ -256,11 +256,11 @@
 
 /* --- AI Copilot Box --- */
 .sc-copilot-box {
-  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
-  border: 1.5px solid #d8b4fe;
+  background: var(--sc-copilot-bg, linear-gradient(180deg, #f8fafc 0%, #ffffff 100%));
+  border: 1.5px solid var(--sc-copilot-border, #e2e8f0);
   border-radius: 16px;
   padding: 18px;
-  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.06);
+  box-shadow: var(--sc-copilot-shadow, 0 4px 16px rgba(15, 23, 42, 0.04));
   margin-bottom: 20px;
   position: relative;
 }
@@ -278,7 +278,7 @@
   gap: 8px;
   font-size: 14px;
   font-weight: 700;
-  color: #6b21a8;
+  color: var(--sc-copilot-title-color, #0f172a);
 }
 
 .sc-copilot-title-badge {
@@ -286,9 +286,9 @@
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 6px;
-  background: #f3e8ff;
-  color: #7e22ce;
-  border: 1px solid #e9d5ff;
+  background: var(--sc-copilot-badge-bg, #f1f5f9);
+  color: var(--sc-copilot-badge-color, #475569);
+  border: 1px solid var(--sc-copilot-badge-border, #e2e8f0);
 }
 
 .sc-copilot-textarea {
@@ -299,9 +299,9 @@
   line-height: 1.5;
   padding: 12px 14px;
   border-radius: 12px;
-  border: 1.5px solid #e9d5ff;
-  background: #ffffff;
-  color: #0f172a;
+  border: 1.5px solid var(--sc-copilot-textarea-border, #e2e8f0);
+  background: var(--sc-copilot-textarea-bg, #ffffff);
+  color: var(--sc-text-main, #0f172a);
   outline: none;
   resize: vertical;
   font-family: inherit;
@@ -309,8 +309,8 @@
 }
 
 .sc-copilot-textarea:focus {
-  border-color: #9333ea;
-  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
+  border-color: var(--sc-copilot-focus-border, #2563eb);
+  box-shadow: 0 0 0 3px var(--sc-copilot-focus-shadow, rgba(37, 99, 235, 0.12));
 }
 
 .sc-copilot-footer {
@@ -324,7 +324,7 @@
 
 .sc-copilot-shortcuts {
   font-size: 12px;
-  color: #7e22ce;
+  color: var(--sc-copilot-shortcuts-color, #64748b);
   display: flex;
   align-items: center;
   gap: 6px;
@@ -332,13 +332,13 @@
 
 .sc-copilot-shortcuts kbd {
   background: #ffffff;
-  border: 1px solid #d8b4fe;
+  border: 1px solid var(--sc-copilot-shortcuts-border, #e2e8f0);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 11px;
   font-family: ui-monospace, monospace;
   font-weight: 600;
-  color: #581c87;
+  color: #334155;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
@@ -350,10 +350,16 @@
   margin-top: 10px;
 }
 
+.sc-prompt-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--sc-copilot-suggestions-color, #64748b);
+}
+
 .sc-prompt-chip {
-  background: #ffffff;
-  border: 1px solid #e9d5ff;
-  color: #6b21a8;
+  background: var(--sc-copilot-chip-bg, #ffffff);
+  border: 1px solid var(--sc-copilot-chip-border, #e2e8f0);
+  color: var(--sc-copilot-chip-color, #334155);
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 11.5px;
@@ -363,9 +369,9 @@
 }
 
 .sc-prompt-chip:hover {
-  background: #f3e8ff;
-  border-color: #c084fc;
-  color: #581c87;
+  background: var(--sc-copilot-chip-hover-bg, #f1f5f9);
+  border-color: var(--sc-copilot-chip-hover-border, #cbd5e1);
+  color: var(--sc-copilot-chip-hover-color, #0f172a);
   transform: translateY(-1px);
 }
 
@@ -381,15 +387,16 @@
   font-weight: 600;
   cursor: pointer;
   border: none;
-  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
-  color: #ffffff;
-  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
+  background: var(--sc-primary-btn-bg, #0f172a);
+  color: var(--sc-primary-btn-color, #ffffff);
+  box-shadow: var(--sc-primary-btn-shadow, 0 4px 12px rgba(15, 23, 42, 0.12));
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .sc-btn-primary:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
+  background: var(--sc-primary-btn-hover-bg, #1e293b);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
   filter: brightness(1.05);
 }
 
@@ -1116,7 +1123,50 @@
   box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
 }
 
-/* --- PURPLE THEME --- */
+/* --- BLUE / CORPORATE / INDIGO THEME --- */
+.sc-agent-modal.sc-theme-blue ion-header ion-toolbar,
+.sc-agent-modal.sc-theme-corporate ion-header ion-toolbar,
+.sc-agent-modal.sc-theme-indigo ion-header ion-toolbar {
+  --background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1d4ed8 100%);
+}
+.sc-agent-modal.sc-theme-blue .sc-agent-nav-tab.active,
+.sc-agent-modal.sc-theme-corporate .sc-agent-nav-tab.active,
+.sc-agent-modal.sc-theme-indigo .sc-agent-nav-tab.active {
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+.sc-agent-modal.sc-theme-blue .sc-copilot-box,
+.sc-agent-modal.sc-theme-corporate .sc-copilot-box,
+.sc-agent-modal.sc-theme-indigo .sc-copilot-box {
+  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
+  border-color: #bfdbfe;
+}
+.sc-agent-modal.sc-theme-blue .sc-copilot-title,
+.sc-agent-modal.sc-theme-corporate .sc-copilot-title,
+.sc-agent-modal.sc-theme-indigo .sc-copilot-title {
+  color: #1e40af;
+}
+.sc-agent-modal.sc-theme-blue .sc-btn-primary,
+.sc-agent-modal.sc-theme-corporate .sc-btn-primary,
+.sc-agent-modal.sc-theme-indigo .sc-btn-primary {
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
+}
+.sc-agent-modal.sc-theme-blue .sc-prompt-chip,
+.sc-agent-modal.sc-theme-corporate .sc-prompt-chip,
+.sc-agent-modal.sc-theme-indigo .sc-prompt-chip {
+  border-color: #bfdbfe;
+  color: #1e40af;
+}
+.sc-agent-modal.sc-theme-blue .sc-prompt-chip:hover,
+.sc-agent-modal.sc-theme-corporate .sc-prompt-chip:hover,
+.sc-agent-modal.sc-theme-indigo .sc-prompt-chip:hover {
+  background: #eff6ff;
+  border-color: #93c5fd;
+  color: #1d4ed8;
+}
+
+/* --- PURPLE / VIOLET THEME (Explicit opt-in) --- */
 .sc-agent-modal.sc-theme-purple ion-header ion-toolbar,
 .sc-agent-modal.sc-theme-violet ion-header ion-toolbar {
   --background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #6b21a8 100%);
@@ -1126,34 +1176,73 @@
   background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
   box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }
+.sc-agent-modal.sc-theme-purple .sc-copilot-box,
+.sc-agent-modal.sc-theme-violet .sc-copilot-box {
+  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
+  border-color: #d8b4fe;
+}
+.sc-agent-modal.sc-theme-purple .sc-copilot-title,
+.sc-agent-modal.sc-theme-violet .sc-copilot-title {
+  color: #6b21a8;
+}
+.sc-agent-modal.sc-theme-purple .sc-prompt-chip,
+.sc-agent-modal.sc-theme-violet .sc-prompt-chip {
+  border-color: #e9d5ff;
+  color: #6b21a8;
+}
+.sc-agent-modal.sc-theme-purple .sc-prompt-chip:hover,
+.sc-agent-modal.sc-theme-violet .sc-prompt-chip:hover {
+  background: #f3e8ff;
+  border-color: #c084fc;
+  color: #581c87;
+}
 .sc-agent-modal.sc-theme-purple .sc-btn-primary,
 .sc-agent-modal.sc-theme-violet .sc-btn-primary {
   background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
   box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
 }
 
-/* --- SLATE / MONOCHROME THEME --- */
+/* --- SLATE / MONOCHROME / NEUTRAL THEME --- */
 .sc-agent-modal.sc-theme-slate ion-header ion-toolbar,
-.sc-agent-modal.sc-theme-monochrome ion-header ion-toolbar {
-  --background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+.sc-agent-modal.sc-theme-monochrome ion-header ion-toolbar,
+.sc-agent-modal.sc-theme-neutral ion-header ion-toolbar {
+  --background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 }
 .sc-agent-modal.sc-theme-slate .sc-agent-nav-tab.active,
-.sc-agent-modal.sc-theme-monochrome .sc-agent-nav-tab.active {
-  background: linear-gradient(135deg, #334155 0%, #475569 100%);
-  box-shadow: 0 4px 12px rgba(51, 65, 85, 0.25);
+.sc-agent-modal.sc-theme-monochrome .sc-agent-nav-tab.active,
+.sc-agent-modal.sc-theme-neutral .sc-agent-nav-tab.active {
+  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
 }
 .sc-agent-modal.sc-theme-slate .sc-copilot-box,
-.sc-agent-modal.sc-theme-monochrome .sc-copilot-box {
+.sc-agent-modal.sc-theme-monochrome .sc-copilot-box,
+.sc-agent-modal.sc-theme-neutral .sc-copilot-box {
   background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
   border-color: #cbd5e1;
 }
 .sc-agent-modal.sc-theme-slate .sc-copilot-title,
-.sc-agent-modal.sc-theme-monochrome .sc-copilot-title {
+.sc-agent-modal.sc-theme-monochrome .sc-copilot-title,
+.sc-agent-modal.sc-theme-neutral .sc-copilot-title {
+  color: #0f172a;
+}
+.sc-agent-modal.sc-theme-slate .sc-prompt-chip,
+.sc-agent-modal.sc-theme-monochrome .sc-prompt-chip,
+.sc-agent-modal.sc-theme-neutral .sc-prompt-chip {
+  border-color: #cbd5e1;
   color: #334155;
 }
+.sc-agent-modal.sc-theme-slate .sc-prompt-chip:hover,
+.sc-agent-modal.sc-theme-monochrome .sc-prompt-chip:hover,
+.sc-agent-modal.sc-theme-neutral .sc-prompt-chip:hover {
+  background: #f1f5f9;
+  border-color: #94a3b8;
+  color: #0f172a;
+}
 .sc-agent-modal.sc-theme-slate .sc-btn-primary,
-.sc-agent-modal.sc-theme-monochrome .sc-btn-primary {
-  background: linear-gradient(135deg, #334155 0%, #475569 100%);
+.sc-agent-modal.sc-theme-monochrome .sc-btn-primary,
+.sc-agent-modal.sc-theme-neutral .sc-btn-primary {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2);
 }
 
 /* --- LIGHT / MINIMAL THEME --- */