/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* Tema CHIARO — Unibloc AI
   Nota sul logo: public/logo.png e' bianco su fondo trasparente, quindi sul
   bianco sparirebbe. Per questo la barra superiore e il riquadro del logo nella
   pagina di accesso restano scuri: e' una scelta voluta, non un residuo del
   tema precedente. Con un logo in versione scura si puo' schiarire anche quelli
   (basta cambiare --barra e .login-logo-box). */
:root {
  --bg: #ffffff;             /* fondo pagina */
  --bg-2: #f7f7f9;           /* fasce e zone secondarie */
  --panel: #ffffff;          /* riquadri e bolle */
  --panel-2: #f1f1f4;        /* riquadri alternati, campi */
  --accent: #f39200;         /* arancio Unibloc */
  --accent-dark: #c8770a;
  --text: #1c1c20;           /* testo principale */
  --muted: #6c6c78;          /* testo secondario */
  --border: #e3e3e8;         /* bordi */
  --barra: #1a1a1e;          /* barra scura che ospita il logo bianco */
  --barra-testo: #f2f2f5;
  --pericolo: #c0392b;       /* rosso leggibile su fondo chiaro */
  --ombra: 0 1px 3px rgba(20,20,30,.06), 0 6px 20px rgba(20,20,30,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.app { display: flex; flex-direction: column; height: 100vh; }

/* --- Barra superiore (scura, per il logo bianco) --- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: var(--barra);
  color: var(--barra-testo);
  border-bottom: 1px solid var(--barra);
}
.topbar img { height: 32px; width: auto; }
.topbar .title { font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.topbar .badge {
  font-size: 12px; color: #b9b9c4;
  border: 1px solid #34343c; padding: 3px 10px; border-radius: 20px;
}
.topbar .spacer { margin-left: auto; }
.topbar .user { color: #b9b9c4; font-size: 13px; margin-right: 4px; }
.topbar .iconbtn { border-color: #34343c; color: var(--barra-testo); }
.topbar .iconbtn:hover { background: #2a2a32; border-color: var(--accent); }

.iconbtn {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  font-size: 18px; display: grid; place-items: center;
}
.iconbtn:hover { background: var(--panel-2); border-color: var(--accent); }

.chat { flex: 1 1; overflow-y: auto; padding: 26px 0; background: var(--bg); }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 18px; }

/* --- Schermata iniziale --- */
.empty { text-align: center; color: var(--muted); margin-top: 12vh; }
.empty img {
  width: 210px; margin-bottom: 18px;
  background: var(--barra); padding: 18px 26px; border-radius: 16px;
  box-shadow: var(--ombra);
}
.empty h1 { color: var(--text); margin: 0 0 6px; }

/* --- Messaggi --- */
.msg { display: flex; gap: 12px; margin: 16px 0; }
.msg .avatar {
  flex: 0 0 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: #2a1a00;
}
.msg.user .avatar { background: var(--accent); }
.msg.assistant .avatar { background: var(--barra); color: var(--accent); }
.msg .bubble {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 15px; line-height: 1.55;
  white-space: pre-wrap; box-shadow: var(--ombra);
}
.msg.user .bubble { background: var(--panel-2); box-shadow: none; }

/* --- Riga di scrittura --- */
.composer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 14px 0; }
.composer form { display: flex; gap: 10px; }
.composer input {
  flex: 1 1; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 15px; outline: none;
}
.composer input::placeholder { color: #9a9aa6; }
.composer input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243,146,0,.14); }
.composer button {
  padding: 0 22px; border: none; border-radius: 12px;
  background: var(--accent); color: #2a1a00; font-weight: 700; cursor: pointer;
}
.composer button:hover { background: var(--accent-dark); color: #fff; }
.composer button:disabled { opacity: .4; cursor: default; }
.hint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 8px; }

.composer .webtoggle {
  flex: 0 0 auto; width: 46px; padding: 0; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 18px; cursor: pointer;
}
.composer .webtoggle:hover { border-color: var(--accent); }
.composer .webtoggle.on { background: var(--accent); border-color: var(--accent); }

/* --- Pannello impostazioni --- */
.overlay { position: fixed; inset: 0; background: rgba(20,20,30,.28); z-index: 10; }
.settings {
  position: fixed; top: 0; right: 0; height: 100vh; width: 340px; z-index: 11;
  background: var(--panel); border-left: 1px solid var(--border);
  padding: 20px; box-shadow: -8px 0 30px rgba(20,20,30,.12);
  display: flex; flex-direction: column; gap: 6px;
}
.settings h2 { margin: 0 0 4px; font-size: 17px; }
.settings .close { position: absolute; top: 16px; right: 16px; }
.settings .group { border-top: 1px solid var(--border); padding: 14px 0; }
.settings label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.settings .val { font-weight: 600; }
.settings select, .settings .btn {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; cursor: pointer;
}
.settings .btn.danger { border-color: #e6c3bf; color: var(--pericolo); background: #fdf4f3; }
.settings .btn:hover { border-color: var(--accent); }
.swatches { display: flex; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--border); cursor: pointer; }
.swatch.sel { border-color: var(--text); }

/* --- Pagina di accesso --- */
.login-page {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(180deg, #fafafc 0%, #f2f2f6 100%);
}
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 34px 34px; width: 360px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 10px 40px rgba(20,20,30,.10);
}
.login-logo-box {
  background: var(--barra); border-radius: 14px; padding: 18px 20px;
  margin: 0 auto 10px; display: grid; place-items: center; width: 100%;
}
.login-logo { width: 150px; display: block; margin: 0 auto; }
.login-card h1 { text-align: center; margin: 0; font-size: 22px; }
.login-card .sub { text-align: center; color: var(--muted); margin: 0 0 8px; font-size: 14px; }
.login-card input {
  padding: 13px 15px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-size: 15px; outline: none;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243,146,0,.14); }
.login-card button {
  margin-top: 4px; padding: 13px; border: none; border-radius: 11px;
  background: var(--accent); color: #2a1a00; font-weight: 700; font-size: 15px; cursor: pointer;
}
.login-card button:hover { background: var(--accent-dark); color: #fff; }
.login-card button:disabled { opacity: .45; cursor: default; }
.login-error { color: var(--pericolo); font-size: 13px; text-align: center; }
.login-hint { text-align: center; color: var(--muted); font-size: 11px; margin-top: 4px; }

/* --- Barra laterale --- */
.shell { display: flex; height: 100vh; }
.sidebar {
  width: 260px; flex: 0 0 260px; background: var(--bg-2);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.sidebar .newchat {
  margin: 14px; padding: 11px; border-radius: 10px; background: var(--panel);
  color: var(--text); border: 1px solid var(--border); font-weight: 600; cursor: pointer;
}
.sidebar .newchat:hover { border-color: var(--accent); background: #fff; }
.convlist { flex: 1 1; overflow-y: auto; padding: 0 8px; }
.convitem {
  display: flex; align-items: center; gap: 6px; padding: 10px;
  border-radius: 9px; cursor: pointer; color: var(--muted);
}
.convitem:hover { background: var(--panel); color: var(--text); }
.convitem.active { background: #fff; color: var(--text); border: 1px solid var(--border); }
.convtitle { flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.convitem .del { opacity: 0; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.convitem:hover .del { opacity: 1; }
.convempty { color: var(--muted); font-size: 13px; padding: 12px; text-align: center; }
.sideuser { border-top: 1px solid var(--border); padding: 12px 16px; color: var(--muted); font-size: 13px; }
.shell .app { flex: 1 1; min-width: 0; }

/* --- Memoria personale --- */
.memitem {
  display: flex; align-items: center; gap: 8px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px;
  margin-bottom: 6px; font-size: 13px;
}
.memitem span { flex: 1 1; }
.memitem .del { background: transparent; border: none; color: var(--muted); cursor: pointer; }
.memitem .del:hover { color: var(--pericolo); }

/* --- Markdown e blocchi di codice --- */
.markdown p { margin: 6px 0; }
.markdown h1,.markdown h2,.markdown h3 { margin: 12px 0 6px; }
.markdown ul,.markdown ol { margin: 6px 0; padding-left: 22px; }
.markdown a { color: var(--accent-dark); }
.markdown table { border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.markdown th { background: var(--panel-2); }
.markdown blockquote {
  margin: 8px 0; padding: 6px 14px; border-left: 3px solid var(--accent);
  background: var(--bg-2); color: var(--muted);
}
.inlinecode {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px; font-family: ui-monospace, monospace; font-size: 13px; color: #b1420a;
}
.codeblock {
  margin: 10px 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #fafafc;
}
.codebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.codebar .lang { color: var(--muted); font-size: 12px; text-transform: lowercase; }
.codebar .copybtn {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.codebar .copybtn:hover { border-color: var(--accent); }
.codeblock pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.codeblock code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }