/* ==========================================================
   LWTRICK CMS — Système d'amis (sidebar, popup profil, chat privé)
   ========================================================== */

.lw-user-link{ cursor:pointer; }

/* ---------- Dock / bouton toggle ---------- */
.lw-friends-dock{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 200;
}
.lw-friends-toggle{
  background: linear-gradient(135deg, var(--lw-gold), var(--lw-orange));
  border: none;
  color: #16110a;
  width: 46px;
  height: 46px;
  border-radius: 12px 0 0 12px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--lw-shadow);
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lw-friends-badge{
  position:absolute;
  top:-6px;
  left:-6px;
  background: var(--lw-red);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}
.lw-friends-badge-inline{
  position: static;
  margin-left: auto;
}

/* ---------- Panneau latéral ---------- */
.lw-friends-panel{
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: var(--lw-panel);
  border-left: 1px solid var(--lw-border);
  box-shadow: var(--lw-shadow);
  transition: right .25s ease;
  z-index: 199;
  display:flex;
  flex-direction:column;
}
.lw-friends-panel.open{ right: 0; }

.lw-friends-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lw-border);
  font-weight:700;
  color: var(--lw-gold);
}
.lw-friends-close{
  background:none; border:none; color:var(--lw-text-dim); font-size:1.1rem; cursor:pointer;
}
.lw-friends-panel-body{
  padding: 12px 14px;
  overflow-y:auto;
  flex:1;
}
.lw-friends-section{ margin-bottom: 18px; }
.lw-friends-section h4{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color: var(--lw-text-dim);
  margin-bottom:8px;
}
.lw-friends-empty, .lw-friends-empty-small{
  color: var(--lw-text-dim);
  font-size:.82rem;
  text-align:center;
  padding: 10px 0;
}

.lw-friend-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 6px;
  border-radius: 8px;
  cursor:pointer;
}
.lw-friend-item:hover{ background: var(--lw-panel-2); }
.lw-friend-avatar-wrap{ position:relative; flex-shrink:0; }
.lw-friend-name{ font-size:.88rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-friend-pending-actions{ display:flex; gap:4px; }

/* ---------- Popup profil ---------- */
.lw-profile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(6,9,13,.72);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 300;
  padding: 16px;
}
.lw-profile-overlay.open{ display:flex; }

.lw-profile-popup{
  background: var(--lw-panel);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius);
  box-shadow: var(--lw-shadow);
  width: 100%;
  max-width: 340px;
  padding: 18px;
  position: relative;
}
.lw-profile-popup-close{
  position:absolute;
  top:10px; right:10px;
  background:none;
  border:none;
  color: var(--lw-text-dim);
  font-size:1.1rem;
  cursor:pointer;
}
.lw-profile-popup-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 16px;
}
.lw-profile-popup-actions{ display:flex; flex-direction:column; gap:8px; }
.lw-profile-actions-row{ display:flex; gap:8px; }
.lw-profile-actions-row .lw-btn{ flex:1; }

.lw-report-box{
  background: var(--lw-panel-2);
  border: 1px solid var(--lw-border);
  border-radius: 8px;
  padding: 10px;
  margin-top: 4px;
}
.lw-report-box label{ font-size:.78rem; color:var(--lw-text-dim); display:block; margin-bottom:4px; }

/* ---------- Chat privé (fenêtre flottante) ---------- */
.lw-pm-window{
  position: fixed;
  bottom: 0;
  right: 60px;
  width: 300px;
  max-width: calc(100vw - 32px);
  height: 380px;
  background: var(--lw-panel);
  border: 1px solid var(--lw-border);
  border-bottom: none;
  border-radius: var(--lw-radius) var(--lw-radius) 0 0;
  box-shadow: var(--lw-shadow);
  display: none;
  flex-direction: column;
  z-index: 250;
}
.lw-pm-window.open{ display:flex; }

.lw-pm-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--lw-border);
  font-weight:600;
  font-size:.9rem;
}
.lw-pm-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.lw-pm-close{ margin-left:auto; background:none; border:none; color:var(--lw-text-dim); cursor:pointer; font-size:1rem; }

.lw-pm-messages{
  flex:1;
  overflow-y:auto;
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lw-pm-msg{ display:flex; }
.lw-pm-msg.own{ justify-content:flex-end; }
.lw-pm-msg-bubble{
  background: var(--lw-panel-2);
  padding: 7px 11px;
  border-radius: 14px;
  font-size:.85rem;
  max-width: 78%;
  word-break: break-word;
}
.lw-pm-msg.own .lw-pm-msg-bubble{
  background: linear-gradient(135deg, var(--lw-gold), var(--lw-orange));
  color: #16110a;
}

.lw-pm-form{
  display:flex;
  gap:6px;
  padding: 8px;
  border-top: 1px solid var(--lw-border);
}
.lw-pm-form .lw-input{ flex:1; }

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  .lw-friends-panel{ width: 88vw; right: -100vw; }
  .lw-pm-window{ right: 8px; left: 8px; width: auto; height: 60vh; }
  .lw-friends-toggle{ width:42px; height:42px; }
}