/* The impersonation strip (impersonations/_strip; operator console spec §9),
   one root: .impersonation-strip, first in <body> of every App layout while
   an Operator acts as a User.

   In the flow and pinned: it takes a row above the page rather than
   covering its top, so nothing the User would see is hidden behind it.
   What is itself pinned to the top of the window (the shell's header, the
   full-height sidebar, the phone's floating sidebar toggle, onboarding's
   progress bar, History's drawer) sits below it by
   --impersonation-strip-height, which application.css declares as 0 and
   the one rule outside the root below sets while the strip is drawn and
   open. Keyed on <html>, which carries both facts.

   Deep indigo (--color-operator), which nothing else in the App uses, so it
   reads as the Console's and not part of the User's page. One line at
   every width: the reason ellipsises with its full text in a title, and on
   a phone only the User's name, End and the collapse button stay.

   Collapsed (data-impersonation-strip-collapsed on <html>, the
   impersonation-strip controller) the bar takes no space and a small tab
   hangs from the top edge to bring it back: centred, and on a phone in the
   top left corner, clear of the header's Feedback button (call C4) and left
   of the floating sidebar toggle. */

:root:has(> body > .impersonation-strip):not([data-impersonation-strip-collapsed]) {
  --impersonation-strip-height: 2.5rem;
}

.impersonation-strip {
  position: sticky;
  top: 0;
  /* Over the phone's open sidebar (100) and its toggle (101), which sit
     below it rather than under it. */
  z-index: 110;
  color: var(--color-on-operator);
  font-size: 0.8rem;

  .bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    height: var(--impersonation-strip-height);
    padding: 0 1.25rem;
    background: var(--color-operator);
    white-space: nowrap;
  }

  .chip {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
  }

  .acting-as,
  .name,
  .reason {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The name alone is the phone's; elsewhere it is inside .acting-as. */
  .name {
    display: none;
  }

  .reason {
    flex: 1 1 0;
    opacity: 0.8;
  }

  .since {
    flex-shrink: 0;
    opacity: 0.8;
  }

  .button_to {
    flex-shrink: 0;
  }

  .button {
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
  }

  .collapse,
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: inherit;
    background: var(--color-operator);
    cursor: pointer;
  }

  .collapse {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);

    &:hover {
      background: rgb(255 255 255 / 0.15);
    }
  }

  .tab {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 1rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  [data-impersonation-strip-collapsed] & {
    .bar {
      display: none;
    }

    .tab {
      display: flex;
    }
  }

  @media (max-width: 40rem) {
    .bar {
      /* The phone shell's gutter, as a literal: --app-gutter is declared on
         .app-shell, and the strip is not inside it. */
      padding: 0 0.9rem;
    }

    .chip,
    .acting-as,
    .reason,
    .since {
      display: none;
    }

    .name {
      display: block;
      flex: 1 1 0;
    }

    /* The floating sidebar toggle starts 1.25rem in, so the corner left of
       it is the one place on a phone's bar the tab covers nothing. */
    .tab {
      left: 0;
      transform: none;
      width: 1.25rem;
      border-radius: 0 0 var(--radius-sm) 0;
    }
  }
}