# Claude Code — Task Prompt (Chunk 03: iOS-Style Visual Polish)

> Paste the block below into Claude Code (run from project root). Spec: `docs/03-ios-visual-polish.md`.

---

```
We are improving RongBerong AI chunk by chunk. This chunk is a VISUAL-ONLY re-skin to make the app
feel like a native iOS / Apple interface: clean, minimal, soft. NO functionality, markup, or JS
changes — CSS ONLY.

READ FIRST, in this order:
1. docs/03-ios-visual-polish.md   ← the spec for this chunk (Part A is the preservation contract).
2. docs/01-design-spec.md         ← global preservation contract (Part A); honor it too.
3. public/css/rongberong.css      ← main tokens (:root) + component styles.
4. public/css/editor-shell.css    ← editor shell styles.

HARD RULES (must not break):
- EDIT CSS ONLY: public/css/rongberong.css and public/css/editor-shell.css. Do NOT touch any
  .blade.php, public/js/rongberong.js, public/js/editor-shell.js, controllers, routes, or lang/*.json.
- Do NOT change any class name, id, data-v, data-group, or DOM structure. Style existing selectors only.
- Keep every existing :root custom property NAME (--accent, --bg, --radius, --shadow-*, --glass-*,
  --ease-*, etc.). You may retune their VALUES; do not rename/remove them (other rules reference them).
- Keep all interactive states clearly visible: .opt.sel, #toggle segments, .fg-toggle, focus rings,
  hover, disabled, loading/skeleton, #req/#err validation.
- Accessibility: text contrast >=4.5:1, UI/borders >=3:1, visible focus, tap targets >=44px,
  honor prefers-reduced-motion. Keep Bangla (বাংলা) readable — don't clip glyphs.
- Performance: limit backdrop-filter blur to bars/sheets only; add an @supports solid fallback;
  remove or dial down big decorative blur blobs.

THE iOS LOOK TO APPLY (see spec §B):
- Palette: keep accent #0EA5E9 as the tint; move surroundings to iOS system gray
  (--bg ~ #F2F2F7, white surfaces, hairline separators rgba(60,60,67,0.12), label #1C1C1E,
  secondary rgba(60,60,67,0.6)). Reduce color noise; reserve the rainbow for the logo only.
- Shape: larger squircle radii (--radius-xs 8, --radius-sm 12, --radius 16, add --radius-lg 22,
  --radius-pill 999). Cards/panels/sheets use the large radius.
- Depth: soft low neutral shadows (e.g. 0 8px 24px rgba(0,0,0,0.08)); replace heavy glows with
  hairline border + tiny shadow; focus ring 0 0 0 4px rgba(10,132,255,0.18).
- Material: lighter frosted glass (rgba(255,255,255,0.72), blur(20px) saturate(180%) + -webkit-)
  on top bar / bottom bar / sheets / popovers only, with @supports fallback to solid.
- Type: system stack first: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Manrope", system-ui,
  sans-serif. Lighter weights (400 body, 500-600 emphasis), tidy hierarchy. Keep Bangla line-height.
- Controls: iOS segmented control for #toggle (gray track, white selected segment + tiny shadow);
  soft chips/.opt with accent-tint selected; filled light-gray inputs with accent focus ring;
  filled/tinted/plain buttons with subtle 0.97 press scale; inset-grouped rounded field cards.
- Motion: short springy transitions via existing --ease-spring/--ease-out; reduced-motion fallback.
- Spacing: a bit more air (roomy padding/gaps), calm density.

WORKFLOW:
- Small CSS-only commits. Do tokens + 2-3 core components first, then continue.
- After the pass, run the Acceptance Checklist in docs/03-ios-visual-polish.md and report pass/fail.
  Confirm via `git status` that ONLY public/css/*.css changed. Verify the app still works end to end
  (voice, upload, toggle, options, advanced, presets, prompt, photo generate, video generate) and
  check EN + বাংলা on desktop and mobile.
- Update the chunk 03 status row in docs/README.md.

Start by reading the files above and giving me: (a) the token value changes you propose (before/after
for the :root variables), and (b) the list of components you'll restyle — BEFORE editing.
```

---

## How to use
1. Spec lives at `docs/03-ios-visual-polish.md`; this is its prompt.
2. **Gate 1:** approve the proposed `:root` value changes + component list before edits.
3. **Gate 2:** require the Acceptance Checklist and a `git status` showing only `public/css/*.css` changed.
4. CSS-only means easy rollback — if you dislike the look, revert the two files.