/* ============ rich profile popout (profile.js) ============ */
/* Reuses the app's dark-theme CSS vars from styles.css. */

.pcard {
  position: fixed; z-index: 400; width: 340px; max-width: calc(100vw - 16px);
  background: var(--bg-floating); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--elev-high);
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto;
  animation: pcard-in calc(150ms * var(--anim)) var(--ease-out);
}
@keyframes pcard-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { animation: none; }
}

/* banner: an uploaded image, otherwise the profile gradient shows through (the
   element carries background:transparent) or a solid accent colour */
.pcard-banner {
  height: 110px; position: relative; overflow: hidden;
  background: var(--banner-a, #5865f2);
}
.pcard-banner.has-image { background-color: var(--bg-deep); }
.pcard-banner .banner-img { pointer-events: none; }

/* avatar overlapping the banner's bottom-left, with presence dot */
.pcard-avatar {
  position: relative; padding: 0 16px; margin-top: -40px; height: 80px;
}
.pcard-avatar .avatar {
  width: 80px; height: 80px; border: 6px solid var(--profile-top, var(--bg-floating));
  border-radius: 50%; background: var(--bg-floating); box-sizing: border-box;
}
.pcard-avatar .avatar-initials { font-size: 30px; }
/* the avatar carries a 6px border, so nudge the dot out by that much to keep it
   sitting on the avatar's bottom-right corner like it does elsewhere */
.pcard-avatar .avatar-status.big { border-color: var(--profile-top, var(--bg-floating)); right: -10px; bottom: -10px; }

/* header: display name + @username + bot badge */
.pcard-head { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 2px; }
.pcard-name {
  color: var(--text-header); font-size: 20px; font-weight: 800; line-height: 1.2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pcard-username { color: var(--text-muted); font-size: 14px; }
.pcard-custom {
  margin-top: 6px; color: var(--text-normal); font-size: 13px;
  white-space: pre-wrap; word-break: break-word;
}

.pcard-divider { height: 1px; background: #3f4147; margin: 12px 16px 0; }

.pcard-section { padding: 10px 16px 0; }
.pcard-section .field-label { margin-bottom: 6px; }
.pcard-about {
  margin: 0; color: var(--text-normal); font-size: 13px;
  white-space: pre-wrap; word-break: break-word;
}
.pcard-since { margin: 0; color: var(--text-normal); font-size: 13px; }

/* mutual servers list */
.pcard-mutuals { display: flex; flex-direction: column; gap: 6px; }
.pcard-mutual { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pcard-mutual-icon {
  width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--bg-active);
  color: var(--text-normal); font-size: 12px; font-weight: 700;
}
.pcard-mutual-icon img { width: 100%; height: 100%; object-fit: cover; }
.pcard-mutual-name {
  color: var(--text-normal); font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard-mutual-more { color: var(--text-muted); font-size: 12px; padding-left: 42px; }

/* action buttons */
.pcard-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; }

/* private note */
.pcard-note { padding: 12px 16px 16px; }
.pcard-note .field-label { margin-bottom: 6px; }
.pcard-note-input {
  width: 100%; box-sizing: border-box; resize: none; font-family: inherit;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-normal); font-size: 13px; padding: 8px; outline: none;
  transition: background-color calc(120ms * var(--anim)) var(--ease), border-color calc(120ms * var(--anim)) var(--ease);
}
.pcard-note-input::placeholder { color: var(--text-faint); }
.pcard-note-input:hover { background: var(--bg-deepest); }
.pcard-note-input:focus { background: var(--bg-deepest); border-color: #3f4147; }
.pcard-note-saved { display: block; margin-top: 4px; font-size: 11px; }