/* VStanced Lobby tweaks */

/* --- Downloads: amber, collapsible groups; forums stay muted --- */

.LobbyGroup.vst-download-group {
  border-left: 2px solid rgba(245, 165, 36, 0.45);
  margin-left: 4px;
  padding-left: 6px;
}

.LobbyGroup.vst-download-group > .LobbyGroup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f5a524;
  cursor: pointer;
  user-select: none;
}

.LobbyGroup.vst-download-group > .LobbyGroup-label::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}

.LobbyGroup.vst-download-group:not(.vst-collapsed) > .LobbyGroup-label::before {
  transform: rotate(90deg);
}

.LobbyGroup.vst-download-group > .LobbyGroup-label::after {
  content: "DOWNLOAD";
  margin-left: auto;
  padding: 3px 5px;
  border-radius: 3px;
  background: #f5a524;
  color: #15120a;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.LobbyGroup.vst-download-group > .LobbyGroup-label:hover {
  color: #ffbf4d;
}

.LobbyGroup.vst-download-group > .LobbyGroup-label:focus-visible {
  outline: 2px solid #f5a524;
  outline-offset: 2px;
  border-radius: 4px;
}

.LobbyGroup.vst-download-group.vst-collapsed > .LobbyGroup-channels {
  display: none;
}

.LobbyChannel.vst-download-channel .LobbyChannel-hash {
  color: #f5a524;
}

.LobbyChannel.vst-download-channel:not(.active) .LobbyChannel-name {
  color: #d9a441;
}

.LobbyChannel.vst-download-channel:not(.active):hover .LobbyChannel-name {
  color: #f5a524;
}

/* --- User badges: don't let core's packed style overlap the dots --- */

/* Lobby places PostUser badges beside the name, but core's .badges--packed
   still gives every Badge margin-left: -10px. With an 18px badge that pulls
   the suspended and group dots into each other (and the first into the
   username). Reset packing only for post/user badges. */
.PostUser .PostUser-badges.badges--packed {
  --packing-space: 0px;
  display: inline-flex;
  align-items: center;
  padding-inline-start: 0;
  gap: 5px;
}

.PostUser .PostUser-badges.badges--packed > li {
  display: inline-flex;
}

.PostUser .PostUser-badges.badges--packed .Badge {
  margin-left: 0;
}

.UserCard-content > .UserCard-badges.badges--packed {
  --packing-space: 0px;
  padding-inline-start: 0;
}

.UserCard-content > .UserCard-badges.badges--packed .Badge {
  margin-left: 0;
}

/* --- User Directory: space the username and its badges --- */

.UserCard-content > .UserCard-identity,
.UserCard-content > .UserCard-badges {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.UserCard-content > .UserCard-identity {
  margin: 0 8px 0 0;
}

.UserCard-content > .UserCard-badges {
  margin: 0;
  padding: 0;
  gap: 6px;
}

.UserCard-content > .UserCard-badges > li {
  margin: 0;
}

.UserCard-content > .UserCard-badges .Badge {
  margin-left: 0;
}

/* --- Narrow screens: keep menus and page controls inside the viewport --- */

@media (max-width: 767px) {
  /* Lobby's sidebar user panel sits at the bottom of the drawer. Its menus
     must open upward above the panel, not be positioned against the page top. */
  .LobbySidebar-user .Dropdown-menu,
  .LobbySidebar-controls .Dropdown-menu,
  .LobbySidebar-user .NotificationsDropdown .Dropdown-menu,
  .LobbySidebar-user .DialogsDropdown .Dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 160px) !important;
    margin: 0 !important;
    overflow-y: auto;
    transform: none !important;
    z-index: 10050;
  }

  /* The user-page title control (Posts/Discussions/...) was sitting under the
     fixed top bar and its search button. Put it below the bar instead. */
  .App-titleControl {
    top: 62px !important;
    left: 8px !important;
    right: auto !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 120px) !important;
    z-index: calc(var(--zindex-header) + 1);
  }

  .App-titleControl > .Button {
    height: 36px !important;
    padding: 0 10px !important;
  }

  /* Page controls (the user-page Edit/Controls menu was the visible one) are
     absolutely placed at the top-right by core, on top of the top bar's search
     button. Give them their own row under the bar, beside the title control. */
  .App-primaryControl {
    top: 62px !important;
    right: 8px !important;
    left: auto !important;
    margin: 0 !important;
    width: auto !important;
    z-index: calc(var(--zindex-header) + 1);
  }

  .App-primaryControl > .Button,
  .App-primaryControl > .Dropdown-toggle {
    height: 36px !important;
    padding: 0 10px !important;
  }
}

/* --- Post toolbar vs. its dropdown --- */

/* Lobby hides Button labels on the floating post toolbar (icon-only Reply /
   Like / ⋯). The same rule also hid the labels inside the ⋯ menu, leaving
   icon-only rows in a 160px box. Restore the menu labels and core's row
   sizing so Edit / Edit Poll / Delete are readable. */
.LobbyPost .Post-actions .Dropdown-menu .hasIcon .Button-label,
.LobbyPost .Post-actions .Dropdown-menu .Button-label,
.LobbyPost .Post-actions .Dropdown-menu .hasIcon .Button-labelText,
.LobbyPost .Post-actions .Dropdown-menu .Button-labelText {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
}

@media (min-width: 768px) {
  .Post-actions .Dropdown-menu > li > button,
  .Post-actions .Dropdown-menu > li > a {
    height: auto !important;
    min-width: 0 !important;
    padding: 8px 15px !important;
    line-height: 20px !important;
  }
}

/* --- Sidebar footer menus at tablet/desktop widths --- */

/* At >=768px the sidebar is a static column, and the footer menus (theme,
   flags, session) were absolutely positioned against their small toggle
   button, so a 200px menu opened leftwards past the screen edge. Anchor them
   to the footer panel instead, and let them fill its width. Notifications and
   dialogs keep Lobby's side panel beside the column. */
@media (min-width: 768px) {
  .LobbySidebar-user {
    position: relative;
  }

  /* Anchor footer menus to the footer panel, not to each 34px toggle. */
  .LobbySidebar-user .Dropdown {
    position: static !important;
  }

  .LobbySidebar-user .Dropdown-menu {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    margin: 0 0 6px !important;
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto;
    transform: none !important;
    z-index: 10050;
  }

  .LobbySidebar-user .NotificationsDropdown .Dropdown-menu,
  .LobbySidebar-user .DialogsDropdown .Dropdown-menu {
    left: calc(var(--lobby-sidebar-w) + 8px) !important;
    right: auto !important;
    bottom: 8px !important;
    width: auto !important;
    max-height: calc(100vh - 60px) !important;
  }
}

/* --- Sidebar category headings --- */

/* Use the same amber accent as the download groups for every category
   heading in the sidebar. */
.LobbyGroup > .LobbyGroup-label {
  color: #f5a524;
}

.LobbyGroup > .LobbyGroup-label:hover {
  color: #ffbf4d;
}

/* --- Old-site header wordmark --- */

/* The 1200x100 VStanced.com wordmark from the old gameportal skin. It is far
   too wide for the 260px sidebar mark, so show it as a banner at the top of
   the forum content instead. The PNG is transparent, so it sits directly on
   the page background. */
body:has(.LobbyShell-sidebar) .App-content::before {
  content: "";
  display: block;
  width: calc(100% - 32px);
  max-width: 900px;
  aspect-ratio: 12 / 1;
  margin: 12px auto 10px;
  background: url("/assets/vstanced-header.png") center / contain no-repeat;
}

@media (max-width: 767px) {
  body:has(.LobbyShell-sidebar) .App-content::before {
    width: calc(100% - 16px);
    margin: 8px auto 6px;
  }

  body:has(.LobbyShell-sidebar):has(.App-titleControl) .App-content::before {
    margin-top: 52px;
  }
}

/* --- Chat full-page layout --- */

/* The chat page is its own full-height app. Do not stack the old-site wordmark
   above it, and on phones leave room for Lobby's fixed tab bar so the message
   composer is not hidden underneath. */
body.ChatFullPage .App-content::before {
  display: none;
}

@media (max-width: 767px) {
  body.ChatFullPage .ChatPage {
    height: calc(100vh - 56px - 68px);
    height: calc(100dvh - 56px - 68px);
  }
}

/* The maintenance banner is admin-only and would push the chat composer under
   Lobby's tab bar. The chat page is already a deliberate admin/test surface. */
body.ChatFullPage .Alert--maintenanceMode {
  display: none !important;
}

/* The chat page carries its own channel title and back control. */
body.ChatFullPage .App-titleControl {
  display: none !important;
}

@media (min-width: 768px) {
  /* No Lobby top bar on desktop/tablet, so the chat page can use the full
     viewport height instead of reserving the core header's 60px. */
  body.ChatFullPage .ChatPage {
    height: 100vh;
    height: 100dvh;
  }
}

/* Keep the extension's footer chat button as a quick action; the duplicate
   "Explore" navigation group is hidden below. */

/* The extension also registers a core navigation item, which Lobby renders as
   an "Explore" group at the bottom of the sidebar. Chat already has its proper
   entry above the categories; hide the duplicate (and the empty group heading). */
.LobbyGroup li.item-chat {
  display: none !important;
}

.LobbyGroup:has(> .LobbySidebar-nav > li.item-chat:only-child) {
  display: none !important;
}

/* --- Short viewports (landscape phones / small windows) --- */

/* The tag header's sort/filter dropdown is an absolutely-positioned menu on
   tablet widths. On a 390px-tall landscape viewport the last three options
   fell below the screen. Turn it into a scrollable bottom sheet there. */
@media (min-width: 768px) and (max-height: 560px) {
  .LobbyChannelHeader-tools .Dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 !important;
    overflow-y: auto;
    transform: none !important;
    z-index: 10050;
  }
}