// Tablet — Tab Groups (Safari-style)
// Each group is a named, color-coded collection of tabs that lives in the
// sidebar and gets its own grid view. Groups can be local or *shared* —
// a collaborative tab group synced over DIDComm with a peer or team.

// Built-in group color palette — Safari-ish, mapped to design system tokens
const GROUP_COLORS = {
  cyan:    { dot: '#22D3EE', bg: 'rgba(34,211,238,0.14)',  border: 'rgba(34,211,238,0.32)',  fg: '#67E8F9' },
  blue:    { dot: '#60A5FA', bg: 'rgba(96,165,250,0.14)',  border: 'rgba(96,165,250,0.32)',  fg: '#93C5FD' },
  green:   { dot: '#6EE7B7', bg: 'rgba(110,231,183,0.14)', border: 'rgba(110,231,183,0.32)', fg: '#86EFAC' },
  yellow:  { dot: '#FBBF24', bg: 'rgba(251,191,36,0.14)',  border: 'rgba(251,191,36,0.32)',  fg: '#FCD34D' },
  pink:    { dot: '#F472B6', bg: 'rgba(244,114,182,0.14)', border: 'rgba(244,114,182,0.32)', fg: '#F9A8D4' },
  violet:  { dot: '#A78BFA', bg: 'rgba(167,139,250,0.14)', border: 'rgba(167,139,250,0.32)', fg: '#C4B5FD' },
  red:     { dot: '#F87171', bg: 'rgba(248,113,113,0.14)', border: 'rgba(248,113,113,0.32)', fg: '#FCA5A5' },
  graphite:{ dot: '#9CA3AF', bg: 'rgba(156,163,175,0.14)', border: 'rgba(156,163,175,0.32)', fg: '#D1D5DB' },
};

// Mock data — single source of truth for both sidebar + grid views
const TAB_GROUPS = [
  {
    id: 'ipad-launch', name: 'iPad launch', color: 'green',
    shared: true, members: 4, mesh: true,
    tabs: [
      { title: 'Linear · iPad shell milestones', fav: 'L', bg: '#5E6AD2',          url: 'linear.app/ajna-inc/ipad',     hint: 'Active · 18m' },
      { title: 'Figma — Ajna iPad explor.',      fav: 'F', bg: '#000',             url: 'figma.com/file/ajna-ipad',     hint: 'Edited 2h ago' },
      { title: 'GitHub · ajna-inc/browser',      fav: 'G', bg: '#24292F',          url: 'github.com/ajna-inc/browser',  hint: 'PR #284 · 3 reviews' },
      { title: 'Notion · iPad launch checklist', fav: 'N', bg: '#FFF', c: '#000',  url: 'notion.so/ipad-launch',        hint: '12 items' },
      { title: 'TestFlight · Ajna 0.4.2',        fav: 'T', bg: '#0D6EFD',          url: 'appstoreconnect.apple.com',    hint: '3 testers' },
    ],
  },
  {
    id: 'p2p-research', name: 'P2P research', color: 'violet', shared: false,
    tabs: [
      { title: 'arXiv · DIDComm v2',              fav: 'A', bg: '#B31B1B',          url: 'arxiv.org/abs/2402.…',         hint: 'PDF · 28 pages' },
      { title: 'IPFS · Whitepaper',               fav: 'I', bg: '#65C2CB',          url: 'docs.ipfs.tech/concepts',      hint: 'Pinned' },
      { title: 'Hypermedia in HCI — Engelbart',   fav: 'D', bg: '#9CA3AF',          url: 'archive.org/details/engelbart', hint: 'Reading' },
      { title: 'Local-first software',            fav: 'I', bg: '#FF6600',          url: 'inkandswitch.com/local-first', hint: 'Read 12m' },
    ],
  },
  {
    id: 'travel-berlin', name: 'Berlin trip', color: 'cyan', shared: false,
    tabs: [
      { title: 'Booking · Hotel Oderberger',      fav: 'B', bg: '#003580',          url: 'booking.com',                  hint: '4 nights' },
      { title: 'Lufthansa · MUC → BER',           fav: 'L', bg: '#05164d',          url: 'lufthansa.com',                hint: 'Wed 7:40' },
      { title: 'Berghain · door policy',          fav: 'B', bg: '#000',             url: 'berghain.berlin',              hint: 'Bookmark' },
    ],
  },
  {
    id: 'reading',   name: 'Reading list', color: 'yellow', shared: false,
    tabs: [
      { title: 'Designing for peer-to-peer browsers', fav: 'M', bg: '#0E0E0E', url: 'engineering.example.com',     hint: '8 min · saved' },
      { title: 'arXiv · Mediator routing',           fav: 'A', bg: '#B31B1B', url: 'arxiv.org/abs/2402.…',         hint: 'PDF · saved' },
    ],
  },
  {
    id: 'personal',  name: 'Personal', color: 'pink', shared: false,
    tabs: [
      { title: 'Strava · Spring training plan',  fav: 'S', bg: '#FC5200',          url: 'strava.com/athlete',           hint: 'Updated' },
      { title: 'Letterboxd · watchlist',         fav: 'L', bg: '#202830',          url: 'letterboxd.com',               hint: '12 unwatched' },
    ],
  },
];

// ─── Sidebar section — "Tab Groups" with color dots and counts ──
function TTabGroupsSidebarSection({ activeId, onPick, onNewGroup }) {
  return (
    <div>
      <div style={{
        fontSize: 10, color: M_FG_DIM, letterSpacing: '0.12em',
        textTransform: 'uppercase', fontWeight: 600,
        padding: '4px 11px 6px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span>Tab groups</span>
        <button onClick={onNewGroup} style={{
          background: 'transparent', border: 0, color: M_FG_MUTED,
          width: 18, height: 18, padding: 0, display: 'grid', placeItems: 'center',
          cursor: 'pointer', borderRadius: 4,
        }} aria-label="New tab group">{MIc.plus({ s: 12 })}</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        {TAB_GROUPS.map(g => {
          const c = GROUP_COLORS[g.color];
          const active = activeId === g.id;
          return (
            <button key={g.id} onClick={() => onPick(g.id)} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 11px', width: '100%',
              borderRadius: 10, border: 0, cursor: 'pointer',
              background: active ? 'rgba(255,255,255,0.07)' : 'transparent',
              color: active ? M_FG : M_FG_MUTED,
              fontFamily: 'inherit', textAlign: 'left',
            }}>
              <div style={{ position: 'relative', flexShrink: 0 }}>
                <div style={{
                  width: 14, height: 14, borderRadius: 4,
                  background: c.bg, border: '1.5px solid ' + c.dot,
                }}/>
                {g.shared && (
                  <div style={{
                    position: 'absolute', bottom: -3, right: -3, width: 9, height: 9,
                    borderRadius: 4.5, background: '#A78BFA', border: '1.5px solid ' + (active ? '#1d1f24' : '#0d0e11'),
                  }}/>
                )}
              </div>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{g.name}</span>
              <span style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{g.tabs.length}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─── Full Groups overview — grid of group cards (when "Tab groups" picked at top level) ──
function TGroupsOverview({ landscape = true, onOpen, onNewGroup }) {
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: landscape ? '28px 40px 80px' : '24px 24px 80px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ fontSize: 28, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.02em', color: M_FG }}>
          Tab groups <span style={{ color: M_FG_DIM, fontWeight: 400 }}>· {TAB_GROUPS.length}</span>
        </div>
        <button onClick={onNewGroup} style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '8px 14px', borderRadius: 999,
          background: 'linear-gradient(135deg, ' + M_ACCENT + ', ' + M_ACCENT_B + ')',
          color: '#0B0C0F', fontSize: 12.5, fontWeight: 600,
          fontFamily: 'inherit', border: 0, cursor: 'pointer',
        }}>{MIc.plus({ s: 14 })} New tab group</button>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: landscape ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
        gap: 16,
      }}>
        {TAB_GROUPS.map(g => {
          const c = GROUP_COLORS[g.color];
          return (
            <div key={g.id} onClick={() => onOpen(g.id)} style={{
              padding: 16, background: M_SURFACE,
              border: '1px solid ' + M_BORDER, borderRadius: 14,
              cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 12,
              transition: 'border 160ms, background 160ms',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = c.border; e.currentTarget.style.background = c.bg.replace('0.14', '0.06'); }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = M_BORDER; e.currentTarget.style.background = M_SURFACE; }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, background: c.bg, border: '1.5px solid ' + c.dot, flexShrink: 0 }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{g.name}</div>
                  <div style={{ fontSize: 11, color: M_FG_MUTED, marginTop: 2, fontFamily: 'JetBrains Mono, monospace' }}>{g.tabs.length} tabs</div>
                </div>
                {g.shared && (
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                    padding: '2px 7px', borderRadius: 5,
                    background: 'rgba(167,139,250,0.16)', color: '#C4B5FD',
                    fontSize: 9.5, fontFamily: 'JetBrains Mono, monospace', fontWeight: 600, letterSpacing: '0.06em',
                  }}>
                    {MIc.mesh({ s: 10 })} SHARED · {g.members}
                  </span>
                )}
              </div>

              {/* Preview row of stacked favicons */}
              <div style={{ display: 'flex', alignItems: 'center', gap: -8, height: 24 }}>
                {g.tabs.slice(0, 5).map((t, i) => (
                  <div key={i} style={{
                    width: 24, height: 24, borderRadius: 6,
                    background: t.bg, color: t.c || '#fff',
                    display: 'grid', placeItems: 'center',
                    fontSize: 11, fontWeight: 700, fontFamily: 'Geist',
                    marginLeft: i === 0 ? 0 : -6, border: '2px solid ' + M_SURFACE, flexShrink: 0,
                  }}>{t.fav}</div>
                ))}
                {g.tabs.length > 5 && (
                  <div style={{
                    width: 24, height: 24, borderRadius: 6,
                    background: M_SURFACE_2, color: M_FG_MUTED,
                    marginLeft: -6, border: '2px solid ' + M_SURFACE,
                    display: 'grid', placeItems: 'center',
                    fontSize: 9, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace',
                  }}>+{g.tabs.length - 5}</div>
                )}
              </div>

              {/* Most recent tab title — small breadcrumb */}
              <div style={{
                fontSize: 11.5, color: M_FG_MUTED, lineHeight: 1.4,
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                paddingTop: 8, borderTop: '1px solid ' + M_BORDER_SOFT,
              }}>Latest: {g.tabs[0].title}</div>
            </div>
          );
        })}

        {/* Add-new tile */}
        <div onClick={onNewGroup} style={{
          padding: 16, background: 'transparent',
          border: '1px dashed ' + M_BORDER, borderRadius: 14,
          cursor: 'pointer', display: 'grid', placeItems: 'center',
          color: M_FG_MUTED, fontSize: 13, fontFamily: 'inherit', minHeight: 140,
        }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: M_SURFACE, color: M_FG_MUTED, display: 'grid', placeItems: 'center', margin: '0 auto 10px' }}>
              {MIc.plus({ s: 18 })}
            </div>
            <div style={{ fontWeight: 500, color: M_FG }}>New tab group</div>
            <div style={{ fontSize: 11, color: M_FG_DIM, marginTop: 4 }}>Pick a name, color, and tabs</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Single group — header + tab grid ──
function TGroupDetail({ groupId, landscape = true, onBack, onManage }) {
  const g = TAB_GROUPS.find(x => x.id === groupId) || TAB_GROUPS[0];
  const c = GROUP_COLORS[g.color];
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: landscape ? '24px 40px 80px' : '20px 24px 80px' }}>
      {/* breadcrumb back */}
      <button onClick={onBack} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 8px',
        background: 'transparent', border: 0, color: M_FG_MUTED, cursor: 'pointer',
        fontSize: 12, fontFamily: 'inherit', marginBottom: 10,
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
        Tab groups
      </button>

      {/* header card */}
      <div style={{
        padding: '18px 22px', borderRadius: 18,
        background: c.bg + ', ' + M_SURFACE,
        backgroundImage: 'linear-gradient(135deg, ' + c.bg + ', transparent 60%)',
        backgroundColor: M_SURFACE,
        border: '1px solid ' + c.border, marginBottom: 22,
        display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 14,
          background: c.bg, border: '1.5px solid ' + c.dot,
          display: 'grid', placeItems: 'center', flexShrink: 0,
          color: c.fg,
        }}>{MIc.tabs({ s: 22 })}</div>
        <div style={{ flex: 1, minWidth: 200 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontSize: 22, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.02em', color: M_FG }}>{g.name}</div>
            {g.shared && (
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                padding: '2px 7px', borderRadius: 5,
                background: 'rgba(167,139,250,0.16)', color: '#C4B5FD',
                fontSize: 9.5, fontFamily: 'JetBrains Mono, monospace', fontWeight: 600, letterSpacing: '0.06em',
              }}>
                {MIc.mesh({ s: 10 })} SHARED · {g.members}
              </span>
            )}
          </div>
          <div style={{ fontSize: 12, color: M_FG_MUTED, marginTop: 4, fontFamily: 'JetBrains Mono, monospace' }}>
            {g.tabs.length} tabs · {g.shared ? `synced via ${g.mesh ? 'mesh' : 'mediator'} · last update 2m ago` : 'local to this device'}
          </div>
        </div>

        {/* Member avatars on shared groups */}
        {g.shared && (
          <div style={{ display: 'inline-flex' }}>
            {['#F472B6', '#22D3EE', '#FBBF24', '#6EE7B7'].slice(0, g.members).map((bg, i) => (
              <div key={i} style={{
                width: 28, height: 28, borderRadius: 14, background: bg,
                color: '#0B0C0F', display: 'grid', placeItems: 'center',
                fontSize: 10, fontWeight: 700, fontFamily: 'Geist',
                marginLeft: i === 0 ? 0 : -8, border: '2px solid ' + M_SURFACE,
              }}>{['RS','AI','PN','AM'][i]}</div>
            ))}
          </div>
        )}

        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 12px', borderRadius: 8, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, fontSize: 12, fontFamily: 'inherit', cursor: 'pointer' }}>
            {MIc.plus({ s: 13 })} New tab in group
          </button>
          <button onClick={onManage} style={{ width: 34, height: 34, borderRadius: 8, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer' }} aria-label="More">{MIc.more({ s: 16 })}</button>
        </div>
      </div>

      {/* tabs grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: landscape ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)',
        gap: 16,
      }}>
        {g.tabs.map((t, i) => (
          <div key={i} style={{
            aspectRatio: landscape ? '4/3' : '3/4',
            background: M_SURFACE, border: '1px solid ' + M_BORDER,
            borderRadius: 14, overflow: 'hidden', display: 'flex', flexDirection: 'column',
            cursor: 'pointer', position: 'relative',
          }}>
            {/* color spine */}
            <div style={{
              position: 'absolute', top: 0, left: 0, bottom: 0, width: 3,
              background: c.dot, opacity: 0.6,
            }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px 10px 14px', borderBottom: '1px solid ' + M_BORDER_SOFT }}>
              <MTile size={18} bg={t.bg} color={t.c||'#fff'} label={t.fav} radius={4}/>
              <div style={{ fontSize: 11, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.url}</div>
              <span style={{ color: M_FG_DIM, opacity: 0.6 }}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
              </span>
            </div>
            <div style={{ flex: 1, padding: '14px 14px 14px 17px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: M_FG, lineHeight: 1.3 }}>{t.title}</div>
              <div style={{ fontSize: 11, color: M_FG_MUTED, fontFamily: 'JetBrains Mono, monospace' }}>{t.hint}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── "New tab group" dialog ──
function TNewGroupDialog({ onClose, onCreate }) {
  const [name, setName] = React.useState('');
  const [color, setColor] = React.useState('blue');
  const [shared, setShared] = React.useState(false);

  const colors = ['cyan', 'blue', 'green', 'yellow', 'pink', 'violet', 'red', 'graphite'];

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 1000 }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(7,8,10,0.72)', backdropFilter: 'blur(10px)', animation: 'tFade 220ms ease' }}/>
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)', width: 440, maxWidth: '92%',
        background: M_SURFACE, border: '1px solid ' + M_BORDER,
        borderRadius: 18, padding: 22,
        boxShadow: '0 40px 100px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--m-tint)',
        animation: 'tPop 260ms cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: GROUP_COLORS[color].bg, border: '1.5px solid ' + GROUP_COLORS[color].dot,
            color: GROUP_COLORS[color].fg, display: 'grid', placeItems: 'center', flexShrink: 0,
            transition: 'background 200ms, border 200ms',
          }}>{MIc.tabs({ s: 18 })}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 17, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.02em' }}>New tab group</div>
            <div style={{ fontSize: 12, color: M_FG_MUTED, marginTop: 2 }}>Name it, pick a color, and add tabs later.</div>
          </div>
          <button onClick={onClose} style={{
            width: 30, height: 30, borderRadius: 8,
            background: M_BG, border: '1px solid ' + M_BORDER_SOFT,
            color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0,
          }}>{MIc.close({ s: 13 })}</button>
        </div>

        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: M_FG_DIM, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>Name</div>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="e.g. iPad launch"
            autoFocus
            style={{
              width: '100%', padding: '11px 14px', boxSizing: 'border-box',
              background: M_BG, border: '1px solid ' + (name ? GROUP_COLORS[color].border : M_BORDER_SOFT),
              borderRadius: 10, color: M_FG, fontSize: 14, fontFamily: 'inherit',
              outline: 0, transition: 'border 160ms',
            }}
          />
        </div>

        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: M_FG_DIM, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>Color</div>
          <div style={{ display: 'flex', gap: 10 }}>
            {colors.map(k => (
              <button key={k} onClick={() => setColor(k)} style={{
                width: 28, height: 28, borderRadius: 8,
                background: GROUP_COLORS[k].bg,
                border: '1.5px solid ' + (color === k ? '#fff' : GROUP_COLORS[k].dot),
                boxShadow: color === k ? '0 0 0 3px ' + GROUP_COLORS[k].border : 'none',
                cursor: 'pointer', padding: 0, position: 'relative',
              }} aria-label={k}>
                <span style={{
                  position: 'absolute', inset: 4, borderRadius: 4, background: GROUP_COLORS[k].dot, opacity: color === k ? 1 : 0.5,
                }}/>
              </button>
            ))}
          </div>
        </div>

        <div style={{ marginBottom: 22 }}>
          <button onClick={() => setShared(s => !s)} style={{
            display: 'flex', alignItems: 'center', gap: 12, width: '100%',
            padding: '12px 14px', borderRadius: 10,
            background: shared ? 'rgba(167,139,250,0.08)' : M_BG,
            border: '1px solid ' + (shared ? 'rgba(167,139,250,0.32)' : M_BORDER_SOFT),
            color: M_FG, fontFamily: 'inherit', cursor: 'pointer', textAlign: 'left',
            transition: 'background 160ms, border 160ms',
          }}>
            <span style={{
              width: 32, height: 32, borderRadius: 8, flexShrink: 0,
              background: shared ? 'rgba(167,139,250,0.18)' : M_SURFACE_2,
              color: shared ? '#C4B5FD' : M_FG_MUTED,
              display: 'grid', placeItems: 'center',
            }}>{MIc.mesh({ s: 16 })}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>Share with others</div>
              <div style={{ fontSize: 11, color: M_FG_MUTED, marginTop: 2 }}>Sync tabs with peers over DIDComm. Invite after creating.</div>
            </div>
            <div style={{
              width: 38, height: 22, borderRadius: 12,
              background: shared ? 'linear-gradient(135deg, #A78BFA, #7C3AED)' : M_BG,
              border: '1px solid ' + (shared ? 'transparent' : M_BORDER),
              position: 'relative', flexShrink: 0,
            }}>
              <div style={{
                position: 'absolute', top: 2, left: shared ? 18 : 2,
                width: 16, height: 16, borderRadius: 8,
                background: '#fff', transition: 'left 200ms',
              }}/>
            </div>
          </button>
        </div>

        <div style={{ display: 'flex', gap: 10 }}>
          <button onClick={onClose} style={{
            flex: 1, padding: '11px 16px', borderRadius: 12,
            background: M_BG, border: '1px solid ' + M_BORDER_SOFT,
            color: M_FG, fontSize: 13, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
          }}>Cancel</button>
          <button
            onClick={() => onCreate && onCreate({ name: name || 'Untitled group', color, shared })}
            disabled={!name.trim()}
            style={{
              flex: 1, padding: '11px 16px', borderRadius: 12, border: 0,
              background: name.trim() ? 'linear-gradient(135deg,' + M_ACCENT + ',' + M_ACCENT_B + ')' : M_SURFACE_2,
              color: name.trim() ? '#0B0C0F' : M_FG_DIM,
              fontSize: 13, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif',
              cursor: name.trim() ? 'pointer' : 'default',
              boxShadow: name.trim() ? '0 8px 24px -10px rgba(96,165,250,0.5)' : 'none',
            }}>Create group</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  TAB_GROUPS, GROUP_COLORS,
  TTabGroupsSidebarSection, TGroupsOverview, TGroupDetail, TNewGroupDialog,
});