:root{
  --bg:#0f1720;
  --card:#0b1220;
  --accent:#06b6d4;
  --text:#e6eef6;
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;}
body{margin:0;background:linear-gradient(180deg,#071023 0%,#071a2a 100%);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.hidden{display:none;}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;}
#messages{width:100%;max-width:800px;height:60vh;overflow:auto;background:rgba(255,255,255,0.02);border-radius:8px;padding:12px;margin-bottom:12px;}
.message{padding:8px 10px;border-radius:6px;margin-bottom:8px;background:rgba(255,255,255,0.02);}
.message .meta{font-size:12px;color:#9fb6c6;margin-bottom:6px;}
footer{display:flex;gap:8px;max-width:800px;width:100%;}
footer input{flex:1;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);}
footer button{padding:10px 14px;border-radius:6px;background:var(--accent);border:none;color:#012;cursor:pointer;font-weight:600;}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
.card{background:var(--card);padding:24px;border-radius:8px;width:320px;box-shadow:0 6px 18px rgba(2,6,23,0.6);text-align:center;}
.card input{width:100%;padding:10px;margin-top:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);}
#status{font-size:13px;color:#9fb6c6;}
.onlinebox{position:fixed;top:20px;right:20px;background:var(--card);padding:16px;border-radius:8px;width:220px;box-shadow:0 4px 12px rgba(0,0,0,0.4);z-index:1000;max-height:400px;overflow-y:auto;}
.onlinebox h3{margin:0 0 12px 0;font-size:14px;}
#onlineList{display:flex;flex-direction:column;gap:8px;}
.online-user{padding:6px 10px;background:rgba(255,255,255,0.05);border-radius:6px;font-size:13px;}

/* Corpo del messaggio */
.message .body {
  font-size: 14px;
  color: var(--text);
  word-wrap: break-word;
}

/* Immagini embed */
.message-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 6px;
  margin-top: 6px;
  display: block;
}

/* Link nei messaggi */
.message a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
.message a:hover {
  text-decoration: underline;
}