<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dettagli Lead — Rossi Inc</title>
  <!-- Google Fonts: Plus Jakarta Sans -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Plus Jakarta Sans', 'sans-serif'],
          },
          colors: {
            brand: {
              dark: '#1A463C',        /* Verde scuro richiesto */
              darkHover: '#13342D',   /* Variante scura per hover */
              active: 'rgba(255, 255, 255, 0.08)',
              bg: '#F8F9FA',
            }
          }
        }
      }
    }
  </script>
  <style>
    .sidebar-transition {
      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .timeline-line::before {
      content: '';
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 19px;
      width: 1.5px;
      background-color: #E2E8F0;
      z-index: 1;
    }
  </style>
</head>
<body class="bg-brand-bg font-sans text-slate-800 antialiased min-h-screen flex overflow-x-hidden">

  <!-- SIDEBAR -->
  <aside id="sidebar" class="w-64 bg-brand-dark text-white flex flex-col justify-between p-6 border-r border-emerald-950/20 shrink-0 sidebar-transition relative z-10">
    <div class="overflow-hidden">
      <!-- Logo e Intestazione -->
      <div class="mb-10 px-2 flex items-center justify-between">
        <span id="sidebar-logo-text" class="text-lg font-bold tracking-wider text-emerald-50 whitespace-nowrap transition-opacity duration-300">iamcavalli</span>
      </div>

      <!-- Navigazione Principale -->
      <nav class="space-y-1">
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Dashboard</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-brand-active font-medium transition-all duration-200 shadow-sm">
          <svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Lead</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Clienti</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Progetti</span>
        </a>
      </nav>
    </div>

    <!-- Area Inferiore Sidebar -->
    <div class="border-t border-white/10 pt-4 space-y-3 overflow-hidden">
      <div class="flex items-center justify-between px-3 py-1 text-xs text-emerald-200/50 whitespace-nowrap">
        <span class="sidebar-text transition-opacity duration-300">Tema</span>
        <button class="p-1 rounded-full bg-white/5 hover:bg-white/10 text-emerald-200 hover:text-white transition-all duration-200">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M14 12a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        </button>
      </div>
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-300/80 hover:text-red-200 hover:bg-red-950/20 transition-all duration-200 whitespace-nowrap">
        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
        <span class="sidebar-text transition-opacity duration-300">Esci</span>
      </a>
    </div>
  </aside>

  <!-- SEZIONE PRINCIPALE -->
  <div class="flex-1 flex flex-col min-w-0">
    
    <!-- BARRA DI INTESTAZIONE SUPERIORE -->
    <header class="h-16 border-b border-slate-100 bg-white px-8 flex items-center justify-between shrink-0">
      <div class="flex items-center gap-4">
        <!-- Pulsante Apri/Chiudi Sidebar -->
        <button id="sidebar-toggle" class="p-2 -ml-2 rounded-lg text-slate-500 hover:bg-slate-50 hover:text-slate-800 transition-colors focus:outline-none" title="Espandi/Comprimi Sidebar">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M4 12h12M4 18h16"/></svg>
        </button>
        <span class="text-xs text-slate-400 font-medium">Area di Lavoro</span>
      </div>
      <div class="flex items-center gap-4">
        <span class="text-xs font-semibold text-slate-700 bg-slate-100 px-2.5 py-1 rounded-full">Demo Account</span>
      </div>
    </header>

    <!-- AREA DEL CONTENUTO DETTAGLIO -->
    <main class="flex-1 p-8 lg:p-10 max-w-[1400px] w-full mx-auto flex flex-col gap-8 overflow-y-auto">
      
      <!-- INTESTAZIONE DETTAGLIO LEAD -->
      <div class="flex flex-col lg:flex-row justify-between lg:items-start gap-6 border-b border-slate-100 pb-6">
        <div>
          <div class="flex items-center gap-3">
            <h1 class="text-3xl font-bold text-slate-900 tracking-tight">Nome Cognome</h1>
            <span class="px-2.5 py-1 rounded text-[10px] font-semibold bg-purple-50 text-purple-600 border border-purple-100 uppercase tracking-wide">Qualified</span>
          </div>
          <p class="text-sm font-medium text-slate-500 mt-1">Azienda Srl</p>
        </div>
        
        <!-- Pulsantiera Azioni Riorganizzata -->
        <div class="flex flex-wrap gap-2.5">
          <button class="px-4 py-2.5 border border-slate-200 text-slate-600 hover:text-slate-900 hover:bg-slate-50 text-xs font-semibold rounded-lg transition-colors flex items-center gap-2">
            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            Registra Attività
          </button>
          <button class="px-4 py-2.5 border border-slate-200 text-slate-600 hover:text-slate-900 hover:bg-slate-50 text-xs font-semibold rounded-lg transition-colors flex items-center gap-2">
            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"/></svg>
            Aggiungi Transcript
          </button>
          <!-- Azione Chiave Evidenziata -->
          <button class="bg-brand-dark hover:bg-brand-darkHover text-white text-xs font-medium tracking-wide px-5 py-2.5 rounded-lg flex items-center gap-2 transition-all duration-200 shadow-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9.813 15.904L9 21l5.096-.813a2 2 0 001.414-.586l5.086-5.086a2 2 0 000-2.828l-3.212-3.212a2 2 0 00-2.828 0l-5.086 5.086a2 2 0 00-.586 1.414zM16.5 7.5L19.5 10.5"/></svg>
            Genera preventivo
          </button>
          <!-- Azioni di Sistema Discrete -->
          <button class="p-2 border border-slate-200 text-slate-400 hover:text-slate-700 hover:bg-slate-50 rounded-lg transition-colors" title="Modifica">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
          </button>
        </div>
      </div>

      <!-- CORPO DEL DETTAGLIO: COLONNE ASIMMETRICHE -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
        
        <!-- COLONNA DI SINISTRA (1/3): Scheda Anagrafica / Profilo -->
        <div class="lg:col-span-1 bg-white border border-slate-100 rounded-xl p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)] flex flex-col gap-6">
          <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Profilo Lead</h3>
          
          <div class="space-y-4">
            <!-- Email -->
            <div class="flex items-center gap-3.5 text-xs">
              <div class="p-2 bg-slate-50 text-slate-400 rounded-lg">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
              </div>
              <div>
                <p class="text-[10px] text-slate-400 font-medium">Email</p>
                <a href="mailto:test@gmail.com" class="font-semibold text-slate-800 hover:text-brand-dark">test@gmail.com</a>
              </div>
            </div>

            <!-- Telefono -->
            <div class="flex items-center gap-3.5 text-xs">
              <div class="p-2 bg-slate-50 text-slate-400 rounded-lg">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-2.824-1.802-5.14-4.118-6.944-6.94l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
              </div>
              <div>
                <p class="text-[10px] text-slate-400 font-medium">Telefono</p>
                <span class="font-semibold text-slate-800 font-mono">+39 444 3322111</span>
              </div>
            </div>

            <!-- Ultimo Contatto -->
            <div class="flex items-center gap-3.5 text-xs">
              <div class="p-2 bg-slate-50 text-slate-400 rounded-lg">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
              </div>
              <div>
                <p class="text-[10px] text-slate-400 font-medium">Ultimo Contatto</p>
                <span class="font-semibold text-slate-800">23 giorni fa</span>
              </div>
            </div>

            <!-- Prossima Azione -->
            <div class="flex items-center gap-3.5 text-xs">
              <div class="p-2 bg-slate-50 text-slate-400 rounded-lg">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/></svg>
              </div>
              <div>
                <p class="text-[10px] text-slate-400 font-medium">Prossima Azione programmata</p>
                <span class="font-semibold text-slate-400">—</span>
              </div>
            </div>
          </div>

          <!-- Gestione Tag -->
          <div class="border-t border-slate-100 pt-5">
            <p class="text-[10px] uppercase font-bold text-slate-400 tracking-wider mb-2.5">Tag Lead</p>
            <div class="flex flex-wrap gap-1.5">
              <span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-md text-[11px] font-medium">B2B</span>
              <span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-md text-[11px] font-medium">Design</span>
              <button class="inline-flex items-center justify-center w-6 h-6 rounded-full border border-dashed border-slate-200 text-slate-400 hover:text-slate-600 hover:border-slate-400 transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
              </button>
            </div>
          </div>
        </div>

        <!-- COLONNA DI DESTRA (2/3): Timeline, Note, Prossimi Step -->
        <div class="lg:col-span-2 flex flex-col gap-6">
          
          <!-- SEZIONE NOTA RAPIDA & PROSSIMI APPUNTAMENTI -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            
            <!-- Box: Note -->
            <div class="bg-white border border-slate-100 rounded-xl p-5 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
              <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Note</h3>
              <div class="text-xs text-slate-600 leading-relaxed min-h-[80px] p-2.5 bg-slate-50/50 rounded-lg border border-slate-100">
                Brand di fashion design di lusso milanese interessato ad una ristrutturazione completa del canale ecommerce.
              </div>
            </div>

            <!-- Box: Prossimo Reminder -->
            <div class="bg-white border border-slate-100 rounded-xl p-5 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
              <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Prossimo Follow-up</h3>
              <div class="flex flex-col items-center justify-center min-h-[80px] border border-dashed border-slate-200 rounded-lg text-slate-400 p-3">
                <svg class="w-5 h-5 mb-1.5 text-slate-300" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span class="text-[11px] font-medium">Nessun reminder impostato</span>
              </div>
            </div>

          </div>

          <!-- SEZIONE UNIFICATA: STORICO CRONOLOGICO (TIMELINE DELLE INTERAZIONI) -->
          <div class="bg-white border border-slate-100 rounded-xl p-6 shadow-[0_4px_20px_rgba(0,0,0,0.01)]">
            <h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-6">Storico delle Interazioni</h3>
            
            <!-- Griglia Timeline -->
            <div class="relative timeline-line space-y-6">
              
              <!-- Elemento Timeline 1: Transcript Chiamata AI (In Evidenza) -->
              <div class="relative z-10 pl-10 flex gap-4 items-start group">
                <div class="absolute left-0 w-10 h-10 rounded-full bg-brand-dark text-white flex items-center justify-center shadow-md smooth-transition">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"/></svg>
                </div>
                <div class="flex-1 bg-slate-50 border border-slate-100 rounded-xl p-4 hover:border-slate-200 transition-all">
                  <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
                    <div>
                      <span class="text-[10px] font-bold text-brand-dark uppercase tracking-wide">Transcript Chiamata AI</span>
                      <h4 class="text-xs font-bold text-slate-800">Discovery Call - Progetto "SaaS Networker"</h4>
                    </div>
                    <span class="text-[10px] text-slate-400 font-mono">26 Giugno 2026</span>
                  </div>
                  <!-- Sotto-contenuto del transcript -->
                  <div class="text-xs text-slate-600 leading-relaxed pt-2 border-t border-slate-200/60">
                    <p class="font-semibold text-slate-800 mb-1">1. Apertura e Contesto Strategico</p>
                    <p id="transcript-excerpt" class="line-clamp-2">"Tu: Alessandro, grazie per la disponibilità. Sappiamo che hai 3 mesi per lanciare questo SaaS dedicato al Network Marketing. Il tempo è poco, quindi dobbiamo essere precisi. L'integrazione con i sistemi di pagamento e la sitemap sono la nostra prima priorità per..."</p>
                    <p id="transcript-full" class="hidden">"Tu: Alessandro, grazie per la disponibilità. Sappiamo che hai 3 mesi per lanciare questo SaaS dedicato al Network Marketing. Il tempo è poco, quindi dobbiamo essere precisi. L'integrazione con i sistemi di pagamento e la sitemap sono la nostra prima priorità per sbloccare la fase di programmazione. Serviranno grafiche ad hoc e un sistema di onboarding utente rapido."</p>
                    <button onclick="toggleTranscript()" id="btn-transcript-toggle" class="text-[11px] font-bold text-brand-dark hover:text-brand-darkHover mt-2 inline-flex items-center gap-1">
                      Mostra tutto
                    </button>
                  </div>
                </div>
              </div>

              <!-- Elemento Timeline 2: Invio Email -->
              <div class="relative z-10 pl-10 flex gap-4 items-start group">
                <div class="absolute left-0 w-10 h-10 rounded-full bg-slate-100 text-slate-500 border border-slate-200 flex items-center justify-center smooth-transition">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
                </div>
                <div class="flex-1 border border-slate-100 rounded-xl p-4 hover:border-slate-200 transition-all">
                  <div class="flex justify-between items-center gap-2 mb-1.5">
                    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wide">E-mail inviata</span>
                    <span class="text-[10px] text-slate-400 font-mono">23 giorni fa</span>
                  </div>
                  <h4 class="text-xs font-bold text-slate-800 mb-1">Mail di onboarding</h4>
                  <p class="text-xs text-slate-500 leading-relaxed">Inviato pacchetto di benvenuto e richiesta accessi per iniziare l'analisi competitiva del brand.</p>
                </div>
              </div>

              <!-- Elemento Timeline 3: Telefonata -->
              <div class="relative z-10 pl-10 flex gap-4 items-start group">
                <div class="absolute left-0 w-10 h-10 rounded-full bg-slate-100 text-slate-500 border border-slate-200 flex items-center justify-center smooth-transition">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-2.824-1.802-5.14-4.118-6.944-6.94l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
                </div>
                <div class="flex-1 border border-slate-100 rounded-xl p-4 hover:border-slate-200 transition-all">
                  <div class="flex justify-between items-center gap-2 mb-1.5">
                    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Chiamata effettuata</span>
                    <span class="text-[10px] text-slate-400 font-mono">25 giorni fa</span>
                  </div>
                  <h4 class="text-xs font-bold text-slate-800 mb-1">Telefonata di follow-up</h4>
                  <p class="text-xs text-slate-500 leading-relaxed">Chiamata conoscitiva di test per allineamento sulle tempistiche di consegna.</p>
                </div>
              </div>

            </div>
          </div>

        </div>

      </div>

    </main>
  </div>

  <!-- SCRIPT DI LOGICA (Gestione Sidebar e Timeline) -->
  <script>
    // Toggle Sidebar
    const sidebar = document.getElementById('sidebar');
    const toggleButton = document.getElementById('sidebar-toggle');
    const logoText = document.getElementById('sidebar-logo-text');
    const sidebarTexts = document.querySelectorAll('.sidebar-text');

    toggleButton.addEventListener('click', () => {
      const isCollapsed = sidebar.classList.contains('w-20');

      if (isCollapsed) {
        sidebar.classList.remove('w-20');
        sidebar.classList.add('w-64');
        setTimeout(() => {
          logoText.classList.remove('opacity-0');
          sidebarTexts.forEach(text => text.classList.remove('opacity-0'));
        }, 150);
      } else {
        logoText.classList.add('opacity-0');
        sidebarTexts.forEach(text => text.classList.add('opacity-0'));
        sidebar.classList.remove('w-64');
        sidebar.classList.add('w-20');
      }
    });

    // Funzione interattiva per mostrare / nascondere il transcript completo
    function toggleTranscript() {
      const excerpt = document.getElementById('transcript-excerpt');
      const full = document.getElementById('transcript-full');
      const btn = document.getElementById('btn-transcript-toggle');

      if (full.classList.contains('hidden')) {
        full.classList.remove('hidden');
        excerpt.classList.add('hidden');
        btn.innerText = 'Mostra meno';
      } else {
        full.classList.add('hidden');
        excerpt.classList.remove('hidden');
        btn.innerText = 'Mostra tutto';
      }
    }
  </script>
</body>
</html>