Q_UNIFIED_WORKSPACE_V2.jsx
Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_UNIFIED_WORKSPACE_V2.jsx
import { useState, useRef, useEffect, useMemo, useCallback } from "react";
const font={sans:"'Söhne','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"};
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"/>,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 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9"/>,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"/>};
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})=><button onClick={onClick} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"6px 10px",border:"none",cursor:"pointer",backgroundColor:active?c.accentBtn+"08":"transparent",fontSize:11.5,color:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:active?600:400}} onMouseEnter={e=>{if(!active)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(!active)e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{children}</button>;
const Radio=({selected,label,desc,onClick})=><button onClick={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:"pointer",textAlign:"left",fontFamily:font.sans}}><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>;
// ═══ DATA ═══
const agentName="Elnor";
const agents=[{name:"Elnor",color:c.agentAv,letter:"E"},{name:"Scout",color:"#5B5F97",letter:"S"}];
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"};
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","Folders","Saved Views","Notes"];
const typeChips=["Document","Chat","Preset","Skill","Task","Agent","Overlay","Note","Artifact","Prompt"];
const sortOptions=["Modified","Alphabetical","Type","Created","Running"];
const initFolders=[{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},{id:"f5",title:"Reference Materials",parent:null}];
const noteFolders=[{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 savedViews=[{id:"sv1",name:"Current",sys:true},{id:"sv2",name:"Recent",sys:true},{id:"sv3",name:"No Project",sys:true}];
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 Analysis",time:"1d",proj:2,cols:["Research"]},
{type:"Task",title:"Review Sanli depo transcript",time:"2h",proj:1,st:"running",cols:[]},
{type:"Chat",title:"Paramount damages strategy",time:"1h",proj:1,cols:["Priority"]},
{type:"Artifact",title:"Fair Fund Analysis — Brooge",time:"2h",proj:2,cols:[]},
{type:"Doc",title:"BC587659_MIL_3.pdf",time:"2d",proj:1,cols:[]},
{type:"Note",title:"Danny Christensen Engagement",time:"3d",proj:1,cols:[]},
{type:"Task",title:"Draft Paramount 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 Preset",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};
// Tab definitions
const tabColors={note:"#31588c",doc:"#2E8B57",web:"#D97706",clips:"#7C3AED"};
const initTabs=[
{id:"t1",type:"note",icon:"📝",title:"Today — April 4, 2026",color:tabColors.note},
{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},
{id:"t4",type:"clips",icon:"✂️",title:"Clips: 4.4-1",color:tabColors.clips},
];
// Comments (shared across tab types for demo)
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 comparable transactions: average 8-12%. Sanli's 18% is an outlier.",time:"5m ago"}]},
{id:"c2",author:"You",color:c.accentBtn,body:"Cross-ref with Christensen's methodology.",time:"8m ago",status:"open",anchor:"willing buyer-willing seller",replies:[]},
{id:"c3",author:agentName,color:c.agentAv,body:"Sargon gatekeeper standard fully briefed in §II.",time:"6m ago",status:"resolved",anchor:"Legal Standard",replies:[]},
];
// ═══ MAIN COMPONENT ═══
export default function UnifiedWorkspaceV2(){
// Tab state
const [tabs,setTabs]=useState(initTabs);
const [activeTabId,setActiveTabId]=useState("t1");
const [tabContextMenu,setTabContextMenu]=useState(null);
const [newTabDrop,setNewTabDrop]=useState(false);
// Browser column state
const [browserOpen,setBrowserOpen]=useState(true);
const [browserWidth,setBrowserWidth]=useState(280);
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(110);
const [selectedIdx,setSelectedIdx]=useState(null);
const [folders,setFolders]=useState(initFolders);
const [expandedFolders,setExpandedFolders]=useState(new Set(["f1"]));
const [activeFolder,setActiveFolder]=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 [newFolderMode,setNewFolderMode]=useState(null);const [newFolderName,setNewFolderName]=useState("");
const [hoverFolder,setHoverFolder]=useState(null);
const [activeSavedView,setActiveSavedView]=useState(null);
const [userSavedViews,setUserSavedViews]=useState([]);
// Note folder expansion for Notes scope
const [noteExpandedFolders,setNoteExpandedFolders]=useState(new Set(["nf1"]));
// Right panel state
const [rightOpen,setRightOpen]=useState(false);const [rightTab,setRightTab]=useState("comments");
const [rightWidth,setRightWidth]=useState(280);
// Comments state
const [comments,setComments]=useState(initComments);
const [activeComment,setActiveComment]=useState(null);
const [replyingTo,setReplyingTo]=useState(null);const [replyText,setReplyText]=useState("");
const [newCm,setNewCm]=useState(null);const [newCmText,setNewCmText]=useState("");
// Ask Agent state
const [agentIdx,setAgentIdx]=useState(0);const [agentDrop,setAgentDrop]=useState(false);
const [instruction,setInstruction]=useState("");
const [includeItems,setIncludeItems]=useState([
{id:"i1",label:"Current content + comments",checked:true},
{id:"i2",label:"Paramount project context",checked:true},
{id:"i3",label:"Session clips (2 items)",checked:false},
{id:"i4",label:"Pinned pages",checked:false},
]);
// Content-specific state
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);
// Session state
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");
// Session timer
useEffect(()=>{const iv=setInterval(()=>setSessionMinutes(m=>m+1),60000);return()=>clearInterval(iv)},[]);
// Context-sensitive browser scope auto-switching
useEffect(()=>{
if(activeTab.type==="note"&&activeScope!=="Notes")setActiveScope("Notes");
},[activeTabId]);
// Browser filtering
const toggleType=t=>{const s=new Set(activeTypes);s.has(t)?s.delete(t):s.add(t);setActiveTypes(s)};
const toggleCollection=name=>{const s=new Set(selectedCollections);s.has(name)?s.delete(name):s.add(name);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);setNoProject(false);setActiveSavedView(null)}else{setActiveScope(s);setActiveFolder(null);setNoProject(false);setActiveSavedView(null)}};
const createFolder=parent=>{if(!newFolderName.trim())return;setFolders(p=>[...p,{id:"f"+(p.length+10),title:newFolderName.trim(),parent}]);if(parent){const s=new Set(expandedFolders);s.add(parent);setExpandedFolders(s)}setNewFolderMode(null);setNewFolderName("");flash("Folder created")};
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(activeScope==="Notes")items=items.filter(it=>it.type==="Note");
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 if(sortKey==="Running")items.sort((a,b)=>(b.st==="running"?1:0)-(a.st==="running"?1:0));
else items.sort((a,b)=>timeVal(a.time)-timeVal(b.time));
const pp=items.filter(x=>x.pin);const up=items.filter(x=>!x.pin);
return [...pp,...up];
},[activeScope,activeProjIdx,noProject,selectedCollections,activeTypes,sortKey]);
// Folder tree renderer
const renderFolderTree=(parentId,depth,isOverlay=false,folderList=folders)=>folderList.filter(f=>f.parent===parentId).map(f=>{
const hasChildren=folderList.some(ch=>ch.parent===f.id);const isExp=expandedFolders.has(f.id);
const isActive=!isOverlay&&activeFolder===f.id;const isDrop=dropTarget===f.id;const isHover=hoverFolder===f.id;
return <div key={f.id}>
<div onClick={()=>{if(isOverlay)return;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 "${dragItem}" 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",transition:"all .1s"}}>
{hasChildren?<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>
{isHover&&!isOverlay&&<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>}
</div>
{isExp&&hasChildren&&renderFolderTree(f.id,depth+1,isOverlay,folderList)}
{!isOverlay&&newFolderMode&&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")createFolder(f.id);if(e.key==="Escape"){setNewFolderMode(null);setNewFolderName("")}}} 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>;
});
// Note folder tree for Notes scope
const renderNoteFolders=(parentId,depth)=>noteFolders.filter(f=>f.parent===parentId).map(f=>{
const hasChildren=noteFolders.some(ch=>ch.parent===f.id);const isExp=noteExpandedFolders.has(f.id);
return <div key={f.id}>
<div 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:3,padding:"3px 8px",paddingLeft:8+depth*14,borderRadius:R.sm,cursor:"pointer",fontSize:11.5,color:c.textSec}}>
{hasChildren?<span 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={12} color={depth===0?c.warn:c.textTer}/>
<span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{f.title}</span>
</div>
{isExp&&hasChildren&&renderNoteFolders(f.id,depth+1)}
</div>;
});
// Bubble menu handler
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()};
// Comment actions
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 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("")};
// Tab actions
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)=>{const id="t"+Date.now();const newTab=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};setTabs(p=>[...p,newTab]);setActiveTabId(id);setNewTabDrop(false);flash(type==="note"?"New note":"New tab")};
// Comment card component
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>
<div style={{fontSize:12,lineHeight:1.5,color:c.textSec,marginBottom:5}}>{cm.body}</div>
<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}}>Edit</span>}
{cm.author==="You"&&<span style={{color:c.error,cursor:"pointer",fontWeight:500,opacity:.7}}>Delete</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… (Enter)" 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>};
// ═══ 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);setTabContextMenu(null)}}>
<style>{`*{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}`}</style>
{toast&&<Toast msg={toast} onDone={()=>setToast(null)}/>}
{/* ═══ Q LEFT NAV RAIL ═══ */}
<div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap:2}}>
<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>
{[{icon:<I.Home size={14}/>,label:"Home"},{icon:<I.Inbox size={14}/>,label:"Inbox"},{icon:<I.Search size={14}/>,label:"Workspace",active:true},{icon:<I.MsgCircle size={14}/>,label:"Chat"},{icon:<I.Settings size={14}/>,label:"Settings"}].map((item,i)=><button key={i} title={item.label} style={{width:32,height:32,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:item.active?"#ffffff18":"transparent",color:item.active?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",gap:1}}>
{item.icon}<span style={{fontSize:7,opacity:.7}}>{item.label}</span>
</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"}}>
{/* 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,fontWeight:500,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 */}
<div style={{display:"flex",alignItems:"center",gap:5,padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
<button onClick={()=>flash("Create collection…")} style={{width:18,height:18,borderRadius:"50%",border:`1.5px dashed ${c.border}`,backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><I.Plus size={9} color={c.textTer}/></button>
{collections.map(col=>{const sel=selectedCollections.has(col.name);return <button key={col.name} title={`${col.name}${sel?" (active)":""}`} onClick={()=>toggleCollection(col.name)} style={{width:18,height:18,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.1)":"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 + folder overlay toggle */}
<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>)}
<div style={{flex:1}}/>
<button onClick={()=>setFolderOverlay(!folderOverlay)} title="Show folders overlay" style={{padding:"2px 7px",borderRadius:3,border:`1px dashed ${folderOverlay?c.accentBtn:c.border}`,backgroundColor:folderOverlay?c.accentBtn+"10":"transparent",fontSize:9.5,fontWeight:folderOverlay?600:400,color:folderOverlay?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:20,display:"flex",alignItems:"center",gap:3}}><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 — showing 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,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{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,fontWeight:noProject?600:400}}>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&&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…" onKeyDown={e=>{if(e.key==="Enter")createFolder(null);if(e.key==="Escape"){setNewFolderMode(null);setNewFolderName("")}}} 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>}
{renderFolderTree(null,0,false)}
</div>}
{activeScope==="Notes"&&<div style={{padding:"3px 4px"}}>
<div style={{padding:"2px 8px 6px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Note Folders</span></div>
{renderNoteFolders(null,0)}
</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>)}
{userSavedViews.map(sv=><button key={sv.id} style={{display:"flex",alignItems:"center",gap:6,width:"100%",padding:"4px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",fontFamily:font.sans,textAlign:"left"}}><span style={{fontSize:11.5,color:c.textSec,flex:1}}>{sv.name}</span></button>)}
</div>}
{activeScope&&!["Project","Folders","Saved Views","Notes","Collection","Bucket","Places"].includes(activeScope)&&<div style={{padding:12,fontSize:11,color:c.textTer,fontStyle:"italic"}}>{activeScope}…</div>}
</div>
{/* Splitter */}
<div style={{height:4,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(250,sP+(ev.clientY-sY))));const u=()=>{document.removeEventListener("mousemove",m);document.removeEventListener("mouseup",u)};document.addEventListener("mousemove",m);document.addEventListener("mouseup",u)}}><div style={{width:20,height:2,borderRadius:1,backgroundColor:c.textTer,opacity:.25}}/></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",letterSpacing:".06em"}}>Drag items 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>
{renderFolderTree(null,0,true)}
</div>}
{/* Type chips */}
<div style={{display:"flex",flexWrap:"wrap",gap:2,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
{typeChips.map(t=><button key={t} onClick={()=>toggleType(t)} style={{padding:"1px 6px",borderRadius:3,border:`1px solid ${activeTypes.has(t)?c.accentBtn+"50":c.borderLight}`,backgroundColor:activeTypes.has(t)?c.accentBtn+"10":"transparent",fontSize:9.5,fontWeight:activeTypes.has(t)?600:400,color:activeTypes.has(t)?c.accentBtn:c.textTer,cursor:"pointer",fontFamily:font.sans,height:18}}>{t}</button>)}
{activeTypes.size>0&&<button onClick={()=>setActiveTypes(new Set())} style={{padding:"1px 6px",borderRadius:3,border:"none",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans,height:18}}>clear</button>}
</div>
{/* Filter/Sort bar */}
<div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:9.5,color:c.textTer}}>
<span>{filtered.length} items</span>
<div style={{display:"flex",alignItems:"center",gap:6}}>
<button onClick={()=>flash("Save view…")} 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>
{/* Results */}
<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:450,color:c.textPri,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",letterSpacing:".03em",flexShrink:0,minWidth:28,textAlign:"right"}}>{item.type}</span>
<span style={{fontSize:9,color:c.textTer,flexShrink:0,minWidth:18,textAlign:"right"}}>{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>
{/* Browser footer */}
<div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,display:"flex",gap:4,flexWrap:"wrap",flexShrink:0}}>
{activeScope?<span>{activeScope}</span>:<span>All</span>}
{activeScope==="Project"&&!noProject&&<span>· {projects[activeProjIdx].name}</span>}
{selectedCollections.size>0&&<span>· {[...selectedCollections].join(", ")}</span>}
{activeTypes.size>0&&<span>· {[...activeTypes].join(", ")}</span>}
{folderOverlay&&<span style={{color:c.accentBtn}}>· 📁 Folders</span>}
<span style={{marginLeft:"auto"}}>{sortKey}</span>
</div>
{/* Resize handle */}
<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(400,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",backgroundColor:"#dee1e5",borderBottom:`1px solid ${c.border}`,flexShrink:0,minHeight:36}}>
{/* Browser toggle */}
<button onClick={()=>setBrowserOpen(!browserOpen)} title={browserOpen?"Hide browser (⌘B)":"Show browser (⌘B)"} style={{width:28,height:28,borderRadius:"6px 6px 0 0",border:"none",backgroundColor:browserOpen?c.bgPanel:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:browserOpen?c.accentBtn:c.textTer,marginRight:4}} onMouseEnter={e=>{if(!browserOpen)e.currentTarget.style.backgroundColor="#d0d3d8"}} onMouseLeave={e=>{if(!browserOpen)e.currentTarget.style.backgroundColor="transparent"}}><I.Search size={13}/></button>
{/* Tabs */}
{tabs.map(tab=><div key={tab.id} onClick={()=>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:100,maxWidth:200,borderRadius:"8px 8px 0 0",backgroundColor:tab.id===activeTabId?c.bgPanel:"#e8eaed",borderBottom:tab.id===activeTabId?`2.5px solid ${tab.color}`:`1px solid ${c.border}`,cursor:"pointer",position:"relative",flexShrink:1,overflow:"hidden"}}>
<span style={{fontSize:11,flexShrink:0}}>{tab.icon}</span>
<span style={{flex:1,fontSize:11,fontWeight:tab.id===activeTabId?550:400,color: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}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.X size={10} color={c.textTer}/></span>
</div>)}
{/* [+] new tab dropdown */}
<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}} onMouseEnter={e=>e.currentTarget.style.backgroundColor="#d0d3d8"} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Plus size={14}/></button>
{newTabDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:30,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:100,minWidth:150,padding:3}}>
<DItem onClick={()=>addTab("note")}>📝 New Note</DItem>
<DItem onClick={()=>addTab("doc")}>📄 Open Document</DItem>
<DItem onClick={()=>addTab("web")}>🌐 New Web Tab</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:160,padding:4}}>
<DItem onClick={()=>{closeTab(tabContextMenu.tabId);setTabContextMenu(null)}}>Close</DItem>
<DItem onClick={()=>{setTabs(p=>p.filter(t=>t.id===tabContextMenu.tabId));setTabContextMenu(null)}}>Close Others</DItem>
<DItem onClick={()=>{flash("Duplicated");setTabContextMenu(null)}}>Duplicate</DItem>
<DItem onClick={()=>{flash("Pinned");setTabContextMenu(null)}}>Pin</DItem>
{tabs.find(t=>t.id===tabContextMenu.tabId)?.type==="note"&&<DItem onClick={()=>{const name=prompt("New name:");if(name)setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,title:name}:t));setTabContextMenu(null)}}>Rename</DItem>}
</div>}
{/* ═══ CONTENT AREA + RIGHT PANEL ═══ */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
{/* CONTENT */}
<div ref={editorRef} style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}} onMouseUp={handleMouseUp} onMouseDown={e=>{if(bubbleMenu&&!e.target.closest("[data-bubble]"))setBubbleMenu(null)}}>
{/* ─── NOTE TAB CONTENT ─── */}
{activeTab.type==="note"&&<>
{/* Notes toolbar */}
<div style={{display:"flex",alignItems:"center",gap:3,padding:"4px 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>}</div>
<TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
<Sep/><TBtn icon={<I.Search size={13}/>} active={findBar} onClick={()=>setFindBar(!findBar)}/><TBtn icon={<I.Maximize size={13}/>}/>
<Sep/><TBtn icon={<I.Plus size={13}/>} label="+Module" onClick={()=>flash("Insert module…")}/>
<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={showMarkup?"Markup":"Clean"} active={showMarkup} onClick={()=>setShowMarkup(!showMarkup)}/>
<div style={{position:"relative"}}><TBtn icon={<I.Edit size={13}/>} label="2" 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={()=>{flash("All accepted");setOpenDrop(null)}}>✓ Accept All (2)</DItem>
<DItem onClick={()=>{flash("All rejected");setOpenDrop(null)}}>✗ Reject All (2)</DItem>
</div>}</div>
<div style={{flex:1}}/><span style={{fontSize:10,color:c.green,fontWeight:500}}>Saved 2m ago</span>
<Sep/><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}/>Send to Agent</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 in note…" 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 */}
<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",position:"relative",userSelect:"text"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}>
<span style={{fontSize:20}}>☀️</span>
<div style={{fontSize:21,fontWeight:700,color:c.textPri}} contentEditable suppressContentEditableWarning>Today — April 4, 2026</div>
</div>
<div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5,color:c.textTer,marginBottom:20}}><Dot color="#31588c" size={5}/>Paramount v. City of LA · 2h ago · <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}}>
<p style={{marginBottom:12}}>Trial May 4 — 30 days out. Focus items for today.</p>
<h2 style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`}}>Expert Motions</h2>
{/* TaskList block module */}
<div style={{margin:"12px 0",padding:"10px 12px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>📋 Task List</div>
{[{text:"Finalize MIL No. 3 re: Sanli",done:false,due:"Apr 7"},{text:"Review Christensen engagement agreement",done:true,due:"Apr 3"},{text:"Prep Sanli depo cross-exam outline",done:false,due:"Apr 10"}].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 0",borderBottom:i<2?`1px solid ${c.borderLight}`:"none"}}>
<input type="checkbox" checked={t.done} readOnly style={{accentColor:c.accentBtn,width:13,height:13}}/>
<span style={{flex:1,fontSize:12.5,textDecoration:t.done?"line-through":"none",color:t.done?c.textTer:c.textPri}}>{t.text}</span>
<span style={{fontSize:9.5,color:c.warn,fontWeight:500}}>{t.due}</span>
</div>)}
</div>
<h2 style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`}}>Activity</h2>
{/* ActivityFeed block module */}
<div style={{margin:"12px 0",padding:"10px 12px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>⚡ Activity Feed</div>
{[{agent:"Elnor",action:"Completed Sanli report analysis",time:"45m ago",color:c.agentAv},{agent:"Scout",action:"Found 3 comparable signage transactions",time:"1h ago",color:"#5B5F97"}].map((a,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 0",borderBottom:i<1?`1px solid ${c.borderLight}`:"none"}}><Av letter={a.agent[0]} color={a.color} size={18}/><div style={{flex:1}}><span style={{fontSize:11.5,fontWeight:550}}>{a.agent}</span><span style={{fontSize:11.5,color:c.textSec}}> — {a.action}</span></div><span style={{fontSize:9.5,color:c.textTer}}>{a.time}</span></div>)}
</div>
<p style={{marginBottom:12}}>Cross-reference Sanli discount rate (18%) against industry comparables. Scout found 8-12% average — document this for MIL argument.</p>
<p style={{marginBottom:12}}>Check with Danny Christensen on supplemental report timing.</p>
</div>
</div>
</>}
{/* ─── DOCUMENT TAB CONTENT ─── */}
{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 — Economic Damages</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:"4px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap",flexShrink:0}}>
<TBtn icon={<I.Copy size={13}/>} onClick={()=>flash("Copied")}/>
<TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown/>
<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}/>} onClick={()=>flash("Opening…")}/><TBtn icon={<I.Printer size={13}/>} onClick={()=>flash("Print…")}/>
<TBtn icon={<I.Pin size={13}/>} active={pinned} onClick={()=>{setPinned(!pinned);flash(pinned?"Unpinned":"Pinned")}}/>
<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={showMarkup?"Markup":"Clean"} active={showMarkup} onClick={()=>setShowMarkup(!showMarkup)}/>
<TBtn icon={<I.Edit size={13}/>} label="3" dropdown active/>
<Sep/><div style={{position:"relative"}}><TBtn icon={<I.Clock size={13}/>} label="v2" dropdown onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="ver"?null:"ver")}}/>
{openDrop==="ver"&&<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 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:220,padding:4}}>
<DItem active>v2 — Current · 10m</DItem>
<DItem onClick={()=>{flash("Switched to v1");setOpenDrop(null)}}>v1 — Original · 1d</DItem>
</div>}</div>
<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}/>Send to Agent</button>
</div>
<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}`}}>Economic Damages Analysis</h2>
<p style={{marginBottom:8}}>Prepared at the request of Defendants City of Los Angeles, et al.</p>
<p style={{marginBottom:8}}>Case No. BC587659 — Paramount Contractors & Developers, Inc. v. City of Los Angeles</p>
<h2 style={{fontSize:17,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:4,borderBottom:`1px solid ${c.borderLight}`}}>I. Summary of Opinions</h2>
<p style={{marginBottom:8}}>It is my opinion that Plaintiff's claimed damages of $4.2 million are speculative and overstated. Based on my analysis of comparable signage transactions, market data, and standard valuation methodologies, I estimate Plaintiff's actual economic damages to be approximately $380,000.</p>
<p style={{marginBottom:8}}>My analysis employs a <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>willing buyer-willing seller</span> valuation framework with an 18% discount rate reflecting the risk profile of signage rights in the Los Angeles market.</p>
<h2 style={{fontSize:17,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:4,borderBottom:`1px solid ${c.borderLight}`}}>II. Qualifications</h2>
<p style={{marginBottom:8}}>I am a professor of economics at UCLA Anderson School of Management, specializing in urban real estate valuation and municipal policy analysis…</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 — Damages Comparison</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}}>Dr. Sanli</th></tr></thead><tbody>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Lost signage revenue</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 diminution</td><td style={{textAlign:"right",padding:"6px 8px"}}>$980,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$120,000</td></tr>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Consequential damages</td><td style={{textAlign:"right",padding:"6px 8px"}}>$380,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$50,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 v. City of LA</span><span>·</span><span>v2 · 3 pending</span><span>·</span><span>1d ago</span>
</div>
</>}
{/* ─── WEB TAB CONTENT ─── */}
{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}}>
<I.Lock size={12} color={c.green}/>
<input value="https://ecf.cacd.uscourts.gov/doc1/031139485672" readOnly style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:12.5,fontFamily:font.sans,outline:"none",color:c.textPri,minWidth:0}}/>
</div>
<button onClick={()=>{setBookmarked(!bookmarked);flash(bookmarked?"Removed":"Bookmarked")}} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Star size={15} color={bookmarked?c.warn:c.textTer}/></button>
<Sep/>
<TBtn icon={<I.Book size={13}/>} active={readerMode} onClick={()=>{setReaderMode(!readerMode);flash(readerMode?"Page view":"Reader mode")}}/>
<TBtn icon={<I.Save size={13}/>} label="Save" 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")}}}/>
<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>
<div style={{flex:1,overflowY:"auto",backgroundColor:"#fff",userSelect:"text"}}>
<div style={{maxWidth:900,margin:"0 auto",padding:"20px 40px 60px",fontFamily:"'Georgia','Times New Roman',serif",color:"#222",lineHeight:1.7,fontSize:14.5}}>
<div style={{textAlign:"center",borderBottom:"2px solid #333",paddingBottom:16,marginBottom:20}}>
<div style={{fontSize:11,color:"#666",letterSpacing:".1em",textTransform:"uppercase",marginBottom:4}}>United States District Court</div>
<div style={{fontSize:13,color:"#666",marginBottom:8}}>Central District of California</div>
<div style={{fontSize:18,fontWeight:700,marginBottom:4}}>PARAMOUNT CONTRACTORS & DEVELOPERS, INC.,</div>
<div style={{fontSize:14,color:"#555",marginBottom:2}}>Plaintiff,</div>
<div style={{fontSize:14,color:"#555",marginBottom:4}}>v.</div>
<div style={{fontSize:18,fontWeight:700,marginBottom:4}}>CITY OF LOS ANGELES, et al.,</div>
<div style={{fontSize:14,color:"#555",marginBottom:8}}>Defendants.</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}}>PLAINTIFF'S MOTION IN LIMINE NO. 3</h2>
<h3 style={{fontSize:14,fontWeight:600,margin:"16px 0 8px",fontFamily:font.sans,color:"#444"}}>To Exclude Expert Testimony of Dr. Mehmet Sanli</h3>
<p>Plaintiff Paramount respectfully moves this Court for an order excluding the expert testimony and report of Dr. Mehmet Sanli on the grounds that his opinions are unreliable, speculative, and based on flawed methodology that does not satisfy <em>Sargon Enterprises, Inc. v. University of Southern California</em> (2012) 55 Cal.4th 747.</p>
<h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",fontFamily:font.sans,color:"#444"}}>I. BACKGROUND</h3>
<p>Dr. Sanli's methodology suffers from three defects: (1) he applies a "willing buyer-willing seller" framework to non-transferable signage rights; (2) he ignores the City's own permit valuations; and (3) his <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>discount rate of 18%</span> has no support in comparable data.</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>, the trial court acts as a "gatekeeper" to exclude expert opinion based on "assumptions of fact without evidentiary support." 55 Cal.4th at 770.</p>
</div>
</div>
</>}
{/* ─── CLIPS TAB CONTENT ─── */}
{activeTab.type==="clips"&&<>
<div style={{display:"flex",alignItems:"center",gap:3,padding:"4px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexShrink:0}}>
<TBtn icon={<I.Copy size={13}/>} onClick={()=>flash("Copied")}/>
<TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown/>
<Sep/><TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
<div style={{flex:1}}/><span style={{fontSize:10,color:c.purple,fontWeight:600}}>Session Clips · {clipsCount} items</span>
<Sep/><button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.purple}40`,backgroundColor:(rightOpen&&rightTab==="send")?c.purple:c.purple+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":c.purple,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Send to Agent</button>
</div>
<div style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",userSelect:"text"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:16}}>
<span style={{fontSize:18}}>✂️</span>
<div style={{fontSize:19,fontWeight:700,color:c.purple}}>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>
{/* Clipped passages */}
{[
{source:"Sanli Expert Report.pdf",text:"I estimate Plaintiff's actual economic damages to be approximately $380,000. My analysis employs a willing buyer-willing seller valuation framework with an 18% discount rate.",time:"12:34 PM"},
{source:"ecf.cacd.uscourts.gov — MIL No. 3",text:"Dr. Sanli's discount rate of 18% is unsupported by any comparable transaction data and appears selected solely to minimize Paramount's recovery.",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.source}</span><span style={{fontSize:9,color:c.textTer,marginLeft:"auto"}}>{clip.time}</span></div>
<div style={{fontSize:13,lineHeight:1.6,color:c.textSec}}>{clip.text}</div>
</div>)}
<div style={{padding:"16px 0",borderTop:`1px solid ${c.borderLight}`}}>
<div style={{fontSize:13,lineHeight:1.7,color:c.textSec}} contentEditable suppressContentEditableWarning>
<span style={{color:c.textTer,fontStyle:"italic"}}>Add notes to this session…</span>
</div>
</div>
</div>
</>}
{/* Bubble menu (shared) */}
{bubbleMenu&&<div data-bubble="1" style={{position:"absolute",left:Math.max(10,bubbleMenu.x-120),top: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");setTimeout(()=>cmRef.current?.focus(),100)}} 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/>
<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></>}
{activeTab.type==="note"&&["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>
{/* ═══ SHARED 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"}}>
{/* Resize handle */}
<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)}}/>
{/* Panel tabs */}
<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>
{/* Comments tab */}
{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… (Enter)" 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>}
{/* Ask Agent tab */}
{rightTab==="send"&&<><div style={{flex:1,overflowY:"auto",padding:12,backgroundColor:c.bgPanel}}>
<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>
{/* 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"?"Tiptap note · 847 words":activeTab.type==="doc"?"PDF document · 12 pages":activeTab.type==="web"?"ecf.cacd.uscourts.gov · 4,200 words":"Session clips · "+clipsCount+" items"}</div>
</div>
</div>
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textPri,marginBottom:5}}>Instruction</div>
<textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder={`Ask ${agent.name} about this ${activeTab.type}…`} style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:60,resize:"vertical"}}/>
</div>
<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Include</div>
<div style={{display:"flex",flexDirection:"column",gap:4}}>
{includeItems.map(opt=><div key={opt.id} style={{display:"flex",alignItems:"center",gap:6,fontSize:11.5}}>
<input type="checkbox" checked={opt.checked} onChange={()=>setIncludeItems(p=>p.map(x=>x.id===opt.id?{...x,checked:!x.checked}:x))} style={{accentColor:c.accentBtn,width:12,height:12}}/>
<span style={{flex:1}}>{opt.label}</span>
<span onClick={()=>setIncludeItems(p=>p.filter(x=>x.id!==opt.id))} style={{cursor:"pointer",display:"flex",color:c.textTer,opacity:.5}}><I.X size={9}/></span>
</div>)}
</div>
</div>
<Btn primary onClick={()=>flash(`Sent to ${agent.name}`)} style={{width:"100%",justifyContent:"center"}}><I.Spark size={12} color="#fff"/>Ask {agent.name}</Btn>
<div style={{marginTop:12,textAlign:"center"}}><span style={{fontSize:11,color:c.accentBtn,cursor:"pointer",fontWeight:500}}>Continue in full chat →</span></div>
</div></>}
</div>}
</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>
<span style={{marginLeft:"auto",cursor:"pointer",color:c.accentBtn,fontWeight:500}} onClick={()=>flash("New session started")}>New Session</span>
<span>·</span>
<span>100%</span>
</div>
</div>
</div>
);
}