/* Follow / friend toggles and online dots (js/components/social-signals.js) */
.rel-toggles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}

.rel-toggles:empty { display: none; }

.rel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: transparent;
    color: #a855f7;
    font: 600 0.78rem/1 inherit;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.rel-btn:hover { background: rgba(168, 85, 247, 0.1); }
.rel-btn:active { transform: scale(0.95); }
.rel-btn:disabled { opacity: .6; cursor: progress; }
.rel-btn:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }

.rel-btn.is-on {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border-color: transparent;
    color: #fff;
}

.rel-btn.is-pending {
    border-style: dashed;
    color: var(--text-secondary, #64748b);
    border-color: var(--border-color, rgba(100, 116, 139, .4));
}

.rel-btn.is-incoming {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.5);
    color: #059669;
}

/* Icon-only (content items, dense lists) */
.rel-toggles[data-rel-size="sm"] .rel-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    justify-content: center;
    font-size: 0.72rem;
}

/* Presence dot after profile links, mentions and names:
 * green online, yellow idle 10+ min, red offline (PresenceTracker.stateOf). */
:root {
    --presence-online: #10b981;
    --presence-away: #f59e0b;
    --presence-offline: #ef4444;
}
.presence-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--presence-offline);
    transition: background-color .3s ease, box-shadow .3s ease;
}
.presence-dot.is-away { background: var(--presence-away); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); }
.presence-dot.is-online {
    background: var(--presence-online);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
    animation: rel-presence-pulse 2.4s ease-out infinite;
}

@keyframes rel-presence-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .presence-dot.is-online { animation: none; }
    .rel-btn { transition: none; }
}

/* Profile → Friends tab */
.pf-friends { display: flex; flex-direction: column; gap: 1rem; padding: .5rem 0 1.5rem; }
.pf-friend-section h3 {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
    font-size: .95rem; font-weight: 700; color: var(--text-primary);
}
.pf-count {
    min-width: 1.4rem; padding: 0 .45rem; border-radius: 999px; text-align: center;
    font-size: .72rem; background: rgba(168, 85, 247, .14); color: #a855f7;
}
.pf-friend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pf-friend {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .65rem .8rem;
    border-radius: 14px; border: 1px solid var(--border-color, rgba(148, 163, 184, .25));
    background: var(--card-bg, var(--bg-secondary));
}
.pf-friend-avatar img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; display: block; }
.pf-friend-main { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; }
.pf-friend-name { font-weight: 600; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-friend-handle { font-size: .78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; color: var(--text-secondary); text-align: center; }
.pf-empty i { font-size: 1.6rem; opacity: .6; }

/* DM rows in the messenger list */
.messenger-conv-rel { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.messenger-conv-rel .messenger-conv-username { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-conv-rel .rel-toggles { gap: 4px; margin-left: auto; }
.notification-rel { margin-top: 4px; }