/* STK Chat — ferro, ottone, osso */
:root {
  --notte: #1a1d27;
  --ferro: #242938;
  --ferro2: #2e3447;
  --bordo: #363d52;
  --ottone: #c8a24e;
  --ottone-scuro: #8a6f34;
  --osso: #e9e4d8;
  --brughiera: #9298ab;
  --sangue: #b85c4a;
  --presenza: #7dbe82;
  --raggio: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--osso);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, .display {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
  font-weight: 600;
}
button {
  font: inherit; cursor: pointer; border: 1px solid var(--bordo);
  background: var(--ferro2); color: var(--osso);
  border-radius: var(--raggio); padding: 8px 14px;
}
button:hover { border-color: var(--ottone-scuro); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ottone); outline-offset: 1px; }
button.primario { background: var(--ottone); color: #211b0c; border-color: var(--ottone); font-weight: 600; }
button.primario:hover { background: #d8b25e; }
button.pericolo { color: var(--sangue); }
input, select {
  font: inherit; color: var(--osso); background: var(--notte);
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 9px 12px;
}
input::placeholder { color: var(--brughiera); }
.nascosto { display: none !important; }
.muto { color: var(--brughiera); font-size: 13px; }

/* ---------- schermata di accesso ---------- */
#schermo-auth {
  min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.scatola-auth {
  width: 100%; max-width: 380px; background: var(--ferro);
  border: 1px solid var(--bordo); border-radius: 14px; padding: 28px;
}
.stemma {
  text-align: center; margin-bottom: 6px; font-size: 26px; color: var(--ottone);
}
.motto { text-align: center; margin: 0 0 20px; }
.avviso-amatoriale { color: var(--ottone); margin-top: -12px; font-size: 12px; }
.scatola-auth form { display: flex; flex-direction: column; gap: 10px; }
.schede { display: flex; gap: 8px; margin-bottom: 16px; }
.schede button { flex: 1; }
.schede button[aria-selected="true"] { border-color: var(--ottone); color: var(--ottone); }
.errore { color: var(--sangue); font-size: 13px; min-height: 18px; margin: 4px 0 0; }
.riga-privacy { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--brughiera); cursor: pointer; }
.riga-privacy input { margin-top: 3px; }
.link-privacy {
  background: none; border: none; padding: 0; color: var(--ottone);
  text-decoration: underline; cursor: pointer; font: inherit;
}
.modale {
  position: fixed; inset: 0; background: rgba(10,11,16,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modale-scatola {
  background: var(--ferro); border: 1px solid var(--bordo); border-radius: 14px;
  max-width: 620px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 26px;
  position: relative;
}
.modale-scatola h2 { color: var(--ottone); margin-top: 0; }
.modale-scatola h3 { color: var(--osso); font-size: 15px; margin: 18px 0 6px; }
.modale-scatola ul { padding-left: 20px; margin: 6px 0; }
.modale-scatola li { margin: 4px 0; }
.modale-chiudi {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; font-size: 15px;
}
#privacy-lingua-riga { display: flex; align-items: center; gap: 8px; margin: 0 34px 8px 0; font-size: 13px; }
#privacy-lingua-riga select {
  font: inherit; color: var(--osso); background: var(--notte);
  border: 1px solid var(--bordo); border-radius: 8px; padding: 4px 8px;
}
#avviso-privacy-traduzione {
  background: rgba(200,162,78,.1); border: 1px solid var(--ottone-scuro);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; margin: 0 0 12px;
}

/* ---------- struttura principale ---------- */
#schermo-app { display: none; height: 100dvh; }
#schermo-app.attivo { display: flex; }
#colonna {
  width: 320px; min-width: 260px; background: var(--ferro);
  border-right: 1px solid var(--bordo); display: flex; flex-direction: column;
}
#pannello-io { padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
#riga-io { display: flex; align-items: center; gap: 10px; }
#mio-nome { font-size: 17px; }
#riga-io .spazio { flex: 1; }

/* sigillo dell'invisibilità */
#sigillo {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bordo);
  background: var(--ferro2); display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding: 0;
}
#sigillo[aria-pressed="true"] { border-color: var(--ottone); color: var(--ottone); box-shadow: 0 0 0 3px rgba(200,162,78,.15); }
#stato-testo { font-size: 12px; }

#cerca-utenti { padding: 12px 16px; border-bottom: 1px solid var(--bordo); }
#cerca-utenti input { width: 100%; }
#risultati-utenti { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.riga-utente {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--raggio); background: var(--ferro2); border: 1px solid transparent;
  cursor: pointer;
}
.riga-utente:hover { border-color: var(--ottone-scuro); }
.pallino { width: 9px; height: 9px; border-radius: 50%; background: var(--bordo); flex: none; }
.pallino.online { background: var(--presenza); }

#sezione-richieste { padding: 10px 16px 0; }
.etichetta-sezione {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ottone);
  margin: 6px 0;
}
.richiesta {
  background: var(--ferro2); border: 1px solid var(--ottone-scuro);
  border-radius: var(--raggio); padding: 10px; margin-bottom: 8px;
}
.richiesta .azioni { display: flex; gap: 8px; margin-top: 8px; }
.richiesta .azioni button { padding: 5px 10px; font-size: 13px; }

#lista-chat { flex: 1; overflow-y: auto; padding: 8px; }
.voce-chat {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--raggio); cursor: pointer; border: 1px solid transparent;
}
.voce-chat:hover { background: var(--ferro2); }
.voce-chat.selezionata { background: var(--ferro2); border-color: var(--ottone-scuro); }
.voce-chat .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#pannello-backup { padding: 12px 16px; border-top: 1px solid var(--bordo); display: flex; gap: 8px; }
#pannello-backup button { flex: 1; font-size: 13px; padding: 7px 8px; }

/* ---------- pannello chat ---------- */
#pannello-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#vuoto {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; color: var(--brughiera); text-align: center; padding: 24px;
}
#testata-chat {
  display: none; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bordo); background: var(--ferro);
}
#testata-chat.attiva { display: flex; }
#btn-indietro { display: none; }
#nome-peer { font-size: 17px; }
#testata-chat .spazio { flex: 1; }
#testata-chat button { padding: 6px 10px; font-size: 13px; }

#testata-gruppo {
  display: none; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bordo); background: var(--ferro);
}
#testata-gruppo.attiva { display: flex; }
#testata-gruppo .spazio { flex: 1; }
#testata-gruppo button { padding: 6px 10px; font-size: 13px; }
#composer-gruppo { display: none; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bordo); background: var(--ferro); }
#composer-gruppo.attivo { display: flex; }
#composer-gruppo input { flex: 1; }
.mini-btn { padding: 3px 9px; font-size: 12px; border-radius: 7px; }
.menu-wrap { position: relative; }
.menu-a-tendina {
  position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 20;
  background: var(--ferro2); border: 1px solid var(--bordo); border-radius: var(--raggio);
  display: flex; flex-direction: column; min-width: 160px; overflow: hidden; padding: 4px;
}
.menu-a-tendina button {
  text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 6px; font-size: 13px;
}
.menu-a-tendina button:hover { background: var(--ferro); }

#barra-ricerca { display: none; padding: 8px 16px; background: var(--ferro); border-bottom: 1px solid var(--bordo); }
#barra-ricerca.attiva { display: flex; gap: 8px; }
#barra-ricerca input { flex: 1; }

#messaggi { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72%; align-self: flex-start; }
.msg.mio { align-self: flex-end; }
.bolla {
  background: var(--ferro2); border: 1px solid var(--bordo);
  border-radius: 12px; padding: 9px 12px; white-space: pre-wrap; word-wrap: break-word;
}
.msg.mio .bolla {
  background: #35311f; border-color: var(--ottone-scuro); border-left: 3px solid var(--ottone);
}
.msg .meta { font-size: 11px; color: var(--brughiera); margin-top: 3px; }
.msg.mio .meta { text-align: right; }
.msg.evidenziato .bolla { box-shadow: 0 0 0 2px var(--ottone); }

/* la glossa: traduzione sotto il messaggio */
.glossa {
  margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--ottone);
  color: #d9cfae; font-style: italic; font-size: 14px; background: rgba(200,162,78,.07);
  border-radius: 0 8px 8px 0;
}
.btn-traduci {
  margin-top: 4px; font-size: 12px; padding: 2px 8px; border-radius: 6px;
  background: transparent; border: 1px solid var(--bordo); color: var(--ottone);
}

#composer { display: none; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bordo); background: var(--ferro); }
#composer.attivo { display: flex; }
#composer input { flex: 1; }

#avviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ferro2); border: 1px solid var(--ottone-scuro); color: var(--osso);
  padding: 10px 16px; border-radius: var(--raggio); display: none; max-width: 90vw;
}
#avviso.attivo { display: block; }

@media (max-width: 760px) {
  #colonna { position: absolute; inset: 0; width: 100%; z-index: 2; }
  #colonna.ripiegata { display: none; }
  #btn-indietro { display: inline-block; }
}
@media (prefers-reduced-motion: no-preference) {
  .msg { animation: entra .18s ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}