/* 状态容器 */
.zib-status-container {
  position: relative;
  display: inline-block;
}

/* 触发按钮样式 */
.zib-status-trigger {
  cursor: pointer;
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* 确保头像图片容器有正确的定位 */
.zib-status-trigger img {
  display: block;
  position: relative;
  z-index: 1;
}

/* 当前状态指示器 */
.zib-status-current {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 10;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* 状态点颜色 */
.status-online { background-color: #52c41a; }
.status-away { background-color: #faad14; }
.status-busy { background-color: #ff4d4f; }
.status-invisible { background-color: #722ed1; }
.status-offline { background-color: #8c8c8c; }

/* 状态文字颜色 */
.status-dot.online { background-color: #52c41a; }
.status-dot.away { background-color: #faad14; }
.status-dot.busy { background-color: #ff4d4f; }
.status-dot.invisible { background-color: #722ed1; }
.status-dot.offline { background-color: #8c8c8c; }

/* 下拉面板 */
.zib-status-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 10px 0;
  margin-top: 10px;
  display: none;
  z-index: 999;
}

/* 下拉箭头 */
.dropdown-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}

/* 状态选项 */
.zib-status-option {
  padding: 8px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.zib-status-option:hover {
  background-color: #f7f7f7;
}

/* 状态点 */
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 选中标记 */
.zib-status-option .fa-check {
  margin-left: auto;
  color: #1890ff;
  display: none;
}

.zib-status-option.active .fa-check {
  display: block;
}

/* 用户状态指示器 */
.user-status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 在评论列表中的状态样式 */
.comment-author .user-status-indicator {
  width: 10px;
  height: 10px;
  bottom: 0;
  right: -15px;
}

/* 状态选择器动画效果 */
.zib-status-dropdown {
  animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 状态点脉动效果（仅在线状态） */
.status-online {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .zib-status-current {
    width: 12px;
    height: 12px;
    border: 1.5px solid #fff;
    bottom: -1px;
    right: -1px;
  }
}

@media (max-width: 480px) {
  .zib-status-current {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    bottom: 0;
    right: 0;
  }
}