/* =====================================================================
   Barátok + csevegő panel (friendsPanel partial + friends-panel.js)
   Az oldal dizájnjához igazítva: sötét felület, halk vonalak, arany kiemelés.
   Ez a fájl a site.css régi .friends-panel / .fp-* blokkját váltja (az ott
   maradt régi szabályok felülírása miatt a szelektorok #friendsPanel-lel kezdődnek).
   ===================================================================== */
#friendsPanel{
  --fp-bg:#0f131a; --fp-bg-2:#141820; --fp-bg-3:#1a1f29;
  --fp-line:rgba(255,255,255,.08); --fp-line-2:rgba(216,191,122,.22);
  --fp-text:#e9ecf1; --fp-muted:#98a2b3; --fp-gold:#d8bf7a; --fp-gold-2:#a78e52;
  --fp-online:#22c55e; --fp-away:#f59e0b; --fp-dnd:#ef4444; --fp-offline:#6b7280;
  --fp-me:#2b3a55; --fp-me-2:#243350; --fp-them:#1c222d;
  --fp-side-w:330px; --fp-radius:16px;
  position:fixed; inset:0; z-index:1060; display:none; font-size:.9rem; color:var(--fp-text);
}
#friendsPanel.open{ display:block; }
#friendsPanel *{ box-sizing:border-box; }
#friendsPanel .fp-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s; }
#friendsPanel.open .fp-overlay{ opacity:1; }

#friendsPanel .fp-drawer{
  position:absolute; top:0; right:0; bottom:0; width:min(96vw, 980px);
  display:grid; grid-template-columns:var(--fp-side-w) 1fr;
  background:var(--fp-bg); border-left:1px solid var(--fp-line-2);
  box-shadow:-24px 0 70px rgba(0,0,0,.6);
  transform:translateX(100%); transition:transform .24s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
#friendsPanel.open .fp-drawer{ transform:translateX(0); }

/* ---------- ikon gombok, jelvények, pöttyök ---------- */
#friendsPanel .fp-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
  border:1px solid transparent; background:transparent; color:var(--fp-muted); cursor:pointer; text-decoration:none;
  transition:background .15s, color .15s, border-color .15s; font-size:1rem; line-height:1;
}
#friendsPanel .fp-iconbtn:hover{ background:rgba(255,255,255,.06); color:var(--fp-text); border-color:var(--fp-line); }
#friendsPanel .fp-iconbtn.is-on{ color:var(--fp-gold); }
#friendsPanel .fp-badge{
  display:none; min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:.68rem; font-weight:800; line-height:18px;
  text-align:center; color:#151515; background:var(--fp-gold); font-style:normal;
}
#friendsPanel .fp-badge:not(:empty){ display:inline-block; }
#friendsPanel .fp-badge--soft{ background:rgba(255,255,255,.12); color:var(--fp-text); }
#friendsPanel .fp-pdot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--fp-offline); box-shadow:0 0 0 2px var(--fp-bg); }
#friendsPanel .fp-pdot.is-online{ background:var(--fp-online); box-shadow:0 0 0 2px var(--fp-bg), 0 0 8px rgba(34,197,94,.6); }
#friendsPanel .fp-pdot.is-away{ background:var(--fp-away); }
#friendsPanel .fp-pdot.is-dnd{ background:var(--fp-dnd); }
#friendsPanel .fp-pdot.is-offline{ background:var(--fp-offline); }

/* ---------- avatarok ---------- */
#friendsPanel .fp-av{ position:relative; display:inline-block; flex:0 0 auto; width:42px; height:42px; border-radius:50%; overflow:visible; vertical-align:middle; }
#friendsPanel .fp-av img{ display:block; }
#friendsPanel .fp-av img,#friendsPanel .fp-av .fp-av-fb{
  width:100%; height:100%; border-radius:50%; object-fit:cover; border:1px solid var(--fp-line); place-items:center;
  font-weight:800; text-transform:uppercase; color:#fff; user-select:none;
}
#friendsPanel .fp-av .fp-pdot{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; }
#friendsPanel .fp-av--sm{ width:30px; height:30px; font-size:.78rem; }
#friendsPanel .fp-av--sm .fp-pdot{ width:9px; height:9px; }
#friendsPanel .fp-av--xs{ width:22px; height:22px; font-size:.62rem; }

/* ---------- bal oszlop ---------- */
#friendsPanel .fp-side{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--fp-line); background:var(--fp-bg-2); }
#friendsPanel .fp-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 10px; border-bottom:1px solid var(--fp-line); }
#friendsPanel .fp-me{ display:flex; align-items:center; gap:10px; min-width:0; position:relative; }
#friendsPanel .fp-me-text{ min-width:0; display:flex; flex-direction:column; }
#friendsPanel .fp-me-text strong{ font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f1e4c2; }
#friendsPanel .fp-me-presence{ display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--fp-muted); font-size:.74rem; cursor:pointer; }
#friendsPanel .fp-me-presence i{ font-size:.65rem; }
#friendsPanel .fp-presence-menu{
  position:absolute; left:52px; top:44px; z-index:5; min-width:170px; padding:6px; border-radius:12px;
  background:var(--fp-bg-3); border:1px solid var(--fp-line-2); box-shadow:0 14px 40px rgba(0,0,0,.5);
}
#friendsPanel .fp-presence-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--fp-text); font-size:.85rem; cursor:pointer; text-align:left; }
#friendsPanel .fp-presence-menu button:hover{ background:rgba(255,255,255,.06); }
#friendsPanel .fp-header-actions{ display:flex; gap:4px; }

#friendsPanel .fp-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:8px 10px 0; }
#friendsPanel .fp-tab{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px 6px; border:0; border-radius:10px;
  background:transparent; color:var(--fp-muted); font-size:.68rem; letter-spacing:.02em; cursor:pointer; transition:background .15s,color .15s;
}
#friendsPanel .fp-tab i{ font-size:1.05rem; }
#friendsPanel .fp-tab:hover{ background:rgba(255,255,255,.05); color:var(--fp-text); }
#friendsPanel .fp-tab.active{ background:rgba(216,191,122,.1); color:var(--fp-gold); }
#friendsPanel .fp-tab .fp-badge{ position:absolute; top:4px; right:6px; }

#friendsPanel .fp-search{ position:relative; display:flex; align-items:center; margin:10px 10px 6px; }
#friendsPanel .fp-search > i{ position:absolute; left:11px; color:var(--fp-muted); font-size:.85rem; pointer-events:none; }
#friendsPanel .fp-search input{
  width:100%; height:36px; padding:0 32px 0 32px; border-radius:10px; border:1px solid var(--fp-line); background:rgba(0,0,0,.28); color:var(--fp-text); font-size:.84rem; outline:none;
}
#friendsPanel .fp-search input:focus{ border-color:var(--fp-line-2); box-shadow:0 0 0 3px rgba(216,191,122,.12); }
#friendsPanel .fp-search-clear{ position:absolute; right:6px; width:26px; height:26px; border:0; border-radius:8px; background:transparent; color:var(--fp-muted); cursor:pointer; }
#friendsPanel .fp-search-clear:hover{ background:rgba(255,255,255,.08); color:#fff; }

#friendsPanel .fp-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 8px 10px; scrollbar-width:thin; scrollbar-color:rgba(216,191,122,.35) transparent; }
#friendsPanel .fp-sec{ padding:10px 8px 4px; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--fp-muted); }
#friendsPanel .fp-empty{ padding:26px 12px; text-align:center; color:var(--fp-muted); font-size:.84rem; }
#friendsPanel .fp-empty i{ display:block; font-size:1.6rem; margin-bottom:6px; opacity:.6; }

#friendsPanel .fp-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%; padding:8px 8px; border:0; border-radius:12px;
  background:transparent; color:var(--fp-text); text-align:left; cursor:pointer; transition:background .12s;
}
#friendsPanel .fp-item:hover{ background:rgba(255,255,255,.05); }
#friendsPanel .fp-item.is-active{ background:rgba(216,191,122,.1); box-shadow:inset 3px 0 0 var(--fp-gold); }
#friendsPanel .fp-item.has-unread .fp-item-name{ color:#fff; font-weight:800; }
#friendsPanel .fp-item.has-unread .fp-item-sub{ color:#d9dee7; }
#friendsPanel .fp-item.flash{ animation:fpFlash 1.2s ease; }
@keyframes fpFlash{ 0%{ background:rgba(216,191,122,.35);} 100%{ background:transparent;} }
#friendsPanel .fp-item-main{ min-width:0; }
#friendsPanel .fp-item-name{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#friendsPanel .fp-item-name .bi-star-fill{ color:var(--fp-gold); font-size:.7rem; }
#friendsPanel .fp-item-name .bi-bell-slash-fill{ color:var(--fp-muted); font-size:.7rem; }
#friendsPanel .fp-item-sub{ font-size:.76rem; color:var(--fp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#friendsPanel .fp-item-sub.play{ color:#8fe3a0; }
#friendsPanel .fp-item-side{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
#friendsPanel .fp-item-time{ font-size:.68rem; color:var(--fp-muted); white-space:nowrap; }
#friendsPanel .fp-item-actions{ display:flex; gap:2px; opacity:0; transition:opacity .15s; }
#friendsPanel .fp-item:hover .fp-item-actions,#friendsPanel .fp-item:focus-within .fp-item-actions{ opacity:1; }
#friendsPanel .fp-item-actions .fp-iconbtn{ width:28px; height:28px; font-size:.85rem; }
#friendsPanel .fp-item-actions .fp-iconbtn.ok{ color:#8fe3a0; }
#friendsPanel .fp-item-actions .fp-iconbtn.no{ color:#f4a4a4; }
#friendsPanel .fp-chip{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:.64rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#cbb581; background:rgba(216,191,122,.1); border:1px solid rgba(216,191,122,.3); }
#friendsPanel .fp-chip--muted{ color:var(--fp-muted); background:rgba(255,255,255,.05); border-color:var(--fp-line); }
#friendsPanel .fp-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:10px; border:1px solid transparent; font-weight:600; font-size:.8rem; cursor:pointer; }
#friendsPanel .fp-btn--gold{ background:linear-gradient(180deg,var(--fp-gold),var(--fp-gold-2)); color:#151515; }
#friendsPanel .fp-btn--ghost{ background:rgba(255,255,255,.05); color:var(--fp-text); border-color:var(--fp-line); }
#friendsPanel .fp-btn--danger{ background:rgba(239,68,68,.15); color:#f4a4a4; border-color:rgba(239,68,68,.4); }
#friendsPanel .fp-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- jobb oszlop: beszélgetés ---------- */
#friendsPanel .fp-chat{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; background:radial-gradient(1200px 500px at 70% -10%, rgba(216,191,122,.06), transparent 60%), var(--fp-bg); }
#friendsPanel .fp-chat-empty{ margin:auto; text-align:center; color:var(--fp-muted); padding:30px; }
#friendsPanel .fp-chat-empty i{ font-size:2.6rem; color:var(--fp-gold); opacity:.7; }
#friendsPanel .fp-chat-empty h4{ margin:10px 0 4px; color:#f1e4c2; font-size:1.05rem; }
#friendsPanel .fp-chat-empty p{ margin:0; font-size:.85rem; max-width:320px; }
#friendsPanel .fp-chat-wrap{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
#friendsPanel .fp-chat-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--fp-line); background:rgba(0,0,0,.15); }
#friendsPanel .fp-chat-back{ display:none; }
#friendsPanel .fp-chat-title{ min-width:0; display:flex; flex-direction:column; line-height:1.15; }
#friendsPanel .fp-chat-title strong{ font-size:.95rem; color:#f1e4c2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#friendsPanel .fp-chat-title small{ font-size:.72rem; color:var(--fp-muted); }
#friendsPanel .fp-chat-title small.is-online{ color:#8fe3a0; }
#friendsPanel .fp-chat-tools{ margin-left:auto; display:flex; align-items:center; gap:2px; }
#friendsPanel .fp-menu-wrap{ position:relative; }
#friendsPanel .fp-menu{ position:absolute; right:0; top:38px; z-index:6; min-width:250px; padding:6px; border-radius:12px; background:var(--fp-bg-3); border:1px solid var(--fp-line-2); box-shadow:0 14px 40px rgba(0,0,0,.55); }
#friendsPanel .fp-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:8px; background:none; color:var(--fp-text); font-size:.84rem; cursor:pointer; text-align:left; }
#friendsPanel .fp-menu button:hover{ background:rgba(255,255,255,.06); }
#friendsPanel .fp-menu button.danger{ color:#f4a4a4; }

#friendsPanel .fp-chat-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px; scrollbar-width:thin; scrollbar-color:rgba(216,191,122,.35) transparent; }
#friendsPanel .fp-load-more{ display:block; margin:0 auto 10px; padding:5px 12px; border-radius:999px; border:1px solid var(--fp-line); background:rgba(255,255,255,.04); color:var(--fp-muted); font-size:.74rem; cursor:pointer; }
#friendsPanel .fp-load-more:hover{ color:var(--fp-text); border-color:var(--fp-line-2); }
#friendsPanel .fp-msgs{ display:flex; flex-direction:column; gap:2px; }
#friendsPanel .fp-day{ align-self:center; margin:12px 0 8px; padding:3px 10px; border-radius:999px; font-size:.68rem; font-weight:600; letter-spacing:.04em; color:var(--fp-muted); background:rgba(255,255,255,.05); border:1px solid var(--fp-line); }
#friendsPanel .fp-newsep{ display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--fp-gold); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
#friendsPanel .fp-newsep::before,#friendsPanel .fp-newsep::after{ content:''; flex:1; height:1px; background:rgba(216,191,122,.35); }

#friendsPanel .fp-row{ display:flex; align-items:flex-end; gap:8px; max-width:78%; }
#friendsPanel .fp-row.me{ align-self:flex-end; flex-direction:row-reverse; }
#friendsPanel .fp-row .fp-av{ visibility:hidden; }
#friendsPanel .fp-row.show-av .fp-av{ visibility:visible; }
#friendsPanel .fp-row.me .fp-av{ display:none; }
#friendsPanel .fp-row.first{ margin-top:8px; }
#friendsPanel .fp-bubble{
  position:relative; padding:7px 11px 6px; border-radius:16px; background:var(--fp-them); border:1px solid var(--fp-line); color:var(--fp-text);
  font-size:.86rem; line-height:1.35; word-break:break-word; white-space:pre-wrap;
}
#friendsPanel .fp-row.me .fp-bubble{ background:linear-gradient(180deg,var(--fp-me),var(--fp-me-2)); border-color:rgba(216,191,122,.18); }
#friendsPanel .fp-row.first:not(.me) .fp-bubble{ border-top-left-radius:6px; }
#friendsPanel .fp-row.first.me .fp-bubble{ border-top-right-radius:6px; }
#friendsPanel .fp-bubble a{ color:var(--fp-gold); text-decoration:underline; }
#friendsPanel .fp-bubble.is-deleted{ font-style:italic; color:var(--fp-muted); background:transparent; }
#friendsPanel .fp-meta{ display:flex; justify-content:flex-end; align-items:center; gap:5px; margin-top:3px; font-size:.64rem; color:rgba(255,255,255,.55); }
#friendsPanel .fp-meta .ticks{ font-size:.72rem; }
#friendsPanel .fp-meta .ticks.seen{ color:#8fc1ef; }
#friendsPanel .fp-row .fp-msg-menu{ opacity:0; transition:opacity .15s; }
#friendsPanel .fp-row:hover .fp-msg-menu{ opacity:1; }
#friendsPanel .fp-msg-menu{ width:24px; height:24px; font-size:.8rem; align-self:center; }
#friendsPanel .fp-msg-actions{ position:absolute; z-index:7; min-width:200px; padding:6px; border-radius:12px; background:var(--fp-bg-3); border:1px solid var(--fp-line-2); box-shadow:0 14px 40px rgba(0,0,0,.55); }
#friendsPanel .fp-msg-actions button{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--fp-text); font-size:.82rem; cursor:pointer; text-align:left; }
#friendsPanel .fp-msg-actions button:hover{ background:rgba(255,255,255,.06); }
#friendsPanel .fp-msg-actions button.danger{ color:#f4a4a4; }

#friendsPanel .fp-chat-foot{ position:relative; border-top:1px solid var(--fp-line); background:rgba(0,0,0,.15); }
#friendsPanel .fp-chat-typing,#friendsPanel .fp-chat-seen{ padding:5px 14px 0; font-size:.72rem; color:var(--fp-muted); display:flex; align-items:center; gap:6px; }
#friendsPanel .fp-chat-seen{ justify-content:flex-end; }
#friendsPanel .fp-dots{ display:inline-flex; gap:3px; }
#friendsPanel .fp-dots i{ width:5px; height:5px; border-radius:50%; background:var(--fp-gold); animation:fpDot 1.2s infinite ease-in-out; }
#friendsPanel .fp-dots i:nth-child(2){ animation-delay:.2s; } #friendsPanel .fp-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes fpDot{ 0%,80%,100%{ transform:translateY(0); opacity:.4;} 40%{ transform:translateY(-4px); opacity:1;} }
#friendsPanel .fp-compose{ display:flex; align-items:flex-end; gap:6px; padding:8px 10px 10px; }
#friendsPanel .fp-compose textarea{
  flex:1 1 auto; min-width:0; min-height:38px; max-height:160px; padding:9px 12px; border-radius:14px; resize:none; overflow:auto;
  border:1px solid var(--fp-line); background:rgba(0,0,0,.3); color:var(--fp-text); font-size:.88rem; line-height:1.3; outline:none;
}
#friendsPanel .fp-compose textarea:focus{ border-color:var(--fp-line-2); box-shadow:0 0 0 3px rgba(216,191,122,.12); }
#friendsPanel .fp-send{ width:40px; height:38px; border:0; border-radius:12px; background:linear-gradient(180deg,var(--fp-gold),var(--fp-gold-2)); color:#151515; font-size:1rem; cursor:pointer; box-shadow:0 6px 18px rgba(216,191,122,.2); transition:filter .15s, transform .15s; }
#friendsPanel .fp-send:hover{ filter:brightness(1.08); transform:translateY(-1px); }
#friendsPanel .fp-send:disabled{ opacity:.5; transform:none; }
#friendsPanel .fp-emoji-panel{
  position:absolute; left:10px; bottom:58px; z-index:6; width:300px; max-height:220px; overflow-y:auto; padding:8px; border-radius:14px;
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px; background:var(--fp-bg-3); border:1px solid var(--fp-line-2); box-shadow:0 14px 40px rgba(0,0,0,.55);
}
#friendsPanel .fp-emoji-panel[hidden]{ display:none; }
#friendsPanel .fp-emoji-panel button{ height:32px; border:0; border-radius:8px; background:transparent; font-size:1.15rem; cursor:pointer; }
#friendsPanel .fp-emoji-panel button:hover{ background:rgba(255,255,255,.08); }

/* ---------- megerősítő ---------- */
#friendsPanel .fp-confirm{ position:absolute; inset:0; z-index:1070; display:grid; place-items:center; background:rgba(0,0,0,.45); }
#friendsPanel .fp-confirm[hidden]{ display:none; }
#friendsPanel .fp-confirm-box{ width:min(92vw,380px); padding:18px; border-radius:16px; background:var(--fp-bg-3); border:1px solid var(--fp-line-2); box-shadow:0 24px 70px rgba(0,0,0,.6); }
#friendsPanel .fp-confirm-box h5{ margin:0 0 6px; font-size:1rem; color:#f1e4c2; }
#friendsPanel .fp-confirm-box p{ margin:0 0 12px; color:var(--fp-muted); font-size:.86rem; }
#friendsPanel .fp-confirm-input{ width:100%; margin-bottom:12px; padding:8px 10px; border-radius:10px; border:1px solid var(--fp-line); background:rgba(0,0,0,.3); color:var(--fp-text); }
#friendsPanel .fp-confirm-actions{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- értesítések (panel zárva) ---------- */
#friendsPanel .fp-toasts{ position:fixed; right:16px; bottom:16px; z-index:1080; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
#friendsPanel:not(.open) .fp-toasts{ display:flex; }
#friendsPanel .fp-toast{
  pointer-events:auto; display:flex; align-items:center; gap:10px; width:300px; padding:10px 12px; border-radius:14px; cursor:pointer;
  background:var(--fp-bg-3); border:1px solid var(--fp-line-2); box-shadow:0 14px 40px rgba(0,0,0,.55); animation:fpToastIn .25s ease;
}
#friendsPanel .fp-toast .t{ min-width:0; }
#friendsPanel .fp-toast .t b{ display:block; font-size:.84rem; color:#f1e4c2; }
#friendsPanel .fp-toast .t span{ display:block; font-size:.78rem; color:var(--fp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes fpToastIn{ from{ transform:translateY(10px); opacity:0;} to{ transform:none; opacity:1;} }

/* navbar gomb jelvénye (#friendsButton data-badge) */
#friendsButton{ position:relative; }
#friendsButton[data-badge]:not([data-badge=""])::after{
  content:attr(data-badge); position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#ef4444; color:#fff; font-size:.66rem; font-weight:800; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--bg-1,#0c1016);
}

/* ---------- mobil ---------- */
@media (max-width: 860px){
  #friendsPanel .fp-drawer{ width:100vw; grid-template-columns:1fr; }
  #friendsPanel .fp-chat{ position:absolute; inset:0; transform:translateX(100%); transition:transform .22s; }
  #friendsPanel .fp-drawer.chat-open .fp-chat{ transform:none; }
  #friendsPanel .fp-chat-back{ display:inline-flex; }
  #friendsPanel .fp-row{ max-width:88%; }
  #friendsPanel .fp-item-actions{ opacity:1; }
  #friendsPanel .fp-tab span{ font-size:.62rem; }
}
#friendsPanel .fp-av .fp-av-fb{ display:grid; }
#friendsPanel .fp-me-avatar,#friendsPanel .fp-chat-avatar{ display:inline-flex; flex:0 0 auto; }

/* ===================== CSOPORTOK ===================== */
#friendsPanel .fp-only-dm,#friendsPanel .fp-only-group,#friendsPanel .fp-only-admin,#friendsPanel .fp-only-owner{ display:none; }
#friendsPanel .fp-drawer[data-conv="dm"] .fp-only-dm{ display:inline-flex; }
#friendsPanel .fp-drawer[data-conv="group"] .fp-only-group{ display:inline-flex; }
#friendsPanel .fp-drawer[data-conv="group"][data-role="admin"] .fp-only-admin,
#friendsPanel .fp-drawer[data-conv="group"][data-role="owner"] .fp-only-admin,
#friendsPanel .fp-drawer[data-conv="group"][data-role="owner"] .fp-only-owner{ display:inline-flex; }
#friendsPanel .fp-menu button.fp-only-dm,#friendsPanel .fp-menu button.fp-only-group{ display:none; }
#friendsPanel .fp-drawer[data-conv="dm"] .fp-menu button.fp-only-dm{ display:flex; }
#friendsPanel .fp-drawer[data-conv="group"] .fp-menu button.fp-only-group:not(.fp-only-admin):not(.fp-only-owner){ display:flex; }
#friendsPanel .fp-drawer[data-conv="group"][data-role="admin"] .fp-menu button.fp-only-admin,
#friendsPanel .fp-drawer[data-conv="group"][data-role="owner"] .fp-menu button.fp-only-admin,
#friendsPanel .fp-drawer[data-conv="group"][data-role="owner"] .fp-menu button.fp-only-owner{ display:flex; }

/* csoport-avatar: monogram + kis csoport ikon */
#friendsPanel .fp-av--group .fp-av-fb{ border-radius:12px; background:linear-gradient(135deg,#3b4a6b,#24304a) !important; color:#f1e4c2; }
#friendsPanel .fp-av--group .fp-gico{ position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:50%; background:var(--fp-gold); color:#151515; font-size:.6rem; display:grid; place-items:center; box-shadow:0 0 0 2px var(--fp-bg); }
#friendsPanel .fp-item-sub .who{ color:#cbd5e1; }

/* "Új csoport" sor az Üzenetek fül tetején */
#friendsPanel .fp-newgroup{ display:flex; align-items:center; gap:10px; width:100%; margin:4px 0 6px; padding:9px 10px; border-radius:12px; border:1px dashed rgba(216,191,122,.35); background:rgba(216,191,122,.05); color:var(--fp-gold); font-weight:600; font-size:.84rem; cursor:pointer; text-align:left; }
#friendsPanel .fp-newgroup:hover{ background:rgba(216,191,122,.1); }
#friendsPanel .fp-newgroup i{ font-size:1rem; }

/* rendszerüzenet + küldő neve a csoportban */
#friendsPanel .fp-sys{ align-self:center; margin:6px 0; padding:4px 12px; border-radius:999px; font-size:.7rem; color:var(--fp-muted); background:rgba(255,255,255,.04); border:1px solid var(--fp-line); text-align:center; }
#friendsPanel .fp-row .fp-sender{ display:block; margin:0 0 3px 2px; font-size:.68rem; font-weight:700; color:var(--fp-gold); }
#friendsPanel .fp-row.me .fp-sender{ display:none; }

/* tagpanel */
#friendsPanel .fp-members{ position:absolute; top:55px; right:0; bottom:0; z-index:5; width:min(100%,320px); display:flex; flex-direction:column; background:var(--fp-bg-2); border-left:1px solid var(--fp-line-2); box-shadow:-16px 0 40px rgba(0,0,0,.45); }
#friendsPanel .fp-members[hidden]{ display:none; }
#friendsPanel .fp-members header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--fp-line); color:#f1e4c2; }
#friendsPanel .fp-members header i{ color:var(--fp-gold); }
#friendsPanel .fp-members-list{ flex:1 1 auto; overflow-y:auto; padding:6px 8px; }
#friendsPanel .fp-members footer{ padding:8px 10px; border-top:1px solid var(--fp-line); }
#friendsPanel .fp-members footer .fp-btn{ width:100%; justify-content:center; }
#friendsPanel .fp-member{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:6px 6px; border-radius:10px; }
#friendsPanel .fp-member:hover{ background:rgba(255,255,255,.04); }
#friendsPanel .fp-member .n{ font-weight:600; font-size:.84rem; display:flex; align-items:center; gap:6px; }
#friendsPanel .fp-member .s{ font-size:.7rem; color:var(--fp-muted); }
#friendsPanel .fp-role{ padding:1px 7px; border-radius:999px; font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
#friendsPanel .fp-role--owner{ color:#151515; background:var(--fp-gold); }
#friendsPanel .fp-role--admin{ color:#cbb581; background:rgba(216,191,122,.12); border:1px solid rgba(216,191,122,.35); }
#friendsPanel .fp-member-actions{ display:flex; gap:2px; }
#friendsPanel .fp-member-actions .fp-iconbtn{ width:28px; height:28px; font-size:.82rem; }

/* csoport létrehozó / tag-hozzáadó ablak */
#friendsPanel .fp-group-box{ width:min(94vw,440px); }
#friendsPanel .fp-search--inline{ margin:0 0 8px; }
#friendsPanel .fp-gd-list{ max-height:260px; overflow-y:auto; border:1px solid var(--fp-line); border-radius:12px; padding:4px; background:rgba(0,0,0,.2); }
#friendsPanel .fp-gd-item{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; cursor:pointer; }
#friendsPanel .fp-gd-item:hover{ background:rgba(255,255,255,.05); }
#friendsPanel .fp-gd-item input{ accent-color:var(--fp-gold); width:16px; height:16px; }
#friendsPanel .fp-gd-item .n{ flex:1; font-size:.86rem; }
#friendsPanel .fp-gd-item .s{ font-size:.7rem; color:var(--fp-muted); }
#friendsPanel .fp-gd-hint{ margin:8px 0 10px; font-size:.74rem; color:var(--fp-muted); }
#friendsPanel .fp-gd-list .fp-empty{ padding:14px; }
@media (max-width: 860px){ #friendsPanel .fp-members{ top:0; width:100%; } }