/* KOVAT Chat v1.9.4 - hard avatar crop fix
   Forces profile pictures to remain circular even when an animated overlay/frame is active. */

:root {
  --kovat-avatar-size: 42px;
  --kovat-avatar-sm: 32px;
  --kovat-avatar-md: 42px;
  --kovat-avatar-lg: 56px;
}

/* Core avatar containers */
.avatar,
.user-avatar,
.profile-avatar,
.member-avatar,
.chat-avatar,
.message-avatar,
.friend-avatar,
.kovat-avatar,
.avatar-wrap,
.avatar-frame,
.avatar-overlay-wrap,
.profile-picture-wrap,
.pfp-wrap,
.member-pfp,
.msg-pfp {
  position: relative !important;
  width: var(--kovat-avatar-size) !important;
  height: var(--kovat-avatar-size) !important;
  min-width: var(--kovat-avatar-size) !important;
  min-height: var(--kovat-avatar-size) !important;
  max-width: var(--kovat-avatar-size) !important;
  max-height: var(--kovat-avatar-size) !important;
  border-radius: 9999px !important;
  flex: 0 0 var(--kovat-avatar-size) !important;
  overflow: visible !important; /* overlay may extend; inner image is clipped below */
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Context-specific wrapper sizes */
.message .avatar-wrap,
.chat-message .avatar-wrap,
.msg .avatar-wrap {
  --kovat-avatar-size: var(--kovat-avatar-sm) !important;
}

.friend-card .avatar-wrap,
.member .avatar-wrap,
.user-card .avatar-wrap {
  width: var(--kovat-avatar-md) !important;
  height: var(--kovat-avatar-md) !important;
  min-width: var(--kovat-avatar-md) !important;
  min-height: var(--kovat-avatar-md) !important;
  max-width: var(--kovat-avatar-md) !important;
  max-height: var(--kovat-avatar-md) !important;
  flex: 0 0 var(--kovat-avatar-md) !important;
}

.settings-page .avatar-wrap,
.profile-page .avatar-wrap {
  --kovat-avatar-size: var(--kovat-avatar-lg) !important;
}

/* Image inside an avatar container — fills the container which provides fixed sizing */
.avatar img,
.user-avatar img,
.profile-avatar img,
.member-avatar img,
.chat-avatar img,
.message-avatar img,
.friend-avatar img,
.kovat-avatar img,
.avatar-wrap img,
.avatar-frame img,
.avatar-overlay-wrap img,
.profile-picture-wrap img,
.pfp-wrap img,
.member-pfp img,
.msg-pfp img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 9999px !important;
  clip-path: circle(50% at 50% 50%) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Standalone avatar img elements — get fixed size from the CSS variable, NOT 100% */
img.avatar,
img.user-avatar,
img.profile-avatar,
img.member-avatar,
img.chat-avatar,
img.message-avatar,
img.friend-avatar,
img.kovat-avatar,
img.pfp,
img.profile-pic,
img.profile-picture {
  display: inline-block !important;
  width: var(--kovat-avatar-size) !important;
  height: var(--kovat-avatar-size) !important;
  min-width: var(--kovat-avatar-size) !important;
  min-height: var(--kovat-avatar-size) !important;
  max-width: var(--kovat-avatar-size) !important;
  max-height: var(--kovat-avatar-size) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 9999px !important;
  clip-path: circle(50% at 50% 50%) !important;
  flex: 0 0 var(--kovat-avatar-size) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Context-specific sizes for standalone avatar imgs */
.message img.avatar,
.message img.user-avatar,
.chat-message img.avatar,
.msg img.avatar {
  width: var(--kovat-avatar-sm) !important;
  height: var(--kovat-avatar-sm) !important;
  min-width: var(--kovat-avatar-sm) !important;
  min-height: var(--kovat-avatar-sm) !important;
  flex: 0 0 var(--kovat-avatar-sm) !important;
}

.friend-card img.avatar,
.member img.avatar,
.user-card img.avatar {
  width: var(--kovat-avatar-md, var(--kovat-avatar-size)) !important;
  height: var(--kovat-avatar-md, var(--kovat-avatar-size)) !important;
  min-width: var(--kovat-avatar-md, var(--kovat-avatar-size)) !important;
  min-height: var(--kovat-avatar-md, var(--kovat-avatar-size)) !important;
  flex: 0 0 var(--kovat-avatar-md, var(--kovat-avatar-size)) !important;
}

.settings-page img.avatar,
.profile-page img.avatar {
  width: var(--kovat-avatar-lg) !important;
  height: var(--kovat-avatar-lg) !important;
  min-width: var(--kovat-avatar-lg) !important;
  min-height: var(--kovat-avatar-lg) !important;
  flex: 0 0 var(--kovat-avatar-lg) !important;
}

/* If the markup contains a dedicated photo layer, clip that layer too. */
.avatar-photo,
.avatar-image,
.pfp-image,
.profile-image,
.avatar-inner,
.avatar-img-clip,
.kovat-avatar-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 9999px !important;
  clip-path: circle(50% at 50% 50%) !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.avatar-photo img,
.avatar-image img,
.pfp-image img,
.profile-image img,
.avatar-inner img,
.avatar-img-clip img,
.kovat-avatar-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 9999px !important;
  clip-path: circle(50% at 50% 50%) !important;
}

/* Force wrapped imgs to always fill their container (overrides context-specific img.avatar sizes) */
.kovat-avatar-crop-host .kovat-avatar-photo .kovat-avatar-photo-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex: none !important;
  aspect-ratio: 1 / 1 !important;
}

/* Overlay/frame sits above the clipped image but must not resize the image. */
.avatar-overlay,
.profile-overlay,
.pfp-overlay,
.avatar-frame-effect,
.kovat-profile-overlay,
.kovat-avatar-overlay,
[data-overlay],
[data-profile-overlay] {
  position: absolute !important;
  inset: -12% !important;
  width: 124% !important;
  height: 124% !important;
  border-radius: 9999px !important;
  pointer-events: none !important;
  z-index: 3 !important;
  object-fit: contain !important;
  overflow: visible !important;
}

.avatar-overlay img,
.profile-overlay img,
.pfp-overlay img,
.avatar-frame-effect img,
.kovat-profile-overlay img,
.kovat-avatar-overlay img,
[data-overlay] img,
[data-profile-overlay] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

/* Message rows should not stretch avatars. */
.message-row .avatar,
.message-row .message-avatar,
.message .avatar,
.message .message-avatar,
.chat-message .avatar,
.chat-message .message-avatar {
  align-self: flex-start !important;
}

/* Size variants */
.avatar-sm,
.small-avatar,
.member-list .avatar,
.member-list .member-avatar,
.sidebar .avatar,
.sidebar .user-avatar {
  --kovat-avatar-size: var(--kovat-avatar-sm);
}

.avatar-lg,
.large-avatar,
.profile-page .avatar,
.settings-page .profile-avatar {
  --kovat-avatar-size: var(--kovat-avatar-lg);
}

/* Sidebar collapse — smooth transition and hide text when collapsed */
.sidebar {
  transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease !important;
}

.sidebar.collapsed .nav button b,
.sidebar.collapsed .nav a b,
.sidebar.collapsed .brand .brand-ai,
.sidebar.collapsed .brand .brand-main {
  display: none !important;
}

.sidebar.collapsed .nav button,
.sidebar.collapsed .nav a {
  justify-content: center !important;
  padding: 10px 0 !important;
  gap: 0 !important;
}

.sidebar.collapsed .nav button span {
  font-size: 22px !important;
}

.sidebar.collapsed .brand {
  justify-content: center !important;
}

.sidebar.collapsed .brand img.brand-logo {
  width: 32px !important;
  height: 32px !important;
}

.sidebar.collapsed .logout {
  text-align: center !important;
  font-size: 0 !important;
}

.sidebar.collapsed .logout::before {
  content: "🚪" !important;
  font-size: 20px !important;
}

.sidebar.collapsed ~ .content {
  margin-left: 0 !important;
}

/* Nav button selection animation */
.nav button {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}

.nav button:hover {
  transform: translateX(2px) !important;
}

.nav button.active {
  transform: translateX(2px) !important;
}

.sidebar.collapsed .nav button:hover {
  transform: scale(1.08) !important;
}

.sidebar.collapsed .nav button.active {
  transform: scale(1.08) !important;
}