.piklance-brand-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}

.piklance-brand-logo.dark-logo {
  display: none;
}

[data-theme="dark"] .piklance-brand-logo.light-logo {
  display: none;
}

[data-theme="dark"] .piklance-brand-logo.dark-logo {
  display: block;
}

.piklance-brand-logo.force-dark,
.piklance-brand-logo.force-light {
  display: block;
}

.piklance-brand-icon {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.logo .piklance-brand-logo {
  margin-inline: auto;
}

.brand .piklance-brand-logo,
.admin-brand .piklance-brand-logo {
  width: 138px;
}

.footer-brand .piklance-brand-logo {
  width: 132px;
}

.piklance-loading-icon {
  display: block;
  margin-inline: auto;
  width: 58px;
  height: 58px;
  object-fit: contain;
  animation: piklance-logo-pulse 1.2s ease-in-out infinite;
}

.piklance-image-loading {
  opacity: .28;
  background: linear-gradient(100deg, rgba(125, 112, 190, .08) 20%, rgba(125, 112, 190, .24) 40%, rgba(125, 112, 190, .08) 60%);
  background-size: 220% 100%;
  animation: piklance-image-shimmer 1.25s linear infinite;
}

.piklance-image-ready {
  animation: piklance-image-reveal .3s ease both;
}

.piklance-background-loading {
  position: relative;
  overflow: hidden;
}

.piklance-background-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(125, 112, 190, .12) 20%, rgba(255, 255, 255, .42) 40%, rgba(125, 112, 190, .12) 60%);
  background-size: 220% 100%;
  animation: piklance-image-shimmer 1.25s linear infinite;
}

@keyframes piklance-image-shimmer {
  to { background-position-x: -220%; }
}

@keyframes piklance-image-reveal {
  from { opacity: .25; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .piklance-image-loading,
  .piklance-image-ready,
  .piklance-background-loading::after { animation: none; }
}

@keyframes piklance-logo-pulse {
  50% { transform: scale(.94); opacity: .78; }
}

@media (max-width: 640px) {
  .piklance-brand-logo { width: 126px; }
  .piklance-brand-icon { width: 36px; height: 36px; }
  .brand .piklance-brand-logo,
  .admin-brand .piklance-brand-logo { width: 112px; }
}

.pagination-load-more {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

.older-messages-button,
.conversation-load-more {
  display: block;
  width: fit-content;
  margin: 10px auto;
}