; const Btn=({children,primary,ghost,small,onClick,disabled,style:s})=>; const Av=({letter,color,size=20})=>

{letter}

; const DItem=({children,onClick,active,disabled})=>; const Radio=({selected,label,desc,onClick,disabled})=>; // ═══ DATA ═══ const agentName="Elnor"; const agents=[{name:"Elnor",color:c.agentAv,letter:"E"},{name:"Scout",color:"#5B5F97",letter:"S"}]; 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 scopeFams=["Collection","Project","Bucket","Places","Folders","Saved Views","Notes"]; const typeChips=["Document","Chat","Preset","Skill","Task","Agent","Overlay","Note","Artifact","Prompt","Template","Chain","Memory","Room","Bookmark"]; 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:"Reference",color:"#5B5F97"}]; const allItems=[{type:"Note",title:"Today — April 4, 2026",time:"2h",pin:true,proj:1},{type:"Doc",title:"Sanli Expert Report.pdf",time:"10m",proj:1},{type:"Artifact",title:"Motion in Limine No. 3",time:"1d",proj:1},{type:"Chat",title:"Paramount damages",time:"1h",proj:1},{type:"Task",title:"Review Sanli depo",time:"2h",proj:1,st:"running"},{type:"Note",title:"Brooge Loss Causation",time:"1d",proj:2},{type:"Doc",title:"Christensen_CV.pdf",time:"1d",proj:1},{type:"Preset",title:"Legal Brief Review",time:"1w",proj:null}]; 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 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:,label:"Tasks"},{id:"projects",icon:,label:"Projects"},{id:"knowledge",icon:,label:"Knowledge Manager"},{id:"forums",icon:,label:"Forums & Panels"},{id:"agents",icon:,label:"Agents"},{id:"skills",icon:,label:"Skills & Connectors"},{id:"overlays",icon:,label:"Overlays & Prompts"},{id:"buckets",icon:,label:"Context Buckets"},{id:"settings",icon:,label:"Settings"}]; 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 18% discount rate.",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% unsupported.",time:"5m ago"}]},{id:"c2",author:"You",color:c.accentBtn,body:"Cross-ref Christensen methodology.",time:"8m ago",status:"open",anchor:"willing buyer-willing seller",replies:[]},{id:"c3",author:agentName,color:c.agentAv,body:"Sargon gatekeeper in §II.",time:"6m ago",status:"resolved",anchor:"Legal Standard",replies:[]}]; // ═══ MAIN ═══ export default function UnifiedWorkspaceV6(){ 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 [browserOpen,setBrowserOpen]=useState(true);const [browserWidth,setBrowserWidth]=useState(280); const [browserMode,setBrowserMode]=useState("nav"); // nav|browser|notes|web const [activeScope,setActiveScope]=useState(null);const [activeProjIdx,setActiveProjIdx]=useState(0); const [activeTypes,setActiveTypes]=useState(new Set());const [selectedCollections,setSelectedCollections]=useState(new Set()); const [sortKey,setSortKey]=useState("Modified");const [sortDrop,setSortDrop]=useState(false); const [selectedIdx,setSelectedIdx]=useState(null); const [noteSearch,setNoteSearch]=useState(""); const [noteExpandedFolders,setNoteExpandedFolders]=useState(new Set(["nf1"])); const [selectedNote,setSelectedNote]=useState("n1"); const [rightOpen,setRightOpen]=useState(false);const [rightTab,setRightTab]=useState("comments");const [rightWidth,setRightWidth]=useState(290); const [chatColumnOpen,setChatColumnOpen]=useState(false); // Separate right chat column 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(""); const [agentIdx,setAgentIdx]=useState(0);const [agentDrop,setAgentDrop]=useState(false); const [instruction,setInstruction]=useState(""); const [agentResponse,setAgentResponse]=useState(null); // Inline response in Ask panel 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 [showDownloads,setShowDownloads]=useState(false); const [sessionMinutes,setSessionMinutes]=useState(47);const [clipsCount,setClipsCount]=useState(2); const [toast,setToast]=useState(null); const editorRef=useRef(null);const cmRef=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"; 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("web");else if(activeTab.type==="chat"||activeTab.type==="utility")setBrowserMode("nav");else setBrowserMode("browser")},[activeTabId]); useEffect(()=>{setActiveComment(null);setReplyingTo(null);setNewCm(null);setAgentResponse(null)},[activeTabId]); 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 filtered=useMemo(()=>{let items=[...allItems];if(activeScope==="Project")items=items.filter(it=>it.proj===projects[activeProjIdx].id);if(selectedCollections.size>0)items=items.filter(it=>it.cols?.some(col=>selectedCollections.has(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 items.sort((a,b)=>timeVal(a.time)-timeVal(b.time));return [...items.filter(x=>x.pin),...items.filter(x=>!x.pin)]},[activeScope,activeProjIdx,selectedCollections,activeTypes,sortKey]); 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 management 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 openTab=(type,title,icon,extra={})=>{ // Duplicate prevention const existing=tabs.find(t=>t.title===title&&t.type===type); if(existing){setActiveTabId(existing.id);flash("Already open — switched to tab");return} // Close existing transient utility tab 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();setTabs(p=>[...p,{id,type,icon,title,color:tabColors[type]||c.neutral,...extra}]);setActiveTabId(id);setNewTabDrop(false)}; // Auto-close transient tab when switching away useEffect(()=>{const prev=tabs.find(t=>t.type==="utility"&&!t.pinned&&t.id!==activeTabId);if(prev&&activeTab.type!=="utility")setTabs(p=>p.filter(t=>t.id!==prev.id))},[activeTabId]); 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 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 sendToAgent=()=>{if(!instruction.trim())return;setAgentResponse({text:`Based on my analysis of "${activeTab.title}", the key points are: The discount rate of 18% used by Dr. Sanli has no support in comparable transaction data. Three comparable signage transactions show average rates of 8-12%. This significantly weakens the defense's damages calculation.`,time:"just now"});setInstruction("")}; // CmCard const CmCard=({cm,resolved})=>{const isAct=activeComment===cm.id;return

setActiveComment(isAct?null:cm.id)}>

{cm.anchor&&

"{cm.anchor.slice(0,55)}"

}

{cm.author}{cm.time}

{cm.body}

e.stopPropagation()}> {!resolved&&{setReplyingTo(replyingTo===cm.id?null:cm.id);setReplyText("")}}>Reply} {!resolved&&resolveComment(cm.id)}>Resolve} {resolved&&reopenComment(cm.id)}>Reopen} {cm.author==="You"&&Edit} {cm.author==="You"&&Delete} 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}>Send

{cm.replies.map(r=>

{r.author}{r.time}

{r.body}

)} {replyingTo===cm.id&&

e.stopPropagation()}>

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>};

// ═══ 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);setGroupCtx(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)}/>}

{/* ═══ LEFT NAV RAIL — 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:"web",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"}}>
          {/* Conversations */}
          <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:450,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>

{/* Activity */}
          <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>

{/* Pages */}
          <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:450}}>{p.label}</span>
          </div>)}

{/* Open Tabs */}
          <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"&&<>
          <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"}}/></div></div>
          <div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
            <button 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,transition:"all .15s"}}/>})}
          </div>
          <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={()=>setActiveScope(activeScope===s?null: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>
          <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>
          <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={{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}}>{["Modified","Alphabetical","Type","Created"].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 style={{flex:1,overflowY:"auto"}}>{filtered.map((item,i)=><div key={i} onClick={()=>setSelectedIdx(i)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:32,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:selectedIdx===i?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(selectedIdx!==i)e.currentTarget.style.backgroundColor=c.bgPanelAlt}} onMouseLeave={e=>{if(selectedIdx!==i)e.currentTarget.style.backgroundColor="transparent"}}>{item.pin&&<I.Pin size={8} color={c.warn}/>}<span style={{flex:1,fontSize:11.5,fontWeight:450,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"}}>{item.st}</span>}<span style={{fontSize:8.5,fontWeight:600,color:c.textTer,textTransform:"uppercase",minWidth:28,textAlign:"right"}}>{item.type}</span><span style={{fontSize:9,color:c.textTer}}>{item.time}</span></div>)}</div>
          <div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer,flexShrink:0}}>{activeScope||"All"} · {sortKey}</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"}}/></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><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}}>+ New</button></div>
          <div style={{flex:1,overflowY:"auto"}}>
            {/* Folder tree */}
            {[{id:"nf1",title:"Case Notes",notes:["Today — April 4, 2026","Trial Prep Checklist","Danny Christensen"]},{id:"nf2",title:"Session Notes",notes:["Clips: 4.4-1","Clips: 4.3-1"]}].map(f=><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:4,padding:"4px 8px",cursor:"pointer",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>{noteExpandedFolders.has(f.id)?<I.ChevD size={10} color={c.textTer}/>:<I.ChevR size={10} color={c.textTer}/>}<I.Folder size={11} color={c.warn}/><span style={{fontSize:11.5,fontWeight:600,flex:1}}>{f.title}</span><span style={{fontSize:9,color:c.textTer}}>{f.notes.length}</span></div>
              {noteExpandedFolders.has(f.id)&&f.notes.map((n,i)=><div key={i} onClick={()=>flash(`Open "${n}"`)} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 10px 4px 22px",height:28,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",fontSize:11.5}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{n}</span></div>)}
            </div>)}
          </div>
        </>}

{/* ─── WEB MODE ─── */}
        {browserMode==="web"&&<>
          <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 bookmarks…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:11.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/></div></div>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}><span style={{fontSize:12.5,fontWeight:650}}>Bookmarks</span><button style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,color:c.accentBtn,fontFamily:font.sans}}>+ Folder</button></div>
          <div style={{flex:1,overflowY:"auto"}}>
            {[{title:"Legal Research",items:["PACER — CACD","Westlaw","CM/ECF Login"]},{title:"Clients",items:["Paramount SharePoint"]},{title:"Reference",items:["Cal. Rules of Court"]}].map((bf,i)=><div key={i}><div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",cursor:"pointer",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}><I.ChevD size={10} color={c.textTer}/><I.Folder size={11} color={c.warn}/><span style={{fontSize:11.5,fontWeight:600,flex:1}}>{bf.title}</span></div>{bf.items.map((item,ii)=><div key={ii} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 8px 3px 24px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",fontSize:11}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span style={{width:14,height:14,borderRadius:3,backgroundColor:c.accentBtn,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,color:"#fff",fontWeight:700,flexShrink:0}}>{item[0]}</span>{item}</div>)}</div>)}
            <div style={{padding:"6px 8px",borderTop:`1px solid ${c.border}`,backgroundColor:c.bgPanelAlt}}><span style={{fontSize:10,fontWeight:600,color:c.textTer}}>Recent Pages</span></div>
            {["Paramount MIL No. 3","SEC — Brooge Energy","LAMC § 14.4.4"].map((t,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:c.neutral,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,color:"#fff",fontWeight:700,flexShrink:0}}>{t[0]}</span>{t}</div>)}
          </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",backgroundColor:"#dee1e5",borderBottom:`1px solid ${c.border}`,flexShrink:0,minHeight:36}}>
          <button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:28,height:36,borderRadius:0,border:"none",borderRight:`1px solid ${c.border}`,backgroundColor:browserOpen?c.bgPanel+"cc":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:browserOpen?c.accentBtn:c.textTer,marginRight:6,flexShrink:0}}><I.Sidebar size={14}/></button>
          {/* Render tabs */}
          {(()=>{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)return null;const gTabs=tabs.filter(t=>t.group===tab.group);if(rendered.has(gTabs[0]?.id)&&gTabs[0]?.id!==tab.id)return null;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={()=>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:60,maxWidth:180,borderRadius:"8px 8px 0 0",backgroundColor:gt.id===activeTabId?c.bgPanel:"#e8eaed",borderBottom:gt.id===activeTabId?`2.5px solid ${gt.color}`:`2.5px solid ${group.color}40`,cursor:"pointer",overflow:"hidden",flexShrink:1}}><span style={{fontSize:10,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:180,borderRadius:"8px 8px 0 0",backgroundColor:tab.incognito?(tab.id===activeTabId?"#2d2d2d":"#3a3a3a"):(tab.id===activeTabId?c.bgPanel:"#e8eaed"),borderBottom:isTransient?(tab.id===activeTabId?`2px dashed ${c.neutral}`:"1px solid #ccc"):(tab.id===activeTabId?`2.5px solid ${tab.color}`:`1px solid ${c.border}`),cursor:"pointer",overflow:"hidden",flexShrink:1,opacity:isTransient&&tab.id!==activeTabId?.7:1}}>
              {tab.incognito&&<I.Mask size={10} color="#999"/>}{!tab.incognito&&<span style={{fontSize:10,flexShrink:0}}>{tab.icon}</span>}
              <span style={{flex:1,fontSize:11,fontWeight:tab.id===activeTabId?550:400,color:tab.incognito?"#ddd":(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>})})()}

{/* [+] dropdown — expanded */}
          <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,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:100,minWidth:200,padding:4}}>
              <div style={{padding:"4px 10px",fontSize:9.5,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em"}}>Create</div>
              <DItem onClick={()=>{openTab("note","Untitled Note","📝");setNewTabDrop(false)}}>📝 New Note</DItem>
              <DItem onClick={()=>{openTab("chat","New Chat","💬");setNewTabDrop(false)}}>💬 New Chat</DItem>
              <DItem onClick={()=>{openTab("web","New Tab","🌐");setNewTabDrop(false)}}>🌐 New Web Tab</DItem>
              <DItem onClick={()=>{openTab("web","Incognito","🌐",{incognito:true});setNewTabDrop(false)}}><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>)}
            </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:180,padding:4}}>
          <DItem onClick={()=>{closeTab(tabContextMenu.tabId);setTabContextMenu(null)}}>Close</DItem>
          <DItem onClick={()=>{flash("Duplicated");setTabContextMenu(null)}}>Duplicate</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"&&<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"}}/>
          {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)}}>Group Selected…</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)}}>Group Tab…</DItem>}
          {tabGroups.length>0&&<>{tabGroups.map(g=><DItem key={g.id} onClick={()=>{setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:g.id}:t));setTabContextMenu(null)}}><Dot color={g.color} size={6}/>Add to {g.label}</DItem>)}</>}
          {tabs.find(t=>t.id===tabContextMenu.tabId)?.group&&<DItem onClick={()=>{setTabs(p=>p.map(t=>t.id===tabContextMenu.tabId?{...t,group:undefined}:t));setTabContextMenu(null)}}>Remove from Group</DItem>}
        </div>}

{/* 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={()=>{setTabs(p=>p.filter(t=>t.group!==groupCtx.gid));setTabGroups(p=>p.filter(g=>g.id!==groupCtx.gid));setGroupCtx(null)}}>Close Group</DItem>
        </div>}

{/* ═══ CONTENT + ASK 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}/>} onClick={()=>flash("Copied")}/>
              <TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown/>
              <TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
              <Sep/><TBtn icon={<I.Grid size={13}/>} dropdown title="+Module"/>
              <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")}}}/>
              <Sep/><TBtn icon={<I.Eye size={13}/>} label="Markup" active={showMarkup} onClick={()=>setShowMarkup(!showMarkup)}/>
              <TBtn icon={<I.Edit size={13}/>} label="2" dropdown active/>
              <Sep/><TBtn icon={<I.Settings size={13}/>} dropdown/>
              <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}/>}/><TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown/><Sep/><TBtn icon={<I.FileText size={13}/>} label="To Note"/><TBtn icon={<I.Link size={13}/>} label="Ref"/><Sep/><TBtn icon={<I.Search size={13}/>}/><TBtn icon={<I.ExtLink size={13}/>} title="Open in app"/><TBtn icon={<I.Printer size={13}/>}/><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="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}/>}/>
                <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}}><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":"Reader")}}/><TBtn icon={<I.Save size={13}/>} label="Save"/><TBtn icon={<I.Scissors size={13}/>} label="Clip" onClick={()=>{setClipsCount(n=>n+1);flash("Clipped")}}/><Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={`${openC.length}`} 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>}

{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 ─── */}
            {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}}>
                <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>
                <p style={{marginBottom:12}}>Finalize MIL No. 3 — Sanli discount rate argument. Cross-reference with Christensen opinions.</p>
                <div style={{margin:"14px 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",done:true,due:"Apr 3"},{text:"Prep Sanli depo cross-exam",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}`}}>Next Steps</h2>
                <p style={{marginBottom:12}}>Prepare updated privilege log with Bates-stamp cross-references.</p>
              </div>
            </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 damages of $4.2M are speculative. Actual: ~$380,000.</p><p style={{marginBottom:8}}>Using <span style={{backgroundColor:c.accentBtn+"18",padding:"1px 3px",borderRadius:3}}>willing buyer-willing seller</span> framework with 18% discount rate.</p></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}}><Dot color="#31588c" size={5}/> Paramount · v2 · 3 pending · 1d</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}/>Incognito — no history, no signals</div>}<div style={{maxWidth:900,margin:"0 auto",padding:"20px 40px 60px",fontFamily:"Georgia,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 — CACD</div><div style={{fontSize:18,fontWeight:700}}>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 by comparables.</p></div></div>}

{/* ─── CLIPS CONTENT ─── */}
            {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={{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 ~$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}}><I.X size={10}/></span></div><div style={{fontSize:13,lineHeight:1.6}}>{clip.text}</div></div>)}<p contentEditable suppressContentEditableWarning style={{color:c.textTer,fontStyle:"italic"}}>Add notes below clips…</p></div></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:agentName,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 — the rate lacks evidentiary support.",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><span style={{fontSize:10,padding:"2px 8px",borderRadius:R.full,backgroundColor:c.bgInput,color:c.textTer,fontWeight:600}}>transient</span></div>
              {/* Chats management page */}
              {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>
                  <Dot color={projects[0].color} size={5}/>
                </div>)}
              </div>}
              {/* Generic utility page */}
              {activeTab.title!=="Chats"&&<div style={{textAlign:"center",padding:"40px 20px"}}><div style={{fontSize:14,color:c.textSec,lineHeight:1.6}}>{activeTab.title} page content goes here.<br/>This is a transient tab — it auto-closes when you switch away.<br/>Right-click → Pin to keep it 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/>
              <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={()=>{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>}
              <button onClick={dismissBubble} style={{padding:3,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textTer,display:"flex"}}><I.X size={11}/></button>
            </div>}
          </div>

{/* ═══ ASK AGENT + COMMENTS 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>

{/* Comments */}
            {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>}

{/* Ask {Agent} with inline response */}
            {rightTab==="send"&&<><div style={{flex:1,overflowY:"auto",padding:12,backgroundColor:c.bgPanel}}>
              {/* Context card */}
              <div style={{marginBottom:12,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==="web"?"ecf.cacd.uscourts.gov · 4,200 words":activeTab.type==="doc"?"PDF document":isNoteType?"Tiptap note":"Content"}</div></div>
              {/* Agent */}
              <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>
              {/* Instruction */}
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textPri,marginBottom:5}}>Ask about this {activeTab.type}</div><textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder={`e.g., Summarize key points, analyze methodology…`} 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>
              {/* Include */}
              <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}}>{[{l:"Content + comments",on:true},{l:"Project context",on:true},{l:"Session clips",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>
              {/* Attach */}
              <div style={{marginBottom:12}}><button onClick={()=>flash("Attach…")} 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 file</button></div>
              <Btn primary onClick={sendToAgent} disabled={!instruction.trim()} style={{width:"100%",justifyContent:"center"}}><I.Spark size={12} color="#fff"/>Ask {agent.name}</Btn>
              {/* 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>}
              {/* Quick actions for web */}
              {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")}><I.Pin size={10}/>Pin</Btn></div></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,flexShrink:0}}><I.Download size={13} color={c.accentBtn}/>{[{name:"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></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>
        {/* Chat selector */}
        <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>
        {/* Messages */}
        <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:agentName,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>
        {/* Input */}
        <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>
  );
}