fix(emailclient): 10-issue polish pass — visual feedback, state sync, UX

- Selected email card: add secondary-container bg + left accent border
- Unread email cards: add primary left border accent
- StarButton: sync local state with parent via useEffect([isStarred])
- Initial dark mode: useEffect applies data-theme on mount
- Star active color: amber #f9a825 via .star-button--active CSS rule
- Unread count badge: styled as pill with primary-container background
- Empty state: add inbox/folder_open material icon
- Folder toolbar label: capitalize + replace underscores with spaces
- ComposeWindow: CC/BCC hidden by default, revealed via Cc/Bcc button
- Email header: flex layout for .header-top, column gap for .header-details

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/fakemui/email/atoms/StarButton.tsx

@@ -1,5 +1,5 @@
 // fakemui/email/atoms/StarButton.tsx
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import { MaterialIcon } from '../../../../icons/react/fakemui'
 import { useAccessible } from '../../../../hooks/useAccessible'
 
@@ -16,6 +16,8 @@ export const StarButton = forwardRef<
 >(({ isStarred = false, onToggleStar, testId, ...props }, ref) => {
   const [starred, setStarred] = useState(isStarred)
 
+  useEffect(() => { setStarred(isStarred) }, [isStarred])
+
   const accessible = useAccessible({
     feature: 'email',
     component: 'star-button',

components/fakemui/email/surfaces/ComposeWindow.tsx

@@ -24,6 +24,7 @@ export const ComposeWindow = ({
   const [bcc, setBcc] = useState<string[]>([])
   const [subject, setSubject] = useState('')
   const [body, setBody] = useState('')
+  const [showCcBcc, setShowCcBcc] = useState(false)
   const accessible = useAccessible({
     feature: 'email', component: 'compose',
     identifier: customTestId || 'compose'
@@ -58,15 +59,37 @@ export const ComposeWindow = ({
         </button>
       </Box>
       <Box className="compose-body">
-        <RecipientInput recipientType="to"
-          recipients={to} onRecipientsChange={setTo}
-          placeholder="To:" />
-        <RecipientInput recipientType="cc"
-          recipients={cc} onRecipientsChange={setCc}
-          placeholder="Cc:" />
-        <RecipientInput recipientType="bcc"
-          recipients={bcc} onRecipientsChange={setBcc}
-          placeholder="Bcc:" />
+        <Box style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <RecipientInput recipientType="to"
+            recipients={to} onRecipientsChange={setTo}
+            placeholder="To:" />
+          {!showCcBcc && (
+            <button
+              type="button"
+              onClick={() => setShowCcBcc(true)}
+              style={{
+                fontSize: '0.75rem',
+                color: 'var(--mat-sys-on-surface-variant)',
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+                padding: '4px 6px',
+              }}
+              aria-label="Show Cc and Bcc fields"
+            >
+              Cc/Bcc
+            </button>
+          )}
+        </Box>
+        {showCcBcc && (
+          <>
+            <RecipientInput recipientType="cc"
+              recipients={cc} onRecipientsChange={setCc}
+              placeholder="Cc:" />
+            <RecipientInput recipientType="bcc"
+              recipients={bcc} onRecipientsChange={setBcc}
+              placeholder="Bcc:" />
+          </>
+        )}
         <input type="text" placeholder="Subject"
           value={subject} id="compose-subject"
           aria-label="Subject"