/* 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;
}
.sgf-foot-row { display: flex; align-items: center; gap: 9px; }
.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-1683[Q]: the way into the city, one link per row under the tile.  The
   window's own link blue on the footer plate (#66c0f4 on #16202d, 8.1:1), and
   a home link in the name-tile white so "your door" reads as yours. */
.sgf-city { display: flex; flex-direction: column; gap: 4px; }
.sgf-go,
.sgf-go:link,
.sgf-go:visited {
  display: block; color: #66c0f4; font-size: 12px; line-height: 1.35;
  text-decoration: underline; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sgf-go.home, .sgf-go.home:link, .sgf-go.home:visited { color: #dcdedf; }
.sgf-go:hover { color: #9fd6fa; }
.sgf-go:focus-visible { outline: 2px solid #66c0f4; outline-offset: 1px; }
/* 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; }

/* ---- 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; }
}