:root { --blu:#17365D; --arancio:#E8762B; --fondo:#f5f6f8; --bordo:#dde1e7; --testo:#1d2430; --tenue:#6b7480; --verde:#2e8540; --rosso:#C00000; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif; color:var(--testo); background:var(--fondo); }
button { font:inherit; cursor:pointer; border:1px solid var(--bordo); background:#fff; border-radius:8px; padding:.45rem .8rem; }
button.primario { background:var(--blu); color:#fff; border-color:var(--blu); }
button.link { border:none; background:none; color:var(--blu); padding:.2rem .3rem; }
button:disabled { opacity:.5; cursor:wait; }
input, select, textarea { font:inherit; border:1px solid var(--bordo); border-radius:8px; padding:.5rem .6rem; width:100%; background:#fff; }
label { display:block; font-size:.85rem; color:var(--tenue); margin:.4rem 0; }
label input, label select { margin-top:.2rem; color:var(--testo); }
.errore { color:var(--rosso); }
.tenue { color:var(--tenue); font-size:.85rem; }
[hidden] { display:none !important; }

/* accesso */
.login { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg, var(--blu), #0d2140); }
.login-box { background:#fff; padding:2rem 2.2rem; border-radius:14px; width:min(380px, 92vw); box-shadow:0 20px 50px rgba(0,0,0,.25); }
.login-box h1 { margin:0; color:var(--blu); } .login-box h1 span, .marchio span { color:var(--arancio); }
.login-box .sotto { margin:.2rem 0 1.2rem; color:var(--tenue); }
.login-box button { width:100%; margin-top:1rem; background:var(--blu); color:#fff; }

/* struttura */
.app { display:grid; grid-template-columns: 290px 1fr; height:100vh; }
.barra { background:#fff; border-right:1px solid var(--bordo); display:flex; flex-direction:column; padding:1rem; gap:.6rem; min-height:0; }
.marchio { font-weight:700; font-size:1.25rem; color:var(--blu); }
.azioni-barra { display:flex; gap:.4rem; } .azioni-barra .primario { flex:1; }
.albero { flex:1; overflow:auto; min-height:0; }
.albero details { margin:.15rem 0; } .albero summary { cursor:pointer; padding:.35rem .3rem; border-radius:6px; font-weight:600; }
.albero summary small { color:var(--tenue); font-weight:400; }
.albero .gruppo { margin:.6rem .3rem .2rem; font-size:.75rem; text-transform:uppercase; color:var(--tenue); }
.voce-chat { display:block; padding:.35rem .5rem .35rem 1.4rem; border-radius:6px; color:var(--testo); text-decoration:none; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voce-chat:hover { background:var(--fondo); } .voce-chat.attiva { background:#e8eef7; color:var(--blu); font-weight:600; }
.voce-chat.da-aggiornare::after { content:" ●"; color:var(--arancio); }
.crediti { border:1px solid var(--bordo); border-radius:10px; padding:.6rem .7rem; }
.crediti-riga { display:flex; align-items:baseline; gap:.4rem; } .crediti-riga strong { font-size:1.4rem; color:var(--verde); }
.crediti.basso .crediti-riga strong { color:var(--rosso); }
.maturazione { height:6px; background:#eef0f3; border-radius:3px; margin:.4rem 0 .2rem; overflow:hidden; }
#maturazione-barra { height:100%; width:0; background:var(--arancio); transition:width .4s; }
.crediti small { color:var(--tenue); font-size:.75rem; }
.utente { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem; font-size:.85rem; }

.principale { display:flex; min-height:0; min-width:0; }
.vuoto { margin:auto; text-align:center; color:var(--tenue); }
.vista-chat { display:flex; flex-direction:column; flex:1; min-width:0; }
.testata-chat { display:flex; align-items:center; gap:.6rem; padding:.8rem 1.4rem; background:#fff; border-bottom:1px solid var(--bordo); flex-wrap:wrap; }
.testata-chat h2 { margin:0; font-size:1.15rem; cursor:text; }
.etichetta { background:#e8eef7; color:var(--blu); border-radius:999px; padding:.15rem .6rem; font-size:.8rem; }
.etichetta.tenue { background:#f1f2f4; color:var(--tenue); }
.avviso { margin:.6rem 1.4rem 0; padding:.6rem .8rem; border:1px solid #f0b37e; background:#fff6ee; border-radius:8px; font-size:.9rem; }
.messaggi { flex:1; overflow:auto; padding:1.2rem 1.4rem; }
.msg { max-width:900px; margin:0 auto 1rem; }
.msg.user .corpo { background:var(--blu); color:#fff; border-radius:12px 12px 2px 12px; padding:.7rem .9rem; margin-left:auto; width:fit-content; max-width:80%; }
.msg.assistant .corpo { background:#fff; border:1px solid var(--bordo); border-radius:12px; padding:.6rem 1.1rem; line-height:1.5; overflow-wrap:anywhere; }
.msg.assistant footer { display:flex; gap:.6rem; align-items:center; justify-content:flex-end; font-size:.82rem; margin-top:.2rem; }
.msg .stato { color:var(--tenue); font-style:italic; }
.corpo h2, .corpo h3 { color:var(--blu); margin:.9rem 0 .4rem; } .corpo h2 { border-left:4px solid var(--arancio); padding-left:.5rem; }
.tabella { overflow:auto; margin:.5rem 0; } table { border-collapse:collapse; font-size:.88rem; min-width:60%; }
th { background:#DBE5F1; } th, td { border:1px solid #c9d3e0; padding:.35rem .5rem; text-align:left; vertical-align:top; }
code { background:#f1f2f4; padding:0 .25rem; border-radius:4px; }
.composer { border-top:1px solid var(--bordo); background:#fff; padding:.7rem 1.4rem 1rem; }
.composer textarea { resize:vertical; min-height:3rem; max-height:40vh; }
.composer-azioni { display:flex; justify-content:space-between; align-items:center; margin-top:.4rem; }
.allega { cursor:pointer; color:var(--blu); margin:0; }
.allegati-scelti { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.3rem; }
.chip { background:#f1f2f4; border-radius:999px; padding:.15rem .5rem; font-size:.82rem; } .chip button { border:none; background:none; padding:0 .2rem; }

dialog { border:none; border-radius:14px; padding:1.4rem 1.6rem; width:min(640px, 94vw); box-shadow:0 20px 60px rgba(0,0,0,.3); }
dialog h3 { margin-top:0; color:var(--blu); }
dialog menu { display:flex; justify-content:flex-end; gap:.5rem; padding:0; margin:1rem 0 0; }
fieldset { border:1px solid var(--bordo); border-radius:8px; } label.radio { display:flex; gap:.4rem; align-items:center; color:var(--testo); }
label.radio input { width:auto; }
.griglia2 { display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem; } .griglia2 .larga { grid-column:1 / -1; }
.info-corpo { max-height:60vh; overflow:auto; }

@media (max-width: 800px) { .app { grid-template-columns:1fr; } .barra { max-height:45vh; } .griglia2 { grid-template-columns:1fr; } }