style(conversation-assistant): 🎨 Update Layout styling with new design requirements in Layout.module.css and adjust Layout.tsx class names for spacing, colors, and responsive behavior

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

features/conversation-assistant/frontend-dev/src/components/Layout.module.css

@@ -93,6 +93,26 @@
 
 /* Icons are handled by @lilith/ui-icons - no special styling needed */
 
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background-color: var(--accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  margin-left: auto;
+  line-height: 1;
+}
+
+.navItem.active .badge {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 .main {
   flex: 1;
   padding: 24px;

features/conversation-assistant/frontend-dev/src/components/Layout.tsx

@@ -8,8 +8,11 @@ import {
   BrainIcon,
   CogIcon,
   SettingsIcon,
+  SparklesIcon,
 } from '@lilith/ui-icons';
 
+import { usePendingResponses } from '@/api';
+
 import styles from './Layout.module.css';
 import { ScreeningAlertContainer } from './screening/ScreeningAlertContainer';
 
@@ -18,6 +21,8 @@ const CREATOR_ID = 'default'; // Matches pattern in useSync.ts
 export const Layout = () => {
   const location = useLocation();
   const isStudio = location.pathname.startsWith('/studio');
+  const { data: pendingDrafts } = usePendingResponses();
+  const pendingCount = pendingDrafts?.length ?? 0;
 
   return (
     <div className={styles.container}>
@@ -62,6 +67,22 @@ export const Layout = () => {
             <span>Review Queue</span>
           </NavLink>
 
+          <NavLink
+            to="/response-drafts"
+            className={({ isActive }) =>
+              `${styles.navItem} ${isActive ? styles.active : ''}`
+            }
+            title="Response Drafts"
+          >
+            <SparklesIcon size={18} aria-hidden="true" />
+            <span>Response Drafts</span>
+            {pendingCount > 0 && (
+              <span className={styles.badge} aria-label={`${pendingCount} pending drafts`}>
+                {pendingCount}
+              </span>
+            )}
+          </NavLink>
+
           <div className={styles.divider} />
 
           <NavLink