/* ============================================================
   FRIENDS PAGE — SUMMONER CONNECT
   ============================================================ */

.friends-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  color:#eaf0ff;
  min-height: 70vh;
}

/* titolo pagina */
.page-title{
  text-align:center;
  font-family:'Cinzel',serif;
  font-size:1.9rem;
  color:#FFD700;
  text-shadow:0 0 12px rgba(255,215,0,.28);
  letter-spacing:.6px;
  margin-bottom:1.6rem;
}

/* barra ricerca */
.add-friend{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.add-friend input{
  width:min(680px, 80vw);
  padding:.7rem 1rem;
  border:1px solid rgba(255,215,0,.45);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
  transition:.2s;
}
.add-friend input:focus{ outline:none; border-color:#FFD700; box-shadow:0 0 12px rgba(255,215,0,.35); }
.add-friend button{
  background:linear-gradient(145deg,#FFD700,#B8860B);
  color:#0A0F2C; font-weight:800; border:0; border-radius:12px;
  padding:.7rem 1.2rem; cursor:pointer;
  box-shadow:0 0 10px rgba(255,215,0,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.add-friend button:hover{ transform:scale(1.05); box-shadow:0 0 16px rgba(255,215,0,.55); }

/* lista amici */
.friends-list{ display:flex; flex-direction:column; gap:.7rem; }

/* riga amico */
.friend-row{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(25,30,60,.78);
  border:1px solid rgba(255,215,0,.16);
  border-radius:14px;
  padding:.75rem 1rem;
  transition:transform .18s ease, background .18s ease;
}
.friend-row:hover{ transform:scale(1.01); background:rgba(35,40,70,.85); }

/* lato sinistro: avatar + nome + pallino + elo sotto al nome */
.friend-left{
  display:flex; align-items:center; gap:1rem; min-width:0;
}
.friend-avatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:1.6px solid #FFD700;
}
.friend-id{
  display:flex; flex-direction:column; min-width:0;
}
.friend-name{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; color:#FFFFFF; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.status-dot{
  width:12px; height:12px; border-radius:50%;
  margin-left:.35rem; /* ~ “2 spazi” ottici a destra del nome */
  box-shadow:0 0 6px rgba(0,0,0,.15);
}
.status-dot.online{ background:#00FF7F; box-shadow:0 0 6px rgba(0,255,127,.55);}
.status-dot.in-game{ background:#FFA500; box-shadow:0 0 6px rgba(255,165,0,.5);}
.status-dot.offline{ background:#2a2a2a; box-shadow:0 0 5px rgba(40,40,40,.45);}

.friend-elo{
  font-size:.9rem; color:#FFD700; opacity:.95; margin-top:.1rem;
}

/* lato destro: azioni */
.friend-actions{
  display:flex; align-items:center; gap:.45rem; flex-shrink:0;
}
.friend-actions button{
  border:0; border-radius:10px; padding:.5rem .9rem; font-weight:700; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* stili specifici */
.btn-invite{
  background:rgba(0,255,127,.14); color:#00FF7F; border:1px solid rgba(0,255,127,.35);
}
.btn-invite:hover{ background:rgba(0,255,127,.28); box-shadow:0 0 10px rgba(0,255,127,.3); }
.btn-invite:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

.btn-chat{
  background:rgba(135,206,250,.14); color:#9bd6ff; border:1px solid rgba(135,206,250,.3);
}
.btn-chat:hover{ background:rgba(135,206,250,.28); box-shadow:0 0 10px rgba(135,206,250,.3); }

.btn-remove{
  background:rgba(255,69,58,.32); color:#fff; border:1px solid rgba(255,69,58,.55);
}
.btn-remove:hover{ background:rgba(255,69,58,.48); box-shadow:0 0 10px rgba(255,69,58,.35); }

/* responsive */
@media (max-width: 820px){
  .friend-row{ flex-direction:column; align-items:stretch; gap:.65rem; }
  .friend-actions{ justify-content:center; }
}
/* ===== Stato pallino aggiornato (grigio più chiaro) ===== */
.status-dot.offline {
  background-color: #7a7a7a;
  box-shadow: 0 0 6px rgba(122,122,122,0.6);
}

/* ===== MODALE CHAT ===== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.hidden { display: none; }

.chat-box {
  width: 380px;
  background: rgba(25, 30, 60, 0.96);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(255,215,0,0.15);
  color: #fff;
}

/* Header della chat */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  border-bottom: 1px solid rgba(255,215,0,0.2);
  padding-bottom: .4rem;
}
.chat-user {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.chat-name {
  font-weight: 700;
  color: #FFD700;
  font-size: 1rem;
}
#chat-status {
  width: 12px; height: 12px; border-radius: 50%;
}

/* area messaggi */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: .5rem;
  max-height: 280px;
}
.chat-messages p {
  background: rgba(255,255,255,0.06);
  padding: .5rem .8rem;
  border-radius: 10px;
  margin-bottom: .4rem;
  width: fit-content;
}
.placeholder-msg {
  opacity: 0.8;
  text-align: center;
  font-style: italic;
}

/* input messaggio */
.chat-input {
  display: flex;
  align-items: center;
  margin-top: .5rem;
  gap: .5rem;
}
.chat-input input {
  flex: 1;
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 10px;
  padding: .4rem .8rem;
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.chat-input button {
  border: none;
  background: rgba(255,215,0,0.15);
  border-radius: 8px;
  padding: .45rem .7rem;
  cursor: pointer;
  color: #FFD700;
  font-size: 1.1rem;
  transition: 0.25s;
}
.chat-input button:hover {
  background: rgba(255,215,0,0.35);
}

/* bottone chiudi */
.close-btn {
  background: transparent;
  color: #FFD700;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}
.close-btn:hover { color: #fff; }
/* ===== ICONA INVIO (freccia stile Telegram) ===== */
.send-icon {
  width: 20px;
  height: 20px;
  fill: #FFD700;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.chat-input button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
}

.chat-input button:hover {
  background: rgba(255, 215, 0, 0.3);
}

.chat-input button:hover .send-icon {
  fill: #fff;
  transform: translate(2px, -2px) scale(1.05);
}

/* ===== RICHIESTE DI AMICIZIA ===== */
.friends-requests {
  margin-bottom: 1.6rem;
  background: rgba(25,30,60,0.6);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 14px;
  padding: 1rem;
}

.friends-requests.hidden {
  display: none;
}

.requests-title {
  color: #FFD700;
  font-family: 'Cinzel', serif;
  margin-bottom: .8rem;
  text-align: center;
}

.request-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(35,40,70,0.85);
  padding: .6rem .9rem;
  border-radius: 10px;
  margin-bottom: .5rem;
}

.request-name {
  font-weight: 700;
  color: #fff;
}

.request-actions button {
  border: none;
  border-radius: 8px;
  padding: .4rem .7rem;
  margin-left: .4rem;
  cursor: pointer;
  font-weight: 700;
}

.btn-accept {
  background: rgba(0,255,127,.25);
  color: #00FF7F;
}

.btn-decline {
  background: rgba(255,69,58,.35);
  color: #fff;
}

/* Evidenziazione da notifica */
.friends-requests.highlight {
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.6),
              0 0 25px rgba(255, 215, 0, 0.25);
  transition: box-shadow 0.3s ease;
}

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}