class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 280px;
          background: #f8fafc;
          height: 100vh;
          position: fixed;
          left: 0;
          top: 0;
          border-right: 1px solid #e2e8f0;
          padding: 1.5rem;
          overflow-y: auto;
        }
        .logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-weight: 600;
          color: #1e293b;
          margin-bottom: 2rem;
          cursor: pointer;
        }
        .menu-item {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem;
          border-radius: 0.5rem;
          color: #475569;
          cursor: pointer;
        }
        .menu-item:hover {
          background: #e2e8f0;
          color: #1e40af;
        }
        .menu-item.active {
          background: #dbeafe;
          color: #1e40af;
        }
        .submenu {
          padding-left: 1.5rem;
          margin-top: 0.25rem;
        }
        .submenu-item {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.5rem 0.75rem;
          border-radius: 0.5rem;
          color: #475569;
          cursor: pointer;
        }
        .submenu-item:hover {
          background: #e2e8f0;
        }
        i {
          width: 20px;
          height: 20px;
        }
      </style>
      <a href="/" class="logo">
        <i data-feather="code"></i>
        <span>MON SITE</span>
      </a>
      <div class="collab-note" style="color: #ef4444; font-weight: 500;">
         ⚠️ 100% Indépendant - Aucun lien avec DeepSite
      </div>
<div class="menu-item active">
        <i data-feather="clipboard"></i>
        <span>📋 NOUVELLE TÂCHE</span>
      </div>
      <div class="menu-item">
        <i data-feather="search"></i>
        <span>🔍 RECHERCHER</span>
      </div>
      <div class="menu-item">
        <i data-feather="book"></i>
        <span>📚 BIBLIOTHÈQUE</span>
      </div>
      <div class="menu-item" data-target="code-editor">
        <i data-feather="folder"></i>
        <span>📁 MES PROJETS</span>
      </div>
      <div class="submenu">
        <div class="submenu-item" data-target="code-editor">
          <i data-feather="file-text"></i>
          <span>Fichier 1.html</span>
        </div>
        <div class="submenu-item active" data-target="code-editor">
          <i data-feather="file"></i>
          <span>Fichier 2.css</span>
        </div>
        <div class="submenu-item" data-target="code-editor">
          <i data-feather="code"></i>
          <span>Fichier 3.js</span>
        </div>
      </div>
      <div class="menu-item" data-target="rosalinda-chat">
        <i data-feather="message-circle"></i>
        <span>💬 CHAT ROSALINDA</span>
      </div>
      <div class="menu-item">
        <i data-feather="check-square"></i>
        <span>✅ TOUTES LES TÂCHES</span>
      </div>
`;
  }
}
customElements.define('custom-sidebar', CustomSidebar);