/* Friends panel, in the same dark gunmetal style as the modification tree. */
#friends-panel{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#05080cb8;font-family:var(--font-ui,system-ui)}
#friends-panel .fr-card{width:min(440px,100%);max-height:100%;overflow:auto;background:#1c1f23;border:1px solid #474d55;border-radius:2px;box-shadow:0 18px 50px #000a;color:#dfe3e8}
#friends-panel .fr-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 14px;background:linear-gradient(#2f3338,#26292d);border-bottom:2px solid #9c2b26}
#friends-panel h2{margin:0;font:600 19px var(--font-ui,system-ui);color:#eef1f4}
#friends-panel .fr-close{width:32px;height:32px;border:1px solid #555c64;border-radius:2px;background:transparent;color:#cfd4da;font-size:20px;cursor:pointer}
#friends-panel .fr-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
#friends-panel .fr-text,#friends-panel .fr-note{margin:0;font-size:13px;line-height:1.45;color:#c3c8ce}
#friends-panel .fr-note{padding:6px 9px;background:#202327;border:1px solid #33383e;color:#e8d7a0}
#friends-panel .fr-code{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#24282d;border:1px solid #3d434a}
#friends-panel .fr-code span{font-size:12px;color:#8e959d}
#friends-panel .fr-code b{flex:1;font:700 17px var(--font-ui,system-ui);letter-spacing:.06em;color:#d9b13b}
#friends-panel .fr-add{display:flex;gap:8px}
#friends-panel .fr-input{flex:1;min-width:0;height:36px;padding:0 10px;background:#17191c;border:1px solid #4a5058;border-radius:2px;color:#eef1f4;font:600 16px var(--font-ui,system-ui);letter-spacing:.04em}
#friends-panel button{font:600 13px var(--font-ui,system-ui);cursor:pointer}
#friends-panel .fr-primary{min-height:36px;padding:0 16px;border:1px solid #d9b13b;border-radius:2px;background:#3a3220;color:#f6e3a6}
#friends-panel .fr-small{min-height:30px;padding:0 10px;border:1px solid #4a5058;border-radius:2px;background:#2b3035;color:#dfe3e8}
#friends-panel .fr-ok{border-color:#5cb85c;background:#24392a;color:#bdf0bd}
#friends-panel .fr-remove{min-width:30px;color:#c9a0a0}
#friends-panel .fr-sub{margin:4px 0 0;font:600 12px var(--font-ui,system-ui);letter-spacing:.06em;text-transform:uppercase;color:#8e959d}
#friends-panel .fr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
#friends-panel .fr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;background:linear-gradient(#2a2e33,#23272b);border:1px solid #3d434a}
#friends-panel .fr-who{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:0}
#friends-panel .fr-who b{font-size:14px;color:#eef1f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#friends-panel .fr-who small{grid-column:2;font-size:11px;color:#8e959d}
#friends-panel .fr-who b:first-child,#friends-panel .fr-who b:first-child+small{grid-column:1/-1}
#friends-panel .fr-actions{display:flex;gap:6px;flex:none}
#friends-panel .fr-dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#59606a}
#friends-panel .fr-dot.is-online{background:#5cb85c}
#friends-panel .fr-dot.is-away{background:#5cb85c;opacity:.45}
#friends-panel .fr-dot.is-lobby,#friends-panel .fr-dot.is-match{background:#d9b13b;box-shadow:0 0 6px #d9b13b88}
/* Unread requests badge on the hangar button. */
#ui [data-key="friends"]{position:relative}
#ui [data-key="friends"][data-count]::after{content:attr(data-count);position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#c0392b;color:#fff;font:700 10px/16px var(--font-ui,system-ui);text-align:center}
#online-panel label:has(.online-friends-join){display:flex;align-items:center;gap:8px;flex-direction:row}
#online-panel .online-friends-join{width:auto;height:auto;margin:0}
/* The hangar hides most top-bar actions; FRIENDS joins PROFILE and ACCOUNT as a visible button on desktop. */
#ui .so-hangar .so-top-r>[data-key=friends]{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;background:#29384c;border:3px solid #0b1727;color:#fff;font:16px var(--font-display);border-radius:4px}
@media (pointer: coarse){#ui .so-hangar .so-top-r>[data-key=friends]{display:none}}
/* Online debrief: the room's pilots, with a friend request for people met in the match. */
#ui .so-res-room .so-room-pilot{align-items:center}
#ui .so-res-room .so-room-pilot>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ui .so-res-room .so-room-pilot small{color:var(--ink-3,#8a99ad);font-size:.68rem}
#ui .so-res-room .so-room-pilot em{font-style:normal;font-size:.66rem;color:var(--ink-3,#8a99ad)}
#ui .so-res-room .so-room-pilot.is-self>span{color:var(--ink,#fff)}
#ui .so-res-room .so-team-dot{display:inline-block;width:.55rem;height:.55rem;margin-right:.5rem;border-radius:50%;vertical-align:middle;background:#5aa9ff}
#ui .so-res-room .so-team-dot--red{background:#ff6b5e}
#ui .so-room-reason span{color:var(--ink-2,#c9d3df)}
@media (pointer: coarse){#ui .so-res-room .so-sec-k em,#ui .so-res-room .so-room-pilot small{display:none}#ui .so-res-room .so-room-pilot{gap:.5rem}}