/* Drop 9: Friends page, close-DM button, Friends button in the sidebar */
.chat.friends-on .messages, .chat.friends-on .composer, .chat.friends-on .pending { display: none; }
.friends-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--c-chat); color: var(--c-text); }
.friends-pane[hidden] { display: none; }
.fr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--c-line); }
.fr-title { margin-right: 8px; font-weight: 700; color: var(--c-strong); }
.fr-tab { min-height: 32px; padding: 4px 10px; border-radius: 6px; background: transparent; color: var(--c-muted); font-size: 15px; font-weight: 500; }
.fr-tab:hover { background: var(--c-hover); color: var(--c-text); }
.fr-tab.active { background: var(--c-sel); color: var(--c-strong); }
.fr-tab.fr-add { background: var(--c-green); color: #fff; }
.fr-tab.fr-add.active { background: transparent; color: var(--c-green); }
.fr-count { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; }
.fr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.fr-search { width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: var(--c-darkest); color: var(--c-text); font-size: 15px; }
.fr-label { margin: 16px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--c-muted); }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--c-line); border-radius: 6px; cursor: pointer; }
.fr-row:hover { background: var(--c-hover); }
.fr-text { display: grid; min-width: 0; flex: 1; }
.fr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--c-strong); }
.fr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--c-muted); }
.fr-acts { display: flex; gap: 8px; }
.fr-btn { min-width: 36px; min-height: 36px; padding: 0 10px; border-radius: 18px; background: var(--c-side); color: var(--c-muted); font-size: 15px; }
.fr-btn:hover { color: var(--c-strong); background: var(--c-darkest); }
.fr-btn.ok:hover { color: var(--c-green); }
.fr-btn.danger:hover { color: var(--c-red); }
.fr-empty { padding: 48px 8px; text-align: center; color: var(--c-muted); }
.fr-add-box h2 { margin: 0 0 6px; font-size: 16px; color: var(--c-strong); }
.fr-add-box p { margin: 0 0 16px; color: var(--c-muted); font-size: 14px; }
.fr-add-line { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: var(--c-darkest); }
.fr-add-line input { flex: 1; min-width: 0; padding: 8px; border: 0; background: transparent; color: var(--c-text); font-size: 16px; outline: none; }
.fr-send { padding: 8px 14px; min-height: 36px; border-radius: 4px; background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 500; }
.fr-send:disabled { opacity: .5; cursor: not-allowed; }
.fr-msg { margin-top: 10px; font-size: 14px; }
.fr-msg.ok { color: var(--c-green); }
.fr-msg.bad { color: var(--c-red); }
/* sidebar */
.friends-nav-wrap { padding: 8px 8px 0; }
.friends-nav { width: 100%; }
.fr-ico { width: 24px; flex: none; text-align: center; }
li.has-close { position: relative; }
.dm-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: transparent; color: var(--c-muted); font-size: 12px; opacity: 0; }
li.has-close:hover .dm-close, .dm-close:focus-visible { opacity: 1; }
li.has-close:hover .badge { visibility: hidden; }
.dm-close:hover { color: var(--c-strong); background: var(--c-darkest); }
@media (hover: none) { .dm-close { opacity: .7; width: 32px; height: 32px; } }
@media (max-width: 760px) { .fr-body { padding: 12px; } .fr-add-line { flex-wrap: wrap; } .fr-send { width: 100%; } }