Add Playwright and Tailwind workflow

AGENTS.md

@@ -23,10 +23,47 @@ Purpose: maintain the MaalFlows live chat widget and admin app.
 Before finishing a code change, run:
 
 ```powershell
-npm.cmd run check
+npm.cmd run verify
 ```
 
-If a broader behavioral change is made, add or run the smallest practical extra verification for that area.
+`verify` runs syntax checks, Tailwind CSS build, and Playwright UI smoke tests. If the change is documentation-only, `npm.cmd run check` is sufficient, but say that explicitly.
+
+For any meaningful layout or styling change:
+
+- Start or let Playwright start the local server.
+- Use Playwright for visual inspection instead of judging only from code.
+- Check at least desktop and mobile viewports when the UI surface can appear on both.
+- Inspect screenshots for overlap, broken spacing, unreadable text, and inconsistent controls.
+- Keep normal Playwright runs headless. Use headed/visible browser only while diagnosing a UI or scraping/browser-automation failure.
+- If browser automation is added for external sources, choose the browser engine from source configuration, behave slowly and politely, and do not use Playwright to bypass site protections.
+
+Playwright scripts:
+
+```powershell
+npm.cmd run test:ui
+npm.cmd run test:ui:headed
+```
+
+Playwright screenshots and reports are ignored by Git.
+
+## TailwindCSS
+
+TailwindCSS is the main styling system for new and refactored UI. The source file is `src/styles/tailwind.css`, built to `public/tailwind.css` with:
+
+```powershell
+npm.cmd run build:css
+```
+
+Rules:
+
+- Prefer reusable Tailwind component classes in `@layer components` over one-off CSS for repeated controls.
+- Repeated controls should share the same structure: icon before text, centered text, chevron on the right, consistent icon size/color/alignment, height, padding, border, radius, hover, and focus states.
+- Panel top bars should share height, border, background, text color, and button styling.
+- If a master style exists, extend it instead of creating a second variant of the same control.
+- Dark/light theme changes must apply consistently to sidebars, panels, tables/grids, modals, inputs, and controls.
+- Data-heavy UI should stay compact, scannable, responsive, and avoid an Excel-like look unless explicitly required.
+- Wide data workspaces should allow horizontal scrolling when content is wider than the viewport.
+- Before finishing a UI component change, check similar components for style consistency.
 
 ## Git Workflow