*{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:linear-gradient(180deg,#eef2ff 0%,#f8fafc 40%,#ffffff 100%);}
a{color:#0ea5e9;text-decoration:none}
.muted{color:#64748b}
.btn{border:1px solid #cbd5e1;background:#fff;padding:.55rem .9rem;border-radius:10px;cursor:pointer;font-weight:600;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;box-shadow:0 4px 12px -10px rgba(15,23,42,.45);}
.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}

.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:1.3rem;padding:1.3rem;}
.sidebar .panel{background:#ffffffee;border:1px solid #e2e8f0;border-radius:14px;padding:1.1rem;margin-bottom:1.1rem;box-shadow:0 12px 24px -18px rgba(15,23,42,.3);transition:transform .2s ease, box-shadow .2s ease;}
.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 - var(--hdr, 120px));overflow:auto;background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:1.1rem;box-shadow:0 18px 30px -24px rgba(15,23,42,.35);}
.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:.55rem .75rem;border:1px solid #e2e8f0;border-radius:12px;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;
}

/* === Enhancements: Dropzone + toolbars === */
.dropzone{
  border:1px dashed #94a3b8;
  border-radius:10px;
  padding:.4rem .6rem;
  font-size:.9rem;
  color:#475569;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  user-select:none;
}
.dropzone.dragover{
  border-color:#0ea5e9;
  background:#e0f2fe;
  color:#0c4a6e;
  box-shadow:inset 0 0 0 1px #0ea5e9;
}
.convo-item .rename-btn{
  margin-left:.4rem;
  font-size:.8rem;
  padding:.15rem .35rem;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.convo-item .rename-btn:hover{ background:#f1f5f9; }
.msg .msg-tools{
  display:flex;
  gap:.25rem;
  margin:.35rem 0 0 0;
  opacity:.85;
  flex-wrap:wrap;
}
.msg .msg-tools .btn-mini{
  font-size:.75rem;
  padding:.15rem .45rem;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.msg .msg-tools .btn-mini:hover{ background:#f1f5f9; }


/* === AI Status Indicator === */
.ai-status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.85rem;
  padding:.15rem .5rem;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  user-select:none;
}
.ai-status .dot{
  width:.6rem;height:.6rem;border-radius:50%;
  background:#94a3b8; box-shadow:0 0 0 0 rgba(2,132,199,0.0);
}
.ai-status.active .dot{
  background:#22c55e;
  animation: aiPulse 1s infinite ease-in-out;
  box-shadow:0 0 0 .25rem rgba(34,197,94,0.15);
}
.ai-status .label{ letter-spacing:.02em; color:#0f172a; }
@keyframes aiPulse{ 0%{transform:scale(1);} 50%{transform:scale(1.25);} 100%{transform:scale(1);} }


/* === Dynamic header offset & vertical space tweaks === */
:root{ --hdr: 120px; }
.chat{ height: calc(100vh - var(--hdr, 120px)); }
.messages{ padding-top:.25rem; padding-bottom:.25rem; }
.composer{ margin-top:.35rem; }

.sidebar .panel h3{ margin:0 0 .4rem 0; }

/* Removable chips for attachments (single delete) */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .5rem; border:1px solid #cbd5e1; border-radius:999px; background:#fff; margin:.15rem; }
.chip .chip-x{ margin-left:.25rem; border:0; background:transparent; cursor:pointer; line-height:1; font-size:1rem; color:#64748b; }
.chip .chip-x:hover{ color:#ef4444; }

/* === Model pool management (per-AI delete) === */
.model-list{ margin-top:.5rem; display:flex; flex-direction:column; gap:.35rem; }
.model-item{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.25rem .5rem; border:1px solid #e2e8f0; border-radius:10px; background:#fff; }
.model-item .name{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9rem; }
.btn-mini.red{ border:1px solid #fecaca; background:#fff; }
.btn-mini.red:hover{ background:#fee2e2; }


.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 18px -12px rgba(14,165,233,.6);}
.btn:focus-visible{outline:3px solid rgba(14,165,233,.35);outline-offset:2px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.25);}
.sidebar .panel:hover{transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(15,23,42,.35);}
.convo-item{transition:transform .15s ease, box-shadow .15s ease;border-radius:12px;}
.convo-item:hover{transform:translateX(2px);box-shadow:0 10px 20px -18px rgba(15,23,42,.45);}
.api-box input{min-width:340px;border-radius:12px;border:1px solid #dbeafe;background:#f8fbff;transition:border .15s ease, box-shadow .15s ease;}
textarea, input, select{transition:border .15s ease, box-shadow .15s ease;}
.layout{gap:1.3rem;padding:1.3rem;}
@media (max-width:960px){.layout{grid-template-columns:1fr;}.sidebar{order:2;}.chat{order:1;height:auto;min-height:60vh;}}