body.social-dialog-open { overflow: hidden; }
.social-dialog.friends-panel { position: fixed; top: calc(var(--social-viewport-top,0px) + var(--social-viewport-height,100dvh)/2); bottom: auto; margin-top: 0; transform: translateY(-50%); width: min(600px,calc(100% - 24px)); height: min(640px,calc(var(--social-viewport-height,100dvh) - 24px)); max-height: calc(var(--social-viewport-height,100dvh) - 24px); overflow: hidden; }
.friends-panel[open] { display: flex; flex-direction: column; }
.friends-panel > header { flex: none; }
.friends-panel header button { min-width: 44px; min-height: 44px; }
.friends-panel .social-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 12px 16px; }
.friends-panel .social-battle-context { flex: none; }
.friends-panel .social-body > .social-error:empty { display: none; }
.friends-tabs { display: flex; gap: 8px; flex: none; }
.friends-tabs button { flex: 1; min-height: 44px; }
.friends-tabs [aria-pressed=true] { border-color: #63cce9; background: #164457; color: #fff; }
.friends-toolbar { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.friends-toolbar form { flex: 1 1 220px; min-width: 0; }
.friends-toolbar input { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px; border: 1px solid #49748a; border-radius: 4px; background: #040e13; color: #e2f2f5; font: 16px Arial,sans-serif; }
.friends-toolbar > button { min-height: 44px; }
.friends-toolbar [data-friends-refresh] { margin-left: auto; width: 44px; padding: 0; font-size: 26px; }
.friends-toolbar .has-changes { color: #ffe07b; border-color: #e3b546; }
.friends-scroll { flex: 1; min-height: 24px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable; touch-action: pan-y; }
.friends-list { position: relative; margin: 0; padding: 0; list-style: none; }
.friends-row { position: absolute; left: 0; right: 0; box-sizing: border-box; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #33515d; padding: 6px 0; }
.friends-panel .friend-profile { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 4px 0; min-height: 60px; text-align: left; background: transparent; border: 0; }
.friends-panel .social-avatar,.friends-panel .social-avatar img { width: 44px; height: 44px; }
.friends-panel .social-avatar { flex: 0 0 44px; font-size: 22px; }
.friend-label { flex: 1; min-width: 0; }
.friend-label strong,.friend-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
.friend-label strong { font-size: 15px; }
.friend-label small,.friend-row-actions small { font-size: 12px; color: #a8c7d2; }
.friend-row-actions { flex: 0 0 94px; width: 94px; display: flex; flex-direction: column; gap: 4px; }
.friends-panel .friend-row-actions button { min-height: 44px; padding: 4px 6px; }
.friend-row-actions small { line-height: 15px; overflow-wrap: anywhere; }
.friends-status { flex: none; min-height: 20px; font-size: 14px; color: #a8c7d2; }
.friends-status button { min-height: 44px; }
.friend-placeholder { color: #a8c7d2; font-size: 14px; }
.social-dialog .social-header-actions > [data-friends-settings] { min-width: 44px; min-height: 44px; }
.social-short-viewport .friends-toolbar form { flex-basis: 100px; }
.social-short-viewport .friends-toolbar [data-social-search] { width: 44px; padding: 0; font-size: 24px; }
.social-short-viewport .friends-toolbar [data-social-search] span { display: none; }
.social-short-viewport .friends-toolbar [data-social-search]::after { content: '+'; }
@media(max-width:420px) {
  .friends-panel > header { padding: 10px 12px; gap: 8px; }
  .friends-panel h2 { font-size: 20px; }
  .friends-panel .social-body { padding: 10px; gap: 6px; }
  .friends-toolbar form { flex-basis: 100%; }
  .friends-tabs { gap: 6px; }
  .friends-panel .friend-profile { gap: 6px; }
  .friend-row-actions { flex-basis: 86px; width: 86px; }
}