import { useState, useEffect, useRef, useCallback } from "react";

const G = {
  burgundy:     "#4A0E1A",
  deepBurgundy: "#2D0810",
  gold:         "#C9A84C",
  goldLight:    "#E8C97A",
  goldDim:      "#8B6B2A",
  cream:        "#F5EDD8",
  creamDim:     "#C8B99A",
  black:        "#060407",
  blackPanel:   "#170F18",
  blackCard:    "#1F1720",
  blackCard2:   "#2A2030",
  whisper:      "#1A0E1C",
};

const MOCK_MESSAGES = [
  { id: 1, user: "Whitney", initials: "WG", time: "9:41 PM", text: "That scene gets me every time 😩" },
  { id: 2, user: "Jason",   initials: "JP", time: "9:41 PM", text: "Same here. So much emotion." },
  { id: 3, user: "Whitney", initials: "WG", time: "9:42 PM", text: "Would you ever move for love?" },
];

const PROMPTS = [
  { text: "Would you ever move across the country for love?" },
  { text: "When did you last feel truly seen by someone?" },
  { text: "What's the most romantic thing someone could do for you?" },
  { text: "What does your ideal Sunday morning look like?" },
  { text: "Which character do you relate to most right now?" },
];

const REACTIONS_LIST = ["❤️","😂","😮","😭","🔥"];

const MOVIE_POSTERS = [
  { title: "The Notebook", year: "2004", genre: "Romance", runtime: "2h 3m", active: true },
  { title: "Titanic",      year: "1997", genre: "Drama",   runtime: "3h 14m" },
  { title: "La La Land",   year: "2016", genre: "Musical", runtime: "2h 8m" },
  { title: "Casablanca",   year: "1942", genre: "Romance", runtime: "1h 42m" },
  { title: "Pride & Prejudice", year: "2005", genre: "Drama", runtime: "2h 9m" },
];

// ─── Luxury Chair ──────────────────────────────────────────────────────────
function LuxuryChair({ side, glowing, cuddleMode }) {
  const id = `c${side}`;
  return (
    <svg viewBox="0 0 160 190" fill="none" xmlns="http://www.w3.org/2000/svg"
      style={{ width:"100%", height:"auto",
        filter: glowing ? `drop-shadow(0 0 16px ${G.gold}66)` : "none",
        transition: "filter 0.6s" }}>
      <defs>
        <radialGradient id={`${id}_b`} cx="50%" cy="25%" r="75%">
          <stop offset="0%" stopColor="#3D1525"/>
          <stop offset="50%" stopColor="#280E18"/>
          <stop offset="100%" stopColor="#180810"/>
        </radialGradient>
        <radialGradient id={`${id}_c`} cx="50%" cy="15%" r="80%">
          <stop offset="0%" stopColor="#4A1A28"/>
          <stop offset="100%" stopColor="#1E0C14"/>
        </radialGradient>
        <linearGradient id={`${id}_gl`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={G.goldDim} stopOpacity="0.6"/>
          <stop offset="50%" stopColor={G.gold} stopOpacity="1"/>
          <stop offset="100%" stopColor={G.goldDim} stopOpacity="0.5"/>
        </linearGradient>
        <linearGradient id={`${id}_gt`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={G.goldLight} stopOpacity="0.9"/>
          <stop offset="100%" stopColor={G.goldDim} stopOpacity="0.2"/>
        </linearGradient>
      </defs>

      {/* Legs */}
      <rect x="34" y="155" width="10" height="28" rx="3" fill="#120A0E"/>
      <rect x="116" y="155" width="10" height="28" rx="3" fill="#120A0E"/>
      <rect x="33" y="179" width="12" height="4" rx="2" fill={`url(#${id}_gt)`}/>
      <rect x="115" y="179" width="12" height="4" rx="2" fill={`url(#${id}_gt)`}/>

      {/* Seat */}
      <rect x="22" y="130" width="116" height="30" rx="10" fill={`url(#${id}_b)`}/>
      <rect x="22" y="130" width="116" height="30" rx="10" fill="none" stroke={`url(#${id}_gt)`} strokeWidth="1.2"/>
      <rect x="30" y="133" width="100" height="12" rx="5" fill={`url(#${id}_c)`} opacity="0.7"/>
      {/* Seat stitching */}
      {[55,80,105].map(x=>(
        <line key={x} x1={x} y1="133" x2={x} y2="158" stroke={G.goldDim} strokeWidth="0.5" strokeOpacity="0.35" strokeDasharray="2,3"/>
      ))}

      {/* Back */}
      <rect x="18" y="26" width="124" height="108" rx="13" fill={`url(#${id}_b)`}/>
      <rect x="18" y="26" width="124" height="108" rx="13" fill="none" stroke={`url(#${id}_gt)`} strokeWidth="1.2"/>
      <rect x="30" y="36" width="100" height="88" rx="7" fill={`url(#${id}_c)`} opacity="0.6"/>
      {/* Back stitching */}
      {[55,80,105].map(x=>(
        <line key={x} x1={x} y1="36" x2={x} y2="124" stroke={G.goldDim} strokeWidth="0.45" strokeOpacity="0.3" strokeDasharray="3,4"/>
      ))}
      {[65,95].map(y=>(
        <line key={y} x1="30" y1={y} x2="130" y2={y} stroke={G.goldDim} strokeWidth="0.45" strokeOpacity="0.25" strokeDasharray="4,5"/>
      ))}
      {/* Tufting buttons */}
      {[[80,65],[80,95],[55,80],[105,80]].map(([x,y])=>(
        <circle key={`${x}${y}`} cx={x} cy={y} r="2.2" fill={G.goldDim} opacity="0.6"/>
      ))}

      {/* Headrest */}
      <rect x="26" y="8" width="108" height="28" rx="11" fill={`url(#${id}_b)`}/>
      <rect x="26" y="8" width="108" height="28" rx="11" fill="none" stroke={`url(#${id}_gt)`} strokeWidth="1.2"/>
      <rect x="38" y="13" width="84" height="18" rx="5" fill={`url(#${id}_c)`} opacity="0.75"/>
      <line x1="80" y1="13" x2="80" y2="31" stroke={G.goldDim} strokeWidth="0.5" strokeOpacity="0.3" strokeDasharray="2,3"/>

      {/* Armrests */}
      <rect x="5" y="94" width="20" height="44" rx="8" fill={`url(#${id}_b)`}/>
      <rect x="5" y="94" width="20" height="44" rx="8" fill="none" stroke={`url(#${id}_gl)`} strokeWidth="1"/>
      <rect x="7" y="96" width="16" height="9" rx="4" fill={`url(#${id}_c)`} opacity="0.55"/>
      <rect x="135" y="94" width="20" height="44" rx="8" fill={`url(#${id}_b)`}/>
      <rect x="135" y="94" width="20" height="44" rx="8" fill="none" stroke={`url(#${id}_gl)`} strokeWidth="1"/>
      <rect x="137" y="96" width="16" height="9" rx="4" fill={`url(#${id}_c)`} opacity="0.55"/>

      {/* Drink holder */}
      <circle cx={side==="L"?15:145} cy="122" r="6" fill="#100810" stroke={G.gold} strokeWidth="0.8" strokeOpacity="0.6"/>
      <circle cx={side==="L"?15:145} cy="122" r="4" fill="#0A0608"/>

      {/* Screen glow overlay when active */}
      {glowing && <rect x="26" y="8" width="108" height="28" rx="11" fill={G.goldLight} opacity="0.07"/>}
    </svg>
  );
}

// ─── Dust particles ──────────────────────────────────────────────────────
function DustParticles() {
  const pts = Array.from({length:14},(_,i)=>({
    id:i, x:Math.random()*100, sz:1+Math.random()*1.5,
    delay:Math.random()*8, dur:7+Math.random()*7, op:0.08+Math.random()*0.18
  }));
  return (
    <div style={{position:"absolute",inset:0,pointerEvents:"none",zIndex:2,overflow:"hidden"}}>
      {pts.map(p=>(
        <div key={p.id} style={{
          position:"absolute", bottom:-4, left:`${p.x}%`,
          width:`${p.sz}px`, height:`${p.sz}px`, borderRadius:"50%",
          background:G.goldLight, opacity:p.op,
          animation:`dustFloat ${p.dur}s linear ${p.delay}s infinite`,
        }}/>
      ))}
    </div>
  );
}

// ─── Main ────────────────────────────────────────────────────────────────
export default function ConnektionCinema() {
  // player
  const [playing, setPlaying]       = useState(false);
  const [currentTime, setCurrentTime] = useState(3742);
  const [duration]                  = useState(7380);
  const [volume, setVolume]         = useState(85);
  const [muted, setMuted]           = useState(false);
  const [videoSrc, setVideoSrc]     = useState("");
  const videoRef   = useRef(null);
  const timerRef   = useRef(null);
  const progressRef = useRef(null);

  // ui
  const [messages, setMessages]         = useState(MOCK_MESSAGES);
  const [inputMsg, setInputMsg]         = useState("");
  const [whisperOpen, setWhisperOpen]   = useState(false);
  const [promptIdx, setPromptIdx]       = useState(0);
  const [promptAnswerMode, setPromptAnswerMode] = useState(null);
  const [promptAnswer, setPromptAnswer] = useState("");
  const [showSource, setShowSource]     = useState(false);
  const [showInvite, setShowInvite]     = useState(false);
  const [showMemory, setShowMemory]     = useState(false);
  const [cuddleMode, setCuddleMode]     = useState(false);
  const [reactions, setReactions]       = useState([]);
  const [activeEmoji, setActiveEmoji]   = useState(null);
  const [whitneyGlow, setWhitneyGlow]   = useState(false);
  const [jasonGlow,   setJasonGlow]     = useState(false);
  const [sidebarOpen, setSidebarOpen]   = useState(false); // mobile
  const [srcInput, setSrcInput]         = useState("");
  const [activeMovie, setActiveMovie]   = useState(0);
  const chatRef = useRef(null);

  const [settings, setSettings] = useState({
    chat: true, reactions: true, prompts: true, autoplay: false, quality: "1080p"
  });

  const fmt = s => {
    const h=Math.floor(s/3600), m=Math.floor((s%3600)/60), sec=s%60;
    return h>0?`${h}:${String(m).padStart(2,"0")}:${String(sec).padStart(2,"0")}`:`${m}:${String(sec).padStart(2,"0")}`;
  };

  useEffect(()=>{
    if(chatRef.current) chatRef.current.scrollTop=chatRef.current.scrollHeight;
  },[messages]);

  useEffect(()=>{
    if(playing&&!videoSrc){ timerRef.current=setInterval(()=>setCurrentTime(t=>Math.min(t+1,duration)),1000); }
    else clearInterval(timerRef.current);
    return ()=>clearInterval(timerRef.current);
  },[playing,videoSrc,duration]);

  useEffect(()=>{
    if(!videoRef.current)return;
    playing?videoRef.current.play().catch(()=>{}):videoRef.current.pause();
  },[playing]);

  useEffect(()=>{
    if(videoRef.current) videoRef.current.volume=muted?0:volume/100;
  },[volume,muted]);

  const handleSeek=useCallback(e=>{
    if(!progressRef.current)return;
    const r=progressRef.current.getBoundingClientRect();
    const p=Math.max(0,Math.min(1,(e.clientX-r.left)/r.width));
    const t=Math.floor(p*duration);
    setCurrentTime(t);
    if(videoRef.current)videoRef.current.currentTime=t;
  },[duration]);

  const triggerReaction=emoji=>{
    const id=Date.now();
    setActiveEmoji(emoji);
    setReactions(r=>[...r,{id,emoji,left:10+Math.random()*80}]);
    setTimeout(()=>setActiveEmoji(null),600);
    setTimeout(()=>setReactions(r=>r.filter(x=>x.id!==id)),2400);
    setWhitneyGlow(true); setTimeout(()=>setWhitneyGlow(false),1800);
  };

  const sendMessage=()=>{
    if(!inputMsg.trim())return;
    setMessages(m=>[...m,{id:Date.now(),user:"Whitney",initials:"WG",
      time:new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),text:inputMsg.trim()}]);
    setInputMsg("");
    setWhitneyGlow(true); setTimeout(()=>setWhitneyGlow(false),2000);
    setTimeout(()=>{
      setMessages(m=>[...m,{id:Date.now()+1,user:"Jason",initials:"JP",
        time:new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),text:"💬 ..."}]);
      setJasonGlow(true); setTimeout(()=>setJasonGlow(false),1800);
    },2000);
  };

  const loadVideo=()=>{
    setVideoSrc(srcInput); setShowSource(false); setPlaying(false);
    if(videoRef.current){videoRef.current.src=srcInput;videoRef.current.load();}
  };

  const pct=(currentTime/duration)*100;

  const Toggle=({on,onToggle})=>(
    <button className={`tog ${on?"tog-on":"tog-off"}`} onClick={onToggle} aria-label="toggle">
      <div className={`tog-thumb ${on?"tt-on":"tt-off"}`}/>
    </button>
  );

  const css=`
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Cormorant+Garamond:wght@300;400;500&display=swap');
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html,body{background:${G.black};height:100%;}

    @keyframes dustFloat{
      0%{transform:translateY(0);opacity:0;}
      10%{opacity:1;}90%{opacity:0.7;}
      100%{transform:translateY(-380px) translateX(15px);opacity:0;}
    }
    @keyframes pulseGold{0%,100%{opacity:1;}50%{opacity:0.4;}}
    @keyframes riseUp{
      0%{opacity:1;transform:translateY(0) scale(1);}
      65%{opacity:0.9;transform:translateY(-130px) scale(1.25);}
      100%{opacity:0;transform:translateY(-210px) scale(0.5);}
    }
    @keyframes beamFlicker{0%,100%{opacity:0.1;}50%{opacity:0.16;}}
    @keyframes glowPulse{
      0%,100%{box-shadow:0 0 10px ${G.gold}44;}
      50%{box-shadow:0 0 26px ${G.gold}99;}
    }
    @keyframes whisperIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
    @keyframes promptIn{from{opacity:0;transform:scale(0.97) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
    @keyframes sidebarIn{from{transform:translateX(100%);}to{transform:translateX(0);}}

    .root{
      width:100%;min-height:100vh;
      background:radial-gradient(ellipse 100% 55% at 50% 0%,#240818 0%,${G.black} 55%);
      display:flex;flex-direction:column;
      font-family:'Playfair Display',Georgia,serif;
      color:${G.cream};overflow:hidden;position:relative;
    }

    .ceiling{
      position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,transparent 0%,${G.gold}22 25%,${G.gold}99 50%,${G.gold}22 75%,transparent 100%);
      z-index:20;pointer-events:none;
    }
    .projector{
      position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:0;height:0;
      border-left:200px solid transparent;border-right:200px solid transparent;
      border-top:580px solid ${G.goldLight};
      opacity:0.06;pointer-events:none;z-index:3;filter:blur(22px);
      animation:beamFlicker 5s ease-in-out infinite;
    }

    /* ── TOPBAR ── */
    .topbar{
      display:flex;align-items:center;justify-content:space-between;
      padding:11px 20px 10px;
      border-bottom:1px solid ${G.gold}18;
      position:relative;z-index:30;flex-shrink:0;
    }
    .logo{
      display:flex;align-items:center;gap:8px;
      font-family:'Cormorant Garamond',serif;
      font-size:12px;letter-spacing:0.2em;color:${G.gold};text-transform:uppercase;
    }
    .logo-reel{
      width:26px;height:26px;border:1.5px solid ${G.gold};
      border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;
    }
    .topbar-center{text-align:center;}
    .movie-title{font-size:18px;font-weight:500;color:${G.goldLight};letter-spacing:0.06em;}
    .movie-meta{
      font-family:'Cormorant Garamond',serif;
      font-size:11px;color:${G.creamDim};letter-spacing:0.12em;margin-top:1px;
    }
    .mdot{color:${G.goldDim};margin:0 5px;}
    .topbar-actions{display:flex;align-items:center;gap:8px;}
    .tb-btn{
      display:flex;align-items:center;gap:5px;
      padding:6px 12px;border-radius:4px;
      border:1px solid ${G.gold}30;background:transparent;
      color:${G.creamDim};font-size:11px;letter-spacing:0.1em;
      cursor:pointer;transition:all 0.2s;font-family:inherit;white-space:nowrap;
    }
    .tb-btn:hover{border-color:${G.gold}66;color:${G.goldLight};background:${G.gold}0a;}
    .tb-icon{padding:6px 9px;}
    .tb-leave{border-color:${G.burgundy}55;color:#D07070;}
    .tb-leave:hover{border-color:#D07070;background:${G.burgundy}22;color:#F09090;}
    .tb-cuddle{border-color:${G.gold}44;color:${G.goldLight};background:${G.gold}08;}
    .tb-cuddle.active{border-color:${G.gold};color:${G.gold};background:${G.gold}1e;}
    .sidebar-toggle{display:none;}

    /* ── BODY LAYOUT ── */
    .body-layout{
      display:flex;flex:1;overflow:hidden;min-height:0;
    }

    /* ── THEATER AREA (left, ~75%) ── */
    .theater{
      flex:1;min-width:0;
      display:flex;flex-direction:column;
      position:relative;overflow:hidden;
    }

    /* Screen */
    .screen-wrap{
      padding:14px 20px 0;position:relative;z-index:5;flex-shrink:0;
    }
    .screen-frame{
      border:2px solid ${G.gold}25;border-radius:5px;
      box-shadow:0 0 0 1px ${G.gold}0f,0 0 90px ${G.burgundy}44,inset 0 0 0 2px #00000055;
      background:#000;position:relative;overflow:hidden;
      aspect-ratio:16/9;
    }
    .curtain{position:absolute;top:0;bottom:0;width:42px;z-index:5;pointer-events:none;}
    .curtain-l{left:0;background:linear-gradient(90deg,${G.deepBurgundy}cc 0%,${G.burgundy}44 55%,transparent 100%);}
    .curtain-r{right:0;background:linear-gradient(270deg,${G.deepBurgundy}cc 0%,${G.burgundy}44 55%,transparent 100%);}
    .real-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:2;}
    .screen-bg{
      position:absolute;inset:0;z-index:1;
      background:radial-gradient(ellipse 75% 65% at 44% 40%,#3a1820 0%,#1b0c12 55%,#070508 100%);
      display:flex;align-items:center;justify-content:center;cursor:pointer;
    }
    .screen-inner{text-align:center;}
    .screen-title{font-size:42px;font-weight:400;letter-spacing:0.08em;color:${G.cream};text-shadow:0 0 55px ${G.gold}33;}
    .screen-tag{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:0.26em;color:${G.creamDim};margin-top:5px;}
    .play-lg{
      width:60px;height:60px;border-radius:50%;
      border:2px solid ${G.gold}77;background:rgba(0,0,0,0.55);
      color:${G.gold};font-size:20px;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      margin:16px auto 0;transition:all 0.2s;
    }
    .play-lg:hover{background:${G.gold}22;border-color:${G.gold};}
    .rxn-stage{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden;}
    .rxn-float{position:absolute;bottom:12%;font-size:32px;animation:riseUp 2.4s ease-out forwards;}

    /* Controls */
    .controls{padding:8px 20px 10px;position:relative;z-index:10;flex-shrink:0;}
    .prog-row{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
    .tlbl{
      font-family:'Cormorant Garamond',serif;
      font-size:11px;color:${G.creamDim};min-width:38px;white-space:nowrap;
    }
    .prog-track{
      flex:1;height:4px;background:${G.blackCard2};
      border-radius:2px;cursor:pointer;position:relative;
    }
    .prog-fill{
      height:100%;border-radius:2px;
      background:linear-gradient(90deg,${G.goldDim},${G.gold});
      position:relative;transition:width 0.3s linear;
    }
    .prog-thumb{
      position:absolute;right:-5px;top:-4px;
      width:12px;height:12px;border-radius:50%;
      background:${G.gold};border:2px solid ${G.black};
    }
    .ctrl-main{display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .ctrl-grp{display:flex;align-items:center;gap:6px;}
    .ctrl-btn{
      background:transparent;border:none;color:${G.creamDim};
      cursor:pointer;padding:5px 7px;border-radius:4px;
      font-size:12px;letter-spacing:0.05em;
      display:flex;align-items:center;gap:4px;transition:color 0.2s;
      font-family:'Cormorant Garamond',serif;
    }
    .ctrl-btn:hover{color:${G.goldLight};}
    .play-btn{
      width:36px;height:36px;border-radius:50%;
      border:1.5px solid ${G.gold}44;color:${G.gold};
      background:${G.blackCard};font-size:14px;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:all 0.2s;flex-shrink:0;
    }
    .play-btn:hover{border-color:${G.gold};background:${G.gold}15;}
    .vol-row{display:flex;align-items:center;gap:6px;}
    .vol-sl{
      width:64px;height:3px;background:${G.blackCard2};
      border-radius:2px;cursor:pointer;
      -webkit-appearance:none;appearance:none;
    }
    .vol-sl::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:${G.gold};}
    .sync-pill{
      display:flex;align-items:center;gap:6px;
      padding:5px 12px;border-radius:20px;
      border:1px solid #1a4a1a44;background:#070d07;
    }
    .sync-dot{width:7px;height:7px;border-radius:50%;background:#4CAF50;animation:pulseGold 2s ease-in-out infinite;}
    .sync-lbl{font-size:10px;letter-spacing:0.14em;color:#5CCC5C;}
    .load-btn{
      padding:5px 11px;border-radius:20px;
      border:1px solid ${G.gold}2e;background:transparent;
      color:${G.creamDim};font-size:10px;letter-spacing:0.12em;
      cursor:pointer;font-family:inherit;transition:all 0.2s;
    }
    .load-btn:hover{border-color:${G.gold}55;color:${G.goldLight};}

    /* Seating */
    .seating{
      display:flex;align-items:flex-end;justify-content:center;
      gap:${cuddleMode?6:18}px;
      padding:0 14px 16px;
      position:relative;z-index:10;flex:1;min-height:0;
      transition:gap 0.8s cubic-bezier(0.34,1.56,0.64,1);
    }
    .seat-sec{display:flex;flex-direction:column;align-items:center;gap:5px;}
    .chair-col{position:relative;width:136px;flex-shrink:0;}
    .av-badge{
      position:absolute;top:-54px;left:50%;transform:translateX(-50%);
      display:flex;flex-direction:column;align-items:center;
    }
    .av-ring{
      width:52px;height:52px;border-radius:50%;
      background:linear-gradient(135deg,${G.goldDim},${G.goldLight},${G.goldDim});
      padding:2px;position:relative;transition:all 0.5s;
    }
    .av-ring.glow{animation:glowPulse 1s ease-in-out;}
    .av-inner{
      width:100%;height:100%;border-radius:50%;
      background:linear-gradient(135deg,#3a2030,#2a1522);
      display:flex;align-items:center;justify-content:center;
      font-size:13px;font-weight:500;color:${G.cream};letter-spacing:0.05em;
    }
    .online-dot{
      position:absolute;bottom:2px;right:2px;
      width:10px;height:10px;border-radius:50%;
      background:#4CAF50;border:2px solid ${G.black};
    }
    .p-name{font-size:11px;letter-spacing:0.18em;color:${G.goldLight};text-transform:uppercase;margin-top:3px;white-space:nowrap;}
    .p-role{font-size:9px;letter-spacing:0.22em;color:${G.goldDim};display:flex;align-items:center;gap:3px;margin-top:1px;}

    /* Center column */
    .center-col{
      display:flex;flex-direction:column;align-items:center;gap:9px;
      width:${cuddleMode?250:278}px;flex-shrink:0;transition:width 0.8s;
    }

    /* Whisper */
    .whisper-wrap{position:relative;width:100%;}
    .whisper-pill{
      background:${G.whisper};border:1px solid ${G.gold}1e;
      border-radius:22px;padding:8px 14px;
      display:flex;align-items:center;justify-content:space-between;
      cursor:pointer;transition:all 0.2s;
    }
    .whisper-pill:hover{border-color:${G.gold}44;background:${G.blackCard};}
    .wp-lbl{font-size:10px;letter-spacing:0.17em;color:${G.goldLight};text-transform:uppercase;}
    .wp-dot{width:7px;height:7px;border-radius:50%;background:${G.gold};animation:pulseGold 1.5s ease-in-out infinite;}
    .whisper-tray{
      position:absolute;bottom:calc(100% + 8px);left:0;right:0;
      background:${G.blackPanel};border:1px solid ${G.gold}1e;border-radius:12px;
      overflow:hidden;animation:whisperIn 0.22s ease-out;z-index:50;
      box-shadow:0 -8px 36px rgba(0,0,0,0.85);
    }
    .wt-hdr{
      padding:9px 13px;border-bottom:1px solid ${G.gold}12;
      display:flex;align-items:center;justify-content:space-between;
    }
    .wt-title{font-size:10px;letter-spacing:0.2em;color:${G.gold};}
    .wt-close{background:transparent;border:none;color:${G.creamDim};cursor:pointer;font-size:13px;}
    .wt-msgs{max-height:150px;overflow-y:auto;padding:9px 11px;scrollbar-width:thin;scrollbar-color:${G.gold}22 transparent;}
    .wt-msg{display:flex;gap:7px;margin-bottom:8px;}
    .wt-av{
      width:23px;height:23px;border-radius:50%;
      background:${G.burgundy};border:1px solid ${G.gold}2e;
      display:flex;align-items:center;justify-content:center;
      font-size:8px;color:${G.goldLight};flex-shrink:0;
    }
    .wt-body{flex:1;}
    .wt-name{font-size:10px;color:${G.goldLight};font-weight:500;}
    .wt-time{font-size:9px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;margin-left:5px;}
    .wt-text{font-size:12px;color:${G.cream};font-family:'Cormorant Garamond',serif;line-height:1.4;margin-top:1px;}
    .wt-input-row{
      display:flex;align-items:center;gap:7px;
      padding:7px 9px;border-top:1px solid ${G.gold}10;
    }
    .wt-input{
      flex:1;background:${G.blackCard};border:1px solid ${G.gold}15;
      border-radius:16px;padding:6px 12px;color:${G.cream};
      font-size:12px;outline:none;font-family:'Cormorant Garamond',serif;
    }
    .wt-input::placeholder{color:${G.creamDim}44;}
    .wt-input:focus{border-color:${G.gold}40;}
    .send-btn{
      width:27px;height:27px;border-radius:50%;
      background:${G.gold};border:none;cursor:pointer;
      color:${G.black};font-size:11px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;transition:background 0.2s;
    }
    .send-btn:hover{background:${G.goldLight};}

    /* Reactions */
    .rxn-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
    .rxn-btn{
      background:${G.blackCard};border:1px solid ${G.gold}15;
      border-radius:8px;padding:6px 8px;cursor:pointer;font-size:15px;
      transition:all 0.15s;display:flex;align-items:center;justify-content:center;
    }
    .rxn-btn:hover{border-color:${G.gold}44;background:${G.gold}0e;transform:scale(1.18);}
    .rxn-btn.active{border-color:${G.gold};background:${G.gold}1e;transform:scale(1.3);}

    /* Prompt */
    .prompt-card{
      width:100%;
      background:${cuddleMode?`linear-gradient(135deg,#2A0E22,#1A0818)`:G.blackPanel};
      border:1px solid ${cuddleMode?G.gold+"3e":G.gold+"1a"};
      border-radius:11px;padding:13px 15px;
      animation:promptIn 0.3s ease-out;transition:background 0.8s,border-color 0.8s;
    }
    .prompt-hdr{font-size:9px;letter-spacing:0.22em;color:${G.gold};text-transform:uppercase;margin-bottom:5px;display:flex;align-items:center;gap:5px;}
    .prompt-txt{font-size:12px;color:${G.cream};font-family:'Cormorant Garamond',serif;line-height:1.5;font-style:italic;margin-bottom:9px;}
    .prompt-btns{display:flex;gap:6px;}
    .pb{flex:1;padding:6px 7px;border-radius:5px;font-size:10px;letter-spacing:0.11em;cursor:pointer;text-transform:uppercase;font-family:inherit;transition:all 0.2s;border:1px solid;}
    .pb-p{border-color:${G.gold}44;color:${G.gold};background:transparent;}
    .pb-p:hover{background:${G.gold}12;border-color:${G.gold};}
    .pb-s{border-color:${G.blackCard2};color:${G.creamDim};background:transparent;}
    .pb-s:hover{border-color:${G.gold}22;color:${G.cream};}

    /* Table */
    .ctable{
      background:linear-gradient(140deg,#2e2010,#1c1408);
      border:1px solid ${G.gold}2a;border-radius:9px;
      padding:9px 14px;display:flex;gap:14px;align-items:center;
      box-shadow:0 3px 18px rgba(0,0,0,0.5);
    }
    .cup-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;}
    .cup{
      width:24px;height:30px;
      background:linear-gradient(180deg,#1a1a1a,#111);
      border:1px solid ${G.gold}40;border-radius:3px 3px 5px 5px;
      display:flex;flex-direction:column;align-items:center;padding-top:3px;position:relative;
    }
    .cup-straw{width:3px;height:18px;background:linear-gradient(180deg,${G.goldDim},${G.gold}88);border-radius:2px;}
    .cup-h{position:absolute;bottom:3px;font-size:7px;}
    .cup-lbl{font-size:9px;color:${G.goldDim};font-family:'Cormorant Garamond',serif;}
    .popcorn{font-size:26px;filter:drop-shadow(0 0 8px ${G.gold}44);}

    /* ── RIGHT SIDEBAR ── */
    .sidebar{
      width:230px;flex-shrink:0;
      background:${G.blackPanel};
      border-left:1px solid ${G.gold}18;
      display:flex;flex-direction:column;
      overflow-y:auto;
      scrollbar-width:thin;scrollbar-color:${G.gold}18 transparent;
      position:relative;z-index:25;
    }
    .sb-section{padding:16px 15px 12px;border-bottom:1px solid ${G.gold}10;}
    .sb-section:last-child{border-bottom:none;}
    .sb-title{
      font-size:9px;letter-spacing:0.22em;color:${G.gold};
      text-transform:uppercase;margin-bottom:10px;
      padding-bottom:7px;border-bottom:1px solid ${G.gold}15;
      display:flex;align-items:center;justify-content:space-between;
    }
    .setting-row{
      display:flex;align-items:center;justify-content:space-between;
      margin-bottom:10px;
    }
    .setting-lbl{font-size:12px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;}
    .tog{width:34px;height:18px;border-radius:9px;border:none;cursor:pointer;position:relative;transition:background 0.2s;}
    .tog-on{background:${G.goldDim};}
    .tog-off{background:${G.blackCard2};}
    .tog-thumb{position:absolute;top:2px;width:14px;height:14px;border-radius:50%;background:${G.cream};transition:left 0.2s;}
    .tt-on{left:17px;}.tt-off{left:2px;}
    .q-sel{
      background:${G.blackCard};border:1px solid ${G.gold}1e;
      color:${G.cream};font-size:11px;border-radius:4px;
      padding:4px 7px;cursor:pointer;font-family:inherit;
    }

    /* Sync card */
    .sync-card{
      background:${G.blackCard};border:1px solid ${G.gold}15;
      border-radius:8px;padding:10px 12px;
      display:flex;align-items:center;gap:9px;
    }
    .sync-card-dot{width:8px;height:8px;border-radius:50%;background:#4CAF50;animation:pulseGold 2s ease-in-out infinite;flex-shrink:0;}
    .sync-card-lbl{font-size:10px;letter-spacing:0.14em;color:#5CCC5C;}
    .sync-card-sub{font-size:10px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;margin-top:1px;}

    /* Movie posters */
    .poster-item{
      display:flex;align-items:center;gap:9px;
      padding:8px 10px;border-radius:7px;
      border:1px solid ${G.gold}15;background:${G.blackCard};
      cursor:pointer;margin-bottom:6px;transition:all 0.2s;
    }
    .poster-item:hover{border-color:${G.gold}44;background:${G.blackCard2};}
    .poster-item.active-movie{border-color:${G.gold}66;background:${G.blackCard2};}
    .poster-icon{font-size:18px;flex-shrink:0;}
    .poster-info{flex:1;min-width:0;}
    .poster-title{font-size:12px;color:${G.cream};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .poster-meta{font-size:9px;color:${G.goldDim};font-family:'Cormorant Garamond',serif;letter-spacing:0.06em;margin-top:1px;}
    .poster-active-dot{width:6px;height:6px;border-radius:50%;background:${G.gold};flex-shrink:0;}

    /* Sidebar action buttons */
    .sb-action-btn{
      width:100%;padding:9px;border-radius:5px;
      border:1px solid ${G.gold}25;background:transparent;
      color:${G.creamDim};font-size:11px;letter-spacing:0.1em;
      cursor:pointer;font-family:inherit;transition:all 0.2s;
      display:flex;align-items:center;gap:7px;justify-content:center;
      margin-bottom:7px;
    }
    .sb-action-btn:hover{border-color:${G.gold}55;color:${G.goldLight};background:${G.gold}0a;}
    .sb-leave{border-color:${G.burgundy}44;color:#D07070;}
    .sb-leave:hover{border-color:#D07070;background:${G.burgundy}1e;color:#F09090;}

    /* ── MODALS ── */
    .overlay{
      position:fixed;inset:0;background:rgba(0,0,0,0.88);
      z-index:100;display:flex;align-items:center;justify-content:center;
    }
    .modal{
      background:${G.blackPanel};border:1px solid ${G.gold}2e;
      border-radius:13px;padding:28px 30px;width:390px;max-width:94vw;
      text-align:center;position:relative;
    }
    .modal-title{font-size:21px;color:${G.goldLight};margin-bottom:7px;letter-spacing:0.04em;}
    .modal-sub{font-size:13px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;margin-bottom:18px;}
    .modal-close{
      position:absolute;top:13px;right:15px;
      background:transparent;border:none;color:${G.creamDim};font-size:17px;cursor:pointer;
    }
    .modal-close:hover{color:${G.cream};}

    /* Invite */
    .inv-code{
      background:${G.blackCard};border:1px solid ${G.gold}40;border-radius:7px;
      padding:11px 16px;font-size:24px;letter-spacing:0.32em;color:${G.gold};
      display:inline-block;margin-bottom:11px;
    }
    .inv-link{
      background:${G.blackCard};border:1px solid ${G.gold}18;border-radius:6px;
      padding:8px 11px;font-size:11px;color:${G.goldDim};word-break:break-all;
      font-family:'Cormorant Garamond',serif;margin-bottom:13px;
    }

    /* Source */
    .src-lbl{font-size:12px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;margin-bottom:5px;display:block;text-align:left;}
    .src-in{
      width:100%;background:${G.blackCard};border:1px solid ${G.gold}1e;
      border-radius:6px;padding:9px 11px;color:${G.cream};
      font-size:13px;outline:none;font-family:'Cormorant Garamond',serif;margin-bottom:11px;
    }
    .src-in:focus{border-color:${G.gold}44;}
    .src-in::placeholder{color:${G.creamDim}44;}
    .src-opts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
    .src-opt{
      padding:5px 12px;border-radius:18px;
      border:1px solid ${G.gold}1e;background:transparent;
      color:${G.creamDim};font-size:11px;letter-spacing:0.09em;
      cursor:pointer;font-family:inherit;transition:all 0.2s;
    }
    .src-opt:hover{border-color:${G.gold}44;color:${G.goldLight};}
    .big-btn{
      width:100%;padding:11px;border-radius:6px;
      background:${G.gold};border:none;color:${G.black};
      font-size:13px;letter-spacing:0.14em;cursor:pointer;
      font-family:inherit;font-weight:500;transition:background 0.2s;
    }
    .big-btn:hover{background:${G.goldLight};}

    /* Memory card */
    .mem-card{
      background:linear-gradient(145deg,#1E1015,#130B10);
      border:1px solid ${G.gold}3e;border-radius:13px;
      padding:24px 26px;text-align:center;width:310px;max-width:90vw;
    }
    .mem-t{font-size:10px;letter-spacing:0.28em;color:${G.goldDim};text-transform:uppercase;margin-bottom:11px;}
    .mem-movie{font-size:22px;color:${G.goldLight};margin-bottom:3px;}
    .mem-date{font-size:12px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;margin-bottom:16px;}
    .mem-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;}
    .mem-stat{background:${G.blackCard};border:1px solid ${G.gold}15;border-radius:7px;padding:9px;}
    .msn{font-size:18px;color:${G.gold};font-weight:500;}
    .msl{font-size:9px;color:${G.creamDim};letter-spacing:0.12em;font-family:'Cormorant Garamond',serif;margin-top:2px;}
    .mem-score{font-size:44px;color:${G.goldLight};font-weight:400;margin-bottom:3px;}
    .mem-score-lbl{font-size:9px;letter-spacing:0.22em;color:${G.goldDim};text-transform:uppercase;}
    .mem-tl{font-size:11px;color:${G.gold};margin-top:13px;letter-spacing:0.09em;font-family:'Cormorant Garamond',serif;}

    /* Bottom bar */
    .bottom-bar{
      display:flex;align-items:center;justify-content:space-between;
      padding:7px 20px;border-top:1px solid ${G.gold}12;
      background:${G.black};flex-shrink:0;z-index:20;
    }
    .rc-lbl{font-size:10px;color:${G.creamDim};font-family:'Cormorant Garamond',serif;}
    .rc-val{font-size:12px;color:${G.gold};letter-spacing:0.14em;margin-left:6px;}
    .copy-btn{background:transparent;border:none;color:${G.goldDim};cursor:pointer;font-size:11px;margin-left:4px;}
    .conn-pill{display:flex;align-items:center;gap:5px;font-size:10px;color:#5CCC5C;letter-spacing:0.11em;}
    .conn-dot{width:6px;height:6px;border-radius:50%;background:#4CAF50;}

    /* Responsive */
    @media(max-width:900px){
      .sidebar{
        position:fixed;top:0;right:0;bottom:0;
        transform:translateX(100%);transition:transform 0.3s ease;
        z-index:90;width:260px;
      }
      .sidebar.open{transform:translateX(0);animation:sidebarIn 0.3s ease;}
      .sidebar-toggle{display:flex;}
      .screen-wrap{padding:10px 12px 0;}
      .controls{padding:6px 12px 8px;}
      .seating{padding:0 8px 10px;gap:8px;}
      .chair-col{width:108px;}
      .center-col{width:210px;}
    }
    @media(max-width:600px){
      .chair-col{width:84px;}
      .center-col{width:180px;}
      .screen-title{font-size:26px;}
      .tb-btn span:last-child{display:none;}
      .movie-title{font-size:15px;}
    }
  `;

  return (
    <div className="root">
      <style>{css}</style>
      <div className="ceiling"/>
      <div className="projector"/>
      <DustParticles/>

      {/* ── TOP BAR ── */}
      <div className="topbar">
        <div className="logo">
          <div className="logo-reel">🎬</div>
          Connektion Cinema
        </div>
        <div className="topbar-center">
          <div className="movie-title">The Notebook</div>
          <div className="movie-meta">
            2004<span className="mdot">•</span>Romance, Drama<span className="mdot">•</span>2h 3m
          </div>
        </div>
        <div className="topbar-actions">
          <button className={`tb-btn tb-cuddle ${cuddleMode?"active":""}`} onClick={()=>setCuddleMode(c=>!c)}>
            <span>♡</span><span>Cuddle</span>
          </button>
          <button className="tb-btn tb-icon" onClick={()=>setShowMemory(true)} title="Memory">🎞</button>
          {/* Mobile sidebar toggle */}
          <button className="tb-btn tb-icon sidebar-toggle" onClick={()=>setSidebarOpen(o=>!o)}>⚙</button>
        </div>
      </div>

      {/* ── BODY ── */}
      <div className="body-layout">

        {/* ── THEATER ── */}
        <div className="theater">

          {/* Screen */}
          <div className="screen-wrap">
            <div className="screen-frame">
              <div className="curtain curtain-l"/>
              <div className="curtain curtain-r"/>
              {videoSrc&&(
                <video ref={videoRef} className="real-video" controls={false}
                  onTimeUpdate={e=>setCurrentTime(Math.floor(e.target.currentTime))}
                  src={videoSrc}/>
              )}
              {!videoSrc&&(
                <div className="screen-bg" onClick={()=>setPlaying(p=>!p)}>
                  <div className="screen-inner">
                    <div className="screen-title">The Notebook</div>
                    <div className="screen-tag">A LOVE STORY FOR THE AGES</div>
                    <button className="play-lg" onClick={e=>{e.stopPropagation();setPlaying(p=>!p);}}>
                      {playing?"⏸":"▶"}
                    </button>
                  </div>
                </div>
              )}
              <div className="rxn-stage">
                {reactions.map(r=>(
                  <div key={r.id} className="rxn-float" style={{left:`${r.left}%`}}>{r.emoji}</div>
                ))}
              </div>
            </div>
          </div>

          {/* Controls */}
          <div className="controls">
            <div className="prog-row">
              <span className="tlbl">{fmt(currentTime)}</span>
              <div className="prog-track" ref={progressRef} onClick={handleSeek}>
                <div className="prog-fill" style={{width:`${pct}%`}}>
                  <div className="prog-thumb"/>
                </div>
              </div>
              <span className="tlbl" style={{textAlign:"right"}}>{fmt(duration)}</span>
            </div>
            <div className="ctrl-main">
              <div className="ctrl-grp">
                <button className="ctrl-btn" onClick={()=>setCurrentTime(t=>Math.max(0,t-10))}>⏮ 10s</button>
                <button className="play-btn" onClick={()=>setPlaying(p=>!p)}>{playing?"⏸":"▶"}</button>
                <button className="ctrl-btn" onClick={()=>setCurrentTime(t=>Math.min(duration,t+10))}>10s ⏭</button>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:9}}>
                <div className="sync-pill"><div className="sync-dot"/><span className="sync-lbl">SYNC IS ON</span></div>
                <button className="load-btn" onClick={()=>setShowSource(true)}>+ Load Video</button>
              </div>
              <div className="ctrl-grp">
                <div className="vol-row">
                  <button className="ctrl-btn" style={{fontSize:14}} onClick={()=>setMuted(m=>!m)}>
                    {muted?"🔇":"🔊"}
                  </button>
                  <input type="range" min="0" max="100" value={muted?0:volume}
                    className="vol-sl" onChange={e=>{setVolume(Number(e.target.value));setMuted(false);}}/>
                </div>
              </div>
            </div>
          </div>

          {/* Seating */}
          <div className="seating">

            {/* Whitney — Host */}
            <div className="seat-sec">
              <div className="chair-col">
                <div className="av-badge">
                  <div className={`av-ring ${whitneyGlow?"glow":""}`} style={{position:"relative"}}>
                    <div className="av-inner">WG</div>
                    <div className="online-dot"/>
                  </div>
                </div>
                <LuxuryChair side="L" glowing={whitneyGlow} cuddleMode={cuddleMode}/>
              </div>
              <div className="p-name">Whitney Gilbreth</div>
              <div className="p-role"><span style={{color:G.gold}}>♛</span> HOST</div>
            </div>

            {/* Center */}
            <div className="center-col">
              {settings.chat&&(
                <div className="whisper-wrap">
                  <div className="whisper-pill" onClick={()=>setWhisperOpen(o=>!o)}>
                    <span className="wp-lbl">💬 Whisper</span>
                    <div style={{display:"flex",alignItems:"center",gap:6}}>
                      <span style={{fontSize:10,color:G.creamDim,fontFamily:"'Cormorant Garamond',serif"}}>{messages.length} msgs</span>
                      <div className="wp-dot"/>
                    </div>
                  </div>
                  {whisperOpen&&(
                    <div className="whisper-tray">
                      <div className="wt-hdr">
                        <span className="wt-title">Live Chat</span>
                        <button className="wt-close" onClick={()=>setWhisperOpen(false)}>✕</button>
                      </div>
                      <div className="wt-msgs" ref={chatRef}>
                        {messages.map(m=>(
                          <div key={m.id} className="wt-msg">
                            <div className="wt-av">{m.initials}</div>
                            <div className="wt-body">
                              <span className="wt-name">{m.user}</span>
                              <span className="wt-time">{m.time}</span>
                              <div className="wt-text">{m.text}</div>
                            </div>
                          </div>
                        ))}
                      </div>
                      <div className="wt-input-row">
                        <input className="wt-input" placeholder="Whisper something..."
                          value={inputMsg} onChange={e=>setInputMsg(e.target.value)}
                          onKeyDown={e=>e.key==="Enter"&&sendMessage()}/>
                        <button className="send-btn" onClick={sendMessage}>➤</button>
                      </div>
                    </div>
                  )}
                </div>
              )}

              {settings.reactions&&(
                <div className="rxn-row">
                  {REACTIONS_LIST.map(emoji=>(
                    <button key={emoji}
                      className={`rxn-btn ${activeEmoji===emoji?"active":""}`}
                      onClick={()=>triggerReaction(emoji)}>
                      {emoji}
                    </button>
                  ))}
                </div>
              )}

              {settings.prompts&&(
                <div className="prompt-card">
                  <div className="prompt-hdr"><span>✦</span> Connection Moment</div>
                  <div className="prompt-txt">"{PROMPTS[promptIdx].text}"</div>
                  {promptAnswerMode===null?(
                    <div className="prompt-btns">
                      <button className="pb pb-p" onClick={()=>setPromptAnswerMode("share")}>Share Answer</button>
                      <button className="pb pb-s" onClick={()=>{setPromptIdx(i=>(i+1)%PROMPTS.length);setPromptAnswerMode(null);setPromptAnswer("");}}>Next ›</button>
                    </div>
                  ):(
                    <div>
                      <input className="wt-input" style={{width:"100%",marginBottom:8}}
                        placeholder="Your answer..."
                        value={promptAnswer} onChange={e=>setPromptAnswer(e.target.value)}/>
                      <div className="prompt-btns">
                        <button className="pb pb-p" onClick={()=>{setPromptAnswerMode(null);setPromptAnswer("");}}>Send ›</button>
                        <button className="pb pb-s" onClick={()=>{setPromptAnswerMode(null);setPromptAnswer("");}}>Cancel</button>
                      </div>
                    </div>
                  )}
                </div>
              )}

              <div className="ctable">
                <div className="cup-wrap">
                  <div className="cup"><div className="cup-straw"/><span className="cup-h">♥</span></div>
                  <span className="cup-lbl">Whitney</span>
                </div>
                <span className="popcorn">🍿</span>
                <div className="cup-wrap">
                  <div className="cup"><div className="cup-straw"/><span className="cup-h">♥</span></div>
                  <span className="cup-lbl">Jason</span>
                </div>
              </div>
            </div>

            {/* Jason — Guest */}
            <div className="seat-sec">
              <div className="chair-col">
                <div className="av-badge">
                  <div className={`av-ring ${jasonGlow?"glow":""}`} style={{position:"relative"}}>
                    <div className="av-inner">JP</div>
                    <div className="online-dot"/>
                  </div>
                </div>
                <LuxuryChair side="R" glowing={jasonGlow} cuddleMode={cuddleMode}/>
              </div>
              <div className="p-name">Jason Parker</div>
              <div className="p-role"><span style={{color:G.goldDim}}>✦</span> GUEST</div>
            </div>
          </div>
        </div>

        {/* ── RIGHT SIDEBAR ── */}
        <div className={`sidebar ${sidebarOpen?"open":""}`}>

          {/* Room Settings */}
          <div className="sb-section">
            <div className="sb-title">
              Room Settings
              {sidebarOpen&&<button style={{background:"transparent",border:"none",color:G.creamDim,cursor:"pointer",fontSize:13}} onClick={()=>setSidebarOpen(false)}>✕</button>}
            </div>
            {[["Chat (Whisper)","chat"],["Reactions","reactions"],["Connection Prompts","prompts"],["Autoplay Next","autoplay"]].map(([lbl,key])=>(
              <div key={key} className="setting-row">
                <span className="setting-lbl">{lbl}</span>
                <Toggle on={settings[key]} onToggle={()=>setSettings(s=>({...s,[key]:!s[key]}))}/>
              </div>
            ))}
            <div className="setting-row">
              <span className="setting-lbl">Video Quality</span>
              <select className="q-sel" value={settings.quality} onChange={e=>setSettings(s=>({...s,quality:e.target.value}))}>
                <option>Auto</option><option>1080p</option><option>720p</option><option>480p</option>
              </select>
            </div>
          </div>

          {/* Sync Status */}
          <div className="sb-section">
            <div className="sb-title">Sync Status</div>
            <div className="sync-card">
              <div className="sync-card-dot"/>
              <div>
                <div className="sync-card-lbl">SYNC IS ON</div>
                <div className="sync-card-sub">Watching together</div>
              </div>
            </div>
          </div>

          {/* Movie Selection */}
          <div className="sb-section" style={{flex:1}}>
            <div className="sb-title">Movie Selection</div>
            {MOVIE_POSTERS.map((m,i)=>(
              <div key={m.title}
                className={`poster-item ${activeMovie===i?"active-movie":""}`}
                onClick={()=>setActiveMovie(i)}>
                <span className="poster-icon">🎬</span>
                <div className="poster-info">
                  <div className="poster-title">{m.title}</div>
                  <div className="poster-meta">{m.year} · {m.genre} · {m.runtime}</div>
                </div>
                {activeMovie===i&&<div className="poster-active-dot"/>}
              </div>
            ))}
          </div>

          {/* Room Actions */}
          <div className="sb-section">
            <div className="sb-title">Room Actions</div>
            <button className="sb-action-btn" onClick={()=>setShowInvite(true)}>
              <span>👥</span> Invite Partner
            </button>
            <button className="sb-action-btn" onClick={()=>setCuddleMode(c=>!c)}>
              <span>♡</span> {cuddleMode?"Exit Cuddle Mode":"Cuddle Mode"}
            </button>
            <button className="sb-action-btn" onClick={()=>setShowMemory(true)}>
              <span>🎞</span> Movie Memory Card
            </button>
            <button className="sb-action-btn sb-leave">
              <span>⬡</span> Leave Room
            </button>
          </div>
        </div>
      </div>

      {/* ── BOTTOM BAR ── */}
      <div className="bottom-bar">
        <div style={{display:"flex",alignItems:"center"}}>
          <span className="rc-lbl">Room Code:</span>
          <span className="rc-val">7GHT-KL2M</span>
          <button className="copy-btn" title="Copy">⎘</button>
        </div>
        <div className="conn-pill"><div className="conn-dot"/>Connected</div>
      </div>

      {/* ── MODALS ── */}

      {showInvite&&(
        <div className="overlay" onClick={()=>setShowInvite(false)}>
          <div className="modal" onClick={e=>e.stopPropagation()}>
            <button className="modal-close" onClick={()=>setShowInvite(false)}>✕</button>
            <div className="modal-title">Invite to Cinema</div>
            <div className="modal-sub">Share this room with your person</div>
            <div className="inv-code">7GHT-KL2M</div>
            <div className="inv-link">connektion.app/cinema/7GHT-KL2M</div>
            <button className="big-btn" onClick={()=>setShowInvite(false)}>Copy Link</button>
          </div>
        </div>
      )}

      {showMemory&&(
        <div className="overlay" onClick={()=>setShowMemory(false)}>
          <div className="mem-card" onClick={e=>e.stopPropagation()}>
            <div className="mem-t">Movie Night Memory</div>
            <div className="mem-movie">The Notebook</div>
            <div className="mem-date">June 10, 2026</div>
            <div className="mem-grid">
              <div className="mem-stat"><div className="msn">7</div><div className="msl">Connection Moments</div></div>
              <div className="mem-stat"><div className="msn">23</div><div className="msl">Messages Shared</div></div>
              <div className="mem-stat"><div className="msn">1:42:17</div><div className="msl">Favourite Scene</div></div>
              <div className="mem-stat"><div className="msn">12</div><div className="msl">Reactions Sent</div></div>
            </div>
            <div className="mem-score">84</div>
            <div className="mem-score-lbl">Connection Score</div>
            <div className="mem-tl">♡ Saved To Relationship Timeline</div>
            <button className="big-btn" style={{marginTop:16}} onClick={()=>setShowMemory(false)}>Close</button>
          </div>
        </div>
      )}

      {showSource&&(
        <div className="overlay" onClick={()=>setShowSource(false)}>
          <div className="modal" style={{textAlign:"left"}} onClick={e=>e.stopPropagation()}>
            <button className="modal-close" onClick={()=>setShowSource(false)}>✕</button>
            <div className="modal-title" style={{textAlign:"center"}}>Load Video</div>
            <div className="modal-sub" style={{textAlign:"center"}}>Paste a URL or pick a demo source</div>
            <label className="src-lbl">Video URL (MP4, HLS .m3u8, YouTube, Vimeo)</label>
            <input className="src-in" placeholder="https://example.com/movie.mp4"
              value={srcInput} onChange={e=>setSrcInput(e.target.value)}
              onKeyDown={e=>e.key==="Enter"&&loadVideo()}/>
            <div className="src-opts">
              {[
                {lbl:"MP4 Demo",url:"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},
                {lbl:"HLS Stream",url:"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"},
              ].map(o=>(
                <button key={o.lbl} className="src-opt" onClick={()=>setSrcInput(o.url)}>{o.lbl}</button>
              ))}
            </div>
            <button className="big-btn" onClick={loadVideo}>Load & Play</button>
          </div>
        </div>
      )}

      {/* Sidebar backdrop on mobile */}
      {sidebarOpen&&(
        <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.6)",zIndex:89}}
          onClick={()=>setSidebarOpen(false)}/>
      )}
    </div>
  );
}