Q_UNIFIED_WORKSPACE_V7_11_6_ALT_V4.jsx
Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Current Mockups/Q_UNIFIED_WORKSPACE_V7_11_6_ALT_V4.jsx
ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Current Mockups/Q_UNIFIED_WORKSPACE_V7_11_6_ALT_V4.jsx
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z
---
import { useState, useRef, useEffect, useMemo, useCallback } from "react";
const font={sans:"'IBM Plex Sans','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif",mono:"'SF Mono','Fira Code','Cascadia Code',monospace"};
const R={sm:"6px",md:"10px",full:"9999px"};
const c={bgApp:"#F8F8F6",bgPanel:"#FFFFFF",bgPanelAlt:"#F9FAFB",bgCard:"#FFFFFF",bgInput:"#EFF1F3",bgSidebar:"#131820",textPri:"#1A1D21",textSec:"#5E6570",textTer:"#8B919A",accentBtn:"#31588c",warn:"#D97706",error:"#B04040",border:"#E0E2E5",borderLight:"#ECEEF0",green:"#2E8B57",neutral:"#6B7280",agentAv:"#a1a7aa",borderDark:"#263040",purple:"#7C3AED",incBg:"#2A1F3D",incBorder:"#3d2e5c",incText:"#a78bfa",
// Floating palette colors
fpBg:"#1a1d23",fpBorder:"#2e3340",fpText:"#c8cdd5",fpTextDim:"#6b7280",fpAccent:"#5b8dd9",fpInput:"#252830"};
const Ic=({d,size=18,color,sw=1.75})=><svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color||"currentColor"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d={d}/></svg>;
const I={Search:p=><Ic {...p} d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>,Plus:p=><Ic {...p} d="M12 4.5v15m7.5-7.5h-15"/>,ChevR:p=><Ic {...p} d="m8.25 4.5 7.5 7.5-7.5 7.5"/>,ChevD:p=><Ic {...p} d="m19.5 8.25-7.5 7.5-7.5-7.5"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>,Folder:p=><Ic {...p} d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>,File:p=><Ic {...p} d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>,X:p=><Ic {...p} d="M6 18 18 6M6 6l12 12"/>,Check:p=><Ic {...p} d="m4.5 12.75 6 6 9-13.5"/>,Save:p=><Ic {...p} d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7 M7 3v4a1 1 0 0 0 1 1h7"/>,Trash:p=><Ic {...p} d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>,Copy:p=><Ic {...p} d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/>,Link:p=><Ic {...p} d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/>,Maximize:p=><Ic {...p} d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>,Spark:p=><Ic {...p} d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z M20 2v4 M22 4h-4"/>,MsgCircle:p=><Ic {...p} d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"/>,Undo:p=><Ic {...p} d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"/>,Redo:p=><Ic {...p} d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3"/>,Eye:p=><Ic {...p} d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>,Edit:p=><Ic {...p} d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>,FileText:p=><Ic {...p} d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>,ExtLink:p=><Ic {...p} d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>,Printer:p=><Ic {...p} d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z"/>,Clock:p=><Ic {...p} d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>,ArrowL:p=><Ic {...p} d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>,ArrowR:p=><Ic {...p} d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>,Refresh:p=><Ic {...p} d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>,Star:p=><Ic {...p} d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>,Lock:p=><Ic {...p} d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>,Book:p=><Ic {...p} d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/>,Scissors:p=><Ic {...p} d="M8.12 8.12 12 12 M20 4 8.12 15.88 M14.8 14.8 20 20"/>,Globe:p=><Ic {...p} d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/>,Home:p=><Ic {...p} d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>,Settings:p=><Ic {...p} d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>,Inbox:p=><Ic {...p} d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"/>,Grid:p=><Ic {...p} d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>,Download:p=><Ic {...p} d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/>,List:p=><Ic {...p} d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>,Bell:p=><Ic {...p} d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/>,Zap:p=><Ic {...p} d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/>,Sun:p=><Ic {...p} d="M12 2v2 M12 20v2 m4.93 4.93 1.41 1.41 m17.66 17.66 1.41 1.41 M2 12h2 M20 12h2 m6.34 17.66-1.41 1.41 m19.07 4.93-1.41 1.41"/>,Mail:p=><Ic {...p} d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>,Calendar:p=><Ic {...p} d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>,EyeOff:p=><Ic {...p} d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49 M14.084 14.158a3 3 0 0 1-4.242-4.242 M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143 m2 2 20 20"/>,Mask:p=><Ic {...p} d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"/>,Grip:p=><Ic {...p} d="M3.75 9h16.5m-16.5 6.75h16.5" sw={3}/>,Archive:p=><Ic {...p} d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/>,Sidebar:p=><Ic {...p} d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h14.25c.621 0 1.125.504 1.125 1.125v14.25c0 .621-.504 1.125-1.125 1.125H4.875a1.125 1.125 0 0 1-1.125-1.125V4.875ZM8.25 3.75v16.5"/>,Paperclip:p=><Ic {...p} d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"/>,Compass:p=><Ic {...p} d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"/>,Users:p=><Ic {...p} d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/>,User:p=><Ic {...p} d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>,Database:p=><Ic {...p} d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>,Layers:p=><Ic {...p} d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"/>,CheckSq:p=><Ic {...p} d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"/>,Columns:p=><Ic {...p} d="M3.75 4.5h16.5c.621 0 1.125.504 1.125 1.125v12.75c0 .621-.504 1.125-1.125 1.125H3.75c-.621 0-1.125-.504-1.125-1.125V5.625c0-.621.504-1.125 1.125-1.125ZM12 4.5v15"/>,Keyboard:p=><Ic {...p} d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/>,Camera:p=><Ic {...p} d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"/>,Terminal:p=><Ic {...p} d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/>,Hash:p=><Ic {...p} d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>,Minus:p=><Ic {...p} d="M5 12h14"/>,Send:p=><Ic {...p} d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"/>,Plug:p=><Ic {...p} d="M12 22v-5 M15 8V2 M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1 M9 8V2"/>,Bucket:p=><Ic {...p} d="M4 7a8 4 0 1 0 16 0a8 4 0 1 0 -16 0 M4 7c0 .664 .088 1.324 .263 1.965l2.737 10.035c.5 1.5 2.239 2 5 2s4.5 -.5 5 -2c.333 -1 1.246 -4.345 2.737 -10.035a7.45 7.45 0 0 0 .263 -1.965"/>,ListTodo:p=><Ic {...p} d="M13 5h8 M13 12h8 M13 19h8 M4 4h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z M4 14h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z M3 17l2 2 4-4"/>,Subtask:p=><Ic {...p} d="M6 9l6 0 M4 5l4 0 M6 5v11a1 1 0 0 0 1 1h5 M12 8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z M12 15a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z"/>,ListChecks:p=><Ic {...p} d="M13 5h8 M13 12h8 M13 19h8 m3 17 2 2 4-4 m3 7 2 2 4-4"/>,Dots:p=><Ic {...p} d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" sw={2.5}/>};
const navPageIcons={activity:"Bell",tasks:"Subtask",projects:"Folder",knowledge:"Database",forums:"MsgCircle",agents:"User",skills:"Plug",overlays:"Layers",buckets:"Bucket",settings:"Settings"};
const tabIconMap={note:'FileText',doc:'File',web:'Globe',clips:'Scissors',chat:'MsgCircle',todo:'ListTodo',room:'Users',task:'List',panel:'Grid',forum:'MsgCircle',utility:'Settings'};
const TabIcon=({type,icon,size=12})=>{if(type==="utility"&&icon){const nm=navPageIcons[icon];if(nm){const C=I[nm];return C?<C size={size}/>:null}}const C=I[tabIconMap[type]||'File'];return C?<C size={size}/>:null};
const NavIcon=({id,size=13})=>{const nm=navPageIcons[id];const C=nm?I[nm]:null;return C?<C size={size}/>:null};
const Dot=({color,size=8})=><span style={{display:"inline-flex",width:size,height:size,flexShrink:0}}><span style={{display:"block",width:size,height:size,borderRadius:"50%",backgroundColor:color}}/></span>;
const Toast=({msg,onDone})=>{useEffect(()=>{const t=setTimeout(onDone,2200);return()=>clearTimeout(t)},[onDone]);return <div style={{position:"fixed",bottom:24,left:"50%",transform:"translateX(-50%)",backgroundColor:c.textPri,color:"#fff",padding:"8px 18px",borderRadius:R.md,fontSize:12,fontWeight:500,fontFamily:font.sans,zIndex:9999,boxShadow:"0 4px 16px rgba(0,0,0,0.2)"}}>{msg}</div>};
const TBtn=({icon,title,active,onClick,label,dropdown})=><button onClick={onClick} title={title} style={{padding:label?"3px 8px":"3px 6px",borderRadius:R.sm,border:`1px solid ${active?c.accentBtn+"40":c.borderLight}`,backgroundColor:active?c.accentBtn+"08":"transparent",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:active?c.accentBtn:c.textSec,fontFamily:font.sans,fontSize:10.5,fontWeight:active?600:450,height:26}} onMouseEnter={e=>{if(!active)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{icon}{label&&<span>{label}</span>}{dropdown&&<I.ChevD size={8}/>}</button>;
const Sep=()=><div style={{width:1,height:18,backgroundColor:c.borderLight,margin:"0 3px",flexShrink:0}}/>;
const Btn=({children,primary,ghost,small,onClick,disabled,style:s})=><button onClick={disabled?undefined:onClick} style={{padding:small?"2px 8px":"5px 14px",borderRadius:R.sm,border:primary?"none":`1px solid ${c.border}`,backgroundColor:primary?(disabled?c.accentBtn+"60":c.accentBtn):"transparent",color:primary?"#fff":c.textSec,fontSize:small?11:12.5,fontWeight:primary?550:450,cursor:disabled?"not-allowed":"pointer",fontFamily:font.sans,display:"flex",alignItems:"center",gap:5,height:small?22:28,opacity:disabled?.5:1,...s}}>{children}</button>;
const Av=({letter,color,size=20})=><div style={{width:size,height:size,borderRadius:R.sm,backgroundColor:color||c.accentBtn,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:size*.42,fontWeight:700,flexShrink:0}}>{letter}</div>;
const DItem=({children,onClick,active,disabled})=><button onClick={disabled?undefined:onClick} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"6px 10px",border:"none",cursor:disabled?"default":"pointer",backgroundColor:active?c.accentBtn+"08":"transparent",fontSize:11.5,color:disabled?c.textTer:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:active?600:400,opacity:disabled?.4:1}} onMouseEnter={e=>{if(!active&&!disabled)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{children}</button>;
const Radio=({selected,label,desc,onClick,disabled})=><button onClick={disabled?undefined:onClick} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${selected?c.accentBtn+"50":c.border}`,backgroundColor:selected?c.accentBtn+"06":"transparent",marginBottom:4,cursor:disabled?"default":"pointer",textAlign:"left",fontFamily:font.sans,opacity:disabled?.4:1}}><span style={{width:12,height:12,borderRadius:"50%",border:`2px solid ${selected?c.accentBtn:c.border}`,backgroundColor:selected?c.accentBtn:"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>{selected&&<span style={{width:4,height:4,borderRadius:"50%",backgroundColor:"#fff"}}/>}</span><div style={{flex:1}}><div style={{fontSize:11,fontWeight:selected?600:450,color:selected?c.accentBtn:c.textPri}}>{label}</div>{desc&&<div style={{fontSize:9,color:c.textTer,marginTop:1}}>{desc}</div>}</div></button>;
const DragHandle=()=><div style={{width:14,display:"flex",alignItems:"center",justifyContent:"center",cursor:"grab",opacity:0.18,flexShrink:0,marginRight:2}} onMouseEnter={e=>e.currentTarget.style.opacity=0.55} onMouseLeave={e=>e.currentTarget.style.opacity=0.18}><I.Grip size={12} color={c.textTer}/></div>;
// ═══ DATA ═══
const agentName="Elnor";
const agents=[{name:"Elnor",color:c.agentAv,letter:"E"},{name:"Scout",color:"#5B5F97",letter:"S"}];
const chats=[{name:"Paramount damages",color:c.accentBtn,origin:true},{name:"Brooge causation",color:c.green},{name:"New chat",color:c.textTer}];
const typeColors={Note:c.accentBtn,Chat:c.green,Doc:c.textTer,Task:c.warn,Artifact:"#8B5CF6",Prompt:"#D97706",Preset:c.neutral,Skill:c.neutral,Agent:"#5B5F97",Overlay:"#9333EA",Template:"#0891B2",Chain:"#DC2626",Memory:c.green,Room:"#6366F1",Bookmark:c.warn};
const projects=[{id:1,name:"Paramount v. City of LA",color:"#31588c"},{id:2,name:"White v. Brooge Energy",color:"#2E8B57"},{id:3,name:"Internal Ops",color:"#8B7355"}];
const collections=[{name:"Priority",color:"#B04040"},{name:"Research",color:"#2E8B57"},{name:"Draft",color:"#D97706"},{name:"Archive",color:"#6B7280"},{name:"Urgent",color:"#9E5E5E"},{name:"Reference",color:"#5B5F97"}];
const scopeFams=["Collection","Project","Bucket","Places","Saved Views"];
const typeChips=["Document","Chat","Preset","Skill","Task","Agent","Overlay","Note","Artifact","Prompt","Template","Chain","Memory","Room","Bookmark","Panel","Forum","To Do"];
const sortOptions=["Modified","Alphabetical","Type","Created","Running"];
const savedViews=[{id:"sv1",name:"Recent",sys:true},{id:"sv2",name:"Deadlines this week",sys:false},{id:"sv3",name:"Active matters",sys:false}];
const tabColors={note:"#31588c",doc:"#2E8B57",web:"#64748B",clips:"#7C3AED",chat:"#1a5276",room:"#6366F1",task:"#D97706",todo:"#0891B2",utility:c.neutral};
const groupColors=["#EF4444","#F97316","#22C55E","#3B82F6","#8B5CF6","#6B7280"];
const recentConvos=[{id:"cv1",name:"Paramount damages strategy",color:c.accentBtn,time:"1h",starred:true},{id:"cv2",name:"Brooge loss causation",color:c.green,time:"3h",starred:true},{id:"cv3",name:"Expert depo prep",color:c.warn,time:"1d"},{id:"cv4",name:"Trial brief §III draft",color:c.accentBtn,time:"1d"},{id:"cv5",name:"Signage rights research",color:"#5B5F97",time:"2d"},{id:"cv6",name:"Patent landscape scan",color:c.green,time:"3d"}];
// V7.4: "Knowledge Manager" → "Knowledge"
const navPages=[{id:"activity",label:"Activity & Notifications"},{id:"tasks",label:"Tasks"},{id:"projects",label:"Projects"},{id:"knowledge",label:"Knowledge"},{id:"forums",label:"Forums & Panels"},{id:"agents",label:"Agents"},{id:"skills",label:"Skills & Connectors"},{id:"overlays",label:"Overlays & Prompts"},{id:"buckets",label:"Context Buckets"},{id:"settings",label:"Settings"}];
const feedPresets=[{id:"fp1",name:"System Activity",icon:"spark",desc:"Agent completions, memory updates",category:"system"},{id:"fp2",name:"System Notices",icon:"bell",desc:"Errors, warnings, sync issues",category:"system"},{id:"fp3",name:"Gate Approvals",icon:"check",desc:"Pending chain gates",category:"system"},{id:"fp4",name:"Active Operations",icon:"zap",desc:"Running agents and tasks",category:"system"},{id:"fp5",name:"Morning Summary",icon:"sun",desc:"Daily briefing — priorities",category:"agent"},{id:"fp6",name:"Email Watch",icon:"mail",desc:"Flag important emails",category:"agent"},{id:"fp7",name:"Deadline Tracker",icon:"calendar",desc:"Calendar deadlines",category:"agent"}];
const feedIcons={spark:<I.Spark size={11} color={c.agentAv}/>,bell:<I.Bell size={11} color={c.warn}/>,check:<I.Check size={11} color={c.green}/>,zap:<I.Zap size={11} color={c.accentBtn}/>,sun:<I.Sun size={11} color={c.warn}/>,mail:<I.Mail size={11} color={c.accentBtn}/>,calendar:<I.Calendar size={11} color={c.error}/>};
const initPlaces=[{id:"p1",title:"Paramount Case Files",path:"~/OneDrive-schallfirm/Paramount",status:"ok"},{id:"p2",title:"Firm Templates",path:"~/OneDrive-schallfirm/Templates",status:"ok"},{id:"p3",title:"Local Research",path:"~/Documents/Research",status:"ok"},{id:"p4",title:"Archived Cases",path:"/Volumes/External/Cases",status:"missing"}];
const placeContents={root:[{name:"Expert_Reports",isFolder:true},{name:"Exhibits",isFolder:true},{name:"Paramount_Complaint.pdf",type:"PDF",size:"2.4 MB",mod:"1d"},{name:"Privilege_Log_v4.docx",type:"DOCX",size:"340 KB",mod:"3h"}],Expert_Reports:[{name:"Sanli_Report.pdf",type:"PDF",size:"1.2 MB",mod:"1w"},{name:"Christensen_CV.pdf",type:"PDF",size:"890 KB",mod:"2w"}],Exhibits:[{name:"Exhibit_A.pdf",type:"PDF",size:"3.1 MB",mod:"3d"}]};
const allItems=[{type:"Note",title:"Today — April 4, 2026",time:"2h",pin:true,proj:1,cols:["Priority"]},{type:"Note",title:"Trial Prep Checklist",time:"4h",pin:true,proj:1,cols:[]},{type:"Doc",title:"Sanli Expert Report.pdf",time:"10m",proj:1,cols:["Priority"]},{type:"Artifact",title:"Motion in Limine No. 3",time:"1d",proj:1,cols:[]},{type:"Doc",title:"Christensen_CV.pdf",time:"1d",proj:1,cols:["Reference"]},{type:"Note",title:"Brooge Loss Causation",time:"1d",proj:2,cols:["Research"]},{type:"Task",title:"Review Sanli depo",time:"2h",proj:1,st:"running",cols:[]},{type:"Chat",title:"Paramount damages",time:"1h",proj:1,cols:["Priority"]},{type:"Artifact",title:"Fair Fund — Brooge",time:"2h",proj:2,cols:[]},{type:"Doc",title:"BC587659_MIL_3.pdf",time:"2d",proj:1,cols:[]},{type:"Task",title:"Draft trial brief §III",time:"4h",proj:1,st:"waiting",cols:["Priority"]},{type:"Prompt",title:"Expert Analysis Template",time:"1w",proj:null,cols:[]},{type:"Preset",title:"Legal Brief Review",time:"1w",proj:null,cols:[]},{type:"Doc",title:"Standing_Orders.md",time:"3d",proj:null,cols:["Reference"]}];
const timeVal=t=>{if(t.includes("m"))return parseInt(t);if(t.includes("h"))return parseInt(t)*60;if(t.includes("d"))return parseInt(t)*1440;if(t.includes("w"))return parseInt(t)*10080;return 99999};
const initTabs=[{id:"t1",type:"note",icon:"note",title:"Today — April 4, 2026",color:tabColors.note,group:"g1"},{id:"t2",type:"doc",icon:"doc",title:"Sanli Expert Report.pdf",color:tabColors.doc},{id:"t3",type:"web",icon:"web",title:"Paramount MIL — PACER",color:tabColors.web,group:"g1"},{id:"t4",type:"clips",icon:"clips",title:"Clips: 4.4-1",color:tabColors.clips},{id:"t5",type:"chat",icon:"chat",title:"Paramount damages",color:tabColors.chat}];
const initGroups=[{id:"g1",label:"Paramount Research",color:"#22C55E",collapsed:false}];
const initComments=[{id:"c1",author:"You",color:c.accentBtn,body:"Verify Sanli's discount rate — 18% seems unsupported.",time:"10m ago",status:"open",anchor:"discount rate of 18%",replies:[{id:"r1",author:agentName,color:c.agentAv,body:"Found 3 comparables: avg 8-12%. Sanli's 18% is an outlier.",time:"5m ago"}]},{id:"c2",author:"You",color:c.accentBtn,body:"Cross-ref with Christensen methodology.",time:"8m ago",status:"open",anchor:"willing buyer-willing seller",replies:[]},{id:"c3",author:agentName,color:c.agentAv,body:"Sargon gatekeeper standard briefed in §II.",time:"6m ago",status:"resolved",anchor:"Legal Standard",replies:[]}];
const tcColors={You:{del:c.accentBtn,ins:c.accentBtn},Agent:{del:"#B04040",ins:"#2E8B57"}};
const initChanges=[{id:"tc1",segId:"s4",author:"Agent",oldText:"discussing litigation posture",newText:"discussing litigation posture and insurance coverage",status:"pending"},{id:"tc2",segId:"s7",author:"You",oldText:"Prepare updated privilege log",newText:"Prepare updated privilege log with Bates-stamp cross-refs",status:"pending"}];
const noteSegs=[{id:"s1",t:"p",v:"Trial May 4 — 30 days out. Focus items for today."},{id:"s2",t:"h2",v:"Expert Motions"},{id:"s3",t:"p",v:"Finalize MIL No. 3 — Sanli discount rate argument."},{id:"s4",t:"p",v:"Cross-reference discussing litigation posture with Christensen opinions."},{id:"s7",t:"h2",v:"Next Steps"},{id:"s8",t:"p",v:"Prepare updated privilege log with all newly identified documents."}];
const initBlocks=[{id:"b2",type:"todo",title:"To Do",collapsed:false,tasks:[{id:"t1",text:"Finalize MIL No. 3 re: Sanli",done:false,due:"Apr 7",sub:[{id:"s1",text:"Pull Sanli discount rate comparables",done:true},{id:"s2",text:"Draft Sargon gatekeeper argument",done:false}]},{id:"t2",text:"Review Christensen engagement",done:true,due:"Apr 3",sub:[]},{id:"t3",text:"Prep Sanli depo cross-exam",done:false,due:"Apr 10",sub:[]},{id:"t4",text:"File trial exhibit list",done:true,due:"Apr 1",sub:[]}]},{id:"b3",type:"thread",collapsed:false,contextQuote:"Sanli discount rate",messages:[{id:"m1",author:"You",color:c.accentBtn,body:"@Agent find comparable signage transactions with discount rates",time:"45m"},{id:"m2",author:"Agent",color:c.agentAv,body:"Found 3 comparables: avg 8-12%. Sanli's 18% is unsupported. See attached analysis.",time:"40m"}]},{id:"b5",type:"feed",title:"Activity Brief",collapsed:false,sections:[{key:"elnor",icon:"spark",label:"Agent",items:[{text:"Reviewed 3 depo transcripts — flagged 2 issues",time:"5h"},{text:"Updated patent landscape — 4 new filings",time:"4h"}]},{key:"system",icon:"bell",label:"System",items:[{text:"OneDrive sync paused — re-auth needed",time:"6h",accent:c.warn}]}]}];
const initNoteFolders=[{id:"nf1",title:"Case Notes",parent:null},{id:"nf2",title:"Paramount",parent:"nf1"},{id:"nf3",title:"Brooge",parent:"nf1"},{id:"nf4",title:"Session Notes",parent:null}];
const initNotes=[{id:"n1",title:"Today — April 4, 2026",mod:"2h",pinned:true,folder:"nf2",comments:2},{id:"n2",title:"Trial Prep Checklist",mod:"4h",pinned:true,folder:"nf2",comments:0},{id:"n3",title:"Danny Christensen",mod:"3d",folder:"nf2",comments:1},{id:"n4",title:"Brooge Loss Causation",mod:"1d",folder:"nf3",comments:0},{id:"n5",title:"Clips: 4.4-1",mod:"2h",folder:"nf4",comments:0}];
const initBrowserFolders=[{id:"f1",title:"Paramount Case",parent:null},{id:"f2",title:"Expert Reports",parent:"f1"},{id:"f3",title:"Motion Practice",parent:"f1"},{id:"f4",title:"Brooge Research",parent:null}];
const initBookmarks=[
{id:"bm0",title:"Bookmarks Bar",parent:null,isBar:true,items:[{id:"bar1",title:"PACER",url:"pacer.uscourts.gov",color:"#1a5276"},{id:"bar2",title:"Westlaw",url:"westlaw.com",color:"#8B0000"},{id:"bar3",title:"EDGAR",url:"sec.gov",color:"#1B4F72"},{id:"bar4",title:"Bloomberg",url:"bloomberglaw.com",color:"#000"}]},
{id:"bm1",title:"Legal Research",parent:null,items:[{id:"bi1",title:"PACER — CACD",url:"pacer.uscourts.gov",color:"#1a5276"},{id:"bi2",title:"Westlaw",url:"westlaw.com",color:"#8B0000"},{id:"bi3",title:"CM/ECF Login",url:"ecf.cacd.uscourts.gov",color:"#2c3e50"},{id:"bi4",title:"EDGAR Full-Text",url:"sec.gov",color:"#1B4F72"}]},
{id:"bm2",title:"Clients",parent:null,items:[{id:"bi5",title:"Paramount SharePoint",url:"schallfirm.sharepoint.com",color:"#0078d4"},{id:"bi6",title:"Brooge Portal",url:"brooge.com",color:"#2E8B57"}]},
{id:"bm3",title:"Reference",parent:null,items:[{id:"bi7",title:"Cal. Rules of Court",url:"courts.ca.gov",color:"#8B7355"},{id:"bi8",title:"LAMC Full Text",url:"codelibrary.amlegal.com",color:"#6B7280"}]},
{id:"bm4",title:"Daily",parent:"bm1",items:[{id:"bi9",title:"Bloomberg Law",url:"bloomberglaw.com",color:"#000"}]}
];
// Floating palette chat history
const initFpMessages=[
{id:"fp1",from:"You",text:"What's the strongest Sargon argument against Sanli?",time:"2:14 PM"},
{id:"fp2",from:"Elnor",text:"Three comparable signage transactions show discount rates of 8-12%. Sanli's 18% is an unsupported outlier — this is a textbook Sargon gatekeeper exclusion.",time:"2:14 PM"},
{id:"fp3",from:"You",text:"Pull the exact cite from Sargon for the brief.",time:"2:16 PM"},
{id:"fp4",from:"Elnor",text:"Sargon Enterprises, Inc. v. University of Southern California (2012) 55 Cal.4th 747, 770: \"the trial court acts as a gatekeeper to exclude expert opinion testimony that is (1) based on matter of a type on which an expert may not reasonably rely, (2) based on reasons unsupported by the material on which the expert relies, or (3) speculative.\"",time:"2:16 PM"},
];
// V7.9: Unified To Do lists — first-class entities, viewable from palette / notes / standalone tabs
const initFpTodoLists=[
{id:"tl1",name:"Daily",noteId:"n2",tasks:[{id:"td1",text:"File exhibit list amendment",done:false,sub:[]},{id:"td2",text:"Review Sanli depo transcript pp. 40-80",done:false,sub:[{id:"tds1",text:"Flag discount rate testimony",done:true},{id:"tds2",text:"Note methodology admissions",done:false}]},{id:"td3",text:"Send Christensen CV to co-counsel",done:true,sub:[]},{id:"td4",text:"Pull Sargon gatekeeper cases",done:true,sub:[]}]},
{id:"tl2",name:"Trial Prep",noteId:"n2",tasks:[{id:"td5",text:"Witness list finalization",done:false,sub:[]},{id:"td6",text:"Jury instructions draft",done:false,sub:[]},{id:"td7",text:"Trial binder assembly",done:true,sub:[]}]}
];
// Calendar module data
const calViews=["All","Paramount","Brooge","Personal"];
const calModes=["Month","Week","Day","List"];
const outlookCals=[{id:"ol1",name:"Will Schall — Main",linked:true,sync:"bidirectional"},{id:"ol2",name:"Paramount v. City of LA",linked:true,sync:"push_to_outlook"},{id:"ol3",name:"White v. Brooge Energy",linked:true,sync:"pull_only"},{id:"ol4",name:"Firm Shared",linked:false,sync:"none"},{id:"ol5",name:"Personal",linked:false,sync:"none"}];
const reminderTimings=["At time of event","5 minutes before","15 minutes before","30 minutes before","1 hour before","2 hours before","1 day before","2 days before","1 week before"];
const reminderMethods=["Q Notification","Email","Discord","SMS"];
const initCalEvents=[
{id:"ce1",title:"Trial — Paramount v. City of LA",date:"2026-05-04",time:"09:00",endTime:"17:00",cal:"Paramount",color:"#31588c",location:"LASC Dept. 47",notes:"Trial Day 1. Bring binders.",reminders:[{timing:"1 day before",method:"Email"},{timing:"1 hour before",method:"Q Notification"}],allDay:false,recurring:null},
{id:"ce2",title:"Sanli Depo — Cross Exam",date:"2026-04-10",time:"10:00",endTime:"12:00",cal:"Paramount",color:"#31588c",location:"Schall Firm Conference Room",notes:"Focus on discount rate methodology",reminders:[{timing:"1 day before",method:"Email"},{timing:"15 minutes before",method:"Q Notification"}],allDay:false},
{id:"ce3",title:"Expert Disclosure Deadline",date:"2026-04-07",time:null,endTime:null,cal:"Paramount",color:"#B04040",location:"",notes:"CCP §2034 deadline — Christensen",reminders:[{timing:"2 days before",method:"Email"},{timing:"1 day before",method:"Discord"}],allDay:true},
{id:"ce4",title:"Brooge Hearing — Loss Causation",date:"2026-04-14",time:"14:00",endTime:"15:30",cal:"Brooge",color:"#2E8B57",location:"S.D.N.Y. Courtroom 15B",notes:"",reminders:[{timing:"1 day before",method:"Email"}],allDay:false},
{id:"ce5",title:"File Trial Exhibit List",date:"2026-04-08",time:null,endTime:null,cal:"Paramount",color:"#D97706",location:"",notes:"Via CM/ECF",reminders:[{timing:"1 day before",method:"Q Notification"}],allDay:true},
{id:"ce6",title:"Team Sync",date:"2026-04-05",time:"11:00",endTime:"11:30",cal:"Personal",color:"#6B7280",location:"Zoom",notes:"Weekly standup",reminders:[{timing:"15 minutes before",method:"Q Notification"}],allDay:false,recurring:"weekly"},
{id:"ce7",title:"MIL No. 3 Filing Deadline",date:"2026-04-11",time:null,endTime:null,cal:"Paramount",color:"#B04040",location:"",notes:"Motion in Limine re: Sanli",reminders:[{timing:"2 days before",method:"Email"},{timing:"1 day before",method:"Discord"},{timing:"1 hour before",method:"Q Notification"}],allDay:true},
{id:"ce8",title:"Privilege Log Review",date:"2026-04-09",time:"14:00",endTime:"16:00",cal:"Paramount",color:"#31588c",location:"",notes:"v4 with Bates stamps",reminders:[],allDay:false},
];
export default function UnifiedWorkspaceV74(){
const idC=useRef(500);const nid=()=>"x"+(++idC.current);
// Tabs
const [tabs,setTabs]=useState(initTabs);const [tabGroups,setTabGroups]=useState(initGroups);
const [activeTabId,setActiveTabId]=useState("t1");const [selectedTabs,setSelectedTabs]=useState(new Set());
const [tabContextMenu,setTabContextMenu]=useState(null);const [newTabDrop,setNewTabDrop]=useState(false);
const [dragTabId,setDragTabId]=useState(null);const [groupCtx,setGroupCtx]=useState(null);
// V7.4: split screen
const [splitMode,setSplitMode]=useState(false);const [splitActiveTabId,setSplitActiveTabId]=useState(null);
const [splitFocus,setSplitFocus]=useState("left"); // which pane has focus
const [splitWidth,setSplitWidth]=useState(50); // right pane percentage
const [splitTabs,setSplitTabs]=useState([]); // tabs in right pane
const [splitNewTabDrop,setSplitNewTabDrop]=useState(false);
const [splitRightOpen,setSplitRightOpen]=useState(false);const [splitRightTab,setSplitRightTab]=useState("send");
// Browser
const [browserOpen,setBrowserOpen]=useState(true);const [browserWidth,setBrowserWidth]=useState(280);
const [browserMode,setBrowserMode]=useState("browser");
const [activeScope,setActiveScope]=useState(null);const [activeProjIdx,setActiveProjIdx]=useState(0);const [noProject,setNoProject]=useState(false);
const [activeTypes,setActiveTypes]=useState(new Set());const [selectedCollections,setSelectedCollections]=useState(new Set());
const [splitterPos,setSplitterPos]=useState(150);const [selectedIdx,setSelectedIdx]=useState(null);
const [browserFolders,setBrowserFolders]=useState(initBrowserFolders);const [expandedFolders,setExpandedFolders]=useState(new Set(["f1"]));
const [activeFolder,setActiveFolder]=useState(null);const [hoverFolder,setHoverFolder]=useState(null);
const [newFolderMode,setNewFolderMode]=useState(null);const [newFolderName,setNewFolderName]=useState("");
const [deletingFolder,setDeletingFolder]=useState(null);
const [searchMode,setSearchMode]=useState("this_view");const [sortKey,setSortKey]=useState("Modified");const [sortDrop,setSortDrop]=useState(false);
const [folderOverlay,setFolderOverlay]=useState(false);const [dropTarget,setDropTarget]=useState(null);const [dragItem,setDragItem]=useState(null);
const [places,setPlaces]=useState(initPlaces);const [activePlace,setActivePlace]=useState(null);const [placePath,setPlacePath]=useState([]);
const [hoverPlace,setHoverPlace]=useState(null);const [placeCollections]=useState([{name:"All",color:null},{name:"Active Cases",color:"#31588c"},{name:"Research",color:"#2E8B57"},{name:"Templates",color:"#D97706"}]);const [placeCollectionFilter,setPlaceCollectionFilter]=useState("All");const [placeCollDrop,setPlaceCollDrop]=useState(false);const [removingPlace,setRemovingPlace]=useState(null);
const [activeSavedView,setActiveSavedView]=useState(null);const [userSavedViews,setUserSavedViews]=useState([]);
const [saveFromBar,setSaveFromBar]=useState(false);const [saveViewName,setSaveViewName]=useState("");
// Notes browser
const [noteFolders,setNoteFolders]=useState(initNoteFolders);const [noteExpandedFolders,setNoteExpandedFolders]=useState(new Set(["nf1"]));
const [notes]=useState(initNotes);const [selectedNote,setSelectedNote]=useState("n1");
const [noteSearch,setNoteSearch]=useState("");const [noteSort,setNoteSort]=useState("Modified");const [noteSortDrop,setNoteSortDrop]=useState(false);
const [allNotesSort,setAllNotesSort]=useState("Modified");const [allNotesSortDrop,setAllNotesSortDrop]=useState(false);
const [noteNewFolderMode,setNoteNewFolderMode]=useState(null);const [noteNewFolderName,setNoteNewFolderName]=useState("");
const [noteHoverFolder,setNoteHoverFolder]=useState(null);
const [renamingNoteFolder,setRenamingNoteFolder]=useState(null);const [renamingNoteFolderText,setRenamingNoteFolderText]=useState("");
const [deletingNoteFolder,setDeletingNoteFolder]=useState(null);
const [noteSplitterPos,setNoteSplitterPos]=useState(140);const [showArchived,setShowArchived]=useState(false);const [noteContextMenu,setNoteContextMenu]=useState(null);
// V7.9.2: Notes browser scope (Notes / To Do / Calendars)
const [noteBrowserScope,setNoteBrowserScope]=useState(new Set(["notes","todo","calendars"]));
// Bookmarks
const [bmExpanded,setBmExpanded]=useState(new Set(["bm1"]));
const [bmFolders,setBmFolders]=useState(initBookmarks);
const [bmHoverFolder,setBmHoverFolder]=useState(null);const [bmHoverItem,setBmHoverItem]=useState(null);
const [bmRenamingFolder,setBmRenamingFolder]=useState(null);const [bmRenamingText,setBmRenamingText]=useState("");
const [bmDeletingFolder,setBmDeletingFolder]=useState(null);
const [bmNewFolderMode,setBmNewFolderMode]=useState(null);const [bmNewFolderName,setBmNewFolderName]=useState("");
const [bmRenamingItem,setBmRenamingItem]=useState(null);const [bmRenamingItemText,setBmRenamingItemText]=useState("");
const [bmSearch,setBmSearch]=useState("");const [bmSplitterPos,setBmSplitterPos]=useState(180);
// V7.11.6 Alt V3: Recent pages collapsible
const [recentPagesCollapsed,setRecentPagesCollapsed]=useState(true);
const [bmItemCtx,setBmItemCtx]=useState(null); // {x,y,folderId,itemId}
// V7.4: bookmarks bar visibility
const [bmBarVisible,setBmBarVisible]=useState(true);
// Right panel — V7.4: per-tab state
const [rightOpen,setRightOpen]=useState(false);const [rightTab,setRightTab]=useState("comments");const [rightWidth,setRightWidth]=useState(290);
const [comments,setComments]=useState(initComments);const [activeComment,setActiveComment]=useState(null);
const [replyingTo,setReplyingTo]=useState(null);const [replyText,setReplyText]=useState("");
const [editingId,setEditingId]=useState(null);const [editText,setEditText]=useState("");const [deletingId,setDeletingId]=useState(null);
const [newCm,setNewCm]=useState(null);const [newCmText,setNewCmText]=useState("");
// V7.4: Simplified Ask panel state
const [agentIdx,setAgentIdx]=useState(0);const [agentDrop,setAgentDrop]=useState(false);
const [askSendIn,setAskSendIn]=useState("inline"); // inline | existing | new
const [askChatIdx,setAskChatIdx]=useState(0);const [askChatDrop,setAskChatDrop]=useState(false);
const [askScope,setAskScope]=useState("doc_only"); // doc_only | all_comments | select
const [selectedCmIds,setSelectedCmIds]=useState(new Set());
const [askInstruction,setAskInstruction]=useState("");
const [askIncludeClips,setAskIncludeClips]=useState(false);
const [askConfigCollapsed,setAskConfigCollapsed]=useState(false);
const [agentResponse,setAgentResponse]=useState(null);
// Content
const [showMarkup,setShowMarkup]=useState(true);const [findBar,setFindBar]=useState(false);
const [pinned,setPinned]=useState(false);const [bookmarked,setBookmarked]=useState(false);const [readerMode,setReaderMode]=useState(false);
const [openDrop,setOpenDrop]=useState(null);const [bubbleMenu,setBubbleMenu]=useState(null);
const [changes,setChanges]=useState(initChanges);
// V7.4: doc title right-click menu
const [docTitleMenu,setDocTitleMenu]=useState(null);
// Blocks
const [blocks,setBlocks]=useState(initBlocks);const [expandedTask,setExpandedTask]=useState(null);
const [threadReplyId,setThreadReplyId]=useState(null);const [threadReplyText,setThreadReplyText]=useState("");
const [newTaskText,setNewTaskText]=useState("");const [newSubText,setNewSubText]=useState({});
const [collapsedFeeds,setCollapsedFeeds]=useState(new Set());const [editingTitle,setEditingTitle]=useState(null);
const [pickerOpen,setPickerOpen]=useState(false);const [pickerStep,setPickerStep]=useState("choose");const [pickerTab,setPickerTab]=useState("system");
const [customName,setCustomName]=useState("");const [customInstruction,setCustomInstruction]=useState("");const [insertionPoint,setInsertionPoint]=useState(null);
const [showDownloads,setShowDownloads]=useState(false);
const [chatColumnOpen,setChatColumnOpen]=useState(false);
const [sessionMinutes,setSessionMinutes]=useState(47);const [clipsCount,setClipsCount]=useState(2);
// V7.4: zoom slider
const [zoomLevel,setZoomLevel]=useState(100);
// V7.4: floating palette
const [fpOpen,setFpOpen]=useState(false);const [fpMode,setFpMode]=useState("chat");const [fpSidebarOpen,setFpSidebarOpen]=useState(false);const [fpSidebarMode,setFpSidebarMode]=useState(null);const [fpPinned,setFpPinned]=useState(false);const [fpSilent,setFpSilent]=useState(false);const [fpNoticeFilter,setFpNoticeFilter]=useState("all");const [fpNotices]=useState([{id:"fn1",source:"Calendar",color:"#D97706",title:"Trial prep deadline tomorrow",desc:"File exhibit list amendment by Apr 7",time:"12m",unread:true,snoozed:false},{id:"fn2",source:"Elnor",color:"#7C3AED",title:"Depo transcript review complete",desc:"Flagged 2 issues in Sanli transcript pp. 40-80",time:"1h",unread:true,snoozed:false},{id:"fn3",source:"Email",color:"#3B82F6",title:"New email from co-counsel",desc:"RE: Christensen expert engagement — action needed",time:"2h",unread:false,snoozed:false},{id:"fn4",source:"System",color:"#6B7280",title:"OneDrive sync restored",desc:"Paramount case files re-synced at 2:45 PM",time:"3h",unread:false,snoozed:false}]);
const [fpMessages,setFpMessages]=useState(initFpMessages);const [fpInput,setFpInput]=useState("");
const [fpNoteText,setFpNoteText]=useState("");const [fpCmdSearch,setFpCmdSearch]=useState("");
// V7.9.3: Note selector for palette
const [fpSelectedNoteId,setFpSelectedNoteId]=useState("n1");const [fpNoteListDrop,setFpNoteListDrop]=useState(false);const [fpNoteNewMode,setFpNoteNewMode]=useState(false);const [fpNoteNewName,setFpNoteNewName]=useState("");
const [fpScreenCapture,setFpScreenCapture]=useState(false);
// V7.9.4: Chat selector for palette
const [fpSelectedChatId,setFpSelectedChatId]=useState("quick");const [fpChatListDrop,setFpChatListDrop]=useState(false);
const fpChatList=[{id:"quick",name:"Quick Chat",pinned:true,time:"now"},...recentConvos.slice(0,9).map(cv=>({id:cv.id,name:cv.name,pinned:false,time:cv.time,color:cv.color}))];
const [fpChatRenaming,setFpChatRenaming]=useState(false);const [fpChatRenameText,setFpChatRenameText]=useState("");
// V7.6.9: Todo tab state
const [fpTodoLists,setFpTodoLists]=useState(initFpTodoLists);const [fpActiveTodoList,setFpActiveTodoList]=useState("tl1");
const [fpTodoNewItem,setFpTodoNewItem]=useState("");const [fpTodoDoneOpen,setFpTodoDoneOpen]=useState(false);
const [fpTodoListDrop,setFpTodoListDrop]=useState(false);const [fpTodoNewListMode,setFpTodoNewListMode]=useState(false);const [fpTodoNewListName,setFpTodoNewListName]=useState("");
const [fpTodoRenaming,setFpTodoRenaming]=useState(false);const [fpTodoRenameText,setFpTodoRenameText]=useState("");
const [fpTodoExpanded,setFpTodoExpanded]=useState(new Set());const [fpTodoNewSub,setFpTodoNewSub]=useState({});
const [fpTodoEditingId,setFpTodoEditingId]=useState(null);const [fpTodoEditText,setFpTodoEditText]=useState("");
// V7.6.9: Key capture for shortcut command
const [fpKeyCapture,setFpKeyCapture]=useState(false);const [fpCapturedKey,setFpCapturedKey]=useState("⌥Space");
// V7.8: Calendar module state
const [calEvents,setCalEvents]=useState(initCalEvents);const [calViewFilter,setCalViewFilter]=useState("All");const [calMode,setCalMode]=useState("Month");
const [calSelectedEvent,setCalSelectedEvent]=useState(null);const [calNewEvent,setCalNewEvent]=useState(null);
const [calSettingsOpen,setCalSettingsOpen]=useState(false);const [calSettingsTab,setCalSettingsTab]=useState("instructions");
const [calViewDrop,setCalViewDrop]=useState(false);const [calMonth,setCalMonth]=useState(3);const [calYear,setCalYear]=useState(2026);
const [calAgentActive,setCalAgentActive]=useState(true);const [calAgentInstructions,setCalAgentInstructions]=useState("Check my Outlook calendars every 24 hours. Pull any new case deadlines. Add to-do items with due dates. Send me a Discord ping for anything within 48 hours. Include today's events in morning summary.");
const [calExcludeFromMaster,setCalExcludeFromMaster]=useState(new Set());const [calOutlookCals,setCalOutlookCals]=useState(outlookCals);
const [calSearch,setCalSearch]=useState("");const [calSearchOpen,setCalSearchOpen]=useState(false);
const [calCustomViews,setCalCustomViews]=useState([]);const [calNewCalName,setCalNewCalName]=useState("");const [calNewCalMode,setCalNewCalMode]=useState(false);
const [calAgentIdx,setCalAgentIdx]=useState(0);const [calModelIdx,setCalModelIdx]=useState(0);const [calThinkLevel,setCalThinkLevel]=useState("standard");
const [calListDays,setCalListDays]=useState(10);const [calListMax,setCalListMax]=useState(20);
const [calExcludeMap,setCalExcludeMap]=useState({});
// V7.9: Task date/reminder popover
const [taskDatePopover,setTaskDatePopover]=useState(null);// {blockId, taskId} or {listId, taskId} for palette
const [taskDateData,setTaskDateData]=useState({date:"",time:"",cal:"",reminders:[]});
const [todoListDefaults,setTodoListDefaults]=useState({cal:"",reminders:[]});const [todoDefaultsOpen,setTodoDefaultsOpen]=useState(false);
// V7.9: Palette list-level defaults
const [fpTodoDefaultsOpen,setFpTodoDefaultsOpen]=useState(false);
// V7.9.1: Standalone tab list selection (shared pool)
const [tabTodoListId,setTabTodoListId]=useState("tl1");const [tabTodoListDrop,setTabTodoListDrop]=useState(false);
// V7.4: Nav tab groups expanded
const [navTabGroupsOpen,setNavTabGroupsOpen]=useState(false);
// V7.11.6 Alt: Vertical tabs, workspaces, collapsible nav sections
const [showHorizontalTabs,setShowHorizontalTabs]=useState(true);
const [navPagesCollapsed,setNavPagesCollapsed]=useState(false);
const [navTabsCollapsed,setNavTabsCollapsed]=useState(false);
const [navWorkspacesCollapsed,setNavWorkspacesCollapsed]=useState(false);
const [chatsExpanded,setChatsExpanded]=useState(false);
const [navPagesDividerPos,setNavPagesDividerPos]=useState(null); // null = auto
const [browserAutoSwitch,setBrowserAutoSwitch]=useState(true); // true = auto switch browser mode based on tab type
const [workspaces,setWorkspaces]=useState([
{id:"ws_scratch",name:null,saved_at:new Date(Date.now()-3600000).toISOString(),color:null,tabs:[],activeTabId:null,splitMode:false,splitTabs:[],browserMode:"nav",isUnsaved:true},
{id:"ws1",name:"Henderson Trial",saved_at:"2026-04-07T14:30:00Z",color:"#D97706",tabs:["t1","t2","t3"],activeTabId:"t1",splitMode:false,splitTabs:[],browserMode:"nav",isUnsaved:false},
{id:"ws2",name:"Brooge Discovery",saved_at:"2026-04-06T09:15:00Z",color:"#31588c",tabs:[],activeTabId:null,splitMode:false,splitTabs:[],browserMode:"browser",isUnsaved:false},
{id:"ws3",name:"Daily Workflow",saved_at:"2026-04-08T08:00:00Z",color:"#2E8B57",tabs:[],activeTabId:null,splitMode:false,splitTabs:[],browserMode:"nav",isUnsaved:false},
]);
const [activeWorkspaceId,setActiveWorkspaceId]=useState(null); // null = not in named workspace
const [navTabSearch,setNavTabSearch]=useState("");
const [navTabSearchOpen,setNavTabSearchOpen]=useState(false);
// V7.11.6 Alt V3: Context menus for vertical tabs, groups, workspaces
const [navTabCtx,setNavTabCtx]=useState(null); // {x,y,tabId,pane:"left"|"right"}
const [navGroupCtx,setNavGroupCtx]=useState(null); // {x,y,gid}
const [navWsCtx,setNavWsCtx]=useState(null); // {x,y,wsId}
const [navGroupListOpen,setNavGroupListOpen]=useState(false); // 3-dot dropdown for tab groups button
const [navWsDividerPos,setNavWsDividerPos]=useState(null); // adjustable divider between tabs and workspaces
const [toast,setToast]=useState(null);
const editorRef=useRef(null);const cmRef=useRef(null);const nfRef=useRef(null);
const flash=msg=>setToast(msg);const agent=agents[agentIdx];
const activeTab=tabs.find(t=>t.id===activeTabId)||tabs[0];
const openC=comments.filter(x=>x.status==="open");const resolvedC=comments.filter(x=>x.status==="resolved");
const isNoteType=activeTab.type==="note"||activeTab.type==="clips";
const pendingChanges=changes.filter(x=>x.status==="pending");
const bmBar=bmFolders.find(f=>f.isBar);
useEffect(()=>{const iv=setInterval(()=>setSessionMinutes(m=>m+1),60000);return()=>clearInterval(iv)},[]);
useEffect(()=>{const h=()=>{setNavTabCtx(null);setNavGroupCtx(null);setNavWsCtx(null);setNavGroupListOpen(false);setBmItemCtx(null)};document.addEventListener("click",h);return()=>document.removeEventListener("click",h)},[]);
useEffect(()=>{if(!showHorizontalTabs)return; /* V7.11.6 Alt: no auto-switch when vertical tabs active */if(activeTab.type==="note"||activeTab.type==="clips")setBrowserMode("notes");else if(activeTab.type==="web")setBrowserMode("bookmarks");else if(activeTab.type==="chat"||activeTab.type==="utility"||activeTab.type==="todo")setBrowserMode("nav");else setBrowserMode("browser")},[activeTabId]);
// V7.4: Reset right panel per-tab (close for utility, reset state for content)
useEffect(()=>{setActiveComment(null);setReplyingTo(null);setEditingId(null);setNewCm(null);setNewCmText("");setAgentResponse(null);setAskConfigCollapsed(false);if(activeTab.type==="utility"){setRightOpen(false)}},[activeTabId]);
// Open tab with duplicate prevention + transient handling
const openTab=(type,title,icon,extra={})=>{
const existing=tabs.find(t=>t.title===title&&t.type===type);
if(existing){setActiveTabId(existing.id);flash("Already open — switched to tab");return}
if(type==="utility"){const old=tabs.find(t=>t.type==="utility"&&!t.pinned);if(old)setTabs(p=>p.filter(t=>t.id!==old.id))}
const id="t"+Date.now();const newTab={id,type,icon,title,color:tabColors[type]||c.neutral,...extra};
if(type==="utility"){setTabs(p=>[newTab,...p])}else{setTabs(p=>[...p,newTab])}
setActiveTabId(id);setNewTabDrop(false)};
// Helpers
const toggleType=t=>{const s=new Set(activeTypes);s.has(t)?s.delete(t):s.add(t);setActiveTypes(s)};
const toggleCollection=n=>{const s=new Set(selectedCollections);s.has(n)?s.delete(n):s.add(n);setSelectedCollections(s)};
const toggleFolder=id=>{const s=new Set(expandedFolders);s.has(id)?s.delete(id):s.add(id);setExpandedFolders(s)};
const selectScope=s=>{if(activeScope===s){setActiveScope(null);setActiveFolder(null);setActivePlace(null);setPlacePath([])}else{setActiveScope(s);setActiveFolder(null);setActivePlace(null);setPlacePath([])}};
const toggleCmSelect=id=>{const s=new Set(selectedCmIds);s.has(id)?s.delete(id):s.add(id);setSelectedCmIds(s)};
const createBrowserFolder=parent=>{if(!newFolderName.trim())return;setBrowserFolders(p=>[...p,{id:"f"+(p.length+10),title:newFolderName.trim(),parent}]);setNewFolderMode(null);setNewFolderName("");flash("Folder created")};
const deleteBrowserFolder=id=>{setBrowserFolders(p=>p.filter(f=>f.id!==id&&f.parent!==id));setDeletingFolder(null);flash("Folder deleted")};
const removePlace=id=>{setPlaces(p=>p.filter(x=>x.id!==id));setRemovingPlace(null);flash("Place removed")};
const currentPlaceFiles=()=>{const key=placePath.length?placePath[placePath.length-1]:"root";return placeContents[key]||[{name:"(empty)",dimmed:true,type:"—",size:"—",mod:"—"}]};
const createNoteFolder=parent=>{if(!noteNewFolderName.trim())return;setNoteFolders(p=>[...p,{id:"nf"+(p.length+10),title:noteNewFolderName.trim(),parent}]);setNoteNewFolderMode(null);setNoteNewFolderName("");flash("Folder created")};
const renameNoteFolder=(id,name)=>{if(!name.trim())return;setNoteFolders(p=>p.map(f=>f.id===id?{...f,title:name.trim()}:f));setRenamingNoteFolder(null);flash("Renamed")};
const deleteNoteFolder=id=>{setNoteFolders(p=>p.filter(f=>f.id!==id&&f.parent!==id));setDeletingNoteFolder(null);flash("Folder removed (notes kept)")};
const createBmFolder=parent=>{if(!bmNewFolderName.trim())return;setBmFolders(p=>[...p,{id:"bm"+Date.now(),title:bmNewFolderName.trim(),parent,items:[]}]);setBmNewFolderMode(null);setBmNewFolderName("");flash("Bookmark folder created")};
const renameBmFolder=(id,name)=>{if(!name.trim())return;setBmFolders(p=>p.map(f=>f.id===id?{...f,title:name.trim()}:f));setBmRenamingFolder(null);flash("Renamed")};
const deleteBmFolder=id=>{setBmFolders(p=>p.filter(f=>f.id!==id&&f.parent!==id));setBmDeletingFolder(null);flash("Folder deleted")};
const renameBmItem=(folderId,itemId,name)=>{if(!name.trim())return;setBmFolders(p=>p.map(f=>f.id===folderId?{...f,items:f.items.map(i=>i.id===itemId?{...i,title:name.trim()}:i)}:f));setBmRenamingItem(null);flash("Renamed")};
const deleteBmItem=(folderId,itemId)=>{setBmFolders(p=>p.map(f=>f.id===folderId?{...f,items:f.items.filter(i=>i.id!==itemId)}:f));flash("Bookmark deleted")};
const toggleBlock=id=>setBlocks(p=>p.map(b=>b.id===id?{...b,collapsed:!b.collapsed}:b));
const toggleTask=(bid,tid)=>setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:b.tasks.map(t=>t.id===tid?{...t,done:!t.done}:t)}:b));
const toggleSub=(bid,tid,sid)=>setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:b.tasks.map(t=>t.id===tid?{...t,sub:t.sub.map(s=>s.id===sid?{...s,done:!s.done}:s)}:t)}:b));
const deleteBlock=id=>setBlocks(p=>p.filter(b=>b.id!==id));
const toggleFeedSection=key=>{const s=new Set(collapsedFeeds);s.has(key)?s.delete(key):s.add(key);setCollapsedFeeds(s)};
const addTask=(bid,text)=>{if(!text.trim())return;setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:[...b.tasks,{id:nid(),text:text.trim(),done:false,sub:[]}]}:b));setNewTaskText("")};
const addSubtask=(bid,tid,text)=>{if(!text.trim())return;setBlocks(p=>p.map(b=>b.id===bid?{...b,tasks:b.tasks.map(t=>t.id===tid?{...t,sub:[...t.sub,{id:nid(),text:text.trim(),done:false}]}:t)}:b));setNewSubText(p=>({...p,[tid]:""}))};
const addThreadReply=bid=>{if(!threadReplyText.trim())return;setBlocks(p=>p.map(b=>b.id===bid?{...b,messages:[...b.messages,{id:nid(),author:"You",color:c.accentBtn,body:threadReplyText.trim(),time:"now"}]}:b));setThreadReplyId(null);setThreadReplyText("")};
// V7.4: Note Block added to module picker
const insertBlock=(type,preset)=>{const newId=nid();let block;if(type==="note")block={id:newId,type:"note",title:"Note",collapsed:false,text:""};else if(type==="todo")block={id:newId,type:"todo",title:"To Do",collapsed:false,tasks:[],linkedListId:null};else if(type==="feed"){const p=preset||{name:"Custom Feed"};block={id:newId,type:"feed",title:p.name,collapsed:false,sections:[{key:"custom",icon:"spark",label:p.name,items:[{text:"Waiting for events…",time:"now"}]}]}}else if(type==="thread")block={id:newId,type:"thread",collapsed:false,contextQuote:"",messages:[{id:nid(),author:"You",color:c.accentBtn,body:`@${agent.name} `,time:"now"}]};else if(type==="bar")block={id:newId,type:"bar",title:"New notice",accent:c.warn};else if(type==="calendar")block={id:newId,type:"calendar",title:"Calendar",collapsed:false};else return;setBlocks(p=>[...p,block]);setPickerOpen(false);setPickerStep("choose");flash(`${type} added`)};
const acceptChange=id=>setChanges(p=>p.map(x=>x.id===id?{...x,status:"accepted"}:x));
const rejectChange=id=>setChanges(p=>p.map(x=>x.id===id?{...x,status:"rejected"}:x));
const addReply=cmId=>{if(!replyText.trim())return;setComments(p=>p.map(cm=>cm.id===cmId?{...cm,replies:[...cm.replies,{id:"r"+Date.now(),author:"You",color:c.accentBtn,body:replyText.trim(),time:"just now"}]}:cm));setReplyingTo(null);setReplyText("")};
const resolveComment=id=>setComments(p=>p.map(cm=>cm.id===id?{...cm,status:"resolved"}:cm));
const reopenComment=id=>setComments(p=>p.map(cm=>cm.id===id?{...cm,status:"open"}:cm));
const saveEdit=id=>{if(!editText.trim())return;setComments(p=>p.map(cm=>cm.id===id?{...cm,body:editText.trim()}:cm));setEditingId(null)};
const doDelete=id=>{setComments(p=>p.filter(cm=>cm.id!==id));setDeletingId(null)};
const addComment=()=>{if(!newCmText.trim())return;setComments(p=>[...p,{id:"c"+Date.now(),author:"You",color:c.accentBtn,body:newCmText.trim(),time:"just now",status:"open",anchor:newCm?.text||null,replies:[]}]);setNewCm(null);setNewCmText("")};
const closeTab=id=>{if(tabs.length<=1)return;const idx=tabs.findIndex(t=>t.id===id);setTabs(p=>p.filter(t=>t.id!==id));if(activeTabId===id){const next=tabs[idx===0?1:idx-1];if(next)setActiveTabId(next.id)}};
const addTab=(type,inc=false)=>{const id="t"+Date.now();const t=type==="note"?{id,type:"note",icon:"note",title:"Untitled Note",color:tabColors.note}:type==="doc"?{id,type:"doc",icon:"doc",title:"Open Document…",color:tabColors.doc}:type==="todo"?{id,type:"todo",icon:"todo",title:"New To Do",color:tabColors.todo}:{id,type:"web",icon:"web",title:"New Tab",color:tabColors.web,incognito:inc};setTabs(p=>[...p,t]);setActiveTabId(id);setNewTabDrop(false);flash(inc?"Incognito tab":type==="doc"?"Opening file picker…":type==="todo"?"New To Do":"New "+type)};
const handleTabDrop=targetId=>{if(!dragTabId||dragTabId===targetId)return;setTabs(prev=>{const d=prev.find(t=>t.id===dragTabId);const r=prev.filter(t=>t.id!==dragTabId);const ti=r.findIndex(t=>t.id===targetId);return [...r.slice(0,ti),d,...r.slice(ti)]});setDragTabId(null)};
// V7.4: Ask panel send
const handleAskSend=()=>{if(askSendIn==="inline"){setAgentResponse({text:`Based on "${activeTab.title}": The discount rate of 18% lacks comparable transaction support. Three signage transactions show 8-12% average. This is a strong Sargon gatekeeper argument.`,time:"just now"});setAskConfigCollapsed(true);setAskInstruction("")}else if(askSendIn==="new"){openTab("chat",`${activeTab.title} follow-up`,"chat");setAgentResponse(null)}else{flash(`Opening "${chats[askChatIdx].name}"…`)}};
// V7.4: Floating palette send
const fpSend=()=>{if(!fpInput.trim())return;const msg={id:"fp"+Date.now(),from:"You",text:fpInput.trim(),time:new Date().toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})};setFpMessages(p=>[...p,msg]);setFpInput("");setTimeout(()=>{setFpMessages(p=>[...p,{id:"fpa"+Date.now(),from:"Elnor",text:"I'll look into that. Let me check the relevant documents and get back to you.",time:new Date().toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}])},800)};
const fpNewThread=()=>{setFpMessages([]);flash("New thread started")};
// V7.6.9: Todo helpers
const fpTodoList=fpTodoLists.find(l=>l.id===fpActiveTodoList)||fpTodoLists[0];
const fpTodoActive=(fpTodoList?.tasks||[]).filter(t=>!t.done);const fpTodoDone=(fpTodoList?.tasks||[]).filter(t=>t.done);
const fpToggleTodo=(tid)=>setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:l.tasks.map(t=>t.id===tid?{...t,done:!t.done}:t)}:l));
const fpToggleTodoSub=(tid,sid)=>setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:l.tasks.map(t=>t.id===tid?{...t,sub:t.sub.map(s=>s.id===sid?{...s,done:!s.done}:s)}:t)}:l));
const fpAddTodo=()=>{if(!fpTodoNewItem.trim())return;setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:[...l.tasks,{id:"td"+Date.now(),text:fpTodoNewItem.trim(),done:false,sub:[]}]}:l));setFpTodoNewItem("")};
const fpCreateTodoList=()=>{if(!fpTodoNewListName.trim())return;const id="tl"+Date.now();setFpTodoLists(p=>[...p,{id,name:fpTodoNewListName.trim(),noteId:null,tasks:[]}]);setFpActiveTodoList(id);setFpTodoNewListMode(false);setFpTodoNewListName("");flash("List created (note auto-created)")};
const fpRenameTodoList=()=>{if(!fpTodoRenameText.trim())return;setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,name:fpTodoRenameText.trim()}:l));setFpTodoRenaming(false);flash("List renamed")};
const fpToggleTodoExp=tid=>{const s=new Set(fpTodoExpanded);s.has(tid)?s.delete(tid):s.add(tid);setFpTodoExpanded(s)};
const fpAddTodoSub=(tid)=>{const text=(fpTodoNewSub[tid]||"").trim();if(!text)return;setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:l.tasks.map(t=>t.id===tid?{...t,sub:[...t.sub,{id:"tds"+Date.now(),text,done:false}]}:t)}:l));setFpTodoNewSub(p=>({...p,[tid]:""}))};
const fpAskAboutTask=(text)=>{setFpMode("chat");setFpInput(`Re: "${text}" — `)};
const fpAskAboutList=()=>{const items=fpTodoList.tasks.filter(t=>!t.done).map(t=>t.text).join(", ");setFpMode("chat");setFpInput(`About my "${fpTodoList.name}" list: ${items} — `)};
const fpSaveTodoEdit=(tid)=>{if(!fpTodoEditText.trim()){setFpTodoEditingId(null);return}setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:l.tasks.map(t=>t.id===tid?{...t,text:fpTodoEditText.trim()}:t)}:l));setFpTodoEditingId(null)};
const fpDeleteTodo=(tid)=>setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:l.tasks.filter(t=>t.id!==tid)}:l));
const fpDeleteTodoSub=(tid,sid)=>setFpTodoLists(p=>p.map(l=>l.id===fpActiveTodoList?{...l,tasks:l.tasks.map(t=>t.id===tid?{...t,sub:t.sub.filter(s=>s.id!==sid)}:t)}:l));
const fpHandleKeyCapture=(e)=>{e.preventDefault();const parts=[];if(e.metaKey)parts.push("⌘");if(e.ctrlKey)parts.push("⌃");if(e.altKey)parts.push("⌥");if(e.shiftKey)parts.push("⇧");if(!["Meta","Control","Alt","Shift"].includes(e.key))parts.push(e.key==="Space"||e.key===" "?"Space":e.key.length===1?e.key.toUpperCase():e.key);if(parts.length>1||(parts.length===1&&!["⌘","⌃","⌥","⇧"].includes(parts[0]))){setFpCapturedKey(parts.join(""));setFpKeyCapture(false);flash("Shortcut set: "+parts.join(""))}};
const handleMouseUp=useCallback(e=>{if(e.target.closest("[data-bubble]"))return;const sel=window.getSelection();if(!sel||sel.isCollapsed||!sel.toString().trim()){setBubbleMenu(null);return}const text=sel.toString().trim();if(text.length<3)return;const rect=sel.getRangeAt(0).getBoundingClientRect();const er=editorRef.current?.getBoundingClientRect();if(!er)return;setBubbleMenu({x:rect.left-er.left+rect.width/2,y:rect.top-er.top-8,text})},[]);
const dismissBubble=()=>{setBubbleMenu(null);window.getSelection()?.removeAllRanges()};
const filtered=useMemo(()=>{let items=[...allItems];if(activeScope==="Project"&&!noProject)items=items.filter(it=>it.proj===projects[activeProjIdx].id);if(activeScope==="Project"&&noProject)items=items.filter(it=>it.proj===null);if(selectedCollections.size>0)items=items.filter(it=>[...selectedCollections].every(col=>it.cols?.includes(col)));if(activeTypes.size>0)items=items.filter(it=>activeTypes.has(it.type));if(sortKey==="Alphabetical")items.sort((a,b)=>a.title.localeCompare(b.title));else if(sortKey==="Type")items.sort((a,b)=>a.type.localeCompare(b.type));else items.sort((a,b)=>timeVal(a.time)-timeVal(b.time));return [...items.filter(x=>x.pin),...items.filter(x=>!x.pin)]},[activeScope,activeProjIdx,noProject,selectedCollections,activeTypes,sortKey]);
const filteredNotes=(noteSearch?notes.filter(n=>n.title.toLowerCase().includes(noteSearch.toLowerCase())):notes).sort((a,b)=>{if(a.pinned&&!b.pinned)return -1;if(!a.pinned&&b.pinned)return 1;return timeVal(a.mod)-timeVal(b.mod)});
const renderText=seg=>{const tc=changes.find(x=>x.segId===seg.id&&x.status==="pending");if(!tc||!showMarkup)return <span>{tc&&!showMarkup?seg.v.replace(tc.oldText,tc.newText):seg.v}</span>;const idx=seg.v.indexOf(tc.oldText);if(idx===-1)return <span>{seg.v}</span>;const ac=tcColors[tc.author]||tcColors.Agent;return <span>{seg.v.slice(0,idx)}<span style={{color:ac.del,textDecoration:"line-through",opacity:.7}}>{tc.oldText}</span><span style={{color:ac.ins,textDecoration:"underline",fontWeight:500}}>{tc.newText}</span>{" "}<span style={{display:"inline-flex",gap:2,verticalAlign:"middle"}}><button onClick={()=>acceptChange(tc.id)} style={{width:15,height:15,borderRadius:3,border:`1px solid ${ac.ins}40`,backgroundColor:ac.ins+"10",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0}}><I.Check size={9} color={ac.ins}/></button><button onClick={()=>rejectChange(tc.id)} style={{width:15,height:15,borderRadius:3,border:`1px solid ${ac.del}30`,backgroundColor:ac.del+"08",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0}}><I.X size={9} color={ac.del}/></button><span style={{fontSize:8.5,color:ac.ins,fontStyle:"italic",fontWeight:600}}>{tc.author}</span></span>{seg.v.slice(idx+tc.oldText.length)}</span>};
// Comment card — restored from V7.3
const CmCard=({cm,resolved})=>{const isAct=activeComment===cm.id;return <div style={{margin:"0 8px 8px",borderRadius:R.sm,border:`1px solid ${isAct?cm.color+"60":c.borderLight}`,backgroundColor:isAct?cm.color+"06":c.bgCard,overflow:"hidden",cursor:"pointer",opacity:resolved?.6:1}} onClick={()=>setActiveComment(isAct?null:cm.id)}>
<div style={{borderLeft:`3px solid ${cm.color}${resolved?"30":"40"}`,padding:"9px 11px"}}>
{cm.anchor&&<div style={{fontSize:10.5,color:c.accentBtn,backgroundColor:c.accentBtn+"08",padding:"3px 6px",borderRadius:3,marginBottom:6,fontStyle:"italic",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>"{cm.anchor.slice(0,55)}"</div>}
<div style={{display:"flex",alignItems:"center",gap:5,marginBottom:5}}><Av letter={cm.author[0]} color={cm.color} size={16}/><span style={{fontSize:11.5,fontWeight:650,color:cm.color}}>{cm.author}</span><span style={{fontSize:9.5,color:c.textTer}}>{cm.time}</span></div>
{editingId===cm.id?<div onClick={e=>e.stopPropagation()}><textarea value={editText} onChange={e=>setEditText(e.target.value)} autoFocus style={{width:"100%",padding:"5px 7px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:40,resize:"vertical"}}/><div style={{display:"flex",gap:4,marginTop:4}}><Btn small primary onClick={()=>saveEdit(cm.id)}>Save</Btn><Btn small ghost onClick={()=>setEditingId(null)}>Cancel</Btn></div></div>
:<div style={{fontSize:12,lineHeight:1.5,color:c.textSec,marginBottom:5}}>{cm.body}</div>}
{editingId!==cm.id&&<div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5}} onClick={e=>e.stopPropagation()}>
{!resolved&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>{setReplyingTo(replyingTo===cm.id?null:cm.id);setReplyText("")}}>Reply</span>}
{!resolved&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>resolveComment(cm.id)}>Resolve</span>}
{resolved&&<span style={{color:c.accentBtn,cursor:"pointer",fontWeight:500}} onClick={()=>reopenComment(cm.id)}>Reopen</span>}
{cm.author==="You"&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>{setEditingId(cm.id);setEditText(cm.body)}}>Edit</span>}
{cm.author==="You"&&deletingId!==cm.id&&<span style={{color:c.error,cursor:"pointer",fontWeight:500,opacity:.7}} onClick={()=>setDeletingId(cm.id)}>Delete</span>}
{deletingId===cm.id&&<><span style={{color:c.error,fontWeight:600,fontSize:10}}>Delete?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>doDelete(cm.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setDeletingId(null)}>No</span></>}
<span style={{flex:1}}/><span onClick={()=>flash(`Sent to ${agent.name}`)} style={{cursor:"pointer",display:"flex",alignItems:"center",gap:2,color:c.textSec,fontWeight:600,fontSize:10}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textSec}><I.Spark size={11}/>Send</span>
</div>}
</div>
{cm.replies.map(r=><div key={r.id} style={{borderLeft:`3px solid ${r.color}40`,borderTop:`1px solid ${c.borderLight}`,padding:"7px 11px",backgroundColor:c.bgPanelAlt}}><div style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><Av letter={r.author[0]} color={r.color} size={14}/><span style={{fontSize:10.5,fontWeight:650,color:r.color}}>{r.author}</span><span style={{fontSize:9,color:c.textTer}}>{r.time}</span></div><div style={{fontSize:11.5,lineHeight:1.5,color:c.textSec}}>{r.body}</div></div>)}
{replyingTo===cm.id&&<div style={{borderTop:`1px solid ${c.borderLight}`,padding:"8px 11px",backgroundColor:c.bgPanelAlt}} onClick={e=>e.stopPropagation()}><textarea value={replyText} onChange={e=>setReplyText(e.target.value)} placeholder="Reply…" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();addReply(cm.id)}}} style={{width:"100%",padding:"5px 7px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11.5,fontFamily:font.sans,outline:"none",minHeight:36,resize:"vertical"}}/><div style={{display:"flex",gap:4,marginTop:4}}><Btn small primary onClick={()=>addReply(cm.id)} disabled={!replyText.trim()}>Reply</Btn><Btn small ghost onClick={()=>setReplyingTo(null)}>Cancel</Btn></div></div>}
</div>};
// Block renderer — V7.4: includes Note Block type
// Folder renderers — restored from V7.3
const renderBFolders=(parentId,depth,isOverlay=false)=>browserFolders.filter(f=>f.parent===parentId).map(f=>{const hasKids=browserFolders.some(ch=>ch.parent===f.id);const isExp=expandedFolders.has(f.id);const isActive=!isOverlay&&activeFolder===f.id;const isDrop=dropTarget===f.id;const isHov=hoverFolder===f.id;const isDel=deletingFolder===f.id;
return <div key={f.id}><div onClick={()=>{if(!isOverlay)setActiveFolder(isActive?null:f.id)}} onMouseEnter={()=>setHoverFolder(f.id)} onMouseLeave={()=>setHoverFolder(null)} onDragOver={e=>{e.preventDefault();setDropTarget(f.id)}} onDragLeave={()=>setDropTarget(null)} onDrop={e=>{e.preventDefault();setDropTarget(null);if(dragItem)flash(`Added to ${f.title}`)}} style={{display:"flex",alignItems:"center",gap:3,padding:isOverlay?"2px 6px":"3px 8px",paddingLeft:(isOverlay?6:8)+depth*(isOverlay?12:14),borderRadius:R.sm,cursor:isOverlay?"default":"pointer",backgroundColor:isDrop?c.accentBtn+"20":isActive?c.accentBtn+"10":"transparent",fontSize:isOverlay?10.5:11.5,fontWeight:isActive?600:400,color:isActive?c.accentBtn:c.textSec,border:isDrop?`1px dashed ${c.accentBtn}`:"1px solid transparent"}}>
{hasKids?<span onClick={e=>{e.stopPropagation();toggleFolder(f.id)}} style={{display:"flex",width:10}}>{isExp?<I.ChevD size={9} color={c.textTer}/>:<I.ChevR size={9} color={c.textTer}/>}</span>:<span style={{width:10}}/>}
<I.Folder size={isOverlay?10:12} color={isActive?c.accentBtn:depth===0?c.warn:c.textTer}/><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{f.title}</span>
{isHov&&!isOverlay&&!isDel&&<><span onClick={e=>{e.stopPropagation();setNewFolderMode({parent:f.id});setNewFolderName("");setTimeout(()=>nfRef.current?.focus(),50)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Add subfolder"><I.Plus size={9}/></span><span onClick={e=>{e.stopPropagation();setDeletingFolder(f.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Delete"><I.Trash size={9}/></span></>}
{isDel&&<span style={{display:"flex",gap:3,fontSize:9}} onClick={e=>e.stopPropagation()}><span style={{color:c.error,fontWeight:600}}>Delete?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>deleteBrowserFolder(f.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setDeletingFolder(null)}>No</span></span>}
</div>{isExp&&hasKids&&renderBFolders(f.id,depth+1,isOverlay)}{!isOverlay&&newFolderMode?.parent===f.id&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"3px 8px",paddingLeft:8+(depth+1)*14}}><I.Folder size={10} color={c.textTer}/><input ref={nfRef} value={newFolderName} onChange={e=>setNewFolderName(e.target.value)} placeholder="Subfolder…" onKeyDown={e=>{if(e.key==="Enter")createBrowserFolder(f.id);if(e.key==="Escape")setNewFolderMode(null)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/></div>}</div>});
// Notes folder tree with full management
const renderNoteFolders=(parentId,depth)=>noteFolders.filter(f=>f.parent===parentId).map(f=>{const hasKids=noteFolders.some(ch=>ch.parent===f.id);const isExp=noteExpandedFolders.has(f.id);const folderNotes=filteredNotes.filter(n=>n.folder===f.id);const isHov=noteHoverFolder===f.id;
return <div key={f.id}><div draggable onDragStart={e=>{e.stopPropagation();e.dataTransfer.setData("text","folder:"+f.id)}} onDragOver={e=>{e.preventDefault();e.stopPropagation()}} onDrop={e=>{e.preventDefault();e.stopPropagation();flash(`Moved to ${f.title}`)}} onMouseEnter={()=>setNoteHoverFolder(f.id)} onMouseLeave={()=>setNoteHoverFolder(null)} onClick={()=>{const s=new Set(noteExpandedFolders);s.has(f.id)?s.delete(f.id):s.add(f.id);setNoteExpandedFolders(s)}} style={{display:"flex",alignItems:"center",gap:4,padding:`4px 8px 4px ${8+depth*14}px`,cursor:"grab",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>
{isExp?<I.ChevD size={10} color={c.textTer}/>:<I.ChevR size={10} color={c.textTer}/>}
<I.Folder size={11} color={depth===0?c.warn:c.textTer}/>
{renamingNoteFolder===f.id?<input value={renamingNoteFolderText} onChange={e=>setRenamingNoteFolderText(e.target.value)} autoFocus onClick={e=>e.stopPropagation()} onKeyDown={e=>{if(e.key==="Enter")renameNoteFolder(f.id,renamingNoteFolderText);if(e.key==="Escape")setRenamingNoteFolder(null)}} onBlur={()=>renameNoteFolder(f.id,renamingNoteFolderText)} style={{flex:1,fontSize:11.5,fontWeight:600,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"1px 6px",outline:"none",fontFamily:font.sans,backgroundColor:c.bgCard}}/>
:<span style={{fontSize:11.5,fontWeight:600,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{f.title}</span>}
{isHov&&!deletingNoteFolder&&renamingNoteFolder!==f.id&&<><span onClick={e=>{e.stopPropagation();setNoteNewFolderMode({parent:f.id});setNoteNewFolderName("")}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Add subfolder"><I.Plus size={9}/></span><span onClick={e=>{e.stopPropagation();setRenamingNoteFolder(f.id);setRenamingNoteFolderText(f.title)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Rename"><I.Edit size={9}/></span><span onClick={e=>{e.stopPropagation();setDeletingNoteFolder(f.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Delete"><I.Trash size={9}/></span></>}
{deletingNoteFolder===f.id&&<span style={{display:"flex",gap:3,fontSize:9}} onClick={e=>e.stopPropagation()}><span style={{color:c.error,fontWeight:600}}>Remove?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>deleteNoteFolder(f.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setDeletingNoteFolder(null)}>No</span></span>}
</div>{isExp&&<>{noteNewFolderMode?.parent===f.id&&<div style={{display:"flex",alignItems:"center",gap:4,padding:`3px 8px 3px ${22+depth*14}px`,borderBottom:`1px solid ${c.borderLight}`}}><I.Folder size={10} color={c.textTer}/><input value={noteNewFolderName} onChange={e=>setNoteNewFolderName(e.target.value)} placeholder="Subfolder…" autoFocus onKeyDown={e=>{if(e.key==="Enter")createNoteFolder(f.id);if(e.key==="Escape")setNoteNewFolderMode(null)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/></div>}
{folderNotes.map(n=><div key={n.id} onClick={()=>{setSelectedNote(n.id);flash(`Open "${n.title}"`)}} onContextMenu={e=>{e.preventDefault();setNoteContextMenu({x:e.clientX,y:e.clientY,noteId:n.id})}} style={{display:"flex",alignItems:"center",gap:4,padding:`4px 10px 4px ${14+depth*14}px`,height:30,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:selectedNote===n.id?c.accentBtn+"06":"transparent",borderLeft:selectedNote===n.id?`2px solid ${c.accentBtn}`:"2px solid transparent"}}>
{n.pinned&&<I.Pin size={7} color={c.warn}/>}<span style={{flex:1,fontSize:11.5,fontWeight:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:c.textPri}}>{n.title}</span>{n.comments>0&&<span style={{fontSize:9,color:c.textTer}}><I.MsgCircle size={8}/>{n.comments}</span>}<span style={{fontSize:9,color:c.textTer,flexShrink:0}}>{n.mod}</span>
</div>)}
{renderNoteFolders(f.id,depth+1)}
</>}</div>});
// Comment card with full edit/delete
const renderBlock=b=>{
if(b.type==="note")return <div key={b.id} style={{margin:"16px 0",padding:"12px 16px",borderRadius:R.md,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgCard,position:"relative"}} onMouseEnter={e=>{const d=e.currentTarget.querySelector('[data-note-controls]');if(d)d.style.opacity=1}} onMouseLeave={e=>{const d=e.currentTarget.querySelector('[data-note-controls]');if(d)d.style.opacity=0}}>
<div data-note-controls="1" style={{position:"absolute",top:4,right:4,display:"flex",gap:2,opacity:0,transition:"opacity 0.15s"}}><DragHandle/><span style={{cursor:"pointer",padding:2}} onClick={()=>deleteBlock(b.id)}><I.X size={11} color={c.textTer}/></span></div>
<div contentEditable suppressContentEditableWarning style={{fontSize:13.5,lineHeight:1.7,color:c.textPri,outline:"none",minHeight:40}}>{b.text||<span style={{color:c.textTer,fontStyle:"italic"}}>Type here…</span>}</div>
</div>;
if(b.type==="tasks"||b.type==="todo"){const active=b.tasks.filter(t=>!t.done),done=b.tasks.filter(t=>t.done);
if(b.collapsed) return <div key={b.id} style={{margin:"14px 0"}}><div onClick={()=>toggleBlock(b.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,cursor:"pointer"}}><DragHandle/><I.ChevR size={10} color={c.textTer}/><I.ListTodo size={12} color={c.accentBtn}/><span style={{fontSize:12,fontWeight:650}}>{b.title||"To Do"}</span><span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{active.length} open</span><span style={{flex:1}}/><button onClick={e=>{e.stopPropagation();deleteBlock(b.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}}><I.X size={11}/></button></div></div>;
return <div key={b.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,overflow:"hidden"}}>
<div onClick={()=>toggleBlock(b.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",backgroundColor:c.bgPanelAlt,cursor:"pointer",borderBottom:`1px solid ${c.borderLight}`}}>
<DragHandle/><I.ChevD size={10} color={c.textTer}/><I.ListTodo size={12} color={c.accentBtn}/>
{editingTitle===b.id?<input autoFocus defaultValue={b.title} onBlur={e=>{setBlocks(p=>p.map(x=>x.id===b.id?{...x,title:e.target.value||b.title}:x));setEditingTitle(null)}} onKeyDown={e=>{if(e.key==="Enter"){setBlocks(p=>p.map(x=>x.id===b.id?{...x,title:e.target.value||b.title}:x));setEditingTitle(null)}}} onClick={e=>e.stopPropagation()} style={{flex:1,fontSize:12.5,fontWeight:700,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"1px 6px",outline:"none",fontFamily:font.sans,backgroundColor:c.bgCard}}/>:<span style={{fontSize:12.5,fontWeight:700,flex:1,cursor:"text"}} onClick={e=>{e.stopPropagation();setEditingTitle(b.id)}}>{b.title||"To Do"}</span>}
<span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{active.length} open</span>
{/* 📅 list-level defaults */}
<button onClick={e=>{e.stopPropagation();setTodoDefaultsOpen(!todoDefaultsOpen)}} title="Calendar & reminder defaults" style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:todoDefaultsOpen?c.accentBtn:c.textTer}}><I.Calendar size={11}/></button>
{/* Pop out to tab */}
<button onClick={e=>{e.stopPropagation();openTab("todo",b.title||"To Do","todo");flash("Opened as tab")}} title="Open as tab" style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}}><I.ExtLink size={11}/></button>
<button onClick={e=>{e.stopPropagation();deleteBlock(b.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.color=c.error} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.X size={11}/></button>
</div>
{/* List-level defaults panel */}
{todoDefaultsOpen&&<div onClick={e=>e.stopPropagation()} style={{padding:"8px 12px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{display:"flex",alignItems:"center",gap:8,fontSize:11}}>
<span style={{color:c.textTer,fontWeight:500}}>Default calendar:</span>
<select value={todoListDefaults.cal} onChange={e=>setTodoListDefaults(p=>({...p,cal:e.target.value}))} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,backgroundColor:c.bgCard}}><option value="">None</option>{calViews.filter(v=>v!=="All").map(v=><option key={v} value={v}>{v}</option>)}</select>
<span style={{color:c.textTer,fontWeight:500,marginLeft:8}}>Default reminder:</span>
<select defaultValue="1 day before" style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,backgroundColor:c.bgCard}}>{reminderTimings.map(t=><option key={t} value={t}>{t}</option>)}</select>
</div>
<label style={{display:"flex",alignItems:"center",gap:5,fontSize:10,color:c.textSec,marginTop:5}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>Sync all items with due dates to calendar</label>
</div>}
<div style={{padding:"4px 8px"}}>
{active.map(task=><div key={task.id} style={{borderBottom:`1px solid ${c.borderLight}`}}>
<div style={{display:"flex",alignItems:"center",gap:8,padding:"6px 4px",cursor:"pointer"}} onClick={()=>setExpandedTask(expandedTask===task.id?null:task.id)}>
<input type="checkbox" checked={false} onChange={()=>toggleTask(b.id,task.id)} onClick={e=>e.stopPropagation()} style={{width:15,height:15,accentColor:c.accentBtn,flexShrink:0}}/>
<div style={{transform:expandedTask===task.id?"rotate(90deg)":"none",transition:"transform 0.1s",flexShrink:0}}><I.ChevR size={9} color={c.textTer}/></div>
<span style={{flex:1,fontSize:14,lineHeight:1.45}}>{task.text}</span>
<div style={{display:"flex",gap:4,alignItems:"center",flexShrink:0}}>
{task.due&&<span style={{fontSize:10,color:c.textTer}}>{task.due}</span>}
{task.sub?.length>0&&<span style={{fontSize:10,color:c.textTer}}>{task.sub.filter(s=>s.done).length}/{task.sub.length}</span>}
{/* 📅 per-task calendar/reminder */}
<span onClick={e=>{e.stopPropagation();setTaskDatePopover(taskDatePopover?.taskId===task.id?null:{blockId:b.id,taskId:task.id})}} style={{cursor:"pointer",display:"flex",alignItems:"center",color:taskDatePopover?.taskId===task.id?c.accentBtn:c.textTer}} title="Set date & reminders"><I.Calendar size={11}/></span>
</div>
</div>
{/* Per-task 📅 popover */}
{taskDatePopover?.taskId===task.id&&<div onClick={e=>e.stopPropagation()} style={{padding:"8px 12px 10px",marginLeft:30,marginBottom:4,borderRadius:R.sm,border:`1px solid ${c.accentBtn}20`,backgroundColor:c.accentBtn+"04"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6,fontSize:11}}>
<span style={{color:c.textTer,fontWeight:500}}>Date</span><input type="date" value={taskDateData.date} onChange={e=>setTaskDateData(p=>({...p,date:e.target.value}))} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,outline:"none"}}/>
<span style={{color:c.textTer,fontWeight:500}}>Time</span><input type="time" value={taskDateData.time} onChange={e=>setTaskDateData(p=>({...p,time:e.target.value}))} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,outline:"none",width:100}}/>
</div>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6,fontSize:11}}>
<span style={{color:c.textTer,fontWeight:500}}>Calendar</span><select value={taskDateData.cal} onChange={e=>setTaskDateData(p=>({...p,cal:e.target.value}))} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,backgroundColor:c.bgCard}}><option value="">None</option>{calViews.filter(v=>v!=="All").map(v=><option key={v} value={v}>{v}</option>)}</select>
</div>
<div style={{fontSize:10,fontWeight:600,color:c.textSec,marginBottom:4}}>Reminders</div>
{(taskDateData.reminders||[]).map((rem,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:4,marginBottom:3}}>
<select value={rem.timing} onChange={e=>{const r=[...taskDateData.reminders];r[i]={...r[i],timing:e.target.value};setTaskDateData(p=>({...p,reminders:r}))}} style={{flex:1,padding:"2px 4px",borderRadius:3,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,backgroundColor:c.bgCard}}>{reminderTimings.map(t=><option key={t} value={t}>{t}</option>)}</select>
<select value={rem.method} onChange={e=>{const r=[...taskDateData.reminders];r[i]={...r[i],method:e.target.value};setTaskDateData(p=>({...p,reminders:r}))}} style={{width:100,padding:"2px 4px",borderRadius:3,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,backgroundColor:c.bgCard}}>{reminderMethods.map(m=><option key={m} value={m}>{m}</option>)}</select>
<span onClick={()=>setTaskDateData(p=>({...p,reminders:p.reminders.filter((_,j)=>j!==i)}))} style={{cursor:"pointer"}}><I.X size={9} color={c.textTer}/></span>
</div>)}
<div onClick={()=>setTaskDateData(p=>({...p,reminders:[...(p.reminders||[]),{timing:"15 minutes before",method:"Q Notification"}]}))} style={{fontSize:10,color:c.accentBtn,cursor:"pointer",fontWeight:500,display:"flex",alignItems:"center",gap:3}}><I.Plus size={9}/>Add reminder</div>
<div style={{display:"flex",gap:4,marginTop:6}}><Btn small primary onClick={()=>{flash("Date & reminders saved");setTaskDatePopover(null)}}>Save</Btn><Btn small ghost onClick={()=>setTaskDatePopover(null)}>Cancel</Btn></div>
</div>}
{expandedTask===task.id&&<div style={{padding:"2px 0 4px 30px"}}>
{task.sub?.map(s=><div key={s.id} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 0"}}><input type="checkbox" checked={s.done} onChange={()=>toggleSub(b.id,task.id,s.id)} style={{width:13,height:13,accentColor:c.accentBtn}}/><span style={{flex:1,fontSize:13,color:s.done?c.textTer:c.textPri,textDecoration:s.done?"line-through":"none"}}>{s.text}</span><span onClick={()=>flash("Set subtask date & reminders")} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Date & reminders"><I.Calendar size={10}/></span></div>)}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"3px 0"}}><input type="checkbox" disabled style={{width:13,height:13,opacity:0.2}}/><input value={newSubText[task.id]||""} onChange={e=>setNewSubText(p=>({...p,[task.id]:e.target.value}))} placeholder="Add subtask…" onKeyDown={e=>{if(e.key==="Enter")addSubtask(b.id,task.id,newSubText[task.id]||"")}} style={{flex:1,border:"none",borderBottom:`1px solid ${c.borderLight}`,outline:"none",fontSize:12,fontFamily:font.sans,backgroundColor:"transparent",padding:"2px 0"}}/></div>
</div>}
</div>)}
<div style={{display:"flex",alignItems:"center",gap:8,padding:"6px 4px"}}><input type="checkbox" disabled style={{width:15,height:15,opacity:0.2}}/><input value={newTaskText} onChange={e=>setNewTaskText(e.target.value)} placeholder="Add item…" onKeyDown={e=>{if(e.key==="Enter")addTask(b.id,newTaskText)}} style={{flex:1,border:"none",borderBottom:`1px solid ${c.borderLight}`,outline:"none",fontSize:14,fontFamily:font.sans,backgroundColor:"transparent",padding:"2px 0"}}/></div>
{done.length>0&&<details style={{padding:"2px 4px 4px"}}><summary style={{fontSize:10,fontWeight:600,color:c.textTer,cursor:"pointer",padding:"4px 0",listStyle:"none"}}>Done ({done.length})</summary>{done.map(t=><div key={t.id} style={{display:"flex",alignItems:"center",gap:8,padding:"3px 4px",opacity:.4}}><input type="checkbox" checked onChange={()=>toggleTask(b.id,t.id)} style={{width:14,height:14,accentColor:c.accentBtn}}/><span style={{fontSize:13,textDecoration:"line-through",color:c.textTer}}>{t.text}</span></div>)}</details>}
</div>
{/* Footer with Ask */}
<div style={{display:"flex",alignItems:"center",padding:"4px 10px 6px",fontSize:10,color:c.textTer,borderTop:`1px solid ${c.borderLight}`}}>
<span onClick={()=>flash("Ask about this list")} style={{cursor:"pointer",color:c.accentBtn,display:"flex",alignItems:"center",gap:4,fontWeight:500}}><I.Spark size={12} color={c.accentBtn}/>Ask</span>
<div style={{flex:1}}/>
{b.linkedListId&&<span style={{display:"flex",alignItems:"center",gap:3}}><I.Link size={9}/>Synced</span>}
</div>
</div>}
if(b.type==="thread"){if(b.collapsed) return <div key={b.id} style={{margin:"14px 0"}}><div onClick={()=>toggleBlock(b.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,cursor:"pointer"}}><DragHandle/><I.ChevR size={10} color={c.textTer}/><Av letter="E" color={c.agentAv} size={16}/><span style={{fontSize:11.5,flex:1}}><strong style={{color:c.agentAv}}>{agent.name}</strong> · {b.messages.length} msgs</span><button onClick={e=>{e.stopPropagation();deleteBlock(b.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}}><I.X size={11}/></button></div></div>;
return <div key={b.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.accentBtn}20`,backgroundColor:c.accentBtn+"03",overflow:"hidden"}}>
<div onClick={()=>toggleBlock(b.id)} style={{padding:"5px 12px",display:"flex",alignItems:"center",gap:6,cursor:"pointer",backgroundColor:c.accentBtn+"06",borderBottom:`1px solid ${c.accentBtn}15`}}><DragHandle/><I.ChevD size={10} color={c.accentBtn}/><I.MsgCircle size={11} color={c.accentBtn}/><span style={{fontSize:10.5,fontWeight:600,color:c.accentBtn,flex:1}}>Thread · {b.messages.length}</span>{b.contextQuote&&<span style={{fontSize:9,color:c.textTer,fontStyle:"italic"}}>re: "{b.contextQuote}"</span>}<button onClick={e=>{e.stopPropagation();deleteBlock(b.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}}><I.X size={11}/></button></div>
{b.messages.map((msg,i)=><div key={msg.id} style={{padding:"7px 14px",borderBottom:i<b.messages.length-1?`1px solid ${c.borderLight}`:"none",backgroundColor:msg.author==="You"?"transparent":c.agentAv+"06"}}><div style={{display:"flex",alignItems:"center",gap:6,marginBottom:3}}><Av letter={msg.author[0]} color={msg.color} size={16}/><span style={{fontSize:11,fontWeight:650,color:msg.color}}>{msg.author}</span><span style={{fontSize:9,color:c.textTer}}>{msg.time}</span></div><div style={{fontSize:13.5,lineHeight:1.55,paddingLeft:22}}>{msg.body}</div></div>)}
{threadReplyId===b.id?<div style={{padding:"7px 14px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><textarea value={threadReplyText} onChange={e=>setThreadReplyText(e.target.value)} placeholder={`Reply… @${agent.name}`} autoFocus onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();addThreadReply(b.id)}}} style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:36,resize:"vertical"}}/><div style={{display:"flex",gap:4,marginTop:4}}><Btn small primary onClick={()=>addThreadReply(b.id)} disabled={!threadReplyText.trim()}>Send</Btn><Btn small ghost onClick={()=>{setThreadReplyId(null);setThreadReplyText("")}}>Cancel</Btn></div></div>:<div style={{padding:"5px 14px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><div onClick={()=>{setThreadReplyId(b.id);setThreadReplyText("")}} style={{display:"flex",alignItems:"center",gap:5,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"text"}}><I.Plus size={10} color={c.textTer}/><span style={{fontSize:11,color:c.textTer}}>Reply… @{agent.name}</span></div></div>}
</div>}
if(b.type==="feed"){const totalItems=b.sections.reduce((a,s)=>a+s.items.length,0);
if(b.collapsed) return <div key={b.id} style={{margin:"14px 0"}}><div onClick={()=>toggleBlock(b.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,cursor:"pointer"}}><DragHandle/><I.ChevR size={10} color={c.textTer}/><I.Spark size={12} color={c.agentAv}/><span style={{fontSize:12,fontWeight:650}}>{b.title}</span><span style={{fontSize:9,color:c.green,fontWeight:600}}>● live</span><span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{totalItems}</span><span style={{flex:1}}/><button onClick={e=>{e.stopPropagation();deleteBlock(b.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}}><I.X size={11}/></button></div></div>;
return <div key={b.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,overflow:"hidden"}}>
<div onClick={()=>toggleBlock(b.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",backgroundColor:c.bgPanelAlt,cursor:"pointer",borderBottom:`1px solid ${c.borderLight}`}}><DragHandle/><I.ChevD size={10} color={c.textTer}/><I.Spark size={12} color={c.agentAv}/><span style={{fontSize:12.5,fontWeight:700,flex:1}}>{b.title}</span><span style={{fontSize:9,color:c.green,fontWeight:600}}>● auto</span><span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{totalItems}</span><button onClick={e=>{e.stopPropagation();deleteBlock(b.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.color=c.error} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.X size={11}/></button></div>
<div style={{maxHeight:200,overflowY:"auto",padding:"6px 8px"}}>{b.sections.map(sec=><div key={sec.key} style={{marginBottom:4}}><div onClick={()=>toggleFeedSection(sec.key)} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 4px",cursor:"pointer"}}><div style={{transform:collapsedFeeds.has(sec.key)?"none":"rotate(90deg)",transition:"transform 0.1s"}}><I.ChevR size={8} color={c.textTer}/></div>{feedIcons[sec.icon]||<I.Spark size={11}/>}<span style={{fontSize:11.5,fontWeight:700,color:c.textSec}}>{sec.label}</span><span style={{fontSize:9,color:c.textTer}}>({sec.items.length})</span></div>{!collapsedFeeds.has(sec.key)&&sec.items.map((item,i)=><div key={i} style={{display:"flex",alignItems:"flex-start",gap:6,padding:"4px 4px 4px 22px"}}>{item.accent&&<Dot color={item.accent} size={5}/>}<span style={{flex:1,fontSize:13,lineHeight:1.45}}>{item.text}</span><span style={{fontSize:9.5,color:c.textTer,flexShrink:0}}>{item.time}</span></div>)}</div>)}</div>
</div>}
if(b.type==="calendar"){
const monthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
const monthShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const daysInMonth=new Date(calYear,calMonth+1,0).getDate();
const firstDay=new Date(calYear,calMonth,1).getDay();
const days=[];for(let i=0;i<firstDay;i++)days.push(null);for(let i=1;i<=daysInMonth;i++)days.push(i);
const dateStr=d=>`${calYear}-${String(calMonth+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
const allCalViews=[...calViews,...calCustomViews];
const filteredEvents=calEvents.filter(ev=>{
if(calSearch){const q=calSearch.toLowerCase();if(!ev.title.toLowerCase().includes(q)&&!(ev.location||"").toLowerCase().includes(q)&&!(ev.notes||"").toLowerCase().includes(q))return false}
return calViewFilter==="All"?!calExcludeFromMaster.has(ev.cal):ev.cal===calViewFilter});
const dayEvents=d=>filteredEvents.filter(ev=>ev.date===dateStr(d));
const today=new Date();const isToday=d=>d===today.getDate()&&calMonth===today.getMonth()&&calYear===today.getFullYear();
const prevMonth=()=>{if(calMonth===0){setCalMonth(11);setCalYear(y=>y-1)}else setCalMonth(m=>m-1)};
const nextMonth=()=>{if(calMonth===11){setCalMonth(0);setCalYear(y=>y+1)}else setCalMonth(m=>m+1)};
const fmt12=(t)=>{if(!t)return"";const[h,m]=t.split(":");const hr=parseInt(h);const ampm=hr>=12?"PM":"AM";const h12=hr===0?12:hr>12?hr-12:hr;return`${h12}:${m} ${ampm}`};
const fmtDate=(d)=>{const[,mo,dy]=d.split("-");return`${monthShort[parseInt(mo)-1]} ${parseInt(dy)}`};
const saveEvent=(ev)=>{if(calEvents.find(e=>e.id===ev.id)){setCalEvents(p=>p.map(e=>e.id===ev.id?ev:e))}else{setCalEvents(p=>[...p,ev])}setCalSelectedEvent(null);setCalNewEvent(null);flash("Event saved")};
const deleteEvent=(id)=>{setCalEvents(p=>p.filter(e=>e.id!==id));setCalSelectedEvent(null);flash("Event deleted")};
const calAskEvent=(ev)=>{flash("Sent to chat");/* would send to chat tab with event context */};
const calAskAll=()=>{flash("Ask about calendar");/* would open chat with calendar context */};
const copyCalRef=()=>{flash("Calendar ref copied: @cal/"+b.id)};
const createCal=()=>{if(!calNewCalName.trim())return;setCalCustomViews(p=>[...p,calNewCalName.trim()]);setCalViewFilter(calNewCalName.trim());setCalNewCalMode(false);setCalNewCalName("");flash("Calendar created")};
const models=["Gemini 2.5 Pro","Claude API","Kimi 2.5","DeepSeek","Ollama Local"];
const thinkLevels=["minimal","standard","deep"];
// List view: filter to next N days, max M events
const listEvents=()=>{const now=new Date(calYear,calMonth,today.getDate());const cutoff=new Date(now);cutoff.setDate(cutoff.getDate()+calListDays);
return filteredEvents.filter(ev=>new Date(ev.date)>=new Date(today.getFullYear(),today.getMonth(),today.getDate())&&new Date(ev.date)<=cutoff).sort((a,bb)=>a.date.localeCompare(bb.date)||((a.time||"").localeCompare(bb.time||""))).slice(0,calListMax)};
// Event editor
const EventEditor=({event,onSave,onDelete,onClose})=>{
const [ev,setEv]=useState({...event});
const updateEv=(k,v)=>setEv(p=>({...p,[k]:v}));
const addRem=()=>updateEv("reminders",[...(ev.reminders||[]),{timing:"15 minutes before",method:"Q Notification"}]);
const updateRem=(i,k,v)=>updateEv("reminders",ev.reminders.map((r,j)=>j===i?{...r,[k]:v}:r));
const deleteRem=(i)=>updateEv("reminders",ev.reminders.filter((_,j)=>j!==i));
return <div style={{padding:"12px 16px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{display:"flex",alignItems:"center",gap:6,marginBottom:10}}><span style={{fontSize:13,fontWeight:700,flex:1}}>{event.id.startsWith("ce")&&calEvents.find(e=>e.id===event.id)?"Edit Event":"New Event"}</span><span onClick={()=>calAskEvent(ev)} style={{cursor:"pointer",display:"flex",alignItems:"center",gap:3,fontSize:10,color:c.accentBtn,fontWeight:500}}><I.Spark size={11} color={c.accentBtn}/>Ask</span><button onClick={onClose} style={{border:"none",background:"none",cursor:"pointer",display:"flex"}}><I.X size={13} color={c.textTer}/></button></div>
<div style={{display:"grid",gridTemplateColumns:"70px 1fr",gap:"8px 10px",fontSize:12,alignItems:"center"}}>
<span style={{color:c.textTer,fontWeight:500}}>Title</span><input value={ev.title||""} onChange={e=>updateEv("title",e.target.value)} style={{padding:"5px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none"}}/>
<span style={{color:c.textTer,fontWeight:500}}>Date</span><input type="date" value={ev.date||""} onChange={e=>updateEv("date",e.target.value)} style={{padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none"}}/>
<span style={{color:c.textTer,fontWeight:500}}>All day</span><div style={{display:"flex",alignItems:"center",gap:8}}><input type="checkbox" checked={ev.allDay||false} onChange={e=>updateEv("allDay",e.target.checked)} style={{accentColor:c.accentBtn}}/>{!ev.allDay&&<><input type="time" value={ev.time||""} onChange={e=>updateEv("time",e.target.value)} style={{padding:"4px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",width:110}}/><span style={{color:c.textTer}}>to</span><input type="time" value={ev.endTime||""} onChange={e=>updateEv("endTime",e.target.value)} style={{padding:"4px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",width:110}}/></>}</div>
<span style={{color:c.textTer,fontWeight:500}}>Calendar</span><select value={ev.cal||"Paramount"} onChange={e=>updateEv("cal",e.target.value)} style={{padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}>{allCalViews.filter(v=>v!=="All").map(v=><option key={v} value={v}>{v}</option>)}</select>
<span style={{color:c.textTer,fontWeight:500}}>Location</span><input value={ev.location||""} onChange={e=>updateEv("location",e.target.value)} placeholder="Add location…" style={{padding:"5px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none"}}/>
<span style={{color:c.textTer,fontWeight:500}}>Recurring</span><select value={ev.recurring||""} onChange={e=>updateEv("recurring",e.target.value||null)} style={{padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}><option value="">None</option><option value="daily">Daily</option><option value="weekly">Weekly</option><option value="biweekly">Every 2 weeks</option><option value="monthly">Monthly</option><option value="yearly">Yearly</option></select>
<span style={{color:c.textTer,fontWeight:500}}>Color</span><div style={{display:"flex",gap:4}}>{["#31588c","#2E8B57","#B04040","#D97706","#6B7280","#7C3AED","#0891B2"].map(cl=><div key={cl} onClick={()=>updateEv("color",cl)} style={{width:18,height:18,borderRadius:"50%",backgroundColor:cl,cursor:"pointer",border:ev.color===cl?`2px solid ${c.textPri}`:"2px solid transparent"}}/>)}</div>
<span style={{color:c.textTer,fontWeight:500}}>Notes</span><textarea value={ev.notes||""} onChange={e=>updateEv("notes",e.target.value)} placeholder="Add notes…" rows={2} style={{padding:"5px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",resize:"vertical"}}/>
</div>
<div style={{marginTop:10,borderTop:`1px solid ${c.borderLight}`,paddingTop:8}}>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:6}}>Reminders</div>
{(ev.reminders||[]).map((rem,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
<select value={rem.timing} onChange={e=>updateRem(i,"timing",e.target.value)} style={{flex:1,padding:"3px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}>{reminderTimings.map(t=><option key={t} value={t}>{t}</option>)}</select>
<select value={rem.method} onChange={e=>updateRem(i,"method",e.target.value)} style={{width:130,padding:"3px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}>{reminderMethods.map(m=><option key={m} value={m}>{m}</option>)}</select>
<span onClick={()=>deleteRem(i)} style={{cursor:"pointer",display:"flex"}}><I.X size={10} color={c.textTer}/></span>
</div>)}
<div onClick={addRem} style={{display:"flex",alignItems:"center",gap:4,cursor:"pointer",fontSize:11,color:c.accentBtn,fontWeight:500,padding:"2px 0"}}><I.Plus size={10}/>Add reminder</div>
</div>
<div style={{display:"flex",gap:6,marginTop:10}}><Btn primary onClick={()=>onSave(ev)}>Save</Btn>{calEvents.find(e=>e.id===event.id)&&<Btn ghost onClick={()=>onDelete(event.id)} style={{color:c.error}}>Delete</Btn>}<Btn ghost onClick={onClose}>Cancel</Btn></div>
</div>};
// Settings panel
const CalSettings=()=><div style={{borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`}}>
{["instructions","sources","sync","notices"].map(tab=><button key={tab} onClick={()=>setCalSettingsTab(tab)} style={{flex:1,padding:"7px 4px",border:"none",cursor:"pointer",fontFamily:font.sans,fontSize:10,fontWeight:calSettingsTab===tab?650:400,color:calSettingsTab===tab?c.accentBtn:c.textTer,backgroundColor:"transparent",borderBottom:calSettingsTab===tab?`2px solid ${c.accentBtn}`:"2px solid transparent",textTransform:"capitalize"}}>{tab}</button>)}
</div>
<div style={{padding:"10px 14px",maxHeight:260,overflowY:"auto"}}>
{calSettingsTab==="instructions"&&<div>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:4}}>Agent Instructions</div>
<div style={{fontSize:10,color:c.textTer,marginBottom:6}}>Standing instructions for how the agent manages this calendar.</div>
<textarea value={calAgentInstructions} onChange={e=>setCalAgentInstructions(e.target.value)} rows={4} style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",resize:"vertical",lineHeight:1.5}}/>
<div style={{display:"flex",alignItems:"center",gap:6,marginTop:6}}>
<button onClick={()=>flash("Attach document…")} style={{display:"flex",alignItems:"center",gap:4,padding:"3px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textSec,fontFamily:font.sans}}><I.Paperclip size={10}/>Attach</button>
<span style={{fontSize:9,color:c.textTer}}>e.g. calendar counting rules, filing schedules</span>
</div>
<div style={{display:"grid",gridTemplateColumns:"50px 1fr",gap:"6px 8px",marginTop:10,fontSize:11,alignItems:"center"}}>
<span style={{color:c.textTer,fontWeight:500}}>Agent</span><select value={calAgentIdx} onChange={e=>setCalAgentIdx(parseInt(e.target.value))} style={{padding:"3px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}>{agents.map((a,i)=><option key={i} value={i}>{a.name}</option>)}</select>
<span style={{color:c.textTer,fontWeight:500}}>Model</span><select value={calModelIdx} onChange={e=>setCalModelIdx(parseInt(e.target.value))} style={{padding:"3px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}>{models.map((m,i)=><option key={i} value={i}>{m}</option>)}</select>
<span style={{color:c.textTer,fontWeight:500}}>Think</span><div style={{display:"flex",gap:2}}>{thinkLevels.map(t=><button key={t} onClick={()=>setCalThinkLevel(t)} style={{padding:"2px 8px",borderRadius:R.sm,border:"none",fontSize:10,fontWeight:calThinkLevel===t?600:400,color:calThinkLevel===t?c.accentBtn:c.textTer,backgroundColor:calThinkLevel===t?c.accentBtn+"10":"transparent",cursor:"pointer",fontFamily:font.sans,textTransform:"capitalize"}}>{t}</button>)}</div>
</div>
<div style={{display:"flex",alignItems:"center",gap:8,marginTop:10,paddingTop:8,borderTop:`1px solid ${c.borderLight}`}}>
{calAgentActive?<div style={{display:"flex",alignItems:"center",gap:6,flex:1}}>
<span style={{fontSize:10,color:c.green,fontWeight:600}}><I.Zap size={9}/> Active — checking every 24h</span>
<button onClick={()=>{setCalAgentActive(false);flash("Agent stopped — cancel command sent")}} style={{padding:"2px 8px",borderRadius:R.sm,border:`1px solid ${c.error}40`,backgroundColor:c.error+"08",color:c.error,fontSize:10,cursor:"pointer",fontFamily:font.sans,fontWeight:500}}>Cancel</button>
</div>:<div style={{display:"flex",alignItems:"center",gap:6,flex:1}}>
<span style={{fontSize:10,color:c.textTer}}>Agent paused</span>
<button onClick={()=>{setCalAgentActive(true);flash("Agent reactivated")}} style={{padding:"2px 8px",borderRadius:R.sm,border:`1px solid ${c.green}40`,backgroundColor:c.green+"08",color:c.green,fontSize:10,cursor:"pointer",fontFamily:font.sans,fontWeight:500}}>Activate</button>
</div>}
</div>
</div>}
{calSettingsTab==="sources"&&<div>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:6}}>Linked Outlook Calendars</div>
{calOutlookCals.map(ol=><div key={ol.id} style={{display:"flex",alignItems:"center",gap:8,padding:"5px 0",borderBottom:`1px solid ${c.borderLight}`}}>
<input type="checkbox" checked={ol.linked} onChange={()=>setCalOutlookCals(p=>p.map(o=>o.id===ol.id?{...o,linked:!o.linked}:o))} style={{accentColor:c.accentBtn}}/>
<span style={{fontSize:12,flex:1,color:ol.linked?c.textPri:c.textTer}}>{ol.name}</span>
{ol.linked&&<select value={ol.sync} onChange={e=>setCalOutlookCals(p=>p.map(o=>o.id===ol.id?{...o,sync:e.target.value}:o))} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,backgroundColor:c.bgCard}}>
<option value="bidirectional">↔ Bidirectional</option><option value="pull_only">← Pull only</option><option value="push_to_outlook">→ Push only</option>
</select>}
</div>)}
<div style={{marginTop:10,fontSize:11,fontWeight:600,color:c.textSec,marginBottom:4}}>Auto-populate from</div>
<div style={{fontSize:11,color:c.textSec}}><label style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>Linked to-do lists with due dates</label><label style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>DOC23 task due dates</label><label style={{display:"flex",alignItems:"center",gap:5}}><input type="checkbox" style={{accentColor:c.accentBtn}}/>PACER filing alerts</label></div>
</div>}
{calSettingsTab==="sync"&&<div>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:6}}>Sync Rules</div>
<div style={{fontSize:11,color:c.textSec,marginBottom:8}}>Origin determines authority. Q-created events push to Outlook. Outlook-created events pull to Q. Conflicts flagged, never silently dropped.</div>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:4}}>Exclude from calendars</div>
<label style={{display:"flex",alignItems:"center",gap:5,fontSize:11,color:c.textSec,marginBottom:4,fontWeight:600}}><input type="checkbox" checked={Object.values(calExcludeMap).every(Boolean)} onChange={()=>{const allChecked=Object.values(calExcludeMap).every(Boolean);const m={};allCalViews.forEach(v=>{if(v!=="All")m[v]=!allChecked});setCalExcludeMap(m)}} style={{accentColor:c.accentBtn}}/>Check all</label>
<label style={{display:"flex",alignItems:"center",gap:5,fontSize:11,color:c.textSec,marginBottom:4}}><input type="checkbox" checked={calExcludeFromMaster.has(calViewFilter)||false} onChange={()=>{const s=new Set(calExcludeFromMaster);s.has(calViewFilter)?s.delete(calViewFilter):s.add(calViewFilter);setCalExcludeFromMaster(s)}} style={{accentColor:c.accentBtn}}/>Master Calendar (All)</label>
{allCalViews.filter(v=>v!=="All").map(v=><label key={v} style={{display:"flex",alignItems:"center",gap:5,fontSize:11,color:c.textSec,marginBottom:4}}><input type="checkbox" checked={calExcludeMap[v]||false} onChange={()=>setCalExcludeMap(p=>({...p,[v]:!p[v]}))} style={{accentColor:c.accentBtn}}/>{v}</label>)}
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginTop:8,marginBottom:4}}>Push to Outlook</div>
<div style={{fontSize:11,color:c.textSec}}><label style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>Case deadlines</label><label style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>Hearing dates</label><label style={{display:"flex",alignItems:"center",gap:5}}><input type="checkbox" style={{accentColor:c.accentBtn}}/>To-do items with due dates</label></div>
</div>}
{calSettingsTab==="notices"&&<div>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:6}}>Default Notification Method</div>
<select defaultValue="Q Notification" style={{width:"100%",padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard,marginBottom:10}}>{reminderMethods.map(m=><option key={m} value={m}>{m}</option>)}</select>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginBottom:4}}>Include in</div>
<div style={{fontSize:11,color:c.textSec}}><label style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>Morning summary</label><label style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><input type="checkbox" defaultChecked style={{accentColor:c.accentBtn}}/>Daily digest email</label><label style={{display:"flex",alignItems:"center",gap:5}}><input type="checkbox" style={{accentColor:c.accentBtn}}/>Activity Feed module</label></div>
<div style={{fontSize:11,fontWeight:600,color:c.textSec,marginTop:8,marginBottom:4}}>List View Config</div>
<div style={{display:"flex",alignItems:"center",gap:6,fontSize:11,color:c.textSec}}>
<span>Show next</span><input type="number" value={calListDays} onChange={e=>setCalListDays(parseInt(e.target.value)||10)} min={1} max={90} style={{width:40,padding:"2px 4px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,textAlign:"center"}}/><span>days, max</span><input type="number" value={calListMax} onChange={e=>setCalListMax(parseInt(e.target.value)||20)} min={1} max={100} style={{width:40,padding:"2px 4px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,textAlign:"center"}}/><span>events</span>
</div>
</div>}
</div>
</div>;
return <div key={b.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,overflow:"hidden",backgroundColor:c.bgCard}}>
{/* Calendar header */}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"7px 12px",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>
<DragHandle/>
<I.Calendar size={13} color={c.accentBtn}/>
<span style={{fontSize:12.5,fontWeight:700}}>Calendar</span>
{/* View filter dropdown with new calendar */}
<div style={{position:"relative"}}>
<button onClick={()=>setCalViewDrop(!calViewDrop)} style={{display:"flex",alignItems:"center",gap:3,padding:"2px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer",fontSize:10.5,fontFamily:font.sans,fontWeight:500,color:c.textSec}}>{calViewFilter}<I.ChevD size={8}/></button>
{calViewDrop&&<div style={{position:"absolute",top:24,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:50,minWidth:140,padding:3}}>
{allCalViews.map(v=><div key={v} onClick={()=>{setCalViewFilter(v);setCalViewDrop(false)}} style={{padding:"5px 10px",fontSize:11,cursor:"pointer",borderRadius:R.sm,fontWeight:calViewFilter===v?600:400,color:calViewFilter===v?c.accentBtn:c.textPri,backgroundColor:calViewFilter===v?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(calViewFilter!==v)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=calViewFilter===v?c.accentBtn+"08":"transparent"}}>{v}</div>)}
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"3px 0",padding:"3px 4px"}}>
{calNewCalMode?<div style={{display:"flex",gap:3}}><input value={calNewCalName} onChange={e=>setCalNewCalName(e.target.value)} placeholder="Name…" autoFocus onKeyDown={e=>{if(e.key==="Enter")createCal();if(e.key==="Escape")setCalNewCalMode(false)}} style={{flex:1,padding:"3px 6px",borderRadius:3,border:`1px solid ${c.border}`,fontSize:10,fontFamily:font.sans,outline:"none"}}/><button onClick={createCal} style={{padding:"3px 6px",borderRadius:3,border:"none",backgroundColor:c.accentBtn,color:"#fff",fontSize:9,cursor:"pointer"}}>Add</button></div>
:<div onClick={()=>setCalNewCalMode(true)} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",cursor:"pointer",fontSize:10.5,color:c.accentBtn,fontWeight:500}}><I.Plus size={10}/>New calendar</div>}
</div>
</div>}
</div>
<div style={{display:"flex",gap:1,marginLeft:4}}>{calModes.map(m=><button key={m} onClick={()=>setCalMode(m)} style={{padding:"2px 7px",borderRadius:R.sm,border:"none",fontSize:10,fontWeight:calMode===m?600:400,color:calMode===m?c.accentBtn:c.textTer,backgroundColor:calMode===m?c.accentBtn+"10":"transparent",cursor:"pointer",fontFamily:font.sans}}>{m}</button>)}</div>
<div style={{flex:1}}/>
{/* Search */}
{calSearchOpen?<div style={{display:"flex",alignItems:"center",gap:4,padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard}}><I.Search size={11} color={c.textTer}/><input value={calSearch} onChange={e=>setCalSearch(e.target.value)} placeholder="Search events…" autoFocus onBlur={()=>{if(!calSearch)setCalSearchOpen(false)}} style={{border:"none",backgroundColor:"transparent",fontSize:10.5,fontFamily:font.sans,outline:"none",width:110,color:c.textPri}}/>{calSearch&&<span onClick={()=>{setCalSearch("");setCalSearchOpen(false)}} style={{cursor:"pointer",display:"flex"}}><I.X size={9} color={c.textTer}/></span>}</div>
:<button onClick={()=>setCalSearchOpen(true)} style={{width:22,height:22,borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Search size={11} color={c.textTer}/></button>}
{calAgentActive&&<span style={{fontSize:9,color:c.green,fontWeight:600,display:"flex",alignItems:"center",gap:3}}><I.Zap size={9}/> Agent</span>}
<button onClick={copyCalRef} title="Copy reference" style={{width:22,height:22,borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Link size={11} color={c.textTer}/></button>
<button onClick={()=>setCalSettingsOpen(!calSettingsOpen)} style={{width:22,height:22,borderRadius:R.sm,border:`1px solid ${calSettingsOpen?c.accentBtn+"40":c.border}`,backgroundColor:calSettingsOpen?c.accentBtn+"08":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Settings size={11} color={calSettingsOpen?c.accentBtn:c.textTer}/></button>
<button onClick={()=>deleteBlock(b.id)} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.color=c.error} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.X size={11}/></button>
</div>
{/* Month nav — fixed left arrow */}
<div style={{display:"flex",alignItems:"center",gap:8,padding:"6px 14px",borderBottom:`1px solid ${c.borderLight}`}}>
<button onClick={prevMonth} style={{border:"none",background:"none",cursor:"pointer",display:"flex",padding:2}}><I.ArrowL size={13} color={c.textSec}/></button>
<span style={{fontSize:13,fontWeight:700,minWidth:130,textAlign:"center"}}>{monthNames[calMonth]} {calYear}</span>
<button onClick={nextMonth} style={{border:"none",background:"none",cursor:"pointer",display:"flex",padding:2}}><I.ArrowR size={13} color={c.textSec}/></button>
<button onClick={()=>{setCalMonth(today.getMonth());setCalYear(today.getFullYear())}} style={{padding:"2px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",fontSize:10,cursor:"pointer",fontFamily:font.sans,color:c.textSec}}>Today</button>
<div style={{flex:1}}/>
<button onClick={()=>{const d=dateStr(today.getDate());setCalNewEvent({id:"ce"+Date.now(),title:"",date:d,time:"09:00",endTime:"10:00",cal:calViewFilter==="All"?"Paramount":calViewFilter,color:"#31588c",location:"",notes:"",reminders:[{timing:"15 minutes before",method:"Q Notification"}],allDay:false,recurring:null})}} style={{display:"flex",alignItems:"center",gap:4,padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:c.accentBtn+"08",color:c.accentBtn,fontSize:10.5,cursor:"pointer",fontFamily:font.sans,fontWeight:500}}><I.Plus size={10}/>New Event</button>
</div>
{/* Month grid — bigger dates, taller cells, click opens day */}
{calMode==="Month"&&<div style={{padding:"0"}}>
<div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)"}}>
{["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map(d=><div key={d} style={{padding:"5px 4px",fontSize:10,fontWeight:600,color:c.textTer,textAlign:"center",borderBottom:`1px solid ${c.borderLight}`}}>{d}</div>)}
{days.map((d,i)=>{const evts=d?dayEvents(d):[];return <div key={i} onClick={()=>{if(d&&evts.length>0){setCalMode("Day");flash(`Day view: ${monthShort[calMonth]} ${d}`)}else if(d){setCalNewEvent({id:"ce"+Date.now(),title:"",date:dateStr(d),time:"09:00",endTime:"10:00",cal:calViewFilter==="All"?"Paramount":calViewFilter,color:"#31588c",location:"",notes:"",reminders:[{timing:"15 minutes before",method:"Q Notification"}],allDay:false,recurring:null});setCalSelectedEvent(null)}}} style={{minHeight:72,padding:"2px 3px",borderRight:i%7<6?`1px solid ${c.borderLight}`:"none",borderBottom:`1px solid ${c.borderLight}`,cursor:d?"pointer":"default",backgroundColor:d&&isToday(d)?c.accentBtn+"06":"transparent"}} onMouseEnter={e=>{if(d)e.currentTarget.style.backgroundColor=isToday(d)?c.accentBtn+"0a":c.bgInput}} onMouseLeave={e=>{if(d)e.currentTarget.style.backgroundColor=isToday(d)?c.accentBtn+"06":"transparent"}}>
{d&&<div style={{fontSize:11.5,fontWeight:isToday(d)?700:500,color:isToday(d)?c.accentBtn:c.textSec,marginBottom:1,textAlign:"right",paddingRight:2}}>{d}</div>}
{evts.slice(0,3).map(ev=><div key={ev.id} onClick={e=>{e.stopPropagation();setCalSelectedEvent(ev);setCalNewEvent(null)}} style={{fontSize:9,padding:"1px 4px",borderRadius:2,backgroundColor:ev.color+"18",color:ev.color,fontWeight:500,marginBottom:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",cursor:"pointer",borderLeft:`2px solid ${ev.color}`}}>{ev.allDay?"":fmt12(ev.time).replace(/ /,"")+" "}{ev.title}</div>)}
{evts.length>3&&<div style={{fontSize:9,color:c.accentBtn,fontWeight:600,paddingLeft:4,cursor:"pointer"}}>+{evts.length-3} more</div>}
</div>})}
</div>
</div>}
{/* List view — formatted dates, dots, configurable range */}
{calMode==="List"&&<div style={{maxHeight:320,overflowY:"auto",padding:"6px 10px"}}>
{listEvents().length===0&&<div style={{padding:16,textAlign:"center",fontSize:11,color:c.textTer,fontStyle:"italic"}}>No events in the next {calListDays} days</div>}
{listEvents().map(ev=><div key={ev.id} onClick={()=>{setCalSelectedEvent(ev);setCalNewEvent(null)}} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",borderRadius:R.sm,cursor:"pointer",marginBottom:2}} onMouseEnter={e=>{e.currentTarget.style.backgroundColor=c.bgInput;const a=e.currentTarget.querySelector('.cal-ask');if(a)a.style.opacity=1}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor="transparent";const a=e.currentTarget.querySelector('.cal-ask');if(a)a.style.opacity=0}}>
<Dot color={ev.color} size={8}/>
<div style={{minWidth:50,fontSize:11,color:c.textTer,fontWeight:500}}>{fmtDate(ev.date)}</div>
<div style={{minWidth:55,fontSize:10.5,color:c.textTer}}>{ev.allDay?"All day":fmt12(ev.time)}</div>
<span style={{fontSize:12,fontWeight:500,flex:1}}>{ev.title}</span>
<span style={{fontSize:9,color:c.textTer,padding:"1px 5px",borderRadius:3,backgroundColor:c.bgInput}}>{ev.cal}</span>
{ev.reminders?.length>0&&<I.Bell size={9} color={c.textTer}/>}
{ev.recurring&&<I.Refresh size={9} color={c.textTer}/>}
<span className="cal-ask" onClick={e=>{e.stopPropagation();calAskEvent(ev)}} style={{opacity:0,cursor:"pointer",display:"flex",transition:"opacity 0.15s"}}><I.Spark size={11} color={c.accentBtn}/></span>
</div>)}
<div style={{padding:"4px 8px",fontSize:9,color:c.textTer,fontStyle:"italic"}}>Showing next {calListDays} days · max {calListMax} events · configurable in Settings → Notices</div>
</div>}
{calMode==="Day"&&<div style={{padding:"12px 14px",minHeight:100}}>
<div style={{fontSize:12,fontWeight:600,color:c.textSec,marginBottom:8}}>{monthShort[calMonth]} {today.getDate()}, {calYear}</div>
{dayEvents(today.getDate()).length===0&&<div style={{color:c.textTer,fontSize:11,fontStyle:"italic"}}>No events today</div>}
{dayEvents(today.getDate()).map(ev=><div key={ev.id} onClick={()=>{setCalSelectedEvent(ev);setCalNewEvent(null)}} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",borderRadius:R.sm,cursor:"pointer",marginBottom:3,borderLeft:`3px solid ${ev.color}`,backgroundColor:ev.color+"06"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=ev.color+"10"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=ev.color+"06"}>
<div style={{minWidth:55,fontSize:11,color:c.textTer}}>{ev.allDay?"All day":fmt12(ev.time)}</div>
<span style={{fontSize:12.5,fontWeight:500,flex:1}}>{ev.title}</span>
{ev.location&&<span style={{fontSize:10,color:c.textTer}}><I.Compass size={9}/> {ev.location}</span>}
</div>)}
</div>}
{(calMode==="Week")&&<div style={{padding:"16px",textAlign:"center",color:c.textTer,fontSize:11,fontStyle:"italic"}}>Week view — use Month, Day, or List in mockup</div>}
{/* Event editor */}
{calSelectedEvent&&<EventEditor event={calSelectedEvent} onSave={saveEvent} onDelete={deleteEvent} onClose={()=>setCalSelectedEvent(null)}/>}
{calNewEvent&&<EventEditor event={calNewEvent} onSave={saveEvent} onDelete={()=>{}} onClose={()=>setCalNewEvent(null)}/>}
{/* Footer with Ask */}
<div style={{display:"flex",alignItems:"center",padding:"4px 12px 6px",fontSize:10,color:c.textTer,borderTop:`1px solid ${c.borderLight}`}}>
<span onClick={calAskAll} style={{cursor:"pointer",color:c.accentBtn,display:"flex",alignItems:"center",gap:4,fontWeight:500}}><I.Spark size={12} color={c.accentBtn}/>Ask</span>
<div style={{flex:1}}/>
<span>{filteredEvents.length} events</span>
</div>
{/* Settings */}
{calSettingsOpen&&<CalSettings/>}
</div>}
if(b.type==="bar")return <div key={b.id} style={{margin:"16px 0",padding:"10px 16px",borderRadius:R.md,border:`1px solid ${(b.accent||c.warn)}40`,backgroundColor:(b.accent||c.warn)+"08",display:"flex",alignItems:"center",gap:8}}><DragHandle/><I.Bell size={13} color={b.accent||c.warn}/><span style={{fontSize:12.5,fontWeight:600,flex:1,color:b.accent||c.warn}}>{b.title}</span><span style={{cursor:"pointer",opacity:.3}} onClick={()=>deleteBlock(b.id)} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.3}><I.X size={11} color={c.textTer}/></span></div>;
return null;
};
// ═══════════════════════════════ MAIN RENDER ═══════════════════════════════
return (
<div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp,overflow:"hidden",position:"relative"}} onClick={()=>{setTabContextMenu(null);setGroupCtx(null);setNoteContextMenu(null);setDocTitleMenu(null);setNewTabDrop(false);setSortDrop(false);setNoteSortDrop(false);setAllNotesSortDrop(false);setOpenDrop(null);setAgentDrop(false);setAskChatDrop(false)}}>
{toast&&<Toast msg={toast} onDone={()=>setToast(null)}/>}
{/* V7.6: thin scrollbars */}
<style>{`@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}*::-webkit-scrollbar-thumb:hover{background:#aaa}`}</style>
{/* ═══ LEFT NAV RAIL ═══ */}
<div style={{width:44,backgroundColor:c.bgSidebar,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:8,gap:2,flexShrink:0}}>
<div style={{width:30,height:30,borderRadius:R.sm,backgroundColor:c.accentBtn,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,color:"#fff",fontSize:14,marginBottom:4,cursor:"pointer"}} title="Q Dashboard">Q</div>
{/* Quick Command toggle — top of rail, bright */}
<button title="Quick Command (⌥Space)" onClick={()=>setFpOpen(!fpOpen)} style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:fpOpen?"#5b8dd930":"#ffffff08",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:fpOpen?"#5b8dd9":"#bbb",marginBottom:2}}><I.Zap size={16}/></button>
<button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:browserOpen?"#ffffff10":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:browserOpen?"#fff":"#888"}}><I.Sidebar size={16}/></button>
{/* V7.11.6 Alt: Toggle horizontal tab bar */}
<button onClick={()=>setShowHorizontalTabs(!showHorizontalTabs)} title={showHorizontalTabs?"Hide horizontal tabs":"Show horizontal tabs"} style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:showHorizontalTabs?"#ffffff10":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:showHorizontalTabs?"#fff":"#888"}}><I.List size={16}/></button>
{/* Split view toggle — always accessible */}
<button onClick={()=>{if(!splitMode){setSplitMode(true);setSplitTabs([{id:"st1",type:"doc",icon:"doc",title:"Christensen_CV.pdf",color:tabColors.doc}]);setSplitActiveTabId("st1")}else{setSplitMode(false);setSplitTabs([])}}} title="Split view" style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:splitMode?"#ffffff10":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:splitMode?"#fff":"#888"}}><I.Columns size={16}/></button>
{/* Chat column toggle — in views section */}
<button title="Chat Column" onClick={()=>setChatColumnOpen(!chatColumnOpen)} style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:chatColumnOpen?"#ffffff10":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:chatColumnOpen?"#fff":"#888"}}><I.MsgCircle size={16}/></button>
<div style={{width:20,height:1,backgroundColor:"#444",margin:"4px 0"}}/>
<button title="Activity" style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:"#888",position:"relative"}} onClick={()=>openTab("utility","Activity","bell")}><I.Bell size={16}/><span style={{position:"absolute",top:4,right:4,width:8,height:8,borderRadius:"50%",backgroundColor:c.error,border:"2px solid "+c.bgSidebar}}/></button>
<button title="Settings" style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:"#888"}} onClick={()=>openTab("utility","Settings","settings")}><I.Settings size={16}/></button>
<div style={{width:20,height:1,backgroundColor:"#444",margin:"4px 0"}}/>
<div style={{flex:1}}/>
</div>
{/* ═══ BROWSER COLUMN ═══ */}
{browserOpen&&<div style={{width:browserWidth,flexShrink:0,backgroundColor:c.bgPanel,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",overflow:"hidden",position:"relative"}}>
{/* V7.4: Browser mode tabs — bigger, better active state */}
<div style={{display:"flex",borderBottom:`1px solid ${c.border}`,flexShrink:0}}>
{[{k:"nav",l:"Nav"},{k:"browser",l:"Browser"},{k:"notes",l:"Notes"},{k:"bookmarks",l:"Web"}].map(m=><button key={m.k} onClick={()=>setBrowserMode(m.k)} style={{flex:1,padding:"6px 0 5px",border:"none",cursor:"pointer",backgroundColor:browserMode===m.k?c.bgPanel:c.bgPanelAlt,color:browserMode===m.k?c.accentBtn:c.textTer,fontSize:11,fontWeight:browserMode===m.k?700:450,fontFamily:font.sans,borderBottom:browserMode===m.k?`2.5px solid ${c.accentBtn}`:"2.5px solid transparent",borderTop:browserMode===m.k?`1px solid ${c.border}`:"1px solid transparent",borderLeft:browserMode===m.k?`1px solid ${c.borderLight}`:`1px solid ${c.borderLight}40`,borderRight:browserMode===m.k?`1px solid ${c.borderLight}`:`1px solid ${c.borderLight}40`,borderRadius:browserMode===m.k?"4px 4px 0 0":"0",margin:browserMode===m.k?"-1px 0 0":0,minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{m.l}</button>)}
</div>
{/* ─── NAV MODE ─── V7.11.6 Alt: Restructured — fixes #4-#12 */}
{browserMode==="nav"&&<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* ═══ PAGES SECTION ═══ */}
<div style={{flexShrink:0,overflowY:navPagesCollapsed?"hidden":"auto",maxHeight:navPagesCollapsed?26:navPagesDividerPos||"45%"}}>
<div onClick={()=>setNavPagesCollapsed(!navPagesCollapsed)} style={{display:"flex",alignItems:"center",gap:4,padding:"6px 10px 4px",cursor:"pointer"}}>
{navPagesCollapsed?<I.ChevR size={9} color={c.textSec}/>:<I.ChevD size={9} color={c.textSec}/>}
<span style={{fontSize:10.5,fontWeight:700,color:c.textSec,textTransform:"uppercase",letterSpacing:".06em",flex:1}}>Pages</span>
</div>
{!navPagesCollapsed&&<>
{/* Chats — page with expandable arrow */}
<div style={{display:"flex",alignItems:"center",gap:7,padding:"5px 10px",cursor:"pointer",fontSize:12.5,borderRadius:R.sm,margin:"0 4px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
<NavIcon id="activity" size={13}/>
<span onClick={()=>openTab("utility","Chats","chat")} style={{flex:1,cursor:"pointer"}}>Chats</span>
<span onClick={e=>{e.stopPropagation();setChatsExpanded(!chatsExpanded)}} style={{cursor:"pointer",display:"flex",alignItems:"center",gap:2,color:c.textTer,fontSize:9}}>
{chatsExpanded?<I.ChevD size={9}/>:<I.ChevR size={9}/>}
</span>
</div>
{chatsExpanded&&<div style={{paddingLeft:12}}>
{recentConvos.filter(cv=>cv.starred).slice(0,6).map(cv=><div key={cv.id} onClick={()=>openTab("chat",cv.name,"chat")} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:10.5,borderRadius:R.sm,margin:"0 4px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Star size={8} color={c.warn}/><Dot color={cv.color} size={4}/><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{cv.name}</span><span style={{fontSize:8,color:c.textTer}}>{cv.time}</span></div>)}
{recentConvos.filter(cv=>!cv.starred).slice(0,Math.max(0,6-recentConvos.filter(cv=>cv.starred).length)).map(cv=><div key={cv.id} onClick={()=>openTab("chat",cv.name,"chat")} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:10.5,borderRadius:R.sm,margin:"0 4px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><Dot color={cv.color} size={4}/><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{cv.name}</span><span style={{fontSize:8,color:c.textTer}}>{cv.time}</span></div>)}
</div>}
{navPages.map(p=><div key={p.id} onClick={()=>openTab("utility",p.label,p.id)} style={{display:"flex",alignItems:"center",gap:7,padding:"5px 10px",cursor:"pointer",fontSize:12.5,borderRadius:R.sm,margin:"0 4px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><NavIcon id={p.id} size={13}/><span>{p.label}</span></div>)}
</>}
</div>
{/* Adjustable divider between Pages and Tabs */}
{!navPagesCollapsed&&!navTabsCollapsed&&<div style={{height:5,cursor:"row-resize",backgroundColor:c.borderLight,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}} onMouseDown={e=>{const sY=e.clientY;const sP=navPagesDividerPos||e.currentTarget.parentElement.offsetHeight*0.45;const m=ev=>setNavPagesDividerPos(Math.max(50,Math.min(500,sP+(ev.clientY-sY))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.accentBtn+"30"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=c.borderLight}><div style={{width:20,height:2,borderRadius:1,backgroundColor:c.textTer,opacity:.3}}/></div>}
{/* ═══ TABS SECTION ═══ */}
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* Tabs header with action buttons inline — #10 */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 10px 4px",flexShrink:0}}>
<span onClick={()=>setNavTabsCollapsed(!navTabsCollapsed)} style={{display:"flex",alignItems:"center",gap:4,cursor:"pointer",flex:1}}>
{navTabsCollapsed?<I.ChevR size={9} color={c.textSec}/>:<I.ChevD size={9} color={c.textSec}/>}
<span style={{fontSize:10.5,fontWeight:700,color:c.textSec,textTransform:"uppercase",letterSpacing:".06em"}}>Tabs</span>
</span>
{!navTabsCollapsed&&<>
<button onClick={()=>setNavTabSearchOpen(!navTabSearchOpen)} style={{padding:"2px 4px",borderRadius:3,border:`1px solid ${navTabSearchOpen?c.accentBtn+"40":"transparent"}`,backgroundColor:navTabSearchOpen?c.accentBtn+"08":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:navTabSearchOpen?c.accentBtn:c.textTer}} title="Search Tabs"><I.Search size={10}/></button>
{/* Tab groups button + 3-dot dropdown */}
<div style={{position:"relative",display:"flex",gap:1}}>
<button onClick={()=>setNavTabGroupsOpen(!navTabGroupsOpen)} style={{padding:"2px 4px",borderRadius:3,border:`1px solid ${navTabGroupsOpen?c.accentBtn+"40":"transparent"}`,backgroundColor:navTabGroupsOpen?c.accentBtn+"08":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:navTabGroupsOpen?c.accentBtn:c.textTer}} title="Tab Groups"><I.Grid size={10}/></button>
<button onClick={e=>{e.stopPropagation();e.nativeEvent.stopImmediatePropagation();setNavGroupListOpen(!navGroupListOpen)}} style={{padding:"2px 3px",borderRadius:3,border:"1px solid transparent",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}} title="Group options"><I.Dots size={10}/></button>
{navGroupListOpen&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:22,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:180,padding:4}}>
<DItem onClick={()=>{const nm=prompt("Group name:")||"New Group";const gid="g"+Date.now();setTabGroups(p=>[...p,{id:gid,label:nm,color:groupColors[tabGroups.length%groupColors.length],collapsed:false}]);setNavGroupListOpen(false);flash("Created group: "+nm)}}><I.Plus size={10}/> Create New Tab Group</DItem>
{tabGroups.length>0&&<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"3px 0"}}/>}
{tabGroups.map(g=><DItem key={g.id} onClick={()=>{setTabGroups(gs=>gs.map(x=>x.id===g.id?{...x,collapsed:false}:x));const first=tabs.find(t=>t.group===g.id);if(first)setActiveTabId(first.id);setNavGroupListOpen(false)}}><Dot color={g.color} size={7}/> {g.label}</DItem>)}
</div>}
</div>
</>}
</div>
{!navTabsCollapsed&&<>
{/* Tab search */}
{navTabSearchOpen&&<div style={{padding:"0 10px 4px",flexShrink:0}}><div style={{display:"flex",alignItems:"center",gap:3,padding:"3px 6px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}><I.Search size={10} color={c.textTer}/><input value={navTabSearch} onChange={e=>setNavTabSearch(e.target.value)} placeholder="Search tabs…" autoFocus style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:10.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/>{navTabSearch&&<button onClick={()=>setNavTabSearch("")} style={{padding:0,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={9}/></button>}</div></div>}
{/* Tab groups dropdown */}
{navTabGroupsOpen&&<div style={{padding:"0 10px 4px",flexShrink:0,borderBottom:`1px solid ${c.borderLight}`,marginBottom:2}}>
{tabGroups.length===0?<div style={{fontSize:10,color:c.textTer,fontStyle:"italic",padding:"4px 0"}}>No tab groups</div>
:tabGroups.map(g=><div key={g.id} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 4px",fontSize:10.5,cursor:"pointer",borderRadius:R.sm}} onClick={()=>{setTabGroups(gs=>gs.map(x=>x.id===g.id?{...x,collapsed:false}:x));const first=tabs.find(t=>t.group===g.id);if(first)setActiveTabId(first.id)}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><Dot color={g.color} size={7}/><span style={{flex:1}}>{g.label}</span><span style={{fontSize:8,color:c.textTer}}>{tabs.filter(t=>t.group===g.id).length}</span></div>)}
</div>}
{/* LEFT PANE header + [+] — #8, #9 */}
{splitMode&&<div style={{padding:"2px 10px 0",flexShrink:0,display:"flex",alignItems:"center",gap:4}}>
<I.ArrowL size={9} color={c.accentBtn}/><span style={{fontSize:9,fontWeight:600,color:c.accentBtn,textTransform:"uppercase",letterSpacing:".04em",flex:1}}>Left Pane</span>
<button onClick={()=>{const id="t"+Date.now();setTabs(p=>[...p,{id,type:"note",icon:"note",title:"Untitled Note",color:tabColors.note}]);setActiveTabId(id);flash("New tab in left pane")}} style={{padding:"1px 3px",borderRadius:3,border:`1px solid ${c.borderLight}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}} title="Add to left pane"><I.Plus size={9}/></button>
</div>}
{/* Tab list — #8 fix: always render tabs regardless of split mode */}
<div style={{flex:1,overflowY:"auto"}}>
{(()=>{
const filteredTabs=navTabSearch?tabs.filter(t=>t.title.toLowerCase().includes(navTabSearch.toLowerCase())):tabs;
const rendered=new Set();
return <>
{tabGroups.map(g=>{const gTabs=filteredTabs.filter(t=>t.group===g.id);if(gTabs.length===0)return null;gTabs.forEach(t=>rendered.add(t.id));
return <div key={g.id}>
<div style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:10.5}}>
<span onClick={()=>setTabGroups(gs=>gs.map(x=>x.id===g.id?{...x,collapsed:!x.collapsed}:x))} style={{display:"flex",alignItems:"center",gap:5,flex:1}}>
{g.collapsed?<I.ChevR size={8} color={g.color}/>:<I.ChevD size={8} color={g.color}/>}
<Dot color={g.color} size={6}/><span style={{fontWeight:500,color:c.textSec}}>{g.label}</span>
<span style={{fontSize:8,color:c.textTer}}>{gTabs.length}</span>
</span>
<span onClick={e=>{e.stopPropagation();e.nativeEvent.stopImmediatePropagation();setNavGroupCtx({x:e.clientX,y:e.clientY,gid:g.id})}} style={{cursor:"pointer",display:"flex",opacity:.5,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.5}><I.Dots size={10} color={c.textTer}/></span>
<span onClick={e=>{e.stopPropagation();setTabGroups(gs=>gs.map(x=>x.id===g.id?{...x,collapsed:true}:x));flash(g.label+" closed")}} style={{cursor:"pointer",display:"flex",opacity:.5,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.5} title="Close group"><I.X size={9} color={c.textTer}/></span>
</div>
{!g.collapsed&&gTabs.map(t=><div key={t.id} onClick={()=>setActiveTabId(t.id)} onContextMenu={e=>{e.preventDefault();setNavTabCtx({x:e.clientX,y:e.clientY,tabId:t.id,pane:"left"})}} draggable onDragStart={()=>setDragTabId(t.id)} onDragOver={e=>e.preventDefault()} onDrop={()=>{if(dragTabId){setTabs(p=>p.map(x=>x.id===dragTabId?{...x,group:g.id}:x));setDragTabId(null);flash("Added to "+g.label)}}} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px 3px 24px",cursor:"pointer",fontSize:11.5,borderRadius:R.sm,margin:"0 4px",backgroundColor:t.id===activeTabId?c.accentBtn+"08":"transparent",fontWeight:t.id===activeTabId?600:400,borderLeft:`2px solid ${g.color}20`}} onMouseEnter={e=>{if(t.id!==activeTabId)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=t.id===activeTabId?c.accentBtn+"08":"transparent"}>
<TabIcon type={t.type} icon={t.icon} size={11}/><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{t.title}</span>
<span onClick={e=>{e.stopPropagation();closeTab(t.id)}} style={{cursor:"pointer",display:"flex",opacity:.4,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.4}><I.X size={9} color={c.textTer}/></span>
</div>)}
</div>})}
{filteredTabs.filter(t=>!rendered.has(t.id)).map(t=><div key={t.id} onClick={()=>setActiveTabId(t.id)} onContextMenu={e=>{e.preventDefault();setNavTabCtx({x:e.clientX,y:e.clientY,tabId:t.id,pane:"left"})}} draggable onDragStart={()=>setDragTabId(t.id)} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:11.5,borderRadius:R.sm,margin:"0 4px",backgroundColor:t.id===activeTabId?c.accentBtn+"08":"transparent",fontWeight:t.id===activeTabId?600:400}} onMouseEnter={e=>{if(t.id!==activeTabId)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=t.id===activeTabId?c.accentBtn+"08":"transparent"}>
<TabIcon type={t.type} icon={t.icon} size={11}/><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{t.title}</span>
<span onClick={e=>{e.stopPropagation();closeTab(t.id)}} style={{cursor:"pointer",display:"flex",opacity:.4,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.4}><I.X size={9} color={c.textTer}/></span>
</div>)}
{/* New tab + Close all — bottom of tab list */}
{!splitMode&&<div style={{display:"flex",gap:4,padding:"4px 10px",margin:"2px 4px 0",borderTop:`1px solid ${c.borderLight}`}}>
<span onClick={()=>{const id="t"+Date.now();setTabs(p=>[...p,{id,type:"note",icon:"note",title:"Untitled Note",color:tabColors.note}]);setActiveTabId(id)}} style={{display:"flex",alignItems:"center",gap:3,cursor:"pointer",fontSize:10,color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.Plus size={9}/>New tab</span>
<span style={{flex:1}}/>
<span onClick={()=>{if(confirm("Close all tabs?")){setTabs([{id:"t_new",type:"note",icon:"note",title:"Untitled Note",color:tabColors.note}]);setActiveTabId("t_new");flash("All tabs closed")}}} style={{display:"flex",alignItems:"center",gap:3,cursor:"pointer",fontSize:10,color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.color=c.error} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.X size={9}/>Close all</span>
</div>}
</>})()}
</div>
{/* RIGHT PANE tabs — #8, #9: header with [+] button */}
{splitMode&&<>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 8px"}}/>
<div style={{padding:"2px 10px 0",flexShrink:0,display:"flex",alignItems:"center",gap:4}}>
<I.ArrowR size={9} color={c.green}/><span style={{fontSize:9,fontWeight:600,color:c.green,textTransform:"uppercase",letterSpacing:".04em",flex:1}}>Right Pane</span>
<button onClick={()=>{const id="st"+Date.now();setSplitTabs(p=>[...p,{id,type:"note",icon:"note",title:"Untitled Note",color:tabColors.note}]);setSplitActiveTabId(id);flash("New tab in right pane")}} style={{padding:"1px 3px",borderRadius:3,border:`1px solid ${c.borderLight}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}} title="Add to right pane"><I.Plus size={9}/></button>
</div>
<div style={{flex:1,overflowY:"auto"}}>
{splitTabs.map(t=><div key={t.id} onClick={()=>setSplitActiveTabId(t.id)} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:11.5,borderRadius:R.sm,margin:"0 4px",backgroundColor:t.id===splitActiveTabId?c.green+"10":"transparent",fontWeight:t.id===splitActiveTabId?600:400}} onMouseEnter={e=>{if(t.id!==splitActiveTabId)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=t.id===splitActiveTabId?c.green+"10":"transparent"}>
<TabIcon type={t.type} icon={t.icon} size={11}/><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{t.title}</span>
<span onClick={e=>{e.stopPropagation();setSplitTabs(p=>p.filter(x=>x.id!==t.id))}} style={{cursor:"pointer",display:"flex",opacity:.4,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.4}><I.X size={9} color={c.textTer}/></span>
</div>)}
{splitTabs.length===0&&<div style={{padding:"8px 10px",fontSize:10,color:c.textTer,fontStyle:"italic"}}>No tabs in right pane</div>}
</div>
</>}
</>}
</div>
{/* Adjustable divider between Tabs and Workspaces — #6 */}
{!navTabsCollapsed&&!navWorkspacesCollapsed&&<div style={{height:5,cursor:"row-resize",backgroundColor:c.borderLight,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}} onMouseDown={e=>{const sY=e.clientY;const sP=navWsDividerPos||180;const m=ev=>setNavWsDividerPos(Math.max(60,Math.min(400,sP-(ev.clientY-sY))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.accentBtn+"30"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=c.borderLight}><div style={{width:20,height:2,borderRadius:1,backgroundColor:c.textTer,opacity:.3}}/></div>}
{/* ═══ WORKSPACES SECTION ═══ */}
<div style={{flexShrink:0,borderTop:navTabsCollapsed||navWorkspacesCollapsed?`1px solid ${c.borderLight}`:"none"}}>
<div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 10px 4px"}}>
<span onClick={()=>setNavWorkspacesCollapsed(!navWorkspacesCollapsed)} style={{display:"flex",alignItems:"center",gap:4,cursor:"pointer",flex:1}}>
{navWorkspacesCollapsed?<I.ChevR size={9} color={c.textSec}/>:<I.ChevD size={9} color={c.textSec}/>}
<span style={{fontSize:10.5,fontWeight:700,color:c.textSec,textTransform:"uppercase",letterSpacing:".06em"}}>Workspaces</span>
</span>
{!navWorkspacesCollapsed&&<button onClick={()=>{const nm=prompt("Workspace name:");if(nm){const nid="ws"+Date.now();setWorkspaces(p=>[...p,{id:nid,name:nm,saved_at:new Date().toISOString(),color:groupColors[workspaces.length%groupColors.length],tabs:[],activeTabId:null,splitMode:false,splitTabs:[],browserMode:"nav",isUnsaved:false,pinned:false}]);setActiveWorkspaceId(nid);flash("Created: "+nm)}}} style={{padding:"2px 4px",borderRadius:3,border:"1px solid transparent",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}} title="New workspace"><I.Plus size={10}/></button>}
</div>
{!navWorkspacesCollapsed&&<div style={{maxHeight:navWsDividerPos||180,overflowY:"auto",paddingBottom:4}}>
{/* Unsaved workspace — timestamp */}
{workspaces.filter(w=>w.isUnsaved).map(w=><div key={w.id} onClick={()=>{setActiveWorkspaceId(null);flash("Restored unsaved state")}} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:10.5,borderRadius:R.sm,margin:"0 4px",backgroundColor:activeWorkspaceId===null?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(activeWorkspaceId!==null)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=activeWorkspaceId===null?c.accentBtn+"08":"transparent"}>
<I.Clock size={9} color={c.textTer}/>
<span style={{flex:1,color:activeWorkspaceId===null?c.accentBtn:c.textSec,fontWeight:activeWorkspaceId===null?600:400,fontStyle:"italic"}}>{new Date(w.saved_at).toLocaleString("en-US",{month:"short",day:"numeric",hour:"numeric",minute:"2-digit"})}</span>
</div>)}
{/* Named workspaces — pinned first, then by saved_at */}
{workspaces.filter(w=>!w.isUnsaved).sort((a,b)=>(b.pinned?1:0)-(a.pinned?1:0)).map(w=><div key={w.id} onClick={()=>{setActiveWorkspaceId(w.id);flash("Switched to "+w.name)}} onContextMenu={e=>{e.preventDefault();setNavWsCtx({x:e.clientX,y:e.clientY,wsId:w.id})}} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 10px",cursor:"pointer",fontSize:10.5,borderRadius:R.sm,margin:"0 4px",backgroundColor:activeWorkspaceId===w.id?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(activeWorkspaceId!==w.id)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=activeWorkspaceId===w.id?c.accentBtn+"08":"transparent"}>
{w.pinned&&<I.Pin size={8} color={c.textTer}/>}
<Dot color={w.color} size={7}/>
<span style={{flex:1,fontWeight:activeWorkspaceId===w.id?600:400,color:activeWorkspaceId===w.id?c.accentBtn:c.textSec}}>{w.name}</span>
{activeWorkspaceId===w.id&&<span style={{fontSize:7,padding:"1px 4px",borderRadius:R.full,backgroundColor:c.accentBtn+"15",color:c.accentBtn,fontWeight:700}}>active</span>}
<span onClick={e=>{e.stopPropagation();setNavWsCtx({x:e.clientX,y:e.clientY,wsId:w.id})}} style={{cursor:"pointer",display:"flex",opacity:.4,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.4}><I.Dots size={10} color={c.textTer}/></span>
</div>)}
{/* Save current */}
<div style={{padding:"4px 10px",borderTop:`1px solid ${c.borderLight}`,marginTop:2}}><span onClick={()=>{const nm=prompt("Workspace name:");if(nm){const nid="ws"+Date.now();setWorkspaces(p=>[...p,{id:nid,name:nm,saved_at:new Date().toISOString(),color:groupColors[workspaces.length%groupColors.length],tabs:[],activeTabId:null,splitMode:false,splitTabs:[],browserMode:"nav",isUnsaved:false,pinned:false}]);setActiveWorkspaceId(nid);flash("Saved: "+nm)}}} style={{display:"flex",alignItems:"center",gap:4,cursor:"pointer",fontSize:10,color:c.textTer,fontWeight:500,fontFamily:font.sans}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.Save size={9}/>Save current as workspace</span></div>
</div>}
</div>
</div>}
{/* ═══ VERTICAL TAB CONTEXT MENUS ═══ */}
{/* Right-click on a vertical tab */}
{navTabCtx&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:navTabCtx.x,top:navTabCtx.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:190,padding:4}}>
<DItem onClick={()=>{closeTab(navTabCtx.tabId);setNavTabCtx(null)}}>Close</DItem>
<DItem onClick={()=>{flash("Duplicated");setNavTabCtx(null)}}>Duplicate</DItem>
<DItem onClick={()=>{flash("Pinned");setNavTabCtx(null)}}>Pin</DItem>
{tabs.find(t=>t.id===navTabCtx.tabId)?.type==="note"&&<DItem onClick={()=>{const n=prompt("New name:");if(n)setTabs(p=>p.map(t=>t.id===navTabCtx.tabId?{...t,title:n}:t));setNavTabCtx(null)}}>Rename</DItem>}
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
{/* Add to Group submenu */}
{tabGroups.length>0&&<>{tabGroups.map(g=><DItem key={g.id} onClick={()=>{setTabs(p=>p.map(t=>t.id===navTabCtx.tabId?{...t,group:g.id}:t));setNavTabCtx(null);flash("Added to "+g.label)}}><Dot color={g.color} size={6}/> Add to {g.label}</DItem>)}</>}
<DItem onClick={()=>{const nm=prompt("New group name:")||"Group";const gid="g"+Date.now();setTabGroups(p=>[...p,{id:gid,label:nm,color:groupColors[tabGroups.length%groupColors.length],collapsed:false}]);setTabs(p=>p.map(t=>t.id===navTabCtx.tabId?{...t,group:gid}:t));setNavTabCtx(null);flash("Created group: "+nm)}}><I.Plus size={9}/> New Group…</DItem>
{tabs.find(t=>t.id===navTabCtx.tabId)?.group&&<DItem onClick={()=>{setTabs(p=>p.map(t=>t.id===navTabCtx.tabId?{...t,group:undefined}:t));setNavTabCtx(null);flash("Removed from group")}}>Remove from Group</DItem>}
{splitMode&&<><div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/><DItem onClick={()=>{const tab=tabs.find(t=>t.id===navTabCtx.tabId);if(tab){setTabs(p=>p.filter(t=>t.id!==navTabCtx.tabId));setSplitTabs(p=>[...p,tab]);setSplitActiveTabId(tab.id)}setNavTabCtx(null);flash("Moved to right pane")}}>Move to Right Pane</DItem></>}
</div>}
{/* 3-dot / right-click on a tab group in vertical view */}
{navGroupCtx&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:navGroupCtx.x,top:navGroupCtx.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:200,padding:4}}>
<div style={{padding:"6px 8px"}}><input defaultValue={tabGroups.find(g=>g.id===navGroupCtx?.gid)?.label||""} onKeyDown={e=>{if(e.key==="Enter"){setTabGroups(p=>p.map(g=>g.id===navGroupCtx.gid?{...g,label:e.target.value}:g));setNavGroupCtx(null)}}} placeholder="Rename group" autoFocus style={{width:"100%",border:`1px solid ${c.accentBtn}30`,borderRadius:3,outline:"none",fontSize:12,fontFamily:font.sans,padding:"4px 6px",backgroundColor:c.bgInput,color:c.textPri}}/></div>
<div style={{display:"flex",gap:4,padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`}}>{["#808080","#3B82F6","#EF4444","#F59E0B","#22C55E","#A855F7","#EC4899","#14B8A6","#F97316","#FF69B4"].map(clr=><div key={clr} onClick={()=>{setTabGroups(p=>p.map(g=>g.id===navGroupCtx.gid?{...g,color:clr}:g))}} style={{width:14,height:14,borderRadius:"50%",backgroundColor:clr,cursor:"pointer",border:tabGroups.find(g=>g.id===navGroupCtx?.gid)?.color===clr?`2px solid ${c.textPri}`:"2px solid transparent"}}/>)}</div>
<DItem onClick={()=>{const id="t"+Date.now();setTabs(p=>[...p,{id,type:"note",icon:"note",title:"Untitled Note",color:tabColors.note,group:navGroupCtx.gid}]);setActiveTabId(id);setNavGroupCtx(null);flash("New tab in group")}}><I.Plus size={10}/> New Tab in Group</DItem>
<DItem onClick={()=>{setTabGroups(gs=>gs.map(x=>x.id===navGroupCtx.gid?{...x,collapsed:true}:x));setNavGroupCtx(null);flash("Group closed")}}>Close Group</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>{setTabs(p=>p.map(t=>t.group===navGroupCtx.gid?{...t,group:undefined}:t));setTabGroups(p=>p.filter(g=>g.id!==navGroupCtx.gid));setNavGroupCtx(null);flash("Ungrouped")}}>Ungroup</DItem>
<DItem onClick={()=>{setTabs(p=>p.filter(t=>t.group!==navGroupCtx.gid));setTabGroups(p=>p.filter(g=>g.id!==navGroupCtx.gid));setNavGroupCtx(null);flash("Group deleted")}} style={{color:c.error}}><I.Trash size={10}/> Delete Group</DItem>
</div>}
{/* 3-dot / right-click on a workspace */}
{navWsCtx&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:navWsCtx.x,top:navWsCtx.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:200,padding:4}}>
<div style={{padding:"6px 8px"}}><input defaultValue={workspaces.find(w=>w.id===navWsCtx?.wsId)?.name||""} onKeyDown={e=>{if(e.key==="Enter"){setWorkspaces(p=>p.map(w=>w.id===navWsCtx.wsId?{...w,name:e.target.value}:w));setNavWsCtx(null)}}} placeholder="Rename workspace" autoFocus style={{width:"100%",border:`1px solid ${c.accentBtn}30`,borderRadius:3,outline:"none",fontSize:12,fontFamily:font.sans,padding:"4px 6px",backgroundColor:c.bgInput,color:c.textPri}}/></div>
<div style={{display:"flex",gap:4,padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`}}>{["#808080","#3B82F6","#EF4444","#F59E0B","#22C55E","#A855F7","#EC4899","#14B8A6","#F97316","#FF69B4"].map(clr=><div key={clr} onClick={()=>{setWorkspaces(p=>p.map(w=>w.id===navWsCtx.wsId?{...w,color:clr}:w))}} style={{width:14,height:14,borderRadius:"50%",backgroundColor:clr,cursor:"pointer",border:workspaces.find(w=>w.id===navWsCtx?.wsId)?.color===clr?`2px solid ${c.textPri}`:"2px solid transparent"}}/>)}</div>
<DItem onClick={()=>{setWorkspaces(p=>p.map(w=>w.id===navWsCtx.wsId?{...w,pinned:!w.pinned}:w));setNavWsCtx(null);flash(workspaces.find(w=>w.id===navWsCtx.wsId)?.pinned?"Unpinned":"Pinned to top")}}><I.Pin size={10}/> {workspaces.find(w=>w.id===navWsCtx?.wsId)?.pinned?"Unpin from Top":"Pin to Top"}</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>{setWorkspaces(p=>p.filter(w=>w.id!==navWsCtx.wsId));if(activeWorkspaceId===navWsCtx.wsId)setActiveWorkspaceId(null);setNavWsCtx(null);flash("Workspace deleted")}} style={{color:c.error}}><I.Trash size={10}/> Delete Workspace</DItem>
</div>}
{/* ─── BROWSER MODE ─── */}
{browserMode==="browser"&&<>
{/* Search */}
<div style={{padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`}}><div style={{display:"flex",alignItems:"center",gap:5,padding:"5px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}><I.Search size={12} color={c.textTer}/><input placeholder="Search…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:11.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/><button style={{padding:"1px 6px",borderRadius:3,border:`1px solid ${searchMode==="this_view"?c.accentBtn+"50":c.borderLight}`,backgroundColor:searchMode==="this_view"?c.accentBtn+"08":"transparent",fontSize:8.5,color:searchMode==="this_view"?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans}} onClick={()=>setSearchMode(s=>s==="this_view"?"everywhere":"this_view")}>{searchMode==="this_view"?"Selection":"All"}</button></div></div>
{/* Collections — 14px dots */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
<button onClick={()=>flash("Create collection…")} style={{width:14,height:14,borderRadius:"50%",border:`1.5px dashed ${c.border}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><I.Plus size={7} color={c.textTer}/></button>
{collections.map(col=>{const sel=selectedCollections.has(col.name);return <button key={col.name} title={col.name} onClick={()=>toggleCollection(col.name)} style={{width:14,height:14,borderRadius:"50%",backgroundColor:col.color,border:sel?`2px solid ${c.textPri}`:"2px solid transparent",cursor:"pointer",flexShrink:0,opacity:sel?1:.6,transform:sel?"scale(1.15)":"scale(1)",transition:"all .15s"}}/>})}
{selectedCollections.size>0&&<button onClick={()=>setSelectedCollections(new Set())} style={{border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.textTer,fontSize:9,fontFamily:font.sans}}>clear</button>}
</div>
{/* Scope chips */}
<div style={{display:"flex",flexWrap:"wrap",gap:2,padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`,alignItems:"center"}}>{scopeFams.map(s=><button key={s} onClick={()=>selectScope(s)} style={{padding:"2px 8px",borderRadius:3,border:`1px solid ${activeScope===s?c.accentBtn+"60":c.borderLight}`,backgroundColor:activeScope===s?c.accentBtn+"10":"transparent",fontSize:10,fontWeight:activeScope===s?600:400,color:activeScope===s?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:20}}>{s}</button>)}<button onClick={()=>{if(activeScope==="Folders"){setActiveScope(null)}else{setActiveScope("Folders");setActiveFolder(null)}}} style={{padding:"2px 7px",borderRadius:3,border:`1.5px dashed ${activeScope==="Folders"?c.accentBtn:c.border}`,backgroundColor:activeScope==="Folders"?c.accentBtn+"12":c.bgInput+"80",fontSize:9.5,color:activeScope==="Folders"?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:20,display:"flex",alignItems:"center",gap:3,fontWeight:activeScope==="Folders"?600:400,marginLeft:4}}><I.Folder size={9}/>Folders</button></div>
{/* Scope detail */}
<div style={{height:splitterPos,flexShrink:0,overflowY:"auto",borderBottom:`1px solid ${c.borderLight}`}}>
{activeScope===null&&<div style={{padding:12,fontSize:11,color:c.textTer,fontStyle:"italic"}}>No scope — all items</div>}
{activeScope==="Project"&&<div style={{padding:"3px 4px"}}>{projects.map((p,i)=><button key={p.id} onClick={()=>{setActiveProjIdx(i);setNoProject(false)}} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"4px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:!noProject&&activeProjIdx===i?c.accentBtn+"10":"transparent",fontFamily:font.sans,textAlign:"left"}}><span style={{width:7,height:7,borderRadius:"50%",backgroundColor:p.color,flexShrink:0}}/><span style={{fontSize:11.5,fontWeight:!noProject&&activeProjIdx===i?600:400,color:!noProject&&activeProjIdx===i?c.textPri:c.textSec,flex:1}}>{p.name}</span></button>)}<button onClick={()=>setNoProject(true)} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"4px 8px",border:"none",cursor:"pointer",backgroundColor:noProject?c.accentBtn+"10":"transparent",fontFamily:font.sans,borderRadius:R.sm}}><span style={{width:7,height:7,borderRadius:"50%",border:`1px dashed ${c.textTer}`,flexShrink:0}}/><span style={{fontSize:11,color:noProject?c.accentBtn:c.textTer}}>No Project</span></button></div>}
{activeScope==="Folders"&&<div style={{padding:"3px 4px"}}><div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"2px 8px 6px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Folders</span><button onClick={()=>{setNewFolderMode({parent:null});setNewFolderName("")}} style={{padding:"1px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.accentBtn,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}}><I.Plus size={8}/>New</button></div>{newFolderMode?.parent===null&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"3px 8px",marginBottom:4}}><I.Folder size={11} color={c.warn}/><input ref={nfRef} value={newFolderName} onChange={e=>setNewFolderName(e.target.value)} placeholder="Folder name…" autoFocus onKeyDown={e=>{if(e.key==="Enter")createBrowserFolder(null);if(e.key==="Escape")setNewFolderMode(null)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/></div>}{renderBFolders(null,0)}</div>}
{activeScope==="Places"&&<div style={{padding:"3px 4px"}}><div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"2px 8px 6px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Places</span><div style={{display:"flex",gap:4,alignItems:"center"}}><div style={{position:"relative"}}><button onClick={()=>setPlaceCollDrop(!placeCollDrop)} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}}>{(()=>{const sel=placeCollections.find(x=>x.name===placeCollectionFilter);return sel&&sel.color?<Dot color={sel.color} size={6}/>:<I.Folder size={8}/>})()}{placeCollectionFilter}<I.ChevD size={7}/></button>{placeCollDrop&&<div style={{position:"absolute",top:22,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:130,padding:3}}>{placeCollections.map(col=><button key={col.name} onClick={()=>{setPlaceCollectionFilter(col.name);setPlaceCollDrop(false)}} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"4px 8px",border:"none",cursor:"pointer",backgroundColor:col.name===placeCollectionFilter?c.accentBtn+"08":"transparent",fontSize:10.5,color:col.name===placeCollectionFilter?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:col.name===placeCollectionFilter?600:400}}>{col.color?<Dot color={col.color} size={6}/>:<span style={{width:6}}/>}{col.name}</button>)}</div>}</div><button onClick={()=>flash("Opening Finder…")} style={{padding:"1px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.accentBtn,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}}><I.Plus size={8}/>Add</button></div></div>
{places.map((p,i)=><div key={p.id} onMouseEnter={()=>setHoverPlace(p.id)} onMouseLeave={()=>setHoverPlace(null)} onClick={()=>{setActivePlace(i);setPlacePath([])}} onContextMenu={e=>{e.preventDefault();flash("Open in Finder…")}} title={p.path} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px",height:28,borderRadius:R.sm,cursor:"pointer",backgroundColor:activePlace===i?c.accentBtn+"10":"transparent",opacity:p.status==="missing"?.5:1}}>
<I.Folder size={11} color={activePlace===i?c.accentBtn:c.textTer}/>
<span style={{flex:1,fontSize:11.5,fontWeight:activePlace===i?600:400,color:activePlace===i?c.accentBtn:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.title}</span>
{p.status==="missing"&&<span style={{fontSize:8,padding:"1px 5px",borderRadius:R.full,backgroundColor:c.error+"15",color:c.error,fontWeight:600,flexShrink:0}}>missing</span>}
{hoverPlace===p.id&&removingPlace!==p.id&&<span onClick={e=>{e.stopPropagation();setRemovingPlace(p.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer,flexShrink:0}}><I.X size={9}/></span>}
{removingPlace===p.id&&<span style={{display:"flex",gap:3,fontSize:9,flexShrink:0}} onClick={e=>e.stopPropagation()}><span style={{color:c.error,fontWeight:600}}>Remove?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>removePlace(p.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setRemovingPlace(null)}>No</span></span>}
</div>)}
</div>}
{activeScope==="Saved Views"&&<div style={{padding:"3px 4px"}}><div style={{padding:"2px 8px 6px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Saved Views</span></div>{savedViews.map(sv=><div key={sv.id} onClick={()=>setActiveSavedView(activeSavedView===sv.id?null:sv.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,cursor:"pointer",backgroundColor:activeSavedView===sv.id?c.accentBtn+"10":"transparent"}} onMouseEnter={e=>{if(activeSavedView!==sv.id)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=activeSavedView===sv.id?c.accentBtn+"10":"transparent"}><I.Layers size={10} color={activeSavedView===sv.id?c.accentBtn:c.textTer}/><span style={{fontSize:11.5,fontWeight:activeSavedView===sv.id?600:400,color:activeSavedView===sv.id?c.accentBtn:c.textSec,flex:1}}>{sv.name}</span>{sv.sys&&<span style={{fontSize:8,color:c.textTer,padding:"1px 4px",borderRadius:2,backgroundColor:c.bgInput}}>built-in</span>}{!sv.sys&&<span onClick={e=>{e.stopPropagation();flash("Edit: "+sv.name)}} style={{cursor:"pointer",display:"flex"}}><I.Edit size={9} color={c.textTer}/></span>}{!sv.sys&&<span onClick={e=>{e.stopPropagation();flash("Delete: "+sv.name)}} style={{cursor:"pointer",display:"flex"}}><I.X size={9} color={c.textTer}/></span>}</div>)}<div style={{padding:"6px 8px",borderTop:`1px solid ${c.borderLight}`,marginTop:4}}><span onClick={()=>flash("Save current view…")} style={{display:"flex",alignItems:"center",gap:4,cursor:"pointer",fontSize:10,color:c.textTer,fontWeight:500,fontFamily:font.sans}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.Save size={10}/>Save current view</span></div></div>}
</div>
{/* Splitter */}
<div style={{height:6,cursor:"row-resize",backgroundColor:c.borderLight,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}} onMouseDown={e=>{const sY=e.clientY,sP=splitterPos;const m=ev=>setSplitterPos(Math.max(60,Math.min(400,sP+(ev.clientY-sY))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.accentBtn+"30"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=c.borderLight}><div style={{width:24,height:2,borderRadius:1,backgroundColor:c.textTer,opacity:.4}}/></div>
{/* Type chips */}
<div style={{display:"flex",flexWrap:"wrap",gap:2,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>{typeChips.map(t=><button key={t} onClick={()=>toggleType(t)} style={{padding:"1px 6px",borderRadius:3,border:`1px solid ${activeTypes.has(t)?c.accentBtn+"50":c.borderLight}`,backgroundColor:activeTypes.has(t)?c.accentBtn+"10":"transparent",fontSize:9.5,fontWeight:activeTypes.has(t)?600:400,color:activeTypes.has(t)?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:18}}>{t}</button>)}{activeTypes.size>0&&<button onClick={()=>setActiveTypes(new Set())} style={{padding:"1px 6px",border:"none",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans,height:18}}>clear</button>}</div>
{/* Sort + save view */}
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:9.5,color:c.textTer}}><span>{activeScope==="Places"&&activePlace!==null?currentPlaceFiles().length:filtered.length} items</span><div style={{display:"flex",alignItems:"center",gap:6}}><button onClick={()=>{setSaveFromBar(true);setSaveViewName("")}} title="Save view" style={{padding:2,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.Save size={11}/></button><div style={{position:"relative"}}><span style={{cursor:"pointer"}} onClick={e=>{e.stopPropagation();setSortDrop(!sortDrop)}}>{sortKey} ▾</span>{sortDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:16,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:120,padding:3}}>{sortOptions.map(s=><button key={s} onClick={()=>{setSortKey(s);setSortDrop(false)}} style={{display:"block",width:"100%",padding:"5px 10px",border:"none",cursor:"pointer",backgroundColor:s===sortKey?c.accentBtn+"08":"transparent",fontSize:11,color:s===sortKey?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:s===sortKey?600:400}}>{s}{s===sortKey&&" ✓"}</button>)}</div>}</div></div></div>
{saveFromBar&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.accentBtn+"06"}}><I.Save size={10} color={c.accentBtn}/><input value={saveViewName} onChange={e=>setSaveViewName(e.target.value)} placeholder="View name…" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&saveViewName.trim()){setUserSavedViews(p=>[...p,{id:"usv"+p.length,name:saveViewName.trim()}]);flash(`"${saveViewName}" saved`);setSaveFromBar(false)}if(e.key==="Escape")setSaveFromBar(false)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/><button onClick={()=>setSaveFromBar(false)} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Cancel</button></div>}
{/* Places file browser */}
{activeScope==="Places"&&activePlace!==null?<div style={{flex:1,overflowY:"auto"}}><div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:10,color:c.textTer}}><span style={{cursor:"pointer",color:c.accentBtn,fontWeight:600,fontSize:11}} onClick={()=>setPlacePath([])}>← {places[activePlace]?.title}</span>{placePath.map((p,i)=><span key={i} style={{display:"flex",alignItems:"center",gap:3}}><span>/</span><span style={{cursor:"pointer",color:i===placePath.length-1?c.textPri:c.accentBtn}} onClick={()=>setPlacePath(placePath.slice(0,i+1))}>{p}</span></span>)}</div>
{currentPlaceFiles().filter(f=>f.isFolder).map((f,i)=><div key={"d"+i} onClick={()=>setPlacePath([...placePath,f.name])} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:34,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:c.bgPanelAlt+"80"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.accentBtn+"06"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt+"80"}><I.Folder size={13} color={c.warn}/><span style={{flex:1,fontSize:12,fontWeight:600}}>{f.name}</span><I.ChevR size={10} color={c.textTer}/></div>)}
{currentPlaceFiles().filter(f=>!f.isFolder).map((f,i)=><div key={"f"+i} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:32,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",opacity:f.dimmed?.35:1}}><I.File size={12} color={c.textTer}/><span style={{flex:1,fontSize:11.5,fontWeight:400,color:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{f.name}</span><span style={{fontSize:8,padding:"1px 5px",borderRadius:3,backgroundColor:c.bgInput,color:c.textTer}}>{f.type}</span><span style={{fontSize:8.5,color:c.textTer,minWidth:40,textAlign:"right"}}>{f.size}</span><span style={{fontSize:9,color:c.textTer}}>{f.mod}</span></div>)}</div>
:<div style={{flex:1,overflowY:"auto"}}>{filtered.map((item,i)=><div key={i} draggable onDragStart={()=>setDragItem(item.title)} onDragEnd={()=>setDragItem(null)} onClick={()=>setSelectedIdx(i)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:32,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:selectedIdx===i?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(selectedIdx!==i)e.currentTarget.style.backgroundColor=c.bgPanelAlt}} onMouseLeave={e=>{if(selectedIdx!==i)e.currentTarget.style.backgroundColor="transparent"}}>{item.pin&&<I.Pin size={8} color={c.warn}/>}<span style={{flex:1,minWidth:0,fontSize:11.5,fontWeight:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.title}</span>{item.st&&<span style={{fontSize:8.5,fontWeight:600,color:item.st==="running"?c.accentBtn:c.warn,textTransform:"uppercase",flexShrink:0}}>{item.st}</span>}<span style={{fontSize:8.5,fontWeight:600,color:typeColors[item.type]||c.textTer,textTransform:"uppercase",flexShrink:0,minWidth:28,textAlign:"right"}}>{item.type}</span><span style={{fontSize:9,color:c.textTer,flexShrink:0}}>{item.time}</span></div>)}{filtered.length===0&&<div style={{padding:16,fontSize:11,color:c.textTer,textAlign:"center",fontStyle:"italic"}}>No items match</div>}</div>}
<div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,display:"flex",gap:4,flexShrink:0}}>{activeScope?<span>{activeScope}</span>:<span>All</span>}<span style={{marginLeft:"auto"}}>{sortKey}</span></div>
</>}
{/* ─── NOTES MODE ─── */}
{browserMode==="notes"&&<>
{/* V7.9.2: Scope toggles */}
<div style={{display:"flex",gap:2,padding:"6px 8px 2px"}}>
{[{id:"notes",icon:"note",label:"Notes"},{id:"todo",icon:"todo",label:"To Do"},{id:"calendars",icon:"📅",label:"Cal"}].map(s=>{const on=noteBrowserScope.has(s.id);return <button key={s.id} onClick={()=>{const ns=new Set(noteBrowserScope);ns.has(s.id)?ns.delete(s.id):ns.add(s.id);if(ns.size>0)setNoteBrowserScope(ns)}} style={{flex:1,padding:"3px 4px",borderRadius:R.sm,border:`1px solid ${on?c.accentBtn+"40":c.borderLight}`,backgroundColor:on?c.accentBtn+"08":"transparent",cursor:"pointer",fontSize:9.5,fontWeight:on?600:400,color:on?c.accentBtn:c.textTer,fontFamily:font.sans,display:"flex",alignItems:"center",justifyContent:"center",gap:2}}>{s.id==="notes"?<I.FileText size={10}/>:s.id==="todo"?<I.ListTodo size={10}/>:<I.Calendar size={10}/>}{s.label}</button>})}
</div>
<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
<div style={{display:"flex",alignItems:"center",gap:3,flex:1,padding:"3px 6px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}><I.Search size={10} color={c.textTer}/><input value={noteSearch} onChange={e=>setNoteSearch(e.target.value)} placeholder={`Search ${[...noteBrowserScope].map(s=>s==="todo"?"to do":s).join(", ")}…`} style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:10.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/>{noteSearch&&<button onClick={()=>setNoteSearch("")} style={{padding:0,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={9}/></button>}</div>
<div style={{position:"relative"}}><button onClick={e=>{e.stopPropagation();setNoteSortDrop(!noteSortDrop)}} style={{padding:"2px 5px",borderRadius:3,border:`1px solid ${c.borderLight}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans}}>{noteSort} ▾</button>{noteSortDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:22,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:100,padding:3}}>{["Modified","Alphabetical","Created"].map(s=><button key={s} onClick={()=>{setNoteSort(s);setNoteSortDrop(false)}} style={{display:"block",width:"100%",padding:"4px 8px",border:"none",cursor:"pointer",backgroundColor:s===noteSort?c.accentBtn+"08":"transparent",fontSize:10.5,color:s===noteSort?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:s===noteSort?600:400}}>{s}</button>)}</div>}</div>
</div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
<span style={{fontSize:12.5,fontWeight:650}}>Notes</span>
<div style={{display:"flex",gap:3}}>
<button onClick={()=>{setNoteNewFolderMode({parent:null});setNoteNewFolderName("")}} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,color:c.textTer,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}} title="New folder"><I.Folder size={8}/>+</button>
<button onClick={()=>flash("New note…")} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,color:c.accentBtn,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}} title="New note"><I.FileText size={8}/>+</button>
</div>
</div>
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* Folder tree section */}
<div style={{height:noteSplitterPos,overflowY:"auto",flexShrink:0}}>
{noteNewFolderMode?.parent===null&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}><I.Folder size={11} color={c.warn}/><input value={noteNewFolderName} onChange={e=>setNoteNewFolderName(e.target.value)} placeholder="Folder name…" autoFocus onKeyDown={e=>{if(e.key==="Enter")createNoteFolder(null);if(e.key==="Escape")setNoteNewFolderMode(null)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/></div>}
{renderNoteFolders(null,0)}
</div>
<div style={{height:6,cursor:"row-resize",backgroundColor:c.borderLight,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}} onMouseDown={e=>{const sY=e.clientY,sP=noteSplitterPos;const m=ev=>setNoteSplitterPos(Math.max(60,Math.min(300,sP+(ev.clientY-sY))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.accentBtn+"30"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=c.borderLight}><div style={{width:24,height:2,borderRadius:1,backgroundColor:c.textTer,opacity:.4}}/></div>
{/* All items — flat sortable list with type badges */}
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:9.5,color:c.textTer,flexShrink:0}}><span>All Items · {filteredNotes.length+fpTodoLists.length}</span><div style={{position:"relative"}}><span style={{cursor:"pointer",display:"flex",alignItems:"center",gap:3}} onClick={e=>{e.stopPropagation();setAllNotesSortDrop(!allNotesSortDrop)}}>{allNotesSort} <I.ChevD size={8}/></span>{allNotesSortDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:16,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:100,padding:3}}>{["Modified","Alphabetical","Created"].map(s=><button key={s} onClick={()=>{setAllNotesSort(s);setAllNotesSortDrop(false)}} style={{display:"block",width:"100%",padding:"4px 8px",border:"none",cursor:"pointer",backgroundColor:s===allNotesSort?c.accentBtn+"08":"transparent",fontSize:10.5,color:s===allNotesSort?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:s===allNotesSort?600:400}}>{s}</button>)}</div>}</div></div>
<div style={{flex:1,overflowY:"auto"}}>
{/* Notes */}
{noteBrowserScope.has("notes")&&filteredNotes.map(n=><div key={n.id} onClick={()=>{setSelectedNote(n.id);flash(`Open "${n.title}"`)}} onContextMenu={e=>{e.preventDefault();setNoteContextMenu({x:e.clientX,y:e.clientY,noteId:n.id})}} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",height:30,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:selectedNote===n.id?c.accentBtn+"06":"transparent",borderLeft:selectedNote===n.id?`2px solid ${c.accentBtn}`:"2px solid transparent"}}>{n.pinned&&<I.Pin size={7} color={c.warn}/>}<span style={{fontSize:8,padding:"0px 4px",borderRadius:2,backgroundColor:"transparent",color:c.accentBtn,fontWeight:600,flexShrink:0}}><I.FileText size={9}/></span><span style={{flex:1,fontSize:11.5,fontWeight:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{n.title}</span>{n.comments>0&&<span style={{fontSize:9,color:c.textTer}}><I.MsgCircle size={8}/>{n.comments}</span>}<span style={{fontSize:9,color:c.textTer,flexShrink:0}}>{n.mod}</span></div>)}
{/* To Do lists */}
{noteBrowserScope.has("todo")&&fpTodoLists.map(l=><div key={l.id} onClick={()=>{openTab("todo",l.name,"todo");flash(`Open "${l.name}"`)}} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",height:30,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{fontSize:8,padding:"0px 4px",borderRadius:2,backgroundColor:"transparent",color:"#0891B2",fontWeight:600,flexShrink:0}}><I.ListTodo size={9}/></span><span style={{flex:1,fontSize:11.5,fontWeight:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{l.name}</span><span style={{fontSize:9,color:c.textTer,flexShrink:0}}>{l.tasks.filter(t=>!t.done).length} open</span></div>)}
{/* Calendars */}
{noteBrowserScope.has("calendars")&&calViews.filter(v=>v!=="All").map(v=><div key={v} onClick={()=>flash(`Open calendar: ${v}`)} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",height:30,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{fontSize:8,padding:"0px 4px",borderRadius:2,backgroundColor:"transparent",color:c.warn,fontWeight:600,flexShrink:0}}><I.Calendar size={9}/></span><span style={{flex:1,fontSize:11.5,fontWeight:400}}>{v}</span></div>)}
{filteredNotes.length===0&&fpTodoLists.length===0&&<div style={{padding:16,fontSize:11,color:c.textTer,textAlign:"center",fontStyle:"italic"}}>No items match</div>}
</div>
</div>
<div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,flexShrink:0}}>{notes.length} notes · {fpTodoLists.length} lists · {noteSort}</div>
</>}
{/* ─── BOOKMARKS MODE ─── (preserved from V7.3, compact) */}
{browserMode==="bookmarks"&&<>
<div style={{padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`}}><div style={{display:"flex",alignItems:"center",gap:5,padding:"5px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}><I.Search size={12} color={c.textTer}/><input value={bmSearch} onChange={e=>setBmSearch(e.target.value)} placeholder="Search bookmarks & history…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:11.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/></div></div>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}><span style={{fontSize:12.5,fontWeight:650}}>Bookmarks</span><button onClick={()=>flash("New folder…")} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,color:c.accentBtn,fontFamily:font.sans}}>+ Folder</button></div>
<div style={{flex:1,overflowY:"auto"}}>
{bmFolders.filter(f=>f.parent===null).map(bf=>{const isExp=bmExpanded.has(bf.id);const filteredItems=bmSearch?bf.items.filter(i=>i.title.toLowerCase().includes(bmSearch.toLowerCase())):bf.items;
return <div key={bf.id}><div onClick={()=>{const s=new Set(bmExpanded);s.has(bf.id)?s.delete(bf.id):s.add(bf.id);setBmExpanded(s)}} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",cursor:"pointer",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>{isExp?<I.ChevD size={10} color={c.textTer}/>:<I.ChevR size={10} color={c.textTer}/>}<I.Folder size={11} color={bf.isBar?c.accentBtn:c.warn}/><span style={{fontSize:11.5,fontWeight:600,flex:1}}>{bf.title}</span><span style={{fontSize:9,color:c.textTer}}>{bf.items.length}</span></div>
{isExp&&filteredItems.map(item=><div key={item.id} onClick={()=>flash(`Open ${item.url}`)} onContextMenu={e=>{e.preventDefault();setBmItemCtx({x:e.clientX,y:e.clientY,folderId:bf.id,itemId:item.id})}} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px 3px 24px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",fontSize:11}} onMouseEnter={e=>{e.currentTarget.style.backgroundColor=c.bgInput;e.currentTarget.querySelector('.bm-x')&&(e.currentTarget.querySelector('.bm-x').style.opacity=1)}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor="transparent";e.currentTarget.querySelector('.bm-x')&&(e.currentTarget.querySelector('.bm-x').style.opacity=0)}}><span style={{width:14,height:14,borderRadius:3,backgroundColor:item.color,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,color:"#fff",fontWeight:700,flexShrink:0}}>{item.url[0].toUpperCase()}</span><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.title}</span><span className="bm-x" onClick={e=>{e.stopPropagation();setBmFolders(p=>p.map(f=>f.id===bf.id?{...f,items:f.items.filter(i=>i.id!==item.id)}:f));flash("Deleted: "+item.title)}} style={{cursor:"pointer",display:"flex",opacity:0,flexShrink:0,transition:"opacity .1s"}}><I.X size={9} color={c.textTer}/></span></div>)}
</div>})}
{/* Recent Pages — collapsible, default collapsed */}
<div onClick={()=>setRecentPagesCollapsed(!recentPagesCollapsed)} style={{display:"flex",alignItems:"center",gap:4,padding:"6px 8px",borderTop:`1px solid ${c.border}`,borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,cursor:"pointer"}}>
{recentPagesCollapsed?<I.ChevR size={9} color={c.textTer}/>:<I.ChevD size={9} color={c.textTer}/>}
<span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em",flex:1}}>Recent Pages</span>
<span onClick={e=>{e.stopPropagation();flash("History cleared")}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Clear history"><I.X size={9}/></span>
</div>
{!recentPagesCollapsed&&[{title:"Paramount MIL No. 3",url:"ecf.cacd.uscourts.gov",color:"#2c3e50",time:"2h"},{title:"SEC — Brooge Energy",url:"sec.gov",color:"#1B4F72",time:"1d"}].map((p,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px",cursor:"pointer",fontSize:11}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{width:14,height:14,borderRadius:3,backgroundColor:p.color,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,color:"#fff",fontWeight:700,flexShrink:0}}>{p.url[0].toUpperCase()}</span><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.title}</span><span style={{fontSize:9,color:c.textTer,flexShrink:0}}>{p.time}</span></div>)}
</div>
{/* Bookmark item context menu */}
{bmItemCtx&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:bmItemCtx.x,top:bmItemCtx.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:160,padding:4}}>
<DItem onClick={()=>{const bm=bmFolders.find(f=>f.id===bmItemCtx.folderId)?.items.find(i=>i.id===bmItemCtx.itemId);if(bm){const n=prompt("Rename bookmark:",bm.title);if(n)setBmFolders(p=>p.map(f=>f.id===bmItemCtx.folderId?{...f,items:f.items.map(i=>i.id===bmItemCtx.itemId?{...i,title:n}:i)}:f))}setBmItemCtx(null)}}>Rename</DItem>
<DItem onClick={()=>{flash("Opened in new tab");setBmItemCtx(null)}}>Open in New Tab</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>{setBmFolders(p=>p.map(f=>f.id===bmItemCtx.folderId?{...f,items:f.items.filter(i=>i.id!==bmItemCtx.itemId)}:f));setBmItemCtx(null);flash("Bookmark deleted")}} style={{color:c.error}}><I.Trash size={10}/> Delete</DItem>
</div>}
<div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,flexShrink:0}}>{bmFolders.reduce((a,f)=>a+f.items.length,0)} bookmarks</div>
</>}
<div style={{position:"absolute",top:0,right:0,width:4,height:"100%",cursor:"col-resize"}} onMouseDown={e=>{const sX=e.clientX,sW=browserWidth;const m=ev=>setBrowserWidth(Math.max(140,Math.min(450,sW+(ev.clientX-sX))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}}/>
</div>}
{/* ═══ MAIN WORKSPACE — V7.6: proper split, zoom fix, toolbar fixes ═══ */}
<div style={{flex:1,display:"flex",flexDirection:splitMode?"row":"column",overflow:"hidden"}}>
{/* ── PANE: LEFT (or only pane when not split) ── */}
<div style={{flex:splitMode?`0 0 ${100-splitWidth}%`:1,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0}} onClick={()=>setSplitFocus("left")}>
{/* TAB BAR — V7.6: no browser toggle (it's on left rail), split button on right */}
{/* V7.11.6 Alt: conditionally shown via showHorizontalTabs toggle */}
{showHorizontalTabs&&<div style={{display:"flex",alignItems:"flex-end",gap:0,padding:"4px 4px 0 4px",backgroundColor:"#e8eaed",borderBottom:`1px solid ${c.border}`,flexShrink:0,minHeight:36}}>
{(()=>{const rendered=new Set();return tabs.map(tab=>{if(rendered.has(tab.id))return null;if(tab.group){const group=tabGroups.find(g=>g.id===tab.group);if(!group||rendered.has(tabs.filter(t=>t.group===tab.group)[0]?.id)&&tabs.filter(t=>t.group===tab.group)[0]?.id!==tab.id)return null;const gTabs=tabs.filter(t=>t.group===tab.group);gTabs.forEach(t=>rendered.add(t.id));
return <div key={`g-${group.id}`} style={{display:"contents"}}><div onClick={()=>setTabGroups(g=>g.map(x=>x.id===group.id?{...x,collapsed:!x.collapsed}:x))} onContextMenu={e=>{e.preventDefault();e.stopPropagation();setGroupCtx({x:e.clientX,y:e.clientY,gid:group.id})}} style={{display:"flex",alignItems:"center",gap:0,padding:0,height:32,cursor:"pointer",borderRadius:"8px 8px 0 0",backgroundColor:"transparent",borderBottom:group.collapsed?"none":`2px solid ${group.color}`,flex:"0 0 auto",minWidth:0,maxWidth:160,paddingRight:3,overflow:"hidden"}}><span style={{display:"flex",alignItems:"center",gap:4,padding:"2px 6px",borderRadius:4,backgroundColor:group.color,overflow:"hidden"}}><span style={{fontSize:11,fontWeight:450,color:"#fff",fontFamily:font.sans,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{group.label}</span></span></div>
{!group.collapsed&&gTabs.map(gt=>{const isActive=gt.id===activeTabId;return <div key={gt.id} draggable onDragStart={()=>setDragTabId(gt.id)} onDragOver={e=>e.preventDefault()} onDrop={()=>handleTabDrop(gt.id)} onClick={e=>{if(e.metaKey||e.ctrlKey){const s=new Set(selectedTabs);s.has(gt.id)?s.delete(gt.id):s.add(gt.id);setSelectedTabs(s)}else setActiveTabId(gt.id)}} onContextMenu={e=>{e.preventDefault();setTabContextMenu({x:e.clientX,y:e.clientY,tabId:gt.id})}} style={{display:"flex",alignItems:"center",gap:5,padding:"0 2px 0 5px",height:32,gap:3,minWidth:60,maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:isActive?c.bgPanel:group.color+"12",borderBottom:isActive?`2px solid ${c.bgPanel}`:`2px solid ${group.color}`,borderRight:isActive?"none":`1px solid ${group.color}25`,borderTop:isActive?`2px solid ${group.color}`:"none",borderLeft:isActive?`2px solid ${group.color}`:"none",borderRight:isActive?`2px solid ${group.color}`:"none",marginBottom:0,zIndex:isActive?2:1,cursor:"pointer",overflow:"hidden",flex:"1 1 0",minWidth:gt.id===activeTabId?28:24}}><span style={{color:gt.color||c.textSec,flexShrink:0}}><TabIcon type={gt.type} icon={gt.icon} size={12}/></span><span style={{flex:1,fontSize:11,fontWeight:isActive?550:400,color:isActive?c.textPri:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{gt.title}</span><span onClick={e=>{e.stopPropagation();closeTab(gt.id)}} style={{cursor:"pointer",display:"flex",opacity:isActive?1:0,padding:2,borderRadius:3,flexShrink:0}}><I.X size={10} color={c.textTer}/></span></div>})}</div>}
rendered.add(tab.id);const isTransient=tab.type==="utility"&&!tab.pinned;
return <div key={tab.id} draggable onDragStart={()=>setDragTabId(tab.id)} onDragOver={e=>e.preventDefault()} onDrop={()=>handleTabDrop(tab.id)} onClick={e=>{if(e.metaKey||e.ctrlKey){const s=new Set(selectedTabs);s.has(tab.id)?s.delete(tab.id):s.add(tab.id);setSelectedTabs(s)}else setActiveTabId(tab.id)}} onContextMenu={e=>{e.preventDefault();setTabContextMenu({x:e.clientX,y:e.clientY,tabId:tab.id})}} style={{display:"flex",alignItems:"center",gap:5,padding:"0 2px 0 5px",height:32,gap:3,flex:"1 1 0",minWidth:isTransient?24:(tab.id===activeTabId?28:24),maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:tab.incognito?(tab.id===activeTabId?"#4a4a4a":"#555"):(tab.id===activeTabId?c.bgPanel:(selectedTabs.has(tab.id)?"#d0d5db":"#dfe2e6")),borderRight:tab.id===activeTabId?"none":`1px solid ${c.border}30`,borderBottom:tab.id===activeTabId?`2px solid ${c.bgPanel}`:`2px solid ${c.border}50`,marginRight:1,marginBottom:0,zIndex:tab.id===activeTabId?2:1,cursor:"pointer",overflow:"hidden",flexShrink:1}}>
{tab.incognito&&<I.EyeOff size={10} color="#999"/>}{!tab.incognito&&<TabIcon type={tab.type} icon={tab.icon} size={11}/>}
<span style={{flex:1,fontSize:11,fontWeight:tab.id===activeTabId?550:400,color:tab.incognito?(tab.id===activeTabId?"#ddd":"#999"):(tab.id===activeTabId?c.textPri:"#585c60"),overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{tab.title}</span>
<span onClick={e=>{e.stopPropagation();closeTab(tab.id)}} style={{cursor:"pointer",display:"flex",opacity:tab.id===activeTabId?1:0,padding:0,borderRadius:3,flexShrink:0}}><I.X size={10} color={c.textTer}/></span></div>})})()}
{/* [+] new tab */}
<div style={{position:"relative"}}><button onClick={e=>{e.stopPropagation();setNewTabDrop(!newTabDrop)}} style={{width:28,height:28,borderRadius:"6px 6px 0 0",border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer,marginBottom:2}}><I.Plus size={14}/></button>{newTabDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:30,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:100,minWidth:200,padding:4}}>
<div style={{padding:"4px 10px",fontSize:9.5,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Create</div>
<DItem onClick={()=>addTab("note")}><I.FileText size={12} color={c.accentBtn}/> New Note</DItem>
<DItem onClick={()=>addTab("todo")}><I.ListTodo size={12} color={tabColors.todo}/> New To Do</DItem>
<DItem onClick={()=>{openTab("chat","New Chat","chat");setNewTabDrop(false)}}><I.MsgCircle size={12} color={tabColors.chat}/> New Chat</DItem>
<DItem onClick={()=>addTab("web")}><I.Globe size={12} color={tabColors.web}/> New Web Tab</DItem>
<DItem onClick={()=>addTab("web",true)}><I.EyeOff size={12} color={c.textTer}/> Incognito Tab</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"4px 0"}}/>
<div style={{padding:"4px 10px",fontSize:9.5,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Open</div>
{[{l:"Chats",id:"activity"},{l:"Tasks",id:"tasks"},{l:"Projects",id:"projects"},{l:"Knowledge",id:"knowledge"},{l:"Agents",id:"agents"},{l:"Settings",id:"settings"}].map(p=><DItem key={p.l} onClick={()=>{openTab("utility",p.l,p.id);setNewTabDrop(false)}}><NavIcon id={p.id} size={12}/> {p.l}</DItem>)}
</div>}</div>
<div style={{flex:1}}/>
{/* Split toggle — V7.6: on right of tab bar */}
<button onClick={()=>{if(!splitMode){setSplitMode(true);setSplitTabs([{id:"st1",type:"doc",icon:"doc",title:"Christensen_CV.pdf",color:tabColors.doc}]);setSplitActiveTabId("st1")}else{setSplitMode(false);setSplitTabs([])}}} title="Split view" style={{width:28,height:28,borderRadius:R.sm,border:`1px solid ${splitMode?c.accentBtn+"40":c.borderLight}`,backgroundColor:splitMode?c.accentBtn+"08":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:splitMode?c.accentBtn:c.textTer,marginBottom:2,flexShrink:0}}><I.Columns size={14}/></button>
</div>}
{/* Tab context menu */}
{tabContextMenu&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:tabContextMenu.x,top:tabContextMenu.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:190,padding:4}}>
<DItem onClick={()=>{closeTab(tabContextMenu.tabId);setTabContextMenu(null)}}>Close</DItem><DItem onClick={()=>{setTabs(p=>p.filter(t=>t.id===tabContextMenu.tabId));setTabContextMenu(null)}}>Close Others</DItem><DItem onClick={()=>{flash("Duplicated");setTabContextMenu(null)}}>Duplicate</DItem><DItem onClick={()=>{flash("Pinned");setTabContextMenu(null)}}>Pin</DItem>
{tabs.find(t=>t.id===tabContextMenu.tabId)?.type==="note"&&<DItem onClick={()=>{const n=prompt("New name:");if(n)setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,title:n}:t));setTabContextMenu(null)}}>Rename</DItem>}
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
{selectedTabs.size>0?<DItem onClick={()=>{const gid="g"+Date.now();const nm=prompt("Group name:")||"Group";setTabGroups(p=>[...p,{id:gid,label:nm,color:groupColors[p.length%groupColors.length],collapsed:false}]);setTabs(p=>p.map(t=>selectedTabs.has(t.id)||t.id===tabContextMenu.tabId?{...t,group:gid}:t));setSelectedTabs(new Set());setTabContextMenu(null);flash("Grouped")}}>Group Selected Tabs…</DItem>
:<DItem onClick={()=>{const gid="g"+Date.now();const nm=prompt("Group name:")||"Group";setTabGroups(p=>[...p,{id:gid,label:nm,color:groupColors[p.length%groupColors.length],collapsed:false}]);setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:gid}:t));setTabContextMenu(null);flash("Grouped")}}>Group Tab…</DItem>}
{tabGroups.length>0&&tabGroups.map(g=><DItem key={g.id} onClick={()=>{setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:g.id}:t));setTabContextMenu(null)}}><Dot color={g.color} size={6}/> Add to {g.label}</DItem>)}
{tabs.find(t=>t.id===tabContextMenu.tabId)?.group&&<DItem onClick={()=>{setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:undefined}:t));setTabContextMenu(null)}}>Remove from Group</DItem>}
</div>}
{groupCtx&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:groupCtx.x,top:groupCtx.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:160,padding:4}}>
<div style={{padding:"6px 8px"}}><input defaultValue={tabGroups.find(g=>g.id===groupCtx?.gid)?.label||""} onKeyDown={e=>{if(e.key==="Enter"){setTabGroups(p=>p.map(g=>g.id===groupCtx.gid?{...g,label:e.target.value}:g));setGroupCtx(null)}}} placeholder="Name this group" autoFocus style={{width:"100%",border:"none",borderBottom:`1px solid ${c.borderLight}`,outline:"none",fontSize:12,fontFamily:font.sans,padding:"2px 0",backgroundColor:"transparent",color:c.textPri}}/></div><div style={{display:"flex",gap:4,padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`}}>{["#808080","#3B82F6","#EF4444","#F59E0B","#22C55E","#A855F7","#EC4899","#14B8A6","#F97316","#FF69B4"].map(clr=><div key={clr} onClick={()=>{setTabGroups(p=>p.map(g=>g.id===groupCtx.gid?{...g,color:clr}:g))}} style={{width:14,height:14,borderRadius:"50%",backgroundColor:clr,cursor:"pointer",border:tabGroups.find(g=>g.id===groupCtx?.gid)?.color===clr?`2px solid ${c.textPri}`:"2px solid transparent"}}/>)}</div>
<DItem onClick={()=>{flash("New tab in group");setGroupCtx(null)}}>New Tab in Group</DItem>
<DItem onClick={()=>{setTabs(p=>p.map(t=>t.group===groupCtx.gid?{...t,group:undefined}:t));setTabGroups(p=>p.filter(g=>g.id!==groupCtx.gid));setGroupCtx(null);flash("Ungrouped")}}>Ungroup All</DItem>
<DItem onClick={()=>{setTabs(p=>p.filter(t=>t.group!==groupCtx.gid));setTabGroups(p=>p.filter(g=>g.id!==groupCtx.gid));setGroupCtx(null);flash("Group closed")}}>Close Group</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>{setTabs(p=>p.filter(t=>t.group!==groupCtx.gid));setTabGroups(p=>p.filter(g=>g.id!==groupCtx.gid));setGroupCtx(null);flash("Group deleted")}}>Delete Group</DItem>
</div>}
{/* TOOLBAR + CONTENT + RIGHT PANEL wrapper */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* NOTE TOOLBAR — restored from V7.3, "Ask Elnor" → "Ask" */}
{isNoteType&&<div style={{display:"flex",alignItems:"center",gap:3,padding:"6px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap",flexShrink:0}}>
<select style={{padding:"2px 4px",borderRadius:3,border:`1px solid ${c.borderLight}`,fontSize:10.5,fontFamily:font.sans,color:c.textSec,backgroundColor:"transparent",height:24}}><option>Paragraph</option><option>H1</option><option>H2</option></select>
<TBtn icon={<span style={{fontWeight:700,fontSize:12}}>B</span>}/><TBtn icon={<span style={{fontStyle:"italic",fontSize:12}}>I</span>}/><TBtn icon={<span style={{textDecoration:"underline",fontSize:12}}>U</span>}/>
<Sep/><TBtn icon={<I.Undo size={13}/>}/><TBtn icon={<I.Redo size={13}/>}/>
<Sep/><TBtn icon={<I.Copy size={13}/>} title="Copy" onClick={()=>flash("Copied")}/>
<div style={{position:"relative"}}><TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="save"?null:"save")}}/>{openDrop==="save"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:180,padding:4}}><DItem onClick={()=>{flash("Export MD");setOpenDrop(null)}}>Export as Markdown</DItem><DItem onClick={()=>{flash("Export DOCX");setOpenDrop(null)}}>Export as DOCX</DItem><DItem onClick={()=>{flash("Export PDF");setOpenDrop(null)}}>Export as PDF</DItem><div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/><DItem onClick={()=>{flash("Save as Prompt");setOpenDrop(null)}}>Save as Prompt</DItem></div>}</div>
<TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
<Sep/>
<div style={{position:"relative"}}><TBtn icon={<I.Grid size={13}/>} dropdown active={pickerOpen} onClick={e=>{e.stopPropagation();setPickerOpen(!pickerOpen);setPickerStep("choose")}}/>
{pickerOpen&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:30,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 28px rgba(0,0,0,0.15)",zIndex:999,width:pickerStep==="choose"?220:(pickerStep==="feed_custom"?380:340),padding:0,overflow:"hidden"}}>
{pickerStep==="choose"&&<div style={{padding:6}}><div style={{padding:"6px 10px",fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Insert Module</div><DItem onClick={()=>insertBlock("note")}><I.FileText size={14} color={c.accentBtn}/><div><div style={{fontWeight:600}}>Note Block</div><div style={{fontSize:9.5,color:c.textTer}}>Movable note section</div></div></DItem><DItem onClick={()=>insertBlock("todo")}><I.ListTodo size={14} color={c.accentBtn}/><div><div style={{fontWeight:600}}>To Do</div><div style={{fontSize:9.5,color:c.textTer}}>New checklist</div></div></DItem><DItem onClick={()=>flash("Link existing To Do list…")}><I.Link size={14} color={c.textTer}/><div><div style={{fontWeight:600}}>Link Existing To Do</div><div style={{fontSize:9.5,color:c.textTer}}>Embed a shared list</div></div></DItem><DItem onClick={()=>{setPickerStep("feed_presets");setPickerTab("system")}}><I.Spark size={14} color={c.agentAv}/><div><div style={{fontWeight:600}}>Activity Feed</div><div style={{fontSize:9.5,color:c.textTer}}>Live updates, agent summaries</div></div></DItem><DItem onClick={()=>insertBlock("thread")}><I.MsgCircle size={14} color={c.accentBtn}/><div><div style={{fontWeight:600}}>@{agent.name} Thread</div><div style={{fontSize:9.5,color:c.textTer}}>Inline conversation</div></div></DItem><DItem onClick={()=>insertBlock("bar")}><I.Bell size={14} color={c.warn}/><div><div style={{fontWeight:600}}>Notice Bar</div><div style={{fontSize:9.5,color:c.textTer}}>Alert, reminder, status</div></div></DItem><DItem onClick={()=>insertBlock("calendar")}><I.Calendar size={14} color={c.accentBtn}/><div><div style={{fontWeight:600}}>Calendar</div><div style={{fontSize:9.5,color:c.textTer}}>Agent-managed calendar view</div></div></DItem></div>}
{pickerStep==="feed_presets"&&<div><div style={{display:"flex",alignItems:"center",padding:"8px 10px",borderBottom:`1px solid ${c.borderLight}`,gap:6}}><button onClick={()=>setPickerStep("choose")} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer}}><span style={{transform:"rotate(180deg)",display:"inline-flex"}}><I.ChevR size={12}/></span></button><span style={{fontSize:12,fontWeight:650,flex:1}}>Choose Feed Preset</span></div><div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`}}>{[{id:"system",l:"System"},{id:"agent",l:"Agent"},{id:"custom",l:"My Presets"}].map(tab=><button key={tab.id} onClick={()=>setPickerTab(tab.id)} style={{flex:1,padding:"8px 4px",border:"none",cursor:"pointer",fontFamily:font.sans,fontSize:10.5,fontWeight:pickerTab===tab.id?650:400,color:pickerTab===tab.id?c.accentBtn:c.textTer,backgroundColor:"transparent",borderBottom:pickerTab===tab.id?`2px solid ${c.accentBtn}`:"2px solid transparent"}}>{tab.l}</button>)}</div><div style={{padding:6,maxHeight:260,overflowY:"auto"}}>{feedPresets.filter(p=>pickerTab==="custom"?false:p.category===pickerTab).map(p=><div key={p.id} onClick={()=>insertBlock("feed",p)} style={{display:"flex",alignItems:"center",gap:10,padding:"8px 10px",borderRadius:R.sm,cursor:"pointer",marginBottom:2}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><div style={{width:28,height:28,borderRadius:R.sm,backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center"}}>{feedIcons[p.icon]}</div><div><div style={{fontSize:12,fontWeight:600}}>{p.name}</div><div style={{fontSize:10,color:c.textTer}}>{p.desc}</div></div></div>)}{pickerTab==="custom"&&<div style={{padding:12,textAlign:"center",color:c.textTer,fontSize:11,fontStyle:"italic"}}>No custom presets yet</div>}</div></div>}
</div>}</div>
<Sep/><TBtn icon={<I.Search size={13}/>} active={findBar} onClick={()=>setFindBar(!findBar)}/><TBtn icon={<I.Maximize size={13}/>}/>
<Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={`${openC.length}`} active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(true);setRightTab("comments")}}}/>
{pendingChanges.length>0&&<><Sep/><TBtn icon={<I.Eye size={13}/>} label={showMarkup?"Track":"Clean"} active={showMarkup} onClick={()=>setShowMarkup(!showMarkup)}/><div style={{position:"relative"}}><TBtn icon={<I.Edit size={13}/>} label={`${pendingChanges.length}`} dropdown active onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="review"?null:"review")}}/>{openDrop==="review"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:160,padding:4}}><DItem onClick={()=>{setChanges(p=>p.map(x=>x.status==="pending"?{...x,status:"accepted"}:x));flash("All accepted");setOpenDrop(null)}}>✓ Accept All ({pendingChanges.length})</DItem><DItem onClick={()=>{setChanges(p=>p.map(x=>x.status==="pending"?{...x,status:"rejected"}:x));flash("All rejected");setOpenDrop(null)}}>✗ Reject All ({pendingChanges.length})</DItem></div>}</div></>}
<Sep/><div style={{position:"relative"}}><TBtn icon={<I.Settings size={13}/>} title="Note settings" dropdown active={openDrop==="settings"} onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="settings"?null:"settings")}}/>{openDrop==="settings"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:220,padding:6}}>
<div style={{padding:"4px 8px",fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Note Settings</div>
{[{label:"Auto-save",val:"On",toggle:true},{label:"Spell check",val:"On",toggle:true},{label:"Show word count",val:"Off",toggle:true}].map((s,i)=><div key={i} style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 8px",fontSize:11.5,borderRadius:R.sm}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{color:c.textPri}}>{s.label}</span><span style={{fontSize:10,color:c.accentBtn,fontWeight:600,cursor:"pointer"}} onClick={()=>flash(`${s.label} toggled`)}>{s.val}</span></div>)}
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"4px 0"}}/>
<div style={{padding:"4px 8px",fontSize:11.5,color:c.textSec}}>Default agent: <strong>{agent.name}</strong></div>
<div style={{padding:"4px 8px",fontSize:11.5,color:c.textSec}}>Template: <span style={{color:c.accentBtn,cursor:"pointer"}} onClick={()=>flash("Configure template…")}>Today Note</span></div>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"4px 0"}}/>
<DItem onClick={()=>{flash("All settings…");setOpenDrop(null)}}><I.Settings size={12} color={c.textTer}/>All note settings…</DItem>
</div>}</div>
<div style={{flex:1}}/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${(activeTab.type==="clips"?c.purple:c.accentBtn)}40`,backgroundColor:(rightOpen&&rightTab==="send")?(activeTab.type==="clips"?c.purple:c.accentBtn):(activeTab.type==="clips"?c.purple:c.accentBtn)+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":(activeTab.type==="clips"?c.purple:c.accentBtn),fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask</button>
</div>}
{/* DOC TOOLBAR — V7.6: single line, no Markup on viewer, version dropdown */}
{activeTab.type==="doc"&&<><div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexShrink:0}}>
<I.FileText size={14} color={c.accentBtn}/>
<span onClick={()=>flash("Opening in Preview.app…")} onContextMenu={e=>{e.preventDefault();e.stopPropagation();setDocTitleMenu({x:e.clientX,y:e.clientY})}} style={{fontSize:13,fontWeight:650,cursor:"pointer",maxWidth:200,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",flexShrink:1}} title="Sanli Expert Report.pdf — ~/OneDrive-schallfirm/Paramount/Expert_Reports/">Sanli Expert Report</span>
<span style={{fontSize:9,padding:"1px 6px",borderRadius:R.full,backgroundColor:c.bgInput,color:c.textTer,fontWeight:600,flexShrink:0}}>PDF</span><Sep/>
<TBtn icon={<I.Copy size={13}/>} title="Copy" onClick={()=>flash("Copied")}/>
<div style={{position:"relative"}}><TBtn icon={<I.Save size={13}/>} label="Save As" dropdown active={openDrop==="save"} onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="save"?null:"save")}}/>{openDrop==="save"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:180,padding:4}}><DItem onClick={()=>{flash("Save PDF");setOpenDrop(null)}}>Save As… (PDF)</DItem><DItem onClick={()=>{flash("Export DOCX");setOpenDrop(null)}}>Export as DOCX</DItem><DItem onClick={()=>{flash("Export MD");setOpenDrop(null)}}>Export as Markdown</DItem><div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/><DItem onClick={()=>{flash("Save as Prompt");setOpenDrop(null)}}>Save as Prompt</DItem></div>}</div>
<Sep/><TBtn icon={<I.FileText size={13}/>} label="To Note" onClick={()=>flash("Converting…")}/><TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/><Sep/>
<TBtn icon={<I.Search size={13}/>} onClick={()=>setFindBar(!findBar)}/><TBtn icon={<I.ExtLink size={13}/>} title="Open in default app" onClick={()=>flash("Opening in Preview.app…")}/><TBtn icon={<I.Printer size={13}/>} onClick={()=>flash("Print…")}/><TBtn icon={<I.Pin size={13}/>} active={pinned} onClick={()=>{setPinned(!pinned);flash(pinned?"Unpinned":"Pinned")}}/><Sep/>
<TBtn icon={<I.MsgCircle size={13}/>} label={openC.length+""} active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(true);setRightTab("comments")}}}/>
<div style={{position:"relative"}}><TBtn label="v2" dropdown active={openDrop==="ver"} onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="ver"?null:"ver")}}/>{openDrop==="ver"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:120,padding:4}}><DItem active onClick={()=>setOpenDrop(null)}>v2 (current)</DItem><DItem onClick={()=>{flash("Loading v1…");setOpenDrop(null)}}>v1</DItem></div>}</div>
<div style={{flex:1}}/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(rightOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask</button>
</div>
{docTitleMenu&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:docTitleMenu.x,top:docTitleMenu.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:200,padding:4}}>
<DItem onClick={()=>{flash("Showing in Finder…");setDocTitleMenu(null)}}><I.Folder size={12} color={c.textTer}/>Show in Finder</DItem>
<DItem onClick={()=>{flash("Opening in Preview.app…");setDocTitleMenu(null)}}><I.ExtLink size={12} color={c.textTer}/>Open in Default App</DItem>
<div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
<DItem onClick={()=>{flash("Ref copied: doc:sanli_expert_report:v2");setDocTitleMenu(null)}}><I.Link size={12} color={c.textTer}/>Copy Ref</DItem>
<DItem onClick={()=>{flash("Path copied");setDocTitleMenu(null)}}><I.Copy size={12} color={c.textTer}/>Copy Path</DItem>
<DItem onClick={()=>{flash("Name copied");setDocTitleMenu(null)}}><I.FileText size={12} color={c.textTer}/>Copy File Name</DItem>
</div>}</>}
{/* WEB TOOLBAR + BOOKMARKS BAR */}
{activeTab.type==="web"&&<><div style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderBottom:`1px solid ${bmBarVisible?c.borderLight:c.border}`,backgroundColor:c.bgPanel,flexShrink:0}}><button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textSec}}><I.ArrowL size={15}/></button><button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.ArrowR size={15}/></button><button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textSec}}><I.Refresh size={14}/></button><div style={{flex:1,display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:R.full,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`,minWidth:0}}>{activeTab.incognito?<I.EyeOff size={12} color={c.textTer}/>:<I.Lock size={12} color={c.green}/>}<input defaultValue="https://ecf.cacd.uscourts.gov/doc1/031139485672" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12.5,fontFamily:font.sans,outline:"none",color:c.textPri,minWidth:0}}/></div><button onClick={()=>{setBookmarked(!bookmarked);flash(bookmarked?"Removed":"Bookmarked")}} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Star size={15} color={bookmarked?c.warn:c.textTer}/></button><Sep/><TBtn icon={<I.Book size={13}/>} active={readerMode} onClick={()=>{setReaderMode(!readerMode);flash(readerMode?"Page view":"Reader mode")}}/><TBtn icon={<I.Save size={13}/>} label="Save"/><TBtn icon={<I.Scissors size={13}/>} label="Clip" onClick={()=>{setClipsCount(n=>n+1);flash("Clipped")}}/><Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={openC.length+""}/><Sep/><TBtn icon={<I.Settings size={13}/>}/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(rightOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask</button></div>
{bmBarVisible&&bmBar&&<div style={{display:"flex",alignItems:"center",gap:2,padding:"3px 8px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexShrink:0,overflowX:"auto"}}>{bmBar.items.map(bm=><button key={bm.id} onClick={()=>flash(`Navigate to ${bm.url}`)} style={{display:"flex",alignItems:"center",gap:4,padding:"2px 8px",borderRadius:R.sm,border:"none",backgroundColor:"transparent",cursor:"pointer",fontSize:10.5,color:c.textSec,fontFamily:font.sans,whiteSpace:"nowrap",flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{width:12,height:12,borderRadius:2,backgroundColor:bm.color,display:"flex",alignItems:"center",justifyContent:"center",fontSize:7,color:"#fff",fontWeight:700}}>{bm.url[0].toUpperCase()}</span>{bm.title}</button>)}<span style={{fontSize:9,color:c.textTer,cursor:"pointer",flexShrink:0,marginLeft:4}} onClick={()=>flash("Edit bookmarks bar…")}>⋯</span></div>}
</>}
{findBar&&<div style={{display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,flexShrink:0}}><I.Search size={12} color={c.textTer}/><input placeholder="Find…" autoFocus style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12,fontFamily:font.sans,outline:"none",maxWidth:250}}/><span style={{fontSize:10,color:c.textTer}}>0/0</span><button onClick={()=>setFindBar(false)} style={{padding:2,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={12}/></button></div>}
{/* ── CONTENT — V7.6: zoom only on content body, not toolbar ── */}
<div ref={editorRef} style={{flex:1,overflowY:"auto",position:"relative"}} onMouseUp={handleMouseUp}>
<div style={{transform:`scale(${zoomLevel/100})`,transformOrigin:"top left",width:`${10000/zoomLevel}%`}}>
{/* NOTE */}
{activeTab.type==="note"&&<div style={{padding:"20px 28px 40px",userSelect:"text"}}><div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}><I.Sun size={20} color={c.warn}/><div style={{fontSize:21,fontWeight:700}} contentEditable suppressContentEditableWarning>Today — April 4, 2026</div></div><div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5,color:c.textTer,marginBottom:16}}><Dot color="#31588c" size={5}/>Paramount · <span style={{padding:"1px 6px",borderRadius:R.full,backgroundColor:c.warn+"15",color:c.warn,fontSize:9,fontWeight:600}} style={{display:"inline-flex",alignItems:"center",gap:2}}><I.Pin size={8}/> Pinned</span></div><div style={{fontSize:14,lineHeight:1.75,color:c.textSec}}>{noteSegs.map((seg)=>{if(seg.t==="h2")return <h2 key={seg.id} style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`,outline:"none"}} contentEditable suppressContentEditableWarning>{seg.v}</h2>;return <p key={seg.id} style={{marginBottom:12,outline:"none"}} contentEditable suppressContentEditableWarning>{renderText(seg)}</p>})}</div>{blocks.map((b)=><div key={b.id}><p contentEditable suppressContentEditableWarning style={{margin:"8px 0",minHeight:20,outline:"none",fontSize:14,lineHeight:1.75,color:c.textSec}}/>{renderBlock(b)}</div>)}<p contentEditable suppressContentEditableWarning style={{marginTop:16,minHeight:40,outline:"none",fontSize:14,lineHeight:1.75,color:c.textSec}}/></div>}
{/* DOC */}
{activeTab.type==="doc"&&<div style={{padding:"24px 32px 40px",fontSize:13.5,lineHeight:1.75,color:c.textSec,userSelect:"text"}}><h1 style={{fontSize:20,fontWeight:700,color:c.textPri,margin:"20px 0 10px"}}>Expert Report of Dr. Mehmet Sanli</h1><h2 style={{fontSize:17,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:4,borderBottom:`1px solid ${c.borderLight}`}}>I. Summary</h2><p style={{marginBottom:8}}>Plaintiff's claimed damages of $4.2M are speculative. Actual damages: ~$380,000.</p><p style={{marginBottom:8}}>Using a <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>willing buyer-willing seller</span> framework with 18% discount rate.</p><div style={{margin:"20px 0",padding:"16px 20px",backgroundColor:"#f7f7f0",border:"1px solid #e0ddd0",borderRadius:4}}><div style={{fontSize:12,fontWeight:600,color:"#666",marginBottom:8}}>TABLE 1</div><table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}><thead><tr style={{borderBottom:"2px solid #ccc"}}><th style={{textAlign:"left",padding:"6px 8px",fontSize:12}}>Category</th><th style={{textAlign:"right",padding:"6px 8px",fontSize:12}}>Paramount</th><th style={{textAlign:"right",padding:"6px 8px",fontSize:12}}>Sanli</th></tr></thead><tbody><tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Lost signage</td><td style={{textAlign:"right",padding:"6px 8px"}}>$2,840,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$210,000</td></tr><tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Permit value</td><td style={{textAlign:"right",padding:"6px 8px"}}>$980,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$120,000</td></tr><tr style={{fontWeight:700,borderTop:"2px solid #333"}}><td style={{padding:"6px 8px"}}>Total</td><td style={{textAlign:"right",padding:"6px 8px"}}>$4,200,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$380,000</td></tr></tbody></table></div></div>}
{/* WEB */}
{activeTab.type==="web"&&<div style={{backgroundColor:"#fff",userSelect:"text",padding:readerMode?"30px 60px":"20px 40px 60px",fontFamily:readerMode?font.sans:"Georgia,serif",color:"#222",lineHeight:readerMode?1.8:1.7,fontSize:readerMode?15:14.5}}><div style={{textAlign:"center",borderBottom:"2px solid #333",paddingBottom:16,marginBottom:20}}><div style={{fontSize:11,color:"#666",letterSpacing:".1em",textTransform:"uppercase",marginBottom:4}}>United States District Court — CACD</div><div style={{fontSize:18,fontWeight:700,marginBottom:4}}>PARAMOUNT CONTRACTORS v. CITY OF LOS ANGELES</div><div style={{fontSize:13,color:"#888"}}>Case No. BC587659 | Filed: March 15, 2026</div></div><h2 style={{fontSize:16,fontWeight:700,margin:"20px 0 10px"}}>MOTION IN LIMINE NO. 3</h2><p>Dr. Sanli's methodology: (1) improper framework; (2) ignoring City valuations; (3) <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>discount rate of 18%</span> unsupported.</p><h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",color:"#444"}}>II. LEGAL STANDARD</h3><p>Under <em>Sargon</em>, trial court is "gatekeeper." 55 Cal.4th at 770.</p></div>}
{/* CLIPS */}
{activeTab.type==="clips"&&<div style={{padding:"20px 28px 40px",userSelect:"text"}}><div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}><I.Scissors size={18} color={c.purple}/><div style={{fontSize:21,fontWeight:700,color:c.purple}} contentEditable suppressContentEditableWarning>Clips: 4.4-1</div><span style={{fontSize:10,padding:"2px 8px",borderRadius:R.full,backgroundColor:c.purple+"12",color:c.purple,fontWeight:600}}>Session Active</span></div><div style={{fontSize:14,lineHeight:1.75,color:c.textSec}}>{[{src:"Sanli Report.pdf",text:"Actual damages approximately $380,000 using 18% discount rate.",time:"12:34 PM"},{src:"PACER — MIL No. 3",text:"Discount rate of 18% unsupported by comparable data.",time:"12:41 PM"}].map((clip,i)=><div key={i} style={{marginBottom:16,padding:"12px 16px",borderRadius:R.md,border:`1px solid ${c.purple}30`,borderLeft:`3px solid ${c.purple}`,backgroundColor:c.purple+"04"}}><div style={{display:"flex",alignItems:"center",gap:6,marginBottom:6}}><I.Scissors size={11} color={c.purple}/><span style={{fontSize:10.5,fontWeight:600,color:c.purple}}>{clip.src}</span><span style={{fontSize:9,color:c.textTer,marginLeft:"auto"}}>{clip.time}</span></div><div style={{fontSize:13,lineHeight:1.6,color:c.textSec}}>{clip.text}</div></div>)}</div>{blocks.map(b=>renderBlock(b))}</div>}
{/* CHAT */}
{activeTab.type==="chat"&&<div style={{display:"flex",flexDirection:"column",height:"100%"}}><div style={{padding:"10px 16px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel}}><span style={{fontSize:14,fontWeight:650}}>{activeTab.title}</span></div><div style={{flex:1,padding:"16px 24px"}}>{[{author:"You",body:"Analyze Sanli's discount rate methodology.",time:"1h ago"},{author:agent.name,body:"Dr. Sanli uses an 18% discount rate but cites no comparables. Three signage transactions show 8-12%. Strong Sargon argument.",time:"55m ago"}].map((msg,i)=><div key={i} style={{marginBottom:16,display:"flex",gap:10}}><Av letter={msg.author[0]} color={msg.author==="You"?c.accentBtn:c.agentAv} size={28}/><div style={{flex:1}}><div style={{display:"flex",alignItems:"center",gap:6,marginBottom:3}}><span style={{fontSize:12,fontWeight:650,color:msg.author==="You"?c.accentBtn:c.agentAv}}>{msg.author}</span><span style={{fontSize:10,color:c.textTer}}>{msg.time}</span></div><div style={{fontSize:13.5,lineHeight:1.6}}>{msg.body}</div></div></div>)}</div><div style={{padding:"10px 16px",borderTop:`1px solid ${c.border}`,display:"flex",gap:8,flexShrink:0}}><input placeholder={`Message ${agent.name}…`} style={{flex:1,padding:"8px 12px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12.5,fontFamily:font.sans,outline:"none"}}/><Btn primary><I.Spark size={12} color="#fff"/>Send</Btn></div></div>}
{/* UTILITY */}
{/* V7.9.1: To Do standalone tab — uses renderBlock for shared rendering */}
{activeTab.type==="todo"&&<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:12}}>
<I.ListTodo size={18} color={tabColors.todo}/>
<span style={{fontSize:18,fontWeight:700}}>To Do</span>
{/* List selector — same pool as palette */}
<div style={{position:"relative"}}>
<button onClick={()=>setTabTodoListDrop(!tabTodoListDrop)} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer",fontSize:12,fontFamily:font.sans,fontWeight:500,color:c.textSec}}>
{(fpTodoLists.find(l=>l.id===tabTodoListId)||fpTodoLists[0]).name}<I.ChevD size={9}/>
</button>
{tabTodoListDrop&&<div style={{position:"absolute",top:30,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:50,minWidth:160,padding:3}}>
{fpTodoLists.map(l=><div key={l.id} onClick={()=>{setTabTodoListId(l.id);setTabTodoListDrop(false)}} style={{padding:"6px 10px",fontSize:12,cursor:"pointer",borderRadius:R.sm,fontWeight:tabTodoListId===l.id?600:400,color:tabTodoListId===l.id?c.accentBtn:c.textPri,backgroundColor:tabTodoListId===l.id?c.accentBtn+"08":"transparent",display:"flex",alignItems:"center",gap:6}} onMouseEnter={e=>{if(tabTodoListId!==l.id)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=tabTodoListId===l.id?c.accentBtn+"08":"transparent"}}>
<I.ListTodo size={11} color={tabTodoListId===l.id?c.accentBtn:c.textTer}/>{l.name}
<span style={{marginLeft:"auto",fontSize:9,color:c.textTer}}>{l.tasks.filter(t=>!t.done).length}</span>
</div>)}
<div style={{borderTop:`1px solid ${c.borderLight}`,padding:"4px 6px",marginTop:2}}>
<div onClick={()=>{flash("Create new To Do list…");setTabTodoListDrop(false)}} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",cursor:"pointer",fontSize:11,color:c.accentBtn,fontWeight:500}}><I.Plus size={10}/>New list</div>
<div onClick={()=>{setBrowserMode("notes");setBrowserOpen(true);setNoteBrowserScope(new Set(["todo"]));setTabTodoListDrop(false);flash("Select a list from browser")}} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",cursor:"pointer",fontSize:11,color:c.textSec,fontWeight:500}}><I.Search size={10}/>Browse all…</div>
</div>
</div>}
</div>
<div style={{flex:1}}/>
<button onClick={()=>flash("Pop out to palette")} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:11,color:c.textSec,fontFamily:font.sans}}><I.ExtLink size={12}/>Pop Out</button>
<button onClick={()=>flash("Ask about this list")} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:c.accentBtn+"08",cursor:"pointer",fontSize:11,color:c.accentBtn,fontFamily:font.sans,fontWeight:500}}><I.Spark size={12}/>Ask</button>
</div>
{/* Render using renderBlock with synthetic block from shared pool */}
{(()=>{const list=fpTodoLists.find(l=>l.id===tabTodoListId)||fpTodoLists[0];return renderBlock({id:"tab-todo",type:"todo",title:list.name,collapsed:false,tasks:list.tasks,linkedListId:list.id})})()}
</div>}
{activeTab.type==="utility"&&<div style={{padding:"20px 28px"}}><div style={{display:"flex",alignItems:"center",gap:8,marginBottom:16}}>{activeTab.icon==="bell"?<I.Bell size={18} color={c.warn}/>:activeTab.icon==="keyboard"?<I.Keyboard size={18}/>:<NavIcon id={activeTab.icon} size={18}/>}<div style={{fontSize:20,fontWeight:700}}>{activeTab.title}</div></div>{activeTab.title==="Chats"?<div>{recentConvos.map(cv=><div key={cv.id} onClick={()=>openTab("chat",cv.name,"chat")} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 12px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,marginBottom:6,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Star size={14} color={cv.starred?c.warn:c.borderLight}/><Dot color={cv.color} size={8}/><div style={{flex:1}}><div style={{fontSize:13,fontWeight:550}}>{cv.name}</div></div><span style={{fontSize:10,color:c.textTer}}>{cv.time}</span></div>)}</div>:<div style={{textAlign:"center",padding:40,color:c.textSec}}>{activeTab.title} page content.<br/>Transient — auto-closes on tab switch.</div>}</div>}
</div>
{/* Bubble menu */}
{bubbleMenu&&<div data-bubble="1" style={{position:"absolute",left:Math.max(40,Math.min(bubbleMenu.x-120,(editorRef.current?.clientWidth||600)-350)),top:Math.max(10,bubbleMenu.y-44),backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",padding:"4px 6px",display:"flex",gap:2,zIndex:100,alignItems:"center"}}><button onClick={()=>{setNewCm({text:bubbleMenu.text});setBubbleMenu(null);setRightOpen(true);setRightTab("comments")}} style={{padding:"5px 10px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:c.accentBtn,color:"#fff",fontSize:11,fontWeight:600,fontFamily:font.sans,display:"flex",alignItems:"center",gap:4}}><I.MsgCircle size={11}/>Comment</button><Sep/><div style={{display:"flex",alignItems:"center",gap:2,padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,cursor:"pointer"}}><Dot color={agent.color} size={6}/><span style={{fontSize:10,fontWeight:500}}>{agent.name}</span></div><button onClick={()=>{flash(`Sent to ${agent.name}`);dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}}><I.Spark size={11}/>Ask</button>{activeTab.type==="web"&&<><button onClick={()=>{flash("Summarize…");dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans}}>Summarize</button><button onClick={()=>{setClipsCount(n=>n+1);flash("Clipped");dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}}><I.Scissors size={11}/>Clip</button></>}{isNoteType&&["Rewrite","Expand","Shorten"].map(a=><button key={a} onClick={()=>{flash(`${agent.name}: ${a}…`);dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans}}>{a}</button>)}<button onClick={dismissBubble} style={{padding:3,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textTer,display:"flex"}}><I.X size={11}/></button></div>}
</div>
</div>
{/* RIGHT PANEL (Ask/Comments) — attached to left pane */}
{rightOpen&&<div style={{width:rightWidth,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt,overflow:"hidden",position:"relative"}}>
<div style={{position:"absolute",left:0,top:0,width:4,height:"100%",cursor:"col-resize",zIndex:10}} onMouseDown={e=>{const sX=e.clientX,sW=rightWidth;const m=ev=>setRightWidth(Math.max(240,Math.min(450,sW-(ev.clientX-sX))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}}/>
<div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
{activeTab.type!=="utility"&&<button onClick={()=>setRightTab("comments")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="comments"?c.bgPanelAlt:c.bgInput,color:rightTab==="comments"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="comments"?650:450,fontFamily:font.sans,borderBottom:rightTab==="comments"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.MsgCircle size={10}/>Comments ({openC.length})</button>}
<button onClick={()=>setRightTab("send")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="send"?c.bgPanel:c.bgInput,color:rightTab==="send"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="send"?650:450,fontFamily:font.sans,borderBottom:rightTab==="send"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.Spark size={10}/>Ask</button>
<button onClick={()=>setRightOpen(false)} style={{width:26,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.X size={11}/></button>
</div>
{rightTab==="comments"&&<div style={{flex:1,overflowY:"auto",padding:"8px 0"}}>{openC.map(cm=><CmCard key={cm.id} cm={cm} resolved={false}/>)}{resolvedC.map(cm=><CmCard key={cm.id} cm={cm} resolved={true}/>)}<div style={{padding:"8px 10px"}}><div onClick={()=>setNewCm({text:""})} style={{display:"flex",alignItems:"center",gap:5,padding:"7px 9px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"text"}}><I.Plus size={11} color={c.textTer}/><span style={{fontSize:11.5,color:c.textTer}}>Add comment…</span></div></div></div>}
{rightTab==="send"&&<><div style={{flex:1,overflowY:"auto",padding:12,backgroundColor:c.bgPanel}}>
{!askConfigCollapsed&&<><div style={{padding:"6px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:11,color:c.textSec,marginBottom:8,display:"flex",alignItems:"center",gap:5}}><span>{activeTab.icon}</span><span style={{fontWeight:600,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{activeTab.title}</span></div>
<div style={{display:"flex",gap:6,marginBottom:8}}><div style={{flex:1,position:"relative"}}><div onClick={e=>{e.stopPropagation();setAgentDrop(!agentDrop)}} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer",fontSize:11}}><span style={{width:14,height:14,borderRadius:3,backgroundColor:agent.color,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,color:"#fff",fontWeight:700}}>{agent.letter}</span><span style={{flex:1,fontWeight:600}}>{agent.name}</span><I.ChevD size={9} color={c.textTer}/></div>{agentDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,padding:3}}>{agents.map((a,i)=><DItem key={a.name} active={i===agentIdx} onClick={()=>{setAgentIdx(i);setAgentDrop(false)}}><span style={{width:14,height:14,borderRadius:3,backgroundColor:a.color,fontSize:8,color:"#fff",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>{a.letter}</span>{a.name}</DItem>)}</div>}</div>
<div style={{flex:1,position:"relative"}}><div onClick={e=>{e.stopPropagation();setAskChatDrop(!askChatDrop)}} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer",fontSize:11}}><span style={{fontSize:9,color:askSendIn==="inline"?c.green:c.accentBtn}}>●</span><span style={{flex:1}}>{askSendIn==="inline"?"Inline":askSendIn==="new"?"New chat":recentConvos[askChatIdx]?.name||"Chat"}</span><I.ChevD size={9} color={c.textTer}/></div>{askChatDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,padding:3}}><DItem active={askSendIn==="inline"} onClick={()=>{setAskSendIn("inline");setAskChatDrop(false)}}>● Inline</DItem><div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/><DItem active={askSendIn==="new"} onClick={()=>{setAskSendIn("new");setAskChatDrop(false)}}>+ New chat</DItem><div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/><div style={{padding:"3px 8px",fontSize:9,color:c.textTer,fontWeight:600}}>Recent</div>{recentConvos.slice(0,6).map((cv,i)=><DItem key={cv.id} active={askSendIn==="existing"&&askChatIdx===i} onClick={()=>{setAskSendIn("existing");setAskChatIdx(i);setAskChatDrop(false)}}><Dot color={cv.color} size={5}/>{cv.name}</DItem>)}</div>}</div></div>
<div style={{marginBottom:8}}><div style={{fontSize:10,fontWeight:600,color:c.textTer,marginBottom:4}}>Send with</div><Radio selected={askScope==="doc_only"} label="Document only" onClick={()=>setAskScope("doc_only")}/><Radio selected={askScope==="all_comments"} label="All comments + references" onClick={()=>setAskScope("all_comments")}/><Radio selected={askScope==="select"} label="Select comments + references" onClick={()=>setAskScope("select")}/></div>
<label style={{display:"flex",alignItems:"center",gap:5,fontSize:11,cursor:"pointer",marginBottom:8}}><input type="checkbox" checked={askIncludeClips} onChange={()=>setAskIncludeClips(!askIncludeClips)} style={{accentColor:c.accentBtn,width:11,height:11}}/>Include session clips</label>
<button onClick={()=>setAskConfigCollapsed(true)} style={{fontSize:9,color:c.textTer,border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0}}>▲ Collapse</button>
</>}
{askConfigCollapsed&&<div onClick={()=>setAskConfigCollapsed(false)} style={{padding:"4px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:10,color:c.textTer,marginBottom:8,cursor:"pointer"}}>{activeTab.icon} {activeTab.title} → {agent.name} ▼</div>}
{/* Separator */}
<div style={{borderTop:`1px solid ${c.border}`,margin:"4px 0 8px"}}/>
{/* Instruction + attach */}
<div style={{marginBottom:8}}><div style={{fontSize:10,fontWeight:600,color:c.textTer,marginBottom:4}}>Instructions <span style={{fontWeight:400}}>(optional)</span></div><textarea value={askInstruction} onChange={e=>setAskInstruction(e.target.value)} placeholder={`Ask ${agent.name}…`} style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:50,resize:"vertical"}}/></div>
<div style={{display:"flex",alignItems:"center",gap:6,marginBottom:8}}><button onClick={()=>flash("Attach file…")} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10.5,color:c.textSec,fontFamily:font.sans}}><I.Paperclip size={11}/>Attach</button><span style={{fontSize:9,color:c.textTer}}>Drag files or click</span></div>
{/* Inline response + follow-up chat */}
{agentResponse&&<div style={{borderRadius:R.sm,border:`1px solid ${c.agentAv}30`,backgroundColor:c.agentAv+"06",overflow:"hidden"}}>
<div style={{padding:12}}><div style={{display:"flex",alignItems:"center",gap:6,marginBottom:6}}><Av letter={agent.letter} color={agent.color} size={20}/><span style={{fontSize:12,fontWeight:650,color:c.agentAv}}>{agent.name}</span></div><div style={{fontSize:12.5,lineHeight:1.6}}>{agentResponse.text}</div></div>
{/* Follow-up input — stays open for continued conversation */}
<div style={{padding:"8px 12px",borderTop:`1px solid ${c.agentAv}20`,display:"flex",gap:6}}><input value={askInstruction} onChange={e=>setAskInstruction(e.target.value)} placeholder="Follow up…" style={{flex:1,padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11.5,fontFamily:font.sans,outline:"none"}}/><button onClick={()=>{flash(`${agent.name}: responding…`);setAskInstruction("")}} style={{padding:"4px 8px",borderRadius:R.sm,border:"none",backgroundColor:c.accentBtn,color:"#fff",cursor:"pointer",fontSize:11,fontFamily:font.sans}}><I.Spark size={11}/></button></div>
<div style={{padding:"4px 12px 6px",textAlign:"center"}}><span onClick={()=>{openTab("chat",`${activeTab.title} follow-up`,"chat");setAgentResponse(null)}} style={{fontSize:10,color:c.accentBtn,cursor:"pointer",fontWeight:500}}>Continue in full chat →</span></div>
</div>}
</div>
<div style={{padding:"10px 12px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,display:"flex",gap:6}}><Btn primary onClick={handleAskSend} style={{flex:1,justifyContent:"center"}}><I.Spark size={12} color="#fff"/>{askSendIn==="inline"?`Ask ${agent.name}`:"Open in Chat"}</Btn><Btn ghost onClick={()=>setRightOpen(false)}>Cancel</Btn></div></>}
</div>}
</div>
{/* V7.6: STATUS BAR for left pane — zoom only, no toolbar zoom */}
<div style={{display:"flex",alignItems:"center",gap:10,padding:"5px 14px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,fontSize:11,color:c.textTer,flexShrink:0}}>
<span style={{display:"flex",alignItems:"center",gap:3}}><I.Clock size={10}/>{Math.floor(sessionMinutes/60)}h {sessionMinutes%60}m</span>
<span>·</span><span style={{display:"flex",alignItems:"center",gap:3}}><I.Scissors size={10}/>{clipsCount} clips</span>
<span>·</span><span>{tabs.length} tabs</span>
{isNoteType&&<><span>·</span><span style={{color:c.green,fontWeight:500}}>Saved 2m ago</span></>}
<div style={{flex:1}}/>
<span style={{cursor:"pointer",color:c.accentBtn,fontWeight:500}} onClick={()=>flash("New session")}>New Session</span>
<span>·</span>
<div style={{display:"flex",alignItems:"center",gap:4}}>
<button onClick={()=>setZoomLevel(z=>Math.max(50,z-10))} style={{border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.textTer,padding:0,display:"flex"}}><I.Minus size={10}/></button>
<input type="range" min={50} max={200} value={zoomLevel} onChange={e=>setZoomLevel(Number(e.target.value))} style={{width:70,height:3,accentColor:c.accentBtn,cursor:"pointer"}}/>
<button onClick={()=>setZoomLevel(z=>Math.min(200,z+10))} style={{border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.textTer,padding:0,display:"flex"}}><I.Plus size={10}/></button>
<span style={{fontSize:10,fontWeight:500,minWidth:28,textAlign:"center",cursor:"pointer"}} onClick={()=>setZoomLevel(100)}>{zoomLevel}%</span>
</div>
</div>
</div>
{/* ── PANE: RIGHT (only when split) ── */}
{splitMode&&<>
<div style={{width:5,backgroundColor:c.border,cursor:"col-resize",flexShrink:0,position:"relative"}} onMouseDown={e=>{e.preventDefault();const startX=e.clientX;const startW=splitWidth;const container=e.currentTarget.parentElement;const totalW=container?.clientWidth||1000;const m=ev=>{const delta=ev.clientX-startX;const pct=Math.max(20,Math.min(80,startW-delta/totalW*100));setSplitWidth(pct)};const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}} title="Drag to resize">
<div style={{position:"absolute",top:"50%",left:1,transform:"translateY(-50%)",width:3,height:30,borderRadius:2,backgroundColor:c.textTer+"40"}}/>
</div>
<div style={{flex:`0 0 ${splitWidth}%`,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0}} onClick={()=>setSplitFocus("right")}>
{/* Right pane tab bar — same level as left */}
{showHorizontalTabs&&<div style={{display:"flex",alignItems:"flex-end",gap:0,padding:"4px 4px 0 4px",backgroundColor:"#e8eaed",borderBottom:`1px solid ${c.border}`,flexShrink:0,minHeight:36}}>
{splitTabs.map(st=><div key={st.id} onClick={()=>setSplitActiveTabId(st.id)} style={{display:"flex",alignItems:"center",gap:5,padding:"0 2px 0 5px",height:32,gap:3,minWidth:60,maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:st.id===splitActiveTabId?c.bgPanel:"#f0f2f4",borderBottom:st.id===splitActiveTabId?`2.5px solid ${st.color}`:`1px solid ${c.border}`,cursor:"pointer",overflow:"hidden",flexShrink:1}}><span style={{color:st.color||c.textSec,flexShrink:0}}><TabIcon type={st.type} icon={st.icon} size={12}/></span><span style={{flex:1,fontSize:11,fontWeight:st.id===splitActiveTabId?550:400,color:st.id===splitActiveTabId?c.textPri:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{st.title}</span><span onClick={e=>{e.stopPropagation();setSplitTabs(p=>p.filter(t=>t.id!==st.id));if(splitTabs.length<=1){setSplitMode(false)}}} style={{cursor:"pointer",display:"flex",opacity:st.id===splitActiveTabId?1:0,padding:2}}><I.X size={10} color={c.textTer}/></span></div>)}
<div style={{position:"relative"}}><button onClick={e=>{e.stopPropagation();setSplitNewTabDrop(!splitNewTabDrop)}} style={{width:28,height:28,borderRadius:"6px 6px 0 0",border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer,marginBottom:2}}><I.Plus size={14}/></button>{splitNewTabDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:30,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:100,minWidth:200,padding:4}}>
<div style={{padding:"4px 10px",fontSize:9.5,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Create</div>
<DItem onClick={()=>{const id="st"+Date.now();setSplitTabs(p=>[...p,{id,type:"note",icon:"note",title:"Untitled Note",color:tabColors.note}]);setSplitActiveTabId(id);setSplitNewTabDrop(false)}}><I.FileText size={12} color={c.accentBtn}/> New Note</DItem>
<DItem onClick={()=>{const id="st"+Date.now();setSplitTabs(p=>[...p,{id,type:"todo",icon:"todo",title:"New To Do",color:tabColors.todo}]);setSplitActiveTabId(id);setSplitNewTabDrop(false)}}><I.ListTodo size={12} color={tabColors.todo}/> New To Do</DItem>
<DItem onClick={()=>{const id="st"+Date.now();setSplitTabs(p=>[...p,{id,type:"chat",icon:"chat",title:"New Chat",color:tabColors.chat}]);setSplitActiveTabId(id);setSplitNewTabDrop(false)}}><I.MsgCircle size={12} color={tabColors.chat}/> New Chat</DItem>
<DItem onClick={()=>{const id="st"+Date.now();setSplitTabs(p=>[...p,{id,type:"web",icon:"web",title:"New Tab",color:tabColors.web}]);setSplitActiveTabId(id);setSplitNewTabDrop(false)}}><I.Globe size={12} color={tabColors.web}/> New Web Tab</DItem>
<DItem onClick={()=>{const id="st"+Date.now();setSplitTabs(p=>[...p,{id,type:"doc",icon:"doc",title:"Open Document…",color:tabColors.doc}]);setSplitActiveTabId(id);setSplitNewTabDrop(false)}}><I.File size={12} color={tabColors.doc}/> Open Document</DItem>
</div>}</div>
<div style={{flex:1}}/>
<button onClick={()=>{setTabs(p=>[...p,...splitTabs]);setSplitMode(false);setSplitTabs([]);flash("Split closed — tabs merged")}} title="Close split" style={{width:24,height:24,borderRadius:R.sm,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer,marginBottom:4}}><I.X size={12}/></button>
</div>}
{/* Right pane toolbar — full doc toolbar */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexShrink:0}}>
<I.FileText size={14} color={c.green}/>
<span style={{fontSize:13,fontWeight:650,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}} title="Christensen_CV.pdf — ~/OneDrive-schallfirm/Paramount/Expert_Reports/">Christensen_CV.pdf</span>
<span style={{fontSize:9,padding:"1px 6px",borderRadius:R.full,backgroundColor:c.bgInput,color:c.textTer,fontWeight:600}}>PDF</span><Sep/>
<TBtn icon={<I.Copy size={13}/>} title="Copy" onClick={()=>flash("Copied")}/>
<TBtn icon={<I.Save size={13}/>} label="Save As" dropdown onClick={()=>flash("Save As…")}/>
<Sep/>
<TBtn icon={<I.FileText size={13}/>} label="To Note" onClick={()=>flash("To Note")}/>
<TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
<Sep/>
<TBtn icon={<I.Search size={13}/>}/>
<TBtn icon={<I.ExtLink size={13}/>} onClick={()=>flash("Open external")}/>
<TBtn icon={<I.Printer size={13}/>} onClick={()=>flash("Print")}/>
<TBtn icon={<I.Pin size={13}/>}/>
<Sep/>
<TBtn icon={<I.MsgCircle size={13}/>} label="0" active={splitRightOpen&&splitRightTab==="comments"} onClick={()=>{if(splitRightOpen&&splitRightTab==="comments")setSplitRightOpen(false);else{setSplitRightOpen(true);setSplitRightTab("comments")}}}/>
<TBtn icon={<I.Clock size={13}/>} label="v1" dropdown onClick={()=>flash("Version history")}/>
<div style={{flex:1}}/>
<button onClick={()=>{if(splitRightOpen&&splitRightTab==="send")setSplitRightOpen(false);else{setSplitRightOpen(true);setSplitRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(splitRightOpen&&splitRightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(splitRightOpen&&splitRightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask</button>
</div>
{/* Right pane content + panel wrapper */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
<div style={{flex:1,overflowY:"auto",padding:"24px 28px 40px",fontSize:13.5,lineHeight:1.75,color:c.textSec}}>
<h1 style={{fontSize:18,fontWeight:700,color:c.textPri,marginBottom:8}}>Danny Christensen, P.E.</h1>
<h2 style={{fontSize:15,fontWeight:600,color:c.textPri,margin:"16px 0 6px"}}>Qualifications</h2>
<p style={{marginBottom:8}}>Licensed Professional Engineer, California #C-84521.</p>
<p style={{marginBottom:8}}>25 years of experience in signage valuation and permit economics.</p>
<h2 style={{fontSize:15,fontWeight:600,color:c.textPri,margin:"16px 0 6px"}}>Methodology</h2>
<p style={{marginBottom:8}}>Income approach using comparable signage-rights transactions with discount rates of 8-12%.</p>
<h2 style={{fontSize:15,fontWeight:600,color:c.textPri,margin:"16px 0 6px"}}>Opinion</h2>
<p>Fair market value of Paramount's signage rights: $3,640,000.</p>
</div>
{/* Right pane's own Ask/Comments panel */}
{splitRightOpen&&<div style={{width:240,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt,overflow:"hidden"}}>
<div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
<button onClick={()=>setSplitRightTab("comments")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:splitRightTab==="comments"?c.bgPanelAlt:c.bgInput,color:splitRightTab==="comments"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:splitRightTab==="comments"?650:450,fontFamily:font.sans,borderBottom:splitRightTab==="comments"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.MsgCircle size={10}/>Comments</button>
<button onClick={()=>setSplitRightTab("send")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:splitRightTab==="send"?c.bgPanel:c.bgInput,color:splitRightTab==="send"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:splitRightTab==="send"?650:450,fontFamily:font.sans,borderBottom:splitRightTab==="send"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.Spark size={10}/>Ask</button>
<button onClick={()=>setSplitRightOpen(false)} style={{width:26,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.X size={11}/></button>
</div>
{splitRightTab==="comments"&&<div style={{flex:1,overflowY:"auto",padding:"12px 8px"}}><div style={{textAlign:"center",padding:20,color:c.textTer,fontSize:11,fontStyle:"italic"}}>No comments on this document yet.</div><div style={{padding:"4px 4px"}}><div onClick={()=>flash("Add comment")} style={{display:"flex",alignItems:"center",gap:5,padding:"7px 9px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"text"}}><I.Plus size={11} color={c.textTer}/><span style={{fontSize:11.5,color:c.textTer}}>Add comment…</span></div></div></div>}
{splitRightTab==="send"&&<div style={{flex:1,overflowY:"auto",padding:12,backgroundColor:c.bgPanel}}>
<div style={{padding:"6px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:11,color:c.textSec,marginBottom:8}}><I.File size={11}/> Christensen_CV.pdf</div>
<div style={{marginBottom:8}}><div style={{fontSize:10,fontWeight:600,color:c.textTer,marginBottom:4}}>Instructions <span style={{fontWeight:400}}>(optional)</span></div><textarea placeholder={`Ask ${agent.name}…`} style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:50,resize:"vertical"}}/></div>
<Btn primary onClick={()=>flash("Sent to "+agent.name)} style={{width:"100%",justifyContent:"center"}}><I.Spark size={12} color="#fff"/>Ask</Btn>
</div>}
</div>}
</div>
{/* Right pane status bar with independent zoom */}
<div style={{display:"flex",alignItems:"center",gap:8,padding:"5px 14px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,fontSize:11,color:c.textTer,flexShrink:0}}>
<span>Right pane</span><div style={{flex:1}}/><div style={{display:"flex",alignItems:"center",gap:4}}>
<I.Minus size={10}/><input type="range" min={50} max={200} defaultValue={100} style={{width:60,height:3,accentColor:c.accentBtn,cursor:"pointer"}}/><I.Plus size={10}/><span style={{fontSize:10,minWidth:28,textAlign:"center"}}>100%</span>
</div>
</div>
</div>
</>}
</div>
{/* ═══ RIGHT CHAT COLUMN (placeholder — will be replaced with Will's separate mockup) ═══ */}
{chatColumnOpen&&<div style={{width:320,flexShrink:0,borderLeft:`1px solid ${c.border}`,backgroundColor:c.bgPanel,display:"flex",flexDirection:"column"}}>
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"8px 12px",borderBottom:`1px solid ${c.borderLight}`}}><div style={{display:"flex",alignItems:"center",gap:6}}><I.MsgCircle size={14} color={c.accentBtn}/><span style={{fontSize:13,fontWeight:650}}>Chat</span></div><button onClick={()=>setChatColumnOpen(false)} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={13}/></button></div>
<div style={{padding:"6px 10px",borderBottom:`1px solid ${c.borderLight}`,display:"flex",alignItems:"center",gap:6}}><Dot color={c.accentBtn} size={6}/><span style={{fontSize:11.5,fontWeight:500,flex:1}}>Paramount damages</span><I.ChevD size={10} color={c.textTer}/></div>
<div style={{flex:1,overflowY:"auto",padding:"12px 14px"}}>{[{from:"You",text:"What's the strongest argument against Sanli's 18% rate?",time:"2m"},{from:agent.name,text:"The lack of comparable transaction support. Three signage-rights deals averaged 8-12%. His rate is an unsupported outlier.",time:"1m"}].map((m,i)=><div key={i} style={{marginBottom:14}}><div style={{display:"flex",alignItems:"center",gap:5,marginBottom:3}}><Av letter={m.from[0]} color={m.from==="You"?c.accentBtn:c.agentAv} size={18}/><span style={{fontSize:11,fontWeight:650,color:m.from==="You"?c.accentBtn:c.agentAv}}>{m.from}</span><span style={{fontSize:9,color:c.textTer}}>{m.time}</span></div><div style={{fontSize:12.5,lineHeight:1.55,color:c.textPri,paddingLeft:23}}>{m.text}</div></div>)}</div>
<div style={{padding:"8px 10px",borderTop:`1px solid ${c.border}`,display:"flex",gap:6}}><input placeholder={`Message ${agent.name}…`} style={{flex:1,padding:"7px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none"}}/><button style={{width:32,height:32,borderRadius:R.sm,border:"none",backgroundColor:c.accentBtn,color:"#fff",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Spark size={14}/></button></div>
</div>}
{/* ═══ FLOATING COMMAND PALETTE — V7.6.7: all item 14 fixes ═══ */}
{fpOpen&&<div style={{position:"fixed",top:"50%",right:"calc(50% - 280px)",transform:"translateY(-50%)",display:"flex",flexDirection:"row",zIndex:10000,fontFamily:font.sans,width:fpSidebarOpen?730:560,height:440,resize:"both",overflow:"hidden"}}>{/* Sidebar panel — slides in to the left */}{fpSidebarOpen&&<div style={{width:170,flexShrink:0,height:"100%",backgroundColor:c.fpBg,border:`1px solid ${c.fpBorder}`,borderRadius:"12px 0 0 12px",borderRight:"none",boxShadow:"-8px 0 30px rgba(0,0,0,0.2)",display:"flex",flexDirection:"column",overflow:"hidden"}}><div style={{padding:"8px 8px 4px"}}><div style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderRadius:R.sm,backgroundColor:c.fpInput,border:`1px solid ${c.fpBorder}`}}><input value={fpCmdSearch} onChange={e=>setFpCmdSearch(e.target.value)} placeholder="Command…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:font.sans,outline:"none",color:c.fpText}}/></div></div><div className="fp-scroll" style={{flex:1,overflowY:"auto",padding:"4px 6px"}}>{[{id:"notices",icon:"Bell",label:"Notices",badge:fpNotices.filter(n=>n.unread).length},{id:"activity",icon:"Spark",label:"Activity"}].map(item=>{const Ic=I[item.icon];return <div key={item.id} onClick={()=>{setFpSidebarMode(fpSidebarMode===item.id?null:item.id)}} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",borderRadius:R.sm,cursor:"pointer",backgroundColor:fpSidebarMode===item.id?c.fpAccent+"15":"transparent",marginBottom:1}} onMouseEnter={e=>{if(fpSidebarMode!==item.id)e.currentTarget.style.backgroundColor=c.fpInput}} onMouseLeave={e=>e.currentTarget.style.backgroundColor=fpSidebarMode===item.id?c.fpAccent+"15":"transparent"}>{Ic&&<Ic size={12} color={fpSidebarMode===item.id?c.fpAccent:c.fpTextDim}/>}<span style={{fontSize:11,color:fpSidebarMode===item.id?c.fpAccent:c.fpText,fontWeight:fpSidebarMode===item.id?600:400,flex:1}}>{item.label}</span>{item.badge>0&&!fpSilent&&<span style={{fontSize:8,minWidth:14,textAlign:"center",padding:"1px 4px",borderRadius:R.full,backgroundColor:"#EF4444",color:"#fff",fontWeight:700}}>{item.badge}</span>}</div>})}<div style={{borderTop:`1px solid ${c.fpBorder}`,margin:"6px 0"}}/><div style={{padding:"2px 8px",fontSize:9,fontWeight:600,color:c.fpTextDim,textTransform:"uppercase",letterSpacing:".05em",marginBottom:4,display:"flex",alignItems:"center"}}>Quick Actions<span style={{flex:1}}/><span onClick={()=>flash("Customize quick actions…")} style={{cursor:"pointer",display:"flex"}}><I.Plus size={9} color={c.fpTextDim}/></span></div>{[{icon:"Eye",label:"Watch my actions"},{icon:"Zap",label:"Run procedure…"},{icon:"FileText",label:"New note"},{icon:"Search",label:"Search knowledge"},{icon:"Keyboard",label:"Key Commands"}].map((cmd,i)=>{const Ic=I[cmd.icon];return <div key={i} onClick={()=>{flash(cmd.label);if(cmd.label==="Key Commands"){openTab("utility","Key Commands","keyboard");setFpOpen(false)}}} style={{display:"flex",alignItems:"center",gap:8,padding:"5px 8px",borderRadius:R.sm,cursor:"pointer",marginBottom:1}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.fpInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>{Ic&&<Ic size={11} color={c.fpTextDim}/>}<span style={{fontSize:10.5,color:c.fpText}}>{cmd.label}</span></div>})}</div><div style={{display:"flex",alignItems:"center",gap:2,padding:"6px 8px",borderTop:`1px solid ${c.fpBorder}`}}><button onClick={()=>{setFpSilent(!fpSilent);flash(fpSilent?"Unmuted":"Silent")}} style={{display:"flex",alignItems:"center",gap:4,padding:"3px 6px",borderRadius:R.sm,border:"none",backgroundColor:fpSilent?"#EF444415":"transparent",cursor:"pointer",fontSize:9.5,color:fpSilent?"#EF4444":c.fpTextDim,fontFamily:font.sans}}><I.Bell size={10} color={fpSilent?"#EF4444":c.fpTextDim}/>{fpSilent?"Silent":"Mute"}</button><div style={{flex:1}}/><span style={{fontSize:8,color:c.fpTextDim}}>{fpCapturedKey}</span></div></div>}{/* Main panel */}<div style={{flex:1,minWidth:0,height:"100%",backgroundColor:c.fpBg,border:`1px solid ${c.fpBorder}`,borderRadius:fpSidebarOpen?"0 12px 12px 0":"12px",boxShadow:"0 24px 80px rgba(0,0,0,0.5)",display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* 14.2: Dark scrollbar scoped to palette */}
<style>{`.fp-scroll::-webkit-scrollbar{width:4px}.fp-scroll::-webkit-scrollbar-track{background:transparent}.fp-scroll::-webkit-scrollbar-thumb{background:#3a3f4a;border-radius:2px}.fp-scroll::-webkit-scrollbar-thumb:hover{background:#555}`}</style>
{/* Top bar — 14.13: no icons on Chat/Note tabs, keep ⌘ on Command. 14.4: settings icon */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"8px 12px",borderBottom:`1px solid ${c.fpBorder}`}}><button onClick={()=>{setFpSidebarOpen(!fpSidebarOpen);if(!fpSidebarOpen)setFpSidebarMode(null)}} style={{padding:"4px 6px",borderRadius:R.sm,border:"none",backgroundColor:fpSidebarOpen?c.fpAccent+"25":"transparent",color:fpSidebarOpen?c.fpAccent:c.fpTextDim,cursor:"pointer",display:"flex",alignItems:"center",position:"relative",marginRight:4}}><I.List size={14}/>{fpNotices.filter(n=>n.unread).length>0&&!fpSilent&&<span style={{position:"absolute",top:2,right:2,width:6,height:6,borderRadius:"50%",backgroundColor:"#EF4444"}}/>}</button>
{["chat","note","todo"].map(m=><button key={m} onClick={()=>{setFpMode(m);setFpSidebarMode(null)}} style={{padding:"4px 12px",borderRadius:R.full,border:"none",backgroundColor:fpMode===m&&!fpSidebarMode?c.fpAccent+"25":"transparent",color:fpMode===m&&!fpSidebarMode?c.fpAccent:c.fpTextDim,fontSize:11,fontWeight:fpMode===m&&!fpSidebarMode?600:400,cursor:"pointer",fontFamily:font.sans}}>{m==="chat"?"Chat":m==="note"?"Note":"To Do"}</button>)}
<div style={{flex:1}}/>
{/* 14.4: Settings — model/think level */}
<button onClick={()=>{setFpPinned(!fpPinned);flash(fpPinned?"Unpinned":"Pinned")}} title={fpPinned?"Unpin":"Pin on top"} style={{width:24,height:24,borderRadius:R.sm,border:"none",backgroundColor:fpPinned?c.fpAccent+"20":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Pin size={11} color={fpPinned?c.fpAccent:c.fpTextDim}/></button><button onClick={()=>flash("Model: Gemini 2.5 Pro · Think: Standard")} title="Chat settings" style={{width:24,height:24,borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Settings size={11} color={c.fpTextDim}/></button>
<button onClick={()=>setFpOpen(false)} style={{width:24,height:24,borderRadius:R.sm,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.X size={12} color={c.fpTextDim}/></button>
</div>
{/* Sidebar content panes — shown in main area when selected */}
{fpSidebarOpen&&fpSidebarMode==="notices"&&<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
<div style={{display:"flex",alignItems:"center",gap:6,padding:"8px 12px",borderBottom:`1px solid ${c.fpBorder}`}}>
<span style={{fontSize:13,fontWeight:600,color:c.fpText,flex:1}}>Notices</span>
{fpSilent&&<span style={{fontSize:9,color:"#EF4444",fontWeight:600}}>Silent</span>}
<span style={{fontSize:9,color:c.fpTextDim}}>{fpNotices.filter(n=>n.unread).length} unread</span>
<span onClick={()=>flash("All marked read")} style={{fontSize:9,color:c.fpAccent,cursor:"pointer"}}>Mark all read</span>
</div>
<div style={{display:"flex",gap:4,padding:"6px 12px"}}>
{["all","unread","snoozed"].map(f=><button key={f} onClick={()=>setFpNoticeFilter(f)} style={{padding:"2px 8px",borderRadius:R.full,border:"none",backgroundColor:fpNoticeFilter===f?c.fpAccent+"20":"transparent",color:fpNoticeFilter===f?c.fpAccent:c.fpTextDim,fontSize:10,fontWeight:fpNoticeFilter===f?600:400,cursor:"pointer",fontFamily:font.sans,textTransform:"capitalize"}}>{f}</button>)}
</div>
<div className="fp-scroll" style={{flex:1,overflowY:"auto",padding:"4px 8px"}}>
{fpNotices.filter(n=>fpNoticeFilter==="all"?true:fpNoticeFilter==="unread"?n.unread:n.snoozed).map(n=><div key={n.id} style={{padding:"10px 12px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,marginBottom:6,borderLeft:n.unread?`3px solid ${n.color}`:`3px solid transparent`,backgroundColor:c.fpInput+"60"}}>
<div style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
<Dot color={n.color} size={6}/>
<span style={{fontSize:9.5,color:n.color,fontWeight:600}}>{n.source}</span>
<span style={{flex:1}}/>
<span style={{fontSize:9,color:c.fpTextDim}}>{n.time}</span>
<span onClick={()=>flash("Archive")} style={{cursor:"pointer",display:"flex"}}><I.X size={9} color={c.fpTextDim}/></span>
</div>
<div style={{fontSize:12,fontWeight:600,color:c.fpText,marginBottom:2}}>{n.title}</div>
<div style={{fontSize:10.5,color:c.fpTextDim,marginBottom:8,lineHeight:1.4}}>{n.desc}</div>
<div style={{display:"flex",gap:4,alignItems:"center"}}>
<button onClick={()=>flash("Open item")} style={{padding:"3px 8px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.fpText,fontFamily:font.sans}}>View</button>
<button onClick={()=>flash("Dismissed")} style={{padding:"3px 8px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.fpTextDim,fontFamily:font.sans}}>Dismiss</button>
<div style={{flex:1}}/>
<button onClick={()=>flash("Snooze options")} style={{padding:"3px 8px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.fpTextDim,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}}><I.Clock size={9}/>Snooze<I.ChevD size={7}/></button>
</div>
</div>)}
</div>
</div>}
{fpSidebarOpen&&fpSidebarMode==="activity"&&<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
<div style={{padding:"8px 12px",borderBottom:`1px solid ${c.fpBorder}`}}><span style={{fontSize:13,fontWeight:600,color:c.fpText}}>Activity</span></div>
<div className="fp-scroll" style={{flex:1,overflowY:"auto",padding:"6px 8px"}}>
{[{icon:"Spark",color:c.agentAv,text:"Reviewed 3 depo transcripts — flagged 2 issues",time:"5h"},{icon:"Spark",color:c.agentAv,text:"Updated patent landscape — 4 new filings",time:"4h"},{icon:"Bell",color:c.warn,text:"OneDrive sync paused — re-auth needed",time:"6h"},{icon:"Calendar",color:"#D97706",text:"Calendar: 2 hearings next week flagged",time:"8h"},{icon:"ListTodo",color:c.accentBtn,text:"3 tasks completed in Trial Prep list",time:"1d"}].map((item,i)=>{const Ic=I[item.icon];return <div key={i} onClick={()=>flash("Open in Q")} style={{display:"flex",alignItems:"flex-start",gap:8,padding:"8px 10px",borderRadius:R.sm,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.fpInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>{Ic&&<Ic size={12} color={item.color}/>}<div style={{flex:1}}><div style={{fontSize:11.5,color:c.fpText,lineHeight:1.4}}>{item.text}</div><div style={{fontSize:9,color:c.fpTextDim,marginTop:2}}>{item.time} ago</div></div></div>})}
</div>
</div>}
{/* Show content tabs when sidebar sub-view is NOT selected */}
{!(fpSidebarOpen&&fpSidebarMode)&&<>
{/* V7.9.4: Chat mode — chat selector + messages */}
{fpMode==="chat"&&<>
{/* Chat selector */}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 12px",borderBottom:`1px solid ${c.fpBorder}`}}>
<div style={{position:"relative",flex:1}}>
{fpChatRenaming?<input value={fpChatRenameText} onChange={e=>setFpChatRenameText(e.target.value)} autoFocus onKeyDown={e=>{if(e.key==="Enter"&&fpChatRenameText.trim()){flash("Chat renamed: "+fpChatRenameText);setFpChatRenaming(false)}if(e.key==="Escape")setFpChatRenaming(false)}} onBlur={()=>{if(fpChatRenameText.trim())flash("Chat renamed");setFpChatRenaming(false)}} style={{width:"100%",padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.fpAccent}50`,backgroundColor:c.fpInput,fontSize:12.5,fontWeight:600,fontFamily:font.sans,outline:"none",color:c.fpText}}/>
:<button onClick={()=>setFpChatListDrop(!fpChatListDrop)} onDoubleClick={e=>{e.stopPropagation();const ch=fpChatList.find(x=>x.id===fpSelectedChatId)||fpChatList[0];setFpChatRenaming(true);setFpChatRenameText(ch.name);setFpChatListDrop(false)}} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",width:"100%",fontFamily:font.sans}}>
<I.MsgCircle size={12} color={c.fpAccent}/>
<span style={{fontSize:12.5,fontWeight:600,color:c.fpText,flex:1,textAlign:"left"}}>{(fpChatList.find(ch=>ch.id===fpSelectedChatId)||fpChatList[0]).name}</span>
{fpSelectedChatId==="quick"&&<span style={{fontSize:8,padding:"1px 5px",borderRadius:3,backgroundColor:c.fpAccent+"20",color:c.fpAccent,fontWeight:600}}><I.Zap size={9}/></span>}
<I.ChevD size={10} color={c.fpTextDim}/>
</button>}
{fpChatListDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.fpBg,border:`1px solid ${c.fpBorder}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.4)",zIndex:10,overflow:"hidden",maxHeight:280,overflowY:"auto"}}>
{fpChatList.map(ch=><div key={ch.id} onClick={()=>{setFpSelectedChatId(ch.id);setFpChatListDrop(false);if(ch.id!=="quick")flash(`Switched to "${ch.name}"`)}} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",cursor:"pointer",backgroundColor:ch.id===fpSelectedChatId?c.fpAccent+"15":"transparent",fontSize:11.5,color:ch.id===fpSelectedChatId?c.fpAccent:c.fpText}} onMouseEnter={e=>{if(ch.id!==fpSelectedChatId)e.currentTarget.style.backgroundColor=c.fpInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=ch.id===fpSelectedChatId?c.fpAccent+"15":"transparent"}}>
{ch.pinned?<span style={{fontSize:9}}><I.Zap size={9}/></span>:<Dot color={ch.color||c.fpTextDim} size={6}/>}
<span style={{flex:1}}>{ch.name}</span>
<span style={{fontSize:9,color:c.fpTextDim}}>{ch.time}</span>
</div>)}
<div style={{borderTop:`1px solid ${c.fpBorder}`,padding:"6px 10px"}}>
<div onClick={()=>{setFpMessages([]);setFpSelectedChatId("new-"+Date.now());setFpChatListDrop(false);flash("New chat started")}} style={{display:"flex",alignItems:"center",gap:5,cursor:"pointer",fontSize:11,color:c.fpAccent,marginBottom:4}}><I.Plus size={11}/>New chat</div>
<div onClick={()=>{setBrowserMode("nav");setBrowserOpen(true);setFpChatListDrop(false);flash("Select from conversations")}} style={{display:"flex",alignItems:"center",gap:5,cursor:"pointer",fontSize:11,color:c.fpTextDim}}><I.Search size={11}/>Browse all…</div>
</div>
</div>}
</div>
<button onClick={()=>setFpScreenCapture(!fpScreenCapture)} title="Screen capture" style={{width:22,height:22,borderRadius:3,border:`1px solid ${fpScreenCapture?c.error+"60":c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Camera size={11} color={fpScreenCapture?c.error:c.fpTextDim}/></button>
<button onClick={()=>{const ch=fpChatList.find(x=>x.id===fpSelectedChatId)||fpChatList[0];openTab("chat",ch.name,"chat");flash("Opened in Q")}} title="Open in Q" style={{width:22,height:22,borderRadius:3,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.ExtLink size={10} color={c.fpTextDim}/></button>
</div>
<div className="fp-scroll" style={{flex:1,overflowY:"auto",padding:"10px 14px"}}>
{fpMessages.map(m=><div key={m.id} style={{marginBottom:12}}>
<div style={{display:"flex",alignItems:"center",gap:5,marginBottom:2}}>
<span style={{fontSize:11,fontWeight:650,color:m.from==="You"?c.fpAccent:c.agentAv}}>{m.from}</span>
<span style={{fontSize:9,color:c.fpTextDim}}>{m.time}</span>
</div>
<div style={{fontSize:13,lineHeight:1.65,color:m.from==="You"?c.fpText:"#a8b4c4"}}>{m.text}</div>
</div>)}
</div>
<div style={{padding:"8px 12px",borderTop:`1px solid ${c.fpBorder}`,display:"flex",gap:6,alignItems:"center"}}>
<button onClick={()=>flash("Attach file…")} style={{width:28,height:28,borderRadius:R.sm,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><I.Plus size={14} color={c.fpTextDim}/></button>
<textarea value={fpInput} onChange={e=>setFpInput(e.target.value)} onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();fpSend()}}} placeholder={`Ask ${agentName}…`} rows={2} style={{flex:1,padding:"8px 12px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:c.fpInput,fontSize:13,fontFamily:font.sans,outline:"none",color:c.fpText,resize:"vertical",minHeight:36,maxHeight:100,lineHeight:1.5}} autoFocus/>
<button onClick={fpSend} style={{width:28,height:28,borderRadius:R.sm,border:`1px solid ${c.fpTextDim}50`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><I.Send size={14} color={c.fpTextDim}/></button>
</div>
{fpScreenCapture&&<div style={{padding:"2px 12px 4px",fontSize:9,color:c.error,fontWeight:500}}>Screen capture on</div>}
</>}
{/* V7.9.3: Note mode — note selector + toolbar */}
{fpMode==="note"&&<>
{/* Note selector + toolbar */}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 12px",borderBottom:`1px solid ${c.fpBorder}`}}>
<div style={{position:"relative",flex:1}}>
<button onClick={()=>setFpNoteListDrop(!fpNoteListDrop)} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",width:"100%",fontFamily:font.sans}}>
<I.FileText size={12} color={c.fpAccent}/>
<span style={{fontSize:12.5,fontWeight:600,color:c.fpText,flex:1,textAlign:"left"}}>{(notes.find(n=>n.id===fpSelectedNoteId)||notes[0]).title}</span>
<I.ChevD size={10} color={c.fpTextDim}/>
</button>
{fpNoteListDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.fpBg,border:`1px solid ${c.fpBorder}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.4)",zIndex:10,overflow:"hidden",maxHeight:240,overflowY:"auto"}}>
{notes.slice(0,10).map(n=><div key={n.id} onClick={()=>{setFpSelectedNoteId(n.id);setFpNoteListDrop(false)}} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",cursor:"pointer",backgroundColor:n.id===fpSelectedNoteId?c.fpAccent+"15":"transparent",fontSize:11.5,color:n.id===fpSelectedNoteId?c.fpAccent:c.fpText}} onMouseEnter={e=>{if(n.id!==fpSelectedNoteId)e.currentTarget.style.backgroundColor=c.fpInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=n.id===fpSelectedNoteId?c.fpAccent+"15":"transparent"}}>
<I.FileText size={11} color={n.id===fpSelectedNoteId?c.fpAccent:c.fpTextDim}/>{n.title}
<span style={{marginLeft:"auto",fontSize:9,color:c.fpTextDim}}>{n.mod}</span>
</div>)}
<div style={{borderTop:`1px solid ${c.fpBorder}`,padding:"6px 10px"}}>
{fpNoteNewMode?<div style={{display:"flex",gap:4}}><input value={fpNoteNewName} onChange={e=>setFpNoteNewName(e.target.value)} placeholder="Note name…" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&fpNoteNewName.trim()){flash("Note created: "+fpNoteNewName);setFpNoteNewMode(false);setFpNoteNewName("");setFpNoteListDrop(false)}if(e.key==="Escape"){setFpNoteNewMode(false);setFpNoteNewName("")}}} style={{flex:1,padding:"4px 8px",borderRadius:3,border:`1px solid ${c.fpBorder}`,backgroundColor:c.fpInput,fontSize:11,fontFamily:font.sans,outline:"none",color:c.fpText}}/><button onClick={()=>{if(fpNoteNewName.trim()){flash("Note created");setFpNoteNewMode(false);setFpNoteNewName("");setFpNoteListDrop(false)}}} style={{padding:"4px 8px",borderRadius:3,border:"none",backgroundColor:c.fpAccent,color:"#fff",fontSize:10,cursor:"pointer",fontFamily:font.sans}}>Add</button></div>
:<div><div onClick={()=>setFpNoteNewMode(true)} style={{display:"flex",alignItems:"center",gap:5,cursor:"pointer",fontSize:11,color:c.fpAccent,marginBottom:4}}><I.Plus size={11}/>New note</div><div onClick={()=>{setBrowserMode("notes");setBrowserOpen(true);setNoteBrowserScope(new Set(["notes"]));setFpNoteListDrop(false);flash("Select from browser")}} style={{display:"flex",alignItems:"center",gap:5,cursor:"pointer",fontSize:11,color:c.fpTextDim}}><I.Search size={11}/>Browse all…</div></div>}
</div>
</div>}
</div>
<div style={{display:"flex",gap:1}}>
<button title="Bold" style={{width:22,height:22,borderRadius:3,border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.fpTextDim,fontWeight:700,fontSize:12}}>B</button>
<button title="Italic" style={{width:22,height:22,borderRadius:3,border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.fpTextDim,fontStyle:"italic",fontSize:12}}>I</button>
<button title="List" style={{width:22,height:22,borderRadius:3,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.List size={11} color={c.fpTextDim}/></button>
<button title="Copy all" onClick={()=>flash("Copied")} style={{width:22,height:22,borderRadius:3,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Copy size={11} color={c.fpTextDim}/></button>
<div style={{position:"relative"}}><button title="More" onClick={()=>flash("Export options: Markdown, PDF, Send to Note")} style={{width:22,height:22,borderRadius:3,border:"none",backgroundColor:"transparent",cursor:"pointer",color:c.fpTextDim,fontSize:11}}>⋯</button></div>
</div>
<button onClick={()=>{const n=notes.find(x=>x.id===fpSelectedNoteId)||notes[0];openTab("note",n.title,"note");flash("Opened in Q")}} title="Open in Q" style={{width:22,height:22,borderRadius:3,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.ExtLink size={10} color={c.fpTextDim}/></button>
</div>
<div style={{flex:1,padding:"0"}}>
<textarea value={fpNoteText} onChange={e=>setFpNoteText(e.target.value)} placeholder="Start typing…" style={{width:"100%",height:"100%",padding:"12px 14px",border:"none",backgroundColor:"transparent",fontSize:13.5,fontFamily:font.sans,outline:"none",color:c.fpText,resize:"none",lineHeight:1.7,boxSizing:"border-box"}}/>
</div>
<div style={{display:"flex",alignItems:"center",padding:"4px 12px 6px",fontSize:10,color:c.fpTextDim,borderTop:`1px solid ${c.fpBorder}`}}>
<span onClick={()=>{setFpMode("chat");setFpInput(`About my note — `)}} style={{cursor:"pointer",color:c.fpAccent,display:"flex",alignItems:"center",gap:4,fontWeight:500}}><I.Spark size={12} color={c.fpAccent}/>Ask</span>
<div style={{flex:1}}/>
<span>Auto-saved</span>
</div>
</>}
{/* V7.7: Todo mode — editable name, add subtasks, ask agent */}
{fpMode==="todo"&&<>
{/* List switcher with editable name */}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 12px",borderBottom:`1px solid ${c.fpBorder}`}}>
<div style={{position:"relative",flex:1}}>
{fpTodoRenaming?<div style={{display:"flex",gap:4}}>
<input value={fpTodoRenameText} onChange={e=>setFpTodoRenameText(e.target.value)} autoFocus onKeyDown={e=>{if(e.key==="Enter")fpRenameTodoList();if(e.key==="Escape")setFpTodoRenaming(false)}} onBlur={fpRenameTodoList} style={{flex:1,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.fpAccent}50`,backgroundColor:c.fpInput,fontSize:12.5,fontWeight:600,fontFamily:font.sans,outline:"none",color:c.fpText}}/>
</div>
:<button onClick={()=>setFpTodoListDrop(!fpTodoListDrop)} onDoubleClick={(e)=>{e.stopPropagation();setFpTodoRenaming(true);setFpTodoRenameText(fpTodoList.name);setFpTodoListDrop(false)}} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",width:"100%",fontFamily:font.sans}}>
<I.ListTodo size={12} color={c.fpAccent}/>
<span style={{fontSize:12.5,fontWeight:600,color:c.fpText,flex:1,textAlign:"left"}}>{fpTodoList.name}</span>
<I.ChevD size={10} color={c.fpTextDim}/>
</button>}
{fpTodoListDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.fpBg,border:`1px solid ${c.fpBorder}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.4)",zIndex:10,overflow:"hidden"}}>
{fpTodoLists.map(l=><div key={l.id} onClick={()=>{setFpActiveTodoList(l.id);setFpTodoListDrop(false)}} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",cursor:"pointer",backgroundColor:l.id===fpActiveTodoList?c.fpAccent+"15":"transparent",fontSize:11.5,color:l.id===fpActiveTodoList?c.fpAccent:c.fpText}} onMouseEnter={e=>{if(l.id!==fpActiveTodoList)e.currentTarget.style.backgroundColor=c.fpInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=l.id===fpActiveTodoList?c.fpAccent+"15":"transparent"}}>
<I.ListTodo size={11} color={l.id===fpActiveTodoList?c.fpAccent:c.fpTextDim}/>{l.name}
<span style={{marginLeft:"auto",fontSize:9,color:c.fpTextDim}}>{l.tasks.filter(t=>!t.done).length}</span>
</div>)}
<div style={{borderTop:`1px solid ${c.fpBorder}`,padding:"6px 10px"}}>
{fpTodoNewListMode?<div style={{display:"flex",gap:4}}><input value={fpTodoNewListName} onChange={e=>setFpTodoNewListName(e.target.value)} placeholder="List name…" autoFocus onKeyDown={e=>{if(e.key==="Enter")fpCreateTodoList();if(e.key==="Escape"){setFpTodoNewListMode(false);setFpTodoNewListName("")}}} style={{flex:1,padding:"4px 8px",borderRadius:3,border:`1px solid ${c.fpBorder}`,backgroundColor:c.fpInput,fontSize:11,fontFamily:font.sans,outline:"none",color:c.fpText}}/><button onClick={fpCreateTodoList} style={{padding:"4px 8px",borderRadius:3,border:"none",backgroundColor:c.fpAccent,color:"#fff",fontSize:10,cursor:"pointer",fontFamily:font.sans}}>Add</button></div>
:<div><div onClick={()=>setFpTodoNewListMode(true)} style={{display:"flex",alignItems:"center",gap:5,cursor:"pointer",fontSize:11,color:c.fpAccent,marginBottom:4}}><I.Plus size={11}/>New list</div><div onClick={()=>{setBrowserMode("notes");setBrowserOpen(true);setNoteBrowserScope(new Set(["todo"]));setFpTodoListDrop(false);flash("Select from browser")}} style={{display:"flex",alignItems:"center",gap:5,cursor:"pointer",fontSize:11,color:c.fpTextDim}}><I.Search size={11}/>Browse all…</div></div>}
</div>
</div>}
</div>
<button onClick={()=>setFpTodoDefaultsOpen(!fpTodoDefaultsOpen)} title="Calendar & reminders" style={{width:22,height:22,borderRadius:3,border:`1px solid ${fpTodoDefaultsOpen?c.fpAccent+"60":c.fpBorder}`,backgroundColor:fpTodoDefaultsOpen?c.fpAccent+"15":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Calendar size={10} color={fpTodoDefaultsOpen?c.fpAccent:c.fpTextDim}/></button>
<button onClick={()=>{openTab("todo",fpTodoList.name,"todo");flash("Opened in Q")}} title="Open in Q" style={{width:22,height:22,borderRadius:3,border:`1px solid ${c.fpBorder}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}><I.ExtLink size={10} color={c.fpTextDim}/></button>
</div>
{/* List-level defaults panel */}
{fpTodoDefaultsOpen&&<div style={{padding:"6px 12px",borderBottom:`1px solid ${c.fpBorder}`,backgroundColor:c.fpInput}}>
<div style={{display:"flex",alignItems:"center",gap:6,fontSize:10,flexWrap:"wrap"}}>
<span style={{color:c.fpTextDim,fontWeight:500}}>Calendar:</span>
<select style={{padding:"2px 4px",borderRadius:3,border:`1px solid ${c.fpBorder}`,fontSize:9,fontFamily:font.sans,backgroundColor:c.fpBg,color:c.fpText}}><option value="">None</option>{calViews.filter(v=>v!=="All").map(v=><option key={v} value={v}>{v}</option>)}</select>
<span style={{color:c.fpTextDim,fontWeight:500,marginLeft:4}}>Reminder:</span>
<select style={{padding:"2px 4px",borderRadius:3,border:`1px solid ${c.fpBorder}`,fontSize:9,fontFamily:font.sans,backgroundColor:c.fpBg,color:c.fpText}}>{reminderTimings.map(t=><option key={t} value={t}>{t}</option>)}</select>
</div>
<label style={{display:"flex",alignItems:"center",gap:4,fontSize:9,color:c.fpTextDim,marginTop:4}}><input type="checkbox" defaultChecked style={{accentColor:c.fpAccent}}/>Auto-sync due dates to calendar</label>
</div>}
{/* Task list — single-click edit, delete X on hover, ask, 📅 */}
<div className="fp-scroll" style={{flex:1,overflowY:"auto",padding:"6px 10px"}}>
{fpTodoActive.map(task=>{const isExp=fpTodoExpanded.has(task.id);const isEditing=fpTodoEditingId===task.id;return <div key={task.id} style={{marginBottom:2}}>
<div style={{display:"flex",alignItems:"flex-start",gap:5,padding:"5px 6px",borderRadius:R.sm}} onMouseEnter={e=>{e.currentTarget.style.backgroundColor=c.fpInput;e.currentTarget.querySelectorAll('.fp-hover').forEach(el=>el.style.opacity=1)}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor="transparent";e.currentTarget.querySelectorAll('.fp-hover').forEach(el=>el.style.opacity=0)}}>
<div onClick={()=>fpToggleTodoExp(task.id)} style={{width:16,height:16,cursor:"pointer",flexShrink:0,marginTop:1,display:"flex",alignItems:"center",justifyContent:"center",color:c.fpTextDim}}>{isExp?<I.ChevD size={13}/>:<I.ChevR size={13}/>}</div>
<div onClick={()=>fpToggleTodo(task.id)} style={{width:15,height:15,borderRadius:3,border:`1.5px solid ${c.fpTextDim}`,cursor:"pointer",flexShrink:0,marginTop:1}}/>
{isEditing?<input value={fpTodoEditText} onChange={e=>setFpTodoEditText(e.target.value)} onKeyDown={e=>{if(e.key==="Enter")fpSaveTodoEdit(task.id);if(e.key==="Escape")setFpTodoEditingId(null)}} onBlur={()=>fpSaveTodoEdit(task.id)} autoFocus style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12.5,fontFamily:font.sans,outline:"none",color:c.fpText,padding:0,lineHeight:1.4}}/>
:<span onClick={()=>{setFpTodoEditingId(task.id);setFpTodoEditText(task.text)}} style={{fontSize:12.5,color:c.fpText,lineHeight:1.4,flex:1,cursor:"text"}}>{task.text}</span>}
<span className="fp-hover" onClick={()=>flash("Set date & reminders")} title="Date & reminders" style={{opacity:0,cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",transition:"opacity 0.15s"}}><I.Calendar size={11} color={c.fpAccent}/></span>
<span className="fp-hover" onClick={()=>fpDeleteTodo(task.id)} title="Delete" style={{opacity:0,cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",transition:"opacity 0.15s"}}><I.X size={11} color={c.fpTextDim}/></span>
</div>
{isExp&&<div style={{paddingLeft:38}}>
{task.sub.map(s=><div key={s.id} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 4px"}} onMouseEnter={e=>{e.currentTarget.style.backgroundColor=c.fpInput;const x=e.currentTarget.querySelector('.fp-sdel');if(x)x.style.opacity=1}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor="transparent";const x=e.currentTarget.querySelector('.fp-sdel');if(x)x.style.opacity=0}}>
<div onClick={()=>fpToggleTodoSub(task.id,s.id)} style={{width:13,height:13,borderRadius:2,border:`1.5px solid ${s.done?c.fpAccent:c.fpTextDim}`,backgroundColor:s.done?c.fpAccent:"transparent",cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}}>{s.done&&<I.Check size={9} color="#fff"/>}</div>
<span style={{fontSize:12.5,color:s.done?c.fpTextDim:c.fpText,textDecoration:s.done?"line-through":"none",flex:1}}>{s.text}</span>
<span className="fp-sdel" onClick={()=>flash("Set subtask date")} title="Date & reminders" style={{opacity:0,cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",transition:"opacity 0.15s"}}><I.Calendar size={9} color={c.fpAccent}/></span>
<span className="fp-sdel" onClick={()=>fpDeleteTodoSub(task.id,s.id)} title="Delete" style={{opacity:0,cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",transition:"opacity 0.15s"}}><I.X size={10} color={c.fpTextDim}/></span>
</div>)}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"4px 4px"}}>
<I.Plus size={11} color={c.fpTextDim}/>
<input value={fpTodoNewSub[task.id]||""} onChange={e=>setFpTodoNewSub(p=>({...p,[task.id]:e.target.value}))} onKeyDown={e=>{if(e.key==="Enter")fpAddTodoSub(task.id)}} placeholder="Add subtask…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12,fontFamily:font.sans,outline:"none",color:c.fpText}}/>
</div>
</div>}
</div>})}
{/* Add item */}
<div style={{display:"flex",alignItems:"center",gap:6,padding:"4px 6px",marginTop:2,paddingLeft:26}}>
<I.Plus size={12} color={c.fpTextDim}/>
<input value={fpTodoNewItem} onChange={e=>setFpTodoNewItem(e.target.value)} onKeyDown={e=>{if(e.key==="Enter")fpAddTodo()}} placeholder="Add item…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12,fontFamily:font.sans,outline:"none",color:c.fpText}}/>
</div>
{/* Done section */}
{fpTodoDone.length>0&&<>
<div onClick={()=>setFpTodoDoneOpen(!fpTodoDoneOpen)} style={{display:"flex",alignItems:"center",gap:5,padding:"6px 6px 4px",marginTop:6,cursor:"pointer",fontSize:10,fontWeight:600,color:c.fpTextDim,textTransform:"uppercase",letterSpacing:".05em"}}>
{fpTodoDoneOpen?<I.ChevD size={9}/>:<I.ChevR size={9}/>}Done ({fpTodoDone.length})
</div>
{fpTodoDoneOpen&&fpTodoDone.map(task=><div key={task.id} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 6px"}} onMouseEnter={e=>{e.currentTarget.style.backgroundColor=c.fpInput;const x=e.currentTarget.querySelector('.fp-ddel');if(x)x.style.opacity=1}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor="transparent";const x=e.currentTarget.querySelector('.fp-ddel');if(x)x.style.opacity=0}}>
<div onClick={()=>fpToggleTodo(task.id)} style={{width:15,height:15,borderRadius:3,border:`1.5px solid ${c.fpAccent}`,backgroundColor:c.fpAccent,cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"}}><I.Check size={10} color="#fff"/></div>
<span style={{fontSize:12.5,color:c.fpTextDim,textDecoration:"line-through",flex:1}}>{task.text}</span>
<span className="fp-ddel" onClick={()=>fpDeleteTodo(task.id)} title="Delete" style={{opacity:0,cursor:"pointer",flexShrink:0,display:"flex",alignItems:"center",transition:"opacity 0.15s"}}><I.X size={11} color={c.fpTextDim}/></span>
</div>)}
</>}
</div>
<div style={{display:"flex",alignItems:"center",padding:"4px 12px 6px",fontSize:10,color:c.fpTextDim,borderTop:`1px solid ${c.fpBorder}`}}>
<span onClick={fpAskAboutList} style={{cursor:"pointer",color:c.fpAccent,display:"flex",alignItems:"center",gap:4,fontWeight:500}}><I.Spark size={12} color={c.fpAccent}/>Ask</span>
<div style={{flex:1}}/>
<span style={{cursor:"pointer"}} onClick={()=>flash(`Synced with note: ${fpTodoList.name}`)}>Synced to note</span>
</div>
</>}
{/* Command mode — V7.6.9: added shortcut key capture */}
</>}
{false&&fpMode==="command"&&<>
<div style={{padding:"8px 12px"}}><div style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",borderRadius:R.sm,backgroundColor:c.fpInput,border:`1px solid ${c.fpBorder}`}}><I.Search size={13} color={c.fpTextDim}/><input value={fpCmdSearch} onChange={e=>setFpCmdSearch(e.target.value)} placeholder="Search commands, entities, actions…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12.5,fontFamily:font.sans,outline:"none",color:c.fpText}} autoFocus/></div></div>
<div className="fp-scroll" style={{flex:1,overflowY:"auto",padding:"0 6px 8px"}}>
<div style={{padding:"4px 8px",fontSize:9,fontWeight:600,color:c.fpTextDim,textTransform:"uppercase",letterSpacing:".06em"}}>Quick Actions</div>
{[{icon:<I.Eye size={12}/>,label:"Watch my actions",desc:"Start demonstration mode (DOC3)",accent:true},{icon:<I.Zap size={12}/>,label:"Toggle Quick Command",desc:"Open/close this window",toggle:true},{icon:<I.FileText size={12}/>,label:"New note",desc:"Create and open a new note"},{icon:<I.Search size={12}/>,label:"Search knowledge graph",desc:"Query entity graph"},{icon:<I.Zap size={12}/>,label:"Run standing procedure…",desc:"Execute a saved automation"},{icon:<I.Keyboard size={12}/>,label:"Set palette shortcut",desc:`Current: ${fpCapturedKey}`,keycap:true},{icon:<I.Settings size={12}/>,label:"Open Settings",desc:"Q Dashboard settings"},{icon:<I.Keyboard size={12}/>,label:"Key Commands",desc:"View & edit all shortcuts"}].map((cmd,i)=><div key={i} onClick={()=>{if(cmd.keycap){setFpKeyCapture(true)}else if(cmd.label==="Key Commands"){openTab("utility","Key Commands","keyboard");setFpOpen(false);flash("Key Commands")}else if(cmd.toggle){setFpOpen(false)}else{flash(cmd.label);setFpOpen(false)}}} style={{display:"flex",alignItems:"center",gap:8,padding:"7px 10px",borderRadius:R.sm,cursor:"pointer",margin:"1px 2px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.fpInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
<span style={{color:cmd.accent?c.fpAccent:c.fpTextDim}}>{cmd.icon}</span>
<div style={{flex:1}}><div style={{fontSize:12,color:cmd.accent?c.fpAccent:c.fpText,fontWeight:cmd.accent?600:400}}>{cmd.label}</div><div style={{fontSize:9.5,color:c.fpTextDim}}>{cmd.desc}</div></div>
{cmd.accent&&<span style={{fontSize:9,color:c.fpTextDim,padding:"1px 6px",borderRadius:3,border:`1px solid ${c.fpBorder}`}}>⌥W</span>}
{cmd.toggle&&<span style={{fontSize:9,color:c.fpTextDim,padding:"1px 6px",borderRadius:3,border:`1px solid ${c.fpBorder}`}}>{fpCapturedKey}</span>}
{cmd.keycap&&<span style={{fontSize:9,color:c.fpTextDim,padding:"1px 6px",borderRadius:3,border:`1px solid ${c.fpBorder}`}}>{fpCapturedKey}</span>}
</div>)}
{/* V7.6.9: Key capture overlay */}
{fpKeyCapture&&<div style={{margin:"6px 4px",padding:"14px 12px",borderRadius:R.sm,border:`1px solid ${c.fpAccent}40`,backgroundColor:c.fpAccent+"10",textAlign:"center"}}><div style={{fontSize:12,color:c.fpAccent,fontWeight:600,marginBottom:4}}>Press your shortcut combo</div><div style={{fontSize:10,color:c.fpTextDim}}>e.g. ⌥Space, ⌘⇧K, ⌃`</div><input autoFocus onKeyDown={fpHandleKeyCapture} onBlur={()=>setFpKeyCapture(false)} style={{position:"absolute",opacity:0,width:0,height:0}}/><div style={{marginTop:8}}><span onClick={()=>setFpKeyCapture(false)} style={{fontSize:10,color:c.fpTextDim,cursor:"pointer"}}>Cancel</span></div></div>}
<div style={{padding:"8px 8px 4px",fontSize:9,fontWeight:600,color:c.fpTextDim,textTransform:"uppercase",letterSpacing:".06em"}}>Recent</div>
{["Paramount damages strategy","Sanli Expert Report.pdf","Trial Prep Checklist"].map((item,i)=><div key={i} onClick={()=>{flash(`Open ${item}`);setFpOpen(false)}} style={{display:"flex",alignItems:"center",gap:8,padding:"5px 10px",borderRadius:R.sm,cursor:"pointer",margin:"1px 2px",fontSize:11.5,color:c.fpText}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.fpInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Clock size={11} color={c.fpTextDim}/>{item}</div>)}
</div>
<div style={{padding:"4px 12px 6px",fontSize:9,color:c.fpTextDim,borderTop:`1px solid ${c.fpBorder}`}}>{fpCapturedKey} to toggle · Esc to close · ↑↓ to navigate · ↵ to select</div>
</>}
</div></div>}
{/* 14.6: In real Electron build, this window is alwaysOnTop:true, frame:false */}
{fpOpen&&<div onClick={()=>setFpOpen(false)} style={{position:"fixed",inset:0,backgroundColor:"rgba(0,0,0,0.3)",zIndex:9999}}/>}
</div>
);
}