ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_UNIFIED_WORKSPACE_V7_2.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"};
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"};
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 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>,Plus:p=><Ic {...p} d="M12 5v14 M5 12h14"/>,ChevR:p=><Ic {...p} d="M9 18l6-6-6-6"/>,ChevD:p=><Ic {...p} d="M6 9l6 6 6-6"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2l.5 5L7 10l1.5 3h7L17 10l-2.5-3L15 2"/>,Folder:p=><Ic {...p} d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>,File:p=><Ic {...p} d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6"/>,X:p=><Ic {...p} d="M18 6L6 18 M6 6l12 12"/>,Check:p=><Ic {...p} d="M20 6L9 17l-5-5"/>,Save:p=><Ic {...p} d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z M17 21v-8H7v8 M7 3v5h8"/>,Trash:p=><Ic {...p} d="M3 6h18 M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>,Copy:p=><Ic {...p} d="M20 9h-9a2 2 0 00-2 2v9a2 2 0 002 2h9a2 2 0 002-2v-9a2 2 0 00-2-2z M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>,Link:p=><Ic {...p} d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71 M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>,Maximize:p=><Ic {...p} d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>,Spark:p=><Ic {...p} d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z M12 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/>,MsgCircle:p=><Ic {...p} d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>,Undo:p=><Ic {...p} d="M3 7v6h6 M21 17a9 9 0 00-9-9 9 9 0 00-6.69 3L3 13"/>,Redo:p=><Ic {...p} d="M21 7v6h-6 M3 17a9 9 0 019-9 9 9 0 016.69 3L21 13"/>,Eye:p=><Ic {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 100 6 3 3 0 000-6z"/>,Edit:p=><Ic {...p} d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7 M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>,FileText:p=><Ic {...p} d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6 M16 13H8 M16 17H8"/>,ExtLink:p=><Ic {...p} d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6 M15 3h6v6 M10 14L21 3"/>,Printer:p=><Ic {...p} d="M6 9V2h12v7 M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2 M6 14h12v8H6z"/>,Clock:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M12 6v6l4 2"/>,ArrowL:p=><Ic {...p} d="M19 12H5 M12 19l-7-7 7-7"/>,ArrowR:p=><Ic {...p} d="M5 12h14 M12 5l7 7-7 7"/>,Refresh:p=><Ic {...p} d="M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0114.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0020.49 15"/>,Star:p=><Ic {...p} d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>,Lock:p=><Ic {...p} d="M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2z M7 11V7a5 5 0 0110 0v4"/>,Book:p=><Ic {...p} d="M4 19.5A2.5 2.5 0 016.5 17H20 M4 19.5A2.5 2.5 0 014 17V5a2 2 0 012-2h14v14"/>,Scissors:p=><Ic {...p} d="M20 4L8.12 15.88 M14.47 14.48L20 20 M8.12 8.12L12 12 M6 3a3 3 0 100 6 3 3 0 000-6z M6 15a3 3 0 100 6 3 3 0 000-6z"/>,Globe:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M2 12h20 M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>,Home:p=><Ic {...p} d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>,Settings:p=><Ic {...p} d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z M12 15a3 3 0 100-6 3 3 0 000 6z"/>,Inbox:p=><Ic {...p} d="M22 12h-6l-2 3H10l-2-3H2 M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/>,Grid:p=><Ic {...p} d="M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z"/>,Download:p=><Ic {...p} d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3"/>,List:p=><Ic {...p} d="M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01"/>,Bell:p=><Ic {...p} d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 01-3.46 0"/>,Zap:p=><Ic {...p} d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>,Sun:p=><Ic {...p} d="M12 17a5 5 0 100-10 5 5 0 000 10z M12 1v2 M12 21v2 M4.22 4.22l1.42 1.42 M18.36 18.36l1.42 1.42 M1 12h2 M21 12h2"/>,Mail:p=><Ic {...p} d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6"/>,Calendar:p=><Ic {...p} d="M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2z M16 2v4 M8 2v4 M3 10h18"/>,Mask:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M9 9h.01 M15 9h.01 M8 14s1.5 2 4 2 4-2 4-2"/>,Grip:p=><Ic {...p} d="M9 4h.01M9 9h.01M9 14h.01M9 19h.01M15 4h.01M15 9h.01M15 14h.01M15 19h.01" sw={3}/>,Archive:p=><Ic {...p} d="M21 8v13H3V8 M1 3h22v5H1z M10 12h4"/>,Sidebar:p=><Ic {...p} d="M21 3H3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2zM9 3v18"/>,Paperclip:p=><Ic {...p} d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>,Compass:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z"/>,Users:p=><Ic {...p} d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M9 11a4 4 0 100-8 4 4 0 000 8z M23 21v-2a4 4 0 00-3-3.87 M16 3.13a4 4 0 010 7.75"/>,User:p=><Ic {...p} d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2 M12 11a4 4 0 100-8 4 4 0 000 8z"/>,Database:p=><Ic {...p} d="M12 8c4.97 0 9-1.34 9-3s-4.03-3-9-3-9 1.34-9 3 4.03 3 9 3z M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5 M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3"/>,Layers:p=><Ic {...p} d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5"/>};
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"; // Default from settings — all UI uses agent.name dynamically
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"];
const sortOptions=["Modified","Alphabetical","Type","Created","Running"];
const savedViews=[{id:"sv1",name:"Current",sys:true},{id:"sv2",name:"Recent",sys:true},{id:"sv3",name:"No Project",sys:true}];
const tabColors={note:"#31588c",doc:"#2E8B57",web:"#D97706",clips:"#7C3AED",chat:"#2E8B57",room:"#6366F1",task:"#D97706",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"}];
const navPages=[{id:"tasks",icon:<I.List size={13}/>,label:"Tasks"},{id:"projects",icon:<I.Folder size={13}/>,label:"Projects"},{id:"knowledge",icon:<I.Database size={13}/>,label:"Knowledge Manager"},{id:"forums",icon:<I.MsgCircle size={13}/>,label:"Forums & Panels"},{id:"agents",icon:<I.User size={13}/>,label:"Agents"},{id:"skills",icon:<I.Zap size={13}/>,label:"Skills & Connectors"},{id:"overlays",icon:<I.Layers size={13}/>,label:"Overlays & Prompts"},{id:"buckets",icon:<I.Database size={13}/>,label:"Context Buckets"},{id:"settings",icon:<I.Settings size={13}/>,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:"📝",title:"Today — April 4, 2026",color:tabColors.note,group:"g1"},{id:"t2",type:"doc",icon:"📄",title:"Sanli Expert Report.pdf",color:tabColors.doc},{id:"t3",type:"web",icon:"🌐",title:"Paramount MIL — PACER",color:tabColors.web,group:"g1"},{id:"t4",type:"clips",icon:"✂️",title:"Clips: 4.4-1",color:tabColors.clips},{id:"t5",type:"chat",icon:"💬",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:"tasks",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:"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"}]}
];

export default function UnifiedWorkspaceV4(){
  const idC=useRef(500);const nid=()=>"x"+(++idC.current);
  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);
  const [savedGroupsList,setSavedGroupsList]=useState([]);const [savedGroupsDrop,setSavedGroupsDrop]=useState(false);

  // 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 [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 [showArchived,setShowArchived]=useState(false);
  const [noteContextMenu,setNoteContextMenu]=useState(null);
  // 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("");

  // Right panel
  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("");
  // Send to Agent
  const [agentIdx,setAgentIdx]=useState(0);const [agentDrop,setAgentDrop]=useState(false);
  const [chatIdx,setChatIdx]=useState(0);const [chatDrop,setChatDrop]=useState(false);
  const [sendScope,setSendScope]=useState("full");const [selectedCmIds,setSelectedCmIds]=useState(new Set());
  const [outputMode,setOutputMode]=useState("respond_in_chat");const [subMode,setSubMode]=useState("tracked_changes");const [instruction,setInstruction]=useState("");

  // 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);
  // Blocks (from V5.2)
  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 [agentResponse,setAgentResponse]=useState(null);
  const [sessionMinutes,setSessionMinutes]=useState(47);const [clipsCount,setClipsCount]=useState(2);
  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");

  useEffect(()=>{const iv=setInterval(()=>setSessionMinutes(m=>m+1),60000);return()=>clearInterval(iv)},[]);
  useEffect(()=>{if(activeTab.type==="note"||activeTab.type==="clips")setBrowserMode("notes");else if(activeTab.type==="web")setBrowserMode("bookmarks");else if(activeTab.type==="chat"||activeTab.type==="utility")setBrowserMode("nav");else setBrowserMode("browser")},[activeTabId]);
  // Reset right panel on tab switch
  useEffect(()=>{setActiveComment(null);setReplyingTo(null);setEditingId(null);setNewCm(null);setNewCmText("");setAgentResponse(null)},[activeTabId]);
  // Utility tabs: only one at a time, but persists until replaced or closed
  // (auto-close removed — user navigates freely without losing utility tab)

  // 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)")};
  // Bookmark management
  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")};
  // Block helpers from V5.2
  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("")};
  const insertBlock=(type,preset)=>{const newId=nid();let block;if(type==="tasks")block={id:newId,type:"tasks",title:"New Task List",collapsed:false,tasks:[]};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 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));
  // Comments
  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("")};
  // Tabs
  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:"📝",title:"Untitled Note",color:tabColors.note}:type==="doc"?{id,type:"doc",icon:"📄",title:"Open Document…",color:tabColors.doc}:{id,type:"web",icon:"🌐",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…":"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)};
  const handleSend=()=>{if(outputMode==="respond_in_chat")flash(`Opening "${chats[chatIdx].name}"…`);else{if(!instruction.trim())return;flash(`${agent.name}: ${subMode}…`)}};
  const sendToAgent=()=>{if(!instruction.trim())return;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"});setInstruction("")};;
  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)});

  // Rendered text with tracked changes
  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>};

  // Browser folder tree
  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}}>💬{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 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 rendering from V5.2
  const renderBlock=block=>{
    if(block.type==="tasks"){const active=block.tasks.filter(t=>!t.done),done=block.tasks.filter(t=>t.done);
      if(block.collapsed) return <div key={block.id} style={{margin:"14px 0"}}><div onClick={()=>toggleBlock(block.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.List size={12} color={c.warn}/><span style={{fontSize:12,fontWeight:650}}>{block.title}</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(block.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={block.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,overflow:"hidden"}}>
        <div onClick={()=>toggleBlock(block.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.List size={12} color={c.warn}/>
          {editingTitle===block.id?<input autoFocus defaultValue={block.title} onBlur={e=>{setBlocks(p=>p.map(b=>b.id===block.id?{...b,title:e.target.value||block.title}:b));setEditingTitle(null)}} onKeyDown={e=>{if(e.key==="Enter"){setBlocks(p=>p.map(b=>b.id===block.id?{...b,title:e.target.value||block.title}:b));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(block.id)}}>{block.title}</span>}
          <span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{active.length} open</span>
          <button onClick={e=>{e.stopPropagation();deleteBlock(block.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={{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(block.id,task.id)} onClick={e=>e.stopPropagation()} style={{width:15,height:15,accentColor:c.accentBtn,flexShrink:0}}/>
              <span style={{flex:1,fontSize:14,lineHeight:1.45}}>{task.text}</span>
              <div style={{display:"flex",gap:5,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>}
                <div style={{transform:expandedTask===task.id?"rotate(90deg)":"none",transition:"transform 0.1s"}}><I.ChevR size={9} color={c.textTer}/></div>
              </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(block.id,task.id,s.id)} style={{width:13,height:13,accentColor:c.accentBtn}}/><span style={{fontSize:13,color:s.done?c.textTer:c.textPri,textDecoration:s.done?"line-through":"none"}}>{s.text}</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(block.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 style={{display:"flex",gap:4,marginTop:6}}><Btn small ghost onClick={()=>flash("@Agent…")}><I.Spark size={9} color={c.agentAv}/>@{agent.name}</Btn></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 task…" onKeyDown={e=>{if(e.key==="Enter")addTask(block.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(block.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></div>}
    if(block.type==="thread"){if(block.collapsed) return <div key={block.id} style={{margin:"14px 0"}}><div onClick={()=>toggleBlock(block.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> · {block.messages.length} msgs</span><button onClick={e=>{e.stopPropagation();deleteBlock(block.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={block.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.accentBtn}20`,backgroundColor:c.accentBtn+"03",overflow:"hidden"}}>
        <div onClick={()=>toggleBlock(block.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 · {block.messages.length}</span>{block.contextQuote&&<span style={{fontSize:9,color:c.textTer,fontStyle:"italic"}}>re: "{block.contextQuote}"</span>}<button onClick={e=>{e.stopPropagation();deleteBlock(block.id)}} style={{border:"none",background:"none",cursor:"pointer",padding:1,display:"flex",color:c.textTer}}><I.X size={11}/></button></div>
        {block.messages.map((msg,i)=><div key={msg.id} style={{padding:"7px 14px",borderBottom:i<block.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===block.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(block.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(block.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(block.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(block.type==="feed"){const totalItems=block.sections.reduce((a,s)=>a+s.items.length,0);
      if(block.collapsed) return <div key={block.id} style={{margin:"14px 0"}}><div onClick={()=>toggleBlock(block.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}}>{block.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(block.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={block.id} style={{margin:"14px 0",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,overflow:"hidden"}}>
        <div onClick={()=>toggleBlock(block.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}}>{block.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(block.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"}}>{block.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>}
    return null;
  };

  // ═══ RENDER ═══
  return (
    <div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp,overflow:"hidden"}} onClick={()=>{setSortDrop(false);setNewTabDrop(false);setOpenDrop(null);setAgentDrop(false);setChatDrop(false);setTabContextMenu(null);setGroupCtx(null);setNoteSortDrop(false);setNoteContextMenu(null);setSavedGroupsDrop(false);setAllNotesSortDrop(false);if(pickerOpen&&pickerStep==="choose")setPickerOpen(false)}}>
      <style>{`@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}*:hover::-webkit-scrollbar-thumb{background:#d1d5db}::selection{background:${c.accentBtn}22}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}`}</style>
      {toast&&<Toast msg={toast} onDone={()=>setToast(null)}/>}

      {/* Q LEFT NAV — simplified */}
      <div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap:4}}>
        <div style={{width:26,height:26,borderRadius:R.sm,backgroundColor:c.accentBtn,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700,marginBottom:8,cursor:"pointer"}}>Q</div>
        <button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:browserOpen?"#ffffff18":"transparent",color:browserOpen?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Sidebar size={15}/></button>
        <div style={{width:20,height:1,backgroundColor:"#ffffff15",margin:"4px 0"}}/>
        <button title="Activity" style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:"#777",display:"flex",alignItems:"center",justifyContent:"center",position:"relative"}} onClick={()=>openTab("utility","Activity & Notifications","🔔")}><I.Bell size={15}/><span style={{position:"absolute",top:4,right:4,width:10,height:10,borderRadius:"50%",backgroundColor:c.error,fontSize:7,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:700}}>3</span></button>
        <button title="Settings" style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:"#777",display:"flex",alignItems:"center",justifyContent:"center"}} onClick={()=>openTab("utility","Settings","⚙️")}><I.Settings size={15}/></button>
        <div style={{flex:1}}/>
        <div style={{width:20,height:1,backgroundColor:"#ffffff15",margin:"4px 0"}}/>
        <button onClick={()=>setChatColumnOpen(!chatColumnOpen)} title="Chat column" style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:chatColumnOpen?"#ffffff18":"transparent",color:chatColumnOpen?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center",marginBottom:12}}><I.MsgCircle size={15}/></button>
      </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"}}>
        {/* Mode tabs */}
        <div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>{[{id:"nav",icon:<I.Compass size={10}/>,l:"Nav"},{id:"browser",icon:<I.Search size={10}/>,l:"Browser"},{id:"notes",icon:<I.FileText size={10}/>,l:"Notes"},{id:"bookmarks",icon:<I.Globe size={10}/>,l:"Web"}].map(m=><button key={m.id} onClick={()=>setBrowserMode(m.id)} style={{flex:1,padding:"6px 2px",border:"none",cursor:"pointer",backgroundColor:"transparent",color:browserMode===m.id?c.accentBtn:c.textTer,fontSize:9.5,fontWeight:browserMode===m.id?650:400,fontFamily:font.sans,borderBottom:browserMode===m.id?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}>{m.icon}{m.l}</button>)}</div>

        {/* ─── NAV MODE ─── */}
        {browserMode==="nav"&&<div style={{flex:1,overflowY:"auto"}}>
          <div style={{padding:"8px 10px 4px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Conversations</span></div>
          {recentConvos.map(cv=><div key={cv.id} onClick={()=>openTab("chat",cv.name,"💬")} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 10px",cursor:"pointer",borderRadius:R.sm,margin:"0 4px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>{cv.starred&&<I.Star size={9} color={c.warn}/>}<Dot color={cv.color} size={6}/><span style={{flex:1,fontSize:11.5,fontWeight:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{cv.name}</span><span style={{fontSize:9,color:c.textTer}}>{cv.time}</span></div>)}
          <div style={{padding:"2px 10px 8px"}}><span onClick={()=>openTab("utility","Chats","💬")} style={{fontSize:10.5,color:c.accentBtn,cursor:"pointer",fontWeight:500}}>See all →</span></div>
          <div style={{padding:"4px 10px",borderTop:`1px solid ${c.borderLight}`}}><div onClick={()=>openTab("utility","Activity & Notifications","🔔")} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 0",cursor:"pointer"}}><I.Bell size={13} color={c.textSec}/><span style={{flex:1,fontSize:12,fontWeight:500}}>Activity & Notifications</span><span style={{fontSize:9,padding:"1px 6px",borderRadius:R.full,backgroundColor:c.error,color:"#fff",fontWeight:700}}>3</span></div></div>
          <div style={{padding:"8px 10px 4px",borderTop:`1px solid ${c.borderLight}`}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Pages</span></div>
          {navPages.map(p=><div key={p.id} onClick={()=>openTab("utility",p.label,p.id==="settings"?"⚙️":"📋")} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 10px",cursor:"pointer",borderRadius:R.sm,margin:"0 4px"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>{p.icon}<span style={{fontSize:12,fontWeight:400}}>{p.label}</span></div>)}
          <div style={{padding:"8px 10px 4px",borderTop:`1px solid ${c.borderLight}`,marginTop:8}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Open Tabs ({tabs.length})</span></div>
          {tabs.map(t=><div key={t.id} onClick={()=>setActiveTabId(t.id)} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 10px",cursor:"pointer",borderRadius:R.sm,margin:"0 4px",backgroundColor:t.id===activeTabId?c.accentBtn+"08":"transparent"}} 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"}}><span style={{fontSize:10}}>{t.icon}</span><span style={{flex:1,fontSize:11,fontWeight:t.id===activeTabId?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:t.id===activeTabId?c.accentBtn:c.textSec}}>{t.title}</span></div>)}
        </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"?"This View":"Everywhere"}</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={()=>setFolderOverlay(!folderOverlay)} style={{padding:"2px 7px",borderRadius:3,border:`1.5px dashed ${folderOverlay?c.accentBtn:c.border}`,backgroundColor:folderOverlay?c.accentBtn+"12":c.bgInput+"80",fontSize:9.5,color:folderOverlay?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:20,display:"flex",alignItems:"center",gap:3,fontWeight:folderOverlay?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><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>
              {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&&p.status!=="missing"&&<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=><button key={sv.id} onClick={()=>setActiveSavedView(activeSavedView===sv.id?null:sv.id)} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"4px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:activeSavedView===sv.id?c.accentBtn+"10":"transparent",fontFamily:font.sans,textAlign:"left"}}><span style={{fontSize:11.5,fontWeight:activeSavedView===sv.id?600:400,color:activeSavedView===sv.id?c.accentBtn:c.textSec,flex:1}}>{sv.name}</span><span style={{fontSize:8,color:c.textTer,padding:"1px 4px",borderRadius:2,backgroundColor:c.bgInput}}>built-in</span></button>)}</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>
          {/* Folder overlay */}
          {folderOverlay&&activeScope!=="Folders"&&<div style={{maxHeight:90,overflowY:"auto",borderBottom:`1px solid ${c.accentBtn}30`,backgroundColor:c.accentBtn+"04",padding:"3px 0",flexShrink:0}}><div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"1px 8px 3px"}}><span style={{fontSize:9,fontWeight:600,color:c.accentBtn,textTransform:"uppercase"}}>Drag to folders</span><button onClick={()=>setFolderOverlay(false)} style={{border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={9}/></button></div>{renderBFolders(null,0,true)}</div>}
          {/* Type chips — 15 */}
          <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:folderOverlay?"grab":"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>}{folderOverlay&&<span style={{color:c.accentBtn}}>· 📁</span>}<span style={{marginLeft:"auto"}}>{sortKey}</span></div>
        </>}

        {/* ─── NOTES MODE ─── */}
        {browserMode==="notes"&&<>
          <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 notes…" 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={{maxHeight:140,overflowY:"auto",borderBottom:`1px solid ${c.border}`,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>
            {/* All notes — flat sortable list */}
            <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 Notes · {filteredNotes.length}</span><div style={{position:"relative"}}><span style={{cursor:"pointer"}} onClick={e=>{e.stopPropagation();setAllNotesSortDrop(!allNotesSortDrop)}}>{allNotesSort} ▾</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"}}>{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 10px",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"}}>{n.title}</span>{n.comments>0&&<span style={{fontSize:9,color:c.textTer}}>💬{n.comments}</span>}<span style={{fontSize:9,color:c.textTer,flexShrink:0}}>{n.mod}</span></div>)}{filteredNotes.length===0&&<div style={{padding:16,fontSize:11,color:c.textTer,textAlign:"center",fontStyle:"italic"}}>No notes match</div>}</div>
          </div>
          <div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,flexShrink:0}}>{notes.length} notes · {noteSort}</div>
        </>}

        {/* ─── BOOKMARKS MODE ─── */}
        {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"}}/>{bmSearch&&<button onClick={()=>setBmSearch("")} style={{padding:0,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={9}/></button>}</div></div>
          {/* Bookmark folder header */}
          <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={()=>{setBmNewFolderMode({parent:null});setBmNewFolderName("")}} 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}}><I.Folder size={8}/>+ Folder</button></div>
          <div style={{flex:1,overflowY:"auto"}}>
            {/* New root folder input */}
            {bmNewFolderMode?.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={bmNewFolderName} onChange={e=>setBmNewFolderName(e.target.value)} placeholder="Folder name…" autoFocus onKeyDown={e=>{if(e.key==="Enter")createBmFolder(null);if(e.key==="Escape")setBmNewFolderMode(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>}
            {/* Render bookmark folders */}
            {bmFolders.filter(f=>f.parent===null).map(bf=>{const isExp=bmExpanded.has(bf.id);const isHov=bmHoverFolder===bf.id;const isDel=bmDeletingFolder===bf.id;const subFolders=bmFolders.filter(sf=>sf.parent===bf.id);const filteredItems=bmSearch?bf.items.filter(i=>i.title.toLowerCase().includes(bmSearch.toLowerCase())):bf.items;
              return <div key={bf.id}>
                <div onMouseEnter={()=>setBmHoverFolder(bf.id)} onMouseLeave={()=>setBmHoverFolder(null)} 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={c.warn}/>
                  {bmRenamingFolder===bf.id?<input value={bmRenamingText} onChange={e=>setBmRenamingText(e.target.value)} autoFocus onClick={e=>e.stopPropagation()} onKeyDown={e=>{if(e.key==="Enter")renameBmFolder(bf.id,bmRenamingText);if(e.key==="Escape")setBmRenamingFolder(null)}} onBlur={()=>renameBmFolder(bf.id,bmRenamingText)} 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"}}>{bf.title}</span>}
                  <span style={{fontSize:9,color:c.textTer}}>{bf.items.length}</span>
                  {isHov&&!isDel&&bmRenamingFolder!==bf.id&&<><span onClick={e=>{e.stopPropagation();setBmNewFolderMode({parent:bf.id});setBmNewFolderName("")}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Subfolder"><I.Plus size={9}/></span><span onClick={e=>{e.stopPropagation();setBmRenamingFolder(bf.id);setBmRenamingText(bf.title)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Rename"><I.Edit size={9}/></span><span onClick={e=>{e.stopPropagation();setBmDeletingFolder(bf.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={()=>deleteBmFolder(bf.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setBmDeletingFolder(null)}>No</span></span>}
                </div>
                {isExp&&<>
                  {bmNewFolderMode?.parent===bf.id&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"3px 8px 3px 22px",borderBottom:`1px solid ${c.borderLight}`}}><I.Folder size={10} color={c.textTer}/><input value={bmNewFolderName} onChange={e=>setBmNewFolderName(e.target.value)} placeholder="Subfolder…" autoFocus onKeyDown={e=>{if(e.key==="Enter")createBmFolder(bf.id);if(e.key==="Escape")setBmNewFolderMode(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>}
                  {/* Subfolders */}
                  {subFolders.map(sf=>{const sfExp=bmExpanded.has(sf.id);const sfHov=bmHoverFolder===sf.id;const sfItems=bmSearch?sf.items.filter(i=>i.title.toLowerCase().includes(bmSearch.toLowerCase())):sf.items;
                    return <div key={sf.id}>
                      <div onMouseEnter={()=>setBmHoverFolder(sf.id)} onMouseLeave={()=>setBmHoverFolder(null)} onClick={()=>{const s=new Set(bmExpanded);s.has(sf.id)?s.delete(sf.id):s.add(sf.id);setBmExpanded(s)}} style={{display:"flex",alignItems:"center",gap:4,padding:"3px 8px 3px 22px",cursor:"pointer",borderBottom:`1px solid ${c.borderLight}`}}>
                        {sfExp?<I.ChevD size={9} color={c.textTer}/>:<I.ChevR size={9} color={c.textTer}/>}<I.Folder size={10} color={c.textTer}/><span style={{fontSize:11,fontWeight:500,flex:1}}>{sf.title}</span><span style={{fontSize:9,color:c.textTer}}>{sf.items.length}</span>
                        {sfHov&&<><span onClick={e=>{e.stopPropagation();setBmRenamingFolder(sf.id);setBmRenamingText(sf.title)}} style={{cursor:"pointer",display:"flex",color:c.textTer}}><I.Edit size={8}/></span><span onClick={e=>{e.stopPropagation();deleteBmFolder(sf.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer}}><I.Trash size={8}/></span></>}
                      </div>
                      {sfExp&&sfItems.map(item=><div key={item.id} onMouseEnter={()=>setBmHoverItem(item.id)} onMouseLeave={()=>setBmHoverItem(null)} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px 3px 38px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",fontSize:11}} onMouseOver={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseOut={e=>e.currentTarget.style.backgroundColor="transparent"}>
                        <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>
                        {bmRenamingItem===item.id?<input value={bmRenamingItemText} onChange={e=>setBmRenamingItemText(e.target.value)} autoFocus onClick={e=>e.stopPropagation()} onKeyDown={e=>{if(e.key==="Enter")renameBmItem(sf.id,item.id,bmRenamingItemText);if(e.key==="Escape")setBmRenamingItem(null)}} style={{flex:1,fontSize:11,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"1px 4px",outline:"none",fontFamily:font.sans,backgroundColor:c.bgCard}}/>
                        :<span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.title}</span>}
                        {bmHoverItem===item.id&&bmRenamingItem!==item.id&&<><span onClick={e=>{e.stopPropagation();setBmRenamingItem(item.id);setBmRenamingItemText(item.title)}} style={{cursor:"pointer",display:"flex",color:c.textTer}}><I.Edit size={8}/></span><span onClick={e=>{e.stopPropagation();deleteBmItem(sf.id,item.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={8}/></span></>}
                      </div>)}
                    </div>})}
                  {/* Direct items in folder */}
                  {filteredItems.map(item=><div key={item.id} onMouseEnter={()=>setBmHoverItem(item.id)} onMouseLeave={()=>setBmHoverItem(null)} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px 3px 24px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",fontSize:11}} onMouseOver={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseOut={e=>e.currentTarget.style.backgroundColor="transparent"}>
                    <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>
                    {bmRenamingItem===item.id?<input value={bmRenamingItemText} onChange={e=>setBmRenamingItemText(e.target.value)} autoFocus onClick={e=>e.stopPropagation()} onKeyDown={e=>{if(e.key==="Enter")renameBmItem(bf.id,item.id,bmRenamingItemText);if(e.key==="Escape")setBmRenamingItem(null)}} style={{flex:1,fontSize:11,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"1px 4px",outline:"none",fontFamily:font.sans,backgroundColor:c.bgCard}}/>
                    :<span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.title}</span>}
                    {bmHoverItem===item.id&&bmRenamingItem!==item.id&&<><span onClick={e=>{e.stopPropagation();setBmRenamingItem(item.id);setBmRenamingItemText(item.title)}} style={{cursor:"pointer",display:"flex",color:c.textTer}}><I.Edit size={8}/></span><span onClick={e=>{e.stopPropagation();deleteBmItem(bf.id,item.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={8}/></span></>}
                  </div>)}
                </>}
              </div>})}
            {/* Recent pages */}
            <div style={{padding:"6px 8px",borderTop:`1px solid ${c.border}`,borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Recent Pages</span></div>
            {[{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"},{title:"Christensen CV",url:"schallfirm.sharepoint.com",color:"#0078d4",time:"2d"},{title:"LAMC § 14.4.4",url:"codelibrary.amlegal.com",color:"#6B7280",time:"3d"}].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>
          <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 · {bmFolders.filter(f=>f.parent===null).length} folders</div>
        </>}
        {/* Note context menu */}
        {noteContextMenu&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:noteContextMenu.x,top:noteContextMenu.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:140,padding:4}}><DItem onClick={()=>{flash("Archived");setNoteContextMenu(null)}}><I.Archive size={12} color={c.textTer}/>Archive</DItem><DItem onClick={()=>{flash("Deleted");setNoteContextMenu(null)}}><I.Trash size={12} color={c.error}/>Delete</DItem></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(200,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 ═══ */}
      <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        {/* TAB BAR */}
        <div style={{display:"flex",alignItems:"flex-end",gap:1,padding:"4px 8px 0 0",backgroundColor:"#d5d8dc",borderBottom:`1px solid ${c.border}`,flexShrink:0,minHeight:36}}>
          <button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:26,height:36,borderRadius:0,border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:browserOpen?c.accentBtn:c.textTer,flexShrink:0,marginRight:3,padding:0}}><I.Sidebar size={14}/></button>
          {(()=>{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:"flex",gap:1,alignItems:"flex-end"}}><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:4,padding:"0 6px",height:32,cursor:"pointer",borderRadius:"8px 8px 0 0",backgroundColor:group.color+"30"}}><Dot color={group.color} size={8}/><span style={{fontSize:10,fontWeight:600,color:c.textPri,fontFamily:font.sans}}>{group.label}</span><span style={{fontSize:9,color:c.textTer,transform:group.collapsed?"rotate(-90deg)":"none"}}>▾</span></div>
              {!group.collapsed&&gTabs.map(gt=><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 10px",height:32,minWidth:80,maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:gt.id===activeTabId?c.bgPanel:(selectedTabs.has(gt.id)?"#d0d5db":"#f0f2f4"),borderBottom:gt.id===activeTabId?`2.5px solid ${gt.color}`:`2.5px solid ${group.color}40`,cursor:"pointer",overflow:"hidden",flexShrink:1}}><span style={{fontSize:11,flexShrink:0}}>{gt.icon}</span><span style={{flex:1,fontSize:11,fontWeight:gt.id===activeTabId?550:400,color:gt.id===activeTabId?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:gt.id===activeTabId?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 10px",height:32,minWidth:isTransient?60:80,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":"#f0f2f4")),borderBottom:isTransient?(tab.id===activeTabId?`2.5px solid ${c.accentBtn}`:`1px solid ${c.accentBtn}50`):(tab.id===activeTabId?`2.5px solid ${tab.color}`:`1px solid ${c.border}`),cursor:"pointer",overflow:"hidden",flexShrink:1,border:isTransient?`1px solid ${c.accentBtn}${tab.id===activeTabId?"60":"30"}`:"none",borderBottom:isTransient?(tab.id===activeTabId?`2.5px solid ${c.accentBtn}`:`1px solid ${c.accentBtn}40`):(tab.id===activeTabId?`2.5px solid ${tab.color}`:`1px solid ${c.border}`)}}>
              {tab.incognito&&<I.Mask size={10} color="#999"/>}{!tab.incognito&&<span style={{fontSize:11,flexShrink:0}}>{tab.icon}</span>}
              <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:c.textSec),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:2,borderRadius:3,flexShrink:0}}><I.X size={10} color={c.textTer}/></span></div>})})()}
          {/* [+] */}
          <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")}>📝 New Note</DItem>
              <DItem onClick={()=>{openTab("chat","New Chat","💬");setNewTabDrop(false)}}>💬 New Chat</DItem>
              <DItem onClick={()=>addTab("web")}>🌐 New Web Tab</DItem>
              <DItem onClick={()=>addTab("web",true)}><I.Mask 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",i:"💬"},{l:"Tasks",i:"📋"},{l:"Projects",i:"📁"},{l:"Knowledge Manager",i:"🧠"},{l:"Agents",i:"👤"},{l:"Settings",i:"⚙️"}].map(p=><DItem key={p.l} onClick={()=>{openTab("utility",p.l,p.i);setNewTabDrop(false)}}>{p.i} {p.l}</DItem>)}
              {savedGroupsList.length>0&&<><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"}}>Saved Groups</div>
              {savedGroupsList.map((sg,i)=><DItem key={i} onClick={()=>{setTabGroups(p=>[...p,{id:sg.id,label:sg.label,color:sg.color,collapsed:false}]);setSavedGroupsList(p=>p.filter((_,j)=>j!==i));setNewTabDrop(false);flash(`Restored "${sg.label}"`)}}><Dot color={sg.color} size={6}/>{sg.label}<span style={{fontSize:9,color:c.textTer,marginLeft:"auto"}}>{sg.tabCount} tabs</span></DItem>)}</>}
            </div>}</div>
        </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><DItem onClick={()=>{navigator.clipboard?.writeText(activeTab.title);flash("Copied");setTabContextMenu(null)}}>Copy</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>}
          {tabs.find(t=>t.id===tabContextMenu.tabId)?.type==="utility"&&!tabs.find(t=>t.id===tabContextMenu.tabId)?.pinned&&<DItem onClick={()=>{setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,pinned:true}:t));setTabContextMenu(null);flash("Pinned — won't auto-close")}}>Pin (keep open)</DItem>}
          <div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
          {/* Group operations */}
          {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&&<div style={{padding:"4px 10px 2px",fontSize:9.5,fontWeight:600,color:c.textTer}}>Add to Group</div>}
          {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}/>{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>}
        {/* Group context menu */}
        {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}}>
          <DItem onClick={()=>{const n=prompt("Group name:");if(n)setTabGroups(p=>p.map(g=>g.id===groupCtx.gid?{...g,label:n}:g));setGroupCtx(null)}}>Rename</DItem>
          <div style={{padding:"4px 10px",display:"flex",gap:4}}>{groupColors.map(gc=><span key={gc} onClick={()=>{setTabGroups(p=>p.map(g=>g.id===groupCtx.gid?{...g,color:gc}:g));setGroupCtx(null)}} style={{width:16,height:16,borderRadius:"50%",backgroundColor:gc,cursor:"pointer",border:"2px solid transparent"}}/>)}</div>
          <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)}}>Ungroup</DItem>
          <DItem onClick={()=>{const gid=groupCtx.gid;const g=tabGroups.find(x=>x.id===gid);if(g)setSavedGroupsList(p=>[...p,{...g,tabCount:tabs.filter(t=>t.group===gid).length}]);setTabs(p=>p.filter(t=>t.group!==gid));setTabGroups(p=>p.filter(x=>x.id!==gid));setGroupCtx(null);flash("Group saved & closed")}}>Close Group</DItem>
        </div>}

        {/* ═══ CONTENT + RIGHT PANEL ═══ */}
        <div style={{flex:1,display:"flex",overflow:"hidden"}}>
          <div ref={editorRef} style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",position:"relative"}} onMouseUp={handleMouseUp} onMouseDown={e=>{if(bubbleMenu&&!e.target.closest("[data-bubble]"))setBubbleMenu(null)}}>
            {/* NOTE/CLIPS TOOLBAR */}
            {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/>
              {/* +Module — Grid icon only */}
              <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("tasks")}><I.List size={14} color={c.warn}/><div><div style={{fontWeight:600}}>Task List</div><div style={{fontSize:9.5,color:c.textTer}}>Checkboxes, subtasks, due dates</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></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:c.accentBtn+"10",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 style={{borderTop:`1px solid ${c.borderLight}`,padding:6}}><DItem onClick={()=>setPickerStep("feed_custom")}><I.Plus size={12} color={c.accentBtn}/><span style={{color:c.accentBtn,fontWeight:600}}>Create Custom Feed…</span></DItem></div></div>}
                  {pickerStep==="feed_custom"&&<div><div style={{display:"flex",alignItems:"center",padding:"8px 10px",borderBottom:`1px solid ${c.borderLight}`,gap:6}}><button onClick={()=>setPickerStep("feed_presets")} 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}}>Create Custom Feed</span></div><div style={{padding:"10px 12px"}}><div style={{marginBottom:10}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Feed name</div><input value={customName} onChange={e=>setCustomName(e.target.value)} placeholder="e.g., Email Watch" style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none"}}/></div><div style={{marginBottom:10}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Source type</div><div style={{display:"flex",gap:4}}><button style={{flex:1,padding:"8px 6px",borderRadius:R.sm,border:`2px solid ${c.green}40`,backgroundColor:c.green+"08",cursor:"pointer",fontFamily:font.sans,textAlign:"left"}}><div style={{fontSize:11,fontWeight:600,color:c.green}}>System Events</div><div style={{fontSize:9,color:c.textTer}}>Real-time subscriptions</div></button><button style={{flex:1,padding:"8px 6px",borderRadius:R.sm,border:`2px solid ${c.accentBtn}40`,backgroundColor:c.accentBtn+"08",cursor:"pointer",fontFamily:font.sans,textAlign:"left"}}><div style={{fontSize:11,fontWeight:600,color:c.warn}}>Agent Instruction</div><div style={{fontSize:9,color:c.textTer}}>Runs on schedule</div></button></div></div><div style={{marginBottom:10}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Instruction</div><textarea value={customInstruction} onChange={e=>setCustomInstruction(e.target.value)} placeholder="e.g., Monitor Outlook for emails…" style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:60,resize:"vertical"}}/></div><div style={{display:"flex",gap:12,marginBottom:10}}><div style={{flex:1}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Update every</div><div style={{display:"flex",gap:3,alignItems:"center"}}><input type="number" defaultValue={1} min={1} style={{width:44,padding:"4px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",textAlign:"center"}}/>{["min","hr","day"].map((u,i)=><button key={u} style={{padding:"3px 7px",borderRadius:R.sm,border:`1px solid ${i===1?c.accentBtn+"50":c.borderLight}`,backgroundColor:i===1?c.accentBtn+"08":"transparent",fontSize:9.5,fontFamily:font.sans,color:i===1?c.accentBtn:c.textTer,cursor:"pointer"}}>{u}</button>)}</div></div><div style={{flex:1}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Show last</div><div style={{display:"flex",gap:3,alignItems:"center"}}><input type="number" defaultValue={25} style={{width:44,padding:"4px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:11,fontFamily:font.sans,outline:"none",textAlign:"center"}}/><span style={{fontSize:10,color:c.textTer}}>items</span></div></div></div><div style={{display:"flex",gap:6,marginTop:12}}><Btn primary onClick={()=>{insertBlock("feed",{id:nid(),name:customName||"Custom Feed"});setCustomName("");setCustomInstruction("")}} style={{flex:1,justifyContent:"center"}}>Create</Btn><Btn ghost onClick={()=>setPickerStep("feed_presets")}>Cancel</Btn></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?"Markup":"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 {agent.name}</button>
            </div>}
            {/* DOC TOOLBAR */}
            {activeTab.type==="doc"&&<><div style={{display:"flex",alignItems:"center",gap:8,padding:"7px 16px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,flexShrink:0}}><I.FileText size={15} color={c.accentBtn}/><span style={{fontSize:14,fontWeight:650,flex:1}}>Sanli Expert Report</span><span style={{fontSize:10,padding:"2px 8px",borderRadius:R.full,backgroundColor:c.bgInput,color:c.textTer,fontWeight:600}}>PDF</span></div><div style={{display:"flex",alignItems:"center",gap:3,padding:"6px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap",flexShrink:0}}><TBtn icon={<I.Copy size={13}/>} 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:190,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}/>}/><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}/>} title="Pin to project context" active={pinned} onClick={()=>{setPinned(!pinned);flash(pinned?"Unpinned":"Pinned to Paramount context")}}/><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")}}}/><Sep/><TBtn icon={<I.Eye size={13}/>} label="Markup" active={showMarkup}/><TBtn icon={<I.Edit size={13}/>} label="3" dropdown active/><Sep/><TBtn icon={<I.Clock size={13}/>} label="v2" dropdown/><Sep/><TBtn icon={<I.Settings size={13}/>} onClick={()=>flash("Doc settings…")}/><div style={{flex:1}}/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"4px 12px",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:5,color:(rightOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:11.5,fontWeight:600,height:28}}><I.Spark size={13}/>Ask {agent.name}</button></div></>}
            {/* WEB TOOLBAR */}
            {activeTab.type==="web"&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderBottom:`1px solid ${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.Mask 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}} placeholder="Search or enter URL"/></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" onClick={()=>flash("Saving…")}/><TBtn icon={<I.Scissors size={13}/>} label="Clip" onClick={()=>{setClipsCount(n=>n+1);flash("Clipped to Clips: 4.4-1")}}/><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")}}}/><Sep/><TBtn icon={<I.Settings size={13}/>} onClick={()=>flash("Browser settings…")}/><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 {agent.name}</button></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>}

            {/* NOTE CONTENT with blocks + tracked changes */}
            {activeTab.type==="note"&&<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",userSelect:"text"}}>
              <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}><span style={{fontSize:20}}>☀️</span><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}}>📌 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}`}}>{seg.v}</h2>;return <p key={seg.id} style={{marginBottom:12}}>{renderText(seg)}</p>})}</div>
              {blocks.map(b=>renderBlock(b))}
            </div>}
            {/* DOC CONTENT */}
            {activeTab.type==="doc"&&<><div style={{flex:1,overflowY:"auto",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,fontFamily:font.sans}}>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",fontFamily:font.sans,fontSize:12}}>Category</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Paramount</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,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><div style={{display:"flex",alignItems:"center",gap:10,padding:"5px 16px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanel,fontSize:10.5,color:c.textTer,flexShrink:0}}><span><Dot color="#31588c" size={5}/> Paramount</span><span>·</span><span>v2 · 3 pending</span><span>·</span><span>1d ago</span>{pinned&&<><span>·</span><span style={{color:c.accentBtn,fontWeight:600}}>📌</span></>}</div></>}
            {/* WEB CONTENT */}
            {activeTab.type==="web"&&<div style={{flex:1,overflowY:"auto",backgroundColor:"#fff",userSelect:"text"}}>{activeTab.incognito&&<div style={{backgroundColor:"#f0f0f0",color:c.textSec,padding:"6px 16px",fontSize:11,display:"flex",alignItems:"center",gap:6,borderBottom:`1px solid ${c.border}`}}><I.Mask size={12} color={c.textSec}/>Incognito — no history, no signals emitted</div>}<div style={{maxWidth:readerMode?680:900,margin:"0 auto",padding:readerMode?"30px 60px 60px":"20px 40px 60px",fontFamily:readerMode?font.sans:"Georgia,serif",color:"#222",lineHeight:readerMode?1.8:1.7,fontSize:readerMode?15:14.5}}>{readerMode&&<div style={{fontSize:11,color:c.accentBtn,fontWeight:600,marginBottom:4,display:"flex",alignItems:"center",gap:5}}><I.Book size={13} color={c.accentBtn}/>READER MODE</div>}<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",fontFamily:font.sans}}>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",fontFamily:font.sans,color:"#444"}}>II. LEGAL STANDARD</h3><p>Under <em>Sargon</em>, trial court is "gatekeeper." 55 Cal.4th at 770.</p></div></div>}
            {/* CLIPS */}
            {activeTab.type==="clips"&&<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",userSelect:"text"}}>
              <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}><span style={{fontSize:18}}>✂️</span><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={{display:"flex",alignItems:"center",gap:6,fontSize:10.5,color:c.textTer,marginBottom:16}}><Dot color={c.purple} size={5}/>Paramount · Auto-created</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><span onClick={()=>flash("Clip removed")} style={{cursor:"pointer",display:"flex",color:c.textTer,opacity:.5}} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=.5}><I.X size={10}/></span></div><div style={{fontSize:13,lineHeight:1.6,color:c.textSec}}>{clip.text}</div></div>)}
                <p style={{marginBottom:12}} contentEditable suppressContentEditableWarning><span style={{color:c.textTer,fontStyle:"italic"}}>Add notes below clips…</span></p>
              </div>
              {blocks.map(b=>renderBlock(b))}
            </div>}
            {/* ─── CHAT TAB CONTENT ─── */}
            {activeTab.type==="chat"&&<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
              <div style={{padding:"10px 16px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,display:"flex",alignItems:"center",gap:8}}><span style={{fontSize:15}}>💬</span><span style={{fontSize:14,fontWeight:650,flex:1}}>{activeTab.title}</span><Dot color={c.green} size={6}/></div>
              <div style={{flex:1,overflowY:"auto",padding:"16px 24px"}}>
                {[{author:"You",body:"Analyze Sanli's discount rate methodology and identify weaknesses for the MIL.",time:"1h ago"},{author:agent.name,body:"Dr. Sanli uses an 18% discount rate but cites no comparable transactions. Three signage-rights transactions I found show rates of 8-12%. His rate appears selected to minimize recovery. This is a strong Sargon argument.",time:"55m ago"},{author:"You",body:"Can we tie this to the Henderson v. Pacific line?",time:"50m 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,color:c.textPri}}>{msg.body}</div></div></div>)}
              </div>
              <div style={{padding:"10px 16px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanel,display:"flex",gap:8}}><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 onClick={()=>flash("Sent")}><I.Spark size={12} color="#fff"/>Send</Btn></div>
            </div>}

            {/* ─── UTILITY TAB CONTENT ─── */}
            {activeTab.type==="utility"&&<div style={{flex:1,overflowY:"auto",padding:"20px 28px"}}>
              <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:16}}><span style={{fontSize:18}}>{activeTab.icon}</span><div style={{fontSize:20,fontWeight:700}}>{activeTab.title}</div></div>
              {activeTab.title==="Chats"&&<div>
                <div style={{display:"flex",gap:8,marginBottom:12}}><div style={{display:"flex",alignItems:"center",gap:5,flex:1,padding:"7px 10px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}><I.Search size={13} color={c.textTer}/><input placeholder="Search chats…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12,fontFamily:font.sans,outline:"none"}}/></div></div>
                <div style={{display:"flex",gap:4,marginBottom:12}}>{["All","Starred","Active","Archived"].map((f,i)=><button key={f} style={{padding:"4px 12px",borderRadius:R.full,border:`1px solid ${i===0?c.accentBtn:c.border}`,backgroundColor:i===0?c.accentBtn+"08":"transparent",fontSize:11,fontWeight:i===0?600:400,color:i===0?c.accentBtn:c.textSec,cursor:"pointer",fontFamily:font.sans}}>{f}</button>)}</div>
                {recentConvos.map(cv=><div key={cv.id} onClick={()=>openTab("chat",cv.name,"💬")} 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"}>
                  <button onClick={e=>{e.stopPropagation();flash(cv.starred?"Unstarred":"Starred")}} style={{border:"none",background:"none",cursor:"pointer",display:"flex"}}><I.Star size={14} color={cv.starred?c.warn:c.borderLight}/></button>
                  <Dot color={cv.color} size={8}/><div style={{flex:1}}><div style={{fontSize:13,fontWeight:550}}>{cv.name}</div><div style={{fontSize:11,color:c.textTer}}>Last message preview…</div></div><span style={{fontSize:10,color:c.textTer}}>{cv.time}</span>
                </div>)}
              </div>}
              {activeTab.title!=="Chats"&&<div style={{textAlign:"center",padding:"40px 20px"}}><div style={{fontSize:14,color:c.textSec,lineHeight:1.6}}>{activeTab.title} page content.<br/>Transient — auto-closes on tab switch.<br/>Right-click → Pin to keep open.</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 {agent.name}</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>

          {/* ═══ RIGHT PANEL ═══ */}
          {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}}><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 {agent.name}</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"}}>{newCm&&<div style={{margin:"0 8px 10px",borderRadius:R.sm,border:`2px solid ${c.accentBtn}40`,backgroundColor:c.bgCard,overflow:"hidden"}}><div style={{padding:"8px 11px"}}>{newCm.text&&<div style={{fontSize:10.5,color:c.accentBtn,backgroundColor:c.accentBtn+"08",padding:"3px 6px",borderRadius:3,marginBottom:8,fontStyle:"italic"}}>"{newCm.text.slice(0,80)}"</div>}<textarea ref={cmRef} value={newCmText} onChange={e=>setNewCmText(e.target.value)} placeholder="Comment…" onKeyDown={e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();addComment()}}} style={{width:"100%",padding:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:42,resize:"vertical"}}/><div style={{display:"flex",gap:6,marginTop:6}}><Btn small primary onClick={addComment} disabled={!newCmText.trim()}>Add</Btn><Btn small ghost onClick={()=>{setNewCm(null);setNewCmText("")}}>Cancel</Btn></div></div></div>}{openC.length>0&&<div style={{padding:"3px 10px 6px"}}><span style={{fontSize:9.5,fontWeight:650,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Open ({openC.length})</span></div>}{openC.map(cm=><CmCard key={cm.id} cm={cm} resolved={false}/>)}{resolvedC.length>0&&<div style={{padding:"8px 10px 4px"}}><span style={{fontSize:9.5,fontWeight:650,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Resolved ({resolvedC.length})</span></div>}{resolvedC.map(cm=><CmCard key={cm.id} cm={cm} resolved={true}/>)}<div style={{padding:"8px 10px"}}><div style={{display:"flex",alignItems:"center",gap:5,padding:"7px 9px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"text"}} onClick={()=>setNewCm({text:""})}><I.Plus size={11} color={c.textTer}/><span style={{fontSize:11.5,color:c.textTer}}>Add general comment…</span></div></div></div>}
            {rightTab==="send"&&<><div style={{flex:1,overflowY:"auto",padding:12,backgroundColor:c.bgPanel}}>
              {/* Context card */}
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Context</div><div style={{padding:"8px 10px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:11,color:c.textSec}}><div style={{fontWeight:600,marginBottom:2}}>{activeTab.icon} {activeTab.title}</div><div style={{fontSize:10,color:c.textTer}}>{activeTab.type==="note"||activeTab.type==="clips"?"Tiptap note":activeTab.type==="doc"?"PDF document":activeTab.type==="web"?"ecf.cacd.uscourts.gov · 4,200 words":"Content"}</div></div></div>
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Agent</div><div style={{position:"relative"}}><div onClick={e=>{e.stopPropagation();setAgentDrop(!agentDrop)}} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer"}}><Av letter={agent.letter} color={agent.color} size={20}/><span style={{flex:1,fontSize:12,fontWeight:600}}>{agent.name}</span><I.ChevD size={11} 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)}}><Av letter={a.letter} color={a.color} size={18}/>{a.name}{i===agentIdx&&<I.Check size={12} color={c.accentBtn}/>}</DItem>)}</div>}</div></div>
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Send in</div><div style={{position:"relative"}}><div onClick={e=>{e.stopPropagation();setChatDrop(!chatDrop)}} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,fontSize:11.5,cursor:"pointer"}}><Dot color={chats[chatIdx].color} size={5}/><span style={{flex:1,color:c.textSec}}>{chats[chatIdx].name}</span>{chats[chatIdx].origin&&<span style={{fontSize:9,color:c.textTer}}>origin</span>}<I.ChevD size={10} color={c.textTer}/></div>{chatDrop&&<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}}>{chats.map((ch,i)=><DItem key={ch.name} active={i===chatIdx} onClick={()=>{setChatIdx(i);setChatDrop(false)}}><Dot color={ch.color} size={5}/>{ch.name}{ch.origin&&<span style={{fontSize:9,color:c.textTer}}>origin</span>}{i===chatIdx&&<I.Check size={12} color={c.accentBtn}/>}</DItem>)}</div>}</div></div>
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Context scope</div><Radio selected={sendScope==="full"} label={`Full ${activeTab.type} + all comments`} onClick={()=>setSendScope("full")}/><Radio selected={sendScope==="comments_only"} label="Comments & referenced portions" onClick={()=>setSendScope("comments_only")}/><Radio selected={sendScope==="select"} label="Select comments" onClick={()=>setSendScope("select")}/></div>
              {openC.length>0&&<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Comments ({sendScope==="select"?`${selectedCmIds.size} sel`:openC.length})</div>{openC.map(cm=><div key={cm.id} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${sendScope==="select"&&selectedCmIds.has(cm.id)?c.accentBtn+"50":c.borderLight}`,marginBottom:3,backgroundColor:sendScope==="select"&&selectedCmIds.has(cm.id)?c.accentBtn+"06":c.bgPanelAlt,cursor:sendScope==="select"?"pointer":"default"}} onClick={()=>{if(sendScope==="select")toggleCmSelect(cm.id)}}>{sendScope==="select"&&<input type="checkbox" checked={selectedCmIds.has(cm.id)} readOnly style={{width:12,height:12,accentColor:c.accentBtn,flexShrink:0}}/>}<div style={{flex:1,minWidth:0,fontSize:10,color:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{cm.body}</div></div>)}</div>}
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Output mode</div><Radio selected={outputMode==="respond_in_chat"} label="Respond in chat" desc="Opens chat with context." onClick={()=>setOutputMode("respond_in_chat")}/><Radio selected={outputMode==="send_with_instructions"} label="Send with instructions" desc="Agent produces result." onClick={()=>setOutputMode("send_with_instructions")}/></div>
              {outputMode==="send_with_instructions"&&<><div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Result format</div><Radio selected={subMode==="tracked_changes"} label="Apply as tracked changes" disabled={activeTab.type==="web"} onClick={()=>setSubMode("tracked_changes")}/><Radio selected={subMode==="revised_copy"} label={isNoteType?"Create revised copy":"Revise artifact (new version)"} onClick={()=>setSubMode("revised_copy")}/><Radio selected={subMode==="respond_in_comments"} label="Respond in comments" desc="Agent replies to each." onClick={()=>setSubMode("respond_in_comments")}/></div><div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textPri,marginBottom:5}}>Instruction <span style={{color:c.error}}>*</span></div><textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder={`Tell ${agent.name}…`} style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${instruction.trim()?c.border:c.warn+"60"}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:50,resize:"vertical"}}/>{!instruction.trim()&&<div style={{fontSize:9,color:c.warn,marginTop:3}}>Required</div>}</div></>}
              {outputMode==="respond_in_chat"&&<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Message (optional)</div><textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder="Optional…" style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:44,resize:"vertical"}}/></div>}
              <div style={{fontSize:9,color:c.textTer}}>Reference: {activeTab.type}:{activeTab.id} auto-included.</div>
              <div style={{marginTop:8,display:"flex",alignItems:"center",gap:6}}><button onClick={()=>flash("Attach file…")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:11,color:c.textSec,fontFamily:font.sans}}><I.Paperclip size={12}/>Attach</button><span style={{fontSize:9,color:c.textTer}}>Drag files here or click</span></div>
              {/* Include checkboxes */}
              <div style={{marginTop:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Include</div><div style={{display:"flex",flexDirection:"column",gap:4}}>{[{l:`${activeTab.type==="web"?"Page":"Content"} + comments`,on:true},{l:"Active project context",on:true},{l:"Session clips",on:false},{l:"Pinned pages",on:false}].map((opt,i)=><label key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:11.5,cursor:"pointer"}}><input type="checkbox" defaultChecked={opt.on} style={{accentColor:c.accentBtn,width:12,height:12}}/>{opt.l}</label>)}</div></div>
              {/* Quick actions for web tabs */}
              {activeTab.type==="web"&&<div style={{marginTop:12,borderTop:`1px solid ${c.borderLight}`,paddingTop:10}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Quick Actions</div><div style={{display:"flex",gap:4,flexWrap:"wrap"}}><Btn small onClick={()=>flash("Saved as artifact")}><I.Save size={10}/>Artifact</Btn><Btn small onClick={()=>flash("Saved as note")}><I.FileText size={10}/>Note</Btn><Btn small onClick={()=>flash("Pinned to project")}><I.Pin size={10}/>Pin</Btn></div></div>}
              {/* Inline agent response */}
              {agentResponse&&<div style={{marginTop:16,padding:"12px",borderRadius:R.sm,border:`1px solid ${c.agentAv}30`,backgroundColor:c.agentAv+"06"}}>
                <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><span style={{fontSize:9,color:c.textTer}}>{agentResponse.time}</span></div>
                <div style={{fontSize:12.5,lineHeight:1.6,color:c.textPri,marginBottom:10}}>{agentResponse.text}</div>
                <div style={{textAlign:"center",borderTop:`1px solid ${c.borderLight}`,paddingTop:8}}><span onClick={()=>{openTab("chat",`${activeTab.title} follow-up`,"💬");setAgentResponse(null)}} style={{fontSize:11,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",flexDirection:"column",gap:6}}><div style={{display:"flex",gap:6}}><Btn primary disabled={outputMode==="send_with_instructions"&&!instruction.trim()} onClick={handleSend} style={{flex:1,justifyContent:"center"}}><I.Spark size={12} color="#fff"/>{outputMode==="respond_in_chat"?"Open in Chat":`Send to ${agent.name}`}</Btn><Btn ghost onClick={()=>setRightOpen(false)}>Cancel</Btn></div><div style={{textAlign:"center"}}><span style={{fontSize:11,color:c.accentBtn,cursor:"pointer",fontWeight:500}}>Continue in full chat →</span></div></div></>}
          </div>}
        </div>

        {/* Downloads tray */}
        {showDownloads&&<div style={{borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,padding:"6px 12px",display:"flex",alignItems:"center",gap:10,fontSize:11,fontFamily:font.sans,flexShrink:0}}><I.Download size={13} color={c.accentBtn}/>{[{name:"BC587659_MIL_3.pdf",size:"2.1 MB",done:true},{name:"Sanli_Expert.pdf",size:"8.4 MB",done:false,progress:67}].map((d,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px",borderRadius:R.sm,backgroundColor:c.bgCard,border:`1px solid ${c.borderLight}`}}><span style={{fontWeight:500}}>{d.name}</span>{d.done?<span style={{color:c.green,fontSize:10}}>✓</span>:<div style={{width:40,height:4,backgroundColor:c.bgInput,borderRadius:2,overflow:"hidden"}}><div style={{width:`${d.progress}%`,height:"100%",backgroundColor:c.accentBtn,borderRadius:2}}/></div>}<span style={{color:c.textTer,fontSize:10}}>{d.size}</span>{d.done&&<span style={{color:c.accentBtn,fontSize:10,cursor:"pointer"}}>Open</span>}</div>)}<span style={{marginLeft:"auto",cursor:"pointer"}} onClick={()=>setShowDownloads(false)}><I.X size={11} color={c.textTer}/></span></div>}

        {/* STATUS BAR */}
        <div style={{display:"flex",alignItems:"center",gap:8,padding:"3px 12px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt,fontSize:10,color:c.textTer,flexShrink:0}}>
          <span style={{display:"flex",alignItems:"center",gap:3}}><I.Clock size={9}/>{Math.floor(sessionMinutes/60)}h {sessionMinutes%60}m</span>
          <span>·</span><span style={{display:"flex",alignItems:"center",gap:3}}><I.Scissors size={9}/>{clipsCount} clips</span>
          <span>·</span><span>{tabs.length} tabs</span>
          {!showDownloads&&<><span>·</span><span style={{cursor:"pointer",color:c.accentBtn}} onClick={()=>setShowDownloads(true)}><I.Download size={9}/> 2</span></>}
          {isNoteType&&<><span>·</span><span style={{color:c.green,fontWeight:500}}>Saved 2m ago</span></>}
          <span style={{marginLeft:"auto",cursor:"pointer",color:c.accentBtn,fontWeight:500}} onClick={()=>flash("New session")}>New Session</span>
          <span>·</span><span>100%</span>
        </div>
      </div>

      {/* ═══ RIGHT CHAT COLUMN — separate from Ask panel ═══ */}
      {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 that exists solely to minimize damages. This is exactly the kind of methodology Sargon was designed to exclude.",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>}
    </div>
  );
}