Elnor Repo Reader

ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/DOC20 Workspace Redo/Q_WORKSPACE_V3.jsx
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z

---

import { useState, useRef, useCallback, useEffect, useMemo } from "react";
// ═══ DESIGN TOKENS — copied verbatim from Q_NOTES_FULL / Q_BROWSER_R13 ═══
const font={sans:"'Söhne','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif"};
const R={sm:"6px",md:"10px",lg:"14px",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"};
// ═══ ICONS — verbatim from Q_NOTES_FULL + additions ═══
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={Plus:p=><Ic {...p} d="M12 5v14 M5 12h14"/>,X:p=><Ic {...p} d="M18 6L6 18 M6 6l12 12"/>,Check:p=><Ic {...p} d="M20 6L9 17l-5-5"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2l.5 5L7 10l1.5 3h7L17 10l-2.5-3L15 2"/>,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"/>,ChevD:p=><Ic {...p} d="M6 9l6 6 6-6"/>,ChevR:p=><Ic {...p} d="M9 18l6-6-6-6"/>,Search:p=><Ic {...p} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>,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"/>,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"/>,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"/>,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"/>,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"/>,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"/>,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"/>,File:p=><Ic {...p} d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6"/>,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"/>,Archive:p=><Ic {...p} d="M21 8v13H3V8 M1 3h22v5H1z M10 12h4"/>,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 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9c.42.16.86.58 1 1.51H21a2 2 0 010 4h-.09c-.65.04-1.09.48-1.51 1z"/>,List:p=><Ic {...p} d="M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01"/>,Bell:p=><Ic {...p} d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 01-3.46 0"/>,Calendar:p=><Ic {...p} d="M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2z M16 2v4 M8 2v4 M3 10h18"/>,Mail:p=><Ic {...p} d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6"/>,Zap:p=><Ic {...p} d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>,};
// ═══ SHARED COMPONENTS — verbatim from Q_NOTES_FULL ═══
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 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":ghost?`1.5px solid ${c.border}`:`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 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 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.sm,fontSize:12,fontWeight:500,fontFamily:font.sans,zIndex:9999,boxShadow:"0 4px 16px rgba(0,0,0,0.2)"}}>{msg}</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 — from Q_BROWSER_R13 (verbatim) ═══
const tcColors={You:{del:c.accentBtn,ins:c.accentBtn},Elnor:{del:"#B04040",ins:"#2E8B57"},Scout:{del:"#8B5E00",ins:"#2563EB"}};
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:"Henderson v. DataCorp",color:"#31588c"},{id:2,name:"Quark Research",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"];
const typeChips=["Document","Chat","Preset","Skill","Task","Agent","Overlay","Note","Artifact","Prompt"];
const sortOptions=["Modified","Alphabetical","Type","Created","Running"];
const savedViews=[{id:"sv1",name:"Current",sys:true},{id:"sv2",name:"Recent",sys:true},{id:"sv3",name:"No Project",sys:true}];
const initBrowserFolders=[{id:"f1",title:"Henderson Case",parent:null},{id:"f2",title:"Privilege Issues",parent:"f1"},{id:"f3",title:"Motion Practice",parent:"f1"},{id:"f4",title:"Quark Patents",parent:null},{id:"f5",title:"Reference Materials",parent:null}];
const initPlaces=[{id:"p1",title:"Henderson Case Files",path:"~/OneDrive-schallfirm/Henderson",status:"ok"},{id:"p2",title:"Firm Templates",path:"~/OneDrive-schallfirm/Templates",status:"ok"},{id:"p3",title:"Local Research",path:"~/Documents/Research",status:"ok"},{id:"p4",title:"Archived Cases",path:"/Volumes/External/Cases",status:"missing"}];
const placeContents={root:[{name:"Expert_Reports",isFolder:true},{name:"Exhibits",isFolder:true},{name:"Correspondence",isFolder:true},{name:"Henderson_Complaint.pdf",type:"PDF",size:"2.4 MB",mod:"1d"},{name:"Privilege_Log_v4.docx",type:"DOCX",size:"340 KB",mod:"3h"},{name:".DS_Store",type:"System",size:"4 KB",mod:"1d",dimmed:true}],Expert_Reports:[{name:"Dr_Smith_Report.pdf",type:"PDF",size:"1.2 MB",mod:"1w"}],Exhibits:[{name:"Exhibit_A.pdf",type:"PDF",size:"3.1 MB",mod:"3d"}],Correspondence:[{name:"Letter_Mar15.docx",type:"DOCX",size:"45 KB",mod:"1d"}]};
const allItems=[{type:"Note",title:"Henderson Discovery Priorities",time:"2h",pin:true,proj:1,cols:["Priority"]},{type:"Note",title:"Weekly Task List",time:"4h",pin:true,proj:1,cols:[]},{type:"Chat",title:"Henderson discovery analysis",time:"2m",unread:true,proj:1,cols:["Priority"]},{type:"Artifact",title:"Motion for Summary Judgment Brief",time:"10m",proj:1,cols:[]},{type:"Doc",title:"Henderson_Complaint.pdf",time:"1d",proj:1,cols:["Reference"]},{type:"Note",title:"Quark Patent Analysis",time:"1d",proj:2,cols:["Research"]},{type:"Task",title:"Review batch #4",time:"2h",proj:1,st:"running",cols:[]},{type:"Chat",title:"Quark patent search",time:"1h",proj:2,cols:["Research"]},{type:"Artifact",title:"Henderson Timeline Analysis",time:"2h",proj:1,cols:[]},{type:"Doc",title:"Patent_US20240001.pdf",time:"2d",proj:2,cols:[]},{type:"Note",title:"Judge Chen Conference Notes",time:"3d",proj:1,cols:[]},{type:"Task",title:"Draft motion response",time:"4h",proj:1,st:"waiting",cols:["Priority"]},{type:"Artifact",title:"Privilege Log Summary v3",time:"3d",proj:1,cols:[]},{type:"Prompt",title:"Discovery Review Template",time:"1w",proj:null,cols:[]},{type:"Preset",title:"Standard 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};

// ═══ DATA — from Q_NOTES_FULL (verbatim) ═══
const agents=[{name:"Elnor",color:c.agentAv,letter:"E"},{name:"Scout",color:"#5B5F97",letter:"S"}];
const chats=[{name:"Henderson discovery",color:c.accentBtn,origin:true},{name:"Quark patent search",color:c.green},{name:"New chat",color:c.textTer}];
const initNoteFolders=[{id:"nf1",title:"Henderson Case",parent:null},{id:"nf2",title:"Privilege Issues",parent:"nf1"},{id:"nf3",title:"Motion Practice",parent:"nf1"},{id:"nf4",title:"Quark Patents",parent:null},{id:"nf5",title:"Expert Depositions",parent:"nf3"},{id:"nf6",title:"Summary Judgment",parent:"nf3"}];
const initNotes=[{id:"n1",title:"Henderson Discovery Priorities",folder:"nf2",mod:"2h",comments:3,pinned:true,pending:true,proj:"Henderson",projColor:"#31588c",status:"active"},{id:"n2",title:"Weekly Task List",folder:null,mod:"4h",comments:0,pinned:true,proj:"Henderson",projColor:"#31588c",status:"active"},{id:"n3",title:"Judge Chen Conference Notes",folder:"nf3",mod:"3d",comments:2,proj:"Henderson",projColor:"#31588c",status:"active"},{id:"n4",title:"Privilege Review Checklist",folder:"nf2",mod:"1d",comments:0,proj:"Henderson",projColor:"#31588c",status:"active"},{id:"n5",title:"Quark Patent Analysis",folder:"nf4",mod:"1d",comments:1,proj:"Quark",projColor:"#2E8B57",status:"active"},{id:"n6",title:"AI in Legal Discovery",folder:null,mod:"5d",comments:0,status:"active"},{id:"n7",title:"Old Case Research",folder:null,mod:"2w",comments:0,status:"archived"},{id:"n8",title:"Expert Depo Prep — Dr. Smith",folder:"nf5",mod:"1w",comments:0,proj:"Henderson",projColor:"#31588c",status:"active"}];
const segs=[{id:"s1",t:"p",v:"Key documents to review from discovery batch #4."},{id:"s2",t:"h2",v:"Priority Items"},{id:"s3",t:"li",v:"Email chain: Henderson → Outside Counsel (March 12-15) — 23 messages, 8 flagged"},{id:"s4",t:"li",v:"Privileged strategy memo (March 18) discussing litigation posture and settlement authority"},{id:"s5",t:"li",v:"Board minutes from Q1 2024 executive session"},{id:"s6",t:"h2",v:"Timeline Conflicts"},{id:"s7",t:"p",v:"Deposition transcript (Feb 12): initial contact January 5, but metadata suggests January 8."},{id:"s8",t:"p",v:"Cross-reference calendar, email timestamps, phone records Jan 5-8."},{id:"s9",t:"h2",v:"Next Steps"},{id:"s10",t:"p",v:"Prepare updated privilege log with all newly identified documents."}];
const initChanges=[{id:"tc1",segId:"s4",author:"Elnor",oldText:"discussing litigation posture and settlement authority",newText:"discussing litigation posture, settlement authority, and insurance coverage implications",status:"pending"},{id:"tc2",segId:"s7",author:"Elnor",oldText:"initial contact January 5, but metadata suggests January 8",newText:"initial contact January 5, but metadata and email headers suggest January 8",status:"pending"},{id:"tc3",segId:"s10",author:"You",oldText:"Prepare updated privilege log with all newly identified documents.",newText:"Prepare updated privilege log with all newly identified documents. Include Bates-stamp cross-references.",status:"pending"}];
const initComments=[{id:"c1",author:"You",color:c.accentBtn,body:"Follow up on March 2024 emails — may be privileged.",time:"2h ago",status:"open",segId:"s3",anchor:"Email chain: Henderson",replies:[{id:"r1",author:"Elnor",color:c.agentAv,body:"Flagged 8. Add to privilege log?",time:"1h ago"}]},{id:"c2",author:"Elnor",color:c.agentAv,body:"Timeline conflict vs deposition. Cross-check.",time:"4h ago",status:"open",segId:"s7",anchor:"Deposition transcript (Feb 12)",replies:[]},{id:"c3",author:"Scout",color:"#5B5F97",body:"Judge Chen 5-day rule applies retroactively.",time:"1d ago",status:"resolved",segId:"s9",anchor:"Next Steps",replies:[]}];
const noteSortOpts=["Modified","Alphabetical","Created"];

// ═══ NEW DATA — To-Do + Elnor Feed ═══
const initTodos=[
  {id:"t1",text:"Draft expert disclosure for Christensen",done:false,pri:1,due:"Apr 4",linkedNote:"n8",sub:[{id:"s1",text:"Pull Christensen CV",done:true},{id:"s2",text:"List opinions",done:false},{id:"s3",text:"Identify docs reviewed",done:false}]},
  {id:"t2",text:"Review Henderson MSJ brief — Elnor's tracked changes",done:false,pri:1,due:"Mar 20",linkedNote:"n1",sub:[]},
  {id:"t3",text:"Respond to Sparacino re: Narayanan agreement",done:false,pri:2,due:"Mar 19",sub:[]},
  {id:"t4",text:"Follow up: opposing counsel discovery extension",done:false,pri:2,due:"Mar 19",sub:[]},
  {id:"t5",text:"Review Quark patent analysis — new filings",done:false,pri:3,linkedNote:"n5",sub:[]},
  {id:"t6",text:"File Folb trial exhibit list",done:true,pri:2,due:"Mar 17",sub:[]},
];
const todoLists=[{id:"tl1",title:"Today",icon:"☀️",active:true},{id:"tl2",title:"Henderson Tasks",icon:"⚖️"},{id:"tl3",title:"Weekly Review",icon:"📋"}];
const elnorFeedData={
  "Elnor":[{id:"e1",text:"Reviewed 3 Henderson deposition transcripts — flagged 2 citation issues in Chen depo",time:"5h ago"},{id:"e2",text:"Updated Quark patent landscape — 4 new filings",time:"4h ago"},{id:"e3",text:"Scanned SEC filings — no new Henderson-relevant 10-K amendments",time:"3h ago"}],
  "Calendar":[{id:"e4",text:"Expert disclosure deadline — Folb v. City of LA",time:"47 days",accent:c.error},{id:"e5",text:"Henderson MSJ response due",time:"12 days",accent:c.warn},{id:"e6",text:"Danny Christensen engagement call",time:"Tomorrow 2pm"}],
  "Email":[{id:"e7",text:"Sparacino — Narayanan agreement redline",time:"Yesterday"},{id:"e8",text:"Opposing counsel — discovery extension request",time:"2d ago",accent:c.warn}],
  "System":[{id:"e9",text:"OneDrive sync paused — re-auth needed",time:"6h ago",accent:c.warn},{id:"e10",text:"DOC15 red-team review completed — 3 findings flagged",time:"2h ago",accent:c.green}],
  "News":[{id:"e11",text:"SEC announces new cybersecurity disclosure rules effective Q2",time:"Today"},{id:"e12",text:"9th Circuit: new opinion on securities fraud scienter standard",time:"Yesterday",accent:c.accentBtn}],
};
const elnorIcons={Elnor:<I.Spark size={11} color={c.agentAv}/>,Calendar:<I.Calendar size={11} color={c.error}/>,Email:<I.Mail size={11} color={c.accentBtn}/>,System:<I.Bell size={11} color={c.warn}/>,News:<I.Zap size={11} color={c.green}/>};

// ═══════════════════════════════════════════
// MAIN COMPONENT
// ═══════════════════════════════════════════
export default function WorkspaceV3(){
  const idC=useRef(300);const nid=()=>"x"+(++idC.current);
  // ─── Browser state (from Q_BROWSER_R13) ───
  const [browserOpen,setBrowserOpen]=useState(true);
  const [activeScope,setActiveScope]=useState("Project");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 [browserWidth,setBrowserWidth]=useState(270);
  const [selectedBIdx,setSelectedBIdx]=useState(null);
  const [bFolders,setBFolders]=useState(initBrowserFolders);const [expandedBFolders,setExpandedBFolders]=useState(new Set(["f1"]));const [activeBFolder,setActiveBFolder]=useState(null);
  const [places,setPlaces]=useState(initPlaces);const [activePlace,setActivePlace]=useState(null);const [placePath,setPlacePath]=useState([]);
  const [searchMode,setSearchMode]=useState("this_view");const [sortKey,setSortKey]=useState("Modified");const [sortDrop,setSortDrop]=useState(false);
  const [bNewFolderMode,setBNewFolderMode]=useState(null);const [bNewFolderName,setBNewFolderName]=useState("");
  const [hoverBFolder,setHoverBFolder]=useState(null);const [hoverPlace,setHoverPlace]=useState(null);
  const [folderOverlay,setFolderOverlay]=useState(false);const [dropTarget,setDropTarget]=useState(null);const [dragItem,setDragItem]=useState(null);
  const [activeSavedView,setActiveSavedView]=useState(null);const [userSavedViews,setUserSavedViews]=useState([]);
  const [saveViewMode,setSaveViewMode]=useState(false);const [saveViewName,setSaveViewName]=useState("");const [hoverSavedView,setHoverSavedView]=useState(null);
  const [saveFromBar,setSaveFromBar]=useState(false);const [deletingBFolder,setDeletingBFolder]=useState(null);const [removingPlace,setRemovingPlace]=useState(null);
  // ─── Notes sidebar state (from Q_NOTES_FULL) ───
  const [noteListOpen,setNoteListOpen]=useState(true);const [sidebarTab,setSidebarTab]=useState("notes");
  const [notes,setNotes]=useState(initNotes);const [noteFolders,setNoteFolders]=useState(initNoteFolders);
  const [expandedNFolders,setExpandedNFolders]=useState(new Set(["nf1","nf3"]));const [selectedNote,setSelectedNote]=useState("n1");
  const [folderView,setFolderView]=useState(true);const [noteSearch,setNoteSearch]=useState("");const [noteSort,setNoteSort]=useState("Modified");const [noteSortDrop,setNoteSortDrop]=useState(false);
  const [showArchived,setShowArchived]=useState(false);const [contextMenu,setContextMenu]=useState(null);const [deletingNote,setDeletingNote]=useState(null);
  const [nNewFolderMode,setNNewFolderMode]=useState(null);const [nNewFolderName,setNNewFolderName]=useState("");const [hoverNFolder,setHoverNFolder]=useState(null);
  // ─── Editor state (from Q_NOTES_FULL) ───
  const [comments,setComments]=useState(initComments);const [changes,setChanges]=useState(initChanges);
  const [activeComment,setActiveComment]=useState(null);const [bubbleMenu,setBubbleMenu]=useState(null);
  const [rightOpen,setRightOpen]=useState(true);const [rightTab,setRightTab]=useState("comments");
  const [showMarkup,setShowMarkup]=useState(true);const [findBar,setFindBar]=useState(false);const [fullScreen,setFullScreen]=useState(false);
  const [openDrop,setOpenDrop]=useState(null);
  const [replyingTo,setReplyingTo]=useState(null);const [replyText,setReplyText]=useState("");
  const [editingId,setEditingId]=useState(null);const [editText,setEditText]=useState("");const [deletingId,setDeletingId]=useState(null);
  const [newCm,setNewCm]=useState(null);const [newCmText,setNewCmText]=useState("");
  const [agentIdx,setAgentIdx]=useState(0);const [agentDrop,setAgentDrop]=useState(false);
  const [chatIdx,setChatIdx]=useState(0);const [chatDrop,setChatDrop]=useState(false);
  const [sendScope,setSendScope]=useState("full");const [selectedCmIds,setSelectedCmIds]=useState(new Set());
  const [outputMode,setOutputMode]=useState("respond_in_chat");const [subMode,setSubMode]=useState("tracked_changes");const [instruction,setInstruction]=useState("");
  // ─── To-do state ───
  const [todos,setTodos]=useState(initTodos);const [expandedTodo,setExpandedTodo]=useState("t1");
  const [todoCollapsed,setTodoCollapsed]=useState(false);const [elnorCollapsed,setElnorCollapsed]=useState(false);
  const [newTodoText,setNewTodoText]=useState("");
  const [toast,setToast]=useState(null);
  const editorRef=useRef(null);const cmRef=useRef(null);const nfRef=useRef(null);const bnfRef=useRef(null);
  const agent=agents[agentIdx];const openC=comments.filter(x=>x.status==="open");const resolvedC=comments.filter(x=>x.status==="resolved");
  const pendingChanges=changes.filter(x=>x.status==="pending");const flash=msg=>setToast(msg);
  const priColor=p=>p===1?c.error:p===2?c.warn:c.accentBtn;const priLabel=p=>p===1?"P1":p===2?"P2":"P3";
  const activeTodos=todos.filter(t=>!t.done);const doneTodos=todos.filter(t=>t.done);

  // ─── Browser logic (from Q_BROWSER_R13) ───
  const toggleBType=t=>{const s=new Set(activeTypes);s.has(t)?s.delete(t):s.add(t);setActiveTypes(s)};
  const toggleBCollection=n=>{const s=new Set(selectedCollections);s.has(n)?s.delete(n):s.add(n);setSelectedCollections(s)};
  const toggleBFolder=id=>{const s=new Set(expandedBFolders);s.has(id)?s.delete(id):s.add(id);setExpandedBFolders(s)};
  const selectScope=s=>{if(activeScope===s){setActiveScope(null);setActiveBFolder(null);setActivePlace(null);setPlacePath([]);setNoProject(false);setActiveSavedView(null)}else{setActiveScope(s);setActiveBFolder(null);setActivePlace(null);setPlacePath([]);setNoProject(false);setActiveSavedView(null)}};
  const createBFolder=parent=>{if(!bNewFolderName.trim())return;setBFolders(p=>[...p,{id:"f"+(p.length+10),title:bNewFolderName.trim(),parent}]);if(parent){const s=new Set(expandedBFolders);s.add(parent);setExpandedBFolders(s)}setBNewFolderMode(null);setBNewFolderName("");flash("Folder created")};
  const deleteBFolder=id=>{setBFolders(p=>p.filter(f=>f.id!==id&&f.parent!==id));setDeletingBFolder(null);flash("Folder deleted")};
  const removePlace_=id=>{setPlaces(p=>p.filter(x=>x.id!==id));setRemovingPlace(null);flash("Place removed")};
  const currentPlaceFiles=()=>{const key=placePath.length?placePath[placePath.length-1]:"root";return placeContents[key]||[{name:"(empty)",dimmed:true,type:"—",size:"—",mod:"—"}]};
  const filtered=useMemo(()=>{let items=[...allItems];if(activeScope==="Project"&&!noProject)items=items.filter(it=>it.proj===projects[activeProjIdx].id);if(activeScope==="Project"&&noProject)items=items.filter(it=>it.proj===null);if(selectedCollections.size>0)items=items.filter(it=>[...selectedCollections].every(col=>it.cols?.includes(col)));if(activeTypes.size>0)items=items.filter(it=>activeTypes.has(it.type));if(sortKey==="Alphabetical")items.sort((a,b)=>a.title.localeCompare(b.title));else if(sortKey==="Type")items.sort((a,b)=>a.type.localeCompare(b.type));else 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 pinned=items.filter(x=>x.pin);const unpinned=items.filter(x=>!x.pin);return [...pinned,...unpinned]},[activeScope,activeProjIdx,noProject,selectedCollections,activeTypes,sortKey]);

  // ─── Notes sidebar logic (from Q_NOTES_FULL) ───
  const activeNotes=notes.filter(n=>n.status==="active");const archivedNotes=notes.filter(n=>n.status==="archived");
  const filteredNotes=(noteSearch?activeNotes.filter(n=>n.title.toLowerCase().includes(noteSearch.toLowerCase())):activeNotes).sort((a,b)=>{if(a.pinned&&!b.pinned)return -1;if(!a.pinned&&b.pinned)return 1;if(noteSort==="Alphabetical")return a.title.localeCompare(b.title);return timeVal(a.mod)-timeVal(b.mod)});
  const archiveNote=id=>{setNotes(p=>p.map(n=>n.id===id?{...n,status:"archived"}:n));setContextMenu(null);flash("Archived")};
  const unarchiveNote=id=>{setNotes(p=>p.map(n=>n.id===id?{...n,status:"active"}:n));flash("Restored")};
  const deleteNote=id=>{setNotes(p=>p.filter(n=>n.id!==id));setDeletingNote(null);setContextMenu(null);flash("Deleted")};
  const createNFolder=parent=>{if(!nNewFolderName.trim())return;setNoteFolders(p=>[...p,{id:"nf"+(p.length+10),title:nNewFolderName.trim(),parent}]);if(parent){const s=new Set(expandedNFolders);s.add(parent);setExpandedNFolders(s)}setNNewFolderMode(null);setNNewFolderName("");flash("Folder created")};

  // ─── Editor logic (from Q_NOTES_FULL) ───
  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 startComment=()=>{if(!bubbleMenu)return;setNewCm({text:bubbleMenu.text});setBubbleMenu(null);setRightOpen(true);setRightTab("comments");setTimeout(()=>cmRef.current?.focus(),100)};
  const addComment=()=>{if(!newCmText.trim())return;const cm={id:nid(),author:"You",color:c.accentBtn,body:newCmText.trim(),time:"just now",status:"open",segId:null,anchor:newCm?.text||null,replies:[]};setComments(p=>[...p,cm]);setNewCm(null);setNewCmText("");setActiveComment(cm.id)};
  const addReply=cmId=>{if(!replyText.trim())return;setComments(p=>p.map(cm=>cm.id===cmId?{...cm,replies:[...cm.replies,{id:nid(),author:"You",color:c.accentBtn,body:replyText.trim(),time:"just now"}]}:cm));setReplyingTo(null);setReplyText("")};
  const saveEdit=id=>{if(!editText.trim())return;setComments(p=>p.map(cm=>cm.id===id?{...cm,body:editText.trim()}:cm));setEditingId(null)};
  const doDelete=id=>{setComments(p=>p.filter(cm=>cm.id!==id));setDeletingId(null)};
  const resolveComment=id=>{setComments(p=>p.map(cm=>cm.id===id?{...cm,status:"resolved"}:cm));if(activeComment===id)setActiveComment(null)};
  const reopenComment=id=>setComments(p=>p.map(cm=>cm.id===id?{...cm,status:"open"}:cm));
  const acceptChange=id=>setChanges(p=>p.map(x=>x.id===id?{...x,status:"accepted"}:x));
  const rejectChange=id=>setChanges(p=>p.map(x=>x.id===id?{...x,status:"rejected"}:x));
  const acceptAll=()=>{setChanges(p=>p.map(x=>x.status==="pending"?{...x,status:"accepted"}:x));flash("All accepted")};
  const rejectAll=()=>{setChanges(p=>p.map(x=>x.status==="pending"?{...x,status:"rejected"}:x));flash("All rejected")};
  const toggleCmSelect=id=>{const s=new Set(selectedCmIds);s.has(id)?s.delete(id):s.add(id);setSelectedCmIds(s)};
  const toggleTodo=id=>setTodos(p=>p.map(t=>t.id===id?{...t,done:!t.done}:t));
  const toggleSub=(pid,sid)=>setTodos(p=>p.map(t=>t.id===pid?{...t,sub:t.sub.map(s=>s.id===sid?{...s,done:!s.done}:s)}:t));
  const handleSend=()=>{if(outputMode==="respond_in_chat")flash(`Opening "${chats[chatIdx].name}"…`);else{if(!instruction.trim())return;flash(`${agent.name}: ${subMode}…`)}};

  // ─── Tracked changes rendering (from Q_NOTES_FULL) ───
  const renderText=seg=>{const tc=changes.find(x=>x.segId===seg.id&&x.status==="pending");const tca=changes.find(x=>x.segId===seg.id&&x.status==="accepted");if(tca)return <span>{seg.v.replace(tca.oldText,tca.newText)}</span>;if(!tc||!showMarkup){if(tc&&!showMarkup)return <span>{seg.v.replace(tc.oldText,tc.newText)}</span>;return <span>{seg.v}</span>}const idx=seg.v.indexOf(tc.oldText);if(idx===-1)return <span>{seg.v}</span>;const ac=tcColors[tc.author]||tcColors.Elnor;return <span>{seg.v.slice(0,idx)}<span style={{color:ac.del,textDecoration:"line-through",opacity:.7}}>{tc.oldText}</span><span style={{color:ac.ins,textDecoration:"underline",fontWeight:500}}>{tc.newText}</span>{" "}<span style={{display:"inline-flex",gap:2,verticalAlign:"middle"}}><button onClick={()=>acceptChange(tc.id)} style={{width:15,height:15,borderRadius:3,border:`1px solid ${ac.ins}40`,backgroundColor:ac.ins+"10",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0}}><I.Check size={9} color={ac.ins}/></button><button onClick={()=>rejectChange(tc.id)} style={{width:15,height:15,borderRadius:3,border:`1px solid ${ac.del}30`,backgroundColor:ac.del+"08",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",padding:0}}><I.X size={9} color={ac.del}/></button><span style={{fontSize:8.5,color:ac.ins,fontStyle:"italic",fontWeight:600}}>{tc.author}</span></span>{seg.v.slice(idx+tc.oldText.length)}</span>};
  const renderSeg=seg=>{const hasCm=openC.some(cm=>cm.segId===seg.id);const isAct=activeComment&&comments.find(cm=>cm.id===activeComment)?.segId===seg.id;const hl=isAct?{backgroundColor:c.accentBtn+"18",borderRadius:3,padding:"2px 4px",margin:"-2px -4px",boxShadow:`inset 0 0 0 1.5px ${c.accentBtn}40`}:hasCm?{backgroundColor:c.accentBtn+"08",borderRadius:3,padding:"1px 3px",margin:"-1px -3px"}:{};const cnt=openC.filter(cm=>cm.segId===seg.id).length;if(seg.t==="h2")return <h2 key={seg.id} style={{fontSize:16,fontWeight:700,color:c.textPri,margin:"18px 0 8px",paddingBottom:5,borderBottom:`1px solid ${c.borderLight}`}}><span style={hl}>{seg.v}</span></h2>;if(seg.t==="li")return <li key={seg.id} style={{marginBottom:5}}><span style={hl}>{renderText(seg)}</span>{cnt>0&&<span style={{fontSize:9,color:c.accentBtn,marginLeft:4,cursor:"pointer"}} onClick={()=>{const cm=openC.find(x=>x.segId===seg.id);if(cm)setActiveComment(cm.id)}}>💬{cnt}</span>}</li>;return <p key={seg.id} style={{marginBottom:12}}><span style={hl}>{renderText(seg)}</span>{cnt>0&&<span style={{fontSize:9,color:c.accentBtn,marginLeft:4,cursor:"pointer"}} onClick={()=>{const cm=openC.find(x=>x.segId===seg.id);if(cm)setActiveComment(cm.id)}}>💬{cnt}</span>}</p>};

  // ─── Comment card (from Q_NOTES_FULL verbatim) ───
  const CmCard=({cm,resolved})=>{const isAct=activeComment===cm.id;return <div style={{margin:"0 8px 8px",borderRadius:R.sm,border:`1px solid ${isAct?cm.color+"60":c.borderLight}`,backgroundColor:isAct?cm.color+"06":c.bgCard,overflow:"hidden",cursor:"pointer",opacity:resolved?.6:1}} onClick={()=>setActiveComment(isAct?null:cm.id)}>
    <div style={{borderLeft:`3px solid ${cm.color}${resolved?"30":"40"}`,padding:"9px 11px"}}>
      {cm.anchor&&<div style={{fontSize:10.5,color:c.accentBtn,backgroundColor:c.accentBtn+"08",padding:"3px 6px",borderRadius:3,marginBottom:6,fontStyle:"italic",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>"{cm.anchor.slice(0,55)}"</div>}
      <div style={{display:"flex",alignItems:"center",gap:5,marginBottom:5}}><Av letter={cm.author[0]} color={cm.color} size={16}/><span style={{fontSize:11.5,fontWeight:650,color:cm.color}}>{cm.author}</span><span style={{fontSize:9.5,color:c.textTer}}>{cm.time}</span></div>
      {editingId===cm.id?<div onClick={e=>e.stopPropagation()}><textarea value={editText} onChange={e=>setEditText(e.target.value)} autoFocus style={{width:"100%",padding:"5px 7px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:40,resize:"vertical"}}/><div style={{display:"flex",gap:4,marginTop:4}}><Btn small primary onClick={()=>saveEdit(cm.id)}>Save</Btn><Btn small ghost onClick={()=>setEditingId(null)}>Cancel</Btn></div></div>
      :<div style={{fontSize:12,lineHeight:1.5,color:c.textSec,marginBottom:5}}>{cm.body}</div>}
      {editingId!==cm.id&&<div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5}} onClick={e=>e.stopPropagation()}>
        {!resolved&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>{setReplyingTo(replyingTo===cm.id?null:cm.id);setReplyText("")}}>Reply</span>}
        {!resolved&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>resolveComment(cm.id)}>Resolve</span>}
        {resolved&&<span style={{color:c.accentBtn,cursor:"pointer",fontWeight:500}} onClick={()=>reopenComment(cm.id)}>Reopen</span>}
        {cm.author==="You"&&<span style={{color:c.textTer,cursor:"pointer",fontWeight:500}} onClick={()=>{setEditingId(cm.id);setEditText(cm.body)}}>Edit</span>}
        {cm.author==="You"&&deletingId!==cm.id&&<span style={{color:c.error,cursor:"pointer",fontWeight:500,opacity:.7}} onClick={()=>setDeletingId(cm.id)}>Delete</span>}
        {deletingId===cm.id&&<><span style={{color:c.error,fontWeight:600,fontSize:10}}>Delete?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>doDelete(cm.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setDeletingId(null)}>No</span></>}
        <span style={{flex:1}}/><span onClick={()=>flash(`Sent to ${agent.name}`)} style={{cursor:"pointer",display:"flex",alignItems:"center",gap:2,color:c.textSec,fontWeight:600,fontSize:10}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textSec}><I.Spark size={11}/>Send</span>
      </div>}
    </div>
    {cm.replies.map(r=><div key={r.id} style={{borderLeft:`3px solid ${r.color}40`,borderTop:`1px solid ${c.borderLight}`,padding:"7px 11px",backgroundColor:c.bgPanelAlt}}><div style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}><Av letter={r.author[0]} color={r.color} size={14}/><span style={{fontSize:10.5,fontWeight:650,color:r.color}}>{r.author}</span><span style={{fontSize:9,color:c.textTer}}>{r.time}</span></div><div style={{fontSize:11.5,lineHeight:1.5,color:c.textSec}}>{r.body}</div></div>)}
    {replyingTo===cm.id&&<div style={{borderTop:`1px solid ${c.borderLight}`,padding:"8px 11px",backgroundColor:c.bgPanelAlt}} onClick={e=>e.stopPropagation()}><textarea value={replyText} onChange={e=>setReplyText(e.target.value)} placeholder="Reply… (Enter) — type @Elnor to mention" 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>};

  // ─── Note row (from Q_NOTES_FULL verbatim) ───
  const NoteRow=({n,depth=0})=><div onContextMenu={e=>{e.preventDefault();setContextMenu({x:e.clientX,y:e.clientY,noteId:n.id})}} onClick={()=>setSelectedNote(n.id)} style={{padding:`7px 10px 7px ${14+depth*14}px`,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:selectedNote===n.id?c.accentBtn+"06":"transparent",borderLeft:selectedNote===n.id?`2px solid ${c.accentBtn}`:"2px solid transparent"}}>
    <div style={{display:"flex",alignItems:"center",gap:3,marginBottom:2}}>{n.pinned&&<I.Pin size={8} color={c.warn}/>}<span style={{fontSize:12,fontWeight:550,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{n.title}</span>{n.pending&&<Dot color={c.green} size={5}/>}</div>
    <div style={{fontSize:9.5,color:c.textTer}}>{n.mod}{n.comments>0&&` · 💬${n.comments}`}</div>
  </div>;

  // ─── Browser folder tree (from Q_BROWSER_R13 verbatim) ───
  const renderBFolderTree=(parentId,depth,isOverlay=false)=>bFolders.filter(f=>f.parent===parentId).map(f=>{
    const hasChildren=bFolders.some(ch=>ch.parent===f.id);const isExp=expandedBFolders.has(f.id);
    const isActive=!isOverlay&&activeBFolder===f.id;const isDrop=dropTarget===f.id;const isHover=hoverBFolder===f.id;const isDeleting=deletingBFolder===f.id;
    return <div key={f.id}>
      <div onClick={()=>{if(isOverlay)return;setActiveBFolder(isActive?null:f.id)}} onMouseEnter={()=>setHoverBFolder(f.id)} onMouseLeave={()=>setHoverBFolder(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();toggleBFolder(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&&!isDeleting&&<><span onClick={e=>{e.stopPropagation();setBNewFolderMode({parent:f.id});setBNewFolderName("");setTimeout(()=>bnfRef.current?.focus(),50)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Add subfolder"><I.Plus size={9}/></span><span onClick={e=>{e.stopPropagation();setDeletingBFolder(f.id)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Delete folder"><I.Trash size={9}/></span></>}
        {isDeleting&&<span style={{display:"flex",gap:3,fontSize:9}} onClick={e=>e.stopPropagation()}><span style={{color:c.error,fontWeight:600}}>Delete?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>deleteBFolder(f.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setDeletingBFolder(null)}>No</span></span>}
      </div>
      {isExp&&hasChildren&&renderBFolderTree(f.id,depth+1,isOverlay)}
      {!isOverlay&&bNewFolderMode&&bNewFolderMode.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={bnfRef} value={bNewFolderName} onChange={e=>setBNewFolderName(e.target.value)} placeholder="Subfolder…" onKeyDown={e=>{if(e.key==="Enter")createBFolder(f.id);if(e.key==="Escape"){setBNewFolderMode(null);setBNewFolderName("")}}} 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 (from Q_NOTES_FULL verbatim) ───
  const renderNFolders=(parentId,depth)=>noteFolders.filter(f=>f.parent===parentId).map(folder=>{
    const isExp=expandedNFolders.has(folder.id);const children=noteFolders.filter(ch=>ch.parent===folder.id);const folderNotes=filteredNotes.filter(n=>n.folder===folder.id);const isHover=hoverNFolder===folder.id;
    return <div key={folder.id}>
      <div onMouseEnter={()=>setHoverNFolder(folder.id)} onMouseLeave={()=>setHoverNFolder(null)} onClick={()=>{const s=new Set(expandedNFolders);s.has(folder.id)?s.delete(folder.id):s.add(folder.id);setExpandedNFolders(s)}} style={{display:"flex",alignItems:"center",gap:4,padding:`4px 8px 4px ${8+depth*14}px`,cursor:"pointer",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>
        {isExp?<I.ChevD size={10} color={c.textTer}/>:<I.ChevR size={10} color={c.textTer}/>}
        <I.Folder size={11} color={depth===0?c.warn:c.textTer}/><span style={{fontSize:11.5,fontWeight:600,flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{folder.title}</span>
        {isHover&&<span onClick={e=>{e.stopPropagation();setNNewFolderMode({parent:folder.id});setNNewFolderName("");setTimeout(()=>nfRef.current?.focus(),50)}} style={{cursor:"pointer",display:"flex",color:c.textTer}} title="Add subfolder"><I.Plus size={10}/></span>}
      </div>
      {isExp&&<>
        {nNewFolderMode&&nNewFolderMode.parent===folder.id&&<div style={{display:"flex",alignItems:"center",gap:4,padding:`3px 8px 3px ${22+depth*14}px`,borderBottom:`1px solid ${c.borderLight}`}}><I.Folder size={10} color={c.textTer}/><input ref={nfRef} value={nNewFolderName} onChange={e=>setNNewFolderName(e.target.value)} placeholder="Subfolder…" onKeyDown={e=>{if(e.key==="Enter")createNFolder(folder.id);if(e.key==="Escape"){setNNewFolderMode(null);setNNewFolderName("")}}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/></div>}
        {folderNotes.map(n=><NoteRow key={n.id} n={n} depth={depth+1}/>)}
        {renderNFolders(folder.id,depth+1)}
      </>}
    </div>});

  const showNL=noteListOpen&&!fullScreen;const showRP=rightOpen&&!fullScreen;
  return (
    <div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp}} onClick={()=>{setOpenDrop(null);setAgentDrop(false);setChatDrop(false);setContextMenu(null);setNoteSortDrop(false);setSortDrop(false)}}>
      <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)}/>}
      {contextMenu&&<div onClick={e=>e.stopPropagation()} style={{position:"fixed",left:contextMenu.x,top:contextMenu.y,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.15)",zIndex:9999,minWidth:140,padding:4}}>
        <DItem onClick={()=>archiveNote(contextMenu.noteId)}><I.Archive size={12} color={c.textTer}/>Archive</DItem>
        {deletingNote===contextMenu.noteId?<div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 10px"}}><span style={{fontSize:11,color:c.error,fontWeight:600}}>Delete permanently?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,fontSize:11,textDecoration:"underline"}} onClick={()=>deleteNote(contextMenu.noteId)}>Yes</span><span style={{color:c.textTer,cursor:"pointer",fontSize:11}} onClick={()=>setDeletingNote(null)}>No</span></div>
        :<DItem onClick={()=>setDeletingNote(contextMenu.noteId)}><I.Trash size={12} color={c.error}/>Delete</DItem>}
      </div>}

      {/* ═══ SIDEBAR ICON RAIL ═══ */}
      <div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap:6}}>
        <div style={{width:26,height:26,borderRadius:R.sm,backgroundColor:c.accentBtn,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700}}>Q</div>
        <div style={{width:22,height:1,backgroundColor:c.borderDark,margin:"4px 0"}}/>
        <button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:26,height:26,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:browserOpen?"#ffffff15":"transparent",color:browserOpen?"#fff":"#999",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Search size={14}/></button>
        <button onClick={()=>setNoteListOpen(!noteListOpen)} title="Notes" style={{width:26,height:26,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:noteListOpen?"#ffffff15":"transparent",color:noteListOpen?"#fff":"#999",display:"flex",alignItems:"center",justifyContent:"center"}}><I.FileText size={14}/></button>
      </div>

      {/* ═══ BROWSER COLUMN (from Q_BROWSER_R13 — collapsible) ═══ */}
      {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={()=>toggleBCollection(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="Folder 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}}>{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 ${noProject?c.accentBtn: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={()=>{setBNewFolderMode({parent:null});setBNewFolderName("");setTimeout(()=>bnfRef.current?.focus(),50)}} 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>
            {bNewFolderMode&&bNewFolderMode.parent===null&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"3px 8px",marginBottom:4}}><I.Folder size={11} color={c.warn}/><input ref={bnfRef} value={bNewFolderName} onChange={e=>setBNewFolderName(e.target.value)} placeholder="Folder name…" onKeyDown={e=>{if(e.key==="Enter")createBFolder(null);if(e.key==="Escape"){setBNewFolderMode(null);setBNewFolderName("")}}} 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>}
            {renderBFolderTree(null,0,false)}
          </div>}
          {activeScope==="Places"&&<div style={{padding:"3px 4px"}}>
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"2px 8px 6px"}}><span style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",letterSpacing:".06em"}}>Places</span><button onClick={()=>flash("Opening Finder…")} style={{padding:"1px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.accentBtn,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}}><I.Plus size={8}/>Add</button></div>
            {places.map((p,i)=><div key={p.id} onMouseEnter={()=>setHoverPlace(p.id)} onMouseLeave={()=>setHoverPlace(null)} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,cursor:"pointer",backgroundColor:activePlace===i?c.accentBtn+"10":"transparent",opacity:p.status==="missing"?.5:1}}>
              <div onClick={()=>{setActivePlace(i);setPlacePath([])}} style={{display:"flex",alignItems:"center",gap:6,flex:1,minWidth:0}}><I.Folder size={12} color={activePlace===i?c.accentBtn:c.textTer}/><div style={{flex:1,minWidth:0}}><div style={{fontSize:11.5,fontWeight:activePlace===i?600:400,color:activePlace===i?c.accentBtn:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.title}</div><div style={{fontSize:9,color:c.textTer,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.path}</div></div></div>
              {hoverPlace===p.id&&removingPlace!==p.id&&<span onClick={()=>setRemovingPlace(p.id)} style={{cursor:"pointer",display:"flex",color:c.textTer,flexShrink:0}}><I.X size={10}/></span>}
              {removingPlace===p.id&&<span style={{display:"flex",gap:3,fontSize:9,flexShrink:0}} onClick={e=>e.stopPropagation()}><span style={{color:c.error,fontWeight:600}}>Remove?</span><span style={{color:c.error,cursor:"pointer",fontWeight:700,textDecoration:"underline"}} onClick={()=>removePlace_(p.id)}>Yes</span><span style={{color:c.textTer,cursor:"pointer"}} onClick={()=>setRemovingPlace(null)}>No</span></span>}
              {removingPlace!==p.id&&hoverPlace!==p.id&&<span style={{fontSize:8,padding:"1px 5px",borderRadius:R.full,backgroundColor:p.status==="ok"?c.green+"15":c.error+"15",color:p.status==="ok"?c.green:c.error,fontWeight:600,flexShrink:0}}>{p.status}</span>}
            </div>)}
          </div>}
          {activeScope==="Saved Views"&&<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"}}>Saved Views</span><button onClick={()=>{setSaveViewMode(true);setSaveViewName("")}} 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.Save size={8}/>Save</button></div>
            {saveViewMode&&<div style={{margin:"0 8px 6px",display:"flex",gap:3}}><input value={saveViewName} onChange={e=>setSaveViewName(e.target.value)} placeholder="View name…" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&saveViewName.trim()){setUserSavedViews(p=>[...p,{id:"usv"+p.length,name:saveViewName.trim()}]);flash(`Saved`);setSaveViewMode(false)}if(e.key==="Escape")setSaveViewMode(false)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/><button onClick={()=>setSaveViewMode(false)} style={{padding:"1px 6px",border:`1px solid ${c.border}`,borderRadius:3,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans}}>Cancel</button></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=><div key={sv.id} onMouseEnter={()=>setHoverSavedView(sv.id)} onMouseLeave={()=>setHoverSavedView(null)} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,cursor:"pointer",backgroundColor:activeSavedView===sv.id?c.accentBtn+"10":"transparent"}}><span onClick={()=>setActiveSavedView(activeSavedView===sv.id?null:sv.id)} style={{fontSize:11.5,fontWeight:activeSavedView===sv.id?600:400,color:activeSavedView===sv.id?c.accentBtn:c.textSec,flex:1}}>{sv.name}</span>{hoverSavedView===sv.id&&<><span onClick={()=>flash("Rename…")} style={{fontSize:9,color:c.textTer,cursor:"pointer"}}>rename</span><span onClick={()=>{setUserSavedViews(p=>p.filter(v=>v.id!==sv.id));flash("Deleted")}} style={{fontSize:9,color:c.error,cursor:"pointer"}}>delete</span></>}</div>)}
          </div>}
          {activeScope&&!["Project","Folders","Places","Saved Views"].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>
          {renderBFolderTree(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={()=>toggleBType(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>
        {/* Sort bar + save view */}
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"3px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:9.5,color:c.textTer}}>
          <span>{filtered.length} items</span>
          <div style={{display:"flex",alignItems:"center",gap:6}}>
            <button onClick={()=>{setSaveFromBar(true);setSaveViewName("")}} title="Save view" style={{padding:2,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.color=c.accentBtn} onMouseLeave={e=>e.currentTarget.style.color=c.textTer}><I.Save size={11}/></button>
            <div style={{position:"relative"}}><span style={{cursor:"pointer"}} onClick={e=>{e.stopPropagation();setSortDrop(!sortDrop)}}>{sortKey} ▾</span>
              {sortDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:16,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:120,padding:3}}>
                {sortOptions.map(s=><button key={s} onClick={()=>{setSortKey(s);setSortDrop(false)}} style={{display:"block",width:"100%",padding:"5px 10px",border:"none",cursor:"pointer",backgroundColor:s===sortKey?c.accentBtn+"08":"transparent",fontSize:11,color:s===sortKey?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:s===sortKey?600:400}}>{s}{s===sortKey&&" ✓"}</button>)}
              </div>}</div>
          </div>
        </div>
        {saveFromBar&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.accentBtn+"06"}}><I.Save size={10} color={c.accentBtn}/><input value={saveViewName} onChange={e=>setSaveViewName(e.target.value)} placeholder="View name…" autoFocus onKeyDown={e=>{if(e.key==="Enter"&&saveViewName.trim()){setUserSavedViews(p=>[...p,{id:"usv"+p.length,name:saveViewName.trim()}]);flash(`Saved`);setSaveFromBar(false)}if(e.key==="Escape")setSaveFromBar(false)}} style={{flex:1,border:`1px solid ${c.accentBtn}40`,borderRadius:3,padding:"2px 6px",fontSize:11,fontFamily:font.sans,outline:"none",backgroundColor:c.bgCard}}/><button onClick={()=>{if(saveViewName.trim()){setUserSavedViews(p=>[...p,{id:"usv"+p.length,name:saveViewName.trim()}]);flash("Saved")}setSaveFromBar(false)}} style={{padding:"2px 8px",borderRadius:R.sm,border:"none",backgroundColor:c.accentBtn,color:"#fff",cursor:"pointer",fontSize:10,fontFamily:font.sans}}>Save</button><button onClick={()=>setSaveFromBar(false)} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:10,color:c.textTer,fontFamily:font.sans}}>Cancel</button></div>}
        {/* Results */}
        <div style={{flex:1,overflowY:"auto"}}>
          {activeScope==="Places"&&activePlace!==null?<div>
            <div style={{display:"flex",alignItems:"center",gap:4,padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`,fontSize:10,color:c.textTer,flexWrap:"wrap"}}>
              <span style={{cursor:"pointer",color:c.accentBtn,fontWeight:600,fontSize:11}} onClick={()=>setPlacePath([])}>← {places[activePlace]?.title}</span>
              {placePath.map((p,i)=><span key={i} style={{display:"flex",alignItems:"center",gap:3}}><span>/</span><span style={{cursor:"pointer",color:i===placePath.length-1?c.textPri:c.accentBtn,fontWeight:i===placePath.length-1?600:400}} onClick={()=>setPlacePath(placePath.slice(0,i+1))}>{p}</span></span>)}
            </div>
            {currentPlaceFiles().filter(f=>f.isFolder).map((f,i)=><div key={"d"+i} onClick={()=>setPlacePath([...placePath,f.name])} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:34,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",backgroundColor:c.bgPanelAlt+"80"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.accentBtn+"06"} onMouseLeave={e=>e.currentTarget.style.backgroundColor=c.bgPanelAlt+"80"}><I.Folder size={13} color={c.warn}/><span style={{flex:1,fontSize:12,fontWeight:600}}>{f.name}</span><I.ChevR size={10} color={c.textTer}/></div>)}
            {currentPlaceFiles().filter(f=>!f.isFolder).map((f,i)=><div key={"f"+i} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:32,borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",opacity:f.dimmed?.35:1}}><I.File size={12} color={c.textTer}/><span style={{flex:1,fontSize:11.5,fontWeight:450,color:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{f.name}</span><span style={{fontSize:8,padding:"1px 5px",borderRadius:3,backgroundColor:c.bgInput,color:c.textTer}}>{f.type}</span><span style={{fontSize:8.5,color:c.textTer,minWidth:40,textAlign:"right"}}>{f.size}</span><span style={{fontSize:9,color:c.textTer}}>{f.mod}</span></div>)}
          </div>:<>{filtered.map((item,i)=><div key={i} draggable onDragStart={()=>setDragItem(item.title)} onDragEnd={()=>setDragItem(null)} onClick={()=>setSelectedBIdx(i)} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 8px",height:32,borderBottom:`1px solid ${c.borderLight}`,cursor:folderOverlay?"grab":"pointer",backgroundColor:selectedBIdx===i?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(selectedBIdx!==i)e.currentTarget.style.backgroundColor=c.bgPanelAlt}} onMouseLeave={e=>{if(selectedBIdx!==i)e.currentTarget.style.backgroundColor="transparent"}}>
            {item.pin&&<I.Pin size={8} color={c.warn}/>}{item.unread&&<Dot color={c.accentBtn} size={4}/>}
            <span style={{flex:1,minWidth:0,fontSize:11.5,fontWeight:item.unread?600: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>
        {/* 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>
        <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>}

      {/* ═══ NOTES SIDEBAR (from Q_NOTES_FULL — collapsible, with To-Do Lists tab) ═══ */}
      {showNL&&<div style={{width:220,flexShrink:0,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanel}}>
        {/* Tab bar: Notes | To-Do Lists */}
        <div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`}}>
          {[{id:"notes",label:"Notes",icon:<I.FileText size={10}/>},{id:"todos",label:"To-Do Lists",icon:<I.List size={10}/>}].map(tab=>(
            <button key={tab.id} onClick={()=>setSidebarTab(tab.id)} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",fontFamily:font.sans,fontSize:10,fontWeight:sidebarTab===tab.id?650:450,color:sidebarTab===tab.id?c.accentBtn:c.textTer,backgroundColor:sidebarTab===tab.id?c.accentBtn+"06":"transparent",borderBottom:sidebarTab===tab.id?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}>{tab.icon}{tab.label}</button>
          ))}
        </div>
        {sidebarTab==="notes"&&<>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"8px 10px",borderBottom:`1px solid ${c.borderLight}`}}>
            <span style={{fontSize:12.5,fontWeight:650}}>Notes</span>
            <div style={{display:"flex",gap:3}}>
              <button onClick={()=>setFolderView(!folderView)} style={{padding:2,border:"none",cursor:"pointer",backgroundColor:folderView?c.accentBtn+"12":"transparent",borderRadius:3,display:"flex",color:folderView?c.accentBtn:c.textTer}}><I.Folder size={12}/></button>
              {folderView&&<button onClick={()=>{setNNewFolderMode({parent:null});setNNewFolderName("");setTimeout(()=>nfRef.current?.focus(),50)}} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,color:c.textTer,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}} title="New folder"><I.Folder size={8}/>+</button>}
              <button onClick={()=>flash("New note…")} style={{padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,color:c.accentBtn,fontFamily:font.sans,display:"flex",alignItems:"center",gap:2}}><I.FileText size={8}/>+</button>
            </div>
          </div>
          <div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}>
            <div style={{display:"flex",alignItems:"center",gap:3,flex:1,padding:"3px 6px",borderRadius:R.sm,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}>
              <I.Search size={10} color={c.textTer}/><input value={noteSearch} onChange={e=>setNoteSearch(e.target.value)} placeholder="Search notes…" style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:10.5,fontFamily:font.sans,color:c.textPri,outline:"none"}}/>
              {noteSearch&&<button onClick={()=>setNoteSearch("")} style={{padding:0,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",color:c.textTer}}><I.X size={9}/></button>}
            </div>
            <div style={{position:"relative"}}><button onClick={e=>{e.stopPropagation();setNoteSortDrop(!noteSortDrop)}} style={{padding:"2px 5px",borderRadius:3,border:`1px solid ${c.borderLight}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.textTer,fontFamily:font.sans}}>{noteSort} ▾</button>
              {noteSortDrop&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:22,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,minWidth:100,padding:3}}>
                {noteSortOpts.map(s=><button key={s} onClick={()=>{setNoteSort(s);setNoteSortDrop(false)}} style={{display:"block",width:"100%",padding:"4px 8px",border:"none",cursor:"pointer",backgroundColor:s===noteSort?c.accentBtn+"08":"transparent",fontSize:10.5,color:s===noteSort?c.accentBtn:c.textPri,textAlign:"left",borderRadius:R.sm,fontFamily:font.sans,fontWeight:s===noteSort?600:400}}>{s}</button>)}
              </div>}</div>
          </div>
          <div style={{flex:1,overflowY:"auto"}}>
            {folderView?<>
              {nNewFolderMode&&nNewFolderMode.parent===null&&<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`}}><I.Folder size={11} color={c.warn}/><input ref={nfRef} value={nNewFolderName} onChange={e=>setNNewFolderName(e.target.value)} placeholder="Folder name…" onKeyDown={e=>{if(e.key==="Enter")createNFolder(null);if(e.key==="Escape"){setNNewFolderMode(null);setNNewFolderName("")}}} 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>}
              {renderNFolders(null,0)}
              <div style={{padding:"5px 8px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt}}><span style={{fontSize:11,fontWeight:600,color:c.textTer,fontStyle:"italic"}}>Unfiled</span></div>
              {filteredNotes.filter(n=>!n.folder).map(n=><NoteRow key={n.id} n={n}/>)}
            </>:<>{filteredNotes.map(n=><NoteRow key={n.id} n={n}/>)}</>}
            {archivedNotes.length>0&&<div style={{padding:"6px 8px",borderTop:`1px solid ${c.borderLight}`,borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,display:"flex",alignItems:"center",justifyContent:"space-between",cursor:"pointer"}} onClick={()=>setShowArchived(!showArchived)}><span style={{fontSize:10,fontWeight:600,color:c.textTer}}>Archived ({archivedNotes.length})</span>{showArchived?<I.ChevD size={10} color={c.textTer}/>:<I.ChevR size={10} color={c.textTer}/>}</div>}
            {showArchived&&archivedNotes.map(n=><div key={n.id} style={{padding:"7px 10px 7px 14px",borderBottom:`1px solid ${c.borderLight}`,cursor:"pointer",opacity:.5,display:"flex",alignItems:"center",gap:6}} onClick={()=>setSelectedNote(n.id)}><I.Archive size={10} color={c.textTer}/><span style={{flex:1,fontSize:11.5,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{n.title}</span><button onClick={e=>{e.stopPropagation();unarchiveNote(n.id)}} style={{padding:"1px 6px",borderRadius:3,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9,color:c.accentBtn,fontFamily:font.sans}}>Restore</button></div>)}
            {filteredNotes.length===0&&<div style={{padding:16,fontSize:11,color:c.textTer,textAlign:"center",fontStyle:"italic"}}>{noteSearch?`No notes match "${noteSearch}"`:"No notes"}</div>}
          </div>
          <div style={{padding:"3px 8px",borderTop:`1px solid ${c.borderLight}`,fontSize:9,color:c.textTer}}>{activeNotes.length} notes · {noteSort}{archivedNotes.length>0&&` · ${archivedNotes.length} archived`}</div>
        </>}
        {sidebarTab==="todos"&&<>
          <div style={{padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`,display:"flex",alignItems:"center",gap:4}}>
            <button onClick={()=>flash("New list…")} style={{padding:"2px 6px",borderRadius:3,border:`1px solid ${c.border}`,backgroundColor:"transparent",cursor:"pointer",fontSize:9.5,fontFamily:font.sans,color:c.textTer,display:"flex",alignItems:"center",gap:2}}><I.Plus size={9}/>New List</button>
          </div>
          <div style={{flex:1,overflowY:"auto"}}>
            {todoLists.map(list=><div key={list.id} style={{display:"flex",alignItems:"center",gap:6,padding:"7px 10px",cursor:"pointer",borderLeft:list.active?`2px solid ${c.accentBtn}`:"2px solid transparent",backgroundColor:list.active?c.accentBtn+"06":"transparent"}} onMouseEnter={e=>{if(!list.active)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=list.active?c.accentBtn+"06":"transparent"}}><span style={{fontSize:13}}>{list.icon}</span><span style={{flex:1,fontSize:12,fontWeight:list.active?650:450}}>{list.title}</span><span style={{fontSize:9,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 5px",borderRadius:3}}>{list.count||0}</span></div>)}
          </div>
        </>}
      </div>}

      {/* ═══ MAIN WORKSPACE AREA ═══ */}
      <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        {/* ─── Full toolbar (from Q_NOTES_FULL verbatim) ─── */}
        <div style={{display:"flex",alignItems:"center",gap:3,padding:"4px 10px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexWrap:"wrap"}}>
          <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 all" onClick={()=>flash("Copied")}/>
          <div style={{position:"relative"}}><TBtn icon={<I.Save size={13}/>} label="Save As…" dropdown onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="save"?null:"save")}}/>
            {openDrop==="save"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,left:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:180,padding:4}}>
              <DItem onClick={()=>{flash("Export MD");setOpenDrop(null)}}>Export as Markdown</DItem>
              <DItem onClick={()=>{flash("Export DOCX");setOpenDrop(null)}}>Export as DOCX</DItem>
              <DItem onClick={()=>{flash("Export PDF");setOpenDrop(null)}}>Export as PDF</DItem>
              <div style={{borderTop:`1px solid ${c.borderLight}`,margin:"2px 0"}}/>
              <DItem onClick={()=>{flash("Save as Prompt");setOpenDrop(null)}}>Save as Prompt</DItem>
            </div>}</div>
          <TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Ref copied")}/>
          <Sep/><TBtn icon={<I.Search size={13}/>} active={findBar} onClick={()=>setFindBar(!findBar)}/><TBtn icon={<I.Maximize size={13}/>} active={fullScreen} onClick={()=>setFullScreen(!fullScreen)}/>
          <Sep/><TBtn icon={<I.MsgCircle size={13}/>} label={`${openC.length}`} active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(true);setRightTab("comments")}}}/>
          {pendingChanges.length>0&&<><Sep/><TBtn icon={<I.Eye size={13}/>} label={showMarkup?"Markup":"Clean"} active={showMarkup} onClick={()=>setShowMarkup(!showMarkup)}/>
            <div style={{position:"relative"}}><TBtn icon={<I.Edit size={13}/>} label={`${pendingChanges.length}`} dropdown active onClick={e=>{e.stopPropagation();setOpenDrop(openDrop==="review"?null:"review")}}/>
              {openDrop==="review"&&<div onClick={e=>e.stopPropagation()} style={{position:"absolute",top:28,right:0,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 8px 24px rgba(0,0,0,0.12)",zIndex:999,minWidth:160,padding:4}}>
                <DItem onClick={()=>{acceptAll();setOpenDrop(null)}}>✓ Accept All ({pendingChanges.length})</DItem>
                <DItem onClick={()=>{rejectAll();setOpenDrop(null)}}>✗ Reject All ({pendingChanges.length})</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}}><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>}

        {/* ─── Content split: To-Do column | Editor | Comments/Send panel ─── */}
        <div style={{flex:1,display:"flex",overflow:"hidden"}}>
          {/* ─── TO-DO + ELNOR COLUMN (LEFT of editor) ─── */}
          {!fullScreen&&<div style={{width:300,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt,flexShrink:0,overflowY:"auto"}}>
            {/* My Tasks */}
            <div style={{borderBottom:`1px solid ${c.borderLight}`}}>
              <div onClick={()=>setTodoCollapsed(!todoCollapsed)} style={{padding:"7px 10px",display:"flex",alignItems:"center",gap:6,cursor:"pointer",backgroundColor:c.bgPanel}}>
                <div style={{transform:todoCollapsed?"none":"rotate(90deg)",transition:"transform 0.1s"}}><I.ChevR size={10} color={c.textTer}/></div>
                <span style={{fontSize:12.5,fontWeight:700,flex:1}}>Today</span>
                <span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{activeTodos.length}</span>
                <button onClick={e=>{e.stopPropagation();flash("Configure list…")}} style={{border:"none",background:"none",cursor:"pointer",padding:0,display:"flex"}}><I.Settings size={12} color={c.textTer}/></button>
              </div>
            </div>
            {!todoCollapsed&&<div style={{padding:"4px 6px"}}>
              {activeTodos.map(todo=><div key={todo.id} style={{marginBottom:2,borderRadius:R.sm,backgroundColor:c.bgCard,border:`1px solid ${expandedTodo===todo.id?c.accentBtn+"25":c.borderLight}`}}>
                <div style={{display:"flex",alignItems:"flex-start",gap:5,padding:"6px 8px",cursor:"pointer"}} onClick={()=>setExpandedTodo(expandedTodo===todo.id?null:todo.id)}>
                  <input type="checkbox" checked={false} onChange={()=>toggleTodo(todo.id)} onClick={e=>e.stopPropagation()} style={{width:14,height:14,accentColor:c.accentBtn,marginTop:2,flexShrink:0}}/>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:12,fontWeight:500,lineHeight:1.4}}>{todo.text}</div>
                    <div style={{display:"flex",gap:5,marginTop:2,alignItems:"center",flexWrap:"wrap"}}>
                      <span style={{fontSize:8.5,fontWeight:700,color:priColor(todo.pri),border:`1px solid ${priColor(todo.pri)}30`,borderRadius:2,padding:"0 3px"}}>{priLabel(todo.pri)}</span>
                      {todo.due&&<span style={{fontSize:9,color:c.textTer}}>{todo.due}</span>}
                      {todo.linkedNote&&<span style={{fontSize:9,color:c.accentBtn,cursor:"pointer",display:"flex",alignItems:"center",gap:2}} onClick={e=>{e.stopPropagation();const n=notes.find(x=>x.id===todo.linkedNote);if(n){setSelectedNote(n.id);flash(`Opened "${n.title}"`)}}}><I.Link size={8}/>Note</span>}
                      {todo.sub.length>0&&<span style={{fontSize:9,color:c.textTer}}>{todo.sub.filter(s=>s.done).length}/{todo.sub.length}</span>}
                    </div>
                  </div>
                  <div style={{transform:expandedTodo===todo.id?"rotate(90deg)":"none",transition:"transform 0.1s",marginTop:3}}><I.ChevR size={9} color={c.textTer}/></div>
                </div>
                {expandedTodo===todo.id&&<div style={{padding:"0 8px 8px 28px",borderTop:`1px solid ${c.borderLight}`}}>
                  {todo.sub.map(s=><div key={s.id} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 0"}}>
                    <input type="checkbox" checked={s.done} onChange={()=>toggleSub(todo.id,s.id)} style={{width:12,height:12,accentColor:c.accentBtn}}/>
                    <span style={{fontSize:11,color:s.done?c.textTer:c.textSec,textDecoration:s.done?"line-through":"none"}}>{s.text}</span>
                  </div>)}
                  <div style={{display:"flex",gap:4,marginTop:6}}>
                    <Btn small ghost onClick={()=>flash("@Elnor…")}><I.Spark size={9} color={c.agentAv}/>@Elnor</Btn>
                    <Btn small ghost><I.Plus size={9}/>Sub</Btn>
                    <Btn small ghost onClick={()=>{if(todo.linkedNote){setSelectedNote(todo.linkedNote);flash("Opened linked note")}else flash("Link a note…")}}><I.Link size={9}/>{todo.linkedNote?"Open Note":"Link Note"}</Btn>
                  </div>
                </div>}
              </div>)}
              {/* Add task */}
              <div style={{display:"flex",alignItems:"center",gap:5,padding:"6px 8px",borderRadius:R.sm,border:`1px dashed ${c.borderLight}`,marginTop:4}}>
                <I.Plus size={11} color={c.textTer}/>
                <input value={newTodoText} onChange={e=>setNewTodoText(e.target.value)} placeholder="Add task… (type @Elnor to assign)" onKeyDown={e=>{if(e.key==="Enter"&&newTodoText.trim()){setTodos(p=>[...p,{id:"t"+Date.now(),text:newTodoText,done:false,pri:3,sub:[]}]);setNewTodoText("")}}} style={{flex:1,border:"none",outline:"none",fontSize:11,fontFamily:font.sans,backgroundColor:"transparent",color:c.textPri}}/>
              </div>
              {doneTodos.length>0&&<div style={{marginTop:8}}>
                <div style={{fontSize:9.5,fontWeight:650,color:c.textTer,textTransform:"uppercase",letterSpacing:".05em",padding:"3px 0"}}>Done ({doneTodos.length})</div>
                {doneTodos.map(t=><div key={t.id} style={{display:"flex",alignItems:"center",gap:5,padding:"4px 8px",opacity:.45}}>
                  <input type="checkbox" checked onChange={()=>toggleTodo(t.id)} style={{width:13,height:13,accentColor:c.accentBtn}}/>
                  <span style={{fontSize:11,textDecoration:"line-through",color:c.textTer}}>{t.text}</span>
                </div>)}
              </div>}
            </div>}

            {/* ─── ELNOR FEED (with category headers) ─── */}
            <div style={{borderTop:`1px solid ${c.borderLight}`}}>
              <div onClick={()=>setElnorCollapsed(!elnorCollapsed)} style={{padding:"7px 10px",display:"flex",alignItems:"center",gap:6,cursor:"pointer",backgroundColor:c.bgPanel}}>
                <div style={{transform:elnorCollapsed?"none":"rotate(90deg)",transition:"transform 0.1s"}}><I.ChevR size={10} color={c.textTer}/></div>
                <I.Spark size={12} color={c.agentAv}/>
                <span style={{fontSize:12.5,fontWeight:700,flex:1}}>Elnor</span>
                <span style={{fontSize:9.5,color:c.textTer,backgroundColor:c.bgInput,padding:"1px 6px",borderRadius:3}}>{Object.values(elnorFeedData).flat().length}</span>
              </div>
              {!elnorCollapsed&&<div style={{padding:"4px 6px 8px"}}>
                {Object.entries(elnorFeedData).map(([cat,items])=><div key={cat} style={{marginBottom:6}}>
                  <div style={{display:"flex",alignItems:"center",gap:5,padding:"3px 6px",marginBottom:2}}>
                    {elnorIcons[cat]}
                    <span style={{fontSize:10.5,fontWeight:650,color:c.textTer,textTransform:"uppercase",letterSpacing:".04em"}}>{cat}</span>
                    <span style={{fontSize:9,color:c.textTer}}>({items.length})</span>
                  </div>
                  {items.map(item=><div key={item.id} style={{display:"flex",alignItems:"flex-start",gap:6,padding:"4px 6px 4px 24px",borderRadius:R.sm,cursor:"pointer"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>
                    {item.accent&&<Dot color={item.accent} size={5}/>}
                    <span style={{flex:1,fontSize:11.5,color:c.textSec,lineHeight:1.4}}>{item.text}</span>
                    <span style={{fontSize:9,color:c.textTer,flexShrink:0,whiteSpace:"nowrap"}}>{item.time}</span>
                  </div>)}
                </div>)}
              </div>}
            </div>
          </div>}

          {/* ─── EDITOR (from Q_NOTES_FULL verbatim) ─── */}
          <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0}}>
            <div ref={editorRef} style={{flex:1,overflowY:"auto",padding:"20px 28px 40px",position:"relative",userSelect:"text"}} onMouseUp={handleMouseUp} onMouseDown={e=>{if(bubbleMenu&&!e.target.closest("[data-bubble]"))setBubbleMenu(null)}}>
              <div style={{fontSize:21,fontWeight:700,color:c.textPri,marginBottom:4}} contentEditable suppressContentEditableWarning>Henderson Discovery Priorities</div>
              <div style={{display:"flex",alignItems:"center",gap:6,fontSize:10.5,color:c.textTer,marginBottom:16}}><Dot color="#31588c" size={5}/>Henderson · 2h ago</div>
              <div style={{fontSize:14,lineHeight:1.75,color:c.textSec}}>{segs.map(renderSeg)}</div>
              {/* Bubble menu (from Q_NOTES_FULL verbatim) */}
              {bubbleMenu&&<div data-bubble="1" style={{position:"absolute",left:Math.max(10,Math.min(bubbleMenu.x-140,(editorRef.current?.clientWidth||500)-300)),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={startComment} style={{padding:"5px 10px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:c.accentBtn,color:"#fff",fontSize:11,fontWeight:600,fontFamily:font.sans,display:"flex",alignItems:"center",gap:4}}><I.MsgCircle size={11}/>Comment</button><Sep/>
                <div style={{display:"flex",alignItems:"center",gap:2,padding:"2px 6px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,cursor:"pointer"}}><Dot color={agent.color} size={6}/><span style={{fontSize:10,fontWeight:500}}>{agent.name}</span></div>
                <button onClick={()=>{flash(`Sent to ${agent.name}`);dismissBubble()}} style={{padding:"5px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textSec,fontSize:11,fontFamily:font.sans,display:"flex",alignItems:"center",gap:3}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Spark size={11}/>Ask {agent.name}</button>
                {["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}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}>{a}</button>)}
                <button onClick={dismissBubble} style={{padding:3,border:"none",cursor:"pointer",backgroundColor:"transparent",color:c.textTer,display:"flex"}}><I.X size={11}/></button>
              </div>}
            </div>
          </div>

          {/* ─── RIGHT PANEL: Comments / Send to Agent (from Q_NOTES_FULL verbatim) ─── */}
          {showRP&&<div style={{width:rightTab==="send"?290:260,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt,overflow:"hidden"}}>
            <div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
              <button onClick={()=>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}/>Send to Agent</button>
              <button onClick={()=>setRightOpen(false)} style={{width:26,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.X size={11}/></button>
            </div>
            {rightTab==="comments"&&<div style={{flex:1,overflowY:"auto",padding:"8px 0"}}>
              {newCm&&<div style={{margin:"0 8px 10px",borderRadius:R.sm,border:`2px solid ${c.accentBtn}40`,backgroundColor:c.bgCard,overflow:"hidden"}}><div style={{padding:"8px 11px"}}>{newCm.text&&<div style={{fontSize:10.5,color:c.accentBtn,backgroundColor:c.accentBtn+"08",padding:"3px 6px",borderRadius:3,marginBottom:8,fontStyle:"italic"}}>"{newCm.text.slice(0,80)}"</div>}<textarea ref={cmRef} value={newCmText} onChange={e=>setNewCmText(e.target.value)} placeholder="Comment… (Enter) — type @Elnor to mention" 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… (type @Elnor)</span></div></div>
            </div>}
            {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>
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Send in</div><div style={{position:"relative"}}><div onClick={e=>{e.stopPropagation();setChatDrop(!chatDrop)}} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,fontSize:11.5,cursor:"pointer"}}><Dot color={chats[chatIdx].color} size={5}/><span style={{flex:1,color:c.textSec}}>{chats[chatIdx].name}</span>{chats[chatIdx].origin&&<span style={{fontSize:9,color:c.textTer}}>origin</span>}<I.ChevD size={10} color={c.textTer}/></div>{chatDrop&&<div style={{position:"absolute",top:"100%",left:0,right:0,marginTop:2,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:50,padding:3}}>{chats.map((ch,i)=><DItem key={ch.name} active={i===chatIdx} onClick={()=>{setChatIdx(i);setChatDrop(false)}}><Dot color={ch.color} size={5}/>{ch.name}{ch.origin&&<span style={{fontSize:9,color:c.textTer}}>origin</span>}{i===chatIdx&&<I.Check size={12} color={c.accentBtn}/>}</DItem>)}</div>}</div></div>
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Context scope</div><Radio selected={sendScope==="full"} label="Full note + all comments" onClick={()=>setSendScope("full")}/><Radio selected={sendScope==="comments_only"} label="Comments & referenced portions" onClick={()=>setSendScope("comments_only")}/><Radio selected={sendScope==="select"} label="Select comments & references" onClick={()=>setSendScope("select")}/></div>
              {openC.length>0&&<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Comments ({sendScope==="select"?`${selectedCmIds.size} selected`:openC.length})</div>{openC.map(cm=><div key={cm.id} style={{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:R.sm,border:`1px solid ${sendScope==="select"&&selectedCmIds.has(cm.id)?c.accentBtn+"50":c.borderLight}`,marginBottom:3,backgroundColor:sendScope==="select"&&selectedCmIds.has(cm.id)?c.accentBtn+"06":c.bgPanelAlt,cursor:sendScope==="select"?"pointer":"default"}} onClick={()=>{if(sendScope==="select")toggleCmSelect(cm.id)}}>{sendScope==="select"&&<input type="checkbox" checked={selectedCmIds.has(cm.id)} readOnly style={{width:12,height:12,accentColor:c.accentBtn,flexShrink:0}}/>}<div style={{flex:1,minWidth:0,fontSize:10,color:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{cm.body}</div></div>)}</div>}
              <div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Output mode</div><Radio selected={outputMode==="respond_in_chat"} label="Respond in chat" desc="Opens chat with context." onClick={()=>setOutputMode("respond_in_chat")}/><Radio selected={outputMode==="send_with_instructions"} label="Send with instructions" desc="Agent processes and produces result." onClick={()=>setOutputMode("send_with_instructions")}/></div>
              {outputMode==="send_with_instructions"&&<><div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Result format</div><Radio selected={subMode==="tracked_changes"} label="Apply as tracked changes" onClick={()=>setSubMode("tracked_changes")}/><Radio selected={subMode==="revised_copy"} label="Create revised copy" onClick={()=>setSubMode("revised_copy")}/><Radio selected={subMode==="respond_in_comments"} label="Respond in comments" desc="Agent replies to each comment." onClick={()=>setSubMode("respond_in_comments")}/></div><div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textPri,marginBottom:5}}>Instruction <span style={{color:c.error}}>*</span></div><textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder="Tell the agent… (type @Elnor)" style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${instruction.trim()?c.border:c.warn+"60"}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:50,resize:"vertical"}}/>{!instruction.trim()&&<div style={{fontSize:9,color:c.warn,marginTop:3}}>Required</div>}</div></>}
              {outputMode==="respond_in_chat"&&<div style={{marginBottom:12}}><div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:5}}>Message (optional)</div><textarea value={instruction} onChange={e=>setInstruction(e.target.value)} placeholder="Optional…" style={{width:"100%",padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:44,resize:"vertical"}}/></div>}
              <div style={{fontSize:9,color:c.textTer}}>Reference: note:n1 included automatically.</div>
            </div><div style={{padding:"10px 12px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,display:"flex",gap:6}}><Btn primary disabled={outputMode==="send_with_instructions"&&!instruction.trim()} onClick={handleSend} style={{flex:1,justifyContent:"center"}}><I.Spark size={12} color="#fff"/>{outputMode==="respond_in_chat"?"Open in Chat":`Send to ${agent.name}`}</Btn><Btn ghost onClick={()=>setRightOpen(false)}>Cancel</Btn></div></>}
          </div>}
        </div>
      </div>

      {/* ═══ CHAT INDICATOR STRIP ═══ */}
      <div style={{width:40,borderLeft:`1px solid ${c.border}`,backgroundColor:c.bgPanel,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:12,gap:8,flexShrink:0}}>
        <div style={{writingMode:"vertical-rl",fontSize:10,fontWeight:600,color:c.accentBtn,letterSpacing:".05em",cursor:"pointer",padding:"8px 4px"}}>CHAT →</div>
        <Dot color={c.green} size={6}/>
        <div style={{fontSize:8,color:c.textTer,writingMode:"vertical-rl"}}>Henderson</div>
      </div>
    </div>
  );
}