/* ============================================================
   Friends Module + Voice Chat Styles
   ============================================================ */

.friends-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}
.friends-main { min-width: 0; }

/* ── Friend Search ── */
.friend-search { position: relative; }
.friend-search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-border);
  border-radius: var(--card-radius);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
}
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(205,190,145,0.05);
  font-size: var(--font-sm);
  gap: 8px;
}
.search-result-item:hover { background: var(--bg-hover); }
.search-result-user{min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-result-avatar{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#202d3b;font-style:normal}
.search-result-avatar img{width:100%;height:100%;object-fit:cover}

/* ── Unread badge on friend list item ── */
.fl-unread {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--negative);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ── Friend Section ── */
.friend-section {
  margin-top: 16px;
}
.friend-section h5 {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* ── Friend Item ── */
.friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--gold-border-light);
  border-radius: var(--card-radius);
  margin-bottom: 6px;
  transition: all var(--transition-fast);
}
.friend-item:hover { border-color: var(--gold-border); }
.friend-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  position: relative;
}
.friend-avatar.online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--positive);
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}
.friend-avatar.offline::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #555;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-weight: 700; color: var(--text-primary); font-size: var(--font-sm); }
.friend-status { font-size: var(--font-xs); }
.friend-meta { font-size: var(--font-xs); color: var(--text-tertiary); }
.friend-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Friend Request Item ── */
.request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--card-radius);
  margin-bottom: 6px;
  gap: 8px;
  font-size: var(--font-sm);
}

/* ── Voice Chat Panel (Discord-style) ── */
.voice-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-border);
  border-radius: var(--panel-radius);
  z-index: 4000;
  display: none;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.voice-panel.active { display: block; animation: slideUp 0.3s ease; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.voice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--gold-border-light);
}
.voice-dot {
  width: 8px;
  height: 8px;
  background: var(--positive);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.voice-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
}
.voice-close:hover { color: var(--negative); }

.voice-channel-name {
  padding: 8px 14px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.voice-participants {
  padding: 0 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.voice-user {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.voice-user:hover { background: var(--bg-hover); }
.voice-user span { font-size: 18px; flex-shrink: 0; }

.voice-controls {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--gold-border-light);
  justify-content: center;
}
.voice-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 18px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.voice-btn:hover { background: var(--bg-hover); }
.voice-btn.disconnect { background: var(--negative); color: #fff; }
.voice-btn.disconnect:hover { opacity: 0.85; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .friends-layout { grid-template-columns: 1fr; }
  .friend-actions { flex-wrap: wrap; }
  .voice-panel { width: calc(100vw - 20px); right: 10px; bottom: 10px; }
}

/* Right-bottom Friends & Chat dock */
.friends-dock-toggle{position:fixed;right:14px;bottom:12px;z-index:1900;height:42px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid rgba(104,174,224,.42);border-radius:4px;background:#172433;color:#e7f3ff;box-shadow:0 8px 24px rgba(0,0,0,.38);cursor:pointer;font-size:13px}
.friends-dock-toggle:hover{background:#20364b;border-color:#68aee0}.friends-dock-toggle.logged-out{color:#9eabb8}.friends-dock-count{min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#2f89c8;color:#fff;font-size:11px;font-weight:800}
.friends-dock-panel{position:fixed;right:14px;bottom:60px;z-index:1800;width:min(760px,calc(100vw - 28px));height:min(640px,calc(100vh - 82px));display:none;flex-direction:column;background:#101824;border:1px solid #30465b;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden}.friends-dock-panel.active{display:flex;animation:slideUp .18s ease-out}
.friends-dock-header{height:44px;flex:0 0 44px;display:flex;align-items:center;padding:0 14px;background:#172433;border-bottom:1px solid #2b3d50;color:#f2f7fb}.friends-dock-header button{margin-left:auto;width:30px;height:30px;border:0;background:transparent;color:#9eabb8;font-size:22px;cursor:pointer}.friends-dock-header button:hover{color:#fff;background:#293a4c}
.friends-dock-body{flex:1;min-height:0;padding:12px;overflow:hidden}.friends-dock-body .friend-search{margin-bottom:10px}.friends-dock-body .friend-search input{height:38px;background:#0b111a;border-color:#2b3d50}
.friends-dock-layout{height:calc(100% - 48px);display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid #263748;background:#0b111a;overflow:hidden}.friends-list-panel{overflow-y:auto;background:#0d141e;border-right:1px solid #263748;padding:8px}.friends-list-panel h5{padding:8px 8px 5px;color:#71869b;font-size:10px;text-transform:uppercase}.friend-list-item{width:100%;min-height:48px;display:flex;align-items:center;gap:9px;padding:7px 8px;border:0;border-left:2px solid transparent;background:transparent;color:#d7e2ec;text-align:left;cursor:pointer}.friend-list-item:hover{background:#172433}.friend-list-item.selected{background:#1c3043;border-left-color:#4aa8e5}.friend-list-item.request{cursor:default}.fl-avatar,.request-avatar{position:relative;width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#202d3b;font-size:18px}.fl-dot{position:absolute;right:-1px;bottom:0;width:10px;height:10px;border:2px solid #0d141e;border-radius:50%}.fl-dot.online{background:#4fcf78}.fl-dot.offline{background:#596575}.friend-list-copy{display:flex;flex:1;min-width:0;flex-direction:column}.friend-list-copy strong,.fl-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-copy small{font-size:10px;color:#71869b}.friend-icon-btn{width:28px;height:28px;flex:0 0 28px;border:1px solid #31475b;border-radius:3px;background:#172433;color:#b8c8d7;cursor:pointer}.friend-icon-btn:hover{background:#263d51;color:#fff}.friend-icon-btn.accept{color:#62d28b}.friend-icon-btn.danger{color:#d98282}
.friends-dock-layout .friends-detail-panel{min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:0;margin:0}.friends-dock-layout .friend-profile-header{display:flex;align-items:center;gap:12px;padding:14px;margin:0;background:#121d29;border-bottom:1px solid #263748}.fp-avatar{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#243548;font-size:26px}.fp-info{flex:1}.fp-info h3{font-size:17px}.fp-info p{margin:2px 0 7px;color:#7f94a7;font-size:11px}.fp-actions{display:flex;gap:6px}.friends-dock-layout .chat-panel{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;border:0;border-radius:0;overflow:hidden}.chat-title{padding:8px 12px;color:#8da1b3;font-size:11px;border-bottom:1px solid #263748}.friends-dock-layout .chat-messages{flex:1;height:auto;overflow-y:auto;padding:12px}.chat-msg{max-width:78%;margin-bottom:8px;padding:8px 10px;border-radius:5px;background:#1b2a38;color:#dbe6ef;font-size:12px}.chat-msg.mine{margin-left:auto;background:#22557a}.chat-msg small{display:block;margin-top:4px;color:#98aaba;font-size:9px}.chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid #263748}.chat-input-row input{height:36px;background:#0e1721;border-color:#2a3c4e}.friends-dock-empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#71869b;text-align:center}.friends-dock-empty.compact{height:auto;padding:24px}.friends-dock-empty small{margin-top:5px}.friend-state{font-size:11px;color:#62d28b}.voice-panel{bottom:64px}
@media(max-width:700px){.friends-dock-panel{right:6px;bottom:56px;width:calc(100vw - 12px);height:calc(100dvh - 68px)}.friends-dock-toggle{right:8px;bottom:8px}.friends-dock-body{padding:6px}.friends-dock-layout{grid-template-columns:132px minmax(0,1fr)}.friends-list-panel{padding:4px}.friend-list-item{padding:5px 4px}.friend-list-copy small{display:none}.fp-actions .btn-primary{font-size:10px;padding:5px 7px}.chat-msg{max-width:92%}}