/* Content keeps its natural height; only the panel body scrolls. */
#lobby-panel[data-panel="friends"] .lobby-pane{flex:none;min-height:min-content}
#lobby-panel[data-panel="friends"] .friends-section{flex:none}
@media(max-width:900px),(max-height:700px){
 #lobby-panel[data-panel="friends"]{padding:6px}
 #lobby-panel[data-panel="friends"] .lobby-panel-card{max-height:calc(100dvh - 12px);border-radius:17px}
 #lobby-panel[data-panel="friends"] .lobby-panel-body{padding:0 9px 10px;overflow-y:auto;overflow-x:hidden}
 #lobby-panel[data-panel="friends"] .lobby-pane{gap:8px}
 #lobby-panel[data-panel="friends"] .friends-hero{min-height:54px;padding:9px 43px 7px 5px;gap:9px}
 #lobby-panel[data-panel="friends"] .friends-hero h2{font-size:27px;letter-spacing:2px}
 #lobby-panel[data-panel="friends"] .friends-hero p{font-size:7px;letter-spacing:1.2px;margin:3px 0}
 #lobby-panel[data-panel="friends"] .friends-hero>span{font-size:21px}
 #lobby-panel[data-panel="friends"] .friends-hero small{display:none}
 #lobby-panel[data-panel="friends"] .lobby-panel-head{top:10px;right:12px}
 #lobby-panel[data-panel="friends"] .lobby-panel-close{width:33px;height:33px;font-size:25px}
 #lobby-panel[data-panel="friends"] .friends-toolbar{padding:7px 6px 0;gap:7px;border-radius:12px;flex-wrap:wrap}
 #lobby-panel[data-panel="friends"] .friends-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex-basis:100%;gap:5px}
 #lobby-panel[data-panel="friends"] .friends-tabs button{min-height:34px;padding:5px 3px;font-size:10px;border-radius:7px}
 #lobby-panel[data-panel="friends"] .friends-search{flex-basis:100%;gap:7px}
 #lobby-panel[data-panel="friends"] #friend-search{height:33px;padding:7px 11px;font-size:12px}
 #lobby-panel[data-panel="friends"] #friend-search-btn{min-height:33px;padding:6px 15px;font-size:12px}
 #lobby-panel[data-panel="friends"] .friends-columns,#lobby-panel[data-panel="friends"] .friends-primary,#lobby-panel[data-panel="friends"] .friends-secondary{gap:8px}
 #lobby-panel[data-panel="friends"] .friends-section{padding:8px;border-radius:12px}
 #lobby-panel[data-panel="friends"] .friends-section h3{font-size:18px;gap:7px;margin:0 0 7px;line-height:1.1}
 #lobby-panel[data-panel="friends"] .friends-section h3:before{height:15px;width:3px}
 #lobby-panel[data-panel="friends"] .friends-section h3>button,#lobby-panel[data-panel="friends"] .friends-section h3>select{padding:6px;font-size:10px;min-height:30px}
 #lobby-panel[data-panel="friends"] .friends-section h3>span{font-size:11px;padding:2px 6px}
 #lobby-panel[data-panel="friends"] .pf-empty{padding:10px 4px;margin:0;font-size:12px;line-height:1.4}
 #lobby-panel[data-panel="friends"] .friend-row{min-height:55px;padding:7px;gap:7px;flex-wrap:nowrap}
 #lobby-panel[data-panel="friends"] .lb-av{width:32px!important;height:32px!important;font-size:18px}
 #lobby-panel[data-panel="friends"] .friend-meta{flex:1 1 0;min-width:0}
 #lobby-panel[data-panel="friends"] .friend-meta strong{font-size:12px!important}
 #lobby-panel[data-panel="friends"] .friend-meta small{font-size:9px;gap:4px;margin-top:4px}
 #lobby-panel[data-panel="friends"] .friend-level{font-size:9px;padding:1px 4px}
 #lobby-panel[data-panel="friends"] .friend-actions{width:auto;gap:5px;flex-wrap:nowrap}
 #lobby-panel[data-panel="friends"] .fr-btn{min-height:32px;padding:6px 8px;font-size:10px}
 #lobby-panel[data-panel="friends"] .friends-banner{min-height:78px;padding:12px 18px;border-radius:12px}
 #lobby-panel[data-panel="friends"] .friends-banner strong{font-size:24px}
 #lobby-panel[data-panel="friends"] .friends-banner p{font-size:8px;margin:8px 0 0}
}
@media(min-width:700px) and (max-height:700px){
 #lobby-panel[data-panel="friends"] .friends-columns{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
 #lobby-panel[data-panel="friends"] .friends-toolbar{flex-wrap:nowrap;align-items:center;padding-bottom:7px}
 #lobby-panel[data-panel="friends"] .friends-tabs{flex:1 1 58%}
 #lobby-panel[data-panel="friends"] .friends-search{flex:1 1 42%}
}
@media(max-width:360px){
 #lobby-panel[data-panel="friends"] .friends-tabs button{font-size:9px}
 #lobby-panel[data-panel="friends"] .friend-actions{flex-direction:column;gap:4px}
 #lobby-panel[data-panel="friends"] .friends-section h3{font-size:16px}
}