/* public/css/home-empty.css — Phase 2 of the refactor (REFACTOR_PLAN.md §7). Copied verbatim from public/dashboard-v2.css lines 11062..11221. Loaded by dashboard-v2.html AFTER composer-shared.css so the home-empty `body.is-empty-dash` overrides of `.builder-input-*` and `.builder-suggestion-*` win when both pages reuse the composer. */ body.is-empty-dash .dash-empty-hero .builder-suggestion-row { display: none; } /* Refine chips DO stay visible on mobile — they're the most useful surface for a tradie on a jobsite who can't think of what to type. */ body.is-empty-dash .dash-empty-hero.is-refine-mode .builder-refine-suggestions { display: flex; padding: 0 8px; } body.is-empty-dash .dash-empty-hero.is-refine-mode .builder-refine-suggestions .builder-suggestion-chip { font-size: 0.8rem; padding: 6px 12px; } .dash-projects { display: none !important; } /* Logo stays on the side of the heading at all sizes. Smaller logo opens up enough room to keep the heading at a comfortable readable size while still fitting on one row at 390px-wide viewports. */ /* Stack logo above heading on mobile. The desktop side-by-side row works for the short "Let's build your website." line but goes goofy when the refine-mode line ("Want to refine your website?") wraps to two lines — the logo ends up beside a left-aligned text block that visually drifts off-centre. Stacking + centring the wrapped text keeps both states symmetric on narrow viewports. */ .builder-empty-hero { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; justify-content: center; } .builder-empty-mark img { width: 40px; height: 40px; } .builder-empty-greeting { font-size: 1.9rem; line-height: 1.15; text-align: center; } .builder-instruction { font-size: 0.88rem; margin-bottom: 20px; padding: 0 4px; } /* Bigger textarea so the placeholder wraps within its visible area instead of clipping. */ .dash-empty-form .builder-input-textarea { min-height: 50px; font-size: 0.75rem; } .dash-empty-form .builder-input-textarea::placeholder { white-space: normal; } /* ──────────────────────────────────────────────────────────── Phase 3.5 (2026-05-17): Claude-style composer polish. The user compared BookingSprint mobile against the Claude iOS app and called ours "bonangly and kind of compact". Claude's chat composer is a substantial 130px+ tray-shaped surface on a subtle warm-gray background — it reads as a destination, not a control. Our 48px white rectangle by comparison felt cramped. This pass adopts Claude's composer language while keeping the BookingSprint warm palette + the trade chips that help a first-time tradie know what to type. Key moves: - Composer bg: white → var(--cream-2) (subtle warm gray) - Min-height: 48 → 72 (composer feels substantial) - Radius: 18 → 22 (softer corners) - Shadow: drop the heavy desktop drop-shadow; the warm-gray surface plus a 1px hairline carries enough definition - Hero spacing: more breathing room between greeting + instruction + composer (mobile real estate but Claude shows generous whitespace works on small screens too) - Headline 1.5rem → 1.6rem (slightly bigger; with the bigger composer the ratio stays comfortable) - Instruction text: smaller + lighter so it doesn't compete with the headline - Trade chips: were a 2-column grid of full chips with icons; now a single horizontal scroll row with smaller, lighter chips. Icons kept (they scan-help) but at lower opacity so they recede. Demoted, not removed. ──────────────────────────────────────────────────────────── */ .builder-shell--centered .builder-empty-greeting { font-size: 1.6rem; line-height: 1.2; text-align: center; } .builder-shell--centered .builder-empty-mark img { width: 34px; height: 34px; } .builder-shell--centered .builder-empty-hero { margin-bottom: 18px; } .builder-shell--centered .builder-instruction { font-size: 0.83rem; color: var(--ink-soft); margin-bottom: 32px; max-width: 300px; } /* Composer — Claude-balanced chrome (Phase 3.9, 2026-05-17). Founder feedback after Phase 3.8: "better but it's a bit too small now, same with the text". 3.8 over-shrank — bringing the padding, textarea height, and button sizes back up halfway to Phase 3.7 dimensions while keeping the white surface, hairline border, single-line-placeholder fix, and context-aware placeholder swap. Phase 3.9 dial-up from 3.8: - Composer total ~96px (was ~70px after 3.8, ~125px after 3.7) - Padding 12/14/10 (was 6/10) — actual breathing room - Border-radius 22 (was 20) - Textarea min-height 32 (was 28), line-height 1.5 (was 1.4) — text reads larger without bumping font-size off iOS's 16px no-zoom floor - Send button 36 (was 32), icon 15px (was 14) - Attach button 28 (was 24), icon 15px (was 14) - Bar min-height 36 (was 32) — button row matches send size */ .builder-shell--centered .builder-input-box { /* AI builder composer (mobile) — --cream-2 panel, hairline outline, layered drop shadow. */ background: var(--cream-2); padding: 12px 14px 10px; border-radius: 22px; border: 1px solid var(--hairline); box-shadow: 0 12px 28px -8px rgba(31, 22, 17, 0.14), 0 4px 10px -4px rgba(31, 22, 17, 0.08), 0 1px 2px rgba(31, 22, 17, 0.05); gap: 4px; } .builder-shell--centered .builder-input-textarea { font-size: 16px; min-height: 32px; max-height: 120px; line-height: 1.5; background: transparent; padding: 4px 4px 0; field-sizing: content; } /* When empty (showing the placeholder), constrain to a single line and clip any placeholder overflow so a long example doesn't bloat the composer height. Without this, "Sparky in Newtown. EV chargers and switchboards." wraps to 2-3 lines and the composer ends up 50-80px taller than it needs to be. */ .builder-shell--centered .builder-input-textarea:placeholder-shown { max-height: 32px; overflow: hidden; } .builder-shell--centered .builder-input-textarea::placeholder { color: var(--ink-soft); } .builder-shell--centered .builder-input-bar { margin-top: 0; min-height: 36px; } .builder-shell--centered .builder-input-send { width: 36px;