// Tablet — Incognito / Private mode
// Window-level: re-themes chrome, presents a dedicated NTP, isolates tabs.
// Uses violet accent + "mask" glyph as the universal private-mode signal.

// Incognito-mode color tokens — violet/indigo theme that's clearly distinct
// from regular dark mode without being garish.
const PRIV_BG        = '#0E0B17';
const PRIV_SURFACE   = '#1A1426';
const PRIV_SURFACE_2 = '#221A33';
const PRIV_BORDER    = 'rgba(167,139,250,0.18)';
const PRIV_BORDER_SOFT = 'rgba(167,139,250,0.10)';
const PRIV_FG        = '#EDE9FE';
const PRIV_FG_MUTED  = 'rgba(237,233,254,0.62)';
const PRIV_FG_DIM    = 'rgba(237,233,254,0.36)';
const PRIV_ACCENT    = '#A78BFA';
const PRIV_ACCENT_2  = '#C4B5FD';

// Mask glyph — universal incognito signal
function IcMask({ s = 18 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 12c0-1.5 1-2.5 3.5-2.5h3c1 0 1.5.5 1.5 1.5v.5c0 1.5-1 3-3.5 3S2 13.5 2 12z"/>
      <path d="M22 12c0-1.5-1-2.5-3.5-2.5h-3c-1 0-1.5.5-1.5 1.5v.5c0 1.5 1 3 3.5 3S22 13.5 22 12z"/>
      <path d="M10 11.5c.5-.5 1-.5 2-.5s1.5 0 2 .5"/>
      <path d="M4 9.5c.5-2.5 2-4.5 4-4.5h8c2 0 3.5 2 4 4.5"/>
    </svg>
  );
}

// Top tab strip for Incognito — darker, violet-tinted, with prominent mask badge
function TPrivateTabStrip({ tabs, activeId, onActivate, onClose, onNewTab, onToggleSidebar, sidebarOpen, currentUrl, compact = false, onExpand, onExitPrivate, onMore }) {
  const moreRef = React.useRef(null);
  const handleMore = (e) => {
    e.stopPropagation();
    if (onMore && moreRef.current) onMore(moreRef.current.getBoundingClientRect());
  };
  if (compact) {
    return (
      <div onClick={onExpand} style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '6px 14px', borderBottom: '1px solid ' + PRIV_BORDER_SOFT,
        background: 'rgba(14,11,23,0.82)', backdropFilter: 'blur(14px)',
        flexShrink: 0, minHeight: 36, cursor: 'pointer',
      }}>
        <button onClick={(e) => { e.stopPropagation(); onToggleSidebar && onToggleSidebar(); }} style={privIconBtn(false, 26)} aria-label="Sidebar">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>
        </button>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            maxWidth: 360, padding: '4px 14px 4px 8px',
            background: PRIV_SURFACE_2, border: '1px solid ' + PRIV_BORDER,
            borderRadius: 999,
          }}>
            <span style={{ color: PRIV_ACCENT, display: 'grid', placeItems: 'center' }}><IcMask s={12}/></span>
            <span style={{
              fontSize: 12, fontWeight: 500, color: PRIV_FG,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.01em', maxWidth: 280,
            }}>{currentUrl}</span>
          </div>
        </div>
        <button style={privIconBtn(false, 26)} aria-label="More" ref={moreRef} onClick={handleMore}>{MIc.more({ s: 14 })}</button>
      </div>
    );
  }
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '8px 14px', borderBottom: '1px solid ' + PRIV_BORDER_SOFT,
      background: PRIV_BG, flexShrink: 0, minHeight: 50, position: 'relative',
    }}>
      {/* violet glow stripe on top edge */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: 'linear-gradient(90deg, transparent, ' + PRIV_ACCENT + '55, transparent)',
      }}/>

      <button onClick={onToggleSidebar} style={privIconBtn(sidebarOpen)} aria-label="Sidebar">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>
      </button>
      <button style={privIconBtn(false)} aria-label="Back">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
      </button>
      <button style={privIconBtn(false)} aria-label="Forward">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </button>

      {/* Mode badge — clear, always-visible "you are in Private" indicator */}
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '5px 10px 5px 8px',
        background: 'rgba(167,139,250,0.14)', border: '1px solid ' + PRIV_BORDER,
        borderRadius: 999, flexShrink: 0,
      }}>
        <span style={{ color: PRIV_ACCENT, display: 'grid', placeItems: 'center' }}><IcMask s={13}/></span>
        <span style={{ fontSize: 11, fontWeight: 600, color: PRIV_ACCENT_2, letterSpacing: '0.04em', fontFamily: 'Geist, Inter, sans-serif' }}>Private</span>
      </div>

      {/* tabs */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 4, flex: 1,
        overflowX: 'auto', minWidth: 0, scrollbarWidth: 'none',
      }}>
        {tabs.map(t => {
          const active = t.id === activeId;
          return (
            <button key={t.id} onClick={() => onActivate && onActivate(t.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '7px 10px 7px 8px', minWidth: 0, maxWidth: 220,
              background: active ? PRIV_SURFACE : 'transparent',
              border: '1px solid ' + (active ? PRIV_BORDER : 'transparent'),
              borderRadius: 10, color: active ? PRIV_FG : PRIV_FG_MUTED,
              cursor: 'pointer', fontFamily: 'inherit', flexShrink: 1,
            }}>
              <span style={{
                width: 16, height: 16, borderRadius: 4, background: t.favBg || PRIV_SURFACE_2,
                color: t.favColor || '#fff', display: 'grid', placeItems: 'center',
                fontSize: 9, fontWeight: 700, flexShrink: 0,
              }}>{t.fav}</span>
              <span style={{ fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 }}>{t.title}</span>
              {active && (
                <span onClick={e => { e.stopPropagation(); onClose && onClose(t.id); }} style={{ color: PRIV_FG_DIM, marginLeft: 2, width: 14, height: 14, display: 'grid', placeItems: 'center', borderRadius: 4 }}>
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
                </span>
              )}
            </button>
          );
        })}
        <button onClick={onNewTab} style={{ ...privIconBtn(false), width: 28, height: 28, marginLeft: 4, flexShrink: 0 }} aria-label="New tab">{MIc.plus({ s: 14 })}</button>
      </div>

      {/* URL pill */}
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '7px 14px', minWidth: 0, flex: 1, maxWidth: 480,
        background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
        borderRadius: 10, color: PRIV_FG, cursor: 'pointer',
      }}>
        <span style={{ color: PRIV_ACCENT }}><IcMask s={13}/></span>
        <span style={{
          flex: 1, fontSize: 12.5, color: PRIV_FG_MUTED,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          fontFamily: 'JetBrains Mono, monospace',
        }}>{currentUrl}</span>
        <span style={{ fontSize: 10, color: PRIV_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>⌘L</span>
      </div>

      {/* Exit private — explicit affordance to leave the mode */}
      <button onClick={onExitPrivate} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '0 10px', height: 32, borderRadius: 8,
        background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
        color: PRIV_FG_MUTED, cursor: 'pointer', fontSize: 11, fontWeight: 500, fontFamily: 'inherit',
      }} aria-label="Exit private">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
        Exit
      </button>
      <button ref={moreRef} onClick={handleMore} style={privIconBtn(false)} aria-label="More">{MIc.more({ s: 18 })}</button>
    </div>
  );
}

// Private NTP — minimalist, no recents/briefing (incognito doesn't show history)
function TPrivateNTP({ landscape = true }) {
  return (
    <div style={{
      flex: 1, minHeight: 0, overflow: 'auto',
      background: 'radial-gradient(ellipse at 50% 20%, #1a1228 0%, ' + PRIV_BG + ' 60%)',
      color: PRIV_FG, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        maxWidth: 680, margin: '0 auto', width: '100%',
        padding: landscape ? '80px 40px 40px' : '64px 28px 40px',
        boxSizing: 'border-box', flex: 1, display: 'flex', flexDirection: 'column',
      }}>
        {/* Big mask glyph + heading */}
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <div style={{ display: 'grid', placeItems: 'center', marginBottom: 22 }}>
            <div style={{
              width: 92, height: 92, borderRadius: 26,
              background: 'linear-gradient(135deg, ' + PRIV_ACCENT + '22, ' + PRIV_ACCENT + '08)',
              border: '1px solid ' + PRIV_BORDER,
              display: 'grid', placeItems: 'center', color: PRIV_ACCENT_2,
              boxShadow: '0 10px 40px -10px rgba(167,139,250,0.4)',
            }}>
              <IcMask s={44}/>
            </div>
          </div>
          <div style={{
            fontSize: 12, color: PRIV_ACCENT, fontFamily: 'JetBrains Mono, monospace',
            letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600,
          }}>Private window</div>
          <div style={{
            fontFamily: "'Instrument Serif', Georgia, serif", fontSize: landscape ? 52 : 42,
            lineHeight: 1.05, letterSpacing: '-0.02em', marginTop: 12, fontStyle: 'italic',
            fontWeight: 400, color: PRIV_FG,
          }}>You're browsing in private.</div>
          <div style={{
            fontSize: 14, color: PRIV_FG_MUTED, marginTop: 12,
            lineHeight: 1.55, maxWidth: 480, margin: '12px auto 0',
          }}>
            Pages you visit, form data, and search history won't be saved here. Downloads and bookmarks you make will be kept.
          </div>
        </div>

        {/* Search pill */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '14px 20px', marginBottom: 36,
          background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER,
          borderRadius: 16,
          boxShadow: '0 12px 32px rgba(0,0,0,0.4)',
        }}>
          <span style={{ color: PRIV_ACCENT }}>{MIc.search({ s: 17 })}</span>
          <span style={{ flex: 1, fontSize: 14.5, color: PRIV_FG_MUTED }}>Search privately — no history saved</span>
          <span style={{ fontSize: 10.5, color: PRIV_FG_DIM, fontFamily: 'JetBrains Mono, monospace', padding: '3px 8px', border: '1px solid ' + PRIV_BORDER_SOFT, borderRadius: 5 }}>⌘K</span>
        </div>

        {/* What's protected vs. what's not — honest explainer */}
        <div style={{
          display: 'grid', gridTemplateColumns: landscape ? '1fr 1fr' : '1fr', gap: 14,
        }}>
          <div style={{
            padding: '16px 18px', background: PRIV_SURFACE,
            border: '1px solid ' + PRIV_BORDER_SOFT, borderRadius: 14,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <span style={{
                width: 22, height: 22, borderRadius: 11,
                background: 'rgba(110,231,183,0.18)', color: M_ACCENT,
                display: 'grid', placeItems: 'center',
              }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              </span>
              <span style={{ fontSize: 13, fontWeight: 600, color: PRIV_FG }}>What's private on this device</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {['Browsing history', 'Search queries', 'Cookies & site data', 'Form autofill'].map(t => (
                <div key={t} style={{ fontSize: 12.5, color: PRIV_FG_MUTED, paddingLeft: 30, position: 'relative' }}>
                  <span style={{ position: 'absolute', left: 12, top: 7, width: 4, height: 4, borderRadius: 2, background: M_ACCENT }}/>
                  {t}
                </div>
              ))}
            </div>
          </div>
          <div style={{
            padding: '16px 18px', background: PRIV_SURFACE,
            border: '1px solid ' + PRIV_BORDER_SOFT, borderRadius: 14,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <span style={{
                width: 22, height: 22, borderRadius: 11,
                background: 'rgba(251,191,36,0.18)', color: '#FBBF24',
                display: 'grid', placeItems: 'center',
              }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0z"/></svg>
              </span>
              <span style={{ fontSize: 13, fontWeight: 600, color: PRIV_FG }}>What it doesn't hide</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {['Your network operator', 'Sites you visit', 'Your employer', 'Your Ajna identity if you sign in'].map(t => (
                <div key={t} style={{ fontSize: 12.5, color: PRIV_FG_MUTED, paddingLeft: 30, position: 'relative' }}>
                  <span style={{ position: 'absolute', left: 12, top: 7, width: 4, height: 4, borderRadius: 2, background: '#FBBF24' }}/>
                  {t}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Identity row */}
        <div style={{
          marginTop: 18, padding: '12px 14px',
          background: 'rgba(167,139,250,0.06)', border: '1px solid ' + PRIV_BORDER_SOFT,
          borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: PRIV_SURFACE_2, color: PRIV_ACCENT,
            display: 'grid', placeItems: 'center',
          }}><IcMask s={16}/></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: PRIV_FG }}>Signed out in this window</div>
            <div style={{ fontSize: 11, color: PRIV_FG_MUTED, marginTop: 2 }}>Ajna identity, chat, and mesh are unavailable here. <a href="#" style={{ color: PRIV_ACCENT_2, textDecoration: 'none' }}>Why?</a></div>
          </div>
          <button style={{
            padding: '6px 12px', fontSize: 11.5, fontWeight: 500,
            background: PRIV_SURFACE, color: PRIV_FG,
            border: '1px solid ' + PRIV_BORDER_SOFT, borderRadius: 999,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Manage</button>
        </div>
      </div>
    </div>
  );
}

// Tabs grid styled for private mode
function TPrivateTabs({ landscape = true, onExitPrivate }) {
  const tabs = [
    { title: 'Search results',          fav: 'D', bg: '#7C3AED', url: 'duckduckgo.com/?q=…',     hint: 'No history' },
    { title: 'Wikipedia · Ajna chakra', fav: 'W', bg: '#000',    url: 'en.wikipedia.org/wiki/…', hint: 'Read 4m' },
    { title: 'Airline · MUC → SFO',     fav: 'A', bg: '#0EA5E9', url: 'lh.com/booking',          hint: 'Private booking' },
  ];
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: landscape ? '28px 40px 80px' : '24px 24px 80px', background: PRIV_BG, color: PRIV_FG }}>
      {/* Tab-group switcher — mirror of regular tabs page */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap',
        padding: 4, background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
        borderRadius: 999, alignSelf: 'flex-start', width: 'fit-content', marginBottom: 20,
      }}>
        <button onClick={onExitPrivate} style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 12px', borderRadius: 999,
          background: 'transparent', color: PRIV_FG_MUTED,
          border: 0, cursor: 'pointer', fontFamily: 'inherit',
          fontSize: 12, fontWeight: 500,
        }}>
          Tabs
          <span style={{ fontSize: 10, color: PRIV_FG_DIM, fontFamily: 'JetBrains Mono, monospace', padding: '0 5px' }}>6</span>
        </button>
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 12px', borderRadius: 999,
          background: 'rgba(167,139,250,0.18)', color: PRIV_ACCENT_2,
          border: 0, cursor: 'pointer', fontFamily: 'inherit',
          fontSize: 12, fontWeight: 500,
        }}>
          <IcMask s={12}/> Private
          <span style={{ fontSize: 10, color: PRIV_ACCENT, fontFamily: 'JetBrains Mono, monospace', padding: '0 5px', borderRadius: 5, background: 'rgba(0,0,0,0.25)' }}>{tabs.length}</span>
        </button>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(167,139,250,0.18)', color: PRIV_ACCENT, display: 'grid', placeItems: 'center' }}><IcMask s={15}/></div>
          <div style={{ fontSize: 22, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.02em' }}>
            Private tabs <span style={{ color: PRIV_FG_DIM, fontWeight: 400 }}>· {tabs.length}</span>
          </div>
        </div>
        <button style={{
          padding: '6px 12px', borderRadius: 999, fontSize: 11.5, fontWeight: 500,
          background: PRIV_SURFACE, color: PRIV_FG,
          border: '1px solid ' + PRIV_BORDER_SOFT, cursor: 'pointer',
        }}>Close all</button>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: landscape ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
        gap: 16,
      }}>
        {tabs.map((t, i) => (
          <div key={i} style={{
            aspectRatio: landscape ? '4/3' : '3/4',
            background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
            borderRadius: 14, overflow: 'hidden', display: 'flex', flexDirection: 'column',
            cursor: 'pointer',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderBottom: '1px solid ' + PRIV_BORDER_SOFT }}>
              <MTile size={18} bg={t.bg} color="#fff" label={t.fav} radius={4}/>
              <div style={{ fontSize: 11, color: PRIV_FG_DIM, fontFamily: 'JetBrains Mono, monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.url}</div>
              <span style={{ color: PRIV_ACCENT }}><IcMask s={12}/></span>
            </div>
            <div style={{ flex: 1, padding: 16, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: PRIV_FG, lineHeight: 1.3 }}>{t.title}</div>
              <div style={{ fontSize: 11, color: PRIV_FG_MUTED, fontFamily: 'JetBrains Mono, monospace' }}>{t.hint}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 24, padding: 18, borderRadius: 12,
        background: 'rgba(167,139,250,0.06)', border: '1px solid ' + PRIV_BORDER_SOFT,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <span style={{ color: PRIV_ACCENT }}><IcMask s={20}/></span>
        <div style={{ flex: 1, fontSize: 12.5, color: PRIV_FG_MUTED, lineHeight: 1.45 }}>
          Tabs in this window are isolated from your regular tabs. Closing the window discards them — they won't appear in history or sync.
        </div>
      </div>
    </div>
  );
}

// Private sidebar — simplified, no chat/mesh/spaces (signed out in this window)
function TPrivateSidebar({ screen, onPick, onExit }) {
  return (
    <aside style={{
      width: 220, flexShrink: 0,
      background: '#0a0716',
      borderRight: '1px solid ' + PRIV_BORDER_SOFT,
      padding: '12px 10px',
      display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0, overflow: 'auto',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '6px 10px 10px', borderBottom: '1px solid ' + PRIV_BORDER_SOFT, marginBottom: 4,
      }}>
        <span style={{ color: PRIV_ACCENT }}><IcMask s={16}/></span>
        <span style={{ fontSize: 12, fontWeight: 600, color: PRIV_ACCENT_2, letterSpacing: '0.03em' }}>Private window</span>
      </div>

      <div>
        <div style={{
          fontSize: 10, color: PRIV_FG_DIM, letterSpacing: '0.12em',
          textTransform: 'uppercase', fontWeight: 600, padding: '4px 11px 6px',
        }}>This window</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {[
            { id: 'private',      icon: MIc.home({ s: 18 }),     label: 'Private home' },
            { id: 'private-tabs', icon: MIc.tabs({ s: 18 }),     label: 'Private tabs', hint: '3' },
          ].map(it => {
            const active = screen === it.id;
            return (
              <button key={it.id} onClick={() => onPick(it.id)} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '9px 11px', width: '100%',
                borderRadius: 10, border: 0, cursor: 'pointer',
                background: active ? 'rgba(167,139,250,0.12)' : 'transparent',
                color: active ? PRIV_FG : PRIV_FG_MUTED,
                fontFamily: 'inherit', textAlign: 'left',
              }}>
                <span style={{ color: active ? PRIV_ACCENT : PRIV_FG_MUTED, display: 'grid', placeItems: 'center', flexShrink: 0 }}>{it.icon}</span>
                <span style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{it.label}</span>
                {it.hint && <span style={{ fontSize: 10, color: PRIV_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{it.hint}</span>}
              </button>
            );
          })}
        </div>
      </div>

      <div>
        <div style={{
          fontSize: 10, color: PRIV_FG_DIM, letterSpacing: '0.12em',
          textTransform: 'uppercase', fontWeight: 600, padding: '4px 11px 6px',
        }}>Unavailable here</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {[
            { icon: MIc.chat({ s: 18 }), label: 'Chat' },
            { icon: MIc.mesh({ s: 18 }), label: 'Mesh' },
            { icon: MIc.files({ s: 18 }), label: 'Files' },
            { icon: MIc.calls({ s: 18 }), label: 'Calls' },
          ].map((it, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '9px 11px', borderRadius: 10,
              color: PRIV_FG_DIM, opacity: 0.55,
            }}>
              <span style={{ display: 'grid', placeItems: 'center', flexShrink: 0 }}>{it.icon}</span>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{it.label}</span>
              <span style={{ color: PRIV_FG_DIM, display: 'grid', placeItems: 'center' }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></svg>
              </span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 'auto', padding: '8px 8px 4px', borderTop: '1px solid ' + PRIV_BORDER_SOFT }}>
        <button onClick={onExit} style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 10px', borderRadius: 10,
          background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
          color: PRIV_FG, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
        }}>
          <span style={{ color: PRIV_FG_MUTED, display: 'grid', placeItems: 'center' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
          </span>
          <span style={{ flex: 1, fontSize: 12.5, fontWeight: 500 }}>Exit private window</span>
        </button>
      </div>
    </aside>
  );
}

// Confirmation toast that appears when entering private mode
function TPrivateEntryToast() {
  return (
    <div style={{
      position: 'absolute', top: 86, left: '50%', transform: 'translateX(-50%)',
      padding: '10px 16px 10px 12px', borderRadius: 12,
      background: 'rgba(26,18,40,0.94)', border: '1px solid ' + PRIV_BORDER,
      backdropFilter: 'blur(12px)', color: PRIV_FG,
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontSize: 12.5, fontFamily: 'inherit',
      boxShadow: '0 12px 36px -10px rgba(167,139,250,0.4)',
      animation: 'tFade 240ms ease', zIndex: 70, pointerEvents: 'none',
    }}>
      <span style={{ color: PRIV_ACCENT, display: 'grid', placeItems: 'center' }}><IcMask s={14}/></span>
      <span style={{ fontWeight: 600 }}>Private window opened</span>
      <span style={{ color: PRIV_FG_MUTED }}>· history & cookies won't be saved here</span>
    </div>
  );
}

// Helpers
function privIconBtn(active, size = 32) {
  return {
    width: size, height: size, borderRadius: 8,
    background: active ? 'rgba(167,139,250,0.14)' : 'transparent',
    border: 0, color: active ? PRIV_FG : PRIV_FG_MUTED,
    display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0,
  };
}

Object.assign(window, {
  PRIV_BG, PRIV_SURFACE, PRIV_SURFACE_2, PRIV_BORDER, PRIV_BORDER_SOFT,
  PRIV_FG, PRIV_FG_MUTED, PRIV_FG_DIM, PRIV_ACCENT, PRIV_ACCENT_2,
  IcMask, TPrivateTabStrip, TPrivateNTP, TPrivateTabs, TPrivateSidebar,
  TPrivateEntryToast, privIconBtn,
});