/* Stili di Saccuman AI (i colori dei temi sono in temi.css) */
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.5 "Manrope","Segoe UI",system-ui,-apple-system,sans-serif;display:flex;overflow:hidden}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text);background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;outline:none;width:100%;transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ===== sidebar ===== */
#side{width:290px;min-width:290px;padding:16px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;background:var(--bg2);border-right:1px solid var(--border)}
#side .brand{display:flex;align-items:center;gap:12px;padding:10px 14px 22px}
#side .logo{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--accent) 35%, transparent))}
#side .brand b{font-size:15.5px;font-weight:650;display:block}
#side .brand span{font-size:11.5px;color:var(--muted)}
.navlabel{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:16px 14px 6px}
.nav{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:10px;color:var(--text);border:none;background:none;width:100%;text-align:left;position:relative;transition:background .12s}
.nav:hover{background:color-mix(in srgb, var(--card) 70%, transparent)}
.nav.active{background:var(--card);box-shadow:var(--shadow);font-weight:600}
.nav.active::before{content:"";position:absolute;left:-1px;top:22%;height:56%;width:3.5px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2))}
.nav .ico{width:22px;text-align:center;font-size:16.5px}
.navfoot{margin-top:auto;padding:12px 14px 4px;font-size:11px;line-height:1.5;color:var(--muted);border-top:1px solid var(--border)}
.navfoot b{font-weight:600}
.nav .soon{margin-left:auto;font-size:10.5px;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:2px 9px}
.nav .nav-thinking{margin-left:auto;display:inline-flex;gap:3px;align-items:center;justify-content:flex-end;min-width:1em;text-align:center;color:var(--accent);font-size:12px;font-weight:700;animation:pulse 1.6s ease-in-out infinite}
/* 19/09/2026: il simbolo dice CHI sta pensando — ✳ Claude, >_ Codex, tutti e due
   se lavorano insieme. Il monospazio serve al >_ : in proporzionale si sfalsa. */
.nav .nav-thinking .eng{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1}

/* ===== main ===== */
#main{flex:1;min-width:0;overflow-y:auto;padding:30px 44px 32px;scroll-behavior:smooth}
.crumb{color:var(--muted);font-size:13px;margin-bottom:4px}
.crumb b{color:var(--text);font-weight:600}
h2.title{font-size:27px;font-weight:650;margin:0 0 24px;letter-spacing:-.02em}
.sect{font-weight:650;margin:30px 0 12px;font-size:15.5px;display:flex;align-items:center;gap:8px}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:8px}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;transition:box-shadow .15s}
.kv{color:var(--muted);font-size:12.5px;margin-top:6px}
.big{font-size:24px;font-weight:650;margin-top:4px;letter-spacing:-.02em}
.bar{height:6px;border-radius:4px;background:var(--border);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .5s}
.bar i.hot{background:var(--err)}

/* pills / badges */
.pill{font-size:11.5px;font-weight:600;border-radius:20px;padding:3px 11px;display:inline-flex;align-items:center;gap:6px}
.pill.run{color:var(--accent);background:var(--accent-soft)}
.pill.done{color:var(--ok);background:var(--ok-soft)}
.pill.error,.pill.stopped{color:var(--err);background:var(--err-soft)}
.pill.engine{color:var(--muted);background:var(--card2);border:1px solid var(--border);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent)}
.dot.off{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb, var(--err) 20%, transparent)}
.dot.pulse{animation:pulse 1.4s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* rows */
.row{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 20px;display:flex;align-items:center;gap:16px;margin-bottom:8px;transition:box-shadow .15s}
.row:hover{box-shadow:var(--shadow-lg)}
.row .ico{font-size:21px;width:30px;text-align:center}
.row .rtitle{font-weight:600;font-size:14px}
.row .rsub{color:var(--muted);font-size:12.5px;margin-top:3px}
.row .right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-shrink:0}

/* buttons */
.btn{background:linear-gradient(180deg,var(--card2),var(--card));border:1.5px solid var(--border);border-radius:999px;padding:8px 18px;color:var(--text);font-weight:550;transition:all .13s}
.btn:hover{border-color:var(--muted);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 65%, var(--accent2)));border:none;color:#171614;box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.small{padding:5px 13px;font-size:12.5px;border-radius:999px}
.theme-opt.active{border-color:var(--accent);background:var(--accent-soft)}
.layout-opt.active{border-color:var(--accent);background:var(--accent-soft)}
.btn.danger:hover{border-color:var(--err);color:var(--err)}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:550;color:var(--muted);margin-bottom:6px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:center;gap:9px}
.check input{width:17px;height:17px;accent-color:var(--accent)}

/* agent cards */
.agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.agent-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.agent-card .head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.agent-card .avatar{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.agent-card .avatar.claude{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent)}
.agent-card .avatar.codex{background:var(--card2);color:var(--accent);border:1px solid var(--border)}
.agent-card .aname{font-weight:650;font-size:14.5px}
.agent-card .anote{font-size:12px;color:var(--muted);margin-top:2px}
.agent-card .status{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:6px}
.logincmd{margin-top:12px;background:var(--card2);border:1px dashed var(--border);border-radius:9px;padding:9px 11px;font:11.5px ui-monospace,Consolas,monospace;word-break:break-all;color:var(--muted)}
.logincmd b{display:block;font:inherit;color:var(--text);user-select:all}

/* chat */
/* min-width:0 sui figli della grid: senza, il default e' min-width:auto e una
   colonna 1fr si allarga per contenere il contenuto piu' largo (un blocco di
   codice, un log, un url senza spazi in un fumetto) invece di scrollare in
   orizzontale al suo interno — l'intera pagina esce dalla finestra a destra. */
.chat-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;height:calc(100vh - 150px);min-height:420px}
.chat-list{overflow-y:auto;min-height:0;min-width:0}
.chat-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 13px;margin-bottom:7px;cursor:pointer;transition:all .12s}
.chat-item:hover{box-shadow:var(--shadow)}
.chat-item.active{border-color:var(--accent);background:var(--accent-soft)}
.chat-item .ct{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .cm{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;justify-content:space-between}
#chat-thread{flex:1;min-height:0;min-width:0;overflow-y:auto;scrollbar-gutter:stable;padding:18px 30px 18px 20px;display:flex;flex-direction:column;gap:14px}
/* 04/10/2026: il consiglio non e' piu' una fascia fissa ma un riquadro sospeso
   (luce in alto, ombra morbida), che compare da solo solo quando serve davvero */
#chat-advice{--adv:var(--warn);margin:6px 10px 2px;padding:7px 8px 7px 12px;border-radius:12px;font-size:12px;
  border:1px solid color-mix(in srgb,var(--adv) 28%,var(--border));
  background:linear-gradient(180deg,color-mix(in srgb,var(--adv) 13%,var(--card)) 0%,color-mix(in srgb,var(--adv) 6%,var(--card)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(16,24,40,.06),0 6px 16px -6px color-mix(in srgb,var(--adv) 35%,transparent);
  animation:adv-in .22s ease-out}
#chat-advice.adv-err{--adv:var(--err)}
@keyframes adv-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#chat-advice .advice-row{display:flex;align-items:center;gap:8px;min-height:28px}
#chat-advice .advice-text{flex:1;min-width:0;line-height:1.35}
#chat-advice .advice-text small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
#chat-advice .advice-actions{display:flex;align-items:center;gap:5px;flex:none}
#chat-advice .advice-actions .btn{padding:4px 10px;font-size:11px;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.08),inset 0 1px 0 rgba(255,255,255,.25)}
#chat-advice .advice-x{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:2px 5px;border-radius:6px}
#chat-advice .advice-x:hover{background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text)}
/* etichetta del peso della chat, a destra nella riga dei consumi */
#chat-usage{display:none;align-items:center;gap:8px}
#chat-usage .usage-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-chip{--adv:var(--warn);font-family:inherit;flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--adv) 30%,var(--border));
  border-radius:999px;padding:1px 9px 1px 7px;font-size:11px;font-weight:600;color:var(--text);cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--adv) 14%,var(--card)),color-mix(in srgb,var(--adv) 5%,var(--card)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(16,24,40,.08);transition:box-shadow .15s,transform .15s}
.ctx-chip:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px -2px color-mix(in srgb,var(--adv) 40%,transparent);transform:translateY(-1px)}
.ctx-chip.crit{--adv:var(--err)}
.ctx-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--adv);box-shadow:0 0 0 2px color-mix(in srgb,var(--adv) 22%,transparent),0 0 6px color-mix(in srgb,var(--adv) 60%,transparent)}
#chat-pinned{padding:3px 10px!important;font-size:11.5px!important;line-height:1.35}
#chat-pinned .pinned-label{font-size:10px;line-height:1.2;margin-bottom:1px}
#chat-pinned .pinned-text.closed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-row{display:flex;gap:8px;max-width:82%;align-items:flex-end}
.msg-row.user{align-self:flex-end}
.msg-row.assistant{align-self:flex-start}
.avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;background:var(--card2);border:1px solid var(--border)}
.avatar.ai{padding:4px;object-fit:contain;background:var(--card)}
.avatar-fallback{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.bubble-stack{display:flex;flex-direction:column;gap:4px;min-width:0}
.bubble{min-width:0;padding:7px 10px;border-radius:18px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.bubble.user{background:var(--accent-soft);color:var(--text);border-top-right-radius:4px}
.bubble.assistant{background:var(--card);border:1px solid var(--border);border-top-left-radius:4px}
.bubble .meta{font-size:10.5px;opacity:.75;margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
/* 19/09/2026: ingresso del messaggio in chat come su WhatsApp — la bolla "sboccia"
   dall'angolo da cui nasce (in basso a destra la mia, in basso a sinistra la sua)
   con un piccolo rimbalzo. Si applica SOLO all'elemento appena inserito (classe
   aggiunta a mano in sendChatMessage / attachChatRun): il thread viene ridisegnato
   per intero a ogni apertura di chat, e senza questa regola mirata tutte le bolle
   vecchie rifarebbero l'animazione ogni volta. */
@keyframes bubble-pop{from{opacity:0;transform:scale(.74) translateY(12px)}60%{opacity:1;transform:scale(1.02) translateY(-1px)}to{opacity:1;transform:none}}
.msg-row.pop-in .bubble,.run-wrap.pop-in{animation:bubble-pop .34s cubic-bezier(.22,.9,.28,1.2) both}
.msg-row.user.pop-in .bubble{transform-origin:100% 100%}
.msg-row.assistant.pop-in .bubble,.run-wrap.pop-in{transform-origin:0 100%}
@media (prefers-reduced-motion:reduce){.msg-row.pop-in .bubble,.run-wrap.pop-in{animation:none}}
/* pulsante copia: piccolo e defilato, non deve competere con il testo della bolla */
.bubble-copy{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 7px;font-size:10.5px;line-height:1.6;
  border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;opacity:.65;transition:opacity .12s}
.bubble-copy:hover{opacity:1}
.bubble.user .bubble-copy{border-color:var(--border);color:var(--muted)}
.bubble-copy.copied{opacity:1;color:var(--ok)}
/* pulsante di reinvio: compare solo sui messaggi falliti per limite di utilizzo,
   disabilitato finche' l'account non e' tornato disponibile (vedi pollResendButtons) */
.bubble-resend{display:inline-flex;align-items:center;gap:5px;margin-top:6px;margin-left:6px;padding:2px 9px;font-size:10.5px;
  border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);cursor:pointer}
.bubble-resend:disabled{opacity:.5;cursor:default}
.bubble.assistant .meta{color:var(--muted)}
.meta-collapsible{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-wrap:nowrap}
.meta-collapsible.open{white-space:normal;text-overflow:clip;flex-wrap:wrap}
.meta-collapsible::before{content:'▸ ';flex:none}
.meta-collapsible.open::before{content:'▾ '}
.composer{border-top:1px solid var(--border);padding:8px 10px;background:var(--card);position:relative}
.composer textarea{resize:none;margin-bottom:9px;min-height:64px;max-height:40vh;overflow-y:hidden}
.composer-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* account/modello/permesso/ragionamento sotto il campo di testo: sono scelte
   rapide, non il centro dell'attenzione — stesso taglio di .quickadd select,
   non serve il padding pieno della select "normale" (10px 14px, pensata per i
   form) */
.composer-row select{width:auto;padding:5px 9px;font-size:12.5px;border-radius:8px}
#chat-send{width:44px;height:44px;padding:0;border-radius:50%;flex:none;font-size:16px}
.composer-main{display:flex;align-items:flex-end;gap:6px}
.comp-ico{width:38px;height:44px;flex:none;background:none;border:0;color:var(--accent);font-size:17px;cursor:pointer}
#chat-input{flex:1;min-width:0;width:auto;min-height:44px;margin:0;border-radius:20px;border-color:transparent;background:var(--card2);box-shadow:none}
#chat-opts{display:none;margin-top:9px}
#chat-opts.open{display:flex}
.composer.drag-over::after{content:'⬇️ Rilascia qui per allegare';position:absolute;inset:6px;border:2px dashed var(--accent);border-radius:10px;
  background:color-mix(in srgb, var(--accent) 10%, var(--card));display:flex;align-items:center;justify-content:center;font-size:13px;pointer-events:none;z-index:2}
.attach-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.attach-chips:empty{display:none}
.attach-chip{display:flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:11.5px}
.attach-chip .x{cursor:pointer;color:var(--muted);font-weight:700}
.attach-chip .x:hover{color:var(--danger)}
.attach-chip.uploading{opacity:.6}
.msg-row.queued .bubble{opacity:.72;border:1px dashed var(--accent)}
.pending-msg{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:11.5px;margin-bottom:6px}
.pending-msg .x{cursor:pointer;color:var(--muted);font-weight:700}
.pending-msg .x:hover{color:var(--danger)}
.pending-msg .force{cursor:pointer;color:var(--accent);font-weight:600;white-space:nowrap}
.pending-msg .force:hover{text-decoration:underline}
.thinking{align-self:flex-start;color:var(--muted);font-size:12.5px;display:flex;gap:8px;align-items:center}
.thinking .dot{animation:pulse 1.2s ease infinite}
.chat-item .cm .live-verb{color:var(--accent);font-weight:600}
/* FIX 04/09/2026 pomeriggio: questo elemento aveva ANCHE un'animazione CSS
   (live-hue, colore che ruota ogni 2.2s) sopra al carattere che gia' ruota via
   JS. La lista chat si ridisegna per intero ogni 2s (loadChatList->innerHTML),
   che RICREA il nodo — e un'animazione CSS su un nodo nuovo riparte sempre da
   0%. Il carattere (gestito da JS, sidebarSpinGlyph) riprende a meta' sequenza
   correttamente, ma il colore CSS scattava indietro all'inizio ogni 2s: le due
   animazioni sullo stesso elemento si comportavano diversamente, con uno
   scatto visibile e regolare (ogni 2s) che sembrava un difetto. Rimossa: lo
   spinner qui torna identico, senza colore, a quello del composer/run-bar. */
.chat-item .cm .live-verb .spin{display:inline-block;width:1em;text-align:center;margin-right:3px}
/* --- run a blocchi (chat in diretta) --- */
.run-wrap{align-self:flex-start;max-width:92%;display:flex;flex-direction:column;gap:8px;width:100%}
/* 22/09/2026 sera: i blocchi strumento e i testi dentro .run-body non avevano
   nessuno stile, quindi stavano uno attaccato all'altro (segnalato con screenshot) */
.run-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.run-body>.run-prose{margin:3px 0}
.bubble.assistant .pre-prose{opacity:.78;border-left:2px solid var(--border);padding-left:9px;margin:0 0 9px}
.chat-item .cm{gap:10px}
.chat-item .cm>span:last-child{flex:none;white-space:nowrap}
.run-bar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
/* spinner + verbo che ruota + tempo trascorso, in stile Claude Code CLI (vedi attachChatRun) */
.run-bar .live{color:var(--accent);font-weight:600;display:flex;align-items:center;gap:7px}
.run-bar .live .spinner{display:inline-block;min-width:2em;text-align:center}
.run-bar .live .verb{transition:opacity .15s}
.run-bar .live .verb.swap{opacity:0}
.run-bar .live .elapsed{color:var(--muted);font-weight:500}
.run-bar .stop{margin-left:auto;color:var(--err);cursor:pointer;border:1px solid var(--err);border-radius:20px;padding:1px 10px;background:var(--err-soft)}
/* stesso formato dello spinner in cima alla risposta (.run-bar .live), riusato per lo
   stato accanto al tasto Invia — prima era testo semplice a sinistra, formattato diverso */
#chat-status .live{color:var(--accent);font-weight:600;display:flex;align-items:center;justify-content:flex-end;gap:7px;font-size:11px;font-family:ui-monospace,monospace;width:100%}
#chat-status .live .spinner{display:inline-block;min-width:2em;text-align:center}
#chat-status .live .elapsed{color:var(--muted);font-weight:500}
.run-prose{background:var(--card2);border:1px solid var(--border);border-bottom-left-radius:4px;border-radius:14px;padding:11px 15px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
/* markdown reso da mdToHtml() dentro .bubble.assistant e .run-prose: elementi
   compatti per non allungare la chat, coerenti con lo spacing esistente */
.bubble.assistant p,.run-prose p{margin:0 0 .5em}
.bubble.assistant p:last-child,.run-prose p:last-child{margin-bottom:0}
.bubble.assistant h2,.run-prose h2{font-size:1.15em;margin:.4em 0 .3em}
.bubble.assistant h3,.run-prose h3{font-size:1.05em;margin:.4em 0 .3em}
.bubble.assistant h4,.run-prose h4{font-size:1em;margin:.4em 0 .3em}
.bubble.assistant h2:first-child,.bubble.assistant h3:first-child,.bubble.assistant h4:first-child,
.run-prose h2:first-child,.run-prose h3:first-child,.run-prose h4:first-child{margin-top:0}
.bubble.assistant ul,.bubble.assistant ol,.run-prose ul,.run-prose ol{margin:.3em 0;padding-left:1.3em}
.bubble.assistant li,.run-prose li{margin:.15em 0}
.bubble.assistant code,.run-prose code{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:.1em .35em;font-size:.9em;font-family:'JetBrains Mono',monospace}
.bubble.assistant pre,.run-prose pre{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;overflow-x:auto;margin:.4em 0}
.bubble.assistant pre code,.run-prose pre code{background:none;border:none;padding:0}
/* tabelle markdown: white-space normale (la bolla e' pre-wrap, dentro la tabella
   spezzerebbe le celle) e scorrimento orizzontale se non ci stanno in larghezza */
.bubble.assistant .md-table,.run-prose .md-table{border-collapse:collapse;margin:.5em 0;font-size:.95em;white-space:normal;display:block;overflow-x:auto;max-width:100%}
.bubble.assistant .md-table th,.run-prose .md-table th,.bubble.assistant .md-table td,.run-prose .md-table td{border:1px solid var(--border);padding:5px 9px;text-align:left;vertical-align:top}
.bubble.assistant .md-table th,.run-prose .md-table th{background:var(--card);font-weight:600}
/* 22/09/2026: markdown vero (marked). Dentro la bolla il testo e' pre-wrap, ma l'HTML
   prodotto ha a capo fra un blocco e l'altro: con pre-wrap diventavano righe vuote
   in piu' (spaziatura doppia). Il contenitore .md torna a white-space normale, gli
   a capo voluti arrivano gia' come <br> (breaks:true). */
.md{white-space:normal}
.md.md-plain{white-space:pre-wrap}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:0 0 .55em}
.md li>p{margin:0 0 .25em}
.md ul ul,.md ol ol,.md ul ol,.md ol ul{margin:.15em 0}
.md blockquote{margin:.4em 0;padding:.2em .9em;border-left:3px solid var(--border);color:var(--muted)}
.md hr{border:0;border-top:1px solid var(--border);margin:.8em 0}
.md a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.bubble.user .md a{color:inherit}
.md h1,.md h2{font-size:1.15em;margin:.5em 0 .3em}.md h3{font-size:1.05em;margin:.45em 0 .3em}.md h4,.md h5,.md h6{font-size:1em;margin:.4em 0 .25em}
.md img{max-width:100%}
.md-code{margin:.45em 0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card)}
.md-code-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 6px 3px 10px;border-bottom:1px solid var(--border);background:var(--card2);font-size:10.5px;color:var(--muted);font-family:ui-monospace,monospace}
.md-code-copy{border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted);font-size:10.5px;padding:1px 7px;cursor:pointer}
.md-code-copy:hover{color:var(--text)}
.md-code-copy.copied{color:var(--ok)}
.bubble.assistant .md-code pre,.run-prose .md-code pre{margin:0;border:0;border-radius:0;white-space:pre;background:transparent}
.md-code pre code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:1.5}
[data-chat-layout="vscode"] .run-body{gap:5px;padding:0 12px 10px}
[data-chat-layout="vscode"] .run-body>.run-prose{margin:0 -12px}
/* 22/09/2026 sera: respiro fra i blocchi. Le tabelle stavano attaccate al testo e fra
   loro (margini di .5em annullati dal primo/ultimo figlio), e nelle celle strette il
   word-break della bolla spezzava i numeri a meta' ("16.4|66"): nelle celle si va a
   capo solo fra le parole, se non ci sta la tabella scorre in orizzontale. */
.md>*+*{margin-top:.75em}
.md p{margin-bottom:0}
.md p+p{margin-top:.6em}
.md ul,.md ol{padding-left:1.4em;margin-bottom:0}
.md li+li{margin-top:.2em}
.bubble.assistant .md .md-table,.run-prose .md .md-table{margin:.9em 0;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:8px;width:max-content;max-width:100%}
.md .md-table+.md-table{margin-top:1.1em}
.bubble.assistant .md .md-table th,.run-prose .md .md-table th,.bubble.assistant .md .md-table td,.run-prose .md .md-table td{border:0;border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:6px 11px;word-break:normal;overflow-wrap:normal;min-width:3.5em}
.md .md-table tr>*:last-child{border-right:0}
.md .md-table tbody tr:last-child>*{border-bottom:0}
.md .md-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--card) 45%,transparent)}
.md blockquote{margin:.8em 0;padding:.45em .9em;border-left-color:var(--accent);background:color-mix(in srgb,var(--card) 60%,transparent);border-radius:0 6px 6px 0}
.md blockquote+*{margin-top:.75em}
.md-code{margin:.8em 0}
.bubble.assistant .md-code pre,.run-prose .md-code pre{padding:10px 12px}
.bubble.assistant .md>pre,.run-prose .md>pre{padding:10px 12px;margin:.8em 0}
.md hr{margin:1em 0}
.md h1,.md h2,.md h3{margin-top:1em}
.chat-media{display:grid;gap:8px;margin:8px 0 3px}.chat-media a{display:block}.chat-media img{display:block;max-width:100%;max-height:70vh;border-radius:9px;border:1px solid var(--border);object-fit:contain;background:var(--card)}
/* --- chat "VS Code": geometrie del workbench, colori dal tema scelto (come app clienti). */
[data-chat-layout="vscode"]{
  --vsc-editor:var(--bg);--vsc-sidebar:var(--card);--vsc-input:var(--card2);--vsc-hover:var(--card2);
  --vsc-border:var(--border);--vsc-text:var(--text);--vsc-muted:var(--muted);--vsc-blue:var(--accent);
  --vsc-blue-hover:color-mix(in srgb,var(--accent) 85%,var(--text));--vsc-code:var(--bg2);--vsc-user:var(--card2);--vsc-selection:var(--accent-soft);
}
[data-chat-layout="vscode"] .chat-wrap{gap:0;border:1px solid var(--vsc-border);background:var(--vsc-editor)}
[data-chat-layout="vscode"] .chat-list{background:var(--vsc-sidebar);border-right:1px solid var(--vsc-border);padding:10px 8px}
[data-chat-layout="vscode"] .chat-list .btn,[data-chat-layout="vscode"] .chat-list input,
[data-chat-layout="vscode"] .chat-list .chat-item{border-radius:2px;box-shadow:none}
[data-chat-layout="vscode"] .chat-item{border:0;border-left:2px solid transparent;background:transparent;color:var(--vsc-text);margin-bottom:2px;padding:7px 9px}
[data-chat-layout="vscode"] .chat-item:hover{background:var(--vsc-hover)}
[data-chat-layout="vscode"] .chat-item.active{border-color:var(--vsc-blue);background:var(--vsc-selection)}
[data-chat-layout="vscode"] .chat-item .cm{color:var(--vsc-muted)}
[data-chat-layout="vscode"] #chat-main-normal{border:0;border-radius:0;box-shadow:none;background:var(--vsc-editor);color:var(--vsc-text)}
[data-chat-layout="vscode"] #chat-advice,[data-chat-layout="vscode"] #chat-usage,
[data-chat-layout="vscode"] #chat-pinned{border-color:var(--vsc-border)!important;color:var(--vsc-muted)}
[data-chat-layout="vscode"] #chat-thread{gap:0;padding:0;background:var(--vsc-editor);scrollbar-color:var(--vsc-border) transparent}
[data-chat-layout="vscode"] .msg-row{max-width:100%;align-items:flex-start;border-bottom:1px solid color-mix(in srgb,var(--vsc-border) 62%,transparent)}
[data-chat-layout="vscode"] .msg-row.user,[data-chat-layout="vscode"] .msg-row.assistant{align-self:stretch}
[data-chat-layout="vscode"] .msg-row.user{background:var(--vsc-user)}
[data-chat-layout="vscode"] .msg-row .avatar,[data-chat-layout="vscode"] .msg-row .avatar-fallback{display:none}
[data-chat-layout="vscode"] .bubble,[data-chat-layout="vscode"] .run-prose{flex:1;min-width:0;padding:13px 16px 15px;border:0;border-radius:0;background:transparent;color:var(--vsc-text);font:13px/1.55 "Segoe UI Variable","Segoe UI",sans-serif}
[data-chat-layout="vscode"] .bubble::before,[data-chat-layout="vscode"] .run-prose::before{display:block;margin-bottom:7px;color:var(--vsc-text);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
[data-chat-layout="vscode"] .bubble.user::before{content:'◉  Tu';color:var(--vsc-blue)}
[data-chat-layout="vscode"] .bubble.assistant::before,[data-chat-layout="vscode"] .run-prose::before{content:'✦  Saccuman AI'}
[data-chat-layout="vscode"] .bubble-stack .bubble.assistant:not(:first-child)::before{display:none}
[data-chat-layout="vscode"] .run-wrap{max-width:100%;gap:0;border-bottom:1px solid color-mix(in srgb,var(--vsc-border) 62%,transparent)}
[data-chat-layout="vscode"] .run-bar{padding:6px 16px;background:var(--vsc-sidebar);border-bottom:1px solid var(--vsc-border);color:var(--vsc-muted)}
[data-chat-layout="vscode"] .bubble.assistant code,[data-chat-layout="vscode"] .run-prose code{font-family:"Cascadia Code","JetBrains Mono",Consolas,monospace;background:var(--vsc-code);border-color:var(--vsc-border);border-radius:2px}
[data-chat-layout="vscode"] .bubble.assistant pre,[data-chat-layout="vscode"] .run-prose pre{background:var(--vsc-code);border-color:var(--vsc-border);border-radius:2px;padding:10px 12px}
[data-chat-layout="vscode"] .meta-collapsible{display:inline-flex;background:var(--vsc-sidebar);border:1px solid var(--vsc-border);border-radius:2px;padding:3px 7px;color:var(--vsc-muted)}
[data-chat-layout="vscode"] .run-think,[data-chat-layout="vscode"] .run-block{border-color:var(--vsc-border);border-radius:2px;background:var(--vsc-editor);color:var(--vsc-muted)}
[data-chat-layout="vscode"] .run-block .h{background:var(--vsc-sidebar);color:var(--vsc-text)}
[data-chat-layout="vscode"] .run-stage{border-radius:0;background:var(--vsc-sidebar);color:var(--vsc-muted)}
[data-chat-layout="vscode"] .thinking{padding:10px 16px;color:var(--vsc-muted)}
[data-chat-layout="vscode"] #chat-status{padding:4px 12px 5px!important;background:var(--vsc-sidebar);border-top:1px solid var(--vsc-border);color:var(--vsc-muted);font:11px "Cascadia Code",Consolas,monospace}
[data-chat-layout="vscode"] .composer{background:var(--vsc-sidebar);border-top:1px solid var(--vsc-border);padding:8px 10px 10px}
[data-chat-layout="vscode"] .composer textarea{margin-bottom:7px;background:var(--vsc-input);border:1px solid var(--vsc-border);border-radius:2px;color:var(--vsc-text);padding:9px 10px;box-shadow:none}
[data-chat-layout="vscode"] .composer textarea:focus{border-color:var(--vsc-blue);box-shadow:0 0 0 1px var(--vsc-blue)}
[data-chat-layout="vscode"] .composer .btn,[data-chat-layout="vscode"] .composer select{border-radius:2px;background:var(--vsc-input);border:1px solid var(--vsc-border);color:var(--vsc-text);box-shadow:none;padding-top:5px;padding-bottom:5px}
[data-chat-layout="vscode"] .composer .btn:hover{transform:none;background:var(--vsc-hover)}
[data-chat-layout="vscode"] .composer .btn.primary{background:var(--vsc-blue);border-color:var(--vsc-blue);color:var(--on-accent)}
[data-chat-layout="vscode"] .composer .btn.primary:hover{background:var(--vsc-blue-hover)}
[data-chat-layout="vscode"] .attach-chip,[data-chat-layout="vscode"] .pending-msg{background:var(--vsc-input);border-color:var(--vsc-border);border-radius:2px;color:var(--vsc-text)}
.bubble.assistant strong,.run-prose strong{font-weight:700}
.run-think{border:1px dashed var(--border);border-radius:10px;padding:7px 12px;font-size:12px;color:var(--muted)}
/* si apre/chiude solo dall'intestazione: il corpo resta selezionabile */
.run-think>.th{cursor:pointer;user-select:none}
.run-think>.th::before{content:'▸ '}
.run-think.open>.th::before{content:'▾ '}
.run-think>.body{white-space:pre-wrap;margin-top:6px;display:none;font-family:ui-monospace,monospace;font-size:11.5px;cursor:text}
.run-think.open>.body{display:block}
.run-think.run-hist>.body{white-space:normal;font-family:inherit;display:none;flex-direction:column;gap:6px}
.run-think.run-hist.open>.body{display:flex}
.run-block .h{user-select:none}
.run-block{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.run-block.edit{border-color:var(--accent);border-left-width:3px}
.run-block .h{display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--card2);font-family:ui-monospace,monospace;font-size:12px;cursor:pointer}
.run-block .h .ic{flex:none;font-size:13px}
.run-block .h .nm{font-weight:600}
.run-block .h .ttl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.run-block .h .badge{flex:none;font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--border);color:var(--muted)}
.run-block .h .badge.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.run-block .h .badge.err{color:var(--err);border-color:var(--err);background:var(--err-soft)}
.run-block .h .badge.bg{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.run-stage .bg-note{color:var(--accent);font-weight:600}
.diff-add{color:var(--ok)}
.diff-del{color:var(--err)}
.run-block .b{padding:9px 11px;font-family:ui-monospace,monospace;font-size:11.5px;line-height:1.55;color:var(--text);overflow-x:auto;display:none;white-space:pre-wrap}
.run-block.open .b{display:block}
.run-stage{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:7px;font-size:11.5px;color:var(--muted)}
/* 02/09/2026: un messaggio nato da un agente in background, dentro una bolla
   normale — stessi toni di run-stage (e' la stessa idea: "sta succedendo a
   parte"), ma piccolo e in linea, non un blocco a se'. */
.badge.bg-tag{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);margin-bottom:4px}
#chat-bg-indicator{display:none;align-items:center;flex-wrap:wrap;gap:6px;padding:5px 10px;margin:0 16px 6px;border-radius:7px;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:11.5px;color:var(--muted)}
/* 03/09/2026: divisore "cambio modello" in mezzo alla chat, come fa VS Code
   quando si passa da un modello all'altro nella stessa conversazione — una
   riga ondulata coi puntini sospesi e l'etichetta del nuovo modello al centro. */
.model-switch{display:flex;align-items:center;gap:10px;margin:10px 16px;color:var(--muted);font-size:11.5px;white-space:nowrap}
.model-switch::before,.model-switch::after{content:'';flex:1;height:8px;background-image:repeating-linear-gradient(-45deg,var(--border) 0,var(--border) 1px,transparent 1px,transparent 4px);background-size:6px 6px;opacity:.7}
.run-stage b{color:var(--text)}
.run-stage .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.run-stage.done .dot{background:var(--ok)}
.run-stage.error .dot{background:var(--err)}
.run-stage.waiting .dot{background:var(--warn)}
.run-file-link{border:0;background:none;color:var(--accent);font:inherit;padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.run-file-link:hover{color:var(--text)}
.run-block .h .run-file-link{flex:1}
.run-dl{display:block;white-space:pre;padding-left:14px;position:relative}
.run-dl.add{background:var(--ok-soft);color:var(--ok)}
.run-dl.add::before{content:"+";position:absolute;left:3px}
.run-dl.del{background:var(--err-soft);color:var(--err)}
.run-dl.del::before{content:"−";position:absolute;left:3px}
.run-files{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px}
.run-files .lbl{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600}
.run-files .chip{font-family:ui-monospace,monospace;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:2px 9px}
.run-files .chip b.diff-add{color:var(--ok)}
.run-files .chip b.diff-del{color:var(--err)}
.run-error{color:var(--err);background:var(--err-soft);border:1px solid var(--err);border-radius:10px;padding:9px 13px;font-size:12.5px}
/* Nel layout a bolle la prosa e le azioni devono essere riconoscibili anche nelle
   palette chiare/beige, dove card/card2 erano quasi identici. La prosa porta il
   filo dell'accento; Bash/Edit sono pannelli tecnici neutri e piu' incassati. */
[data-chat-layout="bubble"] .run-prose,
[data-chat-layout="bubble"] .bubble.assistant{
  background:color-mix(in srgb,var(--card2) 82%,var(--accent-soft));
  border-left:3px solid var(--accent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text) 7%,transparent);
}
[data-chat-layout="bubble"] .run-block{
  background:var(--bg2);border-color:color-mix(in srgb,var(--border) 70%,var(--muted));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 3%,transparent);
}
[data-chat-layout="bubble"] .run-block .h{background:var(--card);border-bottom:1px solid transparent}
[data-chat-layout="bubble"] .run-block.open .h{border-bottom-color:var(--border)}
[data-chat-layout="bubble"] .run-block .b{background:var(--bg2)}
/* 1.74.3: pulsanti identici all'app clienti (SaccumanButtons.kt): principale =
   metallo con anello d'oro, secondario = vetro, premuto = si rimpicciolisce */
.btn{min-height:40px;background:linear-gradient(180deg,var(--card),var(--card2)) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--card) 60%,#fff),color-mix(in srgb,var(--border) 80%,transparent)) border-box;border:1px solid transparent;color:var(--accent);font-weight:600;letter-spacing:.2px;box-shadow:none;transition:transform .12s,box-shadow .12s,filter .12s}
.btn.primary{background:linear-gradient(180deg,var(--card),var(--card2)) padding-box,linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent)) border-box;border:1.5px solid transparent;color:var(--text);box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn:hover,.btn.primary:hover{transform:none;filter:brightness(1.03);border-color:transparent}
.btn:active{transform:scale(.96)}
.btn.small{min-height:32px}
#chat-send{min-height:44px}
/* 1.74.2: come l'app: chat a tutta altezza, passi di lavoro leggeri, scritte
   col carattere normale; a spaziatura fissa resta solo il comando/percorso */
@media(min-width:921px){
  #page-chat>.crumb,#page-chat>h2.title{display:none}
  .chat-wrap{height:calc(100vh - 62px)}
}
.chat-item .cm>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item .cm>:last-child{flex:none;margin-left:8px}
.run-bar,#chat-status .live,[data-chat-layout="bubble"] .run-block .h{font-family:inherit}
.run-bar .stop{font-weight:600}
.run-stage{border-left:0;border-radius:12px}
[data-chat-layout="bubble"] .run-wrap{gap:4px}
[data-chat-layout="bubble"] .run-block{border-color:transparent;border-radius:12px;background:var(--card2);box-shadow:none}
[data-chat-layout="bubble"] .run-block .h{background:transparent;padding:6px 12px}
[data-chat-layout="bubble"] .run-block .h .ttl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
[data-chat-layout="bubble"] .run-block.edit{border-color:transparent;border-left-color:var(--accent)}
#chat-thread-wrap{position:relative;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
#chat-thread{position:relative}
#chat-newmsg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;border-radius:20px;box-shadow:var(--shadow-lg);padding:5px 14px;background:#f4f2ed;color:#171614;border:1px solid var(--accent)}
.chat-load-older{align-self:center;margin:0 0 4px}
.chat-group-h{font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:10px 4px 5px}
.chat-group-h:first-child{margin-top:2px}
.chat-list-empty{font-size:12.5px;padding:6px}
.chat-item{position:relative}
.chat-item .ct{padding-right:20px}
.chat-item .unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.chat-item.unread .ct{font-weight:750}
.chat-item .ci-closed{position:absolute;top:30px;right:8px;font-size:11px}
.chat-item .ci-acts{position:absolute;top:5px;right:5px;display:flex;gap:3px;opacity:0;transition:opacity .12s;background:inherit;border-radius:8px}
.chat-item .ci-acts .btn{padding:1px 6px}
.chat-item .ci-acts .btn.on{border-color:var(--accent);background:var(--accent-soft)}
.chat-item:hover .ci-acts,.chat-item:focus-within .ci-acts{opacity:1}
@media(hover:none){.chat-item .ci-acts{opacity:1}.chat-item .ct{padding-right:84px}}
#chat-mobile-bar{display:none}
#chat-drawer-backdrop{display:none}
@media(max-width:920px){
  /* 22/09/2026: su telefono la lista chat e' un cassetto che entra da sinistra
     (pulsante "☰ Chat" in cima alla conversazione) e la conversazione prende tutta
     l'altezza, invece di stare in un riquadro da 50vh sotto una lista da 160px */
  #page-chat>.crumb,#page-chat>h2.title{display:none}
  #main:has(#page-chat:not(.hidden)){padding-bottom:8px}
  .chat-wrap{grid-template-columns:1fr;height:calc(100vh - 68px);height:calc(100dvh - 68px);min-height:0}
  .chat-list{position:fixed;top:56px;left:0;bottom:0;width:min(86vw,320px);z-index:1001;background:var(--bg);padding:12px;overflow-y:auto;
    transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow-lg);max-height:none}
  .chat-wrap.drawer-open .chat-list{transform:none}
  .chat-wrap.drawer-open #chat-drawer-backdrop{display:block;position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.4);z-index:1000}
  #chat-mobile-bar{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--border)}
  #chat-mobile-title{flex:1;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #chat-thread{min-height:0;max-height:none;padding:12px 10px}
  .msg-row{max-width:94%}
}

/* ===== statistiche chat ===== */
.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.stats-card{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.stats-card .num{font-size:20px;font-weight:700}
.stats-card .lbl{font-size:11.5px;color:var(--muted)}
.stats-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:20px}
.stats-table th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.02em;padding:6px 10px;border-bottom:1px solid var(--border)}
.stats-table td{padding:6px 10px;border-bottom:1px solid var(--border)}
.stats-table tr:last-child td{border-bottom:none}
.stats-table td.num,.stats-table th.num{text-align:right;font-family:ui-monospace,monospace}
.stats-table tr.clickable{cursor:pointer}
.stats-table tr.clickable:hover{background:var(--card)}
.stats-bar-cell{display:flex;align-items:center;gap:8px}
.stats-bar-cell .bar-track{flex:1;height:6px;border-radius:3px;background:var(--card2);overflow:hidden;min-width:40px}
.stats-bar-cell .bar-fill{height:100%;background:var(--accent);border-radius:3px}

/* ===== giornata / lavori ===== */
.daybar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.daybar .when{font-weight:650;font-size:15px;min-width:190px}
.task{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:flex-start;gap:13px;margin-bottom:7px;transition:box-shadow .13s,opacity .13s}
.task:hover{box-shadow:var(--shadow-lg)}
.task.done{opacity:.5}
.task.done .ttext{text-decoration:line-through}
.task.late{border-left:3px solid var(--warn)}
.tick{width:21px;height:21px;min-width:21px;border-radius:6px;border:2px solid var(--border);background:none;display:grid;place-items:center;color:var(--on-accent);font-size:12px;margin-top:1px;transition:all .13s;padding:0}
.tick:hover{border-color:var(--accent)}
.tick.on{background:var(--ok);border-color:var(--ok)}
.task .tbody{flex:1;min-width:0}
.task .ttext{font-weight:550;font-size:14px;word-break:break-word}
.task .tmeta{color:var(--muted);font-size:12px;margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.task .tact{display:flex;gap:6px;flex-shrink:0;opacity:0;transition:opacity .13s}
.task:hover .tact,.task:focus-within .tact{opacity:1}
@media(hover:none){.task .tact{opacity:1}}
.tag{font-size:11px;border-radius:6px;padding:2px 8px;background:var(--card2);border:1px solid var(--border)}
.tag.alta{color:var(--err);background:var(--err-soft);border-color:transparent;font-weight:600}
.tag.media{color:var(--muted)}
.tag.bassa{color:var(--muted);opacity:.8}
.tag.late{color:var(--warn);background:var(--warn-soft);border-color:transparent;font-weight:600}
.tag.rec{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.tag.proj{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 13%,transparent);border-color:transparent;font-weight:550}
.quickadd{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);margin-bottom:16px}
.quickadd input[type=text]{flex:1;min-width:200px;border:none;box-shadow:none!important;background:none;padding:4px 0}
.quickadd select{width:auto;padding:6px 10px;font-size:12.5px}
.spark{display:flex;align-items:flex-end;gap:4px;height:46px;margin-top:10px}
.spark div{flex:1;background:var(--accent-soft);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.spark div i{position:absolute;inset:auto 0 0 0;background:linear-gradient(var(--accent),var(--accent2));border-radius:3px 3px 0 0;display:block}

/* ===== progetti ===== */
.proj{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.proj>.phead{padding:16px 20px;display:flex;align-items:center;gap:14px;cursor:pointer;user-select:none}
.proj>.phead:hover{background:var(--card2)}
.proj .pname{font-weight:650;font-size:15px}
.proj .pdesc{color:var(--muted);font-size:12.5px;margin-top:3px}
.proj .pnum{font-weight:650;font-size:19px;min-width:52px;text-align:right}
.proj .pbody{border-top:1px solid var(--border);padding:16px 20px;background:var(--card2)}
.pbar{height:7px;border-radius:4px;background:var(--border);overflow:hidden;margin-top:9px;display:flex}
.pbar i{display:block;height:100%}
.pbar i.d{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 70%,var(--accent)))}
.pbar i.r{background:var(--accent)}
.pbar i.b{background:var(--warn)}
.mod{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border)}
.mod:last-child{border-bottom:none}
.mod .mname{font-weight:550;font-size:13.5px}
.mod .mnote{color:var(--muted);font-size:12px;margin-top:3px;white-space:pre-wrap}
.mod select{width:auto;padding:4px 9px;font-size:12px;border-radius:8px}
.st{font-size:11px;border-radius:20px;padding:2px 9px;font-weight:600}
.st.fatto{color:var(--ok);background:var(--ok-soft)}
.st.in_corso{color:var(--accent);background:var(--accent-soft)}
.st.bloccato{color:var(--warn);background:var(--warn-soft)}
.st.da_fare{color:var(--muted);background:var(--card2);border:1px solid var(--border)}
.addrow{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.addrow input{flex:1;min-width:180px}

/* ===== terminale ===== */
.term-wrap{display:grid;grid-template-columns:220px 1fr;gap:14px;height:calc(100vh - 150px);min-height:420px}
.term-sessions{overflow-y:auto}
.term-sess-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:7px;cursor:pointer;transition:all .12s}
.term-sess-item:hover{box-shadow:var(--shadow)}
.term-sess-item.active{border-color:var(--accent);background:var(--accent-soft)}
.term-sess-item .tt{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-sess-item .ts{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.term-main{background:#121212;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border)}
.term-toolbar{padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.term-toolbar b{font-size:13px}
#term-closed.hidden{display:none!important}
.term-wrap.side-off{grid-template-columns:1fr}.term-wrap.side-off .term-sessions{display:none}
.term-tabs{display:flex;align-items:center;gap:4px;padding:6px 8px 0;background:var(--card)}
#term-sess-list{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto}
.term-tab-btn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:4px 8px}
.term-tab{display:flex;align-items:center;gap:6px;max-width:190px;padding:6px 8px;border-radius:8px 8px 0 0;font-size:12.5px;cursor:pointer;white-space:nowrap;border:1px solid var(--border);border-bottom:0}
.term-tab span.n{overflow:hidden;text-overflow:ellipsis}
.term-tab.active{background:#121212;color:#f4f2ed;border-color:var(--accent)}
.term-tab i{font-style:normal;opacity:.6}.term-tab i:hover{opacity:1}
.term-more{position:relative}.term-more summary{list-style:none}.term-more>div{position:absolute;right:0;top:110%;z-index:20;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px}
#term-statusbar{display:flex;gap:14px;padding:4px 12px;font-size:11.5px;color:var(--muted);background:var(--card);border-top:1px solid var(--border);white-space:nowrap;overflow:hidden}
.conn-row{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;cursor:pointer}.conn-row:hover{background:var(--accent-soft)}
.conn-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#term-box{flex:1;padding:8px;min-height:0;min-width:0;overflow:hidden}
.term-side-h{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:10px 2px 6px}
.ssh-host{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:7px 10px;margin-bottom:5px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;gap:7px}
.ssh-host:hover{border-color:var(--accent);background:var(--accent-soft)}
.ssh-host .hn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ssh-host .hu{font-size:10.5px;color:var(--muted);font-family:ui-monospace,monospace}
.term-panel{background:var(--card);border-bottom:1px solid var(--border);padding:10px 12px;max-height:230px;overflow-y:auto}
.term-panel-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.term-panel-row input{flex:1}
.snip-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px dashed var(--border);font-size:12.5px}
.snip-item:last-child{border-bottom:none}
.snip-item .sn{font-weight:600;min-width:90px}
.snip-item .sc{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcast-targets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.bcast-targets label{display:flex;align-items:center;gap:5px;font-size:12px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;cursor:pointer}
.term-keys{display:none;gap:5px;padding:7px 8px;background:var(--card);border-top:1px solid var(--border);flex-wrap:wrap}
.term-keys.on{display:flex}
.term-keys button{background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:12px;font-family:ui-monospace,monospace;color:var(--text);cursor:pointer;min-width:38px}
.term-keys button:hover{border-color:var(--accent)}
.term-keys button.sticky-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
@media(max-width:920px){.term-wrap{grid-template-columns:1fr;height:auto}.term-sessions{max-height:140px}#term-box{min-height:50vh}.term-keys{display:flex}}

/* Font del terminale: JetBrains Mono per il testo + Symbols Nerd Font come
   fallback SOLO per i glifi (Powerline, icone di Starship/Oh My Zsh). Tenerli
   separati evita di scaricare un font patchato intero da diversi MB. */
@font-face{font-family:'Manrope';src:url('/vendor/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/vendor/space_grotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
h1,h2,h3,#side .brand b{font-family:'Space Grotesk','Manrope',sans-serif}
@font-face{font-family:'JetBrains Mono';src:url('/vendor/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Symbols Nerd Font Mono';src:url('/vendor/SymbolsNerdFontMono.woff2') format('woff2');font-display:swap}

/* ===== file browser + git ===== */
.files-wrap{display:grid;grid-template-columns:280px 1fr;gap:14px;height:calc(100vh - 150px);min-height:420px}
.files-col{display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:0}
#browse-panel{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.files-tabs{display:flex;gap:6px}
.files-tabs button{flex:1;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.files-tabs button.active{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}
.crumbbar{font-size:12px;color:var(--muted);padding:2px 2px;word-break:break-all}
.crumbbar b{color:var(--text);cursor:pointer}
.crumbbar b:hover{text-decoration:underline}
#fb-droparea{flex:1;min-height:0}
.file-list{flex:1;min-height:0;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.fb-drop-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  background:var(--accent-soft);border:2px dashed var(--accent);border-radius:12px;color:var(--accent);font-weight:600;font-size:13px;
  pointer-events:none;z-index:5}
.file-row{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px}
.file-row:last-child{border-bottom:none}
.file-row:hover{background:var(--card2)}
.file-row.active{background:var(--accent-soft)}
.file-row .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .fcreated{display:block;color:var(--muted);font-size:10.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.file-thumb{width:52px;height:42px;flex:0 0 52px;border-radius:6px;border:1px solid var(--border);object-fit:cover;background:var(--card2)}
.file-row .fsize{color:var(--muted);font-size:11px}
.file-row .facts{display:flex;gap:4px;opacity:0;transition:opacity .1s}
.file-row:hover .facts{opacity:1}
.file-row .facts button{background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:6px}
.file-row .facts button:hover{background:var(--card2)}
.gitstat-row{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px dashed var(--border);font-size:12.5px}
.gitstat-row:last-child{border-bottom:none}
.gitstat-row .gf{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.gitstat-row .gf:hover{text-decoration:underline}
.gitcode{font-family:ui-monospace,monospace;font-size:10.5px;font-weight:700;width:20px;text-align:center;border-radius:4px;padding:2px 0}
.gitcode.staged{background:var(--ok-soft);color:var(--ok)}
.gitcode.unstaged{background:var(--warn-soft);color:var(--warn)}
.gitcode.untracked{background:var(--card2);color:var(--muted);border:1px solid var(--border)}
.file-main{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.file-toolbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-toolbar b{font-size:13px;word-break:break-all}
#file-editor{flex:1;min-height:0;width:100%;border:none;border-radius:0;resize:none;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.5;padding:14px}
#file-editor:focus{box-shadow:none}
/* CodeMirror sostituisce la textarea (fromTextArea): stesso posto, stesso font.
   .hidden ha già !important globale (riga 345), quindi basta la classe generica per nascondere anche questo.
   Niente tema CM scaricato a parte: si sovrascrivono i colori dei token sul tema "default"
   cosi' l'editor resta coerente con la palette light/dark del resto dell'hub invece di stonare. */
.CodeMirror{flex:1;min-height:0;height:100%;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.5;background:var(--card);color:var(--text)}
.CodeMirror-gutters{background:var(--card2)!important;border-right:1px solid var(--border)!important}
.CodeMirror-linenumber{color:var(--muted)!important}
.CodeMirror-cursor{border-left-color:var(--text)!important}
.CodeMirror-selected{background:var(--accent-soft)!important}
.cm-s-default .cm-keyword{color:var(--accent2)}
.cm-s-default .cm-atom,.cm-s-default .cm-number{color:#d19a66}
.cm-s-default .cm-def{color:var(--accent)}
.cm-s-default .cm-variable-2{color:#56b6c2}
.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#e5c07b}
.cm-s-default .cm-property{color:#61afef}
.cm-s-default .cm-string,.cm-s-default .cm-string-2{color:var(--ok)}
.cm-s-default .cm-comment{color:var(--muted);font-style:italic}
.cm-s-default .cm-tag{color:#e06c75}
.cm-s-default .cm-attribute{color:#d19a66}
.cm-s-default .cm-meta{color:var(--muted)}
.cm-s-default .cm-operator,.cm-s-default .cm-punctuation{color:var(--text)}
.cm-s-default .cm-error{color:var(--err)}
.diff-view{flex:1;min-height:0;overflow:auto;padding:12px 0;font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--card2)}
.diff-line{padding:1px 14px;white-space:pre-wrap;word-break:break-all}
.diff-line.add{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok)}
.diff-line.del{background:color-mix(in srgb, var(--err) 12%, transparent);color:var(--err)}
.diff-line.hunk{color:var(--accent);background:var(--accent-soft);font-weight:600;margin-top:6px}
.diff-sign{font-weight:700;padding-right:2px}
.diff-line.meta{color:var(--muted)}
.file-empty{flex:1;display:grid;place-items:center;color:var(--muted);font-size:13px}
.commitbox{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.commitbox textarea{flex:1;min-width:200px}
@media(max-width:920px){.files-wrap{grid-template-columns:1fr;height:auto}.file-list{max-height:200px}#file-editor,.diff-view{min-height:40vh}}

/* ===== fatture / email (liste con filtri) ===== */
.filterbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);margin-bottom:14px}
.filterbar input[type=text],.filterbar input[type=date]{width:auto;min-width:140px}
.filterbar select{width:auto}
.record-row{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;margin-bottom:7px;display:flex;align-items:center;gap:14px}
.record-row .ric{flex-shrink:0;font-size:18px}
.record-row .rbody{flex:1;min-width:0}
.record-row .rtitle{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.record-row .rsub{color:var(--muted);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px}
.year-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.year-pill{font-size:12px;border-radius:20px;padding:5px 13px;background:var(--card);border:1px solid var(--border);cursor:pointer}
.year-pill.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ===== campanella notifiche ===== */
#bell-panel{position:fixed;left:250px;top:16px;width:420px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:200;padding:14px 16px}
#bell-panel.hidden{display:none}
.bell-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bell-head b{flex:1;font-size:15px}
.bell-prob{border:1px solid var(--border);border-left:3px solid var(--err);border-radius:8px;padding:9px 11px;margin-bottom:8px;background:var(--bg2)}
.bell-prob .cat{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.bell-prob ul{margin:5px 0 0;padding-left:18px;font-size:12.5px}
.bell-prob li{margin:2px 0}
.bell-item{display:flex;gap:9px;padding:9px 2px;border-bottom:1px dashed var(--border);font-size:12.5px}
.bell-item:last-child{border-bottom:none}
.bell-item.unread{background:var(--accent-soft);border-radius:6px;padding-left:8px;padding-right:8px}
.bell-item .bico{flex:none}
.bell-item .btxt{flex:1;min-width:0}
.bell-item .bt{font-weight:600}
.bell-item .bb{color:var(--muted);white-space:pre-wrap;word-break:break-word}
.bell-item .bwhen{color:var(--muted);font-size:11px;flex:none}
@media(max-width:900px){#bell-panel{left:8px;right:8px;width:auto;top:64px}}

/* ===== infrastruttura ===== */
.infra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:20px}
.infra-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.infra-card h4{font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.infra-svc{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--border)}
.infra-svc:last-child{border-bottom:none}
.infra-svc .n{flex:1}
.infra-range-btn.active{border-color:var(--accent);background:var(--accent-soft)}
.infra-spark{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:10px}
.infra-spark div{flex:1;background:var(--accent-soft);border-radius:2px 2px 0 0;min-height:2px;position:relative}
.infra-spark div i{position:absolute;inset:auto 0 0 0;background:linear-gradient(var(--accent),var(--accent2));border-radius:2px 2px 0 0;display:block}
.sens-row{display:flex;align-items:baseline;gap:8px;font-size:12px;padding:1px 0}
.sens-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sens-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.sens-v.err,.sens-l.err{color:var(--err)}
.sens-v.warn{color:var(--warn)}
.sens-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin:8px 0 2px}
.sens-det>summary{cursor:pointer;font-size:12px;opacity:.75;margin-top:6px}
.sens-alerts{margin-top:4px}
.dot.warn{background:var(--warn)}
.infra-spark-label{font-size:11px;color:var(--muted);margin-top:4px}
/* la tabella VM ha 7 colonne: serve piu' respiro delle card metriche, altrimenti
   "stato" finisce fuori e la RAM va a capo */
.infra-guests-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:14px;margin-bottom:20px}
.infra-guests-wrap{overflow-x:auto}
.infra-guests-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.infra-guests-tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:0 10px 6px 0;border-bottom:1px solid var(--border);white-space:nowrap}
.infra-guests-tbl td{padding:6px 10px 6px 0;border-bottom:1px dashed var(--border);white-space:nowrap}
.infra-guests-tbl tr:last-child td{border-bottom:none}
.infra-guests-tbl td:first-child,.infra-guests-tbl th:first-child{width:14px;padding-right:4px}
/* il nome e' l'unica colonna che puo' allungarsi: se non ci sta si tronca lei */
.infra-guests-tbl .gname{max-width:180px;overflow:hidden;text-overflow:ellipsis;width:100%}
.infra-guests-tbl .gos{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.infra-guests-tbl td:last-child,.infra-guests-tbl th:last-child{padding-right:0}
.cert-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:13px}
.cert-row:last-child{border-bottom:none}
.cert-row .cd{flex:1;font-weight:550}
.cert-row .cleft{font-size:12px}
.cert-row .cleft.warn{color:var(--warn);font-weight:600}
.cert-row .cleft.err{color:var(--err);font-weight:600}

/* login overlay */
#login{position:fixed;inset:0;background:radial-gradient(1100px 500px at 20% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent), var(--bg);display:grid;place-items:center;z-index:50}
#login .card{width:min(420px,92vw);padding:34px;border-radius:18px;box-shadow:var(--shadow-lg)}
#login .logo{display:block;margin-left:auto;margin-right:auto;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 5px 10px color-mix(in srgb, var(--accent) 35%, transparent));margin-bottom:16px}
#login h2{text-align:center;font-size:21px;font-weight:650;margin-bottom:6px;letter-spacing:-.02em}
#login p{color:var(--muted);margin-bottom:20px;font-size:13px}

/* log viewer */
#logview{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;place-items:center;z-index:60}
#logview .panel{background:var(--card);border:1px solid var(--border);border-radius:16px;width:min(980px,94vw);height:min(720px,90vh);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
#logview header{padding:15px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
#logtext{flex:1;overflow:auto;padding:18px 20px;font:12.5px ui-monospace,Consolas,monospace;white-space:pre-wrap;background:var(--card2)}
.hidden{display:none!important}

/* modale generica piccola (connessione SSH ad-hoc, e altre in futuro) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:70}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:16px;width:min(420px,92vw);box-shadow:var(--shadow-lg);padding:22px}
.modal-card h3{font-size:16px;font-weight:650;margin-bottom:14px}
.modal-card .field{margin-bottom:12px}
.modal-card .field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.modal-card .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.modal-card .row2{display:flex;gap:10px}
.modal-card .row2 .field{flex:1}

/* ===== mobile menu ===== */
#mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:var(--bg2);border-bottom:1px solid var(--border);z-index:100;align-items:center;gap:14px;padding:0 14px;box-shadow:var(--shadow)}
#mobile-topbar.show{display:flex}
#mobile-topbar span{font-weight:600;font-size:15.5px;color:var(--text)}
#mobile-topbar .mobile-logo{width:30px;height:30px;object-fit:contain}
.hamburger{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text);padding:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .12s}
.hamburger:hover{background:var(--card)}
#sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
#sidebar-backdrop.show{display:block}

@media(max-width:920px){
  #mobile-topbar.show{display:flex}
  #side{position:fixed;top:56px;left:0;height:calc(100vh - 56px);transform:translateX(-100%);transition:transform .2s ease;z-index:1000;box-shadow:var(--shadow-lg);width:290px}
  #side.open{transform:translateX(0)}
  #main{padding-top:56px;padding-left:20px;padding-right:16px;padding-bottom:60px}
  .formgrid{grid-template-columns:1fr}
  h2.title{font-size:22px}
}

/* ---- Calendario ---- */
.cal-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cal-label{font-size:15px;margin-left:6px;text-transform:capitalize}
.cal-views{margin-left:auto;display:flex;gap:4px}
.cal-views .btn.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cal-legend{font-size:11.5px;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cal-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.cal-dot.task{background:var(--accent)}.cal-dot.cron{background:var(--accent2)}.cal-dot.off{background:var(--muted)}
.cal-card{padding:0;overflow:auto;max-height:calc(100vh - 210px)}
.cal-grid{display:grid;min-width:640px;position:relative}
.cal-head{position:sticky;top:0;z-index:3;background:var(--card);border-bottom:1px solid var(--border);padding:6px 4px;text-align:center;font-size:12px}
.cal-head.today b{background:var(--accent);color:var(--on-accent);border-radius:50%;padding:2px 6px}
.cal-allday{position:sticky;top:31px;z-index:2;background:var(--card);border-bottom:1px solid var(--border);padding:3px;min-height:22px;display:flex;flex-direction:column;gap:2px}
.cal-hours{font-size:10.5px;color:var(--muted);text-align:right;padding-right:6px}
.cal-hours div,.cal-col .cal-slot{height:44px;box-sizing:border-box}
.cal-hours div{transform:translateY(-6px)}
.cal-col{position:relative;border-left:1px solid var(--border)}
.cal-col .cal-slot{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);cursor:pointer}
.cal-col .cal-slot:hover{background:var(--accent-soft)}
.cal-col.past{background:color-mix(in srgb,var(--bg2) 45%,transparent)}
.cal-col.drop,.cal-mday.drop{outline:2px dashed var(--accent);outline-offset:-2px}
.cal-now{position:absolute;left:0;right:0;height:2px;background:var(--err);z-index:2;pointer-events:none}
.cal-ev{position:absolute;left:3px;right:3px;border-radius:6px;padding:2px 6px;font-size:11px;line-height:1.25;overflow:hidden;color:var(--on-accent);
  background:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:1;cursor:grab;white-space:nowrap;text-overflow:ellipsis}
.cal-ev.cron,.cal-chip.cron{background:var(--accent2);color:var(--card)}
.cal-ev.off,.cal-chip.off{background:var(--muted);color:var(--card);opacity:.75}
.cal-ev.past{opacity:.8;cursor:default}
.cal-ev.error{background:var(--err);color:var(--card)}
.cal-ev.locked{cursor:default}
.cal-ev.moved{border:1px dashed currentColor}
.cal-chip{border-radius:5px;padding:1px 6px;font-size:10.5px;color:var(--on-accent);background:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}
.cal-chip.locked{cursor:default}
.cal-month{display:grid;grid-template-columns:repeat(7,1fr);min-width:640px}
.cal-mday{min-height:104px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding:3px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.cal-mday.other{opacity:.45}
.cal-mday .n{font-size:11.5px;margin-bottom:2px}
.cal-mday.today .n b{background:var(--accent);color:var(--on-accent);border-radius:50%;padding:1px 5px}
.cal-more{font-size:10.5px;color:var(--muted)}
.cal-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center}
.cal-modal.hidden{display:none}
.cal-modal-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;max-width:440px;width:calc(100% - 32px)}

/* ---- Git completo ---- */
.gitx-bar{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:8px;display:flex;flex-direction:column;gap:6px}
.gitx-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gitx-branch{font-weight:650;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gitx-sync{font-size:11.5px;color:var(--muted);font-family:ui-monospace,monospace}
.gitx-sync.warn{color:var(--warn)}
.gitx-row{display:flex;gap:4px;flex-wrap:wrap}
.gitx-banner{background:var(--warn-soft);color:var(--text);border:1px solid var(--warn);border-radius:8px;padding:8px;font-size:12px}
.gitx-msg{font-size:11.5px;padding:6px 8px;border-radius:8px;white-space:pre-wrap;max-height:130px;overflow:auto;background:var(--card2)}
.gitx-msg.ok{color:var(--ok);background:var(--ok-soft)}.gitx-msg.err{color:var(--err);background:var(--err-soft)}.gitx-msg.busy{color:var(--muted)}
.gitx-view{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;margin-top:-12px}
.gitx-tools label{display:inline-flex;align-items:center;gap:5px;margin:0;color:var(--text);font-size:12px}
.gitx-tools input[type=checkbox]{width:auto;margin:0}
.gitx-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 14px 10px}
.gitx-tools select{width:auto;max-width:260px;padding:5px 8px;font-size:12px}
.gitx-sect{font-weight:650;padding:12px 14px 6px;font-size:12.5px}
.gitx-graph{border-top:1px solid var(--border)}
.gitx-grow{display:grid;grid-template-columns:auto 1fr 140px 110px 64px;gap:10px;align-items:center;padding:0 14px;min-height:24px;cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent)}
.gitx-grow:hover{background:var(--accent-soft)}
.gitx-grow.line{cursor:default;min-height:14px;border-bottom:none}
.gitx-grow.line:hover{background:none}
.gitx-g{font-family:ui-monospace,monospace;white-space:pre;font-size:12px;line-height:1}
.gitx-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gitx-au,.gitx-dt{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gitx-h{font-family:ui-monospace,monospace;color:var(--muted);font-size:11.5px;text-align:right}
.gitx-ref{display:inline-block;font-size:10.5px;border-radius:5px;padding:0 5px;margin-right:5px;border:1px solid var(--border)}
.gitx-ref.head{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.gitx-ref.local{background:var(--accent-soft);color:var(--accent)}
.gitx-ref.remote{background:var(--card);color:var(--accent2)}
.gitx-ref.tag{background:var(--warn-soft);color:var(--warn)}
.gitx-card{padding:6px 14px 12px;border-bottom:1px solid var(--border)}
.gitx-title{font-size:15px;font-weight:650;margin-bottom:6px}
.gitx-body{white-space:pre-wrap;font-family:inherit;margin:0 0 8px}
.gitx-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.gitx-stat{margin:0;padding:10px 14px;font-size:11.5px;white-space:pre;overflow:auto;border-bottom:1px solid var(--border)}
.gitx-diff,.gitx-stat{font-family:ui-monospace,Consolas,monospace}
.gitx-diff .gitx-file{margin-top:10px;font-weight:650;background:var(--card)}
.gitx-table{width:100%;border-collapse:collapse}
.gitx-table{table-layout:auto}
.gitx-table td{padding:7px 14px;border-top:1px solid var(--border);vertical-align:top}
.gitx-table td:first-child{min-width:170px}
.gitx-table tr.cur td{background:var(--accent-soft)}
.gitx-table .muted{font-size:11px}
.gitx-ab{font-family:ui-monospace,monospace;white-space:nowrap;color:var(--muted)}
.gitx-acts{text-align:right;width:1%;min-width:330px}
.gitx-acts .btn{white-space:nowrap}
.gitx-acts .btn{margin:1px}
.gitx-err{color:var(--err);padding:14px;white-space:pre-wrap}
@media (max-width:900px){.gitx-grow{grid-template-columns:auto 1fr 60px}.gitx-au,.gitx-dt{display:none}.gitx-acts{min-width:0}}