.friends-panel { width: min(580px, calc(100vw - 24px)); }
.friends-backdrop { background: transparent; }
.friends-search { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 14px 24px 8px; }
.friends-search label { grid-column: 1 / -1; color: #d9c99c; }
.friends-search input { min-width: 0; width: 100%; box-sizing: border-box; border: 1px solid #6b5a2e; border-radius: 4px; background: #090e08; color: #f2ecd8; padding: 8px 10px; font: inherit; }
.friends-panel :focus-visible { outline: 2px solid #d5e4a5; outline-offset: 2px; }
.friends-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 24px 12px; }
.friends-tools > span { margin-left: auto; color: #b4c1b2; }
.friends-scroll { min-height: 90px; max-height: 45dvh; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #445048; }
.friend-row:last-child { border-bottom: 0; }
.friend-row small, .friend-row span { display: block; font-size: 12px; }
.friend-row small, .friend-offline { color: #b4c1b2; }
.friend-online { color: #b9d77c; }
.friend-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.friends-panel footer .friends-error { color: #f3a396; }
@media (max-width: 540px) {
  .friends-search, .friends-tools { padding-left: 16px; padding-right: 16px; }
  .friend-row { align-items: flex-start; flex-direction: column; }
  .friend-actions { justify-content: flex-start; }
}