/* metaeden-net/public/sites/met-friends.css
   FRIENDS & CHAT -- the world chat network, wearing Dream Seam's clothes.

   TASK-1576[Q].  The user asked for "a buddy list STEAM style chat list and
   chat interface parodying steam for the dream.metaeden.net section" and for
   it to be "the main way people can access the chat network while playing
   minigames".  So this is a PARODY of that client's furniture in Dream Seam's
   own palette, and it carries none of its marks: no logo, no wordmark, no
   borrowed icon.  The joke is the shape of the window, not the brand on it.

   ONE WINDOW, TWO PANES, and that is a decision rather than a shortcut.  The
   friends list and the chat are one floating window -- a list column on the
   left, a tab strip and a transcript on the right -- because the alternative
   (two draggable windows) doubles the input boundary that keeps typing out of
   the game, and the input discipline in met-friends.js is the half of this
   feature that can actually cost somebody a round.

   THE PALETTE IS seam-games.css's, READ OFF IT rather than re-picked: the
   grounds (#16202d, #213043, #2a475e, #171a21), the ink (#c7d5e0), the link
   blue (#66c0f4) and the lime (#a4d007).  Every readable pair below was
   measured against this repo's 4.5:1 floor.  The lowest is the link blue on
   the lightest plate at 4.82.  The one pair that FAILS -- seam's own muted
   grey #8f98a0 on #2a475e, 3.32, a defect its own header records -- is simply
   never used: secondary text is #acb9c4 everywhere (4.85 on that plate, 8.20
   on the panel).  Nothing here is smaller than 12px except the group counts
   and the unread badge, which are glanceable chrome rather than prose.

   .sgf-* THROUGHOUT, and nothing here reaches browser-frame.css.  That
   stylesheet's own family rule (.browser-*) is pinned by
   metaeden_net_mobile_e.test.js A7, so a selector of ours living there would
   have to stand down on a phone with its JS.  This is our own sheet with our
   own prefix, loaded beside it, and it paints only what it builds. */

.sgf-win {
  /* THE OPEN PAGE BAND (browser-frame.css's z map): 70..99 is where floating
     windows and trays live.  86 sits ABOVE the four w95 chat windows (71..75)
     and BELOW the minimized-chat chips (89), the MET tray (90) and the
     tooltips (95) -- so a taskbar can always be pressed with this open, which
     is the rule met-windows.js's own docked-window note settled.  In band, so
     net-z-ledger.json wants no row: that file records the GRANDFATHERED
     out-of-band values, and adding an in-band one would be a permission
     nobody needs. */
  position: fixed;
  z-index: 86;
  right: 12px;
  /* NEVER bottom:0.  A popped-out game reserves its own band along the bottom
     (metaeden-v4-game.js's .gtray, 44px in flow) and the desk taskbar stands
     at the real viewport's bottom row on every framed page.  52px clears
     both, so this window never stands on either. */
  bottom: 52px;
  width: 620px;
  max-width: calc(100vw - 24px);
  /* FIXED HEIGHT, SCROLL INSIDE (CLAUDE.md's panel rule).  A window that grew
     with the transcript would shove itself up the screen on every message. */
  height: 380px;
  max-height: calc(100vh - 96px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #16202d;
  border: 1px solid #000000;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
  color: #c7d5e0;
  font: 13px "Motiva Sans", Arial, Helvetica, sans-serif;
}
.sgf-win *, .sgf-win *::before, .sgf-win *::after { box-sizing: border-box; }
.sgf-win[hidden] { display: none; }

/* ---- title bar --------------------------------------------------------- */

.sgf-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px;
  background: #171a21;
  border-bottom: 1px solid #000000;
  cursor: default;
}
.sgf-bar-title {
  flex: 1 1 auto; min-width: 0;
  color: #dcdedf; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgf-bar-net { flex: 0 0 auto; color: #acb9c4; font-size: 12px; }
.sgf-bar-net.live { color: #a4d007; }
.sgf-bar-x {
  flex: 0 0 auto;
  width: 22px; height: 20px; padding: 0;
  background: #2a475e; color: #dcdedf;
  border: 1px solid transparent;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
}
.sgf-bar-x:hover { background: #3a5c78; border-color: #66c0f4; }
.sgf-bar-x:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }

/* ---- the two panes ------------------------------------------------------ */

.sgf-cols { flex: 1 1 auto; min-height: 0; display: flex; }

.sgf-list {
  flex: 0 0 212px; width: 212px; min-width: 0;
  display: flex; flex-direction: column;
  background: #171a21;
  border-right: 1px solid #000000;
}
.sgf-people-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0 8px; }

.sgf-grp { margin: 0 0 2px; }
.sgf-grp-head {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 5px 10px;
  background: none; border: 1px solid transparent;
  color: #acb9c4; font: inherit; font-size: 12px; letter-spacing: 0.8px;
  text-align: left; text-transform: uppercase; cursor: pointer;
}
.sgf-grp-head:hover { color: #dcdedf; }
.sgf-grp-head:focus-visible { outline: 2px solid #66c0f4; outline-offset: -2px; }
.sgf-grp-caret { flex: 0 0 auto; width: 9px; color: #acb9c4; font-size: 11px; }
.sgf-grp-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgf-grp-count { flex: 0 0 auto; color: #acb9c4; font-size: 11px; }
.sgf-grp.on .sgf-grp-label { color: #dcdedf; }

/* ---- one person --------------------------------------------------------- */

.sgf-person {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 5px 10px;
  background: none; border: 1px solid transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sgf-person:hover { background: #213043; }
.sgf-person:focus-visible { outline: 2px solid #66c0f4; outline-offset: -2px; }
.sgf-person.on { background: #2a475e; border-color: #66c0f4; }
.sgf-av {
  flex: 0 0 32px; width: 32px; height: 32px;
  border-radius: 2px; background: #2a475e;
  image-rendering: pixelated;
  display: block;
}
.sgf-who { flex: 1 1 auto; min-width: 0; }
.sgf-nm {
  display: block; color: #66c0f4; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgf-person.live .sgf-nm { color: #a4d007; }
.sgf-sub {
  display: block; color: #acb9c4; font-size: 12px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgf-tag {
  flex: 0 0 auto;
  padding: 1px 5px; border-radius: 2px;
  background: #3f3418; color: #ffb000; font-size: 11px; letter-spacing: 0.5px;
}
.sgf-none { padding: 10px 12px; color: #acb9c4; font-size: 12px; }

/* ---- the visitor's own tile --------------------------------------------- */

.sgf-foot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  background: #16202d;
  border-top: 1px solid #000000;
}
/* TASK-1690[Q]: STACKED ROWS THAT CANNOT SQUEEZE.  The user's pop-out showed
   the Teleport button squashed under the tile and the claim line drawn over
   it.  Every row of the foot is its own fixed-or-natural height and none of
   them may shrink, the tile row is a fixed 36px, and the foot sits above the
   roster scroller in paint order so nothing that scroller overflows can land
   on it. */
.sgf-foot { position: relative; z-index: 1; }
.sgf-foot > * { flex: 0 0 auto; min-width: 0; }
.sgf-foot-row { display: flex; align-items: center; gap: 9px; height: 36px; min-height: 36px; }
.sgf-foot .sgf-city { min-height: 26px; }
.sgf-foot .sgf-nm { color: #dcdedf; }
/* ITS OWN FULL-WIDTH ROW, found by opening it in a browser. The list column is
   212px and the kit's hint is a sentence, so inside the name stack it either
   truncated to "Stamp a name..." (the offer gone) or wrapped to five lines and
   shoved the GUEST pill around the tile. Across the column it reads in two.
   The footer is flex:0 0 auto and the hint is fixed per identity state, so it
   settles at one height and stays there. */
.sgf-reg {
  display: block; width: 100%; padding: 0;
  background: none; border: 0;
  color: #ffb000; font: inherit; font-size: 12px; line-height: 1.35;
  text-align: left; text-decoration: underline; cursor: pointer;
}
.sgf-reg:hover { color: #ffc84d; }
/* TASK-1690[Q]: "Continue as <handle>": the visitor's own name offered back, so
   it is drawn as a control rather than a hint.  #dcdedf on #213043 ~10:1. */
.sgf-reg.resume {
  padding: 4px 8px; background: #213043; border: 1px solid #66c0f4; border-radius: 2px;
  color: #dcdedf; text-decoration: none; font-weight: bold;
}
.sgf-reg.resume:hover { background: #2a475e; color: #ffffff; }
/* TASK-1690[Q]: the way to put the pass down.  Quiet, full width, 12px, and
   #acb9c4 on the #16202d plate is ~8:1. */
.sgf-forget {
  display: block; width: 100%; padding: 0;
  background: none; border: 0;
  color: #acb9c4; font: inherit; font-size: 12px; line-height: 1.35;
  text-align: left; text-decoration: underline; cursor: pointer;
}
.sgf-forget:hover { color: #dcdedf; }
.sgf-forget:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
/* TASK-1752[Q]: the question armed by Forget me. 12px, #dcdedf on #16202d. */
.sgf-ask { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; line-height: 1.35; color: #dcdedf; }
.sgf-ask span { flex: 1 0 100%; }
.sgf-ask button { font: inherit; font-size: 12px; padding: 3px 8px; color: #dcdedf; background: #2a475e; border: 1px solid #66c0f4; cursor: pointer; }
.sgf-ask button:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
/* TASK-1772[Q]: the sign-in doors.  12px, #dcdedf on #213043 ~10:1 and the
   teaching line #acb9c4 on the #16202d plate ~8:1.  A press changes colours
   only, never a box. */
.sgf-doors { display: flex; flex-direction: column; gap: 4px; }
.sgf-teach { margin: 0; font-size: 12px; line-height: 1.35; color: #acb9c4; }
.sgf-door-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sgf-foot button.sgf-door {
  min-height: 24px; margin: 0; padding: 3px 8px; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.2; font-weight: bold;
  color: #dcdedf; background: #213043; border: 1px solid #2a475e; border-radius: 2px;
}
.sgf-foot button.sgf-door:hover,
.sgf-foot button.sgf-door:focus-visible { background: #2a475e; border-color: #66c0f4; color: #ffffff; }
.sgf-foot button.sgf-door:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
.sgf-say { margin: 0; font-size: 12px; line-height: 1.35; color: #dcdedf; }
.sgf-say:empty { display: none; }
.sgf-say a { color: #66c0f4; }
/* TASK-1683[Q]: the way into the city, one link per row under the tile.
   TASK-1688[Q]: drawn as the window's own small controls, and the selectors
   carry the footer and the city box on purpose.  The page skins paint every
   link (metaeden-v4.css `body.grey a:visited` is #551a8b at (0,2,2)), which
   out-ranked a bare `.sgf-go:visited` (0,2,0), so a visited link turned the
   browser purple on the dark plate.  At (0,4,1) every state below wins.  The
   inks are measured against the control's own plate, #213043, in the suite. */
.sgf-city { display: flex; flex-direction: column; gap: 4px; }
.sgf-foot .sgf-city a.sgf-go,
.sgf-foot .sgf-city a.sgf-go:link,
.sgf-foot .sgf-city a.sgf-go:visited {
  display: block; padding: 3px 8px;
  background: #213043; border: 1px solid #2a475e; border-radius: 2px;
  color: #66c0f4; font-size: 12px; line-height: 1.35;
  text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgf-foot .sgf-city a.sgf-go.home,
.sgf-foot .sgf-city a.sgf-go.home:link,
.sgf-foot .sgf-city a.sgf-go.home:visited { color: #dcdedf; }
.sgf-foot .sgf-city a.sgf-go:hover,
.sgf-foot .sgf-city a.sgf-go:focus-visible { background: #2a475e; border-color: #66c0f4; color: #ffffff; }
.sgf-foot .sgf-city a.sgf-go:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
/* TASK-1689[Q]: TELEPORT.  One button in the row the links used to fill,
   drawn as the same small control, and a menu that opens UPWARD over the
   friends list (the footer is the bottom of the window, so there is no room
   below).  The menu is wider than the 212px column on purpose and wraps
   instead of clipping: the user's screenshot had "Go home (Apt 20A, The
   Lindy..." cut to an ellipsis, and a full label is the point of it.  Inks
   are the window's own: #dcdedf / #66c0f4 on #213043 and #2a475e (all past
   4.5:1), the note in #aab4bd on #16202d.  Items are <a>s, so every link
   state is spelled out at the city box's specificity for the reason the note
   above gives (a page skin's :visited would otherwise win). */
.sgf-city .sgf-tp { position: relative; }
.sgf-foot .sgf-city button.sgf-tp-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 3px 8px;
  background: #213043; border: 1px solid #2a475e; border-radius: 2px;
  color: #66c0f4; font: inherit; font-size: 12px; line-height: 1.35;
  text-align: left; cursor: pointer;
}
.sgf-foot .sgf-city button.sgf-tp-btn::after { content: "\25B4"; color: #acb9c4; font-size: 12px; }
.sgf-foot .sgf-city button.sgf-tp-btn:hover,
.sgf-foot .sgf-city button.sgf-tp-btn:focus-visible,
.sgf-foot .sgf-city .sgf-tp.open button.sgf-tp-btn { background: #2a475e; border-color: #66c0f4; color: #ffffff; }
.sgf-foot .sgf-city button.sgf-tp-btn:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
.sgf-city .sgf-tp-pop {
  position: absolute; z-index: 2; left: 0; bottom: calc(100% + 4px);
  width: 300px; max-width: calc(100vw - 40px);
  padding: 4px;
  background: #171a21; border: 1px solid #2a475e; border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
.sgf-city .sgf-tp-pop[hidden] { display: none; }
.sgf-city .sgf-tp-menu { display: flex; flex-direction: column; gap: 2px; }
.sgf-foot .sgf-city a.sgf-tp-item,
.sgf-foot .sgf-city a.sgf-tp-item:link,
.sgf-foot .sgf-city a.sgf-tp-item:visited {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border-radius: 2px;
  background: transparent; color: #dcdedf;
  font-size: 12.5px; line-height: 1.35;
  text-decoration: none; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
}
.sgf-foot .sgf-city a.sgf-tp-item.city,
.sgf-foot .sgf-city a.sgf-tp-item.city:link,
.sgf-foot .sgf-city a.sgf-tp-item.city:visited { color: #66c0f4; }
.sgf-foot .sgf-city a.sgf-tp-item:hover,
.sgf-foot .sgf-city a.sgf-tp-item:focus { background: #2a475e; color: #ffffff; outline: none; }
.sgf-foot .sgf-city a.sgf-tp-item:focus-visible { outline: 2px solid #66c0f4; outline-offset: -2px; }
.sgf-city .sgf-tp-ico { flex: 0 0 auto; width: 18px; text-align: center; font-size: 14px; line-height: 1.2; }
.sgf-city .sgf-tp-lbl { flex: 1 1 auto; min-width: 0; }
.sgf-city .sgf-tp-note {
  margin: 4px 0 0; padding: 6px 8px 4px; border-top: 1px solid #2a475e;
  color: #aab4bd; font-size: 12px; line-height: 1.35; font-style: italic;
}
/* TASK-1686[Q]: "No apartment on <handle> yet" -- a quiet line, not a link.
   #aab4bd on the #16202d plate is ~7.8:1, at the 12px floor. */
.sgf-note { display: block; color: #aab4bd; font-size: 12px; line-height: 1.35; font-style: italic; }
.sgf-reg:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }

/* ---- the chat pane ------------------------------------------------------ */

.sgf-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #16202d; }

.sgf-tabs {
  flex: 0 0 auto;
  display: flex; align-items: stretch; gap: 2px;
  padding: 6px 8px 0;
  background: #171a21;
  border-bottom: 1px solid #000000;
}
.sgf-tab {
  display: flex; align-items: center; gap: 6px;
  max-width: 190px; padding: 5px 10px;
  background: #213043; color: #acb9c4;
  border: 1px solid transparent; border-bottom: 0;
  font: inherit; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgf-tab:hover { color: #dcdedf; }
.sgf-tab.on { background: #16202d; color: #dcdedf; }
.sgf-tab:focus-visible { outline: 2px solid #66c0f4; outline-offset: -2px; }
.sgf-tab-x { flex: 0 0 auto; color: #acb9c4; font-size: 12px; }

.sgf-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px; }
.sgf-msg { margin: 0 0 7px; font-size: 13px; line-height: 1.45; }
.sgf-msg-who { color: #66c0f4; }
.sgf-msg.self .sgf-msg-who { color: #a4d007; }
.sgf-msg.sys { color: #acb9c4; font-size: 12.5px; }
.sgf-msg-text { color: #c7d5e0; }
.sgf-msg-guest {
  margin-left: 5px; padding: 0 4px; border-radius: 2px;
  background: #3f3418; color: #ffb000; font-size: 11px; letter-spacing: 0.5px;
}
.sgf-empty { color: #acb9c4; font-size: 12.5px; }

/* ---- one person's card -------------------------------------------------- */

.sgf-card { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.sgf-card-top { display: flex; align-items: center; gap: 12px; }
.sgf-card-av { width: 64px; height: 64px; border-radius: 2px; background: #2a475e; image-rendering: pixelated; display: block; }
.sgf-card-nm { color: #dcdedf; font-size: 15px; font-weight: 700; }
.sgf-card-sub { color: #acb9c4; font-size: 12.5px; margin-top: 3px; }
.sgf-card-play { color: #a4d007; font-size: 12.5px; margin-top: 3px; }
.sgf-card-acts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sgf-btn {
  padding: 5px 12px;
  background: #2a475e; color: #dcdedf;
  border: 1px solid transparent;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.sgf-btn:hover { background: #3a5c78; border-color: #66c0f4; }
.sgf-btn:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
.sgf-card-note { margin-top: 14px; color: #acb9c4; font-size: 12.5px; line-height: 1.5; }
/* TASK-1758[Q]: a friend who is not on the network is drawn from the friends
   list itself, a step quieter but still readable (#acb9c4 on the plate is the
   card note's own colour); the line under a friend press says what happened;
   a LIT's own placeholder face is a button onto the PAVA maker. */
.sgf-person.off .sgf-nm { color: #acb9c4; }
.sgf-card-said { margin-top: 10px; color: #acb9c4; font-size: 12.5px; }
.sgf-face { padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; }
.sgf-face:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }

/* ---- the composer ------------------------------------------------------- */

.sgf-say {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: #171a21;
  border-top: 1px solid #000000;
}
.sgf-in {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 9px;
  background: #16202d; color: #dcdedf;
  border: 1px solid #2a475e;
  font: inherit; font-size: 13px;
}
.sgf-in::placeholder { color: #acb9c4; opacity: 1; }
.sgf-in:focus { border-color: #66c0f4; outline: none; }
.sgf-in:disabled { color: #acb9c4; cursor: not-allowed; }
.sgf-send { flex: 0 0 auto; }
.sgf-send:disabled { background: #213043; color: #acb9c4; cursor: not-allowed; }
.sgf-send:disabled:hover { background: #213043; border-color: transparent; }

/* ---- the affordance, and its unread mark -------------------------------- */
/* [data-mf-open] is stamped on the control each surface already had -- Dream
   Seam's own status bar and Friends menu, the game frame's button row, the
   arcade hero -- so this sheet dresses the MARK rather than naming three
   surfaces' furniture.  The badge is the one number small enough to be
   glanceable chrome: it says there is something in there, and the window
   behind it is where the reading happens. */
/* Two markers, one look. [data-mf-badge] is the count on a DOOR, shown while
   the window is shut; [data-mf-tabcount] is the count on the World tab, shown
   while the window is open on somebody's card. They are never both up, and
   they are separate names because the mount paints every badge on the page
   from one rule and would otherwise take the tab's straight back down. */
[data-mf-open] { cursor: pointer; }
[data-mf-badge],
[data-mf-tabcount] {
  display: inline-block; min-width: 16px; margin-left: 6px;
  padding: 0 4px; border-radius: 8px;
  background: #ffb000; color: #171a21;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  font-style: normal;
}
[data-mf-badge][hidden] { display: none; }

/* The arcade wall has no button row of its own, so it gets one: a plate in the
   hero beside the cabinet-art switch, painted here rather than in that page's
   own stylesheet, which this file has no business editing. */
/* IT SITS UNDER THE CABINET-ART SWITCH, in the hero's own top-right corner.
   The hero is display:block with that switch absolutely positioned at
   top:22px/right:22px (metaeden.css) and a z-index of 3 over the art, so a
   third child in normal flow lands full-width across the middle of the
   picture. That is exactly what it did on the first pass in a browser. This
   mirrors the switch's own geometry instead, one row beneath it, and steps out
   of the way at that page's own 900px breakpoint where the switch itself moves
   to the bottom of the hero and the corner is no longer a corner. */
.sgf-hook {
  position: absolute; z-index: 3;
  top: 68px; right: 22px;
  display: flex; align-items: center;
}
@media (max-width: 900px) {
  .sgf-hook { position: static; margin: 14px 0 0; }
}
.sgf-hook-btn {
  padding: 7px 14px;
  background: #16202d; color: #dcdedf;
  border: 1px solid #2a475e;
  font: 13px "Motiva Sans", Arial, Helvetica, sans-serif; cursor: pointer;
}
.sgf-hook-btn:hover { border-color: #66c0f4; }
.sgf-hook-btn:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }

/* ---- narrow ------------------------------------------------------------- */
/* The two panes become two rows rather than one pane disappearing: a chat with
   no list is a different feature, and a list you have to go and find is the
   thing this window exists to stop. */
@media (max-width: 620px) {
  .sgf-win { right: 8px; left: 8px; width: auto; max-width: none; height: 420px; }
  .sgf-cols { flex-direction: column; }
  /* THE LIST TAKES ITS NATURAL HEIGHT AND THE SCROLLER IS WHAT IS FIXED, which
     is the way round the fixed-panel rule actually means. The first cut fixed
     the whole COLUMN at 118px, and since the visitor's own tile lives inside it
     the roster was left about 50px to scroll in: on a phone the first group
     heading and half a line of its empty text was the entire list. Found by
     opening it at 375px. */
  .sgf-list { flex: 0 0 auto; width: auto; border-right: 0; border-bottom: 1px solid #000000; }
  .sgf-people-scroll { flex: 0 0 108px; height: 108px; }
}