/* ============================================================================
   Система друзей: тосты уведомлений, меню оппонента в матче,
   панель «Круг соратников» в профиле.
   ========================================================================== */

/* ------------------------------------------------------------- тосты ----- */
#rqToasts {
    position: fixed; top: 64px; right: 16px; z-index: 3000;
    display: flex; flex-direction: column; gap: 10px;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none;
}
.rq-toast {
    pointer-events: auto; cursor: default;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: 12px 14px;
    color: var(--text); font-size: 0.92rem; line-height: 1.4;
    opacity: 0; transform: translateX(24px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.rq-toast.in { opacity: 1; transform: none; }
.rq-toast.out { opacity: 0; transform: translateX(24px); }
.rq-toast.challenge { border-color: rgba(242, 169, 59, 0.5); }
.rq-toast .rq-dim { color: var(--text-muted); font-size: 0.82rem; }
.rq-toast-actions { display: flex; gap: 8px; margin-top: 10px; }
.rq-toast-btn {
    flex: 1; padding: 7px 10px; cursor: pointer;
    font: 600 0.85rem var(--font-ui); color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.rq-toast-btn:hover { border-color: var(--sodium); }
.rq-toast-btn.ok { border-color: rgba(87, 194, 138, 0.6); color: var(--ok); }
.rq-toast-btn.no { color: var(--text-muted); }

/* ---------------------------------------------- меню оппонента в бою ----- */
.rq-oppmenu {
    position: fixed; z-index: 3200; width: 240px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid rgba(242, 169, 59, 0.35); border-radius: var(--radius);
    box-shadow: var(--shadow-2); padding: 8px;
}
.rq-oppmenu-name {
    font-family: var(--font-display); font-size: 1.05rem; color: var(--bone);
    padding: 4px 8px 8px; border-bottom: 1px solid var(--border);
    margin-bottom: 6px; text-align: center;
}
.rq-oppmenu-btn {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 9px 10px; margin-top: 4px;
    font: 500 0.9rem var(--font-ui); color: var(--text);
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.rq-oppmenu-btn:hover { background: rgba(236, 231, 221, 0.06); border-color: var(--border-strong); }
.rq-oppmenu-btn.danger { color: var(--ember); }
.rq-oppmenu-btn:disabled { opacity: 0.5; cursor: default; }

/* Ник оппонента кликается */
.pav-row .nick.rq-clickable { cursor: pointer; }
.pav-row .nick.rq-clickable:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------- панель друзей (профиль) --- */
/* Живёт в правой колонке настроек, под карточкой «Экран и масштаб». */
.settings .friends-panel { margin-top: var(--space-6); }
.friends-panel .settings-card { margin-bottom: var(--space-4); }

.friend-search { display: flex; gap: 8px; }
.friend-search .input { flex: 1; min-width: 0; }

.friend-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
.friend-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.friend-row .fava {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    background: var(--surface-2); border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: var(--text-muted); overflow: hidden;
}
.friend-row .fava img { width: 100%; height: 100%; object-fit: cover; }
.friend-row .fmeta { flex: 1; min-width: 0; }
.friend-row .fname {
    font-weight: 600; font-size: 0.92rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.friend-row .fstate { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.friend-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ash); display: inline-block; }
.friend-row.online .dot { background: var(--ok); box-shadow: 0 0 8px rgba(87, 194, 138, 0.7); }
.friend-row.online .fstate { color: var(--ok); }

.friend-row .facts { display: flex; gap: 6px; flex-shrink: 0; }
.fbtn {
    cursor: pointer; padding: 6px 9px;
    font: 600 0.8rem var(--font-ui); color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); white-space: nowrap;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.fbtn:hover { border-color: var(--sodium); }
.fbtn.primary { border-color: rgba(242, 169, 59, 0.55); color: var(--sodium); }
.fbtn.ok { border-color: rgba(87, 194, 138, 0.55); color: var(--ok); }
.fbtn.ghost { color: var(--text-muted); }
.fbtn.danger:hover { border-color: var(--ember); color: var(--ember); }
.fbtn:disabled { opacity: 0.5; cursor: default; }

/* выпадающее мини-меню «Позвать в бой» (режимы) */
.friend-row { position: relative; }
.fchallenge-menu {
    position: absolute; right: 8px; top: calc(100% + 4px); z-index: 20;
    background: var(--surface-2); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
    display: flex; flex-direction: column; min-width: 170px; padding: 4px;
}
.fchallenge-menu .fbtn { border: none; text-align: left; background: transparent; }
.fchallenge-menu .fbtn:hover { background: rgba(236, 231, 221, 0.07); }

.friends-empty { color: var(--text-muted); font-size: 0.88rem; padding: 6px 2px; }
.friends-count {
    display: inline-block; min-width: 20px; text-align: center;
    margin-left: 8px; padding: 1px 7px;
    background: rgba(242, 169, 59, 0.16); color: var(--sodium);
    border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600;
}