/*
 * The profile drawer (specs/005 FR-052, contracts/ui-meet.md "Profile drawer"): 360px
 * from the right on larger screens, the whole screen on a phone. Opening and closing are
 * the named moments (--anim-drawer-enter/-leave), the picture's are --anim-avatar-*,
 * all switched off under reduced motion (shared/animations.css).
 */

/* The drawer is a panel, the same size and in the same place for everyone (owner's request,
   2026-10-20), with room on every side for a frame to sit on its edges and stick out
   (shared/profile_frame.css). The room is where Discord draws a frame around a card, as %
   of the card's width: its layers start 25.33 above the card, overhang 4.67 at each side
   at most, and its bottom layers end up to 17.67 below. */
dialog.profile-drawer {
  --drawer-width: 360px;
  --drawer-gap: var(--space-3);
  --drawer-room-top: 25.33;
  --drawer-room-side: 4.67;
  --drawer-room-bottom: 17.67;
  /* The panel's width: 360px, or less when the screen and the room at the sides need it. */
  --drawer-card-w: min(var(--drawer-width), calc((100vw - 2 * var(--drawer-gap)) / (1 + var(--drawer-room-side) / 50)));
  padding: 0;
  overflow: hidden;
  color: var(--color-foreground);
  background-color: var(--color-deep-night);
  border: 0;
}

dialog.profile-drawer[open] {
  position: fixed;
  inset:
    calc(var(--drawer-gap) + var(--drawer-card-w) * var(--drawer-room-top) / 100)
    calc(var(--drawer-gap) + var(--drawer-card-w) * var(--drawer-room-side) / 100)
    calc(var(--drawer-gap) + var(--drawer-card-w) * var(--drawer-room-bottom) / 100)
    auto;
  width: var(--drawer-card-w);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  /* The pieces stick out past the panel; its content scrolls inside (.profile-card). */
  overflow: visible;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-dialog);
  /* The named moments decide; the sheet's own slide is off. */
  animation: none;
}

/* With a theme the frame is the edge: no outline of the panel's own shows past its art, and
   the card (and its effect) reach the panel's very edges. The card's surface is the
   panel's (shared/profile_frame.css), so the back bottom can lie behind it. */
dialog.profile-drawer[open]:has(.profile-frame__layers--on) {
  border: 0;
  background-color: transparent;
}

dialog.profile-drawer > turbo-frame {
  display: block;
  height: 100%;
}

/* A phone: the panel is centred and as wide as the screen allows. */
@media (max-width: 639px) {
  dialog.profile-drawer {
    --drawer-card-w: calc((100vw - 2 * var(--drawer-gap)) / (1 + var(--drawer-room-side) / 50));
  }

  dialog.profile-drawer[open] {
    left: calc(var(--drawer-gap) + var(--drawer-card-w) * var(--drawer-room-side) / 100);
    width: auto;
  }
}

dialog.profile-drawer.is-entering { animation: var(--anim-drawer-enter); }
dialog.profile-drawer.is-leaving { animation: var(--anim-drawer-leave); }

dialog.profile-drawer::backdrop {
  background-color: rgba(27, 26, 35, 0.45);
}

.profile-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* In the drawer the card fills the panel. Its banner, picture and name stay put under the
   frame (the decoration sits on the picture), and the sections below scroll. */
dialog.profile-drawer .profile-card {
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* Only the sections give way on a short panel; the banner and picture keep their size. */
dialog.profile-drawer .profile-card > :not(.profile-card__body) {
  flex-shrink: 0;
}

dialog.profile-drawer .profile-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.profile-card__banner {
  position: relative;
  height: 96px;
  background-color: var(--group-color, var(--color-purple));
}

.profile-card__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  min-height: 0;
  color: var(--color-foreground);
  background-color: color-mix(in srgb, var(--color-deep-night) 60%, transparent);
}

.profile-card__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: -48px;
  padding: 0 var(--space-4);
}

.profile-card__avatar {
  width: 88px;
  height: 88px;
  border: 4px solid var(--color-deep-night);
}

.profile-card__name {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.profile-card__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.profile-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.profile-card__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-card__heading {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  color: var(--color-comment);
  text-transform: uppercase;
}

.profile-card__icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-card__server .server-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-standard);
}

.profile-card__link {
  align-self: flex-start;
  font-size: var(--text-md);
}