Q_UNIFIED_WORKSPACE_V1.jsx
Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_UNIFIED_WORKSPACE_V1.jsx
import { useState, useRef, useEffect, useCallback } from "react";
const font={sans:"'Söhne','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif",mono:"'SF Mono','Cascadia Code','Fira Code',monospace"};
const R={sm:"6px",md:"10px",full:"9999px"};
const c={bgApp:"#F8F8F6",bgPanel:"#FFFFFF",bgPanelAlt:"#F9FAFB",bgCard:"#FFFFFF",bgInput:"#EFF1F3",bgSidebar:"#131820",textPri:"#1A1D21",textSec:"#5E6570",textTer:"#8B919A",accentBtn:"#31588c",warn:"#D97706",error:"#B04040",border:"#E0E2E5",borderLight:"#ECEEF0",green:"#2E8B57",agentAv:"#a1a7aa",borderDark:"#263040",incognito:"#3D2E5C",incognitoBg:"#2A1F3D",tabBg:"#dee1e5"};
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={ArrowL:p=><Ic {...p} d="M19 12H5 M12 19l-7-7 7-7"/>,ArrowR:p=><Ic {...p} d="M5 12h14 M12 5l7 7-7 7"/>,Refresh:p=><Ic {...p} d="M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0114.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0020.49 15"/>,Star:p=><Ic {...p} d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>,Lock:p=><Ic {...p} d="M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2z M7 11V7a5 5 0 0110 0v4"/>,X:p=><Ic {...p} d="M18 6L6 18 M6 6l12 12"/>,Search:p=><Ic {...p} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>,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"/>,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"/>,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"/>,Globe:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M2 12h20 M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>,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"/>,ChevD:p=><Ic {...p} d="M6 9l6 6 6-6"/>,ChevR:p=><Ic {...p} d="M9 18l6-6-6-6"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2h6l-1 7h4l-7 8 1-5H8l1-10z"/>,Download:p=><Ic {...p} d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4 M7 10l5 5 5-5 M12 15V3"/>,Book:p=><Ic {...p} d="M4 19.5A2.5 2.5 0 016.5 17H20 M4 19.5A2.5 2.5 0 014 17V5a2 2 0 012-2h14v14"/>,Scissors:p=><Ic {...p} d="M20 4L8.12 15.88 M14.47 14.48L20 20 M8.12 8.12L12 12 M6 3a3 3 0 100 6 3 3 0 000-6z M6 15a3 3 0 100 6 3 3 0 000-6z"/>,Plus:p=><Ic {...p} d="M12 5v14 M5 12h14"/>,Sun:p=><Ic {...p} d="M12 17a5 5 0 100-10 5 5 0 000 10z M12 1v2 M12 21v2 M4.22 4.22l1.42 1.42 M18.36 18.36l1.42 1.42 M1 12h2 M21 12h2 M4.22 19.78l1.42-1.42 M18.36 5.64l1.42-1.42"/>,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.68a1.65 1.65 0 001-1.51V3a2 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 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>,Columns:p=><Ic {...p} d="M12 3h7a2 2 0 012 2v14a2 2 0 01-2 2h-7m0-18H5a2 2 0 00-2 2v14a2 2 0 002 2h7m0-18v18"/>,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 2z"/>,Grid:p=><Ic {...p} d="M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z"/>,Check:p=><Ic {...p} d="M20 6L9 17l-5-5"/>,Clock:p=><Ic {...p} d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M12 6v6l4 2"/>,Send:p=><Ic {...p} d="M22 2L11 13 M22 2l-7 20-4-9-9-4 20-7z"/>,Eye:p=><Ic {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>};
const Dot=({color,size=8})=><span style={{display:"inline-block",width:size,height:size,borderRadius:"50%",backgroundColor:color,flexShrink:0}}/>;
const Btn=({children,primary,small,onClick,style:s})=><button onClick={onClick} style={{padding:small?"2px 8px":"5px 14px",borderRadius:R.sm,border:primary?"none":`1px solid ${c.border}`,backgroundColor:primary?c.accentBtn:"transparent",color:primary?"#fff":c.textSec,fontSize:small?11:12.5,fontWeight:primary?550:450,cursor:"pointer",fontFamily:font.sans,display:"flex",alignItems:"center",gap:5,height:small?22:28,...s}}>{children}</button>;
const TBtn=({icon,title,active,onClick,label,disabled})=><button onClick={onClick} title={title} disabled={disabled} 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:disabled?"not-allowed":"pointer",display:"flex",alignItems:"center",gap:4,color:active?c.accentBtn:disabled?c.textTer:c.textSec,fontFamily:font.sans,fontSize:10.5,fontWeight:active?600:450,height:26,opacity:disabled?.4:1}} onMouseEnter={e=>{if(!active&&!disabled)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{e.currentTarget.style.backgroundColor=active?c.accentBtn+"08":"transparent"}}>{icon}{label&&<span>{label}</span>}</button>;
const Sep=()=><div style={{width:1,height:18,backgroundColor:c.borderLight,margin:"0 3px",flexShrink:0}}/>;
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 Toast=({msg,onDone})=>{useEffect(()=>{const t=setTimeout(onDone,2500);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>};
// === TAB ===
const Tab=({title,icon,active,type,pinned,onClose,onClick})=>{
const typeColors={note:"#31588c",viewer:"#2E8B57",web:"#8B5E00",clip:"#7C3AED"};
return <div onClick={onClick} style={{display:"flex",alignItems:"center",gap:5,padding:pinned?"0 6px":"0 10px",height:30,minWidth:pinned?36:100,maxWidth:pinned?36:200,borderRadius:"6px 6px 0 0",backgroundColor:active?c.bgPanel:"#e8eaed",borderBottom:active?`2px solid ${typeColors[type]||c.accentBtn}`:`1px solid ${c.border}`,cursor:"pointer",flexShrink:1,overflow:"hidden",transition:"background 0.1s"}}>
<span style={{fontSize:11,flexShrink:0}}>{icon}</span>
{!pinned&&<span style={{flex:1,fontSize:11,fontWeight:active?550:400,color:active?c.textPri:c.textSec,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:font.sans}}>{title}</span>}
{!pinned&&<span onClick={e=>{e.stopPropagation();onClose?.()}} style={{cursor:"pointer",display:"flex",opacity:active?1:0.5,padding:2,borderRadius:3,flexShrink:0}} onMouseEnter={e=>e.currentTarget.style.opacity="1"} onMouseLeave={e=>e.currentTarget.style.opacity=active?"1":"0.5"}><I.X size={9} color={c.textTer}/></span>}
</div>
};
// === NEW TAB DROPDOWN ===
const NewTabMenu=({onPick,onClose})=>(
<div style={{position:"absolute",top:32,left:0,zIndex:999,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,borderRadius:R.sm,boxShadow:"0 4px 16px rgba(0,0,0,0.12)",padding:4,minWidth:160}}>
{[{icon:"📝",label:"New Note",type:"note"},{icon:"📄",label:"Open Document",type:"viewer"},{icon:"🌐",label:"New Web Tab",type:"web"}].map((item,i)=><div key={i} onClick={()=>{onPick(item.type);onClose()}} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 10px",borderRadius:R.sm,cursor:"pointer",fontSize:12,fontFamily:font.sans}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><span>{item.icon}</span>{item.label}</div>)}
</div>
);
// === NOTE CONTENT ===
const NoteContent=({flash})=>(
<div style={{padding:"24px 36px 60px",maxWidth:780,margin:"0 auto"}}>
<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4}}>
<I.Sun size={16} color={c.warn}/>
<span style={{fontSize:10,color:c.textTer,fontWeight:500}}>Pinned · Auto-updating</span>
</div>
<h1 style={{fontSize:22,fontWeight:700,marginBottom:16,color:c.textPri,fontFamily:font.sans,outline:"none"}} contentEditable suppressContentEditableWarning>Today — Thursday, April 3</h1>
{/* TaskList Block */}
<div style={{border:`1px solid ${c.borderLight}`,borderRadius:R.sm,marginBottom:8,overflow:"hidden"}}>
<div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>
<span style={{cursor:"grab",color:c.textTer}}>⠿</span>
<I.Check size={12} color={c.textSec}/>
<span style={{fontSize:12,fontWeight:600,flex:1}}>Priority Tasks</span>
<span style={{fontSize:10,color:c.textTer}}>2 of 5</span>
</div>
<div style={{padding:"6px 10px"}}>
{[{text:"Finalize Sanli MIL exhibits",done:true,due:"Today"},{text:"Review Christensen expert report",done:false,due:"Apr 4"},{text:"Draft Henderson opposition outline",done:false,due:"Apr 5"},{text:"File Paramount trial brief",done:false,due:"May 1"}].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"4px 0",fontSize:12.5}}>
<input type="checkbox" defaultChecked={t.done} style={{accentColor:c.accentBtn}}/>
<span style={{flex:1,textDecoration:t.done?"line-through":"none",color:t.done?c.textTer:c.textPri}}>{t.text}</span>
<span style={{fontSize:10,color:t.due==="Today"?c.warn:c.textTer}}>{t.due}</span>
</div>)}
</div>
</div>
{/* ActivityFeed Block */}
<div style={{border:`1px solid ${c.borderLight}`,borderRadius:R.sm,marginBottom:8,overflow:"hidden"}}>
<div style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",backgroundColor:c.bgPanelAlt,borderBottom:`1px solid ${c.borderLight}`}}>
<span style={{cursor:"grab",color:c.textTer}}>⠿</span>
<I.Spark size={12} color={c.warn}/>
<span style={{fontSize:12,fontWeight:600,flex:1}}>Agent Activity</span>
<span style={{fontSize:10,color:c.green}}>Auto-updating</span>
</div>
<div style={{padding:"6px 10px",maxHeight:100,overflowY:"auto"}}>
{[{text:"Elnor completed Henderson cite check — 3 issues flagged",time:"9:12 AM",dot:c.warn},{text:"Elnor indexed Sanli Expert Report (8.4 MB PDF)",time:"8:45 AM",dot:c.green},{text:"Email watcher: New filing in BC587659",time:"7:30 AM",dot:c.accentBtn}].map((item,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"3px 0",fontSize:11.5}}>
<Dot color={item.dot} size={5}/>
<span style={{flex:1,color:c.textPri}}>{item.text}</span>
<span style={{fontSize:10,color:c.textTer,flexShrink:0}}>{item.time}</span>
</div>)}
</div>
</div>
{/* Text block */}
<div style={{padding:"8px 0",fontSize:14,lineHeight:1.7,color:c.textPri}} contentEditable suppressContentEditableWarning>
<p>Meeting notes from yesterday's call with Danny Christensen re: expert testimony strategy. Key points:</p>
<p>1. Christensen will testify on signage valuation methodology. Need to prepare him for cross on the willing-buyer framework.</p>
<p>2. Sanli's 18% discount rate is the weakest point in their damages case. Focus MIL on this.</p>
</div>
</div>
);
// === VIEWER CONTENT (PDF) ===
const ViewerContent=({flash})=>(
<div style={{flex:1,display:"flex",flexDirection:"column"}}>
{/* Viewer toolbar */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,flexShrink:0}}>
<span style={{fontSize:11,fontWeight:600,color:c.textPri,flex:1,display:"flex",alignItems:"center",gap:5}}>📄 Sanli_Expert_Report.pdf <span style={{fontSize:9,color:c.textTer,fontWeight:400}}>PDF · 42 pages · 8.4 MB</span></span>
<TBtn icon={<I.Copy size={12}/>} title="Copy"/>
<TBtn icon={<I.Save size={12}/>} label="Save As…" onClick={()=>flash("Save options…")}/>
<TBtn icon={<I.FileText size={12}/>} label="To Note" onClick={()=>flash("Converting to note…")}/>
<Sep/>
<TBtn label="Markup" active/>
<TBtn label="Review ▾"/>
<TBtn label="v3 ▾"/>
</div>
{/* Simulated PDF */}
<div style={{flex:1,overflowY:"auto",backgroundColor:"#f0f0ea",padding:20,display:"flex",justifyContent:"center"}}>
<div style={{width:612,backgroundColor:"#fff",boxShadow:"0 2px 12px rgba(0,0,0,0.1)",padding:"60px 72px",fontFamily:"'Times New Roman',serif",fontSize:13,lineHeight:1.8,color:"#222",minHeight:700}}>
<div style={{textAlign:"center",marginBottom:30}}>
<div style={{fontSize:16,fontWeight:700,marginBottom:8}}>EXPERT REPORT OF DR. MEHMET SANLI</div>
<div style={{fontSize:12,color:"#666"}}>Paramount Contractors v. City of Los Angeles · Case No. BC587659</div>
<div style={{fontSize:12,color:"#666"}}>February 28, 2026</div>
</div>
<h3 style={{fontSize:14,fontWeight:700,margin:"20px 0 8px"}}>I. QUALIFICATIONS</h3>
<p>I am a Professor of Economics at the University of Southern California and have served as a consulting and testifying expert in over 60 matters involving economic damages, valuation, and financial analysis. My curriculum vitae is attached as Exhibit 1.</p>
<h3 style={{fontSize:14,fontWeight:700,margin:"20px 0 8px"}}>II. SCOPE OF ENGAGEMENT</h3>
<p>I was retained by counsel for the City of Los Angeles to analyze and evaluate the economic damages claimed by Plaintiff Paramount Contractors & Developers, Inc. in connection with the alleged impairment of signage permit rights.</p>
<h3 style={{fontSize:14,fontWeight:700,margin:"20px 0 8px"}}>III. SUMMARY OF OPINIONS</h3>
<p>Based on my analysis, it is my opinion that Plaintiff's claimed damages of $4.2 million are speculative and overstated. Applying standard economic valuation methodologies, I calculate the reasonable economic loss to be approximately <span style={{backgroundColor:"#fff3cd",padding:"0 2px"}}>$380,000</span>.</p>
<p style={{marginTop:12,fontSize:11,color:"#999",textAlign:"center"}}>— Page 1 of 42 —</p>
</div>
</div>
</div>
);
// === WEB CONTENT ===
const WebContent=({flash,onSelect})=>{
const [sel,setSel]=useState(null);
const handleUp=()=>{const s=window.getSelection();if(s&&s.toString().trim().length>3){const r=s.getRangeAt(0).getBoundingClientRect();setSel({text:s.toString(),x:r.left,y:r.top-45});onSelect?.(s.toString())}else setSel(null)};
return <div style={{flex:1,display:"flex",flexDirection:"column"}}>
{/* URL bar */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 8px",borderBottom:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanel,flexShrink:0}}>
<button style={{width:26,height:26,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textSec}}><I.ArrowL size={14}/></button>
<button style={{width:26,height:26,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.ArrowR size={14}/></button>
<button style={{width:26,height:26,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textSec}}><I.Refresh size={13}/></button>
<div style={{flex:1,display:"flex",alignItems:"center",gap:6,padding:"4px 12px",borderRadius:R.full,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`}}>
<I.Lock size={11} color={c.green}/>
<span style={{fontSize:12,color:c.textPri,fontFamily:font.sans}}>ecf.cacd.uscourts.gov/doc1/031139485672</span>
</div>
<button onClick={()=>flash("Bookmarked")} style={{width:26,height:26,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Star size={14} color={c.warn}/></button>
<Sep/>
<TBtn icon={<I.Book size={12}/>} title="Reader Mode"/>
<TBtn icon={<I.Save size={12}/>} label="Save"/>
<TBtn icon={<I.Scissors size={12}/>} title="Clip" onClick={()=>{flash("Clipped to Session Notes")}}/>
</div>
{/* Page */}
<div style={{flex:1,overflowY:"auto",backgroundColor:"#fff"}} onMouseUp={handleUp}>
{sel&&<div style={{position:"fixed",left:Math.min(sel.x,window.innerWidth-440),top:sel.y,zIndex:999,display:"flex",gap:3,padding:"4px 6px",borderRadius:R.sm,backgroundColor:c.bgCard,border:`1px solid ${c.border}`,boxShadow:"0 4px 16px rgba(0,0,0,0.12)"}}>
<TBtn icon={<I.MsgCircle size={12}/>} label="Comment" onClick={()=>setSel(null)}/>
<Sep/>
<TBtn icon={<I.Spark size={12}/>} label="Ask Elnor" onClick={()=>setSel(null)}/>
<TBtn label="Summarize" onClick={()=>setSel(null)}/>
<Sep/>
<TBtn icon={<I.Scissors size={12}/>} label="Clip" onClick={()=>{setSel(null);flash("Clipped")}}/>
<TBtn icon={<I.X size={10}/>} onClick={()=>setSel(null)}/>
</div>}
<div style={{fontFamily:"'Georgia','Times New Roman',serif",color:"#222",lineHeight:1.7,fontSize:14.5,padding:"20px 40px 60px",maxWidth:900,margin:"0 auto"}}>
<div style={{textAlign:"center",borderBottom:"2px solid #333",paddingBottom:16,marginBottom:20}}>
<div style={{fontSize:11,color:"#666",letterSpacing:".1em",textTransform:"uppercase"}}>United States District Court — Central District of California</div>
<div style={{fontSize:18,fontWeight:700,margin:"8px 0 4px"}}>PARAMOUNT CONTRACTORS & DEVELOPERS, INC. v. CITY OF LOS ANGELES, et al.</div>
<div style={{fontSize:13,color:"#888"}}>Case No. BC587659 | Filed: March 15, 2026</div>
</div>
<h2 style={{fontSize:16,fontWeight:700,margin:"20px 0 8px",fontFamily:font.sans}}>PLAINTIFF'S MOTION IN LIMINE NO. 3</h2>
<p>Plaintiff Paramount Contractors & Developers, Inc. respectfully moves this Court for an order excluding the expert testimony and report of Dr. Mehmet Sanli on the grounds that his opinions are unreliable and based on flawed methodology.</p>
<p>Dr. Sanli's methodology suffers from three fundamental defects: (1) he improperly applies a "willing buyer-willing seller" valuation framework; (2) he fails to account for the City's own valuation of the permits; and (3) his discount rate of 18% is unsupported by comparable transaction data.</p>
<div style={{margin:"20px 0",padding:"14px 18px",backgroundColor:"#f7f7f0",border:"1px solid #e0ddd0",borderRadius:4}}>
<div style={{fontSize:12,fontWeight:600,color:"#666",marginBottom:6,fontFamily:font.sans}}>EXHIBIT A — Damages Comparison</div>
<table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}><thead><tr style={{borderBottom:"2px solid #ccc"}}><th style={{textAlign:"left",padding:"5px 8px",fontFamily:font.sans,fontSize:11}}>Category</th><th style={{textAlign:"right",padding:"5px 8px",fontFamily:font.sans,fontSize:11}}>Paramount</th><th style={{textAlign:"right",padding:"5px 8px",fontFamily:font.sans,fontSize:11}}>Sanli</th></tr></thead><tbody>{[["Lost signage revenue","$2,840,000","$210,000"],["Permit value","$980,000","$120,000"],["Consequential","$380,000","$50,000"]].map(([cat,p,s],i)=><tr key={i} style={{borderBottom:"1px solid #eee"}}><td style={{padding:"5px 8px"}}>{cat}</td><td style={{textAlign:"right",padding:"5px 8px"}}>{p}</td><td style={{textAlign:"right",padding:"5px 8px"}}>{s}</td></tr>)}<tr style={{fontWeight:700,borderTop:"2px solid #333"}}><td style={{padding:"5px 8px"}}>Total</td><td style={{textAlign:"right",padding:"5px 8px"}}>$4,200,000</td><td style={{textAlign:"right",padding:"5px 8px"}}>$380,000</td></tr></tbody></table>
</div>
</div>
</div>
</div>
};
// === CLIPS NOTE CONTENT ===
const ClipsContent=()=>(
<div style={{padding:"20px 32px 60px",maxWidth:700,margin:"0 auto"}}>
<div style={{display:"flex",alignItems:"center",gap:6,marginBottom:12}}>
<I.Scissors size={14} color="#7C3AED"/>
<span style={{fontSize:10,color:"#7C3AED",fontWeight:600}}>SESSION CLIPPINGS · Apr 3, 2026</span>
</div>
<h1 style={{fontSize:18,fontWeight:700,marginBottom:16,fontFamily:font.sans}} contentEditable suppressContentEditableWarning>Paramount — Sanli Research Clips</h1>
{[
{text:"Dr. Sanli's methodology suffers from three fundamental defects: (1) he improperly applies a \"willing buyer-willing seller\" valuation framework; (2) he fails to account for the City's own valuation of the permits; and (3) his discount rate of 18% is unsupported.",source:"Paramount MIL No. 3 — ecf.cacd.uscourts.gov",time:"10:14 AM"},
{text:"I calculate the reasonable economic loss to be approximately $380,000.",source:"Sanli Expert Report — p.1",time:"10:18 AM"},
].map((clip,i)=><div key={i} style={{marginBottom:14,paddingLeft:12,borderLeft:`3px solid #7C3AED40`}}>
<blockquote style={{margin:0,fontSize:13,lineHeight:1.6,color:c.textPri,fontStyle:"italic"}}>"{clip.text}"</blockquote>
<div style={{fontSize:10,color:c.textTer,marginTop:4,display:"flex",gap:8}}><span>{clip.source}</span><span>{clip.time}</span></div>
</div>)}
<div style={{marginTop:16,padding:"8px 12px",borderRadius:R.sm,border:`1px dashed ${c.borderLight}`,color:c.textTer,fontSize:12,cursor:"text"}} contentEditable suppressContentEditableWarning>Add notes here...</div>
</div>
);
// === MAIN ===
export default function QUnifiedWorkspace(){
const [activeTab,setActiveTab]=useState("today");
const [browserOpen,setBrowserOpen]=useState(true);
const [browserView,setBrowserView]=useState("notes"); // notes | docs | web
const [rightOpen,setRightOpen]=useState(false);
const [rightTab,setRightTab]=useState("comments");
const [toast,setToast]=useState(null);
const [showNewTab,setShowNewTab]=useState(false);
const [selectedText,setSelectedText]=useState("");
const [rightWidth,setRightWidth]=useState(280);
const flash=msg=>setToast(msg);
const tabs=[
{id:"today",title:"Today — Apr 3",icon:"☀️",type:"note"},
{id:"sanli",title:"Sanli Expert Report",icon:"📄",type:"viewer"},
{id:"mil3",title:"Paramount MIL No. 3",icon:"🌐",type:"web"},
{id:"clips",title:"Session Clips",icon:"✂️",type:"clip"},
];
const tab=tabs.find(t=>t.id===activeTab);
// Auto-switch browser view based on active tab
useEffect(()=>{
if(tab?.type==="note"||tab?.type==="clip")setBrowserView("notes");
else if(tab?.type==="viewer")setBrowserView("docs");
else if(tab?.type==="web")setBrowserView("web");
},[activeTab]);
const comments=[
{id:"c1",author:"You",color:c.accentBtn,text:"Need to verify Sanli's discount rate against comparable transactions",anchor:"discount rate of 18%",time:"10:22 AM"},
{id:"c2",author:"Elnor",color:c.agentAv,text:"I found 3 comparable transactions. Discount rates ranged 8-12%. Sanli's 18% is an outlier. This supports the MIL argument on unreliable methodology.",anchor:"discount rate of 18%",time:"10:23 AM"},
];
return (
<div style={{display:"flex",width:"100%",height:"100vh",fontFamily:font.sans,color:c.textPri,backgroundColor:c.bgApp}}>
<style>{`*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}*:hover::-webkit-scrollbar-thumb{background:#d1d5db}::selection{background:${c.accentBtn}22}`}</style>
{toast&&<Toast msg={toast} onDone={()=>setToast(null)}/>}
{/* === Q APP LEFT NAV (collapsed) === */}
<div style={{width:44,flexShrink:0,backgroundColor:c.bgSidebar,borderRight:`1px solid ${c.borderDark}`,display:"flex",flexDirection:"column",alignItems:"center",paddingTop:10,gap:2}}>
<div style={{width:26,height:26,borderRadius:R.sm,backgroundColor:c.accentBtn,color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700,marginBottom:6}}>Q</div>
{["Home","Inbox","Chat","Tasks","Mem"].map((n,i)=><button key={i} style={{width:32,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:i===0?"#ffffff12":"transparent",color:"#666",display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,fontFamily:font.sans}}>{n}</button>)}
<div style={{width:24,height:1,backgroundColor:"#333",margin:"4px 0"}}/>
<button title="Workspace" style={{width:32,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"#ffffff18",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,fontWeight:600,fontFamily:font.sans}}>Work</button>
</div>
{/* === BROWSER COLUMN === */}
{browserOpen&&<div style={{width:250,flexShrink:0,backgroundColor:c.bgPanel,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column"}}>
{/* Browser header with view switcher + settings */}
<div style={{padding:"6px 8px",borderBottom:`1px solid ${c.borderLight}`,display:"flex",alignItems:"center",gap:2}}>
{["notes","docs","web"].map(v=><button key={v} onClick={()=>setBrowserView(v)} style={{padding:"3px 8px",borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:browserView===v?c.accentBtn+"10":"transparent",color:browserView===v?c.accentBtn:c.textTer,fontSize:10,fontWeight:browserView===v?650:400,fontFamily:font.sans}} onMouseEnter={e=>{if(browserView!==v)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(browserView!==v)e.currentTarget.style.backgroundColor="transparent"}}>{v==="notes"?"Notes":v==="docs"?"Docs":"Web"}</button>)}
<span style={{flex:1}}/>
<button onClick={()=>setBrowserOpen(false)} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer,padding:2}}><I.X size={11}/></button>
</div>
{/* Search */}
<div style={{padding:"6px 8px"}}><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={11} color={c.textTer}/><input placeholder={browserView==="web"?"Search bookmarks & history":"Search"} style={{border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:font.sans,outline:"none",color:c.textPri,width:"100%"}}/></div></div>
{/* View-specific content */}
<div style={{flex:1,overflowY:"auto",padding:"4px 8px"}}>
{browserView==="notes"&&<>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",padding:"4px 4px 6px",letterSpacing:".04em"}}>Folders</div>
{[{name:"All Notes",count:24,active:false},{name:"📌 Daily Notes",count:12,active:false},{name:"Paramount",count:8,active:true},{name:"Henderson",count:6,active:false},{name:"Session Notes",count:3,active:false,indent:false},{name:"Templates",count:2,active:false}].map((f,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:5,padding:"4px 6px",borderRadius:R.sm,cursor:"pointer",fontSize:11.5,color:f.active?c.accentBtn:c.textPri,fontWeight:f.active?600:400,backgroundColor:f.active?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(!f.active)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(!f.active)e.currentTarget.style.backgroundColor="transparent"}}><I.Folder size={10} color={f.active?c.accentBtn:c.textTer}/><span style={{flex:1}}>{f.name}</span><span style={{fontSize:9,color:c.textTer}}>{f.count}</span></div>)}
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",padding:"12px 4px 6px",letterSpacing:".04em"}}>Recent Notes</div>
{["Today — Apr 3","Henderson opposition draft","Christensen prep notes","Sanli MIL research","Session Clips — Apr 3"].map((n,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:5,padding:"4px 6px",borderRadius:R.sm,cursor:"pointer",fontSize:11.5,color:i===0?c.accentBtn:c.textPri,fontWeight:i===0?600:400,backgroundColor:i===0?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(i)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(i)e.currentTarget.style.backgroundColor="transparent"}} onClick={()=>flash(`Opening: ${n}`)}><I.FileText size={10} color={i===0?c.accentBtn:c.textTer}/>{n}</div>)}
</>}
{browserView==="docs"&&<>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",padding:"4px 4px 6px",letterSpacing:".04em"}}>Recent Documents</div>
{["Sanli Expert Report.pdf","Paramount MIL No. 3.pdf","Henderson MTD Draft.docx","Christensen CV.pdf","LAMC § 14.4.4.pdf"].map((d,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:5,padding:"4px 6px",borderRadius:R.sm,cursor:"pointer",fontSize:11.5,color:i===0?c.accentBtn:c.textPri,fontWeight:i===0?600:400,backgroundColor:i===0?c.accentBtn+"08":"transparent"}} onMouseEnter={e=>{if(i)e.currentTarget.style.backgroundColor=c.bgInput}} onMouseLeave={e=>{if(i)e.currentTarget.style.backgroundColor="transparent"}} onClick={()=>flash(`Opening: ${d}`)}><span style={{fontSize:10}}>📄</span>{d}</div>)}
</>}
{browserView==="web"&&<>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",padding:"4px 4px 6px",letterSpacing:".04em"}}>Bookmarks</div>
{[{name:"Legal Research",items:["PACER — CACD","Westlaw","CM/ECF","EDGAR"]},{name:"Clients",items:["Henderson Portal","Paramount SharePoint"]}].map((f,i)=><div key={i} style={{marginBottom:6}}>
<div style={{display:"flex",alignItems:"center",gap:4,padding:"4px 6px",fontSize:11,fontWeight:600,color:c.textSec,cursor:"pointer"}}><I.ChevD size={9}/><I.Star size={9} color={c.warn}/>{f.name}</div>
{f.items.map((item,j)=><div key={j} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 6px 3px 22px",borderRadius:R.sm,cursor:"pointer",fontSize:11,color:c.textPri}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Globe size={9} color={c.textTer}/>{item}</div>)}
</div>)}
<div style={{fontSize:10,fontWeight:600,color:c.textTer,textTransform:"uppercase",padding:"8px 4px 6px",letterSpacing:".04em"}}>Recent Pages</div>
{["Paramount MIL No. 3","SEC — Brooge Energy","Christensen CV"].map((p,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:5,padding:"3px 6px",borderRadius:R.sm,cursor:"pointer",fontSize:11,color:c.textPri}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Globe size={9} color={c.textTer}/>{p}</div>)}
</>}
</div>
</div>}
{/* === WORKSPACE === */}
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* TOP BAR: tabs + actions */}
<div style={{display:"flex",alignItems:"flex-end",backgroundColor:c.tabBg,borderBottom:`1px solid ${c.border}`,flexShrink:0}}>
{/* Browser toggle */}
<button onClick={()=>setBrowserOpen(!browserOpen)} title="Toggle browser (⌘B)" style={{width:32,height:30,border:"none",cursor:"pointer",backgroundColor:browserOpen?"#ccc":"transparent",color:browserOpen?c.textPri:c.textTer,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"6px 6px 0 0",marginLeft:4,marginBottom:0}} onMouseEnter={e=>{if(!browserOpen)e.currentTarget.style.backgroundColor="#d5d8dc"}} onMouseLeave={e=>{if(!browserOpen)e.currentTarget.style.backgroundColor="transparent"}}><I.Columns size={13}/></button>
<div style={{width:6}}/>
{/* Tabs */}
<div style={{display:"flex",gap:1,flex:1,alignItems:"flex-end",minWidth:0,overflow:"hidden"}}>
{tabs.map(t=><Tab key={t.id} title={t.title} icon={t.icon} type={t.type} active={t.id===activeTab} onClick={()=>setActiveTab(t.id)} onClose={()=>flash(`Closed: ${t.title}`)}/>)}
{/* + button */}
<div style={{position:"relative"}}>
<button onClick={()=>setShowNewTab(!showNewTab)} style={{width:28,height:28,borderRadius:"6px 6px 0 0",border:"none",backgroundColor:"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer,marginBottom:1}} onMouseEnter={e=>e.currentTarget.style.backgroundColor="#d0d3d8"} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Plus size={13}/></button>
{showNewTab&&<NewTabMenu onPick={t=>flash(`New ${t} tab`)} onClose={()=>setShowNewTab(false)}/>}
</div>
</div>
{/* Right actions */}
<div style={{display:"flex",alignItems:"center",gap:3,padding:"0 8px 4px",flexShrink:0}}>
<TBtn icon={<I.MsgCircle size={12}/>} label="2" active={rightOpen&&rightTab==="comments"} onClick={()=>{if(rightOpen&&rightTab==="comments")setRightOpen(false);else{setRightOpen(true);setRightTab("comments")}}}/>
<button onClick={()=>{if(rightOpen&&rightTab==="send")setRightOpen(false);else{setRightOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(rightOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(rightOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:24}}>
<I.Spark size={11}/>Ask Elnor
</button>
<Sep/>
<button title="Settings" style={{width:24,height:24,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}}><I.Settings size={13}/></button>
</div>
</div>
{/* CONTENT + RIGHT PANEL */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
{/* MAIN CONTENT — switches by tab type */}
<div style={{flex:1,overflowY:"auto",display:"flex",flexDirection:"column"}}>
{tab?.type==="note"&&<NoteContent flash={flash}/>}
{tab?.type==="viewer"&&<ViewerContent flash={flash}/>}
{tab?.type==="web"&&<WebContent flash={flash} onSelect={setSelectedText}/>}
{tab?.type==="clip"&&<ClipsContent/>}
</div>
{/* RIGHT PANEL (resizable concept — shown at rightWidth) */}
{rightOpen&&<div style={{width:rightWidth,minWidth:240,maxWidth:450,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt}}>
{/* Resize handle */}
<div style={{position:"absolute",left:-3,top:0,bottom:0,width:6,cursor:"col-resize",zIndex:10}} title="Drag to resize"/>
{/* Tabs */}
<div style={{display:"flex",borderBottom:`1px solid ${c.borderLight}`,flexShrink:0}}>
<button onClick={()=>setRightTab("comments")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="comments"?c.bgPanelAlt:c.bgInput,color:rightTab==="comments"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="comments"?650:450,fontFamily:font.sans,borderBottom:rightTab==="comments"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.MsgCircle size={10}/>Comments</button>
<button onClick={()=>setRightTab("send")} style={{flex:1,padding:"7px 0",border:"none",cursor:"pointer",backgroundColor:rightTab==="send"?c.bgPanelAlt:c.bgInput,color:rightTab==="send"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="send"?650:450,fontFamily:font.sans,borderBottom:rightTab==="send"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.Spark size={10}/>Ask Elnor</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:10}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,marginBottom:8}}>OPEN ({comments.length})</div>
{comments.map(cm=><div key={cm.id} style={{marginBottom:10,borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgCard,overflow:"hidden"}}>
<div style={{borderLeft:`3px solid ${cm.color}`,padding:"8px 10px"}}>
<div style={{display:"flex",alignItems:"center",gap:5,marginBottom:4}}>
<Av letter={cm.author[0]} color={cm.color} size={16}/>
<span style={{fontSize:11,fontWeight:650,color:cm.color}}>{cm.author}</span>
<span style={{fontSize:9,color:c.textTer,marginLeft:"auto"}}>{cm.time}</span>
</div>
{cm.anchor&&<div style={{fontSize:10,color:c.textTer,fontStyle:"italic",marginBottom:4,padding:"2px 6px",backgroundColor:c.bgInput,borderRadius:3,display:"inline-block"}}>"{cm.anchor}"</div>}
<div style={{fontSize:12,lineHeight:1.5}}>{cm.text}</div>
<div style={{display:"flex",gap:6,marginTop:6,fontSize:10}}>
<span style={{color:c.textSec,cursor:"pointer"}}>Reply</span>
<span style={{color:c.textSec,cursor:"pointer"}}>Edit</span>
<span style={{color:c.textSec,cursor:"pointer"}}>Resolve</span>
<span style={{color:c.textSec,cursor:"pointer"}}>Reopen</span>
<span style={{color:c.textSec,cursor:"pointer"}}>Delete</span>
<span style={{color:c.agentAv,cursor:"pointer",display:"flex",alignItems:"center",gap:2,marginLeft:"auto"}}><I.Spark size={8}/>Send</span>
</div>
</div>
</div>)}
<div style={{marginTop:8,padding:"8px 10px",borderRadius:R.sm,border:`1px solid ${c.borderLight}`,backgroundColor:c.bgCard}}>
<textarea placeholder="Add a comment…" style={{width:"100%",border:"none",outline:"none",fontSize:12,fontFamily:font.sans,resize:"none",minHeight:36,backgroundColor:"transparent"}}/>
<div style={{display:"flex",justifyContent:"flex-end",marginTop:4}}><Btn small primary onClick={()=>flash("Comment added")}>Add</Btn></div>
</div>
</div>}
{rightTab==="send"&&<div style={{flex:1,overflowY:"auto",padding:12}}>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Agent</div>
<div style={{display:"flex",alignItems:"center",gap:6,padding:"5px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer"}}><Av letter="E" color={c.agentAv} size={16}/><span style={{flex:1,fontSize:12,fontWeight:500}}>Elnor</span><I.ChevD size={10} color={c.textTer}/></div>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Context</div>
<div style={{padding:"5px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:11,color:c.textSec}}>
<div style={{fontWeight:600,marginBottom:2}}>{tab?.title}</div>
<div>{tab?.type==="web"?"ecf.cacd.uscourts.gov · 4,200 words":tab?.type==="viewer"?"PDF · 42 pages":tab?.type==="note"?"Note · 342 words":"2 clips"}</div>
{selectedText&&<div style={{marginTop:3,padding:"3px 6px",backgroundColor:c.accentBtn+"08",borderRadius:3,color:c.accentBtn,fontSize:10}}>"{selectedText.substring(0,60)}…"</div>}
</div>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Ask</div>
<textarea placeholder="e.g., Compare this to what they argued in Henderson…" style={{width:"100%",padding:"7px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:60,resize:"vertical"}}/>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Include</div>
{[{l:"Current content + comments",on:true},{l:"Paramount project context",on:true},{l:"Session clips (2 items)",on:false},{l:"Pinned pages (1)",on:false}].map((o,i)=><label key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:11,cursor:"pointer",padding:"2px 0"}}><input type="checkbox" defaultChecked={o.on} style={{accentColor:c.accentBtn}}/>{o.l}</label>)}
</div>
<Btn primary onClick={()=>flash("Sent to Elnor")} style={{width:"100%",justifyContent:"center"}}><I.Spark size={12}/>Ask Elnor</Btn>
<div style={{fontSize:10,color:c.textTer,textAlign:"center",marginTop:6,cursor:"pointer"}}>Continue in full chat →</div>
</div>}
</div>}
</div>
{/* STATUS BAR */}
<div style={{display:"flex",alignItems:"center",gap:8,padding:"3px 10px",borderTop:`1px solid ${c.borderLight}`,backgroundColor:c.bgPanelAlt,fontSize:10,color:c.textTer,flexShrink:0}}>
<span style={{display:"flex",alignItems:"center",gap:3}}><I.Clock size={9}/>Session: 42m</span>
<span>·</span>
<span style={{display:"flex",alignItems:"center",gap:3}}><I.Scissors size={9}/>2 clips</span>
<span>·</span>
<span>4 tabs</span>
<span style={{marginLeft:"auto",cursor:"pointer"}} onClick={()=>flash("New session started")} style={{marginLeft:"auto",color:c.accentBtn,cursor:"pointer",fontSize:10}}>New Session</span>
</div>
</div>
</div>
);
}