/* V308 — restore the actual OLD mobile Legacy dock rail.
   V307 had the five correct circular controls but accidentally left their
   parent account card visually transparent, which made them look like five
   unrelated floating buttons. The original dock is ONE rounded rail that
   contains those five circles. */

@media (max-width: 700px) {
  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 70px !important;
    height: 70px !important;
    margin: 16px 0 0 !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    border-radius: 9999px !important;
    overflow: hidden !important;

    /* This visible capsule is the missing part of the old dock. */
    background:
      linear-gradient(
        105deg,
        var(--glass-highlight-soft) 0%,
        transparent 24%,
        transparent 72%,
        var(--glass-highlight-soft) 100%
      ),
      var(--glass-card-strong) !important;
    border: 1px solid var(--glass-border-soft) !important;
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      inset 0 -1px 0 var(--glass-border-soft),
      0 14px 42px var(--glass-shadow) !important;
  }

  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons:not(.hidden):not([hidden]),
  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar #authenticatedAccountButtons:not(.hidden):not([hidden]) {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Keep the five old circular controls fully inside the capsule. */
  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons > button,
  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] .card.account-bar #authenticatedAccountButtons > button {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    border-radius: 50% !important;
  }
}

@media (max-width: 360px) {
  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #appSection > .card.account-bar {
    min-height: 66px !important;
    height: 66px !important;
    padding: 8px 10px !important;
  }

  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons:not(.hidden):not([hidden]) {
    height: 50px !important;
  }

  body[data-auth-state="authenticated"][data-mobile-dock-position="legacy"] #authenticatedAccountButtons > button {
    flex-basis: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
}