*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;color:#0f172a;background:#f8fafc}
a{color:#0ea5e9;text-decoration:none}
.muted{color:#64748b}
.btn{border:1px solid #cbd5e1;background:#fff;padding:.55rem .8rem;border-radius:10px;cursor:pointer}
.btn.small{padding:.35rem .6rem;border-radius:8px;font-size:.9rem}
.btn.primary{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.btn.secondary{background:#e2e8f0;border-color:#e2e8f0;color:#0f172a}
.btn.danger{background:#ef4444;border-color:#ef4444;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{border:1px solid #cbd5e1;border-radius:10px;padding:.55rem .7rem;background:#fff;color:#0f172a}
textarea{width:100%;resize:vertical}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid #e2e8f0;background:#fff;position:sticky;top:0;z-index:10}
.brand{font-weight:700}
.api-box{display:flex;gap:.4rem;align-items:center}
.api-box input{min-width:340px}
.layout{display:grid;grid-template-columns:300px 1fr;gap:1rem;padding:1rem}
.sidebar .panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1rem;margin-bottom:1rem}
.sidebar .row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.sidebar .checkbox{gap:.5rem}
.chat{display:flex;flex-direction:column;height:calc(100vh - 120px)}
.messages{flex:1;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1rem}
.msg{display:flex;gap:.6rem;margin-bottom:1rem;white-space:pre-wrap}
.msg .who{font-weight:700;min-width:3ch}
.msg.assistant{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:.6rem}
.composer{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.compose-tools{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{background:#e2e8f0;border:1px solid #cbd5e1;border-radius:999px;padding:.25rem .55rem;font-size:.85rem;color:#0f172a}
.composer-actions{display:flex;gap:.5rem;align-items:center;justify-content:space-between}
.composer-actions .row{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.toast{position:fixed;right:14px;bottom:14px;background:#0f172a;color:#fff;padding:.6rem .8rem;border-radius:10px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* conversations list */
.convo-list{display:flex;flex-direction:column;gap:.4rem;max-height:260px;overflow:auto}
.convo-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .6rem;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;background:#fff}
.convo-item.active{border-color:#0ea5e9;box-shadow:0 0 0 2px rgba(14,165,233,.15)}
.convo-item .meta{color:#64748b;font-size:.8rem}
.convo-item .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.convo-item button{border:none;background:transparent;color:#ef4444;cursor:pointer;font-size:1rem;padding:.2rem .3rem;border-radius:8px}
.convo-item button:hover{background:#fee2e2}

/* code block rendering + copy button */
.codebox{position:relative;border:1px solid #e2e8f0;background:#0b1220; color:#e5e7eb; border-radius:12px; margin:.5rem 0; overflow:hidden}
.codehead{display:flex;align-items:center;justify-content:space-between;background:#0f172a;color:#cbd5e1;padding:.35rem .6rem;border-bottom:1px solid #1f2937}
.codehead .lang{font-size:.85rem;opacity:.9}
.copybtn{border:1px solid #334155;background:#111827;color:#e5e7eb;border-radius:8px;padding:.25rem .5rem;font-size:.85rem;cursor:pointer}
.copybtn:hover{filter:brightness(1.1)}
.codebox pre{margin:0;padding:.7rem .8rem;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.9rem;line-height:1.4}
.msg .text{white-space:pre-wrap}

#webChip{user-select:none}
#webChip:hover{filter:brightness(0.8)}
.badge{display:inline-block;padding:.2rem .5rem;border:1px solid #cbd5e1;border-radius:999px;font-size:.85rem;background:#f1f5f9;color:#0f172a;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Catalog button row (pool) */
.sidebar .panel .row{flex-wrap:wrap}
.btn.block{display:block;width:100%;text-align:center}
.sidebar .panel .row a.btn{white-space:nowrap}
.sidebar .panel .row input#newModel{flex:1 1 auto;min-width:0}

.brand-logo{height:22px;vertical-align:middle;margin-right:.5rem;border-radius:4px}

/* Stile pulsante copia nei blocchi di codice */
.copy-btn {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.copy-btn:hover {
  background: #ddd;
}

/* Stili per il pulsante continua */
#continueBtn {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
  font-weight: 600;
}
#continueBtn:hover {
  background: #059669;
  border-color: #059669;
}

/* Stile speciale per il pulsante copia codice */
#copyCodeBtn {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
}
#copyCodeBtn:hover {
  background: #7c3aed;
  border-color: #7c3aed;
}
/* Chip delete (×) */
.chip .chip-x{margin-left:.4rem;cursor:pointer;opacity:.7}
.chip .chip-x:hover{opacity:1}