/* ===== PALETTE PROMUP ===== */
  :root{
    --teal:#0ab39c; --teal-d:#099885; --navy:#405189;
    --accent-grad:var(--teal); --accent2:var(--teal);   /* default = colore pieno; i temi brand → gradiente bottoni + 2° accento (menu/chip/icone) */
    --amber:#f7b84b; --orange:#f06548; --blue:#3577f1; --info:#299cdb;
    --teal-ghost:rgba(10,179,156,.12);
    --serif:Georgia,"Times New Roman",serif;
  }
  html[data-theme="light"]{
    --bg:#f3f6f9; --panel:#ffffff; --panel2:#f6f8fb; --elev:#eef2f6;
    --sidebar:#ffffff; --line:#e4e8ee; --line2:#d7dde6;
    --txt:#212529; --mut:#5d6b7a; --mut2:#9aa3b0;
    --logo-pad:transparent; --shadow:0 1px 3px rgba(64,81,137,.06); --sb:#cdd5de; --sb-h:#b4bdc8;
  }
  html[data-theme="dark"]{
    --bg:#14171d; --panel:#1b1f27; --panel2:#1f2430; --elev:#262c38;
    --sidebar:#181b22; --line:#2a3042; --line2:#39435a;
    --txt:#e7e9ec; --mut:#9aa3b0; --mut2:#7b8593;
    --logo-pad:transparent; --shadow:0 1px 3px rgba(0,0,0,.3); --sb:#39435a; --sb-h:#4a5670;
  }
  /* DARK MODE: il logo NON ha più il quadrato chiaro dietro; invertiamo i colori così resta leggibile.
     SOLO il logo PromUp · NON le schermate del CRM in chat (i messaggi sono .msg.ai → niente '.ai img'). */
  html[data-theme="dark"] .brand img,
  html[data-theme="dark"] .top-right .ai img,
  html[data-theme="dark"] .hello img,
  html[data-theme="dark"] #login .lg-logo{ filter:invert(1) hue-rotate(180deg); }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--txt);
       font:15.5px/1.62 Poppins,system-ui,-apple-system,sans-serif;display:flex;overflow:hidden}
  a{color:var(--teal);text-decoration:none}
  .muted{color:var(--mut)}
  svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
  /* gli SVG dei GRAFICI/diagrammi NON sono icone: la regola sopra li renderebbe minuscoli */
  svg.chartsvg{width:100%;height:auto;stroke:none;stroke-width:0}
  svg.piesvg{width:184px;height:184px;stroke:none;stroke-width:0}
  .mermaid svg{width:100%;height:auto}
  button{font-family:inherit}

  /* ===== SIDEBAR ===== */
  #side{width:248px;flex:none;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .18s ease}
  body.collapsed #side{width:60px}
  body.collapsed .side-top{justify-content:center;padding:14px 0 8px}
  body.collapsed .brand{display:none}
  body.collapsed nav{padding:4px 0;align-items:center}
  body.collapsed .newchat,body.collapsed .nav-item{width:38px;height:38px;padding:0;margin:3px auto;justify-content:center;border-radius:12px;gap:0}
  body.collapsed .newchat{margin:8px auto 8px}
  body.collapsed .side-bottom{justify-content:center;padding:12px 0;border-top:0}
  body.collapsed .side-bottom .avatar{width:32px;height:32px;margin:0 auto;flex:none}
  body.collapsed .nav-item svg,body.collapsed .newchat svg,body.collapsed .icon-btn svg{width:18px;height:18px}
  .side-top{display:flex;align-items:center;gap:10px;padding:15px 14px 10px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;overflow:hidden}
  .brand img{width:28px;height:28px;border-radius:7px;background:var(--logo-pad);padding:2px}
  .brand .nm{color:var(--navy);font-size:16px} html[data-theme="dark"] .brand .nm{color:#cdd6f5}
  .collapsed .brand .nm{display:none}
  .icon-btn{margin-left:auto;color:var(--mut);background:transparent;border:0;cursor:pointer;padding:7px;border-radius:9px;display:flex;transition:.12s}
  .icon-btn:hover{background:var(--elev);color:var(--txt)}
  .icon-btn:active{transform:scale(.92)}
  .collapsed .side-top .icon-btn{margin-left:0}

  .newchat{margin:6px 12px 8px;display:flex;align-items:center;gap:11px;padding:6.5px 12px;border:1px solid var(--line2);border-radius:13px;font-size:13.5px;color:var(--txt);cursor:pointer;background:transparent;white-space:nowrap;overflow:hidden;transition:.12s}
  .newchat:hover{background:var(--teal-ghost);border-color:var(--teal);color:var(--teal-d)}
  .newchat:active{transform:translateY(1px)}
  html[data-theme="dark"] .newchat:hover{color:var(--teal)}
  .collapsed .label{display:none}

  nav{padding:4px 12px;display:flex;flex-direction:column;gap:2px}
  .nav-sec{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut2);padding:13px 8px 4px;font-weight:600}
  .collapsed .nav-sec{opacity:0;height:0;padding:0;overflow:hidden}
  .nav-item{display:flex;align-items:center;gap:11px;padding:6.5px 10px;border-radius:13px;font-size:13.5px;color:var(--mut);cursor:pointer;white-space:nowrap;overflow:hidden;transition:.12s}
  .nav-item:hover{background:var(--elev);color:var(--txt)}
  .nav-item:active{transform:scale(.98)}
  .nav-item.active{background:var(--teal-ghost);color:var(--teal-d);font-weight:500}
  html[data-theme="dark"] .nav-item.active{color:var(--accent-soft,#8fe6d6)}
  .nav-item.active svg{stroke:var(--accent2)}
  /* ===== icone sezioni: animazione SEMANTICA all'hover (per-icona) ===== */
  .nav-item svg{transform-origin:50% 50%}
  /* Aggiornamenti: refresh che ruota */
  .nav-item[data-view="updates"]:hover svg{animation:navspin .6s ease}
  @keyframes navspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  /* Home: la casa si posa */
  .nav-item[data-view="chat"]:hover svg{animation:navbounce .6s ease}
  @keyframes navbounce{0%{transform:translateY(-2.5px)}55%{transform:translateY(1px)}100%{transform:translateY(0)}}
  /* Statistiche: le barre crescono (sx→dx) */
  .nav-item[data-view="stats"] svg line{transform-box:fill-box;transform-origin:bottom}
  .nav-item[data-view="stats"]:hover svg line{animation:navgrow .55s ease}
  .nav-item[data-view="stats"]:hover svg line:nth-child(2){animation-delay:.07s}
  .nav-item[data-view="stats"]:hover svg line:nth-child(1){animation-delay:.14s}
  @keyframes navgrow{0%{transform:scaleY(.15)}62%{transform:scaleY(1.12)}100%{transform:scaleY(1)}}
  /* Qualità: disegna la spunta */
  .nav-item[data-view="quality"]:hover svg path{stroke-dasharray:10;stroke-dashoffset:10;animation:navdraw .55s ease forwards}
  @keyframes navdraw{to{stroke-dashoffset:0}}
  /* Cronologia: le lancette fanno un tick (ruotano sul centro) */
  .nav-item[data-view="history"] svg polyline{transform-box:view-box;transform-origin:12px 12px}
  .nav-item[data-view="history"]:hover svg polyline{animation:navtick .6s ease}
  @keyframes navtick{0%{transform:rotate(-42deg)}70%{transform:rotate(8deg)}100%{transform:rotate(0)}}
  /* Knowledge: il libro si apre */
  .nav-item[data-view="kb"]:hover svg{animation:navflip .6s ease;transform-origin:left center}
  @keyframes navflip{0%{transform:rotateY(38deg)}60%{transform:rotateY(-8deg)}100%{transform:rotateY(0)}}
  /* Prompt: i cursori si regolano (su/giù) */
  .nav-item[data-view="prompts"] svg line:nth-child(7),
  .nav-item[data-view="prompts"] svg line:nth-child(8),
  .nav-item[data-view="prompts"] svg line:nth-child(9){transform-box:fill-box}
  .nav-item[data-view="prompts"]:hover svg line:nth-child(7){animation:navslideup .55s ease}
  .nav-item[data-view="prompts"]:hover svg line:nth-child(8){animation:navslidedn .55s ease}
  .nav-item[data-view="prompts"]:hover svg line:nth-child(9){animation:navslideup .55s ease;animation-delay:.06s}
  @keyframes navslideup{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
  @keyframes navslidedn{0%{transform:translateY(0)}50%{transform:translateY(3px)}100%{transform:translateY(0)}}
  /* Apprendimento: la lampadina si accende */
  .nav-item[data-view="learn"]:hover svg{animation:navpulse .6s ease}
  @keyframes navpulse{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
  /* Segnalazioni: lo scudo "su" */
  .nav-item[data-view="reports"]:hover svg{animation:navshield .6s ease}
  @keyframes navshield{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-2px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
  @media (prefers-reduced-motion:reduce){ .nav-item svg,.nav-item svg *{animation:none!important} }

  .side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:11px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:.12s}
  .side-bottom:hover{background:var(--elev)}
  .avatar{width:36px;height:36px;border-radius:10px;background:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:13px;flex:none}
  .avatar.img{overflow:hidden;background:transparent;padding:0;border-radius:50%}   /* icona stile Claude: cerchio, niente spigolo del quadrato */
  .who{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
  .who b{font-size:13.5px;font-weight:600}
  .who span{font-size:11.5px;color:var(--mut)}
  .collapsed .who,.collapsed .side-bottom .chev{display:none}
  .chev{margin-left:auto;color:var(--mut)}

  /* ===== MAIN ===== */
  main{flex:1;display:flex;flex-direction:column;min-width:0}
  .topbar{height:54px;flex:none;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--panel)}
  .mode{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:13px}
  .mode .dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
  .mode svg{color:var(--teal)}   /* icona chat temporanea: colore accent, non grigio */
  .hamb{display:none;background:transparent;border:0;color:var(--txt);cursor:pointer;padding:6px;border-radius:8px}
  .hamb:hover{background:var(--elev)}
  #sideBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:85}
  .mode.learn{color:var(--amber)} .mode.learn .dot{background:var(--amber)}
  .top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
  .ai{display:flex;align-items:center;gap:9px;color:var(--mut);font-size:13px}
  .ai img{width:22px;height:22px;border-radius:6px;background:var(--logo-pad);padding:1px}
  .theme-toggle{background:transparent;border:1px solid var(--line2);color:var(--mut);border-radius:9px;padding:6px 10px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:6px;transition:.12s}
  .theme-toggle:hover{color:var(--txt);border-color:var(--teal)}
  .theme-toggle:active{transform:scale(.96)}

  /* tab della chat (stile Perplexity): Conversazione · Immagini · Link, centrati nella topbar */
  .topbar{position:relative}
  .chat-tabs{position:absolute;left:50%;transform:translateX(-50%);display:none;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:3px}
  .chat-tabs.show{display:flex}
  @media (max-width:900px){ .chat-tabs.show{display:none} }
  .chat-tabs button{background:transparent;border:0;color:var(--mut);font:inherit;font-size:13px;padding:6px 15px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.12s;white-space:nowrap}
  .chat-tabs button svg{width:15px;height:15px}
  .chat-tabs button:hover{color:var(--txt)}
  .chat-tabs button.sel{background:var(--panel);color:var(--teal-d);box-shadow:var(--shadow)}
  html[data-theme="dark"] .chat-tabs button.sel{color:var(--teal)}
  .chat-tabs .cnt{font-size:11.5px;color:var(--mut2)}
  .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .gal img{width:100%;height:142px;object-fit:cover;border:1px solid var(--line);border-radius:11px;cursor:zoom-in;transition:.12s}
  .gal img:hover{border-color:var(--teal)}
  .gal figcaption{margin-top:5px;font-size:11.5px;line-height:1.3;color:var(--mut);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .linklist a{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;color:var(--txt);transition:.12s}
  .linklist a:hover{border-color:var(--teal);background:var(--teal-ghost)}
  .linklist a svg{width:16px;height:16px;color:var(--teal);flex:none}
  .linklist a .u{color:var(--mut2);font-size:12px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
  .tabhead{font-family:var(--serif);font-size:21px;color:var(--navy);margin:4px 0 18px}
  html[data-theme="dark"] .tabhead{color:#e9ecf5}
  .tabempty{color:var(--mut2);text-align:center;padding:48px 0;font-size:14px}

  .view{flex:1;min-height:0;display:none;flex-direction:column;position:relative}
  .view.show{display:flex}