Q_WEB BROWSER_VIEW_V1.jsx
Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_WEB BROWSER_VIEW_V1.jsx
ELNOR REPO READER TEXT MIRROR
Original path: Design Mockups/Archived Mockups/DOC20 Mockups and Design/DOC20 Archived Mockups/Q_WEB BROWSER_VIEW_V1.jsx
Source repo: /Users/OpenClaw1/Elnor/Elnor Specs
Git branch: main
Git commit: dbaa25962edc11ab30e8d4ca1715f9ae5bf77331
Generated: 2026-06-09T01:23:58.539Z
---
import { useState, useRef, useEffect } 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"};
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"/>,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"/>,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"/>,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"/>,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"/>,ExternalLink:p=><Ic {...p} d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6 M15 3h6v6 M10 14L21 3"/>,ChevD:p=><Ic {...p} d="M6 9l6 6 6-6"/>,Pin:p=><Ic {...p} d="M12 17v5 M9 2h6l-1 7h4l-7 8 1-5H8l1-10z"/>,};
const Dot=({color,size=8})=><span style={{display:"inline-block",width:size,height:size,borderRadius:"50%",backgroundColor:color,flexShrink:0}}/>;
const Btn=({children,primary,ghost,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,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>};
// Simulated web page content (PACER-like)
const WebPage=({onSelect})=>{
const [selected,setSelected]=useState(null);
const handleMouseUp=()=>{
const sel=window.getSelection();
if(sel&&sel.toString().trim().length>3){
const rect=sel.getRangeAt(0).getBoundingClientRect();
setSelected({text:sel.toString(),x:rect.left,y:rect.top-45,w:rect.width});
onSelect&&onSelect(sel.toString());
}else{setSelected(null)}
};
return <div onMouseUp={handleMouseUp} style={{fontFamily:"'Georgia','Times New Roman',serif",color:"#222",lineHeight:1.7,fontSize:14.5,padding:"20px 40px 60px",maxWidth:900,margin:"0 auto",position:"relative",userSelect:"text"}}>
{selected&&<div style={{position:"fixed",left:Math.min(selected.x,window.innerWidth-420),top:selected.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={()=>{setSelected(null)}}/>
<Sep/>
<div style={{display:"flex",alignItems:"center",gap:2,padding:"0 4px"}}><Dot color={c.agentAv} size={7}/></div>
<TBtn icon={<I.Spark size={12}/>} label="Ask Elnor" onClick={()=>{setSelected(null)}}/>
<TBtn label="Rewrite" onClick={()=>{setSelected(null)}}/>
<TBtn label="Summarize" onClick={()=>{setSelected(null)}}/>
<Sep/>
<TBtn icon={<I.X size={10}/>} onClick={()=>setSelected(null)}/>
</div>}
<div style={{textAlign:"center",borderBottom:"2px solid #333",paddingBottom:16,marginBottom:20}}>
<div style={{fontSize:11,color:"#666",letterSpacing:".1em",textTransform:"uppercase",marginBottom:4}}>United States District Court</div>
<div style={{fontSize:13,color:"#666",marginBottom:8}}>Central District of California</div>
<div style={{fontSize:18,fontWeight:700,marginBottom:4}}>PARAMOUNT CONTRACTORS & DEVELOPERS, INC.,</div>
<div style={{fontSize:14,color:"#555",marginBottom:2}}>Plaintiff,</div>
<div style={{fontSize:14,color:"#555",marginBottom:4}}>v.</div>
<div style={{fontSize:18,fontWeight:700,marginBottom:4}}>CITY OF LOS ANGELES, et al.,</div>
<div style={{fontSize:14,color:"#555",marginBottom:8}}>Defendants.</div>
<div style={{fontSize:13,color:"#888"}}>Case No. BC587659 | Filed: March 15, 2026</div>
</div>
<h2 style={{fontSize:16,fontWeight:700,margin:"20px 0 10px",fontFamily:font.sans}}>PLAINTIFF'S MOTION IN LIMINE NO. 3</h2>
<h3 style={{fontSize:14,fontWeight:600,margin:"16px 0 8px",fontFamily:font.sans,color:"#444"}}>To Exclude Expert Testimony of Dr. Mehmet Sanli</h3>
<p>Plaintiff Paramount Contractors & Developers, Inc. ("Paramount") respectfully moves this Court for an order excluding the expert testimony and report of Dr. Mehmet Sanli, Defendants' designated economic expert, on the grounds that his opinions are unreliable, speculative, and based on flawed methodology that does not satisfy the requirements of <em>Sargon Enterprises, Inc. v. University of Southern California</em> (2012) 55 Cal.4th 747.</p>
<h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",fontFamily:font.sans,color:"#444"}}>I. BACKGROUND</h3>
<p>On January 15, 2026, Defendants designated Dr. Sanli as their expert on economic damages. Dr. Sanli's report, dated February 28, 2026, opines that Paramount's claimed damages are "speculative and overstated" and offers an alternative damages calculation reducing Paramount's claim from $4.2 million to approximately $380,000.</p>
<p>Dr. Sanli's methodology suffers from three fundamental defects: (1) he improperly applies a "willing buyer-willing seller" valuation framework to signage rights that are not freely transferable on the open market; (2) he fails to account for the City's own valuation of the permits at issue, as established in the <em>Henderson v. Pacific</em> line of cases; and (3) his discount rate of 18% is unsupported by any comparable transaction data and appears to have been selected solely to minimize Paramount's recovery.</p>
<h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",fontFamily:font.sans,color:"#444"}}>II. LEGAL STANDARD</h3>
<p>Under <em>Sargon</em>, the trial court acts as a "gatekeeper" to exclude expert opinion that is based on "assumptions of fact without evidentiary support, or on speculative or conjectural factors." 55 Cal.4th at 770. The court must determine whether the expert's opinion is "based on matter... of a type that reasonably may be relied upon by an expert in forming an opinion." Evidence Code § 801(b).</p>
<p>Expert testimony must be based on "reasons and a reasoned explanation connecting the factual predicates to the ultimate conclusion." <em>Jennings v. Palomar Pomerado Health Systems, Inc.</em> (2003) 114 Cal.App.4th 1108, 1117. An expert opinion that is "purely conclusory" or based on "unreasonable assumptions" is properly excluded. <em>Bushling v. Fremont Medical Center</em> (2004) 117 Cal.App.4th 493, 510.</p>
<h3 style={{fontSize:14,fontWeight:600,margin:"20px 0 8px",fontFamily:font.sans,color:"#444"}}>III. ARGUMENT</h3>
<h4 style={{fontSize:13,fontWeight:600,margin:"16px 0 6px",fontFamily:font.sans,color:"#555"}}>A. Dr. Sanli's "Willing Buyer-Willing Seller" Framework Is Inapplicable</h4>
<p>Dr. Sanli's entire analysis rests on the premise that Paramount's signage permits should be valued using a "willing buyer-willing seller" approach — the standard method for valuing freely traded assets. But signage permits in the City of Los Angeles are <em>not</em> freely traded assets. They are regulatory entitlements that attach to specific properties and cannot be separately conveyed. See L.A.M.C. § 14.4.4(B)(11); <em>Paramount Contractors v. City of Los Angeles</em> (2019) (unpub.) [permits are "property-specific regulatory approvals, not transferable market commodities"].</p>
<p>By applying a market-transaction valuation to a non-market asset, Dr. Sanli introduces a fundamental methodological error that infects his entire analysis. As the California Supreme Court observed in <em>GHK Associates v. Mayer Group, Inc.</em> (1990) 224 Cal.App.3d 856, 873, an expert's methodology must "fit" the factual circumstances; a methodology designed for one type of asset cannot simply be transplanted to a fundamentally different type.</p>
<div style={{margin:"24px 0",padding:"16px 20px",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:"6px 8px",fontFamily:font.sans,fontSize:12}}>Category</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Paramount Expert</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Dr. Sanli</th><th style={{textAlign:"right",padding:"6px 8px",fontFamily:font.sans,fontSize:12}}>Difference</th></tr></thead>
<tbody>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Lost signage revenue</td><td style={{textAlign:"right",padding:"6px 8px"}}>$2,840,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$210,000</td><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$2,630,000</td></tr>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Permit value diminution</td><td style={{textAlign:"right",padding:"6px 8px"}}>$980,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$120,000</td><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$860,000</td></tr>
<tr style={{borderBottom:"1px solid #eee"}}><td style={{padding:"6px 8px"}}>Consequential damages</td><td style={{textAlign:"right",padding:"6px 8px"}}>$380,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$50,000</td><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$330,000</td></tr>
<tr style={{fontWeight:700,borderTop:"2px solid #333"}}><td style={{padding:"6px 8px"}}>Total</td><td style={{textAlign:"right",padding:"6px 8px"}}>$4,200,000</td><td style={{textAlign:"right",padding:"6px 8px"}}>$380,000</td><td style={{textAlign:"right",padding:"6px 8px",color:c.error}}>-$3,820,000</td></tr>
</tbody>
</table>
</div>
<p>The disparity between the two experts' conclusions — a factor of more than 11:1 — is itself evidence that Dr. Sanli's methodology is fundamentally flawed. While reasonable experts may disagree on quantum, an 11-fold divergence suggests not a difference of opinion but a difference of analytical framework.</p>
</div>
};
export default function QBrowser(){
const [url,setUrl]=useState("https://ecf.cacd.uscourts.gov/doc1/031139485672");
const [urlInput,setUrlInput]=useState("https://ecf.cacd.uscourts.gov/doc1/031139485672");
const [browserOpen,setBrowserOpen]=useState(false);
const [commentsOpen,setCommentsOpen]=useState(false);
const [rightTab,setRightTab]=useState("comments");
const [toast,setToast]=useState(null);
const [selectedText,setSelectedText]=useState("");
const [bookmarked,setBookmarked]=useState(false);
const flash=msg=>setToast(msg);
const comments=[
{id:"c1",author:"You",color:c.accentBtn,text:"Need to check if Sanli's discount rate has any support in comparable transactions",anchor:"discount rate of 18%",time:"2m ago",status:"open"},
{id:"c2",author:"Elnor",color:c.agentAv,text:"I found 3 comparable transactions in the signage rights space. Average discount rates ranged from 8-12%. Sanli's 18% is an outlier with no stated basis. This supports the MIL argument on unreliable methodology.",anchor:"discount rate of 18%",time:"1m ago",status:"open"},
];
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)}/>}
{/* SIDEBAR */}
<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,marginBottom:6}}>Q</div>
<button onClick={()=>setBrowserOpen(!browserOpen)} title="Browser (⌘B)" style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:browserOpen?"#ffffff18":"transparent",color:browserOpen?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center"}}><I.Search size={15}/></button>
<button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",color:"#777",display:"flex",alignItems:"center",justifyContent:"center"}}><I.FileText size={15}/></button>
<button style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"#ffffff18",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center"}} title="Web Browser"><I.Globe size={15}/></button>
<button onClick={()=>setCommentsOpen(!commentsOpen)} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:commentsOpen?"#ffffff18":"transparent",color:commentsOpen?"#fff":"#777",display:"flex",alignItems:"center",justifyContent:"center"}}><I.MsgCircle size={15}/></button>
</div>
{/* BROWSER SIDEBAR placeholder */}
{browserOpen&&<div style={{width:260,flexShrink:0,backgroundColor:c.bgPanel,borderRight:`1px solid ${c.border}`,display:"flex",flexDirection:"column"}}>
<div style={{padding:"10px 12px",borderBottom:`1px solid ${c.borderLight}`,display:"flex",alignItems:"center",justifyContent:"space-between"}}><span style={{fontSize:12,fontWeight:650}}>Browser</span><button onClick={()=>setBrowserOpen(false)} style={{border:"none",background:"none",cursor:"pointer",display:"flex",color:c.textTer}}><I.X size={12}/></button></div>
<div style={{flex:1,padding:12}}>
<div style={{fontSize:10,fontWeight:600,color:c.textTer,marginBottom:8,textTransform:"uppercase",letterSpacing:".05em"}}>Recent Pages</div>
{["Paramount MIL No. 3","Henderson v. Pacific — Docket","SEC Filing — Brooge Energy","Christensen CV (Expert)","LAMC § 14.4.4"].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",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"}}><I.Globe size={11} color={i===0?c.accentBtn:c.textTer}/>{t}</div>)}
<div style={{marginTop:16,fontSize:10,fontWeight:600,color:c.textTer,marginBottom:8,textTransform:"uppercase",letterSpacing:".05em"}}>Bookmarks</div>
{["PACER — CACD","Westlaw","CM/ECF Login","EDGAR Full-Text Search"].map((t,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",borderRadius:R.sm,cursor:"pointer",fontSize:11.5,color:c.textPri}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Star size={11} color={c.warn}/>{t}</div>)}
</div>
</div>}
{/* MAIN */}
<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
{/* URL BAR */}
<div style={{display:"flex",alignItems:"center",gap:4,padding:"5px 8px",borderBottom:`1px solid ${c.border}`,backgroundColor:c.bgPanel,flexShrink:0}}>
<button onClick={()=>flash("Back")} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textSec}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.ArrowL size={15}/></button>
<button onClick={()=>flash("Forward")} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textTer}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.ArrowR size={15}/></button>
<button onClick={()=>flash("Refreshing…")} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center",color:c.textSec}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Refresh size={14}/></button>
{/* URL INPUT */}
<div style={{flex:1,display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:R.full,backgroundColor:c.bgInput,border:`1px solid ${c.borderLight}`,minWidth:0}}>
<I.Lock size={12} color={c.green}/>
<input value={urlInput} onChange={e=>setUrlInput(e.target.value)} onKeyDown={e=>{if(e.key==="Enter"){setUrl(urlInput);flash("Loading…")}}} style={{flex:1,border:"none",backgroundColor:"transparent",fontSize:13,fontFamily:font.sans,outline:"none",color:c.textPri,minWidth:0}}/>
</div>
<button onClick={()=>{setBookmarked(!bookmarked);flash(bookmarked?"Bookmark removed":"Bookmarked")}} style={{width:28,height:28,borderRadius:R.sm,border:"none",cursor:"pointer",backgroundColor:"transparent",display:"flex",alignItems:"center",justifyContent:"center"}} onMouseEnter={e=>e.currentTarget.style.backgroundColor=c.bgInput} onMouseLeave={e=>e.currentTarget.style.backgroundColor="transparent"}><I.Star size={15} color={bookmarked?c.warn:c.textTer}/></button>
<Sep/>
<TBtn icon={<I.Copy size={13}/>} title="Copy page text" onClick={()=>flash("Page text copied")}/>
<TBtn icon={<I.Save size={13}/>} label="Save As…" onClick={()=>flash("Save options…")}/>
<TBtn icon={<I.Link size={13}/>} label="Ref" onClick={()=>flash("Reference copied")}/>
<Sep/>
<TBtn icon={<I.MsgCircle size={13}/>} label={comments.length+""} active={commentsOpen&&rightTab==="comments"} onClick={()=>{if(commentsOpen&&rightTab==="comments")setCommentsOpen(false);else{setCommentsOpen(true);setRightTab("comments")}}}/>
<Sep/>
<button onClick={()=>{if(commentsOpen&&rightTab==="send")setCommentsOpen(false);else{setCommentsOpen(true);setRightTab("send")}}} style={{padding:"3px 10px",borderRadius:R.sm,border:`1px solid ${c.accentBtn}40`,backgroundColor:(commentsOpen&&rightTab==="send")?c.accentBtn:c.accentBtn+"08",cursor:"pointer",display:"flex",alignItems:"center",gap:4,color:(commentsOpen&&rightTab==="send")?"#fff":c.accentBtn,fontFamily:font.sans,fontSize:10.5,fontWeight:600,height:26}}><I.Spark size={12}/>Ask Elnor</button>
</div>
{/* CONTENT + RIGHT PANEL */}
<div style={{flex:1,display:"flex",overflow:"hidden"}}>
{/* WEB PAGE */}
<div style={{flex:1,overflowY:"auto",backgroundColor:"#fff"}}>
<WebPage onSelect={setSelectedText}/>
</div>
{/* RIGHT PANEL */}
{commentsOpen&&<div style={{width:rightTab==="send"?300:270,flexShrink:0,borderLeft:`1px solid ${c.border}`,display:"flex",flexDirection:"column",backgroundColor:c.bgPanelAlt}}>
<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.bgPanel:c.bgInput,color:rightTab==="send"?c.accentBtn:c.textTer,fontSize:10.5,fontWeight:rightTab==="send"?650:450,fontFamily:font.sans,borderBottom:rightTab==="send"?`2px solid ${c.accentBtn}`:"2px solid transparent",display:"flex",alignItems:"center",justifyContent:"center",gap:3}}><I.Spark size={10}/>Ask Elnor</button>
<button onClick={()=>setCommentsOpen(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={18}/>
<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,color:c.textPri}}>{cm.text}</div>
<div style={{display:"flex",gap:8,marginTop:6}}>
<span style={{fontSize:10,color:c.textSec,cursor:"pointer"}}>Reply</span>
<span style={{fontSize:10,color:c.textSec,cursor:"pointer"}}>Resolve</span>
<span style={{fontSize:10,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 on this page…" 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 Comment</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:"6px 8px",borderRadius:R.sm,border:`1px solid ${c.border}`,backgroundColor:c.bgCard,cursor:"pointer"}}>
<Av letter="E" color={c.agentAv} size={18}/><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}}>Page context</div>
<div style={{padding:"6px 8px",borderRadius:R.sm,backgroundColor:c.bgInput,fontSize:11,color:c.textSec}}>
<div style={{fontWeight:600,marginBottom:2}}>Paramount MIL No. 3</div>
<div>ecf.cacd.uscourts.gov · 4,200 words</div>
{selectedText&&<div style={{marginTop:4,padding:"4px 6px",backgroundColor:c.accentBtn+"08",borderRadius:3,color:c.accentBtn,fontSize:10}}>Selected: "{selectedText.substring(0,80)}…"</div>}
</div>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Ask about this page</div>
<textarea placeholder="e.g., Is Sanli's methodology consistent with what they argued in Henderson?" style={{width:"100%",padding:"8px",borderRadius:R.sm,border:`1px solid ${c.border}`,fontSize:12,fontFamily:font.sans,outline:"none",minHeight:70,resize:"vertical"}}/>
</div>
<div style={{marginBottom:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:4}}>Include</div>
<div style={{display:"flex",flexDirection:"column",gap:4}}>
{[{label:"Page content + comments",checked:true},{label:"Henderson project context",checked:true},{label:"Recent case notes",checked:false}].map((opt,i)=><label key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:11.5,color:c.textPri,cursor:"pointer"}}><input type="checkbox" defaultChecked={opt.checked} style={{accentColor:c.accentBtn}}/>{opt.label}</label>)}
</div>
</div>
<div style={{display:"flex",gap:6}}>
<Btn primary onClick={()=>flash("Sent to Elnor")} style={{flex:1,justifyContent:"center"}}><I.Spark size={12}/>Ask Elnor</Btn>
</div>
<div style={{marginTop:12,borderTop:`1px solid ${c.borderLight}`,paddingTop:10}}>
<div style={{fontSize:11,fontWeight:600,color:c.textTer,marginBottom:6}}>Save this page</div>
<div style={{display:"flex",gap:4}}>
<Btn small ghost onClick={()=>flash("Saved as artifact")}><I.Save size={10}/>Save as Artifact</Btn>
<Btn small ghost onClick={()=>flash("Saved as note")}><I.FileText size={10}/>Save as Note</Btn>
</div>
</div>
</div>}
</div>}
</div>
</div>
{/* CHAT INDICATOR */}
<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"}}>Paramount</div>
</div>
</div>
);
}